@fluentui/react-tree 9.0.0-beta.26 → 9.0.0-beta.27

package/CHANGELOG.json

@@ -2,7 +2,70 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Thu, 20 Jul 2023 18:24:27 GMT",
+      "date": "Tue, 25 Jul 2023 13:26:26 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.27",
+      "version": "9.0.0-beta.27",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "0d4d0ef8daebaf5b6ebbcce17e64e35488864e0e",
+            "comment": "chore: moves slots from TreeItem to TreeItemLayout"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "c017e880f238c1f113ff7ff6e28560d77e7ea46b",
+            "comment": "feat: creates FlatTree component"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.14",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.25",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.26",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.3",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.26",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 20 Jul 2023 18:27:36 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.26",
       "version": "9.0.0-beta.26",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Thu, 20 Jul 2023 18:24:27 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:26:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.27)
+
+Tue, 25 Jul 2023 13:26:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.26..@fluentui/react-tree_v9.0.0-beta.27)
+
+### Changes
+
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+- chore: moves slots from TreeItem to TreeItemLayout ([PR #28621](https://github.com/microsoft/fluentui/pull/28621) by bernardo.sunderhus@gmail.com)
+- feat: creates FlatTree component ([PR #28620](https://github.com/microsoft/fluentui/pull/28620) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-button to v9.3.25 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-portal to v9.3.3 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-radio to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+
 ## [9.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.26)
 
-Thu, 20 Jul 2023 18:24:27 GMT 
+Thu, 20 Jul 2023 18:27:36 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.25..@fluentui/react-tree_v9.0.0-beta.26)
 
 ### Changes

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import type { ArrowUp } from '@fluentui/keyboard-keys';
 import type { AvatarContextValue } from '@fluentui/react-avatar';
 import type { AvatarSize } from '@fluentui/react-avatar';
 import { ButtonContextValue } from '@fluentui/react-button';
-import type { Checkbox } from '@fluentui/react-checkbox';
+import { Checkbox } from '@fluentui/react-checkbox';
 import { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
@@ -20,7 +20,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Home } from '@fluentui/keyboard-keys';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
-import type { Radio } from '@fluentui/react-radio';
+import { Radio } from '@fluentui/react-radio';
 import { RadioProps } from '@fluentui/react-radio';
 import * as React_2 from 'react';
 import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
@@ -49,7 +49,7 @@ declare function dangerouslyCreateImmutableMap<Key, Value>(internalMap: Map<Key,
  */
 declare function dangerouslyCreateImmutableSet<Value>(internalSet: Set<Value>): ImmutableSet<Value>;
 
-declare type FlattenedTreeItem<Props extends TreeItemProps> = FlatTreeItemProps & Props;
+declare type FlattenedTreeItem<Props extends TreeItemProps> = HeadlessFlatTreeItemProps & Props;
 
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
@@ -91,7 +91,84 @@ declare type FlattenedTreeItem<Props extends TreeItemProps> = FlatTreeItemProps
  * ]);
  * ```
  */
-export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: NestedTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
+export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: FlattenTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
+
+export declare type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
+    value: TreeItemValue;
+    subtree?: FlattenTreeItem<Props>[];
+};
+
+/**
+ * FlatTree component - TODO: add more docs
+ */
+export declare const FlatTree: ForwardRefComponent<FlatTreeProps>;
+
+export declare const flatTreeClassNames: SlotClassNames<TreeSlots>;
+
+export declare type FlatTreeProps = 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<TreeItemValue>;
+    /**
+     * 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;
+    /**
+     * This refers to the selection mode of the tree.
+     * - undefined: No selection can be done.
+     * - 'single': Only one tree item can be selected, radio buttons are rendered.
+     * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.
+     *
+     * @default undefined
+     */
+    selectionMode?: SelectionMode_2;
+    /**
+     * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
+     * Controls the state of the checked tree items.
+     * These property is ignored for subtrees.
+     */
+    checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
+    /**
+     * Callback fired when the component changes value from checked state.
+     * These property is ignored for subtrees.
+     *
+     * @param event - a React's Synthetic event
+     * @param data - A data object with relevant information,
+     * such as checked value and type of interaction that created the event.
+     */
+    onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
+};
 
 /**
  * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -103,13 +180,16 @@ export declare const flattenTree_unstable: <Props extends TreeItemProps>(items:
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
+export declare type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {
     /**
      * returns the properties required for the Tree component to work properly.
      * That includes:
      * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
      */
-    getTreeProps(): FlatTreeProps;
+    getTreeProps(): Required<Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>> & {
+        ref: React_2.Ref<HTMLDivElement>;
+        openItems: ImmutableSet<TreeItemValue>;
+    };
     /**
      * internal method used to react to an `onNavigation` event.
      * This method ensures proper navigation on keyboard and mouse interaction.
@@ -141,42 +221,42 @@ export declare type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps
      *
      * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(visibleItems: FlatTreeItem<Props>[], data: TreeNavigationData_unstable): FlatTreeItem<Props> | undefined;
+    getNextNavigableItem(visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable): HeadlessTreeItem<Props> | undefined;
     /**
      * similar to getElementById but for FlatTreeItems
      */
-    getElementFromItem(item: FlatTreeItem<Props>): HTMLElement | null;
+    getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
     /**
      * an iterable containing all visually available flat tree items
      */
-    items(): IterableIterator<FlatTreeItem<Props>>;
+    items(): IterableIterator<HeadlessTreeItem<Props>>;
 };
 
+export declare type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;
+
+export declare type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
+
+export declare type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems' | 'defaultChecked'>;
+
 /**
- * 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
+ * The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to
+ * `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios
  */
-export declare type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
+declare type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
     index: number;
     level: number;
     childrenValues: TreeItemValue[];
     value: TreeItemValue;
     parentValue: TreeItemValue | undefined;
-    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentId'>;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentValue'>;
 };
 
-export declare type FlatTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & Partial<Pick<TreeItemProps, 'itemType'>> & {
+declare type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {
     value: TreeItemValue;
+    itemType?: TreeItemType;
     parentValue?: TreeItemValue;
 };
 
-declare type FlatTreeOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'checkedItems' | 'defaultCheckedItems' | 'onCheckedChange'>;
-
-export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>> & {
-    ref: React_2.Ref<HTMLDivElement>;
-    openItems: ImmutableSet<TreeItemValue>;
-};
-
 declare interface ImmutableMap<Key, Value> {
     clear(): ImmutableMap<Key, Value>;
     delete(key: Key): ImmutableMap<Key, Value>;
@@ -210,6 +290,7 @@ declare interface ImmutableMap<Key, Value> {
 declare const ImmutableMap: {
     empty: ImmutableMap<never, never>;
     create: typeof createImmutableMap;
+    isImmutableMap: typeof isImmutableMap;
     dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableMap;
 };
 
@@ -248,19 +329,21 @@ declare interface ImmutableSet<Value> {
 declare const ImmutableSet: {
     empty: ImmutableSet<never>;
     create: typeof createImmutableSet;
+    isImmutableSet: typeof isImmutableSet;
     dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableSet;
 };
 
-declare type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
+declare function isImmutableMap<Key, Value>(value: unknown): value is ImmutableMap<Key, Value>;
 
-export declare type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
-    value: TreeItemValue;
-    subtree?: NestedTreeItem<Props>[];
-};
+declare function isImmutableSet<Value>(value: unknown): value is ImmutableSet<Value>;
+
+declare type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
 
 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;
+declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
+export { renderTree_unstable as renderFlatTree_unstable }
+export { renderTree_unstable }
 
 /**
  * Render the final JSX of TreeItem
@@ -280,12 +363,7 @@ export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPerso
 declare type SingleSelectValue = NonNullable<RadioProps['checked']>;
 
 /**
- * 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.
+ * Tree component - TODO: add more docs
  */
 export declare const Tree: ForwardRefComponent<TreeProps>;
 
@@ -319,7 +397,7 @@ export declare type TreeContextValue = {
     requestTreeResponse(request: TreeItemRequest): void;
 };
 
-declare type TreeContextValues = {
+export declare type TreeContextValues = {
     tree: TreeContextValue;
 };
 
@@ -337,27 +415,29 @@ declare type TreeContextValues = {
  */
 export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 
-export declare const treeItemClassNames: SlotClassNames<TreeItemInternalSlot>;
+export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
-declare type TreeItemContextValue = {
+export declare type TreeItemContextValue = {
+    isActionsVisible: boolean;
+    isAsideVisible: boolean;
+    selectionRef: React_2.Ref<HTMLInputElement>;
+    actionsRef: React_2.Ref<HTMLDivElement>;
+    expandIconRef: React_2.Ref<HTMLDivElement>;
     layoutRef: React_2.Ref<HTMLDivElement>;
     subtreeRef: React_2.Ref<HTMLDivElement>;
     itemType: TreeItemType;
-    value: string;
+    value: TreeItemValue;
     open: boolean;
 };
 
 declare type TreeItemContextValues = {
     treeItem: TreeItemContextValue;
-    treeItemSlots: TreeItemSlotsContextValue;
 };
 
 declare type TreeItemCSSProperties = React_2.CSSProperties & {
     [treeItemLevelToken]?: string | number;
 };
 
-declare type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;
-
 /**
  * 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.
@@ -365,9 +445,7 @@ declare type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;
  */
 export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
-export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutInternalSlots>;
-
-declare type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & TreeItemSlotsContextValue;
+export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
 
 /**
  * TreeItemLayout Props
@@ -388,12 +466,29 @@ export declare type TreeItemLayoutSlots = {
      * Icon slot that renders right after main content
      */
     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;
+    }>>;
+    selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
 };
 
 /**
  * State used in rendering TreeItemLayout
  */
-export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
     buttonContextValue: ButtonContextValue;
 };
 
@@ -406,20 +501,18 @@ export declare const treeItemLevelToken: "--fluent-TreeItem--level";
  */
 export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
 
-export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutInternalSlots>;
+export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
 
 declare type TreeItemPersonaLayoutContextValues = {
     avatar: AvatarContextValue;
 };
 
-declare type TreeItemPersonaLayoutInternalSlots = TreeItemPersonaLayoutSlots & Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;
-
 /**
  * TreeItemPersonaLayout Props
  */
 export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
-export declare type TreeItemPersonaLayoutSlots = {
+export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
     root: NonNullable<Slot<'div'>>;
     /**
      * Avatar to display.
@@ -438,7 +531,7 @@ export declare type TreeItemPersonaLayoutSlots = {
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
     buttonContextValue: ButtonContextValue;
 };
@@ -461,40 +554,12 @@ export declare type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
         style?: TreeItemCSSProperties;
     }>>;
-    /**
-     * 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;
-    }>>;
-    /**
-     * Selection indicator if selection type is checkbox
-     */
-    checkboxIndicator?: Slot<typeof Checkbox>;
-    /**
-     * Selection indicator if selection type is radio
-     */
-    radioIndicator?: Slot<typeof Radio>;
-};
-
-declare type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'> & {
-    selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
 };
 
 /**
  * State used in rendering TreeItem
  */
-export declare type TreeItemState = ComponentState<TreeItemInternalSlot> & TreeItemContextValue & TreeItemSlotsContextValue & {
+export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
     level: number;
     itemType: TreeItemType;
 };
@@ -578,9 +643,8 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      */
     openItems?: Iterable<TreeItemValue>;
     /**
-     * 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.
+     * This refers to a list of ids of default opened items.
+     * This property is ignored for subtrees.
      */
     defaultOpenItems?: Iterable<TreeItemValue>;
     /**
@@ -618,8 +682,7 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      */
     checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
     /**
-     * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
-     * Default value for the uncontrolled state of checked tree items.
+     * This refers to a list of ids of default checked items, or a list of tuples of ids and checked state.
      * These property is ignored for subtrees.
      */
     defaultCheckedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
@@ -638,16 +701,24 @@ export declare const TreeProvider: Provider<TreeContextValue | undefined> & FC<P
 
 export declare type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
 
-export declare type TreeSlots = {
+declare type TreeSlots = {
     root: Slot<'div'>;
 };
+export { TreeSlots as FlatTreeSlots }
+export { TreeSlots }
 
 /**
  * State used in rendering Tree
  */
-export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
+declare type TreeState = ComponentState<TreeSlots> & TreeContextValue & {
     open: boolean;
 };
+export { TreeState as FlatTreeState }
+export { TreeState }
+
+export declare const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
+
+export declare const useFlatTreeStyles_unstable: (state: TreeState) => TreeState;
 
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -661,22 +732,15 @@ 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<Props extends FlatTreeItemProps = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions): FlatTree<Props>;
+export declare function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(flatTreeItemProps: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTree<Props>;
 
-/**
- * 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;
+declare function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
+export { useTreeContextValues_unstable as useFlatTreeContextValues_unstable }
+export { useTreeContextValues_unstable }
 
 /**
  * Create the state required to render TreeItem.

package/lib/FlatTree.js

@@ -0,0 +1 @@
+export * from './components/FlatTree/index';

package/lib/FlatTree.js.map

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

package/lib/components/FlatTree/FlatTree.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useTreeContextValues_unstable as useFlatTreeContextValues_unstable, renderTree_unstable as renderFlatTree_unstable } from '../Tree/index';
+import { useFlatTree_unstable } from './useFlatTree';
+import { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';
+/**
+ * FlatTree component - TODO: add more docs
+ */ export const FlatTree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useFlatTree_unstable(props, ref);
+    const contextValues = useFlatTreeContextValues_unstable(state);
+    useFlatTreeStyles_unstable(state);
+    return renderFlatTree_unstable(state, contextValues);
+});
+FlatTree.displayName = 'FlatTree';

package/lib/components/FlatTree/FlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FlatTree.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FlatTreeProps } from './FlatTree.types';\nimport {\n  useTreeContextValues_unstable as useFlatTreeContextValues_unstable,\n  renderTree_unstable as renderFlatTree_unstable,\n} from '../Tree/index';\nimport { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\n\n/**\n * FlatTree component - TODO: add more docs\n */\nexport const FlatTree: ForwardRefComponent<FlatTreeProps> = React.forwardRef((props, ref) => {\n  const state = useFlatTree_unstable(props, ref);\n  const contextValues = useFlatTreeContextValues_unstable(state);\n  useFlatTreeStyles_unstable(state);\n  return renderFlatTree_unstable(state, contextValues);\n});\n\nFlatTree.displayName = 'FlatTree';\n"],"names":["React","useTreeContextValues_unstable","useFlatTreeContextValues_unstable","renderTree_unstable","renderFlatTree_unstable","useFlatTree_unstable","useFlatTreeStyles_unstable","FlatTree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SACEC,iCAAiCC,iCAAiC,EAClEC,uBAAuBC,uBAAuB,QACzC,gBAAgB;AACvB,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE;;CAEC,GACD,OAAO,MAAMC,yBAA+CP,MAAMQ,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQN,qBAAqBI,OAAOC;IAC1C,MAAME,gBAAgBV,kCAAkCS;IACxDL,2BAA2BK;IAC3B,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/FlatTree/FlatTree.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeState,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\n\nexport { TreeSlots as FlatTreeSlots, TreeState as FlatTreeState };\n\nexport type FlatTreeProps = 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<TreeItemValue>;\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   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked 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 checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n"],"names":[],"mappings":"AAAA,WAkFE"}

package/lib/components/FlatTree/index.js

@@ -0,0 +1,6 @@
+export * from './FlatTree';
+export * from './FlatTree.types';
+export { renderTree_unstable as renderFlatTree_unstable, useTreeContextValues_unstable as useFlatTreeContextValues_unstable } from '../Tree/index';
+export * from './useHeadlessFlatTree';
+export * from './useFlatTree';
+export * from './useFlatTreeStyles.styles';

package/lib/components/FlatTree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FlatTree';\nexport * from './FlatTree.types';\nexport {\n  renderTree_unstable as renderFlatTree_unstable,\n  useTreeContextValues_unstable as useFlatTreeContextValues_unstable,\n} from '../Tree/index';\nexport * from './useHeadlessFlatTree';\nexport * from './useFlatTree';\nexport * from './useFlatTreeStyles.styles';\n"],"names":["renderTree_unstable","renderFlatTree_unstable","useTreeContextValues_unstable","useFlatTreeContextValues_unstable"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,SACEA,uBAAuBC,uBAAuB,EAC9CC,iCAAiCC,iCAAiC,QAC7D,gBAAgB;AACvB,cAAc,wBAAwB;AACtC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}