@fluentui/react-combobox 9.10.1 → 9.11.1

package/CHANGELOG.md

@@ -1,12 +1,47 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 23 Apr 2024 08:12:12 GMT and should not be manually modified.
+This log was last generated on Mon, 06 May 2024 12:48:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.1)
+
+Mon, 06 May 2024 12:48:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.0..@fluentui/react-combobox_v9.11.1)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.11.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.59 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-field to v9.1.64 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.37 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-portal to v9.4.23 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-positioning to v9.14.5 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-tabster to v9.21.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+
+## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.0)
+
+Thu, 02 May 2024 11:36:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.10.1..@fluentui/react-combobox_v9.11.0)
+
+### Minor changes
+
+- Add onActiveOptionChange to Dropdown and Combobox ([PR #31149](https://github.com/microsoft/fluentui/pull/31149) by jurokapsiar@gmail.com)
+- Bump @fluentui/react-aria to v9.11.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-field to v9.1.63 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-portal to v9.4.22 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+
+### Patches
+
+-  chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
+- Fixing initial keyboard focus issues with unparented listbox ([PR #31140](https://github.com/microsoft/fluentui/pull/31140) by stevenco@microsoft.com)
+
 ## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.10.1)
 
-Tue, 23 Apr 2024 08:12:12 GMT 
+Tue, 23 Apr 2024 08:17:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.10.0..@fluentui/react-combobox_v9.10.1)
 
 ### Patches

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 
+import { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
 import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
 import { 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 { EventData } from '@fluentui/react-utilities';
+import { EventHandler } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -17,6 +20,11 @@ import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import type { SlotComponentType } from '@fluentui/react-utilities';
 
+declare type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {
+    previousOption: OptionValue | null | undefined;
+    nextOption: OptionValue | null | undefined;
+};
+
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
  */
@@ -41,7 +49,7 @@ declare type ComboboxBaseOpenEvents = React_2.MouseEvent<HTMLElement> | React_2.
  * ComboboxBase Props
  * Shared types between Combobox and Dropdown components
  */
-export declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'> & {
+export declare type ComboboxBaseProps = SelectionProps & HighlightedOptionProps & Pick<PortalProps, 'mountNode'> & {
     /**
      * Controls the colors and borders of the combobox trigger.
      * @default 'outline'
@@ -132,6 +140,7 @@ export declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appear
     onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
     disabled: boolean;
     freeform: boolean;
+    onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;
 };
 
 export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
@@ -222,6 +231,10 @@ export declare type DropdownState = ComponentState<DropdownSlots> & Omit<Combobo
     activeDescendantController: ActiveDescendantImperativeRef;
 };
 
+declare type HighlightedOptionProps = {
+    onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;
+};
+
 /**
  * Listbox component: a standalone selection control, or the popup in a Combobox
  */
@@ -234,6 +247,7 @@ export declare const listboxClassNames: SlotClassNames<ListboxSlots>;
  */
 export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'> & {
     onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
+    onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;
 };
 
 export declare type ListboxContextValues = {
@@ -272,6 +286,7 @@ export declare type ListboxState = ComponentState<ListboxSlots> & OptionCollecti
     setActiveOption(option?: OptionValue): void;
     selectOption(event: SelectionEvents, option: OptionValue): void;
     activeDescendantController: ActiveDescendantImperativeRef;
+    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;
 };
 
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"names":[],"mappings":"AAAA,WAiDgE"}
+{"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  Omit<ComboboxBaseState, 'freeform'> & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":"AAAA,WAmDwE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantContextValue, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAgDE"}
+{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ActiveDescendantChangeEvent,\n  ActiveDescendantContextValue,\n  ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active()\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id)\n     */\n    setActiveOption(option?: OptionValue): void;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    activeDescendantController: ActiveDescendantImperativeRef;\n\n    onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsDE"}

package/lib/components/Listbox/useListbox.js

@@ -28,8 +28,28 @@ const UNSAFE_noLongerUsed = {
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({
         matchOption: (el)=>el.classList.contains(optionClassNames.root)
     });
+    const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);
+    const listenerRef = React.useMemo(()=>{
+        let element = null;
+        const listener = (untypedEvent)=>{
+            // Typescript doesn't support custom event types on handler
+            const event = untypedEvent;
+            onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);
+        };
+        return (el)=>{
+            if (!el) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);
+                return;
+            }
+            element = el;
+            element.addEventListener('activedescendantchange', listener);
+        };
+    }, [
+        onActiveDescendantChange
+    ]);
     const activeDescendantContext = useActiveDescendantContext();
-    const activeDescendantController = useHasParentActiveDescendantContext() ? activeDescendantContext.controller : controller;
+    const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();
+    const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
     const { clearSelection, selectedOptions, selectOption } = useSelection(props);
     const onKeyDown = (event)=>{
         const action = getDropdownActionFromKey(event, {
@@ -66,6 +86,31 @@ const UNSAFE_noLongerUsed = {
                 break;
         }
     };
+    const onFocus = (_event)=>{
+        if (hasParentActiveDescendantContext || activeDescendantController.active()) {
+            return;
+        }
+        // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup
+        if (activeDescendantController.focusLastActive()) {
+            return;
+        }
+        // if there is a selected option, focus it and make it active
+        const selectedOptionValues = selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [];
+        const firstSelectedOption = optionCollection.getOptionsMatchingValue((value)=>selectedOptionValues.includes(value))[0];
+        if (firstSelectedOption) {
+            activeDescendantController.focus(firstSelectedOption.id);
+            return;
+        }
+        // if there is no active descendant and no selected options, set the first option as active
+        activeDescendantController.first();
+    };
+    const onBlur = (_event)=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        // blur active descendant styles on blur, in the absence of a parent context controlling the state
+        activeDescendantController.blur();
+    };
     // get state from parent combobox, if it exists
     const hasListboxContext = useHasParentContext(ListboxContext);
     const contextSelectedOptions = useListboxContext_unstable((ctx)=>ctx.selectedOptions);
@@ -88,7 +133,7 @@ const UNSAFE_noLongerUsed = {
             // 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: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef),
+            ref: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef, listenerRef),
             role: multiselect ? 'menu' : 'listbox',
             tabIndex: 0,
             ...props
@@ -98,9 +143,12 @@ const UNSAFE_noLongerUsed = {
         multiselect,
         clearSelection,
         activeDescendantController,
+        onActiveDescendantChange,
         ...optionCollection,
         ...optionContextValues
     };
     state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
+    state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));
+    state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));
     return state;
 };

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  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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"}
+{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  ActiveDescendantChangeEvent,\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\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 onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case '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  const onFocus = (_event: React.FocusEvent<HTMLElement>) => {\n    if (hasParentActiveDescendantContext || activeDescendantController.active()) {\n      return;\n    }\n\n    // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup\n    if (activeDescendantController.focusLastActive()) {\n      return;\n    }\n\n    // if there is a selected option, focus it and make it active\n    const selectedOptionValues = selectedOptions ?? [];\n    const firstSelectedOption = optionCollection.getOptionsMatchingValue(value =>\n      selectedOptionValues.includes(value),\n    )[0];\n    if (firstSelectedOption) {\n      activeDescendantController.focus(firstSelectedOption.id);\n      return;\n    }\n\n    // if there is no active descendant and no selected options, set the first option as active\n    activeDescendantController.first();\n  };\n\n  const onBlur = (_event: React.FocusEvent<HTMLElement>) => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // blur active descendant styles on blur, in the absence of a parent context controlling the state\n    activeDescendantController.blur();\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, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["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","onActiveDescendantChange","ctx","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","next","first","prev","last","onFocus","_event","focusLastActive","selectedOptionValues","firstSelectedOption","getOptionsMatchingValue","value","includes","focus","id","onBlur","blur","hasListboxContext","contextSelectedOptions","contextSelectOption","optionContextValues","state","components","always","role","tabIndex","elementType"],"mappings":"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"}

package/lib/contexts/ListboxContext.js

@@ -11,6 +11,9 @@ const listboxContextDefaultValue = {
     onOptionClick () {
     // noop
     },
+    onActiveDescendantChange () {
+    // noop
+    },
     selectOption () {
     // noop
     },

package/lib/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => 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  onActiveDescendantChange() {\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","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAqBtG,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;IACAC;IACE,OAAO;IACT;AACF;AAEA,OAAO,MAAMC,iBAAiBb,cAA+CI,WAAW;AAExF,OAAO,MAAMU,6BAA6B,CAAIC,WAC5Cd,mBAAmBY,gBAAgB,CAACG,MAAMd,0BAA0B,GAAKa,SAASC,MAAM;AAE1F,OAAO,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}

package/lib/contexts/useComboboxContextValues.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick } = state;
+    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
     const combobox = {
         activeOption: undefined,
         appearance,
@@ -20,7 +20,8 @@ export function useComboboxContextValues(state) {
         selectedOptions,
         selectOption,
         setActiveOption: ()=>null,
-        onOptionClick
+        onOptionClick,
+        onActiveDescendantChange
     };
     const activeDescendant = React.useMemo(()=>({
             controller: activeDescendantController

package/lib/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACd,GAAGT;IAEJ,MAAMU,WAAW;QACfC,cAAcC;QACdX;QACAY,cAAc;QACdX;QACAC;QACAC;QACAC;QACAS,iBAAiB,IAAM;QACvBR;QACAC;IACF;IAEA,MAAMQ,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdV;QACAC;QACAC;QACAS,iBAAiB,IAAM;QACvBL;IACF;IAEA,MAAMO,mBAAmBlB,MAAMmB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYV;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEE;QAAUM;QAAkBD;IAAQ;AAC/C"}
+{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n    onActiveDescendantChange,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGV;IAEJ,MAAMW,WAAW;QACfC,cAAcC;QACdZ;QACAa,cAAc;QACdZ;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdX;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBnB,MAAMoB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}

package/lib/contexts/useListboxContextValues.js

@@ -7,6 +7,7 @@ export function useListboxContextValues(state) {
     // get register/unregister functions from parent combobox context
     const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
     const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);
+    const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);
     const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;
     const listbox = {
         activeOption: undefined,
@@ -16,7 +17,8 @@ export function useListboxContextValues(state) {
         selectedOptions,
         selectOption,
         setActiveOption: ()=>undefined,
-        onOptionClick
+        onOptionClick,
+        onActiveDescendantChange
     };
     const activeDescendant = React.useMemo(()=>({
             controller: activeDescendantController

package/lib/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EAAEK,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAEnG,iEAAiE;IACjE,MAAMO,uBAAuBT,2BAA2BU,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBX,2BAA2BU,CAAAA,MAAOA,IAAIC,aAAa;IAEzE,MAAMC,sBAAsBT,oBAAoBM,uBAAuBJ;IAEvE,MAAMQ,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdZ;QACAC,gBAAgBO;QAChBN;QACAC;QACAU,iBAAiB,IAAMF;QACvBJ;IACF;IAEA,MAAMO,mBAAmBrB,MAAMsB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYZ;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEK;QAASK;IAAiB;AACrC"}
+{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EAAEK,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAEnG,iEAAiE;IACjE,MAAMO,uBAAuBT,2BAA2BU,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBX,2BAA2BU,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BZ,2BAA2BU,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBV,oBAAoBM,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdb;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBtB,MAAMuB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}

package/lib/utils/ComboboxBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * If set, the combobox will show an icon to clear the current value.\n     */\n    clearable?: boolean;\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see useSetKeyboardNavigation for imperatively setting focus visible state\n     */\n    setFocusVisible(focusVisible: boolean): void;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n\n    onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n    disabled: boolean;\n    freeform: boolean;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  HighlightedOptionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * If set, the combobox will show an icon to clear the current value.\n     */\n    clearable?: boolean;\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see useSetKeyboardNavigation for imperatively setting focus visible state\n     */\n    setFocusVisible(focusVisible: boolean): void;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n\n    onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n    disabled: boolean;\n    freeform: boolean;\n\n    onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n  previousOption: OptionValue | null | undefined;\n  nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n  onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/utils/useComboboxBaseState.js

@@ -7,7 +7,7 @@ import { useSelection } from '../utils/useSelection';
  * @internal
  * State shared between Combobox and Dropdown components
  */ export const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;
     const optionCollection = useOptionCollection();
     const { getOptionsMatchingValue } = optionCollection;
     const { getOptionById } = optionCollection;
@@ -146,8 +146,19 @@ import { useSelection } from '../utils/useSelection';
     }, [
         open,
         children,
-        activeDescendantController
+        activeDescendantController,
+        getOptionById
     ]);
+    const onActiveDescendantChange = useEventCallback((event)=>{
+        const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;
+        const nextOption = optionCollection.getOptionById(event.detail.id);
+        onActiveOptionChange === null || onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(event, {
+            event,
+            type: 'change',
+            previousOption,
+            nextOption
+        });
+    });
     return {
         ...optionCollection,
         freeform,
@@ -176,6 +187,7 @@ import { useSelection } from '../utils/useSelection';
             if (!multiselect) {
                 setOpen(e, false);
             }
-        })
+        }),
+        onActiveDescendantChange
     };
 };

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    disabled?: boolean;\n    freeform?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n    freeform = false,\n    disabled = false,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n  // reset any typed value when an option is selected\n  const selectOption = React.useCallback(\n    (ev: SelectionEvents, option: OptionValue) => {\n      ReactDOM.unstable_batchedUpdates(() => {\n        setValue(undefined);\n        baseSelectOption(ev, option);\n      });\n    },\n    [setValue, baseSelectOption],\n  );\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onOpenChange?.(event, { open: newState });\n      ReactDOM.unstable_batchedUpdates(() => {\n        if (!newState && !freeform) {\n          setValue(undefined);\n        }\n        setOpenState(newState);\n      });\n    },\n    [onOpenChange, setOpenState, setValue, freeform, disabled],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController]);\n\n  return {\n    ...optionCollection,\n    freeform,\n    disabled,\n    selectOption,\n    clearSelection,\n    selectedOptions,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption","onOptionClick","e"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    disabled?: boolean;\n    freeform?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n    freeform = false,\n    disabled = false,\n    onActiveOptionChange = null,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n  // reset any typed value when an option is selected\n  const selectOption = React.useCallback(\n    (ev: SelectionEvents, option: OptionValue) => {\n      ReactDOM.unstable_batchedUpdates(() => {\n        setValue(undefined);\n        baseSelectOption(ev, option);\n      });\n    },\n    [setValue, baseSelectOption],\n  );\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onOpenChange?.(event, { open: newState });\n      ReactDOM.unstable_batchedUpdates(() => {\n        if (!newState && !freeform) {\n          setValue(undefined);\n        }\n        setOpenState(newState);\n      });\n    },\n    [onOpenChange, setOpenState, setValue, freeform, disabled],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController, getOptionById]);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n    const nextOption = optionCollection.getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  return {\n    ...optionCollection,\n    freeform,\n    disabled,\n    selectOption,\n    clearSelection,\n    selectedOptions,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n    onActiveDescendantChange,\n  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}

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

@@ -31,8 +31,28 @@ const useListbox_unstable = (props, ref)=>{
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = (0, _reactaria.useActiveDescendant)({
         matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
     });
+    const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
+    const listenerRef = _react.useMemo(()=>{
+        let element = null;
+        const listener = (untypedEvent)=>{
+            // Typescript doesn't support custom event types on handler
+            const event = untypedEvent;
+            onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);
+        };
+        return (el)=>{
+            if (!el) {
+                element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);
+                return;
+            }
+            element = el;
+            element.addEventListener('activedescendantchange', listener);
+        };
+    }, [
+        onActiveDescendantChange
+    ]);
     const activeDescendantContext = (0, _reactaria.useActiveDescendantContext)();
