feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tree/lib/FlatTree.js

@@ -0,0 +1 @@
+export { FlatTree, flatTreeClassNames, renderFlatTree_unstable, useFlatTreeContextValues_unstable, useFlatTreeStyles_unstable, useFlatTree_unstable, useHeadlessFlatTree_unstable } from './components/FlatTree/index';

node_modules/@fluentui/react-tree/lib/FlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FlatTree.ts"],"sourcesContent":["export type {\n  FlatTreeContextValues,\n  FlatTreeProps,\n  FlatTreeSlots,\n  FlatTreeState,\n  HeadlessFlatTree,\n  HeadlessFlatTreeItem,\n  HeadlessFlatTreeItemProps,\n  HeadlessFlatTreeOptions,\n} from './components/FlatTree/index';\nexport {\n  FlatTree,\n  flatTreeClassNames,\n  renderFlatTree_unstable,\n  useFlatTreeContextValues_unstable,\n  useFlatTreeStyles_unstable,\n  useFlatTree_unstable,\n  useHeadlessFlatTree_unstable,\n} from './components/FlatTree/index';\n"],"names":["FlatTree","flatTreeClassNames","renderFlatTree_unstable","useFlatTreeContextValues_unstable","useFlatTreeStyles_unstable","useFlatTree_unstable","useHeadlessFlatTree_unstable"],"mappings":"AAUA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,oBAAoB,EACpBC,4BAA4B,QACvB,8BAA8B"}

node_modules/@fluentui/react-tree/lib/FlatTreeItem.js

@@ -0,0 +1 @@
+export { FlatTreeItem } from './components/FlatTreeItem/index';

node_modules/@fluentui/react-tree/lib/FlatTreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FlatTreeItem.ts"],"sourcesContent":["export type { FlatTreeItemProps } from './components/FlatTreeItem/index';\nexport { FlatTreeItem } from './components/FlatTreeItem/index';\n"],"names":["FlatTreeItem"],"mappings":"AACA,SAASA,YAAY,QAAQ,kCAAkC"}

node_modules/@fluentui/react-tree/lib/Tree.js

@@ -0,0 +1 @@
+export { Tree, renderTree_unstable, treeClassNames, useTreeContextValues_unstable, useTreeStyles_unstable, useTree_unstable } from './components/Tree/index';

node_modules/@fluentui/react-tree/lib/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Tree.ts"],"sourcesContent":["export type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n  TreeNavigationMode,\n  TreeNavigationDataParam,\n} from './components/Tree/index';\nexport {\n  Tree,\n  renderTree_unstable,\n  treeClassNames,\n  useTreeContextValues_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n} from './components/Tree/index';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"mappings":"AAeA,SACEA,IAAI,EACJC,mBAAmB,EACnBC,cAAc,EACdC,6BAA6B,EAC7BC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}

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

@@ -0,0 +1 @@
+export { TreeItem, renderTreeItem_unstable, treeItemClassNames, useTreeItemContextValues_unstable, useTreeItemStyles_unstable, useTreeItem_unstable } from './components/TreeItem/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreeItem.ts"],"sourcesContent":["export type {\n  TreeItemCSSProperties,\n  TreeItemContextValues,\n  TreeItemOpenChangeData,\n  TreeItemOpenChangeEvent,\n  TreeItemProps,\n  TreeItemSlots,\n  TreeItemState,\n  TreeItemType,\n  TreeItemValue,\n} from './components/TreeItem/index';\nexport {\n  TreeItem,\n  renderTreeItem_unstable,\n  treeItemClassNames,\n  useTreeItemContextValues_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItem_unstable,\n} from './components/TreeItem/index';\n"],"names":["TreeItem","renderTreeItem_unstable","treeItemClassNames","useTreeItemContextValues_unstable","useTreeItemStyles_unstable","useTreeItem_unstable"],"mappings":"AAWA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,iCAAiC,EACjCC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}

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

@@ -0,0 +1 @@
+export { TreeItemLayout, renderTreeItemLayout_unstable, treeItemLayoutClassNames, useTreeItemLayoutStyles_unstable, useTreeItemLayout_unstable } from './components/TreeItemLayout/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreeItemLayout.ts"],"sourcesContent":["export type {\n  TreeItemLayoutActionSlotProps,\n  TreeItemLayoutActionVisibilityChangeData,\n  TreeItemLayoutProps,\n  TreeItemLayoutSlots,\n  TreeItemLayoutState,\n} from './components/TreeItemLayout/index';\nexport {\n  TreeItemLayout,\n  renderTreeItemLayout_unstable,\n  treeItemLayoutClassNames,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './components/TreeItemLayout/index';\n"],"names":["TreeItemLayout","renderTreeItemLayout_unstable","treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,6BAA6B,EAC7BC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}

node_modules/@fluentui/react-tree/lib/TreeItemPersonaLayout.js

@@ -0,0 +1 @@
+export { TreeItemPersonaLayout, renderTreeItemPersonaLayout_unstable, treeItemPersonaLayoutClassNames, useTreeItemPersonaLayoutStyles_unstable, useTreeItemPersonaLayout_unstable } from './components/TreeItemPersonaLayout/index';

