@fluentui/react-combobox 9.16.17 → 9.17.0

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 03 Mar 2026 09:41:33 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.17.0)
+
+Wed, 01 Apr 2026 15:50:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.16.18..@fluentui/react-combobox_v9.17.0)
+
+### Minor changes
+
+- feat: add useComboboxBase_unstable and useDropdownBase_unstable hooks ([PR #35915](https://github.com/microsoft/fluentui/pull/35915) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.16.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.16.18)
+
+Wed, 11 Mar 2026 09:22:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.16.17..@fluentui/react-combobox_v9.16.18)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+
 ## [9.16.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.16.17)
 
-Tue, 03 Mar 2026 09:41:33 GMT 
+Tue, 03 Mar 2026 09:43:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.16.16..@fluentui/react-combobox_v9.16.17)
 
 ### Patches

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import { EventData } from '@fluentui/react-utilities';
 import { EventHandler } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
@@ -24,6 +25,16 @@ declare type ActiveOptionChangeData = EventData<'change', ActiveDescendantChange
     nextOption: OptionValue | null | undefined;
 };
 
+/**
+ * Combobox Props without design-only props.
+ */
+export declare type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;
+
+/**
+ * State used in rendering Combobox, without design-only state.
+ */
+export declare type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;
+
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
  */
@@ -217,6 +228,16 @@ export declare type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBase
  */
 export declare const Dropdown: ForwardRefComponent<DropdownProps>;
 
+/**
+ * Dropdown Props without design-only props.
+ */
+export declare type DropdownBaseHookProps = DistributiveOmit<DropdownProps, 'appearance' | 'size'>;
+
+/**
+ * State used in rendering Dropdown, without design-only state.
+ */
+export declare type DropdownBaseHookState = DistributiveOmit<DropdownState, 'appearance' | 'size'>;
+
 export declare const dropdownClassNames: SlotClassNames<DropdownSlots>;
 
 export declare type DropdownContextValues = ComboboxBaseContextValues;
