npm - @fluentui/react-tree - Versions diffs - 9.1.0 → 9.2.1 - Mend

@fluentui/react-tree 9.1.0 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,186 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Tue, 12 Sep 2023 08:48:16 GMT",
+      "date": "Wed, 20 Sep 2023 17:40:52 GMT",
+      "tag": "@fluentui/react-tree_v9.2.1",
+      "version": "9.2.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tree",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.32",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.41",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.42",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.16",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.42",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.8.1",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.12.11",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.10",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 14:59:51 GMT",
+      "tag": "@fluentui/react-tree_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "54f2d12c318d44326f91d9db9ef7855e48de4520",
+            "comment": "feat: adds treeType to tree context"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "97568b1abb279974b96c47afc32418bd5386166d",
+            "comment": "creates FlatTreeItem component"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.31",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.40",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.41",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.15",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.41",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.8.0",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.12.10",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.9",
+            "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
+          }
+        ],
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "464d9b8df31cd09782e6f5b29db5ab8fad9ce9c2",
+            "comment": "chore: stop using global document on HTMLElementWalker"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Sep 2023 16:44:47 GMT",
+      "tag": "@fluentui/react-tree_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.30",
+            "commit": "bad33fa7f241bc772b5bc4c6ee624d6ff6b4a473"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.39",
+            "commit": "bad33fa7f241bc772b5bc4c6ee624d6ff6b4a473"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.40",
+            "commit": "bad33fa7f241bc772b5bc4c6ee624d6ff6b4a473"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.40",
+            "commit": "bad33fa7f241bc772b5bc4c6ee624d6ff6b4a473"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.8",
+            "commit": "bad33fa7f241bc772b5bc4c6ee624d6ff6b4a473"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 12 Sep 2023 08:51:34 GMT",
       "tag": "@fluentui/react-tree_v9.1.0",
       "version": "9.1.0",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,64 @@
 # Change Log - @fluentui/react-tree
