@fluentui/react-spinner 0.0.0-nightly-20220512-0418.1 → 0.0.0-nightly-20220517-0418.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.
Files changed (26) hide show
  1. package/CHANGELOG.json +26 -14
  2. package/CHANGELOG.md +11 -9
  3. package/{lib → dist}/tsdoc-metadata.json +0 -0
  4. package/lib/components/Spinner/useSpinnerStyles.js +24 -39
  5. package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
  6. package/lib-commonjs/components/Spinner/useSpinnerStyles.js +23 -38
  7. package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
  8. package/package.json +7 -7
  9. package/lib/Spinner.d.ts +0 -1
  10. package/lib/components/Spinner/DefaultSvg.d.ts +0 -1
  11. package/lib/components/Spinner/Spinner.d.ts +0 -6
  12. package/lib/components/Spinner/Spinner.types.d.ts +0 -49
  13. package/lib/components/Spinner/index.d.ts +0 -5
  14. package/lib/components/Spinner/renderSpinner.d.ts +0 -5
  15. package/lib/components/Spinner/useSpinner.d.ts +0 -12
  16. package/lib/components/Spinner/useSpinnerStyles.d.ts +0 -7
  17. package/lib/index.d.ts +0 -2
  18. package/lib-commonjs/Spinner.d.ts +0 -1
  19. package/lib-commonjs/components/Spinner/DefaultSvg.d.ts +0 -1
  20. package/lib-commonjs/components/Spinner/Spinner.d.ts +0 -6
  21. package/lib-commonjs/components/Spinner/Spinner.types.d.ts +0 -49
  22. package/lib-commonjs/components/Spinner/index.d.ts +0 -5
  23. package/lib-commonjs/components/Spinner/renderSpinner.d.ts +0 -5
  24. package/lib-commonjs/components/Spinner/useSpinner.d.ts +0 -12
  25. package/lib-commonjs/components/Spinner/useSpinnerStyles.d.ts +0 -7
  26. package/lib-commonjs/index.d.ts +0 -2
package/CHANGELOG.json CHANGED
@@ -2,16 +2,16 @@
2
2
  "name": "@fluentui/react-spinner",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 12 May 2022 04:32:32 GMT",
6
- "tag": "@fluentui/react-spinner_v0.0.0-nightly-20220512-0418.1",
7
- "version": "0.0.0-nightly-20220512-0418.1",
5
+ "date": "Tue, 17 May 2022 04:30:54 GMT",
6
+ "tag": "@fluentui/react-spinner_v0.0.0-nightly-20220517-0418.1",
7
+ "version": "0.0.0-nightly-20220517-0418.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
11
- "author": "email not defined",
11
+ "author": "olfedias@microsoft.com",
12
12
  "package": "@fluentui/react-spinner",
13
- "commit": "not available",
14
- "comment": "Release nightly v9"
13
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
14
+ "comment": "chore: Update Griffel to latest version"
15
15
  },
16
16
  {
17
17
  "author": "Humberto.Morimoto@microsoft.com",
@@ -25,29 +25,41 @@
25
25
  "commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
26
26
  "comment": "Updated react-label package version to RC."
27
27
  },
28
+ {
29
+ "author": "gcox@microsoft.com",
30
+ "package": "@fluentui/react-spinner",
31
+ "commit": "06e13fdfd614eb965e922dec138a1e6df902b16e",
32
+ "comment": "Updated to use tokens were possible"
33
+ },
34
+ {
35
+ "author": "martinhochel@microsoft.com",
36
+ "package": "@fluentui/react-spinner",
37
+ "commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
38
+ "comment": "feat: ship rolluped only dts"
39
+ },
28
40
  {
29
41
  "author": "beachball",
30
42
  "package": "@fluentui/react-spinner",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220512-0418.1",
32
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
43
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220517-0418.1",
44
+ "commit": "f95f6684cb226074554f5279075ff446d8397b6b"
33
45
  },
