164 lines
6.0 KiB
JavaScript
164 lines
6.0 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
export const popoverSurfaceClassNames = {
|
|
root: 'fui-PopoverSurface'
|
|
};
|
|
export const arrowHeights = {
|
|
small: 6,
|
|
medium: 8,
|
|
large: 8
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
root: {
|
|
sj55zd: "f19n0e5",
|
|
De3pzq: "fxugw4r",
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "ft85np5",
|
|
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: "f9ggezi",
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi",
|
|
Bhu2qc9: "fymb6k8"
|
|
},
|
|
inline: {
|
|
Bj3rh1h: "f19g0ac"
|
|
},
|
|
inverted: {
|
|
De3pzq: "fg3r6xk",
|
|
sj55zd: "fonrgv7"
|
|
},
|
|
brand: {
|
|
De3pzq: "ffp7eso",
|
|
sj55zd: "f1phragk"
|
|
},
|
|
smallPadding: {
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1sy4kr4"
|
|
},
|
|
mediumPadding: {
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f4zyqsv"
|
|
},
|
|
largePadding: {
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "fop8ug2"
|
|
},
|
|
smallArrow: {
|
|
rhnwrx: "f1s3jn22",
|
|
Bdy53xb: "fv40uqz"
|
|
},
|
|
mediumLargeArrow: {
|
|
rhnwrx: "f1f72gjr",
|
|
Bdy53xb: "f69yoe5"
|
|
},
|
|
arrow: {
|
|
B7ck84d: "f1ewtqcl",
|
|
qhf8xq: "f1euv43f",
|
|
Bj3rh1h: "f1bsuimh",
|
|
De3pzq: "f1u2r49w",
|
|
B2eet1l: "fqhgnl",
|
|
Beyfa6y: "f17bz04i",
|
|
Bz10aip: "f36o3x3",
|
|
Bqenvij: "fzofk8q",
|
|
a9b677: "f1wbx1ie",
|
|
Ftih45: "f1wl9k8s",
|
|
Br0sdwz: "f1aocrix",
|
|
cmx5o7: "f1ljr5q2",
|
|
susq4k: 0,
|
|
Biibvgv: 0,
|
|
Bicfajf: 0,
|
|
qehafq: 0,
|
|
Brs5u8j: "f155f1qt",
|
|
Ccq8qp: "f9mhzq7",
|
|
Baz25je: "fr6rhvx",
|
|
Bcgcnre: 0,
|
|
Bqjgrrk: 0,
|
|
qa3bma: 0,
|
|
y0oebl: 0,
|
|
Biqmznv: 0,
|
|
Bm6vgfq: 0,
|
|
Bbv0w2i: 0,
|
|
uvfttm: 0,
|
|
eqrjj: 0,
|
|
Bk5zm6e: 0,
|
|
m598lv: 0,
|
|
B4f6apu: 0,
|
|
ydt019: 0,
|
|
Bq4z7u6: 0,
|
|
Bdkvgpv: 0,
|
|
B0qfbqy: 0,
|
|
kj8mxx: "f1kc0wz4",
|
|
r59vdv: "fgq90dz",
|
|
Bkw5xw4: "fq0y47f",
|
|
hl6cv3: "f1pwrbz6",
|
|
aea9ga: "f1hxxcvm",
|
|
yayu3t: "fw8rgyo",
|
|
Bhsv975: "f1wnzycx",
|
|
rhl9o9: "f1730wal",
|
|
B7gxrvb: "f1fy4ixr",
|
|
B6q6orb: "fobkauc",
|
|
B0lu1f8: "f16bqv1l"
|
|
}
|
|
}, {
|
|
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
p: -1
|
|
}], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
|
|
p: -2
|
|
}], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fymb6k8{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));}", ".f19g0ac{z-index:1;}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", [".f1sy4kr4{padding:12px;}", {
|
|
p: -1
|
|
}], [".f4zyqsv{padding:16px;}", {
|
|
p: -1
|
|
}], [".fop8ug2{padding:20px;}", {
|
|
p: -1
|
|
}], ".f1s3jn22{--fui-positioning-arrow-height:8.484px;}", ".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}", ".f1f72gjr{--fui-positioning-arrow-height:11.312px;}", ".f69yoe5{--fui-positioning-arrow-offset:-5.656px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1euv43f{position:absolute;}", ".f1bsuimh{z-index:-1;}", ".f1u2r49w{background-color:inherit;}", ".fqhgnl{background-clip:content-box;}", ".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}", ".fzofk8q{height:var(--fui-positioning-arrow-height);}", ".f1wbx1ie{width:var(--fui-positioning-arrow-height);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1ljr5q2::before{background-color:inherit;}", [".f155f1qt::before{margin:-1px;}", {
|
|
p: -1
|
|
}], ".f9mhzq7::before{width:100%;}", ".fr6rhvx::before{height:100%;}", [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
|
|
p: -2
|
|
}], ".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}", "[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}", "[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}", "[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}", "[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"]
|
|
});
|
|
/**
|
|
* Apply styling to the PopoverSurface slots based on the state
|
|
*/
|
|
export const usePopoverSurfaceStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const styles = useStyles();
|
|
state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
|
|
state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
|
|
return state;
|
|
}; |