@fluentui/react-tree 9.0.0-beta.28 → 9.0.0-beta.29

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';\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 flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useHeadlessFlatTree_unstable(flatTreeItemProps, options = {}) {\n    const flatTreeItems = React.useMemo(()=>createHeadlessTree(flatTreeItemProps), [\n        flatTreeItemProps\n    ]);\n    const [openItems, setOpenItems] = useControllableOpenItems(options);\n    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options);\n    const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n        setOpenItems(createNextOpenItems(data, openItems));\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, data);\n        setCheckedItems(createNextFlatCheckedItems(data, checkedItems, flatTreeItems));\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _options_onNavigation_unstable;\n        (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n        navigate(data);\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = flatTreeItems.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return flatTreeItems.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, navigationRef);\n    const getTreeProps = React.useCallback(()=>({\n            ref,\n            openItems,\n            selectionMode: options.selectionMode,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onCheckedChange: handleCheckedChange,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            onNavigation_unstable: handleNavigation\n        }), // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems,\n        checkedItems\n    ]);\n    const items = React.useCallback(()=>flatTreeItems.visibleItems(openItems), [\n        openItems,\n        flatTreeItems\n    ]);\n    return React.useMemo(()=>({\n            navigate,\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","flatTreeItemProps","options","flatTreeItems","React","useMemo","createHeadlessTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","setCheckedItems","useFlatControllableCheckedItems","navigate","navigationRef","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","createNextOpenItems","handleCheckedChange","_options_onCheckedChange","onCheckedChange","createNextFlatCheckedItems","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","_treeRef_current","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';\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);\n    const { initialize , navigate  } = useFlatTreeNavigation(headlessTree);\n    const walkerRef = React.useRef();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root) {\n            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize\n    ]);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n        setOpenItems(createNextOpenItems(data, openItems));\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _options_onCheckedChange;\n        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, data);\n        setCheckedItems(createNextFlatCheckedItems(data, checkedItems, headlessTree));\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _options_onNavigation_unstable;\n        (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.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            // eslint-disable-next-line @typescript-eslint/naming-convention\n            onNavigation_unstable: 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","walkerRef","useRef","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","treeRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","createNextOpenItems","handleCheckedChange","_options_onCheckedChange","onCheckedChange","createNextFlatCheckedItems","handleNavigation","_options_onNavigation_unstable","onNavigation_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","selectionMode","items"],"mappings":";;;;+BAqBoBA;;aAAAA;;;gCArB4B;6DACzB;oCACY;wBACL;uCACQ;0CACwB;6CACpB;iDACkC;yCACpC;gCACT;AAYpB,SAASA,6BAA6BC,KAAK,EAAEC,UAAU,CAAC,CAAC,EAAE;IAClE,MAAMC,eAAeC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,sCAAkB,EAACL,QAAQ;QAC9DA;KACH;IACD,MAAM,CAACM,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACP;IAC3D,MAAM,CAACQ,cAAcC,gBAAgB,GAAGC,IAAAA,gEAA+B,EAACV;IACxE,MAAM,EAAEW,WAAU,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACZ;IACzD,MAAMa,YAAYZ,OAAMa,MAAM;IAC9B,MAAMC,mBAAmBd,OAAMe,WAAW,CAAC,CAACC,OAAO;QAC/C,IAAIA,MAAM;YACNJ,UAAUK,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMG,8BAAc;YAChEV,WAAWG,UAAUK,OAAO;QAChC,CAAC;IACL,GAAG;QACCR;KACH;IACD,MAAMW,UAAUpB,OAAMa,MAAM,CAAC,IAAI;IACjC,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIC;QACHA,CAAAA,wBAAwB3B,QAAQ4B,YAAY,AAAD,MAAO,IAAI,IAAID,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBE,IAAI,CAAC7B,SAASyB,OAAOC,KAAK;QACvJpB,aAAawB,IAAAA,6CAAmB,EAACJ,MAAMrB;IAC3C;IACA,MAAM0B,sBAAsBP,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACxD,IAAIM;QACHA,CAAAA,2BAA2BhC,QAAQiC,eAAe,AAAD,MAAO,IAAI,IAAID,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBH,IAAI,CAAC7B,SAASyB,OAAOC,KAAK;QACnKjB,gBAAgByB,IAAAA,2DAA0B,EAACR,MAAMlB,cAAcP;IACnE;IACA,MAAMkC,mBAAmBX,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIU;QACHA,CAAAA,iCAAiCpC,QAAQqC,qBAAqB,AAAD,MAAO,IAAI,IAAID,mCAAmC,KAAK,IAAI,KAAK,IAAIA,+BAA+BP,IAAI,CAAC7B,SAASyB,OAAOC,KAAK;QAC3L,IAAIZ,UAAUK,OAAO,EAAE;YACnBP,SAASc,MAAMZ,UAAUK,OAAO;QACpC,CAAC;IACL;IACA,MAAMmB,uBAAuBd,IAAAA,gCAAgB,EAAC,CAACe,cAAcb,OAAO;QAChE,MAAMc,OAAOvC,aAAawC,GAAG,CAACf,KAAKgB,KAAK;QACxC,IAAIF,MAAM;YACN,OAAOd,KAAKiB,IAAI;gBACZ,KAAKC,qBAAa,CAACC,SAAS;oBACxB,OAAOL;gBACX,KAAKI,qBAAa,CAACE,SAAS;oBACxB,OAAO7C,aAAawC,GAAG,CAACD,KAAKO,WAAW;gBAC5C,KAAKH,qBAAa,CAACI,UAAU;oBACzB,OAAOT,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACvC,KAAKL,qBAAa,CAACM,GAAG;oBAClB,OAAOX,YAAY,CAACA,aAAaY,MAAM,GAAG,EAAE;gBAChD,KAAKP,qBAAa,CAACQ,IAAI;oBACnB,OAAOb,YAAY,CAAC,EAAE;gBAC1B,KAAKK,qBAAa,CAACS,SAAS;oBACxB,OAAOd,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACvC,KAAKL,qBAAa,CAACU,OAAO;oBACtB,OAAOf,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;YAC3C;QACJ,CAAC;IACL;IACA,MAAMM,qBAAqBrD,OAAMe,WAAW,CAAC,CAACuB,OAAO;QACjD,IAAIgB;QACJ,OAAO,AAACA,CAAAA,mBAAmBlC,QAAQH,OAAO,AAAD,MAAO,IAAI,IAAIqC,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBC,aAAa,CAAC,CAAC,CAAC,EAAEC,sDAAyB,CAAC,EAAE,EAAElB,KAAKE,KAAK,CAAC,EAAE,CAAC,CAAC;IACnL,GAAG,EAAE;IACL,MAAMiB,MAAMC,IAAAA,6BAAa,EAACtC,SAASN;IACnC,MAAM6C,eAAe3D,OAAMe,WAAW,CAAC,IAAK,CAAA;YACpC0C;YACAtD;YACAyD,eAAe9D,QAAQ8D,aAAa;YACpCtD;YACAoB,cAAcL;YACdU,iBAAiBF;YACjB,gEAAgE;YAChEM,uBAAuBF;QAC3B,CAAA,GACJ;QACI9B;QACAG;KACH;IACD,MAAMuD,QAAQ7D,OAAMe,WAAW,CAAC,IAAIhB,aAAasC,YAAY,CAAClC,YAAY;QACtEA;QACAJ;KACH;IACD,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBS,UAAU,CAACc,OAAO;gBACd,IAAIZ,UAAUK,OAAO,EAAE;oBACnBP,SAASc,MAAMZ,UAAUK,OAAO;gBACpC,CAAC;YACL;YACA0C;YACAvB;YACAiB;YACAQ;QACJ,CAAA,GAAI;QACJnD;QACAiD;QACAvB;QACAiB;QACAQ;KACH;AACL"}

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

@@ -15,10 +15,21 @@ const _useControllableCheckedItems = require("./useControllableCheckedItems");
 const _treeContext = require("../../contexts/treeContext");
 const _useRootTree = require("../../hooks/useRootTree");
 const _useSubtree = require("../../hooks/useSubtree");
+const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
+const _treeItemFilter = require("../../utils/treeItemFilter");
 const useTree_unstable = (props, ref)=>{
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
     const [checkedItems] = (0, _useControllableCheckedItems.useControllableCheckedItems)(props);
-    const [navigate, navigationRef] = (0, _useTreeNavigation.useTreeNavigation)();
+    const { navigate , initialize  } = (0, _useTreeNavigation.useTreeNavigation)();
+    const walkerRef = _react.useRef();
+    const initializeWalker = _react.useCallback((root)=>{
+        if (root) {
+            walkerRef.current = (0, _createHTMLElementWalker.createHTMLElementWalker)(root, _treeItemFilter.treeItemFilter);
+            initialize(walkerRef.current);
+        }
+    }, [
+        initialize
+    ]);
     const handleOpenChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
         var _props_onOpenChange;
         (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
@@ -32,7 +43,9 @@ const useTree_unstable = (props, ref)=>{
     const handleNavigation = (0, _reactUtilities.useEventCallback)((event, data)=>{
         var _props_onNavigation_unstable;
         (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, event, data);
-        navigate(data);
+        if (walkerRef.current) {
+            navigate(data, walkerRef.current);
+        }
     });
     const baseProps = {
         ...props,
@@ -43,7 +56,7 @@ const useTree_unstable = (props, ref)=>{
         onNavigation_unstable: handleNavigation,
         onCheckedChange: handleCheckedChange
     };
-    const baseRef = (0, _reactUtilities.useMergedRefs)(ref, navigationRef);
+    const baseRef = (0, _reactUtilities.useMergedRefs)(ref, initializeWalker);
     const isSubtree = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.level > 0);
     // as isSubTree is static, this doesn't break rule of hooks
     // and if this becomes an issue later on, this can be easily converted

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 { useTreeNavigation } from './useTreeNavigation';\nimport { useControllableCheckedItems } from './useControllableCheckedItems';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nexport const useTree_unstable = (props, ref)=>{\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const [checkedItems] = useControllableCheckedItems(props);\n    const [navigate, navigationRef] = useTreeNavigation();\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n        setOpenItems(createNextOpenItems(data, openItems));\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _props_onCheckedChange;\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, data);\n    // TODO: implement next checked items for  tree\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation_unstable;\n        (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, event, data);\n        navigate(data);\n    });\n    const baseProps = {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: handleOpenChange,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        onNavigation_unstable: handleNavigation,\n        onCheckedChange: handleCheckedChange\n    };\n    const baseRef = useMergedRefs(ref, navigationRef);\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(baseProps, baseRef) : useRootTree(baseProps, baseRef);\n};\n"],"names":["useTree_unstable","props","ref","openItems","setOpenItems","useControllableOpenItems","checkedItems","useControllableCheckedItems","navigate","navigationRef","useTreeNavigation","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","onOpenChange","call","createNextOpenItems","handleCheckedChange","_props_onCheckedChange","onCheckedChange","handleNavigation","_props_onNavigation_unstable","onNavigation_unstable","baseProps","baseRef","useMergedRefs","isSubtree","useTreeContext_unstable","ctx","level","useSubtree","useRootTree"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;gCACyB;0CACc;mCAC5B;6CACU;6BACJ;6BACZ;4BACD;AACpB,MAAMA,mBAAmB,CAACC,OAAOC,MAAM;IAC1C,MAAM,CAACC,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACJ;IAC3D,MAAM,CAACK,aAAa,GAAGC,IAAAA,wDAA2B,EAACN;IACnD,MAAM,CAACO,UAAUC,cAAc,GAAGC,IAAAA,oCAAiB;IACnD,MAAMC,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIC;QACHA,CAAAA,sBAAsBd,MAAMe,YAAY,AAAD,MAAO,IAAI,IAAID,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAChB,OAAOY,OAAOC,KAAK;QAC7IV,aAAac,IAAAA,6CAAmB,EAACJ,MAAMX;IAC3C;IACA,MAAMgB,sBAAsBP,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACxD,IAAIM;QACHA,CAAAA,yBAAyBnB,MAAMoB,eAAe,AAAD,MAAO,IAAI,IAAID,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAAChB,OAAOY,OAAOC,KAAK;IAC7J,+CAA+C;IAC/C;IACA,MAAMQ,mBAAmBV,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIS;QACHA,CAAAA,+BAA+BtB,MAAMuB,qBAAqB,AAAD,MAAO,IAAI,IAAID,iCAAiC,KAAK,IAAI,KAAK,IAAIA,6BAA6BN,IAAI,CAAChB,OAAOY,OAAOC,KAAK;QACjLN,SAASM;IACb;IACA,MAAMW,YAAY;QACd,GAAGxB,KAAK;QACRE;QACAG;QACAU,cAAcL;QACd,gEAAgE;QAChEa,uBAAuBF;QACvBD,iBAAiBF;IACrB;IACA,MAAMO,UAAUC,IAAAA,6BAAa,EAACzB,KAAKO;IACnC,MAAMmB,YAAYC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOH,YAAYI,IAAAA,sBAAU,EAACP,WAAWC,WAAWO,IAAAA,wBAAW,EAACR,WAAWC,QAAQ;AACvF"}
+{"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 { useTreeNavigation } from './useTreeNavigation';\nimport { useControllableCheckedItems } from './useControllableCheckedItems';\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';\nexport const useTree_unstable = (props, ref)=>{\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const [checkedItems] = useControllableCheckedItems(props);\n    const { navigate , initialize  } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root) {\n            walkerRef.current = createHTMLElementWalker(root, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n        setOpenItems(createNextOpenItems(data, openItems));\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        var _props_onCheckedChange;\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, data);\n    // TODO: implement next checked items for  tree\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation_unstable;\n        (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, event, data);\n        if (walkerRef.current) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    const baseProps = {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: handleOpenChange,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        onNavigation_unstable: handleNavigation,\n        onCheckedChange: handleCheckedChange\n    };\n    const baseRef = useMergedRefs(ref, initializeWalker);\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(baseProps, baseRef) : useRootTree(baseProps, baseRef);\n};\n"],"names":["useTree_unstable","props","ref","openItems","setOpenItems","useControllableOpenItems","checkedItems","useControllableCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","React","useRef","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","onOpenChange","call","createNextOpenItems","handleCheckedChange","_props_onCheckedChange","onCheckedChange","handleNavigation","_props_onNavigation_unstable","onNavigation_unstable","baseProps","baseRef","useMergedRefs","isSubtree","useTreeContext_unstable","ctx","level","useSubtree","useRootTree"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;gCACyB;0CACc;mCAC5B;6CACU;6BACJ;6BACZ;4BACD;yCACa;gCACT;AACxB,MAAMA,mBAAmB,CAACC,OAAOC,MAAM;IAC1C,MAAM,CAACC,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACJ;IAC3D,MAAM,CAACK,aAAa,GAAGC,IAAAA,wDAA2B,EAACN;IACnD,MAAM,EAAEO,SAAQ,EAAGC,WAAU,EAAG,GAAGC,IAAAA,oCAAiB;IACpD,MAAMC,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,mBAAmBF,OAAMG,WAAW,CAAC,CAACC,OAAO;QAC/C,IAAIA,MAAM;YACNL,UAAUM,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMG,8BAAc;YAChEV,WAAWE,UAAUM,OAAO;QAChC,CAAC;IACL,GAAG;QACCR;KACH;IACD,MAAMW,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIC;QACHA,CAAAA,sBAAsBvB,MAAMwB,YAAY,AAAD,MAAO,IAAI,IAAID,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAACzB,OAAOqB,OAAOC,KAAK;QAC7InB,aAAauB,IAAAA,6CAAmB,EAACJ,MAAMpB;IAC3C;IACA,MAAMyB,sBAAsBP,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACxD,IAAIM;QACHA,CAAAA,yBAAyB5B,MAAM6B,eAAe,AAAD,MAAO,IAAI,IAAID,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACzB,OAAOqB,OAAOC,KAAK;IAC7J,+CAA+C;IAC/C;IACA,MAAMQ,mBAAmBV,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIS;QACHA,CAAAA,+BAA+B/B,MAAMgC,qBAAqB,AAAD,MAAO,IAAI,IAAID,iCAAiC,KAAK,IAAI,KAAK,IAAIA,6BAA6BN,IAAI,CAACzB,OAAOqB,OAAOC,KAAK;QACjL,IAAIZ,UAAUM,OAAO,EAAE;YACnBT,SAASe,MAAMZ,UAAUM,OAAO;QACpC,CAAC;IACL;IACA,MAAMiB,YAAY;QACd,GAAGjC,KAAK;QACRE;QACAG;QACAmB,cAAcL;QACd,gEAAgE;QAChEa,uBAAuBF;QACvBD,iBAAiBF;IACrB;IACA,MAAMO,UAAUC,IAAAA,6BAAa,EAAClC,KAAKY;IACnC,MAAMuB,YAAYC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIC,KAAK,GAAG;IAC7D,2DAA2D;IAC3D,sEAAsE;IACtE,sDAAsD;IACtD,OAAOH,YAAYI,IAAAA,sBAAU,EAACP,WAAWC,WAAWO,IAAAA,wBAAW,EAACR,WAAWC,QAAQ;AACvF"}

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

@@ -6,20 +6,13 @@ Object.defineProperty(exports, "useTreeNavigation", {
     enumerable: true,
     get: ()=>useTreeNavigation
 });
-const _reactUtilities = require("@fluentui/react-utilities");
 const _nextTypeAheadElement = require("../../utils/nextTypeAheadElement");
 const _tokens = require("../../utils/tokens");
 const _treeItemFilter = require("../../utils/treeItemFilter");
 const _useRovingTabIndexes = require("../../hooks/useRovingTabIndexes");
-const _useHTMLElementWalker = require("../../hooks/useHTMLElementWalker");
 function useTreeNavigation() {
-    const [{ rove  }, rovingRootRef] = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
-    const [walkerRef, rootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
-    const getNextElement = (data)=>{
-        if (!walkerRef.current) {
-            return;
-        }
-        const treeItemWalker = walkerRef.current;
+    const { rove , initialize  } = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
+    const getNextElement = (data, treeItemWalker)=>{
         switch(data.type){
             case _tokens.treeDataTypes.Click:
                 return data.target;
@@ -46,16 +39,16 @@ function useTreeNavigation() {
                 return treeItemWalker.previousElement();
         }
     };
-    function navigate(data) {
-        const nextElement = getNextElement(data);
+    function navigate(data, walker) {
+        const nextElement = getNextElement(data, walker);
         if (nextElement) {
             rove(nextElement);
         }
     }
-    return [
+    return {
         navigate,
-        (0, _reactUtilities.useMergedRefs)(rootRef, rovingRootRef)
-    ];
+        initialize
+    };
 }
 function lastChildRecursive(walker) {
     let lastElement = null;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';\nexport function useTreeNavigation() {\n    const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n    const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n    const getNextElement = (data)=>{\n        if (!walkerRef.current) {\n            return;\n        }\n        const treeItemWalker = walkerRef.current;\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                treeItemWalker.currentElement = data.target;\n                return nextTypeAheadElement(treeItemWalker, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.parentElement();\n            case treeDataTypes.ArrowRight:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.End:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return lastChildRecursive(treeItemWalker);\n            case treeDataTypes.Home:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.ArrowDown:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.nextElement();\n            case treeDataTypes.ArrowUp:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.previousElement();\n        }\n    };\n    function navigate(data) {\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    }\n    return [\n        navigate,\n        useMergedRefs(rootRef, rovingRootRef)\n    ];\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","rovingRootRef","useRovingTabIndex","treeItemFilter","walkerRef","rootRef","useHTMLElementWalkerRef","getNextElement","data","current","treeItemWalker","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","useMergedRefs","walker","lastElement","lastChild"],"mappings":";;;;+BAMgBA;;aAAAA;;gCANc;sCACO;wBACP;gCACC;qCACG;sCACM;AACjC,SAASA,oBAAoB;IAChC,MAAM,CAAC,EAAEC,KAAI,EAAG,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACC,8BAAc;IACnE,MAAM,CAACC,WAAWC,QAAQ,GAAGC,IAAAA,6CAAuB,EAACH,8BAAc;IACnE,MAAMI,iBAAiB,CAACC,OAAO;QAC3B,IAAI,CAACJ,UAAUK,OAAO,EAAE;YACpB;QACJ,CAAC;QACD,MAAMC,iBAAiBN,UAAUK,OAAO;QACxC,OAAOD,KAAKG,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOL,KAAKM,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC9D,KAAKP,qBAAa,CAACQ,SAAS;gBACxBV,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeW,aAAa;YACvC,KAAKT,qBAAa,CAACU,UAAU;gBACzBZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACY,GAAG;gBAClBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOC,mBAAmBhB;YAC9B,KAAKE,qBAAa,CAACe,IAAI;gBACnBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACgB,SAAS;gBACxBlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACrC,KAAKjB,qBAAa,CAACkB,OAAO;gBACtBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QAC7C;IACJ;IACA,SAASC,SAASxB,IAAI,EAAE;QACpB,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACb7B,KAAK6B;QACT,CAAC;IACL;IACA,OAAO;QACHG;QACAC,IAAAA,6BAAa,EAAC5B,SAASJ;KAC1B;AACL;AACA,SAASyB,mBAAmBQ,MAAM,EAAE;IAChC,IAAIC,cAAc,IAAI;IACtB,IAAIN,cAAc,IAAI;IACtB,MAAMA,cAAcK,OAAOE,SAAS,GAAG;QACnCD,cAAcN;IAClB;IACA,OAAOM;AACX"}
+{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nexport function useTreeNavigation() {\n    const { rove , initialize  } = useRovingTabIndex(treeItemFilter);\n    const getNextElement = (data, treeItemWalker)=>{\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                treeItemWalker.currentElement = data.target;\n                return nextTypeAheadElement(treeItemWalker, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.parentElement();\n            case treeDataTypes.ArrowRight:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.End:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return lastChildRecursive(treeItemWalker);\n            case treeDataTypes.Home:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.ArrowDown:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.nextElement();\n            case treeDataTypes.ArrowUp:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.previousElement();\n        }\n    };\n    function navigate(data, walker) {\n        const nextElement = getNextElement(data, walker);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    }\n    return {\n        navigate,\n        initialize\n    };\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","useRovingTabIndex","treeItemFilter","getNextElement","data","treeItemWalker","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":";;;;+BAIgBA;;aAAAA;;sCAJqB;wBACP;gCACC;qCACG;AAC3B,SAASA,oBAAoB;IAChC,MAAM,EAAEC,KAAI,EAAGC,WAAU,EAAG,GAAGC,IAAAA,sCAAiB,EAACC,8BAAc;IAC/D,MAAMC,iBAAiB,CAACC,MAAMC,iBAAiB;QAC3C,OAAOD,KAAKE,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOJ,KAAKK,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBL,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBD,KAAKS,KAAK,CAACC,GAAG;YAC9D,KAAKP,qBAAa,CAACQ,SAAS;gBACxBV,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAeW,aAAa;YACvC,KAAKT,qBAAa,CAACU,UAAU;gBACzBZ,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACY,GAAG;gBAClBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOC,mBAAmBhB;YAC9B,KAAKE,qBAAa,CAACe,IAAI;gBACnBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YACpC,KAAKX,qBAAa,CAACgB,SAAS;gBACxBlB,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACrC,KAAKjB,qBAAa,CAACkB,OAAO;gBACtBpB,eAAeM,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QAC7C;IACJ;IACA,SAASC,SAASvB,IAAI,EAAEwB,MAAM,EAAE;QAC5B,MAAMJ,cAAcrB,eAAeC,MAAMwB;QACzC,IAAIJ,aAAa;YACbzB,KAAKyB;QACT,CAAC;IACL;IACA,OAAO;QACHG;QACA3B;IACJ;AACJ;AACA,SAASqB,mBAAmBO,MAAM,EAAE;IAChC,IAAIC,cAAc,IAAI;IACtB,IAAIL,cAAc,IAAI;IACtB,MAAMA,cAAcI,OAAOE,SAAS,GAAG;QACnCD,cAAcL;IAClB;IACA,OAAOK;AACX"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.js

@@ -23,31 +23,19 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         Belr9w4: "f1j0q4x9"
     },
     subtree: {
-        Bh6795r: "fqerorx",
-        Bnnss6s: "f1neuvcm",
-        xawz: "f1s4axba",
-        Ijaq50: "f1na4k6z",
-        Br312pm: "fwt6ga",
-        nk6f5a: "fi45nfw",
-        Bw0ie65: "f10ort2y"
+        z8tnut: "fclwglc"
     }
 }, {
     d: [
         ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
         ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
         ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}",
-        ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}",
-        ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}",
-        ".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}",
-        ".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}",
-        ".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}",
-        ".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}",
-        ".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}"
+        ".fclwglc{padding-top:var(--spacingVerticalXXS);}"
     ]
 });
 const useTreeStyles_unstable = (state)=>{
     const styles = useStyles();
-    const isSubTree = state.level > 0;
+    const isSubTree = state.level > 1;
     state.root.className = (0, _react.mergeClasses)(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
     return state;
 }; //# sourceMappingURL=useTreeStyles.styles.js.map

package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  },\n  subtree: {\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"f1s4axba\",\n    Ijaq50: \"f1na4k6z\",\n    Br312pm: \"fwt6ga\",\n    nk6f5a: \"fi45nfw\",\n    Bw0ie65: \"f10ort2y\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}\", \".f1s4axba{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;}\", \".f1na4k6z{-ms-grid-row:subtree;grid-row-start:subtree;}\", \".fwt6ga{-ms-grid-column:subtree;grid-column-start:subtree;}\", \".fi45nfw{-ms-grid-row-span:subtree;grid-row-end:subtree;}\", \".f10ort2y{-ms-grid-column-span:subtree;grid-column-end:subtree;}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const styles = useStyles();\n  const isSubTree = state.level > 0;\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","state","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc,MAAdA;IAqBAC,sBAAsB,MAAtBA;;uBAvBsC;AAE5C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,SAAS;QACPC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAiD;QAAqF;QAAuE;QAAoF;QAA2D;QAA+D;QAA6D;KAAmE;AACttB;AACO,MAAMf,yBAAyBgB,CAAAA,QAAS;IAC7C,MAAMC,SAASf;IACf,MAAMgB,YAAYF,MAAMG,KAAK,GAAG;IAChCH,MAAMf,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,eAAeE,IAAI,EAAEgB,OAAOhB,IAAI,EAAEiB,aAAaD,OAAOV,OAAO,EAAES,MAAMf,IAAI,CAACmB,SAAS;IACvH,OAAOJ;AACT,GACA,gDAAgD"}
+{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  },\n  subtree: {\n    z8tnut: \"fclwglc\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","state","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc,MAAdA;IAeAC,sBAAsB,MAAtBA;;uBAjB0B;AAEhC,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAiD;KAAmD;AAC/R;AACO,MAAMT,yBAAyBU,CAAAA,QAAS;IAC7C,MAAMC,SAAST;IACf,MAAMU,YAAYF,MAAMG,KAAK,GAAG;IAChCH,MAAMT,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,eAAeE,IAAI,EAAEU,OAAOV,IAAI,EAAEW,aAAaD,OAAOJ,OAAO,EAAEG,MAAMT,IAAI,CAACa,SAAS;IACvH,OAAOJ;AACT,GACA,gDAAgD"}

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

@@ -33,9 +33,14 @@ function useTreeItem_unstable(props, ref) {
     const subtreeRef = _react.useRef(null);
     const selectionRef = _react.useRef(null);
     const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
-    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 selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
+    const parentChecked = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.checked);
+    const checked = (0, _index.useTreeContext_unstable)((ctx)=>{
+        if (selectionMode === 'multiselect' && typeof parentChecked === 'boolean') {
+            return parentChecked;
+        }
+        return ctx.checkedItems.get(value);
+    });
     const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
@@ -131,13 +136,15 @@ function useTreeItem_unstable(props, ref) {
             value,
             itemType,
             type: 'Change',
-            target: event.currentTarget
+            target: event.currentTarget,
+            checked: checked === 'mixed' ? true : !checked
         });
     });
     const isBranch = itemType === 'branch';
     return {
         value,
         open,
+        checked,
         subtreeRef,
         layoutRef,
         selectionRef,
@@ -157,7 +164,7 @@ function useTreeItem_unstable(props, ref) {
             role: 'treeitem',
             'aria-level': level,
             [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
-            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
+            'aria-checked': selectionMode === 'multiselect' ? checked === 'mixed' ? undefined : checked !== null && checked !== void 0 ? checked : false : undefined,
             'aria-selected': selectionMode === 'single' ? checked : undefined,
             'aria-expanded': isBranch ? open : undefined,
             onClick: handleClick,

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n    var _props_value;\n    const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = (actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    };\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\n    var _ctx_checkedItems_get;\n    const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        requestTreeResponse({\n            event,\n            value,\n            itemType,\n            target: event.currentTarget,\n            type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.Enter:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.ArrowLeft:\n            case treeDataTypes.ArrowRight:\n                return requestTreeResponse({\n                    event,\n                    target: event.currentTarget,\n                    value,\n                    itemType,\n                    type: event.key\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead\n            });\n        }\n    });\n    const handleActionsVisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    });\n    const handleActionsInvisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    });\n    const handleChange = useEventCallback((event)=>{\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget\n        });\n    });\n    const isBranch = itemType === 'branch';\n    return {\n        value,\n        open,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        isAsideVisible,\n        isActionsVisible,\n        root: getNativeElementProps(as, {\n            tabIndex: -1,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            [dataTreeItemValueAttrName]: value,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            'aria-selected': selectionMode === 'single' ? checked : undefined,\n            'aria-expanded': isBranch ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleActionsVisible,\n            onFocus: handleActionsVisible,\n            onMouseOut: handleActionsInvisible,\n            onBlur: handleActionsInvisible,\n            onChange: handleChange\n        })\n    };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","contextLevel","useTreeContext_unstable","ctx","level","value","useId","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","_ctx_checkedItems_get","checked","checkedItems","get","selectionMode","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","isBranch","useMergedRefs","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n    var _props_value;\n    const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = (actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    };\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const parentChecked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const checked = useTreeContext_unstable((ctx)=>{\n        if (selectionMode === 'multiselect' && typeof parentChecked === 'boolean') {\n            return parentChecked;\n        }\n        return ctx.checkedItems.get(value);\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        requestTreeResponse({\n            event,\n            value,\n            itemType,\n            target: event.currentTarget,\n            type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case Space:\n                if (selectionMode !== 'none') {\n                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.Enter:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.ArrowLeft:\n            case treeDataTypes.ArrowRight:\n                return requestTreeResponse({\n                    event,\n                    target: event.currentTarget,\n                    value,\n                    itemType,\n                    type: event.key\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead\n            });\n        }\n    });\n    const handleActionsVisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    });\n    const handleActionsInvisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    });\n    const handleChange = useEventCallback((event)=>{\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget,\n            checked: checked === 'mixed' ? true : !checked\n        });\n    });\n    const isBranch = itemType === 'branch';\n    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        isAsideVisible,\n        isActionsVisible,\n        root: getNativeElementProps(as, {\n            tabIndex: -1,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            [dataTreeItemValueAttrName]: value,\n            'aria-checked': selectionMode === 'multiselect' ? checked === 'mixed' ? undefined : checked !== null && checked !== void 0 ? checked : false : undefined,\n            'aria-selected': selectionMode === 'single' ? checked : undefined,\n            'aria-expanded': isBranch ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleActionsVisible,\n            onFocus: handleActionsVisible,\n            onMouseOut: handleActionsInvisible,\n            onBlur: handleActionsInvisible,\n            onChange: handleChange\n        })\n    };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","contextLevel","useTreeContext_unstable","ctx","level","value","useId","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","parentChecked","useTreeItemContext_unstable","checked","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","isBranch","useMergedRefs","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange"],"mappings":"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"}

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

