@fluentui/react-combobox 9.11.0 → 9.11.2

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 02 May 2024 11:31:24 GMT and should not be manually modified.
+This log was last generated on Thu, 09 May 2024 19:31:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.2)
+
+Thu, 09 May 2024 19:31:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.1..@fluentui/react-combobox_v9.11.2)
+
+### Patches
+
+- fix combobox empty string and zero value ([PR #31170](https://github.com/microsoft/fluentui/pull/31170) by mingyuanyu@microsoft.com)
+- fix: expand button should be disabled when Combobox is disabled ([PR #31300](https://github.com/microsoft/fluentui/pull/31300) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-portal to v9.4.24 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-positioning to v9.15.0 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.1)
+
+Mon, 06 May 2024 12:55:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.0..@fluentui/react-combobox_v9.11.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.11.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.59 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-field to v9.1.64 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.37 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-portal to v9.4.23 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-positioning to v9.14.5 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-tabster to v9.21.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+
 ## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.0)
 
-Thu, 02 May 2024 11:31:24 GMT 
+Thu, 02 May 2024 11:36:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.10.1..@fluentui/react-combobox_v9.11.0)
 
 ### Minor changes

package/lib/components/Combobox/useCombobox.js

@@ -33,7 +33,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         editable: true,
         activeDescendantController
     });
-    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;
+    const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     const { freeform, inlinePopup } = props;
     const comboId = useId('combobox-');
@@ -96,6 +96,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         expandIcon: slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
+                'aria-disabled': disabled ? 'true' : undefined,
                 'aria-expanded': open,
                 children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
                 role: 'button'

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

@@ -1 +1 @@
-{"version":3,"sources":["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} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { 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  // 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, multiselect, open, selectedOptions, value, hasFocus } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { 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    },\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-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\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","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","multiselect","open","selectedOptions","value","hasFocus","comboboxPopupRef","comboboxTargetRef","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","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["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} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { 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  // 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, value, hasFocus } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { 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    },\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  /* 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","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","value","hasFocus","comboboxPopupRef","comboboxTargetRef","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","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,sBAAsBC,eAAe,EAAEC,kBAAkBC,WAAW,QAAQ,wBAAwB;AAC7G,SACEC,yBAAyB,EACzBC,cAAc,EACdC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,EACbC,IAAI,QACC,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;QA0HxCC,kBAKAA;IA9HjB,+CAA+C;IAC/CF,QAAQlB,8BAA8BkB,OAAO;QAAEG,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAClH,MAAM,EACJC,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,YAAYC,0BAA0B,EACvC,GAAG7B,oBAAsD;QACxD8B,aAAaC,CAAAA,KAAMA,GAAGC,SAAS,CAACC,QAAQ,CAAChB,iBAAiBiB,IAAI;IAChE;IACA,MAAMC,YAAYvB,qBAAqB;QAAE,GAAGO,KAAK;QAAEiB,UAAU;QAAMP;IAA2B;IAE9F,MAAM,EAAEQ,SAAS,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGT;IACrG,MAAM,CAACU,kBAAkBC,kBAAkB,GAAGjC,uBAAuBM;IACrE,MAAM,EAAE4B,QAAQ,EAAEC,WAAW,EAAE,GAAG7B;IAClC,MAAM8B,UAAUxC,MAAM;IAEtB,MAAM,EAAEyC,SAASC,kBAAkB,EAAEjB,MAAMkB,eAAe,EAAE,GAAG9C,0BAA0B;QACvFa;QACAkC,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAMC,aAAaxD,MAAMyD,MAAM,CAAmB;IAElD,MAAMC,UAAU1C,eAAeI,MAAMsC,OAAO,EAAE/C,cAAcmC,kBAAkBnB,6BAA6B;QACzGL,OAAOc;QACPoB;QACAG,cAAc;YACZC,UAAUxC,MAAMwC,QAAQ;QAC1B;IACF;QAEwCxC;IAAxC,MAAMyC,cAAc5C,oBAAoBG,CAAAA,eAAAA,MAAM0C,KAAK,cAAX1C,0BAAAA,eAAe,CAAC,GAAGT,cAAc6C,YAAY5B,iBAAiBP,MAAM;QAC1GC,OAAOc;QACPY;QACAW,cAAc;YACZI,MAAM;YACNnB,OAAOA,kBAAAA,mBAAAA,QAAS;YAChB,iBAAiBF,OAAOgB,oBAAAA,8BAAAA,QAASM,EAAE,GAAGC;YACtC,GAAGb,kBAAkB;QACvB;QACAtB;IACF;IAEA,MAAMoC,WAAWtD,KAAKuD,MAAM,CAAC/C,MAAMe,IAAI,EAAE;QACvCwB,cAAc;YACZ,aAAa,CAACV,eAAeP,OAAOgB,oBAAAA,8BAAAA,QAASM,EAAE,GAAGC;YAClD,GAAGZ,eAAe;QACpB;QACAe,aAAa;IACf;IACAF,SAAS7C,GAAG,GAAGV,cAAcuD,SAAS7C,GAAG,EAAE0B;IAE3C,MAAMsB,gBAAgB1B,gBAAgB2B,MAAM,GAAG,KAAKhC,aAAa,CAACG;IAClE,MAAMnB,QAAuB;QAC3BiD,YAAY;YAAEpC,MAAM;YAAO2B,OAAO;YAASU,YAAY;YAAQd,SAAS3C;YAAS0D,WAAW;QAAO;QACnGtC,MAAM+B;QACNJ,OAAOD;QACPH,SAAShB,QAAQG,WAAWa,UAAUO;QACtCQ,WAAW7D,KAAK8D,QAAQ,CAACtD,MAAMqD,SAAS,EAAE;YACxCd,cAAc;gBACZ,eAAe;gBACfC,wBAAU,oBAACtD;YACb;YACA8D,aAAa;YACbO,iBAAiB;QACnB;QACAH,YAAY5D,KAAK8D,QAAQ,CAACtD,MAAMoD,UAAU,EAAE;YAC1CG,iBAAiB;YACjBhB,cAAc;gBACZ,iBAAiBnB,WAAW,SAASyB;gBACrC,iBAAiBvB;gBACjBkB,wBAAU,oBAACxD;gBACXwE,MAAM;YACR;YACAR,aAAa;QACf;QACAC;QACAvC;QACA,GAAGM,SAAS;IACd;IAEA,6DAA6D,GAC7D,MAAM,EAAEyC,aAAaC,eAAe,EAAE,GAAGxD,MAAMkD,UAAU,IAAI,CAAC;IAE9D,MAAMO,wBAAwBtE,iBAC5BD,eAAesE,iBAAiB,CAACE;YAG/BxB;QAFAwB,MAAMC,cAAc;QACpB3D,MAAM4D,OAAO,CAACF,OAAO,CAAC1D,MAAMoB,IAAI;SAChCc,sBAAAA,WAAW2B,OAAO,cAAlB3B,0CAAAA,oBAAoB4B,KAAK;IAC3B;IAGF,IAAI9D,MAAMkD,UAAU,EAAE;QACpBlD,MAAMkD,UAAU,CAACK,WAAW,GAAGE;QAE/B,iGAAiG;QACjG,6BAA6B;QAC7B,0DAA0D;QAC1D,yGAAyG;QACzG,mEAAmE;QACnE,kGAAkG;QAClG,MAAMM,iBAAiB/D,MAAMkD,UAAU,CAAC,aAAa,IAAIlD,MAAMkD,UAAU,CAAC,kBAAkB;QAC5F,MAAMc,oBAAoB,QAAQ,gDAAgD;QAClF,IAAI,CAACD,gBAAgB;YACnB,IAAIjE,KAAK,CAAC,kBAAkB,EAAE;oBACVE;gBAAlB,MAAMiE,YAAYjE,CAAAA,uBAAAA,MAAMkD,UAAU,CAACR,EAAE,cAAnB1C,kCAAAA,uBAAuB,CAAC,EAAE4B,QAAQ,QAAQ,CAAC;gBAC7D,MAAMsC,oBAAoB,CAAC,EAAED,UAAU,CAAC,EAAEjE,MAAMwC,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBAE1ExC,MAAMkD,UAAU,CAAC,aAAa,GAAGc;gBACjChE,MAAMkD,UAAU,CAACR,EAAE,GAAGuB;gBACtBjE,MAAMkD,UAAU,CAAC,kBAAkB,GAAGgB;YACxC,OAAO,IAAIpE,KAAK,CAAC,aAAa,EAAE;gBAC9BE,MAAMkD,UAAU,CAAC,aAAa,GAAG,CAAC,EAAEc,kBAAkB,CAAC,EAAElE,KAAK,CAAC,aAAa,CAAC,CAAC;YAChF,OAAO;gBACLE,MAAMkD,UAAU,CAAC,aAAa,GAAGc;YACnC;QACF;IACF;IAEA,MAAMG,uBAAuBhF,iBAC3BD,gBAAec,mBAAAA,MAAMmD,SAAS,cAAfnD,uCAAAA,iBAAiBuD,WAAW,EAAE,CAACa;QAC5CA,GAAGT,cAAc;IACnB;IAEF,MAAMU,mBAAmBlF,iBACvBD,gBAAec,oBAAAA,MAAMmD,SAAS,cAAfnD,wCAAAA,kBAAiBsE,OAAO,EAAE,CAACF;QACxCnD,eAAemD;IACjB;IAGF,IAAIpE,MAAMmD,SAAS,EAAE;QACnBnD,MAAMmD,SAAS,CAACI,WAAW,GAAGY;QAC9BnE,MAAMmD,SAAS,CAACmB,OAAO,GAAGD;IAC5B;IAEA,gGAAgG;IAChG,IAAIlD,aAAa;QACfnB,MAAMmD,SAAS,GAAGR;IACpB;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,kGAAkG;QAClG/F,MAAMgG,SAAS,CAAC;YACd,IAAI1D,aAAaG,aAAa;gBAC5B,sCAAsC;gBACtCwD,QAAQC,KAAK,CAAC,CAAC,iFAAiF,CAAC;YACnG;QACF,GAAG;YAAC5D;YAAWG;SAAY;IAC7B;IAEA,OAAOnB;AACT,EAAE"}

package/lib/components/Option/useOption.js

@@ -56,7 +56,7 @@ function getTextString(text, children) {
     const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
     const selected = useListboxContext_unstable((ctx)=>{
         const selectedOptions = ctx.selectedOptions;
-        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
+        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
     });
     const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
     const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);

package/lib/components/Option/useOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

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

@@ -36,7 +36,7 @@ const useCombobox_unstable = (props, ref)=>{
         editable: true,
         activeDescendantController
     });
-    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;
+    const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
     const { freeform, inlinePopup } = props;
     const comboId = (0, _reactutilities.useId)('combobox-');
@@ -99,6 +99,7 @@ const useCombobox_unstable = (props, ref)=>{
         expandIcon: _reactutilities.slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
+                'aria-disabled': disabled ? 'true' : undefined,
                 'aria-expanded': open,
                 children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
                 role: 'button'

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.js"],"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 { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\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 */ export const useCombobox_unstable = (props, ref)=>{\n    var _state_clearIcon, _state_clearIcon1;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true,\n        activeDescendantController\n    });\n    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { freeform, inlinePopup } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        },\n        activeDescendantController\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox,\n            clearIcon: 'span'\n        },\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: /*#__PURE__*/ React.createElement(DismissIcon, null)\n            },\n            elementType: 'span',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-expanded': open,\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        showClearIcon,\n        activeDescendantController,\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\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                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\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    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{\n        ev.preventDefault();\n    }));\n    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{\n        clearSelection(ev);\n    }));\n    if (state.clearIcon) {\n        state.clearIcon.onMouseDown = onClearIconMouseDown;\n        state.clearIcon.onClick = onClearIconClick;\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    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        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_state_clearIcon","_state_clearIcon1","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","type","id","undefined","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.js"],"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 { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\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 */ export const useCombobox_unstable = (props, ref)=>{\n    var _state_clearIcon, _state_clearIcon1;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true,\n        activeDescendantController\n    });\n    const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, value, hasFocus } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { freeform, inlinePopup } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        },\n        activeDescendantController\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox,\n            clearIcon: 'span'\n        },\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: /*#__PURE__*/ React.createElement(DismissIcon, null)\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: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        showClearIcon,\n        activeDescendantController,\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\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                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\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    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{\n        ev.preventDefault();\n    }));\n    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{\n        clearSelection(ev);\n    }));\n    if (state.clearIcon) {\n        state.clearIcon.onMouseDown = onClearIconMouseDown;\n        state.clearIcon.onClick = onClearIconClick;\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    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        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_state_clearIcon","_state_clearIcon1","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","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","type","id","undefined","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib-commonjs/components/Option/useOption.js

