npm - @fluentui/react-tree - Versions diffs - 9.2.1 → 9.3.1 - Mend

@fluentui/react-tree 9.2.1 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,207 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Wed, 20 Sep 2023 17:40:52 GMT",
+      "date": "Tue, 26 Sep 2023 17:44:20 GMT",
+      "tag": "@fluentui/react-tree_v9.3.1",
+      "version": "9.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.6",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.38",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.34",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.43",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.44",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.36",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.18",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.44",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.13.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v9.1.14",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.13.5",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Sep 2023 15:31:41 GMT",
+      "tag": "@fluentui/react-tree_v9.3.0",
+      "version": "9.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "aef09fc324e71a15a10a6a3c1c7ed556e2775725",
+            "comment": "feat: FlatTree supports navigation without useHeadlessFlatTree"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.5",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.37",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.33",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.42",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.43",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.35",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.17",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.43",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.13.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v9.1.13",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.13.4",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          }
+        ],
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
+            "comment": "fix: bump swc core to mitigate transpilation memory leaks"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "a31e7394d9f169bc5aa55430a22cdc65425a1b49",
+            "comment": "chore: Update react-icons version to pick up IconDirectionContextProvider updated export"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 17:47:45 GMT",
       "tag": "@fluentui/react-tree_v9.2.1",
       "version": "9.2.1",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,61 @@
 # Change Log - @fluentui/react-tree
-This log was last generated on Wed, 20 Sep 2023 17:40:52 GMT and should not be manually modified.
+This log was last generated on Tue, 26 Sep 2023 17:44:20 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.3.1)
+Tue, 26 Sep 2023 17:44:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.3.0..@fluentui/react-tree_v9.3.1)
+### Patches
+- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.6 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-aria to v9.3.38 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-avatar to v9.5.34 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-button to v9.3.43 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.44 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.36 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-portal to v9.3.18 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-radio to v9.1.44 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-tabster to v9.13.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.3.0)
+Tue, 26 Sep 2023 15:31:41 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.2.1..@fluentui/react-tree_v9.3.0)
+### Minor changes
+- feat: FlatTree supports navigation without useHeadlessFlatTree ([PR #29091](https://github.com/microsoft/fluentui/pull/29091) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.5 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-aria to v9.3.37 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-avatar to v9.5.33 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-button to v9.3.42 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.43 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.35 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-portal to v9.3.17 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-radio to v9.1.43 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-tabster to v9.13.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+### Patches
+- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
+- chore: Update react-icons version to pick up IconDirectionContextProvider updated export ([PR #29151](https://github.com/microsoft/fluentui/pull/29151) by ololubek@microsoft.com)
 ## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.2.1)
-Wed, 20 Sep 2023 17:40:52 GMT
+Wed, 20 Sep 2023 17:47:45 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.2.0..@fluentui/react-tree_v9.2.1)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -270,7 +270,7 @@ declare type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
     value: TreeItemValue;
     parentValue: TreeItemValue | undefined;
     itemType: TreeItemType;
-    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentValue'>;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Props;
 };
 declare type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {
@@ -618,13 +618,23 @@ export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
      */
     open?: boolean;
     onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;
+    /**
+     * This property is inferred through context on a nested tree, and required for a flat tree.
+     */
+    parentValue?: TreeItemValue;
 };
 export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
 declare type TreeItemRequest = {
     itemType: TreeItemType;
-} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> | OmitWithoutExpanding<TreeNavigationData_unstable, 'preventInternals'> | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>);
+} & ((OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> & {
+    requestType: 'open';
+}) | (TreeNavigationData_unstable & {
+    requestType: 'navigate';
+}) | (OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & {
+    requestType: 'selection';
+}));
 export declare type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
