@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.21

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ArrowRight } from '@fluentui/keyboard-keys';
 import { ArrowUp } from '@fluentui/keyboard-keys';
 import type { AvatarContextValue } from '@fluentui/react-avatar';
 import type { AvatarSize } from '@fluentui/react-avatar';
-import type { ButtonContextValue } from '@fluentui/react-button';
+import { ButtonContextValue } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -22,10 +22,49 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+declare type FlattenedTreeItem<Props extends TreeItemProps> = FlatTreeItemProps & Props;
+
 /**
  * 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[]) => FlatTreeItemProps[];
+export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -37,7 +76,7 @@ export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTree
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree = {
+export declare type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
     /**
      * returns the properties required for the Tree component to work properly.
      * That includes:
@@ -57,7 +96,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 && tree.getElementFromItem(nextItem)) {
      *     listRef.current.scrollToItem(nextItem.index);
      *   }
      *   // wait for scrolling to happen and then invoke navigate method
@@ -72,34 +111,44 @@ 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;
+    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable): FlatTreeItem<Props> | undefined;
     /**
-     * returns a single flat tree item by id without iterating over the whole collection
+     * similar to getElementById but for FlatTreeItems
      */
-    getItem(id: string): FlatTreeItem | null;
+    getElementFromItem(item: FlatTreeItem<Props>): HTMLElement | null;
     /**
-     * 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<Props>>;
 };
 
-export declare type FlatTreeItem = {
-    getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
-    parentId?: string;
-    childrenSize: number;
+/**
+ * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to
+ * `useFlatTree` but with extra information that might be useful on flat tree scenarios
+ */
+export declare type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
     index: number;
-    id: string;
     level: number;
+    childrenSize: number;
+    value: TreeItemValue;
+    parentValue: TreeItemValue | undefined;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentId'>;
 };
 
-export declare type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> & TreeItemProps & {
-    parentId?: string;
+export declare type FlatTreeItemProps = Omit<TreeItemProps, 'itemType'> & Partial<Pick<TreeItemProps, 'itemType'>> & {
+    value: TreeItemValue;
+    parentValue?: TreeItemValue;
 };
 
-export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
+declare type FlatTreeOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;
+
+export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
     ref: React_2.Ref<HTMLDivElement>;
-}>;
+    openItems: ImmutableSet<string>;
+};
 
 declare interface ImmutableSet<Value> {
     /**
@@ -127,10 +176,12 @@ declare interface ImmutableSet<Value> {
     [Symbol.iterator](): IterableIterator<Value>;
 }
 
-export declare type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {
-    subtree?: NestedTreeItem[];
+export declare type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
+    subtree?: NestedTreeItem<Props>[];
 };
 
+declare type OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;
+
 export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
 
 /**
@@ -164,12 +215,11 @@ export declare type TreeContextValue = {
     level: number;
     appearance: 'subtle' | 'subtle-alpha' | 'transparent';
     size: 'small' | 'medium';
-    openItems: ImmutableSet<TreeItemId>;
+    openItems: ImmutableSet<unknown>;
     /**
-     * Requests dialog main component to update it's internal open state
+     * requests root Tree component to respond to some tree item event,
      */
-    requestOpenChange(data: TreeOpenChangeData): void;
-    requestNavigation(data: TreeNavigationData_unstable): void;
+    requestTreeResponse(request: TreeItemRequest): void;
 };
 
 declare type TreeContextValues = {
@@ -177,7 +227,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 nested child subtree, an expand/collapse control is displayed,
+ * allowing the user to show or hide the children.
  */
 export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 
@@ -185,21 +244,28 @@ export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
 declare type TreeItemContextValue = {
     isActionsVisible: boolean;
+    isAsideVisible: boolean;
+    actionsRef: React_2.Ref<HTMLDivElement>;
+    expandIconRef: React_2.Ref<HTMLDivElement>;
+    layoutRef: React_2.Ref<HTMLDivElement>;
+    subtreeRef: React_2.Ref<HTMLDivElement>;
+    itemType: TreeItemType;
+    value: string;
+    open: boolean;
 };
 
 declare type TreeItemContextValues = {
     treeItem: TreeItemContextValue;
-    button: ButtonContextValue;
 };
 
 declare type TreeItemCSSProperties = React_2.CSSProperties & {
     [treeItemLevelToken]?: string | number;
 };
 
-export declare type TreeItemId = string | number;
-
 /**
- * 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>;
 
@@ -215,23 +281,42 @@ export declare type TreeItemLayoutSlots = {
     /**
      * Icon slot that renders right before main content
      */
-    iconBefore?: Slot<'span'>;
+    iconBefore?: Slot<'div'>;
     /**
      * Icon slot that renders right after main content
      */
-    iconAfter?: Slot<'span'>;
-    aside?: Slot<'span'>;
+    iconAfter?: Slot<'div'>;
+    /**
+     * Expand icon slot,
+     * by default renders a chevron icon to indicate opening and closing
+     */
+    expandIcon?: Slot<'div'>;
+    aside?: Slot<'div'>;
+    /**
+     * actionable elements are normally buttons, menus, or other focusable elements.
+     * Those elements are only visibly available if the given tree item is currently active.
+     */
+    actions?: Slot<ExtractSlotProps<Slot<'div'> & {
+        /**
+         * Forces visibility of the aside/action content
+         */
+        visible?: boolean;
+    }>>;
 };
 
 /**
  * State used in rendering TreeItemLayout
  */
