@fluentui/react-combobox 9.7.5 → 9.8.0

package/lib-commonjs/utils/useComboboxBaseState.js

@@ -14,10 +14,36 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useOptionCollection = require("../utils/useOptionCollection");
 const _useSelection = require("../utils/useSelection");
 const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium' } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
-    const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;
-    const [activeOption, setActiveOption] = _react.useState();
+    const { getOptionsMatchingValue } = optionCollection;
+    const { getOptionById } = optionCollection;
+    const getActiveOption = _react.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : undefined;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
+    // Keeping some kind of backwards compatible functionality here
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const UNSAFE_activeOption = getActiveOption();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const UNSAFE_setActiveOption = _react.useCallback((option)=>{
+        let nextOption = undefined;
+        if (typeof option === 'function') {
+            const activeOption = getActiveOption();
+            nextOption = option(activeOption);
+        }
+        if (nextOption) {
+            activeDescendantController.focus(nextOption.id);
+        } else {
+            activeDescendantController.blur();
+        }
+    }, [
+        activeDescendantController,
+        getActiveOption
+    ]);
     // 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);
@@ -77,30 +103,42 @@ const useComboboxBaseState = (props)=>{
         onOpenChange,
         setOpenState
     ]);
-    // update active option based on change in open state or children
+    // update active option based on change in open state
     _react.useEffect(()=>{
-        if (open && !activeOption) {
+        if (open) {
             // if it is single-select and there is a selected option, start at the selected option
             if (!multiselect && selectedOptions.length > 0) {
                 const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();
-                selectedOption && setActiveOption(selectedOption);
-            } else {
-                setActiveOption(getOptionAtIndex(0));
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
             }
-        } else if (!open) {
-            // reset the active option when closing
-            setActiveOption(undefined);
+        } else {
+            activeDescendantController.blur();
         }
     // this should only be run in response to changes in the open state or children
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         open,
-        children
+        activeDescendantController
+    ]);
+    // Fallback focus when children are updated in an open popover results in no item being focused
+    _react.useEffect(()=>{
+        if (open) {
+            if (!activeDescendantController.active()) {
+                activeDescendantController.first();
+            }
+        }
+    // this should only be run in response to changes in the open state or children
+    }, [
+        open,
+        children,
+        activeDescendantController
     ]);
     return {
         ...optionCollection,
         ...selectionState,
-        activeOption,
+        activeOption: UNSAFE_activeOption,
         appearance,
         clearable,
         focusVisible,
@@ -109,7 +147,7 @@ const useComboboxBaseState = (props)=>{
         inlinePopup,
         mountNode,
         open,
-        setActiveOption,
+        setActiveOption: UNSAFE_setActiveOption,
         setFocusVisible,
         setHasFocus,
         setOpen,

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

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium' } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\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    // track focused state to conditionally render collapsed listbox\n    // when the trigger is focused - the listbox should but hidden until the open state is changed\n    const [hasFocus, setHasFocus] = React.useState(false);\n    const ignoreNextBlur = React.useRef(false);\n    const selectionState = useSelection(props);\n    const { selectedOptions } = selectionState;\n    // calculate value based on props, internal value changes, and selected options\n    const isFirstMount = useFirstMount();\n    const [controllableValue, setValue] = useControllableState({\n        state: props.value,\n        initialState: undefined\n    });\n    const value = React.useMemo(()=>{\n        // don't compute the value if it is defined through props or setValue,\n        if (controllableValue !== undefined) {\n            return controllableValue;\n        }\n        // handle defaultValue here, so it is overridden by selection\n        if (isFirstMount && props.defaultValue !== undefined) {\n            return props.defaultValue;\n        }\n        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n            return selectedOptions.includes(optionValue);\n        }).map((option)=>option.text);\n        if (multiselect) {\n            // editable inputs should not display multiple selected options in the input as text\n            return editable ? '' : selectedOptionsText.join(', ');\n        }\n        return selectedOptionsText[0];\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        controllableValue,\n        editable,\n        getOptionsMatchingValue,\n        multiselect,\n        props.defaultValue,\n        selectedOptions\n    ]);\n    // Handle open state, which is shared with options in context\n    const [open, setOpenState] = useControllableState({\n        state: props.open,\n        defaultState: props.defaultOpen,\n        initialState: false\n    });\n    const setOpen = React.useCallback((event, newState)=>{\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n            open: newState\n        });\n        setOpenState(newState);\n    }, [\n        onOpenChange,\n        setOpenState\n    ]);\n    // update active option based on change in open state or children\n    React.useEffect(()=>{\n        if (open && !activeOption) {\n            // if it is single-select and there is a selected option, start at the selected option\n            if (!multiselect && selectedOptions.length > 0) {\n                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n                selectedOption && setActiveOption(selectedOption);\n            } else {\n                setActiveOption(getOptionAtIndex(0));\n            }\n        } else if (!open) {\n            // reset the active option when closing\n            setActiveOption(undefined);\n        }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        open,\n        children\n    ]);\n    return {\n        ...optionCollection,\n        ...selectionState,\n        activeOption,\n        appearance,\n        clearable,\n        focusVisible,\n        hasFocus,\n        ignoreNextBlur,\n        inlinePopup,\n        mountNode,\n        open,\n        setActiveOption,\n        setFocusVisible,\n        setHasFocus,\n        setOpen,\n        setValue,\n        size,\n        value,\n        multiselect\n    };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","useOptionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection","selectedOptions","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionsMatchingValue } = optionCollection;\n    const { getOptionById } = optionCollection;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : undefined;\n    }, [\n        activeDescendantController,\n        getOptionById\n    ]);\n    // Keeping some kind of backwards compatible functionality here\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const UNSAFE_activeOption = getActiveOption();\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const UNSAFE_setActiveOption = React.useCallback((option)=>{\n        let nextOption = undefined;\n        if (typeof option === 'function') {\n            const activeOption = getActiveOption();\n            nextOption = option(activeOption);\n        }\n        if (nextOption) {\n            activeDescendantController.focus(nextOption.id);\n        } else {\n            activeDescendantController.blur();\n        }\n    }, [\n        activeDescendantController,\n        getActiveOption\n    ]);\n    // track whether keyboard focus outline should be shown\n    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n    const [focusVisible, setFocusVisible] = React.useState(false);\n    // track focused state to conditionally render collapsed listbox\n    // when the trigger is focused - the listbox should but hidden until the open state is changed\n    const [hasFocus, setHasFocus] = React.useState(false);\n    const ignoreNextBlur = React.useRef(false);\n    const selectionState = useSelection(props);\n    const { selectedOptions } = selectionState;\n    // calculate value based on props, internal value changes, and selected options\n    const isFirstMount = useFirstMount();\n    const [controllableValue, setValue] = useControllableState({\n        state: props.value,\n        initialState: undefined\n    });\n    const value = React.useMemo(()=>{\n        // don't compute the value if it is defined through props or setValue,\n        if (controllableValue !== undefined) {\n            return controllableValue;\n        }\n        // handle defaultValue here, so it is overridden by selection\n        if (isFirstMount && props.defaultValue !== undefined) {\n            return props.defaultValue;\n        }\n        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n            return selectedOptions.includes(optionValue);\n        }).map((option)=>option.text);\n        if (multiselect) {\n            // editable inputs should not display multiple selected options in the input as text\n            return editable ? '' : selectedOptionsText.join(', ');\n        }\n        return selectedOptionsText[0];\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        controllableValue,\n        editable,\n        getOptionsMatchingValue,\n        multiselect,\n        props.defaultValue,\n        selectedOptions\n    ]);\n    // Handle open state, which is shared with options in context\n    const [open, setOpenState] = useControllableState({\n        state: props.open,\n        defaultState: props.defaultOpen,\n        initialState: false\n    });\n    const setOpen = React.useCallback((event, newState)=>{\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n            open: newState\n        });\n        setOpenState(newState);\n    }, [\n        onOpenChange,\n        setOpenState\n    ]);\n    // update active option based on change in open state\n    React.useEffect(()=>{\n        if (open) {\n            // if it is single-select and there is a selected option, start at the selected option\n            if (!multiselect && selectedOptions.length > 0) {\n                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {\n                    activeDescendantController.focus(selectedOption.id);\n                }\n            }\n        } else {\n            activeDescendantController.blur();\n        }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        open,\n        activeDescendantController\n    ]);\n    // Fallback focus when children are updated in an open popover results in no item being focused\n    React.useEffect(()=>{\n        if (open) {\n            if (!activeDescendantController.active()) {\n                activeDescendantController.first();\n            }\n        }\n    // this should only be run in response to changes in the open state or children\n    }, [\n        open,\n        children,\n        activeDescendantController\n    ]);\n    return {\n        ...optionCollection,\n        ...selectionState,\n        activeOption: UNSAFE_activeOption,\n        appearance,\n        clearable,\n        focusVisible,\n        hasFocus,\n        ignoreNextBlur,\n        inlinePopup,\n        mountNode,\n        open,\n        setActiveOption: UNSAFE_setActiveOption,\n        setFocusVisible,\n        setHasFocus,\n        setOpen,\n        setValue,\n        size,\n        value,\n        multiselect\n    };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection","selectedOptions","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption"],"mappings":"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"}

package/lib-commonjs/utils/useOptionCollection.js

@@ -11,23 +11,26 @@ Object.defineProperty(exports, "useOptionCollection", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const useOptionCollection = ()=>{
-    const nodes = _react.useRef([]);
+    const optionsById = _react.useRef(new Map());
     const collectionAPI = _react.useMemo(()=>{
-        const getCount = ()=>nodes.current.length;
-        const getOptionAtIndex = (index)=>{
-            var _nodes_current_index;
-            return (_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option;
-        };
-        const getIndexOfId = (id)=>nodes.current.findIndex((node)=>node.option.id === id);
+        const getCount = ()=>optionsById.current.size;
+        // index searches are no longer used
+        const getOptionAtIndex = ()=>undefined;
+        const getIndexOfId = ()=>-1;
         const getOptionById = (id)=>{
-            const item = nodes.current.find((node)=>node.option.id === id);
-            return item === null || item === void 0 ? void 0 : item.option;
+            return optionsById.current.get(id);
         };
         const getOptionsMatchingText = (matcher)=>{
-            return nodes.current.filter((node)=>matcher(node.option.text)).map((node)=>node.option);
+            return Array.from(optionsById.current.values()).filter(({ text })=>matcher(text));
         };
         const getOptionsMatchingValue = (matcher)=>{
-            return nodes.current.filter((node)=>matcher(node.option.value)).map((node)=>node.option);
+            const matches = [];
+            for (const option of optionsById.current.values()){
+                if (matcher(option.value)) {
+                    matches.push(option);
+                }
+            }
+            return matches;
         };
         return {
             getCount,
@@ -38,43 +41,13 @@ const useOptionCollection = ()=>{
             getOptionsMatchingValue
         };
     }, []);
-    const registerOption = _react.useCallback((option, element)=>{
-        var _nodes_current_index;
-        const index = nodes.current.findIndex((node)=>{
-            if (!node.element || !element) {
-                return false;
-            }
-            if (node.option.id === option.id) {
-                return true;
-            }
-            // use the DOM method compareDocumentPosition to order the current node against registered nodes
-            // eslint-disable-next-line no-bitwise
-            return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
-        });
-        // do not register the option if it already exists
-        if (((_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option.id) !== option.id) {
-            const newItem = {
-                element,
-                option
-            };
-            // If an index is not found we will push the element to the end.
-            if (index === -1) {
-                nodes.current = [
-                    ...nodes.current,
-                    newItem
-                ];
-            } else {
-                nodes.current.splice(index, 0, newItem);
-            }
-        }
-        // return the unregister function
-        return ()=>{
-            nodes.current = nodes.current.filter((node)=>node.option.id !== option.id);
-        };
+    const registerOption = _react.useCallback((option)=>{
+        optionsById.current.set(option.id, option);
+        return ()=>optionsById.current.delete(option.id);
     }, []);
     return {
         ...collectionAPI,
-        options: nodes.current.map((node)=>node.option),
+        options: Array.from(optionsById.current.values()),
         registerOption
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useOptionCollection.js"],"sourcesContent":["import * as React from 'react';\n/**\n * A hook for managing a collection of child Options\n */ export const useOptionCollection = ()=>{\n    const nodes = React.useRef([]);\n    const collectionAPI = React.useMemo(()=>{\n        const getCount = ()=>nodes.current.length;\n        const getOptionAtIndex = (index)=>{\n            var _nodes_current_index;\n            return (_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option;\n        };\n        const getIndexOfId = (id)=>nodes.current.findIndex((node)=>node.option.id === id);\n        const getOptionById = (id)=>{\n            const item = nodes.current.find((node)=>node.option.id === id);\n            return item === null || item === void 0 ? void 0 : item.option;\n        };\n        const getOptionsMatchingText = (matcher)=>{\n            return nodes.current.filter((node)=>matcher(node.option.text)).map((node)=>node.option);\n        };\n        const getOptionsMatchingValue = (matcher)=>{\n            return nodes.current.filter((node)=>matcher(node.option.value)).map((node)=>node.option);\n        };\n        return {\n            getCount,\n            getOptionAtIndex,\n            getIndexOfId,\n            getOptionById,\n            getOptionsMatchingText,\n            getOptionsMatchingValue\n        };\n    }, []);\n    const registerOption = React.useCallback((option, element)=>{\n        var _nodes_current_index;\n        const index = nodes.current.findIndex((node)=>{\n            if (!node.element || !element) {\n                return false;\n            }\n            if (node.option.id === option.id) {\n                return true;\n            }\n            // use the DOM method compareDocumentPosition to order the current node against registered nodes\n            // eslint-disable-next-line no-bitwise\n            return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n        });\n        // do not register the option if it already exists\n        if (((_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option.id) !== option.id) {\n            const newItem = {\n                element,\n                option\n            };\n            // If an index is not found we will push the element to the end.\n            if (index === -1) {\n                nodes.current = [\n                    ...nodes.current,\n                    newItem\n                ];\n            } else {\n                nodes.current.splice(index, 0, newItem);\n            }\n        }\n        // return the unregister function\n        return ()=>{\n            nodes.current = nodes.current.filter((node)=>node.option.id !== option.id);\n        };\n    }, []);\n    return {\n        ...collectionAPI,\n        options: nodes.current.map((node)=>node.option),\n        registerOption\n    };\n};\n"],"names":["useOptionCollection","nodes","React","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","_nodes_current_index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"mappings":";;;;+BAGiBA;;;eAAAA;;;;iEAHM;AAGZ,MAAMA,sBAAsB;IACnC,MAAMC,QAAQC,OAAMC,MAAM,CAAC,EAAE;IAC7B,MAAMC,gBAAgBF,OAAMG,OAAO,CAAC;QAChC,MAAMC,WAAW,IAAIL,MAAMM,OAAO,CAACC,MAAM;QACzC,MAAMC,mBAAmB,CAACC;YACtB,IAAIC;YACJ,OAAO,AAACA,CAAAA,uBAAuBV,MAAMM,OAAO,CAACG,MAAM,AAAD,MAAO,QAAQC,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBC,MAAM;QAC3I;QACA,MAAMC,eAAe,CAACC,KAAKb,MAAMM,OAAO,CAACQ,SAAS,CAAC,CAACC,OAAOA,KAAKJ,MAAM,CAACE,EAAE,KAAKA;QAC9E,MAAMG,gBAAgB,CAACH;YACnB,MAAMI,OAAOjB,MAAMM,OAAO,CAACY,IAAI,CAAC,CAACH,OAAOA,KAAKJ,MAAM,CAACE,EAAE,KAAKA;YAC3D,OAAOI,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKN,MAAM;QAClE;QACA,MAAMQ,yBAAyB,CAACC;YAC5B,OAAOpB,MAAMM,OAAO,CAACe,MAAM,CAAC,CAACN,OAAOK,QAAQL,KAAKJ,MAAM,CAACW,IAAI,GAAGC,GAAG,CAAC,CAACR,OAAOA,KAAKJ,MAAM;QAC1F;QACA,MAAMa,0BAA0B,CAACJ;YAC7B,OAAOpB,MAAMM,OAAO,CAACe,MAAM,CAAC,CAACN,OAAOK,QAAQL,KAAKJ,MAAM,CAACc,KAAK,GAAGF,GAAG,CAAC,CAACR,OAAOA,KAAKJ,MAAM;QAC3F;QACA,OAAO;YACHN;YACAG;YACAI;YACAI;YACAG;YACAK;QACJ;IACJ,GAAG,EAAE;IACL,MAAME,iBAAiBzB,OAAM0B,WAAW,CAAC,CAAChB,QAAQiB;QAC9C,IAAIlB;QACJ,MAAMD,QAAQT,MAAMM,OAAO,CAACQ,SAAS,CAAC,CAACC;YACnC,IAAI,CAACA,KAAKa,OAAO,IAAI,CAACA,SAAS;gBAC3B,OAAO;YACX;YACA,IAAIb,KAAKJ,MAAM,CAACE,EAAE,KAAKF,OAAOE,EAAE,EAAE;gBAC9B,OAAO;YACX;YACA,gGAAgG;YAChG,sCAAsC;YACtC,OAAOE,KAAKa,OAAO,CAACC,uBAAuB,CAACD,WAAWE,KAAKC,2BAA2B;QAC3F;QACA,kDAAkD;QAClD,IAAI,AAAC,CAAA,AAACrB,CAAAA,uBAAuBV,MAAMM,OAAO,CAACG,MAAM,AAAD,MAAO,QAAQC,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBC,MAAM,CAACE,EAAE,AAAD,MAAOF,OAAOE,EAAE,EAAE;YACrJ,MAAMmB,UAAU;gBACZJ;gBACAjB;YACJ;YACA,gEAAgE;YAChE,IAAIF,UAAU,CAAC,GAAG;gBACdT,MAAMM,OAAO,GAAG;uBACTN,MAAMM,OAAO;oBAChB0B;iBACH;YACL,OAAO;gBACHhC,MAAMM,OAAO,CAAC2B,MAAM,CAACxB,OAAO,GAAGuB;YACnC;QACJ;QACA,iCAAiC;QACjC,OAAO;YACHhC,MAAMM,OAAO,GAAGN,MAAMM,OAAO,CAACe,MAAM,CAAC,CAACN,OAAOA,KAAKJ,MAAM,CAACE,EAAE,KAAKF,OAAOE,EAAE;QAC7E;IACJ,GAAG,EAAE;IACL,OAAO;QACH,GAAGV,aAAa;QAChB+B,SAASlC,MAAMM,OAAO,CAACiB,GAAG,CAAC,CAACR,OAAOA,KAAKJ,MAAM;QAC9Ce;IACJ;AACJ"}
+{"version":3,"sources":["useOptionCollection.js"],"sourcesContent":["import * as React from 'react';\n/**\n * A hook for managing a collection of child Options\n */ export const useOptionCollection = ()=>{\n    const optionsById = React.useRef(new Map());\n    const collectionAPI = React.useMemo(()=>{\n        const getCount = ()=>optionsById.current.size;\n        // index searches are no longer used\n        const getOptionAtIndex = ()=>undefined;\n        const getIndexOfId = ()=>-1;\n        const getOptionById = (id)=>{\n            return optionsById.current.get(id);\n        };\n        const getOptionsMatchingText = (matcher)=>{\n            return Array.from(optionsById.current.values()).filter(({ text })=>matcher(text));\n        };\n        const getOptionsMatchingValue = (matcher)=>{\n            const matches = [];\n            for (const option of optionsById.current.values()){\n                if (matcher(option.value)) {\n                    matches.push(option);\n                }\n            }\n            return matches;\n        };\n        return {\n            getCount,\n            getOptionAtIndex,\n            getIndexOfId,\n            getOptionById,\n            getOptionsMatchingText,\n            getOptionsMatchingValue\n        };\n    }, []);\n    const registerOption = React.useCallback((option)=>{\n        optionsById.current.set(option.id, option);\n        return ()=>optionsById.current.delete(option.id);\n    }, []);\n    return {\n        ...collectionAPI,\n        options: Array.from(optionsById.current.values()),\n        registerOption\n    };\n};\n"],"names":["useOptionCollection","optionsById","React","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionAtIndex","undefined","getIndexOfId","getOptionById","id","get","getOptionsMatchingText","matcher","Array","from","values","filter","text","getOptionsMatchingValue","matches","option","value","push","registerOption","useCallback","set","delete","options"],"mappings":";;;;+BAGiBA;;;eAAAA;;;;iEAHM;AAGZ,MAAMA,sBAAsB;IACnC,MAAMC,cAAcC,OAAMC,MAAM,CAAC,IAAIC;IACrC,MAAMC,gBAAgBH,OAAMI,OAAO,CAAC;QAChC,MAAMC,WAAW,IAAIN,YAAYO,OAAO,CAACC,IAAI;QAC7C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAIC;QAC7B,MAAMC,eAAe,IAAI,CAAC;QAC1B,MAAMC,gBAAgB,CAACC;YACnB,OAAOb,YAAYO,OAAO,CAACO,GAAG,CAACD;QACnC;QACA,MAAME,yBAAyB,CAACC;YAC5B,OAAOC,MAAMC,IAAI,CAAClB,YAAYO,OAAO,CAACY,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAGL,QAAQK;QAC/E;QACA,MAAMC,0BAA0B,CAACN;YAC7B,MAAMO,UAAU,EAAE;YAClB,KAAK,MAAMC,UAAUxB,YAAYO,OAAO,CAACY,MAAM,GAAG;gBAC9C,IAAIH,QAAQQ,OAAOC,KAAK,GAAG;oBACvBF,QAAQG,IAAI,CAACF;gBACjB;YACJ;YACA,OAAOD;QACX;QACA,OAAO;YACHjB;YACAG;YACAE;YACAC;YACAG;YACAO;QACJ;IACJ,GAAG,EAAE;IACL,MAAMK,iBAAiB1B,OAAM2B,WAAW,CAAC,CAACJ;QACtCxB,YAAYO,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QACnC,OAAO,IAAIxB,YAAYO,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IACL,OAAO;QACH,GAAGT,aAAa;QAChB2B,SAASd,MAAMC,IAAI,CAAClB,YAAYO,OAAO,CAACY,MAAM;QAC9CQ;IACJ;AACJ"}

package/lib-commonjs/utils/useTriggerSlot.js

@@ -10,15 +10,15 @@ Object.defineProperty(exports, "useTriggerSlot", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
 const _dropdownKeyActions = require("../utils/dropdownKeyActions");
 function useTriggerSlot(triggerSlotFromProp, ref, options) {
-    const { state: { activeOption, getCount, getIndexOfId, getOptionAtIndex, open, selectOption, setActiveOption, setFocusVisible, setOpen, multiselect, setHasFocus }, defaultProps, elementType } = options;
+    const { state: { open, setOpen, setHasFocus }, defaultProps, elementType, activeDescendantController } = options;
     const trigger = _reactutilities.slot.always(triggerSlotFromProp, {
         defaultProps: {
             type: 'text',
             'aria-expanded': open,
-            'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
             role: 'combobox',
             ...typeof defaultProps === 'object' && defaultProps
         },
@@ -41,49 +41,102 @@ function useTriggerSlot(triggerSlotFromProp, ref, options) {
         setOpen(event, !open);
     }, trigger.onClick);
     // handle combobox keyboard interaction
-    trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)((event)=>{
-        const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
+    trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)(useTriggerKeydown({
+        activeDescendantController,
+        ...options.state
+    }), trigger.onKeyDown);
+    return trigger;
+}
+function useTriggerKeydown(options) {
+    const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;
+    const getActiveOption = _react.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : undefined;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
+    const first = ()=>{
+        activeDescendantController.first();
+    };
+    const next = (activeOption)=>{
+        if (activeOption) {
+            activeDescendantController.next();
+        } else {
+            activeDescendantController.first();
+        }
+    };
+    const previous = (activeOption)=>{
+        if (activeOption) {
+            activeDescendantController.prev();
+        } else {
+            activeDescendantController.first();
+        }
+    };
+    const pageUp = ()=>{
+        for(let i = 0; i < 10; i++){
+            activeDescendantController.prev();
+        }
+    };
+    const pageDown = ()=>{
+        for(let i = 0; i < 10; i++){
+            activeDescendantController.next();
+        }
+    };
+    const setKeyboardNavigation = (0, _reacttabster.useSetKeyboardNavigation)();
+    return (0, _reactutilities.useEventCallback)((e)=>{
+        const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(e, {
             open,
             multiselect
         });
-        const maxIndex = getCount() - 1;
-        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
-        let newIndex = activeIndex;
+        const activeOption = getActiveOption();
         switch(action){
+            case 'First':
+            case 'Next':
+            case 'Previous':
+            case 'PageDown':
+            case 'PageUp':
             case 'Open':
-                event.preventDefault();
-                setFocusVisible(true);
-                setOpen(event, true);
+            case 'Close':
+            case 'CloseSelect':
+            case 'Select':
+                e.preventDefault();
+                break;
+        }
+        setKeyboardNavigation(true);
+        switch(action){
+            case 'First':
+                first();
+                break;
+            case 'Next':
+                next(activeOption);
+                break;
+            case 'Previous':
+                previous(activeOption);
+                break;
+            case 'PageDown':
+                pageDown();
+                break;
+            case 'PageUp':
+                pageUp();
+                break;
+            case 'Open':
+                setOpen(e, true);
                 break;
             case 'Close':
                 // stop propagation for escape key to avoid dismissing any parent popups
-                event.stopPropagation();
-                event.preventDefault();
-                setOpen(event, false);
+                e.stopPropagation();
+                setOpen(e, false);
                 break;
             case 'CloseSelect':
-                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
+                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(e, false);
             // fallthrough
             case 'Select':
-                activeOption && selectOption(event, activeOption);
-                event.preventDefault();
+                activeOption && selectOption(e, activeOption);
                 break;
             case 'Tab':
-                !multiselect && activeOption && selectOption(event, activeOption);
+                !multiselect && activeOption && selectOption(e, 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);
         }
-    }, trigger.onKeyDown);
-    trigger.onMouseOver = (0, _reactutilities.mergeCallbacks)((event)=>{
-        setFocusVisible(false);
-    }, trigger.onMouseOver);
-    // TODO fix cast
-    return trigger;
+    });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */ export function useTriggerSlot(triggerSlotFromProp, ref, options) {\n    const { state: { activeOption, getCount, getIndexOfId, getOptionAtIndex, open, selectOption, setActiveOption, setFocusVisible, setOpen, multiselect, setHasFocus }, defaultProps, elementType } = options;\n    const trigger = slot.always(triggerSlotFromProp, {\n        defaultProps: {\n            type: 'text',\n            'aria-expanded': open,\n            'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,\n            role: 'combobox',\n            ...typeof defaultProps === 'object' && defaultProps\n        },\n        elementType\n    });\n    // handle trigger focus/blur\n    const triggerRef = React.useRef(null);\n    trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref);\n    // the trigger should open/close the popup on click or blur\n    trigger.onBlur = mergeCallbacks((event)=>{\n        setOpen(event, false);\n        setHasFocus(false);\n    }, trigger.onBlur);\n    trigger.onFocus = mergeCallbacks((event)=>{\n        if (event.target === event.currentTarget) {\n            setHasFocus(true);\n        }\n    }, trigger.onFocus);\n    trigger.onClick = mergeCallbacks((event)=>{\n        setOpen(event, !open);\n    }, trigger.onClick);\n    // handle combobox keyboard interaction\n    trigger.onKeyDown = mergeCallbacks((event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open,\n            multiselect\n        });\n        const maxIndex = getCount() - 1;\n        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n        let newIndex = activeIndex;\n        switch(action){\n            case 'Open':\n                event.preventDefault();\n                setFocusVisible(true);\n                setOpen(event, true);\n                break;\n            case 'Close':\n                // stop propagation for escape key to avoid dismissing any parent popups\n                event.stopPropagation();\n                event.preventDefault();\n                setOpen(event, false);\n                break;\n            case 'CloseSelect':\n                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);\n            // fallthrough\n            case 'Select':\n                activeOption && selectOption(event, activeOption);\n                event.preventDefault();\n                break;\n            case 'Tab':\n                !multiselect && activeOption && selectOption(event, activeOption);\n                break;\n            default:\n                newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n        }\n        if (newIndex !== activeIndex) {\n            // prevent default page scroll/keyboard action if the index changed\n            event.preventDefault();\n            setActiveOption(getOptionAtIndex(newIndex));\n            setFocusVisible(true);\n        }\n    }, trigger.onKeyDown);\n    trigger.onMouseOver = mergeCallbacks((event)=>{\n        setFocusVisible(false);\n    }, trigger.onMouseOver);\n    // TODO fix cast\n    return trigger;\n}\n"],"names":["useTriggerSlot","triggerSlotFromProp","ref","options","state","activeOption","getCount","getIndexOfId","getOptionAtIndex","open","selectOption","setActiveOption","setFocusVisible","setOpen","multiselect","setHasFocus","defaultProps","elementType","trigger","slot","always","type","id","undefined","role","triggerRef","React","useRef","useMergedRefs","onBlur","mergeCallbacks","event","onFocus","target","currentTarget","onClick","onKeyDown","action","getDropdownActionFromKey","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","getIndexFromAction","onMouseOver"],"mappings":";;;;+BAMoBA;;;eAAAA;;;;iEANG;gCAC6B;oCACS;AAIlD,SAASA,eAAeC,mBAAmB,EAAEC,GAAG,EAAEC,OAAO;IAChE,MAAM,EAAEC,OAAO,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAEC,OAAO,EAAEC,WAAW,EAAEC,WAAW,EAAE,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGd;IAClM,MAAMe,UAAUC,oBAAI,CAACC,MAAM,CAACnB,qBAAqB;QAC7Ce,cAAc;YACVK,MAAM;YACN,iBAAiBZ;YACjB,yBAAyBA,OAAOJ,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaiB,EAAE,GAAGC;YAC9GC,MAAM;YACN,GAAG,OAAOR,iBAAiB,YAAYA,YAAY;QACvD;QACAC;IACJ;IACA,4BAA4B;IAC5B,MAAMQ,aAAaC,OAAMC,MAAM,CAAC;IAChCT,QAAQhB,GAAG,GAAG0B,IAAAA,6BAAa,EAACH,YAAYP,QAAQhB,GAAG,EAAEA;IACrD,2DAA2D;IAC3DgB,QAAQW,MAAM,GAAGC,IAAAA,8BAAc,EAAC,CAACC;QAC7BlB,QAAQkB,OAAO;QACfhB,YAAY;IAChB,GAAGG,QAAQW,MAAM;IACjBX,QAAQc,OAAO,GAAGF,IAAAA,8BAAc,EAAC,CAACC;QAC9B,IAAIA,MAAME,MAAM,KAAKF,MAAMG,aAAa,EAAE;YACtCnB,YAAY;QAChB;IACJ,GAAGG,QAAQc,OAAO;IAClBd,QAAQiB,OAAO,GAAGL,IAAAA,8BAAc,EAAC,CAACC;QAC9BlB,QAAQkB,OAAO,CAACtB;IACpB,GAAGS,QAAQiB,OAAO;IAClB,uCAAuC;IACvCjB,QAAQkB,SAAS,GAAGN,IAAAA,8BAAc,EAAC,CAACC;QAChC,MAAMM,SAASC,IAAAA,4CAAwB,EAACP,OAAO;YAC3CtB;YACAK;QACJ;QACA,MAAMyB,WAAWjC,aAAa;QAC9B,MAAMkC,cAAcnC,eAAeE,aAAaF,aAAaiB,EAAE,IAAI,CAAC;QACpE,IAAImB,WAAWD;QACf,OAAOH;YACH,KAAK;gBACDN,MAAMW,cAAc;gBACpB9B,gBAAgB;gBAChBC,QAAQkB,OAAO;gBACf;YACJ,KAAK;gBACD,wEAAwE;gBACxEA,MAAMY,eAAe;gBACrBZ,MAAMW,cAAc;gBACpB7B,QAAQkB,OAAO;gBACf;YACJ,KAAK;gBACD,CAACjB,eAAe,CAAET,CAAAA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAauC,QAAQ,AAAD,KAAM/B,QAAQkB,OAAO;YAC3H,cAAc;YACd,KAAK;gBACD1B,gBAAgBK,aAAaqB,OAAO1B;gBACpC0B,MAAMW,cAAc;gBACpB;YACJ,KAAK;gBACD,CAAC5B,eAAeT,gBAAgBK,aAAaqB,OAAO1B;gBACpD;YACJ;gBACIoC,WAAWI,IAAAA,sCAAkB,EAACR,QAAQG,aAAaD;QAC3D;QACA,IAAIE,aAAaD,aAAa;YAC1B,mEAAmE;YACnET,MAAMW,cAAc;YACpB/B,gBAAgBH,iBAAiBiC;YACjC7B,gBAAgB;QACpB;IACJ,GAAGM,QAAQkB,SAAS;IACpBlB,QAAQ4B,WAAW,GAAGhB,IAAAA,8BAAc,EAAC,CAACC;QAClCnB,gBAAgB;IACpB,GAAGM,QAAQ4B,WAAW;IACtB,gBAAgB;IAChB,OAAO5B;AACX"}
+{"version":3,"sources":["useTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */ export function useTriggerSlot(triggerSlotFromProp, ref, options) {\n    const { state: { open, setOpen, setHasFocus }, defaultProps, elementType, activeDescendantController } = options;\n    const trigger = slot.always(triggerSlotFromProp, {\n        defaultProps: {\n            type: 'text',\n            'aria-expanded': open,\n            role: 'combobox',\n            ...typeof defaultProps === 'object' && defaultProps\n        },\n        elementType\n    });\n    // handle trigger focus/blur\n    const triggerRef = React.useRef(null);\n    trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref);\n    // the trigger should open/close the popup on click or blur\n    trigger.onBlur = mergeCallbacks((event)=>{\n        setOpen(event, false);\n        setHasFocus(false);\n    }, trigger.onBlur);\n    trigger.onFocus = mergeCallbacks((event)=>{\n        if (event.target === event.currentTarget) {\n            setHasFocus(true);\n        }\n    }, trigger.onFocus);\n    trigger.onClick = mergeCallbacks((event)=>{\n        setOpen(event, !open);\n    }, trigger.onClick);\n    // handle combobox keyboard interaction\n    trigger.onKeyDown = mergeCallbacks(useTriggerKeydown({\n        activeDescendantController,\n        ...options.state\n    }), trigger.onKeyDown);\n    return trigger;\n}\nfunction useTriggerKeydown(options) {\n    const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : undefined;\n    }, [\n        activeDescendantController,\n        getOptionById\n    ]);\n    const first = ()=>{\n        activeDescendantController.first();\n    };\n    const next = (activeOption)=>{\n        if (activeOption) {\n            activeDescendantController.next();\n        } else {\n            activeDescendantController.first();\n        }\n    };\n    const previous = (activeOption)=>{\n        if (activeOption) {\n            activeDescendantController.prev();\n        } else {\n            activeDescendantController.first();\n        }\n    };\n    const pageUp = ()=>{\n        for(let i = 0; i < 10; i++){\n            activeDescendantController.prev();\n        }\n    };\n    const pageDown = ()=>{\n        for(let i = 0; i < 10; i++){\n            activeDescendantController.next();\n        }\n    };\n    const setKeyboardNavigation = useSetKeyboardNavigation();\n    return useEventCallback((e)=>{\n        const action = getDropdownActionFromKey(e, {\n            open,\n            multiselect\n        });\n        const activeOption = getActiveOption();\n        switch(action){\n            case 'First':\n            case 'Next':\n            case 'Previous':\n            case 'PageDown':\n            case 'PageUp':\n            case 'Open':\n            case 'Close':\n            case 'CloseSelect':\n            case 'Select':\n                e.preventDefault();\n                break;\n        }\n        setKeyboardNavigation(true);\n        switch(action){\n            case 'First':\n                first();\n                break;\n            case 'Next':\n                next(activeOption);\n                break;\n            case 'Previous':\n                previous(activeOption);\n                break;\n            case 'PageDown':\n                pageDown();\n                break;\n            case 'PageUp':\n                pageUp();\n                break;\n            case 'Open':\n                setOpen(e, true);\n                break;\n            case 'Close':\n                // stop propagation for escape key to avoid dismissing any parent popups\n                e.stopPropagation();\n                setOpen(e, false);\n                break;\n            case 'CloseSelect':\n                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(e, false);\n            // fallthrough\n            case 'Select':\n                activeOption && selectOption(e, activeOption);\n                break;\n            case 'Tab':\n                !multiselect && activeOption && selectOption(e, activeOption);\n                break;\n        }\n    });\n}\n"],"names":["useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","slot","always","type","role","triggerRef","React","useRef","useMergedRefs","onBlur","mergeCallbacks","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","useSetKeyboardNavigation","useEventCallback","e","action","getDropdownActionFromKey","preventDefault","stopPropagation","disabled"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.7.5",
+  "version": "9.8.0",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,17 +33,18 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-aria": "^9.9.0",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.51",
-    "@fluentui/react-field": "^9.1.53",
+    "@fluentui/react-context-selector": "^9.1.52",
+    "@fluentui/react-field": "^9.1.54",
     "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-jsx-runtime": "^9.0.29",
-    "@fluentui/react-portal": "^9.4.13",
-    "@fluentui/react-positioning": "^9.13.3",
+    "@fluentui/react-jsx-runtime": "^9.0.30",
+    "@fluentui/react-portal": "^9.4.14",
+    "@fluentui/react-positioning": "^9.13.4",
     "@fluentui/react-shared-contexts": "^9.14.0",
-    "@fluentui/react-tabster": "^9.19.0",
+    "@fluentui/react-tabster": "^9.19.1",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.18.0",
+    "@fluentui/react-utilities": "^9.18.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },

package/lib/utils/useScrollOptionsIntoView.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { canUseDOM } from '@fluentui/react-utilities';
-export function useScrollOptionsIntoView(state) {
-    const { activeOption } = state;
-    const scrollContainerRef = React.useRef(null);
-    React.useEffect(()=>{
-        if (scrollContainerRef.current && activeOption && canUseDOM()) {
-            const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
-            if (!activeOptionElement) {
-                return;
-            }
-            const { offsetHeight, offsetTop } = activeOptionElement;
-            const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;
-            const isAbove = offsetTop < scrollTop;
-            const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-            // add a small buffer for general visual nicety
-            // it looks slightly better if the option has some space from the top/bottom while arrowing
-            const buffer = 2;
-            if (isAbove) {
-                scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
-            } else if (isBelow) {
-                scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
-            }
-        }
-    }, [
-        activeOption
-    ]);
-    return scrollContainerRef;
-}

package/lib/utils/useScrollOptionsIntoView.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"],"names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAQ,4BAA4B;AAGtD,OAAO,SAASC,yBAAyBC,KAAmB;IAC1D,MAAM,EAAEC,YAAY,EAAE,GAAGD;IACzB,MAAME,qBAAqBL,MAAMM,MAAM,CAAiB;IAExDN,MAAMO,SAAS,CAAC;QACd,IAAIF,mBAAmBG,OAAO,IAAIJ,gBAAgBH,aAAa;YAC7D,MAAMQ,sBAAsBJ,mBAAmBG,OAAO,CAACE,aAAa,CAAC,CAAC,CAAC,EAAEN,aAAaO,EAAE,CAAC,CAAC;YAE1F,IAAI,CAACF,qBAAqB;gBACxB;YACF;YAEA,MAAM,EAAEG,YAAY,EAAEC,SAAS,EAAE,GAAGJ;YACpC,MAAM,EAAEG,cAAcE,kBAAkB,EAAEC,SAAS,EAAE,GAAGV,mBAAmBG,OAAO;YAElF,MAAMQ,UAAUH,YAAYE;YAC5B,MAAME,UAAUJ,YAAYD,eAAeG,YAAYD;YAEvD,+CAA+C;YAC/C,2FAA2F;YAC3F,MAAMI,SAAS;YAEf,IAAIF,SAAS;gBACXX,mBAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,YAAYK;YACrD,OAAO,IAAID,SAAS;gBAClBZ,mBAAmBG,OAAO,CAACW,QAAQ,CAAC,GAAGN,YAAYC,qBAAqBF,eAAeM;YACzF;QACF;IACF,GAAG;QAACd;KAAa;IAEjB,OAAOC;AACT"}

package/lib-commonjs/utils/useScrollOptionsIntoView.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useScrollOptionsIntoView", {
-    enumerable: true,
-    get: function() {
-        return useScrollOptionsIntoView;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactutilities = require("@fluentui/react-utilities");
-function useScrollOptionsIntoView(state) {
-    const { activeOption } = state;
-    const scrollContainerRef = _react.useRef(null);
-    _react.useEffect(()=>{
-        if (scrollContainerRef.current && activeOption && (0, _reactutilities.canUseDOM)()) {
-            const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
-            if (!activeOptionElement) {
-                return;
-            }
-            const { offsetHeight, offsetTop } = activeOptionElement;
-            const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;
-            const isAbove = offsetTop < scrollTop;
-            const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-            // add a small buffer for general visual nicety
-            // it looks slightly better if the option has some space from the top/bottom while arrowing
-            const buffer = 2;
-            if (isAbove) {
-                scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
-            } else if (isBelow) {
-                scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
-            }
-        }
-    }, [
-        activeOption
-    ]);
-    return scrollContainerRef;
-}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["useScrollOptionsIntoView.js"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nexport function useScrollOptionsIntoView(state) {\n    const { activeOption } = state;\n    const scrollContainerRef = React.useRef(null);\n    React.useEffect(()=>{\n        if (scrollContainerRef.current && activeOption && canUseDOM()) {\n            const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);\n            if (!activeOptionElement) {\n                return;\n            }\n            const { offsetHeight, offsetTop } = activeOptionElement;\n            const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n            const isAbove = offsetTop < scrollTop;\n            const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n            // add a small buffer for general visual nicety\n            // it looks slightly better if the option has some space from the top/bottom while arrowing\n            const buffer = 2;\n            if (isAbove) {\n                scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n            } else if (isBelow) {\n                scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n            }\n        }\n    }, [\n        activeOption\n    ]);\n    return scrollContainerRef;\n}\n"],"names":["useScrollOptionsIntoView","state","activeOption","scrollContainerRef","React","useRef","useEffect","current","canUseDOM","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;iEAFO;gCACG;AACnB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,YAAY,EAAE,GAAGD;IACzB,MAAME,qBAAqBC,OAAMC,MAAM,CAAC;IACxCD,OAAME,SAAS,CAAC;QACZ,IAAIH,mBAAmBI,OAAO,IAAIL,gBAAgBM,IAAAA,yBAAS,KAAI;YAC3D,MAAMC,sBAAsBN,mBAAmBI,OAAO,CAACG,aAAa,CAAC,CAAC,CAAC,EAAER,aAAaS,EAAE,CAAC,CAAC;YAC1F,IAAI,CAACF,qBAAqB;gBACtB;YACJ;YACA,MAAM,EAAEG,YAAY,EAAEC,SAAS,EAAE,GAAGJ;YACpC,MAAM,EAAEG,cAAcE,kBAAkB,EAAEC,SAAS,EAAE,GAAGZ,mBAAmBI,OAAO;YAClF,MAAMS,UAAUH,YAAYE;YAC5B,MAAME,UAAUJ,YAAYD,eAAeG,YAAYD;YACvD,+CAA+C;YAC/C,2FAA2F;YAC3F,MAAMI,SAAS;YACf,IAAIF,SAAS;gBACTb,mBAAmBI,OAAO,CAACY,QAAQ,CAAC,GAAGN,YAAYK;YACvD,OAAO,IAAID,SAAS;gBAChBd,mBAAmBI,OAAO,CAACY,QAAQ,CAAC,GAAGN,YAAYC,qBAAqBF,eAAeM;YAC3F;QACJ;IACJ,GAAG;QACChB;KACH;IACD,OAAOC;AACX"}