@fluentui/react-combobox 9.13.11 → 9.13.13

package/CHANGELOG.md

@@ -1,29 +1,58 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Mon, 11 Nov 2024 09:55:34 GMT and should not be manually modified.
+This log was last generated on Fri, 06 Dec 2024 12:49:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.13.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.13)
+
+Fri, 06 Dec 2024 12:49:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.12..@fluentui/react-combobox_v9.13.13)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.13.10 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.70 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-field to v9.1.81 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.47 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-portal to v9.4.39 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-positioning to v9.15.13 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-tabster to v9.23.1 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-theme to v9.1.23 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+- Bump @fluentui/react-utilities to v9.18.18 ([PR #33414](https://github.com/microsoft/fluentui/pull/33414) by beachball)
+
+## [9.13.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.12)
+
+Mon, 18 Nov 2024 09:44:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.11..@fluentui/react-combobox_v9.13.12)
+
+### Patches
+
+- fix: Clearable Dropdowns and Comboboxes do not show clear button if they are disabled. ([PR #33251](https://github.com/microsoft/fluentui/pull/33251) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-field to v9.1.80 ([PR #33229](https://github.com/microsoft/fluentui/pull/33229) by beachball)
+- Bump @fluentui/react-positioning to v9.15.12 ([PR #33229](https://github.com/microsoft/fluentui/pull/33229) by beachball)
+
 ## [9.13.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.11)
 
-Mon, 11 Nov 2024 09:55:34 GMT 
+Mon, 11 Nov 2024 10:01:09 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.10..@fluentui/react-combobox_v9.13.11)
 
 ### Patches
 
 - fix(Combobox): remove "defaultValue" from hooks dependencies ([PR #32287](https://github.com/microsoft/fluentui/pull/32287) by olfedias@microsoft.com)
 - chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
-- Bump @fluentui/react-aria to v9.13.9 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/keyboard-keys to v9.0.8 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.69 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-field to v9.1.79 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-portal to v9.4.38 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-positioning to v9.15.11 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-tabster to v9.23.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-theme to v9.1.22 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-aria to v9.13.9 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/keyboard-keys to v9.0.8 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.69 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-field to v9.1.79 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-portal to v9.4.38 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-positioning to v9.15.11 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-tabster to v9.23.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-theme to v9.1.22 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-utilities to v9.18.17 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
 
 ## [9.13.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.10)
 

package/lib/components/Combobox/useCombobox.js

@@ -76,7 +76,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         elementType: 'div'
     });
     rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
-    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;
+    const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',

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

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

package/lib/components/Dropdown/useDropdown.js

@@ -34,7 +34,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         activeDescendantController,
         freeform: false
     });
-    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
+    const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'button',
@@ -84,7 +84,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         elementType: 'div'
     });
     rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
-    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;
+    const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\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  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\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': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\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.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","disabled","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\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  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\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': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\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.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","freeform","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/utils/useSelection.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import * as React from 'react';
 import { useControllableState } from '@fluentui/react-utilities';
 export const useSelection = (props)=>{
     const { defaultSelectedOptions, multiselect, onOptionSelect } = props;
@@ -7,7 +7,7 @@ export const useSelection = (props)=>{
         defaultState: defaultSelectedOptions,
         initialState: []
     });
