@fluentui/react-combobox 9.7.5 → 9.9.0

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    // context values\n    const focusVisible = useContextSelector(ListboxContext, (ctx)=>ctx.focusVisible);\n    const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);\n    const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);\n    const selected = useContextSelector(ListboxContext, (ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);\n    const setActiveOption = useContextSelector(ListboxContext, (ctx)=>ctx.setActiveOption);\n    const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);\n    // current active option?\n    const active = useContextSelector(ListboxContext, (ctx)=>{\n        var _ctx_activeOption, _ctx_activeOption1;\n        return ((_ctx_activeOption = ctx.activeOption) === null || _ctx_activeOption === void 0 ? void 0 : _ctx_activeOption.id) !== undefined && ((_ctx_activeOption1 = ctx.activeOption) === null || _ctx_activeOption1 === void 0 ? void 0 : _ctx_activeOption1.id) === id;\n    });\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        // clicked option should always become active option\n        setActiveOption(optionData);\n        // close on option click for single-select options in a combobox\n        if (!multiselect) {\n            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);\n        }\n        // handle selection change\n        selectOption(event, optionData);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        active,\n        disabled,\n        focusVisible,\n        multiselect,\n        selected\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","focusVisible","useContextSelector","ListboxContext","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","ComboboxContext","active","_ctx_activeOption","_ctx_activeOption1","activeOption","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    // context values\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);\n    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const selected = useListboxContext_unstable((ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        activeDescendantController.focus(id);\n        // handle selection change\n        selectOption(event, optionData);\n        onOptionClick(event);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

package/lib-commonjs/components/Option/useOptionStyles.styles.js

