@fluentui/react-combobox 9.8.0 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 20 Feb 2024 14:15:21 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Feb 2024 02:28:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.0)
+
+Wed, 28 Feb 2024 02:28:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.8.0..@fluentui/react-combobox_v9.9.0)
+
+### Minor changes
+
+- refactor: Deprecate ComboboxContext in favour of ListboxContext ([PR #30575](https://github.com/microsoft/fluentui/pull/30575) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-aria to v9.9.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.53 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-field to v9.1.55 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.31 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-portal to v9.4.15 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-positioning to v9.13.5 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.14.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-tabster to v9.19.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-utilities to v9.18.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.8.0)
 
-Tue, 20 Feb 2024 14:15:21 GMT 
+Tue, 20 Feb 2024 14:22:18 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.5..@fluentui/react-combobox_v9.8.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
 import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { ContextSelector } from '@fluentui/react-context-selector';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PortalProps } from '@fluentui/react-portal';
@@ -22,6 +23,7 @@ export declare const Combobox: ForwardRefComponent<ComboboxProps>;
 declare type ComboboxBaseContextValues = {
     combobox: ComboboxContextValue;
     activeDescendant: ActiveDescendantContextValue;
+    listbox: ListboxContextValue;
 };
 
 /**
@@ -97,11 +99,11 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
 declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
     /**
      * @deprecated - no longer used internally
-     * @see activeDescendantController.active() instead
      */
     activeOption?: OptionValue;
     /**
-     * @deprecated - no longer used internally
+     * @deprecated - no longer used internally and handled automatically be activedescendant utilities
+     * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible
      */
     focusVisible: boolean;
     /**
@@ -111,17 +113,21 @@ declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' |
     ignoreNextBlur: React_2.MutableRefObject<boolean>;
     /**
      * @deprecated - no longer used internally
-     * @see activeDescendantController.focus(id) instead
      */
     setActiveOption: React_2.Dispatch<React_2.SetStateAction<OptionValue | undefined>>;
+    /**
+     * @deprecated - no longer used internally and handled automatically be activedescendant utilities
+     * @see useSetKeyboardNavigation for imperatively setting focus visible state
+     */
+    setFocusVisible(focusVisible: boolean): void;
     /**
      * whether the combobox/dropdown currently has focus
      */
     hasFocus: boolean;
-    setFocusVisible(focusVisible: boolean): void;
     setHasFocus(hasFocus: boolean): void;
     setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
     setValue(newValue: string | undefined): void;
+    onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
 };
 
 export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
@@ -129,7 +135,16 @@ export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
 /**
  * Context shared with Combobox, Listbox, & Options
  */
-export declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption' | 'setOpen' | 'size'>;
+export declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'> & {
+    /**
+     * @deprecated - no longer used
+     */
+    selectedOptions: ComboboxState['selectedOptions'];
+    /**
+     * @deprecated - no longer used
+     */
+    selectOption: ComboboxState['selectOption'];
+};
 
 export declare type ComboboxContextValues = ComboboxBaseContextValues;
 
@@ -145,6 +160,11 @@ export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>,
     children?: React_2.ReactNode;
 };
 