-export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & TreeItemContextValue;
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
+    buttonContextValue: ButtonContextValue;
+};
 
 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>;
 
@@ -246,121 +331,96 @@ declare type TreeItemPersonaLayoutContextValues = {
  */
 export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
-export declare type TreeItemPersonaLayoutSlots = {
-    root: Slot<'span'>;
+export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {
+    root: NonNullable<Slot<'div'>>;
     /**
      * Avatar to display.
      */
-    media: NonNullable<Slot<'span'>>;
+    media: NonNullable<Slot<'div'>>;
     /**
      * Main text. Children of the root slot are automatically rendered here
      */
-    main: Slot<'span'>;
+    main: NonNullable<Slot<'div'>>;
     /**
      * Secondary text that describes or complements the main text
      */
-    description?: Slot<'span'>;
-    /**
-     * aside text that works as extra textual information
-     */
-    aside?: Slot<'span'>;
-    /**
-     * A layout wrapper for the main and description slots
-     */
-    content: Slot<'div'>;
+    description?: Slot<'div'>;
 };
 
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & TreeItemContextValue & {
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
+    buttonContextValue: ButtonContextValue;
 };
 
 /**
  * TreeItem Props
  */
 export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
-    /**
-     * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.
-     * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property
-     * this will be inferred by the presence of a subtree as part of the TreeItem children.
-     */
-    leaf?: boolean;
+    itemType: TreeItemType;
+    value?: TreeItemValue;
 };
 
-export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined>;
+export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
+
+declare type TreeItemRequest = {
+    itemType: TreeItemType;
+} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'target'> | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>);
 
 export declare type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
         style?: TreeItemCSSProperties;
     }>>;
-    content: NonNullable<Slot<'div'>>;
-    subtree?: Slot<'span'>;
-    /**
-     * Expand icon slot,
-     * by default renders a chevron icon to indicate opening and closing
-     */
-    expandIcon?: Slot<'span'>;
-    /**
-     * Actions slot that renders on the end of tree item
-     * when the item is hovered/focused
-     */
-    actions?: Slot<'span'>;
 };
 
 /**
  * State used in rendering TreeItem
  */
-export declare type TreeItemState = ComponentState<TreeItemSlots> & {
-    open: boolean;
-    isLeaf: boolean;
+export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
     level: number;
-    /**
-     * By design, a button included on the actions slot should be small
-     */
-    buttonSize: 'small';
-    isActionsVisible: boolean;
+    itemType: TreeItemType;
 };
 