-    const selectOption = useCallback((event, option)=>{
+    const selectOption = React.useCallback((event, option)=>{
         // if the option is disabled, do nothing
         if (option.disabled) {
             return;

package/lib/utils/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,QAAQ,QAAQ;AACpC,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,YACnB,CAACa,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIZ,aAAa;YACf,MAAMa,gBAAgBX,gBAAgBY,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIT,gBAAgBc,KAAK,CAAC,GAAGH;uBAAmBX,gBAAgBc,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIT;oBAAiBO,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAT,mBAAmBQ;QACnBV,2BAAAA,qCAAAA,eAAiBO,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEjB,iBAAiBS;QAAa;IAC9G,GACA;QAACV;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMiB,iBAAiB,CAACZ;QACtBL,mBAAmB,EAAE;QACrBF,2BAAAA,qCAAAA,eAAiBO,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWnB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEkB;QAAgBb;QAAcL;IAAgB;AACzD,EAAE"}
+{"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = React.useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["React","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,MAAMa,WAAW,CACpC,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIb,aAAa;YACf,MAAMc,gBAAgBZ,gBAAgBa,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIV,gBAAgBe,KAAK,CAAC,GAAGH;uBAAmBZ,gBAAgBe,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIV;oBAAiBQ,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAV,mBAAmBS;QACnBX,2BAAAA,qCAAAA,eAAiBQ,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAElB,iBAAiBU;QAAa;IAC9G,GACA;QAACX;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMkB,iBAAiB,CAACZ;QACtBN,mBAAmB,EAAE;QACrBF,2BAAAA,qCAAAA,eAAiBQ,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWpB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEmB;QAAgBd;QAAcL;IAAgB;AACzD,EAAE"}

package/lib-commonjs/components/Combobox/useCombobox.js

@@ -79,7 +79,7 @@ const useCombobox_unstable = (props, ref)=>{
         elementType: 'div'
     });
     rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
-    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;
+    const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',

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

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

package/lib-commonjs/components/Dropdown/useDropdown.js

@@ -37,7 +37,7 @@ const useDropdown_unstable = (props, ref)=>{
         activeDescendantController,
         freeform: false
     });
-    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
+    const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
         props,
         primarySlotTagName: 'button',
@@ -87,7 +87,7 @@ const useDropdown_unstable = (props, ref)=>{
         elementType: 'div'
     });
     rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
-    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;
+    const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',

package/lib-commonjs/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\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  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\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': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\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.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["useDropdown_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","disabled","trigger","useButtonTriggerSlot","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\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  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\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': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\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.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["useDropdown_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","freeform","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","trigger","useButtonTriggerSlot","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/utils/useSelection.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "useSelection", {
         return useSelection;
     }
 });
-const _react = require("react");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useSelection = (props)=>{
     const { defaultSelectedOptions, multiselect, onOptionSelect } = props;
@@ -17,7 +18,7 @@ const useSelection = (props)=>{
         defaultState: defaultSelectedOptions,
         initialState: []
     });
-    const selectOption = (0, _react.useCallback)((event, option)=>{
+    const selectOption = _react.useCallback((event, option)=>{
         // if the option is disabled, do nothing
         if (option.disabled) {
             return;

package/lib-commonjs/utils/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","useControllableState","state","defaultState","initialState","selectOption","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;uBALe;gCACS;AAI9B,MAAMA,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGC,IAAAA,oCAAAA,EAAqB;QACjEC,OAAOP,MAAMI,eAAe;QAC5BI,cAAcP;QACdQ,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeC,IAAAA,kBAAAA,EACnB,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAId,aAAa;YACf,MAAMe,gBAAgBb,gBAAgBc,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIX,gBAAgBgB,KAAK,CAAC,GAAGH;uBAAmBb,gBAAgBgB,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIX;oBAAiBS,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAX,mBAAmBU;QACnBZ,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBS,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEnB,iBAAiBW;QAAa;IAC9G,GACA;QAACZ;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMmB,iBAAiB,CAACZ;QACtBP,mBAAmB,EAAE;QACrBF,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBS,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWrB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEoB;QAAgBd;QAAcN;IAAgB;AACzD"}
+{"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = React.useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","useControllableState","state","defaultState","initialState","selectOption","React","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;gCACc;AAI9B,MAAMA,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGC,IAAAA,oCAAAA,EAAqB;QACjEC,OAAOP,MAAMI,eAAe;QAC5BI,cAAcP;QACdQ,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeC,OAAMC,WAAW,CACpC,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIf,aAAa;YACf,MAAMgB,gBAAgBd,gBAAgBe,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIZ,gBAAgBiB,KAAK,CAAC,GAAGH;uBAAmBd,gBAAgBiB,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIZ;oBAAiBU,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAZ,mBAAmBW;QACnBb,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBU,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEpB,iBAAiBY;QAAa;IAC9G,GACA;QAACb;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMoB,iBAAiB,CAACZ;QACtBR,mBAAmB,EAAE;QACrBF,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBU,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWtB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEqB;QAAgBf;QAAcN;IAAgB;AACzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.13.11",
+  "version": "9.13.13",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,18 +19,18 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.13.9",
+    "@fluentui/react-aria": "^9.13.10",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-context-selector": "^9.1.69",
-    "@fluentui/react-field": "^9.1.79",
+    "@fluentui/react-context-selector": "^9.1.70",
+    "@fluentui/react-field": "^9.1.81",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.0.46",
-    "@fluentui/react-portal": "^9.4.38",
-    "@fluentui/react-positioning": "^9.15.11",
-    "@fluentui/react-shared-contexts": "^9.21.0",
-    "@fluentui/react-tabster": "^9.23.0",
-    "@fluentui/react-theme": "^9.1.22",
-    "@fluentui/react-utilities": "^9.18.17",
+    "@fluentui/react-jsx-runtime": "^9.0.47",
+    "@fluentui/react-portal": "^9.4.39",
+    "@fluentui/react-positioning": "^9.15.13",
+    "@fluentui/react-shared-contexts": "^9.21.1",
+    "@fluentui/react-tabster": "^9.23.1",
+    "@fluentui/react-theme": "^9.1.23",
+    "@fluentui/react-utilities": "^9.18.18",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },