[WIP] chore(xplat): Hook up Dropdown to cross-platform-adapter

apps/xplat-v9/StrictDomDemo.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Label } from '@fluentui/react-label';
+import { Dropdown, Option } from '@fluentui/react-combobox';
 import { mergeClasses, makeStyles, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { FluentProvider } from '@fluentui/react-provider';
 import { tokens, webLightTheme } from '@fluentui/react-theme';
@@ -24,6 +25,12 @@ export const StrictDomDemo = () => {
   return (
     <FluentProvider theme={webLightTheme} className={mergeClasses(classNames.root)}>
       <Label required>Label</Label>
+      <h1>Dropdown</h1>
+      <Dropdown inlinePopup>
+        <Option>Option 1</Option>
+        <Option>Option 2</Option>
+        <Option>Option 3</Option>
+      </Dropdown>
       <ButtonStories />
     </FluentProvider>
   );

apps/xplat-v9/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@fluentui/react-button": "*",
+    "@fluentui/react-combobox": "*",
     "@fluentui/react-jsx-runtime": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-platform-adapter-preview": "*",

package.json

@@ -384,6 +384,7 @@
     "@types/jest-axe/axe-core": "4.7.2",
     "eslint": "7.25.0",
     "@mdx-js/loader/loader-utils": "~2.0.4",
+    "scheduler": "^0.20.2",
     "swc-loader": "^0.2.3",
     "prettier": "2.8.8",
     "puppeteer": "19.6.0"

packages/react-components/react-aria/etc/react-aria.api.md

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';

packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts

@@ -16,14 +16,14 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
   const attributeVisibilityRef = React.useRef(true);
 
   const removeAttribute = React.useCallback(() => {
-    activeParentRef.current?.removeAttribute('aria-activedescendant');
+    activeParentRef.current?.removeAttribute?.('aria-activedescendant');
   }, []);
   const setAttribute = React.useCallback((id?: string) => {
     if (id) {
       activeIdRef.current = id;
     }
     if (attributeVisibilityRef.current && activeIdRef.current) {
-      activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);
+      activeParentRef.current?.setAttribute?.('aria-activedescendant', activeIdRef.current);
     }
   }, []);
 
@@ -35,9 +35,9 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
     }
 
     if (isNavigatingWithKeyboard) {
-      active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+      active.setAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
     } else {
-      active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
+      active.removeAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
     }
   });
 
