@fluentui/react-combobox 9.7.5 → 9.8.0

package/lib/components/Dropdown/useButtonTriggerSlot.js

@@ -7,40 +7,51 @@ 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 useButtonTriggerSlot(triggerFromProps, ref, options) {
-    const { state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible }, defaultProps } = options;
+    const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
     // jump to matching option based on typing
     const searchString = React.useRef('');
     const [setKeyTimeout, clearKeyTimeout] = useTimeout();
-    const getNextMatchingOption = ()=>{
-        // first check for matches for the full searchString
-        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;
-        let matches = getOptionsMatchingText(matcher);
-        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;
-        // if the dropdown is already open and the searchstring is a single character,
-        // then look after the current activeOption for letters
-        // this is so slowly typing the same letter will cycle through matches
-        if (open && searchString.current.length === 1) {
-            startIndex++;
+    const moveToNextMatchingOption = (matcher, opt = {
+        startFromNext: false
+    })=>{
+        const { startFromNext } = opt;
+        const activeOptionId = activeDescendantController.active();
+        const nextInOrder = activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        }, {
+            startFrom: startFromNext ? activeDescendantController.next({
+                passive: true
+            }) : activeOptionId
+        });
+        if (nextInOrder) {
+            return nextInOrder;
+        }
+        // Cycle back to first match
+        return activeDescendantController.find((id)=>{
+            const option = getOptionById(id);
+            return !!option && matcher(option.text);
+        });
+    };
+    const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{
+        if (moveToNextMatchingOption((optionText)=>{
+            return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;
+        }, {
+            // Slowly pressing the same key will cycle through options
+            startFromNext: searchString.current.length === 1
+        })) {
+            return;
         }
         // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
-        if (!matches.length) {
-            const letters = searchString.current.split('');
-            const allSameLetter = letters.length && letters.every((letter)=>letter === letters[0]);
+        if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{
+            return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;
+        }, {
             // if the search is all the same letter, cycle through options starting with that letter
-            if (allSameLetter) {
-                startIndex++;
-                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;
-                matches = getOptionsMatchingText(matcher);
-            }
-        }
-        // if there is an active option and multiple matches,
-        // return first matching option after the current active option, looping back to the top
-        if (matches.length > 1 && activeOption) {
-            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
-            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+            startFromNext: true
+        })) {
+            return;
         }
-        var _matches_;
-        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+        activeDescendantController.blur();
     };
     const onTriggerKeyDown = (ev)=>{
         // clear timeout, if it exists
@@ -54,16 +65,25 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
             }, 500);
             // update state
             !open && setOpen(ev, true);
-            const nextOption = getNextMatchingOption();
-            setActiveOption(nextOption);
-            setFocusVisible(true);
+            moveToNextMatchingOptionWithSameCharacterHandling();
         }
     };
     const trigger = useTriggerSlot(triggerFromProps, ref, {
         state: options.state,
         defaultProps,
-        elementType: 'button'
+        elementType: 'button',
+        activeDescendantController
     });
     trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);
     return trigger;
 }