-This log was last generated on Tue, 12 Sep 2023 08:48:16 GMT and should not be manually modified.
+This log was last generated on Wed, 20 Sep 2023 17:40:52 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.2.1)
+Wed, 20 Sep 2023 17:40:52 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.2.0..@fluentui/react-tree_v9.2.1)
+### Patches
+- chore: trigger manual version bump after broken release ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by martinhochel@microsoft.com)
+- Bump @fluentui/react-avatar to v9.5.32 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-button to v9.3.41 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.42 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-portal to v9.3.16 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-radio to v9.1.42 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.8.1 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-tabster to v9.12.11 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.10 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.2.0)
+Wed, 20 Sep 2023 14:59:51 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.1.1..@fluentui/react-tree_v9.2.0)
+### Minor changes
+- feat: adds treeType to tree context ([PR #29189](https://github.com/microsoft/fluentui/pull/29189) by bernardo.sunderhus@gmail.com)
+- creates FlatTreeItem component ([PR #29098](https://github.com/microsoft/fluentui/pull/29098) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-avatar to v9.5.31 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-button to v9.3.40 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.41 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-portal to v9.3.15 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-radio to v9.1.41 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.8.0 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-tabster to v9.12.10 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.9 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
+### Patches
+- chore: stop using global document on HTMLElementWalker ([PR #29097](https://github.com/microsoft/fluentui/pull/29097) by bernardo.sunderhus@gmail.com)
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.1.1)
+Thu, 14 Sep 2023 16:44:47 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.1.0..@fluentui/react-tree_v9.1.1)
+### Patches
+- Bump @fluentui/react-avatar to v9.5.30 ([PR #29145](https://github.com/microsoft/fluentui/pull/29145) by beachball)
+- Bump @fluentui/react-button to v9.3.39 ([PR #29145](https://github.com/microsoft/fluentui/pull/29145) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.40 ([PR #29145](https://github.com/microsoft/fluentui/pull/29145) by beachball)
+- Bump @fluentui/react-radio to v9.1.40 ([PR #29145](https://github.com/microsoft/fluentui/pull/29145) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.8 ([PR #29145](https://github.com/microsoft/fluentui/pull/29145) by beachball)
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.1.0)
-Tue, 12 Sep 2023 08:48:16 GMT
+Tue, 12 Sep 2023 08:51:34 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.8..@fluentui/react-tree_v9.1.0)
 ### Minor changes

package/dist/index.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ import type { End } from '@fluentui/keyboard-keys';
 import type { Enter } from '@fluentui/keyboard-keys';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import { FC } from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Home } from '@fluentui/keyboard-keys';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
@@ -108,6 +108,21 @@ export declare const FlatTree: ForwardRefComponent<FlatTreeProps>;
 export declare const flatTreeClassNames: SlotClassNames<TreeSlots>;
+/**
+ * The `FlatTreeItem` component represents a single item in a flat tree.
+ */
+export declare const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps>;
+/**
+ * FlatTreeItem Props
+ */
+export declare type FlatTreeItemProps = TreeItemProps & {
+    value: TreeItemValue;
+    'aria-level': number;
+    'aria-setsize': number;
+    'aria-posinset': number;
+};
 export declare type FlatTreeProps = ComponentProps<TreeSlots> & {
     /**
      * A tree item can have various appearances:
@@ -394,6 +409,7 @@ export declare type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];
 export declare const treeClassNames: SlotClassNames<TreeSlots>;
 export declare type TreeContextValue = {
+    treeType: 'nested' | 'flat';
     level: number;
     selectionMode: 'none' | SelectionMode_2;
     appearance: 'subtle' | 'subtle-alpha' | 'transparent';

package/lib/FlatTreeItem.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './components/FlatTreeItem/index';

package/lib/FlatTreeItem.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["FlatTreeItem.ts"],"sourcesContent":["export * from './components/FlatTreeItem/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/components/FlatTree/useFlatTree.js CHANGED Viewed

@@ -1,3 +1,8 @@
 import * as React from 'react';
 import { useRootTree } from '../../hooks/useRootTree';
-export const useFlatTree_unstable = useRootTree;
+export const useFlatTree_unstable = (props, ref)=>{
+    return {
+        treeType: 'flat',
+        ...useRootTree(props, ref)
+    };
+};

package/lib/components/FlatTree/useFlatTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => ~~FlatTreeState~~ = useRootTree;\n"],"names":["React","useRootTree","useFlatTree_unstable"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAGtD,OAAO,MAAMC,~~uBAA6FD~~,~~YAAY~~"}
1	+ {"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTree_unstable = (props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState => {\n return {\n treeType: 'flat',\n ...useRootTree(props, ref),\n };\n};\n"],"names":["React","useRootTree","useFlatTree_unstable","props","ref","treeType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAGtD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,OAAO;QACLC,UAAU;QACV,GAAGJ,YAAYE,OAAOC,IAAI;IAC5B;AACF,EAAE"}

package/lib/components/FlatTree/useHeadlessFlatTree.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
 import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
 import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
 import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 /**
  * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
  * in multiple scenarios including virtualization.
@@ -26,14 +27,16 @@ import { treeItemFilter } from '../../utils/treeItemFilter';
     const [openItems, setOpenItems] = useControllableOpenItems(options);
     const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
     const { initialize, navigate } = useFlatTreeNavigation(headlessTree);
+    const { targetDocument } = useFluent_unstable();
     const walkerRef = React.useRef();
     const initializeWalker = React.useCallback((root)=>{
-        if (root) {
-            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+        if (root && targetDocument) {
+            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);
             initialize(walkerRef.current);
         }
     }, [
-        initialize
+        initialize,
+        targetDocument
     ]);
     const treeRef = React.useRef(null);
     const handleOpenChange = useEventCallback((event, data)=>{

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

	@@ -1 +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' \| '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' \| '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?.(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 onNavigation: 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","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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"}
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';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\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' \| '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' \| '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 { targetDocument } = useFluent_unstable();\n const walkerRef = React.useRef<HTMLElementWalker>();\n const initializeWalker = React.useCallback(\n (root: HTMLElement \| null) => {\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n },\n [initialize, targetDocument],\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?.(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 onNavigation: 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","useFluent_unstable","useHeadlessFlatTree_unstable","props","options","headlessTree","useMemo","openItems","setOpenItems","checkedItems","setCheckedItems","initialize","navigate","targetDocument","walkerRef","useRef","initializeWalker","useCallback","root","current","treeRef","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation","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/FlatTreeItem/FlatTreeItem.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { TreeItem } from '../TreeItem/TreeItem';
+/**
+ * The `FlatTreeItem` component represents a single item in a flat tree.
+ */ export const FlatTreeItem = TreeItem;

package/lib/components/FlatTreeItem/FlatTreeItem.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["FlatTreeItem.tsx"],"sourcesContent":["import { FlatTreeItemProps } from './FlatTreeItem.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { TreeItem } from '../TreeItem/TreeItem';\n\n/**\n * The `FlatTreeItem` component represents a single item in a flat tree.\n */\nexport const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps> = TreeItem as ForwardRefComponent<FlatTreeItemProps>;\n"],"names":["TreeItem","FlatTreeItem"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,uBAAuB;AAEhD;;CAEC,GACD,OAAO,MAAMC,eAAuDD,SAAmD"}

package/lib/components/FlatTreeItem/FlatTreeItem.types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { };

package/lib/components/FlatTreeItem/FlatTreeItem.types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["FlatTreeItem.types.ts"],"sourcesContent":["import type { TreeItemProps, TreeItemValue } from '../TreeItem/TreeItem.types';\n\n/*\n FlatTreeItem Props\n */\nexport type FlatTreeItemProps = TreeItemProps & {\n value: TreeItemValue;\n 'aria-level': number;\n 'aria-setsize': number;\n 'aria-posinset': number;\n};\n"],"names":[],"mappings":"AAAA,WAUE"}

package/lib/components/FlatTreeItem/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './FlatTreeItem';
2	+ export * from './FlatTreeItem.types';

package/lib/components/FlatTreeItem/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FlatTreeItem';\nexport * from './FlatTreeItem.types';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB"}

package/lib/components/Tree/renderTree.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { TreeProvider } from '../../contexts';
 export const renderTree_unstable = (state, contextValues)=>{

package/lib/components/Tree/useTree.js CHANGED Viewed

@@ -8,25 +8,31 @@ import { useSubtree } from '../../hooks/useSubtree';
 import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
 import { treeItemFilter } from '../../utils/treeItemFilter';
 import { useTreeNavigation } from './useTreeNavigation';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 export const useTree_unstable = (props, ref)=>{
     const isSubtree = useTreeContext_unstable((ctx)=>ctx.level > 0);
     // as isSubTree is static, this doesn't break rule of hooks
     // and if this becomes an issue later on, this can be easily converted
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return isSubtree ? useSubtree(props, ref) : useNestedRootTree(props, ref);
+    return isSubtree ? {
+        ...useSubtree(props, ref),
+        treeType: 'nested'
+    } : useNestedRootTree(props, ref);
 };
 function useNestedRootTree(props, ref) {
     const [openItems, setOpenItems] = useControllableOpenItems(props);
     const checkedItems = useNestedCheckedItems(props);
     const { navigate, initialize } = useTreeNavigation();
     const walkerRef = React.useRef();
+    const { targetDocument } = useFluent_unstable();
     const initializeWalker = React.useCallback((root)=>{
-        if (root) {
-            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);
+        if (root && targetDocument) {
+            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);
             initialize(walkerRef.current);
         }
     }, [
-        initialize
+        initialize,
+        targetDocument
     ]);
     const handleOpenChange = useEventCallback((event, data)=>{
         var _props_onOpenChange, _props;
@@ -54,12 +60,15 @@ function useNestedRootTree(props, ref) {
             navigate(data, walkerRef.current);
         }
     });
-    return useRootTree({
-        ...props,
-        openItems,
-        checkedItems,
-        onOpenChange: handleOpenChange,
-        onNavigation: handleNavigation,
-        onCheckedChange: handleCheckedChange
-    }, useMergedRefs(ref, initializeWalker));
+    return {
+        treeType: 'nested',
+        ...useRootTree({
+            ...props,
+            openItems,
+            checkedItems,
+            onOpenChange: handleOpenChange,
+            onNavigation: handleNavigation,
+            onCheckedChange: handleCheckedChange
+        }, useMergedRefs(ref, initializeWalker))
+    };
 }

package/lib/components/Tree/useTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n // as isSubTree is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isSubtree ? useSubtree(props, ref) : useNestedRootTree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const { navigate, initialize } = useTreeNavigation();\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 handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n });\n setOpenItems(nextOpenItems);\n });\n\n const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n if (walkerRef.current) {\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n props.onCheckedChange?.(event, {\n ...data,\n checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n });\n }\n });\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n props.onNavigation?.(event, data);\n if (walkerRef.current) {\n navigate(data, walkerRef.current);\n }\n },\n );\n\n return useRootTree(\n {\n ...props,\n openItems,\n checkedItems,\n onOpenChange: handleOpenChange,\n onNavigation: handleNavigation,\n onCheckedChange: handleCheckedChange,\n },\n useMergedRefs(ref, initializeWalker),\n );\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","useTreeContext_unstable","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useTree_unstable","props","ref","isSubtree","ctx","level","useNestedRootTree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;~~AAExD~~,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,~~YAAYT~~,~~wBAAwBU~~,CAAAA,MAAOA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,~~YAAYP~~,~~WAAWK~~,OAAOC,~~OAAOI~~,~~kBAAkBL~~,OAAOC;~~AACvE~~,EAAE;AAEF,~~SAASI~~,~~kBAAkBL~~,KAAgB,EAAEC,GAA2B;IACtE,MAAM,~~CAACK~~,WAAWC,aAAa,~~GAAGjB~~,~~yBAAyBU~~;IAC3D,~~MAAMQ~~,~~eAAehB~~,~~sBAAsBQ~~;IAC3C,MAAM,~~EAAES~~,QAAQ,EAAEC,UAAU,EAAE,~~GAAGZ~~;IACjC,~~MAAMa~~,~~YAAYzB~~,~~MAAM0B~~,MAAM;IAC9B,~~MAAMC~~,~~mBAAmB3B~~,~~MAAM4B~~,WAAW,CACxC,CAACC;QACC,IAAIA,~~MAAM~~;~~YACRJ~~,~~UAAUK~~,OAAO,~~GAAGpB~~,~~wBAAwBmB~~,~~MAAMlB~~;~~YAClDa~~,WAAWC,~~UAAUK~~,OAAO;QAC9B;IACF,GACA;~~QAACN~~;~~KAAW~~;~~IAGd~~,~~MAAMO~~,~~mBAAmB9B~~,iBAAiB,~~CAAC+B~~,OAA4BC;~~YAErEnB~~,qBAAAA;QADA,~~MAAMoB~~,~~gBAAgB/B~~,~~oBAAoB8B~~,~~MAAMb~~;~~SAChDN~~,sBAAAA,CAAAA,SAAAA,~~OAAMqB~~,YAAY,~~cAAlBrB~~,0CAAAA,yBAAAA,~~QAAqBkB~~,OAAO;YAC1B,GAAGC,IAAI;~~YACPb~~,~~WAAWc~~,cAAcE,kCAAkC;QAC7D;~~QACAf~~,~~aAAaa~~;IACf;IAEA,MAAMG,~~sBAAsBpC~~,iBAAiB,~~CAAC+B~~,OAA+BC;QAC3E,~~IAAIR~~,~~UAAUK~~,OAAO,EAAE;~~gBAErBhB~~,wBAAAA;YADA,~~MAAMwB~~,~~mBAAmBjC~~,~~6BAA6B4B~~,~~MAAMX~~;~~aAC5DR~~,yBAAAA,CAAAA,SAAAA,~~OAAMyB~~,eAAe,~~cAArBzB~~,6CAAAA,4BAAAA,~~QAAwBkB~~,OAAO;gBAC7B,GAAGC,IAAI;~~gBACPX~~,~~cAAcgB~~,iBAAiBE,kCAAkC;YACnE;QACF;IACF;IACA,MAAMC,~~mBAAmBxC~~,iBACvB,~~CAAC+B~~,OAAqCC;~~YACpCnB~~,qBAAAA;SAAAA,sBAAAA,CAAAA,SAAAA,~~OAAM4B~~,YAAY,~~cAAlB5B~~,0CAAAA,yBAAAA,~~QAAqBkB~~,OAAOC;QAC5B,~~IAAIR~~,~~UAAUK~~,OAAO,EAAE;~~YACrBP~~,~~SAASU~~,~~MAAMR~~,~~UAAUK~~,OAAO;QAClC;IACF;IAGF,~~OAAOtB~~,~~YACL~~;~~QACE~~,~~GAAGM~~,KAAK;~~QACRM~~;~~QACAE~~;~~QACAa~~,cAAcJ;~~QACdW~~,cAAcD;~~QACdF~~,iBAAiBF;~~IACnB~~,~~GACAnC~~,~~cAAca~~,~~KAAKY~~;~~AAEvB~~"}
1	+ {"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n const isSubtree = useTreeContext_unstable(ctx => ctx.level > 0);\n // as isSubTree is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isSubtree ? { ...useSubtree(props, ref), treeType: 'nested' } : useNestedRootTree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const { navigate, initialize } = useTreeNavigation();\n const walkerRef = React.useRef<HTMLElementWalker>();\n const { targetDocument } = useFluent_unstable();\n const initializeWalker = React.useCallback(\n (root: HTMLElement \| null) => {\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n },\n [initialize, targetDocument],\n );\n\n const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n });\n setOpenItems(nextOpenItems);\n });\n\n const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n if (walkerRef.current) {\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n props.onCheckedChange?.(event, {\n ...data,\n checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n });\n }\n });\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n props.onNavigation?.(event, data);\n if (walkerRef.current) {\n navigate(data, walkerRef.current);\n }\n },\n );\n\n return {\n treeType: 'nested',\n ...useRootTree(\n {\n ...props,\n openItems,\n checkedItems,\n onOpenChange: handleOpenChange,\n onNavigation: handleNavigation,\n onCheckedChange: handleCheckedChange,\n },\n useMergedRefs(ref, initializeWalker),\n ),\n };\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","useTreeContext_unstable","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useFluent_unstable","useTree_unstable","props","ref","isSubtree","ctx","level","treeType","useNestedRootTree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,YAAYV,wBAAwBW,CAAAA,MAAOA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,YAAY;QAAE,GAAGR,WAAWM,OAAOC,IAAI;QAAEI,UAAU;IAAS,IAAIC,kBAAkBN,OAAOC;AAClG,EAAE;AAEF,SAASK,kBAAkBN,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACM,WAAWC,aAAa,GAAGnB,yBAAyBW;IAC3D,MAAMS,eAAelB,sBAAsBS;IAC3C,MAAM,EAAEU,QAAQ,EAAEC,UAAU,EAAE,GAAGd;IACjC,MAAMe,YAAY3B,MAAM4B,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGhB;IAC3B,MAAMiB,mBAAmB9B,MAAM+B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGvB,wBAAwBsB,MAAMH,gBAAgBlB;YAClEe,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBjC,iBAAiB,CAACkC,OAA4BC;YAErErB,qBAAAA;QADA,MAAMsB,gBAAgBlC,oBAAoBiC,MAAMd;SAChDP,sBAAAA,CAAAA,SAAAA,OAAMuB,YAAY,cAAlBvB,0CAAAA,yBAAAA,QAAqBoB,OAAO;YAC1B,GAAGC,IAAI;YACPd,WAAWe,cAAcE,kCAAkC;QAC7D;QACAhB,aAAac;IACf;IAEA,MAAMG,sBAAsBvC,iBAAiB,CAACkC,OAA+BC;QAC3E,IAAIT,UAAUM,OAAO,EAAE;gBAErBlB,wBAAAA;YADA,MAAM0B,mBAAmBpC,6BAA6B+B,MAAMZ;aAC5DT,yBAAAA,CAAAA,SAAAA,OAAM2B,eAAe,cAArB3B,6CAAAA,4BAAAA,QAAwBoB,OAAO;gBAC7B,GAAGC,IAAI;gBACPZ,cAAciB,iBAAiBE,kCAAkC;YACnE;QACF;IACF;IACA,MAAMC,mBAAmB3C,iBACvB,CAACkC,OAAqCC;YACpCrB,qBAAAA;SAAAA,sBAAAA,CAAAA,SAAAA,OAAM8B,YAAY,cAAlB9B,0CAAAA,yBAAAA,QAAqBoB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,EAAE;YACrBR,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLb,UAAU;QACV,GAAGZ,YACD;YACE,GAAGO,KAAK;YACRO;YACAE;YACAc,cAAcJ;YACdW,cAAcD;YACdF,iBAAiBF;QACnB,GACAtC,cAAcc,KAAKc,kBACpB;IACH;AACF"}

package/lib/components/Tree/useTreeContextValues.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;\n /*\n This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n size,\n level,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n requestTreeResponse,\n };\n\n return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAE,~~GAAGP~~;~~IACjG~~;;;GAGC,GACD,~~MAAMQ~~,OAAyB;~~QAC7BF~~;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;~~QAAEC~~;IAAK;AAChB"}
1	+ {"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse, treeType } = state;\n /*\n This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n treeType,\n size,\n level,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n requestTreeResponse,\n };\n\n return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","treeType","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAEC,QAAQ,EAAE,GAAGR;IAC3G;;;GAGC,GACD,MAAMS,OAAyB;QAC7BD;QACAF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEE;IAAK;AAChB"}

package/lib/components/TreeItem/renderTreeItem.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { TreeItemProvider } from '../../contexts';
 /**

package/lib/components/TreeItem/useTreeItem.js CHANGED Viewed

@@ -16,6 +16,10 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
  * @param ref - reference to root HTMLElement of TreeItem
  */ export function useTreeItem_unstable(props, ref) {
     var _props_value;
+    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);
+    if (treeType === 'flat') {
+        warnIfNoProperPropsFlatTreeItem(props);
+    }
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
     // note, if the value is not externally provided,
@@ -242,3 +246,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         })
     };
 }
+function warnIfNoProperPropsFlatTreeItem(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined) {
+            // eslint-disable-next-line no-console
+            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:
+A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level" to ensure a11y and navigation.
+- "aria-posinset": the position of this treeitem in the current level of the tree.
+- "aria-setsize": the number of siblings in this level of the tree.
+- "aria-level": the current level of the treeitem.`);
+        }
+    }
+}