@fluentui/react-combobox 9.8.0 → 9.9.1

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                value: contextValues.combobox,\n                children: [\n                    /*#__PURE__*/ _jsxs(state.button, {\n                        children: [\n                            state.button.children,\n                            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})\n                        ]\n                    }),\n                    state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                        mountNode: state.mountNode,\n                        children: /*#__PURE__*/ _jsx(state.listbox, {})\n                    }))\n                ]\n            })\n        })\n    });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","_jsxs","ComboboxContext","Provider","combobox","button","expandIcon","clearButton","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAOiBA;;;eAAAA;;;4BAP4B;6BACtB;gCACK;2BACoB;iCAChB;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGI,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;gBACpDJ,OAAON,cAAcW,QAAQ;gBAC7BP,UAAU;oBACN,WAAW,GAAGI,IAAAA,gBAAK,EAACT,MAAMa,MAAM,EAAE;wBAC9BR,UAAU;4BACNL,MAAMa,MAAM,CAACR,QAAQ;4BACrBL,MAAMc,UAAU,IAAI,WAAW,GAAGX,IAAAA,eAAI,EAACH,MAAMc,UAAU,EAAE,CAAC;yBAC7D;oBACL;oBACAd,MAAMe,WAAW,IAAI,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMe,WAAW,EAAE,CAAC;oBAC5Df,MAAMgB,OAAO,IAAKhB,CAAAA,MAAMiB,WAAW,GAAG,WAAW,GAAGd,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGb,IAAAA,eAAI,EAACe,mBAAM,EAAE;wBACrGC,WAAWnB,MAAMmB,SAAS;wBAC1Bd,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC;oBACjD,EAAC;iBACJ;YACL;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {\n                value: contextValues.listbox,\n                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                    value: contextValues.combobox,\n                    children: [\n                        /*#__PURE__*/ _jsxs(state.button, {\n                            children: [\n                                state.button.children,\n                                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})\n                            ]\n                        }),\n                        state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                            mountNode: state.mountNode,\n                            children: /*#__PURE__*/ _jsx(state.listbox, {})\n                        }))\n                    ]\n                })\n            })\n        })\n    });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","_jsxs","ComboboxContext","combobox","button","expandIcon","clearButton","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAQiBA;;;eAAAA;;;4BAR4B;6BACtB;gCACK;2BACoB;iCAChB;gCACD;AAGpB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACM,8BAAc,CAACC,QAAQ,EAAE;gBAClDH,OAAON,cAAcU,OAAO;gBAC5BN,UAAU,WAAW,GAAGO,IAAAA,gBAAK,EAACC,gCAAe,CAACH,QAAQ,EAAE;oBACpDH,OAAON,cAAca,QAAQ;oBAC7BT,UAAU;wBACN,WAAW,GAAGO,IAAAA,gBAAK,EAACZ,MAAMe,MAAM,EAAE;4BAC9BV,UAAU;gCACNL,MAAMe,MAAM,CAACV,QAAQ;gCACrBL,MAAMgB,UAAU,IAAI,WAAW,GAAGb,IAAAA,eAAI,EAACH,MAAMgB,UAAU,EAAE,CAAC;6BAC7D;wBACL;wBACAhB,MAAMiB,WAAW,IAAI,WAAW,GAAGd,IAAAA,eAAI,EAACH,MAAMiB,WAAW,EAAE,CAAC;wBAC5DjB,MAAMW,OAAO,IAAKX,CAAAA,MAAMkB,WAAW,GAAG,WAAW,GAAGf,IAAAA,eAAI,EAACH,MAAMW,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGR,IAAAA,eAAI,EAACgB,mBAAM,EAAE;4BACrGC,WAAWpB,MAAMoB,SAAS;4BAC1Bf,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMW,OAAO,EAAE,CAAC;wBACjD,EAAC;qBACJ;gBACL;YACJ;QACJ;IACJ;AACJ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useButtonTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/*\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;\n    // jump to matching option based on typing\n    const searchString = React.useRef('');\n    const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n    const moveToNextMatchingOption = (matcher, opt = {\n        startFromNext: false\n    })=>{\n        const { startFromNext } = opt;\n        const activeOptionId = activeDescendantController.active();\n        const nextInOrder = activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        }, {\n            startFrom: startFromNext ? activeDescendantController.next({\n                passive: true\n            }) : activeOptionId\n        });\n        if (nextInOrder) {\n            return nextInOrder;\n        }\n        // Cycle back to first match\n        return activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        });\n    };\n    const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{\n        if (moveToNextMatchingOption((optionText)=>{\n            return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        }, {\n            // Slowly pressing the same key will cycle through options\n            startFromNext: searchString.current.length === 1\n        })) {\n            return;\n        }\n        // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n        if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{\n            return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        }, {\n            // if the search is all the same letter, cycle through options starting with that letter\n            startFromNext: true\n        })) {\n            return;\n        }\n        activeDescendantController.blur();\n    };\n    const onTriggerKeyDown = (ev)=>{\n        // clear timeout, if it exists\n        clearKeyTimeout();\n        // if the key was a char key, update search string\n        if (getDropdownActionFromKey(ev) === 'Type') {\n            // update search string\n            searchString.current += ev.key.toLowerCase();\n            setKeyTimeout(()=>{\n                searchString.current = '';\n            }, 500);\n            // update state\n            !open && setOpen(ev, true);\n            moveToNextMatchingOptionWithSameCharacterHandling();\n        }\n    };\n    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'button',\n        activeDescendantController\n    });\n    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n    return trigger;\n}\n/**\n * @returns - whether every character in the string is the same\n */ function allCharactersSame(str) {\n    for(let i = 1; i < str.length; i++){\n        if (str[i] !== str[i - 1]) {\n            return false;\n        }\n    }\n    return true;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","getDropdownActionFromKey","key","toLowerCase","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks","str","i"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACoB;gCACZ;oCACU;AAK9B,SAASA,qBAAqBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IACnE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAC9F,0CAA0C;IAC1C,MAAMO,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAU;IACnD,MAAMC,2BAA2B,CAACC,SAASC,MAAM;QAC7CC,eAAe;IACnB,CAAC;QACG,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBX,2BAA2BY,MAAM;QACxD,MAAMC,cAAcb,2BAA2Bc,IAAI,CAAC,CAACC;YACjD,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QAC1C,GAAG;YACCC,WAAWR,gBAAgBV,2BAA2BmB,IAAI,CAAC;gBACvDC,SAAS;YACb,KAAKT;QACT;QACA,IAAIE,aAAa;YACb,OAAOA;QACX;QACA,4BAA4B;QAC5B,OAAOb,2BAA2Bc,IAAI,CAAC,CAACC;YACpC,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QAC1C;IACJ;IACA,MAAMI,oDAAoD;QACtD,IAAId,yBAAyB,CAACe;YAC1B,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,MAAM;QAC5E,GAAG;YACC,0DAA0D;YAC1Df,eAAeT,aAAawB,OAAO,CAACC,MAAM,KAAK;QACnD,IAAI;YACA;QACJ;QACA,yFAAyF;QACzF,IAAIC,kBAAkB1B,aAAawB,OAAO,KAAKlB,yBAAyB,CAACe;YACrE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,CAAC,EAAE,MAAM;QAC/E,GAAG;YACC,wFAAwF;YACxFf,eAAe;QACnB,IAAI;YACA;QACJ;QACAV,2BAA2B4B,IAAI;IACnC;IACA,MAAMC,mBAAmB,CAACC;QACtB,8BAA8B;QAC9BzB;QACA,kDAAkD;QAClD,IAAI0B,IAAAA,4CAAwB,EAACD,QAAQ,QAAQ;YACzC,uBAAuB;YACvB7B,aAAawB,OAAO,IAAIK,GAAGE,GAAG,CAACC,WAAW;YAC1C7B,cAAc;gBACVH,aAAawB,OAAO,GAAG;YAC3B,GAAG;YACH,eAAe;YACf,CAAC7B,QAAQC,QAAQiC,IAAI;YACrBT;QACJ;IACJ;IACA,MAAMa,UAAUC,IAAAA,8BAAc,EAAC3C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBI;QACAqC,aAAa;QACbpC;IACJ;IACAkC,QAAQG,SAAS,GAAGC,IAAAA,8BAAc,EAACT,kBAAkBK,QAAQG,SAAS;IACtE,OAAOH;AACX;AACA;;CAEC,GAAG,SAASP,kBAAkBY,GAAG;IAC9B,IAAI,IAAIC,IAAI,GAAGA,IAAID,IAAIb,MAAM,EAAEc,IAAI;QAC/B,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACvB,OAAO;QACX;IACJ;IACA,OAAO;AACX"}
+{"version":3,"sources":["useButtonTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n/**\n * @internal\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;\n    // jump to matching option based on typing\n    const searchString = React.useRef('');\n    const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n    const moveToNextMatchingOption = (matcher, opt = {\n        startFromNext: false\n    })=>{\n        const { startFromNext } = opt;\n        const activeOptionId = activeDescendantController.active();\n        const nextInOrder = activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        }, {\n            startFrom: startFromNext ? activeDescendantController.next({\n                passive: true\n            }) : activeOptionId\n        });\n        if (nextInOrder) {\n            return nextInOrder;\n        }\n        // Cycle back to first match\n        return activeDescendantController.find((id)=>{\n            const option = getOptionById(id);\n            return !!option && matcher(option.text);\n        });\n    };\n    const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{\n        if (moveToNextMatchingOption((optionText)=>{\n            return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        }, {\n            // Slowly pressing the same key will cycle through options\n            startFromNext: searchString.current.length === 1\n        })) {\n            return;\n        }\n        // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n        if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{\n            return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        }, {\n            // if the search is all the same letter, cycle through options starting with that letter\n            startFromNext: true\n        })) {\n            return;\n        }\n        activeDescendantController.blur();\n    };\n    const onTriggerKeyDown = (ev)=>{\n        // clear timeout, if it exists\n        clearKeyTimeout();\n        // if the key was a char key, update search string\n        if (getDropdownActionFromKey(ev) === 'Type') {\n            // update search string\n            searchString.current += ev.key.toLowerCase();\n            setKeyTimeout(()=>{\n                searchString.current = '';\n            }, 500);\n            // update state\n            !open && setOpen(ev, true);\n            moveToNextMatchingOptionWithSameCharacterHandling();\n        }\n    };\n    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'button',\n        activeDescendantController\n    });\n    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n    return trigger;\n}\n/**\n * @returns - whether every character in the string is the same\n */ function allCharactersSame(str) {\n    for(let i = 1; i < str.length; i++){\n        if (str[i] !== str[i - 1]) {\n            return false;\n        }\n    }\n    return true;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","getDropdownActionFromKey","key","toLowerCase","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks","str","i"],"mappings":";;;;+BASoBA;;;eAAAA;;;;iEATG;gCACoB;gCACZ;oCACU;AAM9B,SAASA,qBAAqBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IACnE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAC9F,0CAA0C;IAC1C,MAAMO,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAU;IACnD,MAAMC,2BAA2B,CAACC,SAASC,MAAM;QAC7CC,eAAe;IACnB,CAAC;QACG,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBX,2BAA2BY,MAAM;QACxD,MAAMC,cAAcb,2BAA2Bc,IAAI,CAAC,CAACC;YACjD,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QAC1C,GAAG;YACCC,WAAWR,gBAAgBV,2BAA2BmB,IAAI,CAAC;gBACvDC,SAAS;YACb,KAAKT;QACT;QACA,IAAIE,aAAa;YACb,OAAOA;QACX;QACA,4BAA4B;QAC5B,OAAOb,2BAA2Bc,IAAI,CAAC,CAACC;YACpC,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QAC1C;IACJ;IACA,MAAMI,oDAAoD;QACtD,IAAId,yBAAyB,CAACe;YAC1B,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,MAAM;QAC5E,GAAG;YACC,0DAA0D;YAC1Df,eAAeT,aAAawB,OAAO,CAACC,MAAM,KAAK;QACnD,IAAI;YACA;QACJ;QACA,yFAAyF;QACzF,IAAIC,kBAAkB1B,aAAawB,OAAO,KAAKlB,yBAAyB,CAACe;YACrE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,CAAC,EAAE,MAAM;QAC/E,GAAG;YACC,wFAAwF;YACxFf,eAAe;QACnB,IAAI;YACA;QACJ;QACAV,2BAA2B4B,IAAI;IACnC;IACA,MAAMC,mBAAmB,CAACC;QACtB,8BAA8B;QAC9BzB;QACA,kDAAkD;QAClD,IAAI0B,IAAAA,4CAAwB,EAACD,QAAQ,QAAQ;YACzC,uBAAuB;YACvB7B,aAAawB,OAAO,IAAIK,GAAGE,GAAG,CAACC,WAAW;YAC1C7B,cAAc;gBACVH,aAAawB,OAAO,GAAG;YAC3B,GAAG;YACH,eAAe;YACf,CAAC7B,QAAQC,QAAQiC,IAAI;YACrBT;QACJ;IACJ;IACA,MAAMa,UAAUC,IAAAA,8BAAc,EAAC3C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBI;QACAqC,aAAa;QACbpC;IACJ;IACAkC,QAAQG,SAAS,GAAGC,IAAAA,8BAAc,EAACT,kBAAkBK,QAAQG,SAAS;IACtE,OAAOH;AACX;AACA;;CAEC,GAAG,SAASP,kBAAkBY,GAAG;IAC9B,IAAI,IAAIC,IAAI,GAAGA,IAAID,IAAIb,MAAM,EAAEc,IAAI;QAC/B,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACvB,OAAO;QACX;IACJ;IACA,OAAO;AACX"}

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