+/**
+ * @returns - whether every character in the string is the same
+ */ function allCharactersSame(str) {
+    for(let i = 1; i < str.length; i++){
+        if (str[i] !== str[i - 1]) {
+            return false;
+        }
+    }
+    return true;
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useButtonTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { DropdownState } from './Dropdown.types';\n\ntype UsedDropdownState = UseTriggerSlotState & Pick<DropdownState, 'getOptionsMatchingText'>;\ntype UseButtonTriggerSlotOptions = {\n  state: UsedDropdownState;\n  defaultProps: unknown;\n};\n\n/*\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  const {\n    state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible },\n    defaultProps,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\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  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, { state: options.state, defaultProps, elementType: 'button' });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","activeOption","setOpen","getOptionsMatchingText","getIndexOfId","setActiveOption","setFocusVisible","defaultProps","searchString","useRef","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","current","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","undefined","onTriggerKeyDown","ev","key","nextOption","trigger","elementType","onKeyDown"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAEvE,SAASC,cAAc,QAA6B,6BAA6B;AAEjF,SAASC,wBAAwB,QAAQ,iCAAiC;AAS1E;;;;CAIC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,YAAY,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAE,EAC9GC,YAAY,EACb,GAAGT;IAEJ,0CAA0C;IAC1C,MAAMU,eAAelB,MAAMmB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGpB;IAEzC,MAAMqB,wBAAwB;QAC5B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACR,aAAaS,OAAO,MAAM;QACjG,IAAIC,UAAUf,uBAAuBU;QACrC,IAAIM,aAAalB,eAAeG,aAAaH,aAAamB,EAAE,IAAI;QAEhE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAIpB,QAAQQ,aAAaS,OAAO,CAACI,MAAM,KAAK,GAAG;YAC7CF;QACF;QAEA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACnB,MAAMC,UAAUd,aAAaS,OAAO,CAACM,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAACC,CAAAA,SAAUA,WAAWJ,OAAO,CAAC,EAAE;YAErF,wFAAwF;YACxF,IAAIE,eAAe;gBACjBL;gBACAN,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACM,OAAO,CAAC,EAAE,MAAM;gBACnFJ,UAAUf,uBAAuBU;YACnC;QACF;QAEA,qDAAqD;QACrD,wFAAwF;QACxF,IAAIK,QAAQG,MAAM,GAAG,KAAKpB,cAAc;YACtC,MAAM0B,YAAYT,QAAQU,IAAI,CAACC,CAAAA,SAAUzB,aAAayB,OAAOT,EAAE,KAAKD;YACpE,OAAOQ,sBAAAA,uBAAAA,YAAaT,OAAO,CAAC,EAAE;QAChC;YAEOA;QAAP,OAAOA,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,YAAcY;IACvB;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BrB;QAEA,kDAAkD;QAClD,IAAIjB,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvBxB,aAAaS,OAAO,IAAIe,GAAGC,GAAG,CAAClB,WAAW;YAC1CL,cAAc;gBACZF,aAAaS,OAAO,GAAG;YACzB,GAAG;YAEH,eAAe;YACf,CAACjB,QAAQE,QAAQ8B,IAAI;YAErB,MAAME,aAAatB;YACnBP,gBAAgB6B;YAChB5B,gBAAgB;QAClB;IACF;IAEA,MAAM6B,UAAU1C,eAAeG,kBAAkBC,KAAK;QAAEE,OAAOD,QAAQC,KAAK;QAAEQ;QAAc6B,aAAa;IAAS;IAClHD,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT"}
+{"version":3,"sources":["useButtonTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/*\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n      moveToNextMatchingOptionWithSameCharacterHandling();\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAGvE,SAASC,cAAc,QAA6B,6BAA6B;AACjF,SAASC,wBAAwB,QAAQ,iCAAiC;AAQ1E;;;;CAIC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,MAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGjB;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,IAAId,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,eAAe;YACf,CAAC3B,QAAQC,QAAQ+B,IAAI;YACrBT;QACF;IACF;IAEA,MAAMY,UAAU1C,eAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA+B,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}

package/lib/components/Dropdown/useDropdown.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { useActiveDescendant } from '@fluentui/react-aria';
 import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
@@ -7,6 +8,7 @@ import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { Listbox } from '../Listbox/Listbox';
 import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useButtonTriggerSlot } from './useButtonTriggerSlot';
+import { optionClassNames } from '../Option/useOptionStyles.styles';
 /**
  * Create the state required to render Dropdown.
  *
@@ -22,7 +24,13 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
         supportsLabelFor: true,
         supportsSize: true
     });
-    const baseState = useComboboxBaseState(props);
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
+        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+    });
+    const baseState = useComboboxBaseState({
+        ...props,
+        activeDescendantController
+    });
     const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
@@ -33,7 +41,7 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
     });
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     const triggerRef = React.useRef(null);
-    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {
+    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
         state: baseState,
         triggerRef,
         defaultProps: {
@@ -41,7 +49,7 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
         }
     });
     var _props_button;
-    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {
+    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, activeParentRef, ref), {
         state: baseState,
         defaultProps: {
             type: 'button',
@@ -49,7 +57,8 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
             children: baseState.value || props.placeholder,
             'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
-        }
+        },
+        activeDescendantController
     });
     const rootSlot = slot.always(props.root, {
         defaultProps: {
@@ -92,6 +101,7 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
         }),
         placeholderVisible: !baseState.value && !!props.placeholder,
         showClearButton,
+        activeDescendantController,
         ...baseState
     };
     const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{

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

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

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 { 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    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAmCE"}
+{"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"}

package/lib/components/Listbox/renderListbox.js

@@ -1,12 +1,16 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
 import { ListboxContext } from '../../contexts/ListboxContext';
 /**
  * Render the final JSX of Listbox
  */ export const renderListbox_unstable = (state, contextValues)=>{
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(ListboxContext.Provider, {
-        value: contextValues.listbox,
-        children: /*#__PURE__*/ _jsx(state.root, {})
+    return /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
+        value: contextValues.activeDescendant,
+        children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {
+            value: contextValues.listbox,
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <state.root />\n    </ListboxContext.Provider>\n  );\n};\n"],"names":["assertSlots","ListboxContext","renderListbox_unstable","state","contextValues","Provider","value","listbox","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DJ,YAA0BG;IAE1B,qBACE,KAACF,eAAeI,QAAQ;QAACC,OAAOF,cAAcG,OAAO;kBACnD,cAAA,KAACJ,MAAMK,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DL,YAA0BI;IAE1B,qBACE,KAACH;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,cAAA,KAACL,eAAeM,QAAQ;YAACF,OAAOD,cAAcI,OAAO;sBACnD,cAAA,KAACL,MAAMM,IAAI;;;AAInB,EAAE"}

package/lib/components/Listbox/useListbox.js

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
-import { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';
+import { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useOptionCollection } from '../../utils/useOptionCollection';
-import { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';
 import { useSelection } from '../../utils/useSelection';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
+import { optionClassNames } from '../Option/useOptionStyles.styles';
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const UNSAFE_noLongerUsed = {
+    activeOption: undefined,
+    focusVisible: false,
+    setActiveOption: ()=>null
+};
 /**
  * Create the state required to render Listbox.
  *
@@ -17,57 +24,61 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
  */ export const useListbox_unstable = (props, ref)=>{
     const { multiselect } = props;
     const optionCollection = useOptionCollection();
-    const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;
+    const { getOptionById } = optionCollection;
+    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({
+        matchOption: (el)=>el.classList.contains(optionClassNames.root)
+    });
+    const activeDescendantContext = useActiveDescendantContext();
+    const activeDescendantController = useHasParentActiveDescendantContext() ? activeDescendantContext.controller : controller;
     const { clearSelection, selectedOptions, selectOption } = useSelection(props);
-    const [activeOption, setActiveOption] = React.useState();
-    // track whether keyboard focus outline should be shown
-    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
-    const [focusVisible, setFocusVisible] = React.useState(false);
     const onKeyDown = (event)=>{
         const action = getDropdownActionFromKey(event, {
             open: true
         });
-        const maxIndex = getCount() - 1;
-        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
-        let newIndex = activeIndex;
+        const activeOptionId = activeDescendantController.active();
+        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
         switch(action){
+            case 'Next':
+                if (activeOption) {
+                    activeDescendantController.next();
+                } else {
+                    activeDescendantController.first();
+                }
+                break;
+            case 'Previous':
+                if (activeOption) {
+                    activeDescendantController.prev();
+                } else {
+                    activeDescendantController.first();
+                }
+                break;
+            case 'PageUp':
+            case 'First':
+                activeDescendantController.first();
+                break;
+            case 'PageDown':
+            case 'Last':
+                activeDescendantController.last();
+                break;
             case 'Select':
             case 'CloseSelect':
                 activeOption && selectOption(event, activeOption);
                 break;
-            default:
-                newIndex = getIndexFromAction(action, activeIndex, maxIndex);
-        }
-        if (newIndex !== activeIndex) {
-            // prevent default page scroll/keyboard action if the index changed
-            event.preventDefault();
-            setActiveOption(getOptionAtIndex(newIndex));
-            setFocusVisible(true);
         }
     };
-    const onMouseOver = (event)=>{
-        setFocusVisible(false);
-    };
     // get state from parent combobox, if it exists
     const hasComboboxContext = useHasParentContext(ComboboxContext);
-    const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);
-    const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);
     const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);
     const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);
-    const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);
     // without a parent combobox context, provide values directly from Listbox
     const optionContextValues = hasComboboxContext ? {
-        activeOption: comboboxActiveOption,
-        focusVisible: comboboxFocusVisible,
         selectedOptions: comboboxSelectedOptions,
         selectOption: comboboxSelectOption,
-        setActiveOption: comboboxSetActiveOption
+        ...UNSAFE_noLongerUsed
     } : {
-        activeOption,
-        focusVisible,
         selectedOptions,
         selectOption,
-        setActiveOption
+        ...UNSAFE_noLongerUsed
     };
     const state = {
         components: {
@@ -77,9 +88,8 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref,
+            ref: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef),
             role: multiselect ? 'menu' : 'listbox',
-            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
             tabIndex: 0,
             ...props
         }), {
@@ -87,12 +97,10 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
         }),
         multiselect,
         clearSelection,
