@fluentui/react-combobox 9.7.5 → 9.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["useInputTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useInputTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, value, activeOption, selectOption, setValue, setActiveOption, setFocusVisible, multiselect, selectedOptions, clearSelection, getOptionsMatchingText, getIndexOfId, setOpen }, freeform, defaultProps } = options;\n    const onBlur = (ev)=>{\n        // handle selection and updating value if freeform is false\n        if (!open && !freeform) {\n            // select matching option, if the value fully matches\n            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n                selectOption(ev, activeOption);\n            }\n            // reset typed value when the input loses focus while collapsed, unless freeform is true\n            setValue(undefined);\n        }\n    };\n    const getOptionFromInput = (inputValue)=>{\n        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n        if (!searchString || searchString.length === 0) {\n            return;\n        }\n        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n        const matches = getOptionsMatchingText(matcher);\n        // return first matching option after the current active option, looping back to the top\n        if (matches.length > 1 && activeOption) {\n            const startIndex = getIndexOfId(activeOption.id);\n            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);\n            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    // update value and active option based on input\n    const onChange = (ev)=>{\n        const inputValue = ev.target.value;\n        // update uncontrolled value\n        setValue(inputValue);\n        // handle updating active option based on input\n        const matchingOption = getOptionFromInput(inputValue);\n        setActiveOption(matchingOption);\n        setFocusVisible(true);\n        // clear selection for single-select if the input value no longer matches the selection\n        if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n            clearSelection(ev);\n        }\n    };\n    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'input'\n    });\n    trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n    trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n    const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n    // save the typing vs. navigating options state, as the space key should behave differently in each case\n    // we do not want to update the combobox when this changes, just save the value between renders\n    const isTyping = React.useRef(false);\n    /**\n   * Freeform combobox should not select\n   */ const defaultOnKeyDown = trigger.onKeyDown;\n    const onKeyDown = useEventCallback((ev)=>{\n        if (!open && getDropdownActionFromKey(ev) === 'Type') {\n            setOpen(ev, true);\n        }\n        // clear activedescendant when moving the text insertion cursor\n        if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n            setHideActiveDescendant(true);\n        } else {\n            setHideActiveDescendant(false);\n        }\n        // update typing state to true if the user is typing\n        const action = getDropdownActionFromKey(ev, {\n            open,\n            multiselect\n        });\n        if (action === 'Type') {\n            isTyping.current = true;\n        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n            isTyping.current = false;\n        }\n        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n        if ((isTyping.current || !open) && ev.key === ' ') {\n            var _triggerFromProps_onKeyDown;\n            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);\n            return;\n        }\n        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(ev);\n    });\n    trigger.onKeyDown = onKeyDown;\n    if (hideActiveDescendant) {\n        trigger['aria-activedescendant'] = undefined;\n    }\n    return trigger;\n}\n"],"names":["useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","activeOption","selectOption","setValue","setActiveOption","setFocusVisible","multiselect","selectedOptions","clearSelection","getOptionsMatchingText","getIndexOfId","setOpen","freeform","defaultProps","onBlur","ev","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","onChange","target","matchingOption","trigger","useTriggerSlot","elementType","mergeCallbacks","hideActiveDescendant","setHideActiveDescendant","React","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current","_triggerFromProps_onKeyDown","call"],"mappings":";;;;+BASoBA;;;eAAAA;;;;iEATG;gCAC0B;8BACX;gCACP;oCACU;AAK9B,SAASA,oBAAoBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IAClE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEC,WAAW,EAAEC,eAAe,EAAEC,cAAc,EAAEC,sBAAsB,EAAEC,YAAY,EAAEC,OAAO,EAAE,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGhB;IAChO,MAAMiB,SAAS,CAACC;QACZ,2DAA2D;QAC3D,IAAI,CAAChB,QAAQ,CAACa,UAAU;YACpB,qDAAqD;YACrD,IAAIZ,SAASC,gBAAgBD,MAAMgB,IAAI,GAAGC,WAAW,OAAQhB,CAAAA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaiB,IAAI,CAACD,WAAW,EAAC,GAAI;gBACvJf,aAAaa,IAAId;YACrB;YACA,wFAAwF;YACxFE,SAASgB;QACb;IACJ;IACA,MAAMC,qBAAqB,CAACC;QACxB,MAAMC,eAAeD,eAAe,QAAQA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWL,IAAI,GAAGC,WAAW;QAC1G,IAAI,CAACK,gBAAgBA,aAAaC,MAAM,KAAK,GAAG;YAC5C;QACJ;QACA,MAAMC,UAAU,CAACC,aAAaA,WAAWR,WAAW,GAAGS,OAAO,CAACJ,kBAAkB;QACjF,MAAMK,UAAUlB,uBAAuBe;QACvC,wFAAwF;QACxF,IAAIG,QAAQJ,MAAM,GAAG,KAAKtB,cAAc;YACpC,MAAM2B,aAAalB,aAAaT,aAAa4B,EAAE;YAC/C,MAAMC,YAAYH,QAAQI,IAAI,CAAC,CAACC,SAAStB,aAAasB,OAAOH,EAAE,KAAKD;YACpE,OAAOE,cAAc,QAAQA,cAAc,KAAK,IAAIA,YAAYH,OAAO,CAAC,EAAE;QAC9E;QACA,IAAIM;QACJ,OAAO,AAACA,CAAAA,YAAYN,OAAO,CAAC,EAAE,AAAD,MAAO,QAAQM,cAAc,KAAK,IAAIA,YAAYd;IACnF;IACA,gDAAgD;IAChD,MAAMe,WAAW,CAACnB;QACd,MAAMM,aAAaN,GAAGoB,MAAM,CAACnC,KAAK;QAClC,4BAA4B;QAC5BG,SAASkB;QACT,+CAA+C;QAC/C,MAAMe,iBAAiBhB,mBAAmBC;QAC1CjB,gBAAgBgC;QAChB/B,gBAAgB;QAChB,uFAAuF;QACvF,IAAI,CAACC,eAAeC,gBAAgBgB,MAAM,KAAK,KAAMF,CAAAA,WAAWE,MAAM,GAAG,KAAK,CAACa,cAAa,GAAI;YAC5F5B,eAAeO;QACnB;IACJ;IACA,MAAMsB,UAAUC,IAAAA,8BAAc,EAAC3C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBe;QACA0B,aAAa;IACjB;IACAF,QAAQH,QAAQ,GAAGM,IAAAA,8BAAc,EAACH,QAAQH,QAAQ,EAAEA;IACpDG,QAAQvB,MAAM,GAAG0B,IAAAA,8BAAc,EAACH,QAAQvB,MAAM,EAAEA;IAChD,uGAAuG;IACvG,0GAA0G;IAC1G,kFAAkF;IAClF,MAAM,CAAC2B,sBAAsBC,wBAAwB,GAAGC,OAAMC,QAAQ,CAAC;IACvE,wGAAwG;IACxG,+FAA+F;IAC/F,MAAMC,WAAWF,OAAMG,MAAM,CAAC;IAC9B;;GAED,GAAG,MAAMC,mBAAmBV,QAAQW,SAAS;IAC5C,MAAMA,YAAYC,IAAAA,gCAAgB,EAAC,CAAClC;QAChC,IAAI,CAAChB,QAAQmD,IAAAA,4CAAwB,EAACnC,QAAQ,QAAQ;YAClDJ,QAAQI,IAAI;QAChB;QACA,+DAA+D;QAC/D,IAAIA,GAAGoC,GAAG,KAAKC,uBAAS,IAAIrC,GAAGoC,GAAG,KAAKE,wBAAU,EAAE;YAC/CX,wBAAwB;QAC5B,OAAO;YACHA,wBAAwB;QAC5B;QACA,oDAAoD;QACpD,MAAMY,SAASJ,IAAAA,4CAAwB,EAACnC,IAAI;YACxChB;YACAO;QACJ;QACA,IAAIgD,WAAW,QAAQ;YACnBT,SAASU,OAAO,GAAG;QACvB,OAAO,IAAID,WAAW,UAAUvC,GAAGoC,GAAG,KAAK,OAAOG,WAAW,UAAUA,WAAW,cAAcA,WAAW,WAAWA,WAAW,UAAUA,WAAW,YAAYA,WAAW,YAAY;YACrLT,SAASU,OAAO,GAAG;QACvB;QACA,wGAAwG;QACxG,IAAI,AAACV,CAAAA,SAASU,OAAO,IAAI,CAACxD,IAAG,KAAMgB,GAAGoC,GAAG,KAAK,KAAK;YAC/C,IAAIK;YACJ7D,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAI,AAAC6D,CAAAA,8BAA8B7D,iBAAiBqD,SAAS,AAAD,MAAO,QAAQQ,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BC,IAAI,CAAC9D,kBAAkBoB;YAChP;QACJ;QACAgC,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBhC;IACzF;IACAsB,QAAQW,SAAS,GAAGA;IACpB,IAAIP,sBAAsB;QACtBJ,OAAO,CAAC,wBAAwB,GAAGlB;IACvC;IACA,OAAOkB;AACX"}
+{"version":3,"sources":["useInputTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useInputTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;\n    const onBlur = (ev)=>{\n        // handle selection and updating value if freeform is false\n        if (!open && !freeform) {\n            const activeOptionId = activeDescendantController.active();\n            const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n            // select matching option, if the value fully matches\n            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n                selectOption(ev, activeOption);\n            }\n            // reset typed value when the input loses focus while collapsed, unless freeform is true\n            setValue(undefined);\n        }\n    };\n    const getOptionFromInput = (inputValue)=>{\n        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n        if (!searchString || searchString.length === 0) {\n            activeDescendantController.blur();\n            return;\n        }\n        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n        const match = activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        });\n        if (!match) {\n            activeDescendantController.blur();\n            return undefined;\n        }\n        return getOptionById(match);\n    };\n    // update value and active option based on input\n    const onChange = (ev)=>{\n        const inputValue = ev.target.value;\n        // update uncontrolled value\n        setValue(inputValue);\n        // handle updating active option based on input\n        const matchingOption = getOptionFromInput(inputValue);\n        // clear selection for single-select if the input value no longer matches the selection\n        if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n            clearSelection(ev);\n        }\n    };\n    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'input',\n        activeDescendantController\n    });\n    trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n    trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n    const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n    // save the typing vs. navigating options state, as the space key should behave differently in each case\n    // we do not want to update the combobox when this changes, just save the value between renders\n    const isTyping = React.useRef(false);\n    /**\n   * Freeform combobox should not select\n   */ const defaultOnKeyDown = trigger.onKeyDown;\n    const onKeyDown = useEventCallback((ev)=>{\n        if (!open && getDropdownActionFromKey(ev) === 'Type') {\n            setOpen(ev, true);\n        }\n        // clear activedescendant when moving the text insertion cursor\n        if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n            setHideActiveDescendant(true);\n        } else {\n            setHideActiveDescendant(false);\n        }\n        // update typing state to true if the user is typing\n        const action = getDropdownActionFromKey(ev, {\n            open,\n            multiselect\n        });\n        if (action === 'Type') {\n            isTyping.current = true;\n        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n            isTyping.current = false;\n        }\n        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n        if ((isTyping.current || !open) && ev.key === ' ') {\n            var _triggerFromProps_onKeyDown;\n            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);\n            return;\n        }\n        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(ev);\n    });\n    trigger.onKeyDown = onKeyDown;\n    if (hideActiveDescendant) {\n        trigger['aria-activedescendant'] = undefined;\n    }\n    return trigger;\n}\n"],"names":["useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","ev","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","useTriggerSlot","elementType","mergeCallbacks","hideActiveDescendant","setHideActiveDescendant","React","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current","_triggerFromProps_onKeyDown","call"],"mappings":"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"}

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

