@fluentui/react-combobox 9.5.16 → 9.5.18

package/CHANGELOG.json

@@ -2,7 +2,151 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Wed, 20 Sep 2023 17:40:43 GMT",
+      "date": "Tue, 26 Sep 2023 17:44:09 GMT",
+      "tag": "@fluentui/react-combobox_v9.5.18",
+      "version": "9.5.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.6",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.36",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.31",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.18",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.15",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.14",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.13.5",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Sep 2023 15:32:04 GMT",
+      "tag": "@fluentui/react-combobox_v9.5.17",
+      "version": "9.5.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
+            "comment": "fix: bump swc core to mitigate transpilation memory leaks"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "a31e7394d9f169bc5aa55430a22cdc65425a1b49",
+            "comment": "chore: Update react-icons version to pick up IconDirectionContextProvider updated export"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.5",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.35",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.30",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.17",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.14",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.13",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.13.4",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 17:47:36 GMT",
       "tag": "@fluentui/react-combobox_v9.5.16",
       "version": "9.5.16",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 20 Sep 2023 17:40:43 GMT and should not be manually modified.
+This log was last generated on Tue, 26 Sep 2023 17:44:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.18)
+
+Tue, 26 Sep 2023 17:44:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.17..@fluentui/react-combobox_v9.5.18)
+
+### Patches
+
+- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.6 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.36 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-field to v9.1.31 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-portal to v9.3.18 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-positioning to v9.9.15 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+
+## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.17)
+
+Tue, 26 Sep 2023 15:32:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.16..@fluentui/react-combobox_v9.5.17)
+
+### Patches
+
+- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
+- chore: Update react-icons version to pick up IconDirectionContextProvider updated export ([PR #29151](https://github.com/microsoft/fluentui/pull/29151) by ololubek@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.5 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.35 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-field to v9.1.30 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-portal to v9.3.17 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-positioning to v9.9.14 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+
 ## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.16)
 
-Wed, 20 Sep 2023 17:40:43 GMT 
+Wed, 20 Sep 2023 17:47:36 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.15..@fluentui/react-combobox_v9.5.16)
 
 ### Patches

package/lib/components/Combobox/useCombobox.js

@@ -17,7 +17,7 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */ export const useCombobox_unstable = (props, ref)=>{
-    var _props_input, _listboxSlot;
+    var _props_input;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
@@ -53,9 +53,9 @@ import { Listbox } from '../Listbox/Listbox';
     React.useEffect(()=>{
         // only recalculate width when opening
         if (open) {
-            var _rootRef_current, _popupDimensions;
+            var _rootRef_current;
             const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
-            if (width !== ((_popupDimensions = popupDimensions) === null || _popupDimensions === void 0 ? void 0 : _popupDimensions.width)) {
+            if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
                 setPopupDimensions({
                     width
                 });
@@ -67,8 +67,7 @@ import { Listbox } from '../Listbox/Listbox';
     ]);
     // set active option and selection based on typing
     const getOptionFromInput = (inputValue)=>{
-        var _inputValue;
-        const searchString = (_inputValue = inputValue) === null || _inputValue === void 0 ? void 0 : _inputValue.trim().toLowerCase();
+        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
         if (!searchString || searchString.length === 0) {
             return;
         }
@@ -91,9 +90,8 @@ import { Listbox } from '../Listbox/Listbox';
     const onTriggerBlur = (ev)=>{
         // handle selection and updating value if freeform is false
         if (!baseState.open && !freeform) {
-            var _activeOption;
             // select matching option, if the value fully matches
-            if (value && activeOption && value.trim().toLowerCase() === ((_activeOption = activeOption) === null || _activeOption === void 0 ? void 0 : _activeOption.text.toLowerCase())) {
+            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
                 baseState.selectOption(ev, activeOption);
             }
             // reset typed value when the input loses focus while collapsed, unless freeform is true
@@ -160,7 +158,7 @@ import { Listbox } from '../Listbox/Listbox';
         },
         root: slot.always(props.root, {
             defaultProps: {
-                'aria-owns': !inlinePopup ? (_listboxSlot = listboxSlot) === null || _listboxSlot === void 0 ? void 0 : _listboxSlot.id : undefined,
+                'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
                 ...rootNativeProps
             },
             elementType: 'div'
@@ -181,8 +179,6 @@ import { Listbox } from '../Listbox/Listbox';
     state.root.ref = useMergedRefs(state.root.ref, rootRef);
     /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;
     state.input.onKeyDown = useEventCallback((ev)=>{
-        var // if we're not allowing space to type, continue with default behavior
-        _defaultOnTriggerKeyDown;
         if (!open && getDropdownActionFromKey(ev) === 'Type') {
             baseState.setOpen(ev, true);
         }
@@ -204,11 +200,11 @@ import { Listbox } from '../Listbox/Listbox';
         }
         // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
         if (freeform && (isTyping.current || !open) && ev.key === ' ') {
-            var _resolvedPropsOnKeyDown;
-            (_resolvedPropsOnKeyDown = resolvedPropsOnKeyDown) === null || _resolvedPropsOnKeyDown === void 0 ? void 0 : _resolvedPropsOnKeyDown(ev);
+            resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
             return;
         }
-        (_defaultOnTriggerKeyDown = defaultOnTriggerKeyDown) === null || _defaultOnTriggerKeyDown === void 0 ? void 0 : _defaultOnTriggerKeyDown(ev);
+        // if we're not allowing space to type, continue with default behavior
+        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
     });
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
     const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, ()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\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\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = 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 rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.input, {\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n    elementType: 'input',\n  });\n  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: popupDimensions },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\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    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\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  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","listboxSlot","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","always","input","defaultProps","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","optional","listbox","renderByDefault","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\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\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = 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 rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.input, {\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n    elementType: 'input',\n  });\n  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: popupDimensions },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\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    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\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  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","always","input","defaultProps","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","optional","listbox","renderByDefault","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}

package/lib/components/Dropdown/useDropdown.js

@@ -16,7 +16,6 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Dropdown
  * @param ref - reference to root HTMLElement of Dropdown
  */ export const useDropdown_unstable = (props, ref)=>{
-    var _listboxSlot;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
@@ -125,7 +124,7 @@ import { Listbox } from '../Listbox/Listbox';
         },
         root: slot.always(props.root, {
             defaultProps: {
-                'aria-owns': !props.inlinePopup ? (_listboxSlot = listboxSlot) === null || _listboxSlot === void 0 ? void 0 : _listboxSlot.id : undefined,
+                'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
                 children: props.children,
                 ...rootNativeProps
             },

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

@@ -1 +1 @@
-{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =\n    baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.button, {\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n    elementType: 'button',\n  });\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: { width: popupWidth } },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\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    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","useTimeout","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useDropdown_unstable","props","ref","listboxSlot","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","hasFocus","optional","listbox","renderByDefault","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"mappings":"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"}
+{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =\n    baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.button, {\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n    elementType: 'button',\n  });\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: { width: popupWidth } },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\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    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","useTimeout","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","hasFocus","optional","listbox","renderByDefault","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"mappings":"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"}