@@ -86,65 +86,65 @@ const optionClassNames = {
         ]
     },
     active: {
-        Bsft5z2: "f13zj6fq",
-        E3zdtr: "f1mdlcz9",
-        B80jsxd: "f1nwj1ja",
-        t2ki1e: "ffmd2fr",
-        Bm2nyyq: "f8rth92",
-        Barhvk9: [
-            "flthirb",
-            "ftkbnf5"
-        ],
-        Bw17bha: "f1lh990p",
-        vfts7: [
-            "ftkbnf5",
-            "flthirb"
-        ],
-        xrcqlc: "fc9v8v1",
-        Ihftqj: [
-            "f1mwfetb",
-            "f18mat8f"
-        ],
-        Bcgy8vk: "f1cb6c3",
-        Bhxzhr1: [
-            "f18mat8f",
-            "f1mwfetb"
-        ],
-        B3778ie: [
-            "f1ibwz09",
-            "f1kp91vd"
-        ],
-        d9w3h3: [
-            "f1kp91vd",
-            "f1ibwz09"
-        ],
-        Bl18szs: [
-            "f1pix4dl",
-            "f13nd1z4"
-        ],
-        B4j8arr: [
-            "f13nd1z4",
-            "f1pix4dl"
-        ],
-        B0n5ga8: "f1qw5sz7",
-        s924m2: [
-            "f19va7ni",
-            "f1a9v3mw"
-        ],
-        B1q35kw: "fkkziue",
-        Gp14am: [
-            "f1a9v3mw",
-            "f19va7ni"
-        ],
-        bn5sak: "f1a97anr",
-        By385i5: "f5226zp",
-        Eqx8gd: [
-            "fa2bdqt",
-            "fei6g0k"
-        ],
-        B1piin3: [
-            "fei6g0k",
-            "fa2bdqt"
+        Bowz1zl: "f11vrvdw",
+        oxogb1: "f17hxjb7",
+        Ix2sn8: "f1dha69c",
+        q7v32p: "f1lm7500",
+        Btq9bd3: "fuyp35s",
+        Bertapg: [
+            "f1a9nstl",
+            "fhk0hgg"
+        ],
+        b50fsz: "f1rdp6f1",
+        avt0cx: [
+            "fhk0hgg",
+            "f1a9nstl"
+        ],
+        Bqfxd14: "f1tj24la",
+        B53xpsf: [
+            "f1td3xda",
+            "f73totv"
+        ],
+        B1wzb3v: "f2ge7d1",
+        f0sref: [
+            "f73totv",
+            "f1td3xda"
+        ],
+        Bttcd12: [
+            "ftb4b3e",
+            "f1scq65d"
+        ],
+        Fffuxt: [
+            "f1scq65d",
+            "ftb4b3e"
+        ],
+        Bqougee: [
+            "f2me9eq",
+            "fgk4qqi"
+        ],
+        Beitzug: [
+            "fgk4qqi",
+            "f2me9eq"
+        ],
+        B39dzdd: "ffd7rjx",
+        Be3o27t: [
+            "fobu5kn",
+            "f1dbet5w"
+        ],
+        Bewtojm: "f1ap9jj5",
+        B37u8z8: [
+            "f1dbet5w",
+            "fobu5kn"
+        ],
+        Bhijsxg: "fwq15dy",
+        kktds4: "f1pb3wry",
+        Bmau3bo: [
+            "ftjv2f4",
+            "f1flhb1f"
+        ],
+        npektv: [
+            "f1flhb1f",
+            "ftjv2f4"
         ]
     },
     disabled: {
@@ -298,30 +298,30 @@ const optionClassNames = {
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
         ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
         ".f10pi13n{position:relative;}",
-        ".f13zj6fq::after{content:\"\";}",
-        ".f1mdlcz9::after{position:absolute;}",
-        ".f1nwj1ja::after{pointer-events:none;}",
-        ".ffmd2fr::after{z-index:1;}",
-        ".f8rth92::after{border-top-style:solid;}",
-        ".flthirb::after{border-right-style:solid;}",
-        ".ftkbnf5::after{border-left-style:solid;}",
-        ".f1lh990p::after{border-bottom-style:solid;}",
-        ".fc9v8v1::after{border-top-width:2px;}",
-        ".f1mwfetb::after{border-right-width:2px;}",
-        ".f18mat8f::after{border-left-width:2px;}",
-        ".f1cb6c3::after{border-bottom-width:2px;}",
-        ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
-        ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
-        ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}",
-        ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}",
-        ".f1qw5sz7::after{border-top-color:var(--colorStrokeFocus2);}",
-        ".f19va7ni::after{border-right-color:var(--colorStrokeFocus2);}",
-        ".f1a9v3mw::after{border-left-color:var(--colorStrokeFocus2);}",
-        ".fkkziue::after{border-bottom-color:var(--colorStrokeFocus2);}",
-        ".f1a97anr::after{top:-2px;}",
-        ".f5226zp::after{bottom:-2px;}",
-        ".fa2bdqt::after{left:-2px;}",
-        ".fei6g0k::after{right:-2px;}",
+        ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}",
+        ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}",
+        ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}",
+        ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}",
+        ".fuyp35s[data-activedescendant-focusvisible]::after{border-top-style:solid;}",
+        ".f1a9nstl[data-activedescendant-focusvisible]::after{border-right-style:solid;}",
+        ".fhk0hgg[data-activedescendant-focusvisible]::after{border-left-style:solid;}",
+        ".f1rdp6f1[data-activedescendant-focusvisible]::after{border-bottom-style:solid;}",
+        ".f1tj24la[data-activedescendant-focusvisible]::after{border-top-width:2px;}",
+        ".f1td3xda[data-activedescendant-focusvisible]::after{border-right-width:2px;}",
+        ".f73totv[data-activedescendant-focusvisible]::after{border-left-width:2px;}",
+        ".f2ge7d1[data-activedescendant-focusvisible]::after{border-bottom-width:2px;}",
+        ".ftb4b3e[data-activedescendant-focusvisible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f1scq65d[data-activedescendant-focusvisible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f2me9eq[data-activedescendant-focusvisible]::after{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fgk4qqi[data-activedescendant-focusvisible]::after{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".ffd7rjx[data-activedescendant-focusvisible]::after{border-top-color:var(--colorStrokeFocus2);}",
+        ".fobu5kn[data-activedescendant-focusvisible]::after{border-right-color:var(--colorStrokeFocus2);}",
+        ".f1dbet5w[data-activedescendant-focusvisible]::after{border-left-color:var(--colorStrokeFocus2);}",
+        ".f1ap9jj5[data-activedescendant-focusvisible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
+        ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}",
+        ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}",
+        ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
+        ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
         ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
         ".fod5ikn{font-size:var(--fontSizeBase400);}",
         ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
@@ -402,9 +402,9 @@ const optionClassNames = {
     ]
 });
 const useOptionStyles_unstable = (state)=>{
-    const { active, disabled, focusVisible, multiselect, selected } = state;
+    const { disabled, multiselect, selected } = state;
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
     if (state.checkIcon) {
         state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
     }