+/**
+ * @deprecated - render ListboxProvider instead
+ * @see ListboxProvider
+ * @see useListboxContext_unstable
+ */
 export declare const ComboboxProvider: Provider<ComboboxContextValue> & FC<ProviderProps<ComboboxContextValue>>;
 
 export declare type ComboboxSlots = {
@@ -208,7 +228,9 @@ export declare const listboxClassNames: SlotClassNames<ListboxSlots>;
 /**
  * Context shared with all Listbox Options
  */
-export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'>;
+export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'> & {
+    onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
+};
 
 export declare type ListboxContextValues = {
     listbox: ListboxContextValue;
@@ -220,7 +242,7 @@ export declare type ListboxContextValues = {
  */
 export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;
 
-export declare const ListboxProvider: Provider<ListboxContextValue> & FC<ProviderProps<ListboxContextValue>>;
+export declare const ListboxProvider: React_2.Provider<ListboxContextValue | undefined> & React_2.FC<React_2.ProviderProps<ListboxContextValue | undefined>>;
 
 export declare type ListboxSlots = {
     root: Slot<'div'>;
@@ -435,9 +457,7 @@ declare type SelectionState = {
  */
 export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
 
-export declare function useComboboxContextValues(state: ComboboxBaseState & {
-    activeDescendantController: ActiveDescendantImperativeRef;
-}): ComboboxBaseContextValues;
+export declare function useComboboxContextValues(state: ComboboxBaseState & Pick<ComboboxState, 'activeDescendantController'>): ComboboxBaseContextValues;
 
 export declare function useComboboxFilter<T extends {
     children: React_2.ReactNode;
@@ -492,6 +512,8 @@ export declare const useDropdownStyles_unstable: (state: DropdownState) => Dropd
  */
 export declare const useListbox_unstable: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;
 
+export declare const useListboxContext_unstable: <T>(selector: ContextSelector<ListboxContextValue, T>) => T;
+
 export declare function useListboxContextValues(state: ListboxState): ListboxContextValues;
 
 /**

package/lib/components/Combobox/renderCombobox.js

@@ -3,6 +3,7 @@ import { Portal } from '@fluentui/react-portal';
 import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
 import { assertSlots } from '@fluentui/react-utilities';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
+import { ListboxProvider } from '../../contexts/ListboxContext';
 /**
  * Render the final JSX of Combobox
  */ export const renderCombobox_unstable = (state, contextValues)=>{
@@ -10,17 +11,20 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
     return /*#__PURE__*/ _jsx(state.root, {
         children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
             value: contextValues.activeDescendant,
-            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
-                value: contextValues.combobox,
-                children: [
-                    /*#__PURE__*/ _jsx(state.input, {}),
-                    state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
-                    /*#__PURE__*/ _jsx(state.expandIcon, {}),
-                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
-                        mountNode: state.mountNode,
-                        children: /*#__PURE__*/ _jsx(state.listbox, {})
-                    }))
-                ]
+            children: /*#__PURE__*/ _jsx(ListboxProvider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ _jsx(state.input, {}),
+                        state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
+                        /*#__PURE__*/ _jsx(state.expandIcon, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ _jsx(state.listbox, {})
+                        }))
+                    ]
+                })
             })
         })
     });

package/lib/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ComboboxContext.Provider value={contextValues.combobox}>\n          <state.input />\n          {state.clearIcon && <state.clearIcon />}\n          <state.expandIcon />\n          {state.listbox &&\n            (state.inlinePopup ? (\n              <state.listbox />\n            ) : (\n              <Portal mountNode={state.mountNode}>\n                <state.listbox />\n              </Portal>\n            ))}\n        </ComboboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","Provider","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,MAACN,gBAAgBO,QAAQ;gBAACF,OAAOF,cAAcK,QAAQ;;kCACrD,KAACN,MAAMO,KAAK;oBACXP,MAAMQ,SAAS,kBAAI,KAACR,MAAMQ,SAAS;kCACpC,KAACR,MAAMS,UAAU;oBAChBT,MAAMU,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMU,OAAO,sBAEd,KAACf;wBAAOiB,WAAWZ,MAAMY,SAAS;kCAChC,cAAA,KAACZ,MAAMU,OAAO;sBAElB;;;;;AAKZ,EAAE"}
+{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            <state.expandIcon />\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        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;sCACpC,KAACT,MAAMU,UAAU;wBAChBV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Dropdown/renderDropdown.js

@@ -3,6 +3,7 @@ import { Portal } from '@fluentui/react-portal';
 import { assertSlots } from '@fluentui/react-utilities';
 import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
+import { ListboxContext } from '../../contexts/ListboxContext';
 /**
  * Render the final JSX of Dropdown
  */ export const renderDropdown_unstable = (state, contextValues)=>{
@@ -10,21 +11,24 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
     return /*#__PURE__*/ _jsx(state.root, {
         children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
             value: contextValues.activeDescendant,
-            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
-                value: contextValues.combobox,
-                children: [
-                    /*#__PURE__*/ _jsxs(state.button, {
-                        children: [
-                            state.button.children,
-                            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
-                        ]
-                    }),
-                    state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),
-                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
-                        mountNode: state.mountNode,
-                        children: /*#__PURE__*/ _jsx(state.listbox, {})
-                    }))
-                ]
+            children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ _jsxs(state.button, {
+                            children: [
+                                state.button.children,
+                                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
+                            ]
+                        }),
+                        state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ _jsx(state.listbox, {})
+                        }))
+                    ]
+                })
             })
         })
     });

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