34
46
  {
35
47
  "author": "beachball",
36
48
  "package": "@fluentui/react-spinner",
37
- "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220512-0418.1",
38
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
49
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220517-0418.1",
50
+ "commit": "f95f6684cb226074554f5279075ff446d8397b6b"
39
51
  },
40
52
  {
41
53
  "author": "beachball",
42
54
  "package": "@fluentui/react-spinner",
43
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220512-0418.1",
44
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
55
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220517-0418.1",
56
+ "commit": "f95f6684cb226074554f5279075ff446d8397b6b"
45
57
  },
46
58
  {
47
59
  "author": "beachball",
48
60
  "package": "@fluentui/react-spinner",
49
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220512-0418.1",
50
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
61
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220517-0418.1",
62
+ "commit": "f95f6684cb226074554f5279075ff446d8397b6b"
51
63
  }
52
64
  ]
53
65
  }
package/CHANGELOG.md CHANGED
@@ -1,23 +1,25 @@
1
1
  # Change Log - @fluentui/react-spinner
2
2
 
3
- This log was last generated on Thu, 12 May 2022 04:32:32 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 17 May 2022 04:30:54 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220512-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20220512-0418.1)
7
+ ## [0.0.0-nightly-20220517-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20220517-0418.1)
8
8
 
9
- Thu, 12 May 2022 04:32:32 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.9..@fluentui/react-spinner_v0.0.0-nightly-20220512-0418.1)
9
+ Tue, 17 May 2022 04:30:54 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.9..@fluentui/react-spinner_v0.0.0-nightly-20220517-0418.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
14
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
15
15
  - Removing SpinnerCommons type. ([PR #22954](https://github.com/microsoft/fluentui/pull/22954) by Humberto.Morimoto@microsoft.com)
16
16
  - Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
18
- - Bump @fluentui/react-label to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
19
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
17
+ - Updated to use tokens were possible ([PR #22949](https://github.com/microsoft/fluentui/pull/22949) by gcox@microsoft.com)
18
+ - feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
20
+ - Bump @fluentui/react-label to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
21
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
21
23
 
22
24
  ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.9)
23
25
 
package/{lib → dist}/tsdoc-metadata.json RENAMED
File without changes
package/lib/components/Spinner/useSpinnerStyles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
- import { tokens } from '@fluentui/react-theme';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  export const spinnerClassNames = {
4
4
  root: 'fui-Spinner',
5
5
  spinner: 'fui-Spinner__spinner',
@@ -33,16 +33,6 @@ const spinnnerSizes = {
33
33
  extraLarge: '40px',
34
34
  huge: '44px'
35
35
  };
36
- /*
37
- * TODO: Update with proper tokens when added
38
- * Stroke widths for the Spinner
39
- */
40
-
41
- const spinnerStrokeWidth = {
42
- sWidth: '2px',
43
- mWidth: '3px',
44
- lWidth: '4px'
45
- };
46
36
  /*
47
37
  * TODO: Update with proper tokens when added
48
38
  * Animation for Spinner
@@ -56,25 +46,6 @@ const spinnerAnimation = {
56
46
  backgroundColor: 'transparent'
57
47
  }
58
48
  };
59
- /*
60
- * TODO: Update with proper tokens when added
61
- * Label sizes for the Spinner
62
- */
63
-
64
- const labelSizeTokens = {
65
- body1: {
66
- fontSize: tokens.fontSizeBase300,
67
- lineHeight: tokens.lineHeightBase300
68
- },
69
- subtitle2: {
70
- fontSize: tokens.fontSizeBase400,
71
- lineHeight: tokens.lineHeightBase400
72
- },
73
- subtitle1: {
74
- fontSize: tokens.fontSizeBase500,
75
- lineHeight: tokens.lineHeightBase500
76
- }
77
- };
78
49
  /**
79
50
  * Styles for the root slot
80
51
  */
@@ -112,49 +83,49 @@ const useLoaderStyles = /*#__PURE__*/__styles({
112
83
  "tiny": {
113
84
  "Bah9ito": "f1j4wmu2",
114
85
  "ut6tcf": "f1vppzuq",
115
- "B7p06xz": "f1subliv",
86
+ "B7p06xz": "fv1u54w",
116
87
  "B807ibg": "fd2apu6"
117
88
  },
118
89
  "extraSmall": {
119
90
  "Bah9ito": "fmpqlna",
120
91
  "ut6tcf": "f15z5jzu",
121
- "B7p06xz": "f1subliv",
92
+ "B7p06xz": "fv1u54w",
122
93
  "B807ibg": "fm96dlc"
123
94
  },
124
95
  "small": {
125
96
  "Bah9ito": "fo52gbo",
126
97
  "ut6tcf": "f1b41i3v",
127
- "B7p06xz": "f1subliv",
98
+ "B7p06xz": "fv1u54w",
128
99
  "B807ibg": "f1i91flz"
129
100
  },
130
101
  "medium": {
131
102
  "Bah9ito": "f1aiqagr",
132
103
  "ut6tcf": "f1wtx80b",
133
- "B7p06xz": "f17vzdod",
104
+ "B7p06xz": "f1flujpd",
134
105
  "B807ibg": "fjlkznx"
135
106
  },
136
107
  "large": {
137
108
  "Bah9ito": "f1trdq7b",
138
109
  "ut6tcf": "f9e0mc5",
139
- "B7p06xz": "f17vzdod",
110
+ "B7p06xz": "f1flujpd",
140
111
  "B807ibg": "f1upeyd8"
141
112
  },
142
113
  "extraLarge": {
143
114
  "Bah9ito": "f89rf2a",
144
115
  "ut6tcf": "f1w2xg3q",
145
- "B7p06xz": "f17vzdod",
116
+ "B7p06xz": "f1flujpd",
146
117
  "B807ibg": "f1r2vitc"
147
118
  },
148
119
  "huge": {
149
120
  "Bah9ito": "f1rx7k5y",
150
121
  "ut6tcf": "f1vtyt49",
151
- "B7p06xz": "f1l9ujyx",
122
+ "B7p06xz": "f1owbg48",
152
123
  "B807ibg": "fmhqutl"
153
124
  }
154
125
  }, {
155
126
  "i": [".f1nahjz1:focus-visible{outline-style:3px solid transparent;}"],
156
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);}}"],
157
- "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;}", ".f1subliv>svg>circle{stroke-width:2px;}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f17vzdod>svg>circle{stroke-width:3px;}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1l9ujyx>svg>circle{stroke-width:4px;}", ".fmhqutl>svg>circle{r:20;}"]
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);}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".fmhqutl>svg>circle{r:20;}"]
158
129
  });
