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

package/dist/index.d.ts

@@ -24,14 +24,107 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
+ * @example
+ * ```tsx
+ * const defaultItems = flattenTree_unstable([
+ *  {
+ *    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
+ *    subtree: [
+ *      {
+ *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
+ *      },
+ *      {
+ *        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
+ *      },
+ *      {
+ *        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
+ *      },
+ *    ],
+ *  },
+ *  {
+ *    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
+ *    subtree: [
+ *      {
+ *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
+ *        subtree: [
+ *          {
+ *            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
+ *            subtree: [
+ *              {
+ *                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
+ *              },
+ *            ],
+ *          },
+ *        ],
+ *      },
+ *    ],
+ *  },
+ * ]);
+ * ```
  */
-export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItem[];
+export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[];
 
-export declare type FlatTreeItem = Required<Pick<TreeItemProps, 'id'>> & TreeItemProps & {
-    parentId?: string;
+/**
+ * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
+ * in multiple scenarios including virtualization.
+ *
+ * !!A flat tree is an unofficial spec for tree!!
+ *
+ * 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.
+ */
+export declare type FlatTree = {
+    /**
+     * returns the properties required for the Tree component to work properly.
+     * That includes:
+     * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
+     */
+    getTreeProps(): FlatTreeProps;
+    /**
+     * internal method used to react to an `onNavigation` event.
+     * This method ensures proper navigation on keyboard and mouse interaction.
+     * In case of virtualization it might be required to cancel default provided `onNavigation`
+     * event and then call this method manually.
+     *
+     * @example
+     * ```ts
+     * // react-window
+     * const handleNavigation = (event, data) => {
+     *   event.preventDefault();
+     *   const nextItem = tree.getNextNavigableItem(data);
+     *   // scroll to item using virtualization scroll mechanism
+     *   if (nextItem && document.getElementById(nextItem.id)) {
+     *     listRef.current.scrollToItem(nextItem.index);
+     *   }
+     *   // wait for scrolling to happen and then invoke navigate method
+     *   requestAnimationFrame(() => {
+     *     tree.navigate(data);
+     *   });
+     * };
+     *```
+     */
+    navigate(data: TreeNavigationData_unstable): void;
+    /**
+     * 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(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;
+    /**
+     * an iterable containing all visually available flat tree items
+     */
+    items(): IterableIterator<FlatTreeItem>;
 };
 
-export declare type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id' | 'aria-level' | 'aria-posinset' | 'leaf' | 'aria-setsize'>> & TreeItemProps;
+export declare type FlatTreeItem = Readonly<MutableFlatTreeItem>;
+
+export declare type FlatTreeItemProps = TreeItemProps & {
+    id: TreeItemId;
+    parentId?: string;
+};
 
 export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
     ref: React_2.Ref<HTMLDivElement>;
@@ -63,13 +156,18 @@ declare interface ImmutableSet<Value> {
     [Symbol.iterator](): IterableIterator<Value>;
 }
 
-declare type LazyArray<Value> = {
-    map<NextValue>(fn: (child: Value) => NextValue): NextValue[];
-    toArray(): Value[];
-};
-
-export declare type LazyFlatTreeItems = LazyArray<FlatTreeItemProps> & {
-    get(id: string): TreeItemPropsReference | null;
+/**
+ * @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'> & {
@@ -122,7 +220,16 @@ declare type TreeContextValues = {
 };
 
 /**
- * TreeItem component - TODO: add more docs
+ * The `TreeItem` component represents a single item in a tree.
+ * It expects a certain order of children to work properly: the first child should be the node itself,
+ * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
+ * This order follows the same order as document traversal for the TreeWalker API in JavaScript:
+ * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
+ * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
+ * which should be used as a direct child of TreeItem.
+ *
+ * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,
+ * allowing the user to show or hide the children.
  */
 export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 
@@ -141,10 +248,12 @@ 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
+ * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
+ * It provides a consistent visual structure for tree items in a `Tree` component.
+ * This component should only be used as a direct child of `TreeItem`.
  */
 export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
@@ -176,7 +285,9 @@ export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> &
 export declare const treeItemLevelToken: "--fluent-TreeItem--level";
 
 /**
- * TreeItemPersonaLayout component - TODO: add more docs
+ * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
+ * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
+ * This component should only be used as a direct child of `TreeItem`.
  */
 export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
 
@@ -234,13 +345,6 @@ export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
     leaf?: boolean;
 };
 
-declare type TreeItemPropsReference = {
-    props: Required<Pick<TreeItemProps, 'id' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
-    parentId?: string;
-    childrenSize: number;
-    index: number;
-};
-
 export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined>;
 
 export declare type TreeItemSlots = {
@@ -395,9 +499,19 @@ export declare type TreeSlots = {
  */
 export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
 
-export declare function useFlatTreeItems_unstable(items: FlatTreeItem[], options?: UseFlatTreeItemsOptions): readonly [FlatTreeProps, LazyFlatTreeItems];
-
-export declare type UseFlatTreeItemsOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems'>;
+/**
+ * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
+ * in multiple scenarios including virtualization.
+ *
+ * !!A flat tree is an unofficial spec for tree!!
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
+ *
+ * @param flatTreeItemProps - a list of tree items
+ * @param options - in case control over the internal openItems is required
+ */
+export declare function useFlatTree_unstable(flatTreeItemProps: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree;
 
 /**
  * Create the state required to render Tree.

package/lib/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/Tree.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Tree/index';\n"]}
+{"version":3,"names":[],"sources":["../src/Tree.ts"],"sourcesContent":["export * from './components/Tree/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/TreeItem.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/TreeItem/index';\n"]}
+{"version":3,"names":[],"sources":["../src/TreeItem.ts"],"sourcesContent":["export * from './components/TreeItem/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/TreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItemLayout.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/TreeItemLayout.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/TreeItemLayout/index';\n"]}
+{"version":3,"names":[],"sources":["../src/TreeItemLayout.ts"],"sourcesContent":["export * from './components/TreeItemLayout/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/TreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItemPersonaLayout.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/TreeItemPersonaLayout.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC","sourcesContent":["export * from './components/TreeItemPersonaLayout/index';\n"]}
+{"version":3,"names":[],"sources":["../src/TreeItemPersonaLayout.ts"],"sourcesContent":["export * from './components/TreeItemPersonaLayout/index';\n"],"mappings":"AAAA,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles';\nimport type { TreeProps } from './Tree.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\n\n/**\n * A tree view widget presents a hierarchical list.\n * Any item in the hierarchy may have child items,\n * and items that have children may be expanded or collapsed to show or hide the children.\n * For example, in a file system navigator that uses a tree view to display folders and files,\n * an item representing a folder can be expanded to reveal the contents of the folder,\n * which may be files, folders, or both.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  useTreeStyles_unstable(state);\n  const contextValues = useTreeContextValues_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,WAAW;AAC5C,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AAGxD,SAASC,6BAA6B,QAAQ,wBAAwB;AAEtE;;;;;;;;AAQA,OAAO,MAAMC,IAAI,gBAAmCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClF,MAAMC,KAAK,GAAGR,gBAAgB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC1CL,sBAAsB,CAACM,KAAK,CAAC;EAC7B,MAAMC,aAAa,GAAGN,6BAA6B,CAACK,KAAK,CAAC;EAC1D,OAAOP,mBAAmB,CAACO,KAAK,EAAEC,aAAa,CAAC;AAClD,CAAC,CAAC;AAEFL,IAAI,CAACM,WAAW,GAAG,MAAM"}
+{"version":3,"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles';\nimport type { TreeProps } from './Tree.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\n\n/**\n * A tree view widget presents a hierarchical list.\n * Any item in the hierarchy may have child items,\n * and items that have children may be expanded or collapsed to show or hide the children.\n * For example, in a file system navigator that uses a tree view to display folders and files,\n * an item representing a folder can be expanded to reveal the contents of the folder,\n * which may be files, folders, or both.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  useTreeStyles_unstable(state);\n  const contextValues = useTreeContextValues_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AAGvC,SAASC,6BAA6B,QAAQ;AAE9C;;;;;;;;AAQA,OAAO,MAAMC,IAAA,gBAAuCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnF,MAAMC,KAAA,GAAQR,gBAAA,CAAiBM,KAAA,EAAOC,GAAA;EACtCL,sBAAA,CAAuBM,KAAA;EACvB,MAAMC,aAAA,GAAgBN,6BAAA,CAA8BK,KAAA;EACpD,OAAOP,mBAAA,CAAoBO,KAAA,EAAOC,aAAA;AACpC;AAEAL,IAAA,CAAKM,WAAW,GAAG"}

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

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=Tree.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/Tree/Tree.types.ts"],"names":[],"mappings":"","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"]}
+{"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/Tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/Tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles';\nexport * from './useTreeContextValues';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Tree/index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles';\nexport * from './useTreeContextValues';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Tree/renderTree.js

@@ -1,15 +1,13 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { TreeProvider } from '../../contexts';
 export const renderTree_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(TreeProvider, {
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(TreeProvider, {
     value: contextValues.tree
-  }, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slotProps.root.children));
+  }, /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children));
 };
 //# sourceMappingURL=renderTree.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","createElement","value","tree","root","children"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/renderTree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';\nimport { TreeProvider } from '../../contexts';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlots<TreeSlots>(state);\n\n  return (\n    <TreeProvider value={contextValues.tree}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </TreeProvider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,OAAO,MAAMC,mBAAmB,GAAGA,CAACC,KAAgB,EAAEC,aAAgC,KAAI;EACxF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAYG,KAAK,CAAC;EAEvD,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,YAAY;IAACO,KAAK,EAAEJ,aAAa,CAACK;EAAI,gBACrCV,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAAGJ,SAAS,CAACI,IAAI,CAACC,QAAQ,CAAc,CACzD;AAEnB,CAAC"}
+{"version":3,"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","root","children"],"sources":["../../../src/components/Tree/renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeState, TreeSlots, TreeContextValues } from './Tree.types';\nimport { TreeProvider } from '../../contexts';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);\n\n  return (\n    <TreeProvider value={contextValues.tree}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </TreeProvider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,YAAY,QAAQ;AAE7B,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAkBC,aAAA,KAAqC;EACzF,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAwBG,KAAA;EAErD,oBACEJ,aAXJ,CAWKE,YAAA;IAAaM,KAAA,EAAOH,aAAA,CAAcI;kBACjCT,aAZN,CAYOM,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,EAAGH,SAAA,CAAUG,IAAI,CAACC,QAAQ;AAG9D"}

package/lib/components/Tree/useTree.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useTreeContext_unstable } from '../../contexts';
 import { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';
@@ -67,16 +68,16 @@ function useRootTree(props, ref) {
   const [openItems, updateOpenItems] = useOpenItemsState(props);
   const [navigate, navigationRef] = useNestedTreeNavigation();
   const requestOpenChange = useEventCallback(data => {
-    var _a;
-    (_a = props.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(props, data.event, data);
+    var _props_onOpenChange;
+    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);
     if (data.event.isDefaultPrevented()) {
       return;
     }
     return updateOpenItems(data);
   });
   const requestNavigation = useEventCallback(data => {
-    var _a;
-    (_a = props.onNavigation_unstable) === null || _a === void 0 ? void 0 : _a.call(props, data.event, data);
+    var _props_onNavigation_unstable;
+    (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, data.event, data);
     if (data.event.isDefaultPrevented()) {
       return;
     }

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

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","useEventCallback","useMergedRefs","useTreeContext_unstable","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useTree_unstable","props","ref","isSubtree","ctx","level","useSubtree","useRootTree","contextAppearance","appearance","contextSize","size","parentLevel","openItems","requestOpenChange","requestNavigation","components","root","role","warnIfNoProperPropsRootTree","updateOpenItems","navigate","navigationRef","data","_a","onOpenChange","call","event","isDefaultPrevented","onNavigation_unstable","type","arrowDown","arrowUp","preventDefault","process","env","NODE_ENV","console","warn"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render Tree.\n *\n * The returned state can be modified with hooks such as useTreeStyles_unstable,\n * before being passed to renderTree_unstable.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n  // as isSubtree is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);\n};\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nfunction useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n}\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nfunction useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = useEventCallback((data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  });\n\n  const requestNavigation = useEventCallback((data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.arrowDown || data.type === treeDataTypes.arrowUp) {\n      data.event.preventDefault();\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","useTreeContext_unstable","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useTree_unstable","props","ref","isSubtree","ctx","level","useSubtree","useRootTree","contextAppearance","appearance","contextSize","size","parentLevel","openItems","requestOpenChange","requestNavigation","components","root","role","warnIfNoProperPropsRootTree","updateOpenItems","navigate","navigationRef","data","_props_onOpenChange","onOpenChange","call","event","isDefaultPrevented","_props_onNavigation_unstable","onNavigation_unstable","type","arrowDown","arrowUp","preventDefault","process","env","NODE_ENV","console","warn"],"sources":["../../../src/components/Tree/useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render Tree.\n *\n * The returned state can be modified with hooks such as useTreeStyles_unstable,\n * before being passed to renderTree_unstable.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n  // as isSubtree is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isSubtree ? useSubtree(props, ref) : useRootTree(props, ref);\n};\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nfunction useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n}\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nfunction useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = useEventCallback((data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  });\n\n  const requestNavigation = useEventCallback((data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.arrowDown || data.type === treeDataTypes.arrowUp) {\n      data.event.preventDefault();\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"mappings":"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"}

package/lib/components/Tree/useTreeContextValues.js

@@ -8,9 +8,9 @@ export function useTreeContextValues_unstable(state) {
     requestNavigation
   } = state;
   /**
-   * This context is created with "@fluentui/react-context-selector",
-   * there is no sense to memoize it
-   */
+  * This context is created with "@fluentui/react-context-selector",
+  * there is no sense to memoize it
+  */
   const tree = {
     appearance,
     size,

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

@@ -1 +1 @@
-{"version":3,"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestOpenChange","requestNavigation","tree"],"sources":["../src/packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, level, appearance, size, requestOpenChange, requestNavigation } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    appearance,\n    size,\n    level,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n\n  return { tree };\n}\n"],"mappings":"AAGA,OAAM,SAAUA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,UAAU;IAAEC,IAAI;IAAEC,iBAAiB;IAAEC;EAAiB,CAAE,GAAGN,KAAK;EAC1F;;;;EAIA,MAAMO,IAAI,GAAqB;IAC7BJ,UAAU;IACVC,IAAI;IACJF,KAAK;IACLD,SAAS;IACTI,iBAAiB;IACjBC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB"}
+{"version":3,"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestOpenChange","requestNavigation","tree"],"sources":["../../../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, level, appearance, size, requestOpenChange, requestNavigation } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    appearance,\n    size,\n    level,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n\n  return { tree };\n}\n"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;EACjF,MAAM;IAAEC,SAAA;IAAWC,KAAA;IAAOC,UAAA;IAAYC,IAAA;IAAMC,iBAAA;IAAmBC;EAAiB,CAAE,GAAGN,KAAA;EACrF;;;;EAIA,MAAMO,IAAA,GAAyB;IAC7BJ,UAAA;IACAC,IAAA;IACAF,KAAA;IACAD,SAAA;IACAI,iBAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAK;AAChB"}

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

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

package/lib/components/TreeItem/TreeItem.js

@@ -4,7 +4,16 @@ import { renderTreeItem_unstable } from './renderTreeItem';
 import { useTreeItemStyles_unstable } from './useTreeItemStyles';
 import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
 /**
- * TreeItem component - TODO: add more docs
+ * The `TreeItem` component represents a single item in a tree.
+ * It expects a certain order of children to work properly: the first child should be the node itself,
+ * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
+ * This order follows the same order as document traversal for the TreeWalker API in JavaScript:
+ * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
+ * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
+ * which should be used as a direct child of TreeItem.
+ *
+ * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,
+ * allowing the user to show or hide the children.
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTreeItem_unstable(props, ref);

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * TreeItem component - TODO: add more docs\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAGhE,SAASC,iCAAiC,QAAQ,4BAA4B;AAE9E;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE9CL,0BAA0B,CAACM,KAAK,CAAC;EACjC,MAAMC,aAAa,GAAGN,iCAAiC,CAACK,KAAK,CAAC;EAC9D,OAAOP,uBAAuB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACM,WAAW,GAAG,UAAU"}
+{"version":3,"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,iCAAiC,QAAQ;AAElD;;;;;;;;;;;;AAYA,OAAO,MAAMC,QAAA,gBAA+CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAE1CL,0BAAA,CAA2BM,KAAA;EAC3B,MAAMC,aAAA,GAAgBN,iCAAA,CAAkCK,KAAA;EACxD,OAAOP,uBAAA,CAAwBO,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}

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

@@ -1,2 +1,2 @@
-import { treeItemLevelToken } from '../../utils/tokens';
+import * as React from 'react';
 //# sourceMappingURL=TreeItem.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC","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"]}
+{"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/components/TreeItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/TreeItem/index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TreeItem/renderTreeItem.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { TreeItemProvider } from '../../contexts';
 import { ButtonContextProvider } from '@fluentui/react-button';
 /**
@@ -9,21 +9,11 @@ export const renderTreeItem_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(TreeItemProvider, {
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(TreeItemProvider, {
     value: contextValues.treeItem
-  }, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
-    ...slotProps.expandIcon
-  }), slotProps.content.children, /*#__PURE__*/React.createElement(ButtonContextProvider, {
+  }, /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/createElement(ButtonContextProvider, {
     value: contextValues.button
-  }, slots.actions && /*#__PURE__*/React.createElement(slots.actions, {
-    ...slotProps.actions
-  }))), state.open && slots.subtree && /*#__PURE__*/React.createElement(slots.subtree, {
-    ...slotProps.subtree
-  })));
+  }, slots.actions && /*#__PURE__*/createElement(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/createElement(slots.subtree, slotProps.subtree)));
 };
 //# sourceMappingURL=renderTreeItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","TreeItemProvider","ButtonContextProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","createElement","value","treeItem","root","content","expandIcon","children","button","actions","open","subtree"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemSlots, TreeItemContextValues } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  const { slots, slotProps } = getSlots<TreeItemSlots>(state);\n\n  return (\n    <TreeItemProvider value={contextValues.treeItem}>\n      <slots.root {...slotProps.root}>\n        <slots.content {...slotProps.content}>\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n          {slotProps.content.children}\n          <ButtonContextProvider value={contextValues.button}>\n            {slots.actions && <slots.actions {...slotProps.actions} />}\n          </ButtonContextProvider>\n        </slots.content>\n        {state.open && slots.subtree && <slots.subtree {...slotProps.subtree} />}\n      </slots.root>\n    </TreeItemProvider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;AAGA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGP,QAAQ,CAAgBI,KAAK,CAAC;EAE3D,oBACEL,KAAA,CAAAS,aAAA,CAACP,gBAAgB;IAACQ,KAAK,EAAEJ,aAAa,CAACK;EAAQ,gBAC7CX,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,gBAC5BZ,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,GACjCN,KAAK,CAACO,UAAU,iBAAId,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,UAAU;IAAA,GAAKN,SAAS,CAACM;EAAU,EAAI,EAClEN,SAAS,CAACK,OAAO,CAACE,QAAQ,eAC3Bf,KAAA,CAAAS,aAAA,CAACN,qBAAqB;IAACO,KAAK,EAAEJ,aAAa,CAACU;EAAM,GAC/CT,KAAK,CAACU,OAAO,iBAAIjB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,CACpC,CACV,EACfZ,KAAK,CAACa,IAAI,IAAIX,KAAK,CAACY,OAAO,iBAAInB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACY,OAAO;IAAA,GAAKX,SAAS,CAACW;EAAO,EAAI,CAC7D,CACI;AAEvB,CAAC"}