@@ -11,25 +11,29 @@ Object.defineProperty(exports, "renderDropdown_unstable", {
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactportal = require("@fluentui/react-portal");
 const _reactutilities = require("@fluentui/react-utilities");
+const _reactaria = require("@fluentui/react-aria");
 const _ComboboxContext = require("../../contexts/ComboboxContext");
 const renderDropdown_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
-            value: contextValues.combobox,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
-                    children: [
-                        state.button.children,
-                        state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
-                    ]
-                }),
-                state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
-                state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
-                    mountNode: state.mountNode,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
-                }))
-            ]
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
+                value: contextValues.combobox,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
+                        children: [
+                            state.button.children,
+                            state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
+                        ]
+                    }),
+                    state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
+                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+                        mountNode: state.mountNode,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
+                    }))
+                ]
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n            value: contextValues.combobox,\n            children: [\n                /*#__PURE__*/ _jsxs(state.button, {\n                    children: [\n                        state.button.children,\n                        state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})\n                    ]\n                }),\n                state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n                state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                    mountNode: state.mountNode,\n                    children: /*#__PURE__*/ _jsx(state.listbox, {})\n                }))\n            ]\n        })\n    });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","_jsxs","ComboboxContext","Provider","value","combobox","button","expandIcon","clearButton","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;6BACtB;gCACK;iCACI;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;YACpDC,OAAOR,cAAcS,QAAQ;YAC7BL,UAAU;gBACN,WAAW,GAAGC,IAAAA,gBAAK,EAACN,MAAMW,MAAM,EAAE;oBAC9BN,UAAU;wBACNL,MAAMW,MAAM,CAACN,QAAQ;wBACrBL,MAAMY,UAAU,IAAI,WAAW,GAAGT,IAAAA,eAAI,EAACH,MAAMY,UAAU,EAAE,CAAC;qBAC7D;gBACL;gBACAZ,MAAMa,WAAW,IAAI,WAAW,GAAGV,IAAAA,eAAI,EAACH,MAAMa,WAAW,EAAE,CAAC;gBAC5Db,MAAMc,OAAO,IAAKd,CAAAA,MAAMe,WAAW,GAAG,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGX,IAAAA,eAAI,EAACa,mBAAM,EAAE;oBACrGC,WAAWjB,MAAMiB,SAAS;oBAC1BZ,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC;gBACjD,EAAC;aACJ;QACL;IACJ;AACJ"}
+{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                value: contextValues.combobox,\n                children: [\n                    /*#__PURE__*/ _jsxs(state.button, {\n                        children: [\n                            state.button.children,\n                            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})\n                        ]\n                    }),\n                    state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                        mountNode: state.mountNode,\n                        children: /*#__PURE__*/ _jsx(state.listbox, {})\n                    }))\n                ]\n            })\n        })\n    });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","_jsxs","ComboboxContext","Provider","combobox","button","expandIcon","clearButton","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAOiBA;;;eAAAA;;;4BAP4B;6BACtB;gCACK;2BACoB;iCAChB;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGI,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;gBACpDJ,OAAON,cAAcW,QAAQ;gBAC7BP,UAAU;oBACN,WAAW,GAAGI,IAAAA,gBAAK,EAACT,MAAMa,MAAM,EAAE;wBAC9BR,UAAU;4BACNL,MAAMa,MAAM,CAACR,QAAQ;4BACrBL,MAAMc,UAAU,IAAI,WAAW,GAAGX,IAAAA,eAAI,EAACH,MAAMc,UAAU,EAAE,CAAC;yBAC7D;oBACL;oBACAd,MAAMe,WAAW,IAAI,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMe,WAAW,EAAE,CAAC;oBAC5Df,MAAMgB,OAAO,IAAKhB,CAAAA,MAAMiB,WAAW,GAAG,WAAW,GAAGd,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGb,IAAAA,eAAI,EAACe,mBAAM,EAAE;wBACrGC,WAAWnB,MAAMmB,SAAS;wBAC1Bd,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC;oBACjD,EAAC;iBACJ;YACL;QACJ;IACJ;AACJ"}

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

