@fluentui/react-spinner 9.0.13 → 9.0.15

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 (30) hide show
  1. package/CHANGELOG.json +69 -1
  2. package/CHANGELOG.md +24 -2
  3. package/lib/components/Spinner/DefaultSvg.js.map +1 -1
  4. package/lib/components/Spinner/Spinner.js +0 -1
  5. package/lib/components/Spinner/Spinner.js.map +1 -1
  6. package/lib/components/Spinner/renderSpinner.js +8 -5
  7. package/lib/components/Spinner/renderSpinner.js.map +1 -1
  8. package/lib/components/Spinner/useSpinner.js +0 -3
  9. package/lib/components/Spinner/useSpinner.js.map +1 -1
  10. package/lib/components/Spinner/useSpinnerStyles.js +149 -161
  11. package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib-commonjs/Spinner.js +0 -2
  14. package/lib-commonjs/Spinner.js.map +1 -1
  15. package/lib-commonjs/components/Spinner/DefaultSvg.js +0 -3
  16. package/lib-commonjs/components/Spinner/DefaultSvg.js.map +1 -1
  17. package/lib-commonjs/components/Spinner/Spinner.js +0 -6
  18. package/lib-commonjs/components/Spinner/Spinner.js.map +1 -1
  19. package/lib-commonjs/components/Spinner/Spinner.types.js.map +1 -1
  20. package/lib-commonjs/components/Spinner/index.js +0 -6
  21. package/lib-commonjs/components/Spinner/index.js.map +1 -1
  22. package/lib-commonjs/components/Spinner/renderSpinner.js +8 -9
  23. package/lib-commonjs/components/Spinner/renderSpinner.js.map +1 -1
  24. package/lib-commonjs/components/Spinner/useSpinner.js +0 -9
  25. package/lib-commonjs/components/Spinner/useSpinner.js.map +1 -1
  26. package/lib-commonjs/components/Spinner/useSpinnerStyles.js +137 -153
  27. package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
  28. package/lib-commonjs/index.js +0 -2
  29. package/lib-commonjs/index.js.map +1 -1
  30. package/package.json +7 -7
