@fluentui/react-aria 9.6.2 → 9.7.1

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-aria
 
-This log was last generated on Mon, 08 Jan 2024 16:20:07 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Jan 2024 13:07:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.7.1)
+
+Tue, 16 Jan 2024 13:07:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.7.0..@fluentui/react-aria_v9.7.1)
+
+### Patches
+
+- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
+- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.7.0)
+
+Thu, 11 Jan 2024 09:04:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.6.2..@fluentui/react-aria_v9.7.0)
+
+### Minor changes
+
+- feat: active descedant improvements ([PR #30253](https://github.com/microsoft/fluentui/pull/30253) by lingfan.gao@microsoft.com)
+
 ## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.6.2)
 
-Mon, 08 Jan 2024 16:20:07 GMT 
+Mon, 08 Jan 2024 16:24:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.6.1..@fluentui/react-aria_v9.6.2)
 
 ### Patches

package/dist/index.d.ts

@@ -3,17 +3,31 @@ import * as React_2 from 'react';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
 import type { Slot } from '@fluentui/react-utilities';
 
+/**
+ * Applied to the active descendant when the user is navigating with keyboard
+ */
+export declare const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = "data-activedescendant-focusvisible";
+
 export declare interface ActiveDescendantImperativeRef {
-    first: () => void;
-    next: () => void;
-    prev: () => void;
+    first: (options?: IteratorOptions) => string | undefined;
+    last: (options?: IteratorOptions) => string | undefined;
+    next: (options?: IteratorOptions) => string | undefined;
+    prev: (options?: IteratorOptions) => string | undefined;
+    find: (predicate: (id: string) => boolean, options?: IteratorOptions) => string | undefined;
     blur: () => void;
     active: () => string | undefined;
     focus: (id: string) => void;
 }
 
 export declare interface ActiveDescendantOptions {
+    /**
+     * @param el - HTML element to test
+     * @returns whether the element can be an active descendant
+     */
     matchOption: (el: HTMLElement) => boolean;
+    /**
+     * Forward imperative refs when exposing functionality from a React component
+     */
     imperativeRef?: React_2.RefObject<ActiveDescendantImperativeRef>;
 }
 
@@ -55,12 +69,32 @@ export declare type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' |
 
 export declare type ARIAButtonType = 'button' | 'a' | 'div';
 
+declare interface IteratorOptions {
+    /**
+     * When passive, the active descendant is changed
+     * @default false
+     */
+    passive?: boolean;
+}
+
 declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
 
-export declare function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(options: ActiveDescendantOptions): {
-    listboxRef: React_2.MutableRefObject<TListboxElement | null>;
-    activeParentRef: React_2.RefObject<TActiveParentElement>;
-};
+export declare function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(options: ActiveDescendantOptions): UseActiveDescendantReturn<TActiveParentElement, TListboxElement>;
+
+declare interface UseActiveDescendantReturn<TActiveParentElement extends HTMLElement = HTMLElement, TListboxElement extends HTMLElement = HTMLElement> {
+    /**
+     * Attach this to the element that contains all active descendants
+     */
+    listboxRef: React_2.Ref<TListboxElement>;
+    /**
+     * Attach this to the element that has an active descendant
+     */
+    activeParentRef: React_2.Ref<TActiveParentElement>;
+    /**
+     * Imperative functions to manage active descendants within the listboxRef
+     */
+    controller: ActiveDescendantImperativeRef;
+}
 
 /**
  * @internal

package/lib/activedescendant/constants.js

@@ -1 +1,6 @@
-export const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';
+/**
+ * Applied to the element that is active descendant
+ */ export const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';
+/**
+ * Applied to the active descendant when the user is navigating with keyboard
+ */ export const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';

package/lib/activedescendant/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["constants.ts"],"sourcesContent":["export const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE"],"mappings":"AAAA,OAAO,MAAMA,6BAA6B,wBAAwB"}
+{"version":3,"sources":["constants.ts"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */\nexport const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */\nexport const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,6BAA6B,wBAAwB;AAElE;;CAEC,GACD,OAAO,MAAMC,0CAA0C,qCAAqC"}

package/lib/activedescendant/index.js

@@ -1,2 +1,3 @@
 export * from './useActiveDescendant';
+export * from './constants';
 export * from './types';

package/lib/activedescendant/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useActiveDescendant';\nexport * from './types';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,UAAU"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useActiveDescendant';\nexport * from './constants';\nexport * from './types';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,cAAc;AAC5B,cAAc,UAAU"}

package/lib/activedescendant/scrollIntoView.js

@@ -0,0 +1,19 @@
+export const scrollIntoView = (target, scrollParent)=>{
+    if (!target || !scrollParent) {
+        return;
+    }
+    if (scrollParent.offsetHeight >= scrollParent.scrollHeight) {
+        return;
+    }
+    const { offsetHeight, offsetTop } = target;
+    const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
+    const isAbove = offsetTop < scrollTop;
+    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+    const buffer = 2;
+    if (isAbove) {
+        scrollParent.scrollTo(0, offsetTop - buffer);
+    }
+    if (isBelow) {
+        scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+    }
+};

package/lib/activedescendant/scrollIntoView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scrollIntoView.ts"],"sourcesContent":["export const scrollIntoView = (\n  target: HTMLElement | null | undefined,\n  scrollParent: HTMLElement | null | undefined,\n) => {\n  if (!target || !scrollParent) {\n    return;\n  }\n\n  if (scrollParent.offsetHeight >= scrollParent.scrollHeight) {\n    return;\n  }\n\n  const { offsetHeight, offsetTop } = target;\n  const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n  const isAbove = offsetTop < scrollTop;\n  const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n  const buffer = 2;\n\n  if (isAbove) {\n    scrollParent.scrollTo(0, offsetTop - buffer);\n  }\n\n  if (isBelow) {\n    scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n  }\n};\n"],"names":["scrollIntoView","target","scrollParent","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB,CAC5BC,QACAC;IAEA,IAAI,CAACD,UAAU,CAACC,cAAc;QAC5B;IACF;IAEA,IAAIA,aAAaC,YAAY,IAAID,aAAaE,YAAY,EAAE;QAC1D;IACF;IAEA,MAAM,EAAED,YAAY,EAAEE,SAAS,EAAE,GAAGJ;IACpC,MAAM,EAAEE,cAAcG,kBAAkB,EAAEC,SAAS,EAAE,GAAGL;IAExD,MAAMM,UAAUH,YAAYE;IAC5B,MAAME,UAAUJ,YAAYF,eAAeI,YAAYD;IAEvD,MAAMI,SAAS;IAEf,IAAIF,SAAS;QACXN,aAAaS,QAAQ,CAAC,GAAGN,YAAYK;IACvC;IAEA,IAAID,SAAS;QACXP,aAAaS,QAAQ,CAAC,GAAGN,YAAYC,qBAAqBH,eAAeO;IAC3E;AACF,EAAE"}

package/lib/activedescendant/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n  first: () => void;\n  next: () => void;\n  prev: () => void;\n  blur: () => void;\n  active: () => string | undefined;\n  focus: (id: string) => void;\n}\n\nexport interface ActiveDescendantOptions {\n  matchOption: (el: HTMLElement) => boolean;\n  imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n  first: (options?: IteratorOptions) => string | undefined;\n  last: (options?: IteratorOptions) => string | undefined;\n  next: (options?: IteratorOptions) => string | undefined;\n  prev: (options?: IteratorOptions) => string | undefined;\n  find: (predicate: (id: string) => boolean, options?: IteratorOptions) => string | undefined;\n  blur: () => void;\n  active: () => string | undefined;\n  focus: (id: string) => void;\n}\n\nexport interface ActiveDescendantOptions {\n  /**\n   * @param el - HTML element to test\n   * @returns whether the element can be an active descendant\n   */\n  matchOption: (el: HTMLElement) => boolean;\n  /**\n   * Forward imperative refs when exposing functionality from a React component\n   */\n  imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n\nexport interface UseActiveDescendantReturn<\n  TActiveParentElement extends HTMLElement = HTMLElement,\n  TListboxElement extends HTMLElement = HTMLElement,\n> {\n  /**\n   * Attach this to the element that contains all active descendants\n   */\n  listboxRef: React.Ref<TListboxElement>;\n  /**\n   * Attach this to the element that has an active descendant\n   */\n  activeParentRef: React.Ref<TActiveParentElement>;\n  /**\n   * Imperative functions to manage active descendants within the listboxRef\n   */\n  controller: ActiveDescendantImperativeRef;\n}\n\nexport interface IteratorOptions {\n  /**\n   * When passive, the active descendant is changed\n   * @default false\n   */\n  passive?: boolean;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/activedescendant/useActiveDescendant.js

@@ -1,120 +1,140 @@
 import * as React from 'react';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
 import { useOptionWalker } from './useOptionWalker';
-import { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';
+import { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';
+import { scrollIntoView } from './scrollIntoView';
 export function useActiveDescendant(options) {
-    const { imperativeRef, matchOption } = options;
+    const { imperativeRef, matchOption: matchOptionUnstable } = options;
+    const focusVisibleRef = React.useRef(false);
+    const activeIdRef = React.useRef(null);
     const activeParentRef = React.useRef(null);
+    useOnKeyboardNavigationChange((isNavigatingWithKeyboard)=>{
+        focusVisibleRef.current = isNavigatingWithKeyboard;
+        const active = getActiveDescendant();
+        if (!active) {
+            return;
+        }
+        if (isNavigatingWithKeyboard) {
+            active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+        } else {
+            active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
+        }
+    });
+    const matchOption = useEventCallback(matchOptionUnstable);
     const { listboxRef, optionWalker } = useOptionWalker({
         matchOption
     });
-    const getActiveDescendant = ()=>{
+    const getActiveDescendant = React.useCallback(()=>{
         var _listboxRef_current;
-        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);
-    };
-    const scrollActiveIntoView = (active)=>{
-        if (!listboxRef.current) {
-            return;
-        }
-        if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
-            return;
-        }
-        const { offsetHeight, offsetTop } = active;
-        const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
-        const isAbove = offsetTop < scrollTop;
-        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-        const buffer = 2;
-        if (isAbove) {
-            listboxRef.current.scrollTo(0, offsetTop - buffer);
-        }
-        if (isBelow) {
-            listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
-        }
-    };
-    const setActiveDescendant = (nextActive)=>{
+        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`#${activeIdRef.current}`);
+    }, [
+        listboxRef
+    ]);
+    const blurActiveDescendant = React.useCallback(()=>{
+        var _activeParentRef_current;
         const active = getActiveDescendant();
         if (active) {
             active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);
+            active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
         }
-        if (nextActive) {
-            var _activeParentRef_current;
-            nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
-            scrollActiveIntoView(nextActive);
-            (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
-        } else {
-            var _activeParentRef_current1;
-            (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');
+        (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.removeAttribute('aria-activedescendant');
+        activeIdRef.current = null;
+    }, [
+        activeParentRef,
+        getActiveDescendant
+    ]);
+    const focusActiveDescendant = React.useCallback((nextActive)=>{
+        var _activeParentRef_current;
+        if (!nextActive) {
+            return;
         }
-    };
-    React.useImperativeHandle(imperativeRef, ()=>({
-            first: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
-                    return;
-                }
-                optionWalker.setCurrent(listboxRef.current);
+        blurActiveDescendant();
+        scrollIntoView(nextActive, listboxRef.current);
+        (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
+        activeIdRef.current = nextActive.id;
+        nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
+        if (focusVisibleRef.current) {
+            nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+        }
+    }, [
+        activeParentRef,
+        listboxRef,
+        blurActiveDescendant
+    ]);
+    const controller = React.useMemo(()=>({
+            first: ({ passive } = {})=>{
                 const first = optionWalker.first();
-                if (first) {
-                    setActiveDescendant(first);
+                if (!passive) {
+                    focusActiveDescendant(first);
                 }
+                return first === null || first === void 0 ? void 0 : first.id;
             },
-            next: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
-                    return;
+            last: ({ passive } = {})=>{
+                const last = optionWalker.last();
+                if (!passive) {
+                    focusActiveDescendant(last);
                 }
+                return last === null || last === void 0 ? void 0 : last.id;
+            },
+            next: ({ passive } = {})=>{
                 const active = getActiveDescendant();
                 if (!active) {
                     return;
                 }
                 optionWalker.setCurrent(active);
                 const next = optionWalker.next();
-                if (next) {
-                    setActiveDescendant(next);
+                if (!passive) {
+                    focusActiveDescendant(next);
                 }
+                return next === null || next === void 0 ? void 0 : next.id;
             },
-            prev: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
-                    return;
-                }
+            prev: ({ passive } = {})=>{
                 const active = getActiveDescendant();
                 if (!active) {
                     return;
                 }
                 optionWalker.setCurrent(active);
-                if (!matchOption(active)) {
-                    optionWalker.prev();
-                }
                 const next = optionWalker.prev();
-                if (next && next !== listboxRef.current) {
-                    setActiveDescendant(next);
+                if (!passive) {
+                    focusActiveDescendant(next);
                 }
+                return next === null || next === void 0 ? void 0 : next.id;
             },
             blur: ()=>{
-                if (!activeParentRef.current) {
-                    return;
-                }
-                setActiveDescendant(undefined);
+                blurActiveDescendant();
             },
             active: ()=>{
-                if (listboxRef.current) {
-                    var _getActiveDescendant;
-                    return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;
-                }
+                var _getActiveDescendant;
+                return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;
             },
             focus: (id)=>{
                 if (!listboxRef.current) {
                     return;
                 }
-                optionWalker.setCurrent(listboxRef.current);
-                let cur = optionWalker.next();
-                while(cur && cur.id !== id){
-                    cur = optionWalker.next();
+                const target = listboxRef.current.querySelector(`#${id}`);
+                if (target) {
+                    focusActiveDescendant(target);
                 }
-                if (cur) {
-                    setActiveDescendant(cur);
+            },
+            find (predicate, { passive } = {}) {
+                const target = optionWalker.find(predicate);
+                if (!passive) {
+                    focusActiveDescendant(target);
                 }
+                return target === null || target === void 0 ? void 0 : target.id;
             }
-        }));
+        }), [
+        optionWalker,
+        listboxRef,
+        focusActiveDescendant,
+        blurActiveDescendant,
+        getActiveDescendant
+    ]);
+    React.useImperativeHandle(imperativeRef, ()=>controller);
     return {
         listboxRef,
-        activeParentRef
+        activeParentRef,
+        controller
     };
 }

package/lib/activedescendant/useActiveDescendant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantOptions } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n  options: ActiveDescendantOptions,\n) {\n  const { imperativeRef, matchOption } = options;\n  const activeParentRef = React.useRef<TActiveParentElement>(null);\n  const { listboxRef, optionWalker } = useOptionWalker<TListboxElement>({ matchOption });\n  const getActiveDescendant = () => {\n    return listboxRef.current?.querySelector<HTMLElement>(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n  };\n\n  const scrollActiveIntoView = (active: HTMLElement) => {\n    if (!listboxRef.current) {\n      return;\n    }\n\n    if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {\n      return;\n    }\n\n    const { offsetHeight, offsetTop } = active;\n    const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;\n\n    const isAbove = offsetTop < scrollTop;\n    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n    const buffer = 2;\n\n    if (isAbove) {\n      listboxRef.current.scrollTo(0, offsetTop - buffer);\n    }\n\n    if (isBelow) {\n      listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n    }\n  };\n\n  const setActiveDescendant = (nextActive: HTMLElement | undefined) => {\n    const active = getActiveDescendant();\n    if (active) {\n      active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n    }\n\n    if (nextActive) {\n      nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n      scrollActiveIntoView(nextActive);\n      activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);\n    } else {\n      activeParentRef.current?.removeAttribute('aria-activedescendant');\n    }\n  };\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    first: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      optionWalker.setCurrent(listboxRef.current);\n      const first = optionWalker.first();\n      if (first) {\n        setActiveDescendant(first);\n      }\n    },\n    next: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const active = getActiveDescendant();\n      if (!active) {\n        return;\n      }\n\n      optionWalker.setCurrent(active);\n      const next = optionWalker.next();\n      if (next) {\n        setActiveDescendant(next);\n      }\n    },\n    prev: () => {\n      if (!listboxRef.current || !activeParentRef.current) {\n        return;\n      }\n\n      const active = getActiveDescendant();\n      if (!active) {\n        return;\n      }\n\n      optionWalker.setCurrent(active);\n      if (!matchOption(active)) {\n        optionWalker.prev();\n      }\n\n      const next = optionWalker.prev();\n\n      if (next && next !== listboxRef.current) {\n        setActiveDescendant(next);\n      }\n    },\n    blur: () => {\n      if (!activeParentRef.current) {\n        return;\n      }\n\n      setActiveDescendant(undefined);\n    },\n    active: () => {\n      if (listboxRef.current) {\n        return getActiveDescendant()?.id;\n      }\n    },\n\n    focus: (id: string) => {\n      if (!listboxRef.current) {\n        return;\n      }\n\n      optionWalker.setCurrent(listboxRef.current);\n      let cur = optionWalker.next();\n\n      while (cur && cur.id !== id) {\n        cur = optionWalker.next();\n      }\n\n      if (cur) {\n        setActiveDescendant(cur);\n      }\n    },\n  }));\n\n  return { listboxRef, activeParentRef };\n}\n"],"names":["React","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","useRef","listboxRef","optionWalker","getActiveDescendant","current","querySelector","scrollActiveIntoView","active","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","setActiveDescendant","nextActive","removeAttribute","setAttribute","id","useImperativeHandle","first","setCurrent","next","prev","blur","undefined","focus","cur"],"mappings":"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"}
+{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantImperativeRef, ActiveDescendantOptions, UseActiveDescendantReturn } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n  options: ActiveDescendantOptions,\n): UseActiveDescendantReturn<TActiveParentElement, TListboxElement> {\n  const { imperativeRef, matchOption: matchOptionUnstable } = options;\n  const focusVisibleRef = React.useRef(false);\n  const activeIdRef = React.useRef<string | null>(null);\n  const activeParentRef = React.useRef<TActiveParentElement>(null);\n\n  useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {\n    focusVisibleRef.current = isNavigatingWithKeyboard;\n    const active = getActiveDescendant();\n    if (!active) {\n      return;\n    }\n\n    if (isNavigatingWithKeyboard) {\n      active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n    } else {\n      active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n    }\n  });\n\n  const matchOption = useEventCallback(matchOptionUnstable);\n  const { listboxRef, optionWalker } = useOptionWalker<TListboxElement>({ matchOption });\n  const getActiveDescendant = React.useCallback(() => {\n    return listboxRef.current?.querySelector<HTMLElement>(`#${activeIdRef.current}`);\n  }, [listboxRef]);\n\n  const blurActiveDescendant = React.useCallback(() => {\n    const active = getActiveDescendant();\n    if (active) {\n      active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n      active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n    }\n\n    activeParentRef.current?.removeAttribute('aria-activedescendant');\n    activeIdRef.current = null;\n  }, [activeParentRef, getActiveDescendant]);\n\n  const focusActiveDescendant = React.useCallback(\n    (nextActive: HTMLElement | null) => {\n      if (!nextActive) {\n        return;\n      }\n\n      blurActiveDescendant();\n\n      scrollIntoView(nextActive, listboxRef.current);\n      activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);\n      activeIdRef.current = nextActive.id;\n      nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n\n      if (focusVisibleRef.current) {\n        nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n      }\n    },\n    [activeParentRef, listboxRef, blurActiveDescendant],\n  );\n\n  const controller: ActiveDescendantImperativeRef = React.useMemo(\n    () => ({\n      first: ({ passive } = {}) => {\n        const first = optionWalker.first();\n        if (!passive) {\n          focusActiveDescendant(first);\n        }\n\n        return first?.id;\n      },\n      last: ({ passive } = {}) => {\n        const last = optionWalker.last();\n        if (!passive) {\n          focusActiveDescendant(last);\n        }\n\n        return last?.id;\n      },\n      next: ({ passive } = {}) => {\n        const active = getActiveDescendant();\n        if (!active) {\n          return;\n        }\n\n        optionWalker.setCurrent(active);\n        const next = optionWalker.next();\n        if (!passive) {\n          focusActiveDescendant(next);\n        }\n\n        return next?.id;\n      },\n      prev: ({ passive } = {}) => {\n        const active = getActiveDescendant();\n        if (!active) {\n          return;\n        }\n\n        optionWalker.setCurrent(active);\n        const next = optionWalker.prev();\n\n        if (!passive) {\n          focusActiveDescendant(next);\n        }\n\n        return next?.id;\n      },\n      blur: () => {\n        blurActiveDescendant();\n      },\n      active: () => {\n        return getActiveDescendant()?.id;\n      },\n\n      focus: (id: string) => {\n        if (!listboxRef.current) {\n          return;\n        }\n\n        const target = listboxRef.current.querySelector<HTMLElement>(`#${id}`);\n        if (target) {\n          focusActiveDescendant(target);\n        }\n      },\n\n      find(predicate, { passive } = {}) {\n        const target = optionWalker.find(predicate);\n        if (!passive) {\n          focusActiveDescendant(target);\n        }\n\n        return target?.id;\n      },\n    }),\n    [optionWalker, listboxRef, focusActiveDescendant, blurActiveDescendant, getActiveDescendant],\n  );\n\n  React.useImperativeHandle(imperativeRef, () => controller);\n\n  return { listboxRef, activeParentRef, controller };\n}\n"],"names":["React","useEventCallback","useOnKeyboardNavigationChange","useOptionWalker","ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","scrollIntoView","useActiveDescendant","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","useRef","activeIdRef","activeParentRef","isNavigatingWithKeyboard","current","active","getActiveDescendant","setAttribute","removeAttribute","listboxRef","optionWalker","useCallback","querySelector","blurActiveDescendant","focusActiveDescendant","nextActive","id","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","find","predicate","useImperativeHandle"],"mappings":"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"}

