@fluentui/react-combobox 9.17.0 → 9.17.2

package/CHANGELOG.md

@@ -1,12 +1,47 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 01 Apr 2026 15:50:20 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.17.2)
+
+Tue, 26 May 2026 09:34:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.17.1..@fluentui/react-combobox_v9.17.2)
+
+### Patches
+
+- fix(Option): when disabled, hover styles should not show ([PR #36077](https://github.com/microsoft/fluentui/pull/36077) by sarah.higley@microsoft.com)
+- fix: use role attribute instead of classname for active descendant ([PR #36109](https://github.com/microsoft/fluentui/pull/36109) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-portal to v9.8.13 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-positioning to v9.22.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.17.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.17.1)
+
+Thu, 23 Apr 2026 14:21:00 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 #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-portal to v9.8.12 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-positioning to v9.22.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.17.0)
 
-Wed, 01 Apr 2026 15:50:20 GMT 
+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

package/dist/index.d.ts

@@ -1,23 +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 type { 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 { 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> & {
@@ -278,6 +278,15 @@ declare type HighlightedOptionProps = {
     onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;
 };
 
+/**
+ * Checks whether the given element is a combobox option element.
+ * Supports elements with role="option" or role="menuitemcheckbox".
+ *
+ * @param element - the element to check
+ * @returns true if the element has a valid combobox option role, false otherwise
+ */
+export declare function isComboboxOptionElement(element: HTMLElement): boolean;
+
 /**
  * Listbox component: a standalone selection control, or the popup in a Combobox
  */

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, 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"}
+{"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/useCombobox.js

@@ -10,7 +10,7 @@ import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { Listbox } from '../Listbox/Listbox';
 import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useInputTriggerSlot } from './useInputTriggerSlot';
-import { optionClassNames } from '../Option/useOptionStyles.styles';
+import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
 /**
  * Create the base state required to render Combobox, without design-only props.
  *
@@ -25,7 +25,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         supportsRequired: true
     });
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
-        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+        matchOption: isComboboxOptionElement
     });
     const comboboxInternalState = useComboboxBaseState({
         ...props,
@@ -117,7 +117,8 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         disabled: !open
     });
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
-    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{
+    const onExpandIconMouseDown = useEventCallback(// eslint-disable-next-line react-hooks/refs
+    mergeCallbacks(onIconMouseDown, (event)=>{
         var _triggerRef_current;
         event.preventDefault();
         state.setOpen(event, !state.open);

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 {\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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"}
+{"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 { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\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: isComboboxOptionElement,\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    // eslint-disable-next-line react-hooks/refs\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","isComboboxOptionElement","useComboboxBase_unstable","props","ref","state","supportsLabelFor","supportsRequired","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","comboboxInternalState","editable","appearance","_appearance","size","_size","baseState","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","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
@@ -396,15 +406,20 @@ export const useComboboxStyles_unstable = state => {
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const inputStyles = useInputStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
   if (state.listbox) {
+    // eslint-disable-next-line react-hooks/immutability
     state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
   }
   if (state.expandIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
   }
   if (state.clearIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
   }
   return state;

package/lib/components/Combobox/useComboboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z8tnut","B0ocmuz","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    clearIcon: 'fui-Combobox__clearIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        columnGap: tokens.spacingHorizontalXXS,\n        display: 'inline-grid',\n        gridTemplateColumns: '1fr auto',\n        justifyContent: 'space-between',\n        minWidth: '250px',\n        position: 'relative',\n        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        height: fieldHeights.large,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        alignSelf: 'stretch',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body2,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, open, size, showClearIcon } = state;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const disabled = state.input.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const inputStyles = useInputStyles();\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bqenvij","z189sj","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useInputStyles","qb2dma","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z8tnut","B0ocmuz","f","useIconStyles","icon","Bo70h7d","bn5sak","hidden","visuallyHidden","Bh84pgu","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    clearIcon: 'fui-Combobox__clearIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        columnGap: tokens.spacingHorizontalXXS,\n        display: 'inline-grid',\n        gridTemplateColumns: '1fr auto',\n        justifyContent: 'space-between',\n        minWidth: '250px',\n        position: 'relative',\n        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        height: fieldHeights.large,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        alignSelf: 'stretch',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body2,\n        padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // position: relative provides the containing block for the ::after clickable-area extension below.\n        position: 'relative',\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        },\n        // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n        // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n        // The negative `right` is overridden per size variant below to match the root's paddingRight.\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0\n        }\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`\n        }\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`\n        }\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        '::after': {\n            right: `calc(-1 * ${tokens.spacingHorizontalM})`\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, open, size, showClearIcon } = state;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const disabled = state.input.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Combobox/useComboboxStyles.styles.raw.js

@@ -195,10 +195,23 @@ const useIconStyles = makeStyles({
         cursor: 'pointer',
         display: 'block',
         fontSize: tokens.fontSizeBase500,
+        // position: relative provides the containing block for the ::after clickable-area extension below.
+        position: 'relative',
         // the SVG must have display: block for accurate positioning
         // otherwise an extra inline space is inserted after the svg element
         '& svg': {
             display: 'block'
+        },
+        // Extend the clickable area to cover the root's right paddingRight "dead zone".
+        // Without this, clicking between the icon and the right border does not trigger the icon's handler.
+        // The negative `right` is overridden per size variant below to match the root's paddingRight.
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0
         }
     },
     hidden: {
@@ -216,15 +229,24 @@ const useIconStyles = makeStyles({
     // icon size variants
     small: {
         fontSize: iconSizes.small,
-        marginLeft: tokens.spacingHorizontalXXS
+        marginLeft: tokens.spacingHorizontalXXS,
+        '::after': {
+            right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`
+        }
     },
     medium: {
         fontSize: iconSizes.medium,
-        marginLeft: tokens.spacingHorizontalXXS
+        marginLeft: tokens.spacingHorizontalXXS,
+        '::after': {
+            right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`
+        }
     },
     large: {
         fontSize: iconSizes.large,
-        marginLeft: tokens.spacingHorizontalSNudge
+        marginLeft: tokens.spacingHorizontalSNudge,
+        '::after': {
+            right: `calc(-1 * ${tokens.spacingHorizontalM})`
+        }
     },
     disabled: {
         color: tokens.colorNeutralForegroundDisabled,
@@ -241,15 +263,20 @@ const useIconStyles = makeStyles({
     const styles = useStyles();
     const iconStyles = useIconStyles();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
     if (state.listbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
     }
     if (state.clearIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
     }
     return state;

package/lib/components/Combobox/useComboboxStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/useComboboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  clearIcon: 'fui-Combobox__clearIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    height: fieldHeights.large,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    alignSelf: 'stretch',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body2,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  'use no memo';\n\n  const { appearance, open, size, showClearIcon } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearIcon && iconStyles.visuallyHidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearIcon) {\n    state.clearIcon.className = mergeClasses(\n      comboboxClassNames.clearIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearIcon && iconStyles.hidden,\n      state.clearIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","alignItems","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalXXS","display","gridTemplateColumns","justifyContent","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","paddingRight","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useInputStyles","alignSelf","color","colorNeutralForeground1","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","caption1","padding","body1","body2","colorNeutralForegroundDisabled","useIconStyles","icon","fontSize","fontSizeBase500","hidden","visuallyHidden","clip","margin","overflow","width","marginLeft","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useComboboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  clearIcon: 'fui-Combobox__clearIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    height: fieldHeights.large,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    alignSelf: 'stretch',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body2,\n    padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    // position: relative provides the containing block for the ::after clickable-area extension below.\n    position: 'relative',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n\n    // Extend the clickable area to cover the root's right paddingRight \"dead zone\".\n    // Without this, clicking between the icon and the right border does not trigger the icon's handler.\n    // The negative `right` is overridden per size variant below to match the root's paddingRight.\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n    },\n  },\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,\n    },\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalMNudge})`,\n    },\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    '::after': {\n      right: `calc(-1 * ${tokens.spacingHorizontalM})`,\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  'use no memo';\n\n  const { appearance, open, size, showClearIcon } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearIcon && iconStyles.visuallyHidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearIcon.className = mergeClasses(\n      comboboxClassNames.clearIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearIcon && iconStyles.hidden,\n      state.clearIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","alignItems","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalXXS","display","gridTemplateColumns","justifyContent","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","paddingRight","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useInputStyles","alignSelf","color","colorNeutralForeground1","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","caption1","padding","body1","body2","colorNeutralForegroundDisabled","useIconStyles","icon","fontSize","fontSizeBase500","top","hidden","visuallyHidden","clip","margin","overflow","width","marginLeft","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className","inlinePopup"],"mappings":"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"}

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -61,7 +61,9 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
         elementType: 'input',
         activeDescendantController
     });
+    // eslint-disable-next-line react-hooks/immutability
     trigger.onChange = mergeCallbacks(trigger.onChange, onChange);
+    // eslint-disable-next-line react-hooks/immutability
     trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);
     // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
     // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
@@ -101,8 +103,10 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
         }
         defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
     });
+    // eslint-disable-next-line react-hooks/immutability
     trigger.onKeyDown = onKeyDown;
     if (hideActiveDescendant) {
+        // eslint-disable-next-line react-hooks/immutability
         trigger['aria-activedescendant'] = undefined;
     }
     return trigger;