195 lines
9.1 KiB
JavaScript
195 lines
9.1 KiB
JavaScript
'use client';
|
|
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
export const optionClassNames = {
|
|
root: 'fui-Option',
|
|
checkIcon: 'fui-Option__checkIcon'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
root: {
|
|
Bt984gj: "f122n59",
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "ft85np5",
|
|
sj55zd: "f19n0e5",
|
|
i8kkvl: "f1ufnopg",
|
|
Bceei9c: "f1k6fduh",
|
|
mc9l5x: "f22iagw",
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bg96gwp: "f1i3iumi",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "fm5eomj",
|
|
qhf8xq: "f10pi13n",
|
|
Jwef8y: "f1knas48",
|
|
Bi91k9c: "feu1g3u",
|
|
zqbkvg: "fo79ri9",
|
|
h82x05: ["f1osiabc", "f1e8le25"],
|
|
cqj998: "f1yusjty",
|
|
j3hlsh: ["f1e8le25", "f1osiabc"],
|
|
ecr2s2: "fb40n2d",
|
|
lj723h: "f1g4hkjv",
|
|
Btxx2vb: "f1lnr2zp",
|
|
sltcwy: ["f1ogfk9z", "f1g7j8ec"],
|
|
dnwvvm: "fiuf46r",
|
|
Blyvkvs: ["f1g7j8ec", "f1ogfk9z"]
|
|
},
|
|
active: {
|
|
Bowz1zl: "f11vrvdw",
|
|
oxogb1: "f17hxjb7",
|
|
Ix2sn8: "f1dha69c",
|
|
q7v32p: "f1lm7500",
|
|
B7cbj04: 0,
|
|
Bewtojm: 0,
|
|
b50fsz: 0,
|
|
B1wzb3v: 0,
|
|
Bqwk70n: 0,
|
|
B37u8z8: 0,
|
|
avt0cx: 0,
|
|
f0sref: 0,
|
|
B9fkznv: 0,
|
|
Be3o27t: 0,
|
|
Bertapg: 0,
|
|
B53xpsf: 0,
|
|
Bsv72rj: 0,
|
|
B39dzdd: 0,
|
|
Btq9bd3: 0,
|
|
Bqfxd14: 0,
|
|
atup0s: "fo7xqb",
|
|
Fffuxt: 0,
|
|
Bttcd12: 0,
|
|
Beitzug: 0,
|
|
Bqougee: 0,
|
|
B86i8pi: "f1kurthe",
|
|
Bhijsxg: "fwq15dy",
|
|
kktds4: "f1pb3wry",
|
|
Bmau3bo: ["ftjv2f4", "f1flhb1f"],
|
|
npektv: ["f1flhb1f", "ftjv2f4"]
|
|
},
|
|
disabled: {
|
|
sj55zd: "f1s2aq7o",
|
|
Jwef8y: "f9ql6rf",
|
|
Bi91k9c: "fvgxktp",
|
|
zqbkvg: "f185j3qj",
|
|
h82x05: ["f1dligi3", "f1vydzie"],
|
|
cqj998: "fjw1di3",
|
|
j3hlsh: ["f1vydzie", "f1dligi3"],
|
|
ecr2s2: "fgj9um3",
|
|
lj723h: "f19wldhg",
|
|
Btxx2vb: "f1ss0kt2",
|
|
sltcwy: ["f1t6oli3", "fjy9ci8"],
|
|
dnwvvm: "fresaxk",
|
|
Blyvkvs: ["fjy9ci8", "f1t6oli3"],
|
|
B7iucu3: "f1cyfu5x"
|
|
},
|
|
selected: {},
|
|
checkIcon: {
|
|
Bnnss6s: "fi64zpg",
|
|
Be2twd7: "fod5ikn",
|
|
Frg6f3: ["f18b9hdq", "fn6qj8t"],
|
|
t21cq0: ["f1xk557c", "f1h9en5y"],
|
|
Bcdw1i0: "fd7fpy0",
|
|
Bo70h7d: "fvc9v3g"
|
|
},
|
|
selectedCheck: {
|
|
Bcdw1i0: "f1022m68"
|
|
},
|
|
multiselectCheck: {
|
|
Bgfg5da: 0,
|
|
B9xav0g: 0,
|
|
oivjwe: 0,
|
|
Bn0qgzm: 0,
|
|
B4g9neb: 0,
|
|
zhjwy3: 0,
|
|
wvpqe5: 0,
|
|
ibv6hh: 0,
|
|
u1mtju: 0,
|
|
h3c5rm: 0,
|
|
vrafjx: 0,
|
|
Bekrc4i: 0,
|
|
i8vvqc: 0,
|
|
g2u3we: 0,
|
|
icvyot: 0,
|
|
B4j52fo: 0,
|
|
irswps: "f1l3cf7o",
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "fq9zq91",
|
|
B7ck84d: "f1ewtqcl",
|
|
mc9l5x: "f22iagw",
|
|
Bt984gj: "f122n59",
|
|
Brf1p80: "f4d9j23",
|
|
Bkfmm31: "f1w9h62z",
|
|
Be2twd7: "f1ugzwwg",
|
|
Bqenvij: "fd461yt",
|
|
a9b677: "fjw5fx7",
|
|
Bcdw1i0: "f1022m68"
|
|
},
|
|
selectedMultiselectCheck: {
|
|
De3pzq: "ftywsgz",
|
|
sj55zd: "fqpbvvt",
|
|
g2u3we: "f3xi7mh",
|
|
h3c5rm: ["ftovhe4", "f1wczvin"],
|
|
B9xav0g: "f68vbr6",
|
|
zhjwy3: ["f1wczvin", "ftovhe4"]
|
|
},
|
|
checkDisabled: {
|
|
sj55zd: "f1s2aq7o",
|
|
B7iucu3: "f1cyfu5x"
|
|
},
|
|
multiselectCheckDisabled: {
|
|
g2u3we: "f1r1t4y1",
|
|
h3c5rm: ["fmj8ijw", "figx54m"],
|
|
B9xav0g: "f360ss8",
|
|
zhjwy3: ["figx54m", "fmj8ijw"]
|
|
}
|
|
}, {
|
|
d: [".f122n59{align-items:center;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
p: -1
|
|
}], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}", {
|
|
p: -1
|
|
}], ".f10pi13n{position:relative;}", ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}", ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}", ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}", ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}", [".fo7xqb[data-activedescendant-focusvisible]::after{border:2px solid var(--colorStrokeFocus2);}", {
|
|
p: -2
|
|
}], [".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}", {
|
|
p: -1
|
|
}], ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fi64zpg{flex-shrink:0;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", [".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
|
|
p: -2
|
|
}], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
|
|
p: -1
|
|
}], ".f1ewtqcl{box-sizing:border-box;}", ".f4d9j23{justify-content:center;}", ".f1w9h62z{fill:currentColor;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}", ".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}", ".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}", ".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f1r1t4y1{border-top-color:var(--colorNeutralForegroundDisabled);}", ".fmj8ijw{border-right-color:var(--colorNeutralForegroundDisabled);}", ".figx54m{border-left-color:var(--colorNeutralForegroundDisabled);}", ".f360ss8{border-bottom-color:var(--colorNeutralForegroundDisabled);}"],
|
|
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}", ".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}", ".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}", ".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}", ".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"],
|
|
a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}", ".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}", ".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}", ".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}", ".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}", ".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"],
|
|
m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
|
|
m: "(forced-colors: active)"
|
|
}]]
|
|
});
|
|
/**
|
|
* Apply styling to the Option slots based on the state
|
|
*/
|
|
export const useOptionStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
disabled,
|
|
multiselect,
|
|
selected
|
|
} = state;
|
|
const styles = useStyles();
|
|
state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
|
|
if (state.checkIcon) {
|
|
state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
|
|
}
|
|
return state;
|
|
}; |