@fluentui/react-aria 9.8.2 → 9.9.1

package/CHANGELOG.md

@@ -1,18 +1,42 @@
 # Change Log - @fluentui/react-aria
 
-This log was last generated on Tue, 06 Feb 2024 17:52:07 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Feb 2024 02:28:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.9.1)
+
+Wed, 28 Feb 2024 02:28:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.9.0..@fluentui/react-aria_v9.9.1)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.14.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.31 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-tabster to v9.19.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+- Bump @fluentui/react-utilities to v9.18.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
+
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.9.0)
+
+Tue, 20 Feb 2024 14:22:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.8.2..@fluentui/react-aria_v9.9.0)
+
+### Minor changes
+
+- feat: adds a context for active descendant ([PR #30528](https://github.com/microsoft/fluentui/pull/30528) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.30 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-tabster to v9.19.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
+
 ## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.8.2)
 
-Tue, 06 Feb 2024 17:52:07 GMT 
+Tue, 06 Feb 2024 17:55:18 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.8.1..@fluentui/react-aria_v9.8.2)
 
 ### Patches
 
 - chore: adds @fluentui/react-jsx-runtime as dependency ([PR #30485](https://github.com/microsoft/fluentui/pull/30485) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-tabster to v9.19.0 ([PR #26681](https://github.com/microsoft/fluentui/pull/26681) by beachball)
+- Bump @fluentui/react-tabster to v9.19.0 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
 
 ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.8.1)
 

package/dist/index.d.ts

@@ -10,12 +10,18 @@ import type { UnionToIntersection } from '@fluentui/react-utilities';
  */
 export declare const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = "data-activedescendant-focusvisible";
 
+export declare const ActiveDescendantContextProvider: React_2.Provider<ActiveDescendantContextValue | undefined>;
+
+export declare type ActiveDescendantContextValue = {
+    controller: ActiveDescendantImperativeRef;
+};
+
 export declare interface ActiveDescendantImperativeRef {
     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;
+    find: (predicate: (id: string) => boolean, options?: IteratorOptions & FindOptions) => string | undefined;
     blur: () => void;
     active: () => string | undefined;
     focus: (id: string) => void;
@@ -93,6 +99,13 @@ export declare type AriaLiveAnnouncerState = {
     children?: React_2.ReactNode;
 };
 
+declare interface FindOptions {
+    /**
+     * Starts the search from a specific id
+     */
+    startFrom?: string;
+}
+
 declare interface IteratorOptions {
     /**
      * When passive, the active descendant is changed
@@ -105,6 +118,8 @@ export declare const renderAriaLiveAnnouncer_unstable: (state: AriaLiveAnnouncer
 
 export declare function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(options: ActiveDescendantOptions): UseActiveDescendantReturn<TActiveParentElement, TListboxElement>;
 
+export declare const useActiveDescendantContext: () => ActiveDescendantContextValue;
+
 declare interface UseActiveDescendantReturn<TActiveParentElement extends HTMLElement = HTMLElement, TListboxElement extends HTMLElement = HTMLElement> {
     /**
      * Attach this to the element that contains all active descendants
@@ -166,4 +181,6 @@ export declare const useAriaLiveAnnouncer_unstable: (props: AriaLiveAnnouncerPro
 
 export declare function useAriaLiveAnnouncerContextValues_unstable(state: AriaLiveAnnouncerState): AriaLiveAnnouncerContextValues;
 
+export declare const useHasParentActiveDescendantContext: () => boolean;
+
 export { }

package/lib/activedescendant/ActiveDescendantContext.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+const noop = ()=>undefined;
+const activeDescendantContextDefaultValue = {
+    controller: {
+        active: noop,
+        blur: noop,
+        find: noop,
+        first: noop,
+        focus: noop,
+        last: noop,
+        next: noop,
+        prev: noop
+    }
+};
+const ActiveDescendantContext = React.createContext(undefined);
+export const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;
+export const useActiveDescendantContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(ActiveDescendantContext)) !== null && _React_useContext !== void 0 ? _React_useContext : activeDescendantContextDefaultValue;
+};
+export const useHasParentActiveDescendantContext = ()=>!!React.useContext(ActiveDescendantContext);

package/lib/activedescendant/ActiveDescendantContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ActiveDescendantContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActiveDescendantImperativeRef } from './types';\n\nexport type ActiveDescendantContextValue = {\n  controller: ActiveDescendantImperativeRef;\n};\n\nconst noop = () => undefined;\n\nconst activeDescendantContextDefaultValue: ActiveDescendantContextValue = {\n  controller: {\n    active: noop,\n    blur: noop,\n    find: noop,\n    first: noop,\n    focus: noop,\n    last: noop,\n    next: noop,\n    prev: noop,\n  },\n};\n\nconst ActiveDescendantContext = React.createContext<ActiveDescendantContextValue | undefined>(undefined);\n\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = () =>\n  React.useContext(ActiveDescendantContext) ?? activeDescendantContextDefaultValue;\nexport const useHasParentActiveDescendantContext = () => !!React.useContext(ActiveDescendantContext);\n"],"names":["React","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","last","next","prev","ActiveDescendantContext","createContext","ActiveDescendantContextProvider","Provider","useActiveDescendantContext","useContext","useHasParentActiveDescendantContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,OAAO,IAAMC;AAEnB,MAAMC,sCAAoE;IACxEC,YAAY;QACVC,QAAQJ;QACRK,MAAML;QACNM,MAAMN;QACNO,OAAOP;QACPQ,OAAOR;QACPS,MAAMT;QACNU,MAAMV;QACNW,MAAMX;IACR;AACF;AAEA,MAAMY,0BAA0Bb,MAAMc,aAAa,CAA2CZ;AAE9F,OAAO,MAAMa,kCAAkCF,wBAAwBG,QAAQ,CAAC;AAChF,OAAO,MAAMC,6BAA6B;QACxCjB;WAAAA,CAAAA,oBAAAA,MAAMkB,UAAU,CAACL,sCAAjBb,+BAAAA,oBAA6CG;AAAkC,EAAE;AACnF,OAAO,MAAMgB,sCAAsC,IAAM,CAAC,CAACnB,MAAMkB,UAAU,CAACL,yBAAyB"}

package/lib/activedescendant/index.js

@@ -1,3 +1,4 @@
+export * from './ActiveDescendantContext';
 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 './constants';\nexport * from './types';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,cAAc;AAC5B,cAAc,UAAU"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ActiveDescendantContext';\nexport * from './useActiveDescendant';\nexport * from './constants';\nexport * from './types';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,cAAc;AAC5B,cAAc,UAAU"}

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: (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"}
+{"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 & FindOptions) => 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 FindOptions {\n  /**\n   * Starts the search from a specific id\n   */\n  startFrom?: string;\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,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
 import { useOptionWalker } from './useOptionWalker';
 import { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';
@@ -22,7 +22,8 @@ export function useActiveDescendant(options) {
         }
     });
     const matchOption = useEventCallback(matchOptionUnstable);
-    const { listboxRef, optionWalker } = useOptionWalker({
+    const listboxRef = React.useRef(null);
+    const { optionWalker, listboxCallbackRef } = useOptionWalker({
         matchOption
     });
     const getActiveDescendant = React.useCallback(()=>{
@@ -117,8 +118,8 @@ export function useActiveDescendant(options) {
                     focusActiveDescendant(target);
                 }
             },
-            find (predicate, { passive } = {}) {
-                const target = optionWalker.find(predicate);
+            find (predicate, { passive, startFrom } = {}) {
+                const target = optionWalker.find(predicate, startFrom);
                 if (!passive) {
                     focusActiveDescendant(target);
                 }
@@ -133,7 +134,7 @@ export function useActiveDescendant(options) {
     ]);
     React.useImperativeHandle(imperativeRef, ()=>controller);
     return {
-        listboxRef,
+        listboxRef: useMergedRefs(listboxRef, listboxCallbackRef),
         activeParentRef,
         controller
     };

package/lib/activedescendant/useActiveDescendant.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } 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 = React.useRef<TListboxElement>(null);\n  const { optionWalker, listboxCallbackRef } = 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, startFrom } = {}) {\n        const target = optionWalker.find(predicate, startFrom);\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: useMergedRefs(listboxRef, listboxCallbackRef), activeParentRef, controller };\n}\n"],"names":["React","useEventCallback","useMergedRefs","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","listboxCallbackRef","useCallback","querySelector","blurActiveDescendant","focusActiveDescendant","nextActive","id","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","find","predicate","startFrom","useImperativeHandle"],"mappings":"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"}

package/lib/activedescendant/useOptionWalker.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { isHTMLElement, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { isHTMLElement } from '@fluentui/react-utilities';
 export function useOptionWalker(options) {
     const { matchOption } = options;
     const { targetDocument } = useFluent();
@@ -14,11 +14,13 @@ export function useOptionWalker(options) {
     }, [
         matchOption
     ]);
-    useIsomorphicLayoutEffect(()=>{
-        if (!targetDocument || !listboxRef.current) {
-            return;
+    const setListbox = React.useCallback((el)=>{
+        if (el && targetDocument) {
+            listboxRef.current = el;
+            treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);
+        } else {
+            listboxRef.current = null;
         }
-        treeWalkerRef.current = targetDocument.createTreeWalker(listboxRef.current, NodeFilter.SHOW_ELEMENT, optionFilter);
     }, [
         targetDocument,
         optionFilter
@@ -49,11 +51,12 @@ export function useOptionWalker(options) {
                 }
                 return treeWalkerRef.current.previousNode();
             },
-            find: (predicate)=>{
+            find: (predicate, startFrom)=>{
                 if (!treeWalkerRef.current || !listboxRef.current) {
                     return null;
                 }
-                treeWalkerRef.current.currentNode = listboxRef.current;
+                const start = startFrom ? targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(startFrom) : null;
+                treeWalkerRef.current.currentNode = start !== null && start !== void 0 ? start : listboxRef.current;
                 let cur = treeWalkerRef.current.currentNode;
                 while(cur && !predicate(cur.id)){
                     cur = treeWalkerRef.current.nextNode();
@@ -66,9 +69,11 @@ export function useOptionWalker(options) {
                 }
                 treeWalkerRef.current.currentNode = el;
             }
-        }), []);
+        }), [
+        targetDocument
+    ]);
     return {
         optionWalker,
-        listboxRef
+        listboxCallbackRef: setListbox
     };
 }

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 || !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"}
+{"version":3,"sources":["useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } 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  const setListbox = React.useCallback(\n    (el: TListboxElement) => {\n      if (el && targetDocument) {\n        listboxRef.current = el;\n        treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n      } else {\n        listboxRef.current = null;\n      }\n    },\n    [targetDocument, optionFilter],\n  );\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, startFrom?: string) => {\n        if (!treeWalkerRef.current || !listboxRef.current) {\n          return null;\n        }\n\n        const start = startFrom ? targetDocument?.getElementById(startFrom) : null;\n        treeWalkerRef.current.currentNode = start ?? 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    [targetDocument],\n  );\n\n  return {\n    optionWalker,\n    listboxCallbackRef: setListbox,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useOptionWalker","options","matchOption","targetDocument","treeWalkerRef","useRef","listboxRef","optionFilter","useCallback","node","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,4BAA4B;AAM1D,OAAO,SAASC,gBAAqDC,OAA+B;IAClG,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGL;IAC3B,MAAMM,gBAAgBR,MAAMS,MAAM,CAAoB;IACtD,MAAMC,aAAaV,MAAMS,MAAM,CAAyB;IAExD,MAAME,eAAeX,MAAMY,WAAW,CACpC,CAACC;QACC,IAAIV,cAAcU,SAASP,YAAYO,OAAO;YAC5C,OAAOC,WAAWC,aAAa;QACjC;QAEA,OAAOD,WAAWE,WAAW;IAC/B,GACA;QAACV;KAAY;IAGf,MAAMW,aAAajB,MAAMY,WAAW,CAClC,CAACM;QACC,IAAIA,MAAMX,gBAAgB;YACxBG,WAAWS,OAAO,GAAGD;YACrBV,cAAcW,OAAO,GAAGZ,eAAea,gBAAgB,CAACF,IAAIJ,WAAWO,YAAY,EAAEV;QACvF,OAAO;YACLD,WAAWS,OAAO,GAAG;QACvB;IACF,GACA;QAACZ;QAAgBI;KAAa;IAGhC,MAAMW,eAAetB,MAAMuB,OAAO,CAChC,IAAO,CAAA;YACLC,OAAO;gBACL,IAAI,CAAChB,cAAcW,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAX,cAAcW,OAAO,CAACM,WAAW,GAAGf,WAAWS,OAAO;gBACtD,OAAOX,cAAcW,OAAO,CAACO,UAAU;YACzC;YACAC,MAAM;gBACJ,IAAI,CAACnB,cAAcW,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEA,OAAOX,cAAcW,OAAO,CAACS,SAAS;YACxC;YACAC,MAAM;gBACJ,IAAI,CAACrB,cAAcW,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOX,cAAcW,OAAO,CAACW,QAAQ;YACvC;YACAC,MAAM;gBACJ,IAAI,CAACvB,cAAcW,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOX,cAAcW,OAAO,CAACa,YAAY;YAC3C;YACAC,MAAM,CAACC,WAAoCC;gBACzC,IAAI,CAAC3B,cAAcW,OAAO,IAAI,CAACT,WAAWS,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEA,MAAMiB,QAAQD,YAAY5B,2BAAAA,qCAAAA,eAAgB8B,cAAc,CAACF,aAAa;gBACtE3B,cAAcW,OAAO,CAACM,WAAW,GAAGW,kBAAAA,mBAAAA,QAAS1B,WAAWS,OAAO;gBAC/D,IAAImB,MAA0B9B,cAAcW,OAAO,CAACM,WAAW;gBAC/D,MAAOa,OAAO,CAACJ,UAAUI,IAAIC,EAAE,EAAG;oBAChCD,MAAM9B,cAAcW,OAAO,CAACW,QAAQ;gBACtC;gBAEA,OAAOQ;YACT;YACAE,YAAY,CAACtB;gBACX,IAAI,CAACV,cAAcW,OAAO,EAAE;oBAC1B;gBACF;gBAEAX,cAAcW,OAAO,CAACM,WAAW,GAAGP;YACtC;QACF,CAAA,GACA;QAACX;KAAe;IAGlB,OAAO;QACLe;QACAmB,oBAAoBxB;IACtB;AACF"}

package/lib/index.js

@@ -1,4 +1,4 @@
 export { // eslint-disable-next-line deprecation/deprecation
 useARIAButtonShorthand, useARIAButtonProps } from './button/index';
-export { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';
+export { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, ActiveDescendantContextProvider, useActiveDescendantContext, useHasParentActiveDescendantContext } from './activedescendant';
 export { AriaLiveAnnouncer, renderAriaLiveAnnouncer_unstable, useAriaLiveAnnouncer_unstable, useAriaLiveAnnouncerContextValues_unstable } from './AriaLiveAnnouncer/index';

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, 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\nexport {\n  AriaLiveAnnouncer,\n  renderAriaLiveAnnouncer_unstable,\n  useAriaLiveAnnouncer_unstable,\n  useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SAASC,mBAAmB,EAAEC,uCAAuC,QAAQ,qBAAqB;AAYlG,SACEC,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,0CAA0C,QACrC,4BAA4B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  // eslint-disable-next-line deprecation/deprecation\n  useARIAButtonShorthand,\n  useARIAButtonProps,\n} from './button/index';\nexport {\n  useActiveDescendant,\n  ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE,\n  ActiveDescendantContextProvider,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from './activedescendant';\nexport type {\n  ActiveDescendantImperativeRef,\n  ActiveDescendantOptions,\n  ActiveDescendantContextValue,\n} from './activedescendant';\nexport type {\n  ARIAButtonSlotProps,\n  ARIAButtonProps,\n  ARIAButtonResultProps,\n  ARIAButtonType,\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n  AriaLiveAnnouncer,\n  renderAriaLiveAnnouncer_unstable,\n  useAriaLiveAnnouncer_unstable,\n  useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SACEC,mBAAmB,EACnBC,uCAAuC,EACvCC,+BAA+B,EAC/BC,0BAA0B,EAC1BC,mCAAmC,QAC9B,qBAAqB;AAgB5B,SACEC,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,0CAA0C,QACrC,4BAA4B"}

package/lib-commonjs/activedescendant/ActiveDescendantContext.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ActiveDescendantContextProvider: function() {
+        return ActiveDescendantContextProvider;
+    },
+    useActiveDescendantContext: function() {
+        return useActiveDescendantContext;
+    },
+    useHasParentActiveDescendantContext: function() {
+        return useHasParentActiveDescendantContext;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const noop = ()=>undefined;
+const activeDescendantContextDefaultValue = {
+    controller: {
+        active: noop,
+        blur: noop,
+        find: noop,
+        first: noop,
+        focus: noop,
+        last: noop,
+        next: noop,
+        prev: noop
+    }
+};
+const ActiveDescendantContext = /*#__PURE__*/ _react.createContext(undefined);
+const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;
+const useActiveDescendantContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = _react.useContext(ActiveDescendantContext)) !== null && _React_useContext !== void 0 ? _React_useContext : activeDescendantContextDefaultValue;
+};
+const useHasParentActiveDescendantContext = ()=>!!_react.useContext(ActiveDescendantContext);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ActiveDescendantContext.js"],"sourcesContent":["import * as React from 'react';\nconst noop = ()=>undefined;\nconst activeDescendantContextDefaultValue = {\n    controller: {\n        active: noop,\n        blur: noop,\n        find: noop,\n        first: noop,\n        focus: noop,\n        last: noop,\n        next: noop,\n        prev: noop\n    }\n};\nconst ActiveDescendantContext = React.createContext(undefined);\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = ()=>{\n    var _React_useContext;\n    return (_React_useContext = React.useContext(ActiveDescendantContext)) !== null && _React_useContext !== void 0 ? _React_useContext : activeDescendantContextDefaultValue;\n};\nexport const useHasParentActiveDescendantContext = ()=>!!React.useContext(ActiveDescendantContext);\n"],"names":["ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","last","next","prev","ActiveDescendantContext","React","createContext","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAeaA,+BAA+B;eAA/BA;;IACAC,0BAA0B;eAA1BA;;IAIAC,mCAAmC;eAAnCA;;;;iEApBU;AACvB,MAAMC,OAAO,IAAIC;AACjB,MAAMC,sCAAsC;IACxCC,YAAY;QACRC,QAAQJ;QACRK,MAAML;QACNM,MAAMN;QACNO,OAAOP;QACPQ,OAAOR;QACPS,MAAMT;QACNU,MAAMV;QACNW,MAAMX;IACV;AACJ;AACA,MAAMY,wCAA0BC,OAAMC,aAAa,CAACb;AAC7C,MAAMJ,kCAAkCe,wBAAwBG,QAAQ;AACxE,MAAMjB,6BAA6B;IACtC,IAAIkB;IACJ,OAAO,AAACA,CAAAA,oBAAoBH,OAAMI,UAAU,CAACL,wBAAuB,MAAO,QAAQI,sBAAsB,KAAK,IAAIA,oBAAoBd;AAC1I;AACO,MAAMH,sCAAsC,IAAI,CAAC,CAACc,OAAMI,UAAU,CAACL"}

package/lib-commonjs/activedescendant/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./ActiveDescendantContext"), exports);
 _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 './constants';\nexport * from './types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './ActiveDescendantContext';\nexport * from './useActiveDescendant';\nexport * from './constants';\nexport * from './types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA"}

package/lib-commonjs/activedescendant/useActiveDescendant.js

@@ -33,7 +33,8 @@ function useActiveDescendant(options) {
         }
     });
     const matchOption = (0, _reactutilities.useEventCallback)(matchOptionUnstable);
-    const { listboxRef, optionWalker } = (0, _useOptionWalker.useOptionWalker)({
+    const listboxRef = _react.useRef(null);
+    const { optionWalker, listboxCallbackRef } = (0, _useOptionWalker.useOptionWalker)({
         matchOption
     });
     const getActiveDescendant = _react.useCallback(()=>{
@@ -128,8 +129,8 @@ function useActiveDescendant(options) {
                     focusActiveDescendant(target);
                 }
             },
-            find (predicate, { passive } = {}) {
-                const target = optionWalker.find(predicate);
+            find (predicate, { passive, startFrom } = {}) {
+                const target = optionWalker.find(predicate, startFrom);
                 if (!passive) {
                     focusActiveDescendant(target);
                 }
@@ -144,7 +145,7 @@ function useActiveDescendant(options) {
     ]);
     _react.useImperativeHandle(imperativeRef, ()=>controller);
     return {
-        listboxRef,
+        listboxRef: (0, _reactutilities.useMergedRefs)(listboxRef, listboxCallbackRef),
         activeParentRef,
         controller
     };

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } 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 = React.useRef(null);\n    const { optionWalker, listboxCallbackRef } = 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, startFrom } = {}) {\n                const target = optionWalker.find(predicate, startFrom);\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: useMergedRefs(listboxRef, listboxCallbackRef),\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","listboxCallbackRef","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","startFrom","useImperativeHandle","useMergedRefs"],"mappings":"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"}

package/lib-commonjs/activedescendant/useOptionWalker.js

@@ -25,11 +25,13 @@ function useOptionWalker(options) {
     }, [
         matchOption
     ]);
-    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        if (!targetDocument || !listboxRef.current) {
-            return;
+    const setListbox = _react.useCallback((el)=>{
+        if (el && targetDocument) {
+            listboxRef.current = el;
+            treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);
+        } else {
+            listboxRef.current = null;
         }
-        treeWalkerRef.current = targetDocument.createTreeWalker(listboxRef.current, NodeFilter.SHOW_ELEMENT, optionFilter);
     }, [
         targetDocument,
         optionFilter
@@ -60,11 +62,12 @@ function useOptionWalker(options) {
                 }
                 return treeWalkerRef.current.previousNode();
             },
-            find: (predicate)=>{
+            find: (predicate, startFrom)=>{
                 if (!treeWalkerRef.current || !listboxRef.current) {
                     return null;
                 }
-                treeWalkerRef.current.currentNode = listboxRef.current;
+                const start = startFrom ? targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(startFrom) : null;
+                treeWalkerRef.current.currentNode = start !== null && start !== void 0 ? start : listboxRef.current;
                 let cur = treeWalkerRef.current.currentNode;
                 while(cur && !predicate(cur.id)){
                     cur = treeWalkerRef.current.nextNode();
@@ -77,9 +80,11 @@ function useOptionWalker(options) {
                 }
                 treeWalkerRef.current.currentNode = el;
             }
-        }), []);
+        }), [
+        targetDocument
+    ]);
     return {
         optionWalker,
-        listboxRef
+        listboxCallbackRef: setListbox
     };
 }

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 || !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"}
+{"version":3,"sources":["useOptionWalker.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } 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    const setListbox = React.useCallback((el)=>{\n        if (el && targetDocument) {\n            listboxRef.current = el;\n            treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n        } else {\n            listboxRef.current = null;\n        }\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, startFrom)=>{\n                if (!treeWalkerRef.current || !listboxRef.current) {\n                    return null;\n                }\n                const start = startFrom ? targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.getElementById(startFrom) : null;\n                treeWalkerRef.current.currentNode = start !== null && start !== void 0 ? start : 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        targetDocument\n    ]);\n    return {\n        optionWalker,\n        listboxCallbackRef: setListbox\n    };\n}\n"],"names":["useOptionWalker","options","matchOption","targetDocument","useFluent","treeWalkerRef","React","useRef","listboxRef","optionFilter","useCallback","node","isHTMLElement","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;qCACyB;gCAClB;AACvB,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;IACD,MAAMc,aAAaV,OAAMI,WAAW,CAAC,CAACO;QAClC,IAAIA,MAAMd,gBAAgB;YACtBK,WAAWU,OAAO,GAAGD;YACrBZ,cAAca,OAAO,GAAGf,eAAegB,gBAAgB,CAACF,IAAIJ,WAAWO,YAAY,EAAEX;QACzF,OAAO;YACHD,WAAWU,OAAO,GAAG;QACzB;IACJ,GAAG;QACCf;QACAM;KACH;IACD,MAAMY,eAAef,OAAMgB,OAAO,CAAC,IAAK,CAAA;YAChCC,OAAO;gBACH,IAAI,CAAClB,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBAC/C,OAAO;gBACX;gBACAb,cAAca,OAAO,CAACM,WAAW,GAAGhB,WAAWU,OAAO;gBACtD,OAAOb,cAAca,OAAO,CAACO,UAAU;YAC3C;YACAC,MAAM;gBACF,IAAI,CAACrB,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBAC/C,OAAO;gBACX;gBACA,OAAOb,cAAca,OAAO,CAACS,SAAS;YAC1C;YACAC,MAAM;gBACF,IAAI,CAACvB,cAAca,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOb,cAAca,OAAO,CAACW,QAAQ;YACzC;YACAC,MAAM;gBACF,IAAI,CAACzB,cAAca,OAAO,EAAE;oBACxB,OAAO;gBACX;gBACA,OAAOb,cAAca,OAAO,CAACa,YAAY;YAC7C;YACAC,MAAM,CAACC,WAAWC;gBACd,IAAI,CAAC7B,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBAC/C,OAAO;gBACX;gBACA,MAAMiB,QAAQD,YAAY/B,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeiC,cAAc,CAACF,aAAa;gBACrI7B,cAAca,OAAO,CAACM,WAAW,GAAGW,UAAU,QAAQA,UAAU,KAAK,IAAIA,QAAQ3B,WAAWU,OAAO;gBACnG,IAAImB,MAAMhC,cAAca,OAAO,CAACM,WAAW;gBAC3C,MAAMa,OAAO,CAACJ,UAAUI,IAAIC,EAAE,EAAE;oBAC5BD,MAAMhC,cAAca,OAAO,CAACW,QAAQ;gBACxC;gBACA,OAAOQ;YACX;YACAE,YAAY,CAACtB;gBACT,IAAI,CAACZ,cAAca,OAAO,EAAE;oBACxB;gBACJ;gBACAb,cAAca,OAAO,CAACM,WAAW,GAAGP;YACxC;QACJ,CAAA,GAAI;QACJd;KACH;IACD,OAAO;QACHkB;QACAmB,oBAAoBxB;IACxB;AACJ"}

package/lib-commonjs/index.js

@@ -21,6 +21,15 @@ _export(exports, {
     ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE: function() {
         return _activedescendant.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE;
     },
+    ActiveDescendantContextProvider: function() {
+        return _activedescendant.ActiveDescendantContextProvider;
+    },
+    useActiveDescendantContext: function() {
+        return _activedescendant.useActiveDescendantContext;
+    },
+    useHasParentActiveDescendantContext: function() {
+        return _activedescendant.useHasParentActiveDescendantContext;
+    },
     AriaLiveAnnouncer: function() {
         return _index1.AriaLiveAnnouncer;
     },

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, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\nexport { AriaLiveAnnouncer, renderAriaLiveAnnouncer_unstable, useAriaLiveAnnouncer_unstable, useAriaLiveAnnouncerContextValues_unstable } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;IAAEC,uCAAuC;eAAvCA,yDAAuC;;IAC5DC,iBAAiB;eAAjBA,yBAAiB;;IAAEC,gCAAgC;eAAhCA,wCAAgC;;IAAEC,6BAA6B;eAA7BA,qCAA6B;;IAAEC,0CAA0C;eAA1CA,kDAA0C;;;uBAFrF;kCAC2B;wBACkE"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { // eslint-disable-next-line deprecation/deprecation\nuseARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, ActiveDescendantContextProvider, useActiveDescendantContext, useHasParentActiveDescendantContext } from './activedescendant';\nexport { AriaLiveAnnouncer, renderAriaLiveAnnouncer_unstable, useAriaLiveAnnouncer_unstable, useAriaLiveAnnouncerContextValues_unstable } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;IAAEC,uCAAuC;eAAvCA,yDAAuC;;IAAEC,+BAA+B;eAA/BA,iDAA+B;;IAAEC,0BAA0B;eAA1BA,4CAA0B;;IAAEC,mCAAmC;eAAnCA,qDAAmC;;IAC9JC,iBAAiB;eAAjBA,yBAAiB;;IAAEC,gCAAgC;eAAhCA,wCAAgC;;IAAEC,6BAA6B;eAA7BA,qCAA6B;;IAAEC,0CAA0C;eAA1CA,kDAA0C;;;uBAFrF;kCAC6H;wBAChC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-aria",
-  "version": "9.8.2",
+  "version": "9.9.1",
   "description": "React helper to ensure ARIA",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,10 +34,10 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-shared-contexts": "^9.14.0",
-    "@fluentui/react-jsx-runtime": "^9.0.29",
-    "@fluentui/react-tabster": "^9.19.0",
-    "@fluentui/react-utilities": "^9.18.0",
+    "@fluentui/react-shared-contexts": "^9.14.1",
+    "@fluentui/react-jsx-runtime": "^9.0.31",
+    "@fluentui/react-tabster": "^9.19.2",
+    "@fluentui/react-utilities": "^9.18.2",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {