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

package/CHANGELOG.json

@@ -2,7 +2,175 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:23 GMT",
+      "date": "Fri, 11 Aug 2023 12:10:20 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.32",
+      "version": "9.0.0-beta.32",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.30",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.19",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.29",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.30",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.28",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.7",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.30",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.12.2",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.11.1",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 09 Aug 2023 13:17:09 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": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.18",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.28",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.29",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.29",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          }
+        ]
+      }
+    },
+    {
+      "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,53 @@
 # 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 Fri, 11 Aug 2023 12:10:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.32)
+
+Fri, 11 Aug 2023 12:10:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.31..@fluentui/react-tree_v9.0.0-beta.32)
+
+### Changes
+
+- Bump @fluentui/react-aria to v9.3.30 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-avatar to v9.5.19 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-button to v9.3.29 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.30 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.28 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-portal to v9.3.7 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-radio to v9.1.30 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-tabster to v9.12.2 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-utilities to v9.11.1 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+
+## [9.0.0-beta.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.31)
+
+Wed, 09 Aug 2023 13:17:09 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 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-avatar to v9.5.18 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-button to v9.3.28 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.29 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-portal to v9.3.6 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-radio to v9.1.29 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) 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);