@fluentui/react-combobox 9.5.28 → 9.5.30

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 01 Nov 2023 12:51:06 GMT and should not be manually modified.
+This log was last generated on Tue, 14 Nov 2023 17:48:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.30)
+
+Tue, 14 Nov 2023 17:48:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.29..@fluentui/react-combobox_v9.5.30)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.4.1 ([PR #29835](https://github.com/microsoft/fluentui/pull/29835) by beachball)
+
+## [9.5.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.29)
+
+Thu, 09 Nov 2023 17:29:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.28..@fluentui/react-combobox_v9.5.29)
+
+### Patches
+
+- refactor: Removes double render infavour of matchTargetSize ([PR #29690](https://github.com/microsoft/fluentui/pull/29690) by lingfangao@hotmail.com)
+- chore: use package.json#files setup instead of npmignore for all v9 libraries ([PR #29734](https://github.com/microsoft/fluentui/pull/29734) by martinhochel@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.7 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.42 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-field to v9.1.41 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.19 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-portal to v9.4.0 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-positioning to v9.10.0 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.12.0 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-theme to v9.1.16 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+- Bump @fluentui/react-utilities to v9.15.2 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
+
 ## [9.5.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.28)
 
-Wed, 01 Nov 2023 12:51:06 GMT 
+Wed, 01 Nov 2023 12:55:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.27..@fluentui/react-combobox_v9.5.28)
 
 ### Patches

package/lib/components/Combobox/useCombobox.js

@@ -5,7 +5,7 @@ import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useComboboxPopup } from '../../utils/useComboboxPopup';
+import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
 /**
@@ -29,6 +29,7 @@ import { Listbox } from '../Listbox/Listbox';
         editable: true
     });
     const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;
+    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     const { disabled, freeform, inlinePopup, multiselect } = props;
     const comboId = useId('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
@@ -48,23 +49,6 @@ import { Listbox } from '../Listbox/Listbox';
     // save the typing vs. navigating options state, as the space key should behave differently in each case
     // we do not want to update the combobox when this changes, just save the value between renders
     const isTyping = React.useRef(false);
-    // calculate listbox width style based on trigger width
-    const [popupDimensions, setPopupDimensions] = React.useState();
-    React.useEffect(()=>{
-        // only recalculate width when opening
-        if (open) {
-            var _rootRef_current;
-            const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
-            if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
-                setPopupDimensions({
-                    width
-                });
-            }
-        }
-    }, [
-        open,
-        popupDimensions
-    ]);
     // set active option and selection based on typing
     const getOptionFromInput = (inputValue)=>{
         const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
@@ -139,16 +123,26 @@ import { Listbox } from '../Listbox/Listbox';
     listboxSlot = open || hasFocus ? slot.optional(props.listbox, {
         renderByDefault: true,
         defaultProps: {
-            children: props.children,
-            style: popupDimensions
+            children: props.children
         },
         elementType: Listbox
     }) : undefined;
-    [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
     [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
+    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);
     if (hideActiveDescendant) {
         triggerSlot['aria-activedescendant'] = undefined;
     }
+    if (listboxSlot) {
+        listboxSlot.ref = listboxRef;
+    }
+    const rootSlot = slot.always(props.root, {
+        defaultProps: {
+            'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+            ...rootNativeProps
+        },
+        elementType: 'div'
+    });
+    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
     const state = {
         components: {
             root: 'div',
@@ -156,13 +150,7 @@ import { Listbox } from '../Listbox/Listbox';
             expandIcon: 'span',
             listbox: Listbox
         },
-        root: slot.always(props.root, {
-            defaultProps: {
-                'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
-                ...rootNativeProps
-            },
-            elementType: 'div'
-        }),
+        root: rootSlot,
         input: triggerSlot,
         listbox: listboxSlot,
         expandIcon: slot.optional(props.expandIcon, {

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","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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"}
+{"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 { useComboboxPositioning } from '../../utils/useComboboxPositioning';\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 [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\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  // 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 },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const listboxRef = useMergedRefs(listboxSlot?.ref, comboboxPopupRef);\n\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n  }\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\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","useComboboxPositioning","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","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","listboxRef","rootSlot","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","current","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}

package/lib/components/Dropdown/useDropdown.js

@@ -4,7 +4,7 @@ import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useComboboxPopup } from '../../utils/useComboboxPopup';
+import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
 /**
@@ -30,16 +30,7 @@ import { Listbox } from '../Listbox/Listbox';
             'children'
         ]
     });
-    // set listbox popup width based off the root/trigger width
-    const rootRef = React.useRef(null);
-    const [popupWidth, setPopupWidth] = React.useState();
-    React.useEffect(()=>{
-        var _rootRef_current;
-        const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;
-        setPopupWidth(width);
-    }, [
-        open
-    ]);
+    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     // jump to matching option based on typing
     const searchString = React.useRef('');
     const [setKeyTimeout, clearKeyTimeout] = useTimeout();
@@ -106,15 +97,24 @@ import { Listbox } from '../Listbox/Listbox';
     listboxSlot = baseState.open || baseState.hasFocus ? slot.optional(props.listbox, {
         renderByDefault: true,
         defaultProps: {
-            children: props.children,
-            style: {
-                width: popupWidth
-            }
+            children: props.children
         },
         elementType: Listbox
     }) : undefined;
-    [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
     [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
+    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);
+    if (listboxSlot) {
+        listboxSlot.ref = listboxRef;
+    }
+    const rootSlot = slot.always(props.root, {
+        defaultProps: {
+            'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+            children: props.children,
+            ...rootNativeProps
+        },
+        elementType: 'div'
+    });
+    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
     const state = {
         components: {
             root: 'div',
@@ -122,14 +122,7 @@ import { Listbox } from '../Listbox/Listbox';
             expandIcon: 'span',
             listbox: Listbox
         },
-        root: slot.always(props.root, {
-            defaultProps: {
-                'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
-                children: props.children,
-                ...rootNativeProps
-            },
-            elementType: 'div'
-        }),
+        root: rootSlot,
         button: triggerSlot,
         listbox: listboxSlot,
         expandIcon: slot.optional(props.expandIcon, {
@@ -142,6 +135,5 @@ import { Listbox } from '../Listbox/Listbox';
         placeholderVisible: !baseState.value && !!props.placeholder,
         ...baseState
     };
-    state.root.ref = useMergedRefs(state.root.ref, rootRef);
     return state;
 };

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","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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"}
+{"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 { useComboboxPositioning } from '../../utils/useComboboxPositioning';\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  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\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 },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const listboxRef = useMergedRefs(listboxSlot?.ref, comboboxPopupRef);\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n  }\n\n  const rootSlot = 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  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\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  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","useTimeout","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPositioning","useTriggerListboxSlots","Listbox","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","searchString","useRef","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","current","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","undefined","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","hasFocus","optional","listbox","renderByDefault","listboxRef","rootSlot","inlinePopup","state","components","expandIcon","placeholderVisible"],"mappings":"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"}

package/lib/utils/{useComboboxPopup.js → useComboboxPositioning.js}

@@ -1,6 +1,6 @@
 import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
-import { useMergedRefs } from '@fluentui/react-utilities';
-export function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
+import * as React from 'react';
+export function useComboboxPositioning(props) {
     const { positioning } = props;
     // Set a default set of fallback positions to try if the dropdown does not fit on screen
     const fallbackPositions = [
@@ -19,19 +19,12 @@ export function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
             mainAxis: 2
         },
         fallbackPositions,
+        matchTargetSize: 'width',
         ...resolvePositioningShorthand(positioning)
     };
     const { targetRef, containerRef } = usePositioning(popperOptions);
-    const listboxRef = useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
-    const listbox = listboxShorthand && {
-        ...listboxShorthand,
-        ref: listboxRef
-    };
     return [
-        {
-            ...triggerShorthand,
-            ref: useMergedRefs(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef)
-        },
-        listbox
+        containerRef,
+        targetRef
     ];
 }

package/lib/utils/useComboboxPositioning.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useComboboxPositioning.ts"],"sourcesContent":["import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  listboxRef: React.MutableRefObject<any>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  triggerRef: React.MutableRefObject<any>,\n] {\n  const { positioning } = props;\n\n  // Set a default set of fallback positions to try if the dropdown does not fit on screen\n  const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    matchTargetSize: 'width' as const,\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","targetRef","containerRef"],"mappings":"AAAA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAErH,YAAYC,WAAW,QAAQ;AAE/B,OAAO,SAASC,uBAAuBC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjB,GAAGb,4BAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAES,SAAS,EAAEC,YAAY,EAAE,GAAGd,eAAeM;IAEnD,OAAO;QAACQ;QAAcD;KAAU;AAClC"}

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

@@ -16,7 +16,7 @@ const _reacticons = require("@fluentui/react-icons");
 const _reactutilities = require("@fluentui/react-utilities");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
-const _useComboboxPopup = require("../../utils/useComboboxPopup");
+const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
 const _useTriggerListboxSlots = require("../../utils/useTriggerListboxSlots");
 const _Listbox = require("../Listbox/Listbox");
 const useCombobox_unstable = (props, ref)=>{
@@ -32,6 +32,7 @@ const useCombobox_unstable = (props, ref)=>{
         editable: true
     });
     const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;
+    const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
     const { disabled, freeform, inlinePopup, multiselect } = props;
     const comboId = (0, _reactutilities.useId)('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
@@ -51,23 +52,6 @@ const useCombobox_unstable = (props, ref)=>{
     // save the typing vs. navigating options state, as the space key should behave differently in each case
     // we do not want to update the combobox when this changes, just save the value between renders
     const isTyping = _react.useRef(false);
-    // calculate listbox width style based on trigger width
-    const [popupDimensions, setPopupDimensions] = _react.useState();
-    _react.useEffect(()=>{
-        // only recalculate width when opening
-        if (open) {
-            var _rootRef_current;
-            const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
-            if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
-                setPopupDimensions({
-                    width
-                });
-            }
-        }
-    }, [
-        open,
-        popupDimensions
-    ]);
     // set active option and selection based on typing
     const getOptionFromInput = (inputValue)=>{
         const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
@@ -142,16 +126,26 @@ const useCombobox_unstable = (props, ref)=>{
     listboxSlot = open || hasFocus ? _reactutilities.slot.optional(props.listbox, {
         renderByDefault: true,
         defaultProps: {
-            children: props.children,
-            style: popupDimensions
+            children: props.children
         },
         elementType: _Listbox.Listbox
     }) : undefined;
-    [triggerSlot, listboxSlot] = (0, _useComboboxPopup.useComboboxPopup)(props, triggerSlot, listboxSlot);
     [triggerSlot, listboxSlot] = (0, _useTriggerListboxSlots.useTriggerListboxSlots)(props, baseState, ref, triggerSlot, listboxSlot);
+    const listboxRef = (0, _reactutilities.useMergedRefs)(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);
     if (hideActiveDescendant) {
         triggerSlot['aria-activedescendant'] = undefined;
     }
+    if (listboxSlot) {
+        listboxSlot.ref = listboxRef;
+    }
+    const rootSlot = _reactutilities.slot.always(props.root, {
+        defaultProps: {
+            'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+            ...rootNativeProps
+        },
+        elementType: 'div'
+    });
+    rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
     const state = {
         components: {
             root: 'div',
@@ -159,13 +153,7 @@ const useCombobox_unstable = (props, ref)=>{
             expandIcon: 'span',
             listbox: _Listbox.Listbox
         },
-        root: _reactutilities.slot.always(props.root, {
-            defaultProps: {
-                'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
-                ...rootNativeProps
-            },
-            elementType: 'div'
-        }),
+        root: rootSlot,
         input: triggerSlot,
         listbox: listboxSlot,
         expandIcon: _reactutilities.slot.optional(props.expandIcon, {

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.js"],"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 { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, 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';\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 _props_input;\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 baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\n    const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;\n    const { disabled, freeform, inlinePopup, multiselect } = 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 rootRef = React.useRef(null);\n    const triggerRef = React.useRef(null);\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    // 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    // calculate listbox width style based on trigger width\n    const [popupDimensions, setPopupDimensions] = React.useState();\n    React.useEffect(()=>{\n        // only recalculate width when opening\n        if (open) {\n            var _rootRef_current;\n            const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;\n            if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {\n                setPopupDimensions({\n                    width\n                });\n            }\n        }\n    }, [\n        open,\n        popupDimensions\n    ]);\n    // set active option and selection based on typing\n    const getOptionFromInput = (inputValue)=>{\n        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n        if (!searchString || searchString.length === 0) {\n            return;\n        }\n        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n        const matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    /* Handle typed input */ // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    const onTriggerBlur = (ev)=>{\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 === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n                baseState.selectOption(ev, activeOption);\n            }\n            // reset typed value when the input loses focus while collapsed, unless freeform is true\n            setValue(undefined);\n        }\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\n    // update value and active option based on input\n    const onTriggerChange = (ev)=>{\n        const inputValue = ev.target.value;\n        // update uncontrolled value\n        baseState.setValue(inputValue);\n        // handle updating active option based on input\n        const matchingOption = getOptionFromInput(inputValue);\n        setActiveOption(matchingOption);\n        setFocusVisible(true);\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    // resolve input and listbox slot props\n    let triggerSlot;\n    let listboxSlot;\n    triggerSlot = slot.always(props.input, {\n        defaultProps: {\n            ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),\n            type: 'text',\n            value: value !== null && value !== void 0 ? 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 = open || hasFocus ? slot.optional(props.listbox, {\n        renderByDefault: true,\n        defaultProps: {\n            children: props.children,\n            style: popupDimensions\n        },\n        elementType: Listbox\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 = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: slot.always(props.root, {\n            defaultProps: {\n                'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : 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: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        ...baseState\n    };\n    state.root.ref = useMergedRefs(state.root.ref, rootRef);\n    /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;\n    state.input.onKeyDown = useEventCallback((ev)=>{\n        if (!open && getDropdownActionFromKey(ev) === 'Type') {\n            baseState.setOpen(ev, true);\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        // update typing state to true if the user is typing\n        const action = getDropdownActionFromKey(ev, {\n            open,\n            multiselect\n        });\n        if (action === 'Type') {\n            isTyping.current = true;\n        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n            isTyping.current = false;\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 === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);\n            return;\n        }\n        // if we're not allowing space to type, continue with default behavior\n        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);\n    });\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(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    const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, (event)=>{\n        var _triggerRef_current;\n        // open and set focus\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n        // set focus visible=false, since this can only be done with the mouse/pointer\n        setFocusVisible(false);\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        state.expandIcon.onClick = onExpandIconClick;\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    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_props_input","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","slot","always","input","defaultProps","useMergedRefs","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","mergeCallbacks","onBlur","optional","listbox","renderByDefault","children","style","Listbox","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","createElement","ChevronDownIcon","role","defaultOnTriggerKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.js"],"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 { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\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 _props_input;\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 baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\n    const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { disabled, freeform, inlinePopup, multiselect } = 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 rootRef = React.useRef(null);\n    const triggerRef = React.useRef(null);\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    // 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    // set active option and selection based on typing\n    const getOptionFromInput = (inputValue)=>{\n        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n        if (!searchString || searchString.length === 0) {\n            return;\n        }\n        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n        const matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    /* Handle typed input */ // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    const onTriggerBlur = (ev)=>{\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 === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n                baseState.selectOption(ev, activeOption);\n            }\n            // reset typed value when the input loses focus while collapsed, unless freeform is true\n            setValue(undefined);\n        }\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\n    // update value and active option based on input\n    const onTriggerChange = (ev)=>{\n        const inputValue = ev.target.value;\n        // update uncontrolled value\n        baseState.setValue(inputValue);\n        // handle updating active option based on input\n        const matchingOption = getOptionFromInput(inputValue);\n        setActiveOption(matchingOption);\n        setFocusVisible(true);\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    // resolve input and listbox slot props\n    let triggerSlot;\n    let listboxSlot;\n    triggerSlot = slot.always(props.input, {\n        defaultProps: {\n            ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),\n            type: 'text',\n            value: value !== null && value !== void 0 ? 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 = open || hasFocus ? slot.optional(props.listbox, {\n        renderByDefault: true,\n        defaultProps: {\n            children: props.children\n        },\n        elementType: Listbox\n    }) : undefined;\n    [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);\n    if (hideActiveDescendant) {\n        triggerSlot['aria-activedescendant'] = undefined;\n    }\n    if (listboxSlot) {\n        listboxSlot.ref = listboxRef;\n    }\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: rootSlot,\n        input: triggerSlot,\n        listbox: listboxSlot,\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        ...baseState\n    };\n    state.root.ref = useMergedRefs(state.root.ref, rootRef);\n    /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;\n    state.input.onKeyDown = useEventCallback((ev)=>{\n        if (!open && getDropdownActionFromKey(ev) === 'Type') {\n            baseState.setOpen(ev, true);\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        // update typing state to true if the user is typing\n        const action = getDropdownActionFromKey(ev, {\n            open,\n            multiselect\n        });\n        if (action === 'Type') {\n            isTyping.current = true;\n        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n            isTyping.current = false;\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 === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);\n            return;\n        }\n        // if we're not allowing space to type, continue with default behavior\n        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);\n    });\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(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    const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, (event)=>{\n        var _triggerRef_current;\n        // open and set focus\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n        // set focus visible=false, since this can only be done with the mouse/pointer\n        setFocusVisible(false);\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        state.expandIcon.onClick = onExpandIconClick;\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    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_props_input","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","multiselect","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","slot","always","input","defaultProps","useMergedRefs","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","mergeCallbacks","onBlur","optional","listbox","renderByDefault","children","Listbox","useTriggerListboxSlots","listboxRef","rootSlot","state","components","expandIcon","createElement","ChevronDownIcon","role","defaultOnTriggerKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}