@fluentui/react-tree 9.2.1 → 9.4.0

package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js

@@ -26,7 +26,7 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
     ]);
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(options);
     const [checkedItems, setCheckedItems] = (0, _useFlatControllableCheckedItems.useFlatControllableCheckedItems)(options, headlessTree);
-    const { initialize, navigate } = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(headlessTree);
+    const { initialize, navigate } = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const walkerRef = _react.useRef();
     const initializeWalker = _react.useCallback((root)=>{
@@ -40,30 +40,23 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
     ]);
     const treeRef = _react.useRef(null);
     const handleOpenChange = (0, _reactutilities.useEventCallback)((event, data)=>{
-        var _options_onOpenChange, _options;
+        var _options_onOpenChange;
         const nextOpenItems = (0, _useControllableOpenItems.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 = (0, _reactutilities.useEventCallback)((event, data)=>{
-        var _options_onCheckedChange, _options;
+        var _options_onCheckedChange;
         const nextCheckedItems = (0, _useFlatControllableCheckedItems.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 = (0, _reactutilities.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 = (0, _reactutilities.useEventCallback)((visibleItems, data)=>{
         const item = headlessTree.get(data.value);
         if (item) {
@@ -90,17 +83,22 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
         return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${item.value}"]`);
     }, []);
     const ref = (0, _reactutilities.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
-        }), [
+            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop
+        };
+    }, [
         openItems,
-        checkedItems
+        checkedItems,
+        options.selectionMode,
+        options.onNavigation
     ]);
     const items = _react.useCallback(()=>headlessTree.visibleItems(openItems), [
         openItems,
@@ -124,3 +122,5 @@ function useHeadlessFlatTree_unstable(props, options = {}) {
         items
     ]);
 }
+function noop() {
+/* noop */ }

package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useHeadlessFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\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 */ export function useHeadlessFlatTree_unstable(props, options = {}) {\n    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [\n        props\n    ]);\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();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange, _options;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_options_onOpenChange = (_options = options).onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(_options, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange, _options;\n        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n        (_options_onCheckedChange = (_options = options).onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(_options, event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n        });\n        setCheckedItems(nextCheckedItems);\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _options_onNavigation, _options;\n        (_options_onNavigation = (_options = options).onNavigation) === null || _options_onNavigation === void 0 ? void 0 : _options_onNavigation.call(_options, event, data);\n        if (walkerRef.current) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\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    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, initializeWalker);\n    const getTreeProps = React.useCallback(()=>({\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            onNavigation: handleNavigation\n        }), // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems\n    ]);\n    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [\n        openItems,\n        headlessTree\n    ]);\n    return React.useMemo(()=>({\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,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items\n    ]);\n}\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","initialize","navigate","useFlatTreeNavigation","targetDocument","useFluent_unstable","walkerRef","useRef","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","treeRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","_options","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_options_onCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_options_onNavigation","onNavigation","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","_treeRef_current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","getTreeProps","selectionMode","items"],"mappings":"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"}
+{"version":3,"sources":["useHeadlessFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createHeadlessTree } from '../../utils/createHeadlessTree';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\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 */ export function useHeadlessFlatTree_unstable(props, options = {}) {\n    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [\n        props\n    ]);\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();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {\n            ...data,\n            checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n        });\n        setCheckedItems(nextCheckedItems);\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\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    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, initializeWalker);\n    const getTreeProps = React.useCallback(()=>{\n        var _options_onNavigation;\n        return {\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop\n        };\n    }, // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems,\n        options.selectionMode,\n        options.onNavigation\n    ]);\n    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [\n        openItems,\n        headlessTree\n    ]);\n    return React.useMemo(()=>({\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,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items\n    ]);\n}\nfunction noop() {\n/* noop */ }\n"],"names":["useHeadlessFlatTree_unstable","props","options","headlessTree","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","initialize","navigate","useFlatTreeNavigation","targetDocument","useFluent_unstable","walkerRef","useRef","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","treeRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_options_onCheckedChange","nextCheckedItems","createNextFlatCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","_treeRef_current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","getTreeProps","_options_onNavigation","selectionMode","onNavigation","noop","items"],"mappings":"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"}

package/lib-commonjs/components/Tree/renderTree.js

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "renderTree_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const _contexts = require("../../contexts");
+const _TreeProvider = require("../TreeProvider");
 const renderTree_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.TreeProvider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TreeProvider.TreeProvider, {
         value: contextValues.tree,
         children: state.open && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
             children: state.root.children

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTree.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../../contexts';\nexport const renderTree_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(TreeProvider, {\n        value: contextValues.tree,\n        children: state.open && /*#__PURE__*/ _jsx(state.root, {\n            children: state.root.children\n        })\n    });\n};\n"],"names":["renderTree_unstable","state","contextValues","assertSlots","_jsx","TreeProvider","value","tree","children","open","root"],"mappings":";;;;+BAGaA;;;eAAAA;;;4BAHiB;gCACF;0BACC;AACtB,MAAMA,sBAAsB,CAACC,OAAOC;IACvCC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,sBAAY,EAAE;QACpCC,OAAOJ,cAAcK,IAAI;QACzBC,UAAUP,MAAMQ,IAAI,IAAI,WAAW,GAAGL,IAAAA,eAAI,EAACH,MAAMS,IAAI,EAAE;YACnDF,UAAUP,MAAMS,IAAI,CAACF,QAAQ;QACjC;IACJ;AACJ"}
+{"version":3,"sources":["renderTree.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../TreeProvider';\nexport const renderTree_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(TreeProvider, {\n        value: contextValues.tree,\n        children: state.open && /*#__PURE__*/ _jsx(state.root, {\n            children: state.root.children\n        })\n    });\n};\n"],"names":["renderTree_unstable","state","contextValues","assertSlots","_jsx","TreeProvider","value","tree","children","open","root"],"mappings":";;;;+BAGaA;;;eAAAA;;;4BAHiB;gCACF;8BACC;AACtB,MAAMA,sBAAsB,CAACC,OAAOC;IACvCC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,0BAAY,EAAE;QACpCC,OAAOJ,cAAcK,IAAI;QACzBC,UAAUP,MAAMQ,IAAI,IAAI,WAAW,GAAGL,IAAAA,eAAI,EAACH,MAAMS,IAAI,EAAE;YACnDF,UAAUP,MAAMS,IAAI,CAACF,QAAQ;QACjC;IACJ;AACJ"}

package/lib-commonjs/components/Tree/useTree.js

@@ -13,7 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
 const _useNestedControllableCheckedItems = require("./useNestedControllableCheckedItems");
-const _treeContext = require("../../contexts/treeContext");
+const _subtreeContext = require("../../contexts/subtreeContext");
 const _useRootTree = require("../../hooks/useRootTree");
 const _useSubtree = require("../../hooks/useSubtree");
 const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
@@ -21,14 +21,11 @@ const _treeItemFilter = require("../../utils/treeItemFilter");
 const _useTreeNavigation = require("./useTreeNavigation");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useTree_unstable = (props, ref)=>{
-    const isSubtree = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.level > 0);
-    // as isSubTree is static, this doesn't break rule of hooks
+    const { level } = (0, _subtreeContext.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 ? {
-        ...(0, _useSubtree.useSubtree)(props, ref),
-        treeType: 'nested'
-    } : useNestedRootTree(props, ref);
+    return level > 0 ? (0, _useSubtree.useSubtree)(props, ref) : useNestedRootTree(props, ref);
 };
 function useNestedRootTree(props, ref) {
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
@@ -46,9 +43,9 @@ function useNestedRootTree(props, ref) {
         targetDocument
     ]);
     const handleOpenChange = (0, _reactutilities.useEventCallback)((event, data)=>{
-        var _props_onOpenChange, _props;
+        var _props_onOpenChange;
         const nextOpenItems = (0, _useControllableOpenItems.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()
         });
@@ -56,18 +53,18 @@ function useNestedRootTree(props, ref) {
     });
     const handleCheckedChange = (0, _reactutilities.useEventCallback)((event, data)=>{
         if (walkerRef.current) {
-            var _props_onCheckedChange, _props;
+            var _props_onCheckedChange;
             const nextCheckedItems = (0, _useNestedControllableCheckedItems.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 = (0, _reactutilities.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-commonjs/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\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 { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nexport const useTree_unstable = (props, ref)=>{\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 ? {\n        ...useSubtree(props, ref),\n        treeType: 'nested'\n    } : useNestedRootTree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const { navigate, initialize } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange, _props;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        if (walkerRef.current) {\n            var _props_onCheckedChange, _props;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = (_props = props).onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(_props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        }\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation, _props;\n        (_props_onNavigation = (_props = props).onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(_props, event, data);\n        if (walkerRef.current) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'nested',\n        ...useRootTree({\n            ...props,\n            openItems,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onNavigation: handleNavigation,\n            onCheckedChange: handleCheckedChange\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\n"],"names":["useTree_unstable","props","ref","isSubtree","useTreeContext_unstable","ctx","level","useSubtree","treeType","useNestedRootTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","React","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","_props","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","useRootTree","useMergedRefs"],"mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACyB;0CACc;mDACM;6BAC5B;6BACZ;4BACD;yCACa;gCACT;mCACG;qCACC;AAC5B,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,YAAYC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOH,YAAY;QACf,GAAGI,IAAAA,sBAAU,EAACN,OAAOC,IAAI;QACzBM,UAAU;IACd,IAAIC,kBAAkBR,OAAOC;AACjC;AACA,SAASO,kBAAkBR,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAM,EAAEc,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oCAAiB;IAClD,MAAMC,YAAYC,OAAMC,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBJ,OAAMK,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBH,UAAUQ,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFZ,WAAWE,UAAUQ,OAAO;QAChC;IACJ,GAAG;QACCV;QACAK;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC,qBAAqBC;QACzB,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACJ,MAAMtB;QAC/CuB,CAAAA,sBAAsB,AAACC,CAAAA,SAASjC,KAAI,EAAGoC,YAAY,AAAD,MAAO,QAAQJ,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBK,IAAI,CAACJ,QAAQH,OAAO;YAChJ,GAAGC,IAAI;YACPtB,WAAWyB,cAAcI,kCAAkC;QAC/D;QACA5B,aAAawB;IACjB;IACA,MAAMK,sBAAsBV,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACjD,IAAId,UAAUQ,OAAO,EAAE;YACnB,IAAIe,wBAAwBP;YAC5B,MAAMQ,mBAAmBC,IAAAA,+DAA4B,EAACX,MAAMnB;YAC3D4B,CAAAA,yBAAyB,AAACP,CAAAA,SAASjC,KAAI,EAAG2C,eAAe,AAAD,MAAO,QAAQH,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACJ,QAAQH,OAAO;gBAC5J,GAAGC,IAAI;gBACPnB,cAAc6B,iBAAiBG,kCAAkC;YACrE;QACJ;IACJ;IACA,MAAMC,mBAAmBhB,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIe,qBAAqBb;QACxBa,CAAAA,sBAAsB,AAACb,CAAAA,SAASjC,KAAI,EAAG+C,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAACJ,QAAQH,OAAOC;QACpJ,IAAId,UAAUQ,OAAO,EAAE;YACnBX,SAASiB,MAAMd,UAAUQ,OAAO;QACpC;IACJ;IACA,OAAO;QACHlB,UAAU;QACV,GAAGyC,IAAAA,wBAAW,EAAC;YACX,GAAGhD,KAAK;YACRS;YACAG;YACAwB,cAAcR;YACdmB,cAAcF;YACdF,iBAAiBJ;QACrB,GAAGU,IAAAA,6BAAa,EAAChD,KAAKqB,kBAAkB;IAC5C;AACJ"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\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 { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nexport const useTree_unstable = (props, ref)=>{\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};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const { navigate, initialize } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        if (walkerRef.current) {\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        }\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'nested',\n        ...useRootTree({\n            ...props,\n            openItems,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onNavigation: handleNavigation,\n            onCheckedChange: handleCheckedChange\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\n"],"names":["useTree_unstable","props","ref","level","useSubtreeContext_unstable","useSubtree","useNestedRootTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","React","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","isDefaultPrevented","treeType","useRootTree","useMergedRefs"],"mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACyB;0CACc;mDACM;gCACzB;6BACf;4BACD;yCACa;gCACT;mCACG;qCACC;AAC5B,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,0CAA0B;IAC5C,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOD,QAAQ,IAAIE,IAAAA,sBAAU,EAACJ,OAAOC,OAAOI,kBAAkBL,OAAOC;AACzE;AACA,SAASI,kBAAkBL,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACK,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACR;IAC3D,MAAMS,eAAeC,IAAAA,wDAAqB,EAACV;IAC3C,MAAM,EAAEW,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oCAAiB;IAClD,MAAMC,YAAYC,OAAMC,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBJ,OAAMK,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBH,UAAUQ,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFZ,WAAWE,UAAUQ,OAAO;QAChC;IACJ,GAAG;QACCV;QACAK;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMtB;QAC/CuB,CAAAA,sBAAsB7B,MAAMgC,YAAY,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBI,IAAI,CAACjC,OAAO2B,OAAO;YACpI,GAAGC,IAAI;YACPtB,WAAWwB,cAAcI,kCAAkC;QAC/D;QACA3B,aAAauB;IACjB;IACA,MAAMK,sBAAsBT,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACjD,IAAId,UAAUQ,OAAO,EAAE;YACnB,IAAIc;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACV,MAAMnB;YAC3D2B,CAAAA,yBAAyBpC,MAAMuC,eAAe,AAAD,MAAO,QAAQH,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACjC,OAAO2B,OAAO;gBAChJ,GAAGC,IAAI;gBACPnB,cAAc4B,iBAAiBG,kCAAkC;YACrE;QACJ;IACJ;IACA,MAAMC,mBAAmBf,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIc;QACHA,CAAAA,sBAAsB1C,MAAM2C,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAACjC,OAAO2B,OAAOC;QACxI,IAAId,UAAUQ,OAAO,IAAI,CAACK,MAAMiB,kBAAkB,IAAI;YAClDjC,SAASiB,MAAMd,UAAUQ,OAAO;QACpC;IACJ;IACA,OAAO;QACHuB,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG9C,KAAK;YACRM;YACAG;YACAuB,cAAcP;YACdkB,cAAcF;YACdF,iBAAiBJ;QACrB,GAAGY,IAAAA,6BAAa,EAAC9C,KAAKkB,kBAAkB;IAC5C;AACJ"}

package/lib-commonjs/components/Tree/useTreeContextValues.js

@@ -8,22 +8,37 @@ Object.defineProperty(exports, "useTreeContextValues_unstable", {
         return useTreeContextValues_unstable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 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-commonjs/components/Tree/useTreeContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.js"],"sourcesContent":["export function useTreeContextValues_unstable(state) {\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   */ const tree = {\n        treeType,\n        size,\n        level,\n        openItems,\n        appearance,\n        checkedItems,\n        selectionMode,\n        requestTreeResponse\n    };\n    return {\n        tree\n    };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","treeType","tree"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,8BAA8BC,KAAK;IAC/C,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAEC,QAAQ,EAAE,GAAGR;IAC3G;;;GAGD,GAAG,MAAMS,OAAO;QACXD;QACAF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACJ;IACA,OAAO;QACHE;IACJ;AACJ"}
+{"version":3,"sources":["useTreeContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTreeContextValues_unstable(state) {\n    if (state.contextType === 'root') {\n        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;\n        /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */ const tree = {\n            treeType,\n            size,\n            openItems,\n            appearance,\n            checkedItems,\n            selectionMode,\n            contextType,\n            level,\n            requestTreeResponse\n        };\n        return {\n            tree\n        };\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(()=>({\n                level: state.level,\n                contextType: 'subtree'\n            }), [\n            state.level\n        ])\n    };\n}\n"],"names":["useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,8BAA8BC,KAAK;IAC/C,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAC9B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEF,WAAW,EAAEG,QAAQ,EAAEC,YAAY,EAAEC,aAAa,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAE,GAAGT;QACxH;;;KAGH,GAAG,MAAMU,OAAO;YACTN;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;QACJ;QACA,OAAO;YACHC;QACJ;IACJ;IACA,OAAO;QACH,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMC,OAAMC,OAAO,CAAC,IAAK,CAAA;gBACjBT,OAAOH,MAAMG,KAAK;gBAClBF,aAAa;YACjB,CAAA,GAAI;YACJD,MAAMG,KAAK;SACd;IACL;AACJ"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -15,16 +15,20 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactportal = require("@fluentui/react-portal");
 const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _tokens = require("../../utils/tokens");
-const _index = require("../../contexts/index");
+const _contexts = require("../../contexts");
 const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
 function useTreeItem_unstable(props, ref) {
     var _props_value;
-    const treeType = (0, _index.useTreeContext_unstable)((ctx)=>ctx.treeType);
+    const treeType = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.treeType);
     if (treeType === 'flat') {
         warnIfNoProperPropsFlatTreeItem(props);
     }
-    const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
-    const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
+    const requestTreeResponse = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
+    const { level: contextLevel } = (0, _contexts.useSubtreeContext_unstable)();
+    const parentValue = (0, _contexts.useTreeItemContext_unstable)((ctx)=>{
+        var _props_parentValue;
+        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;
+    });
     // note, if the value is not externally provided,
     // then selection and expansion will not work properly
     const value = (0, _reactutilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
@@ -39,14 +43,17 @@ function useTreeItem_unstable(props, ref) {
     const layoutRef = _react.useRef(null);
     const subtreeRef = _react.useRef(null);
     const selectionRef = _react.useRef(null);
-    var _props_open;
-    const open = (0, _index.useTreeContext_unstable)((ctx)=>(_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value));
-    const selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
-    var _ctx_checkedItems_get;
-    const checked = (0, _index.useTreeContext_unstable)((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
+    const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _props_open;
+        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
+    });
+    const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
+    const checked = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _ctx_checkedItems_get;
+        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;
+    });
     const handleClick = (0, _reactutilities.useEventCallback)((event)=>{
-        var _onClick;
-        (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -64,7 +71,7 @@ function useTreeItem_unstable(props, ref) {
         }
         const isEventFromExpandIcon = expandIconRef.current && (0, _reactportal.elementContains)(expandIconRef.current, event.target);
         _reactdom.unstable_batchedUpdates(()=>{
-            var _props_onOpenChange, _props;
+            var _props_onOpenChange;
             const data = {
                 event,
                 value,
@@ -72,16 +79,23 @@ function useTreeItem_unstable(props, ref) {
                 target: event.currentTarget,
                 type: isEventFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
             };
-            (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
+            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
             requestTreeResponse({
                 ...data,
-                itemType
+                itemType,
+                requestType: 'open'
+            });
+            requestTreeResponse({
+                ...data,
+                itemType,
+                parentValue,
+                requestType: 'navigate',
+                type: _tokens.treeDataTypes.Click
             });
         });
     });
     const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
-        var _onKeyDown;
-        (_onKeyDown = onKeyDown) === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         // Ignore keyboard events that do not originate from the current tree item.
         if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
             return;
@@ -96,7 +110,7 @@ function useTreeItem_unstable(props, ref) {
                 return;
             case _tokens.treeDataTypes.Enter:
                 {
-                    var _props_onOpenChange, _props;
+                    var _props_onOpenChange;
                     const data = {
                         value,
                         event,
@@ -104,10 +118,11 @@ function useTreeItem_unstable(props, ref) {
                         type: event.key,
                         target: event.currentTarget
                     };
-                    (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
+                    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     return requestTreeResponse({
                         ...data,
-                        itemType
+                        itemType,
+                        requestType: 'open'
                     });
                 }
             case _tokens.treeDataTypes.End:
@@ -115,9 +130,11 @@ function useTreeItem_unstable(props, ref) {
             case _tokens.treeDataTypes.ArrowUp:
             case _tokens.treeDataTypes.ArrowDown:
                 return requestTreeResponse({
+                    requestType: 'navigate',
                     event,
                     value,
                     itemType,
+                    parentValue,
                     type: event.key,
                     target: event.currentTarget
                 });
@@ -135,12 +152,14 @@ function useTreeItem_unstable(props, ref) {
                         target: event.currentTarget
                     };
                     if (open) {
-                        var _props_onOpenChange1, _props1;
-                        (_props_onOpenChange1 = (_props1 = props).onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(_props1, event, data);
+                        var _props_onOpenChange1;
+                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
                     }
                     return requestTreeResponse({
                         ...data,
-                        itemType
+                        itemType,
+                        parentValue,
+                        requestType: open ? 'open' : 'navigate'
                     });
                 }
             case _tokens.treeDataTypes.ArrowRight:
@@ -156,22 +175,26 @@ function useTreeItem_unstable(props, ref) {
                     target: event.currentTarget
                 };
                 if (!open) {
-                    var _props_onOpenChange2, _props2;
-                    (_props_onOpenChange2 = (_props2 = props).onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(_props2, event, data);
+                    var _props_onOpenChange2;
+                    (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);
                 }
                 return requestTreeResponse({
                     ...data,
-                    itemType
+                    itemType,
+                    parentValue,
+                    requestType: open ? 'navigate' : 'open'
                 });
         }
         const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
         if (isTypeAheadCharacter) {
             requestTreeResponse({
+                requestType: 'navigate',
                 event,
                 target: event.currentTarget,
                 value,
                 itemType,
-                type: _tokens.treeDataTypes.TypeAhead
+                type: _tokens.treeDataTypes.TypeAhead,
+                parentValue
             });
         }
     });
@@ -200,6 +223,7 @@ function useTreeItem_unstable(props, ref) {
             return;
         }
         requestTreeResponse({
+            requestType: 'selection',
             event,
             value,
             itemType,
@@ -251,14 +275,16 @@ function useTreeItem_unstable(props, ref) {
 }
 function warnIfNoProperPropsFlatTreeItem(props) {
     if (process.env.NODE_ENV !== 'production') {
-        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined) {
+        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {
             // eslint-disable-next-line no-console
             console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:
-A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level" to ensure a11y and navigation.
+A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level"
+and "parentValue" (if "aria-level" > 1) to ensure a11y and navigation.
 
 - "aria-posinset": the position of this treeitem in the current level of the tree.
 - "aria-setsize": the number of siblings in this level of the tree.
-- "aria-level": the current level of the treeitem.`);
+- "aria-level": the current level of the treeitem.
+- "parentValue": the "value" property of the parent item of this item.`);
         }
     }
 }