@fluentui/react-tree 9.1.1 → 9.3.1

package/lib/components/FlatTree/useFlatTreeNavigation.js

@@ -4,8 +4,8 @@ import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
 import { treeDataTypes } from '../../utils/tokens';
 import { treeItemFilter } from '../../utils/treeItemFilter';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
-import { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';
-export function useFlatTreeNavigation(virtualTree) {
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+export function useFlatTreeNavigation() {
     const { targetDocument } = useFluent_unstable();
     const { rove, initialize } = useRovingTabIndex(treeItemFilter);
     function getNextElement(data, walker) {
@@ -19,10 +19,30 @@ export function useFlatTreeNavigation(virtualTree) {
                 walker.currentElement = data.target;
                 return nextTypeAheadElement(walker, data.event.key);
             case treeDataTypes.ArrowLeft:
-                return parentElement(virtualTree, data.target, walker);
+                {
+                    const nextElement = parentElement(data.parentValue, walker);
+                    if (!nextElement && process.env.NODE_ENV !== 'production') {
+                        // eslint-disable-next-line no-console
+                        console.warn(`@fluentui/react-tree [useFlatTreeNavigation]:
+\'ArrowLeft\' navigation was not possible.
+No parent element found for the current element:`, data.target);
+                    }
+                    return nextElement;
+                }
             case treeDataTypes.ArrowRight:
-                walker.currentElement = data.target;
-                return firstChild(data.target, walker);
+                {
+                    walker.currentElement = data.target;
+                    const nextElement = firstChild(data.target, walker);
+                    if (!nextElement && process.env.NODE_ENV !== 'production') {
+                        const ariaLevel = Number(data.target.getAttribute('aria-level'));
+                        // eslint-disable-next-line no-console
+                        console.warn(`@fluentui/react-tree [useFlatTreeNavigation]:
+\'ArrowRight\' navigation was not possible.
+No element with "aria-posinset=1" and "aria-level=${ariaLevel + 1}"
+was found after the current element!`, data.target);
+                    }
+                    return nextElement;
+                }
             case treeDataTypes.End:
                 walker.currentElement = walker.root;
                 return walker.lastChild();
@@ -61,15 +81,9 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(virtualTreeItems, target, treeWalker) {
-    var _virtualTreeItem;
-    const value = getTreeItemValueFromElement(target);
-    if (value === null) {
+function parentElement(parentValue, treeWalker) {
+    if (parentValue === undefined) {
         return null;
     }
-    const virtualTreeItem = virtualTreeItems.get(value);
-    if ((_virtualTreeItem = virtualTreeItem) === null || _virtualTreeItem === void 0 ? void 0 : _virtualTreeItem.parentValue) {
-        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${virtualTreeItem.parentValue}"]`);
-    }
-    return null;
+    return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}="${parentValue}"]`);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../../Tree';\nimport { HeadlessTree, HeadlessTreeItemProps } from '../../utils/createHeadlessTree';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../../utils/getTreeItemValueFromElement';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\n\nexport function useFlatTreeNavigation<Props extends HeadlessTreeItemProps>(virtualTree: HeadlessTree<Props>) {\n  const { targetDocument } = useFluent_unstable();\n  const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n    if (!targetDocument) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walker.currentElement = data.target;\n        return nextTypeAheadElement(walker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        return parentElement(virtualTree, data.target, walker);\n      case treeDataTypes.ArrowRight:\n        walker.currentElement = data.target;\n        return firstChild(data.target, walker);\n      case treeDataTypes.End:\n        walker.currentElement = walker.root;\n        return walker.lastChild();\n      case treeDataTypes.Home:\n        walker.currentElement = walker.root;\n        return walker.firstChild();\n      case treeDataTypes.ArrowDown:\n        walker.currentElement = data.target;\n        return walker.nextElement();\n      case treeDataTypes.ArrowUp:\n        walker.currentElement = data.target;\n        return walker.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable, walker: HTMLElementWalker) => {\n    const nextElement = getNextElement(data, walker);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return { navigate, initialize } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(\n  virtualTreeItems: HeadlessTree<HeadlessTreeItemProps>,\n  target: HTMLElement,\n  treeWalker: HTMLElementWalker,\n) {\n  const value = getTreeItemValueFromElement(target);\n  if (value === null) {\n    return null;\n  }\n  const virtualTreeItem = virtualTreeItems.get(value);\n  if (virtualTreeItem?.parentValue) {\n    return treeWalker.root.querySelector<HTMLElement>(\n      `[${dataTreeItemValueAttrName}=\"${virtualTreeItem.parentValue}\"]`,\n    );\n  }\n  return null;\n}\n"],"names":["useFluent_unstable","useEventCallback","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","dataTreeItemValueAttrName","getTreeItemValueFromElement","useFlatTreeNavigation","virtualTree","targetDocument","rove","initialize","getNextElement","data","walker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","virtualTreeItems","virtualTreeItem","value","get","parentValue","querySelector"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,4BAA4B;AAG7D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,yBAAyB,EAAEC,2BAA2B,QAAQ,0CAA0C;AAGjH,OAAO,SAASC,sBAA2DC,WAAgC;IACzG,MAAM,EAAEC,cAAc,EAAE,GAAGV;IAC3B,MAAM,EAAEW,IAAI,EAAEC,UAAU,EAAE,GAAGP,kBAAkBD;IAE/C,SAASS,eAAeC,IAAiC,EAAEC,MAAyB;QAClF,IAAI,CAACL,gBAAgB;YACnB,OAAO;QACT;QACA,OAAQI,KAAKE,IAAI;YACf,KAAKb,cAAcc,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKf,cAAcgB,SAAS;gBAC1BJ,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOhB,qBAAqBa,QAAQD,KAAKO,KAAK,CAACC,GAAG;YACpD,KAAKnB,cAAcoB,SAAS;gBAC1B,OAAOC,cAAcf,aAAaK,KAAKI,MAAM,EAAEH;YACjD,KAAKZ,cAAcsB,UAAU;gBAC3BV,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOQ,WAAWZ,KAAKI,MAAM,EAAEH;YACjC,KAAKZ,cAAcwB,GAAG;gBACpBZ,OAAOK,cAAc,GAAGL,OAAOa,IAAI;gBACnC,OAAOb,OAAOc,SAAS;YACzB,KAAK1B,cAAc2B,IAAI;gBACrBf,OAAOK,cAAc,GAAGL,OAAOa,IAAI;gBACnC,OAAOb,OAAOW,UAAU;YAC1B,KAAKvB,cAAc4B,SAAS;gBAC1BhB,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOH,OAAOiB,WAAW;YAC3B,KAAK7B,cAAc8B,OAAO;gBACxBlB,OAAOK,cAAc,GAAGN,KAAKI,MAAM;gBACnC,OAAOH,OAAOmB,eAAe;QACjC;IACF;IACA,MAAMC,WAAWlC,iBAAiB,CAACa,MAAmCC;QACpE,MAAMiB,cAAcnB,eAAeC,MAAMC;QACzC,IAAIiB,aAAa;YACfrB,KAAKqB;QACP;IACF;IACA,OAAO;QAAEG;QAAUvB;IAAW;AAChC;AAEA,SAASc,WAAWR,MAAmB,EAAEkB,UAA6B;IACpE,MAAMJ,cAAcI,WAAWJ,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO;IACT;IACA,MAAMK,0BAA0BL,YAAYM,YAAY,CAAC;IACzD,MAAMC,uBAAuBP,YAAYM,YAAY,CAAC;IACtD,MAAME,kBAAkBtB,OAAOoB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOR;IACT;IACA,OAAO;AACT;AAEA,SAASR,cACPkB,gBAAqD,EACrDxB,MAAmB,EACnBkB,UAA6B;QAOzBO;IALJ,MAAMC,QAAQrC,4BAA4BW;IAC1C,IAAI0B,UAAU,MAAM;QAClB,OAAO;IACT;IACA,MAAMD,kBAAkBD,iBAAiBG,GAAG,CAACD;IAC7C,KAAID,mBAAAA,6BAAAA,uCAAAA,iBAAiBG,WAAW,EAAE;QAChC,OAAOV,WAAWR,IAAI,CAACmB,aAAa,CAClC,CAAC,CAAC,EAAEzC,0BAA0B,EAAE,EAAEqC,gBAAgBG,WAAW,CAAC,EAAE,CAAC;IAErE;IACA,OAAO;AACT"}
+{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../../Tree';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../../TreeItem';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\nexport function useFlatTreeNavigation() {\n  const { targetDocument } = useFluent_unstable();\n  const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n  function getNextElement(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n    if (!targetDocument) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walker.currentElement = data.target;\n        return nextTypeAheadElement(walker, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const nextElement = parentElement(data.parentValue, walker);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        walker.currentElement = data.target;\n        const nextElement = firstChild(data.target, walker);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walker.currentElement = walker.root;\n        return walker.lastChild();\n      case treeDataTypes.Home:\n        walker.currentElement = walker.root;\n        return walker.firstChild();\n      case treeDataTypes.ArrowDown:\n        walker.currentElement = data.target;\n        return walker.nextElement();\n      case treeDataTypes.ArrowUp:\n        walker.currentElement = data.target;\n        return walker.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable, walker: HTMLElementWalker) => {\n    const nextElement = getNextElement(data, walker);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return { navigate, initialize } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n"],"names":["useFluent_unstable","useEventCallback","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","dataTreeItemValueAttrName","useFlatTreeNavigation","targetDocument","rove","initialize","getNextElement","data","walker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","firstChild","ariaLevel","Number","getAttribute","End","root","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}

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.
@@ -25,42 +26,37 @@ import { treeItemFilter } from '../../utils/treeItemFilter';
     ]);
     const [openItems, setOpenItems] = useControllableOpenItems(options);
     const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
-    const { initialize, navigate } = useFlatTreeNavigation(headlessTree);
+    const { initialize, navigate } = useFlatTreeNavigation();
+    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)=>{
-        var _options_onOpenChange, _options;
+        var _options_onOpenChange;
         const nextOpenItems = createNextOpenItems(data, openItems);
-        (_options_onOpenChange = (_options = options).onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(_options, event, {
+        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
             ...data,
             openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
         });
         setOpenItems(nextOpenItems);
     });
     const handleCheckedChange = useEventCallback((event, data)=>{
-        var _options_onCheckedChange, _options;
+        var _options_onCheckedChange;
         const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);
-        (_options_onCheckedChange = (_options = options).onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(_options, event, {
+        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {
             ...data,
             checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
         });
         setCheckedItems(nextCheckedItems);
     });
-    const handleNavigation = useEventCallback((event, data)=>{
-        var _options_onNavigation, _options;
-        (_options_onNavigation = (_options = options).onNavigation) === null || _options_onNavigation === void 0 ? void 0 : _options_onNavigation.call(_options, event, data);
-        if (walkerRef.current) {
-            navigate(data, walkerRef.current);
-        }
-    });
     const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
         const item = headlessTree.get(data.value);
         if (item) {
@@ -87,18 +83,23 @@ import { treeItemFilter } from '../../utils/treeItemFilter';
         return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
     }, []);
     const ref = useMergedRefs(treeRef, initializeWalker);
-    const getTreeProps = React.useCallback(()=>({
+    const getTreeProps = React.useCallback(()=>{
+        var _options_onNavigation;
+        return {
             ref,
             openItems,
             selectionMode: options.selectionMode,
             checkedItems,
             onOpenChange: handleOpenChange,
             onCheckedChange: handleCheckedChange,
-            onNavigation: handleNavigation
-        }), // eslint-disable-next-line react-hooks/exhaustive-deps
+            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop
+        };
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         openItems,
-        checkedItems
+        checkedItems,
+        options.selectionMode,
+        options.onNavigation
     ]);
     const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [
         openItems,
@@ -122,3 +123,5 @@ import { treeItemFilter } from '../../utils/treeItemFilter';
         items
     ]);
 }
+function noop() {
+/* noop */ }

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  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();\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 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: options.onNavigation ?? noop,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [openItems, checkedItems, options.selectionMode, options.onNavigation],\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\nfunction noop() {\n  /* noop */\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","getNextNavigableItem","visibleItems","item","get","value","type","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","querySelector","ref","getTreeProps","selectionMode","onNavigation","noop","items"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,YAAYC,WAAW,QAAQ;AAC/B,SAAkDC,kBAAkB,QAAQ,iCAAiC;AAC7G,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AAErG,SAASC,yBAAyB,QAAQ,0CAA0C;AAEpF,SAASC,0BAA0B,EAAEC,+BAA+B,QAAQ,oCAAoC;AAUhH,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,QAAQ,kCAAkC;AAgFrE;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,6BACdC,KAAc,EACdC,UAAmC,CAAC,CAAC;IAErC,MAAMC,eAAef,MAAMgB,OAAO,CAAC,IAAMf,mBAAmBY,QAAQ;QAACA;KAAM;IAC3E,MAAM,CAACI,WAAWC,aAAa,GAAGb,yBAAyBS;IAC3D,MAAM,CAACK,cAAcC,gBAAgB,GAAGZ,gCAAgCM,SAASC;IACjF,MAAM,EAAEM,UAAU,EAAEC,QAAQ,EAAE,GAAGnB;IACjC,MAAM,EAAEoB,cAAc,EAAE,GAAGZ;IAC3B,MAAMa,YAAYxB,MAAMyB,MAAM;IAC9B,MAAMC,mBAAmB1B,MAAM2B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQL,gBAAgB;YAC1BC,UAAUK,OAAO,GAAGpB,wBAAwBmB,MAAML,gBAAgBb;YAClEW,WAAWG,UAAUK,OAAO;QAC9B;IACF,GACA;QAACR;QAAYE;KAAe;IAG9B,MAAMO,UAAU9B,MAAMyB,MAAM,CAAiB;IAC7C,MAAMM,mBAAmBjC,iBAAiB,CAACkC,OAA4BC;YAErEnB;QADA,MAAMoB,gBAAgB9B,oBAAoB6B,MAAMhB;SAChDH,wBAAAA,QAAQqB,YAAY,cAApBrB,4CAAAA,2BAAAA,SAAuBkB,OAAO;YAC5B,GAAGC,IAAI;YACPhB,WAAWiB,cAAcE,kCAAkC;QAC7D;QACAlB,aAAagB;IACf;IAEA,MAAMG,sBAAsBvC,iBAAiB,CAACkC,OAA+BC;YAE3EnB;QADA,MAAMwB,mBAAmB/B,2BAA2B0B,MAAMd,cAAcJ;SACxED,2BAAAA,QAAQyB,eAAe,cAAvBzB,+CAAAA,8BAAAA,SAA0BkB,OAAO;YAC/B,GAAGC,IAAI;YACPd,cAAcmB,iBAAiBE,kCAAkC;QACnE;QACApB,gBAAgBkB;IAClB;IAEA,MAAMG,uBAAuB3C,iBAC3B,CAAC4C,cAAyCT;QACxC,MAAMU,OAAO5B,aAAa6B,GAAG,CAACX,KAAKY,KAAK;QACxC,IAAIF,MAAM;YACR,OAAQV,KAAKa,IAAI;gBACf,KAAK5C,cAAc6C,SAAS;oBAC1B,OAAOJ;gBACT,KAAKzC,cAAc8C,SAAS;oBAC1B,OAAOjC,aAAa6B,GAAG,CAACD,KAAKM,WAAW;gBAC1C,KAAK/C,cAAcgD,UAAU;oBAC3B,OAAOR,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;gBACrC,KAAKjD,cAAckD,GAAG;oBACpB,OAAOV,YAAY,CAACA,aAAaW,MAAM,GAAG,EAAE;gBAC9C,KAAKnD,cAAcoD,IAAI;oBACrB,OAAOZ,YAAY,CAAC,EAAE;gBACxB,KAAKxC,cAAcqD,SAAS;oBAC1B,OAAOb,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;gBACrC,KAAKjD,cAAcsD,OAAO;oBACxB,OAAOd,YAAY,CAACC,KAAKQ,KAAK,GAAG,EAAE;YACvC;QACF;IACF;IAGF,MAAMM,qBAAqBzD,MAAM2B,WAAW,CAAC,CAACgB;YACrCb;QAAP,QAAOA,mBAAAA,QAAQD,OAAO,cAAfC,uCAAAA,iBAAiB4B,aAAa,CAAC,CAAC,CAAC,EAAEpD,0BAA0B,EAAE,EAAEqC,KAAKE,KAAK,CAAC,EAAE,CAAC;IACxF,GAAG,EAAE;IAEL,MAAMc,MAAM5D,cAA8B+B,SAASJ;IAEnD,MAAMkC,eAAe5D,MAAM2B,WAAW,CACpC;YAOgBb;eAPT;YACL6C;YACA1C;YACA4C,eAAe/C,QAAQ+C,aAAa;YACpC1C;YACAgB,cAAcJ;YACdQ,iBAAiBF;YACjByB,cAAchD,CAAAA,wBAAAA,QAAQgD,YAAY,cAApBhD,mCAAAA,wBAAwBiD;QACxC;IAAA,GACA,uDAAuD;IACvD;QAAC9C;QAAWE;QAAcL,QAAQ+C,aAAa;QAAE/C,QAAQgD,YAAY;KAAC;IAGxE,MAAME,QAAQhE,MAAM2B,WAAW,CAAC,IAAMZ,aAAa2B,YAAY,CAACzB,YAAY;QAACA;QAAWF;KAAa;IAErG,OAAOf,MAAMgB,OAAO,CAClB,IAAO,CAAA;YACLM,UAAUW,CAAAA;gBACR,IAAIT,UAAUK,OAAO,EAAE;oBACrBP,SAASW,MAAMT,UAAUK,OAAO;gBAClC;YACF;YACA+B;YACAnB;YACAgB;YACAO;QACF,CAAA,GACA;QAAC1C;QAAUsC;QAAcnB;QAAsBgB;QAAoBO;KAAM;AAE7E;AAEA,SAASD;AACP,QAAQ,GACV"}

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/Tree.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts/treeContext';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = { target: HTMLElement; value: TreeItemValue } & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAmJI"}
+{"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAuJI"}

package/lib/components/Tree/useTree.js

@@ -8,30 +8,36 @@ 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;
+        var _props_onOpenChange;
         const nextOpenItems = createNextOpenItems(data, openItems);
-        (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, {
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
             ...data,
             openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
         });
@@ -39,27 +45,30 @@ function useNestedRootTree(props, ref) {
     });
     const handleCheckedChange = useEventCallback((event, data)=>{
         if (walkerRef.current) {
-            var _props_onCheckedChange, _props;
+            var _props_onCheckedChange;
             const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);
-            (_props_onCheckedChange = (_props = props).onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(_props, event, {
+            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
                 ...data,
                 checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()
             });
         }
     });
     const handleNavigation = useEventCallback((event, data)=>{
-        var _props_onNavigation, _props;
-        (_props_onNavigation = (_props = props).onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(_props, event, data);
-        if (walkerRef.current) {
+        var _props_onNavigation;
+        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+        if (walkerRef.current && !event.isDefaultPrevented()) {
             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\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 && !event.isDefaultPrevented()) {\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","isDefaultPrevented"],"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;IAE3B,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;QADA,MAAMsB,gBAAgBlC,oBAAoBiC,MAAMd;SAChDP,sBAAAA,MAAMuB,YAAY,cAAlBvB,0CAAAA,yBAAAA,OAAqBoB,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;YADA,MAAM0B,mBAAmBpC,6BAA6B+B,MAAMZ;aAC5DT,yBAAAA,MAAM2B,eAAe,cAArB3B,6CAAAA,4BAAAA,OAAwBoB,OAAO;gBAC7B,GAAGC,IAAI;gBACPZ,cAAciB,iBAAiBE,kCAAkC;YACnE;QACF;IACF;IACA,MAAMC,mBAAmB3C,iBACvB,CAACkC,OAAqCC;YACpCrB;SAAAA,sBAAAA,MAAM8B,YAAY,cAAlB9B,0CAAAA,yBAAAA,OAAqBoB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMW,kBAAkB,IAAI;YACpDrB,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/TreeItem.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ArrowLeft, ArrowRight, Enter } from '@fluentui/keyboard-keys';\nimport type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { treeItemLevelToken } from '../../utils/tokens';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n};\n\nexport type TreeItemOpenChangeData = {\n  open: boolean;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * A tree item can be a leaf or a branch\n   */\n  itemType: TreeItemType;\n  /**\n   * A tree item should have a well defined value, in case one is not provided by the user by this prop\n   * one will be inferred internally.\n   */\n  value?: TreeItemValue;\n  /**\n   * Whether the tree item is in an open state\n   *\n   * This overrides the open value provided by the root tree,\n   * and ensure control of the visibility of the tree item per tree item.\n   *\n   * NOTE: controlling the open state of a tree item will not affect the open state of its children\n   */\n  open?: boolean;\n  onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ArrowLeft, ArrowRight, Enter } from '@fluentui/keyboard-keys';\nimport type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { treeItemLevelToken } from '../../utils/tokens';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n};\n\nexport type TreeItemOpenChangeData = {\n  open: boolean;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * A tree item can be a leaf or a branch\n   */\n  itemType: TreeItemType;\n  /**\n   * A tree item should have a well defined value, in case one is not provided by the user by this prop\n   * one will be inferred internally.\n   */\n  value?: TreeItemValue;\n  /**\n   * Whether the tree item is in an open state\n   *\n   * This overrides the open value provided by the root tree,\n   * and ensure control of the visibility of the tree item per tree item.\n   *\n   * NOTE: controlling the open state of a tree item will not affect the open state of its children\n   */\n  open?: boolean;\n  onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;\n  /**\n   * This property is inferred through context on a nested tree, and required for a flat tree.\n   */\n  parentValue?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}