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

package/dist/index.d.ts

@@ -7,6 +7,8 @@ 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 { 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';
@@ -18,22 +20,36 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 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> = FlatTreeItemProps & Props;
+declare type FlattenedTreeItem<Props extends TreeItemProps> = HeadlessFlatTreeItemProps & Props;
 
 /**
  * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
@@ -75,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
@@ -87,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.
@@ -125,40 +221,77 @@ 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;
-    childrenSize: 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'>;
+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>;
+}
 
-export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & {
-    ref: React_2.Ref<HTMLDivElement>;
-    openItems: ImmutableSet<TreeItemValue>;
+declare const ImmutableMap: {
+    empty: ImmutableMap<never, never>;
+    create: typeof createImmutableMap;
+    isImmutableMap: typeof isImmutableMap;
+    dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableMap;
 };
 
 declare interface ImmutableSet<Value> {
@@ -190,23 +323,27 @@ declare interface ImmutableSet<Value> {
      * Exposes the internal set used to store values.
      * This is an internal API and should not be used directly.
      */
-    dangerousGetInternalSet_unstable(): Set<Value>;
+    dangerouslyGetInternalSet_unstable(): Set<Value>;
 }
 
 declare const ImmutableSet: {
     empty: ImmutableSet<never>;
     create: typeof createImmutableSet;
-    dangerouslyCreate: typeof dangerouslyCreateImmutableSet;
+    isImmutableSet: typeof isImmutableSet;
+    dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableSet;
 };
 
-export declare type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
-    value: TreeItemValue;
-    subtree?: NestedTreeItem<Props>[];
-};
+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 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
@@ -223,30 +360,44 @@ 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.
+ * Tree component - TODO: add more docs
  */
 export declare const Tree: ForwardRefComponent<TreeProps>;
 
+export declare type TreeCheckedChangeData = {
+    value: TreeItemValue;
+    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<TreeItemValue>;
+    checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;
     /**
      * requests root Tree component to respond to some tree item event,
      */
     requestTreeResponse(request: TreeItemRequest): void;
 };
 
-declare type TreeContextValues = {
+export declare type TreeContextValues = {
     tree: TreeContextValue;
 };
 
@@ -264,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.
@@ -292,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 & Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;
+export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
 
 /**
  * TreeItemLayout Props
@@ -315,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;
 };
 
@@ -333,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.
@@ -365,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;
 };
@@ -382,36 +548,18 @@ export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | u
 
 declare type TreeItemRequest = {
     itemType: TreeItemType;
-} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> | TreeNavigationData_unstable);
+} & (OmitWithoutExpanding<TreeOpenChangeData, 'open'> | TreeNavigationData_unstable | OmitWithoutExpanding<TreeCheckedChangeData, 'checked' | 'selectionMode'>);
 
 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;
-    }>>;
 };
 
-declare type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;
-
 /**
  * State used in rendering TreeItem
  */
-export declare type TreeItemState = ComponentState<TreeItemInternalSlot> & TreeItemContextValue & TreeItemSlotsContextValue & {
+export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
     level: number;
     itemType: TreeItemType;
 };
@@ -455,7 +603,6 @@ export declare type TreeOpenChangeData = {
     open: boolean;
     value: TreeItemValue;
     target: HTMLElement;
-    openItems: ImmutableSet<TreeItemValue>;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     type: 'ExpandIconClick';
@@ -496,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>;
     /**
@@ -520,20 +666,59 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * @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]>;
+    /**
+     * 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]>;
+    /**
+     * 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 useFlatTreeStyles_unstable: (state: TreeState) => TreeState;
 
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
@@ -547,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"}