@fluentui/react-combobox 9.7.5 → 9.8.0

package/CHANGELOG.md

@@ -1,19 +1,40 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 06 Feb 2024 17:52:10 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Feb 2024 14:15:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.8.0)
+
+Tue, 20 Feb 2024 14:15:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.5..@fluentui/react-combobox_v9.8.0)
+
+### Minor changes
+
+- feat: Decouple activedescendant handling from react state ([PR #30539](https://github.com/microsoft/fluentui/pull/30539) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-aria to v9.9.0 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.52 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-field to v9.1.54 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.30 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-portal to v9.4.14 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-positioning to v9.13.4 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-tabster to v9.19.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+
+### Patches
+
+- chore: disable consistent-callback-type lint rule for existing callbacks ([PR #30293](https://github.com/microsoft/fluentui/pull/30293) by yuanboxue@microsoft.com)
+
 ## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.5)
 
-Tue, 06 Feb 2024 17:52:10 GMT 
+Tue, 06 Feb 2024 17:55:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.4..@fluentui/react-combobox_v9.7.5)
 
 ### Patches
 
-- Bump @fluentui/react-portal to v9.4.13 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
-- Bump @fluentui/react-positioning to v9.13.3 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
-- Bump @fluentui/react-tabster to v9.19.0 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
+- Bump @fluentui/react-portal to v9.4.13 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
+- Bump @fluentui/react-positioning to v9.13.3 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
+- Bump @fluentui/react-tabster to v9.19.0 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
 
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.4)
 

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 
+import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
+import type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { FC } from 'react';
@@ -19,6 +21,7 @@ export declare const Combobox: ForwardRefComponent<ComboboxProps>;
 
 declare type ComboboxBaseContextValues = {
     combobox: ComboboxContextValue;
+    activeDescendant: ActiveDescendantContextValue;
 };
 
 /**
@@ -92,18 +95,29 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
  * State used in rendering Combobox
  */
 declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
+    /**
+     * @deprecated - no longer used internally
+     * @see activeDescendantController.active() instead
+     */
     activeOption?: OptionValue;
-    focusVisible: boolean;
     /**
-     * whether the combobox/dropdown currently has focus
+     * @deprecated - no longer used internally
      */
-    hasFocus: boolean;
+    focusVisible: boolean;
     /**
      * @deprecated - no longer used internally
      * Whether the next blur event should be ignored, and the combobox/dropdown will not close.
      */
     ignoreNextBlur: React_2.MutableRefObject<boolean>;
+    /**
+     * @deprecated - no longer used internally
+     * @see activeDescendantController.focus(id) instead
+     */
     setActiveOption: React_2.Dispatch<React_2.SetStateAction<OptionValue | undefined>>;
+    /**
+     * whether the combobox/dropdown currently has focus
+     */
+    hasFocus: boolean;
     setFocusVisible(focusVisible: boolean): void;
     setHasFocus(hasFocus: boolean): void;
     setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
@@ -146,6 +160,7 @@ export declare type ComboboxSlots = {
  */
 export declare type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState & {
     showClearIcon?: boolean;
+    activeDescendantController: ActiveDescendantImperativeRef;
 };
 
 /**
@@ -180,6 +195,7 @@ export declare type DropdownSlots = {
 export declare type DropdownState = ComponentState<DropdownSlots> & ComboboxBaseState & {
     placeholderVisible: boolean;
     showClearButton?: boolean;
+    activeDescendantController: ActiveDescendantImperativeRef;
 };
 
 /**
@@ -196,6 +212,7 @@ export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'f
 
 export declare type ListboxContextValues = {
     listbox: ListboxContextValue;
+    activeDescendant: ActiveDescendantContextValue;
 };
 
 /**
@@ -213,10 +230,22 @@ export declare type ListboxSlots = {
  * State used in rendering Listbox
  */
 export declare type ListboxState = ComponentState<ListboxSlots> & OptionCollectionState & Pick<SelectionProps, 'multiselect'> & SelectionState & {
+    /**
+     * @deprecated - no longer used internally
+     * @see activeDescendantController.active()
+     */
     activeOption?: OptionValue;
+    /**
+     * @deprecated - no longer used internally
+     */
     focusVisible: boolean;
-    selectOption(event: SelectionEvents, option: OptionValue): void;
+    /**
+     * @deprecated - no longer used internally
+     * @see activeDescendantController.focus(id)
+     */
     setActiveOption(option?: OptionValue): void;
+    selectOption(event: SelectionEvents, option: OptionValue): void;
+    activeDescendantController: ActiveDescendantImperativeRef;
 };
 
 /**
@@ -228,16 +257,22 @@ export { Option_2 as Option }
 export declare const optionClassNames: SlotClassNames<OptionSlots>;
 
 declare type OptionCollectionState = {
-    /** The total number of options in the collection. */
-    getCount: () => number;
-    /** Returns the index of an option by key. */
+    /**
+     * @deprecated - no longer used internally
+     */
     getIndexOfId(id: string): number;
-    /** Returns the option data for the nth option. */
+    /**
+     * @deprecated - no longer used internally
+     */
     getOptionAtIndex(index: number): OptionValue | undefined;
+    /**
+     * @deprecated - no longer used internally
+     */
+    getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];
+    /** The total number of options in the collection. */
+    getCount: () => number;
     /** Returns the option data by key. */
     getOptionById(id: string): OptionValue | undefined;
-    /** Returns an array of options filtered by a value matching function against the option's text string. */
-    getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];
     /** Returns an array of options filtered by a value matching function against the option's value string. */
     getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
     /** The unordered option data. */
@@ -311,7 +346,13 @@ export declare type OptionSlots = {
  * State used in rendering Option
  */
 export declare type OptionState = ComponentState<OptionSlots> & Pick<OptionProps, 'disabled'> & {
+    /**
+     * @deprecated - no longer used internally
+     */
     active: boolean;
+    /**
+     * @deprecated - no longer used internally
+     */
     focusVisible: boolean;
     multiselect?: boolean;
     selected: boolean;
@@ -394,7 +435,9 @@ declare type SelectionState = {
  */
 export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
 
-export declare function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues;
+export declare function useComboboxContextValues(state: ComboboxBaseState & {
+    activeDescendantController: ActiveDescendantImperativeRef;
+}): ComboboxBaseContextValues;
 
 export declare function useComboboxFilter<T extends {
     children: React_2.ReactNode;

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 {\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    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\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  };\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  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    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\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"}

package/lib/components/Combobox/renderCombobox.js

@@ -1,5 +1,6 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { Portal } from '@fluentui/react-portal';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
 import { assertSlots } from '@fluentui/react-utilities';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
@@ -7,17 +8,20 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
  */ export const renderCombobox_unstable = (state, contextValues)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsx(state.root, {
-        children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
-            value: contextValues.combobox,
-            children: [
-                /*#__PURE__*/ _jsx(state.input, {}),
-                state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
-                /*#__PURE__*/ _jsx(state.expandIcon, {}),
-                state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
-                    mountNode: state.mountNode,
-                    children: /*#__PURE__*/ _jsx(state.listbox, {})
-                }))
-            ]
+        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
+                value: contextValues.combobox,
+                children: [
+                    /*#__PURE__*/ _jsx(state.input, {}),
+                    state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
+                    /*#__PURE__*/ _jsx(state.expandIcon, {}),
+                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
+                        mountNode: state.mountNode,
+                        children: /*#__PURE__*/ _jsx(state.listbox, {})
+                    }))
+                ]
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.input />\n        {state.clearIcon && <state.clearIcon />}\n        <state.expandIcon />\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","Provider","value","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,KAACL,MAAMM,KAAK;gBACXN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;8BACpC,KAACP,MAAMQ,UAAU;gBAChBR,MAAMS,OAAO,IACXT,CAAAA,MAAMU,WAAW,iBAChB,KAACV,MAAMS,OAAO,sBAEd,KAACb;oBAAOe,WAAWX,MAAMW,SAAS;8BAChC,cAAA,KAACX,MAAMS,OAAO;kBAElB;;;;AAIV,EAAE"}
+{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ComboboxContext.Provider value={contextValues.combobox}>\n          <state.input />\n          {state.clearIcon && <state.clearIcon />}\n          <state.expandIcon />\n          {state.listbox &&\n            (state.inlinePopup ? (\n              <state.listbox />\n            ) : (\n              <Portal mountNode={state.mountNode}>\n                <state.listbox />\n              </Portal>\n            ))}\n        </ComboboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","Provider","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,MAACN,gBAAgBO,QAAQ;gBAACF,OAAOF,cAAcK,QAAQ;;kCACrD,KAACN,MAAMO,KAAK;oBACXP,MAAMQ,SAAS,kBAAI,KAACR,MAAMQ,SAAS;kCACpC,KAACR,MAAMS,UAAU;oBAChBT,MAAMU,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMU,OAAO,sBAEd,KAACf;wBAAOiB,WAAWZ,MAAMY,SAAS;kCAChC,cAAA,KAACZ,MAAMU,OAAO;sBAElB;;;;;AAKZ,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useActiveDescendant } from '@fluentui/react-aria';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
@@ -7,6 +8,7 @@ import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { Listbox } from '../Listbox/Listbox';
 import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useInputTriggerSlot } from './useInputTriggerSlot';
