@fluentui/react-combobox 9.16.18 → 9.17.1

package/CHANGELOG.md

@@ -1,17 +1,44 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 11 Mar 2026 09:20:38 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.17.1)
+
+Thu, 23 Apr 2026 11:59:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.17.0..@fluentui/react-combobox_v9.17.1)
+
+### Patches
+
+- fix: Combobox now expands/collapses when clicking in the right padding area (the dead zone between the chevron and the right border) ([PR #36013](https://github.com/microsoft/fluentui/pull/36013) by copilot@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-portal to v9.8.12 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-positioning to v9.22.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
+## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.17.0)
+
+Wed, 01 Apr 2026 15:52:40 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:20:38 GMT 
+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 #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+- 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)
 

package/dist/index.d.ts

@@ -1,22 +1,23 @@
-import { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
+import type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
 import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
-import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
+import type { 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 { EventData } from '@fluentui/react-utilities';
-import { EventHandler } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { PortalProps } from '@fluentui/react-portal';
+import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { SlotComponentType } from '@fluentui/react-utilities';
 
 declare type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {
@@ -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

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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 type * 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 type { 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":[],"mappings":"AAiEA,WAAwE"}

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/useComboboxStyles.styles.js

@@ -330,7 +330,14 @@ const useIconStyles = /*#__PURE__*/__styles({
     Bceei9c: "f1k6fduh",
     mc9l5x: "ftgm304",
     Be2twd7: "f1pp30po",
-    Bo70h7d: "fvc9v3g"
+    qhf8xq: "f10pi13n",
+    Bo70h7d: "fvc9v3g",
+    Bsft5z2: "f13zj6fq",
+    E3zdtr: "f1mdlcz9",
+    bn5sak: "frwkxtg",
+    By385i5: "fo72kxq",
+    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
+    B1piin3: ["f15yvnhg", "f1n6gb5g"]
   },
   hidden: {
     mc9l5x: "fjseox"
@@ -356,28 +363,31 @@ const useIconStyles = /*#__PURE__*/__styles({
   },
   small: {
     Be2twd7: "f4ybsrx",
-    Frg6f3: ["f1h9en5y", "f1xk557c"]
+    Frg6f3: ["f1h9en5y", "f1xk557c"],
+    B1piin3: ["f1gwjbcf", "f1rbysb6"]
   },
   medium: {
     Be2twd7: "fe5j1ua",
-    Frg6f3: ["f1h9en5y", "f1xk557c"]
+    Frg6f3: ["f1h9en5y", "f1xk557c"],
+    B1piin3: ["fpsl3z4", "f1po37t9"]
   },
   large: {
     Be2twd7: "f1rt2boy",
-    Frg6f3: ["f1t5qyk5", "f1ikr372"]
+    Frg6f3: ["f1t5qyk5", "f1ikr372"],
+    B1piin3: ["f1je5ipm", "fb53jzl"]
   },
   disabled: {
     sj55zd: "f1s2aq7o",
     Bceei9c: "fdrzuqr"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", [".f1jlpb2r{margin:-1px;}", {
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f10pi13n{position:relative;}", ".fvc9v3g svg{display:block;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", [".f1jlpb2r{margin:-1px;}", {
     p: -1
   }], [".f1a3p1vp{overflow:hidden;}", {
     p: -1
   }], [".f1c5fvqg{padding:0px;}", {
     p: -1
-  }], ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
+  }], ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1gwjbcf::after{right:calc(-1 * var(--spacingHorizontalSNudge));}", ".f1rbysb6::after{left:calc(-1 * var(--spacingHorizontalSNudge));}", ".fe5j1ua{font-size:20px;}", ".fpsl3z4::after{right:calc(-1 * var(--spacingHorizontalMNudge));}", ".f1po37t9::after{left:calc(-1 * var(--spacingHorizontalMNudge));}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1je5ipm::after{right:calc(-1 * var(--spacingHorizontalM));}", ".fb53jzl::after{left:calc(-1 * var(--spacingHorizontalM));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state