@@ -14,40 +14,51 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useTriggerSlot = require("../../utils/useTriggerSlot");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 function useButtonTriggerSlot(triggerFromProps, ref, options) {
-    const { state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible }, defaultProps } = options;
+    const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
     // jump to matching option based on typing
     const searchString = _react.useRef('');
     const [setKeyTimeout, clearKeyTimeout] = (0, _reactutilities.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++;
+    const moveToNextMatchingOption = (matcher, opt = {
+        startFromNext: false
+    })=>{
+        const { startFromNext } = opt;
+        const activeOptionId = activeDescendantController.active();
+        const nextInOrder = activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        }, {
+            startFrom: startFromNext ? activeDescendantController.next({
+                passive: true
+            }) : activeOptionId
+        });
+        if (nextInOrder) {
+            return nextInOrder;
+        }
+        // Cycle back to first match
+        return activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        });
+    };
+    const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{
+        if (moveToNextMatchingOption((optionText)=>{
+            return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;
+        }, {
+            // Slowly pressing the same key will cycle through options
+            startFromNext: searchString.current.length === 1
+        })) {
+            return;
         }
         // 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 (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{
+            return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 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];
+            startFromNext: true
+        })) {
+            return;
         }
-        var _matches_;
-        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+        activeDescendantController.blur();
     };
     const onTriggerKeyDown = (ev)=>{
         // clear timeout, if it exists
@@ -61,16 +72,25 @@ function useButtonTriggerSlot(triggerFromProps, ref, options) {
             }, 500);
             // update state
             !open && setOpen(ev, true);
