@fluentui/react-combobox 9.11.8 → 9.13.0

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';\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"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","_jsxs","ComboboxContext","combobox","button","children","expandIcon","clearButton","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;6BAEuB;gCAEK;2BACoB;iCAChB;gCAED;AAKxB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,8BAAAA,CAAeC,QAAQ,EAAA;gBAACH,OAAOL,cAAcS,OAAO;0BAEnD,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBH,QAAQ,EAAA;oBAACH,OAAOL,cAAcY,QAAQ;;sCACrDF,IAAAA,gBAAA,EAACX,MAAMc,MAAM,EAAA;;gCACVd,MAAMc,MAAM,CAACC,QAAQ;gCACrBf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;;;wBAEvChB,MAAMiB,WAAW,IAAA,WAAA,GAAId,IAAAA,eAAA,EAACH,MAAMiB,WAAW,EAAA,CAAA;wBACvCjB,MAAMU,OAAO,IACXV,CAAAA,MAAMkB,WAAW,GAAA,WAAA,GAChBf,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdP,IAAAA,eAAA,EAACgB,mBAAAA,EAAAA;4BAAOC,WAAWpB,MAAMoB,SAAS;sCAChC,WAAA,GAAAjB,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA;;;;;;;AAShC"}

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

@@ -14,6 +14,7 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useTriggerSlot = require("../../utils/useTriggerSlot");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 function useButtonTriggerSlot(triggerFromProps, ref, options) {
+    'use no memo';
     const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
     // jump to matching option based on typing
     const searchString = _react.useRef('');
@@ -70,9 +71,11 @@ function useButtonTriggerSlot(triggerFromProps, ref, options) {
             setKeyTimeout(()=>{
                 searchString.current = '';
             }, 500);
+            if (open) {
+                moveToNextMatchingOptionWithSameCharacterHandling();
+            }
             // update state
             !open && setOpen(ev, true);
-            moveToNextMatchingOptionWithSameCharacterHandling();
         }
     };
     const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {

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 * @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"}
+{"version":3,"sources":["useButtonTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\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 */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  'use no memo';\n\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\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\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\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\n      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\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\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBgBA;;;eAAAA;;;;iEAnBO;gCACoB;gCAGS;oCACX;AAclC,SAASA,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC;IAEA,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAAA;IAEzC,MAAMC,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBX,2BAA2BY,MAAM;QAExD,MAAMC,cAAcb,2BAA2Bc,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBV,2BAA2BmB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOb,2BAA2Bc,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAASlB,cAAciB;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeT,aAAawB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkB1B,aAAawB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACvB,aAAawB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAV,2BAA2B4B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BzB;QAEA,kDAAkD;QAClD,IAAI0B,IAAAA,4CAAAA,EAAyBD,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB7B,aAAawB,OAAO,IAAIK,GAAGE,GAAG,CAACC,WAAW;YAC1C7B,cAAc;gBACZH,aAAawB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI7B,MAAM;gBACRyB;YACF;YAEA,eAAe;YACf,CAACzB,QAAQC,QAAQiC,IAAI;QACvB;IACF;IAEA,MAAMI,UAAUC,IAAAA,8BAAAA,EAAe3C,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAqC,aAAa;QACbpC;IACF;IACAkC,QAAQG,SAAS,GAAGC,IAAAA,8BAAAA,EAAeT,kBAAkBK,QAAQG,SAAS;IAEtE,OAAOH;AACT;AAEA;;CAEC,GACD,SAASP,kBAAkBY,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIb,MAAM,EAAEc,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}

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

@@ -13,6 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
 const _reactaria = require("@fluentui/react-aria");
 const _reacticons = require("@fluentui/react-icons");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _reactutilities = require("@fluentui/react-utilities");
 const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
 const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
@@ -21,6 +22,7 @@ const _useListboxSlot = require("../../utils/useListboxSlot");
 const _useButtonTriggerSlot = require("./useButtonTriggerSlot");
 const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
 const useDropdown_unstable = (props, ref)=>{
+    'use no memo';
     var _state_clearButton;
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props, {
@@ -35,7 +37,7 @@ const useDropdown_unstable = (props, ref)=>{
         activeDescendantController,
         freeform: false
     });
-    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;
+    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
         props,
         primarySlotTagName: 'button',
@@ -52,6 +54,17 @@ const useDropdown_unstable = (props, ref)=>{
             children: props.children
         }
     });
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    (0, _reactutilities.useOnClickOutside)({
+        element: targetDocument,
+        callback: (event)=>setOpen(event, false),
+        refs: [
+            triggerRef,
+            comboboxPopupRef,
+            comboboxTargetRef
+        ],
+        disabled: !open
+    });
     var _props_button;
     const trigger = (0, _useButtonTriggerSlot.useButtonTriggerSlot)((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
         state: baseState,

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

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

package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js

@@ -37,6 +37,7 @@ const dropdownClassNames = {
         mc9l5x: "ftuwxu6",
         Bf4jedk: "f1exfvgq",
         qhf8xq: "f10pi13n",
+        ha4doy: "fmrv4ls",
         Bbr2w1p: "f14a1fxs",
         Bduesf4: "f3e99gv",
         Bpq79vn: "fhljsf7",
@@ -331,6 +332,7 @@ const dropdownClassNames = {
         ".ftuwxu6{display:inline-flex;}",
         ".f1exfvgq{min-width:250px;}",
         ".f10pi13n{position:relative;}",
+        ".fmrv4ls{vertical-align:middle;}",
         ".f1gw3sf2::after{box-sizing:border-box;}",
         ".f13zj6fq::after{content:\"\";}",
         ".f1mdlcz9::after{position:absolute;}",
@@ -614,6 +616,7 @@ const useBaseClearButtonStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rticfuj
     ]
 });
 const useDropdownStyles_unstable = (state)=>{
+    'use no memo';
     const { appearance, open, placeholderVisible, showClearButton, size } = state;
     const invalid = `${state.button['aria-invalid']}` === 'true';
     const disabled = state.button.disabled;

package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  clearButton: 'fui-Dropdown__clearButton',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"ftuwxu6\",\n    Bf4jedk: \"f1exfvgq\",\n    qhf8xq: \"f10pi13n\",\n    Bbr2w1p: \"f14a1fxs\",\n    Bduesf4: \"f3e99gv\",\n    Bpq79vn: \"fhljsf7\",\n    li1rpt: \"f1gw3sf2\",\n    Bsft5z2: \"f13zj6fq\",\n    E3zdtr: \"f1mdlcz9\",\n    Eqx8gd: [\"f1a7op3\", \"f1cjjd47\"],\n    By385i5: \"f1gboi2j\",\n    B1piin3: [\"f1cjjd47\", \"f1a7op3\"],\n    Dlnsje: \"ffyw7fx\",\n    d9w3h3: [\"f1kp91vd\", \"f1ibwz09\"],\n    B3778ie: [\"f1ibwz09\", \"f1kp91vd\"],\n    B1q35kw: 0,\n    Bw17bha: 0,\n    Bcgy8vk: 0,\n    Bjuhk93: \"f1mnjydx\",\n    Gjdm7m: \"f13evtba\",\n    b1kco5: \"f1yk9hq\",\n    Ba2ppi3: \"fhwpy7i\",\n    F2fol1: \"f14ee0xe\",\n    lck23g: \"f1xhbsuh\",\n    df92cz: \"fv8e3ye\",\n    I188md: \"ftb5wc6\",\n    umuwi5: \"fjw5xc1\",\n    Blcqepd: \"f1xdyd5c\",\n    nplu4u: \"fatpbeo\",\n    Bioka5o: \"fb7uyps\",\n    H713fs: \"f1cmft4k\",\n    B9ooomg: \"f1x58t8o\",\n    Bercvud: \"f1ibeo51\",\n    Bz04dq9: \"f132nw8t\",\n    Budl3uf: \"f1htdosj\"\n  },\n  listbox: {\n    B7ck84d: \"f1ewtqcl\",\n    E5pizo: \"f1hg901r\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    Bxyxcbc: \"fmmk62d\"\n  },\n  listboxCollapsed: {\n    mc9l5x: \"fjseox\"\n  },\n  inlineListbox: {\n    Bj3rh1h: \"f19g0ac\"\n  },\n  button: {\n    Bt984gj: \"f122n59\",\n    De3pzq: \"f1c21dwh\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f3bhgqh\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f19n0e5\",\n    i8kkvl: \"f14mj54c\",\n    Bceei9c: \"f1k6fduh\",\n    mc9l5x: \"f13qh94s\",\n    Bahqtrf: \"fk6fouc\",\n    Budl1dq: \"f12nh0o2\",\n    Brf1p80: \"f1869bpl\",\n    fsow6f: [\"f1o700av\", \"fes3tcz\"],\n    a9b677: \"fly5x3f\",\n    Brovlpu: \"ftqa4ok\"\n  },\n  placeholder: {\n    sj55zd: \"fxc4j92\"\n  },\n  small: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"fye6m5k\", \"f3cq2dl\"]\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f14ev680\", \"f58uxzw\"]\n  },\n  large: {\n    i8kkvl: \"f1rjii52\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"faaz57k\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"f139mn7i\", \"f1v3q0m\"]\n  },\n  outline: {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: \"f1c1zstj\",\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fhz96rm\"\n  },\n  outlineInteractive: {\n    Bgoe8wy: \"fvcxoqz\",\n    Bwzppfd: [\"f1ub3y4t\", \"f1m52nbi\"],\n    oetu4i: \"flmw63s\",\n    gg5e9n: [\"f1m52nbi\", \"f1ub3y4t\"],\n    B6oc9vd: \"fvs00aa\",\n    ak43y8: [\"f1assf6x\", \"f4ruux4\"],\n    wmxk5l: \"fqhmt4z\",\n    B50zh58: [\"f4ruux4\", \"f1assf6x\"]\n  },\n  underline: {\n    De3pzq: \"f1c21dwh\",\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    Bgfg5da: \"f9ez7ne\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"fokr779\"\n  },\n  \"filled-lighter\": {\n    De3pzq: \"fxugw4r\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fs2rfia\"\n  },\n  \"filled-darker\": {\n    De3pzq: \"f16xq7d1\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"fs2rfia\"\n  },\n  invalid: {\n    tvckwq: \"fs4k3qj\",\n    gk2u95: [\"fcee079\", \"fmyw78r\"],\n    hhx65j: \"f1fgmyf4\",\n    Bxowmz0: [\"fmyw78r\", \"fcee079\"]\n  },\n  invalidUnderline: {\n    hhx65j: \"f1fgmyf4\"\n  },\n  disabled: {\n    Bceei9c: \"fdrzuqr\",\n    De3pzq: \"f1c21dwh\",\n    g2u3we: \"f1jj8ep1\",\n    h3c5rm: [\"f15xbau\", \"fy0fskl\"],\n    B9xav0g: \"f4ikngz\",\n    zhjwy3: [\"fy0fskl\", \"f15xbau\"],\n    Bjwas2f: \"fg455y9\",\n    Bn1d65q: [\"f1rvyvqg\", \"f14g86mu\"],\n    Bxeuatn: \"f1cwzwz\",\n    n51gp8: [\"f14g86mu\", \"f1rvyvqg\"]\n  },\n  disabledText: {\n    sj55zd: \"f1s2aq7o\",\n    Bceei9c: \"fdrzuqr\"\n  },\n  hidden: {\n    mc9l5x: \"fjseox\"\n  }\n}, {\n  d: [[\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".f1ewtqcl{box-sizing:border-box;}\", \".ftuwxu6{display:inline-flex;}\", \".f1exfvgq{min-width:250px;}\", \".f10pi13n{position:relative;}\", \".f1gw3sf2::after{box-sizing:border-box;}\", \".f13zj6fq::after{content:\\\"\\\";}\", \".f1mdlcz9::after{position:absolute;}\", \".f1a7op3::after{left:-1px;}\", \".f1cjjd47::after{right:-1px;}\", \".f1gboi2j::after{bottom:-1px;}\", \".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}\", \".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}\", [\".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}\", {\n    p: -1\n  }], \".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}\", \".f1yk9hq::after{transform:scaleX(0);}\", \".fhwpy7i::after{transition-property:transform;}\", \".f14ee0xe::after{transition-duration:var(--durationUltraFast);}\", \".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}\", \".f1hg901r{box-shadow:var(--shadow16);}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".fmmk62d{max-height:80vh;}\", \".fjseox{display:none;}\", \".f19g0ac{z-index:1;}\", \".f122n59{align-items:center;}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", [\".f3bhgqh{border:none;}\", {\n    p: -2\n  }], \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f14mj54c{column-gap:var(--spacingHorizontalXXS);}\", \".f1k6fduh{cursor:pointer;}\", \".f13qh94s{display:grid;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}\", \".f1869bpl{justify-content:space-between;}\", \".f1o700av{text-align:left;}\", \".fes3tcz{text-align:right;}\", \".fly5x3f{width:100%;}\", \".fxc4j92{color:var(--colorNeutralForeground4);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", [\".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}\", {\n    p: -1\n  }], [\".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }], \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", [\".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}\", {\n    p: -1\n  }], [\".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}\", {\n    p: -1\n  }], \".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", [\".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}\", {\n    p: -1\n  }], [\".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}\", {\n    p: -1\n  }], \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", [\".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}\", {\n    p: -2\n  }], \".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}\", [\".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}\", {\n    p: -1\n  }], [\".fokr779{border-radius:0;}\", {\n    p: -1\n  }], [\".fs2rfia{border:var(--strokeWidthThin) solid transparent;}\", {\n    p: -2\n  }], \".f16xq7d1{background-color:var(--colorNeutralBackground3);}\", [\".fs2rfia{border:var(--strokeWidthThin) solid transparent;}\", {\n    p: -2\n  }], \".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}\", \".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}\", \".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}\", \".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}\", \".fdrzuqr{cursor:not-allowed;}\", \".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\"],\n  w: [\".f14a1fxs:focus-within{outline-width:2px;}\", \".f3e99gv:focus-within{outline-style:solid;}\", \".fhljsf7:focus-within{outline-color:transparent;}\", \".fjw5xc1:focus-within::after{transform:scaleX(1);}\", \".f1xdyd5c:focus-within::after{transition-property:transform;}\", \".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}\", \".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}\", \".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]],\n  t: [\"@supports selector(:has(*)){.f132nw8t:has(.fui-Dropdown__clearButton:focus)::after{border-bottom-color:initial;}}\", \"@supports selector(:has(*)){.f1htdosj:has(.fui-Dropdown__clearButton:focus)::after{transform:scaleX(0);}}\"],\n  f: [\".ftqa4ok:focus{outline-style:none;}\"],\n  h: [\".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}\", \".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}\", \".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}\", \".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"],\n  a: [\".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}\", \".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}\", \".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}\", \".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}\"]\n});\nconst useIconStyles = /*#__PURE__*/__styles({\n  icon: {\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"fxkbij4\",\n    mc9l5x: \"ftgm304\",\n    Be2twd7: \"f1pp30po\",\n    Br312pm: \"f12w6cgp\",\n    Bw0ie65: \"f8bv1bt\",\n    Bo70h7d: \"fvc9v3g\"\n  },\n  small: {\n    Be2twd7: \"f4ybsrx\",\n    Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n  },\n  medium: {\n    Be2twd7: \"fe5j1ua\",\n    Frg6f3: [\"f1h9en5y\", \"f1xk557c\"]\n  },\n  large: {\n    Be2twd7: \"f1rt2boy\",\n    Frg6f3: [\"f1t5qyk5\", \"f1ikr372\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\"\n  }\n}, {\n  d: [\".f1ewtqcl{box-sizing:border-box;}\", \".fxkbij4{color:var(--colorNeutralStrokeAccessible);}\", \".ftgm304{display:block;}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".f12w6cgp{grid-column-start:icon;}\", \".f8bv1bt{grid-column-end:end;}\", \".fvc9v3g svg{display:block;}\", \".f4ybsrx{font-size:16px;}\", \".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}\", \".f1xk557c{margin-right:var(--spacingHorizontalXXS);}\", \".fe5j1ua{font-size:20px;}\", \".f1rt2boy{font-size:24px;}\", \".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}\", \".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\"]\n});\nconst useBaseClearButtonStyle = /*#__PURE__*/__resetStyles(\"rticfuj\", \"r1vp6jef\", {\n  r: [\".rticfuj{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}\", \".rticfuj:focus{outline-style:none;}\", \".rticfuj:focus-visible{outline-style:none;}\", \".rticfuj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rticfuj[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1vp6jef{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}\", \".r1vp6jef:focus{outline-style:none;}\", \".r1vp6jef:focus-visible{outline-style:none;}\", \".r1vp6jef[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1vp6jef[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media (forced-colors: active){.rticfuj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.r1vp6jef[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = state => {\n  const {\n    appearance,\n    open,\n    placeholderVisible,\n    showClearButton,\n    size\n  } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const clearButtonStyle = useBaseClearButtonStyle();\n  state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n  state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n  }\n  if (state.clearButton) {\n    state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDropdownStyles.styles.js.map"],"names":["dropdownClassNames","useDropdownStyles_unstable","root","button","clearButton","expandIcon","listbox","useStyles","__styles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","__resetStyles","r","s","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","mergeClasses","inlinePopup"],"mappings":"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"}
+{"version":3,"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    clearButton: 'fui-Dropdown__clearButton',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'inline-flex',\n        minWidth: '250px',\n        position: 'relative',\n        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@supports selector(:has(*))': {\n            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n                borderBottomColor: 'initial',\n                transform: 'scaleX(0)'\n            }\n        }\n    },\n    listbox: {\n        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        display: 'grid',\n        fontFamily: tokens.fontFamilyBase,\n        gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n        justifyContent: 'space-between',\n        textAlign: 'left',\n        width: '100%',\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        gridColumnStart: 'icon',\n        gridColumnEnd: 'end',\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n    alignSelf: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    cursor: 'pointer',\n    height: 'fit-content',\n    margin: 0,\n    marginRight: tokens.spacingHorizontalMNudge,\n    padding: 0,\n    position: 'relative',\n    ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, open, placeholderVisible, showClearButton, size } = state;\n    const invalid = `${state.button['aria-invalid']}` === 'true';\n    const disabled = state.button.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const clearButtonStyle = useBaseClearButtonStyle();\n    state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n    }\n    if (state.clearButton) {\n        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n    }\n    return state;\n};\n"],"names":["dropdownClassNames","useDropdownStyles_unstable","root","button","clearButton","expandIcon","listbox","useStyles","__styles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","__resetStyles","r","s","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","mergeClasses","inlinePopup"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */ export const Listbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useListbox_unstable(props, ref);\n    const contextValues = useListboxContextValues(state);\n    useListboxStyles_unstable(state);\n    useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n    return renderListbox_unstable(state, contextValues);\n});\nListbox.displayName = 'Listbox';\n"],"names":["Listbox","React","forwardRef","props","ref","state","useListbox_unstable","contextValues","useListboxContextValues","useListboxStyles_unstable","useCustomStyleHook_unstable","renderListbox_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;4BACa;+BACG;wCACG;yCACF;qCACI;AAGjC,MAAMA,UAAU,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC9D,MAAMC,QAAQC,IAAAA,+BAAmB,EAACH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,gDAAuB,EAACH;IAC9CI,IAAAA,iDAAyB,EAACJ;IAC1BK,IAAAA,gDAA2B,EAAC,6BAA6BL;IACzD,OAAOM,IAAAA,qCAAsB,EAACN,OAAOE;AACzC;AACAP,QAAQY,WAAW,GAAG"}
+{"version":3,"sources":["Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["Listbox","React","forwardRef","props","ref","state","useListbox_unstable","contextValues","useListboxContextValues","useListboxStyles_unstable","useCustomStyleHook_unstable","renderListbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;4BACa;+BACG;wCACG;yCAEF;qCAEI;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,gDAAAA,EAAwBH;IAE9CI,IAAAA,iDAAAA,EAA0BJ;IAE1BK,IAAAA,gDAAAA,EAA4B,6BAA6BL;IAEzD,OAAOM,IAAAA,qCAAAA,EAAuBN,OAAOE;AACvC;AAEAP,QAAQY,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /** The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n  SelectionProps & {\n    /**\n     * Disable auto-focusing on the first item when mounting.\n     *\n     * @default false\n     */\n    disableAutoFocus?: boolean;\n  };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n    standalone: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderListbox.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Listbox\n */ export const renderListbox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n        value: contextValues.activeDescendant,\n        children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {\n            value: contextValues.listbox,\n            children: /*#__PURE__*/ _jsx(state.root, {})\n        })\n    });\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ActiveDescendantContextProvider","value","activeDescendant","children","ListboxContext","Provider","listbox","root"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BANa;gCACF;2BACoB;gCACjB;AAGpB,MAAMA,yBAAyB,CAACC,OAAOC;IAC9CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,0CAA+B,EAAE;QACvDC,OAAOJ,cAAcK,gBAAgB;QACrCC,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACK,8BAAc,CAACC,QAAQ,EAAE;YAClDJ,OAAOJ,cAAcS,OAAO;YAC5BH,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACH,MAAMW,IAAI,EAAE,CAAC;QAC9C;IACJ;AACJ"}
+{"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;2BACoB;gCAEjB;AAKxB,MAAMA,yBAAyB,CAACC,OAAqBC;IAC1DC,IAAAA,2BAAAA,EAA0BF;IAE1B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0CAAAA,EAAAA;QAAgCC,OAAOJ,cAAcK,gBAAgB;kBACpE,WAAA,GAAAH,IAAAA,eAAA,EAACI,8BAAAA,CAAeC,QAAQ,EAAA;YAACH,OAAOJ,cAAcQ,OAAO;sBACnD,WAAA,GAAAN,IAAAA,eAAA,EAACH,MAAMU,IAAI,EAAA,CAAA;;;AAInB"}

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

@@ -18,6 +18,7 @@ const _useOptionCollection = require("../../utils/useOptionCollection");
 const _useSelection = require("../../utils/useSelection");
 const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
 const _ListboxContext = require("../../contexts/ListboxContext");
+const _reacttabster = require("@fluentui/react-tabster");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,
@@ -25,13 +26,18 @@ const UNSAFE_noLongerUsed = {
     setActiveOption: ()=>null
 };
 const useListbox_unstable = (props, ref)=>{
-    const { multiselect } = props;
+    'use no memo';
+    const { multiselect, disableAutoFocus = false } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
-    const { getOptionById } = optionCollection;
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = (0, _reactaria.useActiveDescendant)({
         matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
     });
+    const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
     const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
+    const contextGetOptionById = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionById);
+    const contextGetOptionsMatchingValue = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionsMatchingValue);
+    const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;
+    const getOptionsMatchingValue = hasListboxContext ? contextGetOptionsMatchingValue : optionCollection.getOptionsMatchingValue;
     const listenerRef = _react.useMemo(()=>{
         let element = null;
         const listener = (untypedEvent)=>{
@@ -50,6 +56,8 @@ const useListbox_unstable = (props, ref)=>{
     }, [
         onActiveDescendantChange
     ]);
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = _react.useState(false);
+    (0, _reacttabster.useOnKeyboardNavigationChange)(setIsNavigatingWithKeyboard);
     const activeDescendantContext = (0, _reactaria.useActiveDescendantContext)();
     const hasParentActiveDescendantContext = (0, _reactaria.useHasParentActiveDescendantContext)();
     const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
@@ -60,6 +68,18 @@ const useListbox_unstable = (props, ref)=>{
         });
         const activeOptionId = activeDescendantController.active();
         const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
+        switch(action){
+            case 'First':
+            case 'Last':
+            case 'Next':
+            case 'Previous':
+            case 'PageDown':
+            case 'PageUp':
+            case 'CloseSelect':
+            case 'Select':
+                event.preventDefault();
+                break;
+        }
         switch(action){
             case 'Next':
                 if (activeOption) {
@@ -89,33 +109,7 @@ const useListbox_unstable = (props, ref)=>{
                 break;
         }
     };
-    const onFocus = (_event)=>{
-        if (hasParentActiveDescendantContext || activeDescendantController.active()) {
-            return;
-        }
-        // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup
-        if (activeDescendantController.focusLastActive()) {
-            return;
-        }
-        // if there is a selected option, focus it and make it active
-        const selectedOptionValues = selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [];
-        const firstSelectedOption = optionCollection.getOptionsMatchingValue((value)=>selectedOptionValues.includes(value))[0];
-        if (firstSelectedOption) {
-            activeDescendantController.focus(firstSelectedOption.id);
-            return;
-        }
-        // if there is no active descendant and no selected options, set the first option as active
-        activeDescendantController.first();
-    };
-    const onBlur = (_event)=>{
-        if (hasParentActiveDescendantContext) {
-            return;
-        }
-        // blur active descendant styles on blur, in the absence of a parent context controlling the state
-        activeDescendantController.blur();
-    };
     // get state from parent combobox, if it exists
-    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
@@ -128,6 +122,50 @@ const useListbox_unstable = (props, ref)=>{
         selectOption,
         ...UNSAFE_noLongerUsed
     };
+    _react.useEffect(()=>{
+        if (!hasParentActiveDescendantContext) {
+            // disable focus-visible attributes until focus is received
+            activeDescendantController.hideFocusVisibleAttributes();
+        }
+        if (!disableAutoFocus) {
+            // if it is single-select and there is a selected option, start at the selected option
+            if (!multiselect && optionContextValues.selectedOptions.length > 0) {
+                const selectedOption = getOptionsMatchingValue((v)=>v === optionContextValues.selectedOptions[0]).pop();
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
+            } else {
+                activeDescendantController.first();
+            }
+        }
+        return ()=>{
+            activeDescendantController.blur();
+        };
+    // this should only be run once in the lifecycle of the Listbox
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onFocus = _react.useCallback(()=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        activeDescendantController.showFocusVisibleAttributes();
+        if (isNavigatingWithKeyboard) {
+            activeDescendantController.scrollActiveIntoView();
+        }
+    }, [
+        activeDescendantController,
+        hasParentActiveDescendantContext,
+        isNavigatingWithKeyboard
+    ]);
+    const onBlur = _react.useCallback(()=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        activeDescendantController.hideFocusVisibleAttributes();
+    }, [
+        activeDescendantController,
+        hasParentActiveDescendantContext
+    ]);
     const state = {
         components: {
             root: 'div'
@@ -143,6 +181,7 @@ const useListbox_unstable = (props, ref)=>{
         }), {
             elementType: 'div'
         }),
+        standalone: !hasListboxContext,
         multiselect,
         clearSelection,
         activeDescendantController,

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, 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 onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);\n    const listenerRef = React.useMemo(()=>{\n        let element = null;\n        const listener = (untypedEvent)=>{\n            // Typescript doesn't support custom event types on handler\n            const event = untypedEvent;\n            onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);\n        };\n        return (el)=>{\n            if (!el) {\n                element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);\n                return;\n            }\n            element = el;\n            element.addEventListener('activedescendantchange', listener);\n        };\n    }, [\n        onActiveDescendantChange\n    ]);\n    const activeDescendantContext = useActiveDescendantContext();\n    const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n    const activeDescendantController = hasParentActiveDescendantContext ? 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    const onFocus = (_event)=>{\n        if (hasParentActiveDescendantContext || activeDescendantController.active()) {\n            return;\n        }\n        // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup\n        if (activeDescendantController.focusLastActive()) {\n            return;\n        }\n        // if there is a selected option, focus it and make it active\n        const selectedOptionValues = selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [];\n        const firstSelectedOption = optionCollection.getOptionsMatchingValue((value)=>selectedOptionValues.includes(value))[0];\n        if (firstSelectedOption) {\n            activeDescendantController.focus(firstSelectedOption.id);\n            return;\n        }\n        // if there is no active descendant and no selected options, set the first option as active\n        activeDescendantController.first();\n    };\n    const onBlur = (_event)=>{\n        if (hasParentActiveDescendantContext) {\n            return;\n        }\n        // blur active descendant styles on blur, in the absence of a parent context controlling the state\n        activeDescendantController.blur();\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, listenerRef),\n            role: multiselect ? 'menu' : 'listbox',\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        activeDescendantController,\n        onActiveDescendantChange,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n    state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\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","onActiveDescendantChange","useListboxContext_unstable","ctx","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","next","first","prev","last","onFocus","_event","focusLastActive","selectedOptionValues","firstSelectedOption","getOptionsMatchingValue","value","includes","focus","id","onBlur","blur","hasListboxContext","useHasParentContext","ListboxContext","contextSelectedOptions","contextSelectOption","optionContextValues","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","useEventCallback","mergeCallbacks"],"mappings":"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"}
+{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\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';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\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 */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  'use no memo';\n\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\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\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    if (!hasParentActiveDescendantContext) {\n      // disable focus-visible attributes until focus is received\n      activeDescendantController.hideFocusVisibleAttributes();\n    }\n\n    if (!disableAutoFocus) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n\n      // otherwise start at the first option\n      else {\n        activeDescendantController.first();\n      }\n    }\n\n    return () => {\n      activeDescendantController.blur();\n    };\n\n    // this should only be run once in the lifecycle of the Listbox\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onFocus = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.showFocusVisibleAttributes();\n\n    if (isNavigatingWithKeyboard) {\n      activeDescendantController.scrollActiveIntoView();\n    }\n  }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n  const onBlur = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.hideFocusVisibleAttributes();\n  }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      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 as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    standalone: !hasListboxContext,\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","disableAutoFocus","optionCollection","useOptionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","hasListboxContext","useHasParentContext","ListboxContext","onActiveDescendantChange","useListboxContext_unstable","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","useOnKeyboardNavigationChange","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","standalone","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Listbox/useListboxStyles.styles.js

@@ -65,6 +65,7 @@ const listboxClassNames = {
     ]
 });
 const useListboxStyles_unstable = (state)=>{
+    'use no memo';
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
     return state;