@fluentui/react-tree 9.0.0-beta.6 → 9.0.0-beta.7

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Tue, 21 Mar 2023 21:18:26 GMT",
+      "date": "Thu, 23 Mar 2023 12:28:44 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.7",
+      "version": "9.0.0-beta.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "1ebc61cab902debf662b757e534d736b8ac96c4f",
+            "comment": "chore: improves internals mechanism to ensure memoization"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.4.6",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.6",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.2.3",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.6.2",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Mar 2023 21:23:13 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.6",
       "version": "9.0.0-beta.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Tue, 21 Mar 2023 21:18:26 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Mar 2023 12:28:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.7)
+
+Thu, 23 Mar 2023 12:28:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.6..@fluentui/react-tree_v9.0.0-beta.7)
+
+### Changes
+
+- chore: improves internals mechanism to ensure memoization ([PR #27260](https://github.com/microsoft/fluentui/pull/27260) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.4.6 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-button to v9.3.6 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-portal to v9.2.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-tabster to v9.6.2 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+
 ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.6)
 
-Tue, 21 Mar 2023 21:18:26 GMT 
+Tue, 21 Mar 2023 21:23:13 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.5..@fluentui/react-tree_v9.0.0-beta.6)
 
 ### Changes

package/dist/index.d.ts

@@ -57,7 +57,7 @@ export declare type FlatTree = {
      *   event.preventDefault();
      *   const nextItem = tree.getNextNavigableItem(data);
      *   // scroll to item using virtualization scroll mechanism
-     *   if (nextItem && !targetDocument.getElementById(nextItem.id)) {
+     *   if (nextItem && document.getElementById(nextItem.id)) {
      *     listRef.current.scrollToItem(nextItem.index);
      *   }
      *   // wait for scrolling to happen and then invoke navigate method
@@ -72,28 +72,20 @@ export declare type FlatTree = {
      * returns next item to be focused on a navigation.
      * This method is provided to decouple the element that needs to be focused from
      *  the action of focusing it itself.
+     *
+     * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(data: TreeNavigationData_unstable): FlatTreeItem | null;
-    /**
-     * returns a single flat tree item by id without iterating over the whole collection
-     */
-    getItem(id: string): FlatTreeItem | null;
+    getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;
     /**
-     * returns an iterable containing all visually available flat tree items
+     * an iterable containing all visually available flat tree items
      */
-    items(): Iterable<FlatTreeItem>;
+    items(): IterableIterator<FlatTreeItem>;
 };
 
-export declare type FlatTreeItem = {
-    getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
-    parentId?: string;
-    childrenSize: number;
-    index: number;
-    id: string;
-    level: number;
-};
+export declare type FlatTreeItem = Readonly<MutableFlatTreeItem>;
 
-export declare type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> & TreeItemProps & {
+export declare type FlatTreeItemProps = TreeItemProps & {
+    id: TreeItemId;
     parentId?: string;
 };
 
@@ -127,6 +119,20 @@ declare interface ImmutableSet<Value> {
     [Symbol.iterator](): IterableIterator<Value>;
 }
 
+/**
+ * @internal
+ * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator
+ * to ensure required properties when building a FlatTreeITem
+ */
+declare type MutableFlatTreeItem = {
+    parentId?: string;
+    childrenSize: number;
+    index: number;
+    id: string;
+    level: number;
+    getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
+};
+
 export declare type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {
     subtree?: NestedTreeItem[];
 };
@@ -196,7 +202,7 @@ declare type TreeItemCSSProperties = React_2.CSSProperties & {
     [treeItemLevelToken]?: string | number;
 };
 
-export declare type TreeItemId = string | number;
+export declare type TreeItemId = string;
 
 /**
  * TreeItemLayout component - TODO: add more docs
@@ -452,10 +458,10 @@ export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param items - a list of tree items
+ * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export declare function useFlatTree_unstable(items: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>): FlatTree;
+export declare function useFlatTree_unstable(flatTreeItemProps: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>): FlatTree;
 
 /**
  * Create the state required to render Tree.

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/Tree/Tree.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeContextValue } from '../../contexts/treeContext';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable =\n  | { event: React.MouseEvent<HTMLElement>; target: HTMLElement; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof End };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = { open: boolean } & (\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'ExpandIconClick';\n    }\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'Click';\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof Enter;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowRight;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowLeft;\n    }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeItemId = string | number;\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemId>;\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemId>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & TreeContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"names":["React"],"sources":["../../../src/components/Tree/Tree.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeContextValue } from '../../contexts/treeContext';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { TreeItemId } from '../TreeItem/TreeItem.types';\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable =\n  | { event: React.MouseEvent<HTMLElement>; target: HTMLElement; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; target: HTMLElement; type: typeof End };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = { open: boolean } & (\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'ExpandIconClick';\n    }\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'Click';\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof Enter;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowRight;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowLeft;\n    }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemId>;\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemId>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & TreeContextValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  content: NonNullable<Slot<'div'>>;\n  subtree?: Slot<'span'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Actions slot that renders on the end of tree item\n   * when the item is hovered/focused\n   */\n  actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n   * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n   * this will be inferred by the presence of a subtree as part of the TreeItem children.\n   */\n  leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n  open: boolean;\n  isLeaf: boolean;\n  level: number;\n  /**\n   * By design, a button included on the actions slot should be small\n   */\n  buttonSize: 'small';\n  isActionsVisible: boolean;\n};\n"],"mappings":"AAIA,YAAYA,KAAA,MAAW"}
+{"version":3,"names":["React"],"sources":["../../../src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\nexport type TreeItemId = string;\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  content: NonNullable<Slot<'div'>>;\n  subtree?: Slot<'span'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Actions slot that renders on the end of tree item\n   * when the item is hovered/focused\n   */\n  actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n   * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n   * this will be inferred by the presence of a subtree as part of the TreeItem children.\n   */\n  leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n  open: boolean;\n  isLeaf: boolean;\n  level: number;\n  /**\n   * By design, a button included on the actions slot should be small\n   */\n  buttonSize: 'small';\n  isActionsVisible: boolean;\n};\n"],"mappings":"AAIA,YAAYA,KAAA,MAAW"}

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemId, TreeOpenChangeData, TreeNavigationData_unstable } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemId>;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange(data: TreeOpenChangeData): void;\n  requestNavigation(data: TreeNavigationData_unstable): void;\n};\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestOpenChange: noop,\n  requestNavigation: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ;AAE5E,SAASC,iBAAiB,QAAsB;AAchD,MAAMC,mBAAA,GAAwC;EAC5CC,KAAA,EAAO;EACPC,SAAA,EAAWH,iBAAA;EACXI,iBAAA,EAAmBC,IAAA;EACnBC,iBAAA,EAAmBD,IAAA;EACnBE,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,SAASH,KAAA,EAAO;EACd;AAGF,OAAO,MAAMI,WAAA,gBAAqDX,aAAA,CAChEY,SAAA;AAGF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAY,CAAE,GAAGH,WAAA;AAC1C,OAAO,MAAMI,uBAAA,GAA8BC,QAAA,IACzCf,kBAAA,CAAmBU,WAAA,EAAa,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}
+{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { TreeItemId } from '../TreeItem';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemId>;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange(data: TreeOpenChangeData): void;\n  requestNavigation(data: TreeNavigationData_unstable): void;\n};\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestOpenChange: noop,\n  requestNavigation: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ;AAG5E,SAASC,iBAAiB,QAAsB;AAchD,MAAMC,mBAAA,GAAwC;EAC5CC,KAAA,EAAO;EACPC,SAAA,EAAWH,iBAAA;EACXI,iBAAA,EAAmBC,IAAA;EACnBC,iBAAA,EAAmBD,IAAA;EACnBE,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,SAASH,KAAA,EAAO;EACd;AAGF,OAAO,MAAMI,WAAA,gBAAqDX,aAAA,CAChEY,SAAA;AAGF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAY,CAAE,GAAGH,WAAA;AAC1C,OAAO,MAAMI,uBAAA,GAA8BC,QAAA,IACzCf,kBAAA,CAAmBU,WAAA,EAAa,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}

package/lib/hooks/useFlatTree.js

@@ -1,7 +1,7 @@
 import { useEventCallback } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';