@@ -647,6 +657,7 @@ export declare type TreeItemValue = string | number;
 export declare type TreeNavigationData_unstable = {
     target: HTMLElement;
     value: TreeItemValue;
+    parentValue: TreeItemValue | undefined;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';

package/lib/components/FlatTree/useFlatTree.js CHANGED Viewed

@@ -1,8 +1,63 @@
 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 { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { useSubtree } from '../../hooks/useSubtree';
 export const useFlatTree_unstable = (props, ref)=>{
+    const level = useTreeContext_unstable((ctx)=>ctx.level);
+    // as level is static, this doesn't break rule of hooks
+    // and if this becomes an issue later on, this can be easily converted
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return level > 1 ? useSubFlatTree(props, ref) : useRootFlatTree(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);
+        }
+    });
     return {
         treeType: 'flat',
-        ...useRootTree(props, ref)
+        ...useRootTree({
+            ...props,
+            onNavigation: handleNavigation
+        }, useMergedRefs(ref, initializeWalker))
     };
-};
+}
+function useSubFlatTree(props, ref) {
+    if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.error(`@fluentui/react-tree [useFlatTree]:
+Subtrees are not allowed in a FlatTree!
+You cannot use a <FlatTree> component inside of another <FlatTree> component.`);
+    }
+    return {
+        ...useSubtree(props, ref),
+        open: false,
+        treeType: 'flat',
+        components: {
+            root: React.Fragment
+        },
+        root: slot.always(undefined, {
+            elementType: React.Fragment
+        })
+    };
+}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTree_unstable = (props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState => {\n return {\n treeType: 'flat',\n ...useRootTree(props, ref),\n };\n};\n"],"names":["React","useRootTree","useFlatTree_unstable","props","ref","treeType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;~~AAGtD~~,OAAO,MAAMC,~~uBAAuB~~,CAACC,~~OAAsBC~~;~~IACzD~~,OAAO;~~QACLC~~,UAAU;QACV,~~GAAGJ~~,~~YAAYE~~,OAAOC,IAAI;~~IAC5B~~;AACF~~,EAAE~~"}
1	+ {"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeSlots, 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 { ExtractSlotProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n props,\n ref,\n) => {\n const level = useTreeContext_unstable(ctx => ctx.level);\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 level > 1 ? useSubFlatTree(props, ref) : useRootFlatTree(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 // eslint-disable-next-line no-console\n console.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> component.\n `);\n }\n return {\n ...useSubtree(props, ref),\n open: false,\n treeType: 'flat',\n components: { root: React.Fragment },\n root: slot.always<ExtractSlotProps<FlatTreeSlots['root']>>(undefined, { elementType: React.Fragment }),\n };\n}\n"],"names":["React","useRootTree","useFlatTreeNavigation","createHTMLElementWalker","useFluent_unstable","treeItemFilter","slot","useEventCallback","useMergedRefs","useTreeContext_unstable","useSubtree","useFlatTree_unstable","props","ref","level","ctx","useSubFlatTree","useRootFlatTree","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleNavigation","event","data","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","console","error","open","components","Fragment","always","undefined","elementType"],"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,SAA2BC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEpG,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA,MAAMC,QAAQL,wBAAwBM,CAAAA,MAAOA,IAAID,KAAK;IACtD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOA,QAAQ,IAAIE,eAAeJ,OAAOC,OAAOI,gBAAgBL,OAAOC;AACzE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAM,EAAEK,QAAQ,EAAEC,UAAU,EAAE,GAAGjB;IACjC,MAAMkB,YAAYpB,MAAMqB,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGlB;IAE3B,MAAMmB,mBAAmBvB,MAAMwB,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGvB,wBAAwBsB,MAAMH,gBAAgBjB;YAClEc,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBpB,iBACvB,CAACqB,OAAqCC;YACpCjB;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBgB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMG,kBAAkB,IAAI;YACpDb,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLM,UAAU;QACV,GAAG/B,YAAY;YAAE,GAAGW,KAAK;YAAEkB,cAAcH;QAAiB,GAAGnB,cAAcK,KAAKU,kBAAkB;IACpG;AACF;AAEA,SAASP,eAAeJ,KAAoB,EAAEC,GAA2B;IACvE,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;;6EAIpC,CAAC;IACH;IACA,OAAO;QACL,GAAG3B,WAAWE,OAAOC,IAAI;QACzByB,MAAM;QACNN,UAAU;QACVO,YAAY;YAAEd,MAAMzB,MAAMwC,QAAQ;QAAC;QACnCf,MAAMnB,KAAKmC,MAAM,CAA0CC,WAAW;YAAEC,aAAa3C,MAAMwC,QAAQ;QAAC;IACtG;AACF"}