node_modules/@fluentui/react-tree/lib/TreeItemPersonaLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TreeItemPersonaLayout.ts"],"sourcesContent":["export type {\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './components/TreeItemPersonaLayout/index';\nexport {\n  TreeItemPersonaLayout,\n  renderTreeItemPersonaLayout_unstable,\n  treeItemPersonaLayoutClassNames,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './components/TreeItemPersonaLayout/index';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable"],"mappings":"AAMA,SACEA,qBAAqB,EACrBC,oCAAoC,EACpCC,+BAA+B,EAC/BC,uCAAuC,EACvCC,iCAAiC,QAC5B,2CAA2C"}

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

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { useFlatTree_unstable } from './useFlatTree';
+import { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';
+import { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';
+import { renderFlatTree_unstable } from './renderFlatTree';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
+ */ export const FlatTree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useFlatTree_unstable(props, ref);
+    const contextValues = useFlatTreeContextValues_unstable(state);
+    useFlatTreeStyles_unstable(state);
+    useCustomStyleHook_unstable('useFlatTreeStyles_unstable')(state);
+    return renderFlatTree_unstable(state, contextValues);
+});
+FlatTree.displayName = 'FlatTree';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/FlatTree.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FlatTreeProps } from './FlatTree.types';\nimport { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nimport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nimport { renderFlatTree_unstable } from './renderFlatTree';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport const FlatTree: ForwardRefComponent<FlatTreeProps> = React.forwardRef((props, ref) => {\n  const state = useFlatTree_unstable(props, ref);\n  const contextValues = useFlatTreeContextValues_unstable(state);\n  useFlatTreeStyles_unstable(state);\n  useCustomStyleHook_unstable('useFlatTreeStyles_unstable')(state);\n\n  return renderFlatTree_unstable(state, contextValues);\n});\n\nFlatTree.displayName = 'FlatTree';\n"],"names":["React","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","useCustomStyleHook_unstable","FlatTree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBR,kCAAkCO;IACxDR,2BAA2BQ;IAC3BL,4BAA4B,8BAA8BK;IAE1D,OAAON,wBAAwBM,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\nimport type { TreeContextValue } from '../../contexts';\n\nexport type FlatTreeSlots = TreeSlots;\n\nexport type FlatTreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type FlatTreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * Indicates how navigation between a treeitem and its actions work\n   * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n   * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem\n   * @default 'tree'\n   */\n  navigationMode?: 'tree' | 'treegrid';\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\nexport type FlatTreeState = ComponentState<FlatTreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"mappings":"AA8FA,WAGI"}

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

@@ -0,0 +1,6 @@
+export { FlatTree } from './FlatTree';
+export { useHeadlessFlatTree_unstable } from './useHeadlessFlatTree';
+export { useFlatTree_unstable } from './useFlatTree';
+export { flatTreeClassNames, useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';
+export { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';
+export { renderFlatTree_unstable } from './renderFlatTree';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/index.ts"],"sourcesContent":["export { FlatTree } from './FlatTree';\nexport type { FlatTreeContextValues, FlatTreeProps, FlatTreeSlots, FlatTreeState } from './FlatTree.types';\nexport type {\n  HeadlessFlatTree,\n  HeadlessFlatTreeItem,\n  HeadlessFlatTreeItemProps,\n  HeadlessFlatTreeOptions,\n} from './useHeadlessFlatTree';\nexport { useHeadlessFlatTree_unstable } from './useHeadlessFlatTree';\nexport { useFlatTree_unstable } from './useFlatTree';\nexport { flatTreeClassNames, useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nexport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nexport { renderFlatTree_unstable } from './renderFlatTree';\n"],"names":["FlatTree","useHeadlessFlatTree_unstable","useFlatTree_unstable","flatTreeClassNames","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAQtC,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B;AAC5F,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,uBAAuB,QAAQ,mBAAmB"}

node_modules/@fluentui/react-tree/lib/components/FlatTree/renderFlatTree.js

@@ -0,0 +1,2 @@
+import { renderTree_unstable } from '../../Tree';
+export const renderFlatTree_unstable = renderTree_unstable;

node_modules/@fluentui/react-tree/lib/components/FlatTree/renderFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/renderFlatTree.ts"],"sourcesContent":["import { renderTree_unstable } from '../../Tree';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\nexport const renderFlatTree_unstable: (state: FlatTreeState, contextValues: FlatTreeContextValues) => JSXElement =\n  renderTree_unstable;\n"],"names":["renderTree_unstable","renderFlatTree_unstable"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,aAAa;AAGjD,OAAO,MAAMC,0BACXD,oBAAoB"}

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatControllableCheckedItems.js

@@ -0,0 +1,88 @@
+'use client';
+import { useControllableState } from '@fluentui/react-utilities';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import * as React from 'react';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+export function useFlatControllableCheckedItems(props, headlessTree) {
+    return useControllableState({
+        initialState: ImmutableMap.empty,
+        state: React.useMemo(()=>props.selectionMode ? props.checkedItems && createCheckedItems(props.checkedItems) : undefined, [
+            props.checkedItems,
+            props.selectionMode
+        ]),
+        defaultState: props.defaultCheckedItems ? ()=>initializeCheckedItems(props, headlessTree) : undefined
+    });
+}
+export function createNextFlatCheckedItems(data, previousCheckedItems, headlessTree) {
+    if (data.selectionMode === 'single') {
+        return ImmutableMap.from([
+            [
+                data.value,
+                data.checked
+            ]
+        ]);
+    }
+    const treeItem = headlessTree.get(data.value);
+    if (!treeItem) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error(`@fluentui/react-tree [useHeadlessFlatTree]:
+Tree item ${data.value} not found.`);
+        }
+        return previousCheckedItems;
+    }
+    // Calling `ImmutableMap.set()` creates a new ImmutableMap - avoid this in loops.
+    // Instead write all updates to a native Map and create a new ImmutableMap at the end.
+    // Note that all descendants of the toggled item are processed even if they are collapsed,
+    // making the choice of algorithm more important.
+    const nextCheckedItemsMap = new Map(ImmutableMap.dangerouslyGetInternalMap(previousCheckedItems));
+    // The toggled item itself
+    nextCheckedItemsMap.set(data.value, data.checked);
+    // Descendant updates
+    for (const children of headlessTree.subtree(data.value)){
+        nextCheckedItemsMap.set(children.value, data.checked);
+    }
+    // Ancestor updates - must be done after adding descendants and the toggle item.
+    // If any ancestor is mixed, all ancestors above it are mixed too.
+    let isAncestorsMixed = false;
+    for (const ancestor of headlessTree.ancestors(treeItem.value)){
+        if (isAncestorsMixed) {
+            nextCheckedItemsMap.set(ancestor.value, 'mixed');
+            continue;
+        }
+        // For each ancestor, if all of its children now have the same checked state as the toggled item,
+        // set the ancestor to that checked state too. Otherwise it is 'mixed'.
+        let childrenWithSameState = 0;
+        for (const child of headlessTree.children(ancestor.value)){
+            if ((nextCheckedItemsMap.get(child.value) || false) === data.checked) {
+                childrenWithSameState++;
+            }
+        }
+        if (childrenWithSameState === ancestor.childrenValues.length) {
+            nextCheckedItemsMap.set(ancestor.value, data.checked);
+        } else {
+            nextCheckedItemsMap.set(ancestor.value, 'mixed');
+            isAncestorsMixed = true;
+        }
+    }
+    const nextCheckedItems = ImmutableMap.from(nextCheckedItemsMap);
+    return nextCheckedItems;
+}
+function initializeCheckedItems(props, headlessTree) {
+    if (!props.selectionMode) {
+        return ImmutableMap.empty;
+    }
+    let state = createCheckedItems(props.defaultCheckedItems);
+    // if selectionMode is multiselect, we need to calculate the checked state of all children
+    // and ancestors of the defaultCheckedItems
+    if (props.selectionMode === 'multiselect') {
+        for (const [value, checked] of state){
+            state = createNextFlatCheckedItems({
+                value,
+                checked,
+                selectionMode: props.selectionMode
+            }, state, headlessTree);
+        }
+    }
+    return state;
+}

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTree.js

@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import { useRootTree } from '../../hooks/useRootTree';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';
+import { useSubtree } from '../../hooks/useSubtree';
+import { ImmutableSet } from '../../utils/ImmutableSet';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import { SubtreeContext } from '../../contexts/subtreeContext';
+export const useFlatTree_unstable = (props, ref)=>{
+    'use no memo';
+    const isRoot = React.useContext(SubtreeContext) === undefined;
+    // as level is static, this doesn't break rule of hooks
+    // and if this becomes an issue later on, this can be easily converted
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
+};
+function useRootFlatTree(props, ref) {
+    const navigation = useFlatTreeNavigation(props.navigationMode);
+    return Object.assign(useRootTree({
+        ...props,
+        onNavigation: useEventCallback((event, data)=>{
+            var _props_onNavigation;
+            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+            if (!event.isDefaultPrevented()) {
+                navigation.navigate(data);
+            }
+        })
+    }, useMergedRefs(ref, navigation.rootRef)), {
+        treeType: 'flat',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
+    });
+}
+function useSubFlatTree(props, ref) {
+    if (process.env.NODE_ENV === 'development') {
+        throw new Error(`@fluentui/react-tree [useFlatTree]:
+Subtrees are not allowed in a FlatTree!
+You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);
+    }
+    return {
+        ...useSubtree(props, ref),
+        // ------ defaultTreeContextValue
+        level: 0,
+        contextType: 'root',
+        treeType: 'nested',
+        selectionMode: 'none',
+        openItems: ImmutableSet.empty,
+        checkedItems: ImmutableMap.empty,
+        requestTreeResponse: noop,
+        forceUpdateRovingTabIndex: noop,
+        appearance: 'subtle',
+        size: 'medium',
+        // ------ defaultTreeContextValue
+        open: false
+    };
+}
+function noop() {
+/* do nothing */ }

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/useFlatTree.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  'use no memo';\n\n  const isRoot = React.useContext(SubtreeContext) === undefined;\n  // as level is static, this doesn't break rule of hooks\n  // and if this becomes an issue later on, this can be easily converted\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const navigation = useFlatTreeNavigation(props.navigationMode);\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    forceUpdateRovingTabIndex: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["React","useRootTree","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","navigationMode","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA;IAEA,MAAMC,SAASZ,MAAMa,UAAU,CAACL,oBAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAMM,aAAab,sBAAsBM,MAAMQ,cAAc;IAE7D,OAAOC,OAAOC,MAAM,CAClBnB,YACE;QACE,GAAGS,KAAK;QACRW,cAAcnB,iBAAiB,CAACoB,OAAOC;gBACrCb;aAAAA,sBAAAA,MAAMW,YAAY,cAAlBX,0CAAAA,yBAAAA,OAAqBY,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BP,WAAWQ,QAAQ,CAACF;YACtB;QACF;IACF,GACApB,cAAcQ,KAAKM,WAAWS,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BX,WAAWW,yBAAyB;IACjE;AAEJ;AAEA,SAASZ,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAG3B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCsB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW9B,aAAa+B,KAAK;QAC7BC,cAAc/B,aAAa8B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTreeContextValues.js

@@ -0,0 +1,22 @@
+export const useFlatTreeContextValues_unstable = (state)=>{
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const tree = {
+        treeType,
+        size,
+        openItems,
+        appearance,
+        checkedItems,
+        selectionMode,
+        navigationMode,
+        contextType,
+        level,
+        requestTreeResponse,
+        forceUpdateRovingTabIndex
+    };
+    return {
+        tree
+    };
+};

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTreeContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n  const {\n    openItems,\n    level,\n    contextType,\n    treeType,\n    checkedItems,\n    selectionMode,\n    navigationMode,\n    appearance,\n    size,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    treeType,\n    size,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    navigationMode,\n    contextType,\n    level,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  };\n\n  return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"mappings":"AAGA,OAAO,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;IACJ;;;GAGC,GACD,MAAMY,OAAyB;QAC7BR;QACAK;QACAR;QACAO;QACAH;QACAC;QACAC;QACAJ;QACAD;QACAQ;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTreeStyles.styles.js

@@ -0,0 +1,15 @@
+'use client';
+
+import { __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const flatTreeClassNames = {
+  root: 'fui-FlatTree'
+};
+const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
+export const useFlatTreeStyles_unstable = state => {
+  'use no memo';
+
+  const baseStyles = useBaseStyles();
+  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTreeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n    root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGL,aAAA,qGAIrB,CAAC;AACF,OAAO,MAAMM,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;EAClCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTreeStyles.styles.raw.js

@@ -0,0 +1,17 @@
+'use client';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const flatTreeClassNames = {
+    root: 'fui-FlatTree'
+};
+const useBaseStyles = makeResetStyles({
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: tokens.spacingVerticalXXS
+});
+export const useFlatTreeStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-tree/lib/components/FlatTree/useFlatTreeStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTree/useFlatTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { FlatTreeSlots, FlatTreeState } from './FlatTree.types';\n\nexport const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>> = {\n  root: 'fui-FlatTree',\n};\n\nconst useBaseStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: tokens.spacingVerticalXXS,\n});\n\nexport const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAE/D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,qBAA4E;IACvFC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBL,gBAAgB;IACpCM,SAAS;IACTC,eAAe;IACfC,QAAQN,OAAOO,kBAAkB;AACnC;AAEA,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAaP;IACnBM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,mBAAmBC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAC7F,OAAOF;AACT,EAAE"}

node_modules/@fluentui/react-tree/lib/components/FlatTree/useHeadlessFlatTree.js

@@ -0,0 +1,119 @@
+'use client';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { createHeadlessTree } from '../../utils/createHeadlessTree';
+import { treeDataTypes } from '../../utils/tokens';
+import { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
+import { ImmutableSet } from '../../utils/ImmutableSet';
+import { createNextFlatCheckedItems, useFlatControllableCheckedItems } from './useFlatControllableCheckedItems';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+/**
+ * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
+ * in multiple scenarios including virtualization.
+ *
+ * !!A flat tree is an unofficial spec for tree!!
+ *
+ * It should be used on cases where more complex interactions with a Tree is required.
+ * On simple scenarios it is advised to simply use a nested structure instead.
+ *
+ * @param props - a list of tree items
+ * @param options - in case control over the internal openItems is required
+ */ export function useHeadlessFlatTree_unstable(props, options = {}) {
+    'use no memo';
+    const headlessTree = React.useMemo(()=>createHeadlessTree(props), [
+        props
+    ]);
+    const [openItems, setOpenItems] = useControllableOpenItems(options);
+    const [checkedItems, setCheckedItems] = useFlatControllableCheckedItems(options, headlessTree);
+    const navigation = useFlatTreeNavigation();
+    const treeRef = React.useRef(null);
+    const handleOpenChange = useEventCallback((event, data)=>{
+        var _options_onOpenChange;
+        const nextOpenItems = createNextOpenItems(data, openItems);
+        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
+            ...data,
+            openItems: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems)
+        });
+        setOpenItems(nextOpenItems);
+    });
+    const handleCheckedChange = useEventCallback((event, data)=>{
+        var _options_onCheckedChange;
+        const nextCheckedItems = createNextFlatCheckedItems(data, checkedItems, headlessTree);
+        (_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {
+            ...data,
+            checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems)
+        });
+        setCheckedItems(nextCheckedItems);
+    });
+    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{
+        const item = headlessTree.get(data.value);
+        if (item) {
+            switch(data.type){
+                case treeDataTypes.TypeAhead:
+                    return item;
+                case treeDataTypes.ArrowLeft:
+                    return headlessTree.get(item.parentValue);
+                case treeDataTypes.ArrowRight:
+                    return visibleItems[item.index + 1];
+                case treeDataTypes.End:
+                    return visibleItems[visibleItems.length - 1];
+                case treeDataTypes.Home:
+                    return visibleItems[0];
+                case treeDataTypes.ArrowDown:
+                    return visibleItems[item.index + 1];
+                case treeDataTypes.ArrowUp:
+                    return visibleItems[item.index - 1];
+            }
+        }
+    });
+    const getElementFromItem = React.useCallback((item)=>{
+        var _treeRef_current;
+        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}="${item.value}"]`);
+    }, []);
+    const ref = useMergedRefs(treeRef, navigation.rootRef);
+    const getTreeProps = React.useCallback(()=>{
+        var _options_onNavigation;
+        return {
+            ref,
+            openItems,
+            selectionMode: options.selectionMode,
+            checkedItems,
+            onOpenChange: handleOpenChange,
+            onCheckedChange: handleCheckedChange,
+            onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop
+        };
+    }, // ref, handleOpenChange - useEventCallback, handleCheckedChange - useEventCallback
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        openItems,
+        checkedItems,
+        options.selectionMode,
+        options.onNavigation
+    ]);
+    const items = React.useCallback(()=>headlessTree.visibleItems(openItems), [
+        openItems,
+        headlessTree
+    ]);
+    const getItem = React.useCallback((value)=>headlessTree.get(value), [
+        headlessTree
+    ]);
+    return React.useMemo(()=>({
+            navigate: navigation.navigate,
+            getTreeProps,
+            getNextNavigableItem,
+            getElementFromItem,
+            items,
+            getItem
+        }), [
+        navigation.navigate,
+        getTreeProps,
+        getNextNavigableItem,
+        getElementFromItem,
+        items,
+        getItem
+    ]);
+}
+/** @internal */ function noop() {
+/* noop */ }

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