@@ -1 +1 @@
-{"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';\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        <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        </ComboboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","combobox","button","children","expandIcon","clearButton","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACL;YAAgCM,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,MAACN,gBAAgBO,QAAQ;gBAACF,OAAOF,cAAcK,QAAQ;;kCACrD,MAACN,MAAMO,MAAM;;4BACVP,MAAMO,MAAM,CAACC,QAAQ;4BACrBR,MAAMS,UAAU,kBAAI,KAACT,MAAMS,UAAU;;;oBAEvCT,MAAMU,WAAW,kBAAI,KAACV,MAAMU,WAAW;oBACvCV,MAAMW,OAAO,IACXX,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMW,OAAO,sBAEd,KAAChB;wBAAOkB,WAAWb,MAAMa,SAAS;kCAChC,cAAA,KAACb,MAAMW,OAAO;sBAElB;;;;;AAKZ,EAAE"}
+{"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":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DN,YAA2BK;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN,eAAeO,QAAQ;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,cAAA,MAACT,gBAAgBQ,QAAQ;oBAACF,OAAOF,cAAcM,QAAQ;;sCACrD,MAACP,MAAMQ,MAAM;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;;;wBAEvCV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMM,OAAO,sBAEd,KAACZ;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,cAAA,KAACb,MAAMM,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Listbox/useListbox.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
-import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
+import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useOptionCollection } from '../../utils/useOptionCollection';
 import { useSelection } from '../../utils/useSelection';
-import { ComboboxContext } from '../../contexts/ComboboxContext';
 import { optionClassNames } from '../Option/useOptionStyles.styles';
+import { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,
@@ -67,13 +67,13 @@ const UNSAFE_noLongerUsed = {
         }
     };
     // get state from parent combobox, if it exists
-    const hasComboboxContext = useHasParentContext(ComboboxContext);
-    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);
-    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);
+    const hasListboxContext = useHasParentContext(ListboxContext);
+    const contextSelectedOptions = useListboxContext_unstable((ctx)=>ctx.selectedOptions);
+    const contextSelectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
     // without a parent combobox context, provide values directly from Listbox
-    const optionContextValues = hasComboboxContext ? {
-        selectedOptions: comboboxSelectedOptions,
-        selectOption: comboboxSelectOption,
+    const optionContextValues = hasListboxContext ? {
+        selectedOptions: contextSelectedOptions,
+        selectOption: contextSelectOption,
         ...UNSAFE_noLongerUsed
     } : {
         selectedOptions,

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

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\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  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\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 activeDescendantContext = useActiveDescendantContext();\n  const activeDescendantController = useHasParentActiveDescendantContext()\n    ? activeDescendantContext.controller\n    : 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 '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 hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\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),\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\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","ComboboxContext","optionClassNames","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","optionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","activeDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","event","action","open","activeOptionId","active","next","first","prev","last","hasComboboxContext","comboboxSelectedOptions","ctx","comboboxSelectOption","optionContextValues","state","components","always","role","tabIndex","elementType"],"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  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';\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  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\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 activeDescendantContext = useActiveDescendantContext();\n  const activeDescendantController = useHasParentActiveDescendantContext()\n    ? activeDescendantContext.controller\n    : 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 '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 hasListboxContext = useHasParentContext(ListboxContext);\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  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),\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\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","optionClassNames","ListboxContext","useListboxContext_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","optionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","activeDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","event","action","open","activeOptionId","active","next","first","prev","last","hasListboxContext","contextSelectedOptions","ctx","contextSelectOption","optionContextValues","state","components","always","role","tabIndex","elementType"],"mappings":"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"}

package/lib/components/Option/useOption.js

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
-import { useContextSelector } from '@fluentui/react-context-selector';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
-import { ComboboxContext } from '../../contexts/ComboboxContext';
-import { ListboxContext } from '../../contexts/ListboxContext';
+import { useListboxContext_unstable } from '../../contexts/ListboxContext';
 function getTextString(text, children) {
     if (text !== undefined) {
         return text;
@@ -52,16 +50,16 @@ function getTextString(text, children) {
         optionText,
         optionValue
     ]);
-    const { controller: activeDescendantController } = useActiveDescendantContext();
     // context values
-    const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);
-    const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);
-    const selected = useContextSelector(ListboxContext, (ctx)=>{
+    const { controller: activeDescendantController } = useActiveDescendantContext();
+    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);
+    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
+    const selected = useListboxContext_unstable((ctx)=>{
         const selectedOptions = ctx.selectedOptions;
         return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
     });
-    const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);
-    const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);
+    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
+    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);
     // check icon
     let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);
     if (multiselect) {
@@ -73,14 +71,10 @@ function getTextString(text, children) {
             event.preventDefault();
             return;
         }
-        // clicked option should always become active option
         activeDescendantController.focus(id);
-        // close on option click for single-select options in a combobox
-        if (!multiselect) {
-            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
-        }
         // handle selection change
         selectOption(event, optionData);
+        onOptionClick(event);
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
     };
     // register option data with context

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