-    const activeDescendantController = (0, _reactaria.useHasParentActiveDescendantContext)() ? activeDescendantContext.controller : controller;
+    const hasParentActiveDescendantContext = (0, _reactaria.useHasParentActiveDescendantContext)();
+    const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
     const { clearSelection, selectedOptions, selectOption } = (0, _useSelection.useSelection)(props);
     const onKeyDown = (event)=>{
         const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
@@ -69,6 +89,31 @@ const useListbox_unstable = (props, ref)=>{
                 break;
         }
     };
+    const onFocus = (_event)=>{
+        if (hasParentActiveDescendantContext || activeDescendantController.active()) {
+            return;
+        }
+        // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup
+        if (activeDescendantController.focusLastActive()) {
+            return;
+        }
+        // if there is a selected option, focus it and make it active
+        const selectedOptionValues = selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [];
+        const firstSelectedOption = optionCollection.getOptionsMatchingValue((value)=>selectedOptionValues.includes(value))[0];
+        if (firstSelectedOption) {
+            activeDescendantController.focus(firstSelectedOption.id);
+            return;
+        }
+        // if there is no active descendant and no selected options, set the first option as active
+        activeDescendantController.first();
+    };
+    const onBlur = (_event)=>{
+        if (hasParentActiveDescendantContext) {
+            return;
+        }
+        // blur active descendant styles on blur, in the absence of a parent context controlling the state
+        activeDescendantController.blur();
+    };
     // get state from parent combobox, if it exists
     const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
     const contextSelectedOptions = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectedOptions);
