@fluentui/react-combobox 9.5.33 → 9.5.35

package/lib/components/Dropdown/useDropdown.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
-import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } from '@fluentui/react-utilities';
-import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+import { getPartitionedNativeProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
-import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
+import { useListboxSlot } from '../../utils/useListboxSlot';
+import { useButtonTriggerSlot } from './useButtonTriggerSlot';
 /**
  * Create the state required to render Dropdown.
  *
@@ -22,7 +22,7 @@ import { Listbox } from '../Listbox/Listbox';
         supportsSize: true
     });
     const baseState = useComboboxBaseState(props);
-    const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } = baseState;
+    const { open } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'button',
@@ -31,85 +31,27 @@ import { Listbox } from '../Listbox/Listbox';
         ]
     });
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
-    // jump to matching option based on typing
-    const searchString = React.useRef('');
-    const [setKeyTimeout, clearKeyTimeout] = useTimeout();
-    const getNextMatchingOption = ()=>{
-        // first check for matches for the full searchString
-        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;
-        let matches = getOptionsMatchingText(matcher);
-        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;
-        // if the dropdown is already open and the searchstring is a single character,
-        // then look after the current activeOption for letters
-        // this is so slowly typing the same letter will cycle through matches
-        if (open && searchString.current.length === 1) {
-            startIndex++;
-        }
-        // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
-        if (!matches.length) {
-            const letters = searchString.current.split('');
-            const allSameLetter = letters.length && letters.every((letter)=>letter === letters[0]);
-            // if the search is all the same letter, cycle through options starting with that letter
-            if (allSameLetter) {
-                startIndex++;
-                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;
-                matches = getOptionsMatchingText(matcher);
-            }
-        }
-        // if there is an active option and multiple matches,
-        // return first matching option after the current active option, looping back to the top
-        if (matches.length > 1 && activeOption) {
-            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
-            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
-        }
-        var _matches_;
-        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
-    };
-    const onTriggerKeyDown = (ev)=>{
-        // clear timeout, if it exists
-        clearKeyTimeout();
-        // if the key was a char key, update search string
-        if (getDropdownActionFromKey(ev) === 'Type') {
-            // update search string
-            searchString.current += ev.key.toLowerCase();
-            setKeyTimeout(()=>{
-                searchString.current = '';
-            }, 500);
-            // update state
-            !open && setOpen(ev, true);
-            const nextOption = getNextMatchingOption();
-            setActiveOption(nextOption);
-            setFocusVisible(true);
+    const triggerRef = React.useRef(null);
+    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {
+        state: baseState,
+        triggerRef,
+        defaultProps: {
+            children: props.children
         }
-    };
-    // resolve button and listbox slot props
-    let triggerSlot;
-    let listboxSlot;
-    triggerSlot = slot.always(props.button, {
+    });
+    var _props_button;
+    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {
+        state: baseState,
         defaultProps: {
             type: 'button',
             tabIndex: 0,
             children: baseState.value || props.placeholder,
             ...triggerNativeProps
-        },
-        elementType: 'button'
+        }
     });
-    triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);
-    listboxSlot = baseState.open || baseState.hasFocus ? slot.optional(props.listbox, {
-        renderByDefault: true,
-        defaultProps: {
-            children: props.children
-        },
-        elementType: Listbox
-    }) : undefined;
-    [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,
+            'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             children: props.children,
             ...rootNativeProps
         },
@@ -124,8 +66,8 @@ import { Listbox } from '../Listbox/Listbox';
             listbox: Listbox
         },
         root: rootSlot,
-        button: triggerSlot,
-        listbox: listboxSlot,
+        button: trigger,
+        listbox: open ? listbox : undefined,
         expandIcon: slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {

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 { 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      tabIndex: 0, // Safari doesn't focus the button on click without this\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","tabIndex","children","value","placeholder","elementType","onKeyDown","hasFocus","optional","listbox","renderByDefault","listboxRef","rootSlot","inlinePopup","state","components","expandIcon","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,sBAAsB,QAAQ,qCAAqC;AAC5E,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,MAAM,CAACC,kBAAkBC,kBAAkB,GAAGvB,uBAAuBI;IAErE,0CAA0C;IAC1C,MAAMoB,eAAenC,MAAMoC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAG/B;IAEzC,MAAMgC,wBAAwB;QAC5B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACR,aAAaS,OAAO,MAAM;QACjG,IAAIC,UAAUvB,uBAAuBkB;QACrC,IAAIM,aAAa1B,eAAeC,aAAaD,aAAa2B,EAAE,IAAI;QAEhE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAIxB,QAAQY,aAAaS,OAAO,CAACI,MAAM,KAAK,GAAG;YAC7CF;QACF;QAEA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACnB,MAAMC,UAAUd,aAAaS,OAAO,CAACM,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAACC,CAAAA,SAAUA,WAAWJ,OAAO,CAAC,EAAE;YAErF,wFAAwF;YACxF,IAAIE,eAAe;gBACjBL;gBACAN,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACM,OAAO,CAAC,EAAE,MAAM;gBACnFJ,UAAUvB,uBAAuBkB;YACnC;QACF;QAEA,qDAAqD;QACrD,wFAAwF;QACxF,IAAIK,QAAQG,MAAM,GAAG,KAAK5B,cAAc;YACtC,MAAMkC,YAAYT,QAAQU,IAAI,CAACC,CAAAA,SAAUnC,aAAamC,OAAOT,EAAE,KAAKD;YACpE,OAAOQ,sBAAAA,uBAAAA,YAAaT,OAAO,CAAC,EAAE;QAChC;YAEOA;QAAP,OAAOA,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,YAAcY;IACvB;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BrB;QAEA,kDAAkD;QAClD,IAAI7B,yBAAyBkD,QAAQ,QAAQ;YAC3C,uBAAuB;YACvBxB,aAAaS,OAAO,IAAIe,GAAGC,GAAG,CAAClB,WAAW;YAC1CL,cAAc;gBACZF,aAAaS,OAAO,GAAG;YACzB,GAAG;YAEH,eAAe;YACf,CAACrB,QAAQG,QAAQiC,IAAI;YAErB,MAAME,aAAatB;YACnBf,gBAAgBqC;YAChBpC,gBAAgB;QAClB;IACF;IAEA,wCAAwC;IACxC,IAAIqC;IACJ,IAAIC;IAEJD,cAActD,KAAKwD,MAAM,CAACjD,MAAMkD,MAAM,EAAE;QACtCC,cAAc;YACZC,MAAM;YACNC,UAAU;YACVC,UAAUlD,UAAUmD,KAAK,IAAIvD,MAAMwD,WAAW;YAC9C,GAAG3C,kBAAkB;QACvB;QACA4C,aAAa;IACf;IACAV,YAAYW,SAAS,GAAGpE,eAAeqD,kBAAkBI,YAAYW,SAAS;IAC9EV,cACE5C,UAAUI,IAAI,IAAIJ,UAAUuD,QAAQ,GAChClE,KAAKmE,QAAQ,CAAC5D,MAAM6D,OAAO,EAAE;QAC3BC,iBAAiB;QACjBX,cAAc;YAAEG,UAAUtD,MAAMsD,QAAQ;QAAC;QACzCG,aAAa3D;IACf,KACA4C;IACN,CAACK,aAAaC,YAAY,GAAGnD,uBAAuBG,OAAOI,WAAWH,KAAK8C,aAAaC;IACxF,MAAMe,aAAaxE,cAAcyD,wBAAAA,kCAAAA,YAAa/C,GAAG,EAAEiB;IACnD,IAAI8B,aAAa;QACfA,YAAY/C,GAAG,GAAG8D;IACpB;IAEA,MAAMC,WAAWvE,KAAKwD,MAAM,CAACjD,MAAMc,IAAI,EAAE;QACvCqC,cAAc;YACZ,aAAa,CAACnD,MAAMiE,WAAW,GAAGjB,wBAAAA,kCAAAA,YAAahB,EAAE,GAAGU;YACpDY,UAAUtD,MAAMsD,QAAQ;YACxB,GAAGvC,eAAe;QACpB;QACA0C,aAAa;IACf;IACAO,SAAS/D,GAAG,GAAGV,cAAcyE,SAAS/D,GAAG,EAAEkB;IAE3C,MAAM+C,QAAuB;QAC3BC,YAAY;YAAErD,MAAM;YAAOoC,QAAQ;YAAUkB,YAAY;YAAQP,SAAS/D;QAAQ;QAClFgB,MAAMkD;QACNd,QAAQH;QACRc,SAASb;QACToB,YAAY3E,KAAKmE,QAAQ,CAAC5D,MAAMoE,UAAU,EAAE;YAC1CN,iBAAiB;YACjBX,cAAc;gBACZG,wBAAU,oBAAClE;YACb;YACAqE,aAAa;QACf;QACAY,oBAAoB,CAACjE,UAAUmD,KAAK,IAAI,CAAC,CAACvD,MAAMwD,WAAW;QAC3D,GAAGpD,SAAS;IACd;IAEA,OAAO8D;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, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\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 { open } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open ? listbox : undefined,\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","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","open","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","state","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","components","expandIcon","optional","renderByDefault","placeholderVisible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,sBAAsBC,eAAe,QAAQ,wBAAwB;AAC9E,SAASC,yBAAyB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC3F,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,+CAA+C;IAC/CD,QAAQZ,8BAA8BY,OAAO;QAAEE,kBAAkB;QAAMC,cAAc;IAAK;IAE1F,MAAMC,YAAYV,qBAAqBM;IACvC,MAAM,EAAEK,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAGlB,0BAA0B;QACvFS;QACAU,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,MAAM,CAACC,kBAAkBC,kBAAkB,GAAGlB,uBAAuBK;IAErE,MAAMc,aAAa3B,MAAM4B,MAAM,CAAoB;IACnD,MAAMC,UAAUnB,eAAeG,MAAMgB,OAAO,EAAEJ,kBAAkB;QAC9DK,OAAOb;QACPU;QACAI,cAAc;YACZC,UAAUnB,MAAMmB,QAAQ;QAC1B;IACF;QAEqCnB;IAArC,MAAMoB,UAAUtB,qBAAqBE,CAAAA,gBAAAA,MAAMqB,MAAM,cAAZrB,2BAAAA,gBAAgB,CAAC,GAAGR,cAAcsB,YAAYb,MAAM;QACvFgB,OAAOb;QACPc,cAAc;YACZI,MAAM;YACNC,UAAU;YACVJ,UAAUf,UAAUoB,KAAK,IAAIxB,MAAMyB,WAAW;YAC9C,GAAGlB,kBAAkB;QACvB;IACF;IAEA,MAAMmB,WAAWjC,KAAKkC,MAAM,CAAC3B,MAAMQ,IAAI,EAAE;QACvCU,cAAc;YACZ,aAAa,CAAClB,MAAM4B,WAAW,IAAIvB,OAAOW,oBAAAA,8BAAAA,QAASa,EAAE,GAAGC;YACxDX,UAAUnB,MAAMmB,QAAQ;YACxB,GAAGV,eAAe;QACpB;QACAsB,aAAa;IACf;IACAL,SAASzB,GAAG,GAAGT,cAAckC,SAASzB,GAAG,EAAEY;IAE3C,MAAMI,QAAuB;QAC3Be,YAAY;YAAExB,MAAM;YAAOa,QAAQ;YAAUY,YAAY;YAAQjB,SAASpB;QAAQ;QAClFY,MAAMkB;QACNL,QAAQD;QACRJ,SAASX,OAAOW,UAAUc;QAC1BG,YAAYxC,KAAKyC,QAAQ,CAAClC,MAAMiC,UAAU,EAAE;YAC1CE,iBAAiB;YACjBjB,cAAc;gBACZC,wBAAU,oBAAC7B;YACb;YACAyC,aAAa;QACf;QACAK,oBAAoB,CAAChC,UAAUoB,KAAK,IAAI,CAAC,CAACxB,MAAMyB,WAAW;QAC3D,GAAGrB,SAAS;IACd;IAEA,OAAOa;AACT,EAAE"}

package/lib/utils/ComboboxBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    // whether the combobox/dropdown currently has focus\n    hasFocus: boolean;\n\n    /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/utils/useComboboxBaseState.js

@@ -104,6 +104,7 @@ import { useSelection } from '../utils/useSelection';
         setOpen,
         setValue,
         size,
-        value
+        value,
+        multiselect
     };
 };

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}

package/lib/utils/useListboxSlot.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { mergeCallbacks, useId, useEventCallback, slot, isResolvedShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { Listbox } from '../Listbox';
+/**
+ * @returns  listbox slot with desired behaviour and props
+ */ export function useListboxSlot(listboxSlotFromProp, ref, options) {
+    const { state: { multiselect }, triggerRef, defaultProps } = options;
+    const listboxId = useId('fluent-listbox', isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined);
+    const listboxSlot = slot.optional(listboxSlotFromProp, {
+        renderByDefault: true,
+        elementType: Listbox,
+        defaultProps: {
+            id: listboxId,
+            multiselect,
+            tabIndex: undefined,
+            ...defaultProps
+        }
+    });
+    /**
+   * Clicking on the listbox should never blur the trigger
+   * in a combobox
+   */ const onMouseDown = useEventCallback(mergeCallbacks((event)=>{
+        event.preventDefault();
+    }, listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.onMouseDown));
+    const onClick = useEventCallback(mergeCallbacks((event)=>{
+        var _triggerRef_current;
+        event.preventDefault();
+        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+    }, listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.onClick));
+    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, ref);
+    if (listboxSlot) {
+        listboxSlot.ref = listboxRef;
+        listboxSlot.onMouseDown = onMouseDown;
+        listboxSlot.onClick = onClick;
+    }
+    return listboxSlot;
+}

