@fluentui/react-tree 9.0.0-beta.11 → 9.0.0-beta.13

package/lib-commonjs/utils/createFlatTreeItems.js

@@ -1,7 +1,4 @@
-/**
- * creates a list of flat tree items
- * and provides a map to access each item by id
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -16,19 +13,21 @@ _export(exports, {
     flatTreeRootId: ()=>flatTreeRootId,
     VisibleFlatTreeItemGenerator: ()=>VisibleFlatTreeItemGenerator
 });
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 function createFlatTreeItems(flatTreeItemProps) {
     const root = createFlatTreeRootItem();
-    const itemsPerId = new Map([
+    const itemsPerValue = new Map([
         [
-            flatTreeRootId,
+            root.value,
             root
         ]
     ]);
     const items = [];
     for(let index = 0; index < flatTreeItemProps.length; index++){
-        const { parentId =flatTreeRootId , ...treeItemProps } = flatTreeItemProps[index];
+        const { parentValue =flatTreeRootId , ...treeItemProps } = flatTreeItemProps[index];
         const nextItemProps = flatTreeItemProps[index + 1];
-        const currentParent = itemsPerId.get(parentId);
+        const currentParent = itemsPerValue.get(parentValue);
         if (!currentParent) {
             if (process.env.NODE_ENV === 'development') {
                 // eslint-disable-next-line no-console
@@ -36,50 +35,60 @@ function createFlatTreeItems(flatTreeItemProps) {
             }
             break;
         }
-        const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;
+        var _treeItemProps_itemType;
+        const itemType = (_treeItemProps_itemType = treeItemProps.itemType) !== null && _treeItemProps_itemType !== void 0 ? _treeItemProps_itemType : treeItemProps.value === undefined || (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentValue) !== treeItemProps.value ? 'leaf' : 'branch';
         var _currentParent_level;
         const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;
         const currentChildrenSize = ++currentParent.childrenSize;
+        const ref = /*#__PURE__*/ _react.createRef();
         const flatTreeItem = {
-            id: treeItemProps.id,
+            value: treeItemProps.value,
             getTreeItemProps: ()=>({
                     ...treeItemProps,
                     'aria-level': currentLevel,
                     'aria-posinset': currentChildrenSize,
                     'aria-setsize': currentParent.childrenSize,
-                    leaf: isLeaf
+                    itemType,
+                    // a reference to every parent element is necessary to ensure navigation
+                    ref: flatTreeItem.childrenSize > 0 ? ref : undefined
                 }),
+            ref,
             level: currentLevel,
-            parentId,
+            parentValue,
             childrenSize: 0,
             index: -1
         };
-        itemsPerId.set(flatTreeItem.id, flatTreeItem);
+        itemsPerValue.set(flatTreeItem.value, flatTreeItem);
         items.push(flatTreeItem);
     }