-            const nextOption = getNextMatchingOption();
-            setActiveOption(nextOption);
-            setFocusVisible(true);
+            moveToNextMatchingOptionWithSameCharacterHandling();
         }
     };
     const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
         state: options.state,
         defaultProps,
-        elementType: 'button'
+        elementType: 'button',
+        activeDescendantController
     });
     trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)(onTriggerKeyDown, trigger.onKeyDown);
     return trigger;
 }
+/**
+ * @returns - whether every character in the string is the same
+ */ function allCharactersSame(str) {
+    for(let i = 1; i < str.length; i++){
+        if (str[i] !== str[i - 1]) {
+            return false;
+        }
+    }
+    return true;
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useButtonTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible }, defaultProps } = options;\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    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'button'\n    });\n    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n    return trigger;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","activeOption","setOpen","getOptionsMatchingText","getIndexOfId","setActiveOption","setFocusVisible","defaultProps","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","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACoB;gCACZ;oCACU;AAK9B,SAASA,qBAAqBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IACnE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,YAAY,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAE,EAAEC,YAAY,EAAE,GAAGT;IACzI,0CAA0C;IAC1C,MAAMU,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAU;IACnD,MAAMC,wBAAwB;QAC1B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAaA,WAAWC,WAAW,GAAGC,OAAO,CAACV,aAAaW,OAAO,MAAM;QACvF,IAAIC,UAAUjB,uBAAuBY;QACrC,IAAIM,aAAapB,eAAeG,aAAaH,aAAaqB,EAAE,IAAI;QAChE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAItB,QAAQQ,aAAaW,OAAO,CAACI,MAAM,KAAK,GAAG;YAC3CF;QACJ;QACA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACjB,MAAMC,UAAUhB,aAAaW,OAAO,CAACM,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAAC,CAACC,SAASA,WAAWJ,OAAO,CAAC,EAAE;YACrF,wFAAwF;YACxF,IAAIE,eAAe;gBACfL;gBACAN,UAAU,CAACC,aAAaA,WAAWC,WAAW,GAAGC,OAAO,CAACM,OAAO,CAAC,EAAE,MAAM;gBACzEJ,UAAUjB,uBAAuBY;YACrC;QACJ;QACA,qDAAqD;QACrD,wFAAwF;QACxF,IAAIK,QAAQG,MAAM,GAAG,KAAKtB,cAAc;YACpC,MAAM4B,YAAYT,QAAQU,IAAI,CAAC,CAACC,SAAS3B,aAAa2B,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,YAAYC;IACnF;IACA,MAAMC,mBAAmB,CAACC;QACtB,8BAA8B;QAC9BvB;QACA,kDAAkD;QAClD,IAAIwB,IAAAA,4CAAwB,EAACD,QAAQ,QAAQ;YACzC,uBAAuB;YACvB3B,aAAaW,OAAO,IAAIgB,GAAGE,GAAG,CAACpB,WAAW;YAC1CN,cAAc;gBACVH,aAAaW,OAAO,GAAG;YAC3B,GAAG;YACH,eAAe;YACf,CAACnB,QAAQE,QAAQiC,IAAI;YACrB,MAAMG,aAAaxB;YACnBT,gBAAgBiC;YAChBhC,gBAAgB;QACpB;IACJ;IACA,MAAMiC,UAAUC,IAAAA,8BAAc,EAAC5C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBQ;QACAkC,aAAa;IACjB;IACAF,QAAQG,SAAS,GAAGC,IAAAA,8BAAc,EAACT,kBAAkBK,QAAQG,SAAS;IACtE,OAAOH;AACX"}
+{"version":3,"sources":["useButtonTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;\n    // jump to matching option based on typing\n    const searchString = React.useRef('');\n    const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n    const moveToNextMatchingOption = (matcher, opt = {\n        startFromNext: false\n    })=>{\n        const { startFromNext } = opt;\n        const activeOptionId = activeDescendantController.active();\n        const nextInOrder = activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        }, {\n            startFrom: startFromNext ? activeDescendantController.next({\n                passive: true\n            }) : activeOptionId\n        });\n        if (nextInOrder) {\n            return nextInOrder;\n        }\n        // Cycle back to first match\n        return activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        });\n    };\n    const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{\n        if (moveToNextMatchingOption((optionText)=>{\n            return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        }, {\n            // Slowly pressing the same key will cycle through options\n            startFromNext: searchString.current.length === 1\n        })) {\n            return;\n        }\n        // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n        if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{\n            return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        }, {\n            // if the search is all the same letter, cycle through options starting with that letter\n            startFromNext: true\n        })) {\n            return;\n        }\n        activeDescendantController.blur();\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            moveToNextMatchingOptionWithSameCharacterHandling();\n        }\n    };\n    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'button',\n        activeDescendantController\n    });\n    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n    return trigger;\n}\n/**\n * @returns - whether every character in the string is the same\n */ function allCharactersSame(str) {\n    for(let i = 1; i < str.length; i++){\n        if (str[i] !== str[i - 1]) {\n            return false;\n        }\n    }\n    return true;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","getDropdownActionFromKey","key","toLowerCase","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks","str","i"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACoB;gCACZ;oCACU;AAK9B,SAASA,qBAAqBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IACnE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAC9F,0CAA0C;IAC1C,MAAMO,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAU;IACnD,MAAMC,2BAA2B,CAACC,SAASC,MAAM;QAC7CC,eAAe;IACnB,CAAC;QACG,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBX,2BAA2BY,MAAM;QACxD,MAAMC,cAAcb,2BAA2Bc,IAAI,CAAC,CAACC;YACjD,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QAC1C,GAAG;YACCC,WAAWR,gBAAgBV,2BAA2BmB,IAAI,CAAC;gBACvDC,SAAS;YACb,KAAKT;QACT;QACA,IAAIE,aAAa;YACb,OAAOA;QACX;QACA,4BAA4B;QAC5B,OAAOb,2BAA2Bc,IAAI,CAAC,CAACC;YACpC,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QAC1C;IACJ;IACA,MAAMI,oDAAoD;QACtD,IAAId,yBAAyB,CAACe;YAC1B,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,MAAM;QAC5E,GAAG;YACC,0DAA0D;YAC1Df,eAAeT,aAAawB,OAAO,CAACC,MAAM,KAAK;QACnD,IAAI;YACA;QACJ;QACA,yFAAyF;QACzF,IAAIC,kBAAkB1B,aAAawB,OAAO,KAAKlB,yBAAyB,CAACe;YACrE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,CAAC,EAAE,MAAM;QAC/E,GAAG;YACC,wFAAwF;YACxFf,eAAe;QACnB,IAAI;YACA;QACJ;QACAV,2BAA2B4B,IAAI;IACnC;IACA,MAAMC,mBAAmB,CAACC;QACtB,8BAA8B;QAC9BzB;QACA,kDAAkD;QAClD,IAAI0B,IAAAA,4CAAwB,EAACD,QAAQ,QAAQ;YACzC,uBAAuB;YACvB7B,aAAawB,OAAO,IAAIK,GAAGE,GAAG,CAACC,WAAW;YAC1C7B,cAAc;gBACVH,aAAawB,OAAO,GAAG;YAC3B,GAAG;YACH,eAAe;YACf,CAAC7B,QAAQC,QAAQiC,IAAI;YACrBT;QACJ;IACJ;IACA,MAAMa,UAAUC,IAAAA,8BAAc,EAAC3C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBI;QACAqC,aAAa;QACbpC;IACJ;IACAkC,QAAQG,SAAS,GAAGC,IAAAA,8BAAc,EAACT,kBAAkBK,QAAQG,SAAS;IACtE,OAAOH;AACX;AACA;;CAEC,GAAG,SAASP,kBAAkBY,GAAG;IAC9B,IAAI,IAAIC,IAAI,GAAGA,IAAID,IAAIb,MAAM,EAAEc,IAAI;QAC/B,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACvB,OAAO;QACX;IACJ;IACA,OAAO;AACX"}

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "useDropdown_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 _reactaria = require("@fluentui/react-aria");
 const _reacticons = require("@fluentui/react-icons");
 const _reactutilities = require("@fluentui/react-utilities");
 const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
@@ -18,6 +19,7 @@ const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
 const _Listbox = require("../Listbox/Listbox");
 const _useListboxSlot = require("../../utils/useListboxSlot");
 const _useButtonTriggerSlot = require("./useButtonTriggerSlot");
+const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
 const useDropdown_unstable = (props, ref)=>{
     var _state_clearButton;
     // Merge props from surrounding <Field>, if any
@@ -25,7 +27,13 @@ const useDropdown_unstable = (props, ref)=>{
         supportsLabelFor: true,
         supportsSize: true
     });
-    const baseState = (0, _useComboboxBaseState.useComboboxBaseState)(props);
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
+        matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
+    });
+    const baseState = (0, _useComboboxBaseState.useComboboxBaseState)({
+        ...props,
+        activeDescendantController
+    });
     const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
         props,