package/lib/utils/useListboxSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  mergeCallbacks,\n  useId,\n  useEventCallback,\n  slot,\n  isResolvedShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseTriggerSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n  state: ComboboxBaseState;\n  triggerRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n  defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @returns  listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n  listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n  ref: React.Ref<HTMLDivElement>,\n  options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n  const {\n    state: { multiselect },\n    triggerRef,\n    defaultProps,\n  } = options;\n\n  const listboxId = useId(\n    'fluent-listbox',\n    isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n  );\n\n  const listboxSlot = slot.optional(listboxSlotFromProp, {\n    renderByDefault: true,\n    elementType: Listbox,\n    defaultProps: {\n      id: listboxId,\n      multiselect,\n      tabIndex: undefined,\n      ...defaultProps,\n    },\n  });\n\n  /**\n   * Clicking on the listbox should never blur the trigger\n   * in a combobox\n   */\n  const onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, listboxSlot?.onMouseDown),\n  );\n\n  const onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      triggerRef.current?.focus();\n    }, listboxSlot?.onClick),\n  );\n\n  const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n    listboxSlot.onMouseDown = onMouseDown;\n    listboxSlot.onClick = onClick;\n  }\n\n  return listboxSlot;\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAWrC;;CAEC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMS,cAAcrB,iBAClBF,eAAe,CAACwB;QACdA,MAAMC,cAAc;IACtB,GAAGP,wBAAAA,kCAAAA,YAAaK,WAAW;IAG7B,MAAMG,UAAUxB,iBACdF,eAAe,CAACwB;YAEdX;QADAW,MAAMC,cAAc;SACpBZ,sBAAAA,WAAWc,OAAO,cAAlBd,0CAAAA,oBAAoBe,KAAK;IAC3B,GAAGV,wBAAAA,kCAAAA,YAAaQ,OAAO;IAGzB,MAAMG,aAAaxB,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGoB;QAClBX,YAAYK,WAAW,GAAGA;QAC1BL,YAAYQ,OAAO,GAAGA;IACxB;IAEA,OAAOR;AACT"}

