feat(react-headless-components-preview): add Dropdown component and stories

change/@fluentui-react-headless-components-preview-17c2b97d-c15d-45a5-a29a-1bcac5b709ad.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add Dropdown component",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js

@@ -8,6 +8,7 @@ import * as Checkbox from '@fluentui/react-headless-components-preview/checkbox'
 import * as Dialog from '@fluentui/react-headless-components-preview/dialog';
 import * as Divider from '@fluentui/react-headless-components-preview/divider';
 import * as Drawer from '@fluentui/react-headless-components-preview/drawer';
+import * as Dropdown from '@fluentui/react-headless-components-preview/dropdown';
 import * as Field from '@fluentui/react-headless-components-preview/field';
 import * as Image from '@fluentui/react-headless-components-preview/image';
 import * as Input from '@fluentui/react-headless-components-preview/input';
@@ -44,6 +45,7 @@ console.log({
   Dialog,
   Divider,
   Drawer,
+  Dropdown,
   Field,
   Image,
   Input,

packages/react-components/react-headless-components-preview/library/etc/dropdown.api.md

@@ -0,0 +1,113 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { DropdownBaseHookProps } from '@fluentui/react-combobox';
+import type { DropdownBaseHookState } from '@fluentui/react-combobox';
+import { DropdownContextValues } from '@fluentui/react-combobox';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElement } from '@fluentui/react-utilities';
+import { ListboxContextValues as ListboxContextValues_2 } from '@fluentui/react-combobox';
+import type { ListboxProps as ListboxProps_2 } from '@fluentui/react-combobox';
+import type { ListboxSlots as ListboxSlots_2 } from '@fluentui/react-combobox';
+import { ListboxState as ListboxState_2 } from '@fluentui/react-combobox';
+import type { OptionGroupProps as OptionGroupProps_2 } from '@fluentui/react-combobox';
+import type { OptionGroupSlots as OptionGroupSlots_2 } from '@fluentui/react-combobox';
+import { OptionGroupState as OptionGroupState_2 } from '@fluentui/react-combobox';
+import type { OptionProps as OptionProps_2 } from '@fluentui/react-combobox';
+import type { OptionSlots as OptionSlots_2 } from '@fluentui/react-combobox';
+import { OptionState as OptionState_2 } from '@fluentui/react-combobox';
+import type * as React_2 from 'react';
+
+// @public
+export const Dropdown: ForwardRefComponent<DropdownProps>;
+
+// @public (undocumented)
+export type DropdownProps = Omit<DropdownBaseHookProps, 'inlinePopup' | 'mountNode'>;
+
+// @public (undocumented)
+export type DropdownState = DropdownBaseHookState & {
+    button: {
+        'data-state'?: 'open' | 'closed';
+        'data-disabled'?: string;
+        'data-placeholder'?: string;
+    };
+};
+
+// @public
+export const Listbox: ForwardRefComponent<ListboxProps>;
+
+// @public
+export type ListboxContextValues = ListboxContextValues_2;
+
+// @public
+export type ListboxProps = ListboxProps_2;
+
+// @public (undocumented)
+export type ListboxSlots = ListboxSlots_2;
+
+// @public
+export type ListboxState = ListboxState_2;
+
+// @public
+const Option_2: ForwardRefComponent<OptionProps>;
+export { Option_2 as Option }
+
+// @public
+export const OptionGroup: ForwardRefComponent<OptionGroupProps>;
+
+// @public
+export type OptionGroupProps = OptionGroupProps_2;
+
+// @public (undocumented)
+export type OptionGroupSlots = OptionGroupSlots_2;
+
+// @public
+export type OptionGroupState = OptionGroupState_2;
+
+// @public
+export type OptionProps = OptionProps_2;
+
+// @public (undocumented)
+export type OptionSlots = OptionSlots_2;
+
+// @public
+export type OptionState = OptionState_2 & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+    };
+};
+
+// @public
+export const renderDropdown: (state: DropdownState, contextValues: DropdownContextValues) => JSXElement;
+
+// @public
+export const renderListbox: (state: ListboxState_2, contextValues: ListboxContextValues_2) => JSXElement;
+
+// @public
+export const renderOption: (state: OptionState_2) => JSXElement;
+
+// @public
+export const renderOptionGroup: (state: OptionGroupState_2) => JSXElement;
+
+// @public
+export const useDropdown: (props: DropdownProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownState;
+
+// @public
+export const useListbox: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;
+
+// @public (undocumented)
+export const useListboxContextValues: (state: ListboxState) => ListboxContextValues;
+
+// @public
+export const useOption: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;
+
+// @public
+export const useOptionGroup: (props: OptionGroupProps, ref: React_2.Ref<HTMLElement>) => OptionGroupState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -27,6 +27,7 @@
     "@fluentui/react-breadcrumb": "^9.4.1",
     "@fluentui/react-card": "^9.6.1",
     "@fluentui/react-checkbox": "^9.6.1",
+    "@fluentui/react-combobox": "^9.17.1",
     "@fluentui/react-dialog": "^9.18.0",
     "@fluentui/react-divider": "^9.7.1",
     "@fluentui/react-drawer": "^9.12.0",
@@ -129,6 +130,12 @@
       "import": "./lib/drawer.js",
       "require": "./lib-commonjs/drawer.js"
     },
+    "./dropdown": {
+      "types": "./dist/dropdown.d.ts",
+      "node": "./lib-commonjs/dropdown.js",
+      "import": "./lib/dropdown.js",
+      "require": "./lib-commonjs/dropdown.js"
+    },
     "./field": {
       "types": "./dist/field.d.ts",
       "node": "./lib-commonjs/field.js",