@fluentui/react-tree 9.14.1 → 9.15.0

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.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/react-tree
2
2
 
3
- This log was last generated on Fri, 03 Oct 2025 14:18:15 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 06 Oct 2025 15:01:29 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.15.0)
8
+
9
+ Mon, 06 Oct 2025 15:01:29 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.14.1..@fluentui/react-tree_v9.15.0)
11
+
12
+ ### Minor changes
13
+
14
+ - added return type to useTreeNavigation hook ([PR #35283](https://github.com/microsoft/fluentui/pull/35283) by patrycja.fogelman@microsoft.com)
15
+
7
16
  ## [9.14.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.14.1)
8
17
 
9
- Fri, 03 Oct 2025 14:18:15 GMT
18
+ Fri, 03 Oct 2025 14:19:04 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.14.0..@fluentui/react-tree_v9.14.1)
11
20
 
12
21
  ### Patches
package/dist/index.d.ts CHANGED
@@ -930,7 +930,7 @@ export declare const useTreeItemStyles_unstable: (state: TreeItemState) => TreeI
930
930
  * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'
931
931
  */
932
932
  export declare function useTreeNavigation(navigationMode?: TreeNavigationMode): {
933
- navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => void;
933
+ navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;
934
934
  treeRef: React_2.RefCallback<HTMLElement>;
935
935
  forceUpdateRovingTabIndex: () => void;
936
936
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => void;\n treeRef: React.RefCallback<HTMLElement>;\n forceUpdateRovingTabIndex: () => void;\n} {\n 'use no memo';\n\n const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n const { findFirstFocusable } = useFocusFinders();\n const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n root => {\n if (root && walkerRef.current) {\n initializeRovingTabIndex(walkerRef.current);\n }\n },\n [walkerRef, initializeRovingTabIndex],\n );\n\n const 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 actions = queryActions(data.target);\n if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n return data.target;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.parentElement();\n }\n case treeDataTypes.ArrowRight:\n if (navigationMode === 'treegrid') {\n const actions = queryActions(data.target);\n if (actions) {\n findFirstFocusable(actions)?.focus();\n }\n return null;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.firstChild();\n case treeDataTypes.End:\n walkerRef.current.currentElement = walkerRef.current.root;\n return lastChildRecursive(walkerRef.current);\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 function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement, focusOptions);\n }\n return nextElement;\n }\n return {\n navigate,\n treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n forceUpdateRovingTabIndex,\n } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n let lastElement: HTMLElement | null = null;\n let nextElement: HTMLElement | null = null;\n while ((nextElement = walker.lastChild())) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n target.querySelector<HTMLElement>(\n `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;\n treeRef: React.RefCallback<HTMLElement>;\n forceUpdateRovingTabIndex: () => void;\n} {\n 'use no memo';\n\n const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n const { findFirstFocusable } = useFocusFinders();\n const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n root => {\n if (root && walkerRef.current) {\n initializeRovingTabIndex(walkerRef.current);\n }\n },\n [walkerRef, initializeRovingTabIndex],\n );\n\n const 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 actions = queryActions(data.target);\n if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n return data.target;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.parentElement();\n }\n case treeDataTypes.ArrowRight:\n if (navigationMode === 'treegrid') {\n const actions = queryActions(data.target);\n if (actions) {\n findFirstFocusable(actions)?.focus();\n }\n return null;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.firstChild();\n case treeDataTypes.End:\n walkerRef.current.currentElement = walkerRef.current.root;\n return lastChildRecursive(walkerRef.current);\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 function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement, focusOptions);\n }\n return nextElement;\n }\n return {\n navigate,\n treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n forceUpdateRovingTabIndex,\n } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n let lastElement: HTMLElement | null = null;\n let nextElement: HTMLElement | null = null;\n while ((nextElement = walker.lastChild())) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n target.querySelector<HTMLElement>(\n `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => void;\n treeRef: React.RefCallback<HTMLElement>;\n forceUpdateRovingTabIndex: () => void;\n} {\n 'use no memo';\n\n const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n const { findFirstFocusable } = useFocusFinders();\n const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n root => {\n if (root && walkerRef.current) {\n initializeRovingTabIndex(walkerRef.current);\n }\n },\n [walkerRef, initializeRovingTabIndex],\n );\n\n const 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 actions = queryActions(data.target);\n if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n return data.target;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.parentElement();\n }\n case treeDataTypes.ArrowRight:\n if (navigationMode === 'treegrid') {\n const actions = queryActions(data.target);\n if (actions) {\n findFirstFocusable(actions)?.focus();\n }\n return null;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.firstChild();\n case treeDataTypes.End:\n walkerRef.current.currentElement = walkerRef.current.root;\n return lastChildRecursive(walkerRef.current);\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 function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement, focusOptions);\n }\n return nextElement;\n }\n return {\n navigate,\n treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n forceUpdateRovingTabIndex,\n } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n let lastElement: HTMLElement | null = null;\n let nextElement: HTMLElement | null = null;\n while ((nextElement = walker.lastChild())) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n target.querySelector<HTMLElement>(\n `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;\n treeRef: React.RefCallback<HTMLElement>;\n forceUpdateRovingTabIndex: () => void;\n} {\n 'use no memo';\n\n const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n const { findFirstFocusable } = useFocusFinders();\n const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n root => {\n if (root && walkerRef.current) {\n initializeRovingTabIndex(walkerRef.current);\n }\n },\n [walkerRef, initializeRovingTabIndex],\n );\n\n const 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 actions = queryActions(data.target);\n if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n return data.target;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.parentElement();\n }\n case treeDataTypes.ArrowRight:\n if (navigationMode === 'treegrid') {\n const actions = queryActions(data.target);\n if (actions) {\n findFirstFocusable(actions)?.focus();\n }\n return null;\n }\n walkerRef.current.currentElement = data.target;\n return walkerRef.current.firstChild();\n case treeDataTypes.End:\n walkerRef.current.currentElement = walkerRef.current.root;\n return lastChildRecursive(walkerRef.current);\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 function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement, focusOptions);\n }\n return nextElement;\n }\n return {\n navigate,\n treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n forceUpdateRovingTabIndex,\n } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n let lastElement: HTMLElement | null = null;\n let nextElement: HTMLElement | null = null;\n while ((nextElement = walker.lastChild())) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n target.querySelector<HTMLElement>(\n `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-tree",
3
- "version": "9.14.1",
3
+ "version": "9.15.0",
4
4
  "description": "Tree component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",