@@ -0,0 +1,4 @@
+import { TreeItem } from '../TreeItem/TreeItem';
+/**
+ * The `FlatTreeItem` component represents a single item in a flat tree.
+ */ export const FlatTreeItem = TreeItem;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTreeItem/FlatTreeItem.tsx"],"sourcesContent":["import { FlatTreeItemProps } from './FlatTreeItem.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { TreeItem } from '../TreeItem/TreeItem';\n\n/**\n * The `FlatTreeItem` component represents a single item in a flat tree.\n */\nexport const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps> = TreeItem as ForwardRefComponent<FlatTreeItemProps>;\n"],"names":["TreeItem","FlatTreeItem"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,uBAAuB;AAEhD;;CAEC,GACD,OAAO,MAAMC,eAAuDD,SAAmD"}

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

@@ -0,0 +1,3 @@
+/**
+ * FlatTreeItem Props
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTreeItem/FlatTreeItem.types.ts"],"sourcesContent":["import type { TreeItemProps, TreeItemValue } from '../TreeItem/TreeItem.types';\n\n/**\n * FlatTreeItem Props\n */\nexport type FlatTreeItemProps = TreeItemProps & {\n  value: TreeItemValue;\n  'aria-level': number;\n  'aria-setsize': number;\n  'aria-posinset': number;\n};\n"],"names":[],"mappings":"AAEA;;CAEC,GACD,WAKE"}

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