package/lib/components/Listbox/useListbox.js

@@ -15,7 +15,6 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
  * @param props - props from this instance of Listbox
  * @param ref - reference to root HTMLElement of Listbox
  */ export const useListbox_unstable = (props, ref)=>{
-    var _activeOption;
     const { multiselect } = props;
     const optionCollection = useOptionCollection();
     const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;
@@ -77,7 +76,7 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
         root: slot.always(getNativeElementProps('div', {
             ref,
             role: multiselect ? 'menu' : 'listbox',
-            'aria-activedescendant': hasComboboxContext ? undefined : (_activeOption = activeOption) === null || _activeOption === void 0 ? void 0 : _activeOption.id,
+            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
             'aria-multiselectable': multiselect,
             tabIndex: 0,
             ...props

package/lib/components/Listbox/useListbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const maxIndex = getCount() - 1;\n    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n    let newIndex = activeIndex;\n\n    switch (action) {\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n      default:\n        newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n    }\n\n    if (newIndex !== activeIndex) {\n      // prevent default page scroll/keyboard action if the index changed\n      event.preventDefault();\n      setActiveOption(getOptionAtIndex(newIndex));\n      setFocusVisible(true);\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n    setFocusVisible(false);\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption,\n      }\n    : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        role: multiselect ? 'menu' : 'listbox',\n        'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n        'aria-multiselectable': multiselect,\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  const scrollContainerRef = useScrollOptionsIntoView(state);\n  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n  return state;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","activeOption","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"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"}
+{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const maxIndex = getCount() - 1;\n    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n    let newIndex = activeIndex;\n\n    switch (action) {\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n      default:\n        newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n    }\n\n    if (newIndex !== activeIndex) {\n      // prevent default page scroll/keyboard action if the index changed\n      event.preventDefault();\n      setActiveOption(getOptionAtIndex(newIndex));\n      setFocusVisible(true);\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n    setFocusVisible(false);\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption,\n      }\n    : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        role: multiselect ? 'menu' : 'listbox',\n        'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n        'aria-multiselectable': multiselect,\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  const scrollContainerRef = useScrollOptionsIntoView(state);\n  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n  return state;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"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"}

package/lib/components/Option/useOption.js

@@ -73,7 +73,7 @@ function getTextString(text, children) {
         CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';
     }
     const onClick = (event)=>{
-        var _props_onClick, _props;
+        var _props_onClick;
         if (disabled) {
             event.preventDefault();
             return;
@@ -82,12 +82,11 @@ function getTextString(text, children) {
         setActiveOption(optionData);
         // close on option click for single-select options in a combobox
         if (!multiselect) {
-            var _setOpen;
-            (_setOpen = setOpen) === null || _setOpen === void 0 ? void 0 : _setOpen(event, false);
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
         }
         // handle selection change
         selectOption(event, optionData);
-        (_props_onClick = (_props = props).onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(_props, event);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
     };
     // register option data with context
     React.useEffect(()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } 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 focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\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    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\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      getNativeElementProps('div', {\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    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","slot","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } 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 focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\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    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\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      getNativeElementProps('div', {\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    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","slot","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps"],"mappings":"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"}

package/lib/utils/useComboboxBaseState.js

@@ -59,8 +59,7 @@ import { useSelection } from '../utils/useSelection';
         initialState: false
     });
     const setOpen = React.useCallback((event, newState)=>{
-        var _onOpenChange;
-        (_onOpenChange = onOpenChange) === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(event, {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
             open: newState
         });
         setOpenState(newState);