package/lib/components/Spinner/useSpinnerStyles.js CHANGED
@@ -9,7 +9,6 @@ export const spinnerClassNames = {
9
9
  * TODO: Update with proper tokens when added
10
10
  * Radii for the Spinner circles
11
11
  */
12
-
13
12
  const rValues = {
14
13
  tiny: '9px',
15
14
  extraSmall: '11px',
@@ -23,7 +22,6 @@ const rValues = {
23
22
  * TODO: Update with proper tokens when added
24
23
  * Sizes for the Spinner
25
24
  */
26
-
27
25
  const spinnnerSizes = {
28
26
  tiny: '20px',
29
27
  extraSmall: '24px',
@@ -37,7 +35,6 @@ const spinnnerSizes = {
37
35
  * TODO: Update with proper tokens when added
38
36
  * Animation for Spinner
39
37
  */
40
-
41
38
  const spinnerAnimation = {
42
39
  container: {
43
40
  animationDuration: '3s',
@@ -49,197 +46,191 @@ const spinnerAnimation = {
49
46
  /**
50
47
  * Styles for the root slot
51
48
  */
52
-
53
49
  const useRootStyles = /*#__PURE__*/__styles({
54
- "root": {
55
- "mc9l5x": "f22iagw",
56
- "Bt984gj": "f122n59",
57
- "Brf1p80": "f4d9j23",
58
- "Bg96gwp": "fez10in",
59
- "i8kkvl": "f4px1ci",
60
- "Belr9w4": "fn67r4l"
61
- },
62
- "horizontal": {
63
- "Beiy3e4": "f1063pyq"
64
- },
65
- "vertical": {
66
- "Beiy3e4": "f1vx9l62"
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"
67
63
  }
68
64
  }, {
69
- "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;}"]
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;}"]
70
66
  });
71
-
72
67
  const useLoaderStyles = /*#__PURE__*/__styles({
73
- "spinnerSVG": {
74
- "B3aqqti": "f1or16p5",
75
- "Brovlpu": "f1grzc83",
76
- "Bxa1mx5": "f19shzzi",
77
- "Bwaue66": ["f5tbecn", "f15qb8s7"],
78
- "fyp1ls": "fn4mtlg",
79
- "ag6ruv": "f1y80fxs",
80
- "osj692": "f1r2crtq",
81
- "aq5vjd": "f1wsi8sr",
82
- "tlu9e1": "f1bkm2qd",
83
- "J3u96z": "f1urqz7h",
84
- "d32isg": "f1da2vov",
85
- "Bsvqbuc": "f11rfva0",
86
- "b3s3i5": "f1exc66"
87
- },
88
- "tiny": {
89
- "Bah9ito": "f1j4wmu2",
90
- "ut6tcf": "f1vppzuq",
91
- "B7p06xz": "fv1u54w",
92
- "B807ibg": "fngtx1d"
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"
93
88
  },
94
89
  "extra-small": {
95
- "Bah9ito": "fmpqlna",
96
- "ut6tcf": "f15z5jzu",
97
- "B7p06xz": "fv1u54w",
98
- "B807ibg": "fadawes"
99
- },
100
- "small": {
101
- "Bah9ito": "fo52gbo",
102
- "ut6tcf": "f1b41i3v",
103
- "B7p06xz": "fv1u54w",
104
- "B807ibg": "f1xqyyrl"
105
- },
106
- "medium": {
107
- "Bah9ito": "f1aiqagr",
108
- "ut6tcf": "f1wtx80b",
109
- "B7p06xz": "f1flujpd",
110
- "B807ibg": "f1u06hy7"
111
- },
112
- "large": {
113
- "Bah9ito": "f1trdq7b",
114
- "ut6tcf": "f9e0mc5",
115
- "B7p06xz": "f1flujpd",
116
- "B807ibg": "f13pmvhl"
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"
117
112
  },
118
113
  "extra-large": {
119
- "Bah9ito": "f89rf2a",
120
- "ut6tcf": "f1w2xg3q",
121
- "B7p06xz": "f1flujpd",
122
- "B807ibg": "fmn74v6"
123
- },
124
- "huge": {
125
- "Bah9ito": "f1rx7k5y",
126
- "ut6tcf": "f1vtyt49",
127
- "B7p06xz": "f1owbg48",
128
- "B807ibg": "f1fr1izd"
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"
129
124
  }
130
125
  }, {
131
- "f": [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
132
- "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);}}"],
133
- "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;}"],
134
- "m": [["@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
135
- "m": "screen and (prefers-reduced-motion: reduce)"
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)"
136
131
  }], ["@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
137
- "m": "screen and (prefers-reduced-motion: reduce)"
132
+ m: "screen and (prefers-reduced-motion: reduce)"
138
133
  }]]
139
134
  });
140
-
141
135
  const useTrackStyles = /*#__PURE__*/__styles({
142
- "inverted": {
143
- "gwg7kz": "f1jvpmnu",
144
- "Bvrehnu": "fq8a5sv",
145
- "Bidp6o": "f1b4lwqj",
146
- "cq3kgi": "f1najlst",
147
- "Btwiser": "fjxod4",
148
- "B8001xd": "fu3xdw0",
149
- "Bdordwa": ["f1ttdh6v", "fmyjox0"],
150
- "Bo2mdfu": "f1eseayc",
151
- "E10nrc": "folzdkc",
152
- "Bwl7w15": "fhlfkde",
153
- "Bksq7rz": "f1esql28"
154
- },
155
- "primary": {
156
- "gwg7kz": "f11ditju",
157
- "B8k2rxp": "f1m9nikz",
158
- "Bvrehnu": "fq8a5sv",
159
- "Bidp6o": "f1b4lwqj",
160
- "cq3kgi": "f1najlst",
161
- "Btwiser": "fjxod4",
162
- "B8001xd": "fu3xdw0",
163
- "Bdordwa": ["f1ttdh6v", "fmyjox0"],
164
- "Bo2mdfu": "f1eseayc",
165
- "E10nrc": "folzdkc",
166
- "Bwl7w15": "fhlfkde",
167
- "Bksq7rz": "f61h2gu",
168
- "y14cdu": "flglbw1"
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"
169
163
  }
170
164
  }, {
171
- "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);}"],
172
- "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;}}"],
173
- "m": [["@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)"
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)"
175
169
  }], ["@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)"
170
+ m: "screen and (prefers-reduced-motion: reduce)"
177
171
  }], ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
