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

package/CHANGELOG.json

@@ -2,7 +2,79 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Tue, 11 Jul 2023 18:44:11 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": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Tue, 11 Jul 2023 18:44:11 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:44:11 GMT 
+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

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 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';
@@ -18,15 +20,29 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Home } from '@fluentui/keyboard-keys';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
+import type { Radio } from '@fluentui/react-radio';
+import { 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.
@@ -143,7 +159,7 @@ 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'>;
@@ -154,13 +170,49 @@ export declare type FlatTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'
     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<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> {
     /**
      * The number of (unique) elements in a ImmutableSet.
@@ -190,15 +242,17 @@ 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;
+    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>[];
@@ -223,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,
@@ -233,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<TreeItemValue>;
+    checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;
     /**
      * requests root Tree component to respond to some tree item event,
      */
@@ -294,7 +367,7 @@ export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
 export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutInternalSlots>;
 
-declare type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;
+declare type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & TreeItemSlotsContextValue;
 
 /**
  * TreeItemLayout Props
@@ -382,7 +455,7 @@ 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'> & {
@@ -404,9 +477,19 @@ export declare type TreeItemSlots = {
          */
         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'>;
+declare type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'> & {
+    selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
+};
 
 /**
  * State used in rendering TreeItem
@@ -455,7 +538,6 @@ export declare type TreeOpenChangeData = {
     open: boolean;
     value: TreeItemValue;
     target: HTMLElement;
-    openItems: ImmutableSet<TreeItemValue>;
 } & ({
     event: React_2.MouseEvent<HTMLElement>;
     type: 'ExpandIconClick';
@@ -520,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'>;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, 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 { ImmutableSet } from '../../utils/ImmutableSet';\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  openItems: ImmutableSet<TreeItemValue>;\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 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/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAoGI"}
+{"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"}

package/lib/components/Tree/useRootTree.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { createNextOpenItems, useControllableOpenItems, useNestedTreeNavigation } from '../../hooks';
+import { useControllableOpenItems, useNestedTreeNavigation, useNestedControllableCheckedItems, createNextOpenItems } from '../../hooks';
 import { treeDataTypes } from '../../utils/tokens';
 /**
  * Create the state required to render the root level Tree.
@@ -10,20 +10,24 @@ import { treeDataTypes } from '../../utils/tokens';
  * @param ref - reference to root HTMLElement of Tree
  */ export function useRootTree(props, ref) {
     warnIfNoProperPropsRootTree(props);
-    const { appearance ='subtle' , size ='medium'  } = props;
+    const { appearance ='subtle' , size ='medium' , selectionMode ='none'  } = props;
     const [openItems, setOpenItems] = useControllableOpenItems(props);
+    const [checkedItems] = useNestedControllableCheckedItems(props);
     const [navigate, navigationRef] = useNestedTreeNavigation();
     const requestOpenChange = (data)=>{
         var _props_onOpenChange;
-        const nextOpenItems = createNextOpenItems(data, openItems);
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {
-            ...data,
-            openItems: nextOpenItems
-        });
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);
         if (data.event.isDefaultPrevented()) {
             return;
         }
-        return setOpenItems(nextOpenItems);
+        return setOpenItems(createNextOpenItems(data, openItems));
+    };
+    const requestCheckedChange = (data)=>{
+        var _props_onCheckedChange;
+        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);
+    // TODO:
+    // we should implement the logic for nested tree selection
+    // return setCheckedItems(checkedItems);
     };
     const requestNavigation = (data)=>{
         var _props_onNavigation_unstable;
@@ -98,21 +102,33 @@ import { treeDataTypes } from '../../utils/tokens';
                     ...request,
                     target: request.event.currentTarget
                 });