-import { createVisibleFlatTree } from '../utils/createVisibleFlatTree';
+import { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';
+import { treeDataTypes } from '../utils/tokens';
 import { useFlatTreeNavigation } from './useFlatTreeNavigation';
 import { useOpenItemsState } from './useOpenItemsState';
 /**
@@ -13,14 +13,13 @@ import { useOpenItemsState } from './useOpenItemsState';
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param items - a list of tree items
+ * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export function useFlatTree_unstable(items, options = {}) {
+export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
   const [openItems, updateOpenItems] = useOpenItemsState(options);
-  const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);
-  const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);
-  const visibleFlatTree = React.useMemo(() => createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);
+  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);
+  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
   const handleOpenChange = useEventCallback((event, data) => {
     event.preventDefault();
     updateOpenItems(data);
@@ -29,19 +28,42 @@ export function useFlatTree_unstable(items, options = {}) {
     event.preventDefault();
     navigate(data);
   });
-  var _unfilteredFlatTree_itemsPerId_get;
-  const flatTree = {
-    ...visibleFlatTree,
-    getTreeProps: () => ({
-      ref: navigationRef,
-      openItems,
-      onOpenChange: handleOpenChange,
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      onNavigation_unstable: handleNavigation
-    }),
+  const getNextNavigableItem = useEventCallback((visibleItems, data) => {
+    const item = flatTreeItems.get(data.target.id);
+    if (item) {
+      switch (data.type) {
+        case treeDataTypes.typeAhead:
+          return item;
+        case treeDataTypes.arrowLeft:
+          return flatTreeItems.get(item.parentId);
+        case treeDataTypes.arrowRight:
+          return visibleItems[item.index + 1];
+        case treeDataTypes.end:
+          return visibleItems[visibleItems.length - 1];
+        case treeDataTypes.home:
+          return visibleItems[0];
+        case treeDataTypes.arrowDown:
+          return visibleItems[item.index + 1];
+        case treeDataTypes.arrowUp:
+          return visibleItems[item.index - 1];
+      }
+    }
+  });
+  const getTreeProps = React.useCallback(() => ({
+    ref: navigationRef,
+    openItems,
+    onOpenChange: handleOpenChange,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    onNavigation_unstable: handleNavigation
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [openItems]);
+  const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);
+  return React.useMemo(() => ({
     navigate,
-    getItem: id => (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(id)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null
-  };
-  return flatTree;
+    getTreeProps,
+    getNextNavigableItem,
+    items
+  }), [navigate, getTreeProps, getNextNavigableItem, items]);
 }
 //# sourceMappingURL=useFlatTree.js.map

package/lib/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEventCallback","React","createUnfilteredFlatTree","createVisibleFlatTree","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","items","options","openItems","updateOpenItems","unfilteredFlatTree","useMemo","navigate","navigationRef","visibleFlatTree","handleOpenChange","event","data","preventDefault","handleNavigation","_unfilteredFlatTree_itemsPerId_get","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","itemsPerId","get"],"sources":["../../src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport { TreeItemProps } from '../TreeItem';\nimport { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { createVisibleFlatTree } from '../utils/createVisibleFlatTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n\nexport type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> &\n  TreeItemProps & {\n    parentId?: string;\n  };\n\nexport type FlatTreeItem = {\n  getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n    TreeItemProps;\n  parentId?: string;\n  childrenSize: number;\n  index: number;\n  id: string;\n  level: number;\n};\n\nexport type FlatTreeProps = Required<\n  Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && !targetDocument.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   */\n  getNextNavigableItem(data: TreeNavigationData_unstable): FlatTreeItem | null;\n  /**\n   * returns a single flat tree item by id without iterating over the whole collection\n   */\n  getItem(id: string): FlatTreeItem | null;\n  /**\n   * returns an iterable containing all visually available flat tree items\n   */\n  items(): Iterable<FlatTreeItem>;\n};\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param items - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(\n  items: FlatTreeItemProps[],\n  options: Pick<TreeProps, 'openItems' | 'defaultOpenItems'> = {},\n): FlatTree {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);\n  const visibleFlatTree = React.useMemo(\n    () => createVisibleFlatTree(unfilteredFlatTree, openItems),\n    [unfilteredFlatTree, openItems],\n  );\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    event.preventDefault();\n    updateOpenItems(data);\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      event.preventDefault();\n      navigate(data);\n    },\n  );\n\n  const flatTree: FlatTree = {\n    ...visibleFlatTree,\n    getTreeProps: () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    navigate,\n    getItem: id => unfilteredFlatTree.itemsPerId.get(id) ?? null,\n  };\n  return flatTree;\n}\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ;AACjC,YAAYC,KAAA,MAAW;AASvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AA8ElC;;;;;;;;;;;;AAYA,OAAO,SAASC,qBACdC,KAA0B,EAC1BC,OAAA,GAA6D,CAAC,CAAC,EACrD;EACV,MAAM,CAACC,SAAA,EAAWC,eAAA,CAAgB,GAAGL,iBAAA,CAAkBG,OAAA;EACvD,MAAMG,kBAAA,GAAqBV,KAAA,CAAMW,OAAO,CAAC,MAAMV,wBAAA,CAAyBK,KAAA,GAAQ,CAACA,KAAA,CAAM;EACvF,MAAM,CAACM,QAAA,EAAUC,aAAA,CAAc,GAAGV,qBAAA,CAAsBO,kBAAA;EACxD,MAAMI,eAAA,GAAkBd,KAAA,CAAMW,OAAO,CACnC,MAAMT,qBAAA,CAAsBQ,kBAAA,EAAoBF,SAAA,GAChD,CAACE,kBAAA,EAAoBF,SAAA,CAAU;EAGjC,MAAMO,gBAAA,GAAmBhB,gBAAA,CAAiB,CAACiB,KAAA,EAA4BC,IAAA,KAA6B;IAClGD,KAAA,CAAME,cAAc;IACpBT,eAAA,CAAgBQ,IAAA;EAClB;EAEA,MAAME,gBAAA,GAAmBpB,gBAAA,CACvB,CAACiB,KAAA,EAAqCC,IAAA,KAAsC;IAC1ED,KAAA,CAAME,cAAc;IACpBN,QAAA,CAASK,IAAA;EACX;MAaeG,kCAAA;EAVjB,MAAMC,QAAA,GAAqB;IACzB,GAAGP,eAAe;IAClBQ,YAAA,EAAcA,CAAA,MAAO;MACnBC,GAAA,EAAKV,aAAA;MACLL,SAAA;MACAgB,YAAA,EAAcT,gBAAA;MACd;MACAU,qBAAA,EAAuBN;IACzB;IACAP,QAAA;IACAc,OAAA,EAASC,EAAA,IAAM,CAAAP,kCAAA,GAAAV,kBAAA,CAAmBkB,UAAU,CAACC,GAAG,CAACF,EAAA,eAAlCP,kCAAA,cAAAA,kCAAA,GAAyC;EAC1D;EACA,OAAOC,QAAA;AACT"}
+{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","preventDefault","handleNavigation","getNextNavigableItem","visibleItems","item","get","target","id","type","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","onOpenChange","onNavigation_unstable","items"],"sources":["../../src/hooks/useFlatTree.ts"],"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';\nimport type {\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree';\nimport type { TreeItemId, TreeItemProps } from '../TreeItem';\n\nexport type FlatTreeItemProps = TreeItemProps & {\n  id: TreeItemId;\n  parentId?: string;\n};\n\nexport type FlatTreeItem = Readonly<MutableFlatTreeItem>;\n\n/**\n * @internal\n * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator\n * to ensure required properties when building a FlatTreeITem\n */\nexport type MutableFlatTreeItem = {\n  parentId?: string;\n  childrenSize: number;\n  index: number;\n  id: string;\n  level: number;\n  getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n    TreeItemProps;\n};\n\nexport type FlatTreeProps = Required<\n  Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): FlatTreeProps;\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && document.getElementById(nextItem.id)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<FlatTreeItem>;\n};\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(\n  flatTreeItemProps: FlatTreeItemProps[],\n  options: Pick<TreeProps, 'openItems' | 'defaultOpenItems'> = {},\n): FlatTree {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    event.preventDefault();\n    updateOpenItems(data);\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      event.preventDefault();\n      navigate(data);\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback((visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable) => {\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\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref: navigationRef as React.Ref<HTMLDivElement>,\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  );\n\n  const items = React.useCallback(\n    () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n    [openItems, flatTreeItems],\n  );\n\n  return React.useMemo(\n    () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n    [navigate, getTreeProps, getNextNavigableItem, items],\n  );\n}\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ;AACjC,YAAYC,KAAA,MAAW;AACvB,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ;AAClE,SAASC,aAAa,QAAQ;AAC9B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AA2FlC;;;;;;;;;;;;AAYA,OAAO,SAASC,qBACdC,iBAAsC,EACtCC,OAAA,GAA6D,CAAC,CAAC,EACrD;EACV,MAAM,CAACC,SAAA,EAAWC,eAAA,CAAgB,GAAGL,iBAAA,CAAkBG,OAAA;EACvD,MAAMG,aAAA,GAAgBX,KAAA,CAAMY,OAAO,CAAC,MAAMX,mBAAA,CAAoBM,iBAAA,GAAoB,CAACA,iBAAA,CAAkB;EACrG,MAAM,CAACM,QAAA,EAAUC,aAAA,CAAc,GAAGV,qBAAA,CAAsBO,aAAA;EAExD,MAAMI,gBAAA,GAAmBhB,gBAAA,CAAiB,CAACiB,KAAA,EAA4BC,IAAA,KAA6B;IAClGD,KAAA,CAAME,cAAc;IACpBR,eAAA,CAAgBO,IAAA;EAClB;EAEA,MAAME,gBAAA,GAAmBpB,gBAAA,CACvB,CAACiB,KAAA,EAAqCC,IAAA,KAAsC;IAC1ED,KAAA,CAAME,cAAc;IACpBL,QAAA,CAASI,IAAA;EACX;EAGF,MAAMG,oBAAA,GAAuBrB,gBAAA,CAAiB,CAACsB,YAAA,EAA8BJ,IAAA,KAAsC;IACjH,MAAMK,IAAA,GAAOX,aAAA,CAAcY,GAAG,CAACN,IAAA,CAAKO,MAAM,CAACC,EAAE;IAC7C,IAAIH,IAAA,EAAM;MACR,QAAQL,IAAA,CAAKS,IAAI;QACf,KAAKvB,aAAA,CAAcwB,SAAS;UAC1B,OAAOL,IAAA;QACT,KAAKnB,aAAA,CAAcyB,SAAS;UAC1B,OAAOjB,aAAA,CAAcY,GAAG,CAACD,IAAA,CAAKO,QAAQ;QACxC,KAAK1B,aAAA,CAAc2B,UAAU;UAC3B,OAAOT,YAAY,CAACC,IAAA,CAAKS,KAAK,GAAG,EAAE;QACrC,KAAK5B,aAAA,CAAc6B,GAAG;UACpB,OAAOX,YAAY,CAACA,YAAA,CAAaY,MAAM,GAAG,EAAE;QAC9C,KAAK9B,aAAA,CAAc+B,IAAI;UACrB,OAAOb,YAAY,CAAC,EAAE;QACxB,KAAKlB,aAAA,CAAcgC,SAAS;UAC1B,OAAOd,YAAY,CAACC,IAAA,CAAKS,KAAK,GAAG,EAAE;QACrC,KAAK5B,aAAA,CAAciC,OAAO;UACxB,OAAOf,YAAY,CAACC,IAAA,CAAKS,KAAK,GAAG,EAAE;MAAA;IAEzC;EACF;EAEA,MAAMM,YAAA,GAAerC,KAAA,CAAMsC,WAAW,CACpC,OAAO;IACLC,GAAA,EAAKzB,aAAA;IACLL,SAAA;IACA+B,YAAA,EAAczB,gBAAA;IACd;IACA0B,qBAAA,EAAuBtB;EACzB;EACA;EACA,CAACV,SAAA,CAAU;EAGb,MAAMiC,KAAA,GAAQ1C,KAAA,CAAMsC,WAAW,CAC7B,MAAMpC,4BAAA,CAA6BO,SAAA,EAAWE,aAAA,GAC9C,CAACF,SAAA,EAAWE,aAAA,CAAc;EAG5B,OAAOX,KAAA,CAAMY,OAAO,CAClB,OAAO;IAAEC,QAAA;IAAUwB,YAAA;IAAcjB,oBAAA;IAAsBsB;EAAM,IAC7D,CAAC7B,QAAA,EAAUwB,YAAA,EAAcjB,oBAAA,EAAsBsB,KAAA,CAAM;AAEzD"}

package/lib/hooks/useFlatTreeNavigation.js

@@ -1,11 +1,11 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { useMergedRefs } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../utils/tokens';
 import { treeItemFilter } from '../utils/treeItemFilter';
 import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
 import { useRovingTabIndex } from './useRovingTabIndexes';
-export function useFlatTreeNavigation(flatTree) {
+export function useFlatTreeNavigation(flatTreeItems) {
   const {
     targetDocument
   } = useFluent_unstable();
@@ -25,7 +25,7 @@ export function useFlatTreeNavigation(flatTree) {
         treeItemWalker.currentElement = data.target;
         return nextTypeAheadElement(treeItemWalker, data.event.key);
       case treeDataTypes.arrowLeft:
-        return parentElement(flatTree, data.target, targetDocument);
+        return parentElement(flatTreeItems, data.target, targetDocument);
       case treeDataTypes.arrowRight:
         treeItemWalker.currentElement = data.target;
         return firstChild(data.target, treeItemWalker);
@@ -43,12 +43,12 @@ export function useFlatTreeNavigation(flatTree) {
         return treeItemWalker.previousElement();
     }
   }
-  function navigate(data) {
+  const navigate = useEventCallback(data => {
     const nextElement = getNextElement(data);
     if (nextElement) {
       rove(nextElement);
     }
-  }
+  });
   return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];
 }
 function firstChild(target, treeWalker) {
@@ -64,8 +64,8 @@ function firstChild(target, treeWalker) {
   }
   return null;
 }
-function parentElement(flatTree, target, document) {
-  const flatTreeItem = flatTree.itemsPerId.get(target.id);
+function parentElement(flatTreeItems, target, document) {
+  const flatTreeItem = flatTreeItems.get(target.id);
   if (flatTreeItem && flatTreeItem.parentId) {
     return document.getElementById(flatTreeItem.parentId);
   }

package/lib/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["useFluent_unstable","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTree","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","itemsPerId","get","id","parentId","getElementById"],"sources":["../../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { UnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useFlatTreeNavigation(flatTree: UnfilteredFlatTree) {\n  const { targetDocument } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        return parentElement(flatTree, data.target, targetDocument);\n      case treeDataTypes.arrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.end:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.arrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.arrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  function navigate(data: TreeNavigationData_unstable) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(flatTree: UnfilteredFlatTree, target: HTMLElement, document: Document) {\n  const flatTreeItem = flatTree.itemsPerId.get(target.id);\n  if (flatTreeItem && flatTreeItem.parentId) {\n    return document.getElementById(flatTreeItem.parentId);\n  }\n  return null;\n}\n"],"mappings":"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"}
+{"version":3,"names":["useFluent_unstable","useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTreeItems","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","get","id","parentId","getElementById"],"sources":["../../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { FlatTreeItems } from '../utils/createFlatTreeItems';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useFlatTreeNavigation(flatTreeItems: FlatTreeItems) {\n  const { targetDocument } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        return parentElement(flatTreeItems, data.target, targetDocument);\n      case treeDataTypes.arrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.end:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.arrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.arrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(flatTreeItems: FlatTreeItems, target: HTMLElement, document: Document) {\n  const flatTreeItem = flatTreeItems.get(target.id);\n  if (flatTreeItem && flatTreeItem.parentId) {\n    return document.getElementById(flatTreeItem.parentId);\n  }\n  return null;\n}\n"],"mappings":"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"}

package/lib/hooks/useOpenItemsState.js.map

@@ -1 +1 @@
-{"version":3,"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","id","target","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"sources":["../../src/hooks/useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { TreeItemId, TreeOpenChangeData, TreeProps } from '../Tree';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport function useOpenItemsState(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: React.useMemo(\n      () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),\n      [props.defaultOpenItems],\n    ),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems(\n  data: TreeOpenChangeData,\n  previousOpenItems: ImmutableSet<TreeItemId>,\n): ImmutableSet<TreeItemId> {\n  const id = data.target.id;\n  const previousOpenItemsHasId = previousOpenItems.has(id);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(id) : nextOpenItems.delete(id);\n}\n"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ;AACvD,YAAYC,KAAA,MAAW;AAEvB,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB;AAEpE,OAAO,SAASC,kBAAkBC,KAAwD,EAAE;EAC1F,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGR,oBAAA,CAAqB;IACrDS,KAAA,EAAOP,KAAA,CAAMQ,OAAO,CAAC,MAAMJ,KAAA,CAAMC,SAAS,IAAIJ,kBAAA,CAAmBG,KAAA,CAAMC,SAAS,GAAG,CAACD,KAAA,CAAMC,SAAS,CAAC;IACpGI,YAAA,EAAcT,KAAA,CAAMQ,OAAO,CACzB,MAAMJ,KAAA,CAAMM,gBAAgB,IAAIT,kBAAA,CAAmBG,KAAA,CAAMM,gBAAgB,GACzE,CAACN,KAAA,CAAMM,gBAAgB,CAAC;IAE1BC,YAAA,EAAcT;EAChB;EACA,MAAMU,eAAA,GAAkBb,gBAAA,CAAkBc,IAAA,IACxCP,YAAA,CAAaQ,gBAAA,IAAoBC,mBAAA,CAAoBF,IAAA,EAAMC,gBAAA;EAE7D,OAAO,CAACT,SAAA,EAAWO,eAAA,CAAgB;AACrC;AAEA,SAASG,oBACPF,IAAwB,EACxBG,iBAA2C,EACjB;EAC1B,MAAMC,EAAA,GAAKJ,IAAA,CAAKK,MAAM,CAACD,EAAE;EACzB,MAAME,sBAAA,GAAyBH,iBAAA,CAAkBI,GAAG,CAACH,EAAA;EACrD,IAAIJ,IAAA,CAAKQ,IAAI,GAAGF,sBAAA,GAAyB,CAACA,sBAAsB,EAAE;IAChE,OAAOH,iBAAA;EACT;EACA,MAAMM,aAAA,GAAgBrB,kBAAA,CAAmBe,iBAAA;EACzC,OAAOH,IAAA,CAAKQ,IAAI,GAAGC,aAAA,CAAcC,GAAG,CAACN,EAAA,IAAMK,aAAA,CAAcE,MAAM,CAACP,EAAA,CAAG;AACrE"}
+{"version":3,"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","id","target","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"sources":["../../src/hooks/useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeItemId } from '../TreeItem';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  const [openItems, setOpenItems] = useControllableState({\n    state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n    defaultState: React.useMemo(\n      () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),\n      [props.defaultOpenItems],\n    ),\n    initialState: emptyImmutableSet,\n  });\n  const updateOpenItems = useEventCallback((data: TreeOpenChangeData) =>\n    setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n  );\n  return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems(\n  data: TreeOpenChangeData,\n  previousOpenItems: ImmutableSet<TreeItemId>,\n): ImmutableSet<TreeItemId> {\n  const id = data.target.id;\n  const previousOpenItemsHasId = previousOpenItems.has(id);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = createImmutableSet(previousOpenItems);\n  return data.open ? nextOpenItems.add(id) : nextOpenItems.delete(id);\n}\n"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ;AACvD,YAAYC,KAAA,MAAW;AACvB,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB;AAIpE,OAAO,SAASC,kBAAkBC,KAAwD,EAAE;EAC1F,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGR,oBAAA,CAAqB;IACrDS,KAAA,EAAOP,KAAA,CAAMQ,OAAO,CAAC,MAAMJ,KAAA,CAAMC,SAAS,IAAIJ,kBAAA,CAAmBG,KAAA,CAAMC,SAAS,GAAG,CAACD,KAAA,CAAMC,SAAS,CAAC;IACpGI,YAAA,EAAcT,KAAA,CAAMQ,OAAO,CACzB,MAAMJ,KAAA,CAAMM,gBAAgB,IAAIT,kBAAA,CAAmBG,KAAA,CAAMM,gBAAgB,GACzE,CAACN,KAAA,CAAMM,gBAAgB,CAAC;IAE1BC,YAAA,EAAcT;EAChB;EACA,MAAMU,eAAA,GAAkBb,gBAAA,CAAkBc,IAAA,IACxCP,YAAA,CAAaQ,gBAAA,IAAoBC,mBAAA,CAAoBF,IAAA,EAAMC,gBAAA;EAE7D,OAAO,CAACT,SAAA,EAAWO,eAAA,CAAgB;AACrC;AAEA,SAASG,oBACPF,IAAwB,EACxBG,iBAA2C,EACjB;EAC1B,MAAMC,EAAA,GAAKJ,IAAA,CAAKK,MAAM,CAACD,EAAE;EACzB,MAAME,sBAAA,GAAyBH,iBAAA,CAAkBI,GAAG,CAACH,EAAA;EACrD,IAAIJ,IAAA,CAAKQ,IAAI,GAAGF,sBAAA,GAAyB,CAACA,sBAAsB,EAAE;IAChE,OAAOH,iBAAA;EACT;EACA,MAAMM,aAAA,GAAgBrB,kBAAA,CAAmBe,iBAAA;EACzC,OAAOH,IAAA,CAAKQ,IAAI,GAAGC,aAAA,CAAcC,GAAG,CAACN,EAAA,IAAMK,aAAA,CAAcE,MAAM,CAACP,EAAA,CAAG;AACrE"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Tree,\n  treeClassNames,\n  renderTree_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n  useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n  TreeProps,\n  TreeState,\n  TreeSlots,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeNavigationEvent_unstable,\n  TreeNavigationData_unstable,\n  TreeItemId,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n  TreeItem,\n  treeItemClassNames,\n  renderTreeItem_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n  TreeItemLayout,\n  treeItemLayoutClassNames,\n  renderTreeItemLayout_unstable,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n  TreeItemPersonaLayout,\n  treeItemPersonaLayoutClassNames,\n  renderTreeItemPersonaLayout_unstable,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB;AAYP,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ;AAGrG,SAASC,kBAAkB,QAAQ;AAEnC,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf;AAGP,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAGP,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B;AAOP,SAASC,oBAAoB,QAAQ;AAGrC,SAASC,oBAAoB,QAAQ"}
+{"version":3,"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Tree,\n  treeClassNames,\n  renderTree_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n  useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n  TreeProps,\n  TreeState,\n  TreeSlots,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeNavigationEvent_unstable,\n  TreeNavigationData_unstable,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n  TreeItem,\n  treeItemClassNames,\n  renderTreeItem_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemId, TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n  TreeItemLayout,\n  treeItemLayoutClassNames,\n  renderTreeItemLayout_unstable,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n  TreeItemPersonaLayout,\n  treeItemPersonaLayoutClassNames,\n  renderTreeItemPersonaLayout_unstable,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB;AAWP,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ;AAGrG,SAASC,kBAAkB,QAAQ;AAEnC,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf;AAGP,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAGP,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B;AAOP,SAASC,oBAAoB,QAAQ;AAGrC,SAASC,oBAAoB,QAAQ"}

package/lib/utils/{createUnfilteredFlatTree.js → createFlatTreeItems.js}

@@ -1,13 +1,13 @@
 /**
  * creates a list of flat tree items
  * and provides a map to access each item by id
- */export function createUnfilteredFlatTree(flatTreeItemProps) {
-  const root = createRootFlatTreeItem();
-  const itemsPerId = new Map([[root.id, root]]);
+ */export function createFlatTreeItems(flatTreeItemProps) {
+  const root = createFlatTreeRootItem();
+  const itemsPerId = new Map([[flatTreeRootId, root]]);
   const items = [];
   for (let index = 0; index < flatTreeItemProps.length; index++) {
     const {
-      parentId = flatTreeRootParentId,
+      parentId = flatTreeRootId,
       ...treeItemProps
     } = flatTreeItemProps[index];
     const nextItemProps = flatTreeItemProps[index + 1];
@@ -15,7 +15,7 @@
     if (!currentParent) {
       if (process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line no-console
-        console.error(`useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`);
+        console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);
       }
       break;
     }
@@ -41,21 +41,24 @@
     items.push(flatTreeItem);
   }
   return {
-    items,
-    itemsPerId
+    root,
+    size: items.length,
+    getByIndex: index => items[index],
+    get: id => itemsPerId.get(id),
+    set: (id, value) => itemsPerId.set(id, value)
   };
 }
-export const flatTreeRootParentId = '__fuiFlatTreeRoot';
-function createRootFlatTreeItem() {
+export const flatTreeRootId = '__fuiFlatTreeRoot';
+function createFlatTreeRootItem() {
   return {
-    id: flatTreeRootParentId,
+    id: flatTreeRootId,
     getTreeItemProps: () => {
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
       }
       return {
-        id: flatTreeRootParentId,
+        id: flatTreeRootId,
         'aria-setsize': -1,
         'aria-level': -1,
         'aria-posinset': -1,
@@ -64,7 +67,7 @@ function createRootFlatTreeItem() {
     },
     childrenSize: 0,
     get index() {
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
       }
@@ -73,4 +76,34 @@ function createRootFlatTreeItem() {
     level: 0
   };
 }
-//# sourceMappingURL=createUnfilteredFlatTree.js.map
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
+  for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
+    const item = flatTreeItems.getByIndex(index);
+    var _flatTreeItems_get;
+    const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
+    if (isItemVisible(item, openItems, flatTreeItems)) {
+      item.index = visibleIndex++;
+      yield item;
+    } else {
+      index += parent.childrenSize - 1 + item.childrenSize;
+    }
+  }
+}
+function isItemVisible(item, openItems, flatTreeItems) {
+  if (item.level === 1) {
+    return true;
+  }
+  while (item.parentId && item.parentId !== flatTreeItems.root.id) {
+    if (!openItems.has(item.parentId)) {
+      return false;
+    }
+    const parent = flatTreeItems.get(item.parentId);
+    if (!parent) {
+      return false;
+    }
+    item = parent;
+  }
+  return true;
+}
+//# sourceMappingURL=createFlatTreeItems.js.map

package/lib/utils/createFlatTreeItems.js.map

@@ -0,0 +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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"}

package/lib-commonjs/hooks/useFlatTree.js

@@ -9,20 +9,16 @@ Object.defineProperty(exports, "useFlatTree_unstable", {
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _reactUtilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _createUnfilteredFlatTree = require("../utils/createUnfilteredFlatTree");
-const _createVisibleFlatTree = require("../utils/createVisibleFlatTree");
+const _createFlatTreeItems = require("../utils/createFlatTreeItems");
+const _tokens = require("../utils/tokens");
 const _useFlatTreeNavigation = require("./useFlatTreeNavigation");
 const _useOpenItemsState = require("./useOpenItemsState");
-function useFlatTree_unstable(items, options = {}) {
+function useFlatTree_unstable(flatTreeItemProps, options = {}) {
     const [openItems, updateOpenItems] = (0, _useOpenItemsState.useOpenItemsState)(options);
-    const unfilteredFlatTree = _react.useMemo(()=>(0, _createUnfilteredFlatTree.createUnfilteredFlatTree)(items), [
-        items
-    ]);
-    const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(unfilteredFlatTree);
-    const visibleFlatTree = _react.useMemo(()=>(0, _createVisibleFlatTree.createVisibleFlatTree)(unfilteredFlatTree, openItems), [
-        unfilteredFlatTree,
-        openItems
+    const flatTreeItems = _react.useMemo(()=>(0, _createFlatTreeItems.createFlatTreeItems)(flatTreeItemProps), [
+        flatTreeItemProps
     ]);
+    const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(flatTreeItems);
     const handleOpenChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
         event.preventDefault();
         updateOpenItems(data);
@@ -31,20 +27,52 @@ function useFlatTree_unstable(items, options = {}) {
         event.preventDefault();
         navigate(data);
     });
-    var _unfilteredFlatTree_itemsPerId_get;
-    const flatTree = {
-        ...visibleFlatTree,
-        getTreeProps: ()=>({
-                ref: navigationRef,
-                openItems,
-                onOpenChange: handleOpenChange,
-                // eslint-disable-next-line @typescript-eslint/naming-convention
-                onNavigation_unstable: handleNavigation
-            }),
+    const getNextNavigableItem = (0, _reactUtilities.useEventCallback)((visibleItems, data)=>{
+        const item = flatTreeItems.get(data.target.id);
+        if (item) {
+            switch(data.type){
+                case _tokens.treeDataTypes.typeAhead:
+                    return item;
+                case _tokens.treeDataTypes.arrowLeft:
+                    return flatTreeItems.get(item.parentId);
+                case _tokens.treeDataTypes.arrowRight:
+                    return visibleItems[item.index + 1];
+                case _tokens.treeDataTypes.end:
+                    return visibleItems[visibleItems.length - 1];
+                case _tokens.treeDataTypes.home:
+                    return visibleItems[0];
+                case _tokens.treeDataTypes.arrowDown:
+                    return visibleItems[item.index + 1];
+                case _tokens.treeDataTypes.arrowUp:
+                    return visibleItems[item.index - 1];
+            }
+        }
+    });
+    const getTreeProps = _react.useCallback(()=>({
+            ref: navigationRef,
+            openItems,
+            onOpenChange: handleOpenChange,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            onNavigation_unstable: handleNavigation
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        openItems
+    ]);
+    const items = _react.useCallback(()=>(0, _createFlatTreeItems.VisibleFlatTreeItemGenerator)(openItems, flatTreeItems), [
+        openItems,
+        flatTreeItems
+    ]);
+    return _react.useMemo(()=>({
+            navigate,
+            getTreeProps,
+            getNextNavigableItem,
+            items
+        }), [
         navigate,
-        getItem: (id)=>(_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(id)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null
-    };
-    return flatTree;
+        getTreeProps,
+        getNextNavigableItem,
+        items
+    ]);
 } //# sourceMappingURL=useFlatTree.js.map
 
 //# sourceMappingURL=useFlatTree.js.map

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 { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { createVisibleFlatTree } from '../utils/createVisibleFlatTree';\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 items - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(items, options = {}) {\n  const [openItems, updateOpenItems] = useOpenItemsState(options);\n  const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);\n  const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);\n  const visibleFlatTree = React.useMemo(() => createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);\n  const handleOpenChange = useEventCallback((event, data) => {\n    event.preventDefault();\n    updateOpenItems(data);\n  });\n  const handleNavigation = useEventCallback((event, data) => {\n    event.preventDefault();\n    navigate(data);\n  });\n  var _unfilteredFlatTree_itemsPerId_get;\n  const flatTree = {\n    ...visibleFlatTree,\n    getTreeProps: () => ({\n      ref: navigationRef,\n      openItems,\n      onOpenChange: handleOpenChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation\n    }),\n    navigate,\n    getItem: id => (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(id)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null\n  };\n  return flatTree;\n}\n//# sourceMappingURL=useFlatTree.js.map"],"names":["useFlatTree_unstable","items","options","openItems","updateOpenItems","useOpenItemsState","unfilteredFlatTree","React","useMemo","createUnfilteredFlatTree","navigate","navigationRef","useFlatTreeNavigation","visibleFlatTree","createVisibleFlatTree","handleOpenChange","useEventCallback","event","data","preventDefault","handleNavigation","_unfilteredFlatTree_itemsPerId_get","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","itemsPerId","get"],"mappings":";;;;+BAkBgBA;;aAAAA;;;gCAlBiB;6DACV;0CACkB;uCACH;uCACA;mCACJ;AAa3B,SAASA,qBAAqBC,KAAK,EAAEC,UAAU,CAAC,CAAC,EAAE;IACxD,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,qBAAqBC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,kDAAwB,EAACR,QAAQ;QAACA;KAAM;IACvF,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,kBAAkBN,OAAMC,OAAO,CAAC,IAAMM,IAAAA,4CAAqB,EAACR,oBAAoBH,YAAY;QAACG;QAAoBH;KAAU;IACjI,MAAMY,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBf,gBAAgBc;IAClB;IACA,MAAME,mBAAmBJ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBT,SAASQ;IACX;IACA,IAAIG;IACJ,MAAMC,WAAW;QACf,GAAGT,eAAe;QAClBU,cAAc,IAAO,CAAA;gBACnBC,KAAKb;gBACLR;gBACAsB,cAAcV;gBACd,gEAAgE;gBAChEW,uBAAuBN;YACzB,CAAA;QACAV;QACAiB,SAASC,CAAAA,KAAM,AAACP,CAAAA,qCAAqCf,mBAAmBuB,UAAU,CAACC,GAAG,CAACF,GAAE,MAAO,IAAI,IAAIP,uCAAuC,KAAK,IAAIA,qCAAqC,IAAI;IACnM;IACA,OAAOC;AACT,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    event.preventDefault();\n    updateOpenItems(data);\n  });\n  const handleNavigation = useEventCallback((event, data) => {\n    event.preventDefault();\n    navigate(data);\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","preventDefault","handleNavigation","getNextNavigableItem","visibleItems","item","get","target","id","type","treeDataTypes","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","onOpenChange","onNavigation_unstable","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;QACzDD,MAAME,cAAc;QACpBb,gBAAgBY;IAClB;IACA,MAAME,mBAAmBJ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBP,SAASM;IACX;IACA,MAAMG,uBAAuBL,IAAAA,gCAAgB,EAAC,CAACM,cAAcJ,OAAS;QACpE,MAAMK,OAAOf,cAAcgB,GAAG,CAACN,KAAKO,MAAM,CAACC,EAAE;QAC7C,IAAIH,MAAM;YACR,OAAQL,KAAKS,IAAI;gBACf,KAAKC,qBAAa,CAACC,SAAS;oBAC1B,OAAON;gBACT,KAAKK,qBAAa,CAACE,SAAS;oBAC1B,OAAOtB,cAAcgB,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,eAAe9B,OAAM+B,WAAW,CAAC,IAAO,CAAA;YAC5CC,KAAK5B;YACLR;YACAqC,cAAc3B;YACd,gEAAgE;YAChE4B,uBAAuBvB;QACzB,CAAA,GACA,uDAAuD;IACvD;QAACf;KAAU;IACX,MAAMuC,QAAQnC,OAAM+B,WAAW,CAAC,IAAMK,IAAAA,iDAA4B,EAACxC,WAAWG,gBAAgB;QAACH;QAAWG;KAAc;IACxH,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAC1BE;YACA2B;YACAlB;YACAuB;QACF,CAAA,GAAI;QAAChC;QAAU2B;QAAclB;QAAsBuB;KAAM;AAC3D,EACA,uCAAuC"}

package/lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -13,7 +13,7 @@ const _tokens = require("../utils/tokens");
 const _treeItemFilter = require("../utils/treeItemFilter");
 const _useHTMLElementWalker = require("./useHTMLElementWalker");
 const _useRovingTabIndexes = require("./useRovingTabIndexes");
-function useFlatTreeNavigation(flatTree) {
+function useFlatTreeNavigation(flatTreeItems) {
     const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
     const [treeItemWalkerRef, treeItemWalkerRootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
     const [{ rove  }, rovingRootRef] = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
@@ -29,7 +29,7 @@ function useFlatTreeNavigation(flatTree) {
                 treeItemWalker.currentElement = data.target;
                 return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
             case _tokens.treeDataTypes.arrowLeft:
-                return parentElement(flatTree, data.target, targetDocument);
+                return parentElement(flatTreeItems, data.target, targetDocument);
             case _tokens.treeDataTypes.arrowRight:
                 treeItemWalker.currentElement = data.target;
                 return firstChild(data.target, treeItemWalker);
@@ -47,12 +47,12 @@ function useFlatTreeNavigation(flatTree) {
                 return treeItemWalker.previousElement();
         }
     }
-    function navigate(data) {
+    const navigate = (0, _reactUtilities.useEventCallback)((data)=>{
         const nextElement = getNextElement(data);
         if (nextElement) {
             rove(nextElement);
         }
-    }
+    });
     return [
         navigate,
         (0, _reactUtilities.useMergedRefs)(treeItemWalkerRootRef, rovingRootRef)
@@ -71,8 +71,8 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(flatTree, target, document) {
-    const flatTreeItem = flatTree.itemsPerId.get(target.id);
+function parentElement(flatTreeItems, target, document) {
+    const flatTreeItem = flatTreeItems.get(target.id);
     if (flatTreeItem && flatTreeItem.parentId) {
         return document.getElementById(flatTreeItem.parentId);
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/hooks/useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nexport function useFlatTreeNavigation(flatTree) {\n  const {\n    targetDocument\n  } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{\n    rove\n  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  function getNextElement(data) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        return parentElement(flatTree, data.target, targetDocument);\n      case treeDataTypes.arrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.end:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.arrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.arrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  function navigate(data) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];\n}\nfunction firstChild(target, treeWalker) {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\nfunction parentElement(flatTree, target, document) {\n  const flatTreeItem = flatTree.itemsPerId.get(target.id);\n  if (flatTreeItem && flatTreeItem.parentId) {\n    return document.getElementById(flatTreeItem.parentId);\n  }\n  return null;\n}\n//# sourceMappingURL=useFlatTreeNavigation.js.map"],"names":["useFlatTreeNavigation","flatTree","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","click","target","typeAhead","currentElement","nextTypeAheadElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","itemsPerId","get","id","parentId","getElementById"],"mappings":";;;;+BAOgBA;;aAAAA;;qCAPmB;gCACL;sCACO;wBACP;gCACC;sCACS;qCACN;AAC3B,SAASA,sBAAsBC,QAAQ,EAAE;IAC9C,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAkB;IACtB,MAAM,CAACC,mBAAmBC,sBAAsB,GAAGC,IAAAA,6CAAuB,EAACC,8BAAc;IACzF,MAAM,CAAC,EACLC,KAAI,EACL,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACH,8BAAc;IACpD,SAASI,eAAeC,IAAI,EAAE;QAC5B,IAAI,CAACV,kBAAkB,CAACE,kBAAkBS,OAAO,EAAE;YACjD,OAAO,IAAI;QACb,CAAC;QACD,MAAMC,iBAAiBV,kBAAkBS,OAAO;QAChD,OAAQD,KAAKG,IAAI;YACf,KAAKC,qBAAa,CAACC,KAAK;gBACtB,OAAOL,KAAKM,MAAM;YACpB,KAAKF,qBAAa,CAACG,SAAS;gBAC1BL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC5D,KAAKP,qBAAa,CAACQ,SAAS;gBAC1B,OAAOC,cAAcxB,UAAUW,KAAKM,MAAM,EAAEhB;YAC9C,KAAKc,qBAAa,CAACU,UAAU;gBAC3BZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOS,WAAWf,KAAKM,MAAM,EAAEJ;YACjC,KAAKE,qBAAa,CAACY,GAAG;gBACpBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAegB,SAAS;YACjC,KAAKd,qBAAa,CAACe,IAAI;gBACrBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YAClC,KAAKX,qBAAa,CAACgB,SAAS;gBAC1BlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACnC,KAAKjB,qBAAa,CAACkB,OAAO;gBACxBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QACzC;IACF;IACA,SAASC,SAASxB,IAAI,EAAE;QACtB,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACfzB,KAAKyB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUC,IAAAA,6BAAa,EAAChC,uBAAuBI;KAAe;AACxE;AACA,SAASkB,WAAWT,MAAM,EAAEoB,UAAU,EAAE;IACtC,MAAML,cAAcK,WAAWL,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO,IAAI;IACb,CAAC;IACD,MAAMM,0BAA0BN,YAAYO,YAAY,CAAC;IACzD,MAAMC,uBAAuBR,YAAYO,YAAY,CAAC;IACtD,MAAME,kBAAkBxB,OAAOsB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOT;IACT,CAAC;IACD,OAAO,IAAI;AACb;AACA,SAASR,cAAcxB,QAAQ,EAAEiB,MAAM,EAAE0B,QAAQ,EAAE;IACjD,MAAMC,eAAe5C,SAAS6C,UAAU,CAACC,GAAG,CAAC7B,OAAO8B,EAAE;IACtD,IAAIH,gBAAgBA,aAAaI,QAAQ,EAAE;QACzC,OAAOL,SAASM,cAAc,CAACL,aAAaI,QAAQ;IACtD,CAAC;IACD,OAAO,IAAI;AACb,EACA,iDAAiD"}
+{"version":3,"sources":["../../lib/hooks/useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nexport function useFlatTreeNavigation(flatTreeItems) {\n  const {\n    targetDocument\n  } = useFluent_unstable();\n  const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n  const [{\n    rove\n  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  function getNextElement(data) {\n    if (!targetDocument || !treeItemWalkerRef.current) {\n      return null;\n    }\n    const treeItemWalker = treeItemWalkerRef.current;\n    switch (data.type) {\n      case treeDataTypes.click:\n        return data.target;\n      case treeDataTypes.typeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.arrowLeft:\n        return parentElement(flatTreeItems, data.target, targetDocument);\n      case treeDataTypes.arrowRight:\n        treeItemWalker.currentElement = data.target;\n        return firstChild(data.target, treeItemWalker);\n      case treeDataTypes.end:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.lastChild();\n      case treeDataTypes.home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.arrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.arrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  }\n  const navigate = useEventCallback(data => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];\n}\nfunction firstChild(target, treeWalker) {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\nfunction parentElement(flatTreeItems, target, document) {\n  const flatTreeItem = flatTreeItems.get(target.id);\n  if (flatTreeItem && flatTreeItem.parentId) {\n    return document.getElementById(flatTreeItem.parentId);\n  }\n  return null;\n}\n//# sourceMappingURL=useFlatTreeNavigation.js.map"],"names":["useFlatTreeNavigation","flatTreeItems","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","click","target","typeAhead","currentElement","nextTypeAheadElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","get","id","parentId","getElementById"],"mappings":";;;;+BAOgBA;;aAAAA;;qCAPmB;gCACa;sCACX;wBACP;gCACC;sCACS;qCACN;AAC3B,SAASA,sBAAsBC,aAAa,EAAE;IACnD,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAkB;IACtB,MAAM,CAACC,mBAAmBC,sBAAsB,GAAGC,IAAAA,6CAAuB,EAACC,8BAAc;IACzF,MAAM,CAAC,EACLC,KAAI,EACL,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACH,8BAAc;IACpD,SAASI,eAAeC,IAAI,EAAE;QAC5B,IAAI,CAACV,kBAAkB,CAACE,kBAAkBS,OAAO,EAAE;YACjD,OAAO,IAAI;QACb,CAAC;QACD,MAAMC,iBAAiBV,kBAAkBS,OAAO;QAChD,OAAQD,KAAKG,IAAI;YACf,KAAKC,qBAAa,CAACC,KAAK;gBACtB,OAAOL,KAAKM,MAAM;YACpB,KAAKF,qBAAa,CAACG,SAAS;gBAC1BL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC5D,KAAKP,qBAAa,CAACQ,SAAS;gBAC1B,OAAOC,cAAcxB,eAAeW,KAAKM,MAAM,EAAEhB;YACnD,KAAKc,qBAAa,CAACU,UAAU;gBAC3BZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOS,WAAWf,KAAKM,MAAM,EAAEJ;YACjC,KAAKE,qBAAa,CAACY,GAAG;gBACpBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAegB,SAAS;YACjC,KAAKd,qBAAa,CAACe,IAAI;gBACrBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YAClC,KAAKX,qBAAa,CAACgB,SAAS;gBAC1BlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACnC,KAAKjB,qBAAa,CAACkB,OAAO;gBACxBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QACzC;IACF;IACA,MAAMC,WAAWC,IAAAA,gCAAgB,EAACzB,CAAAA,OAAQ;QACxC,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACfzB,KAAKyB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUE,IAAAA,6BAAa,EAACjC,uBAAuBI;KAAe;AACxE;AACA,SAASkB,WAAWT,MAAM,EAAEqB,UAAU,EAAE;IACtC,MAAMN,cAAcM,WAAWN,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO,IAAI;IACb,CAAC;IACD,MAAMO,0BAA0BP,YAAYQ,YAAY,CAAC;IACzD,MAAMC,uBAAuBT,YAAYQ,YAAY,CAAC;IACtD,MAAME,kBAAkBzB,OAAOuB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOV;IACT,CAAC;IACD,OAAO,IAAI;AACb;AACA,SAASR,cAAcxB,aAAa,EAAEiB,MAAM,EAAE2B,QAAQ,EAAE;IACtD,MAAMC,eAAe7C,cAAc8C,GAAG,CAAC7B,OAAO8B,EAAE;IAChD,IAAIF,gBAAgBA,aAAaG,QAAQ,EAAE;QACzC,OAAOJ,SAASK,cAAc,CAACJ,aAAaG,QAAQ;IACtD,CAAC;IACD,OAAO,IAAI;AACb,EACA,iDAAiD"}

package/lib-commonjs/utils/{createUnfilteredFlatTree.js → createFlatTreeItems.js}

@@ -12,26 +12,27 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    createUnfilteredFlatTree: ()=>createUnfilteredFlatTree,
-    flatTreeRootParentId: ()=>flatTreeRootParentId
+    createFlatTreeItems: ()=>createFlatTreeItems,
+    flatTreeRootId: ()=>flatTreeRootId,
+    VisibleFlatTreeItemGenerator: ()=>VisibleFlatTreeItemGenerator
 });
-function createUnfilteredFlatTree(flatTreeItemProps) {
-    const root = createRootFlatTreeItem();
+function createFlatTreeItems(flatTreeItemProps) {
+    const root = createFlatTreeRootItem();
     const itemsPerId = new Map([
         [
-            root.id,
+            flatTreeRootId,
             root
         ]
     ]);
     const items = [];
     for(let index = 0; index < flatTreeItemProps.length; index++){
-        const { parentId =flatTreeRootParentId , ...treeItemProps } = flatTreeItemProps[index];
+        const { parentId =flatTreeRootId , ...treeItemProps } = flatTreeItemProps[index];
         const nextItemProps = flatTreeItemProps[index + 1];
         const currentParent = itemsPerId.get(parentId);
         if (!currentParent) {
             if (process.env.NODE_ENV === 'development') {
                 // eslint-disable-next-line no-console
-                console.error(`useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`);
+                console.error(`useFlatTree: item ${flatTreeItemProps[index].id} is wrongly positioned, did you properly ordered provided item props? make sure provided items are organized`);
             }
             break;
         }
@@ -57,21 +58,24 @@ function createUnfilteredFlatTree(flatTreeItemProps) {
         items.push(flatTreeItem);
     }
     return {
-        items,
-        itemsPerId
+        root,
+        size: items.length,
+        getByIndex: (index)=>items[index],
+        get: (id)=>itemsPerId.get(id),
+        set: (id, value)=>itemsPerId.set(id, value)
     };
 }
-const flatTreeRootParentId = '__fuiFlatTreeRoot';
-function createRootFlatTreeItem() {
+const flatTreeRootId = '__fuiFlatTreeRoot';
+function createFlatTreeRootItem() {
     return {
-        id: flatTreeRootParentId,
+        id: flatTreeRootId,
         getTreeItemProps: ()=>{
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV !== 'production') {
                 // eslint-disable-next-line no-console
                 console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
             }
             return {
-                id: flatTreeRootParentId,
+                id: flatTreeRootId,
                 'aria-setsize': -1,
                 'aria-level': -1,
                 'aria-posinset': -1,
@@ -80,7 +84,7 @@ function createRootFlatTreeItem() {
         },
         childrenSize: 0,
         get index () {
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV !== 'production') {
                 // eslint-disable-next-line no-console
                 console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
             }
@@ -88,6 +92,35 @@ function createRootFlatTreeItem() {
         },
         level: 0
     };
-} //# sourceMappingURL=createUnfilteredFlatTree.js.map
+}
+function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
+    for(let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++){
+        const item = flatTreeItems.getByIndex(index);
+        var _flatTreeItems_get;
+        const parent = item.parentId ? (_flatTreeItems_get = flatTreeItems.get(item.parentId)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
+        if (isItemVisible(item, openItems, flatTreeItems)) {
+            item.index = visibleIndex++;
+            yield item;
+        } else {
+            index += parent.childrenSize - 1 + item.childrenSize;
+        }
+    }
+}
+function isItemVisible(item, openItems, flatTreeItems) {
+    if (item.level === 1) {
+        return true;
+    }
+    while(item.parentId && item.parentId !== flatTreeItems.root.id){
+        if (!openItems.has(item.parentId)) {
+            return false;
+        }
+        const parent = flatTreeItems.get(item.parentId);
+        if (!parent) {
+            return false;
+        }
+        item = parent;
+    }
+    return true;
+} //# sourceMappingURL=createFlatTreeItems.js.map
 
-//# sourceMappingURL=createUnfilteredFlatTree.js.map
+//# sourceMappingURL=createFlatTreeItems.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.0.0-beta.6",
+  "version": "9.0.0-beta.7",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,13 +37,13 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.2",
     "@fluentui/react-aria": "^9.3.15",
-    "@fluentui/react-avatar": "^9.4.5",
-    "@fluentui/react-button": "^9.3.5",
+    "@fluentui/react-avatar": "^9.4.6",
+    "@fluentui/react-button": "^9.3.6",
     "@fluentui/react-context-selector": "^9.1.15",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-portal": "^9.2.2",
-    "@fluentui/react-shared-contexts": "^9.3.2",
-    "@fluentui/react-tabster": "^9.6.1",
+    "@fluentui/react-portal": "^9.2.3",
+    "@fluentui/react-shared-contexts": "^9.3.3",
+    "@fluentui/react-tabster": "^9.6.2",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.7.2",
     "@griffel/react": "^1.5.2",

package/lib/utils/createUnfilteredFlatTree.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createUnfilteredFlatTree","flatTreeItemProps","root","createRootFlatTreeItem","itemsPerId","Map","id","items","index","length","parentId","flatTreeRootParentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push"],"sources":["../../src/utils/createUnfilteredFlatTree.ts"],"sourcesContent":["import { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type UnfilteredFlatTree = {\n  items: FlatTreeItem[];\n  itemsPerId: Map<string, 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 createUnfilteredFlatTree(flatTreeItemProps: FlatTreeItemProps[]): UnfilteredFlatTree {\n  const root = createRootFlatTreeItem();\n  const itemsPerId = new Map<string, FlatTreeItem>([[root.id, root]]);\n  const items: FlatTreeItem[] = [];\n\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const { parentId = flatTreeRootParentId, ...treeItemProps } = flatTreeItemProps[index];\n\n    const nextItemProps = flatTreeItemProps[index + 1] as FlatTreeItemProps | undefined;\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} not properly initialized, 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 { items, itemsPerId };\n}\n\nexport const flatTreeRootParentId = '__fuiFlatTreeRoot';\n\nfunction createRootFlatTreeItem(): FlatTreeItem {\n  return {\n    id: flatTreeRootParentId,\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV === 'development') {\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: flatTreeRootParentId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n    },\n    childrenSize: 0,\n    get index() {\n      if (process.env.NODE_ENV === 'development') {\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"],"mappings":"AAUA;;;GAIA,OAAO,SAASA,yBAAyBC,iBAAsC,EAAsB;EACnG,MAAMC,IAAA,GAAOC,sBAAA;EACb,MAAMC,UAAA,GAAa,IAAIC,GAAA,CAA0B,CAAC,CAACH,IAAA,CAAKI,EAAE,EAAEJ,IAAA,CAAK,CAAC;EAClE,MAAMK,KAAA,GAAwB,EAAE;EAEhC,KAAK,IAAIC,KAAA,GAAQ,GAAGA,KAAA,GAAQP,iBAAA,CAAkBQ,MAAM,EAAED,KAAA,IAAS;IAC7D,MAAM;MAAEE,QAAA,GAAWC,oBAAA;MAAsB,GAAGC;IAAA,CAAe,GAAGX,iBAAiB,CAACO,KAAA,CAAM;IAEtF,MAAMK,aAAA,GAAgBZ,iBAAiB,CAACO,KAAA,GAAQ,EAAE;IAClD,MAAMM,aAAA,GAAgBV,UAAA,CAAWW,GAAG,CAACL,QAAA;IACrC,IAAI,CAACI,aAAA,EAAe;MAClB,IAAIE,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CACV,qBAAoBnB,iBAAiB,CAACO,KAAA,CAAM,CAACF,EAAG,mEAAkE;MAEvH;MACA;IACF;IACA,MAAMe,MAAA,GAAS,CAAAR,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeH,QAAQ,MAAKE,aAAA,CAAcN,EAAE;QACrCgB,oBAAA;IAAtB,MAAMC,YAAA,GAAe,CAAC,CAAAD,oBAAA,GAAAR,aAAA,CAAcU,KAAK,cAAnBF,oBAAA,cAAAA,oBAAA,GAAuB,CAAC,IAAI;IAClD,MAAMG,mBAAA,GAAsB,EAAEX,aAAA,CAAcY,YAAY;IAExD,MAAMC,YAAA,GAA6B;MACjCrB,EAAA,EAAIM,aAAA,CAAcN,EAAE;MACpBsB,gBAAA,EAAkBA,CAAA,MAAO;QACvB,GAAGhB,aAAa;QAChB,cAAcW,YAAA;QACd,iBAAiBE,mBAAA;QACjB,gBAAgBX,aAAA,CAAcY,YAAY;QAC1CG,IAAA,EAAMR;MACR;MACAG,KAAA,EAAOD,YAAA;MACPb,QAAA;MACAgB,YAAA,EAAc;MACdlB,KAAA,EAAO,CAAC;IACV;IACAJ,UAAA,CAAW0B,GAAG,CAACH,YAAA,CAAarB,EAAE,EAAEqB,YAAA;IAChCpB,KAAA,CAAMwB,IAAI,CAACJ,YAAA;EACb;EAEA,OAAO;IAAEpB,KAAA;IAAOH;EAAW;AAC7B;AAEA,OAAO,MAAMO,oBAAA,GAAuB;AAEpC,SAASR,uBAAA,EAAuC;EAC9C,OAAO;IACLG,EAAA,EAAIK,oBAAA;IACJiB,gBAAA,EAAkBA,CAAA,KAAM;MACtB,IAAIZ,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CAAC;MAChB;MACA,OAAO;QAAEd,EAAA,EAAIK,oBAAA;QAAsB,gBAAgB,CAAC;QAAG,cAAc,CAAC;QAAG,iBAAiB,CAAC;QAAGkB,IAAA,EAAM;MAAK;IAC3G;IACAH,YAAA,EAAc;IACd,IAAIlB,MAAA,EAAQ;MACV,IAAIQ,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CAAC;MAChB;MACA,OAAO,CAAC;IACV;IACAI,KAAA,EAAO;EACT;AACF"}

package/lib/utils/createVisibleFlatTree.js

@@ -1,83 +0,0 @@
-import { flatTreeRootParentId } from './createUnfilteredFlatTree';
-import { treeDataTypes } from './tokens';
-/**
- * creates methods that depend on the unfilteredFlatTree and the current available openItems
- */
-export function createVisibleFlatTree(unfilteredFlatTree, openItems) {
-  let visibleItems = null;
-  const getNextNavigableItem = data => {
-    const item = unfilteredFlatTree.itemsPerId.get(data.target.id);
-    if (!item || !visibleItems) {
-      return null;
-    }
-    switch (data.type) {
-      case treeDataTypes.arrowLeft:
-        var _unfilteredFlatTree_itemsPerId_get;
-        return item.parentId ? (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(item.parentId)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null : null;
-      case treeDataTypes.arrowRight:
-        var _visibleItems_;
-        return (_visibleItems_ = visibleItems[item.index + 1]) !== null && _visibleItems_ !== void 0 ? _visibleItems_ : null;
-      case treeDataTypes.end:
-        return visibleItems[visibleItems.length - 1];
-      case treeDataTypes.home:
-        return visibleItems[0];
-      case treeDataTypes.arrowDown:
-        var _visibleItems_1;
-        return (_visibleItems_1 = visibleItems[item.index + 1]) !== null && _visibleItems_1 !== void 0 ? _visibleItems_1 : null;
-      case treeDataTypes.arrowUp:
-        var _visibleItems_2;
-        return (_visibleItems_2 = visibleItems[item.index - 1]) !== null && _visibleItems_2 !== void 0 ? _visibleItems_2 : null;
-      default:
-        return null;
-    }
-  };
-  function* makeVisibleItemsGenerator() {
-    visibleItems = [];
-    for (let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++) {
-      const item = unfilteredFlatTree.items[index];
-      var _item_parentId;
-      const parent = unfilteredFlatTree.itemsPerId.get((_item_parentId = item.parentId) !== null && _item_parentId !== void 0 ? _item_parentId : flatTreeRootParentId);
-      if (!parent) {
-        break;
-      }
-      if (isFlatTreeItemVisible(item, {
-        openItems,
-        unfilteredFlatTree
-      })) {
-        item.index = visibleIndex++;
-        visibleItems.push({
-          ...item
-        });
-        yield item;
-      } else {
-        index += parent.childrenSize - 1 + item.childrenSize;
-      }
-    }
-  }
-  return {
-    getNextNavigableItem,
-    items: () => {
-      return visibleItems || makeVisibleItemsGenerator();
-    }
-  };
-}
-function isFlatTreeItemVisible(item, {
-  openItems,
-  unfilteredFlatTree: flatTree
-}) {
-  if (item.level === 1) {
-    return true;
-  }
-  while (item.parentId && item.parentId !== flatTreeRootParentId) {
-    if (!openItems.has(item.parentId)) {
-      return false;
-    }
-    const parent = flatTree.itemsPerId.get(item.parentId);
-    if (!parent) {
-      return false;
-    }
-    item = parent;
-  }
-  return true;
-}
-//# sourceMappingURL=createVisibleFlatTree.js.map

package/lib/utils/createVisibleFlatTree.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["flatTreeRootParentId","treeDataTypes","createVisibleFlatTree","unfilteredFlatTree","openItems","visibleItems","getNextNavigableItem","data","item","itemsPerId","get","target","id","type","arrowLeft","_unfilteredFlatTree_itemsPerId_get","parentId","arrowRight","_visibleItems_","index","end","length","home","arrowDown","_visibleItems_1","arrowUp","_visibleItems_2","makeVisibleItemsGenerator","visibleIndex","items","_item_parentId","parent","isFlatTreeItemVisible","push","childrenSize","flatTree","level","has"],"sources":["../../src/utils/createVisibleFlatTree.ts"],"sourcesContent":["import { FlatTree, FlatTreeItem } from '../hooks/useFlatTree';\nimport { TreeItemId, TreeNavigationData_unstable } from '../Tree';\nimport { flatTreeRootParentId, UnfilteredFlatTree } from './createUnfilteredFlatTree';\nimport { ImmutableSet } from './ImmutableSet';\nimport { treeDataTypes } from './tokens';\n\n/**\n * creates methods that depend on the unfilteredFlatTree and the current available openItems\n */\nexport function createVisibleFlatTree(\n  unfilteredFlatTree: UnfilteredFlatTree,\n  openItems: ImmutableSet<TreeItemId>,\n): Pick<FlatTree, 'items' | 'getNextNavigableItem'> {\n  let visibleItems: FlatTreeItem[] | null = null;\n\n  const getNextNavigableItem = (data: TreeNavigationData_unstable): FlatTreeItem | null => {\n    const item = unfilteredFlatTree.itemsPerId.get(data.target.id);\n    if (!item || !visibleItems) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.arrowLeft:\n        return item.parentId ? unfilteredFlatTree.itemsPerId.get(item.parentId) ?? null : null;\n      case treeDataTypes.arrowRight:\n        return visibleItems[item.index + 1] ?? null;\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] ?? null;\n      case treeDataTypes.arrowUp:\n        return visibleItems[item.index - 1] ?? null;\n      default:\n        return null;\n    }\n  };\n\n  function* makeVisibleItemsGenerator() {\n    visibleItems = [];\n    for (let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++) {\n      const item = unfilteredFlatTree.items[index];\n      const parent = unfilteredFlatTree.itemsPerId.get(item.parentId ?? flatTreeRootParentId);\n      if (!parent) {\n        break;\n      }\n      if (isFlatTreeItemVisible(item, { openItems, unfilteredFlatTree })) {\n        item.index = visibleIndex++;\n        visibleItems.push({ ...item });\n        yield item;\n      } else {\n        index += parent.childrenSize - 1 + item.childrenSize;\n      }\n    }\n  }\n\n  return {\n    getNextNavigableItem,\n    items: () => {\n      return visibleItems || makeVisibleItemsGenerator();\n    },\n  };\n}\n\nfunction isFlatTreeItemVisible(\n  item: FlatTreeItem,\n  {\n    openItems,\n    unfilteredFlatTree: flatTree,\n  }: {\n    openItems: ImmutableSet<TreeItemId>;\n    unfilteredFlatTree: UnfilteredFlatTree;\n  },\n) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentId && item.parentId !== flatTreeRootParentId) {\n    if (!openItems.has(item.parentId)) {\n      return false;\n    }\n    const parent = flatTree.itemsPerId.get(item.parentId);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n\n  return true;\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../lib/utils/createUnfilteredFlatTree.js"],"sourcesContent":["/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */export function createUnfilteredFlatTree(flatTreeItemProps) {\n  const root = createRootFlatTreeItem();\n  const itemsPerId = new Map([[root.id, root]]);\n  const items = [];\n  for (let index = 0; index < flatTreeItemProps.length; index++) {\n    const {\n      parentId = flatTreeRootParentId,\n      ...treeItemProps\n    } = flatTreeItemProps[index];\n    const nextItemProps = flatTreeItemProps[index + 1];\n    const currentParent = itemsPerId.get(parentId);\n    if (!currentParent) {\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`);\n      }\n      break;\n    }\n    const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;\n    var _currentParent_level;\n    const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;\n    const currentChildrenSize = ++currentParent.childrenSize;\n    const flatTreeItem = {\n      id: treeItemProps.id,\n      getTreeItemProps: () => ({\n        ...treeItemProps,\n        'aria-level': currentLevel,\n        'aria-posinset': currentChildrenSize,\n        'aria-setsize': currentParent.childrenSize,\n        leaf: isLeaf\n      }),\n      level: currentLevel,\n      parentId,\n      childrenSize: 0,\n      index: -1\n    };\n    itemsPerId.set(flatTreeItem.id, flatTreeItem);\n    items.push(flatTreeItem);\n  }\n  return {\n    items,\n    itemsPerId\n  };\n}\nexport const flatTreeRootParentId = '__fuiFlatTreeRoot';\nfunction createRootFlatTreeItem() {\n  return {\n    id: flatTreeRootParentId,\n    getTreeItemProps: () => {\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n      }\n      return {\n        id: flatTreeRootParentId,\n        'aria-setsize': -1,\n        'aria-level': -1,\n        'aria-posinset': -1,\n        leaf: true\n      };\n    },\n    childrenSize: 0,\n    get index() {\n      if (process.env.NODE_ENV === 'development') {\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//# sourceMappingURL=createUnfilteredFlatTree.js.map"],"names":["createUnfilteredFlatTree","flatTreeRootParentId","flatTreeItemProps","root","createRootFlatTreeItem","itemsPerId","Map","id","items","index","length","parentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","isLeaf","_currentParent_level","currentLevel","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push"],"mappings":"AAAA;;;CAGC;;;;;;;;;;;IAAkBA,wBAAwB,MAAxBA;IA4CNC,oBAAoB,MAApBA;;AA5CH,SAASD,yBAAyBE,iBAAiB,EAAE;IAC7D,MAAMC,OAAOC;IACb,MAAMC,aAAa,IAAIC,IAAI;QAAC;YAACH,KAAKI,EAAE;YAAEJ;SAAK;KAAC;IAC5C,MAAMK,QAAQ,EAAE;IAChB,IAAK,IAAIC,QAAQ,GAAGA,QAAQP,kBAAkBQ,MAAM,EAAED,QAAS;QAC7D,MAAM,EACJE,UAAWV,qBAAoB,EAC/B,GAAGW,eACJ,GAAGV,iBAAiB,CAACO,MAAM;QAC5B,MAAMI,gBAAgBX,iBAAiB,CAACO,QAAQ,EAAE;QAClD,MAAMK,gBAAgBT,WAAWU,GAAG,CAACJ;QACrC,IAAI,CAACG,eAAe;YAClB,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC,CAAC,kBAAkB,EAAElB,iBAAiB,CAACO,MAAM,CAACF,EAAE,CAAC,iEAAiE,CAAC;YACnI,CAAC;YACD,KAAM;QACR,CAAC;QACD,MAAMc,SAAS,AAACR,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcF,QAAQ,AAAD,MAAOC,cAAcL,EAAE;QAC1H,IAAIe;QACJ,MAAMC,eAAe,AAAC,CAAA,AAACD,CAAAA,uBAAuBR,cAAcU,KAAK,AAAD,MAAO,IAAI,IAAIF,yBAAyB,KAAK,IAAIA,uBAAuB,CAAC,AAAD,IAAK;QAC7I,MAAMG,sBAAsB,EAAEX,cAAcY,YAAY;QACxD,MAAMC,eAAe;YACnBpB,IAAIK,cAAcL,EAAE;YACpBqB,kBAAkB,IAAO,CAAA;oBACvB,GAAGhB,aAAa;oBAChB,cAAcW;oBACd,iBAAiBE;oBACjB,gBAAgBX,cAAcY,YAAY;oBAC1CG,MAAMR;gBACR,CAAA;YACAG,OAAOD;YACPZ;YACAe,cAAc;YACdjB,OAAO,CAAC;QACV;QACAJ,WAAWyB,GAAG,CAACH,aAAapB,EAAE,EAAEoB;QAChCnB,MAAMuB,IAAI,CAACJ;IACb;IACA,OAAO;QACLnB;QACAH;IACF;AACF;AACO,MAAMJ,uBAAuB;AACpC,SAASG,yBAAyB;IAChC,OAAO;QACLG,IAAIN;QACJ2B,kBAAkB,IAAM;YACtB,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO;gBACLb,IAAIN;gBACJ,gBAAgB,CAAC;gBACjB,cAAc,CAAC;gBACf,iBAAiB,CAAC;gBAClB4B,MAAM,IAAI;YACZ;QACF;QACAH,cAAc;QACd,IAAIjB,SAAQ;YACV,IAAIO,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC;YAChB,CAAC;YACD,OAAO,CAAC;QACV;QACAI,OAAO;IACT;AACF,EACA,oDAAoD"}

package/lib-commonjs/utils/createVisibleFlatTree.js

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "createVisibleFlatTree", {
-    enumerable: true,
-    get: ()=>createVisibleFlatTree
-});
-const _createUnfilteredFlatTree = require("./createUnfilteredFlatTree");
-const _tokens = require("./tokens");
-function createVisibleFlatTree(unfilteredFlatTree, openItems) {
-    let visibleItems = null;
-    const getNextNavigableItem = (data)=>{
-        const item = unfilteredFlatTree.itemsPerId.get(data.target.id);
-        if (!item || !visibleItems) {
-            return null;
-        }
-        switch(data.type){
-            case _tokens.treeDataTypes.arrowLeft:
-                var _unfilteredFlatTree_itemsPerId_get;
-                return item.parentId ? (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(item.parentId)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null : null;
-            case _tokens.treeDataTypes.arrowRight:
-                var _visibleItems_;
-                return (_visibleItems_ = visibleItems[item.index + 1]) !== null && _visibleItems_ !== void 0 ? _visibleItems_ : null;
-            case _tokens.treeDataTypes.end:
-                return visibleItems[visibleItems.length - 1];
-            case _tokens.treeDataTypes.home:
-                return visibleItems[0];
-            case _tokens.treeDataTypes.arrowDown:
-                var _visibleItems_1;
-                return (_visibleItems_1 = visibleItems[item.index + 1]) !== null && _visibleItems_1 !== void 0 ? _visibleItems_1 : null;
-            case _tokens.treeDataTypes.arrowUp:
-                var _visibleItems_2;
-                return (_visibleItems_2 = visibleItems[item.index - 1]) !== null && _visibleItems_2 !== void 0 ? _visibleItems_2 : null;
-            default:
-                return null;
-        }
-    };
-    function* makeVisibleItemsGenerator() {
-        visibleItems = [];
-        for(let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++){
-            const item = unfilteredFlatTree.items[index];
-            var _item_parentId;
-            const parent = unfilteredFlatTree.itemsPerId.get((_item_parentId = item.parentId) !== null && _item_parentId !== void 0 ? _item_parentId : _createUnfilteredFlatTree.flatTreeRootParentId);
-            if (!parent) {
-                break;
-            }
-            if (isFlatTreeItemVisible(item, {
-                openItems,
-                unfilteredFlatTree
-            })) {
-                item.index = visibleIndex++;
-                visibleItems.push({
-                    ...item
-                });
-                yield item;
-            } else {
-                index += parent.childrenSize - 1 + item.childrenSize;
-            }
-        }
-    }
-    return {
-        getNextNavigableItem,
-        items: ()=>{
-            return visibleItems || makeVisibleItemsGenerator();
-        }
-    };
-}
-function isFlatTreeItemVisible(item, { openItems , unfilteredFlatTree: flatTree  }) {
-    if (item.level === 1) {
-        return true;
-    }
-    while(item.parentId && item.parentId !== _createUnfilteredFlatTree.flatTreeRootParentId){
-        if (!openItems.has(item.parentId)) {
-            return false;
-        }
-        const parent = flatTree.itemsPerId.get(item.parentId);
-        if (!parent) {
-            return false;
-        }
-        item = parent;
-    }
-    return true;
-} //# sourceMappingURL=createVisibleFlatTree.js.map
-
-//# sourceMappingURL=createVisibleFlatTree.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../lib/utils/createVisibleFlatTree.js"],"sourcesContent":["import { flatTreeRootParentId } from './createUnfilteredFlatTree';\nimport { treeDataTypes } from './tokens';\n/**\n * creates methods that depend on the unfilteredFlatTree and the current available openItems\n */\nexport function createVisibleFlatTree(unfilteredFlatTree, openItems) {\n  let visibleItems = null;\n  const getNextNavigableItem = data => {\n    const item = unfilteredFlatTree.itemsPerId.get(data.target.id);\n    if (!item || !visibleItems) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.arrowLeft:\n        var _unfilteredFlatTree_itemsPerId_get;\n        return item.parentId ? (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(item.parentId)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null : null;\n      case treeDataTypes.arrowRight:\n        var _visibleItems_;\n        return (_visibleItems_ = visibleItems[item.index + 1]) !== null && _visibleItems_ !== void 0 ? _visibleItems_ : null;\n      case treeDataTypes.end:\n        return visibleItems[visibleItems.length - 1];\n      case treeDataTypes.home:\n        return visibleItems[0];\n      case treeDataTypes.arrowDown:\n        var _visibleItems_1;\n        return (_visibleItems_1 = visibleItems[item.index + 1]) !== null && _visibleItems_1 !== void 0 ? _visibleItems_1 : null;\n      case treeDataTypes.arrowUp:\n        var _visibleItems_2;\n        return (_visibleItems_2 = visibleItems[item.index - 1]) !== null && _visibleItems_2 !== void 0 ? _visibleItems_2 : null;\n      default:\n        return null;\n    }\n  };\n  function* makeVisibleItemsGenerator() {\n    visibleItems = [];\n    for (let index = 0, visibleIndex = 0; index < unfilteredFlatTree.items.length; index++) {\n      const item = unfilteredFlatTree.items[index];\n      var _item_parentId;\n      const parent = unfilteredFlatTree.itemsPerId.get((_item_parentId = item.parentId) !== null && _item_parentId !== void 0 ? _item_parentId : flatTreeRootParentId);\n      if (!parent) {\n        break;\n      }\n      if (isFlatTreeItemVisible(item, {\n        openItems,\n        unfilteredFlatTree\n      })) {\n        item.index = visibleIndex++;\n        visibleItems.push({\n          ...item\n        });\n        yield item;\n      } else {\n        index += parent.childrenSize - 1 + item.childrenSize;\n      }\n    }\n  }\n  return {\n    getNextNavigableItem,\n    items: () => {\n      return visibleItems || makeVisibleItemsGenerator();\n    }\n  };\n}\nfunction isFlatTreeItemVisible(item, {\n  openItems,\n  unfilteredFlatTree: flatTree\n}) {\n  if (item.level === 1) {\n    return true;\n  }\n  while (item.parentId && item.parentId !== flatTreeRootParentId) {\n    if (!openItems.has(item.parentId)) {\n      return false;\n    }\n    const parent = flatTree.itemsPerId.get(item.parentId);\n    if (!parent) {\n      return false;\n    }\n    item = parent;\n  }\n  return true;\n}\n//# sourceMappingURL=createVisibleFlatTree.js.map"],"names":["createVisibleFlatTree","unfilteredFlatTree","openItems","visibleItems","getNextNavigableItem","data","item","itemsPerId","get","target","id","type","treeDataTypes","arrowLeft","_unfilteredFlatTree_itemsPerId_get","parentId","arrowRight","_visibleItems_","index","end","length","home","arrowDown","_visibleItems_1","arrowUp","_visibleItems_2","makeVisibleItemsGenerator","visibleIndex","items","_item_parentId","parent","flatTreeRootParentId","isFlatTreeItemVisible","push","childrenSize","flatTree","level","has"],"mappings":"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"}