@fluentui/react-combobox 9.5.28 → 9.5.30

package/lib-commonjs/components/Dropdown/useDropdown.js

@@ -15,7 +15,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 useDropdown_unstable = (props, ref)=>{
@@ -33,16 +33,7 @@ const useDropdown_unstable = (props, ref)=>{
             '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] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
     // jump to matching option based on typing
     const searchString = _react.useRef('');
     const [setKeyTimeout, clearKeyTimeout] = (0, _reactutilities.useTimeout)();
@@ -109,15 +100,24 @@ const useDropdown_unstable = (props, ref)=>{
     listboxSlot = baseState.open || baseState.hasFocus ? _reactutilities.slot.optional(props.listbox, {
         renderByDefault: true,
         defaultProps: {
-            children: props.children,
-            style: {
-                width: popupWidth
-            }
+            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 (listboxSlot) {
+        listboxSlot.ref = listboxRef;
+    }
+    const rootSlot = _reactutilities.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 = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
     const state = {
         components: {
             root: 'div',
@@ -125,14 +125,7 @@ const useDropdown_unstable = (props, ref)=>{
             expandIcon: 'span',
             listbox: _Listbox.Listbox
         },
-        root: _reactutilities.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: _reactutilities.slot.optional(props.expandIcon, {
@@ -145,6 +138,5 @@ const useDropdown_unstable = (props, ref)=>{
         placeholderVisible: !baseState.value && !!props.placeholder,
         ...baseState
     };
-    state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, rootRef);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDropdown.js"],"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';\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 */ export const useDropdown_unstable = (props, ref)=>{\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState(props);\n    const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } = baseState;\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'button',\n        excludedPropNames: [\n            'children'\n        ]\n    });\n    // set listbox popup width based off the root/trigger width\n    const rootRef = React.useRef(null);\n    const [popupWidth, setPopupWidth] = React.useState();\n    React.useEffect(()=>{\n        var _rootRef_current;\n        const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;\n        setPopupWidth(width);\n    }, [\n        open\n    ]);\n    // jump to matching option based on typing\n    const searchString = React.useRef('');\n    const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n    const getNextMatchingOption = ()=>{\n        // first check for matches for the full searchString\n        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;\n        let matches = getOptionsMatchingText(matcher);\n        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\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        // 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            // if the search is all the same letter, cycle through options starting with that letter\n            if (allSameLetter) {\n                startIndex++;\n                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;\n                matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    const onTriggerKeyDown = (ev)=>{\n        // clear timeout, if it exists\n        clearKeyTimeout();\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            // update state\n            !open && setOpen(ev, true);\n            const nextOption = getNextMatchingOption();\n            setActiveOption(nextOption);\n            setFocusVisible(true);\n        }\n    };\n    // resolve button and listbox slot props\n    let triggerSlot;\n    let listboxSlot;\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 = baseState.open || baseState.hasFocus ? slot.optional(props.listbox, {\n        renderByDefault: true,\n        defaultProps: {\n            children: props.children,\n            style: {\n                width: popupWidth\n            }\n        },\n        elementType: Listbox\n    }) : undefined;\n    [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n    [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n    const state = {\n        components: {\n            root: 'div',\n            button: 'button',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: slot.always(props.root, {\n            defaultProps: {\n                'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : 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: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n            },\n            elementType: 'span'\n        }),\n        placeholderVisible: !baseState.value && !!props.placeholder,\n        ...baseState\n    };\n    state.root.ref = useMergedRefs(state.root.ref, rootRef);\n    return state;\n};\n"],"names":["useDropdown_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","triggerSlot","listboxSlot","slot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","mergeCallbacks","hasFocus","optional","listbox","renderByDefault","style","Listbox","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","inlinePopup","createElement","ChevronDownIcon","placeholderVisible","useMergedRefs"],"mappings":";;;;+BAiBiBA;;;eAAAA;;;;iEAjBM;4BACuB;4BACQ;gCACqC;oCAClD;sCACJ;kCACJ;wCACM;yBACf;AASb,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAA6B,EAACF,OAAO;QACzCG,kBAAkB;QAClBC,cAAc;IAClB;IACA,MAAMC,YAAYC,IAAAA,0CAAoB,EAACN;IACvC,MAAM,EAAEO,YAAY,EAAEC,YAAY,EAAEC,sBAAsB,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,OAAO,EAAE,GAAGR;IAChH,MAAM,EAAES,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAGC,IAAAA,yCAAyB,EAAC;QACrFlB;QACAmB,oBAAoB;QACpBC,mBAAmB;YACf;SACH;IACL;IACA,2DAA2D;IAC3D,MAAMC,UAAUC,OAAMC,MAAM,CAAC;IAC7B,MAAM,CAACC,YAAYC,cAAc,GAAGH,OAAMI,QAAQ;IAClDJ,OAAMK,SAAS,CAAC;QACZ,IAAIC;QACJ,MAAMC,QAAQnB,OAAO,CAAC,EAAE,AAACkB,CAAAA,mBAAmBP,QAAQS,OAAO,AAAD,MAAO,QAAQF,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBG,WAAW,CAAC,EAAE,CAAC,GAAGC;QACnJP,cAAcI;IAClB,GAAG;QACCnB;KACH;IACD,0CAA0C;IAC1C,MAAMuB,eAAeX,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACW,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAU;IACnD,MAAMC,wBAAwB;QAC1B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAaA,WAAWC,WAAW,GAAGC,OAAO,CAACR,aAAaH,OAAO,MAAM;QACvF,IAAIY,UAAUjC,uBAAuB6B;QACrC,IAAIK,aAAapC,eAAeC,aAAaD,aAAaqC,EAAE,IAAI;QAChE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAIlC,QAAQuB,aAAaH,OAAO,CAACe,MAAM,KAAK,GAAG;YAC3CF;QACJ;QACA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACjB,MAAMC,UAAUb,aAAaH,OAAO,CAACiB,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAAC,CAACC,SAASA,WAAWJ,OAAO,CAAC,EAAE;YACrF,wFAAwF;YACxF,IAAIE,eAAe;gBACfL;gBACAL,UAAU,CAACC,aAAaA,WAAWC,WAAW,GAAGC,OAAO,CAACK,OAAO,CAAC,EAAE,MAAM;gBACzEJ,UAAUjC,uBAAuB6B;YACrC;QACJ;QACA,qDAAqD;QACrD,wFAAwF;QACxF,IAAII,QAAQG,MAAM,GAAG,KAAKtC,cAAc;YACpC,MAAM4C,YAAYT,QAAQU,IAAI,CAAC,CAACC,SAAS7C,aAAa6C,OAAOT,EAAE,KAAKD;YACpE,OAAOQ,cAAc,QAAQA,cAAc,KAAK,IAAIA,YAAYT,OAAO,CAAC,EAAE;QAC9E;QACA,IAAIY;QACJ,OAAO,AAACA,CAAAA,YAAYZ,OAAO,CAAC,EAAE,AAAD,MAAO,QAAQY,cAAc,KAAK,IAAIA,YAAYtB;IACnF;IACA,MAAMuB,mBAAmB,CAACC;QACtB,8BAA8B;QAC9BrB;QACA,kDAAkD;QAClD,IAAIsB,IAAAA,4CAAwB,EAACD,QAAQ,QAAQ;YACzC,uBAAuB;YACvBvB,aAAaH,OAAO,IAAI0B,GAAGE,GAAG,CAAClB,WAAW;YAC1CN,cAAc;gBACVD,aAAaH,OAAO,GAAG;YAC3B,GAAG;YACH,eAAe;YACf,CAACpB,QAAQG,QAAQ2C,IAAI;YACrB,MAAMG,aAAatB;YACnB1B,gBAAgBgD;YAChB/C,gBAAgB;QACpB;IACJ;IACA,wCAAwC;IACxC,IAAIgD;IACJ,IAAIC;IACJD,cAAcE,oBAAI,CAACC,MAAM,CAAC/D,MAAMgE,MAAM,EAAE;QACpCC,cAAc;YACVC,MAAM;YACNC,UAAU9D,UAAU+D,KAAK,IAAIpE,MAAMqE,WAAW;YAC9C,GAAGtD,kBAAkB;QACzB;QACAuD,aAAa;IACjB;IACAV,YAAYW,SAAS,GAAGC,IAAAA,8BAAc,EAACjB,kBAAkBK,YAAYW,SAAS;IAC9EV,cAAcxD,UAAUK,IAAI,IAAIL,UAAUoE,QAAQ,GAAGX,oBAAI,CAACY,QAAQ,CAAC1E,MAAM2E,OAAO,EAAE;QAC9EC,iBAAiB;QACjBX,cAAc;YACVE,UAAUnE,MAAMmE,QAAQ;YACxBU,OAAO;gBACHhD,OAAOL;YACX;QACJ;QACA8C,aAAaQ,gBAAO;IACxB,KAAK9C;IACL,CAAC4B,aAAaC,YAAY,GAAGkB,IAAAA,kCAAgB,EAAC/E,OAAO4D,aAAaC;IAClE,CAACD,aAAaC,YAAY,GAAGmB,IAAAA,8CAAsB,EAAChF,OAAOK,WAAWJ,KAAK2D,aAAaC;IACxF,MAAMoB,QAAQ;QACVC,YAAY;YACRlE,MAAM;YACNgD,QAAQ;YACRmB,YAAY;YACZR,SAASG,gBAAO;QACpB;QACA9D,MAAM8C,oBAAI,CAACC,MAAM,CAAC/D,MAAMgB,IAAI,EAAE;YAC1BiD,cAAc;gBACV,aAAa,CAACjE,MAAMoF,WAAW,GAAGvB,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYjB,EAAE,GAAGZ;gBAC7GmC,UAAUnE,MAAMmE,QAAQ;gBACxB,GAAGlD,eAAe;YACtB;YACAqD,aAAa;QACjB;QACAN,QAAQJ;QACRe,SAASd;QACTsB,YAAYrB,oBAAI,CAACY,QAAQ,CAAC1E,MAAMmF,UAAU,EAAE;YACxCP,iBAAiB;YACjBX,cAAc;gBACVE,UAAU,WAAW,GAAG7C,OAAM+D,aAAa,CAACC,8BAAe,EAAE;YACjE;YACAhB,aAAa;QACjB;QACAiB,oBAAoB,CAAClF,UAAU+D,KAAK,IAAI,CAAC,CAACpE,MAAMqE,WAAW;QAC3D,GAAGhE,SAAS;IAChB;IACA4E,MAAMjE,IAAI,CAACf,GAAG,GAAGuF,IAAAA,6BAAa,EAACP,MAAMjE,IAAI,CAACf,GAAG,EAAEoB;IAC/C,OAAO4D;AACX"}
+{"version":3,"sources":["useDropdown.js"],"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';\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 */ export const useDropdown_unstable = (props, ref)=>{\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState(props);\n    const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } = baseState;\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'button',\n        excludedPropNames: [\n            'children'\n        ]\n    });\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    // jump to matching option based on typing\n    const searchString = React.useRef('');\n    const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n    const getNextMatchingOption = ()=>{\n        // first check for matches for the full searchString\n        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;\n        let matches = getOptionsMatchingText(matcher);\n        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\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        // 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            // if the search is all the same letter, cycle through options starting with that letter\n            if (allSameLetter) {\n                startIndex++;\n                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;\n                matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    const onTriggerKeyDown = (ev)=>{\n        // clear timeout, if it exists\n        clearKeyTimeout();\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            // update state\n            !open && setOpen(ev, true);\n            const nextOption = getNextMatchingOption();\n            setActiveOption(nextOption);\n            setFocusVisible(true);\n        }\n    };\n    // resolve button and listbox slot props\n    let triggerSlot;\n    let listboxSlot;\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 = baseState.open || baseState.hasFocus ? slot.optional(props.listbox, {\n        renderByDefault: true,\n        defaultProps: {\n            children: props.children\n        },\n        elementType: Listbox\n    }) : undefined;\n    [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);\n    if (listboxSlot) {\n        listboxSlot.ref = listboxRef;\n    }\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n            children: props.children,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const state = {\n        components: {\n            root: 'div',\n            button: 'button',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: rootSlot,\n        button: triggerSlot,\n        listbox: listboxSlot,\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n            },\n            elementType: 'span'\n        }),\n        placeholderVisible: !baseState.value && !!props.placeholder,\n        ...baseState\n    };\n    return state;\n};\n"],"names":["useDropdown_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","current","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","undefined","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","triggerSlot","listboxSlot","slot","always","button","defaultProps","type","children","value","placeholder","elementType","onKeyDown","mergeCallbacks","hasFocus","optional","listbox","renderByDefault","Listbox","useTriggerListboxSlots","listboxRef","useMergedRefs","rootSlot","inlinePopup","state","components","expandIcon","createElement","ChevronDownIcon","placeholderVisible"],"mappings":"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"}

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

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useComboboxPopup", {
+Object.defineProperty(exports, "useComboboxPositioning", {
     enumerable: true,
     get: function() {
-        return useComboboxPopup;
+        return useComboboxPositioning;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _reactpositioning = require("@fluentui/react-positioning");
-const _reactutilities = require("@fluentui/react-utilities");
-function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+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 = [
@@ -29,19 +30,12 @@ function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
             mainAxis: 2
         },
         fallbackPositions,
+        matchTargetSize: 'width',
         ...(0, _reactpositioning.resolvePositioningShorthand)(positioning)
     };
     const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)(popperOptions);
-    const listboxRef = (0, _reactutilities.useMergedRefs)(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
-    const listbox = listboxShorthand && {
-        ...listboxShorthand,
-        ref: listboxRef
-    };
     return [
-        {
-            ...triggerShorthand,
-            ref: (0, _reactutilities.useMergedRefs)(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef)
-        },
-        listbox
+        containerRef,
+        targetRef
     ];
 }

package/lib-commonjs/utils/useComboboxPositioning.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useComboboxPositioning.js"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport * as React from 'react';\nexport function useComboboxPositioning(props) {\n    const { positioning } = props;\n    // Set a default set of fallback positions to try if the dropdown does not fit on screen\n    const fallbackPositions = [\n        'above',\n        'after',\n        'after-top',\n        'before',\n        'before-top'\n    ];\n    // popper options\n    const popperOptions = {\n        position: 'below',\n        align: 'start',\n        offset: {\n            crossAxis: 0,\n            mainAxis: 2\n        },\n        fallbackPositions,\n        matchTargetSize: 'width',\n        ...resolvePositioningShorthand(positioning)\n    };\n    const { targetRef, containerRef } = usePositioning(popperOptions);\n    return [\n        containerRef,\n        targetRef\n    ];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","targetRef","containerRef","usePositioning"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;kCAF4C;iEACrC;AAChB,SAASA,uBAAuBC,KAAK;IACxC,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,wFAAwF;IACxF,MAAME,oBAAoB;QACtB;QACA;QACA;QACA;QACA;KACH;IACD,iBAAiB;IACjB,MAAMC,gBAAgB;QAClBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YACJC,WAAW;YACXC,UAAU;QACd;QACAN;QACAO,iBAAiB;QACjB,GAAGC,IAAAA,6CAA2B,EAACT,YAAY;IAC/C;IACA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,GAAGC,IAAAA,gCAAc,EAACV;IACnD,OAAO;QACHS;QACAD;KACH;AACL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.5.28",
+  "version": "9.5.30",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,16 +33,16 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-context-selector": "^9.1.41",
-    "@fluentui/react-field": "^9.1.40",
+    "@fluentui/keyboard-keys": "^9.0.7",
+    "@fluentui/react-context-selector": "^9.1.42",
+    "@fluentui/react-field": "^9.1.41",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-jsx-runtime": "^9.0.18",
-    "@fluentui/react-portal": "^9.3.27",
-    "@fluentui/react-positioning": "^9.9.23",
-    "@fluentui/react-shared-contexts": "^9.11.1",
-    "@fluentui/react-theme": "^9.1.15",
-    "@fluentui/react-utilities": "^9.15.1",
+    "@fluentui/react-jsx-runtime": "^9.0.19",
+    "@fluentui/react-portal": "^9.4.1",
+    "@fluentui/react-positioning": "^9.10.0",
+    "@fluentui/react-shared-contexts": "^9.12.0",
+    "@fluentui/react-theme": "^9.1.16",
+    "@fluentui/react-utilities": "^9.15.2",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },
@@ -67,5 +67,11 @@
       "require": "./lib-commonjs/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
 }