@fluentui/react-spinner 0.0.0-nightly-20230427-0418.1 → 0.0.0-nightly-20230428-0419.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +15 -15
- package/CHANGELOG.md +10 -10
- package/lib-commonjs/components/Spinner/Spinner.js +2 -2
- package/lib-commonjs/components/Spinner/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/index.js +1 -1
- package/lib-commonjs/components/Spinner/index.js.map +1 -1
- package/lib-commonjs/components/Spinner/{useSpinnerStyles.js → useSpinnerStyles.styles.js} +2 -2
- package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js.map +1 -0
- package/package.json +7 -7
- package/dist/index.d.ts +0 -82
- package/lib/Spinner.js +0 -2
- package/lib/Spinner.js.map +0 -1
- package/lib/components/Spinner/DefaultSvg.js +0 -9
- package/lib/components/Spinner/DefaultSvg.js.map +0 -1
- package/lib/components/Spinner/Spinner.js +0 -16
- package/lib/components/Spinner/Spinner.js.map +0 -1
- package/lib/components/Spinner/Spinner.types.js +0 -2
- package/lib/components/Spinner/Spinner.types.js.map +0 -1
- package/lib/components/Spinner/index.js +0 -6
- package/lib/components/Spinner/index.js.map +0 -1
- package/lib/components/Spinner/renderSpinner.js +0 -16
- package/lib/components/Spinner/renderSpinner.js.map +0 -1
- package/lib/components/Spinner/useSpinner.js +0 -63
- package/lib/components/Spinner/useSpinner.js.map +0 -1
- package/lib/components/Spinner/useSpinnerStyles.js +0 -253
- package/lib/components/Spinner/useSpinnerStyles.js.map +0 -1
- package/lib/index.js +0 -2
- package/lib/index.js.map +0 -1
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-spinner",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-spinner_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 28 Apr 2023 04:25:25 GMT",
|
|
6
|
+
"tag": "@fluentui/react-spinner_v0.0.0-nightly-20230428-0419.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230428-0419.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,38 +16,38 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-spinner",
|
|
19
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230428-0419.1",
|
|
20
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-spinner",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230428-0419.1",
|
|
26
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-spinner",
|
|
31
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230428-0419.1",
|
|
32
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-spinner",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230428-0419.1",
|
|
38
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-spinner",
|
|
43
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230428-0419.1",
|
|
44
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-spinner",
|
|
49
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230428-0419.1",
|
|
50
|
+
"commit": "6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839"
|
|
51
51
|
}
|
|
52
52
|
]
|
|
53
53
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-spinner
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 28 Apr 2023 04:25:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230428-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20230428-0419.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.10..@fluentui/react-spinner_v0.0.0-nightly-
|
|
9
|
+
Fri, 28 Apr 2023 04:25:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.10..@fluentui/react-spinner_v0.0.0-nightly-20230428-0419.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230428-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6d0e3c2fb45fde4cf5056d3d18d4c5bc5899a839) by beachball)
|
|
21
21
|
|
|
22
22
|
## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.1.10)
|
|
23
23
|
|
|
@@ -10,11 +10,11 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
|
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
11
|
const _useSpinner = require("./useSpinner");
|
|
12
12
|
const _renderSpinner = require("./renderSpinner");
|
|
13
|
-
const
|
|
13
|
+
const _useSpinnerStylesStyles = require("./useSpinnerStyles.styles");
|
|
14
14
|
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
|
15
15
|
const Spinner = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
16
|
const state = (0, _useSpinner.useSpinner_unstable)(props, ref);
|
|
17
|
-
(0,
|
|
17
|
+
(0, _useSpinnerStylesStyles.useSpinnerStyles_unstable)(state);
|
|
18
18
|
(0, _reactSharedContexts.useCustomStyleHook_unstable)('useSpinnerStyles_unstable')(state);
|
|
19
19
|
return (0, _renderSpinner.renderSpinner_unstable)(state);
|
|
20
20
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Spinner/Spinner.js"],"sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n useSpinnerStyles_unstable(state);\n useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n return renderSpinner_unstable(state);\n});\nSpinner.displayName = 'Spinner';\n//# sourceMappingURL=Spinner.js.map"],"names":["Spinner","React","forwardRef","props","ref","state","useSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","renderSpinner_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;4BACa;+BACG;
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/Spinner.js"],"sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n useSpinnerStyles_unstable(state);\n useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n return renderSpinner_unstable(state);\n});\nSpinner.displayName = 'Spinner';\n//# sourceMappingURL=Spinner.js.map"],"names":["Spinner","React","forwardRef","props","ref","state","useSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","renderSpinner_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;4BACa;+BACG;wCACG;qCACE;AAIrC,MAAMA,UAAU,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnE,MAAMC,QAAQC,IAAAA,+BAAmB,EAACH,OAAOC;IACzCG,IAAAA,iDAAyB,EAACF;IAC1BG,IAAAA,gDAA2B,EAAC,6BAA6BH;IACzD,OAAOI,IAAAA,qCAAsB,EAACJ;AAChC;AACAL,QAAQU,WAAW,GAAG,WACtB,mCAAmC"}
|
|
@@ -7,7 +7,7 @@ _exportStar(require("./Spinner"), exports);
|
|
|
7
7
|
_exportStar(require("./Spinner.types"), exports);
|
|
8
8
|
_exportStar(require("./renderSpinner"), exports);
|
|
9
9
|
_exportStar(require("./useSpinner"), exports);
|
|
10
|
-
_exportStar(require("./useSpinnerStyles"), exports);
|
|
10
|
+
_exportStar(require("./useSpinnerStyles.styles"), exports);
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
12
12
|
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Spinner/index.js"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/index.js"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
|
@@ -373,6 +373,6 @@ const useSpinnerStyles_unstable = (state)=>{
|
|
|
373
373
|
state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
|
|
374
374
|
}
|
|
375
375
|
return state;
|
|
376
|
-
}; //# sourceMappingURL=useSpinnerStyles.js.map
|
|
376
|
+
}; //# sourceMappingURL=useSpinnerStyles.styles.js.map
|
|
377
377
|
|
|
378
|
-
//# sourceMappingURL=useSpinnerStyles.js.map
|
|
378
|
+
//# sourceMappingURL=useSpinnerStyles.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/useSpinnerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinnerClassNames = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label'\n};\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent'\n }\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Brf1p80: \"f4d9j23\",\n Bg96gwp: \"fez10in\",\n i8kkvl: \"f4px1ci\",\n Belr9w4: \"fn67r4l\"\n },\n horizontal: {\n Beiy3e4: \"f1063pyq\"\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".fez10in{line-height:0;}\", \".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\nconst useLoaderStyles = /*#__PURE__*/__styles({\n spinnerSVG: {\n B3aqqti: \"f1or16p5\",\n Brovlpu: \"f1grzc83\",\n Bxa1mx5: \"f19shzzi\",\n Bwaue66: [\"f5tbecn\", \"f15qb8s7\"],\n fyp1ls: \"fn4mtlg\",\n ag6ruv: \"f1y80fxs\",\n osj692: \"f1r2crtq\",\n aq5vjd: \"f1wsi8sr\",\n tlu9e1: \"f1bkm2qd\",\n J3u96z: \"f1urqz7h\",\n d32isg: \"f1da2vov\",\n Bsvqbuc: \"f11rfva0\",\n b3s3i5: \"f1exc66\"\n },\n tiny: {\n Bah9ito: \"f1j4wmu2\",\n ut6tcf: \"f1vppzuq\",\n B7p06xz: \"fv1u54w\",\n B807ibg: \"fngtx1d\"\n },\n \"extra-small\": {\n Bah9ito: \"fmpqlna\",\n ut6tcf: \"f15z5jzu\",\n B7p06xz: \"fv1u54w\",\n B807ibg: \"fadawes\"\n },\n small: {\n Bah9ito: \"fo52gbo\",\n ut6tcf: \"f1b41i3v\",\n B7p06xz: \"fv1u54w\",\n B807ibg: \"f1xqyyrl\"\n },\n medium: {\n Bah9ito: \"f1aiqagr\",\n ut6tcf: \"f1wtx80b\",\n B7p06xz: \"f1flujpd\",\n B807ibg: \"f1u06hy7\"\n },\n large: {\n Bah9ito: \"f1trdq7b\",\n ut6tcf: \"f9e0mc5\",\n B7p06xz: \"f1flujpd\",\n B807ibg: \"f13pmvhl\"\n },\n \"extra-large\": {\n Bah9ito: \"f89rf2a\",\n ut6tcf: \"f1w2xg3q\",\n B7p06xz: \"f1flujpd\",\n B807ibg: \"fmn74v6\"\n },\n huge: {\n Bah9ito: \"f1rx7k5y\",\n ut6tcf: \"f1vtyt49\",\n B7p06xz: \"f1owbg48\",\n B807ibg: \"f1fr1izd\"\n }\n}, {\n f: [\".f1or16p5:focus{outline-width:3px;}\", \".f1grzc83:focus{outline-style:solid;}\", \".f19shzzi:focus{outline-color:transparent;}\"],\n k: [\"@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}\", \"@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}\", \"@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}\", \"@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}\"],\n d: [\".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}\", \".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}\", \".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}\", \".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}\", \".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}\", \".f1wsi8sr>svg{background-color:transparent;}\", \".f1da2vov>svg>circle{cx:50%;}\", \".f11rfva0>svg>circle{cy:50%;}\", \".f1exc66>svg>circle{fill:none;}\", \".f1j4wmu2>svg{height:20px;}\", \".f1vppzuq>svg{width:20px;}\", \".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}\", \".fngtx1d>svg>circle{r:9px;}\", \".fmpqlna>svg{height:24px;}\", \".f15z5jzu>svg{width:24px;}\", \".fadawes>svg>circle{r:11px;}\", \".fo52gbo>svg{height:28px;}\", \".f1b41i3v>svg{width:28px;}\", \".f1xqyyrl>svg>circle{r:13px;}\", \".f1aiqagr>svg{height:32px;}\", \".f1wtx80b>svg{width:32px;}\", \".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}\", \".f1u06hy7>svg>circle{r:14.5px;}\", \".f1trdq7b>svg{height:36px;}\", \".f9e0mc5>svg{width:36px;}\", \".f13pmvhl>svg>circle{r:16.5px;}\", \".f89rf2a>svg{height:40px;}\", \".f1w2xg3q>svg{width:40px;}\", \".fmn74v6>svg>circle{r:18.5px;}\", \".f1rx7k5y>svg{height:44px;}\", \".f1vtyt49>svg{width:44px;}\", \".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}\", \".f1fr1izd>svg>circle{r:20px;}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }]]\n});\nconst useTrackStyles = /*#__PURE__*/__styles({\n inverted: {\n gwg7kz: \"f1jvpmnu\",\n Bvrehnu: \"fq8a5sv\",\n Bidp6o: \"f1b4lwqj\",\n cq3kgi: \"f1najlst\",\n Btwiser: \"fjxod4\",\n B8001xd: \"fu3xdw0\",\n Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n Bo2mdfu: \"f1eseayc\",\n E10nrc: \"folzdkc\",\n Bwl7w15: \"fhlfkde\",\n Bksq7rz: \"f1esql28\"\n },\n primary: {\n gwg7kz: \"f11ditju\",\n B8k2rxp: \"f1m9nikz\",\n Bvrehnu: \"fq8a5sv\",\n Bidp6o: \"f1b4lwqj\",\n cq3kgi: \"f1najlst\",\n Btwiser: \"fjxod4\",\n B8001xd: \"fu3xdw0\",\n Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n Bo2mdfu: \"f1eseayc\",\n E10nrc: \"folzdkc\",\n Bwl7w15: \"fhlfkde\",\n Bksq7rz: \"f61h2gu\",\n y14cdu: \"flglbw1\"\n }\n}, {\n d: [\".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}\", \".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}\", \".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}\", \".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}\", \".fjxod4>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:var(--curveEasyEase);animation-timing-function:var(--curveEasyEase);}\", \".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}\", \".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}\", \".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}\", \".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}\", \".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}\", \".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}\", \".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}\"],\n k: [\"@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}\", \"@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}\", {\n m: \"screen and (forced-colors: active)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}\", {\n m: \"screen and (forced-colors: active)\"\n }]]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n inverted: {\n sj55zd: \"f15aqcq\"\n },\n primary: {},\n tiny: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n \"extra-small\": {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n small: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n medium: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"faaz57k\"\n },\n large: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"faaz57k\"\n },\n \"extra-large\": {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"faaz57k\"\n },\n huge: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"f1pp30po\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"f106mvju\"\n }\n}, {\n d: [\".f15aqcq{color:rgba(255, 255, 255, 1);}\", \".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);}\"]\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = state => {\n const {\n labelPosition,\n size,\n appearance = 'primary'\n } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);\n if (state.spinner) {\n state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);\n }\n if (state.label) {\n state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useSpinnerStyles.styles.js.map"],"names":["spinnerClassNames","useSpinnerStyles_unstable","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","__styles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","mergeClasses"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-spinner",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230428-0419.1",
|
|
4
4
|
"description": "Spinner component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230428-0419.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230428-0419.1",
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20230428-0419.1",
|
|
37
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230428-0419.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230428-0419.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230428-0419.1",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|
|
41
41
|
"@swc/helpers": "^0.4.14"
|
|
42
42
|
},
|
package/dist/index.d.ts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
2
|
-
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
|
-
import { Label } from '@fluentui/react-label';
|
|
5
|
-
import * as React_2 from 'react';
|
|
6
|
-
import type { Slot } from '@fluentui/react-utilities';
|
|
7
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Render the final JSX of Spinner
|
|
11
|
-
*/
|
|
12
|
-
export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Converged Spinner component for the fluentui repo
|
|
16
|
-
*/
|
|
17
|
-
export declare const Spinner: ForwardRefComponent<SpinnerProps>;
|
|
18
|
-
|
|
19
|
-
export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Spinner Props
|
|
23
|
-
*/
|
|
24
|
-
export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {
|
|
25
|
-
/**
|
|
26
|
-
* The appearance of the Spinner.
|
|
27
|
-
* @default 'primary'
|
|
28
|
-
*/
|
|
29
|
-
appearance?: 'primary' | 'inverted';
|
|
30
|
-
/**
|
|
31
|
-
* Where the label is positioned relative to the Spinner
|
|
32
|
-
* @default 'after'
|
|
33
|
-
*/
|
|
34
|
-
labelPosition?: 'above' | 'below' | 'before' | 'after';
|
|
35
|
-
/**
|
|
36
|
-
* The size of the spinner.
|
|
37
|
-
* @default 'medium'
|
|
38
|
-
*/
|
|
39
|
-
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export declare type SpinnerSlots = {
|
|
43
|
-
/**
|
|
44
|
-
* The root of the Spinner.
|
|
45
|
-
* The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
|
|
46
|
-
*/
|
|
47
|
-
root: NonNullable<Slot<'div'>>;
|
|
48
|
-
/**
|
|
49
|
-
* The slot for the animated svg.
|
|
50
|
-
* The spinner slot receives the `className` and `style` that handles the spinning animation.
|
|
51
|
-
* An svg is also rendered as a child of this slot
|
|
52
|
-
*/
|
|
53
|
-
spinner?: Slot<'span'>;
|
|
54
|
-
/**
|
|
55
|
-
* The label of the Slider.
|
|
56
|
-
* The label slot receives the styling related to the text associated with the Spinner.
|
|
57
|
-
*/
|
|
58
|
-
label?: Slot<typeof Label>;
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* State used in rendering Spinner
|
|
63
|
-
*/
|
|
64
|
-
export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Create the state required to render Spinner.
|
|
68
|
-
*
|
|
69
|
-
* The returned state can be modified with hooks such as useSpinnerStyles_unstable,
|
|
70
|
-
* before being passed to renderSpinner_unstable.
|
|
71
|
-
*
|
|
72
|
-
* @param props - props from this instance of Spinner
|
|
73
|
-
* @param ref - reference to root HTMLElement of Spinner
|
|
74
|
-
*/
|
|
75
|
-
export declare const useSpinner_unstable: (props: SpinnerProps, ref: React_2.Ref<HTMLElement>) => SpinnerState;
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* Apply styling to the Spinner slots based on the state
|
|
79
|
-
*/
|
|
80
|
-
export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
|
|
81
|
-
|
|
82
|
-
export { }
|
package/lib/Spinner.js
DELETED
package/lib/Spinner.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../src/Spinner.ts"],"sourcesContent":["export * from './components/Spinner/index';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export const DefaultSvg = () => /*#__PURE__*/React.createElement("svg", {
|
|
3
|
-
className: "fui-Spinner__Progressbar"
|
|
4
|
-
}, /*#__PURE__*/React.createElement("circle", {
|
|
5
|
-
className: "fui-Spinner__Track"
|
|
6
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
|
7
|
-
className: "fui-Spinner__Tail"
|
|
8
|
-
}));
|
|
9
|
-
//# sourceMappingURL=DefaultSvg.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","DefaultSvg","createElement","className"],"sources":["../../../src/components/Spinner/DefaultSvg.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n <svg className=\"fui-Spinner__Progressbar\">\n <circle className=\"fui-Spinner__Track\" />\n <circle className=\"fui-Spinner__Tail\" />\n </svg>\n);\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,OAAO,MAAMC,UAAA,GAAaA,CAAA,kBACxBD,KAAA,CAAAE,aAAA,CAAC;EAAIC,SAAA,EAAU;gBACbH,KAAA,CAAAE,aAAA,CAAC;EAAOC,SAAA,EAAU;iBAClBH,KAAA,CAAAE,aAAA,CAAC;EAAOC,SAAA,EAAU"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useSpinner_unstable } from './useSpinner';
|
|
3
|
-
import { renderSpinner_unstable } from './renderSpinner';
|
|
4
|
-
import { useSpinnerStyles_unstable } from './useSpinnerStyles';
|
|
5
|
-
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
|
|
6
|
-
/**
|
|
7
|
-
* Converged Spinner component for the fluentui repo
|
|
8
|
-
*/
|
|
9
|
-
export const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
-
const state = useSpinner_unstable(props, ref);
|
|
11
|
-
useSpinnerStyles_unstable(state);
|
|
12
|
-
useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);
|
|
13
|
-
return renderSpinner_unstable(state);
|
|
14
|
-
});
|
|
15
|
-
Spinner.displayName = 'Spinner';
|
|
16
|
-
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","Spinner","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n\n useSpinnerStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n\n return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAG1C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQR,mBAAA,CAAoBM,KAAA,EAAOC,GAAA;EAEzCL,yBAAA,CAA0BM,KAAA;EAE1BL,2BAAA,CAA4B,6BAA6BK,KAAA;EAEzD,OAAOP,sBAAA,CAAuBO,KAAA;AAChC;AAEAJ,OAAA,CAAQK,WAAW,GAAG"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n /**\n * The root of the Spinner.\n * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The slot for the animated svg.\n * The spinner slot receives the `className` and `style` that handles the spinning animation.\n * An svg is also rendered as a child of this slot\n */\n spinner?: Slot<'span'>;\n /**\n * The label of the Slider.\n * The label slot receives the styling related to the text associated with the Spinner.\n */\n label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n /**\n * The appearance of the Spinner.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n\n /**\n * Where the label is positioned relative to the Spinner\n * @default 'after'\n */\n labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n /**\n * The size of the spinner.\n * @default 'medium'\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;\n"],"mappings":"AAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/Spinner/index.ts"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Render the final JSX of Spinner
|
|
5
|
-
*/
|
|
6
|
-
export const renderSpinner_unstable = state => {
|
|
7
|
-
const {
|
|
8
|
-
slots,
|
|
9
|
-
slotProps
|
|
10
|
-
} = getSlotsNext(state);
|
|
11
|
-
const {
|
|
12
|
-
labelPosition
|
|
13
|
-
} = state;
|
|
14
|
-
return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/createElement(slots.label, slotProps.label), slots.spinner && /*#__PURE__*/createElement(slots.spinner, slotProps.spinner), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/createElement(slots.label, slotProps.label));
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=renderSpinner.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createElement","getSlotsNext","renderSpinner_unstable","state","slots","slotProps","labelPosition","root","label","spinner"],"sources":["../../../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n const { slots, slotProps } = getSlotsNext<SpinnerSlots>(state);\n const { labelPosition } = state;\n return (\n <slots.root {...slotProps.root}>\n {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n {slots.spinner && <slots.spinner {...slotProps.spinner} />}\n {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,sBAAA,GAA0BC,KAAA,IAAwB;EAC7D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA2BE,KAAA;EACxD,MAAM;IAAEG;EAAa,CAAE,GAAGH,KAAA;EAC1B,oBACEH,aAdJ,CAcKI,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,KAAK,KAAKF,aAAA,KAAkB,WAAWA,aAAA,KAAkB,QAAO,kBAAMN,aAfnF,CAeoFI,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC5GJ,KAAA,CAAMK,OAAO,iBAAIT,aAhBxB,CAgByBI,KAAA,CAAMK,OAAO,EAAKJ,SAAA,CAAUI,OAAO,GACrDL,KAAA,CAAMI,KAAK,KAAKF,aAAA,KAAkB,WAAWA,aAAA,KAAkB,OAAM,kBAAMN,aAjBlF,CAiBmFI,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK;AAGlH"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
|
3
|
-
import { Label } from '@fluentui/react-label';
|
|
4
|
-
import { DefaultSvg } from './DefaultSvg';
|
|
5
|
-
/**
|
|
6
|
-
* Create the state required to render Spinner.
|
|
7
|
-
*
|
|
8
|
-
* The returned state can be modified with hooks such as useSpinnerStyles_unstable,
|
|
9
|
-
* before being passed to renderSpinner_unstable.
|
|
10
|
-
*
|
|
11
|
-
* @param props - props from this instance of Spinner
|
|
12
|
-
* @param ref - reference to root HTMLElement of Spinner
|
|
13
|
-
*/
|
|
14
|
-
export const useSpinner_unstable = (props, ref) => {
|
|
15
|
-
// Props
|
|
16
|
-
const {
|
|
17
|
-
appearance = 'primary',
|
|
18
|
-
labelPosition = 'after',
|
|
19
|
-
size = 'medium'
|
|
20
|
-
} = props;
|
|
21
|
-
const baseId = useId('spinner');
|
|
22
|
-
const {
|
|
23
|
-
role = 'progressbar',
|
|
24
|
-
tabIndex,
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const nativeRoot = getNativeElementProps('div', {
|
|
28
|
-
ref,
|
|
29
|
-
role,
|
|
30
|
-
...rest
|
|
31
|
-
}, ['size']);
|
|
32
|
-
const labelShorthand = resolveShorthand(props.label, {
|
|
33
|
-
defaultProps: {
|
|
34
|
-
id: baseId
|
|
35
|
-
},
|
|
36
|
-
required: false
|
|
37
|
-
});
|
|
38
|
-
const spinnerShortHand = resolveShorthand(props.spinner, {
|
|
39
|
-
required: true,
|
|
40
|
-
defaultProps: {
|
|
41
|
-
children: /*#__PURE__*/React.createElement(DefaultSvg, null),
|
|
42
|
-
tabIndex
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
|
|
46
|
-
nativeRoot['aria-labelledby'] = labelShorthand.id;
|
|
47
|
-
}
|
|
48
|
-
const state = {
|
|
49
|
-
appearance,
|
|
50
|
-
labelPosition,
|
|
51
|
-
size,
|
|
52
|
-
components: {
|
|
53
|
-
root: 'div',
|
|
54
|
-
spinner: 'span',
|
|
55
|
-
label: Label
|
|
56
|
-
},
|
|
57
|
-
root: nativeRoot,
|
|
58
|
-
spinner: spinnerShortHand,
|
|
59
|
-
label: labelShorthand
|
|
60
|
-
};
|
|
61
|
-
return state;
|
|
62
|
-
};
|
|
63
|
-
//# sourceMappingURL=useSpinner.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Label","DefaultSvg","useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","createElement","state","components","root"],"sources":["../../../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n // Props\n const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n const baseId = useId('spinner');\n\n const { role = 'progressbar', tabIndex, ...rest } = props;\n const nativeRoot = getNativeElementProps('div', { ref, role, ...rest }, ['size']);\n\n const labelShorthand = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId,\n },\n required: false,\n });\n\n const spinnerShortHand = resolveShorthand(props.spinner, {\n required: true,\n defaultProps: {\n children: <DefaultSvg />,\n tabIndex,\n },\n });\n\n if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n nativeRoot['aria-labelledby'] = labelShorthand.id;\n }\n\n const state: SpinnerState = {\n appearance,\n labelPosition,\n size,\n components: {\n root: 'div',\n spinner: 'span',\n label: Label,\n },\n root: nativeRoot,\n spinner: spinnerShortHand,\n label: labelShorthand,\n };\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAE/D,SAASC,KAAK,QAAQ;AACtB,SAASC,UAAU,QAAQ;AAE3B;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG;EACA,MAAM;IAAEC,UAAA,GAAa;IAAWC,aAAA,GAAgB;IAASC,IAAA,GAAO;EAAQ,CAAE,GAAGJ,KAAA;EAC7E,MAAMK,MAAA,GAAST,KAAA,CAAM;EAErB,MAAM;IAAEU,IAAA,GAAO;IAAeC,QAAA;IAAU,GAAGC;EAAA,CAAM,GAAGR,KAAA;EACpD,MAAMS,UAAA,GAAaf,qBAAA,CAAsB,OAAO;IAAEO,GAAA;IAAKK,IAAA;IAAM,GAAGE;EAAK,GAAG,CAAC,OAAO;EAEhF,MAAME,cAAA,GAAiBf,gBAAA,CAAiBK,KAAA,CAAMW,KAAK,EAAE;IACnDC,YAAA,EAAc;MACZC,EAAA,EAAIR;IACN;IACAS,QAAA,EAAU;EACZ;EAEA,MAAMC,gBAAA,GAAmBpB,gBAAA,CAAiBK,KAAA,CAAMgB,OAAO,EAAE;IACvDF,QAAA,EAAU,IAAI;IACdF,YAAA,EAAc;MACZK,QAAA,eAAUxB,KAAA,CAAAyB,aAAA,CAACpB,UAAA;MACXS;IACF;EACF;EAEA,IAAIG,cAAA,IAAkBD,UAAA,IAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;IAClEA,UAAU,CAAC,kBAAkB,GAAGC,cAAA,CAAeG,EAAE;EACnD;EAEA,MAAMM,KAAA,GAAsB;IAC1BjB,UAAA;IACAC,aAAA;IACAC,IAAA;IACAgB,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,OAAA,EAAS;MACTL,KAAA,EAAOd;IACT;IACAwB,IAAA,EAAMZ,UAAA;IACNO,OAAA,EAASD,gBAAA;IACTJ,KAAA,EAAOD;EACT;EACA,OAAOS,KAAA;AACT"}
|
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
-
export const spinnerClassNames = {
|
|
4
|
-
root: 'fui-Spinner',
|
|
5
|
-
spinner: 'fui-Spinner__spinner',
|
|
6
|
-
label: 'fui-Spinner__label'
|
|
7
|
-
};
|
|
8
|
-
/*
|
|
9
|
-
* TODO: Update with proper tokens when added
|
|
10
|
-
* Radii for the Spinner circles
|
|
11
|
-
*/
|
|
12
|
-
const rValues = {
|
|
13
|
-
tiny: '9px',
|
|
14
|
-
extraSmall: '11px',
|
|
15
|
-
small: '13px',
|
|
16
|
-
medium: '14.5px',
|
|
17
|
-
large: '16.5px',
|
|
18
|
-
extraLarge: '18.5px',
|
|
19
|
-
huge: '20px'
|
|
20
|
-
};
|
|
21
|
-
/*
|
|
22
|
-
* TODO: Update with proper tokens when added
|
|
23
|
-
* Sizes for the Spinner
|
|
24
|
-
*/
|
|
25
|
-
const spinnnerSizes = {
|
|
26
|
-
tiny: '20px',
|
|
27
|
-
extraSmall: '24px',
|
|
28
|
-
small: '28px',
|
|
29
|
-
medium: '32px',
|
|
30
|
-
large: '36px',
|
|
31
|
-
extraLarge: '40px',
|
|
32
|
-
huge: '44px'
|
|
33
|
-
};
|
|
34
|
-
/*
|
|
35
|
-
* TODO: Update with proper tokens when added
|
|
36
|
-
* Animation for Spinner
|
|
37
|
-
*/
|
|
38
|
-
const spinnerAnimation = {
|
|
39
|
-
container: {
|
|
40
|
-
animationDuration: '3s',
|
|
41
|
-
animationIterationCount: 'infinite',
|
|
42
|
-
animationTimingFunction: 'linear',
|
|
43
|
-
backgroundColor: 'transparent'
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* Styles for the root slot
|
|
48
|
-
*/
|
|
49
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
|
50
|
-
root: {
|
|
51
|
-
mc9l5x: "f22iagw",
|
|
52
|
-
Bt984gj: "f122n59",
|
|
53
|
-
Brf1p80: "f4d9j23",
|
|
54
|
-
Bg96gwp: "fez10in",
|
|
55
|
-
i8kkvl: "f4px1ci",
|
|
56
|
-
Belr9w4: "fn67r4l"
|
|
57
|
-
},
|
|
58
|
-
horizontal: {
|
|
59
|
-
Beiy3e4: "f1063pyq"
|
|
60
|
-
},
|
|
61
|
-
vertical: {
|
|
62
|
-
Beiy3e4: "f1vx9l62"
|
|
63
|
-
}
|
|
64
|
-
}, {
|
|
65
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
|
|
66
|
-
});
|
|
67
|
-
const useLoaderStyles = /*#__PURE__*/__styles({
|
|
68
|
-
spinnerSVG: {
|
|
69
|
-
B3aqqti: "f1or16p5",
|
|
70
|
-
Brovlpu: "f1grzc83",
|
|
71
|
-
Bxa1mx5: "f19shzzi",
|
|
72
|
-
Bwaue66: ["f5tbecn", "f15qb8s7"],
|
|
73
|
-
fyp1ls: "fn4mtlg",
|
|
74
|
-
ag6ruv: "f1y80fxs",
|
|
75
|
-
osj692: "f1r2crtq",
|
|
76
|
-
aq5vjd: "f1wsi8sr",
|
|
77
|
-
tlu9e1: "f1bkm2qd",
|
|
78
|
-
J3u96z: "f1urqz7h",
|
|
79
|
-
d32isg: "f1da2vov",
|
|
80
|
-
Bsvqbuc: "f11rfva0",
|
|
81
|
-
b3s3i5: "f1exc66"
|
|
82
|
-
},
|
|
83
|
-
tiny: {
|
|
84
|
-
Bah9ito: "f1j4wmu2",
|
|
85
|
-
ut6tcf: "f1vppzuq",
|
|
86
|
-
B7p06xz: "fv1u54w",
|
|
87
|
-
B807ibg: "fngtx1d"
|
|
88
|
-
},
|
|
89
|
-
"extra-small": {
|
|
90
|
-
Bah9ito: "fmpqlna",
|
|
91
|
-
ut6tcf: "f15z5jzu",
|
|
92
|
-
B7p06xz: "fv1u54w",
|
|
93
|
-
B807ibg: "fadawes"
|
|
94
|
-
},
|
|
95
|
-
small: {
|
|
96
|
-
Bah9ito: "fo52gbo",
|
|
97
|
-
ut6tcf: "f1b41i3v",
|
|
98
|
-
B7p06xz: "fv1u54w",
|
|
99
|
-
B807ibg: "f1xqyyrl"
|
|
100
|
-
},
|
|
101
|
-
medium: {
|
|
102
|
-
Bah9ito: "f1aiqagr",
|
|
103
|
-
ut6tcf: "f1wtx80b",
|
|
104
|
-
B7p06xz: "f1flujpd",
|
|
105
|
-
B807ibg: "f1u06hy7"
|
|
106
|
-
},
|
|
107
|
-
large: {
|
|
108
|
-
Bah9ito: "f1trdq7b",
|
|
109
|
-
ut6tcf: "f9e0mc5",
|
|
110
|
-
B7p06xz: "f1flujpd",
|
|
111
|
-
B807ibg: "f13pmvhl"
|
|
112
|
-
},
|
|
113
|
-
"extra-large": {
|
|
114
|
-
Bah9ito: "f89rf2a",
|
|
115
|
-
ut6tcf: "f1w2xg3q",
|
|
116
|
-
B7p06xz: "f1flujpd",
|
|
117
|
-
B807ibg: "fmn74v6"
|
|
118
|
-
},
|
|
119
|
-
huge: {
|
|
120
|
-
Bah9ito: "f1rx7k5y",
|
|
121
|
-
ut6tcf: "f1vtyt49",
|
|
122
|
-
B7p06xz: "f1owbg48",
|
|
123
|
-
B807ibg: "f1fr1izd"
|
|
124
|
-
}
|
|
125
|
-
}, {
|
|
126
|
-
f: [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
|
|
127
|
-
k: ["@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}", "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"],
|
|
128
|
-
d: [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"],
|
|
129
|
-
m: [["@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
130
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
131
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
132
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
133
|
-
}]]
|
|
134
|
-
});
|
|
135
|
-
const useTrackStyles = /*#__PURE__*/__styles({
|
|
136
|
-
inverted: {
|
|
137
|
-
gwg7kz: "f1jvpmnu",
|
|
138
|
-
Bvrehnu: "fq8a5sv",
|
|
139
|
-
Bidp6o: "f1b4lwqj",
|
|
140
|
-
cq3kgi: "f1najlst",
|
|
141
|
-
Btwiser: "fjxod4",
|
|
142
|
-
B8001xd: "fu3xdw0",
|
|
143
|
-
Bdordwa: ["f1ttdh6v", "fmyjox0"],
|
|
144
|
-
Bo2mdfu: "f1eseayc",
|
|
145
|
-
E10nrc: "folzdkc",
|
|
146
|
-
Bwl7w15: "fhlfkde",
|
|
147
|
-
Bksq7rz: "f1esql28"
|
|
148
|
-
},
|
|
149
|
-
primary: {
|
|
150
|
-
gwg7kz: "f11ditju",
|
|
151
|
-
B8k2rxp: "f1m9nikz",
|
|
152
|
-
Bvrehnu: "fq8a5sv",
|
|
153
|
-
Bidp6o: "f1b4lwqj",
|
|
154
|
-
cq3kgi: "f1najlst",
|
|
155
|
-
Btwiser: "fjxod4",
|
|
156
|
-
B8001xd: "fu3xdw0",
|
|
157
|
-
Bdordwa: ["f1ttdh6v", "fmyjox0"],
|
|
158
|
-
Bo2mdfu: "f1eseayc",
|
|
159
|
-
E10nrc: "folzdkc",
|
|
160
|
-
Bwl7w15: "fhlfkde",
|
|
161
|
-
Bksq7rz: "f61h2gu",
|
|
162
|
-
y14cdu: "flglbw1"
|
|
163
|
-
}
|
|
164
|
-
}, {
|
|
165
|
-
d: [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjxod4>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:var(--curveEasyEase);animation-timing-function:var(--curveEasyEase);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}"],
|
|
166
|
-
k: ["@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"],
|
|
167
|
-
m: [["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
168
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
169
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
170
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
171
|
-
}], ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
|
|
172
|
-
m: "screen and (forced-colors: active)"
|
|
173
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
174
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
175
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
176
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
177
|
-
}], ["@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}", {
|
|
178
|
-
m: "screen and (forced-colors: active)"
|
|
179
|
-
}]]
|
|
180
|
-
});
|
|
181
|
-
const useLabelStyles = /*#__PURE__*/__styles({
|
|
182
|
-
inverted: {
|
|
183
|
-
sj55zd: "f15aqcq"
|
|
184
|
-
},
|
|
185
|
-
primary: {},
|
|
186
|
-
tiny: {
|
|
187
|
-
Bahqtrf: "fk6fouc",
|
|
188
|
-
Be2twd7: "fkhj508",
|
|
189
|
-
Bhrd7zp: "figsok6",
|
|
190
|
-
Bg96gwp: "f1i3iumi"
|
|
191
|
-
},
|
|
192
|
-
"extra-small": {
|
|
193
|
-
Bahqtrf: "fk6fouc",
|
|
194
|
-
Be2twd7: "fkhj508",
|
|
195
|
-
Bhrd7zp: "figsok6",
|
|
196
|
-
Bg96gwp: "f1i3iumi"
|
|
197
|
-
},
|
|
198
|
-
small: {
|
|
199
|
-
Bahqtrf: "fk6fouc",
|
|
200
|
-
Be2twd7: "fkhj508",
|
|
201
|
-
Bhrd7zp: "figsok6",
|
|
202
|
-
Bg96gwp: "f1i3iumi"
|
|
203
|
-
},
|
|
204
|
-
medium: {
|
|
205
|
-
Bahqtrf: "fk6fouc",
|
|
206
|
-
Be2twd7: "fod5ikn",
|
|
207
|
-
Bhrd7zp: "fl43uef",
|
|
208
|
-
Bg96gwp: "faaz57k"
|
|
209
|
-
},
|
|
210
|
-
large: {
|
|
211
|
-
Bahqtrf: "fk6fouc",
|
|
212
|
-
Be2twd7: "fod5ikn",
|
|
213
|
-
Bhrd7zp: "fl43uef",
|
|
214
|
-
Bg96gwp: "faaz57k"
|
|
215
|
-
},
|
|
216
|
-
"extra-large": {
|
|
217
|
-
Bahqtrf: "fk6fouc",
|
|
218
|
-
Be2twd7: "fod5ikn",
|
|
219
|
-
Bhrd7zp: "fl43uef",
|
|
220
|
-
Bg96gwp: "faaz57k"
|
|
221
|
-
},
|
|
222
|
-
huge: {
|
|
223
|
-
Bahqtrf: "fk6fouc",
|
|
224
|
-
Be2twd7: "f1pp30po",
|
|
225
|
-
Bhrd7zp: "fl43uef",
|
|
226
|
-
Bg96gwp: "f106mvju"
|
|
227
|
-
}
|
|
228
|
-
}, {
|
|
229
|
-
d: [".f15aqcq{color:rgba(255, 255, 255, 1);}", ".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);}"]
|
|
230
|
-
});
|
|
231
|
-
/**
|
|
232
|
-
* Apply styling to the Spinner slots based on the state
|
|
233
|
-
*/
|
|
234
|
-
export const useSpinnerStyles_unstable = state => {
|
|
235
|
-
const {
|
|
236
|
-
labelPosition,
|
|
237
|
-
size,
|
|
238
|
-
appearance = 'primary'
|
|
239
|
-
} = state;
|
|
240
|
-
const rootStyles = useRootStyles();
|
|
241
|
-
const spinnerStyles = useLoaderStyles();
|
|
242
|
-
const labelStyles = useLabelStyles();
|
|
243
|
-
const trackStyles = useTrackStyles();
|
|
244
|
-
state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
|
|
245
|
-
if (state.spinner) {
|
|
246
|
-
state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
|
|
247
|
-
}
|
|
248
|
-
if (state.label) {
|
|
249
|
-
state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
|
|
250
|
-
}
|
|
251
|
-
return state;
|
|
252
|
-
};
|
|
253
|
-
//# sourceMappingURL=useSpinnerStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","spinnerClassNames","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className"],"sources":["../../../src/components/Spinner/useSpinnerStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus': {\n ...shorthands.outline('3px', 'solid', 'transparent'),\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n 'extra-small': {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n 'extra-large': {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorBrandStroke2,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n inverted: {\n color: 'rgba(255, 255, 255, 1)', // This is white alpha but the token is not exported\n },\n\n primary: {}, // no change\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n 'extra-small': {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n 'extra-large': {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { labelPosition, size, appearance = 'primary' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n spinnerStyles[size],\n trackStyles[appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n labelStyles[appearance],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
package/lib/index.js
DELETED
package/lib/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n Spinner,\n spinnerClassNames,\n renderSpinner_unstable,\n useSpinner_unstable,\n useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Spinner/useSpinnerStyles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinnerClassNames = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label'\n};\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent'\n }\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Brf1p80: \"f4d9j23\",\n Bg96gwp: \"fez10in\",\n i8kkvl: \"f4px1ci\",\n Belr9w4: \"fn67r4l\"\n },\n horizontal: {\n Beiy3e4: \"f1063pyq\"\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".fez10in{line-height:0;}\", \".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\nconst useLoaderStyles = /*#__PURE__*/__styles({\n spinnerSVG: {\n B3aqqti: \"f1or16p5\",\n Brovlpu: \"f1grzc83\",\n Bxa1mx5: \"f19shzzi\",\n Bwaue66: [\"f5tbecn\", \"f15qb8s7\"],\n fyp1ls: \"fn4mtlg\",\n ag6ruv: \"f1y80fxs\",\n osj692: \"f1r2crtq\",\n aq5vjd: \"f1wsi8sr\",\n tlu9e1: \"f1bkm2qd\",\n J3u96z: \"f1urqz7h\",\n d32isg: \"f1da2vov\",\n Bsvqbuc: \"f11rfva0\",\n b3s3i5: \"f1exc66\"\n },\n tiny: {\n Bah9ito: \"f1j4wmu2\",\n ut6tcf: \"f1vppzuq\",\n B7p06xz: \"fv1u54w\",\n B807ibg: \"fngtx1d\"\n },\n \"extra-small\": {\n Bah9ito: \"fmpqlna\",\n ut6tcf: \"f15z5jzu\",\n B7p06xz: \"fv1u54w\",\n B807ibg: \"fadawes\"\n },\n small: {\n Bah9ito: \"fo52gbo\",\n ut6tcf: \"f1b41i3v\",\n B7p06xz: \"fv1u54w\",\n B807ibg: \"f1xqyyrl\"\n },\n medium: {\n Bah9ito: \"f1aiqagr\",\n ut6tcf: \"f1wtx80b\",\n B7p06xz: \"f1flujpd\",\n B807ibg: \"f1u06hy7\"\n },\n large: {\n Bah9ito: \"f1trdq7b\",\n ut6tcf: \"f9e0mc5\",\n B7p06xz: \"f1flujpd\",\n B807ibg: \"f13pmvhl\"\n },\n \"extra-large\": {\n Bah9ito: \"f89rf2a\",\n ut6tcf: \"f1w2xg3q\",\n B7p06xz: \"f1flujpd\",\n B807ibg: \"fmn74v6\"\n },\n huge: {\n Bah9ito: \"f1rx7k5y\",\n ut6tcf: \"f1vtyt49\",\n B7p06xz: \"f1owbg48\",\n B807ibg: \"f1fr1izd\"\n }\n}, {\n f: [\".f1or16p5:focus{outline-width:3px;}\", \".f1grzc83:focus{outline-style:solid;}\", \".f19shzzi:focus{outline-color:transparent;}\"],\n k: [\"@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}\", \"@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}\", \"@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}\", \"@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}\"],\n d: [\".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}\", \".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}\", \".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}\", \".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}\", \".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}\", \".f1wsi8sr>svg{background-color:transparent;}\", \".f1da2vov>svg>circle{cx:50%;}\", \".f11rfva0>svg>circle{cy:50%;}\", \".f1exc66>svg>circle{fill:none;}\", \".f1j4wmu2>svg{height:20px;}\", \".f1vppzuq>svg{width:20px;}\", \".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}\", \".fngtx1d>svg>circle{r:9px;}\", \".fmpqlna>svg{height:24px;}\", \".f15z5jzu>svg{width:24px;}\", \".fadawes>svg>circle{r:11px;}\", \".fo52gbo>svg{height:28px;}\", \".f1b41i3v>svg{width:28px;}\", \".f1xqyyrl>svg>circle{r:13px;}\", \".f1aiqagr>svg{height:32px;}\", \".f1wtx80b>svg{width:32px;}\", \".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}\", \".f1u06hy7>svg>circle{r:14.5px;}\", \".f1trdq7b>svg{height:36px;}\", \".f9e0mc5>svg{width:36px;}\", \".f13pmvhl>svg>circle{r:16.5px;}\", \".f89rf2a>svg{height:40px;}\", \".f1w2xg3q>svg{width:40px;}\", \".fmn74v6>svg>circle{r:18.5px;}\", \".f1rx7k5y>svg{height:44px;}\", \".f1vtyt49>svg{width:44px;}\", \".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}\", \".f1fr1izd>svg>circle{r:20px;}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }]]\n});\nconst useTrackStyles = /*#__PURE__*/__styles({\n inverted: {\n gwg7kz: \"f1jvpmnu\",\n Bvrehnu: \"fq8a5sv\",\n Bidp6o: \"f1b4lwqj\",\n cq3kgi: \"f1najlst\",\n Btwiser: \"fjxod4\",\n B8001xd: \"fu3xdw0\",\n Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n Bo2mdfu: \"f1eseayc\",\n E10nrc: \"folzdkc\",\n Bwl7w15: \"fhlfkde\",\n Bksq7rz: \"f1esql28\"\n },\n primary: {\n gwg7kz: \"f11ditju\",\n B8k2rxp: \"f1m9nikz\",\n Bvrehnu: \"fq8a5sv\",\n Bidp6o: \"f1b4lwqj\",\n cq3kgi: \"f1najlst\",\n Btwiser: \"fjxod4\",\n B8001xd: \"fu3xdw0\",\n Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n Bo2mdfu: \"f1eseayc\",\n E10nrc: \"folzdkc\",\n Bwl7w15: \"fhlfkde\",\n Bksq7rz: \"f61h2gu\",\n y14cdu: \"flglbw1\"\n }\n}, {\n d: [\".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}\", \".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}\", \".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}\", \".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}\", \".fjxod4>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:var(--curveEasyEase);animation-timing-function:var(--curveEasyEase);}\", \".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}\", \".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}\", \".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}\", \".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}\", \".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}\", \".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}\", \".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}\"],\n k: [\"@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}\", \"@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}\", {\n m: \"screen and (forced-colors: active)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }], [\"@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}\", {\n m: \"screen and (forced-colors: active)\"\n }]]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n inverted: {\n sj55zd: \"f15aqcq\"\n },\n primary: {},\n tiny: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n \"extra-small\": {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n small: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n medium: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"faaz57k\"\n },\n large: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"faaz57k\"\n },\n \"extra-large\": {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fod5ikn\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"faaz57k\"\n },\n huge: {\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"f1pp30po\",\n Bhrd7zp: \"fl43uef\",\n Bg96gwp: \"f106mvju\"\n }\n}, {\n d: [\".f15aqcq{color:rgba(255, 255, 255, 1);}\", \".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);}\"]\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = state => {\n const {\n labelPosition,\n size,\n appearance = 'primary'\n } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);\n if (state.spinner) {\n state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);\n }\n if (state.label) {\n state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useSpinnerStyles.js.map"],"names":["spinnerClassNames","useSpinnerStyles_unstable","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","__styles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","mergeClasses"],"mappings":"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"}
|