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

package/lib/utils/createFlatTreeItems.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFlatTreeItems","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerId","Map","flatTreeRootId","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","VisibleFlatTreeItemGenerator","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"sources":["../../src/utils/createFlatTreeItems.ts"],"sourcesContent":["import type { TreeItemId } from '../TreeItem';\nimport type { ImmutableSet } from './ImmutableSet';\nimport type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type FlatTreeItems = {\n  size: number;\n  root: FlatTreeItem;\n  get(id: string): FlatTreeItem | undefined;\n  set(id: string, value: FlatTreeItem): void;\n  getByIndex(index: number): FlatTreeItem;\n};\n\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: FlatTreeItemProps[]): FlatTreeItems {\n  const root = createFlatTreeRootItem();\n  const itemsPerId = new Map<string, MutableFlatTreeItem>([[flatTreeRootId, root]]);\n  const items: MutableFlatTreeItem[] = [];\n\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const { parentId = flatTreeRootId, ...treeItemProps } = flatTreeItemProps[index];\n\n    const nextItemProps: FlatTreeItemProps | undefined = 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(\n          `useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,\n        );\n      }\n      break;\n    }\n    const isLeaf = nextItemProps?.parentId !== treeItemProps.id;\n    const currentLevel = (currentParent.level ?? 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n\n    const flatTreeItem: 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\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}\n\nexport const flatTreeRootId = '__fuiFlatTreeRoot';\n\nfunction createFlatTreeRootItem(): FlatTreeItem {\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 { id: flatTreeRootId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\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\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator(openItems: ImmutableSet<TreeItemId>, flatTreeItems: FlatTreeItems) {\n  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n    const item: MutableFlatTreeItem = flatTreeItems.getByIndex(index);\n    const parent = item.parentId ? flatTreeItems.get(item.parentId) ?? 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}\n\nfunction isItemVisible(item: FlatTreeItem, openItems: ImmutableSet<TreeItemId>, flatTreeItems: 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"],"mappings":"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"}
+{"version":3,"names":["React","createFlatTreeItems","flatTreeItemProps","root","createFlatTreeRootItem","itemsPerValue","Map","flatTreeRootId","items","index","length","parentValue","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","id","isLeaf","value","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","ref","createRef","flatTreeItem","getTreeItemProps","leaf","undefined","set","push","size","getByIndex","current","VisibleFlatTreeItemGenerator","openItems","flatTreeItems","visibleIndex","item","_flatTreeItems_get","parent","isItemVisible","has"],"sources":["../../src/utils/createFlatTreeItems.ts"],"sourcesContent":["import type { ImmutableSet } from './ImmutableSet';\nimport type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree';\nimport * as React from 'react';\n\n/**\n * @internal\n */\nexport type FlatTreeItems<Value = string> = {\n  size: number;\n  root: FlatTreeItem<Value>;\n  get(key: Value): FlatTreeItem<Value> | undefined;\n  set(key: Value, value: FlatTreeItem<Value>): void;\n  getByIndex(index: number): FlatTreeItem<Value>;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createFlatTreeItems<Value = string>(\n  flatTreeItemProps: FlatTreeItemProps<Value>[],\n): FlatTreeItems<Value> {\n  const root = createFlatTreeRootItem<Value>();\n  const itemsPerValue = new Map<Value, MutableFlatTreeItem<Value>>([[flatTreeRootId as Value, root]]);\n  const items: MutableFlatTreeItem<Value>[] = [];\n\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const { parentValue = flatTreeRootId as Value, ...treeItemProps } = flatTreeItemProps[index];\n\n    const nextItemProps: FlatTreeItemProps<Value> | undefined = 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(\n          `useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`,\n        );\n      }\n      break;\n    }\n    const isLeaf = nextItemProps?.parentValue !== treeItemProps.value;\n    const currentLevel = (currentParent.level ?? 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n    const ref = React.createRef<HTMLDivElement>();\n\n    const flatTreeItem: MutableFlatTreeItem<Value> = {\n      value: treeItemProps.value,\n      getTreeItemProps: () => ({\n        ...treeItemProps,\n        'aria-level': currentLevel,\n        'aria-posinset': currentChildrenSize,\n        'aria-setsize': currentParent.childrenSize,\n        leaf: isLeaf,\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\n  return {\n    root,\n    size: items.length,\n    getByIndex: index => items[index],\n    get: id => itemsPerValue.get(id),\n    set: (id, value) => itemsPerValue.set(id, value),\n  };\n}\n\nexport const flatTreeRootId = '__fuiFlatTreeRoot' as unknown;\n\nfunction createFlatTreeRootItem<Value = string>(): FlatTreeItem<Value> {\n  return {\n    ref: { current: null },\n    value: flatTreeRootId as Value,\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 { value: flatTreeRootId as Value, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\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\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function* VisibleFlatTreeItemGenerator<Value = string>(\n  openItems: ImmutableSet<Value>,\n  flatTreeItems: FlatTreeItems<Value>,\n) {\n  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {\n    const item: MutableFlatTreeItem<Value> = flatTreeItems.getByIndex(index);\n    const parent = item.parentValue ? flatTreeItems.get(item.parentValue) ?? 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}\n\nfunction isItemVisible<Value>(\n  item: FlatTreeItem<Value>,\n  openItems: ImmutableSet<Value>,\n  flatTreeItems: FlatTreeItems<Value>,\n) {\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"],"mappings":"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"}

package/lib/utils/flattenTree.js

@@ -6,12 +6,14 @@ function flattenTreeRecursive(items, parent, level = 1) {
     ...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++}`,
+      parentValue: parent === null || parent === void 0 ? void 0 : parent.value,
+      value: (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : id,
       leaf: subtree === undefined,
       ...item
     };
@@ -71,12 +73,14 @@ export const flattenTreeFromElement = (root, parent, level = 1) => {
   return children.reduce((acc, curr, index) => {
     const [content, subtree] = React.Children.toArray(curr.props.children);
     var _curr_props_id;
+    const id = (_curr_props_id = curr.props.id) !== null && _curr_props_id !== void 0 ? _curr_props_id : `fui-FlatTreeItem-${count++}`;
+    var _curr_props_value;
     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++}`,
+      parentValue: parent === null || parent === void 0 ? void 0 : parent.value,
+      value: (_curr_props_value = curr.props.value) !== null && _curr_props_value !== void 0 ? _curr_props_value : id,
       leaf: subtree === undefined,
       ...curr.props,
       children: content

