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

package/CHANGELOG.json

@@ -2,7 +2,150 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Mon, 24 Apr 2023 08:09:19 GMT",
+      "date": "Fri, 12 May 2023 20:22:30 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.13",
+      "version": "9.0.0-beta.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
+            "comment": "chore: exclude .swcrc from being published"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "e61227d7e52d4210b0a108657e6c56c0cfaf8498",
+            "comment": "feat: TreeItem itemType restructure"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "e741b289a0cda2711146d171d3b08deb8bb7a156",
+            "comment": "feat: creates TreeItemAside component"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "53c5190f2774c4b42777af53f3739bf2949678e2",
+            "comment": "feat: makes useFlatTree generic"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "fa0f2ce25e94ddc8759f545638e01cc34e0e99f4",
+            "comment": "chore: updates useOpenItemsState internals"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "9d6394b6c751092fd1d4e26ccc618b5ba05086ec",
+            "comment": "chore: move makeStyles() calls to .styles.ts files"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "d85ae6d21f5c6db877d62ccb1e9270848afbf1bb",
+            "comment": "feat: adds lazy loading story"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "be291a28d39881ce6607f465efc5c7402b2e014c",
+            "comment": "bugfix: fix horizontal overflow on tree"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "27f252e27361df75a94c5bc5b09fc0097fefd969",
+            "comment": "bugfix: fix VisibleFlatTreeItemGenerator omitting visible items"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.19",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.11",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.19",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.2.7",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.4.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.7.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v9.1.8",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.8.1",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
+            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 24 Apr 2023 08:12:44 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.12",
       "version": "9.0.0-beta.12",
       "comments": {
@@ -35,19 +178,19 @@
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-avatar to v9.4.10",
-            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-button to v9.3.10",
-            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tree",
             "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
-            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Mon, 24 Apr 2023 08:09:19 GMT and should not be manually modified.
+This log was last generated on Fri, 12 May 2023 20:22:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.13)
+
+Fri, 12 May 2023 20:22:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.12..@fluentui/react-tree_v9.0.0-beta.13)
+
+### Changes
+
+- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
+- feat: TreeItem itemType restructure ([PR #27799](https://github.com/microsoft/fluentui/pull/27799) by bernardo.sunderhus@gmail.com)
+- feat: creates TreeItemAside component ([PR #27701](https://github.com/microsoft/fluentui/pull/27701) by bernardo.sunderhus@gmail.com)
+- feat: makes useFlatTree generic ([PR #27682](https://github.com/microsoft/fluentui/pull/27682) by bernardo.sunderhus@gmail.com)
+- chore: updates useOpenItemsState internals ([PR #27697](https://github.com/microsoft/fluentui/pull/27697) by bernardo.sunderhus@gmail.com)
+- chore: move makeStyles() calls to .styles.ts files ([PR #27698](https://github.com/microsoft/fluentui/pull/27698) by olfedias@microsoft.com)
+- feat: adds lazy loading story ([PR #27587](https://github.com/microsoft/fluentui/pull/27587) by bernardo.sunderhus@gmail.com)
+- bugfix: fix horizontal overflow on tree ([PR #27825](https://github.com/microsoft/fluentui/pull/27825) by bernardo.sunderhus@gmail.com)
+- bugfix: fix VisibleFlatTreeItemGenerator omitting visible items ([PR #27802](https://github.com/microsoft/fluentui/pull/27802) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-aria to v9.3.19 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-avatar to v9.5.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-button to v9.3.11 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.19 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-portal to v9.2.7 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.4.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-tabster to v9.7.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-theme to v9.1.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+
 ## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.12)
 
-Mon, 24 Apr 2023 08:09:19 GMT 
+Mon, 24 Apr 2023 08:12:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.11..@fluentui/react-tree_v9.0.0-beta.12)
 
 ### Changes
@@ -15,9 +44,9 @@ Mon, 24 Apr 2023 08:09:19 GMT
 - bugfix: fix parent navigation after independency from id ([PR #27642](https://github.com/microsoft/fluentui/pull/27642) by bernardo.sunderhus@gmail.com)
 - feat: value property over id ([PR #27532](https://github.com/microsoft/fluentui/pull/27532) by bernardo.sunderhus@gmail.com)
 - chore: restructure stories, add separate category for flat tree ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-avatar to v9.4.10 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
-- Bump @fluentui/react-button to v9.3.10 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
+- Bump @fluentui/react-avatar to v9.4.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+- Bump @fluentui/react-button to v9.3.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
 
 ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.11)
 

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';
@@ -23,6 +23,8 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { SlotRenderFunction } from '@fluentui/react-utilities';
 
+declare type FlattenedTreeItem<Props extends TreeItemProps<unknown>> = FlatTreeItemProps<NonNullable<Props['value']>> & Props;
+
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
  * @example
@@ -63,7 +65,7 @@ import { SlotRenderFunction } from '@fluentui/react-utilities';
  * ]);
  * ```
  */
-export declare const flattenTree_unstable: <Value = string>(items: NestedTreeItem<Value>[]) => FlatTreeItemProps<Value>[];
+export declare const flattenTree_unstable: <Props extends TreeItemProps<unknown>>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -75,13 +77,13 @@ export declare const flattenTree_unstable: <Value = string>(items: NestedTreeIte
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree<Value = string> = {
+export declare type FlatTree<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = {
     /**
      * returns the properties required for the Tree component to work properly.
      * That includes:
      * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
      */
-    getTreeProps(): FlatTreeProps<Value>;
+    getTreeProps(): FlatTreeProps<Props['value']>;
     /**
      * internal method used to react to an `onNavigation` event.
      * This method ensures proper navigation on keyboard and mouse interaction.
@@ -105,7 +107,7 @@ export declare type FlatTree<Value = string> = {
      * };
      *```
      */
-    navigate(data: TreeNavigationData_unstable<Value>): void;
+    navigate(data: TreeNavigationData_unstable<Props['value']>): void;
     /**
      * returns next item to be focused on a navigation.
      * This method is provided to decouple the element that needs to be focused from
@@ -113,23 +115,43 @@ export declare type FlatTree<Value = string> = {
      *
      * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>): FlatTreeItem<Value> | undefined;
+    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable<Props['value']>): FlatTreeItem<Props> | undefined;
     /**
      * an iterable containing all visually available flat tree items
      */
-    items(): IterableIterator<FlatTreeItem<Value>>;
+    items(): IterableIterator<FlatTreeItem<Props>>;
 };
 
-export declare type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;
+/**
+ * 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<unknown> = FlatTreeItemProps> = {
+    index: number;
+    level: number;
+    childrenSize: number;
+    value: Props['value'];
+    parentValue: Props['parentValue'];
+    /**
+     * A reference to the element that will render the `TreeItem`,
+     * this is necessary for nodes with parents (to ensure child to parent navigation),
+     * if a node has no parent then this reference will be null.
+     */
+    ref: React_2.RefObject<HTMLDivElement>;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentValue'>;
+};
 
-export declare type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {
+export declare type FlatTreeItemProps<Value = string> = Omit<TreeItemProps<Value>, 'itemType'> & Partial<Pick<TreeItemProps<Value>, 'itemType'>> & {
     value: Value;
     parentValue?: Value;
 };
 
-export declare type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
+declare type FlatTreeOptions<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps> = Pick<TreeProps<Props['value']>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;
+
+export declare type FlatTreeProps<Value = string> = Required<Pick<TreeProps<Value>, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
     ref: React_2.Ref<HTMLDivElement>;
-}>;
+    openItems: ImmutableSet<Value>;
+};
 
 declare interface ImmutableSet<Value> {
     /**
@@ -157,24 +179,11 @@ declare interface ImmutableSet<Value> {
     [Symbol.iterator](): IterableIterator<Value>;
 }
 
-/**
- * @internal
- * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator
- * to ensure required properties when building a FlatTreeITem
- */
-declare type MutableFlatTreeItem<Value = string> = {
-    parentValue?: Value;
-    childrenSize: number;
-    index: number;
-    value: Value;
-    level: number;
-    ref: React_2.RefObject<HTMLDivElement>;
-    getTreeItemProps(): Required<Pick<TreeItemProps<Value>, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps<Value>;
+export declare type NestedTreeItem<Props extends TreeItemProps<unknown>> = Omit<Props, 'subtree' | 'itemType'> & {
+    subtree?: NestedTreeItem<Props>[];
 };
 
-export declare type NestedTreeItem<Value = string> = Omit<TreeItemProps<Value>, 'subtree'> & {
-    subtree?: NestedTreeItem<Value>[];
-};
+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;
 
@@ -183,6 +192,11 @@ export declare const renderTree_unstable: (state: TreeState, contextValues: Tree
  */
 export declare const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSX.Element;
 
+/**
+ * Render the final JSX of TreeItemAside
+ */
+export declare const renderTreeItemAside_unstable: (state: TreeItemAsideState) => JSX.Element | null;
+
 /**
  * Render the final JSX of TreeItemLayout
  */
@@ -210,7 +224,7 @@ export declare const Tree: React_2.ForwardRefExoticComponent<Omit<TreeSlots, "ro
     ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
     }>;
 }, "ref"> & {
-    appearance?: "subtle" | "subtle-alpha" | "transparent" | undefined;
+    appearance?: "transparent" | "subtle" | "subtle-alpha" | undefined;
     size?: "small" | "medium" | undefined;
     openItems?: Iterable<string> | undefined;
     defaultOpenItems?: Iterable<string> | undefined;
@@ -226,10 +240,9 @@ export declare type TreeContextValue = {
     size: 'small' | 'medium';
     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<unknown>): void;
-    requestNavigation(data: TreeNavigationData_unstable<unknown>): void;
+    requestTreeResponse(request: TreeItemRequest<unknown>): void;
 };
 
 declare type TreeContextValues = {
@@ -260,18 +273,63 @@ export declare const TreeItem: React_2.ForwardRefExoticComponent<Omit<Partial<Tr
     style?: TreeItemCSSProperties | undefined;
 }, "ref"> & {
     value?: string | undefined;
-    leaf?: boolean | undefined;
+    itemType: TreeItemType;
 } & React_2.RefAttributes<HTMLDivElement>> & (<Value = string>(props: TreeItemProps<Value>) => JSX.Element);
 
+/**
+ * TreeItemAside component - represents a custom set of actionable elements that will be visible when a certain
+ * `TreeItem` is currently "active".
+ */
+export declare const TreeItemAside: ForwardRefComponent<TreeItemAsideProps>;
+
+export declare const treeItemAsideClassNames: SlotClassNames<TreeItemAsideSlots>;
+
+/**
+ * TreeItemAside Props
+ */
+export declare type TreeItemAsideProps = ComponentProps<TreeItemAsideSlots> & {
+    /**
+     * boolean indicating if the aside content should behave as "actions"
+     *
+     * 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?: boolean;
+    /**
+     * Forces visibility of the aside content, even if they're actions
+     */
+    visible?: true;
+};
+
+export declare type TreeItemAsideSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TreeItemAside
+ */
+export declare type TreeItemAsideState = ComponentState<TreeItemAsideSlots> & {
+    actions: boolean;
+    visible: boolean;
+    buttonContextValue: ButtonContextValue;
+};
+
 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>;
+    value: unknown;
+    itemType: TreeItemType;
+    open: boolean;
 };
 
 declare type TreeItemContextValues = {
     treeItem: TreeItemContextValue;
-    button: ButtonContextValue;
 };
 
 declare type TreeItemCSSProperties = React_2.CSSProperties & {
@@ -293,25 +351,26 @@ export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlot
 export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
 
 export declare type TreeItemLayoutSlots = {
-    root: Slot<'span'>;
+    root: Slot<'div'>;
     /**
-     * Icon slot that renders right before main content
+     * Expand icon slot,
+     * by default renders a chevron icon to indicate opening and closing
      */
-    iconBefore?: Slot<'span'>;
+    expandIcon?: Slot<'div'>;
     /**
-     * Icon slot that renders right after main content
+     * Icon slot that renders right before main content
      */
-    iconAfter?: Slot<'span'>;
+    iconBefore?: Slot<'div'>;
     /**
-     * slot that render right after main content and iconAfter
+     * Icon slot that renders right after main content
      */
-    aside?: Slot<'span'>;
+    iconAfter?: Slot<'div'>;
 };
 
 /**
  * State used in rendering TreeItemLayout
  */
-export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & TreeItemContextValue;
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots>;
 
 export declare const treeItemLevelToken: "--fluent-TreeItem--level";
 
@@ -334,33 +393,34 @@ declare type TreeItemPersonaLayoutContextValues = {
 export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
 export declare type TreeItemPersonaLayoutSlots = {
-    root: Slot<'span'>;
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * Expand icon slot,
+     * by default renders a chevron icon to indicate opening and closing
+     */
+    expandIcon?: 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'>;
+    description?: Slot<'div'>;
     /**
      * A layout wrapper for the main and description slots
      */
-    content: Slot<'div'>;
+    content: NonNullable<Slot<'div'>>;
 };
 
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & TreeItemContextValue & {
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
 };
 
@@ -369,48 +429,31 @@ export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaL
  */
 export declare type TreeItemProps<Value = string> = ComponentProps<Partial<TreeItemSlots>> & {
     value?: Value;
-    /**
-     * 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;
 };
 
-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<Value> = {
+    itemType: TreeItemType;
+} & (OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'> | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, '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';
+
 export declare type TreeNavigationData_unstable<Value = string> = {
     value: Value;
     target: HTMLElement;
@@ -525,7 +568,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
@@ -539,7 +584,7 @@ export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
  * @param flatTreeItemProps - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export declare function useFlatTree_unstable<Value = string>(flatTreeItemProps: FlatTreeItemProps<Value>[], options?: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree<Value>;
+export declare function useFlatTree_unstable<Props extends FlatTreeItemProps<unknown> = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions<Props>): FlatTree<Props>;
 
 /**
  * Create the state required to render Tree.
@@ -567,7 +612,23 @@ export declare function useTreeContextValues_unstable(state: TreeState): TreeCon
  */
 export declare function useTreeItem_unstable<Value = string>(props: TreeItemProps<Value>, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
 
-export declare const useTreeItemContext_unstable: () => TreeItemContextValue;
+/**
+ * Create the state required to render TreeItemAside.
+ *
+ * The returned state can be modified with hooks such as useTreeItemAsideStyles_unstable,
+ * before being passed to renderTreeItemAside_unstable.
+ *
+ * @param props - props from this instance of TreeItemAside
+ * @param ref - reference to root HTMLElement of TreeItemAside
+ */
+export declare const useTreeItemAside_unstable: (props: TreeItemAsideProps, ref: React_2.Ref<HTMLElement>) => TreeItemAsideState;
+
+/**
+ * Apply styling to the TreeItemAside slots based on the state
+ */
+export declare const useTreeItemAsideStyles_unstable: (state: TreeItemAsideState) => TreeItemAsideState;
+
+export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
 
 /**
  * Create the state required to render TreeItemLayout.

package/lib/TreeItemAside.js

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

package/lib/TreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/TreeItemAside.ts"],"sourcesContent":["export * from './components/TreeItemAside/index';\n"],"mappings":"AAAA,cAAc"}

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.