@fluentui/react-tree 9.8.11 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Wed, 18 Dec 2024 10:58:15 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 13:55:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.9.0)
+
+Wed, 22 Jan 2025 13:55:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.8.12..@fluentui/react-tree_v9.9.0)
+
+### Minor changes
+
+- feature: introduces navigationMode property ([PR #33658](https://github.com/microsoft/fluentui/pull/33658) by bernardo.sunderhus@gmail.com)
+- feature: TreeRootReset component ([PR #33663](https://github.com/microsoft/fluentui/pull/33663) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.13.14 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-avatar to v9.6.49 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-button to v9.3.100 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.46 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.72 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.4.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-motion to v9.6.7 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-radio to v9.2.41 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-tabster to v9.23.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.50 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+
+## [9.8.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.8.12)
+
+Wed, 08 Jan 2025 18:33:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.8.11..@fluentui/react-tree_v9.8.12)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.13.13 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-avatar to v9.6.48 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-button to v9.3.99 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.45 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.4.2 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-motion to v9.6.6 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-radio to v9.2.40 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+
 ## [9.8.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.8.11)
 
-Wed, 18 Dec 2024 10:58:15 GMT 
+Wed, 18 Dec 2024 10:59:37 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.8.10..@fluentui/react-tree_v9.8.11)
 
 ### Patches

package/dist/index.d.ts

@@ -107,6 +107,13 @@ export declare type FlatTreeItemProps = TreeItemProps & {
 };
 
 export declare type FlatTreeProps = ComponentProps<TreeSlots> & {
+    /**
+     * Indicates how navigation between a treeitem and its actions work
+     * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem
+     * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem
+     * @default 'tree'
+     */
+    navigationMode?: 'tree' | 'treegrid';
     /**
      * A tree item can have various appearances:
      * - 'subtle' (default): The default tree item styles.
@@ -413,6 +420,7 @@ export declare type TreeContextValue = {
      */
     requestTreeResponse(request: TreeItemRequest): void;
     forceUpdateRovingTabIndex?(): void;
+    navigationMode?: 'tree' | 'treegrid';
 };
 
 export declare type TreeContextValues = {
@@ -704,6 +712,8 @@ declare type TreeNavigationDataParam = TreeNavigationData_unstable & {
 
 export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
+export declare type TreeNavigationMode = 'tree' | 'treegrid';
+
 export declare type TreeOpenChangeData = {
     open: boolean;
     openItems: Set<TreeItemValue>;
@@ -736,6 +746,13 @@ export declare type TreeOpenChangeData = {
 export declare type TreeOpenChangeEvent = TreeOpenChangeData['event'];
 
 export declare type TreeProps = ComponentProps<TreeSlots> & {
+    /**
+     * Indicates how navigation between a treeitem and its actions work
+     * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem
+     * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem
+     * @default 'tree'
+     */
+    navigationMode?: TreeNavigationMode;
     /**
      * A tree item can have various appearances:
      * - 'subtle' (default): The default tree item styles.
@@ -810,6 +827,12 @@ export declare const TreeProvider: {
     displayName: string;
 };
 
+export declare const TreeRootReset: (props: TreeRootResetProps) => JSX.Element;
+
+declare type TreeRootResetProps = {
+    children?: React_2.ReactNode;
+};
+
 export declare type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
 
 export declare type TreeSlots = {

package/lib/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tree.ts"],"sourcesContent":["export type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n} from './components/Tree/index';\nexport {\n  Tree,\n  renderTree_unstable,\n  treeClassNames,\n  useTreeContextValues_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n} from './components/Tree/index';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"rangeMappings":"","mappings":"AAaA,SACEA,IAAI,EACJC,mBAAmB,EACnBC,cAAc,EACdC,6BAA6B,EAC7BC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}
+{"version":3,"sources":["../src/Tree.ts"],"sourcesContent":["export type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n  TreeNavigationMode,\n} from './components/Tree/index';\nexport {\n  Tree,\n  renderTree_unstable,\n  treeClassNames,\n  useTreeContextValues_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n} from './components/Tree/index';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"rangeMappings":"","mappings":"AAcA,SACEA,IAAI,EACJC,mBAAmB,EACnBC,cAAc,EACdC,6BAA6B,EAC7BC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\nimport type { TreeContextValue } from '../../contexts';\n\nexport type FlatTreeSlots = TreeSlots;\n\nexport type FlatTreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type FlatTreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\nexport type FlatTreeState = ComponentState<FlatTreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"rangeMappings":"","mappings":"AAuFA,WAGI"}
+{"version":3,"sources":["../src/components/FlatTree/FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\nimport type { TreeContextValue } from '../../contexts';\n\nexport type FlatTreeSlots = TreeSlots;\n\nexport type FlatTreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type FlatTreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * Indicates how navigation between a treeitem and its actions work\n   * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n   * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem\n   * @default 'tree'\n   */\n  navigationMode?: 'tree' | 'treegrid';\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\nexport type FlatTreeState = ComponentState<FlatTreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"rangeMappings":"","mappings":"AA8FA,WAGI"}

package/lib/components/FlatTree/useFlatTree.js

@@ -15,7 +15,7 @@ export const useFlatTree_unstable = (props, ref)=>{
     return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
 };
 function useRootFlatTree(props, ref) {
-    const navigation = useFlatTreeNavigation();
+    const navigation = useFlatTreeNavigation(props.navigationMode);
     return Object.assign(useRootTree({
         ...props,
         onNavigation: useEventCallback((event, data)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/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  'use no memo';\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    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } 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    forceUpdateRovingTabIndex: 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","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;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;QACEC,UAAU;QACVC,2BAA2BV,WAAWU,yBAAyB;IACjE;AAEJ;AAEA,SAASX,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAG1B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCqB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW7B,aAAa8B,KAAK;QAC7BC,cAAc9B,aAAa6B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}
+{"version":3,"sources":["../src/components/FlatTree/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  'use no memo';\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(props.navigationMode);\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    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } 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    forceUpdateRovingTabIndex: 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","navigationMode","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;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,sBAAsBM,MAAMQ,cAAc;IAE7D,OAAOC,OAAOC,MAAM,CAClBnB,YACE;QACE,GAAGS,KAAK;QACRW,cAAcnB,iBAAiB,CAACoB,OAAOC;gBACrCb;aAAAA,sBAAAA,MAAMW,YAAY,cAAlBX,0CAAAA,yBAAAA,OAAqBY,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BP,WAAWQ,QAAQ,CAACF;YACtB;QACF;IACF,GACApB,cAAcQ,KAAKM,WAAWS,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BX,WAAWW,yBAAyB;IACjE;AAEJ;AAEA,SAASZ,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAG3B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCsB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW9B,aAAa+B,KAAK;QAC7BC,cAAc/B,aAAa8B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

package/lib/components/FlatTree/useFlatTreeContextValues.js

@@ -1,5 +1,5 @@
 export const useFlatTreeContextValues_unstable = (state)=>{
-    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -10,6 +10,7 @@ export const useFlatTreeContextValues_unstable = (state)=>{
         appearance,
         checkedItems,
         selectionMode,
+        navigationMode,
         contextType,
         level,
         requestTreeResponse,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n  const {\n    openItems,\n    level,\n    contextType,\n    treeType,\n    checkedItems,\n    selectionMode,\n    appearance,\n    size,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    treeType,\n    size,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    contextType,\n    level,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  };\n\n  return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,OAAO,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGV;IACJ;;;GAGC,GACD,MAAMW,OAAyB;QAC7BP;QACAI;QACAP;QACAM;QACAF;QACAC;QACAH;QACAD;QACAO;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}
+{"version":3,"sources":["../src/components/FlatTree/useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n  const {\n    openItems,\n    level,\n    contextType,\n    treeType,\n    checkedItems,\n    selectionMode,\n    navigationMode,\n    appearance,\n    size,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    treeType,\n    size,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    navigationMode,\n    contextType,\n    level,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  };\n\n  return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,OAAO,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;IACJ;;;GAGC,GACD,MAAMY,OAAyB;QAC7BR;QACAK;QACAR;QACAO;QACAH;QACAC;QACAC;QACAJ;QACAD;QACAQ;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n  collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\n/**\n * @internal\n *\n * To avoid breaking changes on TreeNavigationData\n * we are creating a new type that extends the old one\n * and adds the new methods, and this type will not be exported\n */\ntype TreeNavigationDataParam = TreeNavigationData_unstable & {\n  preventScroll(): void;\n  isScrollPrevented(): boolean;\n};\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"rangeMappings":";;","mappings":"AAqKA;;CAEC,GACD,WAE6C"}
+{"version":3,"sources":["../src/components/Tree/Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n  collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\n/**\n * @internal\n *\n * To avoid breaking changes on TreeNavigationData\n * we are creating a new type that extends the old one\n * and adds the new methods, and this type will not be exported\n */\ntype TreeNavigationDataParam = TreeNavigationData_unstable & {\n  preventScroll(): void;\n  isScrollPrevented(): boolean;\n};\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeNavigationMode = 'tree' | 'treegrid';\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * Indicates how navigation between a treeitem and its actions work\n   * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n   * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem\n   * @default 'tree'\n   */\n  navigationMode?: TreeNavigationMode;\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"rangeMappings":";;","mappings":"AA8KA;;CAEC,GACD,WAE6C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/index.ts"],"sourcesContent":["export { Tree } from './Tree';\nexport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n} from './Tree.types';\nexport { useTree_unstable } from './useTree';\nexport { useTreeContextValues_unstable } from './useTreeContextValues';\nexport { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';\nexport { renderTree_unstable } from './renderTree';\n"],"names":["Tree","useTree_unstable","useTreeContextValues_unstable","treeClassNames","useTreeStyles_unstable","renderTree_unstable"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAc9B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB;AAChF,SAASC,mBAAmB,QAAQ,eAAe"}
+{"version":3,"sources":["../src/components/Tree/index.ts"],"sourcesContent":["export { Tree } from './Tree';\nexport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n  TreeNavigationMode,\n} from './Tree.types';\nexport { useTree_unstable } from './useTree';\nexport { useTreeContextValues_unstable } from './useTreeContextValues';\nexport { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';\nexport { renderTree_unstable } from './renderTree';\n"],"names":["Tree","useTree_unstable","useTreeContextValues_unstable","treeClassNames","useTreeStyles_unstable","renderTree_unstable"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAe9B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB;AAChF,SAASC,mBAAmB,QAAQ,eAAe"}

package/lib/components/Tree/useTree.js

@@ -21,7 +21,7 @@ function useNestedRootTree(props, ref) {
     'use no memo';
     const [openItems, setOpenItems] = useControllableOpenItems(props);
     const checkedItems = useNestedCheckedItems(props);
-    const navigation = useTreeNavigation();
+    const navigation = useTreeNavigation(props.navigationMode);
     return Object.assign(useRootTree({
         ...props,
         openItems,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/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';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  'use no memo';\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 ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\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: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data, {\n              preventScroll: data.isScrollPrevented(),\n            });\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.treeRef),\n    ),\n    {\n      treeType: 'nested',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\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","ImmutableSet","ImmutableMap","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","ctx","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;AACrE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AAExD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASjB,MAAMkB,UAAU,CAACX,oBAAoBY;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACM,WAAWC,aAAa,GAAGnB,yBAAyBW;IAC3D,MAAMS,eAAelB,sBAAsBS;IAC3C,MAAMU,aAAaf;IAEnB,OAAOgB,OAAOC,MAAM,CAClBnB,YACE;QACE,GAAGO,KAAK;QACRO;QACAE;QACAI,cAAc3B,iBAAiB,CAAC4B,OAAOC;gBAErCf;YADA,MAAMgB,gBAAgB5B,oBAAoB2B,MAAMR;aAChDP,sBAAAA,MAAMa,YAAY,cAAlBb,0CAAAA,yBAAAA,OAAqBc,OAAO;gBAC1B,GAAGC,IAAI;gBACPR,WAAWV,aAAaoB,yBAAyB,CAACD;YACpD;YACAR,aAAaQ;QACf;QACAE,cAAchC,iBAAiB,CAAC4B,OAAOC;gBACrCf;aAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBc,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBrC,iBAAiB,CAAC4B,OAAOC;gBAExCf;YADA,MAAMwB,mBAAmBlC,6BAA6ByB,MAAMN;aAC5DT,yBAAAA,MAAMuB,eAAe,cAArBvB,6CAAAA,4BAAAA,OAAwBc,OAAO;gBAC7B,GAAGC,IAAI;gBACPN,cAAcX,aAAa2B,yBAAyB,CAACD;YACvD;QACF;IACF,GACArC,cAAcc,KAAKS,WAAWgB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BlB,WAAWkB,yBAAyB;IACjE;AAEJ;AAEA,SAAStB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,WAAW/B,wBAAwBoC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOvC,WAAWM,OAAOC;AAC3B"}
+{"version":3,"sources":["../src/components/Tree/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';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  'use no memo';\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 ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation(props.navigationMode);\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: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data, {\n              preventScroll: data.isScrollPrevented(),\n            });\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.treeRef),\n    ),\n    {\n      treeType: 'nested',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\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","ImmutableSet","ImmutableMap","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigation","navigationMode","Object","assign","onOpenChange","event","data","nextOpenItems","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","dangerouslyGetInternalMap","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","ctx","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;AACrE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AAExD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASjB,MAAMkB,UAAU,CAACX,oBAAoBY;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACM,WAAWC,aAAa,GAAGnB,yBAAyBW;IAC3D,MAAMS,eAAelB,sBAAsBS;IAC3C,MAAMU,aAAaf,kBAAkBK,MAAMW,cAAc;IAEzD,OAAOC,OAAOC,MAAM,CAClBpB,YACE;QACE,GAAGO,KAAK;QACRO;QACAE;QACAK,cAAc5B,iBAAiB,CAAC6B,OAAOC;gBAErChB;YADA,MAAMiB,gBAAgB7B,oBAAoB4B,MAAMT;aAChDP,sBAAAA,MAAMc,YAAY,cAAlBd,0CAAAA,yBAAAA,OAAqBe,OAAO;gBAC1B,GAAGC,IAAI;gBACPT,WAAWV,aAAaqB,yBAAyB,CAACD;YACpD;YACAT,aAAaS;QACf;QACAE,cAAcjC,iBAAiB,CAAC6B,OAAOC;gBACrChB;aAAAA,sBAAAA,MAAMmB,YAAY,cAAlBnB,0CAAAA,yBAAAA,OAAqBe,OAAOC;YAC5B,IAAI,CAACD,MAAMK,kBAAkB,IAAI;gBAC/BV,WAAWW,QAAQ,CAACL,MAAM;oBACxBM,eAAeN,KAAKO,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBtC,iBAAiB,CAAC6B,OAAOC;gBAExChB;YADA,MAAMyB,mBAAmBnC,6BAA6B0B,MAAMP;aAC5DT,yBAAAA,MAAMwB,eAAe,cAArBxB,6CAAAA,4BAAAA,OAAwBe,OAAO;gBAC7B,GAAGC,IAAI;gBACPP,cAAcX,aAAa4B,yBAAyB,CAACD;YACvD;QACF;IACF,GACAtC,cAAcc,KAAKS,WAAWiB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BnB,WAAWmB,yBAAyB;IACjE;AAEJ;AAEA,SAASvB,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAI6B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,WAAWhC,wBAAwBqC,CAAAA,MAAOA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIM,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOxC,WAAWM,OAAOC;AAC3B"}

package/lib/components/Tree/useTreeContextValues.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 export function useTreeContextValues_unstable(state) {
     'use no memo';
     if (state.contextType === 'root') {
-        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
         /**
      * This context is created with "@fluentui/react-context-selector",
      * there is no sense to memoize it
@@ -13,6 +13,7 @@ export function useTreeContextValues_unstable(state) {
             appearance,
             checkedItems,
             selectionMode,
+            navigationMode,
             contextType,
             level,
             requestTreeResponse,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  'use no memo';\n\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */\n    const tree: TreeContextValue = {\n      treeType,\n      size,\n      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      contextType,\n      level,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGV;QACJ;;;KAGC,GACD,MAAMW,OAAyB;YAC7BP;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMb,MAAMc,OAAO,CAAC,IAAO,CAAA;gBAAET,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}
+{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  'use no memo';\n\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */\n    const tree: TreeContextValue = {\n      treeType,\n      size,\n      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      contextType,\n      level,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;QACJ;;;KAGC,GACD,MAAMY,OAAyB;YAC7BR;YACAK;YACAP;YACAM;YACAH;YACAC;YACAC;YACAN;YACAE;YACAO;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMd,MAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEV,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

package/lib/components/TreeItem/useTreeItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs, isHTMLElement } from '@fluentui/react-utilities';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
 import { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable, TreeContext } from '../../contexts';
@@ -22,6 +22,10 @@ import { treeClassNames } from '../../Tree';
         warnIfNoProperPropsFlatTreeItem(props);
     }
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
+    const navigationMode = useTreeContext_unstable((ctx)=>{
+        var _ctx_navigationMode;
+        return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
+    });
     const forceUpdateRovingTabIndex = useTreeContext_unstable((ctx)=>ctx.forceUpdateRovingTabIndex);
     const { level: contextLevel } = useSubtreeContext_unstable();
     const parentValue = useTreeItemContext_unstable((ctx)=>{
@@ -124,73 +128,114 @@ import { treeClassNames } from '../../Tree';
     });
     const handleKeyDown = useEventCallback((event)=>{
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        // Ignore keyboard events that do not originate from the current tree item.
-        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
+        if (event.isDefaultPrevented() || !treeItemRef.current) {
             return;
         }
+        const isEventFromTreeItem = event.currentTarget === event.target;
+        const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target);
         switch(event.key){
             case Space:
-                if (selectionMode !== 'none') {
-                    var _selectionRef_current;
-                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
-                    // Prevents the page from scrolling down when the spacebar is pressed
-                    event.preventDefault();
+                {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    if (selectionMode !== 'none') {
+                        var _selectionRef_current;
+                        (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                        // Prevents the page from scrolling down when the spacebar is pressed
+                        event.preventDefault();
+                    }
+                    return;
                 }
-                return;
             case treeDataTypes.Enter:
                 {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
                     return event.currentTarget.click();
                 }
             case treeDataTypes.End:
             case treeDataTypes.Home:
             case treeDataTypes.ArrowUp:
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
             case treeDataTypes.ArrowDown:
-                return requestTreeResponse({
-                    requestType: 'navigate',
-                    event,
-                    value,
-                    itemType,
-                    parentValue,
-                    type: event.key,
-                    target: event.currentTarget
-                });
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
             case treeDataTypes.ArrowLeft:
                 {
                     // arrow left with alt key is reserved for history navigation
                     if (event.altKey) {
                         return;
                     }
-                    // do not navigate to parent if the item is on the top level
-                    if (level === 1 && !open) {
-                        return;
-                    }
                     const data = {
                         value,
                         event,
                         open: getNextOpen(),
                         type: event.key,
+                        itemType,
+                        parentValue,
                         target: event.currentTarget
                     };
+                    if (isEventFromActions && navigationMode === 'treegrid') {
+                        requestTreeResponse({
+                            ...data,
+                            requestType: 'navigate'
+                        });
+                        return;
+                    }
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    // do not navigate to parent if the item is on the top level
+                    if (level === 1 && !open) {
+                        return;
+                    }
                     if (open) {
                         var _props_onOpenChange;
                         (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     }
                     requestTreeResponse({
                         ...data,
-                        itemType,
-                        parentValue,
                         requestType: open ? 'open' : 'navigate'
                     });
                     return;
                 }
             case treeDataTypes.ArrowRight:
                 {
-                    // arrow right with alt key is reserved for history navigation
-                    if (event.altKey) {
+                    // Ignore keyboard events that do not originate from the current tree item.
+                    if (!isEventFromTreeItem) {
                         return;
                     }
-                    // do not navigate or open if the item is a leaf
-                    if (itemType === 'leaf') {
+                    // arrow right with alt key is reserved for history navigation
+                    if (event.altKey) {
                         return;
                     }
                     const data = {
@@ -200,19 +245,29 @@ import { treeClassNames } from '../../Tree';
                         type: event.key,
                         target: event.currentTarget
                     };
-                    if (!open) {
+                    if (itemType === 'branch' && !open) {
                         var _props_onOpenChange1;
                         (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                        requestTreeResponse({
+                            ...data,
+                            itemType,
+                            requestType: 'open'
+                        });
+                    } else {
+                        requestTreeResponse({
+                            ...data,
+                            itemType,
+                            parentValue,
+                            requestType: 'navigate'
+                        });
                     }
-                    requestTreeResponse({
-                        ...data,
-                        itemType,
-                        parentValue,
-                        requestType: open ? 'navigate' : 'open'
-                    });
                     return;
                 }
         }
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (!isEventFromTreeItem) {
+            return;
+        }
         const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
         if (isTypeAheadCharacter) {
             requestTreeResponse({