@fluentui/react-tree 9.2.1 → 9.4.0

package/lib/components/FlatTree/useFlatTreeContextValues.js

@@ -1,2 +1,20 @@
-import { useTreeContextValues_unstable } from '../../Tree';
-export const useFlatTreeContextValues_unstable = useTreeContextValues_unstable;
+export const useFlatTreeContextValues_unstable = (state)=>{
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const tree = {
+        treeType,
+        size,
+        openItems,
+        appearance,
+        checkedItems,
+        selectionMode,
+        contextType,
+        level,
+        requestTreeResponse
+    };
+    return {
+        tree
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeContextValues.ts"],"sourcesContent":["import { TreeContextValues, useTreeContextValues_unstable } from '../../Tree';\nimport type { FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable: (state: FlatTreeState) => TreeContextValues =\n  useTreeContextValues_unstable;\n"],"names":["useTreeContextValues_unstable","useFlatTreeContextValues_unstable"],"mappings":"AAAA,SAA4BA,6BAA6B,QAAQ,aAAa;AAG9E,OAAO,MAAMC,oCACXD,8BAA8B"}
+{"version":3,"sources":["useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n  const {\n    openItems,\n    level,\n    contextType,\n    treeType,\n    checkedItems,\n    selectionMode,\n    appearance,\n    size,\n    requestTreeResponse,\n  } = 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    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    contextType,\n    level,\n    requestTreeResponse,\n  };\n\n  return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACpB,GAAGT;IACJ;;;GAGC,GACD,MAAMU,OAAyB;QAC7BN;QACAI;QACAP;QACAM;QACAF;QACAC;QACAH;QACAD;QACAO;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}

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

@@ -26,7 +26,7 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
     ]);
     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)=>{
@@ -40,30 +40,23 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
     ]);
     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) {
@@ -90,18 +83,23 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
         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,
@@ -125,3 +123,5 @@ import { useFluent_unstable } from '@fluentui/react-shared-contexts';
         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';\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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"}
+{"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":"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"}

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, SubtreeContextValue } 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 | SubtreeContextValue;\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  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WAsJ6C"}

package/lib/components/Tree/renderTree.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <state.root>{state.root.children}</state.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["assertSlots","TreeProvider","renderTree_unstable","state","contextValues","value","tree","open","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IACvB,qBACE,KAACF;QAAaI,OAAOD,cAAcE,IAAI;kBACpCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMK,IAAI;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGrD,EAAE"}
+{"version":3,"sources":["renderTree.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\nimport { TreeProvider } from '../TreeProvider';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues) => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.open && <state.root>{state.root.children}</state.root>}\n    </TreeProvider>\n  );\n};\n"],"names":["assertSlots","TreeProvider","renderTree_unstable","state","contextValues","value","tree","open","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IACvB,qBACE,KAACF;QAAaI,OAAOD,cAAcE,IAAI;kBACpCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMK,IAAI;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGrD,EAAE"}

package/lib/components/Tree/useTree.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
 import { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';
-import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { useSubtreeContext_unstable } from '../../contexts/subtreeContext';
 import { useRootTree } from '../../hooks/useRootTree';
 import { useSubtree } from '../../hooks/useSubtree';
 import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
@@ -10,14 +10,11 @@ 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
+    const { level } = useSubtreeContext_unstable();
+    // as level 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),
-        treeType: 'nested'
-    } : useNestedRootTree(props, ref);
+    return level > 0 ? useSubtree(props, ref) : useNestedRootTree(props, ref);
 };
 function useNestedRootTree(props, ref) {
     const [openItems, setOpenItems] = useControllableOpenItems(props);
@@ -35,9 +32,9 @@ function useNestedRootTree(props, ref) {
         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()
         });
