feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TreeItemLayout", {
+    enumerable: true,
+    get: function() {
+        return TreeItemLayout;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTreeItemLayout = require("./useTreeItemLayout");
+const _renderTreeItemLayout = require("./renderTreeItemLayout");
+const _useTreeItemLayoutStylesstyles = require("./useTreeItemLayoutStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TreeItemLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTreeItemLayout.useTreeItemLayout_unstable)(props, ref);
+    (0, _useTreeItemLayoutStylesstyles.useTreeItemLayoutStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTreeItemLayoutStyles_unstable')(state);
+    return (0, _renderTreeItemLayout.renderTreeItemLayout_unstable)(state);
+});
+TreeItemLayout.displayName = 'TreeItemLayout';

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);\n\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useCustomStyleHook_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAOvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering TreeItemLayout
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  Slot,\n  ComponentProps,\n  ComponentState,\n  ExtractSlotProps,\n  EventData,\n  EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n  | EventData<'mouseover' | 'mouseout', MouseEvent>\n  | EventData<'focus' | 'blur', FocusEvent>\n  | EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Forces visibility of the aside/action content\n     */\n    visible?: boolean;\n    onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n  }\n>;\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  /**\n   * Aside content is normally used to render a badge or other non-actionable content\n   */\n  aside?: Slot<'div'>;\n  /**\n   * Actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   *\n   * `actions` and `aside` slots are positioned on the exact same spot,\n   * so they won't be visible at the same time.\n   * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n   *\n   * `actions` slot supports a `visible` prop to force visibility of the actions.\n   */\n  actions?: Slot<TreeItemLayoutActionSlotProps>;\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAEE"}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TreeItemLayout: function() {
+        return _TreeItemLayout.TreeItemLayout;
+    },
+    renderTreeItemLayout_unstable: function() {
+        return _renderTreeItemLayout.renderTreeItemLayout_unstable;
+    },
+    treeItemLayoutClassNames: function() {
+        return _useTreeItemLayoutStylesstyles.treeItemLayoutClassNames;
+    },
+    useTreeItemLayoutStyles_unstable: function() {
+        return _useTreeItemLayoutStylesstyles.useTreeItemLayoutStyles_unstable;
+    },
+    useTreeItemLayout_unstable: function() {
+        return _useTreeItemLayout.useTreeItemLayout_unstable;
+    }
+});
+const _TreeItemLayout = require("./TreeItemLayout");
+const _renderTreeItemLayout = require("./renderTreeItemLayout");
+const _useTreeItemLayout = require("./useTreeItemLayout");
+const _useTreeItemLayoutStylesstyles = require("./useTreeItemLayoutStyles.styles");

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemLayout/index.ts"],"sourcesContent":["export { TreeItemLayout } from './TreeItemLayout';\nexport type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutSlots,\n  TreeItemLayoutState,\n} from './TreeItemLayout.types';\nexport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nexport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nexport { treeItemLayoutClassNames, useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\n"],"names":["TreeItemLayout","renderTreeItemLayout_unstable","useTreeItemLayout_unstable","treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAQdC,mDAA6B;;;eAE7BE,uDAAwB;;;eAAEC,+DAAgC;;;eAD1DF,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTreeItemLayout_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTreeItemLayout_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactbutton = require("@fluentui/react-button");
+const renderTreeItemLayout_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
+            state.selector && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.selector, {}),
+            state.iconBefore && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.iconBefore, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.main, {
+                children: state.root.children
+            }),
+            state.iconAfter && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.iconAfter, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
+                value: state.buttonContextValue,
+                children: [
+                    state.actions && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.actions, {}),
+                    state.aside && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.aside, {})
+                ]
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemLayout/renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState): JSXElement => {\n  assertSlots<TreeItemLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      {state.iconBefore && <state.iconBefore />}\n      <state.main>{state.root.children}</state.main>\n      {state.iconAfter && <state.iconAfter />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderTreeItemLayout_unstable","state","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;6BAGlB,yBAAyB;AAKxD,sCAAsC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,UAAU,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,UAAU,EAAA,CAAA;YACrCF,MAAMG,QAAQ,IAAA,WAAA,GAAI,mBAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;YACjCH,MAAMI,UAAU,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,UAAU,EAAA,CAAA;8BACtC,eAAA,EAACJ,MAAMK,IAAI,EAAA;0BAAEL,MAAMC,IAAI,CAACK,QAAQ;;YAC/BN,MAAMO,SAAS,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,SAAS,EAAA,CAAA;8BACpC,gBAAA,EAACT,kCAAAA,EAAAA;gBAAsBU,OAAOR,MAAMS,kBAAkB;;oBACnDT,MAAMU,OAAO,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,OAAO,EAAA,CAAA;oBAC/BV,MAAMW,KAAK,IAAA,WAAA,OAAI,eAAA,EAACX,MAAMW,KAAK,EAAA,CAAA;;;;;AAIpC,EAAE"}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -0,0 +1,244 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTreeItemLayout_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTreeItemLayout_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _contexts = require("../../contexts");
+const _reactcheckbox = require("@fluentui/react-checkbox");
+const _reactradio = require("@fluentui/react-radio");
+const _TreeItemChevron = require("../TreeItemChevron");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const useTreeItemLayout_unstable = (props, ref)=>{
+    'use no memo';
+    const { main, iconAfter, iconBefore } = props;
+    const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
+    const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
+    const navigationMode = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _ctx_navigationMode;
+        return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
+    });
+    const [isActionsVisibleFromProps, onActionVisibilityChange] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
+        props.actions.visible,
+        props.actions.onVisibilityChange
+    ] : [
+        undefined,
+        undefined
+    ];
+    const [isActionsVisible, setIsActionsVisible] = (0, _reactutilities.useControllableState)({
+        state: isActionsVisibleFromProps,
+        initialState: false
+    });
+    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 actionsRefInternal = _react.useRef(null);
+    const treeItemRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.treeItemRef);
+    const subtreeRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
+    const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.checked);
+    const isBranch = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(treeItemRef);
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(subtreeRef);
+    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
+            if (event.defaultPrevented) {
+                return;
+            }
+            setIsActionsVisible(true);
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible,
+        onActionVisibilityChange
+    ]);
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const isNavigatingWithKeyboard = (0, _reacttabster.useIsNavigatingWithKeyboard)();
+    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
+        const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
+        const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && (0, _reactutilities.elementContains)(treeItemRef.current, event.relatedTarget));
+        const isTargetFromActions = ()=>{
+            var _actionsRefInternal_current;
+            return Boolean((_actionsRefInternal_current = actionsRefInternal.current) === null || _actionsRefInternal_current === void 0 ? void 0 : _actionsRefInternal_current.contains(event.target));
+        };
+        if (isRelatedTargetFromActions()) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
+            if (event.defaultPrevented) {
+                return;
+            }
+            setIsActionsVisible(true);
+            return;
+        }
+        if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
+            return;
+        }
+        // when a mouseout event happens during keyboard interaction
+        // we should not hide the actions if the activeElement is the treeitem or an action
+        // as the focus on the treeitem takes precedence over the mouseout event
+        if (event.type === 'mouseout' && isNavigatingWithKeyboard() && ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === treeItemRef.current || (0, _reactutilities.elementContains)(actionsRefInternal.current, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement))) {
+            return;
+        }
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: false,
+            event,
+            type: event.type
+        });
+        if (event.defaultPrevented) {
+            return;
+        }
+        setIsActionsVisible(false);
+    }, [
+        setIsActionsVisible,
+        onActionVisibilityChange,
+        treeItemRef,
+        isNavigatingWithKeyboard,
+        targetDocument
+    ]);
+    const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
+        renderByDefault: isBranch,
+        defaultProps: {
+            children: /*#__PURE__*/ _react.createElement(_TreeItemChevron.TreeItemChevron, null),
+            'aria-hidden': true
+        },
+        elementType: 'div'
+    });
+    const expandIconRefs = (0, _reactutilities.useMergedRefs)(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
+    if (expandIcon) {
+        expandIcon.ref = expandIconRefs;
+    }
+    const arrowNavigationProps = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: navigationMode === 'tree',
+        axis: 'horizontal'
+    });
+    const actions = isActionsVisible ? _reactutilities.slot.optional(props.actions, {
+        defaultProps: {
+            ...arrowNavigationProps,
+            role: 'toolbar'
+        },
+        elementType: 'div'
+    }) : undefined;
+    actions === null || actions === void 0 ? true : delete actions.visible;
+    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;
+    const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
+    const handleActionsBlur = (0, _reactutilities.useEventCallback)((event)=>{
+        if ((0, _reactutilities.isResolvedShorthand)(props.actions)) {
+            var _props_actions_onBlur, _props_actions;
+            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);
+        }
+        const isRelatedTargetFromActions = Boolean((0, _reactutilities.elementContains)(event.currentTarget, event.relatedTarget));
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: isRelatedTargetFromActions,
+            event,
+            type: event.type
+        });
+        setIsActionsVisible(isRelatedTargetFromActions);
+    });
+    if (actions) {
+        actions.ref = actionsRefs;
+        actions.onBlur = handleActionsBlur;
+    }
+    const hasActions = Boolean(props.actions);
+    _react.useEffect(()=>{
+        if (treeItemRef.current && hasActions) {
+            const treeItemElement = treeItemRef.current;
+            const handleMouseOver = setActionsVisibleIfNotFromSubtree;
+            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;
+            const handleFocus = setActionsVisibleIfNotFromSubtree;
+            const handleBlur = setActionsInvisibleIfNotFromSubtree;
+            treeItemElement.addEventListener('mouseover', handleMouseOver);
+            treeItemElement.addEventListener('mouseout', handleMouseOut);
+            treeItemElement.addEventListener('focus', handleFocus);
+            treeItemElement.addEventListener('blur', handleBlur);
+            return ()=>{
+                treeItemElement.removeEventListener('mouseover', handleMouseOver);
+                treeItemElement.removeEventListener('mouseout', handleMouseOut);
+                treeItemElement.removeEventListener('focus', handleFocus);
+                treeItemElement.removeEventListener('blur', handleBlur);
+            };
+        }
+    }, [
+        hasActions,
+        treeItemRef,
+        setActionsVisibleIfNotFromSubtree,
+        setActionsInvisibleIfNotFromSubtree
+    ]);
+    return {
+        components: {
+            root: 'div',
+            expandIcon: 'div',
+            iconBefore: 'div',
+            main: 'div',
+            iconAfter: 'div',
+            actions: 'div',
+            aside: 'div',
+            // Casting here to a union between checkbox and radio
+            selector: selectionMode === 'multiselect' ? _reactcheckbox.Checkbox : _reactradio.Radio
+        },
+        buttonContextValue: {
+            size: 'small'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ...props,
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: (0, _reactutilities.useMergedRefs)(ref, layoutRef)
+        }), {
+            elementType: 'div'
+        }),
+        iconBefore: _reactutilities.slot.optional(iconBefore, {
+            elementType: 'div'
+        }),
+        main: _reactutilities.slot.always(main, {
+            elementType: 'div'
+        }),
+        iconAfter: _reactutilities.slot.optional(iconAfter, {
+            elementType: 'div'
+        }),
+        aside: !isActionsVisible ? _reactutilities.slot.optional(props.aside, {
+            elementType: 'div'
+        }) : undefined,
+        actions,
+        expandIcon,
+        selector: _reactutilities.slot.optional(props.selector, {
+            renderByDefault: selectionMode !== 'none',
+            defaultProps: {
+                checked,
+                tabIndex: -1,
+                'aria-hidden': true,
+                ref: selectionRef
+            },
+            elementType: selectionMode === 'multiselect' ? _reactcheckbox.Checkbox : _reactradio.Radio
+        })
+    };
+};
+function assertIsRefObject(ref) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {
+            throw new Error(`
+        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:
+        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.
+      `);
+        }
+    }
+}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -0,0 +1,207 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    treeItemLayoutClassNames: function() {
+        return treeItemLayoutClassNames;
+    },
+    useTreeItemLayoutStyles_unstable: function() {
+        return useTreeItemLayoutStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _treeContext = require("../../contexts/treeContext");
+const _treeItemContext = require("../../contexts/treeItemContext");
+const treeItemLayoutClassNames = {
+    root: 'fui-TreeItemLayout',
+    iconBefore: 'fui-TreeItemLayout__iconBefore',
+    main: 'fui-TreeItemLayout__main',
+    iconAfter: 'fui-TreeItemLayout__iconAfter',
+    expandIcon: 'fui-TreeItemLayout__expandIcon',
+    aside: 'fui-TreeItemLayout__aside',
+    actions: 'fui-TreeItemLayout__actions',
+    selector: 'fui-TreeItemLayout__selector'
+};
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryb8khq", null, [
+    ".ryb8khq{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}",
+    ".ryb8khq:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}",
+    ".ryb8khq:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}",
+    ".ryb8khq:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
+    ".ryb8khq:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"
+]);
+/**
+ * Styles for the root slot
+ */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    leaf: {
+        uwmqm3: [
+            "f1k1erfc",
+            "faevyjx"
+        ]
+    },
+    branch: {
+        uwmqm3: [
+            "fo100m9",
+            "f6yw3pu"
+        ]
+    },
+    medium: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    small: {
+        sshi5w: "f1pha7fy",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    subtle: {},
+    "subtle-alpha": {
+        Jwef8y: "f146ro5n",
+        ecr2s2: "fkam630"
+    },
+    transparent: {
+        De3pzq: "f1c21dwh",
+        Jwef8y: "fjxutwb",
+        ecr2s2: "fophhak"
+    }
+}, {
+    d: [
+        ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}",
+        ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}",
+        ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}",
+        ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f1pha7fy{min-height:24px;}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
+    ],
+    h: [
+        ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}",
+        ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"
+    ],
+    a: [
+        ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}",
+        ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"
+    ]
+});
+/**
+ * Styles for the action icon slot
+ */ const useActionsBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rzvs2in", "r17h8a29", [
+    ".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}",
+    ".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"
+]);
+/**
+ * Styles for the action icon slot
+ */ const useAsideBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1825u21", "rezy0yk", [
+    ".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}",
+    ".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"
+]);
+/**
+ * Styles for the expand icon slot
+ */ const useExpandIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rh4pu5o", null, [
+    ".rh4pu5o{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"
+]);
+/**
+ * Styles for the content slot
+ */ const useMainBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rklbe47", null, [
+    ".rklbe47{padding:0 var(--spacingHorizontalXXS);}"
+]);
+/**
+ * Styles for the before/after icon slot
+ */ const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rphzgg1", null, [
+    ".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"
+]);
+const useIconBeforeStyles = /*#__PURE__*/ (0, _react.__styles)({
+    medium: {
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
+        ]
+    },
+    small: {
+        z189sj: [
+            "ffczdla",
+            "fgiv446"
+        ]
+    }
+}, {
+    d: [
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".ffczdla{padding-right:var(--spacingHorizontalXXS);}",
+        ".fgiv446{padding-left:var(--spacingHorizontalXXS);}"
+    ]
+});
+const useIconAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
+    medium: {
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ]
+    },
+    small: {
+        uwmqm3: [
+            "fgiv446",
+            "ffczdla"
+        ]
+    }
+}, {
+    d: [
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fgiv446{padding-left:var(--spacingHorizontalXXS);}",
+        ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"
+    ]
+});
+const useTreeItemLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
+    const rootStyles = useRootStyles();
+    const rootBaseStyles = useRootBaseStyles();
+    const actionsBaseStyles = useActionsBaseStyles();
+    const asideBaseStyles = useAsideBaseStyles();
+    const mainBaseStyles = useMainBaseStyles();
+    const expandIconBaseStyles = useExpandIconBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const iconBeforeStyles = useIconBeforeStyles();
+    const iconAfterStyles = useIconAfterStyles();
+    const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
+    const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
+    const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
+    root.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+    main.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
+    if (expandIcon) {
+        expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
+    }
+    if (iconBefore) {
+        iconBefore.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
+    }
+    if (iconAfter) {
+        iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
+    }
+    if (actions) {
+        actions.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
+    }
+    if (aside) {
+        aside.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
+    }
+    if (selector) {
+        selector.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.selector, selector.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.raw.js

@@ -0,0 +1,193 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    treeItemLayoutClassNames: function() {
+        return treeItemLayoutClassNames;
+    },
+    useTreeItemLayoutStyles_unstable: function() {
+        return useTreeItemLayoutStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _treeContext = require("../../contexts/treeContext");
+const _tokens = require("../../utils/tokens");
+const _treeItemContext = require("../../contexts/treeItemContext");
+const treeItemLayoutClassNames = {
+    root: 'fui-TreeItemLayout',
+    iconBefore: 'fui-TreeItemLayout__iconBefore',
+    main: 'fui-TreeItemLayout__main',
+    iconAfter: 'fui-TreeItemLayout__iconAfter',
+    expandIcon: 'fui-TreeItemLayout__expandIcon',
+    aside: 'fui-TreeItemLayout__aside',
+    actions: 'fui-TreeItemLayout__actions',
+    selector: 'fui-TreeItemLayout__selector'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: '32px',
+    boxSizing: 'border-box',
+    gridArea: 'layout',
+    ':hover': {
+        color: _reacttheme.tokens.colorNeutralForeground2Hover,
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
+        // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling
+        [`& .${treeItemLayoutClassNames.expandIcon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Hover
+        }
+    },
+    ':active': {
+        color: _reacttheme.tokens.colorNeutralForeground2Pressed,
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
+        // TODO: stop using treeItemLayoutClassNames.expandIcon for styling
+        [`& .${treeItemLayoutClassNames.expandIcon}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Pressed
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useRootStyles = (0, _react.makeStyles)({
+    leaf: {
+        paddingLeft: `calc(var(${_tokens.treeItemLevelToken}, 1) * ${_reacttheme.tokens.spacingHorizontalXXL})`
+    },
+    branch: {
+        paddingLeft: `calc((var(${_tokens.treeItemLevelToken}, 1) - 1) * ${_reacttheme.tokens.spacingHorizontalXXL})`
+    },
+    medium: {
+        ..._reacttheme.typographyStyles.body1
+    },
+    small: {
+        minHeight: '24px',
+        ..._reacttheme.typographyStyles.caption1
+    },
+    // Appearance variations
+    subtle: {},
+    'subtle-alpha': {
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundLightAlphaHover
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundLightAlphaPressed
+        }
+    },
+    transparent: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
+        }
+    }
+});
+/**
+ * Styles for the action icon slot
+ */ const useActionsBaseStyles = (0, _react.makeResetStyles)({
+    display: 'flex',
+    marginLeft: 'auto',
+    position: 'relative',
+    zIndex: 1,
+    gridArea: 'aside',
+    padding: `0 ${_reacttheme.tokens.spacingHorizontalS}`
+});
+/**
+ * Styles for the action icon slot
+ */ const useAsideBaseStyles = (0, _react.makeResetStyles)({
+    display: 'flex',
+    marginLeft: 'auto',
+    alignItems: 'center',
+    zIndex: 0,
+    gridArea: 'aside',
+    padding: `0 ${_reacttheme.tokens.spacingHorizontalM}`,
+    gap: _reacttheme.tokens.spacingHorizontalXS
+});
+/**
+ * Styles for the expand icon slot
+ */ const useExpandIconBaseStyles = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '24px',
+    boxSizing: 'border-box',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    flex: `0 0 auto`,
+    padding: `${_reacttheme.tokens.spacingVerticalXS} 0`
+});
+/**
+ * Styles for the content slot
+ */ const useMainBaseStyles = (0, _react.makeResetStyles)({
+    padding: `0 ${_reacttheme.tokens.spacingHorizontalXXS}`
+});
+/**
+ * Styles for the before/after icon slot
+ */ const useIconBaseStyles = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'center',
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    lineHeight: _reacttheme.tokens.lineHeightBase500,
+    fontSize: _reacttheme.tokens.fontSizeBase500
+});
+const useIconBeforeStyles = (0, _react.makeStyles)({
+    medium: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalXS
+    },
+    small: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalXXS
+    }
+});
+const useIconAfterStyles = (0, _react.makeStyles)({
+    medium: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXS
+    },
+    small: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXXS
+    }
+});
+const useTreeItemLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
+    const rootStyles = useRootStyles();
+    const rootBaseStyles = useRootBaseStyles();
+    const actionsBaseStyles = useActionsBaseStyles();
+    const asideBaseStyles = useAsideBaseStyles();
+    const mainBaseStyles = useMainBaseStyles();
+    const expandIconBaseStyles = useExpandIconBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const iconBeforeStyles = useIconBeforeStyles();
+    const iconAfterStyles = useIconAfterStyles();
+    const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
+    const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
+    const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
+    root.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+    main.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
+    if (expandIcon) {
+        expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
+    }
+    if (iconBefore) {
+        iconBefore.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
+    }
+    if (iconAfter) {
+        iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
+    }
+    if (actions) {
+        actions.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
+    }
+    if (aside) {
+        aside.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
+    }
+    if (selector) {
+        selector.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.selector, selector.className);
+    }
+    return state;
+};