@fluentui/react-tree 9.0.0-beta.23 → 9.0.0-beta.25

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

@@ -15,15 +15,19 @@ const _tokens = require("../../utils/tokens");
 function useRootTree(props, ref) {
     warnIfNoProperPropsRootTree(props);
     const { appearance ='subtle' , size ='medium'  } = props;
-    const [openItems, updateOpenItems] = (0, _hooks.useOpenItemsState)(props);
+    const [openItems, setOpenItems] = (0, _hooks.useControllableOpenItems)(props);
     const [navigate, navigationRef] = (0, _hooks.useNestedTreeNavigation)();
     const requestOpenChange = (data)=>{
         var _props_onOpenChange;
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);
+        const nextOpenItems = (0, _hooks.createNextOpenItems)(data, openItems);
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {
+            ...data,
+            openItems: nextOpenItems
+        });
         if (data.event.isDefaultPrevented()) {
             return;
         }
-        return updateOpenItems(data);
+        return setOpenItems(nextOpenItems);
     };
     const requestNavigation = (data)=>{
         var _props_onNavigation_unstable;
@@ -36,91 +40,69 @@ function useRootTree(props, ref) {
             data.event.preventDefault();
         }
     };
-    const handleTreeItemClick = ({ event , value , itemType , type  })=>{
-        _reactDom.unstable_batchedUpdates(()=>{
-            requestOpenChange({
-                event,
-                value,
-                open: itemType === 'branch' && !openItems.has(value),
-                type,
-                target: event.currentTarget
-            });
-            requestNavigation({
-                event,
-                value,
-                target: event.currentTarget,
-                type: _tokens.treeDataTypes.Click
-            });
-        });
-    };
-    const handleTreeItemKeyDown = ({ event , type , value , itemType  })=>{
-        const open = openItems.has(value);
-        switch(type){
+    const requestTreeResponse = (0, _reactUtilities.useEventCallback)((request)=>{
+        switch(request.type){
+            case _tokens.treeDataTypes.Click:
+            case _tokens.treeDataTypes.ExpandIconClick:
+                {
+                    return _reactDom.unstable_batchedUpdates(()=>{
+                        requestOpenChange({
+                            ...request,
+                            open: request.itemType === 'branch' && !openItems.has(request.value)
+                        });
+                        requestNavigation({
+                            ...request,
+                            type: _tokens.treeDataTypes.Click
+                        });
+                    });
+                }
             case _tokens.treeDataTypes.ArrowRight:
-                if (itemType === 'leaf') {
-                    return;
+                {
+                    if (request.itemType === 'leaf') {
+                        return;
+                    }
+                    const open = openItems.has(request.value);
+                    if (!open) {
+                        return requestOpenChange({
+                            ...request,
+                            open: true
+                        });
+                    }
+                    return requestNavigation(request);
                 }
-                if (!open) {
+            case _tokens.treeDataTypes.Enter:
+                {
+                    const open = openItems.has(request.value);
                     return requestOpenChange({
-                        event,
-                        value,
-                        open: true,
-                        type: _tokens.treeDataTypes.ArrowRight,
-                        target: event.currentTarget
+                        ...request,
+                        open: request.itemType === 'branch' && !open
                     });
                 }
-                return requestNavigation({
-                    event,
-                    value,
-                    type,
-                    target: event.currentTarget
-                });
-            case _tokens.treeDataTypes.Enter:
-                return requestOpenChange({
-                    event,
-                    value,
-                    open: itemType === 'branch' && !open,
-                    type: _tokens.treeDataTypes.Enter,
-                    target: event.currentTarget
-                });
             case _tokens.treeDataTypes.ArrowLeft:
-                if (open && itemType === 'branch') {
-                    return requestOpenChange({
-                        event,
-                        value,
-                        open: false,
-                        type: _tokens.treeDataTypes.ArrowLeft,
-                        target: event.currentTarget
+                {
+                    const open = openItems.has(request.value);
+                    if (open && request.itemType === 'branch') {
+                        return requestOpenChange({
+                            ...request,
+                            open: false,
+                            type: _tokens.treeDataTypes.ArrowLeft
+                        });
+                    }
+                    return requestNavigation({
+                        ...request,
+                        type: _tokens.treeDataTypes.ArrowLeft
                     });
                 }
-                return requestNavigation({
-                    event,
-                    value,
-                    target: event.currentTarget,
-                    type: _tokens.treeDataTypes.ArrowLeft
-                });
             case _tokens.treeDataTypes.End:
             case _tokens.treeDataTypes.Home:
             case _tokens.treeDataTypes.ArrowUp:
             case _tokens.treeDataTypes.ArrowDown:
             case _tokens.treeDataTypes.TypeAhead:
                 return requestNavigation({
-                    event,
-                    value,
-                    type,
-                    target: event.currentTarget
+                    ...request,
+                    target: request.event.currentTarget
                 });
         }
-    };
-    const requestTreeResponse = (0, _reactUtilities.useEventCallback)((request)=>{
-        switch(request.event.type){
-            case 'click':
-                // casting is required here as we're narrowing down the event to only click events
-                return handleTreeItemClick(request);
-            case 'keydown':
-                // casting is required here as we're narrowing down the event to only keyboard events
-                return handleTreeItemKeyDown(request);
-        }
     });
     return {
         components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance ='subtle' , size ='medium'  } = props;\n    const [openItems, updateOpenItems] = useOpenItemsState(props);\n    const [navigate, navigationRef] = useNestedTreeNavigation();\n    const requestOpenChange = (data)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);\n        if (data.event.isDefaultPrevented()) {\n            return;\n        }\n        return updateOpenItems(data);\n    };\n    const requestNavigation = (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, data.event, data);\n        if (data.event.isDefaultPrevented()) {\n            return;\n        }\n        navigate(data);\n        if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n            data.event.preventDefault();\n        }\n    };\n    const handleTreeItemClick = ({ event , value , itemType , type  })=>{\n        ReactDOM.unstable_batchedUpdates(()=>{\n            requestOpenChange({\n                event,\n                value,\n                open: itemType === 'branch' && !openItems.has(value),\n                type,\n                target: event.currentTarget\n            });\n            requestNavigation({\n                event,\n                value,\n                target: event.currentTarget,\n                type: treeDataTypes.Click\n            });\n        });\n    };\n    const handleTreeItemKeyDown = ({ event , type , value , itemType  })=>{\n        const open = openItems.has(value);\n        switch(type){\n            case treeDataTypes.ArrowRight:\n                if (itemType === 'leaf') {\n                    return;\n                }\n                if (!open) {\n                    return requestOpenChange({\n                        event,\n                        value,\n                        open: true,\n                        type: treeDataTypes.ArrowRight,\n                        target: event.currentTarget\n                    });\n                }\n                return requestNavigation({\n                    event,\n                    value,\n                    type,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.Enter:\n                return requestOpenChange({\n                    event,\n                    value,\n                    open: itemType === 'branch' && !open,\n                    type: treeDataTypes.Enter,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                if (open && itemType === 'branch') {\n                    return requestOpenChange({\n                        event,\n                        value,\n                        open: false,\n                        type: treeDataTypes.ArrowLeft,\n                        target: event.currentTarget\n                    });\n                }\n                return requestNavigation({\n                    event,\n                    value,\n                    target: event.currentTarget,\n                    type: treeDataTypes.ArrowLeft\n                });\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.TypeAhead:\n                return requestNavigation({\n                    event,\n                    value,\n                    type,\n                    target: event.currentTarget\n                });\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.event.type){\n            case 'click':\n                // casting is required here as we're narrowing down the event to only click events\n                return handleTreeItemClick(request);\n            case 'keydown':\n                // casting is required here as we're narrowing down the event to only keyboard events\n                return handleTreeItemKeyDown(request);\n        }\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        open: true,\n        appearance,\n        size,\n        level: 1,\n        openItems,\n        requestTreeResponse,\n        root: getNativeElementProps('div', {\n            ref: useMergedRefs(navigationRef, ref),\n            role: 'tree',\n            ...props\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\n    if (process.env.NODE_ENV === 'development') {\n        if (!props['aria-label'] && !props['aria-labelledby']) {\n            // eslint-disable-next-line no-console\n            console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","updateOpenItems","useOpenItemsState","navigate","navigationRef","useNestedTreeNavigation","requestOpenChange","data","_props_onOpenChange","onOpenChange","call","event","isDefaultPrevented","requestNavigation","_props_onNavigation_unstable","onNavigation_unstable","type","treeDataTypes","ArrowDown","ArrowUp","preventDefault","handleTreeItemClick","value","itemType","ReactDOM","unstable_batchedUpdates","open","has","target","currentTarget","Click","handleTreeItemKeyDown","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","requestTreeResponse","useEventCallback","request","components","root","level","getNativeElementProps","useMergedRefs","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems, useNestedTreeNavigation } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance ='subtle' , size ='medium'  } = props;\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const [navigate, navigationRef] = useNestedTreeNavigation();\n    const requestOpenChange = (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, data.event, {\n            ...data,\n            openItems: nextOpenItems\n        });\n        if (data.event.isDefaultPrevented()) {\n            return;\n        }\n        return setOpenItems(nextOpenItems);\n    };\n    const requestNavigation = (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, data.event, data);\n        if (data.event.isDefaultPrevented()) {\n            return;\n        }\n        navigate(data);\n        if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n            data.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.type){\n            case treeDataTypes.Click:\n            case treeDataTypes.ExpandIconClick:\n                {\n                    return ReactDOM.unstable_batchedUpdates(()=>{\n                        requestOpenChange({\n                            ...request,\n                            open: request.itemType === 'branch' && !openItems.has(request.value)\n                        });\n                        requestNavigation({\n                            ...request,\n                            type: treeDataTypes.Click\n                        });\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                {\n                    if (request.itemType === 'leaf') {\n                        return;\n                    }\n                    const open = openItems.has(request.value);\n                    if (!open) {\n                        return requestOpenChange({\n                            ...request,\n                            open: true\n                        });\n                    }\n                    return requestNavigation(request);\n                }\n            case treeDataTypes.Enter:\n                {\n                    const open = openItems.has(request.value);\n                    return requestOpenChange({\n                        ...request,\n                        open: request.itemType === 'branch' && !open\n                    });\n                }\n            case treeDataTypes.ArrowLeft:\n                {\n                    const open = openItems.has(request.value);\n                    if (open && request.itemType === 'branch') {\n                        return requestOpenChange({\n                            ...request,\n                            open: false,\n                            type: treeDataTypes.ArrowLeft\n                        });\n                    }\n                    return requestNavigation({\n                        ...request,\n                        type: treeDataTypes.ArrowLeft\n                    });\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.TypeAhead:\n                return requestNavigation({\n                    ...request,\n                    target: request.event.currentTarget\n                });\n        }\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        open: true,\n        appearance,\n        size,\n        level: 1,\n        openItems,\n        requestTreeResponse,\n        root: getNativeElementProps('div', {\n            ref: useMergedRefs(navigationRef, ref),\n            role: 'tree',\n            ...props\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\n    if (process.env.NODE_ENV === 'development') {\n        if (!props['aria-label'] && !props['aria-labelledby']) {\n            // eslint-disable-next-line no-console\n            console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","setOpenItems","useControllableOpenItems","navigate","navigationRef","useNestedTreeNavigation","requestOpenChange","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","event","isDefaultPrevented","requestNavigation","_props_onNavigation_unstable","onNavigation_unstable","type","treeDataTypes","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","useEventCallback","request","Click","ExpandIconClick","ReactDOM","unstable_batchedUpdates","open","itemType","has","value","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","components","root","level","getNativeElementProps","useMergedRefs","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}

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

@@ -13,5 +13,7 @@ const renderTreeItem_unstable = (state, contextValues)=>{
     const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
     return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeItemProvider, {
         value: contextValues.treeItem
-    }, slotProps.root.children));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeItemSlotsProvider, {
+        value: contextValues.treeItemSlots
+    }, slotProps.root.children)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItem.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\n/**\n * Render the final JSX of TreeItem\n */ export const renderTreeItem_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TreeItemProvider, {\n        value: contextValues.treeItem\n    }, slotProps.root.children));\n};\n"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","TreeItemProvider","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;0BACI;AAGtB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,0BAAgB,EAAE;QACzGC,OAAOP,cAAcQ,QAAQ;IACjC,GAAGN,UAAUG,IAAI,CAACI,QAAQ;AAC9B"}
+{"version":3,"sources":["renderTreeItem.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeItemProvider, TreeItemSlotsProvider } from '../../contexts';\n/**\n * Render the final JSX of TreeItem\n */ export const renderTreeItem_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TreeItemProvider, {\n        value: contextValues.treeItem\n    }, /*#__PURE__*/ createElement(TreeItemSlotsProvider, {\n        value: contextValues.treeItemSlots\n    }, slotProps.root.children)));\n};\n"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","TreeItemProvider","value","treeItem","TreeItemSlotsProvider","treeItemSlots","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;0BAC2B;AAG7C,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,0BAAgB,EAAE;QACzGC,OAAOP,cAAcQ,QAAQ;IACjC,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACK,+BAAqB,EAAE;QAClDF,OAAOP,cAAcU,aAAa;IACtC,GAAGR,UAAUG,IAAI,CAACM,QAAQ;AAC9B"}

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

@@ -13,22 +13,39 @@ const _reactPortal = require("@fluentui/react-portal");
 const _index = require("../../contexts/index");
 const _tokens = require("../../utils/tokens");
 const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
+const _treeItemChevron = require("../TreeItemChevron");
 function useTreeItem_unstable(props, ref) {
     var _props_value;
     const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
     const value = (0, _reactUtilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
-    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , expandIcon , aside , ...rest } = props;
     const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
-    const [isActionsVisible, setActionsVisible] = _react.useState(false);
+    const [isActionsVisibleExternal, actions] = (0, _reactUtilities.isResolvedShorthand)(props.actions) ? [
+        props.actions.visible,
+        {
+            ...props.actions,
+            visible: undefined
+        }
+    ] : [
+        undefined,
+        props.actions
+    ];
+    const [isActionsVisible, setActionsVisible] = (0, _reactUtilities.useControllableState)({
+        state: isActionsVisibleExternal,
+        defaultState: false,
+        initialState: false
+    });
     const [isAsideVisible, setAsideVisible] = _react.useState(true);
-    const handleActionsRef = (actions)=>{
-        setAsideVisible(actions === null);
+    const handleActionsRef = (actionsElement)=>{
+        setAsideVisible(actionsElement === null);
     };
     const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
     const actionsRef = _react.useRef(null);
     const expandIconRef = _react.useRef(null);
     const layoutRef = _react.useRef(null);
     const subtreeRef = _react.useRef(null);
+    const actionsRefs = (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(actions) ? actions.ref : undefined, handleActionsRef, actionsRef);
+    const expandIconRefs = (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(expandIcon) ? expandIcon.ref : undefined, expandIconRef);
     const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
@@ -45,17 +62,16 @@ function useTreeItem_unstable(props, ref) {
         const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
         requestTreeResponse({
             event,
-            itemType,
             value,
+            itemType,
+            target: event.currentTarget,
             type: isFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
         });
     });
     const handleKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        if (event.currentTarget !== event.target) {
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
             return;
         }
         switch(event.key){
@@ -68,6 +84,7 @@ function useTreeItem_unstable(props, ref) {
             case _tokens.treeDataTypes.ArrowRight:
                 return requestTreeResponse({
                     event,
+                    target: event.currentTarget,
                     value,
                     itemType,
                     type: event.key
@@ -77,6 +94,7 @@ function useTreeItem_unstable(props, ref) {
         if (isTypeAheadCharacter) {
             requestTreeResponse({
                 event,
+                target: event.currentTarget,
                 value,
                 itemType,
                 type: _tokens.treeDataTypes.TypeAhead
@@ -99,16 +117,37 @@ function useTreeItem_unstable(props, ref) {
             return setActionsVisible(false);
         }
     });
+    const isBranch = itemType === 'branch';
+    const actionsSlot = _react.useMemo(()=>isActionsVisible ? (0, _reactUtilities.resolveShorthand)(actions) : undefined, [
+        actions,
+        isActionsVisible
+    ]);
+    if (actionsSlot) {
+        actionsSlot.ref = actionsRefs;
+    }
+    const asideSlot = _react.useMemo(()=>isAsideVisible ? (0, _reactUtilities.resolveShorthand)(aside) : undefined, [
+        aside,
+        isAsideVisible
+    ]);
+    const expandIconSlot = _react.useMemo(()=>(0, _reactUtilities.resolveShorthand)(expandIcon, {
+            required: isBranch,
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_treeItemChevron.TreeItemChevron, null),
+                'aria-hidden': true
+            }
+        }), [
+        expandIcon,
+        isBranch
+    ]);
+    if (expandIconSlot) {
+        expandIconSlot.ref = expandIconRefs;
+    }
     return {
         value,
         open,
         subtreeRef,
-        actionsRef: (0, _reactUtilities.useMergedRefs)(actionsRef, handleActionsRef),
-        expandIconRef,
         layoutRef,
         itemType,
-        isActionsVisible,
-        isAsideVisible,
         level,
         components: {
             root: 'div'
@@ -120,13 +159,16 @@ function useTreeItem_unstable(props, ref) {
             role: 'treeitem',
             'aria-level': level,
             [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
-            'aria-expanded': itemType === 'branch' ? open : undefined,
+            'aria-expanded': isBranch ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,
             onFocus: handleActionsVisible,
             onMouseOut: handleActionsInvisible,
             onBlur: handleActionsInvisible
-        })
+        }),
+        actions: actionsSlot,
+        aside: asideSlot,
+        expandIcon: expandIconSlot
     };
 }

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 { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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    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 = (actions)=>{\n        setAsideVisible(actions === null);\n    };\n    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\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 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 isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        requestTreeResponse({\n            event,\n            itemType,\n            value,\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        if (event.isDefaultPrevented()) {\n            return;\n        }\n        if (event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\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                    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                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    return {\n        value,\n        open,\n        subtreeRef,\n        actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n        expandIconRef,\n        layoutRef,\n        itemType,\n        isActionsVisible,\n        isAsideVisible,\n        level,\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps(as, {\n            tabIndex: -1,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            [dataTreeItemValueAttrName]: value,\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleActionsVisible,\n            onFocus: handleActionsVisible,\n            onMouseOut: handleActionsInvisible,\n            onBlur: handleActionsInvisible\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","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isFromExpandIcon","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","useMergedRefs","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","undefined","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useControllableState, 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 { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { TreeItemChevron } from '../TreeItemChevron';\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    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 , expandIcon , aside , ...rest } = props;\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const [isActionsVisibleExternal, actions] = 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, setActionsVisible] = useControllableState({\n        state: isActionsVisibleExternal,\n        defaultState: false,\n        initialState: false\n    });\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = (actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    };\n    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\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 actionsRefs = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, handleActionsRef, actionsRef);\n    const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);\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 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 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 isBranch = itemType === 'branch';\n    const actionsSlot = React.useMemo(()=>isActionsVisible ? resolveShorthand(actions) : undefined, [\n        actions,\n        isActionsVisible\n    ]);\n    if (actionsSlot) {\n        actionsSlot.ref = actionsRefs;\n    }\n    const asideSlot = React.useMemo(()=>isAsideVisible ? resolveShorthand(aside) : undefined, [\n        aside,\n        isAsideVisible\n    ]);\n    const expandIconSlot = React.useMemo(()=>resolveShorthand(expandIcon, {\n            required: isBranch,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n                'aria-hidden': true\n            }\n        }), [\n        expandIcon,\n        isBranch\n    ]);\n    if (expandIconSlot) {\n        expandIconSlot.ref = expandIconRefs;\n    }\n    return {\n        value,\n        open,\n        subtreeRef,\n        layoutRef,\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps(as, {\n            tabIndex: -1,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            [dataTreeItemValueAttrName]: value,\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        }),\n        actions: actionsSlot,\n        aside: asideSlot,\n        expandIcon: expandIconSlot\n    };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","contextLevel","useTreeContext_unstable","ctx","level","value","useId","toString","onClick","onKeyDown","as","itemType","expandIcon","aside","rest","requestTreeResponse","isActionsVisibleExternal","actions","isResolvedShorthand","visible","undefined","isActionsVisible","setActionsVisible","useControllableState","state","defaultState","initialState","isAsideVisible","setAsideVisible","React","useState","handleActionsRef","actionsElement","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","actionsRefs","useMergedRefs","expandIconRefs","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isFromExpandIcon","currentTarget","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","isBranch","actionsSlot","useMemo","resolveShorthand","asideSlot","expandIconSlot","required","defaultProps","children","createElement","TreeItemChevron","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}

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

@@ -6,23 +6,31 @@ Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
     enumerable: true,
     get: ()=>useTreeItemContextValues_unstable
 });
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 function useTreeItemContextValues_unstable(state) {
-    const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open  } = state;
+    const { value , itemType , layoutRef , subtreeRef , open , actions , aside , expandIcon  } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
    */ const treeItem = {
-        isActionsVisible,
-        isAsideVisible,
         value,
-        actionsRef,
         itemType,
         layoutRef,
         subtreeRef,
-        expandIconRef,
         open
     };
+    const treeItemSlots = _react.useMemo(()=>({
+            actions,
+            aside,
+            expandIcon
+        }), [
+        actions,
+        aside,
+        expandIcon
+    ]);
     return {
-        treeItem
+        treeItem,
+        treeItemSlots
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open  } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        isActionsVisible,\n        isAsideVisible,\n        value,\n        actionsRef,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        expandIconRef,\n        open\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,iBAAgB,EAAGC,eAAc,EAAGC,WAAU,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,cAAa,EAAGC,KAAI,EAAG,GAAGT;IAC/H;;;GAGD,GAAG,MAAMU,WAAW;QACfR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useTreeItemContextValues_unstable(state) {\n    const { value , itemType , layoutRef , subtreeRef , open , actions , aside , expandIcon  } = 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    };\n    const treeItemSlots = React.useMemo(()=>({\n            actions,\n            aside,\n            expandIcon\n        }), [\n        actions,\n        aside,\n        expandIcon\n    ]);\n    return {\n        treeItem,\n        treeItemSlots\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","actions","aside","expandIcon","treeItem","treeItemSlots","React","useMemo"],"mappings":";;;;+BACgBA;;aAAAA;;;6DADO;AAChB,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,KAAI,EAAGC,QAAO,EAAGC,MAAK,EAAGC,WAAU,EAAG,GAAGR;IAC7F;;;GAGD,GAAG,MAAMS,WAAW;QACfR;QACAC;QACAC;QACAC;QACAC;IACJ;IACA,MAAMK,gBAAgBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACjCN;YACAC;YACAC;QACJ,CAAA,GAAI;QACJF;QACAC;QACAC;KACH;IACD,OAAO;QACHC;QACAC;IACJ;AACJ"}

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

@@ -10,17 +10,11 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
 const _treeItemContext = require("../../contexts/treeItemContext");
-const _treeItemChevron = require("../TreeItemChevron");
+const _treeItemSlotsContext = require("../../contexts/treeItemSlotsContext");
 const useTreeItemLayout_unstable = (props, ref)=>{
-    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
+    const { content , iconAfter , iconBefore , as ='span'  } = props;
+    const { actions , aside , expandIcon  } = (0, _treeItemSlotsContext.useTreeItemSlotsContext_unstable)();
     const layoutRef = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
-    const expandIconRef = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
-    const isActionsVisibleContext = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.isActionsVisible);
-    const isAsideVisible = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.isAsideVisible);
-    var _ref;
-    const isActionsVisible = (_ref = (0, _reactUtilities.isResolvedShorthand)(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;
-    const isBranch = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
-    const actionsRef = (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(actions) ? actions.ref : undefined, (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef));
     return {
         components: {
             root: 'div',
@@ -51,22 +45,8 @@ const useTreeItemLayout_unstable = (props, ref)=>{
                 'aria-hidden': true
             }
         }),
-        aside: isAsideVisible ? (0, _reactUtilities.resolveShorthand)(aside) : undefined,
-        actions: isActionsVisible ? (0, _reactUtilities.resolveShorthand)((0, _reactUtilities.isResolvedShorthand)(actions) ? {
-            ...actions,
-            visible: undefined
-        } : actions, {
-            defaultProps: {
-                ref: actionsRef
-            }
-        }) : undefined,
-        expandIcon: (0, _reactUtilities.resolveShorthand)(expandIcon, {
-            required: isBranch,
-            defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_treeItemChevron.TreeItemChevron, null),
-                'aria-hidden': true,
-                ref: (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
-            }
-        })
+        aside: (0, _reactUtilities.resolveShorthand)(aside),
+        actions: (0, _reactUtilities.resolveShorthand)(actions),
+        expandIcon: (0, _reactUtilities.resolveShorthand)(expandIcon)
     };
 };

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 } from '../../contexts/treeItemContext';\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 , expandIcon , as ='span' , aside , actions  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    var _ref;\n    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));\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        },\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(aside) : undefined,\n        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM\n        isResolvedShorthand(actions) ? {\n            ...actions,\n            visible: undefined\n        } : actions, {\n            defaultProps: {\n                ref: actionsRef\n            }\n        }) : undefined,\n        expandIcon: resolveShorthand(expandIcon, {\n            required: isBranch,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n                'aria-hidden': true,\n                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n            }\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","useTreeItemContext_unstable","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","_ref","isResolvedShorthand","visible","undefined","isBranch","itemType","actionsRef","useMergedRefs","components","root","buttonContextValue","size","getNativeElementProps","resolveShorthand","defaultProps","required","children","React","createElement","TreeItemChevron"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACqE;iCAChD;iCACZ;AASrB,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,QAAO,EAAGC,UAAS,EAAGC,WAAU,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAGC,MAAK,EAAGC,QAAO,EAAG,GAAGR;IAC1F,MAAMS,YAAYC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBF,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0BH,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBL,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAII,cAAc;IAC5E,IAAIC;IACJ,MAAMF,mBAAmB,AAACE,CAAAA,OAAOC,IAAAA,mCAAmB,EAACT,WAAWA,QAAQU,OAAO,GAAGC,SAAS,AAAD,MAAO,IAAI,IAAIH,SAAS,KAAK,IAAIA,OAAOH,uBAAuB;IACzJ,MAAMO,WAAWV,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIU,QAAQ,KAAK;IACrE,MAAMC,aAAaC,IAAAA,6BAAa,EAACN,IAAAA,mCAAmB,EAACT,WAAWA,QAAQP,GAAG,GAAGkB,SAAS,EAAET,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIW,UAAU;IAC1I,OAAO;QACHE,YAAY;YACRC,MAAM;YACNpB,YAAY;YACZD,YAAY;YACZF,SAAS;YACTC,WAAW;YACXK,SAAS;YACTD,OAAO;QACX;QACAmB,oBAAoB;YAChBC,MAAM;QACV;QACAF,MAAMG,IAAAA,qCAAqB,EAACtB,IAAI;YAC5B,GAAGN,KAAK;YACRC,KAAKsB,IAAAA,6BAAa,EAACtB,KAAKQ;QAC5B;QACAL,YAAYyB,IAAAA,gCAAgB,EAACzB,YAAY;YACrC0B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACA5B,SAAS2B,IAAAA,gCAAgB,EAAC3B,SAAS;YAC/B6B,UAAU,IAAI;QAClB;QACA5B,WAAW0B,IAAAA,gCAAgB,EAAC1B,WAAW;YACnC2B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAvB,OAAOQ,iBAAiBc,IAAAA,gCAAgB,EAACtB,SAASY,SAAS;QAC3DX,SAASM,mBAAmBe,IAAAA,gCAAgB,EAC5CZ,IAAAA,mCAAmB,EAACT,WAAW;YAC3B,GAAGA,OAAO;YACVU,SAASC;QACb,IAAIX,OAAO,EAAE;YACTsB,cAAc;gBACV7B,KAAKqB;YACT;QACJ,KAAKH,SAAS;QACdd,YAAYwB,IAAAA,gCAAgB,EAACxB,YAAY;YACrC0B,UAAUX;YACVU,cAAc;gBACVE,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;gBACjE,eAAe,IAAI;gBACnBlC,KAAKsB,IAAAA,6BAAa,EAACN,IAAAA,mCAAmB,EAACZ,cAAcA,WAAWJ,GAAG,GAAGkB,SAAS,EAAEP;YACrF;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';\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 { actions , aside , expandIcon  } = useTreeItemSlotsContext_unstable();\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\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        },\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: resolveShorthand(aside),\n        actions: resolveShorthand(actions),\n        expandIcon: resolveShorthand(expandIcon)\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","actions","aside","expandIcon","useTreeItemSlotsContext_unstable","layoutRef","useTreeItemContext_unstable","ctx","components","root","buttonContextValue","size","getNativeElementProps","useMergedRefs","resolveShorthand","defaultProps","required"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACgD;iCAC3B;sCACK;AAStC,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,QAAO,EAAGC,UAAS,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAG,GAAGL;IAC3D,MAAM,EAAEM,QAAO,EAAGC,MAAK,EAAGC,WAAU,EAAG,GAAGC,IAAAA,sDAAgC;IAC1E,MAAMC,YAAYC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,OAAO;QACHG,YAAY;YACRC,MAAM;YACNN,YAAY;YACZJ,YAAY;YACZF,SAAS;YACTC,WAAW;YACXG,SAAS;YACTC,OAAO;QACX;QACAQ,oBAAoB;YAChBC,MAAM;QACV;QACAF,MAAMG,IAAAA,qCAAqB,EAACZ,IAAI;YAC5B,GAAGL,KAAK;YACRC,KAAKiB,IAAAA,6BAAa,EAACjB,KAAKS;QAC5B;QACAN,YAAYe,IAAAA,gCAAgB,EAACf,YAAY;YACrCgB,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAlB,SAASiB,IAAAA,gCAAgB,EAACjB,SAAS;YAC/BmB,UAAU,IAAI;QAClB;QACAlB,WAAWgB,IAAAA,gCAAgB,EAAChB,WAAW;YACnCiB,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAb,OAAOY,IAAAA,gCAAgB,EAACZ;QACxBD,SAASa,IAAAA,gCAAgB,EAACb;QAC1BE,YAAYW,IAAAA,gCAAgB,EAACX;IACjC;AACJ"}

package/lib-commonjs/contexts/index.js

@@ -5,3 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("./treeContext"), exports);
 _exportStar(require("./treeItemContext"), exports);
+_exportStar(require("./treeItemSlotsContext"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\nexport * from './treeItemSlotsContext';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA"}

package/lib-commonjs/contexts/treeContext.js

@@ -17,7 +17,7 @@ const _reactContextSelector = require("@fluentui/react-context-selector");
 const _immutableSet = require("../utils/ImmutableSet");
 const defaultContextValue = {
     level: 0,
-    openItems: _immutableSet.emptyImmutableSet,
+    openItems: _immutableSet.ImmutableSet.empty,
     requestTreeResponse: noop,
     appearance: 'subtle',
     size: 'medium'

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

@@ -1 +1 @@
-{"version":3,"sources":["treeContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { emptyImmutableSet } from '../utils/ImmutableSet';\nconst defaultContextValue = {\n    level: 0,\n    openItems: emptyImmutableSet,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium'\n};\nfunction noop() {\n/* noop */ }\nexport const TreeContext = createContext(undefined);\nexport const { Provider: TreeProvider  } = TreeContext;\nexport const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeContext","TreeProvider","useTreeContext_unstable","defaultContextValue","level","openItems","emptyImmutableSet","requestTreeResponse","noop","appearance","size","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAWaA,WAAW,MAAXA;IACYC,YAAY,MAAZA;IACZC,uBAAuB,MAAvBA;;sCAbqC;8BAChB;AAClC,MAAMC,sBAAsB;IACxBC,OAAO;IACPC,WAAWC,+BAAiB;IAC5BC,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACV;AACA,SAASF,OAAO;AAChB,QAAQ,GAAG;AACJ,MAAMR,cAAcW,IAAAA,mCAAa,EAACC;AAClC,MAAM,EAAEC,UAAUZ,aAAY,EAAG,GAAGD;AACpC,MAAME,0BAA0B,CAACY,WAAWC,IAAAA,wCAAkB,EAACf,aAAa,CAACgB,MAAMb,mBAAmB,GAAGW,SAASE"}
+{"version":3,"sources":["treeContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nconst defaultContextValue = {\n    level: 0,\n    openItems: ImmutableSet.empty,\n    requestTreeResponse: noop,\n    appearance: 'subtle',\n    size: 'medium'\n};\nfunction noop() {\n/* noop */ }\nexport const TreeContext = createContext(undefined);\nexport const { Provider: TreeProvider  } = TreeContext;\nexport const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeContext","TreeProvider","useTreeContext_unstable","defaultContextValue","level","openItems","ImmutableSet","empty","requestTreeResponse","noop","appearance","size","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAWaA,WAAW,MAAXA;IACYC,YAAY,MAAZA;IACZC,uBAAuB,MAAvBA;;sCAbqC;8BACrB;AAC7B,MAAMC,sBAAsB;IACxBC,OAAO;IACPC,WAAWC,0BAAY,CAACC,KAAK;IAC7BC,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACV;AACA,SAASF,OAAO;AAChB,QAAQ,GAAG;AACJ,MAAMT,cAAcY,IAAAA,mCAAa,EAACC;AAClC,MAAM,EAAEC,UAAUb,aAAY,EAAG,GAAGD;AACpC,MAAME,0BAA0B,CAACa,WAAWC,IAAAA,wCAAkB,EAAChB,aAAa,CAACiB,MAAMd,mBAAmB,GAAGY,SAASE"}

package/lib-commonjs/contexts/treeItemContext.js

@@ -18,10 +18,6 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactContextSelector = require("@fluentui/react-context-selector");
 const defaultContextValue = {
     value: '',
-    isActionsVisible: false,
-    isAsideVisible: true,
-    actionsRef: /*#__PURE__*/ _react.createRef(),
-    expandIconRef: /*#__PURE__*/ _react.createRef(),
     layoutRef: /*#__PURE__*/ _react.createRef(),
     subtreeRef: /*#__PURE__*/ _react.createRef(),
     itemType: 'leaf',