178
- "m": "screen and (forced-colors: active)"
172
+ m: "screen and (forced-colors: active)"
179
173
  }], ["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
180
- "m": "screen and (prefers-reduced-motion: reduce)"
174
+ m: "screen and (prefers-reduced-motion: reduce)"
181
175
  }], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
182
- "m": "screen and (prefers-reduced-motion: reduce)"
176
+ m: "screen and (prefers-reduced-motion: reduce)"
183
177
  }], ["@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}", {
184
- "m": "screen and (forced-colors: active)"
178
+ m: "screen and (forced-colors: active)"
185
179
  }]]
186
180
  });
187
-
188
181
  const useLabelStyles = /*#__PURE__*/__styles({
189
- "inverted": {
190
- "sj55zd": "f15aqcq"
182
+ inverted: {
183
+ sj55zd: "f15aqcq"
191
184
  },
192
- "primary": {},
193
- "tiny": {
194
- "Bahqtrf": "fk6fouc",
195
- "Be2twd7": "fkhj508",
196
- "Bhrd7zp": "figsok6",
197
- "Bg96gwp": "f1i3iumi"
185
+ primary: {},
186
+ tiny: {
187
+ Bahqtrf: "fk6fouc",
188
+ Be2twd7: "fkhj508",
189
+ Bhrd7zp: "figsok6",
190
+ Bg96gwp: "f1i3iumi"
198
191
  },
199
192
  "extra-small": {
200
- "Bahqtrf": "fk6fouc",
201
- "Be2twd7": "fkhj508",
202
- "Bhrd7zp": "figsok6",
203
- "Bg96gwp": "f1i3iumi"
204
- },
205
- "small": {
206
- "Bahqtrf": "fk6fouc",
207
- "Be2twd7": "fkhj508",
208
- "Bhrd7zp": "figsok6",
209
- "Bg96gwp": "f1i3iumi"
210
- },
211
- "medium": {
212
- "Bahqtrf": "fk6fouc",
213
- "Be2twd7": "fod5ikn",
214
- "Bhrd7zp": "fl43uef",
215
- "Bg96gwp": "faaz57k"
216
- },
217
- "large": {
218
- "Bahqtrf": "fk6fouc",
219
- "Be2twd7": "fod5ikn",
220
- "Bhrd7zp": "fl43uef",
221
- "Bg96gwp": "faaz57k"
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"
222
215
  },
223
216
  "extra-large": {
224
- "Bahqtrf": "fk6fouc",
225
- "Be2twd7": "fod5ikn",
226
- "Bhrd7zp": "fl43uef",
227
- "Bg96gwp": "faaz57k"
228
- },
229
- "huge": {
230
- "Bahqtrf": "fk6fouc",
231
- "Be2twd7": "f1pp30po",
232
- "Bhrd7zp": "fl43uef",
233
- "Bg96gwp": "f106mvju"
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"
234
227
  }
235
228
  }, {
236
- "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);}"]
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);}"]
237
230
  });
238
231
  /**
239
232
  * Apply styling to the Spinner slots based on the state
240
233
  */