@@ -59,7 +59,7 @@ const useOption_unstable = (props, ref)=>{
     const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
     const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{
         const selectedOptions = ctx.selectedOptions;
-        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
+        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
     });
     const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
     const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);

package/lib-commonjs/components/Option/useOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    // context values\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);\n    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const selected = useListboxContext_unstable((ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        activeDescendantController.focus(id);\n        // handle selection change\n        selectOption(event, optionData);\n        onOptionClick(event);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    // context values\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);\n    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const selected = useListboxContext_unstable((ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;\n    });\n    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        activeDescendantController.focus(id);\n        // handle selection change\n        selectOption(event, optionData);\n        onOptionClick(event);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":";;;;+BAiCiBA;;;eAAAA;;;;iEAjCM;gCAC8C;2BAC1B;4BACQ;gCACR;AAC3C,SAASC,cAAcC,IAAI,EAAEC,QAAQ;IACjC,IAAID,SAASE,WAAW;QACpB,OAAOF;IACX;IACA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBC,OAAMC,QAAQ,CAACC,OAAO,CAACN,UAAU,CAACO;QAC9B,IAAI,OAAOA,UAAU,UAAU;YAC3BL,cAAcK;QAClB,OAAO;YACHJ,oBAAoB;QACxB;IACJ;IACA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACnB,sCAAsC;QACtCK,QAAQC,IAAI,CAAC;IACjB;IACA,OAAOP;AACX;AASW,MAAML,qBAAqB,CAACa,OAAOC;IAC1C,MAAM,EAAEX,QAAQ,EAAEY,QAAQ,EAAEb,IAAI,EAAEc,KAAK,EAAE,GAAGH;IAC5C,MAAMI,YAAYV,OAAMW,MAAM,CAAC;IAC/B,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,UAAU,QAAQA,UAAU,KAAK,IAAIA,QAAQG;IACjE,uDAAuD;IACvD,MAAME,KAAKC,IAAAA,qBAAK,EAAC,iBAAiBT,MAAMQ,EAAE;IAC1C,8CAA8C;IAC9C,MAAME,aAAahB,OAAMiB,OAAO,CAAC,IAAK,CAAA;YAC9BH;YACAN;YACAb,MAAMiB;YACNH,OAAOI;QACX,CAAA,GAAI;QACJC;QACAN;QACAI;QACAC;KACH;IACD,iBAAiB;IACjB,MAAM,EAAEK,YAAYC,0BAA0B,EAAE,GAAGC,IAAAA,qCAA0B;IAC7E,MAAMC,cAAcC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,WAAW;IACrE,MAAMG,iBAAiBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,cAAc;IAC3E,MAAMC,WAAWH,IAAAA,0CAA0B,EAAC,CAACC;QACzC,MAAMG,kBAAkBH,IAAIG,eAAe;QAC3C,OAAOb,gBAAgBhB,aAAa6B,gBAAgBC,IAAI,CAAC,CAACC,IAAIA,MAAMf,iBAAiBhB;IACzF;IACA,MAAMgC,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,gBAAgBR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,aAAa;IACzE,aAAa;IACb,IAAIC,YAAY,WAAW,GAAG/B,OAAMgC,aAAa,CAACC,2BAAe,EAAE;IACnE,IAAIZ,aAAa;QACbU,YAAYN,WAAW,WAAW,GAAGzB,OAAMgC,aAAa,CAACE,6BAAiB,EAAE,QAAQ;IACxF;IACA,MAAMC,UAAU,CAACC;QACb,IAAIC;QACJ,IAAI7B,UAAU;YACV4B,MAAME,cAAc;YACpB;QACJ;QACAnB,2BAA2BoB,KAAK,CAACzB;QACjC,0BAA0B;QAC1Be,aAAaO,OAAOpB;QACpBc,cAAcM;QACbC,CAAAA,iBAAiB/B,MAAM6B,OAAO,AAAD,MAAO,QAAQE,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeG,IAAI,CAAClC,OAAO8B;IACjH;IACA,oCAAoC;IACpCpC,OAAMyC,SAAS,CAAC;QACZ,IAAI3B,MAAMJ,UAAUgC,OAAO,EAAE;YACzB,OAAOlB,eAAeR,YAAYN,UAAUgC,OAAO;QACvD;IACJ,GAAG;QACC5B;QACAE;QACAQ;KACH;IACD,MAAMmB,gBAAgBtB,cAAc;QAChCuB,MAAM;QACN,gBAAgBnB;IACpB,IAAI;QACAmB,MAAM;QACN,iBAAiBnB;IACrB;IACA,OAAO;QACHoB,YAAY;YACRC,MAAM;YACNC,WAAW;QACf;QACAD,MAAME,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3C,KAAK4C,IAAAA,6BAAa,EAAC5C,KAAKG;YACxB,iBAAiBF,WAAW,SAASX;YACrCiB;YACA,GAAG6B,aAAa;YAChB,GAAGrC,KAAK;YACR6B;QACJ,IAAI;YACAiB,aAAa;QACjB;QACAL,WAAWC,oBAAI,CAACK,QAAQ,CAAC/C,MAAMyC,SAAS,EAAE;YACtCO,iBAAiB;YACjBC,cAAc;gBACV,eAAe;gBACf3D,UAAUmC;YACd;YACAqB,aAAa;QACjB;QACA5C;QACAa;QACAI;QACA,iBAAiB;QACjB+B,cAAc;QACdC,QAAQ;IACZ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.11.0",
+  "version": "9.11.2",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,18 +33,18 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.11.0",
+    "@fluentui/react-aria": "^9.11.2",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.58",
-    "@fluentui/react-field": "^9.1.63",
+    "@fluentui/react-context-selector": "^9.1.59",
+    "@fluentui/react-field": "^9.1.64",
     "@fluentui/react-icons": "^2.0.237",
-    "@fluentui/react-jsx-runtime": "^9.0.36",
-    "@fluentui/react-portal": "^9.4.22",
-    "@fluentui/react-positioning": "^9.14.4",
-    "@fluentui/react-shared-contexts": "^9.17.0",
-    "@fluentui/react-tabster": "^9.21.0",
+    "@fluentui/react-jsx-runtime": "^9.0.37",
+    "@fluentui/react-portal": "^9.4.24",
+    "@fluentui/react-positioning": "^9.15.0",
+    "@fluentui/react-shared-contexts": "^9.18.0",
+    "@fluentui/react-tabster": "^9.21.2",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.7",
+    "@fluentui/react-utilities": "^9.18.8",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },