feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { useTreeItem_unstable } from './useTreeItem';
+import { renderTreeItem_unstable } from './renderTreeItem';
+import { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';
+import { useTreeItemContextValues_unstable } from './useTreeItemContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The `TreeItem` component represents a single item in a tree.
+ * It expects a certain order of children to work properly: the first child should be the node itself,
+ * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
+ * This order follows the same order as document traversal for the TreeWalker API in JavaScript:
+ * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
+ * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
+ * which should be used as a direct child of TreeItem.
+ *
+ * When a TreeItem has nested child subtree, an expand/collapse control is displayed,
+ * allowing the user to show or hide the children.
+ */ export const TreeItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItem_unstable(props, ref);
+    useTreeItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useTreeItemStyles_unstable')(state);
+    const contextValues = useTreeItemContextValues_unstable(state);
+    return renderTreeItem_unstable(state, contextValues);
+});
+TreeItem.displayName = 'TreeItem';

node_modules/@fluentui/react-tree/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAE1CN,2BAA2BO;IAC3BL,4BAA4B,8BAA8BK;IAE1D,MAAMC,gBAAgBP,kCAAkCM;IACxD,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-tree/lib/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":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+export { TreeItem } from './TreeItem';
+export { renderTreeItem_unstable } from './renderTreeItem';
+export { useTreeItem_unstable } from './useTreeItem';
+export { treeItemClassNames, useTreeItemStyles_unstable } from './useTreeItemStyles.styles';
+export { useTreeItemContextValues_unstable } from './useTreeItemContextValues';

node_modules/@fluentui/react-tree/lib/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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B;AAC5F,SAASC,iCAAiC,QAAQ,6BAA6B"}

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

@@ -0,0 +1,14 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { TreeItemProvider } from '../../contexts';
+/**
+ * Render the final JSX of TreeItem
+ */ export const renderTreeItem_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(TreeItemProvider, {
+            value: contextValues.treeItem,
+            children: state.root.children
+        })
+    });
+};

node_modules/@fluentui/react-tree/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAiBK,OAAOF,cAAcG,QAAQ;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAG3E,EAAE"}

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

@@ -0,0 +1,360 @@
+'use client';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs, isHTMLElement } from '@fluentui/react-utilities';
+import { Space } from '@fluentui/keyboard-keys';
+import { treeDataTypes } from '../../utils/tokens';
+import { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable, TreeContext } from '../../contexts';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { treeClassNames } from '../../Tree';
+/**
+ * Create the state required to render TreeItem.
+ *
+ * The returned state can be modified with hooks such as useTreeItemStyles_unstable,
+ * before being passed to renderTreeItem_unstable.
+ *
+ * @param props - props from this instance of TreeItem
+ * @param ref - reference to root HTMLElement of TreeItem
+ */ export function useTreeItem_unstable(props, ref) {
+    'use no memo';
+    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);
+    if (treeType === 'flat') {
+        warnIfNoProperPropsFlatTreeItem(props);
+    }
+    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
+    const navigationMode = useTreeContext_unstable((ctx)=>{
+        var _ctx_navigationMode;
+        return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
+    });
+    const forceUpdateRovingTabIndex = useTreeContext_unstable((ctx)=>ctx.forceUpdateRovingTabIndex);
+    const { level: contextLevel } = useSubtreeContext_unstable();
+    const parentValue = 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 = 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 = useHasParentContext(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(`.${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 = 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 = useTreeContext_unstable((ctx)=>ctx.selectionMode);
+    const checked = 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 = useEventCallback((event)=>{
+        var _expandIconRef_current;
+        const isEventFromActions = ()=>actionsRef.current && elementContains(actionsRef.current, event.target);
+        const isEventFromSubtree = ()=>subtreeRef.current && 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 ? treeDataTypes.ExpandIconClick : 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: treeDataTypes.Click
+            });
+        });
+    });
+    const handleKeyDown = 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 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 treeDataTypes.Enter:
+                {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    return event.currentTarget.click();
+                }
+            case treeDataTypes.End:
+            case treeDataTypes.Home:
+            case treeDataTypes.ArrowUp:
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
+            case treeDataTypes.ArrowDown:
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
+            case 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 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: treeDataTypes.TypeAhead,
+                parentValue
+            });
+        }
+    });
+    const handleChange = useEventCallback((event)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && 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: slot.always(getIntrinsicElementProps(as, {
+            tabIndex: -1,
+            [dataTreeItemValueAttrName]: value,
+            role: 'treeitem',
+            ...rest,
+            ref: 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/components/TreeItem/useTreeItemContextValues.js

@@ -0,0 +1,25 @@
+export function useTreeItemContextValues_unstable(state) {
+    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, // eslint-disable-next-line @typescript-eslint/no-deprecated
+    isActionsVisible, // eslint-disable-next-line @typescript-eslint/no-deprecated
+    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/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":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EACX,4DAA4D;IAC5DC,gBAAgB,EAChB,4DAA4D;IAC5DC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGZ;IAEJ;;;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/components/TreeItem/useTreeItemStyles.styles.js

@@ -0,0 +1,63 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
+import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
+export const treeItemClassNames = {
+  root: 'fui-TreeItem'
+};
+const useBaseStyles = /*#__PURE__*/__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__*/__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;}"]
+});
+/**
+ * Apply styling to the TreeItem slots based on the state
+ */
+export const useTreeItemStyles_unstable = state => {
+  'use no memo';
+
+  const baseStyles = useBaseStyles();
+  const styles = useStyles();
+  const {
+    level
+  } = state;
+  state.root.className = 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/components/TreeItem/useTreeItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,QAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}

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

@@ -0,0 +1,61 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
+import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
+export const treeItemClassNames = {
+    root: 'fui-TreeItem'
+};
+const useBaseStyles = makeResetStyles({
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    backgroundColor: tokens.colorSubtleBackground,
+    color: tokens.colorNeutralForeground2,
+    paddingRight: 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
+    ...createCustomFocusIndicatorStyle({
+        borderRadius: tokens.borderRadiusMedium,
+        outlineColor: tokens.colorStrokeFocus2,
+        outlineRadius: tokens.borderRadiusMedium,
+        // FIXME: tokens.strokeWidthThick causes some weird bugs
+        outlineWidth: '2px',
+        outlineStyle: 'solid'
+    }, {
+        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`
+    })
+});
+const useStyles = makeStyles({
+    ...Object.fromEntries(Array.from({
+        length: 10
+    }, (_, index)=>[
+            `level${index + 1}`,
+            {
+                [treeItemLevelToken]: index + 1
+            }
+        ]))
+});
+/**
+ * Apply styling to the TreeItem slots based on the state
+ */ export const useTreeItemStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    const styles = useStyles();
+    const { level } = state;
+    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
+    return state;
+};
+function isStaticallyDefinedLevel(level) {
+    return level >= 1 && level <= 10;
+}