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

package/CHANGELOG.json

@@ -2,7 +2,124 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Mon, 03 Jul 2023 13:32:38 GMT",
+      "date": "Thu, 20 Jul 2023 18:24:27 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.26",
+      "version": "9.0.0-beta.26",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "f5b6134905e28c124b2dc34cc6bd286ca621de6a",
+            "comment": "feat: implements selection"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.27",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.13",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.24",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.25",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.2",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.25",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.12",
+            "commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Jul 2023 21:25:48 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.25",
+      "version": "9.0.0-beta.25",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "8a9e1018f2abb2c7608c49d32acf44e93c43cba6",
+            "comment": "chore: update devDependencies to use * for inner workspace dependencies"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 11 Jul 2023 18:46:36 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.25",
+      "version": "9.0.0-beta.25",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "64752d9a76638ccc4c91303347993b50e0e6d053",
+            "comment": "chore: move slots back to TreeItem and creates slot context"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74",
+            "comment": "chore: openItems property added to TreeOpenChangeData + minor internal improvements"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.12",
+            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.23",
+            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.11",
+            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0",
+            "commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Jul 2023 13:34:28 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.24",
       "version": "9.0.0-beta.24",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Mon, 03 Jul 2023 13:32:38 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Jul 2023 18:24:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [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 
+[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
+
+- feat: implements selection ([PR #28497](https://github.com/microsoft/fluentui/pull/28497) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.27 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+- Bump @fluentui/react-avatar to v9.5.13 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+- Bump @fluentui/react-button to v9.3.24 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.25 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+- Bump @fluentui/react-portal to v9.3.2 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+- Bump @fluentui/react-radio to v9.1.25 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.12 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
+
+## [9.0.0-beta.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.25)
+
+Tue, 11 Jul 2023 18:46:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.24..@fluentui/react-tree_v9.0.0-beta.25)
+
+### Changes
+
+- chore: move slots back to TreeItem and creates slot context ([PR #28492](https://github.com/microsoft/fluentui/pull/28492) by bernardo.sunderhus@gmail.com)
+- chore: openItems property added to TreeOpenChangeData + minor internal improvements ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.12 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
+- Bump @fluentui/react-button to v9.3.23 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.11 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
+
 ## [9.0.0-beta.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.24)
 
-Mon, 03 Jul 2023 13:32:38 GMT 
+Mon, 03 Jul 2023 13:34:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.23..@fluentui/react-tree_v9.0.0-beta.24)
 
 ### Changes

package/dist/index.d.ts

@@ -1,27 +1,54 @@
 /// <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 { ButtonContextValue } from '@fluentui/react-button';
+import type { 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 type { 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;
 
 /**
@@ -132,22 +159,58 @@ export declare type FlatTree<Props extends FlatTreeItemProps = FlatTreeItemProps
 export declare type FlatTreeItem<Props extends FlatTreeItemProps = FlatTreeItemProps> = {
     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'>;
 };
 
-export declare type FlatTreeItemProps = Omit<TreeItemProps, 'itemType'> & Partial<Pick<TreeItemProps, 'itemType'>> & {
+export declare type FlatTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & Partial<Pick<TreeItemProps, 'itemType'>> & {
     value: TreeItemValue;
     parentValue?: TreeItemValue;
 };
 
-declare type FlatTreeOptions = Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>;
+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'>> & {
+export declare type FlatTreeProps = Required<Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>> & {
     ref: React_2.Ref<HTMLDivElement>;
-    openItems: ImmutableSet<string>;
+    openItems: ImmutableSet<TreeItemValue>;
+};
+
+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;
+    dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableMap;
 };
 
 declare interface ImmutableSet<Value> {
@@ -174,9 +237,24 @@ 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>;
 }
 
+declare const ImmutableSet: {
+    empty: ImmutableSet<never>;
+    create: typeof createImmutableSet;
+    dangerouslyCreate_unstable: typeof dangerouslyCreateImmutableSet;
+};
+
+declare type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
+
 export declare type NestedTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
+    value: TreeItemValue;
     subtree?: NestedTreeItem<Props>[];
 };
 
@@ -199,6 +277,8 @@ 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,
@@ -209,13 +289,30 @@ export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPerso
  */
 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<unknown>;
+    openItems: ImmutableSet<TreeItemValue>;
+    checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;
     /**
      * requests root Tree component to respond to some tree item event,
      */
@@ -240,13 +337,9 @@ declare type TreeContextValues = {
  */
 export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
 
-export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
+export declare const treeItemClassNames: SlotClassNames<TreeItemInternalSlot>;
 
 declare type TreeItemContextValue = {
-    isActionsVisible: boolean;
-    isAsideVisible: boolean;
-    actionsRef: React_2.Ref<HTMLDivElement>;
-    expandIconRef: React_2.Ref<HTMLDivElement>;
     layoutRef: React_2.Ref<HTMLDivElement>;
     subtreeRef: React_2.Ref<HTMLDivElement>;
     itemType: TreeItemType;
@@ -256,12 +349,15 @@ declare type TreeItemContextValue = {
 
 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.
@@ -269,7 +365,9 @@ declare type TreeItemCSSProperties = React_2.CSSProperties & {
  */
 export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
-export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
+export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutInternalSlots>;
+
+declare type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & TreeItemSlotsContextValue;
 
 /**
  * TreeItemLayout Props
@@ -290,28 +388,12 @@ 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;
-    }>>;
 };
 
 /**
  * State used in rendering TreeItemLayout
  */
-export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
+export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {
     buttonContextValue: ButtonContextValue;
 };
 
@@ -324,18 +406,20 @@ export declare const treeItemLevelToken: "--fluent-TreeItem--level";
  */
 export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
 
-export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
+export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutInternalSlots>;
 
 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 = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {
+export declare type TreeItemPersonaLayoutSlots = {
     root: NonNullable<Slot<'div'>>;
     /**
      * Avatar to display.
@@ -354,7 +438,7 @@ export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'acti
 /**
  * State used in rendering TreeItemPersonaLayout
  */
-export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
+export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {
     avatarSize: AvatarSize;
     buttonContextValue: ButtonContextValue;
 };
@@ -371,29 +455,57 @@ export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | u
 
 declare type TreeItemRequest = {
     itemType: TreeItemType;
-} & (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'target'> | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>);
+} & (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;
+    }>>;
+    /**
+     * 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<TreeItemSlots> & TreeItemContextValue & {
+export declare type TreeItemState = ComponentState<TreeItemInternalSlot> & TreeItemContextValue & TreeItemSlotsContextValue & {
     level: number;
     itemType: TreeItemType;
 };
 
 declare type TreeItemType = 'leaf' | 'branch';
 
-declare type TreeItemValue = string | number;
+export declare type TreeItemValue = string | number;
 
 export declare type TreeNavigationData_unstable = {
     target: HTMLElement;
-    value: string;
+    value: TreeItemValue;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     type: 'Click';
@@ -424,26 +536,22 @@ export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['
 
 export declare type TreeOpenChangeData = {
     open: boolean;
-    value: string;
+    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;
 });
 
@@ -468,13 +576,13 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * Controls the state of the open tree items.
      * These property is ignored for subtrees.
      */
-    openItems?: Iterable<string>;
+    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.
      */
-    defaultOpenItems?: Iterable<string>;
+    defaultOpenItems?: Iterable<TreeItemValue>;
     /**
      * Callback fired when the component changes value from open state.
      * These property is ignored for subtrees.
@@ -494,10 +602,42 @@ 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 checked tree items, or a list of tuples of ids and checked state.
+     * Default value for the uncontrolled state of checked tree items.
+     * 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 TreeSelectionValue = MultiSelectValue | SingleSelectValue;
+
 export declare type TreeSlots = {
     root: Slot<'div'>;
 };
@@ -551,7 +691,7 @@ export declare function useTreeItem_unstable(props: TreeItemProps, ref: React_2.
 
 export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
 
-export declare function useTreeItemContextValues_unstable(state: Pick<TreeItemState, keyof TreeItemContextValue>): TreeItemContextValues;
+export declare function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues;
 
 /**
  * Create the state required to render TreeItemLayout.

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

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeContextValue } from '../../contexts/treeContext';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: string } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = { open: boolean; value: string } & (\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'ExpandIconClick';\n    }\n  | {\n      event: React.MouseEvent<HTMLElement>;\n      target: HTMLElement;\n      type: 'Click';\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof Enter;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowRight;\n    }\n  | {\n      event: React.KeyboardEvent<HTMLElement>;\n      target: HTMLElement;\n      type: typeof ArrowLeft;\n    }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = 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<string>;\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<string>;\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/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts/treeContext';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\nexport type MultiSelectValue = NonNullable<CheckboxProps['checked']>;\nexport type SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: TreeItemValue } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = 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   * This refers to a list of ids of opened tree items.\n   * Default value for the uncontrolled state of open tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultOpenItems?: 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   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Default value for the uncontrolled state of checked tree items.\n   * These property is ignored for subtrees.\n   */\n  defaultCheckedItems?: 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\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAyJI"}