+            case treeDataTypes.Change:
+                {
+                    const previousCheckedValue = checkedItems.get(request.value);
+                    return requestCheckedChange({
+                        ...request,
+                        selectionMode: selectionMode,
+                        checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue
+                    });
+                }
         }
     });
     return {
         components: {
             root: 'div'
         },
+        selectionMode,
         open: true,
         appearance,
         size,
         level: 1,
         openItems,
+        checkedItems,
         requestTreeResponse,
         root: getNativeElementProps('div', {
             ref: useMergedRefs(navigationRef, ref),
             role: 'tree',
+            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props
         })
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems, useNestedTreeNavigation } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: Omit<TreeOpenChangeData, 'openItems'>) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, { ...data, openItems: nextOpenItems } as TreeOpenChangeData);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return setOpenItems(nextOpenItems);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.type) {\n      case treeDataTypes.Click:\n      case treeDataTypes.ExpandIconClick: {\n        return ReactDOM.unstable_batchedUpdates(() => {\n          requestOpenChange({ ...request, open: request.itemType === 'branch' && !openItems.has(request.value) });\n          requestNavigation({ ...request, type: treeDataTypes.Click });\n        });\n      }\n      case treeDataTypes.ArrowRight: {\n        if (request.itemType === 'leaf') {\n          return;\n        }\n        const open = openItems.has(request.value);\n        if (!open) {\n          return requestOpenChange({ ...request, open: true });\n        }\n        return requestNavigation(request);\n      }\n      case treeDataTypes.Enter: {\n        const open = openItems.has(request.value);\n        return requestOpenChange({ ...request, open: request.itemType === 'branch' && !open });\n      }\n      case treeDataTypes.ArrowLeft: {\n        const open = openItems.has(request.value);\n        if (open && request.itemType === 'branch') {\n          return requestOpenChange({ ...request, open: false, type: treeDataTypes.ArrowLeft });\n        }\n        return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ ...request, target: request.event.currentTarget });\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","useNestedTreeNavigation","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","setOpenItems","navigate","navigationRef","requestOpenChange","data","nextOpenItems","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { SelectionMode, getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport {\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n  TreeNavigationData_unstable,\n  TreeCheckedChangeData,\n} from './Tree.types';\nimport {\n  useControllableOpenItems,\n  useNestedTreeNavigation,\n  useNestedControllableCheckedItems,\n  createNextOpenItems,\n} from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n\n  const [checkedItems] = useNestedControllableCheckedItems(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return setOpenItems(createNextOpenItems(data, openItems));\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => {\n    props.onCheckedChange?.(data.event, data);\n    // TODO:\n    // we should implement the logic for nested tree selection\n    // return setCheckedItems(checkedItems);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.type) {\n      case treeDataTypes.Click:\n      case treeDataTypes.ExpandIconClick: {\n        return ReactDOM.unstable_batchedUpdates(() => {\n          requestOpenChange({ ...request, open: request.itemType === 'branch' && !openItems.has(request.value) });\n          requestNavigation({ ...request, type: treeDataTypes.Click });\n        });\n      }\n      case treeDataTypes.ArrowRight: {\n        if (request.itemType === 'leaf') {\n          return;\n        }\n        const open = openItems.has(request.value);\n        if (!open) {\n          return requestOpenChange({ ...request, open: true });\n        }\n        return requestNavigation(request);\n      }\n      case treeDataTypes.Enter: {\n        const open = openItems.has(request.value);\n        return requestOpenChange({ ...request, open: request.itemType === 'branch' && !open });\n      }\n      case treeDataTypes.ArrowLeft: {\n        const open = openItems.has(request.value);\n        if (open && request.itemType === 'branch') {\n          return requestOpenChange({ ...request, open: false, type: treeDataTypes.ArrowLeft });\n        }\n        return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ ...request, target: request.event.currentTarget });\n      case treeDataTypes.Change: {\n        const previousCheckedValue = checkedItems.get(request.value);\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue,\n        });\n      }\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","useControllableOpenItems","useNestedTreeNavigation","useNestedControllableCheckedItems","createNextOpenItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","setOpenItems","checkedItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","Change","previousCheckedValue","get","checked","components","root","level","role","undefined","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib/components/Tree/useSubtree.js

@@ -13,7 +13,9 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
     const value = useTreeItemContext_unstable((ctx)=>ctx.value);
     const { appearance =contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle' , size =contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'  } = props;
     const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);
+    const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const open = openItems.has(value);
     return {
@@ -23,6 +25,7 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
         },
         appearance,
         size,
+        selectionMode,
         level: parentLevel + 1,
         root: getNativeElementProps('div', {
             ref: useMergedRefs(ref, subtreeRef),
@@ -30,6 +33,7 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
             ...props
         }),
         openItems,
+        checkedItems,
         requestTreeResponse
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeProps, TreeState } from './Tree.types';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = openItems.has(value);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, subtreeRef),\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","getNativeElementProps","useMergedRefs","useTreeContext_unstable","useTreeItemContext_unstable","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","openItems","requestTreeResponse","open","has","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,iBAAiB;AAEtF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAgB,EAAEC,GAA2B,EAAa;IACnF,MAAMC,oBAAoBL,wBAAwBM,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcR,wBAAwBM,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaT,4BAA4BK,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQV,4BAA4BK,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcZ,wBAAwBM,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,YAAYd,wBAAwBM,CAAAA,MAAOA,IAAIQ,SAAS;IAC9D,MAAMC,sBAAsBf,wBAAwBM,CAAAA,MAAOA,IAAIS,mBAAmB;IAElF,MAAMC,OAAOF,UAAUG,GAAG,CAACN;IAE3B,OAAO;QACLK;QACAE,YAAY;YACVC,MAAM;QACR;QACAZ;QACAE;QACAI,OAAOD,cAAc;QACrBO,MAAMrB,sBAAsB,OAAO;YACjCM,KAAKL,cAAcK,KAAKM;YACxBU,MAAM;YACN,GAAGjB,KAAK;QACV;QACAW;QACAC;IACF;AACF,CAAC"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeProps, TreeState } from './Tree.types';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = openItems.has(value);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    selectionMode,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, subtreeRef),\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","getNativeElementProps","useMergedRefs","useTreeContext_unstable","useTreeItemContext_unstable","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,iBAAiB;AAEtF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAgB,EAAEC,GAA2B,EAAa;IACnF,MAAMC,oBAAoBL,wBAAwBM,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcR,wBAAwBM,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaT,4BAA4BK,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQV,4BAA4BK,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcZ,wBAAwBM,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBd,wBAAwBM,CAAAA,MAAOA,IAAIQ,aAAa;IACtE,MAAMC,YAAYf,wBAAwBM,CAAAA,MAAOA,IAAIS,SAAS;IAC9D,MAAMC,eAAehB,wBAAwBM,CAAAA,MAAOA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBjB,wBAAwBM,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAE3B,OAAO;QACLO;QACAE,YAAY;YACVC,MAAM;QACR;QACAd;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBS,MAAMvB,sBAAsB,OAAO;YACjCM,KAAKL,cAAcK,KAAKM;YACxBY,MAAM;YACN,GAAGnB,KAAK;QACV;QACAY;QACAC;QACAC;IACF;AACF,CAAC"}