package/lib/activedescendant/useOptionWalker.js

@@ -25,11 +25,18 @@ export function useOptionWalker(options) {
     ]);
     const optionWalker = React.useMemo(()=>({
             first: ()=>{
-                if (!treeWalkerRef.current) {
+                if (!treeWalkerRef.current || !listboxRef.current) {
                     return null;
                 }
+                treeWalkerRef.current.currentNode = listboxRef.current;
                 return treeWalkerRef.current.firstChild();
             },
+            last: ()=>{
+                if (!treeWalkerRef.current || !listboxRef.current) {
+                    return null;
+                }
+                return treeWalkerRef.current.lastChild();
+            },
             next: ()=>{
                 if (!treeWalkerRef.current) {
                     return null;
@@ -42,6 +49,17 @@ export function useOptionWalker(options) {
                 }
                 return treeWalkerRef.current.previousNode();
             },
+            find: (predicate)=>{
+                if (!treeWalkerRef.current || !listboxRef.current) {
+                    return null;
+                }
+                treeWalkerRef.current.currentNode = listboxRef.current;
+                let cur = treeWalkerRef.current.currentNode;
+                while(cur && !predicate(cur.id)){
+                    cur = treeWalkerRef.current.nextNode();
+                }
+                return cur;
+            },
             setCurrent: (el)=>{
                 if (!treeWalkerRef.current) {
                     return;

package/lib/activedescendant/useOptionWalker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n  matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n  const { matchOption } = options;\n  const { targetDocument } = useFluent();\n  const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n  const listboxRef = React.useRef<TListboxElement | null>(null);\n\n  const optionFilter = React.useCallback(\n    (node: Node) => {\n      if (isHTMLElement(node) && matchOption(node)) {\n        return NodeFilter.FILTER_ACCEPT;\n      }\n\n      return NodeFilter.FILTER_SKIP;\n    },\n    [matchOption],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!targetDocument || !listboxRef.current) {\n      return;\n    }\n\n    treeWalkerRef.current = targetDocument.createTreeWalker(listboxRef.current, NodeFilter.SHOW_ELEMENT, optionFilter);\n  }, [targetDocument, optionFilter]);\n\n  const optionWalker = React.useMemo(\n    () => ({\n      first: () => {\n        if (!treeWalkerRef.current) {\n          return null;\n        }\n\n        return treeWalkerRef.current.firstChild() as HTMLElement | null;\n      },\n      next: () => {\n        if (!treeWalkerRef.current) {\n          return null;\n        }\n\n        return treeWalkerRef.current.nextNode() as HTMLElement | null;\n      },\n      prev: () => {\n        if (!treeWalkerRef.current) {\n          return null;\n        }\n\n        return treeWalkerRef.current.previousNode() as HTMLElement | null;\n      },\n      setCurrent: (el: HTMLElement) => {\n        if (!treeWalkerRef.current) {\n          return;\n        }\n\n        treeWalkerRef.current.currentNode = el;\n      },\n    }),\n    [],\n  );\n\n  return {\n    optionWalker,\n    listboxRef,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useIsomorphicLayoutEffect","useOptionWalker","options","matchOption","targetDocument","treeWalkerRef","useRef","listboxRef","optionFilter","useCallback","node","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","firstChild","next","nextNode","prev","previousNode","setCurrent","el","currentNode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,4BAA4B;AAMrF,OAAO,SAASC,gBAAqDC,OAA+B;IAClG,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGN;IAC3B,MAAMO,gBAAgBT,MAAMU,MAAM,CAAoB;IACtD,MAAMC,aAAaX,MAAMU,MAAM,CAAyB;IAExD,MAAME,eAAeZ,MAAMa,WAAW,CACpC,CAACC;QACC,IAAIX,cAAcW,SAASP,YAAYO,OAAO;YAC5C,OAAOC,WAAWC,aAAa;QACjC;QAEA,OAAOD,WAAWE,WAAW;IAC/B,GACA;QAACV;KAAY;IAGfH,0BAA0B;QACxB,IAAI,CAACI,kBAAkB,CAACG,WAAWO,OAAO,EAAE;YAC1C;QACF;QAEAT,cAAcS,OAAO,GAAGV,eAAeW,gBAAgB,CAACR,WAAWO,OAAO,EAAEH,WAAWK,YAAY,EAAER;IACvG,GAAG;QAACJ;QAAgBI;KAAa;IAEjC,MAAMS,eAAerB,MAAMsB,OAAO,CAChC,IAAO,CAAA;YACLC,OAAO;gBACL,IAAI,CAACd,cAAcS,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOT,cAAcS,OAAO,CAACM,UAAU;YACzC;YACAC,MAAM;gBACJ,IAAI,CAAChB,cAAcS,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOT,cAAcS,OAAO,CAACQ,QAAQ;YACvC;YACAC,MAAM;gBACJ,IAAI,CAAClB,cAAcS,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOT,cAAcS,OAAO,CAACU,YAAY;YAC3C;YACAC,YAAY,CAACC;gBACX,IAAI,CAACrB,cAAcS,OAAO,EAAE;oBAC1B;gBACF;gBAEAT,cAAcS,OAAO,CAACa,WAAW,GAAGD;YACtC;QACF,CAAA,GACA,EAAE;IAGJ,OAAO;QACLT;QACAV;IACF;AACF"}
+{"version":3,"sources":["useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n  matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n  const { matchOption } = options;\n  const { targetDocument } = useFluent();\n  const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n  const listboxRef = React.useRef<TListboxElement | null>(null);\n\n  const optionFilter = React.useCallback(\n    (node: Node) => {\n      if (isHTMLElement(node) && matchOption(node)) {\n        return NodeFilter.FILTER_ACCEPT;\n      }\n\n      return NodeFilter.FILTER_SKIP;\n    },\n    [matchOption],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!targetDocument || !listboxRef.current) {\n      return;\n    }\n\n    treeWalkerRef.current = targetDocument.createTreeWalker(listboxRef.current, NodeFilter.SHOW_ELEMENT, optionFilter);\n  }, [targetDocument, optionFilter]);\n\n  const optionWalker = React.useMemo(\n    () => ({\n      first: () => {\n        if (!treeWalkerRef.current || !listboxRef.current) {\n          return null;\n        }\n\n        treeWalkerRef.current.currentNode = listboxRef.current;\n        return treeWalkerRef.current.firstChild() as HTMLElement | null;\n      },\n      last: () => {\n        if (!treeWalkerRef.current || !listboxRef.current) {\n          return null;\n        }\n\n        return treeWalkerRef.current.lastChild() as HTMLElement | null;\n      },\n      next: () => {\n        if (!treeWalkerRef.current) {\n          return null;\n        }\n\n        return treeWalkerRef.current.nextNode() as HTMLElement | null;\n      },\n      prev: () => {\n        if (!treeWalkerRef.current) {\n          return null;\n        }\n\n        return treeWalkerRef.current.previousNode() as HTMLElement | null;\n      },\n      find: (predicate: (id: string) => boolean) => {\n        if (!treeWalkerRef.current || !listboxRef.current) {\n          return null;\n        }\n\n        treeWalkerRef.current.currentNode = listboxRef.current;\n        let cur: HTMLElement | null = treeWalkerRef.current.currentNode as HTMLElement;\n        while (cur && !predicate(cur.id)) {\n          cur = treeWalkerRef.current.nextNode() as HTMLElement | null;\n        }\n\n        return cur;\n      },\n      setCurrent: (el: HTMLElement) => {\n        if (!treeWalkerRef.current) {\n          return;\n        }\n\n        treeWalkerRef.current.currentNode = el;\n      },\n    }),\n    [],\n  );\n\n  return {\n    optionWalker,\n    listboxRef,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useIsomorphicLayoutEffect","useOptionWalker","options","matchOption","targetDocument","treeWalkerRef","useRef","listboxRef","optionFilter","useCallback","node","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","cur","id","setCurrent","el"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,4BAA4B;AAMrF,OAAO,SAASC,gBAAqDC,OAA+B;IAClG,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGN;IAC3B,MAAMO,gBAAgBT,MAAMU,MAAM,CAAoB;IACtD,MAAMC,aAAaX,MAAMU,MAAM,CAAyB;IAExD,MAAME,eAAeZ,MAAMa,WAAW,CACpC,CAACC;QACC,IAAIX,cAAcW,SAASP,YAAYO,OAAO;YAC5C,OAAOC,WAAWC,aAAa;QACjC;QAEA,OAAOD,WAAWE,WAAW;IAC/B,GACA;QAACV;KAAY;IAGfH,0BAA0B;QACxB,IAAI,CAACI,kBAAkB,CAACG,WAAWO,OAAO,EAAE;YAC1C;QACF;QAEAT,cAAcS,OAAO,GAAGV,eAAeW,gBAAgB,CAACR,WAAWO,OAAO,EAAEH,WAAWK,YAAY,EAAER;IACvG,GAAG;QAACJ;QAAgBI;KAAa;IAEjC,MAAMS,eAAerB,MAAMsB,OAAO,CAChC,IAAO,CAAA;YACLC,OAAO;gBACL,IAAI,CAACd,cAAcS,OAAO,IAAI,CAACP,WAAWO,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAT,cAAcS,OAAO,CAACM,WAAW,GAAGb,WAAWO,OAAO;gBACtD,OAAOT,cAAcS,OAAO,CAACO,UAAU;YACzC;YACAC,MAAM;gBACJ,IAAI,CAACjB,cAAcS,OAAO,IAAI,CAACP,WAAWO,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEA,OAAOT,cAAcS,OAAO,CAACS,SAAS;YACxC;YACAC,MAAM;gBACJ,IAAI,CAACnB,cAAcS,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOT,cAAcS,OAAO,CAACW,QAAQ;YACvC;YACAC,MAAM;gBACJ,IAAI,CAACrB,cAAcS,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOT,cAAcS,OAAO,CAACa,YAAY;YAC3C;YACAC,MAAM,CAACC;gBACL,IAAI,CAACxB,cAAcS,OAAO,IAAI,CAACP,WAAWO,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAT,cAAcS,OAAO,CAACM,WAAW,GAAGb,WAAWO,OAAO;gBACtD,IAAIgB,MAA0BzB,cAAcS,OAAO,CAACM,WAAW;gBAC/D,MAAOU,OAAO,CAACD,UAAUC,IAAIC,EAAE,EAAG;oBAChCD,MAAMzB,cAAcS,OAAO,CAACW,QAAQ;gBACtC;gBAEA,OAAOK;YACT;YACAE,YAAY,CAACC;gBACX,IAAI,CAAC5B,cAAcS,OAAO,EAAE;oBAC1B;gBACF;gBAEAT,cAAcS,OAAO,CAACM,WAAW,GAAGa;YACtC;QACF,CAAA,GACA,EAAE;IAGJ,OAAO;QACLhB;QACAV;IACF;AACF"}

package/lib/index.js

@@ -1,3 +1,3 @@
 export { // eslint-disable-next-line deprecation/deprecation
 useARIAButtonShorthand, useARIAButtonProps } from './button/index';
-export { useActiveDescendant } from './activedescendant';
+export { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  // eslint-disable-next-line deprecation/deprecation\n  useARIAButtonShorthand,\n  useARIAButtonProps,\n} from './button/index';\nexport { useActiveDescendant } from './activedescendant';\nexport type { ActiveDescendantImperativeRef, ActiveDescendantOptions } from './activedescendant';\nexport type {\n  ARIAButtonSlotProps,\n  ARIAButtonProps,\n  ARIAButtonResultProps,\n  ARIAButtonType,\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonAlteredProps,\n} from './button/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SAASC,mBAAmB,QAAQ,qBAAqB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  // eslint-disable-next-line deprecation/deprecation\n  useARIAButtonShorthand,\n  useARIAButtonProps,\n} from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\nexport type { ActiveDescendantImperativeRef, ActiveDescendantOptions } from './activedescendant';\nexport type {\n  ARIAButtonSlotProps,\n  ARIAButtonProps,\n  ARIAButtonResultProps,\n  ARIAButtonType,\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonAlteredProps,\n} from './button/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SAASC,mBAAmB,EAAEC,uCAAuC,QAAQ,qBAAqB"}

package/lib-commonjs/activedescendant/constants.js

@@ -1,11 +1,22 @@
-"use strict";
+/**
+ * Applied to the element that is active descendant
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "ACTIVEDESCENDANT_ATTRIBUTE", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ACTIVEDESCENDANT_ATTRIBUTE: function() {
         return ACTIVEDESCENDANT_ATTRIBUTE;
+    },
+    ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE: function() {
+        return ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE;
     }
 });
 const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';
+const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';

package/lib-commonjs/activedescendant/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["constants.js"],"sourcesContent":["export const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,6BAA6B"}
+{"version":3,"sources":["constants.js"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */ export const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */ export const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AAAA;;CAEC;;;;;;;;;;;IAAgBA,0BAA0B;eAA1BA;;IAGAC,uCAAuC;eAAvCA;;;AAHN,MAAMD,6BAA6B;AAGnC,MAAMC,0CAA0C"}

package/lib-commonjs/activedescendant/index.js

@@ -4,4 +4,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./useActiveDescendant"), exports);
+_export_star._(require("./constants"), exports);
 _export_star._(require("./types"), exports);

package/lib-commonjs/activedescendant/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useActiveDescendant';\nexport * from './types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useActiveDescendant';\nexport * from './constants';\nexport * from './types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA"}

package/lib-commonjs/activedescendant/scrollIntoView.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "scrollIntoView", {
+    enumerable: true,
+    get: function() {
+        return scrollIntoView;
+    }
+});
+const scrollIntoView = (target, scrollParent)=>{
+    if (!target || !scrollParent) {
+        return;
+    }
+    if (scrollParent.offsetHeight >= scrollParent.scrollHeight) {
+        return;
+    }
+    const { offsetHeight, offsetTop } = target;
+    const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;
+    const isAbove = offsetTop < scrollTop;
+    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+    const buffer = 2;
+    if (isAbove) {
+        scrollParent.scrollTo(0, offsetTop - buffer);
+    }
+    if (isBelow) {
+        scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+    }
+};

package/lib-commonjs/activedescendant/scrollIntoView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scrollIntoView.js"],"sourcesContent":["export const scrollIntoView = (target, scrollParent)=>{\n    if (!target || !scrollParent) {\n        return;\n    }\n    if (scrollParent.offsetHeight >= scrollParent.scrollHeight) {\n        return;\n    }\n    const { offsetHeight, offsetTop } = target;\n    const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n    const isAbove = offsetTop < scrollTop;\n    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n    const buffer = 2;\n    if (isAbove) {\n        scrollParent.scrollTo(0, offsetTop - buffer);\n    }\n    if (isBelow) {\n        scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n    }\n};\n"],"names":["scrollIntoView","target","scrollParent","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,iBAAiB,CAACC,QAAQC;IACnC,IAAI,CAACD,UAAU,CAACC,cAAc;QAC1B;IACJ;IACA,IAAIA,aAAaC,YAAY,IAAID,aAAaE,YAAY,EAAE;QACxD;IACJ;IACA,MAAM,EAAED,YAAY,EAAEE,SAAS,EAAE,GAAGJ;IACpC,MAAM,EAAEE,cAAcG,kBAAkB,EAAEC,SAAS,EAAE,GAAGL;IACxD,MAAMM,UAAUH,YAAYE;IAC5B,MAAME,UAAUJ,YAAYF,eAAeI,YAAYD;IACvD,MAAMI,SAAS;IACf,IAAIF,SAAS;QACTN,aAAaS,QAAQ,CAAC,GAAGN,YAAYK;IACzC;IACA,IAAID,SAAS;QACTP,aAAaS,QAAQ,CAAC,GAAGN,YAAYC,qBAAqBH,eAAeO;IAC7E;AACJ"}

package/lib-commonjs/activedescendant/useActiveDescendant.js

@@ -10,122 +10,142 @@ Object.defineProperty(exports, "useActiveDescendant", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttabster = require("@fluentui/react-tabster");
 const _useOptionWalker = require("./useOptionWalker");
 const _constants = require("./constants");
+const _scrollIntoView = require("./scrollIntoView");
 function useActiveDescendant(options) {
-    const { imperativeRef, matchOption } = options;
+    const { imperativeRef, matchOption: matchOptionUnstable } = options;
+    const focusVisibleRef = _react.useRef(false);
+    const activeIdRef = _react.useRef(null);
     const activeParentRef = _react.useRef(null);
+    (0, _reacttabster.useOnKeyboardNavigationChange)((isNavigatingWithKeyboard)=>{
+        focusVisibleRef.current = isNavigatingWithKeyboard;
+        const active = getActiveDescendant();
+        if (!active) {
+            return;
+        }
+        if (isNavigatingWithKeyboard) {
+            active.setAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+        } else {
+            active.removeAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
+        }
+    });
+    const matchOption = (0, _reactutilities.useEventCallback)(matchOptionUnstable);
     const { listboxRef, optionWalker } = (0, _useOptionWalker.useOptionWalker)({
         matchOption
     });
-    const getActiveDescendant = ()=>{
+    const getActiveDescendant = _react.useCallback(()=>{
         var _listboxRef_current;
-        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${_constants.ACTIVEDESCENDANT_ATTRIBUTE}]`);
-    };
-    const scrollActiveIntoView = (active)=>{
-        if (!listboxRef.current) {
-            return;
-        }
-        if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
-            return;
-        }
-        const { offsetHeight, offsetTop } = active;
-        const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
-        const isAbove = offsetTop < scrollTop;
-        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
-        const buffer = 2;
-        if (isAbove) {
-            listboxRef.current.scrollTo(0, offsetTop - buffer);
-        }
-        if (isBelow) {
-            listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
-        }
-    };
-    const setActiveDescendant = (nextActive)=>{
+        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`#${activeIdRef.current}`);
+    }, [
+        listboxRef
+    ]);
+    const blurActiveDescendant = _react.useCallback(()=>{
+        var _activeParentRef_current;
         const active = getActiveDescendant();
         if (active) {
             active.removeAttribute(_constants.ACTIVEDESCENDANT_ATTRIBUTE);
+            active.removeAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
         }
-        if (nextActive) {
-            var _activeParentRef_current;
-            nextActive.setAttribute(_constants.ACTIVEDESCENDANT_ATTRIBUTE, '');
-            scrollActiveIntoView(nextActive);
-            (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
-        } else {
-            var _activeParentRef_current1;
-            (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');
+        (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.removeAttribute('aria-activedescendant');
+        activeIdRef.current = null;
+    }, [
+        activeParentRef,
+        getActiveDescendant
+    ]);
+    const focusActiveDescendant = _react.useCallback((nextActive)=>{
+        var _activeParentRef_current;
+        if (!nextActive) {
+            return;
         }
-    };
-    _react.useImperativeHandle(imperativeRef, ()=>({
-            first: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
-                    return;
-                }
-                optionWalker.setCurrent(listboxRef.current);
+        blurActiveDescendant();
+        (0, _scrollIntoView.scrollIntoView)(nextActive, listboxRef.current);
+        (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);
+        activeIdRef.current = nextActive.id;
+        nextActive.setAttribute(_constants.ACTIVEDESCENDANT_ATTRIBUTE, '');
+        if (focusVisibleRef.current) {
+            nextActive.setAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
+        }
+    }, [
+        activeParentRef,
+        listboxRef,
+        blurActiveDescendant
+    ]);
+    const controller = _react.useMemo(()=>({
+            first: ({ passive } = {})=>{
                 const first = optionWalker.first();
-                if (first) {
-                    setActiveDescendant(first);
+                if (!passive) {
+                    focusActiveDescendant(first);
                 }
+                return first === null || first === void 0 ? void 0 : first.id;
             },
-            next: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
-                    return;
+            last: ({ passive } = {})=>{
+                const last = optionWalker.last();
+                if (!passive) {
+                    focusActiveDescendant(last);
                 }
+                return last === null || last === void 0 ? void 0 : last.id;
+            },
+            next: ({ passive } = {})=>{
                 const active = getActiveDescendant();
                 if (!active) {
                     return;
                 }
                 optionWalker.setCurrent(active);
                 const next = optionWalker.next();
-                if (next) {
-                    setActiveDescendant(next);
+                if (!passive) {
+                    focusActiveDescendant(next);
                 }
+                return next === null || next === void 0 ? void 0 : next.id;
             },
-            prev: ()=>{
-                if (!listboxRef.current || !activeParentRef.current) {
-                    return;
-                }
+            prev: ({ passive } = {})=>{
                 const active = getActiveDescendant();
                 if (!active) {
                     return;
                 }
                 optionWalker.setCurrent(active);
-                if (!matchOption(active)) {
-                    optionWalker.prev();
-                }
                 const next = optionWalker.prev();
-                if (next && next !== listboxRef.current) {
-                    setActiveDescendant(next);
+                if (!passive) {
+                    focusActiveDescendant(next);
                 }
+                return next === null || next === void 0 ? void 0 : next.id;
             },
             blur: ()=>{
-                if (!activeParentRef.current) {
-                    return;
-                }
-                setActiveDescendant(undefined);
+                blurActiveDescendant();
             },
             active: ()=>{
-                if (listboxRef.current) {
-                    var _getActiveDescendant;
-                    return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;
-                }
+                var _getActiveDescendant;
+                return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;
             },
             focus: (id)=>{
                 if (!listboxRef.current) {
                     return;
                 }
-                optionWalker.setCurrent(listboxRef.current);
-                let cur = optionWalker.next();
-                while(cur && cur.id !== id){
-                    cur = optionWalker.next();
+                const target = listboxRef.current.querySelector(`#${id}`);
+                if (target) {
+                    focusActiveDescendant(target);
                 }
-                if (cur) {
-                    setActiveDescendant(cur);
+            },
+            find (predicate, { passive } = {}) {
+                const target = optionWalker.find(predicate);
+                if (!passive) {
+                    focusActiveDescendant(target);
                 }
+                return target === null || target === void 0 ? void 0 : target.id;
             }
-        }));
+        }), [
+        optionWalker,
+        listboxRef,
+        focusActiveDescendant,
+        blurActiveDescendant,
+        getActiveDescendant
+    ]);
+    _react.useImperativeHandle(imperativeRef, ()=>controller);
     return {
         listboxRef,
-        activeParentRef
+        activeParentRef,
+        controller
     };
 }

package/lib-commonjs/activedescendant/useActiveDescendant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE } from './constants';\nexport function useActiveDescendant(options) {\n    const { imperativeRef, matchOption } = options;\n    const activeParentRef = React.useRef(null);\n    const { listboxRef, optionWalker } = useOptionWalker({\n        matchOption\n    });\n    const getActiveDescendant = ()=>{\n        var _listboxRef_current;\n        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);\n    };\n    const scrollActiveIntoView = (active)=>{\n        if (!listboxRef.current) {\n            return;\n        }\n        if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {\n            return;\n        }\n        const { offsetHeight, offsetTop } = active;\n        const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;\n        const isAbove = offsetTop < scrollTop;\n        const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n        const buffer = 2;\n        if (isAbove) {\n            listboxRef.current.scrollTo(0, offsetTop - buffer);\n        }\n        if (isBelow) {\n            listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n        }\n    };\n    const setActiveDescendant = (nextActive)=>{\n        const active = getActiveDescendant();\n        if (active) {\n            active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n        }\n        if (nextActive) {\n            var _activeParentRef_current;\n            nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n            scrollActiveIntoView(nextActive);\n            (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);\n        } else {\n            var _activeParentRef_current1;\n            (_activeParentRef_current1 = activeParentRef.current) === null || _activeParentRef_current1 === void 0 ? void 0 : _activeParentRef_current1.removeAttribute('aria-activedescendant');\n        }\n    };\n    React.useImperativeHandle(imperativeRef, ()=>({\n            first: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                optionWalker.setCurrent(listboxRef.current);\n                const first = optionWalker.first();\n                if (first) {\n                    setActiveDescendant(first);\n                }\n            },\n            next: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                const next = optionWalker.next();\n                if (next) {\n                    setActiveDescendant(next);\n                }\n            },\n            prev: ()=>{\n                if (!listboxRef.current || !activeParentRef.current) {\n                    return;\n                }\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                if (!matchOption(active)) {\n                    optionWalker.prev();\n                }\n                const next = optionWalker.prev();\n                if (next && next !== listboxRef.current) {\n                    setActiveDescendant(next);\n                }\n            },\n            blur: ()=>{\n                if (!activeParentRef.current) {\n                    return;\n                }\n                setActiveDescendant(undefined);\n            },\n            active: ()=>{\n                if (listboxRef.current) {\n                    var _getActiveDescendant;\n                    return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;\n                }\n            },\n            focus: (id)=>{\n                if (!listboxRef.current) {\n                    return;\n                }\n                optionWalker.setCurrent(listboxRef.current);\n                let cur = optionWalker.next();\n                while(cur && cur.id !== id){\n                    cur = optionWalker.next();\n                }\n                if (cur) {\n                    setActiveDescendant(cur);\n                }\n            }\n        }));\n    return {\n        listboxRef,\n        activeParentRef\n    };\n}\n"],"names":["useActiveDescendant","options","imperativeRef","matchOption","activeParentRef","React","useRef","listboxRef","optionWalker","useOptionWalker","getActiveDescendant","_listboxRef_current","current","querySelector","ACTIVEDESCENDANT_ATTRIBUTE","scrollActiveIntoView","active","offsetHeight","scrollHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","setActiveDescendant","nextActive","removeAttribute","_activeParentRef_current","setAttribute","id","_activeParentRef_current1","useImperativeHandle","first","setCurrent","next","prev","blur","undefined","_getActiveDescendant","focus","cur"],"mappings":"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"}
+{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\nexport function useActiveDescendant(options) {\n    const { imperativeRef, matchOption: matchOptionUnstable } = options;\n    const focusVisibleRef = React.useRef(false);\n    const activeIdRef = React.useRef(null);\n    const activeParentRef = React.useRef(null);\n    useOnKeyboardNavigationChange((isNavigatingWithKeyboard)=>{\n        focusVisibleRef.current = isNavigatingWithKeyboard;\n        const active = getActiveDescendant();\n        if (!active) {\n            return;\n        }\n        if (isNavigatingWithKeyboard) {\n            active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n        } else {\n            active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n        }\n    });\n    const matchOption = useEventCallback(matchOptionUnstable);\n    const { listboxRef, optionWalker } = useOptionWalker({\n        matchOption\n    });\n    const getActiveDescendant = React.useCallback(()=>{\n        var _listboxRef_current;\n        return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`#${activeIdRef.current}`);\n    }, [\n        listboxRef\n    ]);\n    const blurActiveDescendant = React.useCallback(()=>{\n        var _activeParentRef_current;\n        const active = getActiveDescendant();\n        if (active) {\n            active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n            active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n        }\n        (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.removeAttribute('aria-activedescendant');\n        activeIdRef.current = null;\n    }, [\n        activeParentRef,\n        getActiveDescendant\n    ]);\n    const focusActiveDescendant = React.useCallback((nextActive)=>{\n        var _activeParentRef_current;\n        if (!nextActive) {\n            return;\n        }\n        blurActiveDescendant();\n        scrollIntoView(nextActive, listboxRef.current);\n        (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', nextActive.id);\n        activeIdRef.current = nextActive.id;\n        nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n        if (focusVisibleRef.current) {\n            nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n        }\n    }, [\n        activeParentRef,\n        listboxRef,\n        blurActiveDescendant\n    ]);\n    const controller = React.useMemo(()=>({\n            first: ({ passive } = {})=>{\n                const first = optionWalker.first();\n                if (!passive) {\n                    focusActiveDescendant(first);\n                }\n                return first === null || first === void 0 ? void 0 : first.id;\n            },\n            last: ({ passive } = {})=>{\n                const last = optionWalker.last();\n                if (!passive) {\n                    focusActiveDescendant(last);\n                }\n                return last === null || last === void 0 ? void 0 : last.id;\n            },\n            next: ({ passive } = {})=>{\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                const next = optionWalker.next();\n                if (!passive) {\n                    focusActiveDescendant(next);\n                }\n                return next === null || next === void 0 ? void 0 : next.id;\n            },\n            prev: ({ passive } = {})=>{\n                const active = getActiveDescendant();\n                if (!active) {\n                    return;\n                }\n                optionWalker.setCurrent(active);\n                const next = optionWalker.prev();\n                if (!passive) {\n                    focusActiveDescendant(next);\n                }\n                return next === null || next === void 0 ? void 0 : next.id;\n            },\n            blur: ()=>{\n                blurActiveDescendant();\n            },\n            active: ()=>{\n                var _getActiveDescendant;\n                return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;\n            },\n            focus: (id)=>{\n                if (!listboxRef.current) {\n                    return;\n                }\n                const target = listboxRef.current.querySelector(`#${id}`);\n                if (target) {\n                    focusActiveDescendant(target);\n                }\n            },\n            find (predicate, { passive } = {}) {\n                const target = optionWalker.find(predicate);\n                if (!passive) {\n                    focusActiveDescendant(target);\n                }\n                return target === null || target === void 0 ? void 0 : target.id;\n            }\n        }), [\n        optionWalker,\n        listboxRef,\n        focusActiveDescendant,\n        blurActiveDescendant,\n        getActiveDescendant\n    ]);\n    React.useImperativeHandle(imperativeRef, ()=>controller);\n    return {\n        listboxRef,\n        activeParentRef,\n        controller\n    };\n}\n"],"names":["useActiveDescendant","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","React","useRef","activeIdRef","activeParentRef","useOnKeyboardNavigationChange","isNavigatingWithKeyboard","current","active","getActiveDescendant","setAttribute","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","removeAttribute","useEventCallback","listboxRef","optionWalker","useOptionWalker","useCallback","_listboxRef_current","querySelector","blurActiveDescendant","_activeParentRef_current","ACTIVEDESCENDANT_ATTRIBUTE","focusActiveDescendant","nextActive","scrollIntoView","id","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","_getActiveDescendant","focus","target","find","predicate","useImperativeHandle"],"mappings":"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"}

package/lib-commonjs/activedescendant/useOptionWalker.js

@@ -36,11 +36,18 @@ function useOptionWalker(options) {
     ]);
     const optionWalker = _react.useMemo(()=>({
             first: ()=>{
-                if (!treeWalkerRef.current) {
+                if (!treeWalkerRef.current || !listboxRef.current) {
                     return null;
                 }
+                treeWalkerRef.current.currentNode = listboxRef.current;
                 return treeWalkerRef.current.firstChild();
             },
+            last: ()=>{
+                if (!treeWalkerRef.current || !listboxRef.current) {
+                    return null;
+                }
+                return treeWalkerRef.current.lastChild();
+            },
             next: ()=>{
                 if (!treeWalkerRef.current) {
                     return null;
@@ -53,6 +60,17 @@ function useOptionWalker(options) {
                 }
                 return treeWalkerRef.current.previousNode();
             },
+            find: (predicate)=>{
+                if (!treeWalkerRef.current || !listboxRef.current) {
+                    return null;
+                }
+                treeWalkerRef.current.currentNode = listboxRef.current;
+                let cur = treeWalkerRef.current.currentNode;
+                while(cur && !predicate(cur.id)){
+                    cur = treeWalkerRef.current.nextNode();
+                }
+                return cur;
+            },
             setCurrent: (el)=>{
                 if (!treeWalkerRef.current) {
                     return;

package/lib-commonjs/activedescendant/useOptionWalker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOptionWalker.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nexport function useOptionWalker(options) {\n    const { matchOption } = options;\n    const { targetDocument } = useFluent();\n    const treeWalkerRef = React.useRef(null);\n    const listboxRef = React.useRef(null);\n    const optionFilter = React.useCallback((node)=>{\n        if (isHTMLElement(node) && matchOption(node)) {\n            return NodeFilter.FILTER_ACCEPT;\n        }\n        return NodeFilter.FILTER_SKIP;\n    }, [\n        matchOption\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        if (!targetDocument || !listboxRef.current) {\n            return;\n        }\n        treeWalkerRef.current = targetDocument.createTreeWalker(listboxRef.current, NodeFilter.SHOW_ELEMENT, optionFilter);\n    }, [\n        targetDocument,\n        optionFilter\n    ]);\n    const optionWalker = React.useMemo(()=>({\n            first: ()=>{\n                if (!treeWalkerRef.current) {\n                    return null;\n                }\n                return treeWalkerRef.current.firstChild();\n            },\n            next: ()=>{\n                if (!treeWalkerRef.current) {\n                    return null;\n                }\n                return treeWalkerRef.current.nextNode();\n            },\n            prev: ()=>{\n                if (!treeWalkerRef.current) {\n                    return null;\n                }\n                return treeWalkerRef.current.previousNode();\n            },\n            setCurrent: (el)=>{\n                if (!treeWalkerRef.current) {\n                    return;\n                }\n                treeWalkerRef.current.currentNode = el;\n            }\n        }), []);\n    return {\n        optionWalker,\n        listboxRef\n    };\n}\n"],"names":["useOptionWalker","options","matchOption","targetDocument","useFluent","treeWalkerRef","React","useRef","listboxRef","optionFilter","useCallback","node","isHTMLElement","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","useIsomorphicLayoutEffect","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","firstChild","next","nextNode","prev","previousNode","setCurrent","el","currentNode"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;qCACyB;gCACS;AAClD,SAASA,gBAAgBC,OAAO;IACnC,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,gBAAgBC,OAAMC,MAAM,CAAC;IACnC,MAAMC,aAAaF,OAAMC,MAAM,CAAC;IAChC,MAAME,eAAeH,OAAMI,WAAW,CAAC,CAACC;QACpC,IAAIC,IAAAA,6BAAa,EAACD,SAAST,YAAYS,OAAO;YAC1C,OAAOE,WAAWC,aAAa;QACnC;QACA,OAAOD,WAAWE,WAAW;IACjC,GAAG;QACCb;KACH;IACDc,IAAAA,yCAAyB,EAAC;QACtB,IAAI,CAACb,kBAAkB,CAACK,WAAWS,OAAO,EAAE;YACxC;QACJ;QACAZ,cAAcY,OAAO,GAAGd,eAAee,gBAAgB,CAACV,WAAWS,OAAO,EAAEJ,WAAWM,YAAY,EAAEV;IACzG,GAAG;QACCN;QACAM;KACH;IACD,MAAMW,eAAed,OAAMe,OAAO,CAAC,IAAK,CAAA;YAChCC,OAAO;gBACH,IAAI,CAACjB,cAAcY,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOZ,cAAcY,OAAO,CAACM,UAAU;YAC3C;YACAC,MAAM;gBACF,IAAI,CAACnB,cAAcY,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOZ,cAAcY,OAAO,CAACQ,QAAQ;YACzC;YACAC,MAAM;gBACF,IAAI,CAACrB,cAAcY,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOZ,cAAcY,OAAO,CAACU,YAAY;YAC7C;YACAC,YAAY,CAACC;gBACT,IAAI,CAACxB,cAAcY,OAAO,EAAE;oBACxB;gBACJ;gBACAZ,cAAcY,OAAO,CAACa,WAAW,GAAGD;YACxC;QACJ,CAAA,GAAI,EAAE;IACV,OAAO;QACHT;QACAZ;IACJ;AACJ"}
+{"version":3,"sources":["useOptionWalker.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nexport function useOptionWalker(options) {\n    const { matchOption } = options;\n    const { targetDocument } = useFluent();\n    const treeWalkerRef = React.useRef(null);\n    const listboxRef = React.useRef(null);\n    const optionFilter = React.useCallback((node)=>{\n        if (isHTMLElement(node) && matchOption(node)) {\n            return NodeFilter.FILTER_ACCEPT;\n        }\n        return NodeFilter.FILTER_SKIP;\n    }, [\n        matchOption\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        if (!targetDocument || !listboxRef.current) {\n            return;\n        }\n        treeWalkerRef.current = targetDocument.createTreeWalker(listboxRef.current, NodeFilter.SHOW_ELEMENT, optionFilter);\n    }, [\n        targetDocument,\n        optionFilter\n    ]);\n    const optionWalker = React.useMemo(()=>({\n            first: ()=>{\n                if (!treeWalkerRef.current || !listboxRef.current) {\n                    return null;\n                }\n                treeWalkerRef.current.currentNode = listboxRef.current;\n                return treeWalkerRef.current.firstChild();\n            },\n            last: ()=>{\n                if (!treeWalkerRef.current || !listboxRef.current) {\n                    return null;\n                }\n                return treeWalkerRef.current.lastChild();\n            },\n            next: ()=>{\n                if (!treeWalkerRef.current) {\n                    return null;\n                }\n                return treeWalkerRef.current.nextNode();\n            },\n            prev: ()=>{\n                if (!treeWalkerRef.current) {\n                    return null;\n                }\n                return treeWalkerRef.current.previousNode();\n            },\n            find: (predicate)=>{\n                if (!treeWalkerRef.current || !listboxRef.current) {\n                    return null;\n                }\n                treeWalkerRef.current.currentNode = listboxRef.current;\n                let cur = treeWalkerRef.current.currentNode;\n                while(cur && !predicate(cur.id)){\n                    cur = treeWalkerRef.current.nextNode();\n                }\n                return cur;\n            },\n            setCurrent: (el)=>{\n                if (!treeWalkerRef.current) {\n                    return;\n                }\n                treeWalkerRef.current.currentNode = el;\n            }\n        }), []);\n    return {\n        optionWalker,\n        listboxRef\n    };\n}\n"],"names":["useOptionWalker","options","matchOption","targetDocument","useFluent","treeWalkerRef","React","useRef","listboxRef","optionFilter","useCallback","node","isHTMLElement","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","useIsomorphicLayoutEffect","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","cur","id","setCurrent","el"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;qCACyB;gCACS;AAClD,SAASA,gBAAgBC,OAAO;IACnC,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,gBAAgBC,OAAMC,MAAM,CAAC;IACnC,MAAMC,aAAaF,OAAMC,MAAM,CAAC;IAChC,MAAME,eAAeH,OAAMI,WAAW,CAAC,CAACC;QACpC,IAAIC,IAAAA,6BAAa,EAACD,SAAST,YAAYS,OAAO;YAC1C,OAAOE,WAAWC,aAAa;QACnC;QACA,OAAOD,WAAWE,WAAW;IACjC,GAAG;QACCb;KACH;IACDc,IAAAA,yCAAyB,EAAC;QACtB,IAAI,CAACb,kBAAkB,CAACK,WAAWS,OAAO,EAAE;YACxC;QACJ;QACAZ,cAAcY,OAAO,GAAGd,eAAee,gBAAgB,CAACV,WAAWS,OAAO,EAAEJ,WAAWM,YAAY,EAAEV;IACzG,GAAG;QACCN;QACAM;KACH;IACD,MAAMW,eAAed,OAAMe,OAAO,CAAC,IAAK,CAAA;YAChCC,OAAO;gBACH,IAAI,CAACjB,cAAcY,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBAC/C,OAAO;gBACX;gBACAZ,cAAcY,OAAO,CAACM,WAAW,GAAGf,WAAWS,OAAO;gBACtD,OAAOZ,cAAcY,OAAO,CAACO,UAAU;YAC3C;YACAC,MAAM;gBACF,IAAI,CAACpB,cAAcY,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBAC/C,OAAO;gBACX;gBACA,OAAOZ,cAAcY,OAAO,CAACS,SAAS;YAC1C;YACAC,MAAM;gBACF,IAAI,CAACtB,cAAcY,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOZ,cAAcY,OAAO,CAACW,QAAQ;YACzC;YACAC,MAAM;gBACF,IAAI,CAACxB,cAAcY,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOZ,cAAcY,OAAO,CAACa,YAAY;YAC7C;YACAC,MAAM,CAACC;gBACH,IAAI,CAAC3B,cAAcY,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBAC/C,OAAO;gBACX;gBACAZ,cAAcY,OAAO,CAACM,WAAW,GAAGf,WAAWS,OAAO;gBACtD,IAAIgB,MAAM5B,cAAcY,OAAO,CAACM,WAAW;gBAC3C,MAAMU,OAAO,CAACD,UAAUC,IAAIC,EAAE,EAAE;oBAC5BD,MAAM5B,cAAcY,OAAO,CAACW,QAAQ;gBACxC;gBACA,OAAOK;YACX;YACAE,YAAY,CAACC;gBACT,IAAI,CAAC/B,cAAcY,OAAO,EAAE;oBACxB;gBACJ;gBACAZ,cAAcY,OAAO,CAACM,WAAW,GAAGa;YACxC;QACJ,CAAA,GAAI,EAAE;IACV,OAAO;QACHhB;QACAZ;IACJ;AACJ"}

package/lib-commonjs/index.js

@@ -17,6 +17,9 @@ _export(exports, {
     },
     useActiveDescendant: function() {
         return _activedescendant.useActiveDescendant;
+    },
+    ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE: function() {
+        return _activedescendant.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE;
     }
 });
 const _index = require("./button/index");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { // eslint-disable-next-line deprecation/deprecation\nuseARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport { useActiveDescendant } from './activedescendant';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;;uBADsB;kCACd"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { // eslint-disable-next-line deprecation/deprecation\nuseARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;IAAEC,uCAAuC;eAAvCA,yDAAuC;;;uBADnB;kCAC2B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-aria",
-  "version": "9.6.2",
+  "version": "9.7.1",
   "description": "React helper to ensure ARIA",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,6 +15,8 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
@@ -33,12 +35,13 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
     "@fluentui/react-shared-contexts": "^9.13.2",
+    "@fluentui/react-tabster": "^9.17.1",
     "@fluentui/react-utilities": "^9.15.6",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.14.0 <19.0.0",
+    "@types/react-dom": ">=16.9.0 <19.0.0",
     "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.14.0 <19.0.0"
   },