@@ -0,0 +1 @@
+export { FlatTreeItem } from './FlatTreeItem';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FlatTreeItem/index.ts"],"sourcesContent":["export { FlatTreeItem } from './FlatTreeItem';\nexport type { FlatTreeItemProps } from './FlatTreeItem.types';\n"],"names":["FlatTreeItem"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB"}

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useTree_unstable } from './useTree';
+import { useTreeContextValues_unstable } from './useTreeContextValues';
+import { useTreeStyles_unstable } from './useTreeStyles.styles';
+import { renderTree_unstable } from './renderTree';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The `Tree` component renders nested items in a hierarchical structure.
+ * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
+ */ export const Tree = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTree_unstable(props, ref);
+    const contextValues = useTreeContextValues_unstable(state);
+    useTreeStyles_unstable(state);
+    useCustomStyleHook_unstable('useTreeStyles_unstable')(state);
+    return renderTree_unstable(state, contextValues);
+});
+Tree.displayName = 'Tree';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTree_unstable } from './useTree';\nimport type { TreeProps } from './Tree.types';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport { renderTree_unstable } from './renderTree';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `Tree` component renders nested items in a hierarchical structure.\n * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n  const state = useTree_unstable(props, ref);\n  const contextValues = useTreeContextValues_unstable(state);\n  useTreeStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeStyles_unstable')(state);\n\n  return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","useTreeContextValues_unstable","useTreeStyles_unstable","renderTree_unstable","useCustomStyleHook_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQT,iBAAiBO,OAAOC;IACtC,MAAME,gBAAgBT,8BAA8BQ;IACpDP,uBAAuBO;IACvBL,4BAA4B,0BAA0BK;IAEtD,OAAON,oBAAoBM,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering Tree
+ */ export { };

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