@@ -36,7 +44,7 @@ const useDropdown_unstable = (props, ref)=>{
     });
     const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
     const triggerRef = _react.useRef(null);
-    const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, comboboxPopupRef, {
+    const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
         state: baseState,
         triggerRef,
         defaultProps: {
@@ -44,7 +52,7 @@ const useDropdown_unstable = (props, ref)=>{
         }
     });
     var _props_button;
-    const trigger = (0, _useButtonTriggerSlot.useButtonTriggerSlot)((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, (0, _reactutilities.useMergedRefs)(triggerRef, ref), {
+    const trigger = (0, _useButtonTriggerSlot.useButtonTriggerSlot)((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
         state: baseState,
         defaultProps: {
             type: 'button',
@@ -52,7 +60,8 @@ const useDropdown_unstable = (props, ref)=>{
             children: baseState.value || props.placeholder,
             'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
-        }
+        },
+        activeDescendantController
     });
     const rootSlot = _reactutilities.slot.always(props.root, {
         defaultProps: {
@@ -95,6 +104,7 @@ const useDropdown_unstable = (props, ref)=>{
         }),
         placeholderVisible: !baseState.value && !!props.placeholder,
         showClearButton,
+        activeDescendantController,
         ...baseState
     };
     const onClearButtonClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{

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, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\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    var _state_clearButton;\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 { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = 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    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_button;\n    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {\n        state: baseState,\n        defaultProps: {\n            type: 'button',\n            tabIndex: 0,\n            children: baseState.value || props.placeholder,\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        }\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            children: props.children,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            button: 'button',\n            clearButton: 'button',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: rootSlot,\n        button: trigger,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearButton: slot.optional(props.clearButton, {\n            defaultProps: {\n                'aria-label': 'Clear selection',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n                // Safari doesn't allow to focus an element with this\n                tabIndex: 0,\n                type: 'button'\n            },\n            elementType: 'button',\n            renderByDefault: true\n        }),\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        showClearButton,\n        ...baseState\n    };\n    const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n        var _triggerRef_current;\n        clearSelection(ev);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.clearButton) {\n        state.clearButton.onClick = onClearButtonClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearButton = undefined;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n        React.useEffect(()=>{\n            if (clearable && multiselect) {\n                // eslint-disable-next-line no-console\n                console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n            }\n        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","useMergedRefs","type","tabIndex","value","placeholder","id","undefined","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\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    var _state_clearButton;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsSize: true\n    });\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        activeDescendantController\n    });\n    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = 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    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_button;\n    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n        state: baseState,\n        defaultProps: {\n            type: 'button',\n            tabIndex: 0,\n            children: baseState.value || props.placeholder,\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        },\n        activeDescendantController\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            children: props.children,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            button: 'button',\n            clearButton: 'button',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: rootSlot,\n        button: trigger,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearButton: slot.optional(props.clearButton, {\n            defaultProps: {\n                'aria-label': 'Clear selection',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n                // Safari doesn't allow to focus an element with this\n                tabIndex: 0,\n                type: 'button'\n            },\n            elementType: 'button',\n            renderByDefault: true\n        }),\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        showClearButton,\n        activeDescendantController,\n        ...baseState\n    };\n    const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n        var _triggerRef_current;\n        clearSelection(ev);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.clearButton) {\n        state.clearButton.onClick = onClearButtonClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearButton = undefined;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n        React.useEffect(()=>{\n            if (clearable && multiselect) {\n                // eslint-disable-next-line no-console\n                console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n            }\n        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","type","tabIndex","value","placeholder","id","undefined","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib-commonjs/components/Listbox/renderListbox.js

@@ -10,11 +10,15 @@ Object.defineProperty(exports, "renderListbox_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
+const _reactaria = require("@fluentui/react-aria");
 const _ListboxContext = require("../../contexts/ListboxContext");
 const renderListbox_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
-        value: contextValues.listbox,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
+        value: contextValues.activeDescendant,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
+            value: contextValues.listbox,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        })
     });
 };

package/lib-commonjs/components/Listbox/renderListbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderListbox.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Listbox\n */ export const renderListbox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(ListboxContext.Provider, {\n        value: contextValues.listbox,\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ListboxContext","Provider","value","listbox","children","root"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BALa;gCACF;gCACG;AAGpB,MAAMA,yBAAyB,CAACC,OAAOC;IAC9CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,8BAAc,CAACC,QAAQ,EAAE;QAC/CC,OAAOL,cAAcM,OAAO;QAC5BC,UAAU,WAAW,GAAGL,IAAAA,eAAI,EAACH,MAAMS,IAAI,EAAE,CAAC;IAC9C;AACJ"}
+{"version":3,"sources":["renderListbox.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Listbox\n */ export const renderListbox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n        value: contextValues.activeDescendant,\n        children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {\n            value: contextValues.listbox,\n            children: /*#__PURE__*/ _jsx(state.root, {})\n        })\n    });\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ActiveDescendantContextProvider","value","activeDescendant","children","ListboxContext","Provider","listbox","root"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BANa;gCACF;2BACoB;gCACjB;AAGpB,MAAMA,yBAAyB,CAACC,OAAOC;IAC9CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,0CAA+B,EAAE;QACvDC,OAAOJ,cAAcK,gBAAgB;QACrCC,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACK,8BAAc,CAACC,QAAQ,EAAE;YAClDJ,OAAOJ,cAAcS,OAAO;YAC5BH,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACH,MAAMW,IAAI,EAAE,CAAC;QAC9C;IACJ;AACJ"}

package/lib-commonjs/components/Listbox/useListbox.js

@@ -12,65 +12,76 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactcontextselector = require("@fluentui/react-context-selector");
+const _reactaria = require("@fluentui/react-aria");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useOptionCollection = require("../../utils/useOptionCollection");
-const _useScrollOptionsIntoView = require("../../utils/useScrollOptionsIntoView");
 const _useSelection = require("../../utils/useSelection");
 const _ComboboxContext = require("../../contexts/ComboboxContext");
+const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const UNSAFE_noLongerUsed = {
+    activeOption: undefined,
+    focusVisible: false,
+    setActiveOption: ()=>null
+};
 const useListbox_unstable = (props, ref)=>{
     const { multiselect } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
-    const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;
+    const { getOptionById } = optionCollection;
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = (0, _reactaria.useActiveDescendant)({
+        matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
+    });
+    const activeDescendantContext = (0, _reactaria.useActiveDescendantContext)();
+    const activeDescendantController = (0, _reactaria.useHasParentActiveDescendantContext)() ? activeDescendantContext.controller : controller;
     const { clearSelection, selectedOptions, selectOption } = (0, _useSelection.useSelection)(props);
-    const [activeOption, setActiveOption] = _react.useState();
-    // track whether keyboard focus outline should be shown
-    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
-    const [focusVisible, setFocusVisible] = _react.useState(false);
     const onKeyDown = (event)=>{
         const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
             open: true
         });
-        const maxIndex = getCount() - 1;
-        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
-        let newIndex = activeIndex;
+        const activeOptionId = activeDescendantController.active();
+        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
         switch(action){
+            case 'Next':
+                if (activeOption) {
+                    activeDescendantController.next();
+                } else {
+                    activeDescendantController.first();
+                }
+                break;
+            case 'Previous':
+                if (activeOption) {
+                    activeDescendantController.prev();
+                } else {
+                    activeDescendantController.first();
+                }
+                break;
+            case 'PageUp':
+            case 'First':
+                activeDescendantController.first();
+                break;
+            case 'PageDown':
+            case 'Last':
+                activeDescendantController.last();
+                break;
             case 'Select':
             case 'CloseSelect':
                 activeOption && selectOption(event, activeOption);
                 break;
-            default:
-                newIndex = (0, _dropdownKeyActions.getIndexFromAction)(action, activeIndex, maxIndex);
-        }
-        if (newIndex !== activeIndex) {
-            // prevent default page scroll/keyboard action if the index changed
-            event.preventDefault();
-            setActiveOption(getOptionAtIndex(newIndex));
-            setFocusVisible(true);
         }
     };
-    const onMouseOver = (event)=>{
-        setFocusVisible(false);
-    };
     // get state from parent combobox, if it exists
     const hasComboboxContext = (0, _reactcontextselector.useHasParentContext)(_ComboboxContext.ComboboxContext);
-    const comboboxActiveOption = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.activeOption);
-    const comboboxFocusVisible = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.focusVisible);
     const comboboxSelectedOptions = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.selectedOptions);
     const comboboxSelectOption = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.selectOption);
-    const comboboxSetActiveOption = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.setActiveOption);
     // without a parent combobox context, provide values directly from Listbox
     const optionContextValues = hasComboboxContext ? {
-        activeOption: comboboxActiveOption,
-        focusVisible: comboboxFocusVisible,
         selectedOptions: comboboxSelectedOptions,
         selectOption: comboboxSelectOption,
-        setActiveOption: comboboxSetActiveOption
+        ...UNSAFE_noLongerUsed
     } : {
-        activeOption,
-        focusVisible,
         selectedOptions,
         selectOption,
-        setActiveOption
+        ...UNSAFE_noLongerUsed
     };
     const state = {
         components: {
@@ -80,9 +91,8 @@ const useListbox_unstable = (props, ref)=>{
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, activeParentRef, activeDescendantListboxRef),
             role: multiselect ? 'menu' : 'listbox',
-            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
             tabIndex: 0,
             ...props
         }), {
@@ -90,12 +100,10 @@ const useListbox_unstable = (props, ref)=>{
         }),
         multiselect,
         clearSelection,
+        activeDescendantController,
         ...optionCollection,
         ...optionContextValues
     };
-    const scrollContainerRef = (0, _useScrollOptionsIntoView.useScrollOptionsIntoView)(state);
-    state.root.ref = (0, _reactutilities.useMergedRefs)(state.root.ref, scrollContainerRef);
     state.root.onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onKeyDown, onKeyDown));