@@ -463,7 +484,7 @@ declare type OptionValue = {
 /**
  * Render the final JSX of Combobox
  */
-export declare const renderCombobox_unstable: (state: ComboboxState, contextValues: ComboboxContextValues) => JSXElement;
+export declare const renderCombobox_unstable: (state: BaseComboboxState, contextValues: ComboboxContextValues) => JSXElement;
 
 /**
  * Render the final JSX of Dropdown
@@ -519,10 +540,11 @@ declare type SelectionState = {
 };
 
 /**
- * @internal
  * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
+ *
+ * @internal
  */
 export declare function useButtonTriggerSlot(triggerFromProps: NonNullable<Slot<'button'>>, ref: React_2.Ref<HTMLButtonElement>, options: UseButtonTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;
 
@@ -544,8 +566,17 @@ declare type UseButtonTriggerSlotOptions = {
 export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
 
 /**
- * @internal
+ * Create the base state required to render Combobox, without design-only props.
+ *
+ * @param props - props from this instance of Combobox (without appearance and size)
+ * @param ref - reference to root HTMLInputElement of Combobox
+ */
+export declare const useComboboxBase_unstable: (props: BaseComboboxProps, ref: React_2.Ref<HTMLInputElement>) => BaseComboboxState;
+
+/**
  * State shared between Combobox and Dropdown components
+ *
+ * @internal
  */
 export declare const useComboboxBaseState: (props: ComboboxBaseProps & {
     children?: React_2.ReactNode;
@@ -599,16 +630,25 @@ declare type UsedComboboxState = UseTriggerSlotState & Pick<ComboboxBaseState, '
  */
 export declare const useDropdown_unstable: (props: DropdownProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownState;
 
+/**
+ * Create the base state required to render Dropdown, without design-only props.
+ *
+ * @param props - props from this instance of Dropdown (without appearance and size)
+ * @param ref - reference to root HTMLButtonElement of Dropdown
+ */
+export declare const useDropdownBase_unstable: (props: DropdownBaseHookProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownBaseHookState;
+
 /**
  * Apply styling to the Dropdown slots based on the state
  */
 export declare const useDropdownStyles_unstable: (state: DropdownState) => DropdownState;
 
 /**
- * @internal
  * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
+ *
+ * @internal
  */
 export declare function useInputTriggerSlot(triggerFromProps: NonNullable<Slot<'input'>>, ref: React_2.Ref<HTMLInputElement>, options: UseInputTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;
 
@@ -664,6 +704,14 @@ export declare const useListboxStyles_unstable: (state: ListboxState) => Listbox
  */
 export declare const useOption_unstable: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;
 
+/**
+ * Create the base state required to render Option.
+ *
+ * @param props - props from this instance of Option
+ * @param ref - reference to root HTMLElement of Option
+ */
+export declare const useOptionBase_unstable: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;
+
 /**
  * Create the state required to render OptionGroup.
  *

package/lib/Combobox.js

@@ -1 +1 @@
-export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './components/Combobox/index';
+export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useComboboxBase_unstable, useCombobox_unstable } from './components/Combobox/index';

package/lib/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './components/Combobox/index';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable"],"mappings":"AASA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './components/Combobox/index';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useComboboxBase_unstable,\n  useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,8BAA8B"}

package/lib/Dropdown.js

@@ -1 +1 @@
-export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './components/Dropdown/index';
+export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdownBase_unstable, useDropdown_unstable } from './components/Dropdown/index';

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './components/Dropdown/index';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable"],"mappings":"AASA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  DropdownBaseHookProps,\n  DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './components/Dropdown/index';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdownBase_unstable,\n  useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,8BAA8B"}

package/lib/Option.js

@@ -1 +1 @@
-export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './components/Option/index';
+export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable, useOptionBase_unstable } from './components/Option/index';

package/lib/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n  useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}

package/lib/components/Combobox/Combobox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /** The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /** The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /**\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /** The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /** The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /**\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * Combobox Props without design-only props.\n */\nexport type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/**\n * State used in rendering Combobox, without design-only state.\n */\nexport type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Combobox/index.js

@@ -1,4 +1,4 @@
 export { Combobox } from './Combobox';
 export { renderCombobox_unstable } from './renderCombobox';
-export { useCombobox_unstable } from './useCombobox';
+export { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';
 export { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';

package/lib/components/Combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAUtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAA0BC;IAChEL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -12,30 +12,27 @@ import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useInputTriggerSlot } from './useInputTriggerSlot';
 import { optionClassNames } from '../Option/useOptionStyles.styles';
 /**
- * Create the state required to render Combobox.
- *
- * The returned state can be modified with hooks such as useComboboxStyles_unstable,
- * before being passed to renderCombobox_unstable.
+ * Create the base state required to render Combobox, without design-only props.
  *
- * @param props - props from this instance of Combobox
- * @param ref - reference to root HTMLElement of Combobox
- */ export const useCombobox_unstable = (props, ref)=>{
+ * @param props - props from this instance of Combobox (without appearance and size)
+ * @param ref - reference to root HTMLInputElement of Combobox
+ */ export const useComboboxBase_unstable = (props, ref)=>{
     'use no memo';
     var _state_clearIcon, _state_clearIcon1;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
+        supportsRequired: true
     });
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
         matchOption: (el)=>el.classList.contains(optionClassNames.root)
     });
-    const baseState = useComboboxBaseState({
+    const comboboxInternalState = useComboboxBaseState({
         ...props,
         editable: true,
         activeDescendantController
     });
+    const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;
     const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     const { disableAutoFocus = false, freeform, inlinePopup } = props;
@@ -44,13 +41,12 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         props,
         primarySlotTagName: 'input',
         excludedPropNames: [
-            'children',
-            'size'
+            'children'
         ]
     });
     const triggerRef = React.useRef(null);
     const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
-        state: baseState,
+        state: comboboxInternalState,
         triggerRef,
         defaultProps: {
             children: props.children,
@@ -59,7 +55,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
     });
     var _props_input;
     const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {
-        state: baseState,
+        state: comboboxInternalState,
         freeform,
         defaultProps: {
             type: 'text',
@@ -91,8 +87,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         listbox: open || hasFocus ? listbox : undefined,
         clearIcon: slot.optional(props.clearIcon, {
             defaultProps: {
-                'aria-hidden': 'true',
-                children: /*#__PURE__*/ React.createElement(DismissIcon, null)
+                'aria-hidden': 'true'
             },
             elementType: 'span',
             renderByDefault: true
@@ -102,7 +97,6 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
             defaultProps: {
                 'aria-disabled': disabled ? 'true' : undefined,
                 'aria-expanded': open,
-                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
                 role: 'button'
             },
             elementType: 'span'
@@ -182,3 +176,31 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
     }
     return state;
 };
+/**
+ * Create the state required to render Combobox.
+ *
+ * The returned state can be modified with hooks such as useComboboxStyles_unstable,
+ * before being passed to renderCombobox_unstable.
+ *
+ * @param props - props from this instance of Combobox
+ * @param ref - reference to root HTMLElement of Combobox
+ */ export const useCombobox_unstable = (props, ref)=>{
+    'use no memo';
+    const { appearance = 'outline', size = 'medium', ...baseProps } = props;
+    const baseState = useComboboxBase_unstable(baseProps, ref);
+    if (baseState.clearIcon) {
+        var _baseState_clearIcon;
+        var _children;
+        (_children = (_baseState_clearIcon = baseState.clearIcon).children) !== null && _children !== void 0 ? _children : _baseState_clearIcon.children = /*#__PURE__*/ React.createElement(DismissIcon, null);
+    }
+    if (baseState.expandIcon) {
+        var _baseState_expandIcon;
+        var _children1;
+        (_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ React.createElement(ChevronDownIcon, null);
+    }
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};

package/lib/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { ComboboxOpenEvents, ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n  const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n    baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disableAutoFocus = false, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n      disableAutoFocus,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-disabled': disabled ? 'true' : undefined,\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type {\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxState,\n} from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/**\n * Create the base state required to render Combobox, without design-only props.\n *\n * @param props - props from this instance of Combobox (without appearance and size)\n * @param ref - reference to root HTMLInputElement of Combobox\n */\nexport const useComboboxBase_unstable = (\n  props: BaseComboboxProps,\n  ref: React.Ref<HTMLInputElement>,\n): BaseComboboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const comboboxInternalState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n  const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;\n\n  const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n    baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disableAutoFocus = false, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children'],\n  });\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: comboboxInternalState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n      disableAutoFocus,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: comboboxInternalState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: BaseComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-disabled': disabled ? 'true' : undefined,\n        'aria-expanded': open,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  'use no memo';\n\n  const { appearance = 'outline', size = 'medium', ...baseProps } = props;\n  const baseState = useComboboxBase_unstable(baseProps, ref);\n\n  if (baseState.clearIcon) {\n    baseState.clearIcon.children ??= <DismissIcon />;\n  }\n\n  if (baseState.expandIcon) {\n    baseState.expandIcon.children ??= <ChevronDownIcon />;\n  }\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n  };\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useComboboxBase_unstable","props","ref","state","supportsLabelFor","supportsRequired","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","comboboxInternalState","editable","appearance","_appearance","size","_size","baseState","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error","useCombobox_unstable","baseProps"],"mappings":"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"}

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -5,10 +5,11 @@ import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
 import { useTriggerSlot } from '../../utils/useTriggerSlot';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 /**
- * @internal
  * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
+ *
+ * @internal
  */ export function useInputTriggerSlot(triggerFromProps, ref, options) {
     'use no memo';
     const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;

package/lib/components/Combobox/useInputTriggerSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ComboboxProps } from '../Combobox/Combobox.types';\nimport { UseTriggerSlotState, useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps?: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * @internal\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  'use no memo';\n\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(event, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = event.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(event);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(event) === 'Type') {\n      setOpen(event, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (event.key === ArrowLeft || event.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && event.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && event.key === ' ') {\n      triggerFromProps?.onKeyDown?.(event);\n      return;\n    }\n\n    defaultOnKeyDown?.(event);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ComboboxProps } from '../Combobox/Combobox.types';\nimport { UseTriggerSlotState, useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps?: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n *\n * @internal\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  'use no memo';\n\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(event, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = event.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(event);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(event) === 'Type') {\n      setOpen(event, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (event.key === ArrowLeft || event.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && event.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && event.key === ' ') {\n      triggerFromProps?.onKeyDown?.(event);\n      return;\n    }\n\n    defaultOnKeyDown?.(event);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}

package/lib/components/Dropdown/Dropdown.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /** The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /** The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /** Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AAmDA,WAAwE"}
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /** The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /** The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * Dropdown Props without design-only props.\n */\nexport type DropdownBaseProps = DistributiveOmit<DropdownProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /** Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/**\n * State used in rendering Dropdown, without design-only state.\n */\nexport type DropdownBaseState = DistributiveOmit<DropdownState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AA6DA,WAAwE"}

package/lib/components/Dropdown/index.js

@@ -1,4 +1,4 @@
 export { Dropdown } from './Dropdown';
 export { renderDropdown_unstable } from './renderDropdown';
-export { useDropdown_unstable } from './useDropdown';
+export { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';
 export { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';

package/lib/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n  ActiveOptionChangeData,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","renderDropdown_unstable","useDropdown_unstable","dropdownClassNames","useDropdownStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAUtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n  ActiveOptionChangeData,\n  DropdownBaseProps as DropdownBaseHookProps,\n  DropdownBaseState as DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","renderDropdown_unstable","useDropdownBase_unstable","useDropdown_unstable","dropdownClassNames","useDropdownStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/Dropdown/useButtonTriggerSlot.js

@@ -4,10 +4,11 @@ import { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';
 import { useTriggerSlot } from '../../utils/useTriggerSlot';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 /**
- * @internal
  * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
+ *
+ * @internal
  */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {
     'use no memo';
     const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;

package/lib/components/Dropdown/useButtonTriggerSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * @internal\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  'use no memo';\n\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAGvE,SAASC,cAAc,QAA6B,6BAA6B;AACjF,SAASC,wBAAwB,QAAQ,iCAAiC;AAQ1E;;;;;CAKC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,MAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGjB;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,IAAId,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI3B,MAAM;gBACRuB;YACF;YAEA,eAAe;YACf,CAACvB,QAAQC,QAAQ+B,IAAI;QACvB;IACF;IAEA,MAAMG,UAAU1C,eAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA+B,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n *\n * @internal\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  'use no memo';\n\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAGvE,SAASC,cAAc,QAA6B,6BAA6B;AACjF,SAASC,wBAAwB,QAAQ,iCAAiC;AAQ1E;;;;;;CAMC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,MAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGjB;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,IAAId,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI3B,MAAM;gBACRuB;YACF;YAEA,eAAe;YACf,CAACvB,QAAQC,QAAQ+B,IAAI;QACvB;IACF;IAEA,MAAMG,UAAU1C,eAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA+B,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}