package/lib/utils/useTriggerSlot.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
+/**
+ * Shared trigger behaviour for combobox and dropdown
+ * @returns trigger slot with desired behaviour and props
+ */ export function useTriggerSlot(triggerSlotFromProp, ref, options) {
+    const { state: { activeOption, getCount, getIndexOfId, getOptionAtIndex, open, selectOption, setActiveOption, setFocusVisible, setOpen, multiselect }, defaultProps, elementType } = options;
+    const trigger = slot.always(triggerSlotFromProp, {
+        defaultProps: {
+            type: 'text',
+            'aria-expanded': open,
+            'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
+            role: 'combobox',
+            ...typeof defaultProps === 'object' && defaultProps
+        },
+        elementType
+    });
+    // handle trigger focus/blur
+    const triggerRef = React.useRef(null);
+    trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref);
+    // the trigger should open/close the popup on click or blur
+    trigger.onBlur = mergeCallbacks((event)=>{
+        setOpen(event, false);
+    }, trigger.onBlur);
+    trigger.onClick = mergeCallbacks((event)=>{
+        setOpen(event, !open);
+    }, trigger.onClick);
+    // handle combobox keyboard interaction
+    trigger.onKeyDown = mergeCallbacks((event)=>{
+        const action = getDropdownActionFromKey(event, {
+            open,
+            multiselect
+        });
+        const maxIndex = getCount() - 1;
+        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
+        let newIndex = activeIndex;
+        switch(action){
+            case 'Open':
+                event.preventDefault();
+                setFocusVisible(true);
+                setOpen(event, true);
+                break;
+            case 'Close':
+                // stop propagation for escape key to avoid dismissing any parent popups
+                event.stopPropagation();
+                event.preventDefault();
+                setOpen(event, false);
+                break;
+            case 'CloseSelect':
+                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
+            // fallthrough
+            case 'Select':
+                activeOption && selectOption(event, activeOption);
+                event.preventDefault();
+                break;
+            case 'Tab':
+                !multiselect && activeOption && selectOption(event, activeOption);
+                break;
+            default:
+                newIndex = getIndexFromAction(action, activeIndex, maxIndex);
+        }
+        if (newIndex !== activeIndex) {
+            // prevent default page scroll/keyboard action if the index changed
+            event.preventDefault();
+            setActiveOption(getOptionAtIndex(newIndex));
+            setFocusVisible(true);
+        }
+    }, trigger.onKeyDown);
+    trigger.onMouseOver = mergeCallbacks((event)=>{
+        setFocusVisible(false);
+    }, trigger.onMouseOver);
+    // TODO fix cast
+    return trigger;
+}

