@fluentui/react-spinner 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/Spinner.js +1 -1
- package/lib/Spinner.js.map +1 -1
- package/lib/components/Spinner/DefaultSvg.js +1 -1
- package/lib/components/Spinner/DefaultSvg.js.map +1 -1
- package/lib/components/Spinner/Spinner.js +6 -6
- package/lib/components/Spinner/Spinner.js.map +1 -1
- package/lib/components/Spinner/Spinner.types.js.map +1 -1
- package/lib/components/Spinner/index.js +5 -5
- package/lib/components/Spinner/index.js.map +1 -1
- package/lib/components/Spinner/renderSpinner.js +11 -3
- package/lib/components/Spinner/renderSpinner.js.map +1 -1
- package/lib/components/Spinner/useSpinner.js +15 -15
- package/lib/components/Spinner/useSpinner.js.map +1 -1
- package/lib/components/Spinner/useSpinnerStyles.js +25 -25
- package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Spinner.js +4 -5
- package/lib-commonjs/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/DefaultSvg.js +12 -15
- package/lib-commonjs/components/Spinner/DefaultSvg.js.map +1 -1
- package/lib-commonjs/components/Spinner/Spinner.js +20 -19
- package/lib-commonjs/components/Spinner/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/Spinner.types.js +2 -3
- package/lib-commonjs/components/Spinner/Spinner.types.js.map +1 -1
- package/lib-commonjs/components/Spinner/index.js +8 -9
- package/lib-commonjs/components/Spinner/index.js.map +1 -1
- package/lib-commonjs/components/Spinner/renderSpinner.js +27 -14
- package/lib-commonjs/components/Spinner/renderSpinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/useSpinner.js +65 -53
- package/lib-commonjs/components/Spinner/useSpinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js +233 -351
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
- package/lib-commonjs/index.js +33 -16
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -8
- package/.swcrc +0 -39
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-spinner",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-spinner_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 21 Mar 2023 04:49:43 GMT",
|
|
6
|
+
"tag": "@fluentui/react-spinner_v0.0.0-nightly-20230321-0440.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230321-0440.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-spinner",
|
|
19
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230321-0440.1",
|
|
20
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-spinner",
|
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1",
|
|
26
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-spinner",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1",
|
|
32
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-spinner",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1",
|
|
38
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-spinner",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230321-0440.1",
|
|
44
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-spinner
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 04:49:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230321-0440.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20230321-0440.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.4..@fluentui/react-spinner_v0.0.0-nightly-
|
|
9
|
+
Tue, 21 Mar 2023 04:49:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.4..@fluentui/react-spinner_v0.0.0-nightly-20230321-0440.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.1.4)
|
|
22
22
|
|
package/lib/Spinner.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './components/Spinner/index';
|
|
2
2
|
//# sourceMappingURL=Spinner.js.map
|
package/lib/Spinner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/Spinner.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Spinner/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","DefaultSvg","createElement","className"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","DefaultSvg","createElement","className"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,MAAMC,UAAU,GAAGA,CAAA,kBACxBD,KAAA,CAAAE,aAAA;EAAKC,SAAS,EAAC;AAA0B,gBACvCH,KAAA,CAAAE,aAAA;EAAQC,SAAS,EAAC;AAAoB,EAAG,eACzCH,KAAA,CAAAE,aAAA;EAAQC,SAAS,EAAC;AAAmB,EAAG,CAE3C"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { useSpinner_unstable } from
|
|
3
|
-
import { renderSpinner_unstable } from
|
|
4
|
-
import { useSpinnerStyles_unstable } from
|
|
5
|
-
import { useCustomStyleHooks_unstable } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useSpinner_unstable } from './useSpinner';
|
|
3
|
+
import { renderSpinner_unstable } from './renderSpinner';
|
|
4
|
+
import { useSpinnerStyles_unstable } from './useSpinnerStyles';
|
|
5
|
+
import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
|
|
6
6
|
/**
|
|
7
7
|
* Converged Spinner component for the fluentui repo
|
|
8
8
|
*/
|
|
@@ -15,5 +15,5 @@ export const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
15
15
|
useCustomStyles(state);
|
|
16
16
|
return renderSpinner_unstable(state);
|
|
17
17
|
});
|
|
18
|
-
Spinner.displayName =
|
|
18
|
+
Spinner.displayName = 'Spinner';
|
|
19
19
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHooks_unstable","Spinner","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHooks_unstable","Spinner","forwardRef","props","ref","state","useCustomStyles","displayName"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n\n useSpinnerStyles_unstable(state);\n\n const { useSpinnerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE7CL,yBAAyB,CAACM,KAAK,CAAC;EAEhC,MAAM;IAAEN,yBAAyB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACrFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,sBAAsB,CAACO,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,OAAO,CAACM,WAAW,GAAG,SAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Spinner.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n /**\n * The root of the Spinner.\n * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The slot for the animated svg.\n * The spinner slot receives the `className` and `style` that handles the spinning animation.\n * An svg is also rendered as a child of this slot\n */\n spinner?: Slot<'span'>;\n /**\n * The label of the Slider.\n * The label slot receives the styling related to the text associated with the Spinner.\n */\n label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n /**\n * The appearance of the Spinner.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n\n /**\n * Where the label is positioned relative to the Spinner\n * @default 'after'\n */\n labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n /**\n * The size of the spinner.\n * @default 'medium'\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
1
|
+
export * from './Spinner';
|
|
2
|
+
export * from './Spinner.types';
|
|
3
|
+
export * from './renderSpinner';
|
|
4
|
+
export * from './useSpinner';
|
|
5
|
+
export * from './useSpinnerStyles';
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getSlots } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Spinner
|
|
5
5
|
*/
|
|
@@ -11,6 +11,14 @@ export const renderSpinner_unstable = state => {
|
|
|
11
11
|
const {
|
|
12
12
|
labelPosition
|
|
13
13
|
} = state;
|
|
14
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
14
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
|
15
|
+
...slotProps.root
|
|
16
|
+
}, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, {
|
|
17
|
+
...slotProps.label
|
|
18
|
+
}), slots.spinner && /*#__PURE__*/React.createElement(slots.spinner, {
|
|
19
|
+
...slotProps.spinner
|
|
20
|
+
}), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, {
|
|
21
|
+
...slotProps.label
|
|
22
|
+
}));
|
|
15
23
|
};
|
|
16
24
|
//# sourceMappingURL=renderSpinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderSpinner_unstable","state","slots","slotProps","labelPosition","createElement","root","label","spinner"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","renderSpinner_unstable","state","slots","slotProps","labelPosition","createElement","root","label","spinner"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAeE,KAAK,CAAC;EAC1D,MAAM;IAAEG;EAAa,CAAE,GAAGH,KAAK;EAC/B,oBACEH,KAAA,CAAAO,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,KAAKH,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,QAAQ,CAAC,iBAAIN,KAAA,CAAAO,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAChHL,KAAK,CAACM,OAAO,iBAAIV,KAAA,CAAAO,aAAA,CAACH,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,EAAI,EACzDN,KAAK,CAACK,KAAK,KAAKH,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,OAAO,CAAC,iBAAIN,KAAA,CAAAO,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,CACrG;AAEjB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { getNativeElementProps, resolveShorthand, useId } from
|
|
3
|
-
import { Label } from
|
|
4
|
-
import { DefaultSvg } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
|
3
|
+
import { Label } from '@fluentui/react-label';
|
|
4
|
+
import { DefaultSvg } from './DefaultSvg';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render Spinner.
|
|
7
7
|
*
|
|
@@ -14,21 +14,21 @@ import { DefaultSvg } from "./DefaultSvg";
|
|
|
14
14
|
export const useSpinner_unstable = (props, ref) => {
|
|
15
15
|
// Props
|
|
16
16
|
const {
|
|
17
|
-
appearance =
|
|
18
|
-
labelPosition =
|
|
19
|
-
size =
|
|
17
|
+
appearance = 'primary',
|
|
18
|
+
labelPosition = 'after',
|
|
19
|
+
size = 'medium'
|
|
20
20
|
} = props;
|
|
21
|
-
const baseId = useId(
|
|
21
|
+
const baseId = useId('spinner');
|
|
22
22
|
const {
|
|
23
|
-
role =
|
|
23
|
+
role = 'progressbar',
|
|
24
24
|
tabIndex,
|
|
25
25
|
...rest
|
|
26
26
|
} = props;
|
|
27
|
-
const nativeRoot = getNativeElementProps(
|
|
27
|
+
const nativeRoot = getNativeElementProps('div', {
|
|
28
28
|
ref,
|
|
29
29
|
role,
|
|
30
30
|
...rest
|
|
31
|
-
}, [
|
|
31
|
+
}, ['size']);
|
|
32
32
|
const labelShorthand = resolveShorthand(props.label, {
|
|
33
33
|
defaultProps: {
|
|
34
34
|
id: baseId
|
|
@@ -42,16 +42,16 @@ export const useSpinner_unstable = (props, ref) => {
|
|
|
42
42
|
tabIndex
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
-
if (labelShorthand && nativeRoot && !nativeRoot[
|
|
46
|
-
nativeRoot[
|
|
45
|
+
if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
|
|
46
|
+
nativeRoot['aria-labelledby'] = labelShorthand.id;
|
|
47
47
|
}
|
|
48
48
|
const state = {
|
|
49
49
|
appearance,
|
|
50
50
|
labelPosition,
|
|
51
51
|
size,
|
|
52
52
|
components: {
|
|
53
|
-
root:
|
|
54
|
-
spinner:
|
|
53
|
+
root: 'div',
|
|
54
|
+
spinner: 'span',
|
|
55
55
|
label: Label
|
|
56
56
|
},
|
|
57
57
|
root: nativeRoot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Label","DefaultSvg","useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","createElement","state","components","root"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Label","DefaultSvg","useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","createElement","state","components","root"],"sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n // Props\n const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n const baseId = useId('spinner');\n\n const { role = 'progressbar', tabIndex, ...rest } = props;\n const nativeRoot = getNativeElementProps('div', { ref, role, ...rest }, ['size']);\n\n const labelShorthand = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId,\n },\n required: false,\n });\n\n const spinnerShortHand = resolveShorthand(props.spinner, {\n required: true,\n defaultProps: {\n children: <DefaultSvg />,\n tabIndex,\n },\n });\n\n if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n nativeRoot['aria-labelledby'] = labelShorthand.id;\n }\n\n const state: SpinnerState = {\n appearance,\n labelPosition,\n size,\n components: {\n root: 'div',\n spinner: 'span',\n label: Label,\n },\n root: nativeRoot,\n spinner: spinnerShortHand,\n label: labelShorthand,\n };\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAE1F,SAASC,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;;;;;;;AASA,OAAO,MAAMC,mBAAmB,GAAGA,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG;EACA,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC,aAAa,GAAG,OAAO;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAClF,MAAMK,MAAM,GAAGT,KAAK,CAAC,SAAS,CAAC;EAE/B,MAAM;IAAEU,IAAI,GAAG,aAAa;IAAEC,QAAQ;IAAE,GAAGC;EAAI,CAAE,GAAGR,KAAK;EACzD,MAAMS,UAAU,GAAGf,qBAAqB,CAAC,KAAK,EAAE;IAAEO,GAAG;IAAEK,IAAI;IAAE,GAAGE;EAAI,CAAE,EAAE,CAAC,MAAM,CAAC,CAAC;EAEjF,MAAME,cAAc,GAAGf,gBAAgB,CAACK,KAAK,CAACW,KAAK,EAAE;IACnDC,YAAY,EAAE;MACZC,EAAE,EAAER;KACL;IACDS,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,gBAAgB,GAAGpB,gBAAgB,CAACK,KAAK,CAACgB,OAAO,EAAE;IACvDF,QAAQ,EAAE,IAAI;IACdF,YAAY,EAAE;MACZK,QAAQ,eAAExB,KAAA,CAAAyB,aAAA,CAACpB,UAAU,OAAG;MACxBS;;GAEH,CAAC;EAEF,IAAIG,cAAc,IAAID,UAAU,IAAI,CAACA,UAAU,CAAC,iBAAiB,CAAC,EAAE;IAClEA,UAAU,CAAC,iBAAiB,CAAC,GAAGC,cAAc,CAACG,EAAE;;EAGnD,MAAMM,KAAK,GAAiB;IAC1BjB,UAAU;IACVC,aAAa;IACbC,IAAI;IACJgB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXL,OAAO,EAAE,MAAM;MACfL,KAAK,EAAEd;KACR;IACDwB,IAAI,EAAEZ,UAAU;IAChBO,OAAO,EAAED,gBAAgB;IACzBJ,KAAK,EAAED;GACR;EACD,OAAOS,KAAK;AACd,CAAC"}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from
|
|
2
|
-
import { tokens, typographyStyles } from
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
3
|
export const spinnerClassNames = {
|
|
4
|
-
root:
|
|
5
|
-
spinner:
|
|
6
|
-
label:
|
|
4
|
+
root: 'fui-Spinner',
|
|
5
|
+
spinner: 'fui-Spinner__spinner',
|
|
6
|
+
label: 'fui-Spinner__label'
|
|
7
7
|
};
|
|
8
8
|
/*
|
|
9
9
|
* TODO: Update with proper tokens when added
|
|
10
10
|
* Radii for the Spinner circles
|
|
11
11
|
*/
|
|
12
12
|
const rValues = {
|
|
13
|
-
tiny:
|
|
14
|
-
extraSmall:
|
|
15
|
-
small:
|
|
16
|
-
medium:
|
|
17
|
-
large:
|
|
18
|
-
extraLarge:
|
|
19
|
-
huge:
|
|
13
|
+
tiny: '9px',
|
|
14
|
+
extraSmall: '11px',
|
|
15
|
+
small: '13px',
|
|
16
|
+
medium: '14.5px',
|
|
17
|
+
large: '16.5px',
|
|
18
|
+
extraLarge: '18.5px',
|
|
19
|
+
huge: '20px'
|
|
20
20
|
};
|
|
21
21
|
/*
|
|
22
22
|
* TODO: Update with proper tokens when added
|
|
23
23
|
* Sizes for the Spinner
|
|
24
24
|
*/
|
|
25
25
|
const spinnnerSizes = {
|
|
26
|
-
tiny:
|
|
27
|
-
extraSmall:
|
|
28
|
-
small:
|
|
29
|
-
medium:
|
|
30
|
-
large:
|
|
31
|
-
extraLarge:
|
|
32
|
-
huge:
|
|
26
|
+
tiny: '20px',
|
|
27
|
+
extraSmall: '24px',
|
|
28
|
+
small: '28px',
|
|
29
|
+
medium: '32px',
|
|
30
|
+
large: '36px',
|
|
31
|
+
extraLarge: '40px',
|
|
32
|
+
huge: '44px'
|
|
33
33
|
};
|
|
34
34
|
/*
|
|
35
35
|
* TODO: Update with proper tokens when added
|
|
@@ -37,10 +37,10 @@ const spinnnerSizes = {
|
|
|
37
37
|
*/
|
|
38
38
|
const spinnerAnimation = {
|
|
39
39
|
container: {
|
|
40
|
-
animationDuration:
|
|
41
|
-
animationIterationCount:
|
|
42
|
-
animationTimingFunction:
|
|
43
|
-
backgroundColor:
|
|
40
|
+
animationDuration: '3s',
|
|
41
|
+
animationIterationCount: 'infinite',
|
|
42
|
+
animationTimingFunction: 'linear',
|
|
43
|
+
backgroundColor: 'transparent'
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
/**
|
|
@@ -235,13 +235,13 @@ export const useSpinnerStyles_unstable = state => {
|
|
|
235
235
|
const {
|
|
236
236
|
labelPosition,
|
|
237
237
|
size,
|
|
238
|
-
appearance =
|
|
238
|
+
appearance = 'primary'
|
|
239
239
|
} = state;
|
|
240
240
|
const rootStyles = useRootStyles();
|
|
241
241
|
const spinnerStyles = useLoaderStyles();
|
|
242
242
|
const labelStyles = useLabelStyles();
|
|
243
243
|
const trackStyles = useTrackStyles();
|
|
244
|
-
state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition ===
|
|
244
|
+
state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
|
|
245
245
|
if (state.spinner) {
|
|
246
246
|
state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
|
|
247
247
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","spinnerClassNames","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className"],"sources":["../../../src/components/Spinner/useSpinnerStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus': {\n ...shorthands.outline('3px', 'solid', 'transparent'),\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n 'extra-small': {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n 'extra-large': {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorBrandStroke2,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n inverted: {\n color: 'rgba(255, 255, 255, 1)', // This is white alpha but the token is not exported\n },\n\n primary: {}, // no change\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n 'extra-small': {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n 'extra-large': {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { labelPosition, size, appearance = 'primary' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n spinnerStyles[size],\n trackStyles[appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n labelStyles[appearance],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","spinnerClassNames","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className"],"sources":["../../../../../../../../../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"],"mappings":"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"}
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable } from
|
|
1
|
+
export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable } from './Spinner';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"sources":["
|
|
1
|
+
{"version":3,"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"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"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB,WAAW"}
|
package/lib-commonjs/Spinner.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
//# sourceMappingURL=Spinner.js.map
|
|
8
|
-
|
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
+
tslib_1.__exportStar(require("./components/Spinner/index"), exports);
|
|
9
8
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-spinner/src/Spinner.ts"],"sourcesContent":["export * from './components/Spinner/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA"}
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "DefaultSvg", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>DefaultSvg
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const DefaultSvg = ()
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
exports.DefaultSvg = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const DefaultSvg = () => React.createElement("svg", {
|
|
9
|
+
className: "fui-Spinner__Progressbar"
|
|
10
|
+
}, React.createElement("circle", {
|
|
11
|
+
className: "fui-Spinner__Track"
|
|
12
|
+
}), React.createElement("circle", {
|
|
13
|
+
className: "fui-Spinner__Tail"
|
|
14
|
+
}));
|
|
15
|
+
exports.DefaultSvg = DefaultSvg;
|
|
19
16
|
//# sourceMappingURL=DefaultSvg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["React","require","DefaultSvg","createElement","className","exports"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAEO,MAAMC,UAAU,GAAGA,CAAA,KACxBF,KAAA,CAAAG,aAAA;EAAKC,SAAS,EAAC;AAA0B,GACvCJ,KAAA,CAAAG,aAAA;EAAQC,SAAS,EAAC;AAAoB,EAAG,EACzCJ,KAAA,CAAAG,aAAA;EAAQC,SAAS,EAAC;AAAmB,EAAG,CAE3C;AALYC,OAAA,CAAAH,UAAU,GAAAA,UAAA"}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "Spinner", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>Spinner
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
exports.Spinner = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const useSpinner_1 = /*#__PURE__*/require("./useSpinner");
|
|
9
|
+
const renderSpinner_1 = /*#__PURE__*/require("./renderSpinner");
|
|
10
|
+
const useSpinnerStyles_1 = /*#__PURE__*/require("./useSpinnerStyles");
|
|
11
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
12
|
+
/**
|
|
13
|
+
* Converged Spinner component for the fluentui repo
|
|
14
|
+
*/
|
|
15
|
+
exports.Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
16
|
+
const state = useSpinner_1.useSpinner_unstable(props, ref);
|
|
17
|
+
useSpinnerStyles_1.useSpinnerStyles_unstable(state);
|
|
18
|
+
const {
|
|
19
|
+
useSpinnerStyles_unstable: useCustomStyles
|
|
20
|
+
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
21
|
+
useCustomStyles(state);
|
|
22
|
+
return renderSpinner_1.renderSpinner_unstable(state);
|
|
21
23
|
});
|
|
22
|
-
Spinner.displayName =
|
|
23
|
-
|
|
24
|
+
exports.Spinner.displayName = 'Spinner';
|
|
24
25
|
//# sourceMappingURL=Spinner.js.map
|