+        activeDescendantController,
         ...optionCollection,
         ...optionContextValues
     };
-    const scrollContainerRef = useScrollOptionsIntoView(state);
-    state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);
     state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
-    state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));
     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  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\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 { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\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  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const maxIndex = getCount() - 1;\n    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n    let newIndex = activeIndex;\n\n    switch (action) {\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n      default:\n        newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n    }\n\n    if (newIndex !== activeIndex) {\n      // prevent default page scroll/keyboard action if the index changed\n      event.preventDefault();\n      setActiveOption(getOptionAtIndex(newIndex));\n      setFocusVisible(true);\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n    setFocusVisible(false);\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption,\n      }\n    : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption,\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: ref as React.Ref<HTMLDivElement>,\n        role: multiselect ? 'menu' : 'listbox',\n        'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  const scrollContainerRef = useScrollOptionsIntoView(state);\n  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"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"}
+{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getOptionById } = optionCollection;\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const activeDescendantController = useHasParentActiveDescendantContext()\n    ? activeDescendantContext.controller\n    : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","ComboboxContext","optionClassNames","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","optionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","activeDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","event","action","open","activeOptionId","active","next","first","prev","last","hasComboboxContext","comboboxSelectedOptions","ctx","comboboxSelectOption","optionContextValues","state","components","always","role","tabIndex","elementType"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /* The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /*\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /* If true, this is the currently highlighted option */\n    active: boolean;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /* The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /*\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    active: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/Option/useOption.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useContextSelector } from '@fluentui/react-context-selector';
+import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 import { ListboxContext } from '../../contexts/ListboxContext';
@@ -51,8 +52,8 @@ function getTextString(text, children) {
         optionText,
         optionValue
     ]);
+    const { controller: activeDescendantController } = useActiveDescendantContext();
     // context values
-    const focusVisible = useContextSelector(ListboxContext, (ctx)=>ctx.focusVisible);
     const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);
     const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);
     const selected = useContextSelector(ListboxContext, (ctx)=>{
@@ -60,13 +61,7 @@ function getTextString(text, children) {
         return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
     });
     const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);
-    const setActiveOption = useContextSelector(ListboxContext, (ctx)=>ctx.setActiveOption);
     const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);
-    // current active option?
-    const active = useContextSelector(ListboxContext, (ctx)=>{
-        var _ctx_activeOption, _ctx_activeOption1;
-        return ((_ctx_activeOption = ctx.activeOption) === null || _ctx_activeOption === void 0 ? void 0 : _ctx_activeOption.id) !== undefined && ((_ctx_activeOption1 = ctx.activeOption) === null || _ctx_activeOption1 === void 0 ? void 0 : _ctx_activeOption1.id) === id;
-    });
     // check icon
     let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);
     if (multiselect) {
@@ -79,7 +74,7 @@ function getTextString(text, children) {
             return;
         }
         // clicked option should always become active option
-        setActiveOption(optionData);
+        activeDescendantController.focus(id);
         // close on option click for single-select options in a combobox
         if (!multiselect) {
             setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
@@ -131,10 +126,11 @@ function getTextString(text, children) {
             },
             elementType: 'span'
         }),
-        active,
         disabled,
-        focusVisible,
         multiselect,
-        selected
+        selected,
+        // no longer used
+        focusVisible: false,
+        active: false
     };
 };