package/lib/utils/useTriggerSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\n\nexport type UseTriggerSlotState = Pick<\n  ComboboxBaseState,\n  | 'activeOption'\n  | 'getCount'\n  | 'getIndexOfId'\n  | 'getOptionAtIndex'\n  | 'open'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setFocusVisible'\n  | 'setOpen'\n  | 'multiselect'\n  | 'value'\n>;\n\ntype UseTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n};\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      activeOption,\n      getCount,\n      getIndexOfId,\n      getOptionAtIndex,\n      open,\n      selectOption,\n      setActiveOption,\n      setFocusVisible,\n      setOpen,\n      multiselect,\n    },\n    defaultProps,\n    elementType,\n  } = options;\n\n  const trigger = slot.always(triggerSlotFromProp, {\n    defaultProps: {\n      type: 'text',\n      'aria-expanded': open,\n      'aria-activedescendant': open ? activeOption?.id : undefined,\n      role: 'combobox',\n      ...(typeof defaultProps === 'object' && defaultProps),\n    },\n    elementType,\n  });\n\n  // handle trigger focus/blur\n  const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n  trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\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    setOpen(event, 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  // 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  // TODO fix cast\n  return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n"],"names":["React","mergeCallbacks","slot","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerSlot","triggerSlotFromProp","ref","options","state","activeOption","getCount","getIndexOfId","getOptionAtIndex","open","selectOption","setActiveOption","setFocusVisible","setOpen","multiselect","defaultProps","elementType","trigger","always","type","id","undefined","role","triggerRef","useRef","onBlur","event","onClick","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","onMouseOver"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAEhF,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,8BAA8B;AAmC3F;;;CAGC,GACD,OAAO,SAASC,eACdC,mBAA6E,EAC7EC,GAA+D,EAC/DC,OAAoE;IAEpE,MAAM,EACJC,OAAO,EACLC,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,gBAAgB,EAChBC,IAAI,EACJC,YAAY,EACZC,eAAe,EACfC,eAAe,EACfC,OAAO,EACPC,WAAW,EACZ,EACDC,YAAY,EACZC,WAAW,EACZ,GAAGb;IAEJ,MAAMc,UAAUrB,KAAKsB,MAAM,CAACjB,qBAAqB;QAC/Cc,cAAc;YACZI,MAAM;YACN,iBAAiBV;YACjB,yBAAyBA,OAAOJ,yBAAAA,mCAAAA,aAAce,EAAE,GAAGC;YACnDC,MAAM;YACN,GAAI,OAAOP,iBAAiB,YAAYA,YAAY;QACtD;QACAC;IACF;IAEA,4BAA4B;IAC5B,MAAMO,aAAa7B,MAAM8B,MAAM,CAAuC;IACtEP,QAAQf,GAAG,GAAGL,cAAc0B,YAAYN,QAAQf,GAAG,EAAEA;IAErD,2DAA2D;IAC3De,QAAQQ,MAAM,GAAG9B,eAAe,CAAC+B;QAC/Bb,QAAQa,OAAO;IACjB,GAAGT,QAAQQ,MAAM;IAEjBR,QAAQU,OAAO,GAAGhC,eAChB,CAAC+B;QACCb,QAAQa,OAAO,CAACjB;IAClB,GACAQ,QAAQU,OAAO;IAGjB,uCAAuC;IACvCV,QAAQW,SAAS,GAAGjC,eAClB,CAAC+B;QACC,MAAMG,SAAS/B,yBAAyB4B,OAAO;YAAEjB;YAAMK;QAAY;QACnE,MAAMgB,WAAWxB,aAAa;QAC9B,MAAMyB,cAAc1B,eAAeE,aAAaF,aAAae,EAAE,IAAI,CAAC;QACpE,IAAIY,WAAWD;QAEf,OAAQF;YACN,KAAK;gBACHH,MAAMO,cAAc;gBACpBrB,gBAAgB;gBAChBC,QAAQa,OAAO;gBACf;YACF,KAAK;gBACH,wEAAwE;gBACxEA,MAAMQ,eAAe;gBACrBR,MAAMO,cAAc;gBACpBpB,QAAQa,OAAO;gBACf;YACF,KAAK;gBACH,CAACZ,eAAe,EAACT,yBAAAA,mCAAAA,aAAc8B,QAAQ,KAAItB,QAAQa,OAAO;YAC5D,cAAc;YACd,KAAK;gBACHrB,gBAAgBK,aAAagB,OAAOrB;gBACpCqB,MAAMO,cAAc;gBACpB;YACF,KAAK;gBACH,CAACnB,eAAeT,gBAAgBK,aAAagB,OAAOrB;gBACpD;YACF;gBACE2B,WAAWjC,mBAAmB8B,QAAQE,aAAaD;QACvD;QACA,IAAIE,aAAaD,aAAa;YAC5B,mEAAmE;YACnEL,MAAMO,cAAc;YACpBtB,gBAAgBH,iBAAiBwB;YACjCpB,gBAAgB;QAClB;IACF,GACAK,QAAQW,SAAS;IAGnBX,QAAQmB,WAAW,GAAGzC,eACpB,CAAC+B;QACCd,gBAAgB;IAClB,GACAK,QAAQmB,WAAW;IAGrB,gBAAgB;IAChB,OAAOnB;AACT"}

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

