@fluentui/react-tree 9.0.0-beta.8 → 9.0.0

package/dist/index.d.ts

@@ -1,31 +1,177 @@
 /// <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 { ArrowDown } from '@fluentui/keyboard-keys';
+import type { ArrowLeft } from '@fluentui/keyboard-keys';
+import type { ArrowRight } from '@fluentui/keyboard-keys';
+import type { 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 { 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';
 import { ContextSelector } from '@fluentui/react-context-selector';
-import { End } from '@fluentui/keyboard-keys';
-import { Enter } from '@fluentui/keyboard-keys';
+import type { End } from '@fluentui/keyboard-keys';
+import type { 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 type { Home } from '@fluentui/keyboard-keys';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
+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';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * properly creates an ImmutableMap instance from an iterable
+ */
+declare function createImmutableMap<Key, Value>(iterable?: Iterable<[Key, Value]>): ImmutableMap<Key, Value>;
+
+/**
+ * properly creates an ImmutableSet instance from an iterable
+ */
+declare function createImmutableSet<Value>(iterable?: Iterable<Value>): ImmutableSet<Value>;
+
+/**
+ * Avoid using *dangerouslyCreateImmutableMap*, since this method will expose internally used set, use  createImmutableMap instead,
+ * @param internalMap - a set that is used internally to store values.
+ */
+declare function dangerouslyCreateImmutableMap<Key, Value>(internalMap: Map<Key, Value>): ImmutableMap<Key, Value>;
+
+/**
+ * Avoid using *dangerouslyCreateImmutableSet*, since this method will expose internally used set, use  createImmutableSet instead,
+ * @param internalSet - a set that is used internally to store values.
+ */
+declare function dangerouslyCreateImmutableSet<Value>(internalSet: Set<Value>): ImmutableSet<Value>;
+
+declare type FlattenedTreeItem<Props extends TreeItemProps> = HeadlessFlatTreeItemProps & Props;
+
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
+ * @example
+ * ```tsx
+ * const defaultItems = flattenTree_unstable([
+ *  {
+ *    children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
+ *    subtree: [
+ *      {
+ *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
+ *      },
+ *      {
+ *        children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
+ *      },
+ *      {
+ *        children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
+ *      },
+ *    ],
+ *  },
+ *  {
+ *    children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
+ *    subtree: [
+ *      {
+ *        children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
+ *        subtree: [
+ *          {
+ *            children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
+ *            subtree: [
+ *              {
+ *                children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
+ *              },
+ *            ],
+ *          },
+ *        ],
+ *      },
+ *    ],
+ *  },
+ * ]);
+ * ```
+ */
+export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: FlattenTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
+
+export declare type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
+    value: TreeItemValue;
+    subtree?: FlattenTreeItem<Props>[];
+};
+
+/**
+ * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[];
+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?(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
@@ -37,13 +183,16 @@ export declare const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTree
  *
  * On simple scenarios it is advised to simply use a nested structure instead.
  */
-export declare type FlatTree = {
+export declare type 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' | '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.
@@ -57,7 +206,7 @@ export declare type FlatTree = {
      *   event.preventDefault();
      *   const nextItem = tree.getNextNavigableItem(data);
      *   // scroll to item using virtualization scroll mechanism
-     *   if (nextItem && document.getElementById(nextItem.id)) {
+     *   if (nextItem && tree.getElementFromItem(nextItem)) {
      *     listRef.current.scrollToItem(nextItem.index);
      *   }
      *   // wait for scrolling to happen and then invoke navigate method
@@ -75,23 +224,82 @@ export declare type FlatTree = {
      *
      * On the case of TypeAhead navigation this method returns the current item.
      */
-    getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;
+    getNextNavigableItem(visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable): HeadlessTreeItem<Props> | undefined;
+    /**
+     * similar to getElementById but for FlatTreeItems
+     */
+    getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
     /**
      * an iterable containing all visually available flat tree items
      */
-    items(): IterableIterator<FlatTreeItem>;
+    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' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {
+    defaultCheckedItems?: TreeProps['checkedItems'];
 };
 
-export declare type FlatTreeItem = Readonly<MutableFlatTreeItem>;
+/**
+ * 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
+ */
+declare type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
+    level: number;
+    index: number;
+    position: number;
+    childrenValues: TreeItemValue[];
+    value: TreeItemValue;
+    parentValue: TreeItemValue | undefined;
+    itemType: TreeItemType;
+    getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Omit<Props, 'parentValue'>;
+};
 
-export declare type FlatTreeItemProps = TreeItemProps & {
-    id: TreeItemId;
-    parentId?: string;
+declare type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {
+    value: TreeItemValue;
+    itemType?: TreeItemType;
+    parentValue?: TreeItemValue;
 };
 
-export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & {
-    ref: React_2.Ref<HTMLDivElement>;
-}>;
+declare interface ImmutableMap<Key, Value> {
+    clear(): ImmutableMap<Key, Value>;
+    delete(key: Key): ImmutableMap<Key, Value>;
+    /**
+     * Returns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.
+     * @returns Returns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.
+     */
+    get(key: Key): Value | undefined;
+    /**
+     * @returns boolean indicating whether an element with the specified key exists or not.
+     */
+    has(key: Key): boolean;
+    /**
+     * Adds a new element with a specified key and value to the Map. If an element with the same key already exists, the element will be updated.
+     */
+    set(key: Key, value: Value): ImmutableMap<Key, Value>;
+    /**
+     * @returns the number of elements in the Map.
+     */
+    readonly size: number;
+    /** Iterates over entries in the Map. */
+    [Symbol.iterator](): IterableIterator<[Key, Value]>;
+    /**
+     * @internal
+     * Exposes the internal map used to store values.
+     * This is an internal API and should not be used directly.
+     */
+    dangerouslyGetInternalMap_unstable(): Map<Key, Value>;
+}
+
+declare const ImmutableMap: {
+    empty: ImmutableMap<never, never>;
+    create: typeof createImmutableMap;
+    isImmutableMap: typeof isImmutableMap;
+    dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableMap;
+};
 
 declare interface ImmutableSet<Value> {
     /**
@@ -117,25 +325,30 @@ declare interface ImmutableSet<Value> {
     has(value: Value): boolean;
     /** Iterates over values in the ImmutableSet. */
     [Symbol.iterator](): IterableIterator<Value>;
+    /**
+     * @internal
+     * Exposes the internal set used to store values.
+     * This is an internal API and should not be used directly.
+     */
+    dangerouslyGetInternalSet_unstable(): Set<Value>;
 }
 
-/**
- * @internal
- * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator
- * to ensure required properties when building a FlatTreeITem
- */
-declare type MutableFlatTreeItem = {
-    parentId?: string;
-    childrenSize: number;
-    index: number;
-    id: string;
-    level: number;
-    getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> & TreeItemProps;
+declare const ImmutableSet: {
+    empty: ImmutableSet<never>;
+    create: typeof createImmutableSet;
+    isImmutableSet: typeof isImmutableSet;
+    dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableSet;
 };
 
-export declare type NestedTreeItem = Omit<TreeItemProps, 'subtree'> & {
-    subtree?: NestedTreeItem[];
-};
+declare function isImmutableMap<Key, Value>(value: unknown): value is ImmutableMap<Key, Value>;
+
+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 renderFlatTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
 
 export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
 
@@ -154,31 +367,46 @@ export declare const renderTreeItemLayout_unstable: (state: TreeItemLayoutState)
  */
 export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPersonaLayoutState, contextValues: TreeItemPersonaLayoutContextValues) => JSX.Element;
 
+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.
+ * The `Tree` component renders nested items in a hierarchical structure.
+ * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
  */
 export declare const Tree: ForwardRefComponent<TreeProps>;
 
+export declare type TreeCheckedChangeData = {
+    value: TreeItemValue;
+    checkedItems: Map<TreeItemValue, TreeSelectionValue>;
+    target: HTMLElement;
+    event: React_2.ChangeEvent<HTMLElement>;
+    type: 'Change';
+} & ({
+    selectionMode: 'multiselect';
+    checked: MultiSelectValue;
+} | {
+    selectionMode: 'single';
+    checked: SingleSelectValue;
+});
+
+export declare type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];
+
 export declare const treeClassNames: SlotClassNames<TreeSlots>;
 
 export declare type TreeContextValue = {
     level: number;
+    selectionMode: 'none' | SelectionMode_2;
     appearance: 'subtle' | 'subtle-alpha' | 'transparent';
     size: 'small' | 'medium';
-    openItems: ImmutableSet<TreeItemId>;
+    openItems: ImmutableSet<TreeItemValue>;
+    checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;
     /**
-     * Requests dialog main component to update it's internal open state
+     * requests root Tree component to respond to some tree item event,
      */
-    requestOpenChange(data: TreeOpenChangeData): void;
-    requestNavigation(data: TreeNavigationData_unstable): void;
+    requestTreeResponse(request: TreeItemRequest): void;
 };
 
-declare type TreeContextValues = {
+export declare type TreeContextValues = {
     tree: TreeContextValue;
 };
 
@@ -191,28 +419,35 @@ declare type TreeContextValues = {
  * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
  * which should be used as a direct child of TreeItem.
  *
- * When a TreeItem has nsted child subtree, an expand/collapse control is displayed,
+ * When a TreeItem has nested child subtree, an expand/collapse control is displayed,
  * allowing the user to show or hide the children.
  */
 export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 
 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: TreeItemValue;
+    open: boolean;
+    checked: TreeSelectionValue;
 };
 
 declare type TreeItemContextValues = {
     treeItem: TreeItemContextValue;
-    button: ButtonContextValue;
 };
 
 declare type TreeItemCSSProperties = React_2.CSSProperties & {
     [treeItemLevelToken]?: string | number;
 };
 
-export declare type TreeItemId = string;
-
 /**
  * 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.
@@ -229,21 +464,53 @@ export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutS
 
 export declare type TreeItemLayoutSlots = {
     root: Slot<'div'>;
+    /**
+     * Content. Children of the root slot are automatically rendered here
+     */
+    main: NonNullable<Slot<'div'>>;
     /**
      * Icon slot that renders right before main content
      */
-    iconBefore?: Slot<'span'>;
+    iconBefore?: Slot<'div'>;
     /**
      * Icon slot that renders right after main content
      */
-    iconAfter?: Slot<'span'>;
-    aside?: Slot<'span'>;
+    iconAfter?: Slot<'div'>;
+    /**
+     * Expand icon slot,
+     * by default renders a chevron icon to indicate opening and closing
+     */
+    expandIcon?: Slot<'div'>;
+    /**
+     * Aside content is normally used to render a badge or other non-actionable content
+     * It is aria-hidden by default and is only meant to be used as visual aid.
+     */
+    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` and `aside` slots are positioned on the exact same spot,
+     * so they won't be visible at the same time.
+     * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.
+     *
+     * `actions` slot supports a `visible` prop to force visibility of the actions.
+     */
+    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<TreeItemLayoutSlots> & TreeItemContextValue;
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
+    buttonContextValue: ButtonContextValue;
+};
 
 export declare const treeItemLevelToken: "--fluent-TreeItem--level";
 
@@ -265,35 +532,28 @@ declare type TreeItemPersonaLayoutContextValues = {
  */
 export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
-export declare type TreeItemPersonaLayoutSlots = {
-    root: Slot<'span'>;
+export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
+    root: NonNullable<Slot<'div'>>;
     /**
      * 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'>;
+    media: NonNullable<Slot<'div'>>;
     /**
-     * aside text that works as extra textual information
+     * Content. Children of the root slot are automatically rendered here
      */
-    aside?: Slot<'span'>;
+    main: NonNullable<Slot<'div'>>;
     /**
-     * A layout wrapper for the main and description slots
+     * Secondary text that describes or complements the content
      */
-    content: Slot<'div'>;
+    description?: Slot<'div'>;
 };
 
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & TreeItemContextValue & {
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
+    buttonContextValue: ButtonContextValue;
 };
 
 /**
@@ -301,104 +561,86 @@ export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaL
  */
 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.
+     * A tree item can be a leaf or a branch
      */
-    leaf?: boolean;
+    itemType: TreeItemType;
+    value?: TreeItemValue;
 };
 
-export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined>;
+export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
+
+declare type TreeItemRequest = {
+    itemType: TreeItemType;
+} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> | TreeNavigationData_unstable | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>);
 
 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 TreeItemValue = string | number;
+
 export declare type TreeNavigationData_unstable = {
-    event: React_2.MouseEvent<HTMLElement>;
     target: HTMLElement;
+    value: TreeItemValue;
+} & ({
+    event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: 'TypeAhead';
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowRight;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowLeft;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowUp;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof ArrowDown;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof Home;
 } | {
     event: React_2.KeyboardEvent<HTMLElement>;
-    target: HTMLElement;
     type: typeof End;
-};
+});
 
 export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
 
 export declare type TreeOpenChangeData = {
     open: boolean;
+    openItems: Set<TreeItemValue>;
+    value: TreeItemValue;
+    target: HTMLElement;
 } & ({
     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;
 });
 
@@ -423,13 +665,12 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * Controls the state of the open tree items.
      * These property is ignored for subtrees.
      */
-    openItems?: Iterable<TreeItemId>;
+    openItems?: Iterable<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<TreeItemId>;
+    defaultOpenItems?: Iterable<TreeItemValue>;
     /**
      * Callback fired when the component changes value from open state.
      * These property is ignored for subtrees.
@@ -448,19 +689,57 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * @param event - a React's Synthetic event
      * @param data - A data object with relevant information,
      */
-    onNavigation_unstable?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
+    onNavigation?(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;
 };
 
 export declare const TreeProvider: Provider<TreeContextValue | undefined> & FC<ProviderProps<TreeContextValue | undefined>>;
 
-export declare type TreeSlots = {
+export declare type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
+
+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 useFlatTreeContextValues_unstable: (state: TreeState) => TreeContextValues;
+
+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
@@ -471,20 +750,11 @@ export declare type TreeState = ComponentState<TreeSlots> & TreeContextValue;
  * It should be used on cases where more complex interactions with a Tree is required.
  * On simple scenarios it is advised to simply use a nested structure instead.
  *
- * @param flatTreeItemProps - a list of tree items
+ * @param props - a list of tree items
  * @param options - in case control over the internal openItems is required
  */
-export declare function useFlatTree_unstable(flatTreeItemProps: FlatTreeItemProps[], options?: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>): FlatTree;
+export declare function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: 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;
@@ -500,9 +770,11 @@ export declare function useTreeContextValues_unstable(state: TreeState): TreeCon
  * @param props - props from this instance of TreeItem
  * @param ref - reference to root HTMLElement of TreeItem
  */
-export declare const useTreeItem_unstable: (props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>) => TreeItemState;
+export declare function useTreeItem_unstable(props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
+
+export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
 
-export declare const useTreeItemContext_unstable: () => TreeItemContextValue;
+export declare function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues;
 
 /**
  * Create the state required to render TreeItemLayout.