feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TreeItem", {
+    enumerable: true,
+    get: function() {
+        return TreeItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTreeItem = require("./useTreeItem");
+const _renderTreeItem = require("./renderTreeItem");
+const _useTreeItemStylesstyles = require("./useTreeItemStyles.styles");
+const _useTreeItemContextValues = require("./useTreeItemContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TreeItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTreeItem.useTreeItem_unstable)(props, ref);
+    (0, _useTreeItemStylesstyles.useTreeItemStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTreeItemStyles_unstable')(state);
+    const contextValues = (0, _useTreeItemContextValues.useTreeItemContextValues_unstable)(state);
+    return (0, _renderTreeItem.renderTreeItem_unstable)(state, contextValues);
+});
+TreeItem.displayName = 'TreeItem';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemStyles_unstable')(state);\n\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useCustomStyleHook_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAGtB,6BAA6B;qCACnC,kCAAkC;AAcvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;QAE1CN,mDAAAA,EAA2BO;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,MAAMC,oBAAgBP,2DAAAA,EAAkCM;IACxD,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ArrowLeft, ArrowRight, Enter } from '@fluentui/keyboard-keys';\nimport type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { treeItemLevelToken } from '../../utils/tokens';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n};\n\nexport type TreeItemOpenChangeData = {\n  open: boolean;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * A tree item can be a leaf or a branch\n   */\n  itemType: TreeItemType;\n  /**\n   * A tree item should have a well defined value, in case one is not provided by the user by this prop\n   * one will be inferred internally.\n   */\n  value?: TreeItemValue;\n  /**\n   * Whether the tree item is in an open state\n   *\n   * This overrides the open value provided by the root tree,\n   * and ensure control of the visibility of the tree item per tree item.\n   *\n   * NOTE: controlling the open state of a tree item will not affect the open state of its children\n   */\n  open?: boolean;\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;\n  /**\n   * This property is inferred through context on a nested tree, and required for a flat tree.\n   */\n  parentValue?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -0,0 +1,35 @@
+"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, {
+    TreeItem: function() {
+        return _TreeItem.TreeItem;
+    },
+    renderTreeItem_unstable: function() {
+        return _renderTreeItem.renderTreeItem_unstable;
+    },
+    treeItemClassNames: function() {
+        return _useTreeItemStylesstyles.treeItemClassNames;
+    },
+    useTreeItemContextValues_unstable: function() {
+        return _useTreeItemContextValues.useTreeItemContextValues_unstable;
+    },
+    useTreeItemStyles_unstable: function() {
+        return _useTreeItemStylesstyles.useTreeItemStyles_unstable;
+    },
+    useTreeItem_unstable: function() {
+        return _useTreeItem.useTreeItem_unstable;
+    }
+});
+const _TreeItem = require("./TreeItem");
+const _renderTreeItem = require("./renderTreeItem");
+const _useTreeItem = require("./useTreeItem");
+const _useTreeItemStylesstyles = require("./useTreeItemStyles.styles");
+const _useTreeItemContextValues = require("./useTreeItemContextValues");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItem/index.ts"],"sourcesContent":["export { TreeItem } from './TreeItem';\nexport type {\n  TreeItemCSSProperties,\n  TreeItemContextValues,\n  TreeItemOpenChangeData,\n  TreeItemOpenChangeEvent,\n  TreeItemProps,\n  TreeItemSlots,\n  TreeItemState,\n  TreeItemType,\n  TreeItemValue,\n} from './TreeItem.types';\nexport { renderTreeItem_unstable } from './renderTreeItem';\nexport { useTreeItem_unstable } from './useTreeItem';\nexport { treeItemClassNames, useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nexport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n"],"names":["TreeItem","renderTreeItem_unstable","useTreeItem_unstable","treeItemClassNames","useTreeItemStyles_unstable","useTreeItemContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAYRC,uCAAuB;;;eAEvBE,2CAAkB;;;eAClBE,2DAAiC;;;eADbD,mDAA0B;;;eAD9CF,iCAAoB;;;0BAbJ,aAAa;gCAYE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B;0CAC1C,6BAA6B"}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTreeItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTreeItem_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _contexts = require("../../contexts");
+const renderTreeItem_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.TreeItemProvider, {
+            value: contextValues.treeItem,
+            children: state.root.children
+        })
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItem/renderTreeItem.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 { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues): JSXElement => {\n  assertSlots<TreeItemSlots>(state);\n\n  return (\n    <state.root>\n      <TreeItemProvider value={contextValues.treeItem}>{state.root.children}</TreeItemProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TreeItemProvider","renderTreeItem_unstable","state","contextValues","root","value","treeItem","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;0BAGvB,iBAAiB;AAK3C,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,0BAAAA,EAAAA;YAAiBK,OAAOF,cAAcG,QAAQ;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAG3E,EAAE"}

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

@@ -0,0 +1,363 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTreeItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTreeItem_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _tokens = require("../../utils/tokens");
+const _contexts = require("../../contexts");
+const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const _Tree = require("../../Tree");
+function useTreeItem_unstable(props, ref) {
+    'use no memo';
+    const treeType = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.treeType);
+    if (treeType === 'flat') {
+        warnIfNoProperPropsFlatTreeItem(props);
+    }
+    const requestTreeResponse = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
+    const navigationMode = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _ctx_navigationMode;
+        return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
+    });
+    const forceUpdateRovingTabIndex = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.forceUpdateRovingTabIndex);
+    const { level: contextLevel } = (0, _contexts.useSubtreeContext_unstable)();
+    const parentValue = (0, _contexts.useTreeItemContext_unstable)((ctx)=>{
+        var _props_parentValue;
+        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;
+    });
+    // note, if the value is not externally provided,
+    // then selection and expansion will not work properly
+    const internalValue = (0, _reactutilities.useId)('fuiTreeItemValue-');
+    var _props_value;
+    const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
+    const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, 'aria-expanded': ariaExpanded, ...rest } = props;
+    const actionsRef = _react.useRef(null);
+    const expandIconRef = _react.useRef(null);
+    const layoutRef = _react.useRef(null);
+    const subtreeRef = _react.useRef(null);
+    const selectionRef = _react.useRef(null);
+    const treeItemRef = _react.useRef(null);
+    if (process.env.NODE_ENV !== 'production') {
+        // This is acceptable since the NODE_ENV will not change during runtime
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const hasTreeContext = (0, _reactcontextselector.useHasParentContext)(_contexts.TreeContext);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        _react.useEffect(()=>{
+            var _treeItemRef_current;
+            if (hasTreeContext) {
+                return;
+            }
+            if ((_treeItemRef_current = treeItemRef.current) === null || _treeItemRef_current === void 0 ? void 0 : _treeItemRef_current.querySelector(`.${_Tree.treeClassNames.root}`)) {
+                // eslint-disable-next-line no-console
+                console.error(`@fluentui/react-tree [useTreeItem]:
+<TreeItem> should be declared inside a <Tree> component.`);
+            }
+        }, [
+            hasTreeContext
+        ]);
+    }
+    _react.useEffect(()=>{
+        // When the tree item is mounted, we might need to update the roving tab index
+        // in edge cases where the tree is empty and then populated
+        forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
+        const treeItem = treeItemRef.current;
+        return ()=>{
+            // When the tree item is unmounted, we need to update the roving tab index
+            // if the tree item is the current tab indexed item
+            if (treeItem && treeItem.tabIndex === 0) {
+                forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
+            }
+        };
+    }, [
+        forceUpdateRovingTabIndex
+    ]);
+    const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _props_open;
+        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
+    });
+    const getNextOpen = ()=>itemType === 'branch' ? !open : open;
+    const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
+    const checked = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _ctx_checkedItems_get;
+        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;
+    });
+    const handleClick = (0, _reactutilities.useEventCallback)((event)=>{
+        var _expandIconRef_current;
+        const isEventFromActions = ()=>actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.target);
+        const isEventFromSubtree = ()=>subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target);
+        const isEventFromSelection = ()=>{
+            var _selectionRef_current;
+            return (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.contains(event.target);
+        };
+        const isEventFromExpandIcon = (_expandIconRef_current = expandIconRef.current) === null || _expandIconRef_current === void 0 ? void 0 : _expandIconRef_current.contains(event.target);
+        if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {
+            return;
+        } else if (!isEventFromExpandIcon) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        _reactdom.unstable_batchedUpdates(()=>{
+            const data = {
+                event,
+                value,
+                open: getNextOpen(),
+                target: event.currentTarget,
+                type: isEventFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
+            };
+            if (itemType !== 'leaf') {
+                var _props_onOpenChange;
+                (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
+                requestTreeResponse({
+                    ...data,
+                    itemType,
+                    requestType: 'open'
+                });
+            }
+            requestTreeResponse({
+                ...data,
+                itemType,
+                parentValue,
+                requestType: 'navigate',
+                type: _tokens.treeDataTypes.Click
+            });
+        });
+    });
+    const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.isDefaultPrevented() || !treeItemRef.current) {
+            return;
+        }
+        const isEventFromTreeItem = event.currentTarget === event.target;
+        const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target);
+        switch(event.key){
+            case _keyboardkeys.Space:
+                {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    if (selectionMode !== 'none') {
+                        var _selectionRef_current;
+                        (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                        // Prevents the page from scrolling down when the spacebar is pressed
+                        event.preventDefault();
+                    }
+                    return;
+                }
+            case _tokens.treeDataTypes.Enter:
+                {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    return event.currentTarget.click();
+                }
+            case _tokens.treeDataTypes.End:
+            case _tokens.treeDataTypes.Home:
+            case _tokens.treeDataTypes.ArrowUp:
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
+            case _tokens.treeDataTypes.ArrowDown:
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    if (isEventFromActions && (!(0, _reactutilities.isHTMLElement)(event.target) || event.target.hasAttribute('aria-haspopup'))) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
+            case _tokens.treeDataTypes.ArrowLeft:
+                {
+                    // arrow left with alt key is reserved for history navigation
+                    if (event.altKey) {
+                        return;
+                    }
+                    const data = {
+                        value,
+                        event,
+                        open: getNextOpen(),
+                        type: event.key,
+                        itemType,
+                        parentValue,
+                        target: event.currentTarget
+                    };
+                    if (isEventFromActions && navigationMode === 'treegrid') {
+                        requestTreeResponse({
+                            ...data,
+                            requestType: 'navigate'
+                        });
+                        return;
+                    }
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    // do not navigate to parent if the item is on the top level
+                    if (level === 1 && !open) {
+                        return;
+                    }
+                    if (open) {
+                        var _props_onOpenChange;
+                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
+                    }
+                    requestTreeResponse({
+                        ...data,
+                        requestType: open ? 'open' : 'navigate'
+                    });
+                    return;
+                }
+            case _tokens.treeDataTypes.ArrowRight:
+                {
+                    // Ignore keyboard events that do not originate from the current tree item.
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    // arrow right with alt key is reserved for history navigation
+                    if (event.altKey) {
+                        return;
+                    }
+                    const data = {
+                        value,
+                        event,
+                        open: getNextOpen(),
+                        type: event.key,
+                        target: event.currentTarget
+                    };
+                    if (itemType === 'branch' && !open) {
+                        var _props_onOpenChange1;
+                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                        requestTreeResponse({
+                            ...data,
+                            itemType,
+                            requestType: 'open'
+                        });
+                    } else {
+                        requestTreeResponse({
+                            ...data,
+                            itemType,
+                            parentValue,
+                            requestType: 'navigate'
+                        });
+                    }
+                    return;
+                }
+        }
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (!isEventFromTreeItem) {
+            return;
+        }
+        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
+        if (isTypeAheadCharacter) {
+            requestTreeResponse({
+                requestType: 'navigate',
+                event,
+                target: event.currentTarget,
+                value,
+                itemType,
+                type: _tokens.treeDataTypes.TypeAhead,
+                parentValue
+            });
+        }
+    });
+    const handleChange = (0, _reactutilities.useEventCallback)((event)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        requestTreeResponse({
+            requestType: 'selection',
+            event,
+            value,
+            itemType,
+            type: 'Change',
+            target: event.currentTarget,
+            checked: checked === 'mixed' ? true : !checked
+        });
+    });
+    return {
+        value,
+        open,
+        checked,
+        subtreeRef,
+        layoutRef,
+        selectionRef,
+        expandIconRef,
+        treeItemRef,
+        actionsRef,
+        itemType,
+        level,
+        components: {
+            root: 'div'
+        },
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isAsideVisible: false,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isActionsVisible: false,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
+            tabIndex: -1,
+            [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
+            role: 'treeitem',
+            ...rest,
+            ref: (0, _reactutilities.useMergedRefs)(ref, treeItemRef),
+            'aria-level': level,
+            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
+            'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,
+            'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onChange: handleChange
+        }), {
+            elementType: 'div'
+        })
+    };
+}
+function warnIfNoProperPropsFlatTreeItem(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {
+            // eslint-disable-next-line no-console
+            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:
+A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level"
+and "parentValue" (if "aria-level" > 1) to ensure a11y and navigation.
+
+- "aria-posinset": the position of this treeitem in the current level of the tree.
+- "aria-setsize": the number of siblings in this level of the tree.
+- "aria-level": the current level of the treeitem.
+- "parentValue": the "value" property of the parent item of this item.`);
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTreeItemContextValues_unstable;
+    }
+});
+function useTreeItemContextValues_unstable(state) {
+    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const treeItem = {
+        value,
+        checked,
+        itemType,
+        layoutRef,
+        subtreeRef,
+        open,
+        selectionRef,
+        isActionsVisible,
+        isAsideVisible,
+        actionsRef,
+        treeItemRef,
+        expandIconRef
+    };
+    return {
+        treeItem
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    expandIconRef,\n    actionsRef,\n    treeItemRef,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    isActionsVisible,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    isAsideVisible,\n    selectionRef,\n    checked,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    checked,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    selectionRef,\n    isActionsVisible,\n    isAsideVisible,\n    actionsRef,\n    treeItemRef,\n    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAGgBA;;;;;;AAAT,2CAA2CC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EACX,AACAC,gBAAgB,EAEhBC,AADA,cACc,EACdC,YAAY,EACZC,OAAO,EACR,GAN6D,AAM1DZ,kBAJ0D;IAM9D;;;GAGC,GACD,MAAMa,WAAiC;QACrCZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACF;IAEA,OAAO;QAAEO;IAAS;AACpB"}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js

@@ -0,0 +1,89 @@
+'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, {
+    treeItemClassNames: function() {
+        return treeItemClassNames;
+    },
+    useTreeItemStyles_unstable: function() {
+        return useTreeItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const treeItemClassNames = {
+    root: 'fui-TreeItem'
+};
+const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r15xhw3a", "r2f6k57", [
+    ".r15xhw3a{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}",
+    ".r15xhw3a:focus{outline-style:none;}",
+    ".r15xhw3a:focus-visible{outline-style:none;}",
+    ".r15xhw3a[data-fui-focus-visible]>.fui-TreeItemLayout,.r15xhw3a[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}",
+    ".r2f6k57{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}",
+    ".r2f6k57:focus{outline-style:none;}",
+    ".r2f6k57:focus-visible{outline-style:none;}",
+    ".r2f6k57[data-fui-focus-visible]>.fui-TreeItemLayout,.r2f6k57[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}"
+]);
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    level1: {
+        iytv0q: "f10bgyvd"
+    },
+    level2: {
+        iytv0q: "f1h0rod3"
+    },
+    level3: {
+        iytv0q: "fgoqafk"
+    },
+    level4: {
+        iytv0q: "f75dvuh"
+    },
+    level5: {
+        iytv0q: "fqk7yw6"
+    },
+    level6: {
+        iytv0q: "f1r3z17b"
+    },
+    level7: {
+        iytv0q: "f1hrpd1h"
+    },
+    level8: {
+        iytv0q: "f1iy65d0"
+    },
+    level9: {
+        iytv0q: "ftg42e5"
+    },
+    level10: {
+        iytv0q: "fyat3t"
+    }
+}, {
+    d: [
+        ".f10bgyvd{--fluent-TreeItem--level:1;}",
+        ".f1h0rod3{--fluent-TreeItem--level:2;}",
+        ".fgoqafk{--fluent-TreeItem--level:3;}",
+        ".f75dvuh{--fluent-TreeItem--level:4;}",
+        ".fqk7yw6{--fluent-TreeItem--level:5;}",
+        ".f1r3z17b{--fluent-TreeItem--level:6;}",
+        ".f1hrpd1h{--fluent-TreeItem--level:7;}",
+        ".f1iy65d0{--fluent-TreeItem--level:8;}",
+        ".ftg42e5{--fluent-TreeItem--level:9;}",
+        ".fyat3t{--fluent-TreeItem--level:10;}"
+    ]
+});
+const useTreeItemStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    const styles = useStyles();
+    const { level } = state;
+    state.root.className = (0, _react.mergeClasses)(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
+    return state;
+};
+function isStaticallyDefinedLevel(level) {
+    return level >= 1 && level <= 10;
+}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        borderRadius: tokens.borderRadiusMedium,\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOCQ,kBAAkB;;;8BA2CY;;;;uBAjDe,gBAAgB;AAMnE,2BAA2B;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA2BrB,CAAC;AACF,MAAMW,SAAS,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;IAAAG,MAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,MAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;IAAAO,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,MAAA,EAAA;QAAAR,MAAA,EAAA;IAAA;IAAAS,OAAA,EAAA;QAAAT,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAU,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;IAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEiB,KAAAA,EAAO,GAAGH,KAAK;IACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,OAAG3B,mBAAY,EAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,CAAA,KAAA,EAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;IAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;IACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}

node_modules/@fluentui/react-tree/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.raw.js

@@ -0,0 +1,77 @@
+'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, {
+    treeItemClassNames: function() {
+        return treeItemClassNames;
+    },
+    useTreeItemStyles_unstable: function() {
+        return useTreeItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const _tokens = require("../../utils/tokens");
+const _useTreeItemLayoutStylesstyles = require("../TreeItemLayout/useTreeItemLayoutStyles.styles");
+const _useTreeItemPersonaLayoutStylesstyles = require("../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles");
+const treeItemClassNames = {
+    root: 'fui-TreeItem'
+};
+const useBaseStyles = (0, _react.makeResetStyles)({
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    paddingRight: _reacttheme.tokens.spacingHorizontalNone,
+    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser
+    ':focus': {
+        outlineStyle: 'none'
+    },
+    ':focus-visible': {
+        outlineStyle: 'none'
+    },
+    // This adds the focus outline for the TreeItemLayout element
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        outlineColor: _reacttheme.tokens.colorStrokeFocus2,
+        outlineRadius: _reacttheme.tokens.borderRadiusMedium,
+        // FIXME: tokens.strokeWidthThick causes some weird bugs
+        outlineWidth: '2px',
+        outlineStyle: 'solid'
+    }, {
+        customizeSelector: (selector)=>`${selector} > .${_useTreeItemLayoutStylesstyles.treeItemLayoutClassNames.root}, ${selector} > .${_useTreeItemPersonaLayoutStylesstyles.treeItemPersonaLayoutClassNames.root}`
+    })
+});
+const useStyles = (0, _react.makeStyles)({
+    ...Object.fromEntries(Array.from({
+        length: 10
+    }, (_, index)=>[
+            `level${index + 1}`,
+            {
+                [_tokens.treeItemLevelToken]: index + 1
+            }
+        ]))
+});
+const useTreeItemStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    const styles = useStyles();
+    const { level } = state;
+    state.root.className = (0, _react.mergeClasses)(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
+    return state;
+};
+function isStaticallyDefinedLevel(level) {
+    return level >= 1 && level <= 10;
+}