@fluentui/react-tree 9.4.12 → 9.4.14

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Thu, 09 Nov 2023 17:23:17 GMT and should not be manually modified.
+This log was last generated on Mon, 20 Nov 2023 09:51:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.14)
+
+Mon, 20 Nov 2023 09:51:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.13..@fluentui/react-tree_v9.4.14)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.5.47 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+- Bump @fluentui/react-button to v9.3.56 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.0 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+- Bump @fluentui/react-radio to v9.1.57 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.13.0 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+- Bump @fluentui/react-tabster to v9.14.6 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+
+## [9.4.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.13)
+
+Tue, 14 Nov 2023 17:51:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.12..@fluentui/react-tree_v9.4.13)
+
+### Patches
+
+- chore: refactor tree navigation ([PR #29731](https://github.com/microsoft/fluentui/pull/29731) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.46 ([PR #29835](https://github.com/microsoft/fluentui/pull/29835) by beachball)
+- Bump @fluentui/react-button to v9.3.55 ([PR #29835](https://github.com/microsoft/fluentui/pull/29835) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.56 ([PR #29835](https://github.com/microsoft/fluentui/pull/29835) by beachball)
+- Bump @fluentui/react-radio to v9.1.56 ([PR #29835](https://github.com/microsoft/fluentui/pull/29835) by beachball)
+- Bump @fluentui/react-tabster to v9.14.5 ([PR #29835](https://github.com/microsoft/fluentui/pull/29835) by beachball)
+
 ## [9.4.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.12)
 
-Thu, 09 Nov 2023 17:23:17 GMT 
+Thu, 09 Nov 2023 17:29:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.11..@fluentui/react-tree_v9.4.12)
 
 ### Patches

package/lib/components/FlatTree/useFlatTree.js

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { useRootTree } from '../../hooks/useRootTree';
-import { useFlatTreeNavigation } from './useFlatTreeNavigation';
-import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { treeItemFilter } from '../../utils/treeItemFilter';
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';
 import { useSubtree } from '../../hooks/useSubtree';
 import { ImmutableSet } from '../../utils/ImmutableSet';
 import { ImmutableMap } from '../../utils/ImmutableMap';
@@ -17,32 +14,19 @@ export const useFlatTree_unstable = (props, ref)=>{
     return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
 };
 function useRootFlatTree(props, ref) {
-    const { navigate, initialize } = useFlatTreeNavigation();
-    const walkerRef = React.useRef();
-    const { targetDocument } = useFluent_unstable();
-    const initializeWalker = React.useCallback((root)=>{
-        if (root && targetDocument) {
-            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);
-            initialize(walkerRef.current);
-        }
-    }, [
-        initialize,
-        targetDocument
-    ]);
-    const handleNavigation = useEventCallback((event, data)=>{
-        var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
-        if (walkerRef.current && !event.isDefaultPrevented()) {
-            navigate(data, walkerRef.current);
-        }
+    const navigation = useFlatTreeNavigation();
+    return Object.assign(useRootTree({
+        ...props,
+        onNavigation: useEventCallback((event, data)=>{
+            var _props_onNavigation;
+            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+            if (!event.isDefaultPrevented()) {
+                navigation.navigate(data);
+            }
+        })
+    }, useMergedRefs(ref, navigation.rootRef)), {
+        treeType: 'flat'
     });
-    return {
-        treeType: 'flat',
-        ...useRootTree({
-            ...props,
-            onNavigation: handleNavigation
-        }, useMergedRefs(ref, initializeWalker))
-    };
 }
 function useSubFlatTree(props, ref) {
     if (process.env.NODE_ENV === 'development') {

package/lib/components/FlatTree/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const { navigate, initialize } = useFlatTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const { targetDocument } = useFluent_unstable();\n\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation?.(event, data);\n      if (walkerRef.current && !event.isDefaultPrevented()) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  return {\n    treeType: 'flat',\n    ...useRootTree({ ...props, onNavigation: handleNavigation }, useMergedRefs(ref, initializeWalker)),\n  };\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useFlatTreeNavigation","createHTMLElementWalker","useFluent_unstable","treeItemFilter","useEventCallback","useMergedRefs","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleNavigation","event","data","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA,MAAMC,SAASf,MAAMgB,UAAU,CAACL,oBAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAM,EAAEM,QAAQ,EAAEC,UAAU,EAAE,GAAGnB;IACjC,MAAMoB,YAAYtB,MAAMuB,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGpB;IAE3B,MAAMqB,mBAAmBzB,MAAM0B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGzB,wBAAwBwB,MAAMH,gBAAgBnB;YAClEgB,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBvB,iBACvB,CAACwB,OAAqCC;YACpClB;SAAAA,sBAAAA,MAAMmB,YAAY,cAAlBnB,0CAAAA,yBAAAA,OAAqBiB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMG,kBAAkB,IAAI;YACpDb,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLM,UAAU;QACV,GAAGjC,YAAY;YAAE,GAAGY,KAAK;YAAEmB,cAAcH;QAAiB,GAAGtB,cAAcO,KAAKW,kBAAkB;IACpG;AACF;AAEA,SAASN,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIqB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAG9B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCyB,OAAO;QACPC,aAAa;QACbN,UAAU;QACVO,eAAe;QACfC,WAAWjC,aAAakC,KAAK;QAC7BC,cAAclC,aAAaiC,KAAK;QAChCE,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}
+{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const navigation = useFlatTreeNavigation();\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    { treeType: 'flat' } as const,\n  );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA,MAAMC,SAASZ,MAAMa,UAAU,CAACL,oBAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAMM,aAAab;IAEnB,OAAOc,OAAOC,MAAM,CAClBlB,YACE;QACE,GAAGS,KAAK;QACRU,cAAclB,iBAAiB,CAACmB,OAAOC;gBACrCZ;aAAAA,sBAAAA,MAAMU,YAAY,cAAlBV,0CAAAA,yBAAAA,OAAqBW,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BN,WAAWO,QAAQ,CAACF;YACtB;QACF;IACF,GACAnB,cAAcQ,KAAKM,WAAWQ,OAAO,IAEvC;QAAEC,UAAU;IAAO;AAEvB;AAEA,SAASV,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAGzB,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCoB,OAAO;QACPC,aAAa;QACbN,UAAU;QACVO,eAAe;QACfC,WAAW5B,aAAa6B,KAAK;QAC7BC,cAAc7B,aAAa4B,KAAK;QAChCE,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

package/lib/components/FlatTree/useHeadlessFlatTree.js

@@ -2,13 +2,10 @@ import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { createHeadlessTree } from '../../utils/createHeadlessTree';
 import { treeDataTypes } from '../../utils/tokens';
-import { useFlatTreeNavigation } from './useFlatTreeNavigation';
+import { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';
 import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
-import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
-import { treeItemFilter } from '../../utils/treeItemFilter';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
  * in multiple scenarios including virtualization.
@@ -26,18 +23,7 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
     ]);
     const [openItems, setOpenItems] = useControllableOpenItems(options);
     const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
-    const { initialize, navigate } = useFlatTreeNavigation();
-    const { targetDocument } = useFluent_unstable();
-    const walkerRef = React.useRef();
-    const initializeWalker = React.useCallback((root)=>{
-        if (root && targetDocument) {
-            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);
-            initialize(walkerRef.current);
-        }
-    }, [
-        initialize,
-        targetDocument
-    ]);
+    const navigation = useFlatTreeNavigation();
     const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{
         var _options_onOpenChange;
@@ -82,7 +68,7 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
         var _treeRef_current;
         return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
     }, []);
-    const ref = useMergedRefs(treeRef, initializeWalker);
+    const ref = useMergedRefs(treeRef, navigation.rootRef);
     const getTreeProps = React.useCallback(()=>{
         var _options_onNavigation;
         return {
@@ -106,17 +92,13 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
         headlessTree
     ]);
     return React.useMemo(()=>({
-            navigate: (data)=>{
-                if (walkerRef.current) {
-                    navigate(data, walkerRef.current);
-                }
-            },
+            navigate: navigation.navigate,
             getTreeProps,
             getNextNavigableItem,
             getElementFromItem,
             items
         }), [
-        navigate,
+        navigation.navigate,
         getTreeProps,
         getNextNavigableItem,
         getElementFromItem,

package/lib/components/FlatTree/useHeadlessFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useHeadlessFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport type { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { FlatTreeProps } from './FlatTree.types';\nimport {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nexport type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;\nexport type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): Required<\n    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation' | 'checkedItems' | 'onCheckedChange'>\n  > & {\n    ref: React.Ref<HTMLDivElement>;\n    openItems: ImmutableSet<TreeItemValue>;\n  };\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: HeadlessTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): HeadlessTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\nexport type HeadlessFlatTreeOptions = Pick<\n  FlatTreeProps,\n  'onOpenChange' | 'onNavigation' | 'selectionMode' | 'onCheckedChange'\n> &\n  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {\n    defaultCheckedItems?: TreeProps['checkedItems'];\n  };\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(\n  props: Props[],\n  options: HeadlessFlatTreeOptions = {},\n): HeadlessFlatTree<Props> {\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n  const { initialize, navigate } = useFlatTreeNavigation();\n  const { targetDocument } = useFluent_unstable();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    options.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n    options.onCheckedChange?.(event, {\n      ...data,\n      checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n    });\n    setCheckedItems(nextCheckedItems);\n  });\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = headlessTree.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return headlessTree.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs<HTMLDivElement>(treeRef, initializeWalker);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      selectionMode: options.selectionMode,\n      checkedItems,\n      onOpenChange: handleOpenChange,\n      onCheckedChange: handleCheckedChange,\n      onNavigation: options.onNavigation ?? noop,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems, options.selectionMode, options.onNavigation],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  return React.useMemo<HeadlessFlatTree<Props>>(\n    () => ({\n      navigate: data => {\n        if (walkerRef.current) {\n          navigate(data, walkerRef.current);\n        }\n      },\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n    }),\n    [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n\nfunction noop() {\n  /* noop */\n}\n"],"names":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","createNextFlatCheckedItems","useFlatControllableCheckedItems","createHTMLElementWalker","treeItemFilter","useFluent_unstable","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","initialize","navigate","targetDocument","walkerRef","useRef","initializeWalker","useCallback","root","current","treeRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","querySelector","ref","getTreeProps","selectionMode","onNavigation","noop","items"],"mappings":"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"}
+{"version":3,"sources":["useHeadlessFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport type { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { FlatTreeProps } from './FlatTree.types';\nimport {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\n\nexport type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;\nexport type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): Required<\n    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation' | 'checkedItems' | 'onCheckedChange'>\n  > & {\n    ref: React.Ref<HTMLDivElement>;\n    openItems: ImmutableSet<TreeItemValue>;\n  };\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: HeadlessTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): HeadlessTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\nexport type HeadlessFlatTreeOptions = Pick<\n  FlatTreeProps,\n  'onOpenChange' | 'onNavigation' | 'selectionMode' | 'onCheckedChange'\n> &\n  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {\n    defaultCheckedItems?: TreeProps['checkedItems'];\n  };\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(\n  props: Props[],\n  options: HeadlessFlatTreeOptions = {},\n): HeadlessFlatTree<Props> {\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n  const navigation = useFlatTreeNavigation();\n\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    options.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n    options.onCheckedChange?.(event, {\n      ...data,\n      checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n    });\n    setCheckedItems(nextCheckedItems);\n  });\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = headlessTree.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return headlessTree.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs<HTMLDivElement>(treeRef, navigation.rootRef);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      selectionMode: options.selectionMode,\n      checkedItems,\n      onOpenChange: handleOpenChange,\n      onCheckedChange: handleCheckedChange,\n      onNavigation: options.onNavigation ?? noop,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems, options.selectionMode, options.onNavigation],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  return React.useMemo<HeadlessFlatTree<Props>>(\n    () => ({\n      navigate: navigation.navigate,\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n    }),\n    [navigation.navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n\nfunction noop() {\n  /* noop */\n}\n"],"names":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","createNextFlatCheckedItems","useFlatControllableCheckedItems","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","navigation","treeRef","useRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","current","querySelector","ref","rootRef","getTreeProps","selectionMode","onNavigation","noop","items","navigate"],"mappings":"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"}

package/lib/components/Tree/useNestedControllableCheckedItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useNestedControllableCheckedItems.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(props: Pick<TreeProps, 'checkedItems'>) {\n  return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n  data: TreeCheckedChangeData,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  if (data.selectionMode === 'multiselect') {\n    return previousCheckedItems.set(data.value, data.checked);\n  }\n  return previousCheckedItems;\n}\n"],"names":["React","ImmutableMap","createCheckedItems","useNestedCheckedItems","props","useMemo","checkedItems","createNextNestedCheckedItems","data","previousCheckedItems","selectionMode","create","value","checked","set"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE,OAAO,SAASC,sBAAsBC,KAAsC;IAC1E,OAAOJ,MAAMK,OAAO,CAAC,IAAMH,mBAAmBE,MAAME,YAAY,GAAG;QAACF,MAAME,YAAY;KAAC;AACzF;AAEA,OAAO,SAASC,6BACdC,IAA2B,EAC3BC,oBAAoE;IAEpE,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOT,aAAaU,MAAM,CAAC;YAAC;gBAACH,KAAKI,KAAK;gBAAEJ,KAAKK,OAAO;aAAC;SAAC;IACzD;IACA,IAAIL,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBK,GAAG,CAACN,KAAKI,KAAK,EAAEJ,KAAKK,OAAO;IAC1D;IACA,OAAOJ;AACT"}
+{"version":3,"sources":["useNestedControllableCheckedItems.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(props: Pick<TreeProps, 'checkedItems'>) {\n  return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n  data: Pick<TreeCheckedChangeData, 'selectionMode' | 'value' | 'checked'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  if (data.selectionMode === 'multiselect') {\n    return previousCheckedItems.set(data.value, data.checked);\n  }\n  return previousCheckedItems;\n}\n"],"names":["React","ImmutableMap","createCheckedItems","useNestedCheckedItems","props","useMemo","checkedItems","createNextNestedCheckedItems","data","previousCheckedItems","selectionMode","create","value","checked","set"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE,OAAO,SAASC,sBAAsBC,KAAsC;IAC1E,OAAOJ,MAAMK,OAAO,CAAC,IAAMH,mBAAmBE,MAAME,YAAY,GAAG;QAACF,MAAME,YAAY;KAAC;AACzF;AAEA,OAAO,SAASC,6BACdC,IAAwE,EACxEC,oBAAoE;IAEpE,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOT,aAAaU,MAAM,CAAC;YAAC;gBAACH,KAAKI,KAAK;gBAAEJ,KAAKK,OAAO;aAAC;SAAC;IACzD;IACA,IAAIL,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBK,GAAG,CAACN,KAAKI,KAAK,EAAEJ,KAAKK,OAAO;IAC1D;IACA,OAAOJ;AACT"}

package/lib/components/Tree/useTree.js

@@ -5,10 +5,7 @@ import { createNextNestedCheckedItems, useNestedCheckedItems } from './useNested
 import { SubtreeContext } from '../../contexts/subtreeContext';
 import { useRootTree } from '../../hooks/useRootTree';
 import { useSubtree } from '../../hooks/useSubtree';
-import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
-import { treeItemFilter } from '../../utils/treeItemFilter';
-import { useTreeNavigation } from './useTreeNavigation';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { useTreeNavigation } from '../../hooks/useTreeNavigation';
 import { useTreeContext_unstable } from '../../contexts/treeContext';
 export const useTree_unstable = (props, ref)=>{
     const isRoot = React.useContext(SubtreeContext) === undefined;
@@ -20,55 +17,38 @@ export const useTree_unstable = (props, ref)=>{
 function useNestedRootTree(props, ref) {
     const [openItems, setOpenItems] = useControllableOpenItems(props);
     const checkedItems = useNestedCheckedItems(props);
-    const { navigate, initialize } = useTreeNavigation();
-    const walkerRef = React.useRef();
-    const { targetDocument } = useFluent_unstable();
-    const initializeWalker = React.useCallback((root)=>{
-        if (root && targetDocument) {
-            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);
-            initialize(walkerRef.current);
-        }
-    }, [
-        initialize,
-        targetDocument
-    ]);
-    const handleOpenChange = useEventCallback((event, data)=>{
-        var _props_onOpenChange;
-        const nextOpenItems = createNextOpenItems(data, openItems);
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
-            ...data,
-            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
-        });
-        setOpenItems(nextOpenItems);
-    });
-    const handleCheckedChange = useEventCallback((event, data)=>{
-        if (walkerRef.current) {
+    const navigation = useTreeNavigation();
+    return Object.assign(useRootTree({
+        ...props,
+        openItems,
+        checkedItems,
+        onOpenChange: useEventCallback((event, data)=>{
+            var _props_onOpenChange;
+            const nextOpenItems = createNextOpenItems(data, openItems);
+            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
+                ...data,
+                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+            });
+            setOpenItems(nextOpenItems);
+        }),
+        onNavigation: useEventCallback((event, data)=>{
+            var _props_onNavigation;
+            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+            if (!event.isDefaultPrevented()) {
+                navigation.navigate(data);
+            }
+        }),
+        onCheckedChange: useEventCallback((event, data)=>{
             var _props_onCheckedChange;
             const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);
             (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
                 ...data,
                 checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
             });
-        }
-    });
-    const handleNavigation = useEventCallback((event, data)=>{
-        var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
-        if (walkerRef.current && !event.isDefaultPrevented()) {
-            navigate(data, walkerRef.current);
-        }
+        })
+    }, useMergedRefs(ref, navigation.rootRef)), {
+        treeType: 'nested'
     });
-    return {
-        treeType: 'nested',
-        ...useRootTree({
-            ...props,
-            openItems,
-            checkedItems,
-            onOpenChange: handleOpenChange,
-            onNavigation: handleNavigation,
-            onCheckedChange: handleCheckedChange
-        }, useMergedRefs(ref, initializeWalker))
-    };
 }
 function useNestedSubtree(props, ref) {
     if (process.env.NODE_ENV === 'development') {

package/lib/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const { navigate, initialize } = useTreeNavigation();\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const { targetDocument } = useFluent_unstable();\n\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root && targetDocument) {\n        walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize, targetDocument],\n  );\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    if (walkerRef.current) {\n      const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n      props.onCheckedChange?.(event, {\n        ...data,\n        checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n      });\n    }\n  });\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      props.onNavigation?.(event, data);\n      if (walkerRef.current && !event.isDefaultPrevented()) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  return {\n    treeType: 'nested',\n    ...useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: handleOpenChange,\n        onNavigation: handleNavigation,\n        onCheckedChange: handleCheckedChange,\n      },\n      useMergedRefs(ref, initializeWalker),\n    ),\n  };\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // this doesn't break rule of hooks, as environment is a static value\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n    if (treeType === 'flat') {\n      throw new Error(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\n    }\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useFluent_unstable","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","ctx","Error"],"mappings":"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"}
+{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation();\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data) => {\n          const nextOpenItems = createNextOpenItems(data, openItems);\n          props.onOpenChange?.(event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    { treeType: 'nested' } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  if (process.env.NODE_ENV === 'development') {\n    // this doesn't break rule of hooks, as environment is a static value\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n    if (treeType === 'flat') {\n      throw new Error(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\n    }\n  }\n  return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","useTreeNavigation","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet_unstable","onNavigation","isDefaultPrevented","navigate","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap_unstable","rootRef","treeType","process","env","NODE_ENV","ctx","Error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,SAASf,MAAMgB,UAAU,CAACT,oBAAoBU;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACM,WAAWC,aAAa,GAAGjB,yBAAyBS;IAC3D,MAAMS,eAAehB,sBAAsBO;IAC3C,MAAMU,aAAab;IAEnB,OAAOc,OAAOC,MAAM,CAClBjB,YACE;QACE,GAAGK,KAAK;QACRO;QACAE;QACAI,cAAczB,iBAAiB,CAAC0B,OAAOC;gBAErCf;YADA,MAAMgB,gBAAgB1B,oBAAoByB,MAAMR;aAChDP,sBAAAA,MAAMa,YAAY,cAAlBb,0CAAAA,yBAAAA,OAAqBc,OAAO;gBAC1B,GAAGC,IAAI;gBACPR,WAAWS,cAAcC,kCAAkC;YAC7D;YACAT,aAAaQ;QACf;QACAE,cAAc9B,iBAAiB,CAAC0B,OAAOC;gBACrCf;aAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBc,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACL;YACtB;QACF;QACAM,iBAAiBjC,iBAAiB,CAAC0B,OAAOC;gBAExCf;YADA,MAAMsB,mBAAmB9B,6BAA6BuB,MAAMN;aAC5DT,yBAAAA,MAAMqB,eAAe,cAArBrB,6CAAAA,4BAAAA,OAAwBc,OAAO;gBAC7B,GAAGC,IAAI;gBACPN,cAAca,iBAAiBC,kCAAkC;YACnE;QACF;IACF,GACAlC,cAAcY,KAAKS,WAAWc,OAAO,IAEvC;QAAEC,UAAU;IAAS;AAEzB;AAEA,SAASnB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE,IAAIyB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAW3B,wBAAwB+B,CAAAA,MAAOA,IAAIJ,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIK,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOlC,WAAWI,OAAOC;AAC3B"}

package/lib/{components/FlatTree → hooks}/useFlatTreeNavigation.js

@@ -1,26 +1,34 @@
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useEventCallback } from '@fluentui/react-utilities';
-import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
-import { treeDataTypes } from '../../utils/tokens';
-import { treeItemFilter } from '../../utils/treeItemFilter';
-import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
-import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../utils/tokens';
+import { useRovingTabIndex } from './useRovingTabIndexes';
+import { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';
+import * as React from 'react';
+import { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';
 export function useFlatTreeNavigation() {
-    const { targetDocument } = useFluent_unstable();
-    const { rove, initialize } = useRovingTabIndex(treeItemFilter);
-    function getNextElement(data, walker) {
-        if (!targetDocument) {
+    const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
+    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
+    const rootRefCallback = React.useCallback((root)=>{
+        if (walkerRef.current && root) {
+            initializeRovingTabIndex(walkerRef.current);
+        }
+    }, [
+        initializeRovingTabIndex,
+        walkerRef
+    ]);
+    function getNextElement(data) {
+        if (!walkerRef.current) {
             return null;
         }
         switch(data.type){
             case treeDataTypes.Click:
                 return data.target;
             case treeDataTypes.TypeAhead:
-                walker.currentElement = data.target;
-                return nextTypeAheadElement(walker, data.event.key);
+                walkerRef.current.currentElement = data.target;
+                return nextTypeAheadElement(walkerRef.current, data.event.key);
             case treeDataTypes.ArrowLeft:
                 {
-                    const nextElement = parentElement(data.parentValue, walker);
+                    const nextElement = parentElement(data.parentValue, walkerRef.current);
                     if (!nextElement && process.env.NODE_ENV !== 'production') {
                         // eslint-disable-next-line no-console
                         console.warn(`@fluentui/react-tree [useFlatTreeNavigation]:
@@ -31,8 +39,8 @@ No parent element found for the current element:`, data.target);
                 }
             case treeDataTypes.ArrowRight:
                 {
-                    walker.currentElement = data.target;
-                    const nextElement = firstChild(data.target, walker);
+                    walkerRef.current.currentElement = data.target;
+                    const nextElement = firstChild(data.target, walkerRef.current);
                     if (!nextElement && process.env.NODE_ENV !== 'production') {
                         const ariaLevel = Number(data.target.getAttribute('aria-level'));
                         // eslint-disable-next-line no-console
@@ -44,28 +52,28 @@ was found after the current element!`, data.target);
                     return nextElement;
                 }
             case treeDataTypes.End:
-                walker.currentElement = walker.root;
-                return walker.lastChild();
+                walkerRef.current.currentElement = walkerRef.current.root;
+                return walkerRef.current.lastChild();
             case treeDataTypes.Home:
-                walker.currentElement = walker.root;
-                return walker.firstChild();
+                walkerRef.current.currentElement = walkerRef.current.root;
+                return walkerRef.current.firstChild();
             case treeDataTypes.ArrowDown:
-                walker.currentElement = data.target;
-                return walker.nextElement();
+                walkerRef.current.currentElement = data.target;
+                return walkerRef.current.nextElement();
             case treeDataTypes.ArrowUp:
-                walker.currentElement = data.target;
-                return walker.previousElement();
+                walkerRef.current.currentElement = data.target;
+                return walkerRef.current.previousElement();
         }
     }
-    const navigate = useEventCallback((data, walker)=>{
-        const nextElement = getNextElement(data, walker);
+    const navigate = useEventCallback((data)=>{
+        const nextElement = getNextElement(data);
         if (nextElement) {
             rove(nextElement);
         }
     });
     return {
         navigate,
-        initialize
+        rootRef: useMergedRefs(walkerRootRef, rootRefCallback)
     };
 }
 function firstChild(target, treeWalker) {

package/lib/hooks/useFlatTreeNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\n\nexport function useFlatTreeNavigation() {\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return { navigate, rootRef: useMergedRefs<HTMLDivElement>(walkerRootRef, rootRefCallback) } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFlatTreeNavigation","walkerRef","rootRef","walkerRootRef","rove","initialize","initializeRovingTabIndex","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}

package/lib/hooks/useHTMLElementWalkerRef.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { createHTMLElementWalker } from '../utils/createHTMLElementWalker';
+import { treeItemFilter } from '../utils/treeItemFilter';
+export function useHTMLElementWalkerRef() {
+    const { targetDocument } = useFluent_unstable();
+    const walkerRef = React.useRef();
+    const rootRef = React.useCallback((root)=>{
+        walkerRef.current = targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;
+    }, [
+        targetDocument
+    ]);
+    return {
+        walkerRef,
+        rootRef
+    };
+}

package/lib/hooks/useHTMLElementWalkerRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useHTMLElementWalkerRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../utils/treeItemFilter';\n\nexport function useHTMLElementWalkerRef() {\n  const { targetDocument } = useFluent_unstable();\n\n  const walkerRef = React.useRef<HTMLElementWalker>();\n\n  const rootRef: React.Ref<HTMLElement> = React.useCallback(\n    root => {\n      walkerRef.current =\n        targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;\n    },\n    [targetDocument],\n  );\n  return { walkerRef, rootRef } as const;\n}\n"],"names":["React","useFluent_unstable","createHTMLElementWalker","treeItemFilter","useHTMLElementWalkerRef","targetDocument","walkerRef","useRef","rootRef","useCallback","root","current","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAA4BC,uBAAuB,QAAQ,mCAAmC;AAC9F,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAE3B,MAAMK,YAAYN,MAAMO,MAAM;IAE9B,MAAMC,UAAkCR,MAAMS,WAAW,CACvDC,CAAAA;QACEJ,UAAUK,OAAO,GACfN,kBAAkBK,OAAOR,wBAAwBQ,MAAML,gBAAgBF,kBAAkBS;IAC7F,GACA;QAACP;KAAe;IAElB,OAAO;QAAEC;QAAWE;IAAQ;AAC9B"}