package/lib/utils/flattenTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","flatTreeItem","length","parentId","id","leaf","undefined","push","flattenTree_unstable","flattenTreeFromElement","root","children","Children","toArray","props","curr","content","_curr_props_id"],"sources":["../../src/utils/flattenTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { FlatTreeItemProps } from '../hooks/useFlatTree';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {\n  subtree?: NestedTreeItem[];\n};\n\nlet count = 1;\nfunction flattenTreeRecursive(items: NestedTreeItem[], parent?: FlatTreeItemProps, level = 1): FlatTreeItemProps[] {\n  return items.reduce<FlatTreeItemProps[]>((acc, { subtree, ...item }, index) => {\n    const flatTreeItem: FlatTreeItemProps = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': items.length,\n      parentId: parent?.id,\n      id: 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/**\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 */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = (items: NestedTreeItem[]): FlatTreeItemProps[] => flattenTreeRecursive(items);\n\n/**\n * @internal\n */\nexport const flattenTreeFromElement = (\n  root: React.ReactElement<{\n    children?: React.ReactElement<TreeItemProps> | React.ReactElement<TreeItemProps>[];\n  }>,\n  parent?: FlatTreeItemProps,\n  level = 1,\n): FlatTreeItemProps[] => {\n  const children = React.Children.toArray(root.props.children) as React.ReactElement<TreeItemProps>[];\n  return children.reduce<FlatTreeItemProps[]>((acc, curr, index) => {\n    const [content, subtree] = React.Children.toArray(curr.props.children) as [\n      React.ReactNode,\n      typeof root | undefined,\n    ];\n    const flatTreeItem: FlatTreeItemProps = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': children.length,\n      parentId: parent?.id,\n      id: 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAQvB,IAAIC,KAAA,GAAQ;AACZ,SAASC,qBAAqBC,KAAuB,EAAEC,MAA0B,EAAEC,KAAA,GAAQ,CAAC,EAAuB;EACjH,OAAOF,KAAA,CAAMG,MAAM,CAAsB,CAACC,GAAA,EAAK;IAAEC,OAAA;IAAS,GAAGC;EAAA,CAAM,EAAEC,KAAA,KAAU;QAMvEC,QAAA;IALN,MAAMC,YAAA,GAAkC;MACtC,cAAcP,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBP,KAAA,CAAMU,MAAM;MAC5BC,QAAA,EAAUV,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQW,EAAE;MACpBA,EAAA,EAAI,CAAAJ,QAAA,GAAAF,IAAA,CAAKM,EAAE,cAAPJ,QAAA,cAAAA,QAAA,GAAY,oBAAmBV,KAAA,EAAQ,EAAC;MAC5Ce,IAAA,EAAMR,OAAA,KAAYS,SAAA;MAClB,GAAGR;IACL;IACAF,GAAA,CAAIW,IAAI,CAACN,YAAA;IACT,IAAIJ,OAAA,KAAYS,SAAA,EAAW;MACzBV,GAAA,CAAIW,IAAI,IAAIhB,oBAAA,CAAqBM,OAAA,EAASI,YAAA,EAAcP,KAAA,GAAQ;IAClE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA,CAwCA;AACA,OAAO,MAAMY,oBAAA,GAAwBhB,KAAA,IAAiDD,oBAAA,CAAqBC,KAAA;AAE3G;;;AAGA,OAAO,MAAMiB,sBAAA,GAAyBA,CACpCC,IAAA,EAGAjB,MAAA,EACAC,KAAA,GAAQ,CAAC,KACe;EACxB,MAAMiB,QAAA,GAAWtB,KAAA,CAAMuB,QAAQ,CAACC,OAAO,CAACH,IAAA,CAAKI,KAAK,CAACH,QAAQ;EAC3D,OAAOA,QAAA,CAAShB,MAAM,CAAsB,CAACC,GAAA,EAAKmB,IAAA,EAAMhB,KAAA,KAAU;IAChE,MAAM,CAACiB,OAAA,EAASnB,OAAA,CAAQ,GAAGR,KAAA,CAAMuB,QAAQ,CAACC,OAAO,CAACE,IAAA,CAAKD,KAAK,CAACH,QAAQ;QAS/DM,cAAA;IALN,MAAMhB,YAAA,GAAkC;MACtC,cAAcP,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBY,QAAA,CAAST,MAAM;MAC/BC,QAAA,EAAUV,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQW,EAAE;MACpBA,EAAA,EAAI,CAAAa,cAAA,GAAAF,IAAA,CAAKD,KAAK,CAACV,EAAE,cAAba,cAAA,cAAAA,cAAA,GAAkB,oBAAmB3B,KAAA,EAAQ,EAAC;MAClDe,IAAA,EAAMR,OAAA,KAAYS,SAAA;MAClB,GAAGS,IAAA,CAAKD,KAAK;MACbH,QAAA,EAAUK;IACZ;IACApB,GAAA,CAAIW,IAAI,CAACN,YAAA;IACT,IAAIJ,OAAA,KAAYS,SAAA,EAAW;MACzBV,GAAA,CAAIW,IAAI,IAAIE,sBAAA,CAAuBZ,OAAA,EAASI,YAAA,EAAcP,KAAA,GAAQ;IACpE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP"}
+{"version":3,"names":["React","count","flattenTreeRecursive","items","parent","level","reduce","acc","subtree","item","index","_item_id","id","_item_value","flatTreeItem","length","parentValue","value","leaf","undefined","push","flattenTree_unstable","flattenTreeFromElement","root","children","Children","toArray","props","curr","content","_curr_props_id","_curr_props_value"],"sources":["../../src/utils/flattenTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { FlatTreeItemProps } from '../hooks/useFlatTree';\nimport { TreeItemProps } from '../TreeItem';\n\nexport type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {\n  subtree?: NestedTreeItem<Value>[];\n};\n\nlet count = 1;\nfunction flattenTreeRecursive<Value = string>(\n  items: NestedTreeItem<Value>[],\n  parent?: FlatTreeItemProps<Value>,\n  level = 1,\n): FlatTreeItemProps<Value>[] {\n  return items.reduce<FlatTreeItemProps<Value>[]>((acc, { subtree, ...item }, index) => {\n    const id = item.id ?? `fui-FlatTreeItem-${count++}`;\n    const flatTreeItem: FlatTreeItemProps<Value> = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': items.length,\n      parentValue: parent?.value,\n      value: item.value ?? (id as unknown as Value),\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/**\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 */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const flattenTree_unstable = <Value = string>(items: NestedTreeItem<Value>[]): FlatTreeItemProps<Value>[] =>\n  flattenTreeRecursive(items);\n\n/**\n * @internal\n */\nexport const flattenTreeFromElement = <Value = string>(\n  root: React.ReactElement<{\n    children?: React.ReactElement<TreeItemProps<Value>> | React.ReactElement<TreeItemProps<Value>>[];\n  }>,\n  parent?: FlatTreeItemProps<Value>,\n  level = 1,\n): FlatTreeItemProps<Value>[] => {\n  const children = React.Children.toArray(root.props.children) as React.ReactElement<TreeItemProps<Value>>[];\n  return children.reduce<FlatTreeItemProps<Value>[]>((acc, curr, index) => {\n    const [content, subtree] = React.Children.toArray(curr.props.children) as [\n      React.ReactNode,\n      typeof root | undefined,\n    ];\n    const id = curr.props.id ?? `fui-FlatTreeItem-${count++}`;\n    const flatTreeItem: FlatTreeItemProps<Value> = {\n      'aria-level': level,\n      'aria-posinset': index + 1,\n      'aria-setsize': children.length,\n      parentValue: parent?.value,\n      value: curr.props.value ?? (id as unknown as Value),\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAQvB,IAAIC,KAAA,GAAQ;AACZ,SAASC,qBACPC,KAA8B,EAC9BC,MAAiC,EACjCC,KAAA,GAAQ,CAAC,EACmB;EAC5B,OAAOF,KAAA,CAAMG,MAAM,CAA6B,CAACC,GAAA,EAAK;IAAEC,OAAA;IAAS,GAAGC;EAAA,CAAM,EAAEC,KAAA,KAAU;QACzEC,QAAA;IAAX,MAAMC,EAAA,GAAK,CAAAD,QAAA,GAAAF,IAAA,CAAKG,EAAE,cAAPD,QAAA,cAAAA,QAAA,GAAY,oBAAmBV,KAAA,EAAQ,EAAC;QAM1CY,WAAA;IALT,MAAMC,YAAA,GAAyC;MAC7C,cAAcT,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBP,KAAA,CAAMY,MAAM;MAC5BC,WAAA,EAAaZ,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQa,KAAK;MAC1BA,KAAA,EAAO,CAAAJ,WAAA,GAAAJ,IAAA,CAAKQ,KAAK,cAAVJ,WAAA,cAAAA,WAAA,GAAeD,EAAuB;MAC7CM,IAAA,EAAMV,OAAA,KAAYW,SAAA;MAClB,GAAGV;IACL;IACAF,GAAA,CAAIa,IAAI,CAACN,YAAA;IACT,IAAIN,OAAA,KAAYW,SAAA,EAAW;MACzBZ,GAAA,CAAIa,IAAI,IAAIlB,oBAAA,CAAqBM,OAAA,EAASM,YAAA,EAAcT,KAAA,GAAQ;IAClE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA,CAwCA;AACA,OAAO,MAAMc,oBAAA,GAAwClB,KAAA,IACnDD,oBAAA,CAAqBC,KAAA;AAEvB;;;AAGA,OAAO,MAAMmB,sBAAA,GAAyBA,CACpCC,IAAA,EAGAnB,MAAA,EACAC,KAAA,GAAQ,CAAC,KACsB;EAC/B,MAAMmB,QAAA,GAAWxB,KAAA,CAAMyB,QAAQ,CAACC,OAAO,CAACH,IAAA,CAAKI,KAAK,CAACH,QAAQ;EAC3D,OAAOA,QAAA,CAASlB,MAAM,CAA6B,CAACC,GAAA,EAAKqB,IAAA,EAAMlB,KAAA,KAAU;IACvE,MAAM,CAACmB,OAAA,EAASrB,OAAA,CAAQ,GAAGR,KAAA,CAAMyB,QAAQ,CAACC,OAAO,CAACE,IAAA,CAAKD,KAAK,CAACH,QAAQ;QAI1DM,cAAA;IAAX,MAAMlB,EAAA,GAAK,CAAAkB,cAAA,GAAAF,IAAA,CAAKD,KAAK,CAACf,EAAE,cAAbkB,cAAA,cAAAA,cAAA,GAAkB,oBAAmB7B,KAAA,EAAQ,EAAC;QAMhD8B,iBAAA;IALT,MAAMjB,YAAA,GAAyC;MAC7C,cAAcT,KAAA;MACd,iBAAiBK,KAAA,GAAQ;MACzB,gBAAgBc,QAAA,CAAST,MAAM;MAC/BC,WAAA,EAAaZ,MAAA,aAAAA,MAAA,uBAAAA,MAAA,CAAQa,KAAK;MAC1BA,KAAA,EAAO,CAAAc,iBAAA,GAAAH,IAAA,CAAKD,KAAK,CAACV,KAAK,cAAhBc,iBAAA,cAAAA,iBAAA,GAAqBnB,EAAuB;MACnDM,IAAA,EAAMV,OAAA,KAAYW,SAAA;MAClB,GAAGS,IAAA,CAAKD,KAAK;MACbH,QAAA,EAAUK;IACZ;IACAtB,GAAA,CAAIa,IAAI,CAACN,YAAA;IACT,IAAIN,OAAA,KAAYW,SAAA,EAAW;MACzBZ,GAAA,CAAIa,IAAI,IAAIE,sBAAA,CAAuBd,OAAA,EAASM,YAAA,EAAcT,KAAA,GAAQ;IACpE;IACA,OAAOE,GAAA;EACT,GAAG,EAAE;AACP"}

package/lib-commonjs/components/TreeItem/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n//# sourceMappingURL=TreeItem.js.map"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;6BACc;gCACG;mCACG;0CACO;AAa3C,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,6CAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AACxC;AACAR,SAASW,WAAW,GAAG,YACvB,oCAAoC"}
+{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n//# sourceMappingURL=TreeItem.js.map"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;6BACc;gCACG;mCACG;0CACO;AAa3C,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,6CAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AACxC;AACAR,SAASW,WAAW,GAAG,YACvB,oCAAoC"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -16,15 +16,15 @@ const _keyboardKeys = require("@fluentui/keyboard-keys");
 const _reactPortal = require("@fluentui/react-portal");
 const _index = require("../../contexts/index");
 const _tokens = require("../../utils/tokens");
-const useTreeItem_unstable = (props, ref)=>{
+function useTreeItem_unstable(props, ref) {
     const [children, subtreeChildren] = _react.Children.toArray(props.children);
     const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
-    const { content , subtree , expandIcon , leaf: isLeaf = subtreeChildren === undefined , actions , as ='div' , onClick , onKeyDown , ['aria-level']: level = contextLevel , ...rest } = props;
+    const id = (0, _reactUtilities.useId)('fui-TreeItem-', props.id);
+    const { content , subtree , expandIcon , leaf: isLeaf = subtreeChildren === undefined , actions , as ='div' , onClick , onKeyDown , ['aria-level']: level = contextLevel , value =id , ...rest } = props;
     const requestOpenChange = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestOpenChange);
     const requestNavigation = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestNavigation);
-    const id = (0, _reactUtilities.useId)('fui-TreeItem-', props.id);
     const isBranch = !isLeaf;
-    const open = (0, _index.useTreeContext_unstable)((ctx)=>isBranch && ctx.openItems.has(id));
+    const open = (0, _index.useTreeContext_unstable)((ctx)=>isBranch && ctx.openItems.has(value));
     const { dir , targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
     const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
     const actionsRef = _react.useRef(null);
@@ -34,6 +34,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (!open && isBranch) {
             return requestOpenChange({
                 event,
+                value,
                 open: true,
                 type: _tokens.treeDataTypes.arrowRight,
                 target: event.currentTarget
@@ -42,6 +43,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (open && isBranch) {
             return requestNavigation({
                 event,
+                value,
                 type: _tokens.treeDataTypes.arrowRight,
                 target: event.currentTarget
             });
@@ -51,6 +53,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (open && isBranch) {
             return requestOpenChange({
                 event,
+                value,
                 open: false,
                 type: _tokens.treeDataTypes.arrowLeft,
                 target: event.currentTarget
@@ -59,6 +62,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (!open && level > 1) {
             return requestNavigation({
                 event,
+                value,
                 target: event.currentTarget,
                 type: _tokens.treeDataTypes.arrowLeft
             });
@@ -67,6 +71,7 @@ const useTreeItem_unstable = (props, ref)=>{
     const handleEnter = (event)=>{
         requestOpenChange({
             event,
+            value,
             open: isLeaf ? open : !open,
             type: _tokens.treeDataTypes.enter,
             target: event.currentTarget
@@ -85,12 +90,14 @@ const useTreeItem_unstable = (props, ref)=>{
         const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
         requestOpenChange({
             event,
+            value,
             open: isLeaf ? open : !open,
             type: isFromExpandIcon ? _tokens.treeDataTypes.expandIconClick : _tokens.treeDataTypes.click,
             target: event.currentTarget
         });
         requestNavigation({
             event,
+            value,
             target: event.currentTarget,
             type: _tokens.treeDataTypes.click
         });
@@ -113,24 +120,28 @@ const useTreeItem_unstable = (props, ref)=>{
             case _keyboardKeys.End:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.end,
                     target: event.currentTarget
                 });
             case _keyboardKeys.Home:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.home,
                     target: event.currentTarget
                 });
             case _keyboardKeys.ArrowUp:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.arrowUp,
                     target: event.currentTarget
                 });
             case _keyboardKeys.ArrowDown:
                 return requestNavigation({
                     event,
+                    value,
                     type: _tokens.treeDataTypes.arrowDown,
                     target: event.currentTarget
                 });
@@ -139,6 +150,7 @@ const useTreeItem_unstable = (props, ref)=>{
         if (isTypeAheadCharacter) {
             return requestNavigation({
                 event,
+                value,
                 target: event.currentTarget,
                 type: _tokens.treeDataTypes.typeAhead
             });
@@ -232,6 +244,6 @@ const useTreeItem_unstable = (props, ref)=>{
             }
         })
     };
-}; //# sourceMappingURL=useTreeItem.js.map
+} //# sourceMappingURL=useTreeItem.js.map
 
 //# sourceMappingURL=useTreeItem.js.map

package/lib-commonjs/components/TreeItem/useTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItem/useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport const useTreeItem_unstable = (props, ref) => {\n  const [children, subtreeChildren] = React.Children.toArray(props.children);\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n  const {\n    content,\n    subtree,\n    expandIcon,\n    leaf: isLeaf = subtreeChildren === undefined,\n    actions,\n    as = 'div',\n    onClick,\n    onKeyDown,\n    ['aria-level']: level = contextLevel,\n    ...rest\n  } = props;\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n  const id = useId('fui-TreeItem-', props.id);\n  const isBranch = !isLeaf;\n  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));\n  const {\n    dir,\n    targetDocument\n  } = useFluent_unstable();\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  const actionsRef = React.useRef(null);\n  const expandIconRef = React.useRef(null);\n  const subtreeRef = React.useRef(null);\n  const handleArrowRight = event => {\n    if (!open && isBranch) {\n      return requestOpenChange({\n        event,\n        open: true,\n        type: treeDataTypes.arrowRight,\n        target: event.currentTarget\n      });\n    }\n    if (open && isBranch) {\n      return requestNavigation({\n        event,\n        type: treeDataTypes.arrowRight,\n        target: event.currentTarget\n      });\n    }\n  };\n  const handleArrowLeft = event => {\n    if (open && isBranch) {\n      return requestOpenChange({\n        event,\n        open: false,\n        type: treeDataTypes.arrowLeft,\n        target: event.currentTarget\n      });\n    }\n    if (!open && level > 1) {\n      return requestNavigation({\n        event,\n        target: event.currentTarget,\n        type: treeDataTypes.arrowLeft\n      });\n    }\n  };\n  const handleEnter = event => {\n    requestOpenChange({\n      event,\n      open: isLeaf ? open : !open,\n      type: treeDataTypes.enter,\n      target: event.currentTarget\n    });\n  };\n  const handleClick = useEventCallback(event => {\n    onClick === null || onClick === void 0 ? void 0 : onClick(event);\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n    requestOpenChange({\n      event,\n      open: isLeaf ? open : !open,\n      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n      target: event.currentTarget\n    });\n    requestNavigation({\n      event,\n      target: event.currentTarget,\n      type: treeDataTypes.click\n    });\n  });\n  const handleKeyDown = useEventCallback(event => {\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n    if (event.currentTarget !== event.target) {\n      return;\n    }\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    switch (event.key) {\n      case Enter:\n        return handleEnter(event);\n      case ArrowRight:\n        return handleArrowRight(event);\n      case ArrowLeft:\n        return handleArrowLeft(event);\n      case End:\n        return requestNavigation({\n          event,\n          type: treeDataTypes.end,\n          target: event.currentTarget\n        });\n      case Home:\n        return requestNavigation({\n          event,\n          type: treeDataTypes.home,\n          target: event.currentTarget\n        });\n      case ArrowUp:\n        return requestNavigation({\n          event,\n          type: treeDataTypes.arrowUp,\n          target: event.currentTarget\n        });\n      case ArrowDown:\n        return requestNavigation({\n          event,\n          type: treeDataTypes.arrowDown,\n          target: event.currentTarget\n        });\n    }\n    const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      return requestNavigation({\n        event,\n        target: event.currentTarget,\n        type: treeDataTypes.typeAhead\n      });\n    }\n  });\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const showActions = useEventCallback(event => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n    if (!isEventFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n  const hideActions = useEventCallback(event => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n    if (!isEventFromSubtree) {\n      setActionsVisible(false);\n    }\n  });\n  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n  // TODO: find a better way to ensure this behavior\n  React.useEffect(() => {\n    if (actionsRef.current) {\n      const handleFocusOut = event => {\n        setActionsVisible(elementContains(actionsRef.current, event.relatedTarget));\n      };\n      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusout', handleFocusOut, {\n        passive: true\n      });\n      return () => {\n        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusout', handleFocusOut);\n      };\n    }\n  }, [targetDocument]);\n  return {\n    isLeaf,\n    open,\n    level,\n    buttonSize: 'small',\n    isActionsVisible: actions ? isActionsVisible : false,\n    components: {\n      content: 'div',\n      root: 'div',\n      expandIcon: 'span',\n      actions: 'span',\n      subtree: 'span'\n    },\n    subtree: resolveShorthand(subtree, {\n      required: Boolean(subtreeChildren),\n      defaultProps: {\n        children: subtreeChildren,\n        ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined)\n      }\n    }),\n    content: resolveShorthand(content, {\n      required: true,\n      defaultProps: {\n        children\n      }\n    }),\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      id,\n      ref,\n      children: null,\n      'aria-level': level,\n      'aria-expanded': isBranch ? open : undefined,\n      role: 'treeitem',\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: actions ? showActions : undefined,\n      onFocus: actions ? showActions : undefined,\n      onMouseOut: actions ? hideActions : undefined,\n      onBlur: actions ? hideActions : undefined\n    }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: /*#__PURE__*/React.createElement(ChevronRight12Regular, {\n          style: expandIconInlineStyles[expandIconRotation]\n        }),\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n      }\n    }),\n    actions: resolveShorthand(actions, {\n      defaultProps: {\n        ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef)\n      }\n    })\n  };\n};\n//# sourceMappingURL=useTreeItem.js.map"],"names":["useTreeItem_unstable","props","ref","children","subtreeChildren","React","Children","toArray","contextLevel","useTreeContext_unstable","ctx","level","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","rest","requestOpenChange","requestNavigation","id","useId","isBranch","open","openItems","has","dir","targetDocument","useFluent_unstable","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","treeDataTypes","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","useEventCallback","isEventFromActions","current","elementContains","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","Enter","ArrowRight","ArrowLeft","End","end","Home","home","ArrowUp","arrowUp","ArrowDown","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","resolveShorthand","required","Boolean","defaultProps","useMergedRefs","isResolvedShorthand","getNativeElementProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","ChevronRight12Regular","style","expandIconInlineStyles"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/TreeItem/useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props, ref) {\n  const [children, subtreeChildren] = React.Children.toArray(props.children);\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n  const id = useId('fui-TreeItem-', props.id);\n  const {\n    content,\n    subtree,\n    expandIcon,\n    leaf: isLeaf = subtreeChildren === undefined,\n    actions,\n    as = 'div',\n    onClick,\n    onKeyDown,\n    ['aria-level']: level = contextLevel,\n    value = id,\n    ...rest\n  } = props;\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n  const isBranch = !isLeaf;\n  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(value));\n  const {\n    dir,\n    targetDocument\n  } = useFluent_unstable();\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  const actionsRef = React.useRef(null);\n  const expandIconRef = React.useRef(null);\n  const subtreeRef = React.useRef(null);\n  const handleArrowRight = event => {\n    if (!open && isBranch) {\n      return requestOpenChange({\n        event,\n        value,\n        open: true,\n        type: treeDataTypes.arrowRight,\n        target: event.currentTarget\n      });\n    }\n    if (open && isBranch) {\n      return requestNavigation({\n        event,\n        value,\n        type: treeDataTypes.arrowRight,\n        target: event.currentTarget\n      });\n    }\n  };\n  const handleArrowLeft = event => {\n    if (open && isBranch) {\n      return requestOpenChange({\n        event,\n        value,\n        open: false,\n        type: treeDataTypes.arrowLeft,\n        target: event.currentTarget\n      });\n    }\n    if (!open && level > 1) {\n      return requestNavigation({\n        event,\n        value,\n        target: event.currentTarget,\n        type: treeDataTypes.arrowLeft\n      });\n    }\n  };\n  const handleEnter = event => {\n    requestOpenChange({\n      event,\n      value,\n      open: isLeaf ? open : !open,\n      type: treeDataTypes.enter,\n      target: event.currentTarget\n    });\n  };\n  const handleClick = useEventCallback(event => {\n    onClick === null || onClick === void 0 ? void 0 : onClick(event);\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n    requestOpenChange({\n      event,\n      value,\n      open: isLeaf ? open : !open,\n      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n      target: event.currentTarget\n    });\n    requestNavigation({\n      event,\n      value,\n      target: event.currentTarget,\n      type: treeDataTypes.click\n    });\n  });\n  const handleKeyDown = useEventCallback(event => {\n    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n    if (event.currentTarget !== event.target) {\n      return;\n    }\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    switch (event.key) {\n      case Enter:\n        return handleEnter(event);\n      case ArrowRight:\n        return handleArrowRight(event);\n      case ArrowLeft:\n        return handleArrowLeft(event);\n      case End:\n        return requestNavigation({\n          event,\n          value,\n          type: treeDataTypes.end,\n          target: event.currentTarget\n        });\n      case Home:\n        return requestNavigation({\n          event,\n          value,\n          type: treeDataTypes.home,\n          target: event.currentTarget\n        });\n      case ArrowUp:\n        return requestNavigation({\n          event,\n          value,\n          type: treeDataTypes.arrowUp,\n          target: event.currentTarget\n        });\n      case ArrowDown:\n        return requestNavigation({\n          event,\n          value,\n          type: treeDataTypes.arrowDown,\n          target: event.currentTarget\n        });\n    }\n    const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      return requestNavigation({\n        event,\n        value,\n        target: event.currentTarget,\n        type: treeDataTypes.typeAhead\n      });\n    }\n  });\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const showActions = useEventCallback(event => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n    if (!isEventFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n  const hideActions = useEventCallback(event => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n    if (!isEventFromSubtree) {\n      setActionsVisible(false);\n    }\n  });\n  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n  // TODO: find a better way to ensure this behavior\n  React.useEffect(() => {\n    if (actionsRef.current) {\n      const handleFocusOut = event => {\n        setActionsVisible(elementContains(actionsRef.current, event.relatedTarget));\n      };\n      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusout', handleFocusOut, {\n        passive: true\n      });\n      return () => {\n        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusout', handleFocusOut);\n      };\n    }\n  }, [targetDocument]);\n  return {\n    isLeaf,\n    open,\n    level,\n    buttonSize: 'small',\n    isActionsVisible: actions ? isActionsVisible : false,\n    components: {\n      content: 'div',\n      root: 'div',\n      expandIcon: 'span',\n      actions: 'span',\n      subtree: 'span'\n    },\n    subtree: resolveShorthand(subtree, {\n      required: Boolean(subtreeChildren),\n      defaultProps: {\n        children: subtreeChildren,\n        ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined)\n      }\n    }),\n    content: resolveShorthand(content, {\n      required: true,\n      defaultProps: {\n        children\n      }\n    }),\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      id,\n      ref,\n      children: null,\n      'aria-level': level,\n      'aria-expanded': isBranch ? open : undefined,\n      role: 'treeitem',\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: actions ? showActions : undefined,\n      onFocus: actions ? showActions : undefined,\n      onMouseOut: actions ? hideActions : undefined,\n      onBlur: actions ? hideActions : undefined\n    }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: /*#__PURE__*/React.createElement(ChevronRight12Regular, {\n          style: expandIconInlineStyles[expandIconRotation]\n        }),\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n      }\n    }),\n    actions: resolveShorthand(actions, {\n      defaultProps: {\n        ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef)\n      }\n    })\n  };\n}\n//# sourceMappingURL=useTreeItem.js.map"],"names":["useTreeItem_unstable","props","ref","children","subtreeChildren","React","Children","toArray","contextLevel","useTreeContext_unstable","ctx","level","id","useId","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","value","rest","requestOpenChange","requestNavigation","isBranch","open","openItems","has","dir","targetDocument","useFluent_unstable","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","treeDataTypes","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","useEventCallback","isEventFromActions","current","elementContains","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","Enter","ArrowRight","ArrowLeft","End","end","Home","home","ArrowUp","arrowUp","ArrowDown","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","resolveShorthand","required","Boolean","defaultProps","useMergedRefs","isResolvedShorthand","getNativeElementProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","ChevronRight12Regular","style","expandIconInlineStyles"],"mappings":"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"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -11,12 +11,12 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
 const _treeItemContext = require("../../contexts/treeItemContext");
 const useTreeItemLayout_unstable = (props, ref)=>{
-    const { iconAfter , iconBefore , aside , as ='div'  } = props;
+    const { iconAfter , iconBefore , aside , as ='span'  } = props;
     const treeItemContext = (0, _treeItemContext.useTreeItemContext_unstable)();
     return {
         ...treeItemContext,
         components: {
-            root: 'div',
+            root: 'span',
             iconBefore: 'span',
             iconAfter: 'span',
             aside: 'span'

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (props, ref) => {\n  const {\n    iconAfter,\n    iconBefore,\n    aside,\n    as = 'div'\n  } = props;\n  const treeItemContext = useTreeItemContext_unstable();\n  return {\n    ...treeItemContext,\n    components: {\n      root: 'div',\n      iconBefore: 'span',\n      iconAfter: 'span',\n      aside: 'span'\n    },\n    root: getNativeElementProps(as, {\n      ...props,\n      ref\n    }),\n    iconBefore: resolveShorthand(iconBefore, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    iconAfter: resolveShorthand(iconAfter, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    aside: resolveShorthand(aside, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    })\n  };\n};\n//# sourceMappingURL=useTreeItemLayout.js.map"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","useTreeItemContext_unstable","components","root","getNativeElementProps","resolveShorthand","defaultProps"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;gCACiC;iCACZ;AAUrC,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAM,EACJC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,IAAK,MAAK,EACX,GAAGL;IACJ,MAAMM,kBAAkBC,IAAAA,4CAA2B;IACnD,OAAO;QACL,GAAGD,eAAe;QAClBE,YAAY;YACVC,MAAM;YACNN,YAAY;YACZD,WAAW;YACXE,OAAO;QACT;QACAK,MAAMC,IAAAA,qCAAqB,EAACL,IAAI;YAC9B,GAAGL,KAAK;YACRC;QACF;QACAE,YAAYQ,IAAAA,gCAAgB,EAACR,YAAY;YACvCS,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAV,WAAWS,IAAAA,gCAAgB,EAACT,WAAW;YACrCU,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAR,OAAOO,IAAAA,gCAAgB,EAACP,OAAO;YAC7BQ,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;IACF;AACF,GACA,6CAA6C"}
+{"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (props, ref) => {\n  const {\n    iconAfter,\n    iconBefore,\n    aside,\n    as = 'span'\n  } = props;\n  const treeItemContext = useTreeItemContext_unstable();\n  return {\n    ...treeItemContext,\n    components: {\n      root: 'span',\n      iconBefore: 'span',\n      iconAfter: 'span',\n      aside: 'span'\n    },\n    root: getNativeElementProps(as, {\n      ...props,\n      ref\n    }),\n    iconBefore: resolveShorthand(iconBefore, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    iconAfter: resolveShorthand(iconAfter, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    aside: resolveShorthand(aside, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    })\n  };\n};\n//# sourceMappingURL=useTreeItemLayout.js.map"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","useTreeItemContext_unstable","components","root","getNativeElementProps","resolveShorthand","defaultProps"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;gCACiC;iCACZ;AAUrC,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAM,EACJC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,IAAK,OAAM,EACZ,GAAGL;IACJ,MAAMM,kBAAkBC,IAAAA,4CAA2B;IACnD,OAAO;QACL,GAAGD,eAAe;QAClBE,YAAY;YACVC,MAAM;YACNN,YAAY;YACZD,WAAW;YACXE,OAAO;QACT;QACAK,MAAMC,IAAAA,qCAAqB,EAACL,IAAI;YAC9B,GAAGL,KAAK;YACRC;QACF;QACAE,YAAYQ,IAAAA,gCAAgB,EAACR,YAAY;YACvCS,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAV,WAAWS,IAAAA,gCAAgB,EAACT,WAAW;YACrCU,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAR,OAAOO,IAAAA,gCAAgB,EAACP,OAAO;YAC7BQ,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;IACF;AACF,GACA,6CAA6C"}

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js

@@ -27,13 +27,21 @@ const treeItemPersonaLayoutClassNames = {
     base: {
         a9b677: "fly5x3f",
         mc9l5x: "f22iagw",
-        Bt984gj: "f122n59"
+        Bt984gj: "f122n59",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
     }
 }, {
     d: [
         ".fly5x3f{width:100%;}",
         ".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;}"
+        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}"
     ]
 });
 /**
@@ -102,21 +110,6 @@ const useContentStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".fws515f{row-gap:var(--spacingHorizontalNone);}"
     ]
 });
-const useMainStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    base: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fkhj508",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "f1i3iumi"
-    }
-}, {
-    d: [
-        ".fk6fouc{font-family:var(--fontFamilyBase);}",
-        ".fkhj508{font-size:var(--fontSizeBase300);}",
-        ".figsok6{font-weight:var(--fontWeightRegular);}",
-        ".f1i3iumi{line-height:var(--lineHeightBase300);}"
-    ]
-});
 const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
     base: {
         Bahqtrf: "fk6fouc",
@@ -163,7 +156,6 @@ const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const mediaStyles = useMediaStyles();
     const contentStyles = useContentStyles();
-    const mainStyles = useMainStyles();
     const descriptionStyles = useDescriptionStyles();
     const asideStyles = useAsideStyles();
     state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
@@ -172,7 +164,7 @@ const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
         state.content.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
     }
     if (state.main) {
-        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);
+        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, state.main.className);
     }
     if (state.description) {
         state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  content: 'fui-TreeItemPersonaLayout__content',\n  description: 'fui-TreeItemPersonaLayout__description',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  main: 'fui-TreeItemPersonaLayout__main'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".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;}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    a9b677: \"f1szoe96\",\n    Bqenvij: \"f1d2rq10\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  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;}\", \".f1szoe96{width:32px;}\", \".f1d2rq10{height:32px;}\", \".f1g0x7ka{padding-top:0;}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f1qch9an{padding-bottom:0;}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\nconst useContentStyles = /*#__PURE__*/__styles({\n  base: {\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    i8kkvl: \"f1fps8zv\",\n    Belr9w4: \"fws515f\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}\", \".fws515f{row-gap:var(--spacingHorizontalNone);}\"]\n});\nconst useMainStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\"]\n});\nconst useDescriptionStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\"]\n});\nconst useAsideStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Huce71: \"fz5stix\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  }\n}, {\n  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;}\", \".fz5stix{white-space:nowrap;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\"]\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const contentStyles = useContentStyles();\n  const mainStyles = useMainStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const asideStyles = useAsideStyles();\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n  if (state.content) {\n    state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);\n  }\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","content","description","aside","main","useRootStyles","__styles","base","a9b677","mc9l5x","Bt984gj","d","useMediaStyles","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useMainStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useDescriptionStyles","useAsideStyles","Huce71","state","rootStyles","mediaStyles","contentStyles","mainStyles","descriptionStyles","asideStyles","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  content: 'fui-TreeItemPersonaLayout__content',\n  description: 'fui-TreeItemPersonaLayout__description',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  main: 'fui-TreeItemPersonaLayout__main'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".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;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    a9b677: \"f1szoe96\",\n    Bqenvij: \"f1d2rq10\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  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;}\", \".f1szoe96{width:32px;}\", \".f1d2rq10{height:32px;}\", \".f1g0x7ka{padding-top:0;}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f1qch9an{padding-bottom:0;}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\nconst useContentStyles = /*#__PURE__*/__styles({\n  base: {\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    i8kkvl: \"f1fps8zv\",\n    Belr9w4: \"fws515f\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}\", \".fws515f{row-gap:var(--spacingHorizontalNone);}\"]\n});\nconst useDescriptionStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\"]\n});\nconst useAsideStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Huce71: \"fz5stix\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  }\n}, {\n  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;}\", \".fz5stix{white-space:nowrap;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\"]\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const contentStyles = useContentStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const asideStyles = useAsideStyles();\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n  if (state.content) {\n    state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);\n  }\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","content","description","aside","main","useRootStyles","__styles","base","a9b677","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useMediaStyles","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useAsideStyles","Huce71","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","asideStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,+BAA+B,MAA/BA;IAmFAC,uCAAuC,MAAvCA;;uBArFsC;AAE5C,MAAMD,kCAAkC;IAC7CE,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,OAAO;IACPC,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAyB;QAAwF;QAA2G;QAAgD;QAA+C;QAAmD;KAAmD;AACva;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEV,IAAAA,kBAAQ,EAAC;IAC3CC,MAAM;QACJE,QAAQ;QACRC,SAAS;QACTF,QAAQ;QACRS,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDN,GAAG;QAAC;QAAwF;QAA2G;QAA0B;QAA2B;QAA6B;QAAuD;QAAsD;QAAgC;QAAuD;KAAuD;AACthB;AACA,MAAMO,mBAAmB,WAAW,GAAEhB,IAAAA,kBAAQ,EAAC;IAC7CC,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRc,SAAS;QACTL,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCG,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDV,GAAG;QAAC;QAAyB;QAAwF;QAA6F;QAAwD;QAAuD;QAAsD;QAA0D;QAAsD;QAAuD;QAAmG;KAAkD;AACrrB;AACA,MAAMW,uBAAuB,WAAW,GAAEpB,IAAAA,kBAAQ,EAAC;IACjDC,MAAM;QACJI,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAgD;QAA+C;QAAmD;KAAkD;AAC1M;AACA,MAAMY,iBAAiB,WAAW,GAAErB,IAAAA,kBAAQ,EAAC;IAC3CC,MAAM;QACJE,QAAQ;QACRc,SAAS;QACTK,QAAQ;QACRT,QAAQ;YAAC;YAAW;SAAW;QAC/BR,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAiC;QAAsD;QAAsD;QAAgD;QAA+C;QAAmD;KAAkD;AAC5gB;AAIO,MAAMjB,0CAA0C+B,CAAAA,QAAS;IAC9D,MAAMC,aAAazB;IACnB,MAAM0B,cAAcf;IACpB,MAAMgB,gBAAgBV;IACtB,MAAMW,oBAAoBP;IAC1B,MAAMQ,cAAcP;IACpBE,MAAM9B,IAAI,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,gCAAgCE,IAAI,EAAE+B,WAAWvB,IAAI,EAAEsB,MAAM9B,IAAI,CAACoC,SAAS;IAC/GN,MAAM7B,KAAK,CAACmC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,gCAAgCG,KAAK,EAAE+B,YAAYxB,IAAI,EAAEsB,MAAM7B,KAAK,CAACmC,SAAS;IACnH,IAAIN,MAAM5B,OAAO,EAAE;QACjB4B,MAAM5B,OAAO,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,gCAAgCI,OAAO,EAAE+B,cAAczB,IAAI,EAAEsB,MAAM5B,OAAO,CAACkC,SAAS;IAC7H,CAAC;IACD,IAAIN,MAAMzB,IAAI,EAAE;QACdyB,MAAMzB,IAAI,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,gCAAgCO,IAAI,EAAEyB,MAAMzB,IAAI,CAAC+B,SAAS;IAChG,CAAC;IACD,IAAIN,MAAM3B,WAAW,EAAE;QACrB2B,MAAM3B,WAAW,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,gCAAgCK,WAAW,EAAE+B,kBAAkB1B,IAAI,EAAEsB,MAAM3B,WAAW,CAACiC,SAAS;IAC7I,CAAC;IACD,IAAIN,MAAM1B,KAAK,EAAE;QACf0B,MAAM1B,KAAK,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACvC,gCAAgCM,KAAK,EAAE+B,YAAY3B,IAAI,EAAEsB,MAAM1B,KAAK,CAACgC,SAAS;IACrH,CAAC;IACD,OAAON;AACT,GACA,0DAA0D"}

package/lib-commonjs/hooks/useFlatTree.js

@@ -36,13 +36,13 @@ function useFlatTree_unstable(flatTreeItemProps, options = {}) {
         event.preventDefault();
     });
     const getNextNavigableItem = (0, _reactUtilities.useEventCallback)((visibleItems, data)=>{
-        const item = flatTreeItems.get(data.target.id);
+        const item = flatTreeItems.get(data.value);
         if (item) {
             switch(data.type){
                 case _tokens.treeDataTypes.typeAhead:
                     return item;
                 case _tokens.treeDataTypes.arrowLeft:
-                    return flatTreeItems.get(item.parentId);
+                    return flatTreeItems.get(item.parentValue);
                 case _tokens.treeDataTypes.arrowRight:
                     return visibleItems[item.index + 1];
                 case _tokens.treeDataTypes.end:

package/lib-commonjs/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\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 useFlatTree_unstable(flatTreeItemProps, options = {}) {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n  const handleOpenChange = useEventCallback((event, data) => {\n    var _options_onOpenChange;\n    (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n  const handleNavigation = useEventCallback((event, data) => {\n    var _options_onNavigation_unstable;\n    (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n    if (!event.isDefaultPrevented()) {\n      navigate(data);\n    }\n    event.preventDefault();\n  });\n  const getNextNavigableItem = useEventCallback((visibleItems, data) => {\n    const item = flatTreeItems.get(data.target.id);\n    if (item) {\n      switch (data.type) {\n        case treeDataTypes.typeAhead:\n          return item;\n        case treeDataTypes.arrowLeft:\n          return flatTreeItems.get(item.parentId);\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  const getTreeProps = React.useCallback(() => ({\n    ref: navigationRef,\n    openItems,\n    onOpenChange: handleOpenChange,\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]);\n  const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);\n  return React.useMemo(() => ({\n    navigate,\n    getTreeProps,\n    getNextNavigableItem,\n    items\n  }), [navigate, getTreeProps, getNextNavigableItem, items]);\n}\n//# sourceMappingURL=useFlatTree.js.map"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","target","id","type","treeDataTypes","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","items","VisibleFlatTreeItemGenerator"],"mappings":";;;;+BAkBgBA;;aAAAA;;;gCAlBiB;6DACV;qCAC2C;wBACpC;uCACQ;mCACJ;AAa3B,SAASA,qBAAqBC,iBAAiB,EAAEC,UAAU,CAAC,CAAC,EAAE;IACpE,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,gBAAgBC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,wCAAmB,EAACR,oBAAoB;QAACA;KAAkB;IACrG,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzD,IAAIC;QACHA,CAAAA,wBAAwBf,QAAQgB,YAAY,AAAD,MAAO,IAAI,IAAID,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBE,IAAI,CAACjB,SAASa,OAAOC,KAAK;QACvJ,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC/BhB,gBAAgBY;QAClB,CAAC;QACDD,MAAMM,cAAc;IACtB;IACA,MAAMC,mBAAmBR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzD,IAAIO;QACHA,CAAAA,iCAAiCrB,QAAQsB,qBAAqB,AAAD,MAAO,IAAI,IAAID,mCAAmC,KAAK,IAAI,KAAK,IAAIA,+BAA+BJ,IAAI,CAACjB,SAASa,OAAOC,KAAK;QAC3L,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC/BV,SAASM;QACX,CAAC;QACDD,MAAMM,cAAc;IACtB;IACA,MAAMI,uBAAuBX,IAAAA,gCAAgB,EAAC,CAACY,cAAcV,OAAS;QACpE,MAAMW,OAAOrB,cAAcsB,GAAG,CAACZ,KAAKa,MAAM,CAACC,EAAE;QAC7C,IAAIH,MAAM;YACR,OAAQX,KAAKe,IAAI;gBACf,KAAKC,qBAAa,CAACC,SAAS;oBAC1B,OAAON;gBACT,KAAKK,qBAAa,CAACE,SAAS;oBAC1B,OAAO5B,cAAcsB,GAAG,CAACD,KAAKQ,QAAQ;gBACxC,KAAKH,qBAAa,CAACI,UAAU;oBAC3B,OAAOV,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACM,GAAG;oBACpB,OAAOZ,YAAY,CAACA,aAAaa,MAAM,GAAG,EAAE;gBAC9C,KAAKP,qBAAa,CAACQ,IAAI;oBACrB,OAAOd,YAAY,CAAC,EAAE;gBACxB,KAAKM,qBAAa,CAACS,SAAS;oBAC1B,OAAOf,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACU,OAAO;oBACxB,OAAOhB,YAAY,CAACC,KAAKU,KAAK,GAAG,EAAE;YACvC;QACF,CAAC;IACH;IACA,MAAMM,eAAepC,OAAMqC,WAAW,CAAC,IAAO,CAAA;YAC5CC,KAAKlC;YACLR;YACAe,cAAcL;YACd,gEAAgE;YAChEW,uBAAuBF;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACnB;KAAU;IACX,MAAM2C,QAAQvC,OAAMqC,WAAW,CAAC,IAAMG,IAAAA,iDAA4B,EAAC5C,WAAWG,gBAAgB;QAACH;QAAWG;KAAc;IACxH,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAC1BE;YACAiC;YACAlB;YACAqB;QACF,CAAA,GAAI;QAACpC;QAAUiC;QAAclB;QAAsBqB;KAAM;AAC3D,EACA,uCAAuC"}
+{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\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 useFlatTree_unstable(flatTreeItemProps, options = {}) {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n  const handleOpenChange = useEventCallback((event, data) => {\n    var _options_onOpenChange;\n    (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n    if (!event.isDefaultPrevented()) {\n      updateOpenItems(data);\n    }\n    event.preventDefault();\n  });\n  const handleNavigation = useEventCallback((event, data) => {\n    var _options_onNavigation_unstable;\n    (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n    if (!event.isDefaultPrevented()) {\n      navigate(data);\n    }\n    event.preventDefault();\n  });\n  const getNextNavigableItem = useEventCallback((visibleItems, data) => {\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  const getTreeProps = React.useCallback(() => ({\n    ref: navigationRef,\n    openItems,\n    onOpenChange: handleOpenChange,\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]);\n  const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);\n  return React.useMemo(() => ({\n    navigate,\n    getTreeProps,\n    getNextNavigableItem,\n    items\n  }), [navigate, getTreeProps, getNextNavigableItem, items]);\n}\n//# sourceMappingURL=useFlatTree.js.map"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","typeAhead","arrowLeft","parentValue","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","items","VisibleFlatTreeItemGenerator"],"mappings":";;;;+BAkBgBA;;aAAAA;;;gCAlBiB;6DACV;qCAC2C;wBACpC;uCACQ;mCACJ;AAa3B,SAASA,qBAAqBC,iBAAiB,EAAEC,UAAU,CAAC,CAAC,EAAE;IACpE,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,gBAAgBC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,wCAAmB,EAACR,oBAAoB;QAACA;KAAkB;IACrG,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzD,IAAIC;QACHA,CAAAA,wBAAwBf,QAAQgB,YAAY,AAAD,MAAO,IAAI,IAAID,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBE,IAAI,CAACjB,SAASa,OAAOC,KAAK;QACvJ,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC/BhB,gBAAgBY;QAClB,CAAC;QACDD,MAAMM,cAAc;IACtB;IACA,MAAMC,mBAAmBR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzD,IAAIO;QACHA,CAAAA,iCAAiCrB,QAAQsB,qBAAqB,AAAD,MAAO,IAAI,IAAID,mCAAmC,KAAK,IAAI,KAAK,IAAIA,+BAA+BJ,IAAI,CAACjB,SAASa,OAAOC,KAAK;QAC3L,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC/BV,SAASM;QACX,CAAC;QACDD,MAAMM,cAAc;IACtB;IACA,MAAMI,uBAAuBX,IAAAA,gCAAgB,EAAC,CAACY,cAAcV,OAAS;QACpE,MAAMW,OAAOrB,cAAcsB,GAAG,CAACZ,KAAKa,KAAK;QACzC,IAAIF,MAAM;YACR,OAAQX,KAAKc,IAAI;gBACf,KAAKC,qBAAa,CAACC,SAAS;oBAC1B,OAAOL;gBACT,KAAKI,qBAAa,CAACE,SAAS;oBAC1B,OAAO3B,cAAcsB,GAAG,CAACD,KAAKO,WAAW;gBAC3C,KAAKH,qBAAa,CAACI,UAAU;oBAC3B,OAAOT,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACM,GAAG;oBACpB,OAAOX,YAAY,CAACA,aAAaY,MAAM,GAAG,EAAE;gBAC9C,KAAKP,qBAAa,CAACQ,IAAI;oBACrB,OAAOb,YAAY,CAAC,EAAE;gBACxB,KAAKK,qBAAa,CAACS,SAAS;oBAC1B,OAAOd,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACrC,KAAKL,qBAAa,CAACU,OAAO;oBACxB,OAAOf,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;YACvC;QACF,CAAC;IACH;IACA,MAAMM,eAAenC,OAAMoC,WAAW,CAAC,IAAO,CAAA;YAC5CC,KAAKjC;YACLR;YACAe,cAAcL;YACd,gEAAgE;YAChEW,uBAAuBF;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACnB;KAAU;IACX,MAAM0C,QAAQtC,OAAMoC,WAAW,CAAC,IAAMG,IAAAA,iDAA4B,EAAC3C,WAAWG,gBAAgB;QAACH;QAAWG;KAAc;IACxH,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAC1BE;YACAgC;YACAjB;YACAoB;QACF,CAAA,GAAI;QAACnC;QAAUgC;QAAcjB;QAAsBoB;KAAM;AAC3D,EACA,uCAAuC"}

package/lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -29,7 +29,7 @@ function useFlatTreeNavigation(flatTreeItems) {
                 treeItemWalker.currentElement = data.target;
                 return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
             case _tokens.treeDataTypes.arrowLeft:
-                return parentElement(flatTreeItems, data.target, targetDocument);
+                return parentElement(flatTreeItems, data.value);
             case _tokens.treeDataTypes.arrowRight:
                 treeItemWalker.currentElement = data.target;
                 return firstChild(data.target, treeItemWalker);
@@ -71,10 +71,12 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(flatTreeItems, target, document) {
-    const flatTreeItem = flatTreeItems.get(target.id);
-    if (flatTreeItem && flatTreeItem.parentId) {
-        return document.getElementById(flatTreeItem.parentId);
+function parentElement(flatTreeItems, value) {
+    const flatTreeItem = flatTreeItems.get(value);
+    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
+        const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
+        var _parentItem_ref_current;
+        return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;
     }
     return null;
 } //# sourceMappingURL=useFlatTreeNavigation.js.map