@@ -16,8 +16,8 @@ const _reactaria = require("@fluentui/react-aria");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useOptionCollection = require("../../utils/useOptionCollection");
 const _useSelection = require("../../utils/useSelection");
-const _ComboboxContext = require("../../contexts/ComboboxContext");
 const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
+const _ListboxContext = require("../../contexts/ListboxContext");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,
@@ -70,13 +70,13 @@ const useListbox_unstable = (props, ref)=>{
         }
     };
     // get state from parent combobox, if it exists
-    const hasComboboxContext = (0, _reactcontextselector.useHasParentContext)(_ComboboxContext.ComboboxContext);
-    const comboboxSelectedOptions = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.selectedOptions);
-    const comboboxSelectOption = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.selectOption);
+    const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
+    const contextSelectedOptions = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectedOptions);
+    const contextSelectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
     // without a parent combobox context, provide values directly from Listbox
-    const optionContextValues = hasComboboxContext ? {
-        selectedOptions: comboboxSelectedOptions,
-        selectOption: comboboxSelectOption,
+    const optionContextValues = hasListboxContext ? {
+        selectedOptions: contextSelectedOptions,
+        selectOption: contextSelectOption,
         ...UNSAFE_noLongerUsed
     } : {
         selectedOptions,

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

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

package/lib-commonjs/components/Option/useOption.js

@@ -11,10 +11,8 @@ Object.defineProperty(exports, "useOption_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const _reactcontextselector = require("@fluentui/react-context-selector");
 const _reactaria = require("@fluentui/react-aria");
 const _reacticons = require("@fluentui/react-icons");
-const _ComboboxContext = require("../../contexts/ComboboxContext");
 const _ListboxContext = require("../../contexts/ListboxContext");
 function getTextString(text, children) {
     if (text !== undefined) {
@@ -55,16 +53,16 @@ const useOption_unstable = (props, ref)=>{
         optionText,
         optionValue
     ]);
-    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
     // context values
-    const multiselect = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>ctx.multiselect);
-    const registerOption = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>ctx.registerOption);
-    const selected = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>{
+    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
+    const multiselect = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.multiselect);
+    const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
+    const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{
         const selectedOptions = ctx.selectedOptions;
         return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
     });
-    const selectOption = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>ctx.selectOption);
-    const setOpen = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.setOpen);
+    const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
+    const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
     // check icon
     let CheckIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkFilled, null);
     if (multiselect) {
@@ -76,14 +74,10 @@ const useOption_unstable = (props, ref)=>{
             event.preventDefault();
             return;
         }
-        // clicked option should always become active option
         activeDescendantController.focus(id);
-        // close on option click for single-select options in a combobox
-        if (!multiselect) {
-            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
-        }
         // handle selection change
         selectOption(event, optionData);
+        onOptionClick(event);
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
     };
     // register option data with context

