Private
Public Access
1
0
Files
power-apps-codeapps-blog-part2/node_modules/@fluentui/react-persona/lib-commonjs/components/Persona/usePersonaStyles.styles.js

275 lines
10 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, {
personaClassNames: function() {
return personaClassNames;
},
usePersonaStyles_unstable: function() {
return usePersonaStyles_unstable;
}
});
const _react = require("@griffel/react");
const personaClassNames = {
root: 'fui-Persona',
avatar: 'fui-Persona__avatar',
presence: 'fui-Persona__presence',
primaryText: 'fui-Persona__primaryText',
secondaryText: 'fui-Persona__secondaryText',
tertiaryText: 'fui-Persona__tertiaryText',
quaternaryText: 'fui-Persona__quaternaryText'
};
const avatarSpacing = `--fui-Persona__avatar--spacing`;
const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rlroi9i", null, [
".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"
]);
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
beforeAfterCenter: {
wkccdc: "f1iantul"
},
after: {},
before: {
B7hvi0a: "f1tll2w5",
Budl1dq: "ffvkwdr"
},
below: {
Bxotwcr: "f1nkeedh",
B7hvi0a: "f1oiokrs",
Budl1dq: "f1emgwh2"
},
media: {
Ijaq50: "f1hek2iy"
},
mediaBeforeAfterCenter: {
Ijaq50: "fa4dipu"
},
start: {
qb2dma: "f9h729m"
},
center: {
qb2dma: "f7nlbp4"
},
afterAlignToPrimary: {
qb2dma: "f7nlbp4",
Ijaq50: "f1rnkkuc",
Bw0ie65: "f1warjpf"
},
beforeAlignToPrimary: {
qb2dma: "f7nlbp4",
Ijaq50: "f1rnkkuc",
Br312pm: "fwu52yu"
},
secondLineSpacing: {
B6of3ja: "f1ryq6si"
},
primary: {
Ijaq50: "f1q3ipgb"
},
secondary: {
Ijaq50: "f3drtdk"
},
tertiary: {
Ijaq50: "fa1o6s1"
},
quaternary: {
Ijaq50: "f1tuwaia"
}
}, {
d: [
".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}",
".f1tll2w5{justify-items:end;}",
".ffvkwdr{grid-template-columns:auto [middle] max-content;}",
".f1nkeedh{grid-auto-flow:unset;}",
".f1oiokrs{justify-items:center;}",
".f1emgwh2{grid-template-columns:unset;}",
".f1hek2iy{grid-row-start:span 5;}",
".fa4dipu{grid-row-start:span 6;}",
".f9h729m{align-self:start;}",
".f7nlbp4{align-self:center;}",
".f1rnkkuc{grid-row-start:unset;}",
".f1warjpf{grid-column-end:middle;}",
".fwu52yu{grid-column-start:middle;}",
".f1ryq6si{margin-top:-2px;}",
".f1q3ipgb{grid-row-start:primary;}",
".f3drtdk{grid-row-start:secondary;}",
".fa1o6s1{grid-row-start:tertiary;}",
".f1tuwaia{grid-row-start:quaternary;}"
]
});
const useAvatarSpacingStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
Bs1gm4r: "f1e48tse"
},
small: {
Bs1gm4r: "f18q9vkd"
},
medium: {
Bs1gm4r: "f18q9vkd"
},
large: {
Bs1gm4r: "fx34bi6"
},
"extra-large": {
Bs1gm4r: "fx34bi6"
},
huge: {
Bs1gm4r: "f1o96qtm"
},
after: {
t21cq0: [
"f103ycu4",
"f1tao51"
]
},
below: {
jrapky: "fbo7acy"
},
before: {
Frg6f3: [
"f1tao51",
"f103ycu4"
]
}
}, {
d: [
".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}",
".f18q9vkd{--fui-Persona__avatar--spacing:var(--spacingHorizontalS);}",
".fx34bi6{--fui-Persona__avatar--spacing:var(--spacingHorizontalMNudge);}",
".f1o96qtm{--fui-Persona__avatar--spacing:var(--spacingHorizontalM);}",
".f103ycu4{margin-right:var(--fui-Persona__avatar--spacing);}",
".f1tao51{margin-left:var(--fui-Persona__avatar--spacing);}",
".fbo7acy{margin-bottom:var(--fui-Persona__avatar--spacing);}"
]
});
const usePresenceSpacingStyles = /*#__PURE__*/ (0, _react.__styles)({
small: {
Bs1gm4r: "f1e48tse"
}
}, {
d: [
".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}"
]
});
const usePersonaStyles_unstable = (state)=>{
'use no memo';
const { presenceOnly, size, textAlignment, textPosition } = state;
const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);
const rootClassName = useRootClassName();
const styles = useStyles();
const avatarSpacingStyles = useAvatarSpacingStyles();
const presenceSpacingStyles = {
...avatarSpacingStyles,
...usePresenceSpacingStyles()
};
state.root.className = (0, _react.mergeClasses)(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
if (state.avatar) {
state.avatar.className = (0, _react.mergeClasses)(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
}
if (state.presence) {
state.presence.className = (0, _react.mergeClasses)(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
}
if (state.primaryText) {
state.primaryText.className = (0, _react.mergeClasses)(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
}
if (state.secondaryText) {
state.secondaryText.className = (0, _react.mergeClasses)(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
}
if (state.tertiaryText) {
state.tertiaryText.className = (0, _react.mergeClasses)(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
}
if (state.quaternaryText) {
state.quaternaryText.className = (0, _react.mergeClasses)(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
}
return state;
};
const usePrimaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvj41k9", null, [
".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"
]);
const useOptionalTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rp1pf9e", null, [
".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
]);
const useTextStyles = /*#__PURE__*/ (0, _react.__styles)({
beforeAlignToPrimary: {
Bw0ie65: "f1warjpf"
},
afterAlignToPrimary: {
Br312pm: "fwu52yu"
},
body1: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
caption1: {
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
subtitle2: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
}
}, {
d: [
".f1warjpf{grid-column-end:middle;}",
".fwu52yu{grid-column-start:middle;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".faaz57k{line-height:var(--lineHeightBase400);}"
]
});
const useTextClassNames = (state, alignToPrimary)=>{
const { presenceOnly, size, textPosition } = state;
const primaryTextBaseClassName = usePrimaryTextBaseClassName();
const optionalTextBaseClassName = useOptionalTextBaseClassName();
const textStyles = useTextStyles();
let primaryTextSize;
let alignToPrimaryClassName;
if (presenceOnly) {
if (size === 'extra-small') {
primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
} else if (size === 'extra-large' || size === 'huge') {
primaryTextSize = textStyles.subtitle2;
}
if (alignToPrimary) {
if (textPosition === 'before') {
alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
} else if (textPosition === 'after') {
alignToPrimaryClassName = textStyles.afterAlignToPrimary;
}
}
} else {
if (size === 'huge') {
primaryTextSize = textStyles.subtitle2;
} else if (size === 'extra-large') {
primaryTextSize = textStyles.subtitle2;
}
}
return {
primaryTextClassName: (0, _react.mergeClasses)(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
optionalTextClassName: (0, _react.mergeClasses)(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
};
};