@@ -1 +1 @@
-{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\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\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\n  return textString;\n}\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 */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n\n  // context values\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // clicked option should always become active option\n    activeDescendantController.focus(id);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\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, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : 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":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useContextSelector","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","setOpen","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["useOption.tsx"],"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';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\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\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\n  return textString;\n}\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 */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\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\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\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\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, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : 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":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

package/lib/components/Option/useOptionStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","Btq9bd3","Bertapg","b50fsz","avt0cx","Bqfxd14","B53xpsf","B1wzb3v","f0sref","Bttcd12","Fffuxt","Bqougee","Beitzug","B39dzdd","Be3o27t","Bewtojm","B37u8z8","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n    root: 'fui-Option',\n    checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXS,\n        cursor: 'pointer',\n        display: 'flex',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n        position: 'relative',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        // taken from @fluentui/react-tabster\n        // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth('2px'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            ...shorthands.borderColor(tokens.colorStrokeFocus2),\n            top: '-2px',\n            bottom: '-2px',\n            left: '-2px',\n            right: '-2px'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        fontSize: tokens.fontSizeBase400,\n        // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n        marginRight: tokens.spacingHorizontalXXS,\n        visibility: 'hidden',\n        '& svg': {\n            display: 'block'\n        }\n    },\n    selectedCheck: {\n        visibility: 'visible'\n    },\n    multiselectCheck: {\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(tokens.borderRadiusSmall),\n        boxSizing: 'border-box',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fill: 'currentColor',\n        fontSize: '12px',\n        height: '16px',\n        width: '16px',\n        visibility: 'visible'\n    },\n    selectedMultiselectCheck: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n    },\n    checkDisabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        state.checkIcon.className = 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);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","Btq9bd3","Bertapg","b50fsz","avt0cx","Bqfxd14","B53xpsf","B1wzb3v","f0sref","Bttcd12","Fffuxt","Bqougee","Beitzug","B39dzdd","Be3o27t","Bewtojm","B37u8z8","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n    root: 'fui-Option',\n    checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXS,\n        cursor: 'pointer',\n        display: 'flex',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n        position: 'relative',\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth('2px'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            ...shorthands.borderColor(tokens.colorStrokeFocus2),\n            top: '-2px',\n            bottom: '-2px',\n            left: '-2px',\n            right: '-2px'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        fontSize: tokens.fontSizeBase400,\n        // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n        marginRight: tokens.spacingHorizontalXXS,\n        visibility: 'hidden',\n        '& svg': {\n            display: 'block'\n        }\n    },\n    selectedCheck: {\n        visibility: 'visible'\n    },\n    multiselectCheck: {\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(tokens.borderRadiusSmall),\n        boxSizing: 'border-box',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fill: 'currentColor',\n        fontSize: '12px',\n        height: '16px',\n        width: '16px',\n        visibility: 'visible'\n    },\n    selectedMultiselectCheck: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n    },\n    checkDisabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        state.checkIcon.className = 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);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uCAAuC,QAAQ,sBAAsB;AAC9E,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAjD,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA2B,OAAA;EAAA;EAAAC,QAAA;EAAA1D,SAAA;IAAAY,OAAA;IAAA+C,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAF,OAAA;EAAA;EAAAG,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAzE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAuE,OAAA;IAAAnE,MAAA;IAAAR,OAAA;IAAA4E,OAAA;IAAAC,OAAA;IAAAnE,OAAA;IAAAoE,OAAA;IAAAC,MAAA;IAAApB,OAAA;EAAA;EAAAqB,wBAAA;IAAAC,MAAA;IAAA5E,MAAA;IAAAkE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAQ,aAAA;IAAA7E,MAAA;IAAAkD,OAAA;EAAA;EAAA4B,wBAAA;IAAAZ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAU,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAgGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjD,MAAM;IAAEnC,QAAQ;IAAEoC,WAAW;IAAElC;EAAS,CAAC,GAAGiC,KAAK;EACjD,MAAME,MAAM,GAAG5F,SAAS,CAAC,CAAC;EAC1B0F,KAAK,CAAC5F,IAAI,CAAC+F,SAAS,GAAGlG,YAAY,CAACE,gBAAgB,CAACC,IAAI,EAAE8F,MAAM,CAAC9F,IAAI,EAAE8F,MAAM,CAAC9D,MAAM,EAAEyB,QAAQ,IAAIqC,MAAM,CAACrC,QAAQ,EAAEE,QAAQ,IAAImC,MAAM,CAACnC,QAAQ,EAAEiC,KAAK,CAAC5F,IAAI,CAAC+F,SAAS,CAAC;EACtK,IAAIH,KAAK,CAAC3F,SAAS,EAAE;IACjB2F,KAAK,CAAC3F,SAAS,CAAC8F,SAAS,GAAGlG,YAAY,CAACE,gBAAgB,CAACE,SAAS,EAAE6F,MAAM,CAAC7F,SAAS,EAAE4F,WAAW,IAAIC,MAAM,CAAC7B,gBAAgB,EAAEN,QAAQ,IAAImC,MAAM,CAAC9B,aAAa,EAAEL,QAAQ,IAAIkC,WAAW,IAAIC,MAAM,CAACX,wBAAwB,EAAE1B,QAAQ,IAAIqC,MAAM,CAACT,aAAa,EAAE5B,QAAQ,IAAIoC,WAAW,IAAIC,MAAM,CAACR,wBAAwB,EAAEM,KAAK,CAAC3F,SAAS,CAAC8F,SAAS,CAAC;EACzV;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/contexts/ComboboxContext.js