@@ -51,8 +51,8 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
   const blurActiveDescendant = React.useCallback(() => {
     const active = getActiveDescendant();
     if (active) {
-      active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);
-      active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
+      active.removeAttribute?.(ACTIVEDESCENDANT_ATTRIBUTE);
+      active.removeAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
     }
 
     removeAttribute();
@@ -69,10 +69,10 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
 
       scrollIntoView(nextActive, listboxRef.current);
       setAttribute(nextActive.id);
-      nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
+      nextActive.setAttribute?.(ACTIVEDESCENDANT_ATTRIBUTE, '');
 
       if (focusVisibleRef.current) {
-        nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+        nextActive.setAttribute?.(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
       }
     },
     [listboxRef, blurActiveDescendant, setAttribute],

packages/react-components/react-card/etc/react-card.api.md

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-combobox/package.json

@@ -39,6 +39,7 @@
     "@fluentui/react-field": "^9.1.58",
     "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-jsx-runtime": "^9.0.34",
+    "@fluentui/react-platform-adapter-preview": "^0.0.0",
     "@fluentui/react-portal": "^9.4.18",
     "@fluentui/react-positioning": "^9.14.2",
     "@fluentui/react-shared-contexts": "^9.15.2",

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useActiveDescendant } from '@fluentui/react-aria';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import {
+  ChevronDownRegular as ChevronDownIcon,
+  DismissRegular as DismissIcon,
+} from '@fluentui/react-platform-adapter-preview';
 import {
   getPartitionedNativeProps,
   mergeCallbacks,

packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts

@@ -1,6 +1,6 @@
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { iconSizes } from '../../utils/internalTokens';
 import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 

packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { useActiveDescendant } from '@fluentui/react-aria';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import {
+  ChevronDownRegular as ChevronDownIcon,
+  DismissRegular as DismissIcon,
+} from '@fluentui/react-platform-adapter-preview';
 import {
   getPartitionedNativeProps,
   mergeCallbacks,

packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts

@@ -1,7 +1,7 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { iconSizes } from '../../utils/internalTokens';
 import type { DropdownSlots, DropdownState } from './Dropdown.types';
 
@@ -239,12 +239,12 @@ const useIconStyles = makeStyles({
 const useBaseClearButtonStyle = makeResetStyles({
   alignSelf: 'center',
   backgroundColor: tokens.colorTransparentBackground,
-  border: 'none',
+  ...shorthands.borderStyle('none'),
   cursor: 'pointer',
   height: 'fit-content',
-  margin: 0,
+  ...shorthands.margin(0),
   marginRight: tokens.spacingHorizontalMNudge,
-  padding: 0,
+  ...shorthands.padding(0),
   position: 'relative',
 
   ...createFocusOutlineStyle(),

packages/react-components/react-combobox/src/components/Option/useOption.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
-import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-platform-adapter-preview';
 import { useListboxContext_unstable } from '../../contexts/ListboxContext';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { OptionProps, OptionState } from './Option.types';

packages/react-components/react-combobox/src/components/Option/useOptionStyles.styles.ts

@@ -1,7 +1,7 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import type { OptionSlots, OptionState } from './Option.types';
 
 export const optionClassNames: SlotClassNames<OptionSlots> = {

packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.styles.ts

@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-theme';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-platform-adapter-preview';
 import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
 export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {

packages/react-components/react-divider/etc/react-divider.api.md

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-image/etc/react-image.api.md

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-label/etc/react-label.api.md

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-link/etc/react-link.api.md

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';

packages/react-components/react-platform-adapter-preview/etc/react-platform-adapter-preview.api.md

@@ -4,6 +4,12 @@
 
 ```ts
 
+/// <reference types="react" />
+
+import { Checkmark12Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
+import { ChevronDownRegular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import type { GriffelStyle } from '@griffel/react';
 import { makeStyles } from '@griffel/react';
 import { makeStyles as makeStylesCore } from '@griffel/core';
@@ -15,6 +21,14 @@ import { TextDirectionProvider } from '@griffel/react';
 import type { Theme } from '@fluentui/react-theme';
 import { useRenderer_unstable } from '@griffel/react';
 
+export { Checkmark12Filled }
+
+export { CheckmarkFilled }
+
+export { ChevronDownRegular }
+
+export { DismissRegular }
+
 // @public (undocumented)
 export const getStylesFromClassName: (className: string) => {
     [key: string]: unknown;

packages/react-components/react-platform-adapter-preview/package.json

@@ -34,6 +34,7 @@
     "@stylexjs/stylex": "^0.5.1"
   },
   "dependencies": {
+    "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-shared-contexts": "^9.15.2",
     "@fluentui/react-theme": "^9.1.19",
     "@griffel/core": "^1.14.1",

packages/react-components/react-platform-adapter-preview/src/icons/icons.native.tsx

@@ -0,0 +1,7 @@
+import { html } from 'react-strict-dom';
+
+// TODO create real wrappers for svg icons
+export const Checkmark12Filled = html.span;
+export const CheckmarkFilled = html.span;
+export const ChevronDownRegular = html.span;
+export const DismissRegular = html.span;

packages/react-components/react-platform-adapter-preview/src/icons/icons.tsx

@@ -0,0 +1 @@
+export { Checkmark12Filled, CheckmarkFilled, ChevronDownRegular, DismissRegular } from '@fluentui/react-icons';

packages/react-components/react-platform-adapter-preview/src/index.ts

@@ -1,5 +1,6 @@
 export { XPlatProvider, suppressCssVariableInsertion } from './XPlatProvider/XPlatProvider';
 export type { XPlatProviderProps } from './XPlatProvider/XPlatProvider.types';
+export { Checkmark12Filled, CheckmarkFilled, ChevronDownRegular, DismissRegular } from './icons/icons';
 export { jsxPlatformAdapter } from './jsx/jsxPlatformAdapter';
 export { getStylesFromClassName } from './styling/classNameMap';
 export { makeResetStyles } from './styling/makeResetStyles';