-    state.root.onMouseOver = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onMouseOver, onMouseOver));
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n    const { multiselect } = props;\n    const optionCollection = useOptionCollection();\n    const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const [activeOption, setActiveOption] = React.useState();\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    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const maxIndex = getCount() - 1;\n        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n        let newIndex = activeIndex;\n        switch(action){\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n            default:\n                newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n        }\n        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    const onMouseOver = (event)=>{\n        setFocusVisible(false);\n    };\n    // get state from parent combobox, if it exists\n    const hasComboboxContext = useHasParentContext(ComboboxContext);\n    const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);\n    const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);\n    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n    const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasComboboxContext ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption\n    } : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption\n    };\n    const state = {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            role: multiselect ? 'menu' : 'listbox',\n            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    const scrollContainerRef = useScrollOptionsIntoView(state);\n    state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n    return state;\n};\n"],"names":["useListbox_unstable","props","ref","multiselect","optionCollection","useOptionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","useSelection","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","onKeyDown","event","action","getDropdownActionFromKey","open","maxIndex","activeIndex","id","newIndex","getIndexFromAction","preventDefault","onMouseOver","hasComboboxContext","useHasParentContext","ComboboxContext","comboboxActiveOption","useContextSelector","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","slot","always","getIntrinsicElementProps","role","undefined","tabIndex","elementType","scrollContainerRef","useScrollOptionsIntoView","useMergedRefs","useEventCallback","mergeCallbacks"],"mappings":"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"}
+{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n    activeOption: undefined,\n    focusVisible: false,\n    setActiveOption: ()=>null\n};\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n    const { multiselect } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionById } = optionCollection;\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const activeDescendantContext = useActiveDescendantContext();\n    const activeDescendantController = useHasParentActiveDescendantContext() ? activeDescendantContext.controller : controller;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const activeOptionId = activeDescendantController.active();\n        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n        switch(action){\n            case 'Next':\n                if (activeOption) {\n                    activeDescendantController.next();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'Previous':\n                if (activeOption) {\n                    activeDescendantController.prev();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'PageUp':\n            case 'First':\n                activeDescendantController.first();\n                break;\n            case 'PageDown':\n            case 'Last':\n                activeDescendantController.last();\n                break;\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n        }\n    };\n    // get state from parent combobox, if it exists\n    const hasComboboxContext = useHasParentContext(ComboboxContext);\n    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasComboboxContext ? {\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        ...UNSAFE_noLongerUsed\n    } : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed\n    };\n    const state = {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef),\n            role: multiselect ? 'menu' : 'listbox',\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        activeDescendantController,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","optionCollection","useOptionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","activeDescendantContext","useActiveDescendantContext","activeDescendantController","useHasParentActiveDescendantContext","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","event","action","getDropdownActionFromKey","open","activeOptionId","active","next","first","prev","last","hasComboboxContext","useHasParentContext","ComboboxContext","comboboxSelectedOptions","useContextSelector","ctx","comboboxSelectOption","optionContextValues","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","useEventCallback","mergeCallbacks"],"mappings":";;;;+BAuBiBA;;;eAAAA;;;;iEAvBM;gCACyE;sCACxC;2BAC6C;oCAC5D;qCACL;8BACP;iCACG;uCACC;AACjC,gEAAgE;AAChE,MAAMC,sBAAsB;IACxBC,cAAcC;IACdC,cAAc;IACdC,iBAAiB,IAAI;AACzB;AASW,MAAML,sBAAsB,CAACM,OAAOC;IAC3C,MAAM,EAAEC,WAAW,EAAE,GAAGF;IACxB,MAAMG,mBAAmBC,IAAAA,wCAAmB;IAC5C,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,MAAM,EAAEG,YAAYC,0BAA0B,EAAEC,eAAe,EAAEC,UAAU,EAAE,GAAGC,IAAAA,8BAAmB,EAAC;QAChGC,aAAa,CAACC,KAAKA,GAAGC,SAAS,CAACC,QAAQ,CAACC,uCAAgB,CAACC,IAAI;IAClE;IACA,MAAMC,0BAA0BC,IAAAA,qCAA0B;IAC1D,MAAMC,6BAA6BC,IAAAA,8CAAmC,MAAKH,wBAAwBR,UAAU,GAAGA;IAChH,MAAM,EAAEY,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAAGC,IAAAA,0BAAY,EAACxB;IACvE,MAAMyB,YAAY,CAACC;QACf,MAAMC,SAASC,IAAAA,4CAAwB,EAACF,OAAO;YAC3CG,MAAM;QACV;QACA,MAAMC,iBAAiBX,2BAA2BY,MAAM;QACxD,MAAMnC,eAAekC,iBAAiBzB,cAAcyB,kBAAkB;QACtE,OAAOH;YACH,KAAK;gBACD,IAAI/B,cAAc;oBACduB,2BAA2Ba,IAAI;gBACnC,OAAO;oBACHb,2BAA2Bc,KAAK;gBACpC;gBACA;YACJ,KAAK;gBACD,IAAIrC,cAAc;oBACduB,2BAA2Be,IAAI;gBACnC,OAAO;oBACHf,2BAA2Bc,KAAK;gBACpC;gBACA;YACJ,KAAK;YACL,KAAK;gBACDd,2BAA2Bc,KAAK;gBAChC;YACJ,KAAK;YACL,KAAK;gBACDd,2BAA2BgB,IAAI;gBAC/B;YACJ,KAAK;YACL,KAAK;gBACDvC,gBAAgB2B,aAAaG,OAAO9B;gBACpC;QACR;IACJ;IACA,+CAA+C;IAC/C,MAAMwC,qBAAqBC,IAAAA,yCAAmB,EAACC,gCAAe;IAC9D,MAAMC,0BAA0BC,IAAAA,wCAAkB,EAACF,gCAAe,EAAE,CAACG,MAAMA,IAAInB,eAAe;IAC9F,MAAMoB,uBAAuBF,IAAAA,wCAAkB,EAACF,gCAAe,EAAE,CAACG,MAAMA,IAAIlB,YAAY;IACxF,0EAA0E;IAC1E,MAAMoB,sBAAsBP,qBAAqB;QAC7Cd,iBAAiBiB;QACjBhB,cAAcmB;QACd,GAAG/C,mBAAmB;IAC1B,IAAI;QACA2B;QACAC;QACA,GAAG5B,mBAAmB;IAC1B;IACA,MAAMiD,QAAQ;QACVC,YAAY;YACR7B,MAAM;QACV;QACAA,MAAM8B,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F/C,KAAKgD,IAAAA,6BAAa,EAAChD,KAAKO,iBAAiBD;YACzC2C,MAAMhD,cAAc,SAAS;YAC7BiD,UAAU;YACV,GAAGnD,KAAK;QACZ,IAAI;YACAoD,aAAa;QACjB;QACAlD;QACAmB;QACAF;QACA,GAAGhB,gBAAgB;QACnB,GAAGwC,mBAAmB;IAC1B;IACAC,MAAM5B,IAAI,CAACS,SAAS,GAAG4B,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACV,MAAM5B,IAAI,CAACS,SAAS,EAAEA;IAC7E,OAAOmB;AACX"}