258 lines
12 KiB
JavaScript
258 lines
12 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, {
|
|
spinnerClassNames: function() {
|
|
return spinnerClassNames;
|
|
},
|
|
useSpinnerStyles_unstable: function() {
|
|
return useSpinnerStyles_unstable;
|
|
}
|
|
});
|
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
const _react = require("@griffel/react");
|
|
const spinnerClassNames = {
|
|
root: 'fui-Spinner',
|
|
spinner: 'fui-Spinner__spinner',
|
|
spinnerTail: 'fui-Spinner__spinnerTail',
|
|
label: 'fui-Spinner__label'
|
|
};
|
|
/**
|
|
* CSS variables used internally by Spinner
|
|
*/ const vars = {
|
|
strokeWidth: '--fui-Spinner--strokeWidth'
|
|
};
|
|
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rpp59a7", null, [
|
|
".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"
|
|
]);
|
|
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
vertical: {
|
|
Beiy3e4: "f1vx9l62"
|
|
}
|
|
}, {
|
|
d: [
|
|
".f1vx9l62{flex-direction:column;}"
|
|
]
|
|
});
|
|
const useSpinnerBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvgcg50", "r15nd2jo", {
|
|
r: [
|
|
".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}",
|
|
"@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}",
|
|
".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}",
|
|
"@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"
|
|
],
|
|
s: [
|
|
"@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}",
|
|
"@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}",
|
|
"@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}",
|
|
"@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration:1.8s;}}"
|
|
]
|
|
});
|
|
// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
|
|
// The segments are rotated out from behind the mask to expand the visible arc from
|
|
// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
|
|
// The tail and spinner itself also have 360deg rotation animations for the spin.
|
|
const useSpinnerTailBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rxov3xa", "r1o544mv", {
|
|
r: [
|
|
".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}",
|
|
".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
|
|
"@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}",
|
|
".rxov3xa::before{animation-name:r18vhmn8;}",
|
|
"@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}",
|
|
".rxov3xa::after{animation-name:rkgrvoi;}",
|
|
"@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}",
|
|
".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}",
|
|
".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
|
|
"@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}",
|
|
".r1o544mv::before{animation-name:r17whflh;}",
|
|
"@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}",
|
|
".r1o544mv::after{animation-name:re4odhl;}",
|
|
"@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"
|
|
],
|
|
s: [
|
|
"@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}",
|
|
"@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"
|
|
]
|
|
});
|
|
const useSpinnerStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
inverted: {
|
|
De3pzq: "fr407j0",
|
|
sj55zd: "f1f7voed"
|
|
},
|
|
rtlTail: {
|
|
btxmck: "f179dep3",
|
|
gb5jj2: "fbz9ihp",
|
|
Bdya8wy: "f1pme1qz"
|
|
},
|
|
"extra-tiny": {
|
|
Bqenvij: "fd461yt",
|
|
a9b677: "fjw5fx7",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
tiny: {
|
|
Bqenvij: "fjamq6b",
|
|
a9b677: "f64fuq3",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
"extra-small": {
|
|
Bqenvij: "frvgh55",
|
|
a9b677: "fq4mcun",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
small: {
|
|
Bqenvij: "fxldao9",
|
|
a9b677: "f1w9dchk",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
medium: {
|
|
Bqenvij: "f1d2rq10",
|
|
a9b677: "f1szoe96",
|
|
qmp6fs: "fb52u90"
|
|
},
|
|
large: {
|
|
Bqenvij: "f8ljn23",
|
|
a9b677: "fpdz1er",
|
|
qmp6fs: "fb52u90"
|
|
},
|
|
"extra-large": {
|
|
Bqenvij: "fbhnoac",
|
|
a9b677: "feqmc2u",
|
|
qmp6fs: "fb52u90"
|
|
},
|
|
huge: {
|
|
Bqenvij: "f1ft4266",
|
|
a9b677: "fksc0bp",
|
|
qmp6fs: "fa3u9ii"
|
|
}
|
|
}, {
|
|
d: [
|
|
".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}",
|
|
".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}",
|
|
".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}",
|
|
".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}",
|
|
".fd461yt{height:16px;}",
|
|
".fjw5fx7{width:16px;}",
|
|
".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}",
|
|
".fjamq6b{height:20px;}",
|
|
".f64fuq3{width:20px;}",
|
|
".frvgh55{height:24px;}",
|
|
".fq4mcun{width:24px;}",
|
|
".fxldao9{height:28px;}",
|
|
".f1w9dchk{width:28px;}",
|
|
".f1d2rq10{height:32px;}",
|
|
".f1szoe96{width:32px;}",
|
|
".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}",
|
|
".f8ljn23{height:36px;}",
|
|
".fpdz1er{width:36px;}",
|
|
".fbhnoac{height:40px;}",
|
|
".feqmc2u{width:40px;}",
|
|
".f1ft4266{height:44px;}",
|
|
".fksc0bp{width:44px;}",
|
|
".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}"
|
|
],
|
|
m: [
|
|
[
|
|
"@media screen and (prefers-reduced-motion: reduce){.f1pme1qz{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}",
|
|
{
|
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
}
|
|
]
|
|
]
|
|
});
|
|
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
inverted: {
|
|
sj55zd: "fonrgv7"
|
|
},
|
|
"extra-tiny": {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
tiny: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
"extra-small": {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
small: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
medium: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
large: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
"extra-large": {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
huge: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "f1pp30po",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "f106mvju"
|
|
}
|
|
}, {
|
|
d: [
|
|
".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
|
|
".fk6fouc{font-family:var(--fontFamilyBase);}",
|
|
".fkhj508{font-size:var(--fontSizeBase300);}",
|
|
".figsok6{font-weight:var(--fontWeightRegular);}",
|
|
".f1i3iumi{line-height:var(--lineHeightBase300);}",
|
|
".fod5ikn{font-size:var(--fontSizeBase400);}",
|
|
".fl43uef{font-weight:var(--fontWeightSemibold);}",
|
|
".faaz57k{line-height:var(--lineHeightBase400);}",
|
|
".f1pp30po{font-size:var(--fontSizeBase500);}",
|
|
".f106mvju{line-height:var(--lineHeightBase500);}"
|
|
]
|
|
});
|
|
const useSpinnerStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const { labelPosition, size, appearance } = state;
|
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
const rootBaseClassName = useRootBaseClassName();
|
|
const rootStyles = useRootStyles();
|
|
const spinnerBaseClassName = useSpinnerBaseClassName();
|
|
const spinnerStyles = useSpinnerStyles();
|
|
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
|
|
const labelStyles = useLabelStyles();
|
|
state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
|
|
if (state.spinner) {
|
|
state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
|
|
}
|
|
if (state.spinnerTail) {
|
|
state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
|
|
}
|
|
if (state.label) {
|
|
state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
|
|
}
|
|
return state;
|
|
};
|