package/lib-commonjs/components/Option/useOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    // context values\n    const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);\n    const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);\n    const selected = useContextSelector(ListboxContext, (ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);\n    const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        // clicked option should always become active option\n        activeDescendantController.focus(id);\n        // close on option click for single-select options in a combobox\n        if (!multiselect) {\n            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);\n        }\n        // handle selection change\n        selectOption(event, optionData);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useContextSelector","ListboxContext","ctx","registerOption","selected","selectedOptions","find","o","selectOption","setOpen","ComboboxContext","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    // context values\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);\n    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const selected = useListboxContext_unstable((ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        activeDescendantController.focus(id);\n        // handle selection change\n        selectOption(event, optionData);\n        onOptionClick(event);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":";;;;+BAiCiBA;;;eAAAA;;;;iEAjCM;gCAC8C;2BAC1B;4BACQ;gCACR;AAC3C,SAASC,cAAcC,IAAI,EAAEC,QAAQ;IACjC,IAAID,SAASE,WAAW;QACpB,OAAOF;IACX;IACA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBC,OAAMC,QAAQ,CAACC,OAAO,CAACN,UAAU,CAACO;QAC9B,IAAI,OAAOA,UAAU,UAAU;YAC3BL,cAAcK;QAClB,OAAO;YACHJ,oBAAoB;QACxB;IACJ;IACA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACnB,sCAAsC;QACtCK,QAAQC,IAAI,CAAC;IACjB;IACA,OAAOP;AACX;AASW,MAAML,qBAAqB,CAACa,OAAOC;IAC1C,MAAM,EAAEX,QAAQ,EAAEY,QAAQ,EAAEb,IAAI,EAAEc,KAAK,EAAE,GAAGH;IAC5C,MAAMI,YAAYV,OAAMW,MAAM,CAAC;IAC/B,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,UAAU,QAAQA,UAAU,KAAK,IAAIA,QAAQG;IACjE,uDAAuD;IACvD,MAAME,KAAKC,IAAAA,qBAAK,EAAC,iBAAiBT,MAAMQ,EAAE;IAC1C,8CAA8C;IAC9C,MAAME,aAAahB,OAAMiB,OAAO,CAAC,IAAK,CAAA;YAC9BH;YACAN;YACAb,MAAMiB;YACNH,OAAOI;QACX,CAAA,GAAI;QACJC;QACAN;QACAI;QACAC;KACH;IACD,iBAAiB;IACjB,MAAM,EAAEK,YAAYC,0BAA0B,EAAE,GAAGC,IAAAA,qCAA0B;IAC7E,MAAMC,cAAcC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,WAAW;IACrE,MAAMG,iBAAiBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,cAAc;IAC3E,MAAMC,WAAWH,IAAAA,0CAA0B,EAAC,CAACC;QACzC,MAAMG,kBAAkBH,IAAIG,eAAe;QAC3C,OAAO,CAAC,CAACb,eAAe,CAAC,CAACa,gBAAgBC,IAAI,CAAC,CAACC,IAAIA,MAAMf;IAC9D;IACA,MAAMgB,eAAeP,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACvE,MAAMC,gBAAgBR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,aAAa;IACzE,aAAa;IACb,IAAIC,YAAY,WAAW,GAAG/B,OAAMgC,aAAa,CAACC,2BAAe,EAAE;IACnE,IAAIZ,aAAa;QACbU,YAAYN,WAAW,WAAW,GAAGzB,OAAMgC,aAAa,CAACE,6BAAiB,EAAE,QAAQ;IACxF;IACA,MAAMC,UAAU,CAACC;QACb,IAAIC;QACJ,IAAI7B,UAAU;YACV4B,MAAME,cAAc;YACpB;QACJ;QACAnB,2BAA2BoB,KAAK,CAACzB;QACjC,0BAA0B;QAC1Be,aAAaO,OAAOpB;QACpBc,cAAcM;QACbC,CAAAA,iBAAiB/B,MAAM6B,OAAO,AAAD,MAAO,QAAQE,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeG,IAAI,CAAClC,OAAO8B;IACjH;IACA,oCAAoC;IACpCpC,OAAMyC,SAAS,CAAC;QACZ,IAAI3B,MAAMJ,UAAUgC,OAAO,EAAE;YACzB,OAAOlB,eAAeR,YAAYN,UAAUgC,OAAO;QACvD;IACJ,GAAG;QACC5B;QACAE;QACAQ;KACH;IACD,MAAMmB,gBAAgBtB,cAAc;QAChCuB,MAAM;QACN,gBAAgBnB;IACpB,IAAI;QACAmB,MAAM;QACN,iBAAiBnB;IACrB;IACA,OAAO;QACHoB,YAAY;YACRC,MAAM;YACNC,WAAW;QACf;QACAD,MAAME,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3C,KAAK4C,IAAAA,6BAAa,EAAC5C,KAAKG;YACxB,iBAAiBF,WAAW,SAASX;YACrCiB;YACA,GAAG6B,aAAa;YAChB,GAAGrC,KAAK;YACR6B;QACJ,IAAI;YACAiB,aAAa;QACjB;QACAL,WAAWC,oBAAI,CAACK,QAAQ,CAAC/C,MAAMyC,SAAS,EAAE;YACtCO,iBAAiB;YACjBC,cAAc;gBACV,eAAe;gBACf3D,UAAUmC;YACd;YACAqB,aAAa;QACjB;QACA5C;QACAa;QACAI;QACA,iBAAiB;QACjB+B,cAAc;QACdC,QAAQ;IACZ;AACJ"}