@@ -45,18 +42,18 @@ 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);
         }
     });

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';\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"}
+{"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 { useSubtreeContext_unstable } from '../../contexts/subtreeContext';\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 { level } = useSubtreeContext_unstable();\n  // as level 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 level > 0 ? 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 { 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","useSubtreeContext_unstable","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useFluent_unstable","useTree_unstable","props","ref","level","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","treeType"],"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,0BAA0B,QAAQ,gCAAgC;AAC3E,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,MAAM,EAAEC,KAAK,EAAE,GAAGV;IAClB,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOU,QAAQ,IAAIR,WAAWM,OAAOC,OAAOE,kBAAkBH,OAAOC;AACvE,EAAE;AAEF,SAASE,kBAAkBH,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACG,WAAWC,aAAa,GAAGhB,yBAAyBW;IAC3D,MAAMM,eAAef,sBAAsBS;IAC3C,MAAM,EAAEO,QAAQ,EAAEC,UAAU,EAAE,GAAGX;IACjC,MAAMY,YAAYxB,MAAMyB,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,mBAAmB3B,MAAM4B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGpB,wBAAwBmB,MAAMH,gBAAgBf;YAClEY,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmB9B,iBAAiB,CAAC+B,OAA4BC;YAErElB;QADA,MAAMmB,gBAAgB/B,oBAAoB8B,MAAMd;SAChDJ,sBAAAA,MAAMoB,YAAY,cAAlBpB,0CAAAA,yBAAAA,OAAqBiB,OAAO;YAC1B,GAAGC,IAAI;YACPd,WAAWe,cAAcE,kCAAkC;QAC7D;QACAhB,aAAac;IACf;IAEA,MAAMG,sBAAsBpC,iBAAiB,CAAC+B,OAA+BC;QAC3E,IAAIT,UAAUM,OAAO,EAAE;gBAErBf;YADA,MAAMuB,mBAAmBjC,6BAA6B4B,MAAMZ;aAC5DN,yBAAAA,MAAMwB,eAAe,cAArBxB,6CAAAA,4BAAAA,OAAwBiB,OAAO;gBAC7B,GAAGC,IAAI;gBACPZ,cAAciB,iBAAiBE,kCAAkC;YACnE;QACF;IACF;IACA,MAAMC,mBAAmBxC,iBACvB,CAAC+B,OAAqCC;YACpClB;SAAAA,sBAAAA,MAAM2B,YAAY,cAAlB3B,0CAAAA,yBAAAA,OAAqBiB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMW,kBAAkB,IAAI;YACpDrB,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLc,UAAU;QACV,GAAGpC,YACD;YACE,GAAGO,KAAK;YACRI;YACAE;YACAc,cAAcJ;YACdW,cAAcD;YACdF,iBAAiBF;QACnB,GACAnC,cAAcc,KAAKW,kBACpB;IACH;AACF"}

package/lib/components/Tree/useTreeContextValues.js

@@ -1,19 +1,33 @@
+import * as React from 'react';
 export function useTreeContextValues_unstable(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,
-        appearance,
-        checkedItems,
-        selectionMode,
-        requestTreeResponse
-    };
+    if (state.contextType === 'root') {
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+        /**
+     * This context is created with "@fluentui/react-context-selector",
+     * there is no sense to memoize it
+     */ const tree = {
+            treeType,
+            size,
+            openItems,
+            appearance,
+            checkedItems,
+            selectionMode,
+            contextType,
+            level,
+            requestTreeResponse
+        };
+        return {
+            tree
+        };
+    }
     return {
-        tree
+        // contextType is statically determined by the context
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        tree: React.useMemo(()=>({
+                level: state.level,
+                contextType: 'subtree'
+            }), [
+            state.level
+        ])
     };
 }

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, 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"}
+{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      appearance,\n      size,\n      requestTreeResponse,\n    } = 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      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      contextType,\n      level,\n      requestTreeResponse,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACpB,GAAGT;QACJ;;;KAGC,GACD,MAAMU,OAAyB;YAC7BN;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMZ,MAAMa,OAAO,CAAC,IAAO,CAAA;gBAAER,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

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"}