159
130
 
160
131
  const useTrackStyles = /*#__PURE__*/__styles({
@@ -190,35 +161,49 @@ const useTrackStyles = /*#__PURE__*/__styles({
190
161
 
191
162
  const useLabelStyles = /*#__PURE__*/__styles({
192
163
  "tiny": {
164
+ "Bahqtrf": "fk6fouc",
193
165
  "Be2twd7": "fkhj508",
166
+ "Bhrd7zp": "figsok6",
194
167
  "Bg96gwp": "f1i3iumi"
195
168
  },
196
169
  "extraSmall": {
170
+ "Bahqtrf": "fk6fouc",
197
171
  "Be2twd7": "fkhj508",
172
+ "Bhrd7zp": "figsok6",
198
173
  "Bg96gwp": "f1i3iumi"
199
174
  },
200
175
  "small": {
176
+ "Bahqtrf": "fk6fouc",
201
177
  "Be2twd7": "fkhj508",
178
+ "Bhrd7zp": "figsok6",
202
179
  "Bg96gwp": "f1i3iumi"
203
180
  },
204
181
  "medium": {
182
+ "Bahqtrf": "fk6fouc",
205
183
  "Be2twd7": "fod5ikn",
184
+ "Bhrd7zp": "fl43uef",
206
185
  "Bg96gwp": "faaz57k"
207
186
  },
208
187
  "large": {
188
+ "Bahqtrf": "fk6fouc",
209
189
  "Be2twd7": "fod5ikn",
190
+ "Bhrd7zp": "fl43uef",
210
191
  "Bg96gwp": "faaz57k"
211
192
  },
212
193
  "extraLarge": {
194
+ "Bahqtrf": "fk6fouc",
213
195
  "Be2twd7": "fod5ikn",
196
+ "Bhrd7zp": "fl43uef",
214
197
  "Bg96gwp": "faaz57k"
215
198
  },
216
199
  "huge": {
200
+ "Bahqtrf": "fk6fouc",
217
201
  "Be2twd7": "f1pp30po",
202
+ "Bhrd7zp": "fl43uef",
218
203
  "Bg96gwp": "f106mvju"
219
204
  }
220
205
  }, {
221
- "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
206
+ "d": [".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);}"]
222
207
  });
223
208
  /**
224
209
  * Apply styling to the Spinner slots based on the state
package/lib/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } 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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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 * Stroke widths for the Spinner\n */\nconst spinnerStrokeWidth = {\n sWidth: '2px',\n mWidth: '3px',\n lWidth: '4px',\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 * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n */\nconst labelSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n subtitle2: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n subtitle1: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\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 ...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-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\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: spinnerStrokeWidth.sWidth,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.mWidth,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.lWidth,\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...labelSizeTokens.body1,\n },\n\n extraSmall: {\n ...labelSizeTokens.body1,\n },\n\n small: {\n ...labelSizeTokens.body1,\n },\n\n medium: {\n ...labelSizeTokens.subtitle2,\n },\n\n large: {\n ...labelSizeTokens.subtitle2,\n },\n\n extraLarge: {\n ...labelSizeTokens.subtitle2,\n },\n\n huge: {\n ...labelSizeTokens.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 = 'medium' } = 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 && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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 ...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-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\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 extraSmall: {\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 extraLarge: {\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\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 extraLarge: {\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 = 'medium' } = 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 && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Spinner/useSpinnerStyles.js CHANGED
@@ -42,16 +42,6 @@ const spinnnerSizes = {
42
42
  extraLarge: '40px',
43
43
  huge: '44px'
44
44
  };
45
- /*
46
- * TODO: Update with proper tokens when added
47
- * Stroke widths for the Spinner
48
- */
49
-
50
- const spinnerStrokeWidth = {
51
- sWidth: '2px',
52
- mWidth: '3px',
53
- lWidth: '4px'
54
- };
55
45
  /*
56
46
  * TODO: Update with proper tokens when added
57
47
  * Animation for Spinner
@@ -65,25 +55,6 @@ const spinnerAnimation = {
65
55
  backgroundColor: 'transparent'
66
56
  }
67
57
  };
68
- /*
69
- * TODO: Update with proper tokens when added
70
- * Label sizes for the Spinner
71
- */
72
-
73
- const labelSizeTokens = {
74
- body1: {
75
- fontSize: react_theme_1.tokens.fontSizeBase300,
76
- lineHeight: react_theme_1.tokens.lineHeightBase300
77
- },
78
- subtitle2: {
79
- fontSize: react_theme_1.tokens.fontSizeBase400,
80
- lineHeight: react_theme_1.tokens.lineHeightBase400
81
- },
82
- subtitle1: {
83
- fontSize: react_theme_1.tokens.fontSizeBase500,
84
- lineHeight: react_theme_1.tokens.lineHeightBase500
85
- }
86
- };
87
58
  /**
88
59
  * Styles for the root slot
89
60
  */
@@ -121,49 +92,49 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
121
92
  "tiny": {
122
93
  "Bah9ito": "f1j4wmu2",
123
94
  "ut6tcf": "f1vppzuq",
124
- "B7p06xz": "f1subliv",
95
+ "B7p06xz": "fv1u54w",
125
96
  "B807ibg": "fd2apu6"
126
97
  },
127
98
  "extraSmall": {
128
99
  "Bah9ito": "fmpqlna",
129
100
  "ut6tcf": "f15z5jzu",
130
- "B7p06xz": "f1subliv",
101
+ "B7p06xz": "fv1u54w",
131
102
  "B807ibg": "fm96dlc"
132
103
  },
133
104
  "small": {
134
105
  "Bah9ito": "fo52gbo",
135
106
  "ut6tcf": "f1b41i3v",
136
- "B7p06xz": "f1subliv",
107
+ "B7p06xz": "fv1u54w",
137
108
  "B807ibg": "f1i91flz"
138
109
  },
139
110
  "medium": {
140
111
  "Bah9ito": "f1aiqagr",
141
112
  "ut6tcf": "f1wtx80b",
142
- "B7p06xz": "f17vzdod",
113
+ "B7p06xz": "f1flujpd",
143
114
  "B807ibg": "fjlkznx"
144
115
  },
145
116
  "large": {
146
117
  "Bah9ito": "f1trdq7b",
147
118
  "ut6tcf": "f9e0mc5",
148
- "B7p06xz": "f17vzdod",
119
+ "B7p06xz": "f1flujpd",
149
120
  "B807ibg": "f1upeyd8"
150
121
  },
151
122
  "extraLarge": {
152
123
  "Bah9ito": "f89rf2a",
153
124
  "ut6tcf": "f1w2xg3q",
154
- "B7p06xz": "f17vzdod",
125
+ "B7p06xz": "f1flujpd",
155
126
  "B807ibg": "f1r2vitc"
156
127
  },
157
128
  "huge": {
158
129
  "Bah9ito": "f1rx7k5y",
159
130
  "ut6tcf": "f1vtyt49",
160
- "B7p06xz": "f1l9ujyx",
131
+ "B7p06xz": "f1owbg48",
161
132
  "B807ibg": "fmhqutl"
162
133
  }
163
134
  }, {
164
135
  "i": [".f1nahjz1:focus-visible{outline-style:3px solid transparent;}"],
165
136
  "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);}}"],
166
- "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;}", ".f1subliv>svg>circle{stroke-width:2px;}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f17vzdod>svg>circle{stroke-width:3px;}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1l9ujyx>svg>circle{stroke-width:4px;}", ".fmhqutl>svg>circle{r:20;}"]
137
+ "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);}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".fmhqutl>svg>circle{r:20;}"]
167
138
  });
168
139
 
169
140
  const useTrackStyles = /*#__PURE__*/react_1.__styles({
@@ -199,35 +170,49 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
199
170
 
200
171
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
201
172
  "tiny": {
173
+ "Bahqtrf": "fk6fouc",
202
174
  "Be2twd7": "fkhj508",
175
+ "Bhrd7zp": "figsok6",
203
176
  "Bg96gwp": "f1i3iumi"
204
177
  },
205
178
  "extraSmall": {
179
+ "Bahqtrf": "fk6fouc",
206
180
  "Be2twd7": "fkhj508",
181
+ "Bhrd7zp": "figsok6",
207
182
  "Bg96gwp": "f1i3iumi"
208
183
  },
209
184
  "small": {
185
+ "Bahqtrf": "fk6fouc",
210
186
  "Be2twd7": "fkhj508",
187
+ "Bhrd7zp": "figsok6",
211
188
  "Bg96gwp": "f1i3iumi"
212
189
  },
213
190
  "medium": {
191
+ "Bahqtrf": "fk6fouc",
214
192
  "Be2twd7": "fod5ikn",
193
+ "Bhrd7zp": "fl43uef",
215
194
  "Bg96gwp": "faaz57k"
216
195
  },
217
196
  "large": {
197
+ "Bahqtrf": "fk6fouc",
218
198
  "Be2twd7": "fod5ikn",
199
+ "Bhrd7zp": "fl43uef",
219
200
  "Bg96gwp": "faaz57k"
220
201
  },
221
202
  "extraLarge": {
203
+ "Bahqtrf": "fk6fouc",
222
204
  "Be2twd7": "fod5ikn",
205
+ "Bhrd7zp": "fl43uef",
223
206
  "Bg96gwp": "faaz57k"
224
207
  },
225
208
  "huge": {
209
+ "Bahqtrf": "fk6fouc",
226
210
  "Be2twd7": "f1pp30po",
211
+ "Bhrd7zp": "fl43uef",
227
212
  "Bg96gwp": "f106mvju"
228
213
  }
229
214
  }, {
230
- "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
215
+ "d": [".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);}"]
231
216
  });
232
217
  /**
233
218
  * Apply styling to the Spinner slots based on the state
package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } 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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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 * Stroke widths for the Spinner\n */\nconst spinnerStrokeWidth = {\n sWidth: '2px',\n mWidth: '3px',\n lWidth: '4px',\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 * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n */\nconst labelSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n subtitle2: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n subtitle1: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\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 ...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-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\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: spinnerStrokeWidth.sWidth,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.mWidth,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.lWidth,\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...labelSizeTokens.body1,\n },\n\n extraSmall: {\n ...labelSizeTokens.body1,\n },\n\n small: {\n ...labelSizeTokens.body1,\n },\n\n medium: {\n ...labelSizeTokens.subtitle2,\n },\n\n large: {\n ...labelSizeTokens.subtitle2,\n },\n\n extraLarge: {\n ...labelSizeTokens.subtitle2,\n },\n\n huge: {\n ...labelSizeTokens.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 = 'medium' } = 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 && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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 ...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-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\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 extraSmall: {\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 extraLarge: {\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\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: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\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 extraLarge: {\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 = 'medium' } = 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 && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinner",
3
- "version": "0.0.0-nightly-20220512-0418.1",
3
+ "version": "0.0.0-nightly-20220517-0418.1",
4
4
  "description": "Spinner component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "lib/index.d.ts",
7
+ "typings": "dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -28,14 +28,14 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220512-0418.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220517-0418.1",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-theme": "0.0.0-nightly-20220512-0418.1",
36
- "@fluentui/react-label": "0.0.0-nightly-20220512-0418.1",
37
- "@fluentui/react-utilities": "0.0.0-nightly-20220512-0418.1",
38
- "@griffel/react": "1.0.3",
35
+ "@fluentui/react-theme": "0.0.0-nightly-20220517-0418.1",
36
+ "@fluentui/react-label": "0.0.0-nightly-20220517-0418.1",
37
+ "@fluentui/react-utilities": "0.0.0-nightly-20220517-0418.1",
38
+ "@griffel/react": "1.0.4",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {
package/lib/Spinner.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Spinner/index';
package/lib/components/Spinner/DefaultSvg.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const DefaultSvg: () => JSX.Element;
package/lib/components/Spinner/Spinner.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { SpinnerProps } from './Spinner.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Converged Spinner component for the fluentui repo
5
- */
6
- export declare const Spinner: ForwardRefComponent<SpinnerProps>;
package/lib/components/Spinner/Spinner.types.d.ts DELETED
@@ -1,49 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import { Label } from '@fluentui/react-label';
3
- export declare type SpinnerSlots = {
4
- /**
5
- * The root of the Spinner.
6
- * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
7
- */
8
- root: NonNullable<Slot<'div'>>;
9
- /**
10
- * The slot for the animated svg.
11
- * The spinner slot receives the `className` and `style` that handles the spinning animation.
12
- * An svg is also rendered as a child of this slot
13
- */
14
- spinner?: Slot<'span'>;
15
- /**
16
- * The label of the Slider.
17
- * The label slot receives the styling related to the text associated with the Spinner.
18
- */
19
- label?: Slot<typeof Label>;
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
- * The status of the Spinner.
42
- * @default 'active'
43
- */
44
- status?: 'active' | 'inactive';
45
- };
46
- /**
47
- * State used in rendering Spinner
48
- */
49
- export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size' | 'status'>>;
package/lib/components/Spinner/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './Spinner';
2
- export * from './Spinner.types';
3
- export * from './renderSpinner';
4
- export * from './useSpinner';
5
- export * from './useSpinnerStyles';
package/lib/components/Spinner/renderSpinner.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { SpinnerState } from './Spinner.types';
2
- /**
3
- * Render the final JSX of Spinner
4
- */
5
- export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
package/lib/components/Spinner/useSpinner.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { SpinnerProps, SpinnerState } from './Spinner.types';
3
- /**
4
- * Create the state required to render Spinner.
5
- *
6
- * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
7
- * before being passed to renderSpinner_unstable.
8
- *
9
- * @param props - props from this instance of Spinner
10
- * @param ref - reference to root HTMLElement of Spinner
11
- */
12
- export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;
package/lib/components/Spinner/useSpinnerStyles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { SpinnerState, SpinnerSlots } from './Spinner.types';
2
- import type { SlotClassNames } from '@fluentui/react-utilities';
3
- export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
4
- /**
5
- * Apply styling to the Spinner slots based on the state
6
- */
7
- export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
package/lib/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner';
2
- export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';
package/lib-commonjs/Spinner.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Spinner/index';
package/lib-commonjs/components/Spinner/DefaultSvg.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const DefaultSvg: () => JSX.Element;
package/lib-commonjs/components/Spinner/Spinner.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { SpinnerProps } from './Spinner.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Converged Spinner component for the fluentui repo
5
- */
6
- export declare const Spinner: ForwardRefComponent<SpinnerProps>;
package/lib-commonjs/components/Spinner/Spinner.types.d.ts DELETED
@@ -1,49 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import { Label } from '@fluentui/react-label';
3
- export declare type SpinnerSlots = {
4
- /**
5
- * The root of the Spinner.
6
- * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
7
- */
8
- root: NonNullable<Slot<'div'>>;
9
- /**
10
- * The slot for the animated svg.
11
- * The spinner slot receives the `className` and `style` that handles the spinning animation.
12
- * An svg is also rendered as a child of this slot
13
- */
14
- spinner?: Slot<'span'>;
15
- /**
16
- * The label of the Slider.
17
- * The label slot receives the styling related to the text associated with the Spinner.
18
- */
19
- label?: Slot<typeof Label>;
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
- * The status of the Spinner.
42
- * @default 'active'
43
- */
44
- status?: 'active' | 'inactive';
45
- };
46
- /**
47
- * State used in rendering Spinner
48
- */
49
- export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size' | 'status'>>;
package/lib-commonjs/components/Spinner/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './Spinner';
2
- export * from './Spinner.types';
3
- export * from './renderSpinner';
4
- export * from './useSpinner';
5
- export * from './useSpinnerStyles';
package/lib-commonjs/components/Spinner/renderSpinner.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { SpinnerState } from './Spinner.types';
2
- /**
3
- * Render the final JSX of Spinner
4
- */
5
- export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
package/lib-commonjs/components/Spinner/useSpinner.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { SpinnerProps, SpinnerState } from './Spinner.types';
3
- /**
4
- * Create the state required to render Spinner.
5
- *
6
- * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
7
- * before being passed to renderSpinner_unstable.
8
- *
9
- * @param props - props from this instance of Spinner
10
- * @param ref - reference to root HTMLElement of Spinner
11
- */
12
- export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;
package/lib-commonjs/components/Spinner/useSpinnerStyles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { SpinnerState, SpinnerSlots } from './Spinner.types';
2
- import type { SlotClassNames } from '@fluentui/react-utilities';
3
- export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
4
- /**
5
- * Apply styling to the Spinner slots based on the state
6
- */
7
- export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
package/lib-commonjs/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner';
2
- export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';