@fluentui/react-combobox 9.5.27 → 9.5.29

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Sat, 28 Oct 2023 23:32:01 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Nov 2023 17:23:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.29)
+
+Thu, 09 Nov 2023 17:23:01 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:55:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.27..@fluentui/react-combobox_v9.5.28)
+
+### Patches
+
+- fix: Combobox now collapses when mousing up outside of listbox after having moused within it. ([PR #29682](https://github.com/microsoft/fluentui/pull/29682) by makotom@microsoft.com)
+- Bump @fluentui/react-field to v9.1.40 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
+- Bump @fluentui/react-portal to v9.3.27 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
+- Bump @fluentui/react-positioning to v9.9.23 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.11.1 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
+- Bump @fluentui/react-theme to v9.1.15 ([PR #29663](https://github.com/microsoft/fluentui/pull/29663) by beachball)
+
 ## [9.5.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.27)
 
-Sat, 28 Oct 2023 23:32:01 GMT 
+Sat, 28 Oct 2023 23:35:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.26..@fluentui/react-combobox_v9.5.27)
 
 ### 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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,sBAAsBC,eAAe,QAAQ,wBAAwB;AAC9E,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,aAAa,EAAEC,UAAU,EAAEC,IAAI,QAAQ,4BAA4B;AACvH,SAASC,wBAAwB,QAAQ,iCAAiC;AAC1E,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,OAAO,QAAQ,qBAAqB;AAK7C;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,+CAA+C;IAC/CD,QAAQd,8BAA8Bc,OAAO;QAAEE,kBAAkB;QAAMC,cAAc;IAAK;IAE1F,MAAMC,YAAYT,qBAAqBK;IACvC,MAAM,EAAEK,YAAY,EAAEC,YAAY,EAAEC,sBAAsB,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,OAAO,EAAE,GAC3GP;IAEF,MAAM,EAAEQ,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAG1B,0BAA0B;QACvFW;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,2DAA2D;IAC3D,MAAMC,UAAUjC,MAAMkC,MAAM,CAAiB;IAC7C,MAAM,CAACC,YAAYC,cAAc,GAAGpC,MAAMqC,QAAQ;IAClDrC,MAAMsC,SAAS,CAAC;YACUL;QAAxB,MAAMM,QAAQhB,OAAO,CAAC,GAAEU,mBAAAA,QAAQO,OAAO,cAAfP,uCAAAA,iBAAiBQ,WAAW,CAAC,EAAE,CAAC,GAAGC;QAC3DN,cAAcG;IAChB,GAAG;QAAChB;KAAK;IAET,0CAA0C;IAC1C,MAAMoB,eAAe3C,MAAMkC,MAAM,CAAC;IAClC,MAAM,CAACU,eAAeC,gBAAgB,GAAGtC;IAEzC,MAAMuC,wBAAwB;QAC5B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACP,aAAaH,OAAO,MAAM;QACjG,IAAIW,UAAU7B,uBAAuByB;QACrC,IAAIK,aAAahC,eAAeC,aAAaD,aAAaiC,EAAE,IAAI;QAEhE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAI9B,QAAQoB,aAAaH,OAAO,CAACc,MAAM,KAAK,GAAG;YAC7CF;QACF;QAEA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACnB,MAAMC,UAAUZ,aAAaH,OAAO,CAACgB,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAACC,CAAAA,SAAUA,WAAWJ,OAAO,CAAC,EAAE;YAErF,wFAAwF;YACxF,IAAIE,eAAe;gBACjBL;gBACAL,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACK,OAAO,CAAC,EAAE,MAAM;gBACnFJ,UAAU7B,uBAAuByB;YACnC;QACF;QAEA,qDAAqD;QACrD,wFAAwF;QACxF,IAAII,QAAQG,MAAM,GAAG,KAAKlC,cAAc;YACtC,MAAMwC,YAAYT,QAAQU,IAAI,CAACC,CAAAA,SAAUzC,aAAayC,OAAOT,EAAE,KAAKD;YACpE,OAAOQ,sBAAAA,uBAAAA,YAAaT,OAAO,CAAC,EAAE;QAChC;YAEOA;QAAP,OAAOA,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,YAAcT;IACvB;IAEA,MAAMqB,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BnB;QAEA,kDAAkD;QAClD,IAAIpC,yBAAyBuD,QAAQ,QAAQ;YAC3C,uBAAuB;YACvBrB,aAAaH,OAAO,IAAIwB,GAAGC,GAAG,CAAChB,WAAW;YAC1CL,cAAc;gBACZD,aAAaH,OAAO,GAAG;YACzB,GAAG;YAEH,eAAe;YACf,CAACjB,QAAQG,QAAQsC,IAAI;YAErB,MAAME,aAAapB;YACnBtB,gBAAgB0C;YAChBzC,gBAAgB;QAClB;IACF;IAEA,wCAAwC;IACxC,IAAI0C;IACJ,IAAIC;IAEJD,cAAc3D,KAAK6D,MAAM,CAACtD,MAAMuD,MAAM,EAAE;QACtCC,cAAc;YACZC,MAAM;YACNC,UAAUtD,UAAUuD,KAAK,IAAI3D,MAAM4D,WAAW;YAC9C,GAAG/C,kBAAkB;QACvB;QACAgD,aAAa;IACf;IACAT,YAAYU,SAAS,GAAGxE,eAAe0D,kBAAkBI,YAAYU,SAAS;IAC9ET,cACEjD,UAAUI,IAAI,IAAIJ,UAAU2D,QAAQ,GAChCtE,KAAKuE,QAAQ,CAAChE,MAAMiE,OAAO,EAAE;QAC3BC,iBAAiB;QACjBV,cAAc;YAAEE,UAAU1D,MAAM0D,QAAQ;YAAES,OAAO;gBAAE3C,OAAOJ;YAAW;QAAE;QACvEyC,aAAa/D;IACf,KACA6B;IACN,CAACyB,aAAaC,YAAY,GAAGzD,iBAAiBI,OAAOoD,aAAaC;IAClE,CAACD,aAAaC,YAAY,GAAGxD,uBAAuBG,OAAOI,WAAWH,KAAKmD,aAAaC;IACxF,MAAMe,QAAuB;QAC3BC,YAAY;YAAEvD,MAAM;YAAOyC,QAAQ;YAAUe,YAAY;YAAQL,SAASnE;QAAQ;QAClFgB,MAAMrB,KAAK6D,MAAM,CAACtD,MAAMc,IAAI,EAAE;YAC5B0C,cAAc;gBACZ,aAAa,CAACxD,MAAMuE,WAAW,GAAGlB,wBAAAA,kCAAAA,YAAaf,EAAE,GAAGX;gBACpD+B,UAAU1D,MAAM0D,QAAQ;gBACxB,GAAG3C,eAAe;YACpB;YACA8C,aAAa;QACf;QACAN,QAAQH;QACRa,SAASZ;QACTiB,YAAY7E,KAAKuE,QAAQ,CAAChE,MAAMsE,UAAU,EAAE;YAC1CJ,iBAAiB;YACjBV,cAAc;gBACZE,wBAAU,oBAACtE;YACb;YACAyE,aAAa;QACf;QACAW,oBAAoB,CAACpE,UAAUuD,KAAK,IAAI,CAAC,CAAC3D,MAAM4D,WAAW;QAC3D,GAAGxD,SAAS;IACd;IAEAgE,MAAMtD,IAAI,CAACb,GAAG,GAAGV,cAAc6E,MAAMtD,IAAI,CAACb,GAAG,EAAEiB;IAE/C,OAAOkD;AACT,EAAE"}
+{"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/utils/useTriggerListboxSlots.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
 /*
@@ -10,13 +11,16 @@ import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownK
     const { activeOption, getCount, getIndexOfId, getOptionAtIndex, ignoreNextBlur, open, selectOption, setActiveOption, setFocusVisible, setHasFocus, setOpen } = state;
     // handle trigger focus/blur
     const triggerRef = React.useRef(null);
+    const listboxRef = React.useRef(null);
     // resolve listbox shorthand props
     const listboxId = useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
+    const mergedListboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, listboxRef);
     const listbox = listboxSlot && {
         id: listboxId,
         multiselect,
         tabIndex: undefined,
-        ...listboxSlot
+        ...listboxSlot,
+        ref: mergedListboxRef
     };
     // resolve trigger shorthand props
     const trigger = {
@@ -40,8 +44,17 @@ import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownK
     const listboxOnMouseOver = useEventCallback(mergeCallbacks((event)=>{
         setFocusVisible(false);
     }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
+    const { targetDocument } = useFluent_unstable();
+    const documentOnMouseUp = useEventCallback((ev)=>{
+        var _listboxRef_current;
+        if (!((_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.contains(ev.target))) {
+            setOpen(ev, false);
+        }
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', documentOnMouseUp);
+    });
     const listboxOnMouseDown = useEventCallback(mergeCallbacks((event)=>{
         ignoreNextBlur.current = true;
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', documentOnMouseUp);
     }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
     // listbox is nullable, only add event handlers if it exists
     if (listbox) {

package/lib/utils/useTriggerListboxSlots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { multiselect } = props;\n  const {\n    activeOption,\n    getCount,\n    getIndexOfId,\n    getOptionAtIndex,\n    ignoreNextBlur,\n    open,\n    selectOption,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n  } = state;\n\n  // handle trigger focus/blur\n  const triggerRef: typeof ref = React.useRef(null);\n\n  // resolve listbox shorthand props\n  const listboxId = useId('fluent-listbox', listboxSlot?.id);\n  const listbox: typeof listboxSlot = listboxSlot && {\n    id: listboxId,\n    multiselect,\n    tabIndex: undefined,\n    ...listboxSlot,\n  };\n\n  // resolve trigger shorthand props\n  const trigger: typeof triggerSlot = {\n    'aria-expanded': open,\n    'aria-activedescendant': open ? activeOption?.id : undefined,\n    role: 'combobox',\n    ...triggerSlot,\n    // explicitly type the ref as an intersection here to prevent type errors\n    // since the `children` prop has mutually incompatible types between input/button\n    // functionally both ref and triggerRef will always be the same element type\n    ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n  };\n\n  /*\n   * Handle focus when clicking the listbox popup:\n   * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n   * 2. Do not close the listbox on button/input blur when clicking into the listbox\n   */\n  const listboxOnClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      triggerRef.current?.focus();\n    }, listbox?.onClick),\n  );\n\n  const listboxOnMouseOver = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      setFocusVisible(false);\n    }, listbox?.onMouseOver),\n  );\n\n  const listboxOnMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      ignoreNextBlur.current = true;\n    }, listbox?.onMouseDown),\n  );\n\n  // listbox is nullable, only add event handlers if it exists\n  if (listbox) {\n    listbox.onClick = listboxOnClick;\n    listbox.onMouseOver = listboxOnMouseOver;\n    listbox.onMouseDown = listboxOnMouseDown;\n  }\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    if (!ignoreNextBlur.current) {\n      setOpen(event, false);\n    }\n\n    ignoreNextBlur.current = false;\n\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      setHasFocus(true);\n    },\n    trigger.onFocus,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n      const action = getDropdownActionFromKey(event, { open, multiselect });\n      const maxIndex = getCount() - 1;\n      const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n      let newIndex = activeIndex;\n\n      switch (action) {\n        case 'Open':\n          event.preventDefault();\n          setFocusVisible(true);\n          setOpen(event, true);\n          break;\n        case 'Close':\n          // stop propagation for escape key to avoid dismissing any parent popups\n          event.stopPropagation();\n          event.preventDefault();\n          setOpen(event, false);\n          break;\n        case 'CloseSelect':\n          !multiselect && !activeOption?.disabled && setOpen(event, false);\n        // fallthrough\n        case 'Select':\n          activeOption && selectOption(event, activeOption);\n          event.preventDefault();\n          break;\n        case 'Tab':\n          !multiselect && activeOption && selectOption(event, activeOption);\n          break;\n        default:\n          newIndex = getIndexFromAction(action, activeIndex, maxIndex);\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    trigger.onKeyDown,\n  );\n\n  trigger.onMouseOver = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setFocusVisible(false);\n    },\n    trigger.onMouseOver,\n  );\n\n  return [trigger, listbox];\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxId","id","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"mappings":"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"}
+{"version":3,"sources":["useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { multiselect } = props;\n  const {\n    activeOption,\n    getCount,\n    getIndexOfId,\n    getOptionAtIndex,\n    ignoreNextBlur,\n    open,\n    selectOption,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n  } = state;\n\n  // handle trigger focus/blur\n  const triggerRef: typeof ref = React.useRef(null);\n  const listboxRef: NonNullable<typeof listboxSlot>['ref'] = React.useRef(null);\n\n  // resolve listbox shorthand props\n  const listboxId = useId('fluent-listbox', listboxSlot?.id);\n  const mergedListboxRef = useMergedRefs(listboxSlot?.ref, listboxRef);\n  const listbox: typeof listboxSlot = listboxSlot && {\n    id: listboxId,\n    multiselect,\n    tabIndex: undefined,\n    ...listboxSlot,\n    ref: mergedListboxRef,\n  };\n\n  // resolve trigger shorthand props\n  const trigger: typeof triggerSlot = {\n    'aria-expanded': open,\n    'aria-activedescendant': open ? activeOption?.id : undefined,\n    role: 'combobox',\n    ...triggerSlot,\n    // explicitly type the ref as an intersection here to prevent type errors\n    // since the `children` prop has mutually incompatible types between input/button\n    // functionally both ref and triggerRef will always be the same element type\n    ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n  };\n\n  /*\n   * Handle focus when clicking the listbox popup:\n   * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n   * 2. Do not close the listbox on button/input blur when clicking into the listbox\n   */\n  const listboxOnClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      triggerRef.current?.focus();\n    }, listbox?.onClick),\n  );\n\n  const listboxOnMouseOver = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      setFocusVisible(false);\n    }, listbox?.onMouseOver),\n  );\n\n  const { targetDocument } = useFluent_unstable();\n  const documentOnMouseUp = useEventCallback((ev: MouseEvent) => {\n    if (!listboxRef.current?.contains(ev.target as HTMLElement)) {\n      setOpen(ev as unknown as React.MouseEvent<HTMLElement>, false);\n    }\n    targetDocument?.removeEventListener('mouseup', documentOnMouseUp);\n  });\n\n  const listboxOnMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      ignoreNextBlur.current = true;\n      targetDocument?.addEventListener('mouseup', documentOnMouseUp);\n    }, listbox?.onMouseDown),\n  );\n\n  // listbox is nullable, only add event handlers if it exists\n  if (listbox) {\n    listbox.onClick = listboxOnClick;\n    listbox.onMouseOver = listboxOnMouseOver;\n    listbox.onMouseDown = listboxOnMouseDown;\n  }\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    if (!ignoreNextBlur.current) {\n      setOpen(event, false);\n    }\n\n    ignoreNextBlur.current = false;\n\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      setHasFocus(true);\n    },\n    trigger.onFocus,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n      const action = getDropdownActionFromKey(event, { open, multiselect });\n      const maxIndex = getCount() - 1;\n      const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n      let newIndex = activeIndex;\n\n      switch (action) {\n        case 'Open':\n          event.preventDefault();\n          setFocusVisible(true);\n          setOpen(event, true);\n          break;\n        case 'Close':\n          // stop propagation for escape key to avoid dismissing any parent popups\n          event.stopPropagation();\n          event.preventDefault();\n          setOpen(event, false);\n          break;\n        case 'CloseSelect':\n          !multiselect && !activeOption?.disabled && setOpen(event, false);\n        // fallthrough\n        case 'Select':\n          activeOption && selectOption(event, activeOption);\n          event.preventDefault();\n          break;\n        case 'Tab':\n          !multiselect && activeOption && selectOption(event, activeOption);\n          break;\n        default:\n          newIndex = getIndexFromAction(action, activeIndex, maxIndex);\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    trigger.onKeyDown,\n  );\n\n  trigger.onMouseOver = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setFocusVisible(false);\n    },\n    trigger.onMouseOver,\n  );\n\n  return [trigger, listbox];\n}\n"],"names":["React","useFluent_unstable","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxRef","listboxId","id","mergedListboxRef","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","targetDocument","documentOnMouseUp","ev","contains","target","removeEventListener","listboxOnMouseDown","addEventListener","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"mappings":"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"}

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, {