311 lines
13 KiB
JavaScript
311 lines
13 KiB
JavaScript
'use client';
|
|
|
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
import { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles';
|
|
import { useSizeStyles } from '../Avatar/useAvatarStyles.styles';
|
|
export const avatarGroupPopoverClassNames = {
|
|
root: 'fui-AvatarGroupPopover',
|
|
content: 'fui-AvatarGroupPopover__content',
|
|
popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',
|
|
tooltip: 'fui-AvatarGroupPopover__tooltip',
|
|
triggerButton: 'fui-AvatarGroupPopover__triggerButton'
|
|
};
|
|
/**
|
|
* Styles for the content slot.
|
|
*/
|
|
const useContentStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
dclx09: "ftrb29c",
|
|
jrapky: 0,
|
|
Frg6f3: 0,
|
|
t21cq0: 0,
|
|
B6of3ja: 0,
|
|
B74szlk: "f1s184ao",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1mk8lai",
|
|
mc9l5x: "f22iagw",
|
|
Beiy3e4: "f1vx9l62"
|
|
}
|
|
}, {
|
|
d: [".ftrb29c{list-style-type:none;}", [".f1s184ao{margin:0;}", {
|
|
p: -1
|
|
}], [".f1mk8lai{padding:0;}", {
|
|
p: -1
|
|
}], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}"]
|
|
});
|
|
/**
|
|
* Styles for the popoverSurface slot.
|
|
*/
|
|
const usePopoverSurfaceStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
Bxyxcbc: "fopcw2o",
|
|
sshi5w: "f1n5o1gx",
|
|
B68tc82: 0,
|
|
Bmxbyg5: 0,
|
|
Bpg54ce: "f19r5mr9",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1f5q0n8",
|
|
a9b677: "f13dwy2t"
|
|
}
|
|
}, {
|
|
d: [".fopcw2o{max-height:220px;}", ".f1n5o1gx{min-height:80px;}", [".f19r5mr9{overflow:hidden scroll;}", {
|
|
p: -1
|
|
}], [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
p: -1
|
|
}], ".f13dwy2t{width:220px;}"]
|
|
});
|
|
/**
|
|
* Styles for the triggerButton slot.
|
|
*/
|
|
const useTriggerButtonStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
mc9l5x: "ftuwxu6",
|
|
qhf8xq: "f10pi13n",
|
|
Bnnss6s: "fi64zpg",
|
|
Brf1p80: "f4d9j23",
|
|
Bt984gj: "f122n59",
|
|
sj55zd: "f19n0e5",
|
|
De3pzq: "fxugw4r",
|
|
g2u3we: "fj3muxo",
|
|
h3c5rm: ["f1akhkt", "f1lxtadh"],
|
|
B9xav0g: "f1aperda",
|
|
zhjwy3: ["f1lxtadh", "f1akhkt"],
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "f44lkw9",
|
|
icvyot: "fzkkow9",
|
|
vrafjx: ["fcdblym", "fjik90z"],
|
|
oivjwe: "fg706s2",
|
|
wvpqe5: ["fjik90z", "fcdblym"],
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1mk8lai",
|
|
Bcq6wej: "fx5js7k",
|
|
Jcjdmf: ["f17aelzi", "f2tn0l4"],
|
|
sc4o1m: "f14ood81",
|
|
Bosien3: ["f2tn0l4", "f17aelzi"]
|
|
},
|
|
pie: {
|
|
De3pzq: "f1c21dwh",
|
|
g2u3we: "fghlq4f",
|
|
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
B9xav0g: "fb073pr",
|
|
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
sj55zd: "f44pa96"
|
|
},
|
|
focusIndicator: {
|
|
Byu6kyc: 0,
|
|
n8qw10: 0,
|
|
Bbjhlyh: 0,
|
|
i2cumq: 0,
|
|
Bunx835: 0,
|
|
Bdrgwmp: 0,
|
|
mqozju: 0,
|
|
lbo84a: 0,
|
|
Bksnhdo: 0,
|
|
Bci5o5g: 0,
|
|
u5e7qz: 0,
|
|
Bn40d3w: 0,
|
|
B7b6zxw: 0,
|
|
B8q5s1w: 0,
|
|
B5gfjzb: 0,
|
|
Bbcte9g: 0,
|
|
Bqz3imu: "f1j9b7x8",
|
|
g9k6zt: "f1nev41a"
|
|
},
|
|
states: {
|
|
Bi91k9c: "feu1g3u",
|
|
Jwef8y: "f1knas48",
|
|
Bgoe8wy: "fvcxoqz",
|
|
Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
|
|
oetu4i: "f1xlaoq0",
|
|
gg5e9n: ["f1m52nbi", "f1ub3y4t"],
|
|
lj723h: "f1g4hkjv",
|
|
ecr2s2: "fb40n2d",
|
|
B6oc9vd: "fvs00aa",
|
|
ak43y8: ["f1assf6x", "f4ruux4"],
|
|
wmxk5l: "fumykes",
|
|
B50zh58: ["f4ruux4", "f1assf6x"]
|
|
},
|
|
selected: {
|
|
sj55zd: "f14nttnl",
|
|
De3pzq: "f1nfm20t",
|
|
g2u3we: "f1ly1fcm",
|
|
h3c5rm: ["fi8bssc", "fj6btzu"],
|
|
B9xav0g: "f1s9tnsa",
|
|
zhjwy3: ["fj6btzu", "fi8bssc"]
|
|
},
|
|
icon12: {
|
|
Be2twd7: "f1ugzwwg"
|
|
},
|
|
icon16: {
|
|
Be2twd7: "f4ybsrx"
|
|
},
|
|
icon20: {
|
|
Be2twd7: "fe5j1ua"
|
|
},
|
|
icon24: {
|
|
Be2twd7: "f1rt2boy"
|
|
},
|
|
icon28: {
|
|
Be2twd7: "f24l1pt"
|
|
},
|
|
icon32: {
|
|
Be2twd7: "ffl51b"
|
|
},
|
|
icon48: {
|
|
Be2twd7: "f18m8u13"
|
|
},
|
|
caption2Strong: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "f13mqy1h",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "fcpl73t"
|
|
},
|
|
caption1Strong: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fy9rknc",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "fwrc4pm"
|
|
},
|
|
body1Strong: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
subtitle2: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
subtitle1: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "f1pp30po",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "f106mvju"
|
|
},
|
|
title3: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "f1x0m3f5",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "fb86gi6"
|
|
},
|
|
borderThin: {
|
|
B4j52fo: "f192inf7",
|
|
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
Bn0qgzm: "f1vxd6vx",
|
|
ibv6hh: ["f1ojsxk5", "f5tn483"]
|
|
},
|
|
borderThick: {
|
|
B4j52fo: "f18zi460",
|
|
Bekrc4i: ["f1wpluaz", "fsfsuhs"],
|
|
Bn0qgzm: "fmklw6v",
|
|
ibv6hh: ["fsfsuhs", "f1wpluaz"]
|
|
},
|
|
borderThicker: {
|
|
B4j52fo: "fgx37oo",
|
|
Bekrc4i: ["f130t4y6", "f1efpmoh"],
|
|
Bn0qgzm: "fv51ejd",
|
|
ibv6hh: ["f1efpmoh", "f130t4y6"]
|
|
},
|
|
borderThickest: {
|
|
B4j52fo: "fwn6jck",
|
|
Bekrc4i: ["figl7jc", "f1g0iy8l"],
|
|
Bn0qgzm: "f1b8shu7",
|
|
ibv6hh: ["f1g0iy8l", "figl7jc"]
|
|
}
|
|
}, {
|
|
d: [".ftuwxu6{display:inline-flex;}", ".f10pi13n{position:relative;}", ".fi64zpg{flex-shrink:0;}", ".f4d9j23{justify-content:center;}", ".f122n59{align-items:center;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
p: -1
|
|
}], ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", [".f1mk8lai{padding:0;}", {
|
|
p: -1
|
|
}], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f44pa96{color:transparent;}", [".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
|
|
p: -2
|
|
}], ".f1nev41a[data-fui-focus-visible]{outline-style:none;}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fwn6jck{border-top-width:var(--strokeWidthThickest);}", ".figl7jc{border-right-width:var(--strokeWidthThickest);}", ".f1g0iy8l{border-left-width:var(--strokeWidthThickest);}", ".f1b8shu7{border-bottom-width:var(--strokeWidthThickest);}"],
|
|
m: [["@media (forced-colors: active){.fx5js7k{border-top-color:CanvasText;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.f17aelzi{border-right-color:CanvasText;}.f2tn0l4{border-left-color:CanvasText;}}", {
|
|
m: "(forced-colors: active)"
|
|
}], ["@media (forced-colors: active){.f14ood81{border-bottom-color:CanvasText;}}", {
|
|
m: "(forced-colors: active)"
|
|
}]],
|
|
h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}"],
|
|
a: [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}"]
|
|
});
|
|
/**
|
|
* Apply styling to the AvatarGroupPopover slots based on the state
|
|
*/
|
|
export const useAvatarGroupPopoverStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
indicator,
|
|
size,
|
|
layout,
|
|
popoverOpen
|
|
} = state;
|
|
const sizeStyles = useSizeStyles();
|
|
const triggerButtonStyles = useTriggerButtonStyles();
|
|
const contentStyles = useContentStyles();
|
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
const groupChildClassName = useGroupChildClassName(layout, size);
|
|
const triggerButtonClasses = [];
|
|
if (size < 36) {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThin);
|
|
} else if (size < 56) {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThick);
|
|
} else if (size < 72) {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThicker);
|
|
} else {
|
|
triggerButtonClasses.push(triggerButtonStyles.borderThickest);
|
|
}
|
|
if (indicator === 'count') {
|
|
if (size <= 24) {
|
|
triggerButtonClasses.push(triggerButtonStyles.caption2Strong);
|
|
} else if (size <= 28) {
|
|
triggerButtonClasses.push(triggerButtonStyles.caption1Strong);
|
|
} else if (size <= 40) {
|
|
triggerButtonClasses.push(triggerButtonStyles.body1Strong);
|
|
} else if (size <= 56) {
|
|
triggerButtonClasses.push(triggerButtonStyles.subtitle2);
|
|
} else if (size <= 96) {
|
|
triggerButtonClasses.push(triggerButtonStyles.subtitle1);
|
|
} else {
|
|
triggerButtonClasses.push(triggerButtonStyles.title3);
|
|
}
|
|
} else {
|
|
if (size <= 16) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon12);
|
|
} else if (size <= 24) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon16);
|
|
} else if (size <= 40) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon20);
|
|
} else if (size <= 48) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon24);
|
|
} else if (size <= 56) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon28);
|
|
} else if (size <= 72) {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon32);
|
|
} else {
|
|
triggerButtonClasses.push(triggerButtonStyles.icon48);
|
|
}
|
|
}
|
|
state.triggerButton.className = mergeClasses(avatarGroupPopoverClassNames.triggerButton, groupChildClassName, sizeStyles[size], triggerButtonStyles.base, layout === 'pie' && triggerButtonStyles.pie, triggerButtonStyles.focusIndicator, layout !== 'pie' && triggerButtonStyles.states, layout !== 'pie' && popoverOpen && triggerButtonStyles.selected, ...triggerButtonClasses, state.triggerButton.className);
|
|
state.content.className = mergeClasses(avatarGroupPopoverClassNames.content, contentStyles.base, state.content.className);
|
|
state.popoverSurface.className = mergeClasses(avatarGroupPopoverClassNames.popoverSurface, popoverSurfaceStyles.base, state.popoverSurface.className);
|
|
return state;
|
|
}; |