196 lines
9.4 KiB
JavaScript
196 lines
9.4 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
treeItemPersonaLayoutClassNames: function() {
|
|
return treeItemPersonaLayoutClassNames;
|
|
},
|
|
useTreeItemPersonaLayoutStyles_unstable: function() {
|
|
return useTreeItemPersonaLayoutStyles_unstable;
|
|
}
|
|
});
|
|
const _react = require("@griffel/react");
|
|
const _treeItemContext = require("../../contexts/treeItemContext");
|
|
const _treeContext = require("../../contexts/treeContext");
|
|
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"
|
|
]
|
|
},
|
|
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 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 size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
|
|
const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
|
|
const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
|
|
state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], 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;
|
|
};
|