@fluentui/react-tree 0.0.0-nightly-20230310-0421.1

package/CHANGELOG.json

@@ -0,0 +1,86 @@
+{
+  "name": "@fluentui/react-tree",
+  "entries": [
+    {
+      "date": "Fri, 10 Mar 2023 04:30:51 GMT",
+      "tag": "@fluentui/react-tree_v0.0.0-nightly-20230310-0421.1",
+      "version": "0.0.0-nightly-20230310-0421.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "fluentui-internal@service.microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230310-0421.1",
+            "commit": "4eb253fe218a0665b7efe33aaacdefa2c49eb3cb"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Change Log - @fluentui/react-tree
+
+This log was last generated on Fri, 10 Mar 2023 04:30:51 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20230310-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v0.0.0-nightly-20230310-0421.1)
+
+Fri, 10 Mar 2023 04:30:51 GMT
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-avatar to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-portal to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230310-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/4eb253fe218a0665b7efe33aaacdefa2c49eb3cb) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-tree
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,5 @@
+# @fluentui/react-tree
+
+**React Tree components for [Fluent UI React](https://react.fluentui.dev/)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/dist/index.d.ts

@@ -0,0 +1,469 @@
+/// <reference types="react" />
+
+import { ArrowDown } from '@fluentui/keyboard-keys';
+import { ArrowLeft } from '@fluentui/keyboard-keys';
+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 type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import { ContextSelector } from '@fluentui/react-context-selector';
+import { End } from '@fluentui/keyboard-keys';
+import { Enter } from '@fluentui/keyboard-keys';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
+import { FC } from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Home } from '@fluentui/keyboard-keys';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
+ */
+export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItem[];
+
+export declare type FlatTreeItem = Required<Pick<TreeItemProps, 'id'>> & TreeItemProps & {
+    parentId?: string;
+};
+
+export declare type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id' | 'aria-level' | 'aria-posinset' | 'leaf' | 'aria-setsize'>> & TreeItemProps;
+
+export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
+    ref: React_2.Ref<HTMLDivElement>;
+}>;
+
+declare interface ImmutableSet<Value> {
+    /**
+     * The number of (unique) elements in a ImmutableSet.
+     */
+    readonly size: number;
+    /**
+     * Creates a new ImmutableSet containing all previous element plus the one provided as argument
+     * @param value - new value to be included in the new ImmutableSet instance
+     */
+    add(value: Value): ImmutableSet<Value>;
+    /**
+     * Returns a reference to ImmutableSet.emptySet
+     */
+    clear(): ImmutableSet<Value>;
+    /**
+     * Creates a new ImmutableSet with the original items and removes a specified value from the new ImmutableSet.
+     */
+    delete(value: Value): ImmutableSet<Value>;
+    /**
+     * @returns a boolean indicating whether an element with the specified value exists in the ImmutableSet or not.
+     */
+    has(value: Value): boolean;
+    /** Iterates over values in the ImmutableSet. */
+    [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;
+};
+
+export declare type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {
+    subtree?: NestedTreeItem[];
+};
+
+export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of TreeItem
+ */
+export declare const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of TreeItemLayout
+ */
+export declare const renderTreeItemLayout_unstable: (state: TreeItemLayoutState) => JSX.Element;
+
+/**
+ * Render the final JSX of TreeItemPersonaLayout
+ */
+export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPersonaLayoutState, contextValues: TreeItemPersonaLayoutContextValues) => JSX.Element;
+
+/**
+ * A tree view widget presents a hierarchical list.
+ * Any item in the hierarchy may have child items,
+ * and items that have children may be expanded or collapsed to show or hide the children.
+ * 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 declare const Tree: ForwardRefComponent<TreeProps>;
+
+export declare const treeClassNames: SlotClassNames<TreeSlots>;
+
+export declare type TreeContextValue = {
+    level: number;
+    appearance: 'subtle' | 'subtle-alpha' | 'transparent';
+    size: 'small' | 'medium';
+    openItems: ImmutableSet<TreeItemId>;
+    /**
+     * Requests dialog main component to update it's internal open state
+     */
+    requestOpenChange(data: TreeOpenChangeData): void;
+    requestNavigation(data: TreeNavigationData_unstable): void;
+};
+
+declare type TreeContextValues = {
+    tree: TreeContextValue;
+};
+
+/**
+ * TreeItem component - TODO: add more docs
+ */
+export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
+
+export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
+
+declare type TreeItemContextValue = {
+    isActionsVisible: 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
+ */
+export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
+
+export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
+
+/**
+ * TreeItemLayout Props
+ */
+export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
+
+export declare type TreeItemLayoutSlots = {
+    root: Slot<'div'>;
+    /**
+     * Icon slot that renders right before main content
+     */
+    iconBefore?: Slot<'span'>;
+    /**
+     * Icon slot that renders right after main content
+     */
+    iconAfter?: Slot<'span'>;
+    aside?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering TreeItemLayout
+ */
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & TreeItemContextValue;
+
+export declare const treeItemLevelToken: "--fluent-TreeItem--level";
+
+/**
+ * TreeItemPersonaLayout component - TODO: add more docs
+ */
+export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
+
+export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
+
+declare type TreeItemPersonaLayoutContextValues = {
+    avatar: AvatarContextValue;
+};
+
+/**
+ * TreeItemPersonaLayout Props
+ */
+export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
+
+export declare type TreeItemPersonaLayoutSlots = {
+    root: Slot<'span'>;
+    /**
+     * Avatar to display.
+     */
+    media: NonNullable<Slot<'span'>>;
+    /**
+     * Main text. Children of the root slot are automatically rendered here
+     */
+    main: Slot<'span'>;
+    /**
+     * 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'>;
+};
+
+/**
+ * State used in rendering TreeItemPersonaLayout
+ */
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & TreeItemContextValue & {
+    avatarSize: AvatarSize;
+};
+
+/**
+ * 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;
+};
+
+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 = {
+    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;
+    level: number;
+    /**
+     * By design, a button included on the actions slot should be small
+     */
+    buttonSize: 'small';
+    isActionsVisible: boolean;
+};
+
+export declare type TreeNavigationData_unstable = {
+    event: React_2.MouseEvent<HTMLElement>;
+    target: 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;
+} & ({
+    event: React_2.MouseEvent<HTMLElement>;
+    target: HTMLElement;
+    type: 'ExpandIconClick';
+} | {
+    event: React_2.MouseEvent<HTMLElement>;
+    target: HTMLElement;
+    type: 'Click';
+} | {
+    event: React_2.KeyboardEvent<HTMLElement>;
+    target: HTMLElement;
+    type: typeof Enter;
+} | {
+    event: React_2.KeyboardEvent<HTMLElement>;
+    target: HTMLElement;
+    type: typeof ArrowRight;
+} | {
+    event: React_2.KeyboardEvent<HTMLElement>;
+    target: HTMLElement;
+    type: typeof ArrowLeft;
+});
+
+export declare type TreeOpenChangeEvent = TreeOpenChangeData['event'];
+
+export declare type TreeProps = ComponentProps<TreeSlots> & {
+    /**
+     * A tree item can have various appearances:
+     * - 'subtle' (default): The default tree item styles.
+     * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.
+     * - 'transparent': Removes background color.
+     * @default 'subtle'
+     */
+    appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
+    /**
+     * Size of the tree item.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * This refers to a list of ids of opened tree items.
+     * Controls the state of the open tree items.
+     * These property is ignored for subtrees.
+     */
+    openItems?: Iterable<TreeItemId>;
+    /**
+     * 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>;
+    /**
+     * Callback fired when the component changes value from open state.
+     * These property is ignored for subtrees.
+     *
+     * @param event - a React's Synthetic event
+     * @param data - A data object with relevant information,
+     * such as open value and type of interaction that created the event.
+     */
+    onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
+    /**
+     * Callback fired when navigation happens inside the component.
+     * These property is ignored for subtrees.
+     *
+     * FIXME: This method is not ideal, as navigation should be handled internally by tabster.
+     *
+     * @param event - a React's Synthetic event
+     * @param data - A data object with relevant information,
+     */
+    onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
+};
+
+export declare const TreeProvider: Provider<TreeContextValue | undefined> & FC<ProviderProps<TreeContextValue | undefined>>;
+
+export declare type TreeSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering Tree
+ */
+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'>;
+
+/**
+ * Create the state required to render Tree.
+ *
+ * The returned state can be modified with hooks such as useTreeStyles_unstable,
+ * before being passed to renderTree_unstable.
+ *
+ * @param props - props from this instance of Tree
+ * @param ref - reference to root HTMLElement of Tree
+ */
+export declare const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
+
+export declare const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
+
+export declare function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
+
+/**
+ * Create the state required to render TreeItem.
+ *
+ * The returned state can be modified with hooks such as useTreeItemStyles_unstable,
+ * before being passed to renderTreeItem_unstable.
+ *
+ * @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 const useTreeItemContext_unstable: () => TreeItemContextValue;
+
+/**
+ * Create the state required to render TreeItemLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
+ * before being passed to renderTreeItemLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemLayout
+ * @param ref - reference to root HTMLElement of TreeItemLayout
+ */
+export declare const useTreeItemLayout_unstable: (props: TreeItemLayoutProps, ref: React_2.Ref<HTMLElement>) => TreeItemLayoutState;
+
+/**
+ * Apply styling to the TreeItemLayout slots based on the state
+ */
+export declare const useTreeItemLayoutStyles_unstable: (state: TreeItemLayoutState) => TreeItemLayoutState;
+
+/**
+ * Create the state required to render TreeItemPersonaLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,
+ * before being passed to renderTreeItemPersonaLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemPersonaLayout
+ * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
+ */
+export declare const useTreeItemPersonaLayout_unstable: (props: TreeItemPersonaLayoutProps, ref: React_2.Ref<HTMLSpanElement>) => TreeItemPersonaLayoutState;
+
+/**
+ * Apply styling to the TreeItemPersonaLayout slots based on the state
+ */
+export declare const useTreeItemPersonaLayoutStyles_unstable: (state: TreeItemPersonaLayoutState) => TreeItemPersonaLayoutState;
+
+/**
+ * Apply styling to the TreeItem slots based on the state
+ */
+export declare const useTreeItemStyles_unstable: (state: TreeItemState) => TreeItemState;
+
+export declare const useTreeStyles_unstable: (state: TreeState) => TreeState;
+
+export { }

package/lib/Tree.js

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

package/lib/Tree.js.map

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

package/lib/TreeItem.js

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

package/lib/TreeItem.js.map

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

package/lib/TreeItemLayout.js

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

package/lib/TreeItemLayout.js.map

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

package/lib/TreeItemPersonaLayout.js

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

package/lib/TreeItemPersonaLayout.js.map

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

package/lib/components/Tree/Tree.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useTree_unstable } from './useTree';
+import { renderTree_unstable } from './renderTree';
+import { useTreeStyles_unstable } from './useTreeStyles';
+import { useTreeContextValues_unstable } from './useTreeContextValues';
+/**
+ * A tree view widget presents a hierarchical list.
+ * Any item in the hierarchy may have child items,
+ * and items that have children may be expanded or collapsed to show or hide the children.
+ * 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);
+});
+Tree.displayName = 'Tree';
+//# sourceMappingURL=Tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useTree_unstable","renderTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../../../../../../../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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tree.types.js.map