@fluentui/react-combobox 9.7.5 → 9.9.0

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.9.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.1",
     "@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.53",
+    "@fluentui/react-field": "^9.1.55",
     "@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-shared-contexts": "^9.14.0",
-    "@fluentui/react-tabster": "^9.19.0",
+    "@fluentui/react-jsx-runtime": "^9.0.31",
+    "@fluentui/react-portal": "^9.4.15",
+    "@fluentui/react-positioning": "^9.13.5",
+    "@fluentui/react-shared-contexts": "^9.14.1",
+    "@fluentui/react-tabster": "^9.19.2",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.18.0",
+    "@fluentui/react-utilities": "^9.18.2",
     "@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"}