@fluentui/react-tree 9.0.0-beta.27 → 9.0.0-beta.29

package/CHANGELOG.json

@@ -2,7 +2,97 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Tue, 25 Jul 2023 13:26:26 GMT",
+      "date": "Tue, 01 Aug 2023 10:14:28 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.29",
+      "version": "9.0.0-beta.29",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "petrduda@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "d4b3feec354590939a340460bea62f4e39d38a74",
+            "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "f9e014b3919f00068940b0dd94980f6d542eff68",
+            "comment": "feat: adds openItems and checkedItems to tree callback data"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "2f795af17bf0cf844e0cc59c5d2f2418a00c9594",
+            "comment": "chore: improves internal headless signature"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.16",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.26",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.4",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.27",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.11.1",
+            "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 27 Jul 2023 10:34:14 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.28",
+      "version": "9.0.0-beta.28",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "0e9c438b78e58f346f61b15224c7b0020e4fe73e",
+            "comment": "bugfix: makes selector slot required when selection mode is defined"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.15",
+            "commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 25 Jul 2023 13:29:23 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.27",
       "version": "9.0.0-beta.27",
       "comments": {
@@ -29,37 +119,37 @@
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-avatar to v9.5.14",
-            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-button to v9.3.25",
-            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-checkbox to v9.1.26",
-            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-portal to v9.3.3",
-            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-radio to v9.1.26",
-            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-tabster to v9.11.0",
-            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+            "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Tue, 25 Jul 2023 13:26:26 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Aug 2023 10:14:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.29)
+
+Tue, 01 Aug 2023 10:14:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.28..@fluentui/react-tree_v9.0.0-beta.29)
+
+### Changes
+
+- bugfix: Tree, vertical spacing of branches and children is inconsistent ([PR #28681](https://github.com/microsoft/fluentui/pull/28681) by petrduda@microsoft.com)
+- feat: adds openItems and checkedItems to tree callback data ([PR #28669](https://github.com/microsoft/fluentui/pull/28669) by bernardo.sunderhus@gmail.com)
+- chore: improves internal headless signature ([PR #28651](https://github.com/microsoft/fluentui/pull/28651) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.16 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-button to v9.3.26 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-portal to v9.3.4 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-radio to v9.1.27 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+- Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
+
+## [9.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.28)
+
+Thu, 27 Jul 2023 10:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.27..@fluentui/react-tree_v9.0.0-beta.28)
+
+### Changes
+
+- bugfix: makes selector slot required when selection mode is defined ([PR #28648](https://github.com/microsoft/fluentui/pull/28648) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.15 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
+
 ## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.27)
 
-Tue, 25 Jul 2023 13:26:26 GMT 
+Tue, 25 Jul 2023 13:29:23 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.26..@fluentui/react-tree_v9.0.0-beta.27)
 
 ### Changes
@@ -14,12 +42,12 @@ Tue, 25 Jul 2023 13:26:26 GMT
 - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
 - chore: moves slots from TreeItem to TreeItemLayout ([PR #28621](https://github.com/microsoft/fluentui/pull/28621) by bernardo.sunderhus@gmail.com)
 - feat: creates FlatTree component ([PR #28620](https://github.com/microsoft/fluentui/pull/28620) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-avatar to v9.5.14 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
-- Bump @fluentui/react-button to v9.3.25 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
-- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
-- Bump @fluentui/react-portal to v9.3.3 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
-- Bump @fluentui/react-radio to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
-- Bump @fluentui/react-tabster to v9.11.0 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-button to v9.3.25 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-radio to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
 
 ## [9.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.26)
 

package/dist/index.d.ts

@@ -243,11 +243,13 @@ export declare type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange'
  * `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios
  */
 declare type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
-    index: number;
     level: number;
+    index: number;
+    position: number;
     childrenValues: TreeItemValue[];
     value: TreeItemValue;
     parentValue: TreeItemValue | undefined;
+    itemType: TreeItemType;
     getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentValue'>;
 };
 
@@ -369,6 +371,7 @@ export declare const Tree: ForwardRefComponent<TreeProps>;
 
 export declare type TreeCheckedChangeData = {
     value: TreeItemValue;
+    checkedItems: Map<TreeItemValue, TreeSelectionValue>;
     target: HTMLElement;
     event: React_2.ChangeEvent<HTMLElement>;
     type: 'Change';
@@ -428,6 +431,7 @@ export declare type TreeItemContextValue = {
     itemType: TreeItemType;
     value: TreeItemValue;
     open: boolean;
+    checked?: TreeSelectionValue;
 };
 
 declare type TreeItemContextValues = {
@@ -548,7 +552,7 @@ export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | u
 
 declare type TreeItemRequest = {
     itemType: TreeItemType;
-} & (OmitWithoutExpanding<TreeOpenChangeData, 'open'> | TreeNavigationData_unstable | OmitWithoutExpanding<TreeCheckedChangeData, 'checked' | 'selectionMode'>);
+} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> | TreeNavigationData_unstable | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>);
 
 export declare type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
@@ -601,6 +605,7 @@ export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['
 
 export declare type TreeOpenChangeData = {
     open: boolean;
+    openItems: Set<TreeItemValue>;
     value: TreeItemValue;
     target: HTMLElement;
 } & ({
@@ -729,10 +734,10 @@ export declare const useFlatTreeStyles_unstable: (state: TreeState) => TreeState
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param flatTreeItemProps - a list of tree items
+ * @param props - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export declare function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(flatTreeItemProps: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
+export declare function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
 
 export declare const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
 

package/lib/components/FlatTree/useFlatTreeNavigation.js

@@ -1,55 +1,52 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useEventCallback } from '@fluentui/react-utilities';
 import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../../utils/tokens';
 import { treeItemFilter } from '../../utils/treeItemFilter';
-import { useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
 import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
 export function useFlatTreeNavigation(virtualTree) {
     const { targetDocument  } = useFluent_unstable();
-    const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);
-    const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
-    function getNextElement(data) {
-        if (!targetDocument || !treeItemWalkerRef.current) {
+    const { rove , initialize  } = useRovingTabIndex(treeItemFilter);
+    function getNextElement(data, walker) {
+        if (!targetDocument) {
             return null;
         }
-        const treeItemWalker = treeItemWalkerRef.current;
         switch(data.type){
             case treeDataTypes.Click:
                 return data.target;
             case treeDataTypes.TypeAhead:
-                treeItemWalker.currentElement = data.target;
-                return nextTypeAheadElement(treeItemWalker, data.event.key);
+                walker.currentElement = data.target;
+                return nextTypeAheadElement(walker, data.event.key);
             case treeDataTypes.ArrowLeft:
-                return parentElement(virtualTree, data.target, treeItemWalker);
+                return parentElement(virtualTree, data.target, walker);
             case treeDataTypes.ArrowRight:
-                treeItemWalker.currentElement = data.target;
-                return firstChild(data.target, treeItemWalker);
+                walker.currentElement = data.target;
+                return firstChild(data.target, walker);
             case treeDataTypes.End:
-                treeItemWalker.currentElement = treeItemWalker.root;
-                return treeItemWalker.lastChild();
+                walker.currentElement = walker.root;
+                return walker.lastChild();
             case treeDataTypes.Home:
-                treeItemWalker.currentElement = treeItemWalker.root;
-                return treeItemWalker.firstChild();
+                walker.currentElement = walker.root;
+                return walker.firstChild();
             case treeDataTypes.ArrowDown:
-                treeItemWalker.currentElement = data.target;
-                return treeItemWalker.nextElement();
+                walker.currentElement = data.target;
+                return walker.nextElement();
             case treeDataTypes.ArrowUp:
-                treeItemWalker.currentElement = data.target;
-                return treeItemWalker.previousElement();
+                walker.currentElement = data.target;
+                return walker.previousElement();
         }
     }
-    const navigate = useEventCallback((data)=>{
-        const nextElement = getNextElement(data);
+    const navigate = useEventCallback((data, walker)=>{
+        const nextElement = getNextElement(data, walker);
         if (nextElement) {
             rove(nextElement);
         }
     });
-    return [
+    return {
         navigate,
-        useMergedRefs(treeItemWalkerRootRef, rovingRootRef)
-    ];
+        initialize
+    };
 }
 function firstChild(target, treeWalker) {
     const nextElement = treeWalker.nextElement();

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

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

package/lib/components/FlatTree/useFlatTreeStyles.styles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const flatTreeClassNames = {
   root: 'fui-FlatTree'
@@ -8,23 +8,13 @@ const useStyles = /*#__PURE__*/__styles({
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
     Belr9w4: "f1j0q4x9"
-  },
-  subtree: {
-    Bh6795r: "fqerorx",
-    Bnnss6s: "f1neuvcm",
-    xawz: "f1s4axba",
-    Ijaq50: "f1na4k6z",
-    Br312pm: "fwt6ga",
-    nk6f5a: "fi45nfw",
-    Bw0ie65: "f10ort2y"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}", ".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}", ".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}", ".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}", ".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
 });
 export const useFlatTreeStyles_unstable = state => {
   const styles = useStyles();
-  const isSubTree = state.level > 0;
-  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
+  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useFlatTreeStyles.styles.js.map

package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","flatTreeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","useFlatTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        ...shorthands.flex(1, 1, '100%'),\n        ...shorthands.gridArea('subtree')\n    }\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubTree = state.level > 0;\n    state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMgB,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACf,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEiB,SAAS,IAAID,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACf,IAAI,CAACmB,SAAS,CAAC;EAC5H,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","tokens","flatTreeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","d","useFlatTreeStyles_unstable","state","styles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGZ,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/FlatTree/useHeadlessFlatTree.js

@@ -6,6 +6,8 @@ import { useFlatTreeNavigation } from './useFlatTreeNavigation';
 import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
+import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
+import { treeItemFilter } from '../../utils/treeItemFilter';
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
  * in multiple scenarios including virtualization.
@@ -15,15 +17,24 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param flatTreeItemProps - a list of tree items
+ * @param props - a list of tree items
  * @param options - in case control over the internal openItems is required
- */ export function useHeadlessFlatTree_unstable(flatTreeItemProps, options = {}) {
-    const flatTreeItems = React.useMemo(()=>createHeadlessTree(flatTreeItemProps), [
-        flatTreeItemProps
+ */ export function useHeadlessFlatTree_unstable(props, options = {}) {
+    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [
+        props
     ]);
     const [openItems, setOpenItems] = useControllableOpenItems(options);
     const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);
-    const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
+    const { initialize , navigate  } = useFlatTreeNavigation(headlessTree);
+    const walkerRef = React.useRef();
+    const initializeWalker = React.useCallback((root)=>{
+        if (root) {
+            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+            initialize(walkerRef.current);
+        }
+    }, [
+        initialize
+    ]);
     const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{
         var _options_onOpenChange;
@@ -33,21 +44,23 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
     const handleCheckedChange = useEventCallback((event, data)=>{
         var _options_onCheckedChange;
         (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, data);
-        setCheckedItems(createNextFlatCheckedItems(data, checkedItems, flatTreeItems));
+        setCheckedItems(createNextFlatCheckedItems(data, checkedItems, headlessTree));
     });
     const handleNavigation = useEventCallback((event, data)=>{
         var _options_onNavigation_unstable;
         (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
-        navigate(data);
+        if (walkerRef.current) {
+            navigate(data, walkerRef.current);
+        }
     });
     const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
-        const item = flatTreeItems.get(data.value);
+        const item = headlessTree.get(data.value);
         if (item) {
             switch(data.type){
                 case treeDataTypes.TypeAhead:
                     return item;
                 case treeDataTypes.ArrowLeft:
-                    return flatTreeItems.get(item.parentValue);
+                    return headlessTree.get(item.parentValue);
                 case treeDataTypes.ArrowRight:
                     return visibleItems[item.index + 1];
                 case treeDataTypes.End:
@@ -65,7 +78,7 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
         var _treeRef_current;
         return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
     }, []);
-    const ref = useMergedRefs(treeRef, navigationRef);
+    const ref = useMergedRefs(treeRef, initializeWalker);
     const getTreeProps = React.useCallback(()=>({
             ref,
             openItems,
@@ -80,12 +93,16 @@ import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './u
         openItems,
         checkedItems
     ]);
-    const items = React.useCallback(()=>flatTreeItems.visibleItems(openItems), [
+    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [
         openItems,
-        flatTreeItems
+        headlessTree
     ]);
     return React.useMemo(()=>({
-            navigate,
+            navigate: (data)=>{
+                if (walkerRef.current) {
+                    navigate(data, walkerRef.current);
+                }
+            },
             getTreeProps,
             getNextNavigableItem,
             getElementFromItem,

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts/treeContext';\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};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: TreeItemValue } & (\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  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\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\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\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;\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  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(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   * This refers to a list of ids of default checked items, or a list of tuples of ids and checked state.\n   * These property is ignored for subtrees.\n   */\n  defaultCheckedItems?: 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  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAuJI"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts/treeContext';\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};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: TreeItemValue } & (\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  | { 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\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;\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  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(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   * This refers to a list of ids of default checked items, or a list of tuples of ids and checked state.\n   * These property is ignored for subtrees.\n   */\n  defaultCheckedItems?: 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  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAyJI"}