+declare type TreeItemType = 'leaf' | 'branch';
+
+declare type TreeItemValue = string | number;
+
 export declare type TreeNavigationData_unstable = {
-    event: React_2.MouseEvent<HTMLElement>;
     target: HTMLElement;
+    value: string;
+} & ({
+    event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: 'TypeAhead';
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowRight;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowLeft;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowUp;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowDown;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof Home;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof End;
-};
+});
 
 export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
 export declare type TreeOpenChangeData = {
     open: boolean;
+    value: string;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     target: HTMLElement;
@@ -404,13 +464,13 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * Controls the state of the open tree items.
      * These property is ignored for subtrees.
      */
-    openItems?: Iterable<TreeItemId>;
+    openItems?: Iterable<string>;
     /**
      * This refers to a list of ids of opened tree items.
      * Default value for the uncontrolled state of open tree items.
      * These property is ignored for subtrees.
      */
-    defaultOpenItems?: Iterable<TreeItemId>;
+    defaultOpenItems?: Iterable<string>;
     /**
      * Callback fired when the component changes value from open state.
      * These property is ignored for subtrees.
@@ -441,7 +501,9 @@ export declare type TreeSlots = {
 /**
  * State used in rendering Tree
  */
-export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
+export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
+    open: boolean;
+};
 
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -452,10 +514,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<Props extends FlatTreeItemProps = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions): FlatTree<Props>;
 
 /**
  * Create the state required to render Tree.
@@ -481,9 +543,9 @@ export declare function useTreeContextValues_unstable(state: TreeState): TreeCon
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */
-export declare const useTreeItem_unstable: (props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>) => TreeItemState;
+export declare function useTreeItem_unstable(props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
 
-export declare const useTreeItemContext_unstable: () => TreeItemContextValue;
+export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
 
 /**
  * Create the state required to render TreeItemLayout.

package/lib/Tree.js

@@ -1,2 +1 @@
 export * from './components/Tree/index';
-//# sourceMappingURL=Tree.js.map

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,"sources":["Tree.ts"],"sourcesContent":["export * from './components/Tree/index';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B"}

package/lib/TreeItem.js

@@ -1,2 +1 @@
 export * from './components/TreeItem/index';
-//# sourceMappingURL=TreeItem.js.map

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,"sources":["TreeItem.ts"],"sourcesContent":["export * from './components/TreeItem/index';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B"}

package/lib/TreeItemLayout.js

@@ -1,2 +1 @@
 export * from './components/TreeItemLayout/index';
-//# sourceMappingURL=TreeItemLayout.js.map

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,"sources":["TreeItemLayout.ts"],"sourcesContent":["export * from './components/TreeItemLayout/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/TreeItemPersonaLayout.js

@@ -1,2 +1 @@
 export * from './components/TreeItemPersonaLayout/index';
-//# sourceMappingURL=TreeItemPersonaLayout.js.map

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,"sources":["TreeItemPersonaLayout.ts"],"sourcesContent":["export * from './components/TreeItemPersonaLayout/index';\n"],"names":[],"mappings":"AAAA,cAAc,2CAA2C"}

package/lib/components/Tree/Tree.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTree_unstable } from './useTree';
 import { renderTree_unstable } from './renderTree';
-import { useTreeStyles_unstable } from './useTreeStyles';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
 import { useTreeContextValues_unstable } from './useTreeContextValues';
 /**
  * A tree view widget presents a hierarchical list.
@@ -10,12 +10,10 @@ import { useTreeContextValues_unstable } from './useTreeContextValues';
  * For example, in a file system navigator that uses a tree view to display folders and files,
  * an item representing a folder can be expanded to reveal the contents of the folder,
  * which may be files, folders, or both.
- */
-export const Tree = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTree_unstable(props, ref);
-  useTreeStyles_unstable(state);
-  const contextValues = useTreeContextValues_unstable(state);
-  return renderTree_unstable(state, contextValues);
+ */ export const Tree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTree_unstable(props, ref);
+    useTreeStyles_unstable(state);
+    const contextValues = useTreeContextValues_unstable(state);
+    return renderTree_unstable(state, contextValues);
 });
 Tree.displayName = 'Tree';
-//# sourceMappingURL=Tree.js.map

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,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTree_unstable } from './useTree';\nimport { renderTree_unstable } from './renderTree';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\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"],"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtCL,uBAAuBM;IACvB,MAAMC,gBAAgBN,8BAA8BK;IACpD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

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

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

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,"sources":["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 = { target: HTMLElement; value: string } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = { open: boolean; value: string } & (\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<string>;\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<string>;\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> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Tree/index.js

@@ -2,6 +2,5 @@ export * from './Tree';
 export * from './Tree.types';
 export * from './renderTree';
 export * from './useTree';
-export * from './useTreeStyles';
+export * from './useTreeStyles.styles';
 export * from './useTreeContextValues';
-//# sourceMappingURL=index.js.map

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,"sources":["index.ts"],"sourcesContent":["export * from './Tree';\nexport * from './Tree.types';\nexport * from './renderTree';\nexport * from './useTree';\nexport * from './useTreeStyles.styles';\nexport * from './useTreeContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,yBAAyB;AACvC,cAAc,yBAAyB"}

package/lib/components/Tree/renderTree.js

@@ -1,15 +1,9 @@
-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, {
-    value: contextValues.tree
-  }, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slotProps.root.children));
+export const renderTree_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(TreeProvider, {
+        value: contextValues.tree
+    }, state.open && /*#__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,"sources":["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  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,gBAAqC;IACzF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAwBG;IACrD,qBACE,AAVJ,cAUKF;QAAaM,OAAOH,cAAcI,IAAI;OACpCL,MAAMM,IAAI,kBAAI,AAXrB,cAWsBJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,EAAGJ,UAAUI,IAAI,CAACC,QAAQ;AAG7E,EAAE"}