@@ -1,5 +1,8 @@
 import { createContext } from '@fluentui/react-context-selector';
-// eslint-disable-next-line @fluentui/no-context-default-value
+/**
+ * @deprecated - use ListboxContext instead
+ * @see ListboxContext
+ */ // eslint-disable-next-line @fluentui/no-context-default-value
 export const ComboboxContext = createContext({
     activeOption: undefined,
     appearance: 'outline',
@@ -20,4 +23,9 @@ export const ComboboxContext = createContext({
     },
     size: 'medium'
 });
+/**
+ * @deprecated - render ListboxProvider instead
+ * @see ListboxProvider
+ * @see useListboxContext_unstable
+ */ // eslint-disable-next-line deprecation/deprecation
 export const ComboboxProvider = ComboboxContext.Provider;

package/lib/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  | 'activeOption'\n  | 'appearance'\n  | 'focusVisible'\n  | 'open'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setOpen'\n  | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAoBjE,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAEH,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}
+{"version":3,"sources":["ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n  /**\n   * @deprecated - no longer used\n   */\n  selectedOptions: ComboboxState['selectedOptions'];\n\n  /**\n   * @deprecated - no longer used\n   */\n  selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAqBjE;;;CAGC,GACD,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAEH;;;;CAIC,GACD,mDAAmD;AACnD,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}

package/lib/contexts/ListboxContext.js

@@ -1,6 +1,6 @@
-import { createContext } from '@fluentui/react-context-selector';
-// eslint-disable-next-line @fluentui/no-context-default-value
-export const ListboxContext = createContext({
+import * as React from 'react';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+const listboxContextDefaultValue = {
     activeOption: undefined,
     focusVisible: false,
     multiselect: false,
@@ -8,11 +8,16 @@ export const ListboxContext = createContext({
         return ()=>undefined;
     },
     selectedOptions: [],
+    onOptionClick () {
+    // noop
+    },
     selectOption () {
     // noop
     },
     setActiveOption () {
     // noop
     }
-});
+};
+export const ListboxContext = createContext(undefined);
+export const useListboxContext_unstable = (selector)=>useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));
 export const ListboxProvider = ListboxContext.Provider;

package/lib/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAiBjE,8DAA8D;AAC9D,OAAO,MAAMC,iBAAiBD,cAAmC;IAC/DE,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAO,IAAMH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMC,kBAAkBT,eAAeU,QAAQ,CAAC"}
+{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n> & {\n  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>) =>\n  useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","onOptionClick","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAmBtG,MAAMC,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAO,IAAMH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEA,OAAO,MAAMC,iBAAiBZ,cAA+CI,WAAW;AAExF,OAAO,MAAMS,6BAA6B,CAAIC,WAC5Cb,mBAAmBW,gBAAgB,CAACG,MAAMb,0BAA0B,GAAKY,SAASC,MAAM;AAE1F,OAAO,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}