@@ -91,7 +136,7 @@ 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: (0, _reactutilities.useMergedRefs)(ref, activeParentRef, activeDescendantListboxRef),
+            ref: (0, _reactutilities.useMergedRefs)(ref, activeParentRef, activeDescendantListboxRef, listenerRef),
             role: multiselect ? 'menu' : 'listbox',
             tabIndex: 0,
             ...props
@@ -101,9 +146,12 @@ const useListbox_unstable = (props, ref)=>{
         multiselect,
         clearSelection,
         activeDescendantController,
+        onActiveDescendantChange,
         ...optionCollection,
         ...optionContextValues
     };
     state.root.onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onKeyDown, onKeyDown));
+    state.root.onFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onFocus, onFocus));
+    state.root.onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onBlur, onBlur));
     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, 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"}
+{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n    activeOption: undefined,\n    focusVisible: false,\n    setActiveOption: ()=>null\n};\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n    const { multiselect } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionById } = optionCollection;\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);\n    const listenerRef = React.useMemo(()=>{\n        let element = null;\n        const listener = (untypedEvent)=>{\n            // Typescript doesn't support custom event types on handler\n            const event = untypedEvent;\n            onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);\n        };\n        return (el)=>{\n            if (!el) {\n                element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);\n                return;\n            }\n            element = el;\n            element.addEventListener('activedescendantchange', listener);\n        };\n    }, [\n        onActiveDescendantChange\n    ]);\n    const activeDescendantContext = useActiveDescendantContext();\n    const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n    const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const activeOptionId = activeDescendantController.active();\n        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n        switch(action){\n            case 'Next':\n                if (activeOption) {\n                    activeDescendantController.next();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'Previous':\n                if (activeOption) {\n                    activeDescendantController.prev();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'PageUp':\n            case 'First':\n                activeDescendantController.first();\n                break;\n            case 'PageDown':\n            case 'Last':\n                activeDescendantController.last();\n                break;\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n        }\n    };\n    const onFocus = (_event)=>{\n        if (hasParentActiveDescendantContext || activeDescendantController.active()) {\n            return;\n        }\n        // restore focus to last active option (if it still exists) - similar to memorizeCurrent in useArrowNavigationGroup\n        if (activeDescendantController.focusLastActive()) {\n            return;\n        }\n        // if there is a selected option, focus it and make it active\n        const selectedOptionValues = selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [];\n        const firstSelectedOption = optionCollection.getOptionsMatchingValue((value)=>selectedOptionValues.includes(value))[0];\n        if (firstSelectedOption) {\n            activeDescendantController.focus(firstSelectedOption.id);\n            return;\n        }\n        // if there is no active descendant and no selected options, set the first option as active\n        activeDescendantController.first();\n    };\n    const onBlur = (_event)=>{\n        if (hasParentActiveDescendantContext) {\n            return;\n        }\n        // blur active descendant styles on blur, in the absence of a parent context controlling the state\n        activeDescendantController.blur();\n    };\n    // get state from parent combobox, if it exists\n    const hasListboxContext = useHasParentContext(ListboxContext);\n    const contextSelectedOptions = useListboxContext_unstable((ctx)=>ctx.selectedOptions);\n    const contextSelectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasListboxContext ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed\n    } : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed\n    };\n    const state = {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef, listenerRef),\n            role: multiselect ? 'menu' : 'listbox',\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        activeDescendantController,\n        onActiveDescendantChange,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n    state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n    return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","optionCollection","useOptionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","onActiveDescendantChange","useListboxContext_unstable","ctx","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","next","first","prev","last","onFocus","_event","focusLastActive","selectedOptionValues","firstSelectedOption","getOptionsMatchingValue","value","includes","focus","id","onBlur","blur","hasListboxContext","useHasParentContext","ListboxContext","contextSelectedOptions","contextSelectOption","optionContextValues","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","useEventCallback","mergeCallbacks"],"mappings":"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"}

package/lib-commonjs/contexts/ListboxContext.js

@@ -33,6 +33,9 @@ const listboxContextDefaultValue = {
     onOptionClick () {
     // noop
     },
+    onActiveDescendantChange () {
+    // noop
+    },
     selectOption () {
     // noop
     },

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

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

package/lib-commonjs/contexts/useComboboxContextValues.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useComboboxContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick } = state;
+    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
     const combobox = {
         activeOption: undefined,
         appearance,
@@ -31,7 +31,8 @@ function useComboboxContextValues(state) {
         selectedOptions,
         selectOption,
         setActiveOption: ()=>null,
-        onOptionClick
+        onOptionClick,
+        onActiveDescendantChange
     };
     const activeDescendant = _react.useMemo(()=>({
             controller: activeDescendantController

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

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick } = state;\n    const combobox = {\n        activeOption: undefined,\n        appearance,\n        focusVisible: false,\n        open,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        setOpen,\n        size\n    };\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        onOptionClick\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        combobox,\n        activeDescendant,\n        listbox\n    };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAAEC,aAAa,EAAE,GAAGT;IACtI,MAAMU,WAAW;QACbC,cAAcC;QACdX;QACAY,cAAc;QACdX;QACAC;QACAC;QACAC;QACAS,iBAAiB,IAAI;QACrBR;QACAC;IACJ;IACA,MAAMQ,UAAU;QACZJ,cAAcC;QACdC,cAAc;QACdV;QACAC;QACAC;QACAS,iBAAiB,IAAI;QACrBL;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYX;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHE;QACAM;QACAD;IACJ;AACJ"}
+{"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;\n    const combobox = {\n        activeOption: undefined,\n        appearance,\n        focusVisible: false,\n        open,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        setOpen,\n        size\n    };\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        onOptionClick,\n        onActiveDescendantChange\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        combobox,\n        activeDescendant,\n        listbox\n    };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAAEC,aAAa,EAAEC,wBAAwB,EAAE,GAAGV;IAChK,MAAMW,WAAW;QACbC,cAAcC;QACdZ;QACAa,cAAc;QACdZ;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBT;QACAC;IACJ;IACA,MAAMS,UAAU;QACZJ,cAAcC;QACdC,cAAc;QACdX;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBN;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYZ;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHG;QACAM;QACAD;IACJ;AACJ"}

package/lib-commonjs/contexts/useListboxContextValues.js

@@ -18,6 +18,7 @@ function useListboxContextValues(state) {
     // get register/unregister functions from parent combobox context
     const parentRegisterOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
     const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
+    const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
     const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;
     const listbox = {
         activeOption: undefined,
@@ -27,7 +28,8 @@ function useListboxContextValues(state) {
         selectedOptions,
         selectOption,
         setActiveOption: ()=>undefined,
-        onOptionClick
+        onOptionClick,
+        onActiveDescendantChange
     };
     const activeDescendant = _react.useMemo(()=>({
             controller: activeDescendantController

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

@@ -1 +1 @@
-{"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\nexport function useListboxContextValues(state) {\n    const hasListboxContext = useHasParentContext(ListboxContext);\n    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n    // get register/unregister functions from parent combobox context\n    const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        multiselect,\n        registerOption: registerOptionValue,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>undefined,\n        onOptionClick\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        listbox,\n        activeDescendant\n    };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACa;gCACuB;AACpD,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGR;IACnG,iEAAiE;IACjE,MAAMS,uBAAuBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACzE,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IACvE,MAAMS,UAAU;QACZC,cAAcC;QACdC,cAAc;QACdb;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAIF;QACrBJ;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYd;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHM;QACAK;IACJ;AACJ"}
+{"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\nexport function useListboxContextValues(state) {\n    const hasListboxContext = useHasParentContext(ListboxContext);\n    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n    // get register/unregister functions from parent combobox context\n    const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);\n    const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        multiselect,\n        registerOption: registerOptionValue,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>undefined,\n        onOptionClick,\n        onActiveDescendantChange\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        listbox,\n        activeDescendant\n    };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACa;gCACuB;AACpD,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGR;IACnG,iEAAiE;IACjE,MAAMS,uBAAuBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIE,wBAAwB;IAC/F,MAAMC,sBAAsBb,oBAAoBQ,uBAAuBJ;IACvE,MAAMU,UAAU;QACZC,cAAcC;QACdC,cAAc;QACdd;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAIF;QACrBL;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYf;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHO;QACAK;IACJ;AACJ"}

package/lib-commonjs/utils/useComboboxBaseState.js

@@ -15,7 +15,7 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useOptionCollection = require("../utils/useOptionCollection");
 const _useSelection = require("../utils/useSelection");
 const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
     const { getOptionsMatchingValue } = optionCollection;
     const { getOptionById } = optionCollection;
@@ -154,8 +154,19 @@ const useComboboxBaseState = (props)=>{
     }, [
         open,
         children,
-        activeDescendantController
+        activeDescendantController,
+        getOptionById
     ]);
+    const onActiveDescendantChange = (0, _reactutilities.useEventCallback)((event)=>{
+        const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;
+        const nextOption = optionCollection.getOptionById(event.detail.id);
+        onActiveOptionChange === null || onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(event, {
+            event,
+            type: 'change',
+            previousOption,
+            nextOption
+        });
+    });
     return {
         ...optionCollection,
         freeform,
@@ -184,6 +195,7 @@ const useComboboxBaseState = (props)=>{
             if (!multiselect) {
                 setOpen(e, false);
             }
-        })
+        }),
+        onActiveDescendantChange
     };
 };

package/lib-commonjs/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionsMatchingValue } = optionCollection;\n    const { getOptionById } = optionCollection;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : undefined;\n    }, [\n        activeDescendantController,\n        getOptionById\n    ]);\n    // Keeping some kind of backwards compatible functionality here\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const UNSAFE_activeOption = getActiveOption();\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const UNSAFE_setActiveOption = React.useCallback((option)=>{\n        let nextOption = undefined;\n        if (typeof option === 'function') {\n            const activeOption = getActiveOption();\n            nextOption = option(activeOption);\n        }\n        if (nextOption) {\n            activeDescendantController.focus(nextOption.id);\n        } else {\n            activeDescendantController.blur();\n        }\n    }, [\n        activeDescendantController,\n        getActiveOption\n    ]);\n    // track whether keyboard focus outline should be shown\n    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n    const [focusVisible, setFocusVisible] = React.useState(false);\n    // track focused state to conditionally render collapsed listbox\n    // when the trigger is focused - the listbox should but hidden until the open state is changed\n    const [hasFocus, setHasFocus] = React.useState(false);\n    const ignoreNextBlur = React.useRef(false);\n    // calculate value based on props, internal value changes, and selected options\n    const isFirstMount = useFirstMount();\n    const [controllableValue, setValue] = useControllableState({\n        state: props.value,\n        initialState: undefined\n    });\n    const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n    // reset any typed value when an option is selected\n    const selectOption = React.useCallback((ev, option)=>{\n        ReactDOM.unstable_batchedUpdates(()=>{\n            setValue(undefined);\n            baseSelectOption(ev, option);\n        });\n    }, [\n        setValue,\n        baseSelectOption\n    ]);\n    const value = React.useMemo(()=>{\n        // don't compute the value if it is defined through props or setValue,\n        if (controllableValue !== undefined) {\n            return controllableValue;\n        }\n        // handle defaultValue here, so it is overridden by selection\n        if (isFirstMount && props.defaultValue !== undefined) {\n            return props.defaultValue;\n        }\n        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n            return selectedOptions.includes(optionValue);\n        }).map((option)=>option.text);\n        if (multiselect) {\n            // editable inputs should not display multiple selected options in the input as text\n            return editable ? '' : selectedOptionsText.join(', ');\n        }\n        return selectedOptionsText[0];\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        controllableValue,\n        editable,\n        getOptionsMatchingValue,\n        multiselect,\n        props.defaultValue,\n        selectedOptions\n    ]);\n    // Handle open state, which is shared with options in context\n    const [open, setOpenState] = useControllableState({\n        state: props.open,\n        defaultState: props.defaultOpen,\n        initialState: false\n    });\n    const setOpen = React.useCallback((event, newState)=>{\n        if (disabled) {\n            return;\n        }\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n            open: newState\n        });\n        ReactDOM.unstable_batchedUpdates(()=>{\n            if (!newState && !freeform) {\n                setValue(undefined);\n            }\n            setOpenState(newState);\n        });\n    }, [\n        onOpenChange,\n        setOpenState,\n        setValue,\n        freeform,\n        disabled\n    ]);\n    // update active option based on change in open state\n    React.useEffect(()=>{\n        if (open) {\n            // if it is single-select and there is a selected option, start at the selected option\n            if (!multiselect && selectedOptions.length > 0) {\n                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {\n                    activeDescendantController.focus(selectedOption.id);\n                }\n            }\n        } else {\n            activeDescendantController.blur();\n        }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        open,\n        activeDescendantController\n    ]);\n    // Fallback focus when children are updated in an open popover results in no item being focused\n    React.useEffect(()=>{\n        if (open) {\n            if (!activeDescendantController.active()) {\n                activeDescendantController.first();\n            }\n        }\n    // this should only be run in response to changes in the open state or children\n    }, [\n        open,\n        children,\n        activeDescendantController\n    ]);\n    return {\n        ...optionCollection,\n        freeform,\n        disabled,\n        selectOption,\n        clearSelection,\n        selectedOptions,\n        activeOption: UNSAFE_activeOption,\n        appearance,\n        clearable,\n        focusVisible,\n        ignoreNextBlur,\n        inlinePopup,\n        mountNode,\n        open,\n        hasFocus,\n        setActiveOption: UNSAFE_setActiveOption,\n        setFocusVisible,\n        setHasFocus,\n        setOpen,\n        setValue,\n        size,\n        value,\n        multiselect,\n        onOptionClick: useEventCallback((e)=>{\n            if (!multiselect) {\n                setOpen(e, false);\n            }\n        })\n    };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption","onOptionClick","useEventCallback","e"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionsMatchingValue } = optionCollection;\n    const { getOptionById } = optionCollection;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : undefined;\n    }, [\n        activeDescendantController,\n        getOptionById\n    ]);\n    // Keeping some kind of backwards compatible functionality here\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const UNSAFE_activeOption = getActiveOption();\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    const UNSAFE_setActiveOption = React.useCallback((option)=>{\n        let nextOption = undefined;\n        if (typeof option === 'function') {\n            const activeOption = getActiveOption();\n            nextOption = option(activeOption);\n        }\n        if (nextOption) {\n            activeDescendantController.focus(nextOption.id);\n        } else {\n            activeDescendantController.blur();\n        }\n    }, [\n        activeDescendantController,\n        getActiveOption\n    ]);\n    // track whether keyboard focus outline should be shown\n    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n    const [focusVisible, setFocusVisible] = React.useState(false);\n    // track focused state to conditionally render collapsed listbox\n    // when the trigger is focused - the listbox should but hidden until the open state is changed\n    const [hasFocus, setHasFocus] = React.useState(false);\n    const ignoreNextBlur = React.useRef(false);\n    // calculate value based on props, internal value changes, and selected options\n    const isFirstMount = useFirstMount();\n    const [controllableValue, setValue] = useControllableState({\n        state: props.value,\n        initialState: undefined\n    });\n    const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n    // reset any typed value when an option is selected\n    const selectOption = React.useCallback((ev, option)=>{\n        ReactDOM.unstable_batchedUpdates(()=>{\n            setValue(undefined);\n            baseSelectOption(ev, option);\n        });\n    }, [\n        setValue,\n        baseSelectOption\n    ]);\n    const value = React.useMemo(()=>{\n        // don't compute the value if it is defined through props or setValue,\n        if (controllableValue !== undefined) {\n            return controllableValue;\n        }\n        // handle defaultValue here, so it is overridden by selection\n        if (isFirstMount && props.defaultValue !== undefined) {\n            return props.defaultValue;\n        }\n        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n            return selectedOptions.includes(optionValue);\n        }).map((option)=>option.text);\n        if (multiselect) {\n            // editable inputs should not display multiple selected options in the input as text\n            return editable ? '' : selectedOptionsText.join(', ');\n        }\n        return selectedOptionsText[0];\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        controllableValue,\n        editable,\n        getOptionsMatchingValue,\n        multiselect,\n        props.defaultValue,\n        selectedOptions\n    ]);\n    // Handle open state, which is shared with options in context\n    const [open, setOpenState] = useControllableState({\n        state: props.open,\n        defaultState: props.defaultOpen,\n        initialState: false\n    });\n    const setOpen = React.useCallback((event, newState)=>{\n        if (disabled) {\n            return;\n        }\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n            open: newState\n        });\n        ReactDOM.unstable_batchedUpdates(()=>{\n            if (!newState && !freeform) {\n                setValue(undefined);\n            }\n            setOpenState(newState);\n        });\n    }, [\n        onOpenChange,\n        setOpenState,\n        setValue,\n        freeform,\n        disabled\n    ]);\n    // update active option based on change in open state\n    React.useEffect(()=>{\n        if (open) {\n            // if it is single-select and there is a selected option, start at the selected option\n            if (!multiselect && selectedOptions.length > 0) {\n                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {\n                    activeDescendantController.focus(selectedOption.id);\n                }\n            }\n        } else {\n            activeDescendantController.blur();\n        }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        open,\n        activeDescendantController\n    ]);\n    // Fallback focus when children are updated in an open popover results in no item being focused\n    React.useEffect(()=>{\n        if (open) {\n            if (!activeDescendantController.active()) {\n                activeDescendantController.first();\n            }\n        }\n    // this should only be run in response to changes in the open state or children\n    }, [\n        open,\n        children,\n        activeDescendantController,\n        getOptionById\n    ]);\n    const onActiveDescendantChange = useEventCallback((event)=>{\n        const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n        const nextOption = optionCollection.getOptionById(event.detail.id);\n        onActiveOptionChange === null || onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(event, {\n            event,\n            type: 'change',\n            previousOption,\n            nextOption\n        });\n    });\n    return {\n        ...optionCollection,\n        freeform,\n        disabled,\n        selectOption,\n        clearSelection,\n        selectedOptions,\n        activeOption: UNSAFE_activeOption,\n        appearance,\n        clearable,\n        focusVisible,\n        ignoreNextBlur,\n        inlinePopup,\n        mountNode,\n        open,\n        hasFocus,\n        setActiveOption: UNSAFE_setActiveOption,\n        setFocusVisible,\n        setHasFocus,\n        setOpen,\n        setValue,\n        size,\n        value,\n        multiselect,\n        onOptionClick: useEventCallback((e)=>{\n            if (!multiselect) {\n                setOpen(e, false);\n            }\n        }),\n        onActiveDescendantChange\n    };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;oEACG;gCAC4C;qCAClC;8BACP;AAIlB,MAAMA,uBAAuB,CAACC;IACrC,MAAM,EAAEC,aAAa,SAAS,EAAEC,QAAQ,EAAEC,YAAY,KAAK,EAAEC,WAAW,KAAK,EAAEC,cAAc,KAAK,EAAEC,YAAYC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,QAAQ,EAAEC,0BAA0B,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,uBAAuB,IAAI,EAAE,GAAGd;IACvQ,MAAMe,mBAAmBC,IAAAA,wCAAmB;IAC5C,MAAM,EAAEC,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,aAAa,EAAE,GAAGH;IAC1B,MAAMI,kBAAkBC,OAAMC,WAAW,CAAC;QACtC,MAAMC,iBAAiBX,2BAA2BY,MAAM;QACxD,OAAOD,iBAAiBJ,cAAcI,kBAAkBf;IAC5D,GAAG;QACCI;QACAO;KACH;IACD,+DAA+D;IAC/D,gEAAgE;IAChE,MAAMM,sBAAsBL;IAC5B,gEAAgE;IAChE,MAAMM,yBAAyBL,OAAMC,WAAW,CAAC,CAACK;QAC9C,IAAIC,aAAapB;QACjB,IAAI,OAAOmB,WAAW,YAAY;YAC9B,MAAME,eAAeT;YACrBQ,aAAaD,OAAOE;QACxB;QACA,IAAID,YAAY;YACZhB,2BAA2BkB,KAAK,CAACF,WAAWG,EAAE;QAClD,OAAO;YACHnB,2BAA2BoB,IAAI;QACnC;IACJ,GAAG;QACCpB;QACAQ;KACH;IACD,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACa,cAAcC,gBAAgB,GAAGb,OAAMc,QAAQ,CAAC;IACvD,gEAAgE;IAChE,8FAA8F;IAC9F,MAAM,CAACC,UAAUC,YAAY,GAAGhB,OAAMc,QAAQ,CAAC;IAC/C,MAAMG,iBAAiBjB,OAAMkB,MAAM,CAAC;IACpC,+EAA+E;IAC/E,MAAMC,eAAeC,IAAAA,6BAAa;IAClC,MAAM,CAACC,mBAAmBC,SAAS,GAAGC,IAAAA,oCAAoB,EAAC;QACvDC,OAAO5C,MAAM6C,KAAK;QAClBC,cAAcvC;IAClB;IACA,MAAM,EAAEwC,eAAe,EAAEC,cAAcC,gBAAgB,EAAEC,cAAc,EAAE,GAAGC,IAAAA,0BAAY,EAACnD;IACzF,mDAAmD;IACnD,MAAMgD,eAAe5B,OAAMC,WAAW,CAAC,CAAC+B,IAAI1B;QACxC2B,UAASC,uBAAuB,CAAC;YAC7BZ,SAASnC;YACT0C,iBAAiBG,IAAI1B;QACzB;IACJ,GAAG;QACCgB;QACAO;KACH;IACD,MAAMJ,QAAQzB,OAAMmC,OAAO,CAAC;QACxB,sEAAsE;QACtE,IAAId,sBAAsBlC,WAAW;YACjC,OAAOkC;QACX;QACA,6DAA6D;QAC7D,IAAIF,gBAAgBvC,MAAMwD,YAAY,KAAKjD,WAAW;YAClD,OAAOP,MAAMwD,YAAY;QAC7B;QACA,MAAMC,sBAAsBxC,wBAAwB,CAACyC;YACjD,OAAOX,gBAAgBY,QAAQ,CAACD;QACpC,GAAGE,GAAG,CAAC,CAAClC,SAASA,OAAOmC,IAAI;QAC5B,IAAIrD,aAAa;YACb,oFAAoF;YACpF,OAAOJ,WAAW,KAAKqD,oBAAoBK,IAAI,CAAC;QACpD;QACA,OAAOL,mBAAmB,CAAC,EAAE;IACjC,kDAAkD;IAClD,0EAA0E;IAC1E,4CAA4C;IAC5C,uDAAuD;IACvD,GAAG;QACChB;QACArC;QACAa;QACAT;QACAR,MAAMwD,YAAY;QAClBT;KACH;IACD,6DAA6D;IAC7D,MAAM,CAACgB,MAAMC,aAAa,GAAGrB,IAAAA,oCAAoB,EAAC;QAC9CC,OAAO5C,MAAM+D,IAAI;QACjBE,cAAcjE,MAAMkE,WAAW;QAC/BpB,cAAc;IAClB;IACA,MAAMqB,UAAU/C,OAAMC,WAAW,CAAC,CAAC+C,OAAOC;QACtC,IAAIxD,UAAU;YACV;QACJ;QACAJ,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAa2D,OAAO;YAC5EL,MAAMM;QACV;QACAhB,UAASC,uBAAuB,CAAC;YAC7B,IAAI,CAACe,YAAY,CAACzD,UAAU;gBACxB8B,SAASnC;YACb;YACAyD,aAAaK;QACjB;IACJ,GAAG;QACC5D;QACAuD;QACAtB;QACA9B;QACAC;KACH;IACD,qDAAqD;IACrDO,OAAMkD,SAAS,CAAC;QACZ,IAAIP,MAAM;YACN,sFAAsF;YACtF,IAAI,CAACvD,eAAeuC,gBAAgBwB,MAAM,GAAG,GAAG;gBAC5C,MAAMC,iBAAiBvD,wBAAwB,CAACwD,IAAIA,MAAM1B,eAAe,CAAC,EAAE,EAAE2B,GAAG;gBACjF,IAAIF,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAe1C,EAAE,EAAE;oBACnFnB,2BAA2BkB,KAAK,CAAC2C,eAAe1C,EAAE;gBACtD;YACJ;QACJ,OAAO;YACHnB,2BAA2BoB,IAAI;QACnC;IACJ,+EAA+E;IAC/E,uDAAuD;IACvD,GAAG;QACCgC;QACApD;KACH;IACD,+FAA+F;IAC/FS,OAAMkD,SAAS,CAAC;QACZ,IAAIP,MAAM;YACN,IAAI,CAACpD,2BAA2BY,MAAM,IAAI;gBACtCZ,2BAA2BgE,KAAK;YACpC;QACJ;IACJ,+EAA+E;IAC/E,GAAG;QACCZ;QACA7D;QACAS;QACAO;KACH;IACD,MAAM0D,2BAA2BC,IAAAA,gCAAgB,EAAC,CAACT;QAC/C,MAAMU,iBAAiBV,MAAMW,MAAM,CAACC,UAAU,GAAGjE,iBAAiBG,aAAa,CAACkD,MAAMW,MAAM,CAACC,UAAU,IAAI;QAC3G,MAAMrD,aAAaZ,iBAAiBG,aAAa,CAACkD,MAAMW,MAAM,CAACjD,EAAE;QACjEhB,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBsD,OAAO;YACpGA;YACAa,MAAM;YACNH;YACAnD;QACJ;IACJ;IACA,OAAO;QACH,GAAGZ,gBAAgB;QACnBH;QACAC;QACAmC;QACAE;QACAH;QACAnB,cAAcJ;QACdvB;QACAE;QACA6B;QACAK;QACAhC;QACAC;QACAyD;QACA5B;QACA+C,iBAAiBzD;QACjBQ;QACAG;QACA+B;QACAzB;QACAhC;QACAmC;QACArC;QACA2E,eAAeN,IAAAA,gCAAgB,EAAC,CAACO;YAC7B,IAAI,CAAC5E,aAAa;gBACd2D,QAAQiB,GAAG;YACf;QACJ;QACAR;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.10.1",
+  "version": "9.11.1",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,18 +33,18 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.10.5",
+    "@fluentui/react-aria": "^9.11.1",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.58",
-    "@fluentui/react-field": "^9.1.62",
-    "@fluentui/react-icons": "^2.0.235",
-    "@fluentui/react-jsx-runtime": "^9.0.36",
-    "@fluentui/react-portal": "^9.4.21",
-    "@fluentui/react-positioning": "^9.14.4",
-    "@fluentui/react-shared-contexts": "^9.17.0",
-    "@fluentui/react-tabster": "^9.20.1",
+    "@fluentui/react-context-selector": "^9.1.59",
+    "@fluentui/react-field": "^9.1.64",
+    "@fluentui/react-icons": "^2.0.237",
+    "@fluentui/react-jsx-runtime": "^9.0.37",
+    "@fluentui/react-portal": "^9.4.23",
+    "@fluentui/react-positioning": "^9.14.5",
+    "@fluentui/react-shared-contexts": "^9.18.0",
+    "@fluentui/react-tabster": "^9.21.1",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.7",
+    "@fluentui/react-utilities": "^9.18.8",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },