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

change/@fluentui-react-headless-components-preview-0ee0a685-d92f-4953-a5bd-8813ad8abc16.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add Combobox 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

@@ -5,6 +5,7 @@ import * as Breadcrumb from '@fluentui/react-headless-components-preview/breadcr
 import * as Button from '@fluentui/react-headless-components-preview/button';
 import * as Card from '@fluentui/react-headless-components-preview/card';
 import * as Checkbox from '@fluentui/react-headless-components-preview/checkbox';
+import * as Combobox from '@fluentui/react-headless-components-preview/combobox';
 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';
@@ -42,6 +43,7 @@ console.log({
   Button,
   Card,
   Checkbox,
+  Combobox,
   Dialog,
   Divider,
   Drawer,

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

@@ -0,0 +1,116 @@
+## 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 { BaseComboboxProps } from '@fluentui/react-combobox';
+import type { BaseComboboxState } from '@fluentui/react-combobox';
+import { ComboboxContextValues } 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 (undocumented)
+export const Combobox: ForwardRefComponent<ComboboxProps>;
+
+// @public (undocumented)
+export type ComboboxProps = Omit<BaseComboboxProps, 'inlinePopup' | 'mountNode'>;
+
+// @public (undocumented)
+export type ComboboxState = BaseComboboxState & {
+    input: {
+        '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 (undocumented)
+export const renderCombobox: (state: ComboboxState, contextValues: ComboboxContextValues) => 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 (undocumented)
+export const useCombobox: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
+
+// @public (undocumented)
+export const useComboboxContextValues: (state: ComboboxState) => ComboboxContextValues;
+
+// @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

@@ -112,6 +112,12 @@
       "import": "./lib/checkbox.js",
       "require": "./lib-commonjs/checkbox.js"
     },
+    "./combobox": {
+      "types": "./dist/combobox.d.ts",
+      "node": "./lib-commonjs/combobox.js",
+      "import": "./lib/combobox.js",
+      "require": "./lib-commonjs/combobox.js"
+    },
     "./dialog": {
       "types": "./dist/dialog.d.ts",
       "node": "./lib-commonjs/dialog.js",

packages/react-components/react-headless-components-preview/library/src/combobox.ts

@@ -0,0 +1,30 @@
+export {
+  Combobox,
+  renderCombobox,
+  useCombobox,
+  useComboboxContextValues,
+  Listbox,
+  renderListbox,
+  useListbox,
+  useListboxContextValues,
+  Option,
+  renderOption,
+  useOption,
+  OptionGroup,
+  renderOptionGroup,
+  useOptionGroup,
+} from './components/Combobox';
+export type {
+  ComboboxProps,
+  ComboboxState,
+  ListboxSlots,
+  ListboxProps,
+  ListboxState,
+  ListboxContextValues,
+  OptionSlots,
+  OptionProps,
+  OptionState,
+  OptionGroupSlots,
+  OptionGroupProps,
+  OptionGroupState,
+} from './components/Combobox';