package/lib/components/FlatTree/useFlatTreeNavigation.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../../utils/tokens';
 import { treeItemFilter } from '../../utils/treeItemFilter';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
-import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
-export function useFlatTreeNavigation(virtualTree) {
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+export function useFlatTreeNavigation() {
     const { targetDocument } = useFluent_unstable();
     const { rove, initialize } = useRovingTabIndex(treeItemFilter);
     function getNextElement(data, walker) {
@@ -19,10 +19,30 @@ export function useFlatTreeNavigation(virtualTree) {
                 walker.currentElement = data.target;
                 return nextTypeAheadElement(walker, data.event.key);
             case treeDataTypes.ArrowLeft:
-                return parentElement(virtualTree, data.target, walker);
+                {
+                    const nextElement = parentElement(data.parentValue, walker);
+                    if (!nextElement && process.env.NODE_ENV !== 'production') {
+                        // eslint-disable-next-line no-console
+                        console.warn(`@fluentui/react-tree [useFlatTreeNavigation]:
+\'ArrowLeft\' navigation was not possible.
+No parent element found for the current element:`, data.target);
+                    }
+                    return nextElement;
+                }
             case treeDataTypes.ArrowRight:
-                walker.currentElement = data.target;
-                return firstChild(data.target, walker);
+                {
+                    walker.currentElement = data.target;
+                    const nextElement = firstChild(data.target, walker);
+                    if (!nextElement && process.env.NODE_ENV !== 'production') {
+                        const ariaLevel = Number(data.target.getAttribute('aria-level'));
+                        // eslint-disable-next-line no-console
+                        console.warn(`@fluentui/react-tree [useFlatTreeNavigation]:
+\'ArrowRight\' navigation was not possible.
+No element with "aria-posinset=1" and "aria-level=${ariaLevel + 1}"
+was found after the current element!`, data.target);
+                    }
+                    return nextElement;
+                }
             case treeDataTypes.End:
                 walker.currentElement = walker.root;
                 return walker.lastChild();
@@ -61,15 +81,9 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(virtualTreeItems, target, treeWalker) {
-    var _virtualTreeItem;
-    const value = getTreeItemValueFromElement(target);
-    if (value === null) {
+function parentElement(parentValue, treeWalker) {
+    if (parentValue === undefined) {
         return null;
     }
-    const virtualTreeItem = virtualTreeItems.get(value);
-    if ((_virtualTreeItem = virtualTreeItem) === null || _virtualTreeItem === void 0 ? void 0 : _virtualTreeItem.parentValue) {
-        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${virtualTreeItem.parentValue}"]`);
-    }
-    return null;
+    return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${parentValue}"]`);
 }

package/lib/components/FlatTree/useFlatTreeNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../../Tree';\nimport { ~~HeadlessTree,~~ ~~HeadlessTreeItemProps~~ } from '../../utils/~~createHeadlessTree~~';\nimport { ~~nextTypeAheadElement~~ } from '../../utils/~~nextTypeAheadElement~~';\nimport { ~~treeDataTypes~~ } from '../../utils/~~tokens~~';\nimport { ~~treeItemFilter~~ } from '../../~~utils~~/~~treeItemFilter~~';\nimport { ~~useRovingTabIndex~~ } from '../../~~hooks~~/~~useRovingTabIndexes~~';\nimport { ~~dataTreeItemValueAttrName,~~ ~~getTreeItemValueFromElement~~ } from '../../~~utils/getTreeItemValueFromElement~~';\nimport { ~~HTMLElementWalker~~ } from '../../utils/~~createHTMLElementWalker~~';\n\nexport function useFlatTreeNavigation~~<Props extends HeadlessTreeItemProps>~~(~~virtualTree: HeadlessTree<Props>~~) {\n const { targetDocument } = useFluent_unstable();\n const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n function getNextElement(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n if (!targetDocument) {\n return null;\n }\n switch (data.type) {\n case treeDataTypes.Click:\n return data.target;\n case treeDataTypes.TypeAhead:\n walker.currentElement = data.target;\n return nextTypeAheadElement(walker, data.event.key);\n case treeDataTypes.ArrowLeft:\n ~~return~~ parentElement(~~virtualTree,~~ data.~~target~~, walker);\n case treeDataTypes.ArrowRight:\n walker.currentElement = data.target;\n ~~return~~ firstChild(data.target, walker);\n case treeDataTypes.End:\n walker.currentElement = walker.root;\n return walker.lastChild();\n case treeDataTypes.Home:\n walker.currentElement = walker.root;\n return walker.firstChild();\n case treeDataTypes.ArrowDown:\n walker.currentElement = data.target;\n return walker.nextElement();\n case treeDataTypes.ArrowUp:\n walker.currentElement = data.target;\n return walker.previousElement();\n }\n }\n const navigate = useEventCallback((data: TreeNavigationData_unstable, walker: HTMLElementWalker) => {\n const nextElement = getNextElement(data, walker);\n if (nextElement) {\n rove(nextElement);\n }\n });\n return { navigate, initialize } 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(~~\n virtualTreeItems~~: ~~HeadlessTree<HeadlessTreeItemProps>,\n target:~~ ~~HTMLElement,\n~~ treeWalker: HTMLElementWalker~~,\n~~) {\n ~~const value = getTreeItemValueFromElement(target);\n~~ if (~~value~~ === ~~null~~) {\n return null;\n }\n ~~const virtualTreeItem = virtualTreeItems.get(value);\n if (virtualTreeItem?.parentValue) {\n~~ return treeWalker.root.querySelector<HTMLElement>(\n `[${dataTreeItemValueAttrName}=\"${~~virtualTreeItem.~~parentValue}\"]~~`,\n~~ );\n }\n ~~return null;\n}\n~~"],"names":["useFluent_unstable","useEventCallback","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","dataTreeItemValueAttrName","~~getTreeItemValueFromElement","~~useFlatTreeNavigation","~~virtualTree","~~targetDocument","rove","initialize","getNextElement","data","walker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","~~ArrowRight~~","~~firstChild~~","~~End~~","~~root~~","~~lastChild~~","~~Home~~","~~ArrowDown~~","~~nextElement~~","~~ArrowUp~~","~~previousElement~~","~~navigate~~","~~treeWalker~~","~~nextElementAriaPosInSet~~","~~getAttribute~~","~~nextElementAriaLevel~~","~~targetAriaLevel~~","~~Number~~","~~virtualTreeItems~~","~~virtualTreeItem~~","~~value~~","~~get~~","~~parentValue~~","querySelector"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,4BAA4B;~~AAG7D~~,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;~~AACpE~~,SAASC,yBAAyB,~~EAAEC,2BAA2B,~~QAAQ,0CAA0C;~~AAGjH~~,OAAO,SAASC~~,sBAA2DC,WAAgC~~;~~IACzG~~,MAAM,EAAEC,cAAc,EAAE,~~GAAGV~~;IAC3B,MAAM,~~EAAEW~~,IAAI,EAAEC,UAAU,EAAE,~~GAAGP~~,kBAAkBD;IAE/C,~~SAASS~~,eAAeC,IAAiC,EAAEC,MAAyB;QAClF,IAAI,CAACL,gBAAgB;YACnB,OAAO;QACT;QACA,OAAQI,KAAKE,IAAI;YACf,~~KAAKb~~,~~cAAcc~~,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,~~KAAKf~~,~~cAAcgB~~,SAAS;gBAC1BJ,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,~~OAAOhB~~,~~qBAAqBa~~,QAAQD,KAAKO,KAAK,CAACC,GAAG;YACpD,~~KAAKnB~~,~~cAAcoB~~,SAAS;~~gBAC1B~~,~~OAAOC~~,~~cAAcf~~,~~aAAaK~~,KAAKI,MAAM,~~EAAEH~~;~~YACjD~~,~~KAAKZ~~,~~cAAcsB~~,UAAU;~~gBAC3BV~~,OAAOK,cAAc,GAAGN,KAAKI,MAAM;~~gBACnC~~,~~OAAOQ~~,~~WAAWZ~~,KAAKI,MAAM,EAAEH;~~YACjC~~,~~KAAKZ~~,~~cAAcwB~~,GAAG;~~gBACpBZ~~,OAAOK,cAAc,GAAGL,~~OAAOa~~,IAAI;gBACnC,~~OAAOb~~,~~OAAOc~~,SAAS;YACzB,~~KAAK1B~~,~~cAAc2B~~,IAAI;~~gBACrBf~~,OAAOK,cAAc,GAAGL,~~OAAOa~~,IAAI;gBACnC,~~OAAOb~~,~~OAAOW~~,UAAU;YAC1B,~~KAAKvB~~,~~cAAc4B~~,SAAS;~~gBAC1BhB~~,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOH,~~OAAOiB~~,WAAW;YAC3B,~~KAAK7B~~,~~cAAc8B~~,OAAO;~~gBACxBlB~~,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOH,~~OAAOmB~~,eAAe;QACjC;IACF;IACA,MAAMC,~~WAAWlC~~,iBAAiB,~~CAACa~~,MAAmCC;QACpE,~~MAAMiB~~,~~cAAcnB~~,eAAeC,MAAMC;QACzC,~~IAAIiB~~,aAAa;~~YACfrB~~,~~KAAKqB~~;QACP;IACF;IACA,OAAO;~~QAAEG~~;~~QAAUvB~~;IAAW;AAChC;AAEA,~~SAASc~~,~~WAAWR~~,MAAmB,~~EAAEkB~~,UAA6B;IACpE,~~MAAMJ~~,~~cAAcI~~,~~WAAWJ~~,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO;IACT;IACA,~~MAAMK~~,~~0BAA0BL~~,~~YAAYM~~,YAAY,CAAC;IACzD,~~MAAMC~~,~~uBAAuBP~~,~~YAAYM~~,YAAY,CAAC;IACtD,~~MAAME~~,~~kBAAkBtB~~,~~OAAOoB~~,YAAY,CAAC;IAC5C,~~IAAID~~,4BAA4B,~~OAAOI~~,~~OAAOF~~,~~0BAA0BE~~,~~OAAOD~~,mBAAmB,GAAG;QACnG,~~OAAOR~~;IACT;IACA,OAAO;AACT;AAEA,~~SAASR~~,~~cACPkB~~,~~gBAAqD~~,~~EACrDxB~~,~~MAAmB,EACnBkB,~~UAA6B;~~QAOzBO;IALJ~~,~~MAAMC~~,~~QAAQrC~~,~~4BAA4BW~~;~~IAC1C~~,~~IAAI0B,UAAU,MAAM;QAClB,~~OAAO;IACT;IACA,~~MAAMD~~,~~kBAAkBD~~,~~iBAAiBG,GAAG,CAACD;IAC7C,KAAID,mBAAAA,6BAAAA,uCAAAA,iBAAiBG,WAAW,EAAE;QAChC,OAAOV,WAAWR,~~IAAI,~~CAACmB~~,aAAa,~~CAClC~~,CAAC,CAAC,~~EAAEzC~~,0BAA0B,EAAE,~~EAAEqC~~,~~gBAAgBG~~,~~WAAW,CAAC,~~EAAE,CAAC;~~IAErE;IACA,OAAO;AACT~~"}
1	+ {"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../../Tree';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\nexport function useFlatTreeNavigation() {\n const { targetDocument } = useFluent_unstable();\n const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n function getNextElement(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n if (!targetDocument) {\n return null;\n }\n switch (data.type) {\n case treeDataTypes.Click:\n return data.target;\n case treeDataTypes.TypeAhead:\n walker.currentElement = data.target;\n return nextTypeAheadElement(walker, data.event.key);\n case treeDataTypes.ArrowLeft: {\n const nextElement = parentElement(data.parentValue, walker);\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 walker.currentElement = data.target;\n const nextElement = firstChild(data.target, walker);\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 walker.currentElement = walker.root;\n return walker.lastChild();\n case treeDataTypes.Home:\n walker.currentElement = walker.root;\n return walker.firstChild();\n case treeDataTypes.ArrowDown:\n walker.currentElement = data.target;\n return walker.nextElement();\n case treeDataTypes.ArrowUp:\n walker.currentElement = data.target;\n return walker.previousElement();\n }\n }\n const navigate = useEventCallback((data: TreeNavigationData_unstable, walker: HTMLElementWalker) => {\n const nextElement = getNextElement(data, walker);\n if (nextElement) {\n rove(nextElement);\n }\n });\n return { navigate, initialize } 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":["useFluent_unstable","useEventCallback","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","dataTreeItemValueAttrName","useFlatTreeNavigation","targetDocument","rove","initialize","getNextElement","data","walker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","firstChild","ariaLevel","Number","getAttribute","End","root","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}

package/lib/components/FlatTree/useHeadlessFlatTree.js CHANGED Viewed

@@ -26,7 +26,7 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
     ]);
     const [openItems, setOpenItems] = useControllableOpenItems(options);
     const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
-    const { initialize, navigate } = useFlatTreeNavigation(headlessTree);
+    const { initialize, navigate } = useFlatTreeNavigation();
     const { targetDocument } = useFluent_unstable();
     const walkerRef = React.useRef();
     const initializeWalker = React.useCallback((root)=>{
@@ -40,30 +40,23 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
     ]);
     const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{
-        var _options_onOpenChange, _options;
+        var _options_onOpenChange;
         const nextOpenItems = createNextOpenItems(data, openItems);
-        (_options_onOpenChange = (_options = options).onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(_options, event, {
+        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
             ...data,
             openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
         });
         setOpenItems(nextOpenItems);
     });
     const handleCheckedChange = useEventCallback((event, data)=>{
-        var _options_onCheckedChange, _options;
+        var _options_onCheckedChange;
         const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);
-        (_options_onCheckedChange = (_options = options).onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(_options, event, {
+        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {
             ...data,
             checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
         });
         setCheckedItems(nextCheckedItems);
     });
-    const handleNavigation = useEventCallback((event, data)=>{
-        var _options_onNavigation, _options;
-        (_options_onNavigation = (_options = options).onNavigation) === null || _options_onNavigation === void 0 ? void 0 : _options_onNavigation.call(_options, event, data);
-        if (walkerRef.current) {
-            navigate(data, walkerRef.current);
-        }
-    });
     const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
         const item = headlessTree.get(data.value);
         if (item) {
@@ -90,18 +83,23 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
         return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
     }, []);
     const ref = useMergedRefs(treeRef, initializeWalker);
-    const getTreeProps = React.useCallback(()=>({
+    const getTreeProps = React.useCallback(()=>{
+        var _options_onNavigation;
+        return {
             ref,
             openItems,
             selectionMode: options.selectionMode,
             checkedItems,
             onOpenChange: handleOpenChange,
             onCheckedChange: handleCheckedChange,
-            onNavigation: handleNavigation
-        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop
+        };
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         openItems,
-        checkedItems
+        checkedItems,
+        options.selectionMode,
+        options.onNavigation
     ]);
     const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [
         openItems,
@@ -125,3 +123,5 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
         items
     ]);
 }
+function noop() {
+/* noop */ }