@@ -0,0 +1,5 @@
+export { Tree } from './Tree';
+export { useTree_unstable } from './useTree';
+export { useTreeContextValues_unstable } from './useTreeContextValues';
+export { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';
+export { renderTree_unstable } from './renderTree';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tree/index.ts"],"sourcesContent":["export { Tree } from './Tree';\nexport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n  TreeNavigationMode,\n  TreeNavigationDataParam,\n} from './Tree.types';\nexport { useTree_unstable } from './useTree';\nexport { useTreeContextValues_unstable } from './useTreeContextValues';\nexport { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';\nexport { renderTree_unstable } from './renderTree';\n"],"names":["Tree","useTree_unstable","useTreeContextValues_unstable","treeClassNames","useTreeStyles_unstable","renderTree_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAgB9B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB;AAChF,SAASC,mBAAmB,QAAQ,eAAe"}

node_modules/@fluentui/react-tree/lib/components/Tree/renderTree.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { TreeProvider } from '../TreeProvider';
+export const renderTree_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(TreeProvider, {
+        value: contextValues.tree,
+        children: state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        }) : /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-tree/lib/components/Tree/renderTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tree/renderTree.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 { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\nimport { TreeProvider } from '../TreeProvider';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues): JSXElement => {\n  assertSlots<TreeSlots>(state);\n  return (\n    <TreeProvider value={contextValues.tree}>\n      {state.collapseMotion ? (\n        <state.collapseMotion>\n          <state.root />\n        </state.collapseMotion>\n      ) : (\n        <state.root />\n      )}\n    </TreeProvider>\n  );\n};\n"],"names":["assertSlots","TreeProvider","renderTree_unstable","state","contextValues","value","tree","collapseMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IACvB,qBACE,KAACF;QAAaI,OAAOD,cAAcE,IAAI;kBACpCH,MAAMI,cAAc,iBACnB,KAACJ,MAAMI,cAAc;sBACnB,cAAA,KAACJ,MAAMK,IAAI;2BAGb,KAACL,MAAMK,IAAI;;AAInB,EAAE"}

node_modules/@fluentui/react-tree/lib/components/Tree/useNestedControllableCheckedItems.js

@@ -0,0 +1,23 @@
+'use client';
+import * as React from 'react';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+import { createCheckedItems } from '../../utils/createCheckedItems';
+export function useNestedCheckedItems(props) {
+    return React.useMemo(()=>createCheckedItems(props.checkedItems), [
+        props.checkedItems
+    ]);
+}
+export function createNextNestedCheckedItems(data, previousCheckedItems) {
+    if (data.selectionMode === 'single') {
+        return ImmutableMap.from([
+            [
+                data.value,
+                data.checked
+            ]
+        ]);
+    }
+    if (data.selectionMode === 'multiselect') {
+        return previousCheckedItems.set(data.value, data.checked);
+    }
+    return previousCheckedItems;
+}

node_modules/@fluentui/react-tree/lib/components/Tree/useNestedControllableCheckedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tree/useNestedControllableCheckedItems.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(\n  props: Pick<TreeProps, 'checkedItems'>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n  data: Pick<TreeCheckedChangeData, 'selectionMode' | 'value' | 'checked'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.from([[data.value, data.checked]]);\n  }\n  if (data.selectionMode === 'multiselect') {\n    return previousCheckedItems.set(data.value, data.checked);\n  }\n  return previousCheckedItems;\n}\n"],"names":["React","ImmutableMap","createCheckedItems","useNestedCheckedItems","props","useMemo","checkedItems","createNextNestedCheckedItems","data","previousCheckedItems","selectionMode","from","value","checked","set"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE,OAAO,SAASC,sBACdC,KAAsC;IAEtC,OAAOJ,MAAMK,OAAO,CAAC,IAAMH,mBAAmBE,MAAME,YAAY,GAAG;QAACF,MAAME,YAAY;KAAC;AACzF;AAEA,OAAO,SAASC,6BACdC,IAAwE,EACxEC,oBAAoE;IAEpE,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOT,aAAaU,IAAI,CAAC;YAAC;gBAACH,KAAKI,KAAK;gBAAEJ,KAAKK,OAAO;aAAC;SAAC;IACvD;IACA,IAAIL,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBK,GAAG,CAACN,KAAKI,KAAK,EAAEJ,KAAKK,OAAO;IAC1D;IACA,OAAOJ;AACT"}

node_modules/@fluentui/react-tree/lib/components/Tree/useTree.js

@@ -0,0 +1,74 @@
+'use client';
+import * as React from 'react';
+import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
+import { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';
+import { SubtreeContext } from '../../contexts/subtreeContext';
+import { useRootTree } from '../../hooks/useRootTree';
+import { useSubtree } from '../../hooks/useSubtree';
+import { useTreeNavigation } from '../../hooks/useTreeNavigation';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { ImmutableSet } from '../../utils/ImmutableSet';
+import { ImmutableMap } from '../../utils/ImmutableMap';
+export const useTree_unstable = (props, ref)=>{
+    'use no memo';
+    const isRoot = React.useContext(SubtreeContext) === undefined;
+    // as level is static, this doesn't break rule of hooks
+    // and if this becomes an issue later on, this can be easily converted
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);
+};
+function useNestedRootTree(props, ref) {
+    'use no memo';
+    const [openItems, setOpenItems] = useControllableOpenItems(props);
+    const checkedItems = useNestedCheckedItems(props);
+    const navigation = useTreeNavigation(props.navigationMode);
+    return Object.assign(useRootTree({
+        ...props,
+        openItems,
+        checkedItems,
+        onOpenChange: useEventCallback((event, data)=>{
+            var _props_onOpenChange;
+            const nextOpenItems = createNextOpenItems(data, openItems);
+            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
+                ...data,
+                openItems: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems)
+            });
+            setOpenItems(nextOpenItems);
+        }),
+        onNavigation: useEventCallback((event, data)=>{
+            var _props_onNavigation;
+            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
+            if (!event.isDefaultPrevented()) {
+                navigation.navigate(data, {
+                    preventScroll: data.isScrollPrevented()
+                });
+            }
+        }),
+        onCheckedChange: useEventCallback((event, data)=>{
+            var _props_onCheckedChange;
+            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);
+            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
+                ...data,
+                checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems)
+            });
+        })
+    }, useMergedRefs(ref, navigation.treeRef)), {
+        treeType: 'nested',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
+    });
+}
+function useNestedSubtree(props, ref) {
+    'use no memo';
+    if (process.env.NODE_ENV === 'development') {
+        // this doesn't break rule of hooks, as environment is a static value
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);
+        if (treeType === 'flat') {
+            throw new Error(`@fluentui/react-tree [useTree]:
+Subtrees are not allowed in a FlatTree!
+You cannot use a <Tree> component inside of a <FlatTree> component!`);
+        }
+    }
+    return useSubtree(props, ref);
+}