package/lib/components/Tree/useTreeContextValues.js

@@ -1,13 +1,15 @@
 export function useTreeContextValues_unstable(state) {
-    const { openItems , level , appearance , size , requestTreeResponse  } = state;
+    const { openItems , checkedItems , selectionMode , level , appearance , size , requestTreeResponse  } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
    */ const tree = {
-        appearance,
         size,
         level,
         openItems,
+        appearance,
+        checkedItems,
+        selectionMode,
         requestTreeResponse
     };
     return {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, level, appearance, size, requestTreeResponse } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    appearance,\n    size,\n    level,\n    openItems,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGL;IACpE;;;GAGC,GACD,MAAMM,OAAyB;QAC7BH;QACAC;QACAF;QACAD;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,aAAY,EAAEC,cAAa,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGP;IACjG;;;GAGC,GACD,MAAMQ,OAAyB;QAC7BF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\nimport { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n};\n\nexport type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  treeItemSlots: TreeItemSlotsContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemInternalSlot> &\n  TreeItemContextValue &\n  TreeItemSlotsContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\nimport { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';\nimport type { Checkbox } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n  /**\n   * Selection indicator if selection type is checkbox\n   */\n  checkboxIndicator?: Slot<typeof Checkbox>;\n  /**\n   * Selection indicator if selection type is radio\n   */\n  radioIndicator?: Slot<typeof Radio>;\n};\n\nexport type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  treeItemSlots: TreeItemSlotsContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemInternalSlot> &\n  TreeItemContextValue &\n  TreeItemSlotsContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}