@fluentui/react-tree 9.1.1 → 9.2.1

package/CHANGELOG.json

@@ -2,7 +2,147 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Thu, 14 Sep 2023 16:40:23 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": {

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Thu, 14 Sep 2023 16:40:23 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:40:23 GMT 
+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

package/dist/index.d.ts

@@ -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

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

package/lib/FlatTreeItem.js.map

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

package/lib/components/FlatTree/useFlatTree.js

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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

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

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

@@ -0,0 +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

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

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

@@ -0,0 +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/useTree.js

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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/useTreeItem.js

@@ -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.`);
+        }
+    }
+}