+import { optionClassNames } from '../Option/useOptionStyles.styles';
 /**
  * Create the state required to render Combobox.
  *
@@ -23,9 +25,13 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
         supportsRequired: true,
         supportsSize: true
     });
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
+        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+    });
     const baseState = useComboboxBaseState({
         ...props,
-        editable: true
+        editable: true,
+        activeDescendantController
     });
     const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
@@ -54,7 +60,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
         setOpen(ev, newState);
     };
     const triggerRef = React.useRef(null);
-    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {
+    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
         state: baseState,
         triggerRef,
         defaultProps: {
@@ -62,7 +68,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
         }
     });
     var _props_input;
-    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, ref), {
+    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {
         state: baseState,
         freeform,
         defaultProps: {
@@ -70,7 +76,8 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
             value: value !== null && value !== void 0 ? value : '',
             'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
-        }
+        },
+        activeDescendantController
     });
     const rootSlot = slot.always(props.root, {
         defaultProps: {
@@ -110,6 +117,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
             elementType: 'span'
         }),
         showClearIcon,
+        activeDescendantController,
         ...baseState
     };
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    clearable,\n    clearSelection,\n    multiselect,\n    open,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    setValue,\n    value,\n    hasFocus,\n  } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n  const {\n    clearable,\n    clearSelection,\n    multiselect,\n    open,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    setValue,\n    value,\n    hasFocus,\n  } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -8,10 +8,12 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
  */ export function useInputTriggerSlot(triggerFromProps, ref, options) {
-    const { state: { open, value, activeOption, selectOption, setValue, setActiveOption, setFocusVisible, multiselect, selectedOptions, clearSelection, getOptionsMatchingText, getIndexOfId, setOpen }, freeform, defaultProps } = options;
+    const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
     const onBlur = (ev)=>{
         // handle selection and updating value if freeform is false
         if (!open && !freeform) {
+            const activeOptionId = activeDescendantController.active();
+            const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
             // select matching option, if the value fully matches
             if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
                 selectOption(ev, activeOption);
@@ -23,18 +25,19 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
     const getOptionFromInput = (inputValue)=>{
         const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
         if (!searchString || searchString.length === 0) {
+            activeDescendantController.blur();
             return;
         }
         const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
-        const matches = getOptionsMatchingText(matcher);
-        // return first matching option after the current active option, looping back to the top
-        if (matches.length > 1 && activeOption) {
-            const startIndex = getIndexOfId(activeOption.id);
-            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
-            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+        const match = activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        });
+        if (!match) {
+            activeDescendantController.blur();
+            return undefined;
         }
-        var _matches_;
-        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+        return getOptionById(match);
     };
     // update value and active option based on input
     const onChange = (ev)=>{
@@ -43,8 +46,6 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
         setValue(inputValue);
         // handle updating active option based on input
         const matchingOption = getOptionFromInput(inputValue);
-        setActiveOption(matchingOption);
-        setFocusVisible(true);
         // clear selection for single-select if the input value no longer matches the selection
         if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
             clearSelection(ev);
@@ -53,7 +54,8 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
     const trigger = useTriggerSlot(triggerFromProps, ref, {
         state: options.state,
         defaultProps,
-        elementType: 'input'
+        elementType: 'input',
+        activeDescendantController
     });
     trigger.onChange = mergeCallbacks(trigger.onChange, onChange);
     trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);

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

@@ -1 +1 @@
-{"version":3,"sources":["useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionsMatchingText'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps: Partial<ComboboxProps>;\n};\n\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      activeOption,\n      selectOption,\n      setValue,\n      setActiveOption,\n      setFocusVisible,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionsMatchingText,\n      getIndexOfId,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n  } = options;\n\n  const onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  // update value and active option based on input\n  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && ev.key === ' ') {\n      triggerFromProps?.onKeyDown?.(ev);\n      return;\n    }\n\n    defaultOnKeyDown?.(ev);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","activeOption","selectOption","setValue","setActiveOption","setFocusVisible","multiselect","selectedOptions","clearSelection","getOptionsMatchingText","getIndexOfId","setOpen","freeform","defaultProps","onBlur","ev","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}
+{"version":3,"sources":["useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && ev.key === ' ') {\n      triggerFromProps?.onKeyDown?.(ev);\n      return;\n    }\n\n    defaultOnKeyDown?.(ev);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","ev","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}

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 {\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  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"names":[],"mappings":"AAAA,WA8CgE"}
+{"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  ComboboxBaseState & {\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"}

package/lib/components/Dropdown/renderDropdown.js

@@ -1,27 +1,31 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { Portal } from '@fluentui/react-portal';
 import { assertSlots } from '@fluentui/react-utilities';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Dropdown
  */ export const renderDropdown_unstable = (state, contextValues)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsx(state.root, {
-        children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
-            value: contextValues.combobox,
-            children: [
-                /*#__PURE__*/ _jsxs(state.button, {
-                    children: [
-                        state.button.children,
-                        state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
-                    ]
-                }),
-                state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),
-                state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
-                    mountNode: state.mountNode,
-                    children: /*#__PURE__*/ _jsx(state.listbox, {})
-                }))
-            ]
+        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
+                value: contextValues.combobox,
+                children: [
+                    /*#__PURE__*/ _jsxs(state.button, {
+                        children: [
+                            state.button.children,
+                            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
+                        ]
+                    }),
+                    state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),
+                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
+                        mountNode: state.mountNode,
+                        children: /*#__PURE__*/ _jsx(state.listbox, {})
+                    }))
+                ]
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.button>\n          {state.button.children}\n          {state.expandIcon && <state.expandIcon />}\n        </state.button>\n        {state.clearButton && <state.clearButton />}\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","root","Provider","value","combobox","button","children","expandIcon","clearButton","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,MAACL,MAAMM,MAAM;;wBACVN,MAAMM,MAAM,CAACC,QAAQ;wBACrBP,MAAMQ,UAAU,kBAAI,KAACR,MAAMQ,UAAU;;;gBAEvCR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;gBACvCT,MAAMU,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMU,OAAO,sBAEd,KAACd;oBAAOgB,WAAWZ,MAAMY,SAAS;8BAChC,cAAA,KAACZ,MAAMU,OAAO;kBAElB;;;;AAIV,EAAE"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ComboboxContext.Provider value={contextValues.combobox}>\n          <state.button>\n            {state.button.children}\n            {state.expandIcon && <state.expandIcon />}\n          </state.button>\n          {state.clearButton && <state.clearButton />}\n          {state.listbox &&\n            (state.inlinePopup ? (\n              <state.listbox />\n            ) : (\n              <Portal mountNode={state.mountNode}>\n                <state.listbox />\n              </Portal>\n            ))}\n        </ComboboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","combobox","button","children","expandIcon","clearButton","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACL;YAAgCM,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,MAACN,gBAAgBO,QAAQ;gBAACF,OAAOF,cAAcK,QAAQ;;kCACrD,MAACN,MAAMO,MAAM;;4BACVP,MAAMO,MAAM,CAACC,QAAQ;4BACrBR,MAAMS,UAAU,kBAAI,KAACT,MAAMS,UAAU;;;oBAEvCT,MAAMU,WAAW,kBAAI,KAACV,MAAMU,WAAW;oBACvCV,MAAMW,OAAO,IACXX,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMW,OAAO,sBAEd,KAAChB;wBAAOkB,WAAWb,MAAMa,SAAS;kCAChC,cAAA,KAACb,MAAMW,OAAO;sBAElB;;;;;AAKZ,EAAE"}