node_modules/@fluentui/react-tree/lib/components/Tree/useTreeContextValues.js

@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+export function useTreeContextValues_unstable(state) {
+    'use no memo';
+    if (state.contextType === 'root') {
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
+        /**
+     * This context is created with "@fluentui/react-context-selector",
+     * there is no sense to memoize it
+     */ const tree = {
+            treeType,
+            size,
+            openItems,
+            appearance,
+            checkedItems,
+            selectionMode,
+            navigationMode,
+            contextType,
+            level,
+            requestTreeResponse,
+            forceUpdateRovingTabIndex
+        };
+        return {
+            tree
+        };
+    }
+    return {
+        // contextType is statically determined by the context
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        tree: React.useMemo(()=>({
+                level: state.level,
+                contextType: 'subtree'
+            }), [
+            state.level
+        ])
+    };
+}

node_modules/@fluentui/react-tree/lib/components/Tree/useTreeContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  'use no memo';\n\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */\n    const tree: TreeContextValue = {\n      treeType,\n      size,\n      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      contextType,\n      level,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;QACJ;;;KAGC,GACD,MAAMY,OAAyB;YAC7BR;YACAK;YACAP;YACAM;YACAH;YACAC;YACAC;YACAN;YACAE;YACAO;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMd,MAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEV,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

node_modules/@fluentui/react-tree/lib/components/Tree/useTreeStyles.styles.js

@@ -0,0 +1,24 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const treeClassNames = {
+  root: 'fui-Tree'
+};
+const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
+const useStyles = /*#__PURE__*/__styles({
+  subtree: {
+    z8tnut: "fclwglc"
+  }
+}, {
+  d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
+});
+export const useTreeStyles_unstable = state => {
+  'use no memo';
+
+  const baseStyles = useBaseStyles();
+  const styles = useStyles();
+  const isSubTree = state.level > 1;
+  state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-tree/lib/components/Tree/useTreeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n    subtree: {\n        paddingTop: tokens.spacingVerticalXXS\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const isSubTree = state.level > 1;\n    state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGN,aAAA,qGAIrB,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;EACjCJ,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;EACvH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-tree/lib/components/Tree/useTreeStyles.styles.raw.js

@@ -0,0 +1,24 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const treeClassNames = {
+    root: 'fui-Tree'
+};
+const useBaseStyles = makeResetStyles({
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: tokens.spacingVerticalXXS
+});
+const useStyles = makeStyles({
+    subtree: {
+        paddingTop: tokens.spacingVerticalXXS
+    }
+});
+export const useTreeStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    const styles = useStyles();
+    const isSubTree = state.level > 1;
+    state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-tree/lib/components/Tree/useTreeStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tree/useTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>> = {\n  root: 'fui-Tree',\n};\n\nconst useBaseStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: tokens.spacingVerticalXXS,\n});\n\nconst useStyles = makeStyles({\n  subtree: {\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n  'use no memo';\n\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n\n  state.root.className = mergeClasses(\n    treeClassNames.root,\n    baseStyles,\n    isSubTree && styles.subtree,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useStyles","subtree","paddingTop","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,iBAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBN,gBAAgB;IACpCO,SAAS;IACTC,eAAe;IACfC,QAAQN,OAAOO,kBAAkB;AACnC;AAEA,MAAMC,YAAYV,WAAW;IAC3BW,SAAS;QACPC,YAAYV,OAAOO,kBAAkB;IACvC;AACF;AAEA,OAAO,MAAMI,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaV;IACnB,MAAMW,SAASN;IACf,MAAMO,YAAYH,MAAMI,KAAK,GAAG;IAEhCJ,MAAMV,IAAI,CAACe,SAAS,GAAGlB,aACrBE,eAAeC,IAAI,EACnBW,YACAE,aAAaD,OAAOL,OAAO,EAC3BG,MAAMV,IAAI,CAACe,SAAS;IAEtB,OAAOL;AACT,EAAE"}

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;
+}

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

@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { ChevronRight12Regular } from '@fluentui/react-icons';
+import { durations, curves } from '@fluentui/react-motion';
+import { useTreeItemContext_unstable } from '../contexts/treeItemContext';
+export const TreeItemChevron = /*#__PURE__*/ React.memo(()=>{
+    const open = useTreeItemContext_unstable((ctx)=>ctx.open);
+    const { dir } = useFluent_unstable();
+    const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+    return /*#__PURE__*/ React.createElement(ChevronRight12Regular, {
+        style: {
+            ...expandIconInlineStyles[expandIconRotation],
+            transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`
+        }
+    });
+});
+TreeItemChevron.displayName = 'TreeItemChevron';
+const expandIconInlineStyles = {
+    90: {
+        transform: `rotate(90deg)`
+    },
+    0: {
+        transform: `rotate(0deg)`
+    },
+    180: {
+        transform: `rotate(180deg)`
+    }
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemChevron.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return (\n    <ChevronRight12Regular\n      style={{\n        ...expandIconInlineStyles[expandIconRotation],\n        transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n      }}\n    />\n  );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","durations","curves","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","transition","durationNormal","curveEasyEaseMax","displayName","transform"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAC3D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBN,MAAMO,IAAI,CAAC;IACxC,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,GAAGT;IAEhB,MAAMU,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,qBACE,oBAACR;QACCU,OAAO;YACL,GAAGC,sBAAsB,CAACF,mBAAmB;YAC7CG,YAAY,CAAC,UAAU,EAAEX,UAAUY,cAAc,CAAC,GAAG,EAAEX,OAAOY,gBAAgB,EAAE;QAClF;;AAGN,GAAG;AACHV,gBAAgBW,WAAW,GAAG;AAE9B,MAAMJ,yBAAyB;IAC7B,IAAI;QAAEK,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}

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

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useTreeItemLayout_unstable } from './useTreeItemLayout';
+import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
+import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
+ * It provides a consistent visual structure for tree items in a `Tree` component.
+ * This component should only be used as a direct child of `TreeItem`.
+ */ export const TreeItemLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemLayout_unstable(props, ref);
+    useTreeItemLayoutStyles_unstable(state);
+    useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);
+    return renderTreeItemLayout_unstable(state);
+});
+TreeItemLayout.displayName = 'TreeItemLayout';

node_modules/@fluentui/react-tree/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering TreeItemLayout
+ */ export { };

node_modules/@fluentui/react-tree/lib/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/components/TreeItemLayout/index.js

@@ -0,0 +1,4 @@
+export { TreeItemLayout } from './TreeItemLayout';
+export { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
+export { useTreeItemLayout_unstable } from './useTreeItemLayout';
+export { treeItemLayoutClassNames, useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';

node_modules/@fluentui/react-tree/lib/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":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

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

@@ -0,0 +1,26 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { ButtonContextProvider } from '@fluentui/react-button';
+/**
+ * Render the final JSX of TreeItemLayout
+ */ export const renderTreeItemLayout_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+            state.selector && /*#__PURE__*/ _jsx(state.selector, {}),
+            state.iconBefore && /*#__PURE__*/ _jsx(state.iconBefore, {}),
+            /*#__PURE__*/ _jsx(state.main, {
+                children: state.root.children
+            }),
+            state.iconAfter && /*#__PURE__*/ _jsx(state.iconAfter, {}),
+            /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+                value: state.buttonContextValue,
+                children: [
+                    state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
+                    state.aside && /*#__PURE__*/ _jsx(state.aside, {})
+                ]
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-tree/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,UAAU,kBAAI,KAACF,MAAME,UAAU;YACrCF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YACjCH,MAAMI,UAAU,kBAAI,KAACJ,MAAMI,UAAU;0BACtC,KAACJ,MAAMK,IAAI;0BAAEL,MAAMC,IAAI,CAACK,QAAQ;;YAC/BN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;0BACpC,MAACT;gBAAsBU,OAAOR,MAAMS,kBAAkB;;oBACnDT,MAAMU,OAAO,kBAAI,KAACV,MAAMU,OAAO;oBAC/BV,MAAMW,KAAK,kBAAI,KAACX,MAAMW,KAAK;;;;;AAIpC,EAAE"}

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

@@ -0,0 +1,241 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';
+import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
+import { TreeItemChevron } from '../TreeItemChevron';
+import { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render TreeItemLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
+ * before being passed to renderTreeItemLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemLayout
+ * @param ref - reference to root HTMLElement of TreeItemLayout
+ */ export const useTreeItemLayout_unstable = (props, ref)=>{
+    'use no memo';
+    const { main, iconAfter, iconBefore } = props;
+    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
+    const navigationMode = useTreeContext_unstable((ctx)=>{
+        var _ctx_navigationMode;
+        return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
+    });
+    const [isActionsVisibleFromProps, onActionVisibilityChange] = isResolvedShorthand(props.actions) ? [
+        props.actions.visible,
+        props.actions.onVisibilityChange
+    ] : [
+        undefined,
+        undefined
+    ];
+    const [isActionsVisible, setIsActionsVisible] = useControllableState({
+        state: isActionsVisibleFromProps,
+        initialState: false
+    });
+    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);
+    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
+    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);
+    const actionsRefInternal = React.useRef(null);
+    const treeItemRef = useTreeItemContext_unstable((ctx)=>ctx.treeItemRef);
+    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);
+    const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);
+    const isBranch = 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 && 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 } = useFluent();
+    const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();
+    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
+        const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));
+        const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && 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 || 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 = slot.optional(props.expandIcon, {
+        renderByDefault: isBranch,
+        defaultProps: {
+            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
+            'aria-hidden': true
+        },
+        elementType: 'div'
+    });
+    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
+    if (expandIcon) {
+        expandIcon.ref = expandIconRefs;
+    }
+    const arrowNavigationProps = useArrowNavigationGroup({
+        circular: navigationMode === 'tree',
+        axis: 'horizontal'
+    });
+    const actions = isActionsVisible ? 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 = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
+    const handleActionsBlur = useEventCallback((event)=>{
+        if (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(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' ? Checkbox : Radio
+        },
+        buttonContextValue: {
+            size: 'small'
+        },
+        root: slot.always(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: useMergedRefs(ref, layoutRef)
+        }), {
+            elementType: 'div'
+        }),
+        iconBefore: slot.optional(iconBefore, {
+            elementType: 'div'
+        }),
+        main: slot.always(main, {
+            elementType: 'div'
+        }),
+        iconAfter: slot.optional(iconAfter, {
+            elementType: 'div'
+        }),
+        aside: !isActionsVisible ? slot.optional(props.aside, {
+            elementType: 'div'
+        }) : undefined,
+        actions,
+        expandIcon,
+        selector: slot.optional(props.selector, {
+            renderByDefault: selectionMode !== 'none',
+            defaultProps: {
+                checked,
+                tabIndex: -1,
+                'aria-hidden': true,
+                ref: selectionRef
+            },
+            elementType: selectionMode === 'multiselect' ? Checkbox : 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/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -0,0 +1,146 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+export 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__*/__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__*/__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__*/__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__*/__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__*/__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__*/__resetStyles("rklbe47", null, [".rklbe47{padding:0 var(--spacingHorizontalXXS);}"]);
+/**
+ * Styles for the before/after icon slot
+ */
+const useIconBaseStyles = /*#__PURE__*/__resetStyles("rphzgg1", null, [".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"]);
+const useIconBeforeStyles = /*#__PURE__*/__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__*/__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);}"]
+});
+/**
+ * Apply styling to the TreeItemLayout slots based on the state
+ */
+export 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 = useTreeContext_unstable(ctx => ctx.size);
+  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
+  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
+  if (expandIcon) {
+    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
+  }
+  if (iconBefore) {
+    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
+  }
+  if (iconAfter) {
+    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
+  }
+  if (actions) {
+    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
+  }
+  if (aside) {
+    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
+  }
+  if (selector) {
+    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,177 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+export 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 = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: '32px',
+    boxSizing: 'border-box',
+    gridArea: 'layout',
+    ':hover': {
+        color: tokens.colorNeutralForeground2Hover,
+        backgroundColor: tokens.colorSubtleBackgroundHover,
+        // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling
+        [`& .${treeItemLayoutClassNames.expandIcon}`]: {
+            color: tokens.colorNeutralForeground3Hover
+        }
+    },
+    ':active': {
+        color: tokens.colorNeutralForeground2Pressed,
+        backgroundColor: tokens.colorSubtleBackgroundPressed,
+        // TODO: stop using treeItemLayoutClassNames.expandIcon for styling
+        [`& .${treeItemLayoutClassNames.expandIcon}`]: {
+            color: tokens.colorNeutralForeground3Pressed
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useRootStyles = makeStyles({
+    leaf: {
+        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`
+    },
+    branch: {
+        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`
+    },
+    medium: {
+        ...typographyStyles.body1
+    },
+    small: {
+        minHeight: '24px',
+        ...typographyStyles.caption1
+    },
+    // Appearance variations
+    subtle: {},
+    'subtle-alpha': {
+        ':hover': {
+            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed
+        }
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed
+        }
+    }
+});
+/**
+ * Styles for the action icon slot
+ */ const useActionsBaseStyles = makeResetStyles({
+    display: 'flex',
+    marginLeft: 'auto',
+    position: 'relative',
+    zIndex: 1,
+    gridArea: 'aside',
+    padding: `0 ${tokens.spacingHorizontalS}`
+});
+/**
+ * Styles for the action icon slot
+ */ const useAsideBaseStyles = makeResetStyles({
+    display: 'flex',
+    marginLeft: 'auto',
+    alignItems: 'center',
+    zIndex: 0,
+    gridArea: 'aside',
+    padding: `0 ${tokens.spacingHorizontalM}`,
+    gap: tokens.spacingHorizontalXS
+});
+/**
+ * Styles for the expand icon slot
+ */ const useExpandIconBaseStyles = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '24px',
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground3,
+    flex: `0 0 auto`,
+    padding: `${tokens.spacingVerticalXS} 0`
+});
+/**
+ * Styles for the content slot
+ */ const useMainBaseStyles = makeResetStyles({
+    padding: `0 ${tokens.spacingHorizontalXXS}`
+});
+/**
+ * Styles for the before/after icon slot
+ */ const useIconBaseStyles = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    color: tokens.colorNeutralForeground2,
+    lineHeight: tokens.lineHeightBase500,
+    fontSize: tokens.fontSizeBase500
+});
+const useIconBeforeStyles = makeStyles({
+    medium: {
+        paddingRight: tokens.spacingHorizontalXS
+    },
+    small: {
+        paddingRight: tokens.spacingHorizontalXXS
+    }
+});
+const useIconAfterStyles = makeStyles({
+    medium: {
+        paddingLeft: tokens.spacingHorizontalXS
+    },
+    small: {
+        paddingLeft: tokens.spacingHorizontalXXS
+    }
+});
+/**
+ * Apply styling to the TreeItemLayout slots based on the state
+ */ export 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 = useTreeContext_unstable((ctx)=>ctx.size);
+    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);
+    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);
+    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
+    if (expandIcon) {
+        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
+    }
+    if (iconBefore) {
+        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
+    }
+    if (iconAfter) {
+        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
+    }
+    if (actions) {
+        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
+    }
+    if (aside) {
+        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
+    }
+    if (selector) {
+        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+import { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
+import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';
+import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';
+import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
+ * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
+ * This component should only be used as a direct child of `TreeItem`.
+ */ export const TreeItemPersonaLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemPersonaLayout_unstable(props, ref);
+    useTreeItemPersonaLayoutStyles_unstable(state);
+    useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);
+    const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);
+    return renderTreeItemPersonaLayout_unstable(state, contextValues);
+});
+TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AACzG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IACxCL,4BAA4B,2CAA2CK;IAEvE,MAAMC,gBAAgBP,+CAA+CM;IAErE,OAAOR,qCAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering TreeItemPersonaLayout
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AA8BA;;CAEC,GACD,WAGE"}

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

@@ -0,0 +1,4 @@
+export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';
+export { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';
+export { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
+export { treeItemPersonaLayoutClassNames, useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n  treeItemPersonaLayoutClassNames,\n  useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAOhE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -0,0 +1,28 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { AvatarContextProvider } from '@fluentui/react-avatar';
+import { ButtonContextProvider } from '@fluentui/react-button';
+/**
+ * Render the final JSX of TreeItemPersonaLayout
+ */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+            state.selector && /*#__PURE__*/ _jsx(state.selector, {}),
+            /*#__PURE__*/ _jsx(AvatarContextProvider, {
+                value: contextValues.avatar,
+                children: /*#__PURE__*/ _jsx(state.media, {})
+            }),
+            /*#__PURE__*/ _jsx(state.main, {}),
+            state.description && /*#__PURE__*/ _jsx(state.description, {}),
+            /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+                value: state.buttonContextValue,
+                children: [
+                    state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
+                    state.aside && /*#__PURE__*/ _jsx(state.aside, {})
+                ]
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.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 {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n): JSXElement => {\n  assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <state.media />\n      </AvatarContextProvider>\n      <state.main />\n      {state.description && <state.description />}\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","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;YACrCH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;0BAClC,KAACP;gBAAsBQ,OAAOJ,cAAcK,MAAM;0BAChD,cAAA,KAACN,MAAMO,KAAK;;0BAEd,KAACP,MAAMQ,IAAI;YACVR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;0BACxC,MAACX;gBAAsBO,OAAOL,MAAMU,kBAAkB;;oBACnDV,MAAMW,OAAO,kBAAI,KAACX,MAAMW,OAAO;oBAC/BX,MAAMY,KAAK,kBAAI,KAACZ,MAAMY,KAAK;;;;;AAIpC,EAAE"}

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -0,0 +1,53 @@
+'use client';
+import * as React from 'react';
+import { slot } from '@fluentui/react-utilities';
+import { useTreeContext_unstable } from '../../contexts';
+import { treeAvatarSize } from '../../utils/tokens';
+import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
+/**
+ * Create the state required to render TreeItemPersonaLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,
+ * before being passed to renderTreeItemPersonaLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemPersonaLayout
+ * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
+ */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
+    const { media, children, main, description } = props;
+    const treeItemLayoutState = useTreeItemLayout_unstable({
+        ...props,
+        iconBefore: null,
+        iconAfter: null
+    }, ref);
+    const size = useTreeContext_unstable((ctx)=>ctx.size);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
+    return {
+        ...treeItemLayoutState,
+        components: {
+            expandIcon: 'div',
+            main: 'div',
+            description: 'div',
+            root: 'div',
+            media: 'div',
+            aside: 'div',
+            actions: 'div',
+            // Casting here to a union between checkbox and radio
+            selector: selectionMode === 'multiselect' ? Checkbox : Radio
+        },
+        avatarSize: treeAvatarSize[size],
+        main: slot.always(main, {
+            defaultProps: {
+                children
+            },
+            elementType: 'div'
+        }),
+        media: slot.always(media, {
+            elementType: 'div'
+        }),
+        description: slot.optional(description, {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+export function useTreeItemPersonaLayoutContextValues_unstable(state) {
+    const { avatarSize } = state;
+    const avatar = React.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
+}

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["'use client';\n\nimport type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AAAA;AAGA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}