@@ -11,16 +11,14 @@ Object.defineProperty(exports, "useCombobox_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
-const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reacticons = require("@fluentui/react-icons");
 const _reactutilities = require("@fluentui/react-utilities");
-const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
 const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
-const _useTriggerListboxSlots = require("../../utils/useTriggerListboxSlots");
 const _Listbox = require("../Listbox/Listbox");
+const _useListboxSlot = require("../../utils/useListboxSlot");
+const _useInputTriggerSlot = require("./useInputTriggerSlot");
 const useCombobox_unstable = (props, ref)=>{
-    var _props_input;
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true,
@@ -31,9 +29,9 @@ const useCombobox_unstable = (props, ref)=>{
         ...props,
         editable: true
     });
-    const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;
+    const { open, selectOption, setOpen, setValue, value } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
-    const { disabled, freeform, inlinePopup, multiselect } = props;
+    const { disabled, freeform, inlinePopup } = props;
     const comboId = (0, _reactutilities.useId)('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
         props,
@@ -43,48 +41,11 @@ const useCombobox_unstable = (props, ref)=>{
             'size'
         ]
     });
-    const rootRef = _react.useRef(null);
-    const triggerRef = _react.useRef(null);
-    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
-    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
-    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
-    const [hideActiveDescendant, setHideActiveDescendant] = _react.useState(false);
-    // 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);
-    // set active option and selection based on typing
-    const getOptionFromInput = (inputValue)=>{
-        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
-        if (!searchString || searchString.length === 0) {
-            return;
-        }
-        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
-        const matches = getOptionsMatchingText(matcher);
-        // return first matching option after the current active option, looping back to the top
-        if (matches.length > 1 && activeOption) {
-            const startIndex = getIndexOfId(activeOption.id);
-            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
-            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
-        }
-        var _matches_;
-        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
-    };
-    /* Handle typed input */ // reset any typed value when an option is selected
+    // reset any typed value when an option is selected
     baseState.selectOption = (ev, option)=>{
         setValue(undefined);
         selectOption(ev, option);
     };
