Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TreeItemPersonaLayout", {
enumerable: true,
get: function() {
return TreeItemPersonaLayout;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles");
const _useTreeItemPersonaLayoutContextValues = require("./useTreeItemPersonaLayoutContextValues");
const TreeItemPersonaLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable)(props, ref);
(0, _useTreeItemPersonaLayoutStylesstyles.useTreeItemPersonaLayoutStyles_unstable)(state);
const contextValues = (0, _useTreeItemPersonaLayoutContextValues.useTreeItemPersonaLayoutContextValues_unstable)(state);
return (0, _renderTreeItemPersonaLayout.renderTreeItemPersonaLayout_unstable)(state, contextValues);
});
TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * 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';\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\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;0CAC2B;6CACG;sDACG;uDAGO;AAOxD,MAAMA,wBAAAA,WAAAA,GAAyEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQC,IAAAA,2DAAAA,EAAkCH,OAAOC;IAEvDG,IAAAA,6EAAAA,EAAwCF;IAExC,MAAMG,gBAAgBC,IAAAA,qFAAAA,EAA+CJ;IAErE,OAAOK,IAAAA,iEAAAA,EAAqCL,OAAOG;AACrD;AAEAR,sBAAsBW,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering TreeItemPersonaLayout
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":[],"rangeMappings":";;","mappings":"AA8BA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
TreeItemPersonaLayout: function() {
return _TreeItemPersonaLayout.TreeItemPersonaLayout;
},
renderTreeItemPersonaLayout_unstable: function() {
return _renderTreeItemPersonaLayout.renderTreeItemPersonaLayout_unstable;
},
treeItemPersonaLayoutClassNames: function() {
return _useTreeItemPersonaLayoutStylesstyles.treeItemPersonaLayoutClassNames;
},
useTreeItemPersonaLayoutStyles_unstable: function() {
return _useTreeItemPersonaLayoutStylesstyles.useTreeItemPersonaLayoutStyles_unstable;
},
useTreeItemPersonaLayout_unstable: function() {
return _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable;
}
});
const _TreeItemPersonaLayout = require("./TreeItemPersonaLayout");
const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles");
@@ -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","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,qBAAqB;eAArBA,4CAAqB;;IAOrBC,oCAAoC;eAApCA,iEAAoC;;IAG3CC,+BAA+B;eAA/BA,qEAA+B;;IAC/BC,uCAAuC;eAAvCA,6EAAuC;;IAHhCC,iCAAiC;eAAjCA,2DAAiC;;;uCARJ;6CAOe;0CACH;sDAI3C"}
@@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTreeItemPersonaLayout_unstable", {
enumerable: true,
get: function() {
return renderTreeItemPersonaLayout_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactavatar = require("@fluentui/react-avatar");
const _reactbutton = require("@fluentui/react-button");
const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
state.selector && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.selector, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactavatar.AvatarContextProvider, {
value: contextValues.avatar,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.main, {}),
state.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.description, {}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
value: state.buttonContextValue,
children: [
state.actions && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.actions, {}),
state.aside && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.aside, {})
]
})
]
});
};
@@ -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 {\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) => {\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":["renderTreeItemPersonaLayout_unstable","state","contextValues","assertSlots","_jsxs","root","expandIcon","_jsx","selector","AvatarContextProvider","value","avatar","media","main","description","ButtonContextProvider","buttonContextValue","actions","aside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;gCAC4B;6BAMU;6BACA;AAK/B,MAAMA,uCAAuC,CAClDC,OACAC;IAEAC,IAAAA,2BAAAA,EAAwCF;IAExC,OAAA,WAAA,GACEG,IAAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;YACRJ,MAAMK,UAAU,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,UAAU,EAAA,CAAA;YACrCL,MAAMO,QAAQ,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACN,MAAMO,QAAQ,EAAA,CAAA;0BAClCD,IAAAA,eAAA,EAACE,kCAAAA,EAAAA;gBAAsBC,OAAOR,cAAcS,MAAM;0BAChD,WAAA,GAAAJ,IAAAA,eAAA,EAACN,MAAMW,KAAK,EAAA,CAAA;;0BAEdL,IAAAA,eAAA,EAACN,MAAMY,IAAI,EAAA,CAAA;YACVZ,MAAMa,WAAW,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACN,MAAMa,WAAW,EAAA,CAAA;0BACxCV,IAAAA,gBAAA,EAACW,kCAAAA,EAAAA;gBAAsBL,OAAOT,MAAMe,kBAAkB;;oBACnDf,MAAMgB,OAAO,IAAA,WAAA,GAAIV,IAAAA,eAAA,EAACN,MAAMgB,OAAO,EAAA,CAAA;oBAC/BhB,MAAMiB,KAAK,IAAA,WAAA,GAAIX,IAAAA,eAAA,EAACN,MAAMiB,KAAK,EAAA,CAAA;;;;;AAIpC"}
@@ -0,0 +1,55 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTreeItemPersonaLayout_unstable", {
enumerable: true,
get: function() {
return useTreeItemPersonaLayout_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _contexts = require("../../contexts");
const _tokens = require("../../utils/tokens");
const _useTreeItemLayout = require("../TreeItemLayout/useTreeItemLayout");
const _reactcheckbox = require("@fluentui/react-checkbox");
const _reactradio = require("@fluentui/react-radio");
const useTreeItemPersonaLayout_unstable = (props, ref)=>{
const { media, children, main, description } = props;
const treeItemLayoutState = (0, _useTreeItemLayout.useTreeItemLayout_unstable)({
...props,
iconBefore: null,
iconAfter: null
}, ref);
const size = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.size);
const selectionMode = (0, _contexts.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' ? _reactcheckbox.Checkbox : _reactradio.Radio
},
avatarSize: _tokens.treeAvatarSize[size],
main: _reactutilities.slot.always(main, {
defaultProps: {
children
},
elementType: 'div'
}),
media: _reactutilities.slot.always(media, {
elementType: 'div'
}),
description: _reactutilities.slot.optional(description, {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * 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":["useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","useTreeItemLayout_unstable","iconBefore","iconAfter","size","useTreeContext_unstable","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","Checkbox","Radio","avatarSize","treeAvatarSize","slot","always","defaultProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;;iEAlBU;gCAEF;0BACmB;wBACT;mCACY;+BACH;4BACN;AAW3B,MAAMA,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBC,IAAAA,6CAAAA,EAC1B;QACE,GAAGP,KAAK;QACRQ,YAAY;QACZC,WAAW;IACb,GACAR;IAGF,MAAMS,OAAOC,IAAAA,iCAAAA,EAAwBC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,MAAMG,gBAAgBF,IAAAA,iCAAAA,EAAwBC,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGP,mBAAmB;QACtBQ,YAAY;YACVC,YAAY;YACZX,MAAM;YACNC,aAAa;YACbW,MAAM;YACNd,OAAO;YACPe,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBO,uBAAAA,GAAWC,iBAAAA;QAC1D;QACAC,YAAYC,sBAAc,CAACb,KAAK;QAChCN,MAAMoB,oBAAAA,CAAKC,MAAM,CAACrB,MAAM;YAAEsB,cAAc;gBAAEvB;YAAS;YAAGwB,aAAa;QAAM;QACzEzB,OAAOsB,oBAAAA,CAAKC,MAAM,CAACvB,OAAO;YAAEyB,aAAa;QAAM;QAC/CtB,aAAamB,oBAAAA,CAAKI,QAAQ,CAACvB,aAAa;YAAEsB,aAAa;QAAM;IAC/D;AACF"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTreeItemPersonaLayoutContextValues_unstable", {
enumerable: true,
get: function() {
return useTreeItemPersonaLayoutContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useTreeItemPersonaLayoutContextValues_unstable(state) {
const { avatarSize } = state;
const avatar = _react.useMemo(()=>({
size: avatarSize
}), [
avatarSize
]);
return {
avatar
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import 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":["useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","React","useMemo","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASC,OAAMC,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMJ;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}
@@ -0,0 +1,152 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
treeItemPersonaLayoutClassNames: function() {
return treeItemPersonaLayoutClassNames;
},
useTreeItemPersonaLayoutStyles_unstable: function() {
return useTreeItemPersonaLayoutStyles_unstable;
}
});
const _react = require("@griffel/react");
const _treeItemContext = require("../../contexts/treeItemContext");
const treeItemPersonaLayoutClassNames = {
root: 'fui-TreeItemPersonaLayout',
media: 'fui-TreeItemPersonaLayout__media',
description: 'fui-TreeItemPersonaLayout__description',
main: 'fui-TreeItemPersonaLayout__main',
expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
aside: 'fui-TreeItemPersonaLayout__aside',
actions: 'fui-TreeItemPersonaLayout__actions',
selector: 'fui-TreeItemPersonaLayout__selector'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1r98egg", null, [
".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\"expandIcon media main aside\" \"expandIcon media description aside\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}",
".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}",
".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}",
".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"
]);
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
leaf: {
uwmqm3: [
"f1k1erfc",
"faevyjx"
]
},
branch: {
uwmqm3: [
"fo100m9",
"f6yw3pu"
]
}
}, {
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));}"
]
});
/**
* Styles for the expand icon slot
*/ const useMediaBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rkcde6g", "r1e986zr", [
".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}",
".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}"
]);
const useMainBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1qjtz99", "rob5fcp", [
".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}",
".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"
]);
const useMainStyles = /*#__PURE__*/ (0, _react.__styles)({
withDescription: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f1625emv",
"f5y9hxg"
]
}
}, {
d: [
[
".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}",
{
p: -1
}
],
[
".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}",
{
p: -1
}
]
]
});
const useDescriptionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1bnsn1b", "r13x7gq", [
".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}",
".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"
]);
/**
* Styles for the action icon slot
*/ const useActionsBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rzvs2in", "r17h8a29", [
".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}",
".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"
]);
/**
* Styles for the action icon slot
*/ const useAsideBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1825u21", "rezy0yk", [
".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}",
".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"
]);
/**
* Styles for the expand icon slot
*/ const useExpandIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rn61xvs", null, [
".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"
]);
const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const rootStyles = useRootStyles();
const mediaBaseStyles = useMediaBaseStyles();
const descriptionBaseStyles = useDescriptionBaseStyles();
const actionsBaseStyles = useActionsBaseStyles();
const asideBaseStyles = useAsideBaseStyles();
const expandIconBaseStyles = useExpandIconBaseStyles();
const mainBaseStyles = useMainBaseStyles();
const mainStyles = useMainStyles();
const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);
state.media.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
if (state.main) {
state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
}
if (state.description) {
state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
}
if (state.actions) {
state.actions.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
}
if (state.aside) {
state.aside.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
}
if (state.selector) {
state.selector.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.selector, state.selector.className);
}
return state;
};
File diff suppressed because one or more lines are too long