-    return {
+    const flatTreeItems = {
         root,
         size: items.length,
         getByIndex: (index)=>items[index],
-        get: (id)=>itemsPerId.get(id),
-        set: (id, value)=>itemsPerId.set(id, value)
+        get: (key)=>itemsPerValue.get(key),
+        set: (key, value)=>itemsPerValue.set(key, value)
     };
+    return flatTreeItems;
 }
 const flatTreeRootId = '__fuiFlatTreeRoot';
 function createFlatTreeRootItem() {
     return {
-        id: flatTreeRootId,
+        ref: {
+            current: null
+        },
+        value: flatTreeRootId,
+        parentValue: undefined,
         getTreeItemProps: ()=>{
             if (process.env.NODE_ENV !== 'production') {
                 // eslint-disable-next-line no-console
                 console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
             }
             return {
-                id: flatTreeRootId,
+                value: flatTreeRootId,
                 'aria-setsize': -1,
                 'aria-level': -1,
                 'aria-posinset': -1,
-                leaf: true
+                itemType: 'branch'
             };
         },
         childrenSize: 0,
@@ -96,13 +105,12 @@ function createFlatTreeRootItem() {
 function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
     for(let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++){
         const item = flatTreeItems.getByIndex(index);
-        var _flatTreeItems_get;
-        const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
         if (isItemVisible(item, openItems, flatTreeItems)) {
             item.index = visibleIndex++;
             yield item;
         } else {
-            index += parent.childrenSize - 1 + item.childrenSize;
+            // Jump the amount of children the current item has, since those items will also be hidden
+            index += item.childrenSize;
         }
     }
 }
@@ -110,11 +118,11 @@ function isItemVisible(item, openItems, flatTreeItems) {
     if (item.level === 1) {
         return true;
     }
-    while(item.parentId && item.parentId !== flatTreeItems.root.id){
-        if (!openItems.has(item.parentId)) {
+    while(item.parentValue && item.parentValue !== flatTreeItems.root.value){
+        if (!openItems.has(item.parentValue)) {
             return false;
         }
-        const parent = flatTreeItems.get(item.parentId);
+        const parent = flatTreeItems.get(item.parentValue);
         if (!parent) {
             return false;
         }

package/lib-commonjs/utils/createFlatTreeItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/utils/createFlatTreeItems.js"],"sourcesContent":["/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */export function createFlatTreeItems(flatTreeItemProps) {\n  const root = createFlatTreeRootItem();\n  const itemsPerId = new Map([[flatTreeRootId, root]]);\n  const items = [];\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const {\n      parentId = flatTreeRootId,\n      ...treeItemProps\n    } = flatTreeItemProps[index];\n    const nextItemProps = flatTreeItemProps[index + 1];\n    const currentParent = itemsPerId.get(parentId);\n    if (!currentParent) {\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);\n      }\n      break;\n    }\n    const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;\n    var _currentParent_level;\n    const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n    const flatTreeItem = {\n      id: treeItemProps.id,\n      getTreeItemProps: () => ({\n        ...treeItemProps,\n        'aria-level': currentLevel,\n        'aria-posinset': currentChildrenSize,\n        'aria-setsize': currentParent.childrenSize,\n        leaf: isLeaf\n      }),\n      level: currentLevel,\n      parentId,\n      childrenSize: 0,\n      index: -1\n    };\n    itemsPerId.set(flatTreeItem.id, flatTreeItem);\n    items.push(flatTreeItem);\n  }\n  return {\n    root,\n    size: items.length,\n    getByIndex: index => items[index],\n    get: id => itemsPerId.get(id),\n    set: (id, value) => itemsPerId.set(id, value)\n  };\n}\nexport const flatTreeRootId = '__fuiFlatTreeRoot';\nfunction createFlatTreeRootItem() {\n  return {\n    id: flatTreeRootId,\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return {\n        id: flatTreeRootId,\n        'aria-setsize': -1,\n        'aria-level': -1,\n        'aria-posinset': -1,\n        leaf: true\n      };\n    },\n    childrenSize: 0,\n    get index() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    level: 0\n  };\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {\n  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n    const item = flatTreeItems.getByIndex(index);\n    var _flatTreeItems_get;\n    const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;\n    if (isItemVisible(item, openItems, flatTreeItems)) {\n      item.index = visibleIndex++;\n      yield item;\n    } else {\n      index += parent.childrenSize - 1 + item.childrenSize;\n    }\n  }\n}\nfunction isItemVisible(item, openItems, flatTreeItems) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentId && item.parentId !== flatTreeItems.root.id) {\n    if (!openItems.has(item.parentId)) {\n      return false;\n    }\n    const parent = flatTreeItems.get(item.parentId);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n//# sourceMappingURL=createFlatTreeItems.js.map"],"names":["createFlatTreeItems","flatTreeRootId","VisibleFlatTreeItemGenerator","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerId","Map","items","index","length","parentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push","size","getByIndex","value","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"mappings":"AAAA;;;CAGC;;;;;;;;;;;IAAkBA,mBAAmB,MAAnBA;IA+CNC,cAAc,MAAdA;IA6BIC,4BAA4B,MAA5BA;;AA5EP,SAASF,oBAAoBG,iBAAiB,EAAE;IACxD,MAAMC,OAAOC;IACb,MAAMC,aAAa,IAAIC,IAAI;QAAC;YAACN;YAAgBG;SAAK;KAAC;IACnD,MAAMI,QAAQ,EAAE;IAChB,IAAK,IAAIC,QAAQ,GAAGA,QAAQN,kBAAkBO,MAAM,EAAED,QAAS;QAC7D,MAAM,EACJE,UAAWV,eAAc,EACzB,GAAGW,eACJ,GAAGT,iBAAiB,CAACM,MAAM;QAC5B,MAAMI,gBAAgBV,iBAAiB,CAACM,QAAQ,EAAE;QAClD,MAAMK,gBAAgBR,WAAWS,GAAG,CAACJ;QACrC,IAAI,CAACG,eAAe;YAClB,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC,CAAC,kBAAkB,EAAEjB,iBAAiB,CAACM,MAAM,CAACY,EAAE,CAAC,4GAA4G,CAAC;YAC9K,CAAC;YACD,KAAM;QACR,CAAC;QACD,MAAMC,SAAS,AAACT,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcF,QAAQ,AAAD,MAAOC,cAAcS,EAAE;QAC1H,IAAIE;QACJ,MAAMC,eAAe,AAAC,CAAA,AAACD,CAAAA,uBAAuBT,cAAcW,KAAK,AAAD,MAAO,IAAI,IAAIF,yBAAyB,KAAK,IAAIA,uBAAuB,CAAC,AAAD,IAAK;QAC7I,MAAMG,sBAAsB,EAAEZ,cAAca,YAAY;QACxD,MAAMC,eAAe;YACnBP,IAAIT,cAAcS,EAAE;YACpBQ,kBAAkB,IAAO,CAAA;oBACvB,GAAGjB,aAAa;oBAChB,cAAcY;oBACd,iBAAiBE;oBACjB,gBAAgBZ,cAAca,YAAY;oBAC1CG,MAAMR;gBACR,CAAA;YACAG,OAAOD;YACPb;YACAgB,cAAc;YACdlB,OAAO,CAAC;QACV;QACAH,WAAWyB,GAAG,CAACH,aAAaP,EAAE,EAAEO;QAChCpB,MAAMwB,IAAI,CAACJ;IACb;IACA,OAAO;QACLxB;QACA6B,MAAMzB,MAAME,MAAM;QAClBwB,YAAYzB,CAAAA,QAASD,KAAK,CAACC,MAAM;QACjCM,KAAKM,CAAAA,KAAMf,WAAWS,GAAG,CAACM;QAC1BU,KAAK,CAACV,IAAIc,QAAU7B,WAAWyB,GAAG,CAACV,IAAIc;IACzC;AACF;AACO,MAAMlC,iBAAiB;AAC9B,SAASI,yBAAyB;IAChC,OAAO;QACLgB,IAAIpB;QACJ4B,kBAAkB,IAAM;YACtB,IAAIb,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO;gBACLC,IAAIpB;gBACJ,gBAAgB,CAAC;gBACjB,cAAc,CAAC;gBACf,iBAAiB,CAAC;gBAClB6B,MAAM,IAAI;YACZ;QACF;QACAH,cAAc;QACd,IAAIlB,SAAQ;YACV,IAAIO,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACAK,OAAO;IACT;AACF;AAEO,UAAUvB,6BAA6BkC,SAAS,EAAEC,aAAa,EAAE;IACtE,IAAK,IAAI5B,QAAQ,GAAG6B,eAAe,GAAG7B,QAAQ4B,cAAcJ,IAAI,EAAExB,QAAS;QACzE,MAAM8B,OAAOF,cAAcH,UAAU,CAACzB;QACtC,IAAI+B;QACJ,MAAMC,SAASF,KAAK5B,QAAQ,GAAG,AAAC6B,CAAAA,qBAAqBH,cAActB,GAAG,CAACwB,KAAK5B,QAAQ,CAAA,MAAO,IAAI,IAAI6B,uBAAuB,KAAK,IAAIA,qBAAqBH,cAAcjC,IAAI,GAAGiC,cAAcjC,IAAI;QAC/L,IAAIsC,cAAcH,MAAMH,WAAWC,gBAAgB;YACjDE,KAAK9B,KAAK,GAAG6B;YACb,MAAMC;QACR,OAAO;YACL9B,SAASgC,OAAOd,YAAY,GAAG,IAAIY,KAAKZ,YAAY;QACtD,CAAC;IACH;AACF;AACA,SAASe,cAAcH,IAAI,EAAEH,SAAS,EAAEC,aAAa,EAAE;IACrD,IAAIE,KAAKd,KAAK,KAAK,GAAG;QACpB,OAAO,IAAI;IACb,CAAC;IACD,MAAOc,KAAK5B,QAAQ,IAAI4B,KAAK5B,QAAQ,KAAK0B,cAAcjC,IAAI,CAACiB,EAAE,CAAE;QAC/D,IAAI,CAACe,UAAUO,GAAG,CAACJ,KAAK5B,QAAQ,GAAG;YACjC,OAAO,KAAK;QACd,CAAC;QACD,MAAM8B,SAASJ,cAActB,GAAG,CAACwB,KAAK5B,QAAQ;QAC9C,IAAI,CAAC8B,QAAQ;YACX,OAAO,KAAK;QACd,CAAC;QACDF,OAAOE;IACT;IACA,OAAO,IAAI;AACb,EACA,+CAA+C"}
+{"version":3,"sources":["../../lib/utils/createFlatTreeItems.js"],"sourcesContent":["import * as React from 'react';\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createFlatTreeItems(flatTreeItemProps) {\n  const root = createFlatTreeRootItem();\n  const itemsPerValue = new Map([[root.value, root]]);\n  const items = [];\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const {\n      parentValue = flatTreeRootId,\n      ...treeItemProps\n    } = flatTreeItemProps[index];\n    const nextItemProps = flatTreeItemProps[index + 1];\n    const currentParent = itemsPerValue.get(parentValue);\n    if (!currentParent) {\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);\n      }\n      break;\n    }\n    var _treeItemProps_itemType;\n    const itemType = (_treeItemProps_itemType = treeItemProps.itemType) !== null && _treeItemProps_itemType !== void 0 ? _treeItemProps_itemType : treeItemProps.value === undefined || (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentValue) !== treeItemProps.value ? 'leaf' : 'branch';\n    var _currentParent_level;\n    const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n    const ref = /*#__PURE__*/React.createRef();\n    const flatTreeItem = {\n      value: treeItemProps.value,\n      getTreeItemProps: () => ({\n        ...treeItemProps,\n        'aria-level': currentLevel,\n        'aria-posinset': currentChildrenSize,\n        'aria-setsize': currentParent.childrenSize,\n        itemType,\n        // a reference to every parent element is necessary to ensure navigation\n        ref: flatTreeItem.childrenSize > 0 ? ref : undefined\n      }),\n      ref,\n      level: currentLevel,\n      parentValue,\n      childrenSize: 0,\n      index: -1\n    };\n    itemsPerValue.set(flatTreeItem.value, flatTreeItem);\n    items.push(flatTreeItem);\n  }\n  const flatTreeItems = {\n    root,\n    size: items.length,\n    getByIndex: index => items[index],\n    get: key => itemsPerValue.get(key),\n    set: (key, value) => itemsPerValue.set(key, value)\n  };\n  return flatTreeItems;\n}\nexport const flatTreeRootId = '__fuiFlatTreeRoot';\nfunction createFlatTreeRootItem() {\n  return {\n    ref: {\n      current: null\n    },\n    value: flatTreeRootId,\n    parentValue: undefined,\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return {\n        value: flatTreeRootId,\n        'aria-setsize': -1,\n        'aria-level': -1,\n        'aria-posinset': -1,\n        itemType: 'branch'\n      };\n    },\n    childrenSize: 0,\n    get index() {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return -1;\n    },\n    level: 0\n  };\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {\n  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n    const item = flatTreeItems.getByIndex(index);\n    if (isItemVisible(item, openItems, flatTreeItems)) {\n      item.index = visibleIndex++;\n      yield item;\n    } else {\n      // Jump the amount of children the current item has, since those items will also be hidden\n      index += item.childrenSize;\n    }\n  }\n}\nfunction isItemVisible(item, openItems, flatTreeItems) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentValue && item.parentValue !== flatTreeItems.root.value) {\n    if (!openItems.has(item.parentValue)) {\n      return false;\n    }\n    const parent = flatTreeItems.get(item.parentValue);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n//# sourceMappingURL=createFlatTreeItems.js.map"],"names":["createFlatTreeItems","flatTreeRootId","VisibleFlatTreeItemGenerator","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerValue","Map","value","items","index","length","parentValue","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","_treeItemProps_itemType","itemType","undefined","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","ref","React","createRef","flatTreeItem","getTreeItemProps","set","push","flatTreeItems","size","getByIndex","key","current","openItems","visibleIndex","item","isItemVisible","has","parent"],"mappings":"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"}

package/lib-commonjs/utils/flattenTree.js

@@ -2,29 +2,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    flattenTree_unstable: ()=>flattenTree_unstable,
-    flattenTreeFromElement: ()=>flattenTreeFromElement
+Object.defineProperty(exports, "flattenTree_unstable", {
+    enumerable: true,
+    get: ()=>flattenTree_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 let count = 1;
 function flattenTreeRecursive(items, parent, level = 1) {
     return items.reduce((acc, { subtree , ...item }, index)=>{
         var _item_id;
+        const id = (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`;
+        var _item_value;
         const flatTreeItem = {
             'aria-level': level,
             'aria-posinset': index + 1,
             'aria-setsize': items.length,
-            parentId: parent === null || parent === void 0 ? void 0 : parent.id,
-            id: (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`,
-            leaf: subtree === undefined,
+            parentValue: parent === null || parent === void 0 ? void 0 : parent.value,
+            value: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : id,
             ...item
         };
         acc.push(flatTreeItem);
@@ -34,28 +27,6 @@ function flattenTreeRecursive(items, parent, level = 1) {
         return acc;
     }, []);
 }
-const flattenTree_unstable = (items)=>flattenTreeRecursive(items);
-const flattenTreeFromElement = (root, parent, level = 1)=>{
-    const children = _react.Children.toArray(root.props.children);
-    return children.reduce((acc, curr, index)=>{
-        const [content, subtree] = _react.Children.toArray(curr.props.children);
-        var _curr_props_id;
-        const flatTreeItem = {
-            'aria-level': level,
-            'aria-posinset': index + 1,
-            'aria-setsize': children.length,
-            parentId: parent === null || parent === void 0 ? void 0 : parent.id,
-            id: (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`,
-            leaf: subtree === undefined,
-            ...curr.props,
-            children: content
-        };
-        acc.push(flatTreeItem);
-        if (subtree !== undefined) {
-            acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));
-        }
-        return acc;
-    }, []);
-}; //# sourceMappingURL=flattenTree.js.map
+const flattenTree_unstable = (items)=>flattenTreeRecursive(items); //# sourceMappingURL=flattenTree.js.map
 
 //# sourceMappingURL=flattenTree.js.map

package/lib-commonjs/utils/flattenTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/utils/flattenTree.js"],"sourcesContent":["import * as React from 'react';\nlet count = 1;\nfunction flattenTreeRecursive(items, parent, level = 1) {\n  return items.reduce((acc, {\n    subtree,\n    ...item\n  }, index) => {\n    var _item_id;\n    const flatTreeItem = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': items.length,\n      parentId: parent === null || parent === void 0 ? void 0 : parent.id,\n      id: (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`,\n      leaf: subtree === undefined,\n      ...item\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n}\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n * @example\n * ```tsx\n * const defaultItems = flattenTree_unstable([\n *  {\n *    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,\n *      },\n *    ],\n *  },\n *  {\n *    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *        subtree: [\n *          {\n *            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,\n *            subtree: [\n *              {\n *                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,\n *              },\n *            ],\n *          },\n *        ],\n *      },\n *    ],\n *  },\n * ]);\n * ```\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = items => flattenTreeRecursive(items);\n/**\n * @internal\n */\nexport const flattenTreeFromElement = (root, parent, level = 1) => {\n  const children = React.Children.toArray(root.props.children);\n  return children.reduce((acc, curr, index) => {\n    const [content, subtree] = React.Children.toArray(curr.props.children);\n    var _curr_props_id;\n    const flatTreeItem = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': children.length,\n      parentId: parent === null || parent === void 0 ? void 0 : parent.id,\n      id: (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`,\n      leaf: subtree === undefined,\n      ...curr.props,\n      children: content\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeFromElement(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n};\n//# sourceMappingURL=flattenTree.js.map"],"names":["flattenTree_unstable","flattenTreeFromElement","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","flatTreeItem","length","parentId","id","leaf","undefined","push","root","children","React","Children","toArray","props","curr","content","_curr_props_id"],"mappings":";;;;;;;;;;;IAgEaA,oBAAoB,MAApBA;IAIAC,sBAAsB,MAAtBA;;;6DApEU;AACvB,IAAIC,QAAQ;AACZ,SAASC,qBAAqBC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,CAAC,EAAE;IACtD,OAAOF,MAAMG,MAAM,CAAC,CAACC,KAAK,EACxBC,QAAO,EACP,GAAGC,MACJ,EAAEC,QAAU;QACX,IAAIC;QACJ,MAAMC,eAAe;YACnB,cAAcP;YACd,iBAAiBK,QAAQ;YACzB,gBAAgBP,MAAMU,MAAM;YAC5BC,UAAUV,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOW,EAAE;YACnEA,IAAI,AAACJ,CAAAA,WAAWF,KAAKM,EAAE,AAAD,MAAO,IAAI,IAAIJ,aAAa,KAAK,IAAIA,WAAW,CAAC,iBAAiB,EAAEV,QAAQ,CAAC;YACnGe,MAAMR,YAAYS;YAClB,GAAGR,IAAI;QACT;QACAF,IAAIW,IAAI,CAACN;QACT,IAAIJ,YAAYS,WAAW;YACzBV,IAAIW,IAAI,IAAIhB,qBAAqBM,SAASI,cAAcP,QAAQ;QAClE,CAAC;QACD,OAAOE;IACT,GAAG,EAAE;AACP;AAyCO,MAAMR,uBAAuBI,CAAAA,QAASD,qBAAqBC;AAI3D,MAAMH,yBAAyB,CAACmB,MAAMf,QAAQC,QAAQ,CAAC,GAAK;IACjE,MAAMe,WAAWC,OAAMC,QAAQ,CAACC,OAAO,CAACJ,KAAKK,KAAK,CAACJ,QAAQ;IAC3D,OAAOA,SAASd,MAAM,CAAC,CAACC,KAAKkB,MAAMf,QAAU;QAC3C,MAAM,CAACgB,SAASlB,QAAQ,GAAGa,OAAMC,QAAQ,CAACC,OAAO,CAACE,KAAKD,KAAK,CAACJ,QAAQ;QACrE,IAAIO;QACJ,MAAMf,eAAe;YACnB,cAAcP;YACd,iBAAiBK,QAAQ;YACzB,gBAAgBU,SAASP,MAAM;YAC/BC,UAAUV,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOW,EAAE;YACnEA,IAAI,AAACY,CAAAA,iBAAiBF,KAAKD,KAAK,CAACT,EAAE,AAAD,MAAO,IAAI,IAAIY,mBAAmB,KAAK,IAAIA,iBAAiB,CAAC,iBAAiB,EAAE1B,QAAQ,CAAC;YAC3He,MAAMR,YAAYS;YAClB,GAAGQ,KAAKD,KAAK;YACbJ,UAAUM;QACZ;QACAnB,IAAIW,IAAI,CAACN;QACT,IAAIJ,YAAYS,WAAW;YACzBV,IAAIW,IAAI,IAAIlB,uBAAuBQ,SAASI,cAAcP,QAAQ;QACpE,CAAC;QACD,OAAOE;IACT,GAAG,EAAE;AACP,GACA,uCAAuC"}
+{"version":3,"sources":["../../lib/utils/flattenTree.js"],"sourcesContent":["let count = 1;\nfunction flattenTreeRecursive(items, parent, level = 1) {\n  return items.reduce((acc, {\n    subtree,\n    ...item\n  }, index) => {\n    var _item_id;\n    const id = (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `fui-FlatTreeItem-${count++}`;\n    var _item_value;\n    const flatTreeItem = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': items.length,\n      parentValue: parent === null || parent === void 0 ? void 0 : parent.value,\n      value: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : id,\n      ...item\n    };\n    acc.push(flatTreeItem);\n    if (subtree !== undefined) {\n      acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1));\n    }\n    return acc;\n  }, []);\n}\n/**\n * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`\n * @example\n * ```tsx\n * const defaultItems = flattenTree_unstable([\n *  {\n *    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,\n *      },\n *      {\n *        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,\n *      },\n *    ],\n *  },\n *  {\n *    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,\n *    subtree: [\n *      {\n *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,\n *        subtree: [\n *          {\n *            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,\n *            subtree: [\n *              {\n *                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,\n *              },\n *            ],\n *          },\n *        ],\n *      },\n *    ],\n *  },\n * ]);\n * ```\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = items => flattenTreeRecursive(items);\n//# sourceMappingURL=flattenTree.js.map"],"names":["flattenTree_unstable","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","id","_item_value","flatTreeItem","length","parentValue","value","push","undefined"],"mappings":";;;;+BAgEaA;;aAAAA;;AAhEb,IAAIC,QAAQ;AACZ,SAASC,qBAAqBC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,CAAC,EAAE;IACtD,OAAOF,MAAMG,MAAM,CAAC,CAACC,KAAK,EACxBC,QAAO,EACP,GAAGC,MACJ,EAAEC,QAAU;QACX,IAAIC;QACJ,MAAMC,KAAK,AAACD,CAAAA,WAAWF,KAAKG,EAAE,AAAD,MAAO,IAAI,IAAID,aAAa,KAAK,IAAIA,WAAW,CAAC,iBAAiB,EAAEV,QAAQ,CAAC;QAC1G,IAAIY;QACJ,MAAMC,eAAe;YACnB,cAAcT;YACd,iBAAiBK,QAAQ;YACzB,gBAAgBP,MAAMY,MAAM;YAC5BC,aAAaZ,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOa,KAAK;YACzEA,OAAO,AAACJ,CAAAA,cAAcJ,KAAKQ,KAAK,AAAD,MAAO,IAAI,IAAIJ,gBAAgB,KAAK,IAAIA,cAAcD,EAAE;YACvF,GAAGH,IAAI;QACT;QACAF,IAAIW,IAAI,CAACJ;QACT,IAAIN,YAAYW,WAAW;YACzBZ,IAAIW,IAAI,IAAIhB,qBAAqBM,SAASM,cAAcT,QAAQ;QAClE,CAAC;QACD,OAAOE;IACT,GAAG,EAAE;AACP;AAyCO,MAAMP,uBAAuBG,CAAAA,QAASD,qBAAqBC,QAClE,uCAAuC"}

package/lib-commonjs/utils/tokens.js

@@ -20,16 +20,16 @@ const treeAvatarSize = {
     small: 24
 };
 const treeDataTypes = {
-    arrowLeft: _keyboardKeys.ArrowLeft,
-    arrowRight: _keyboardKeys.ArrowRight,
-    enter: 'Enter',
-    click: 'Click',
-    expandIconClick: 'ExpandIconClick',
-    end: _keyboardKeys.End,
-    home: _keyboardKeys.Home,
-    arrowUp: _keyboardKeys.ArrowUp,
-    arrowDown: _keyboardKeys.ArrowDown,
-    typeAhead: 'TypeAhead'
+    ArrowLeft: _keyboardKeys.ArrowLeft,
+    ArrowRight: _keyboardKeys.ArrowRight,
+    Enter: _keyboardKeys.Enter,
+    Click: 'Click',
+    ExpandIconClick: 'ExpandIconClick',
+    End: _keyboardKeys.End,
+    Home: _keyboardKeys.Home,
+    ArrowUp: _keyboardKeys.ArrowUp,
+    ArrowDown: _keyboardKeys.ArrowDown,
+    TypeAhead: 'TypeAhead'
 }; //# sourceMappingURL=tokens.js.map
 
 //# sourceMappingURL=tokens.js.map

package/lib-commonjs/utils/tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/utils/tokens.js"],"sourcesContent":["import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home } from '@fluentui/keyboard-keys';\nexport const treeItemLevelToken = '--fluent-TreeItem--level';\nexport const treeAvatarSize = {\n  medium: 32,\n  small: 24\n};\nexport const treeDataTypes = {\n  arrowLeft: ArrowLeft,\n  arrowRight: ArrowRight,\n  enter: 'Enter',\n  click: 'Click',\n  expandIconClick: 'ExpandIconClick',\n  end: End,\n  home: Home,\n  arrowUp: ArrowUp,\n  arrowDown: ArrowDown,\n  typeAhead: 'TypeAhead'\n};\n//# sourceMappingURL=tokens.js.map"],"names":["treeItemLevelToken","treeAvatarSize","treeDataTypes","medium","small","arrowLeft","ArrowLeft","arrowRight","ArrowRight","enter","click","expandIconClick","end","End","home","Home","arrowUp","ArrowUp","arrowDown","ArrowDown","typeAhead"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;IACAC,cAAc,MAAdA;IAIAC,aAAa,MAAbA;;8BANwD;AAC9D,MAAMF,qBAAqB;AAC3B,MAAMC,iBAAiB;IAC5BE,QAAQ;IACRC,OAAO;AACT;AACO,MAAMF,gBAAgB;IAC3BG,WAAWC,uBAAS;IACpBC,YAAYC,wBAAU;IACtBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,KAAKC,iBAAG;IACRC,MAAMC,kBAAI;IACVC,SAASC,qBAAO;IAChBC,WAAWC,uBAAS;IACpBC,WAAW;AACb,GACA,kCAAkC"}
+{"version":3,"sources":["../../lib/utils/tokens.js"],"sourcesContent":["import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home, Enter } from '@fluentui/keyboard-keys';\nexport const treeItemLevelToken = '--fluent-TreeItem--level';\nexport const treeAvatarSize = {\n  medium: 32,\n  small: 24\n};\nexport const treeDataTypes = {\n  ArrowLeft,\n  ArrowRight,\n  Enter,\n  Click: 'Click',\n  ExpandIconClick: 'ExpandIconClick',\n  End,\n  Home,\n  ArrowUp,\n  ArrowDown,\n  TypeAhead: 'TypeAhead'\n};\n//# sourceMappingURL=tokens.js.map"],"names":["treeItemLevelToken","treeAvatarSize","treeDataTypes","medium","small","ArrowLeft","ArrowRight","Enter","Click","ExpandIconClick","End","Home","ArrowUp","ArrowDown","TypeAhead"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;IACAC,cAAc,MAAdA;IAIAC,aAAa,MAAbA;;8BAN+D;AACrE,MAAMF,qBAAqB;AAC3B,MAAMC,iBAAiB;IAC5BE,QAAQ;IACRC,OAAO;AACT;AACO,MAAMF,gBAAgB;IAC3BG,WAAAA,uBAAS;IACTC,YAAAA,wBAAU;IACVC,OAAAA,mBAAK;IACLC,OAAO;IACPC,iBAAiB;IACjBC,KAAAA,iBAAG;IACHC,MAAAA,kBAAI;IACJC,SAAAA,qBAAO;IACPC,WAAAA,uBAAS;IACTC,WAAW;AACb,GACA,kCAAkC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.0.0-beta.11",
+  "version": "9.0.0-beta.13",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -23,30 +23,31 @@
     "generate-api": "just-scripts generate-api",
     "type-check": "tsc -b tsconfig.json",
     "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "start": "yarn storybook",
+    "test-ssr": "test-ssr ./stories/**/*.stories.tsx"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.21",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-cypress": "*",
     "react-window": "^1.8.6"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "^9.0.2",
-    "@fluentui/react-aria": "^9.3.18",
-    "@fluentui/react-avatar": "^9.4.9",
-    "@fluentui/react-button": "^9.3.9",
-    "@fluentui/react-context-selector": "^9.1.18",
+    "@fluentui/keyboard-keys": "^9.0.3",
+    "@fluentui/react-aria": "^9.3.19",
+    "@fluentui/react-avatar": "^9.5.0",
+    "@fluentui/react-button": "^9.3.11",
+    "@fluentui/react-context-selector": "^9.1.19",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-portal": "^9.2.6",
-    "@fluentui/react-shared-contexts": "^9.3.3",
-    "@fluentui/react-tabster": "^9.6.5",
-    "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-utilities": "^9.8.0",
-    "@fluentui/react-jsx-runtime": "^9.0.0-alpha.1",
+    "@fluentui/react-portal": "^9.2.7",
+    "@fluentui/react-shared-contexts": "^9.4.0",
+    "@fluentui/react-tabster": "^9.7.0",
+    "@fluentui/react-theme": "^9.1.8",
+    "@fluentui/react-utilities": "^9.8.1",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.3",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}

package/lib/components/Tree/useTreeStyles.js

@@ -1,20 +0,0 @@
-import { __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-export const treeClassNames = {
-  root: 'fui-Tree'
-};
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    Belr9w4: "f1j0q4x9"
-  }
-}, {
-  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 useTreeStyles_unstable = state => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(treeClassNames.root, styles.root, state.root.className);
-  return state;
-};
-//# sourceMappingURL=useTreeStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","d","useTreeStyles_unstable","state","styles","className"],"sources":["../../../src/components/Tree/useTreeStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<TreeSlots> = {\n  root: 'fui-Tree',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAGzC,SAASC,MAAM,QAAQ;AAEvB,OAAO,MAAMC,cAAA,GAA4C;EACvDC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAMlB;AAEA,OAAO,MAAMC,sBAAA,GAA0BC,KAAA,IAAgC;EACrE,MAAMC,MAAA,GAASP,SAAA;EACfM,KAAA,CAAMP,IAAI,CAACS,SAAS,GAAGZ,YAAA,CAAaE,cAAA,CAAeC,IAAI,EAAEQ,MAAA,CAAOR,IAAI,EAAEO,KAAA,CAAMP,IAAI,CAACS,SAAS;EAE1F,OAAOF,KAAA;AACT"}

package/lib/components/TreeItem/useTreeItemStyles.js

@@ -1,203 +0,0 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { useTreeContext_unstable } from '../../contexts/index';
-import { treeItemLevelToken } from '../../utils/tokens';
-export const treeItemClassNames = {
-  root: 'fui-TreeItem',
-  content: 'fui-TreeItem__content',
-  subtree: 'fui-TreeItem__subtree',
-  expandIcon: 'fui-TreeItem__expandIcon',
-  actions: 'fui-TreeItem__actions'
-};
-const useRootStyles = /*#__PURE__*/__styles({
-  level1: {
-    iytv0q: "f10bgyvd"
-  },
-  level2: {
-    iytv0q: "f1h0rod3"
-  },
-  level3: {
-    iytv0q: "fgoqafk"
-  },
-  level4: {
-    iytv0q: "f75dvuh"
-  },
-  level5: {
-    iytv0q: "fqk7yw6"
-  },
-  level6: {
-    iytv0q: "f1r3z17b"
-  },
-  level7: {
-    iytv0q: "f1hrpd1h"
-  },
-  level8: {
-    iytv0q: "f1iy65d0"
-  },
-  level9: {
-    iytv0q: "ftg42e5"
-  },
-  level10: {
-    iytv0q: "fyat3t"
-  }
-}, {
-  d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
-});
-/**
- * Styles for the content slot
- */
-const useContentStyles = /*#__PURE__*/__styles({
-  base: {
-    qhf8xq: "f10pi13n",
-    Bceei9c: "f1k6fduh",
-    mc9l5x: "f22iagw",
-    De3pzq: "fhovq9v",
-    sj55zd: "fkfq4zb",
-    z189sj: ["flk2ux3", "fkl3uby"],
-    uwmqm3: ["fo100m9", "f6yw3pu"],
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
-    lj723h: "flvvhsy",
-    ecr2s2: "f1wfn5kd",
-    Ixpawx: "f1x3s29",
-    Bi91k9c: "fnwyq0v",
-    Jwef8y: "f1t94bn6",
-    B0t702g: "f1kvtbpn"
-  },
-  focusIndicator: {
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
-    B8q5s1w: "f8hki3x",
-    Bci5o5g: ["f1d2448m", "ffh67wi"],
-    n8qw10: "f1bjia2o",
-    Bdrgwmp: ["ffh67wi", "f1d2448m"],
-    Bm4h7ae: "f15bsgw9",
-    B7ys5i9: "f14e48fq",
-    Busjfv9: "f18yb2kv",
-    Bhk32uz: "fd6o370",
-    Bf4ptjt: "fh1cnn4",
-    kclons: ["fy7oxxb", "f184ne2d"],
-    Bhdgwq3: "fpukqih",
-    Blkhhs4: ["f184ne2d", "fy7oxxb"],
-    Bqtpl0w: "frrh606",
-    clg4pj: ["f1v5zibi", "fo2hd23"],
-    hgwjuy: "ful5kiu",
-    Bonggc9: ["fo2hd23", "f1v5zibi"],
-    B1tsrr9: ["f1jqcqds", "ftffrms"],
-    Dah5zi: ["ftffrms", "f1jqcqds"],
-    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
-    qqdqy8: ["fsr1zz6", "f2e7qr6"],
-    B6dhp37: "f1dvezut",
-    i03rao: ["fd0oaoj", "f1cwg4i8"],
-    Boxcth7: "fjvm52t",
-    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
-    J0r882: "fdiulkx",
-    Bjwuhne: "f1yalx80",
-    Ghsupd: ["fq22d5a", "f1jw7pan"],
-    Bule8hv: ["f1jw7pan", "fq22d5a"]
-  },
-  subtle: {},
-  "subtle-alpha": {
-    Jwef8y: "f146ro5n",
-    ecr2s2: "fkam630"
-  },
-  transparent: {
-    De3pzq: "f1c21dwh",
-    Jwef8y: "fjxutwb",
-    ecr2s2: "fophhak"
-  },
-  leaf: {
-    uwmqm3: ["f1k1erfc", "faevyjx"]
-  }
-}, {
-  d: [".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}"],
-  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1x3s29:active .fui-TreeItem__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
-  h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1kvtbpn:hover .fui-TreeItem__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
-  f: [".ftqa4ok:focus{outline-style:none;}"],
-  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
-});
-/**
- * Styles for the expand icon slot
- */
-const useExpandIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    Bf4jedk: "f17fgpbq",
-    B7ck84d: "f1ewtqcl",
-    sj55zd: "f11d4kpn",
-    z8tnut: "f1ywm7hm",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f14wxoun",
-    uwmqm3: ["f1cnd47f", "fhxju0i"]
-  }
-}, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
-});
-/**
- * Styles for the action icon slot
- */
-const useActionsStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "fjseox",
-    Frg6f3: ["fcgxt0o", "f1ujusj6"],
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
-  },
-  open: {
-    mc9l5x: "f22iagw",
-    qhf8xq: "f10pi13n"
-  }
-}, {
-  d: [".fjseox{display:none;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}"]
-});
-export const expandIconInlineStyles = {
-  90: {
-    transform: `rotate(90deg)`
-  },
-  0: {
-    transform: `rotate(0deg)`
-  },
-  180: {
-    transform: `rotate(180deg)`
-  }
-};
-/**
- * Apply styling to the TreeItem slots based on the state
- */
-export const useTreeItemStyles_unstable = state => {
-  const rootStyles = useRootStyles();
-  const contentStyles = useContentStyles();
-  const expandIconStyles = useExpandIconStyles();
-  const actionsStyles = useActionsStyles();
-  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
-  const {
-    actions,
-    subtree,
-    expandIcon,
-    isActionsVisible: showActions,
-    level
-  } = state;
-  state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], state.root.className);
-  state.content.className = mergeClasses(treeItemClassNames.content, contentStyles.base, contentStyles[appearance], contentStyles.focusIndicator, state.isLeaf && contentStyles.leaf, state.content.className);
-  if (expandIcon) {
-    expandIcon.className = mergeClasses(treeItemClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
-  }
-  if (actions) {
-    actions.className = mergeClasses(treeItemClassNames.actions, actionsStyles.base, showActions && actionsStyles.open, actions.className);
-  }
-  if (subtree) {
-    subtree.className = mergeClasses(treeItemClassNames.subtree, subtree.className);
-  }
-  return state;
-};
-function isStaticallyDefinedLevel(level) {
-  return level >= 1 && level <= 10;
-}
-//# sourceMappingURL=useTreeItemStyles.js.map