-    const onTriggerBlur = (ev)=>{
-        // handle selection and updating value if freeform is false
-        if (!baseState.open && !freeform) {
-            // select matching option, if the value fully matches
-            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
-                baseState.selectOption(ev, activeOption);
-            }
-            // reset typed value when the input loses focus while collapsed, unless freeform is true
-            setValue(undefined);
-        }
-    };
     baseState.setOpen = (ev, newState)=>{
         if (disabled) {
             return;
@@ -94,53 +55,27 @@ const useCombobox_unstable = (props, ref)=>{
         }
         setOpen(ev, newState);
     };
-    // update value and active option based on input
-    const onTriggerChange = (ev)=>{
-        const inputValue = ev.target.value;
-        // update uncontrolled value
-        baseState.setValue(inputValue);
-        // handle updating active option based on input
-        const matchingOption = getOptionFromInput(inputValue);
-        setActiveOption(matchingOption);
-        setFocusVisible(true);
-        // clear selection for single-select if the input value no longer matches the selection
-        if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
-            clearSelection(ev);
+    const triggerRef = _react.useRef(null);
+    const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, comboboxPopupRef, {
+        state: baseState,
+        triggerRef,
+        defaultProps: {
+            children: props.children
         }
-    };
-    // resolve input and listbox slot props
-    let triggerSlot;
-    let listboxSlot;
-    triggerSlot = _reactutilities.slot.always(props.input, {
+    });
+    var _props_input;
+    const triggerSlot = (0, _useInputTriggerSlot.useInputTriggerSlot)((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, (0, _reactutilities.useMergedRefs)(triggerRef, ref), {
+        state: baseState,
+        freeform,
         defaultProps: {
-            ref: (0, _reactutilities.useMergedRefs)((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
             type: 'text',
             value: value !== null && value !== void 0 ? value : '',
             ...triggerNativeProps
-        },
-        elementType: 'input'
+        }
     });
-    const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
-    triggerSlot.onChange = (0, _reactutilities.mergeCallbacks)(triggerSlot.onChange, onTriggerChange);
-    triggerSlot.onBlur = (0, _reactutilities.mergeCallbacks)(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed
-    listboxSlot = open || hasFocus ? _reactutilities.slot.optional(props.listbox, {
-        renderByDefault: true,
-        defaultProps: {
-            children: props.children
-        },
-        elementType: _Listbox.Listbox
-    }) : undefined;
-    [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,
+            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...rootNativeProps
         },
         elementType: 'div'
@@ -155,7 +90,7 @@ const useCombobox_unstable = (props, ref)=>{
         },
         root: rootSlot,
         input: triggerSlot,
-        listbox: listboxSlot,
+        listbox: open ? listbox : undefined,
         expandIcon: _reactutilities.slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
@@ -167,54 +102,15 @@ const useCombobox_unstable = (props, ref)=>{
         }),
         ...baseState
     };
-    state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, rootRef);
-    /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;
-    state.input.onKeyDown = (0, _reactutilities.useEventCallback)((ev)=>{
-        if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
-            baseState.setOpen(ev, true);
-        }
-        // clear activedescendant when moving the text insertion cursor
-        if (ev.key === _keyboardkeys.ArrowLeft || ev.key === _keyboardkeys.ArrowRight) {
-            setHideActiveDescendant(true);
-        } else {
-            setHideActiveDescendant(false);
-        }
-        // update typing state to true if the user is typing
-        const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(ev, {
-            open,
-            multiselect
-        });
-        if (action === 'Type') {
-            isTyping.current = true;
-        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
-            isTyping.current = false;
-        }
-        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
-        if (freeform && (isTyping.current || !open) && ev.key === ' ') {
-            resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
-            return;
-        }
-        // if we're not allowing space to type, continue with default behavior
-        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
-    });
-    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
-    const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, ()=>{
-        // do not dismiss on blur when closing via clicking the icon
-        if (open) {
-            baseState.ignoreNextBlur.current = true;
-        }
-    }));
-    const onExpandIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconClick, (event)=>{
+    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
+    const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, (event)=>{
         var _triggerRef_current;
-        // open and set focus
+        event.preventDefault();
         state.setOpen(event, !state.open);
         (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
-        // set focus visible=false, since this can only be done with the mouse/pointer
-        setFocusVisible(false);
     }));
     if (state.expandIcon) {
         state.expandIcon.onMouseDown = onExpandIconMouseDown;
-        state.expandIcon.onClick = onExpandIconClick;
         // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
         // using the following steps:
         // 1. If there is an aria-label, it is "Open [aria-label]"