package/lib-commonjs/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxContext.js"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext({\n    activeOption: undefined,\n    appearance: 'outline',\n    focusVisible: false,\n    open: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    },\n    setOpen () {\n    // noop\n    },\n    size: 'medium'\n});\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAoBAC,gBAAgB;eAAhBA;;;sCAtBiB;AAEvB,MAAMD,kBAAkBE,IAAAA,mCAAa,EAAC;IACzCC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACI,OAAO,IAAIJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC,MAAM;AACV;AACO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}
+{"version":3,"sources":["ComboboxContext.js"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */ // eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext({\n    activeOption: undefined,\n    appearance: 'outline',\n    focusVisible: false,\n    open: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    },\n    setOpen () {\n    // noop\n    },\n    size: 'medium'\n});\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */ // eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"mappings":";;;;;;;;;;;IAKaA,eAAe;eAAfA;;IAyBAC,gBAAgB;eAAhBA;;;sCA9BiB;AAKvB,MAAMD,kBAAkBE,IAAAA,mCAAa,EAAC;IACzCC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACI,OAAO,IAAIJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC,MAAM;AACV;AAMO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}

package/lib-commonjs/contexts/ListboxContext.js

@@ -12,12 +12,17 @@ _export(exports, {
     ListboxContext: function() {
         return ListboxContext;
     },
+    useListboxContext_unstable: function() {
+        return useListboxContext_unstable;
+    },
     ListboxProvider: function() {
         return ListboxProvider;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const ListboxContext = (0, _reactcontextselector.createContext)({
+const listboxContextDefaultValue = {
     activeOption: undefined,
     focusVisible: false,
     multiselect: false,
@@ -25,11 +30,16 @@ const ListboxContext = (0, _reactcontextselector.createContext)({
         return ()=>undefined;
     },
     selectedOptions: [],
+    onOptionClick () {
+    // noop
+    },
     selectOption () {
     // noop
     },
     setActiveOption () {
     // noop
     }
-});
+};
+const ListboxContext = (0, _reactcontextselector.createContext)(undefined);
+const useListboxContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));
 const ListboxProvider = ListboxContext.Provider;

package/lib-commonjs/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ListboxContext.js"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext({\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    }\n});\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","ListboxProvider","createContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","Provider"],"mappings":";;;;;;;;;;;IAEaA,cAAc;eAAdA;;IAeAC,eAAe;eAAfA;;;sCAjBiB;AAEvB,MAAMD,iBAAiBE,IAAAA,mCAAa,EAAC;IACxCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACI,OAAO,IAAIH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;AACJ;AACO,MAAMT,kBAAkBD,eAAeW,QAAQ"}
+{"version":3,"sources":["ListboxContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst listboxContextDefaultValue = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    onOptionClick () {\n    // noop\n    },\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    }\n};\nexport const ListboxContext = createContext(undefined);\nexport const useListboxContext_unstable = (selector)=>useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","useListboxContext_unstable","ListboxProvider","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","onOptionClick","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"mappings":";;;;;;;;;;;IAoBaA,cAAc;eAAdA;;IACAC,0BAA0B;eAA1BA;;IACAC,eAAe;eAAfA;;;;iEAtBU;sCAC2B;AAClD,MAAMC,6BAA6B;IAC/BC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACI,OAAO,IAAIH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;AACJ;AACO,MAAMZ,iBAAiBa,IAAAA,mCAAa,EAACR;AACrC,MAAMJ,6BAA6B,CAACa,WAAWC,IAAAA,wCAAkB,EAACf,gBAAgB,CAACgB,MAAMb,0BAA0B,GAAGW,SAASE;AAC/H,MAAMd,kBAAkBF,eAAeiB,QAAQ"}

package/lib-commonjs/contexts/useComboboxContextValues.js

@@ -11,19 +11,28 @@ Object.defineProperty(exports, "useComboboxContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, activeOption: UNSAFE_activeOption, setActiveOption: UNSAFE_setActiveOption } = state;
+    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick } = state;
     const combobox = {
-        activeOption: UNSAFE_activeOption,
+        activeOption: undefined,
         appearance,
         focusVisible: false,
         open,
         registerOption,
         selectedOptions,
         selectOption,
-        setActiveOption: UNSAFE_setActiveOption,
+        setActiveOption: ()=>null,
         setOpen,
         size
     };
+    const listbox = {
+        activeOption: undefined,
+        focusVisible: false,
+        registerOption,
+        selectedOptions,
+        selectOption,
+        setActiveOption: ()=>null,
+        onOptionClick
+    };
     const activeDescendant = _react.useMemo(()=>({
             controller: activeDescendantController
         }), [
@@ -31,6 +40,7 @@ function useComboboxContextValues(state) {
     ]);
     return {
         combobox,
-        activeDescendant
+        activeDescendant,
+        listbox
     };
 }

package/lib-commonjs/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, // eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation\n    activeOption: UNSAFE_activeOption, // eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation\n    setActiveOption: UNSAFE_setActiveOption } = state;\n    const combobox = {\n        activeOption: UNSAFE_activeOption,\n        appearance,\n        focusVisible: false,\n        open,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: UNSAFE_setActiveOption,\n        setOpen,\n        size\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        combobox,\n        activeDescendant\n    };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","activeOption","UNSAFE_activeOption","setActiveOption","UNSAFE_setActiveOption","combobox","focusVisible","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAClHC,cAAcC,mBAAmB,EACjCC,iBAAiBC,sBAAsB,EAAE,GAAGZ;IAC5C,MAAMa,WAAW;QACbJ,cAAcC;QACdT;QACAa,cAAc;QACdZ;QACAC;QACAC;QACAC;QACAM,iBAAiBC;QACjBN;QACAC;IACJ;IACA,MAAMQ,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYV;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHK;QACAE;IACJ;AACJ"}
+{"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick } = state;\n    const combobox = {\n        activeOption: undefined,\n        appearance,\n        focusVisible: false,\n        open,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        setOpen,\n        size\n    };\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        onOptionClick\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        combobox,\n        activeDescendant,\n        listbox\n    };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAAEC,aAAa,EAAE,GAAGT;IACtI,MAAMU,WAAW;QACbC,cAAcC;QACdX;QACAY,cAAc;QACdX;QACAC;QACAC;QACAC;QACAS,iBAAiB,IAAI;QACrBR;QACAC;IACJ;IACA,MAAMQ,UAAU;QACZJ,cAAcC;QACdC,cAAc;QACdV;QACAC;QACAC;QACAS,iBAAiB,IAAI;QACrBL;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYX;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHE;QACAM;QACAD;IACJ;AACJ"}

package/lib-commonjs/contexts/useListboxContextValues.js

@@ -11,13 +11,14 @@ Object.defineProperty(exports, "useListboxContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const _ComboboxContext = require("./ComboboxContext");
+const _ListboxContext = require("./ListboxContext");
 function useListboxContextValues(state) {
-    const hasComboboxContext = (0, _reactcontextselector.useHasParentContext)(_ComboboxContext.ComboboxContext);
+    const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
     const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
     // get register/unregister functions from parent combobox context
-    const comboboxRegisterOption = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.registerOption);
-    const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;
+    const parentRegisterOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
+    const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
+    const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
@@ -25,7 +26,8 @@ function useListboxContextValues(state) {
         registerOption: registerOptionValue,
         selectedOptions,
         selectOption,
-        setActiveOption: ()=>undefined
+        setActiveOption: ()=>undefined,
+        onOptionClick
     };
     const activeDescendant = _react.useMemo(()=>({
             controller: activeDescendantController

package/lib-commonjs/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ComboboxContext } from './ComboboxContext';\nexport function useListboxContextValues(state) {\n    const hasComboboxContext = useHasParentContext(ComboboxContext);\n    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n    // get register/unregister functions from parent combobox context\n    const comboboxRegisterOption = useContextSelector(ComboboxContext, (ctx)=>ctx.registerOption);\n    const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        multiselect,\n        registerOption: registerOptionValue,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>undefined\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        listbox,\n        activeDescendant\n    };\n}\n"],"names":["useListboxContextValues","state","hasComboboxContext","useHasParentContext","ComboboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","comboboxRegisterOption","useContextSelector","ctx","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACiC;iCACxB;AACzB,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,qBAAqBC,IAAAA,yCAAmB,EAACC,gCAAe;IAC9D,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGR;IACnG,iEAAiE;IACjE,MAAMS,yBAAyBC,IAAAA,wCAAkB,EAACP,gCAAe,EAAE,CAACQ,MAAMA,IAAIN,cAAc;IAC5F,MAAMO,sBAAsBX,qBAAqBQ,yBAAyBJ;IAC1E,MAAMQ,UAAU;QACZC,cAAcC;QACdC,cAAc;QACdZ;QACAC,gBAAgBO;QAChBN;QACAC;QACAU,iBAAiB,IAAIF;IACzB;IACA,MAAMG,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYb;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHK;QACAK;IACJ;AACJ"}
+{"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\nexport function useListboxContextValues(state) {\n    const hasListboxContext = useHasParentContext(ListboxContext);\n    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n    // get register/unregister functions from parent combobox context\n    const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        multiselect,\n        registerOption: registerOptionValue,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>undefined,\n        onOptionClick\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        listbox,\n        activeDescendant\n    };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACa;gCACuB;AACpD,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGR;IACnG,iEAAiE;IACjE,MAAMS,uBAAuBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACzE,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IACvE,MAAMS,UAAU;QACZC,cAAcC;QACdC,cAAc;QACdb;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAIF;QACrBJ;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYd;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHM;QACAK;IACJ;AACJ"}

package/lib-commonjs/hooks/useComboboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxFilter.js"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\nfunction defaultFilter(optionText, query) {\n    if (query === '') {\n        return true;\n    }\n    return optionText.toLowerCase().includes(query.toLowerCase());\n}\nfunction defaultToString(option) {\n    return typeof option === 'string' ? option : option.value;\n}\nexport function useComboboxFilter(query, options, config) {\n    const { filter = defaultFilter, noOptionsMessage = \"We couldn't find any matches.\", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{\n        if (typeof option === 'string') {\n            return /*#__PURE__*/ React.createElement(Option, {\n                key: option\n            }, option);\n        }\n        return /*#__PURE__*/ React.createElement(Option, {\n            ...option,\n            key: optionToReactKey(option),\n            text: optionToText(option),\n            value: option.value\n        }, option.children);\n    } } = config;\n    const filteredOptions = React.useMemo(()=>{\n        const searchValue = query.trim();\n        return options.filter((option)=>filter(optionToText(option), searchValue));\n    }, [\n        options,\n        optionToText,\n        filter,\n        query\n    ]);\n    if (filteredOptions.length === 0) {\n        return [\n            /*#__PURE__*/ React.createElement(Option, {\n                \"aria-disabled\": \"true\",\n                key: \"no-results\",\n                text: \"\"\n            }, noOptionsMessage)\n        ];\n    }\n    return filteredOptions.map((option)=>renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","map"],"mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;wBACA;AACvB,SAASC,cAAcC,UAAU,EAAEC,KAAK;IACpC,IAAIA,UAAU,IAAI;QACd,OAAO;IACX;IACA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC9D;AACA,SAASE,gBAAgBC,MAAM;IAC3B,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC7D;AACO,SAASR,kBAAkBG,KAAK,EAAEM,OAAO,EAAEC,MAAM;IACpD,MAAM,EAAEC,SAASV,aAAa,EAAEW,mBAAmB,+BAA+B,EAAEC,mBAAmBP,eAAe,EAAEQ,eAAeR,eAAe,EAAES,eAAe,CAACR;QACpK,IAAI,OAAOA,WAAW,UAAU;YAC5B,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;gBAC7CC,KAAKZ;YACT,GAAGA;QACP;QACA,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;YAC7C,GAAGX,MAAM;YACTY,KAAKN,iBAAiBN;YACtBa,MAAMN,aAAaP;YACnBC,OAAOD,OAAOC,KAAK;QACvB,GAAGD,OAAOc,QAAQ;IACtB,CAAC,EAAE,GAAGX;IACN,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QAClC,MAAMC,cAAcrB,MAAMsB,IAAI;QAC9B,OAAOhB,QAAQE,MAAM,CAAC,CAACJ,SAASI,OAAOG,aAAaP,SAASiB;IACjE,GAAG;QACCf;QACAK;QACAH;QACAR;KACH;IACD,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAC9B,OAAO;YACH,WAAW,GAAGV,OAAMC,aAAa,CAACC,cAAM,EAAE;gBACtC,iBAAiB;gBACjBC,KAAK;gBACLC,MAAM;YACV,GAAGR;SACN;IACL;IACA,OAAOU,gBAAgBK,GAAG,CAAC,CAACpB,SAASQ,aAAaR;AACtD"}
+{"version":3,"sources":["useComboboxFilter.js"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\nfunction defaultFilter(optionText, query) {\n    if (query === '') {\n        return true;\n    }\n    return optionText.toLowerCase().includes(query.toLowerCase());\n}\nfunction defaultToString(option) {\n    return typeof option === 'string' ? option : option.value;\n}\n/**\n * @internal\n */ export function useComboboxFilter(query, options, config) {\n    const { filter = defaultFilter, noOptionsMessage = \"We couldn't find any matches.\", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{\n        if (typeof option === 'string') {\n            return /*#__PURE__*/ React.createElement(Option, {\n                key: option\n            }, option);\n        }\n        return /*#__PURE__*/ React.createElement(Option, {\n            ...option,\n            key: optionToReactKey(option),\n            text: optionToText(option),\n            value: option.value\n        }, option.children);\n    } } = config;\n    const filteredOptions = React.useMemo(()=>{\n        const searchValue = query.trim();\n        return options.filter((option)=>filter(optionToText(option), searchValue));\n    }, [\n        options,\n        optionToText,\n        filter,\n        query\n    ]);\n    if (filteredOptions.length === 0) {\n        return [\n            /*#__PURE__*/ React.createElement(Option, {\n                \"aria-disabled\": \"true\",\n                key: \"no-results\",\n                text: \"\"\n            }, noOptionsMessage)\n        ];\n    }\n    return filteredOptions.map((option)=>renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","map"],"mappings":";;;;+BAaoBA;;;eAAAA;;;;iEAbG;wBACA;AACvB,SAASC,cAAcC,UAAU,EAAEC,KAAK;IACpC,IAAIA,UAAU,IAAI;QACd,OAAO;IACX;IACA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC9D;AACA,SAASE,gBAAgBC,MAAM;IAC3B,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC7D;AAGW,SAASR,kBAAkBG,KAAK,EAAEM,OAAO,EAAEC,MAAM;IACxD,MAAM,EAAEC,SAASV,aAAa,EAAEW,mBAAmB,+BAA+B,EAAEC,mBAAmBP,eAAe,EAAEQ,eAAeR,eAAe,EAAES,eAAe,CAACR;QACpK,IAAI,OAAOA,WAAW,UAAU;YAC5B,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;gBAC7CC,KAAKZ;YACT,GAAGA;QACP;QACA,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;YAC7C,GAAGX,MAAM;YACTY,KAAKN,iBAAiBN;YACtBa,MAAMN,aAAaP;YACnBC,OAAOD,OAAOC,KAAK;QACvB,GAAGD,OAAOc,QAAQ;IACtB,CAAC,EAAE,GAAGX;IACN,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QAClC,MAAMC,cAAcrB,MAAMsB,IAAI;QAC9B,OAAOhB,QAAQE,MAAM,CAAC,CAACJ,SAASI,OAAOG,aAAaP,SAASiB;IACjE,GAAG;QACCf;QACAK;QACAH;QACAR;KACH;IACD,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAC9B,OAAO;YACH,WAAW,GAAGV,OAAMC,aAAa,CAACC,cAAM,EAAE;gBACtC,iBAAiB;gBACjBC,KAAK;gBACLC,MAAM;YACV,GAAGR;SACN;IACL;IACA,OAAOU,gBAAgBK,GAAG,CAAC,CAACpB,SAASQ,aAAaR;AACtD"}

package/lib-commonjs/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line deprecation/deprecation
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -15,6 +16,9 @@ _export(exports, {
     ListboxProvider: function() {
         return _ListboxContext.ListboxProvider;
     },
+    useListboxContext_unstable: function() {
+        return _ListboxContext.useListboxContext_unstable;
+    },
     useComboboxContextValues: function() {
         return _useComboboxContextValues.useComboboxContextValues;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';\nexport { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';\nexport { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';\nexport { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';\nexport { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n"],"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter"],"mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,iCAAgB;;IAChBC,eAAe;eAAfA,+BAAe;;IACfC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,uBAAuB;eAAvBA,gDAAuB;;IACvBC,OAAO;eAAPA,gBAAO;;IAAEC,iBAAiB;eAAjBA,0BAAiB;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAClGC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC7FC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;IACtHC,iBAAiB;eAAjBA,oCAAiB;;;iCATO;gCACD;0CACS;yCACD;yBAC2E;wBACL;0BACU;0BACA;6BACe;mCACrG"}
+{"version":3,"sources":["index.js"],"sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';\nexport { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';\nexport { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';\nexport { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';\nexport { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter"],"mappings":"AAAA,mDAAmD;;;;;;;;;;;;IAC1CA,gBAAgB;eAAhBA,iCAAgB;;IAChBC,eAAe;eAAfA,+BAAe;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IAC3CC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,uBAAuB;eAAvBA,gDAAuB;;IACvBC,OAAO;eAAPA,gBAAO;;IAAEC,iBAAiB;eAAjBA,0BAAiB;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAClGC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC7FC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;IACtHC,iBAAiB;eAAjBA,oCAAiB;;;iCATO;gCAC2B;0CACnB;yCACD;yBAC2E;wBACL;0BACU;0BACA;6BACe;mCACrG"}

package/lib-commonjs/utils/useComboboxBaseState.js

@@ -142,11 +142,11 @@ const useComboboxBaseState = (props)=>{
         appearance,
         clearable,
         focusVisible,
-        hasFocus,
         ignoreNextBlur,
         inlinePopup,
         mountNode,
         open,
+        hasFocus,
         setActiveOption: UNSAFE_setActiveOption,
         setFocusVisible,
         setHasFocus,
@@ -154,6 +154,11 @@ const useComboboxBaseState = (props)=>{
         setValue,
         size,
         value,
-        multiselect
+        multiselect,
+        onOptionClick: (0, _reactutilities.useEventCallback)((e)=>{
+            if (!multiselect) {
+                setOpen(e, false);
+            }
+        })
     };
 };

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', 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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"}
+{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * @internal\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        ignoreNextBlur,\n        inlinePopup,\n        mountNode,\n        open,\n        hasFocus,\n        setActiveOption: UNSAFE_setActiveOption,\n        setFocusVisible,\n        setHasFocus,\n        setOpen,\n        setValue,\n        size,\n        value,\n        multiselect,\n        onOptionClick: useEventCallback((e)=>{\n            if (!multiselect) {\n                setOpen(e, false);\n            }\n        })\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","onOptionClick","useEventCallback","e"],"mappings":"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"}