241
-
242
-
243
234
  export const useSpinnerStyles_unstable = state => {
244
235
  const {
245
236
  labelPosition,
@@ -251,15 +242,12 @@ export const useSpinnerStyles_unstable = state => {
251
242
  const labelStyles = useLabelStyles();
252
243
  const trackStyles = useTrackStyles();
253
244
  state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
254
-
255
245
  if (state.spinner) {
256
246
  state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
257
247
  }
258
-
259
248
  if (state.label) {
260
249
  state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
261
250
  }
262
-
263
251
  return state;
264
252
  };
265
253
  //# sourceMappingURL=useSpinnerStyles.js.map
package/lib/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/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: '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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,OAAO,EAAE,sBAAsB;EAC/BC,KAAK,EAAE;CACR;AAED;;;;AAIA,MAAMC,OAAO,GAAG;EACdC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE,QAAQ;EACfC,UAAU,EAAE,QAAQ;EACpBC,IAAI,EAAE;CACP;AAED;;;;AAIA,MAAMC,aAAa,GAAG;EACpBP,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE,MAAM;EAClBC,IAAI,EAAE;CACP;AAED;;;;AAIA,MAAME,gBAAgB,GAAG;EACvBC,SAAS,EAAE;IACTC,iBAAiB,EAAE,IAAI;IACvBC,uBAAuB,EAAE,UAAU;IACnCC,uBAAuB,EAAE,QAAQ;IACjCC,eAAe,EAAE;;CAEpB;AAED;;;AAGA,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgBpB;AAEF,MAAMC,eAAe,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAqGtB;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA6ErB;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAmCrB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC,aAAa;IAAEC,IAAI;IAAEC,UAAU,GAAG;EAAS,CAAE,GAAGH,KAAK;EAC7D,MAAMI,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,aAAa,GAAGT,eAAe,EAAE;EACvC,MAAMU,WAAW,GAAGR,cAAc,EAAE;EACpC,MAAMS,WAAW,GAAGV,cAAc,EAAE;EAEpCG,KAAK,CAACvB,IAAI,CAAC+B,SAAS,GAAGpC,YAAY,CACjCI,iBAAiB,CAACC,IAAI,EACtB2B,UAAU,CAAC3B,IAAI,EACf,CAACwB,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,OAAO,KAAKG,UAAU,CAACK,QAAQ,EAC/E,CAACR,aAAa,KAAK,QAAQ,IAAIA,aAAa,KAAK,OAAO,KAAKG,UAAU,CAACM,UAAU,EAClFV,KAAK,CAACvB,IAAI,CAAC+B,SAAS,CACrB;EACD,IAAIR,KAAK,CAACtB,OAAO,EAAE;IACjBsB,KAAK,CAACtB,OAAO,CAAC8B,SAAS,GAAGpC,YAAY,CACpCI,iBAAiB,CAACE,OAAO,EACzB2B,aAAa,CAACM,UAAU,EACxBN,aAAa,CAACH,IAAI,CAAC,EACnBK,WAAW,CAACJ,UAAU,CAAC,EACvBH,KAAK,CAACtB,OAAO,CAAC8B,SAAS,CACxB;;EAEH,IAAIR,KAAK,CAACrB,KAAK,EAAE;IACfqB,KAAK,CAACrB,KAAK,CAAC6B,SAAS,GAAGpC,YAAY,CAClCI,iBAAiB,CAACG,KAAK,EACvB2B,WAAW,CAACJ,IAAI,CAAC,EACjBI,WAAW,CAACH,UAAU,CAAC,EACvBH,KAAK,CAACrB,KAAK,CAAC6B,SAAS,CACtB;;EAGH,OAAOR,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","spinnerClassNames","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","useLoaderStyles","useTrackStyles","useLabelStyles","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","vertical","horizontal","spinnerSVG"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/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"]}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,mBAJF,EAKE,yBALF,QAMO,WANP","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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB,WAAW","names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/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"]}
package/lib-commonjs/Spinner.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./components/Spinner/index"), exports);
10
8
  //# sourceMappingURL=Spinner.js.map
package/lib-commonjs/Spinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/Spinner.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Spinner/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/src/Spinner.ts"],"sourcesContent":["export * from './components/Spinner/index';\n"]}
package/lib-commonjs/components/Spinner/DefaultSvg.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.DefaultSvg = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const DefaultSvg = () => React.createElement("svg", {
11
9
  className: "fui-Spinner__Progressbar"
12
10
  }, React.createElement("circle", {
@@ -14,6 +12,5 @@ const DefaultSvg = () => React.createElement("svg", {
14
12
  }), React.createElement("circle", {
15
13
  className: "fui-Spinner__Tail"
16
14
  }));
17
-
18
15
  exports.DefaultSvg = DefaultSvg;
19
16
  //# sourceMappingURL=DefaultSvg.js.map
package/lib-commonjs/components/Spinner/DefaultSvg.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEO,MAAM,UAAU,GAAG,MACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;EAAK,SAAS,EAAC;AAAf,CAAA,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CADF,EAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CAFF,CADK;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEO,MAAMA,UAAU,GAAG,MACxBC;EAAKC,SAAS,EAAC;AAA0B,GACvCD;EAAQC,SAAS,EAAC;AAAoB,EAAG,EACzCD;EAAQC,SAAS,EAAC;AAAmB,EAAG,CAE3C;AALYC,kBAAU","names":["DefaultSvg","React","className","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/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"]}
package/lib-commonjs/components/Spinner/Spinner.js CHANGED
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Spinner = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const useSpinner_1 = /*#__PURE__*/require("./useSpinner");
11
-
12
9
  const renderSpinner_1 = /*#__PURE__*/require("./renderSpinner");
13
-
14
10
  const useSpinnerStyles_1 = /*#__PURE__*/require("./useSpinnerStyles");
15
11
  /**
16
12
  * Converged Spinner component for the fluentui repo
17
13
  */
18
-
19
-
20
14
  exports.Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
21
15
  const state = useSpinner_1.useSpinner_unstable(props, ref);
22
16
  useSpinnerStyles_1.useSpinnerStyles_unstable(state);
package/lib-commonjs/components/Spinner/Spinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","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';\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 return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE7CG,4CAAyB,CAACF,KAAK,CAAC;EAChC,OAAOG,sCAAsB,CAACH,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFL,eAAO,CAACS,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useSpinner_1","useSpinnerStyles_1","renderSpinner_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/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';\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 return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"]}
package/lib-commonjs/components/Spinner/Spinner.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
package/lib-commonjs/components/Spinner/index.js CHANGED
@@ -3,16 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./Spinner"), exports);
10
-
11
8
  tslib_1.__exportStar(require("./Spinner.types"), exports);
12
-
13
9
  tslib_1.__exportStar(require("./renderSpinner"), exports);
14
-
15
10
  tslib_1.__exportStar(require("./useSpinner"), exports);
16
-
17
11
  tslib_1.__exportStar(require("./useSpinnerStyles"), exports);
18
12
  //# sourceMappingURL=index.js.map
package/lib-commonjs/components/Spinner/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/src/components/Spinner/index.ts"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}
package/lib-commonjs/components/Spinner/renderSpinner.js CHANGED
@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.renderSpinner_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
9
  /**
12
10
  * Render the final JSX of Spinner
13
11
  */
14
-
15
-
16
12
  const renderSpinner_unstable = state => {
17
13
  const {
18
14
  slots,
@@ -21,12 +17,15 @@ const renderSpinner_unstable = state => {
21
17
  const {
22
18
  labelPosition
23
19
  } = state;
24
- return React.createElement(slots.root, { ...slotProps.root
25
- }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, { ...slotProps.label
26
- }), slots.spinner && React.createElement(slots.spinner, { ...slotProps.spinner
27
- }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, { ...slotProps.label
20
+ return React.createElement(slots.root, {
21
+ ...slotProps.root
22
+ }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, {
23
+ ...slotProps.label
24
+ }), slots.spinner && React.createElement(slots.spinner, {
25
+ ...slotProps.spinner
26
+ }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, {
27
+ ...slotProps.label
28
28
  }));
29
29
  };
30
-
31
30
  exports.renderSpinner_unstable = renderSpinner_unstable;
32
31
  //# sourceMappingURL=renderSpinner.js.map
package/lib-commonjs/components/Spinner/renderSpinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,KAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFpB,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,KAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAH9E,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeH,KAAK,CAAC;EAC1D,MAAM;IAAEI;EAAa,CAAE,GAAGJ,KAAK;EAC/B,OACEK,oBAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BL,KAAK,CAACM,KAAK,KAAKH,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,QAAQ,CAAC,IAAIC,oBAACJ,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EAChHN,KAAK,CAACO,OAAO,IAAIH,oBAACJ,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,EAAI,EACzDP,KAAK,CAACM,KAAK,KAAKH,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,OAAO,CAAC,IAAIC,oBAACJ,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,CACrG;AAEjB,CAAC;AAVYE,8BAAsB","names":["renderSpinner_unstable","state","slots","slotProps","react_utilities_1","labelPosition","React","root","label","spinner","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"]}