@fluentui/react-tree 9.0.0-beta.30 → 9.0.0-beta.31

package/CHANGELOG.json

@@ -2,7 +2,106 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:23 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:51 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.31",
+      "version": "9.0.0-beta.31",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "253798f25326e92ba19b313c47a9c9530af12526",
+            "comment": "feat: implements nested tree selection"
+          },
+          {
+            "author": "petrduda@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "b921cbb92c4e023b06577c2e10f5f7e44f25c64d",
+            "comment": "Docs(react-tree): Improve docs and stories"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "89eb2bacdda1886336d91704da2ed6bb7327e349",
+            "comment": "bugfix: headless tree should respect itemType"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "e615f12c54c8a4acad49930a02c3b703fd64692b",
+            "comment": "chore(teams-prg): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.29",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.18",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.28",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.29",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.29",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:57 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.30",
       "version": "9.0.0-beta.30",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Fri, 04 Aug 2023 08:48:23 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.31)
+
+Wed, 09 Aug 2023 13:11:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.30..@fluentui/react-tree_v9.0.0-beta.31)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- feat: implements nested tree selection ([PR #28668](https://github.com/microsoft/fluentui/pull/28668) by bernardo.sunderhus@gmail.com)
+- Docs(react-tree): Improve docs and stories ([PR #28741](https://github.com/microsoft/fluentui/pull/28741) by petrduda@microsoft.com)
+- bugfix: headless tree should respect itemType ([PR #28759](https://github.com/microsoft/fluentui/pull/28759) by bernardo.sunderhus@gmail.com)
+- chore(teams-prg): migrate to new slot API ([PR #28751](https://github.com/microsoft/fluentui/pull/28751) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.29 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-avatar to v9.5.18 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-button to v9.3.28 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.29 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-portal to v9.3.6 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-radio to v9.1.29 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
 ## [9.0.0-beta.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.30)
 
-Fri, 04 Aug 2023 08:48:23 GMT 
+Fri, 04 Aug 2023 08:52:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.29..@fluentui/react-tree_v9.0.0-beta.30)
 
 ### Changes

package/dist/index.d.ts

@@ -99,7 +99,10 @@ export declare type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, '
 };
 
 /**
- * FlatTree component - TODO: add more docs
+ * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
  */
 export declare const FlatTree: ForwardRefComponent<FlatTreeProps>;
 
@@ -236,7 +239,9 @@ export declare type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps
 
 export declare type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
 
-export declare type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems' | 'defaultChecked'>;
+export declare type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {
+    defaultCheckedItems?: TreeProps['checkedItems'];
+};
 
 /**
  * The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to
@@ -343,9 +348,9 @@ declare type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
 
 declare type OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;
 
-declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
-export { renderTree_unstable as renderFlatTree_unstable }
-export { renderTree_unstable }
+export declare const renderFlatTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
+
+export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSX.Element;
 
 /**
  * Render the final JSX of TreeItem
@@ -365,7 +370,8 @@ export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPerso
 declare type SingleSelectValue = NonNullable<RadioProps['checked']>;
 
 /**
- * Tree component - TODO: add more docs
+ * The `Tree` component renders nested items in a hierarchical structure.
+ * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
  */
 export declare const Tree: ForwardRefComponent<TreeProps>;
 
@@ -431,7 +437,7 @@ export declare type TreeItemContextValue = {
     itemType: TreeItemType;
     value: TreeItemValue;
     open: boolean;
-    checked?: TreeSelectionValue;
+    checked: TreeSelectionValue;
 };
 
 declare type TreeItemContextValues = {
@@ -686,11 +692,6 @@ export declare type TreeProps = ComponentProps<TreeSlots> & {
      * 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.
@@ -723,6 +724,8 @@ export { TreeState }
 
 export declare const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
 
+export declare const useFlatTreeContextValues_unstable: (state: TreeState) => TreeContextValues;
+
 export declare const useFlatTreeStyles_unstable: (state: TreeState) => TreeState;
 
 /**
@@ -743,9 +746,7 @@ export declare const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLE
 
 export declare const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
 
-declare function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
-export { useTreeContextValues_unstable as useFlatTreeContextValues_unstable }
-export { useTreeContextValues_unstable }
+export declare function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
 
 /**
  * Create the state required to render TreeItem.

package/lib/components/FlatTree/FlatTree.js

@@ -1,9 +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';
+import { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';
+import { renderFlatTree_unstable } from './renderFlatTree';
 /**
- * FlatTree component - TODO: add more docs
+ * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
  */ export const FlatTree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useFlatTree_unstable(props, ref);
     const contextValues = useFlatTreeContextValues_unstable(state);

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

@@ -1 +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"}
+{"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 { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nimport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nimport { renderFlatTree_unstable } from './renderFlatTree';\n\n/**\n * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\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","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","FlatTree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D;;;;;CAKC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBP,kCAAkCM;IACxDP,2BAA2BO;IAC3B,OAAOL,wBAAwBK,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/FlatTree/index.js

@@ -1,6 +1,7 @@
 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';
+export * from './useFlatTreeContextValues';
+export * from './renderFlatTree';

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

@@ -1 +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"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FlatTree';\nexport * from './FlatTree.types';\nexport * from './useHeadlessFlatTree';\nexport * from './useFlatTree';\nexport * from './useFlatTreeStyles.styles';\nexport * from './useFlatTreeContextValues';\nexport * from './renderFlatTree';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,wBAAwB;AACtC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B;AAC3C,cAAc,mBAAmB"}

package/lib/components/FlatTree/renderFlatTree.js

@@ -0,0 +1,2 @@
+import { renderTree_unstable } from '../../Tree';
+export const renderFlatTree_unstable = renderTree_unstable;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderFlatTree.ts"],"sourcesContent":["import { TreeContextValues, renderTree_unstable } from '../../Tree';\nimport type { FlatTreeState } from './FlatTree.types';\n\nexport const renderFlatTree_unstable: (state: FlatTreeState, contextValues: TreeContextValues) => JSX.Element =\n  renderTree_unstable;\n"],"names":["renderTree_unstable","renderFlatTree_unstable"],"mappings":"AAAA,SAA4BA,mBAAmB,QAAQ,aAAa;AAGpE,OAAO,MAAMC,0BACXD,oBAAoB"}

package/lib/components/FlatTree/useFlatControllableCheckedItems.js

@@ -2,20 +2,17 @@ import { useControllableState } from '@fluentui/react-utilities';
 import { ImmutableMap } from '../../utils/ImmutableMap';
 import * as React from 'react';
 import { createCheckedItems } from '../../utils/createCheckedItems';
-export function useFlatControllableCheckedItems(props) {
-    const [checkedItems, setCheckedItems] = useControllableState({
+export function useFlatControllableCheckedItems(props, headlessTree) {
+    return useControllableState({
         initialState: ImmutableMap.empty,
-        state: React.useMemo(()=>props.checkedItems && createCheckedItems(props.checkedItems), [
-            props.checkedItems
+        state: React.useMemo(()=>props.selectionMode ? props.checkedItems && createCheckedItems(props.checkedItems) : undefined, [
+            props.checkedItems,
+            props.selectionMode
         ]),
-        defaultState: ()=>createCheckedItems(props.defaultCheckedItems)
+        defaultState: ()=>initializeCheckedItems(props, headlessTree)
     });
-    return [
-        checkedItems,
-        setCheckedItems
-    ];
 }
-export function createNextFlatCheckedItems(data, previousCheckedItems, virtualTree) {
+export function createNextFlatCheckedItems(data, previousCheckedItems, headlessTree) {
     if (data.selectionMode === 'single') {
         return ImmutableMap.create([
             [
@@ -24,7 +21,7 @@ export function createNextFlatCheckedItems(data, previousCheckedItems, virtualTr
             ]
         ]);
     }
-    const treeItem = virtualTree.get(data.value);
+    const treeItem = headlessTree.get(data.value);
     if (!treeItem) {
         if (process.env.NODE_ENV !== 'production') {
             // eslint-disable-next-line no-console
@@ -33,19 +30,19 @@ export function createNextFlatCheckedItems(data, previousCheckedItems, virtualTr
         return previousCheckedItems;
     }
     const nextCheckedItems = new Map(previousCheckedItems);
-    for (const children of virtualTree.subtree(data.value)){
+    for (const children of headlessTree.subtree(data.value)){
         nextCheckedItems.set(children.value, data.checked);
     }
     nextCheckedItems.set(data.value, data.checked);
     let isAncestorsMixed = false;
-    for (const parent of virtualTree.ancestors(treeItem.value)){
+    for (const parent of headlessTree.ancestors(treeItem.value)){
         // if one parent is mixed, all ancestors are mixed
         if (isAncestorsMixed) {
             nextCheckedItems.set(parent.value, 'mixed');
             continue;
         }
         const checkedChildren = [];
-        for (const child of virtualTree.children(parent.value)){
+        for (const child of headlessTree.children(parent.value)){
             var _nextCheckedItems_get;
             if (((_nextCheckedItems_get = nextCheckedItems.get(child.value)) !== null && _nextCheckedItems_get !== void 0 ? _nextCheckedItems_get : false) === data.checked) {
                 checkedChildren.push(child);
@@ -61,3 +58,19 @@ export function createNextFlatCheckedItems(data, previousCheckedItems, virtualTr
     }
     return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);
 }
+function initializeCheckedItems(props, headlessTree) {
+    if (!props.selectionMode) {
+        return ImmutableMap.empty;
+    }
+    let state = createCheckedItems(props.defaultCheckedItems);
+    if (props.selectionMode === 'multiselect') {
+        for (const [value, checked] of state){
+            state = createNextFlatCheckedItems({
+                value,
+                checked,
+                selectionMode: props.selectionMode
+            }, state, headlessTree);
+        }
+    }
+    return state;
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useFlatControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { TreeItemValue } from '../../TreeItem';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport * as React from 'react';\nimport type { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport type { TreeCheckedChangeData, TreeProps } from '../Tree/Tree.types';\n\nexport function useFlatControllableCheckedItems(props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems'>) {\n  const [checkedItems, setCheckedItems] = useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(() => props.checkedItems && createCheckedItems(props.checkedItems), [props.checkedItems]),\n    defaultState: () => createCheckedItems(props.defaultCheckedItems),\n  });\n\n  return [checkedItems, setCheckedItems] as const;\n}\n\nexport function createNextFlatCheckedItems<Props extends HeadlessTreeItemProps>(\n  data: Pick<TreeCheckedChangeData, 'value' | 'checked' | 'selectionMode'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n  virtualTree: HeadlessTree<Props>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  const treeItem = virtualTree.get(data.value);\n  if (!treeItem) {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);\n    }\n    return previousCheckedItems;\n  }\n  const nextCheckedItems = new Map(previousCheckedItems);\n  for (const children of virtualTree.subtree(data.value)) {\n    nextCheckedItems.set(children.value, data.checked);\n  }\n  nextCheckedItems.set(data.value, data.checked);\n\n  let isAncestorsMixed = false;\n  for (const parent of virtualTree.ancestors(treeItem.value)) {\n    // if one parent is mixed, all ancestors are mixed\n    if (isAncestorsMixed) {\n      nextCheckedItems.set(parent.value, 'mixed');\n      continue;\n    }\n    const checkedChildren = [];\n    for (const child of virtualTree.children(parent.value)) {\n      if ((nextCheckedItems.get(child.value) ?? false) === data.checked) {\n        checkedChildren.push(child);\n      }\n    }\n    if (checkedChildren.length === parent.childrenValues.length) {\n      nextCheckedItems.set(parent.value, data.checked);\n    } else {\n      // if one parent is mixed, all ancestors are mixed\n      isAncestorsMixed = true;\n      nextCheckedItems.set(parent.value, 'mixed');\n    }\n  }\n  return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);\n}\n"],"names":["useControllableState","ImmutableMap","React","createCheckedItems","useFlatControllableCheckedItems","props","checkedItems","setCheckedItems","initialState","empty","state","useMemo","defaultState","defaultCheckedItems","createNextFlatCheckedItems","data","previousCheckedItems","virtualTree","selectionMode","create","value","checked","treeItem","get","process","env","NODE_ENV","console","error","nextCheckedItems","Map","children","subtree","set","isAncestorsMixed","parent","ancestors","checkedChildren","child","push","length","childrenValues","dangerouslyCreate_unstable"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AAEjE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE,OAAO,SAASC,gCAAgCC,KAA8D,EAAE;IAC9G,MAAM,CAACC,cAAcC,gBAAgB,GAAGP,qBAAqB;QAC3DQ,cAAcP,aAAaQ,KAAK;QAChCC,OAAOR,MAAMS,OAAO,CAAC,IAAMN,MAAMC,YAAY,IAAIH,mBAAmBE,MAAMC,YAAY,GAAG;YAACD,MAAMC,YAAY;SAAC;QAC7GM,cAAc,IAAMT,mBAAmBE,MAAMQ,mBAAmB;IAClE;IAEA,OAAO;QAACP;QAAcC;KAAgB;AACxC,CAAC;AAED,OAAO,SAASO,2BACdC,IAAwE,EACxEC,oBAAoE,EACpEC,WAAgC,EACgB;IAChD,IAAIF,KAAKG,aAAa,KAAK,UAAU;QACnC,OAAOjB,aAAakB,MAAM,CAAC;YAAC;gBAACJ,KAAKK,KAAK;gBAAEL,KAAKM,OAAO;aAAC;SAAC;IACzD,CAAC;IACD,MAAMC,WAAWL,YAAYM,GAAG,CAACR,KAAKK,KAAK;IAC3C,IAAI,CAACE,UAAU;QACb,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,sCAAsC;YACtCC,QAAQC,KAAK,CAAC,CAAC,+BAA+B,EAAEb,KAAKK,KAAK,CAAC,UAAU,CAAC;QACxE,CAAC;QACD,OAAOJ;IACT,CAAC;IACD,MAAMa,mBAAmB,IAAIC,IAAId;IACjC,KAAK,MAAMe,YAAYd,YAAYe,OAAO,CAACjB,KAAKK,KAAK,EAAG;QACtDS,iBAAiBI,GAAG,CAACF,SAASX,KAAK,EAAEL,KAAKM,OAAO;IACnD;IACAQ,iBAAiBI,GAAG,CAAClB,KAAKK,KAAK,EAAEL,KAAKM,OAAO;IAE7C,IAAIa,mBAAmB,KAAK;IAC5B,KAAK,MAAMC,UAAUlB,YAAYmB,SAAS,CAACd,SAASF,KAAK,EAAG;QAC1D,kDAAkD;QAClD,IAAIc,kBAAkB;YACpBL,iBAAiBI,GAAG,CAACE,OAAOf,KAAK,EAAE;YACnC,QAAS;QACX,CAAC;QACD,MAAMiB,kBAAkB,EAAE;QAC1B,KAAK,MAAMC,SAASrB,YAAYc,QAAQ,CAACI,OAAOf,KAAK,EAAG;gBACjDS;YAAL,IAAI,AAACA,CAAAA,CAAAA,wBAAAA,iBAAiBN,GAAG,CAACe,MAAMlB,KAAK,eAAhCS,mCAAAA,wBAAqC,KAAK,AAAD,MAAOd,KAAKM,OAAO,EAAE;gBACjEgB,gBAAgBE,IAAI,CAACD;YACvB,CAAC;QACH;QACA,IAAID,gBAAgBG,MAAM,KAAKL,OAAOM,cAAc,CAACD,MAAM,EAAE;YAC3DX,iBAAiBI,GAAG,CAACE,OAAOf,KAAK,EAAEL,KAAKM,OAAO;QACjD,OAAO;YACL,kDAAkD;YAClDa,mBAAmB,IAAI;YACvBL,iBAAiBI,GAAG,CAACE,OAAOf,KAAK,EAAE;QACrC,CAAC;IACH;IACA,OAAOnB,aAAayC,0BAA0B,CAACb;AACjD,CAAC"}
+{"version":3,"sources":["useFlatControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { TreeItemValue } from '../../TreeItem';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport * as React from 'react';\nimport type { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport type { TreeCheckedChangeData } from '../Tree/Tree.types';\nimport { HeadlessFlatTreeOptions } from './useHeadlessFlatTree';\n\nexport function useFlatControllableCheckedItems<Props extends HeadlessTreeItemProps>(\n  props: Pick<HeadlessFlatTreeOptions, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>,\n  headlessTree: HeadlessTree<Props>,\n) {\n  return useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(\n      () => (props.selectionMode ? props.checkedItems && createCheckedItems(props.checkedItems) : undefined),\n      [props.checkedItems, props.selectionMode],\n    ),\n    defaultState: () => initializeCheckedItems(props, headlessTree),\n  });\n}\n\nexport function createNextFlatCheckedItems(\n  data: Pick<TreeCheckedChangeData, 'value' | 'checked' | 'selectionMode'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n  headlessTree: HeadlessTree<HeadlessTreeItemProps>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  const treeItem = headlessTree.get(data.value);\n  if (!treeItem) {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(`useHeadlessFlatTree: tree item ${data.value} not found`);\n    }\n    return previousCheckedItems;\n  }\n  const nextCheckedItems = new Map(previousCheckedItems);\n  for (const children of headlessTree.subtree(data.value)) {\n    nextCheckedItems.set(children.value, data.checked);\n  }\n  nextCheckedItems.set(data.value, data.checked);\n\n  let isAncestorsMixed = false;\n  for (const parent of headlessTree.ancestors(treeItem.value)) {\n    // if one parent is mixed, all ancestors are mixed\n    if (isAncestorsMixed) {\n      nextCheckedItems.set(parent.value, 'mixed');\n      continue;\n    }\n    const checkedChildren = [];\n    for (const child of headlessTree.children(parent.value)) {\n      if ((nextCheckedItems.get(child.value) ?? false) === data.checked) {\n        checkedChildren.push(child);\n      }\n    }\n    if (checkedChildren.length === parent.childrenValues.length) {\n      nextCheckedItems.set(parent.value, data.checked);\n    } else {\n      // if one parent is mixed, all ancestors are mixed\n      isAncestorsMixed = true;\n      nextCheckedItems.set(parent.value, 'mixed');\n    }\n  }\n  return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);\n}\n\nfunction initializeCheckedItems(\n  props: Pick<HeadlessFlatTreeOptions, 'selectionMode' | 'defaultCheckedItems'>,\n  headlessTree: HeadlessTree<HeadlessTreeItemProps>,\n) {\n  if (!props.selectionMode) {\n    return ImmutableMap.empty;\n  }\n  let state = createCheckedItems(props.defaultCheckedItems);\n  if (props.selectionMode === 'multiselect') {\n    for (const [value, checked] of state) {\n      state = createNextFlatCheckedItems({ value, checked, selectionMode: props.selectionMode }, state, headlessTree);\n    }\n  }\n  return state;\n}\n"],"names":["useControllableState","ImmutableMap","React","createCheckedItems","useFlatControllableCheckedItems","props","headlessTree","initialState","empty","state","useMemo","selectionMode","checkedItems","undefined","defaultState","initializeCheckedItems","createNextFlatCheckedItems","data","previousCheckedItems","create","value","checked","treeItem","get","process","env","NODE_ENV","console","error","nextCheckedItems","Map","children","subtree","set","isAncestorsMixed","parent","ancestors","checkedChildren","child","push","length","childrenValues","dangerouslyCreate_unstable","defaultCheckedItems"],"mappings":"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"}

package/lib/components/FlatTree/useFlatTreeContextValues.js

@@ -0,0 +1,2 @@
+import { useTreeContextValues_unstable } from '../../Tree';
+export const useFlatTreeContextValues_unstable = useTreeContextValues_unstable;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatTreeContextValues.ts"],"sourcesContent":["import { TreeContextValues, useTreeContextValues_unstable } from '../../Tree';\nimport type { FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable: (state: FlatTreeState) => TreeContextValues =\n  useTreeContextValues_unstable;\n"],"names":["useTreeContextValues_unstable","useFlatTreeContextValues_unstable"],"mappings":"AAAA,SAA4BA,6BAA6B,QAAQ,aAAa;AAG9E,OAAO,MAAMC,oCACXD,8BAA8B"}

package/lib/components/FlatTree/useFlatTreeStyles.styles.js

@@ -10,7 +10,7 @@ const useStyles = /*#__PURE__*/__styles({
     Belr9w4: "f1j0q4x9"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
 });
 export const useFlatTreeStyles_unstable = state => {
   const styles = useStyles();

package/lib/components/FlatTree/useHeadlessFlatTree.js

@@ -24,7 +24,7 @@ import { treeItemFilter } from '../../utils/treeItemFilter';
         props
     ]);
     const [openItems, setOpenItems] = useControllableOpenItems(options);
-    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);
+    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
     const { initialize , navigate  } = useFlatTreeNavigation(headlessTree);
     const walkerRef = React.useRef();
     const initializeWalker = React.useCallback((root)=>{
@@ -38,13 +38,21 @@ import { treeItemFilter } from '../../utils/treeItemFilter';
     const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{
         var _options_onOpenChange;
-        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
-        setOpenItems(createNextOpenItems(data, openItems));
+        const nextOpenItems = createNextOpenItems(data, openItems);
+        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
+            ...data,
+            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+        });
+        setOpenItems(nextOpenItems);
     });
     const handleCheckedChange = useEventCallback((event, data)=>{
         var _options_onCheckedChange;
-        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, data);
-        setCheckedItems(createNextFlatCheckedItems(data, checkedItems, headlessTree));
+        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);
+        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {
+            ...data,
+            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
+        });
+        setCheckedItems(nextCheckedItems);
     });
     const handleNavigation = useEventCallback((event, data)=>{
         var _options_onNavigation_unstable;

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

@@ -1 +1 @@
-{"version":3,"sources":["useHeadlessFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport type { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { FlatTreeProps } from './FlatTree.types';\nimport {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\n\nexport type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;\nexport type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): Required<\n    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>\n  > & {\n    ref: React.Ref<HTMLDivElement>;\n    openItems: ImmutableSet<TreeItemValue>;\n  };\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: HeadlessTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): HeadlessTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\nexport type HeadlessFlatTreeOptions = Pick<\n  FlatTreeProps,\n  'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'\n> &\n  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems' | 'defaultChecked'>;\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(\n  props: Props[],\n  options: HeadlessFlatTreeOptions = {},\n): HeadlessFlatTree<Props> {\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);\n  const { initialize, navigate } = useFlatTreeNavigation(headlessTree);\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root) {\n        walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize],\n  );\n\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    options.onOpenChange?.(event, data);\n    setOpenItems(createNextOpenItems(data, openItems));\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    options.onCheckedChange?.(event, data);\n    setCheckedItems(createNextFlatCheckedItems(data, checkedItems, headlessTree));\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      options.onNavigation_unstable?.(event, data);\n      if (walkerRef.current) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = headlessTree.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return headlessTree.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs<HTMLDivElement>(treeRef, initializeWalker);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      selectionMode: options.selectionMode,\n      checkedItems,\n      onOpenChange: handleOpenChange,\n      onCheckedChange: handleCheckedChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  return React.useMemo<HeadlessFlatTree<Props>>(\n    () => ({\n      navigate: data => {\n        if (walkerRef.current) {\n          navigate(data, walkerRef.current);\n        }\n      },\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n    }),\n    [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n"],"names":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","createNextFlatCheckedItems","useFlatControllableCheckedItems","createHTMLElementWalker","treeItemFilter","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","initialize","navigate","walkerRef","useRef","initializeWalker","useCallback","root","current","treeRef","handleOpenChange","event","data","onOpenChange","handleCheckedChange","onCheckedChange","handleNavigation","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","querySelector","ref","getTreeProps","selectionMode","items"],"mappings":"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"}
+{"version":3,"sources":["useHeadlessFlatTree.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { HeadlessTreeItem, HeadlessTreeItemProps, createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport type { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { FlatTreeProps } from './FlatTree.types';\nimport {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n} from '../Tree/Tree.types';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\n\nexport type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;\nexport type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {\n  /**\n   * returns the properties required for the Tree component to work properly.\n   * That includes:\n   * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n   */\n  getTreeProps(): Required<\n    Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable' | 'checkedItems' | 'onCheckedChange'>\n  > & {\n    ref: React.Ref<HTMLDivElement>;\n    openItems: ImmutableSet<TreeItemValue>;\n  };\n  /**\n   * internal method used to react to an `onNavigation` event.\n   * This method ensures proper navigation on keyboard and mouse interaction.\n   * In case of virtualization it might be required to cancel default provided `onNavigation`\n   * event and then call this method manually.\n   *\n   * @example\n   * ```ts\n   * // react-window\n   * const handleNavigation = (event, data) => {\n   *   event.preventDefault();\n   *   const nextItem = tree.getNextNavigableItem(data);\n   *   // scroll to item using virtualization scroll mechanism\n   *   if (nextItem && tree.getElementFromItem(nextItem)) {\n   *     listRef.current.scrollToItem(nextItem.index);\n   *   }\n   *   // wait for scrolling to happen and then invoke navigate method\n   *   requestAnimationFrame(() => {\n   *     tree.navigate(data);\n   *   });\n   * };\n   *```\n   */\n  navigate(data: TreeNavigationData_unstable): void;\n  /**\n   * returns next item to be focused on a navigation.\n   * This method is provided to decouple the element that needs to be focused from\n   *  the action of focusing it itself.\n   *\n   * On the case of TypeAhead navigation this method returns the current item.\n   */\n  getNextNavigableItem(\n    visibleItems: HeadlessTreeItem<Props>[],\n    data: TreeNavigationData_unstable,\n  ): HeadlessTreeItem<Props> | undefined;\n  /**\n   * similar to getElementById but for FlatTreeItems\n   */\n  getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;\n  /**\n   * an iterable containing all visually available flat tree items\n   */\n  items(): IterableIterator<HeadlessTreeItem<Props>>;\n};\n\nexport type HeadlessFlatTreeOptions = Pick<\n  FlatTreeProps,\n  'onOpenChange' | 'onNavigation_unstable' | 'selectionMode' | 'onCheckedChange'\n> &\n  Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {\n    defaultCheckedItems?: TreeProps['checkedItems'];\n  };\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param props - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(\n  props: Props[],\n  options: HeadlessFlatTreeOptions = {},\n): HeadlessFlatTree<Props> {\n  const headlessTree = React.useMemo(() => createHeadlessTree(props), [props]);\n  const [openItems, setOpenItems] = useControllableOpenItems(options);\n  const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);\n  const { initialize, navigate } = useFlatTreeNavigation(headlessTree);\n  const walkerRef = React.useRef<HTMLElementWalker>();\n  const initializeWalker = React.useCallback(\n    (root: HTMLElement | null) => {\n      if (root) {\n        walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n        initialize(walkerRef.current);\n      }\n    },\n    [initialize],\n  );\n\n  const treeRef = React.useRef<HTMLDivElement>(null);\n  const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    options.onOpenChange?.(event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n    setOpenItems(nextOpenItems);\n  });\n\n  const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n    const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n    options.onCheckedChange?.(event, {\n      ...data,\n      checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n    });\n    setCheckedItems(nextCheckedItems);\n  });\n\n  const handleNavigation = useEventCallback(\n    (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n      options.onNavigation_unstable?.(event, data);\n      if (walkerRef.current) {\n        navigate(data, walkerRef.current);\n      }\n    },\n  );\n\n  const getNextNavigableItem = useEventCallback(\n    (visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable) => {\n      const item = headlessTree.get(data.value);\n      if (item) {\n        switch (data.type) {\n          case treeDataTypes.TypeAhead:\n            return item;\n          case treeDataTypes.ArrowLeft:\n            return headlessTree.get(item.parentValue!);\n          case treeDataTypes.ArrowRight:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.End:\n            return visibleItems[visibleItems.length - 1];\n          case treeDataTypes.Home:\n            return visibleItems[0];\n          case treeDataTypes.ArrowDown:\n            return visibleItems[item.index + 1];\n          case treeDataTypes.ArrowUp:\n            return visibleItems[item.index - 1];\n        }\n      }\n    },\n  );\n\n  const getElementFromItem = React.useCallback((item: HeadlessTreeItem<Props>) => {\n    return treeRef.current?.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`) as HTMLElement | null;\n  }, []);\n\n  const ref = useMergedRefs<HTMLDivElement>(treeRef, initializeWalker);\n\n  const getTreeProps = React.useCallback(\n    () => ({\n      ref,\n      openItems,\n      selectionMode: options.selectionMode,\n      checkedItems,\n      onOpenChange: handleOpenChange,\n      onCheckedChange: handleCheckedChange,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      onNavigation_unstable: handleNavigation,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems],\n  );\n\n  const items = React.useCallback(() => headlessTree.visibleItems(openItems), [openItems, headlessTree]);\n\n  return React.useMemo<HeadlessFlatTree<Props>>(\n    () => ({\n      navigate: data => {\n        if (walkerRef.current) {\n          navigate(data, walkerRef.current);\n        }\n      },\n      getTreeProps,\n      getNextNavigableItem,\n      getElementFromItem,\n      items,\n    }),\n    [navigate, getTreeProps, getNextNavigableItem, getElementFromItem, items],\n  );\n}\n"],"names":["useEventCallback","useMergedRefs","React","createHeadlessTree","treeDataTypes","useFlatTreeNavigation","createNextOpenItems","useControllableOpenItems","dataTreeItemValueAttrName","createNextFlatCheckedItems","useFlatControllableCheckedItems","createHTMLElementWalker","treeItemFilter","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","initialize","navigate","walkerRef","useRef","initializeWalker","useCallback","root","current","treeRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","querySelector","ref","getTreeProps","selectionMode","items"],"mappings":"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"}

package/lib/components/Tree/Tree.js

@@ -4,7 +4,8 @@ import { useTreeContextValues_unstable } from './useTreeContextValues';
 import { useTreeStyles_unstable } from './useTreeStyles.styles';
 import { renderTree_unstable } from './renderTree';
 /**
- * Tree component - TODO: add more docs
+ * The `Tree` component renders nested items in a hierarchical structure.
+ * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
  */ export const Tree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTree_unstable(props, ref);
     const contextValues = useTreeContextValues_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTree_unstable } from './useTree';\nimport type { TreeProps } from './Tree.types';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport { renderTree_unstable } from './renderTree';\n\n/**\n * Tree component - TODO: add more docs\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  const contextValues = useTreeContextValues_unstable(state);\n  useTreeStyles_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","useTreeContextValues_unstable","useTreeStyles_unstable","renderTree_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AAEnD;;CAEC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBR,8BAA8BO;IACpDN,uBAAuBM;IACvB,OAAOL,oBAAoBK,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
+{"version":3,"sources":["Tree.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTree_unstable } from './useTree';\nimport type { TreeProps } from './Tree.types';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport { renderTree_unstable } from './renderTree';\n\n/**\n * The `Tree` component renders nested items in a hierarchical structure.\n * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  const contextValues = useTreeContextValues_unstable(state);\n  useTreeStyles_unstable(state);\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","useTreeContextValues_unstable","useTreeStyles_unstable","renderTree_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AAEnD;;;CAGC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnF,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBR,8BAA8BO;IACpDN,uBAAuBM;IACvB,OAAOL,oBAAoBK,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

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, 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\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype 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  openItems: Set<TreeItemValue>;\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  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\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 default opened items.\n   * This 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 default checked items, or a list of tuples of ids and checked state.\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"}
+{"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\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype 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  openItems: Set<TreeItemValue>;\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  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\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 default opened items.\n   * This 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   * 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,WAoJI"}

package/lib/components/Tree/renderTree.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { TreeProvider } from '../../contexts';
 export const renderTree_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(TreeProvider, {
         value: contextValues.tree
-    }, state.open && /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children));
+    }, state.open && /*#__PURE__*/ createElement(state.root, null, state.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeProvider","renderTree_unstable","state","contextValues","slots","slotProps","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,gBAAqC;IACzF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAwBG;IACrD,qBACE,AAVJ,cAUKF;QAAaM,OAAOH,cAAcI,IAAI;OACpCL,MAAMM,IAAI,kBAAI,AAXrB,cAWsBJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,EAAGJ,UAAUI,IAAI,CAACC,QAAQ;AAG7E,EAAE"}
+{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <state.root>{state.root.children}</state.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["createElement","assertSlots","TreeProvider","renderTree_unstable","state","contextValues","value","tree","open","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,gBAAqC;IACzFJ,YAAuBG;IACvB,qBACE,AAVJ,cAUKF;QAAaI,OAAOD,cAAcE,IAAI;OACpCH,MAAMI,IAAI,kBAAI,AAXrB,cAWsBJ,MAAMK,IAAI,QAAEL,MAAMK,IAAI,CAACC,QAAQ;AAGrD,EAAE"}