@@ -7,12 +7,13 @@ Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
     get: ()=>useTreeItemContextValues_unstable
 });
 function useTreeItemContextValues_unstable(state) {
-    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef  } = state;
+    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef , checked  } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
    */ const treeItem = {
         value,
+        checked,
         itemType,
         layoutRef,
         subtreeRef,

package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef  } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","treeItem"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,KAAI,EAAGC,cAAa,EAAGC,WAAU,EAAGC,iBAAgB,EAAGC,eAAc,EAAGC,aAAY,EAAG,GAAGV;IAC9I;;;GAGD,GAAG,MAAMW,WAAW;QACfV;QACAC;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACJ;IACA,OAAO;QACHK;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef , checked  } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        checked,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,KAAI,EAAGC,cAAa,EAAGC,WAAU,EAAGC,iBAAgB,EAAGC,eAAc,EAAGC,aAAY,EAAGC,QAAO,EAAG,GAAGX;IACxJ;;;GAGD,GAAG,MAAMY,WAAW;QACfX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACJ;IACA,OAAO;QACHM;IACJ;AACJ"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -32,9 +32,8 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const selectionRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.selectionRef);
     const expandIconRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
     const actionsRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef);
-    const value = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.value);
-    var _ctx_checkedItems_get;
-    const checked = (0, _contexts.useTreeContext_unstable)((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
+    var _ctx_checked;
+    const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>(_ctx_checked = ctx.checked) !== null && _ctx_checked !== void 0 ? _ctx_checked : false);
     const isBranch = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
     const expandIcon = (0, _reactUtilities.resolveShorthand)(props.expandIcon, {
         required: isBranch,

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { content , iconAfter , iconBefore , as ='span'  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);\n    const value = useTreeItemContext_unstable((ctx)=>ctx.value);\n    var _ctx_checkedItems_get;\n    const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const expandIcon = resolveShorthand(props.expandIcon, {\n        required: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        }\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);\n    if (actions) {\n        actions.ref = actionsRefs;\n    }\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            content: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div',\n            // Casting here to a union between checkbox and radio\n            selector: selectionMode === 'multiselect' ? Checkbox : Radio\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: getNativeElementProps(as, {\n            ...props,\n            ref: useMergedRefs(ref, layoutRef)\n        }),\n        iconBefore: resolveShorthand(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        content: resolveShorthand(content, {\n            required: true\n        }),\n        iconAfter: resolveShorthand(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n        actions,\n        expandIcon,\n        selector: resolveShorthand(props.selector, {\n            required: selectionMode !== 'none',\n            defaultProps: {\n                checked,\n                tabIndex: -1,\n                'aria-hidden': true,\n                ref: selectionRef\n            }\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","value","_ctx_checkedItems_get","checked","checkedItems","get","isBranch","itemType","expandIcon","resolveShorthand","required","defaultProps","children","React","createElement","TreeItemChevron","expandIconRefs","useMergedRefs","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","getNativeElementProps","tabIndex"],"mappings":";;;;+BAciBA;;aAAAA;;;6DAdM;gCACqE;0BACvB;+BAC5C;4BACH;iCACU;AASrB,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,QAAO,EAAGC,UAAS,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAG,GAAGL;IAC3D,MAAMM,YAAYC,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBC,IAAAA,iCAAuB,EAAC,CAACF,MAAMA,IAAIC,aAAa;IACtE,MAAM,CAACE,0BAA0BC,iBAAiB,GAAGC,IAAAA,mCAAmB,EAACb,MAAMc,OAAO,IAAI;QACtFd,MAAMc,OAAO,CAACC,OAAO;QACrB;YACI,GAAGf,MAAMc,OAAO;YAChBC,SAASC;QACb;KACH,GAAG;QACAA;QACAhB,MAAMc,OAAO;KAChB;IACD,MAAMG,mBAAmBV,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIS,gBAAgB,KAAKN;IACrF,MAAMO,iBAAiBX,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIU,cAAc;IAC5E,MAAMC,eAAeZ,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIW,YAAY;IACxE,MAAMC,gBAAgBb,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIY,aAAa;IAC1E,MAAMC,aAAad,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIa,UAAU;IACpE,MAAMC,QAAQf,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIc,KAAK;IAC1D,IAAIC;IACJ,MAAMC,UAAUd,IAAAA,iCAAuB,EAAC,CAACF,MAAM,AAACe,CAAAA,wBAAwBf,IAAIiB,YAAY,CAACC,GAAG,CAACJ,MAAK,MAAO,IAAI,IAAIC,0BAA0B,KAAK,IAAIA,wBAAwB,KAAK;IACjL,MAAMI,WAAWpB,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIoB,QAAQ,KAAK;IACrE,MAAMC,aAAaC,IAAAA,gCAAgB,EAAC9B,MAAM6B,UAAU,EAAE;QAClDE,UAAUJ;QACVK,cAAc;YACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;YACjE,eAAe,IAAI;QACvB;IACJ;IACA,MAAMC,iBAAiBC,IAAAA,6BAAa,EAACT,eAAe,IAAI,IAAIA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAW5B,GAAG,EAAEmB;IAC7G,IAAIS,YAAY;QACZA,WAAW5B,GAAG,GAAGoC;IACrB,CAAC;IACD,MAAMvB,UAAUG,mBAAmBa,IAAAA,gCAAgB,EAAClB,oBAAoBI,SAAS;IACjF,MAAMuB,cAAcD,IAAAA,6BAAa,EAACxB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQb,GAAG,EAAEoB;IACjG,IAAIP,SAAS;QACTA,QAAQb,GAAG,GAAGsC;IAClB,CAAC;IACD,OAAO;QACHC,YAAY;YACRC,MAAM;YACNZ,YAAY;YACZzB,YAAY;YACZF,SAAS;YACTC,WAAW;YACXW,SAAS;YACT4B,OAAO;YACP,qDAAqD;YACrDC,UAAUlC,kBAAkB,gBAAgBmC,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,oBAAoB;YAChBC,MAAM;QACV;QACAN,MAAMO,IAAAA,qCAAqB,EAAC3C,IAAI;YAC5B,GAAGL,KAAK;YACRC,KAAKqC,IAAAA,6BAAa,EAACrC,KAAKK;QAC5B;QACAF,YAAY0B,IAAAA,gCAAgB,EAAC1B,YAAY;YACrC4B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACA9B,SAAS4B,IAAAA,gCAAgB,EAAC5B,SAAS;YAC/B6B,UAAU,IAAI;QAClB;QACA5B,WAAW2B,IAAAA,gCAAgB,EAAC3B,WAAW;YACnC6B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAU,OAAOxB,iBAAiBY,IAAAA,gCAAgB,EAAC9B,MAAM0C,KAAK,IAAI1B,SAAS;QACjEF;QACAe;QACAc,UAAUb,IAAAA,gCAAgB,EAAC9B,MAAM2C,QAAQ,EAAE;YACvCZ,UAAUtB,kBAAkB;YAC5BuB,cAAc;gBACVR;gBACAyB,UAAU,CAAC;gBACX,eAAe,IAAI;gBACnBhD,KAAKkB;YACT;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { content , iconAfter , iconBefore , as ='span'  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);\n    var _ctx_checked;\n    const checked = useTreeItemContext_unstable((ctx)=>(_ctx_checked = ctx.checked) !== null && _ctx_checked !== void 0 ? _ctx_checked : false);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const expandIcon = resolveShorthand(props.expandIcon, {\n        required: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        }\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);\n    if (actions) {\n        actions.ref = actionsRefs;\n    }\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            content: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div',\n            // Casting here to a union between checkbox and radio\n            selector: selectionMode === 'multiselect' ? Checkbox : Radio\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: getNativeElementProps(as, {\n            ...props,\n            ref: useMergedRefs(ref, layoutRef)\n        }),\n        iconBefore: resolveShorthand(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        content: resolveShorthand(content, {\n            required: true\n        }),\n        iconAfter: resolveShorthand(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n        actions,\n        expandIcon,\n        selector: resolveShorthand(props.selector, {\n            required: selectionMode !== 'none',\n            defaultProps: {\n                checked,\n                tabIndex: -1,\n                'aria-hidden': true,\n                ref: selectionRef\n            }\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","_ctx_checked","checked","isBranch","itemType","expandIcon","resolveShorthand","required","defaultProps","children","React","createElement","TreeItemChevron","expandIconRefs","useMergedRefs","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","getNativeElementProps","tabIndex"],"mappings":"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"}

package/lib-commonjs/contexts/treeItemContext.js

@@ -16,8 +16,9 @@ _export(exports, {
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactContextSelector = require("@fluentui/react-context-selector");
+const _createHeadlessTree = require("../utils/createHeadlessTree");
 const defaultContextValue = {
-    value: '',
+    value: _createHeadlessTree.headlessTreeRootId,
     selectionRef: /*#__PURE__*/ _react.createRef(),
     layoutRef: /*#__PURE__*/ _react.createRef(),
     subtreeRef: /*#__PURE__*/ _react.createRef(),
@@ -26,7 +27,8 @@ const defaultContextValue = {
     isActionsVisible: false,
     isAsideVisible: false,
     itemType: 'leaf',
-    open: false
+    open: false,
+    checked: undefined
 };
 const TreeItemContext = (0, _reactContextSelector.createContext)(undefined);
 const { Provider: TreeItemProvider  } = TreeItemContext;

package/lib-commonjs/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst defaultContextValue = {\n    value: '',\n    selectionRef: React.createRef(),\n    layoutRef: React.createRef(),\n    subtreeRef: React.createRef(),\n    actionsRef: React.createRef(),\n    expandIconRef: React.createRef(),\n    isActionsVisible: false,\n    isAsideVisible: false,\n    itemType: 'leaf',\n    open: false\n};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider  } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","selectionRef","React","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAcaA,eAAe,MAAfA;IACYC,gBAAgB,MAAhBA;IACZC,2BAA2B,MAA3BA;;;6DAhBU;sCAC2B;AAClD,MAAMC,sBAAsB;IACxBC,OAAO;IACPC,4BAAcC,OAAMC,SAAS;IAC7BC,yBAAWF,OAAMC,SAAS;IAC1BE,0BAAYH,OAAMC,SAAS;IAC3BG,0BAAYJ,OAAMC,SAAS;IAC3BI,6BAAeL,OAAMC,SAAS;IAC9BK,kBAAkB,KAAK;IACvBC,gBAAgB,KAAK;IACrBC,UAAU;IACVC,MAAM,KAAK;AACf;AACO,MAAMf,kBAAkBgB,IAAAA,mCAAa,EAACC;AACtC,MAAM,EAAEC,UAAUjB,iBAAgB,EAAG,GAAGD;AACxC,MAAME,8BAA8B,CAACiB,WAAWC,IAAAA,wCAAkB,EAACpB,iBAAiB,CAACqB,MAAMlB,mBAAmB,GAAGgB,SAASE"}
+{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nconst defaultContextValue = {\n    value: headlessTreeRootId,\n    selectionRef: React.createRef(),\n    layoutRef: React.createRef(),\n    subtreeRef: React.createRef(),\n    actionsRef: React.createRef(),\n    expandIconRef: React.createRef(),\n    isActionsVisible: false,\n    isAsideVisible: false,\n    itemType: 'leaf',\n    open: false,\n    checked: undefined\n};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider  } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","headlessTreeRootId","selectionRef","React","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","undefined","createContext","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAgBaA,eAAe,MAAfA;IACYC,gBAAgB,MAAhBA;IACZC,2BAA2B,MAA3BA;;;6DAlBU;sCAC2B;oCACf;AACnC,MAAMC,sBAAsB;IACxBC,OAAOC,sCAAkB;IACzBC,4BAAcC,OAAMC,SAAS;IAC7BC,yBAAWF,OAAMC,SAAS;IAC1BE,0BAAYH,OAAMC,SAAS;IAC3BG,0BAAYJ,OAAMC,SAAS;IAC3BI,6BAAeL,OAAMC,SAAS;IAC9BK,kBAAkB,KAAK;IACvBC,gBAAgB,KAAK;IACrBC,UAAU;IACVC,MAAM,KAAK;IACXC,SAASC;AACb;AACO,MAAMlB,kBAAkBmB,IAAAA,mCAAa,EAACD;AACtC,MAAM,EAAEE,UAAUnB,iBAAgB,EAAG,GAAGD;AACxC,MAAME,8BAA8B,CAACmB,WAAWC,IAAAA,wCAAkB,EAACtB,iBAAiB,CAACuB,MAAMpB,mBAAmB,GAAGkB,SAASE"}

package/lib-commonjs/hooks/useRootTree.js

@@ -45,7 +45,8 @@ function useRootTree(props, ref) {
                     return _reactDom.unstable_batchedUpdates(()=>{
                         requestOpenChange({
                             ...request,
-                            open: request.itemType === 'branch' && !openItems.has(request.value)
+                            open: request.itemType === 'branch' && !openItems.has(request.value),
+                            openItems: openItems.dangerouslyGetInternalSet_unstable()
                         });
                         requestNavigation({
                             ...request,
@@ -62,7 +63,8 @@ function useRootTree(props, ref) {
                     if (!open) {
                         return requestOpenChange({
                             ...request,
-                            open: true
+                            open: true,
+                            openItems: openItems.dangerouslyGetInternalSet_unstable()
                         });
                     }
                     return requestNavigation(request);
@@ -72,7 +74,8 @@ function useRootTree(props, ref) {
                     const open = openItems.has(request.value);
                     return requestOpenChange({
                         ...request,
-                        open: request.itemType === 'branch' && !open
+                        open: request.itemType === 'branch' && !open,
+                        openItems: openItems.dangerouslyGetInternalSet_unstable()
                     });
                 }
             case _tokens.treeDataTypes.ArrowLeft:
@@ -82,7 +85,8 @@ function useRootTree(props, ref) {
                         return requestOpenChange({
                             ...request,
                             open: false,
-                            type: _tokens.treeDataTypes.ArrowLeft
+                            type: _tokens.treeDataTypes.ArrowLeft,
+                            openItems: openItems.dangerouslyGetInternalSet_unstable()
                         });
                     }
                     return requestNavigation({
@@ -101,11 +105,10 @@ function useRootTree(props, ref) {
                 });
             case _tokens.treeDataTypes.Change:
                 {
-                    const previousCheckedValue = checkedItems.get(request.value);
                     return requestCheckedChange({
                         ...request,
                         selectionMode: selectionMode,
-                        checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue
+                        checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
                     });
                 }
         }
@@ -124,7 +127,7 @@ function useRootTree(props, ref) {
         requestTreeResponse,
         root: (0, _reactUtilities.getNativeElementProps)('div', {
             ref,
-            role: 'baseTree',
+            role: 'tree',
             'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props
         })
@@ -134,7 +137,7 @@ function warnIfNoProperPropsRootTree(props) {
     if (process.env.NODE_ENV === 'development') {
         if (!props['aria-label'] && !props['aria-labelledby']) {
             // eslint-disable-next-line no-console
-            console.warn('BaseTree must have either a `aria-label` or `aria-labelledby` property defined');
+            console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
         }
     }
 }