+{"version":3,"names":["createElement","getSlotsNext","TreeItemProvider","ButtonContextProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","value","treeItem","root","content","expandIcon","children","button","actions","open","subtree"],"sources":["../../../src/components/TreeItem/renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemSlots, TreeItemContextValues } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemSlots>(state);\n\n  return (\n    <TreeItemProvider value={contextValues.treeItem}>\n      <slots.root {...slotProps.root}>\n        <slots.content {...slotProps.content}>\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n          {slotProps.content.children}\n          <ButtonContextProvider value={contextValues.button}>\n            {slots.actions && <slots.actions {...slotProps.actions} />}\n          </ButtonContextProvider>\n        </slots.content>\n        {state.open && slots.subtree && <slots.subtree {...slotProps.subtree} />}\n      </slots.root>\n    </TreeItemProvider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AAEtC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGP,YAAA,CAA4BI,KAAA;EAEzD,oBACEL,aAfJ,CAeKE,gBAAA;IAAiBO,KAAA,EAAOH,aAAA,CAAcI;kBACrCV,aAhBN,CAgBOO,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,eAC5BX,aAjBR,CAiBSO,KAAA,CAAMK,OAAO,EAAKJ,SAAA,CAAUI,OAAO,EACjCL,KAAA,CAAMM,UAAU,iBAAIb,aAlB/B,CAkBgCO,KAAA,CAAMM,UAAU,EAAKL,SAAA,CAAUK,UAAU,GAC9DL,SAAA,CAAUI,OAAO,CAACE,QAAQ,eAC3Bd,aApBV,CAoBWG,qBAAA;IAAsBM,KAAA,EAAOH,aAAA,CAAcS;KACzCR,KAAA,CAAMS,OAAO,iBAAIhB,aArB9B,CAqB+BO,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,KAGzDX,KAAA,CAAMY,IAAI,IAAIV,KAAA,CAAMW,OAAO,iBAAIlB,aAxBxC,CAwByCO,KAAA,CAAMW,OAAO,EAAKV,SAAA,CAAUU,OAAO;AAI5E"}