@fluentui/react-spinner 0.0.0-nightly-20230223-0420.1 → 0.0.0-nightly-20230223-2115.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/.swcrc +33 -0
- package/CHANGELOG.json +11 -11
- package/CHANGELOG.md +8 -8
- package/lib/Spinner.js.map +1 -1
- package/lib/components/Spinner/DefaultSvg.js.map +1 -1
- 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.map +1 -1
- package/lib/components/Spinner/renderSpinner.js +2 -9
- package/lib/components/Spinner/renderSpinner.js.map +1 -1
- package/lib/components/Spinner/useSpinner.js.map +1 -1
- package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Spinner.js +5 -4
- package/lib-commonjs/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/DefaultSvg.js +15 -12
- package/lib-commonjs/components/Spinner/DefaultSvg.js.map +1 -1
- package/lib-commonjs/components/Spinner/Spinner.js +16 -15
- package/lib-commonjs/components/Spinner/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/Spinner.types.js +3 -2
- package/lib-commonjs/components/Spinner/Spinner.types.js.map +1 -1
- package/lib-commonjs/components/Spinner/index.js +9 -8
- package/lib-commonjs/components/Spinner/index.js.map +1 -1
- package/lib-commonjs/components/Spinner/renderSpinner.js +16 -27
- package/lib-commonjs/components/Spinner/renderSpinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/useSpinner.js +53 -65
- package/lib-commonjs/components/Spinner/useSpinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js +351 -233
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
- package/lib-commonjs/index.js +16 -33
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
package/.swcrc
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
+
"env": {
|
|
4
|
+
"targets": {
|
|
5
|
+
"chrome": "84",
|
|
6
|
+
"edge": "84",
|
|
7
|
+
"firefox": "75",
|
|
8
|
+
"opera": "73",
|
|
9
|
+
"safari": "14.1"
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
"exclude": [
|
|
13
|
+
"/testing",
|
|
14
|
+
"/**/*.cy.ts",
|
|
15
|
+
"/**/*.cy.tsx",
|
|
16
|
+
"/**/*.spec.ts",
|
|
17
|
+
"/**/*.spec.tsx",
|
|
18
|
+
"/**/*.test.ts",
|
|
19
|
+
"/**/*.test.tsx"
|
|
20
|
+
],
|
|
21
|
+
"jsc": {
|
|
22
|
+
"parser": {
|
|
23
|
+
"syntax": "typescript",
|
|
24
|
+
"tsx": true,
|
|
25
|
+
"decorators": false,
|
|
26
|
+
"dynamicImport": false
|
|
27
|
+
},
|
|
28
|
+
"target": "es2019",
|
|
29
|
+
"externalHelpers": true
|
|
30
|
+
},
|
|
31
|
+
"minify": false,
|
|
32
|
+
"sourceMaps": true
|
|
33
|
+
}
|
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-spinner",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu, 23 Feb 2023
|
|
6
|
-
"tag": "@fluentui/react-spinner_v0.0.0-nightly-20230223-
|
|
7
|
-
"version": "0.0.0-nightly-20230223-
|
|
5
|
+
"date": "Thu, 23 Feb 2023 21:23:18 GMT",
|
|
6
|
+
"tag": "@fluentui/react-spinner_v0.0.0-nightly-20230223-2115.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230223-2115.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,26 +16,26 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-spinner",
|
|
19
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230223-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230223-2115.1",
|
|
20
|
+
"commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-spinner",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230223-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230223-2115.1",
|
|
26
|
+
"commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-spinner",
|
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-2115.1",
|
|
32
|
+
"commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-spinner",
|
|
37
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-2115.1",
|
|
38
|
+
"commit": "a400eb0e4c7e02093ab7fb103c74a8dcca00f17b"
|
|
39
39
|
}
|
|
40
40
|
]
|
|
41
41
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-spinner
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu, 23 Feb 2023
|
|
3
|
+
This log was last generated on Thu, 23 Feb 2023 21:23:18 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-20230223-
|
|
7
|
+
## [0.0.0-nightly-20230223-2115.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20230223-2115.1)
|
|
8
8
|
|
|
9
|
-
Thu, 23 Feb 2023
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.22..@fluentui/react-spinner_v0.0.0-nightly-20230223-
|
|
9
|
+
Thu, 23 Feb 2023 21:23:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.22..@fluentui/react-spinner_v0.0.0-nightly-20230223-2115.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-theme to v0.0.0-nightly-20230223-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-20230223-
|
|
17
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-
|
|
18
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-
|
|
15
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230223-2115.1 ([commit](https://github.com/microsoft/fluentui/commit/a400eb0e4c7e02093ab7fb103c74a8dcca00f17b) by beachball)
|
|
19
19
|
|
|
20
20
|
## [9.0.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.22)
|
|
21
21
|
|
package/lib/Spinner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,cAAc","names":[],"sources":["../src/Spinner.ts"],"sourcesContent":["export * from './components/Spinner/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,YAAYA,WAAW;AAEvB,OAAO,MAAMC,aAAa,mBACxBD,oBAACE;EAAIC,WAAU;gBACbH,oBAACI;EAAOD,WAAU;iBAClBH,oBAACI;EAAOD,WAAU","names":["React","DefaultSvg","svg","className","circle"],"sources":["../../../src/components/Spinner/DefaultSvg.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n <svg className=\"fui-Spinner__Progressbar\">\n <circle className=\"fui-Spinner__Track\" />\n <circle className=\"fui-Spinner__Tail\" />\n </svg>\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,YAAYA,WAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAI1C;;;AAGA,OAAO,MAAMC,uBAA6CJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,QAAQ;EACzF,MAAMC,QAAQP,oBAAoBK,OAAOC;EAEzCJ,0BAA0BK;EAC1B,OAAON,uBAAuBM;AAChC;AAEAJ,QAAQK,WAAW,GAAG","names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","Spinner","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA","names":[],"sources":["../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n /**\n * The root of the Spinner.\n * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The slot for the animated svg.\n * The spinner slot receives the `className` and `style` that handles the spinning animation.\n * An svg is also rendered as a child of this slot\n */\n spinner?: Slot<'span'>;\n /**\n * The label of the Slider.\n * The label slot receives the styling related to the text associated with the Spinner.\n */\n label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n /**\n * The appearance of the Spinner.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n\n /**\n * Where the label is positioned relative to the Spinner\n * @default 'after'\n */\n labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n /**\n * The size of the spinner.\n * @default 'medium'\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","names":[],"sources":["../../../src/components/Spinner/index.ts"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _extends from "@swc/helpers/src/_extends.mjs";
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { getSlots } from '@fluentui/react-utilities';
|
|
3
4
|
/**
|
|
@@ -11,14 +12,6 @@ export const renderSpinner_unstable = state => {
|
|
|
11
12
|
const {
|
|
12
13
|
labelPosition
|
|
13
14
|
} = state;
|
|
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
|
+
return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root), slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, _extends({}, slotProps.label)), slots.spinner && /*#__PURE__*/React.createElement(slots.spinner, _extends({}, slotProps.spinner)), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, _extends({}, slotProps.label)));
|
|
23
16
|
};
|
|
24
17
|
//# sourceMappingURL=renderSpinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":";AAAA,YAAYA,WAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,yBAA0BC,SAAwB;EAC7D,MAAM;IAAEC;IAAOC;EAAS,CAAE,GAAGJ,SAAuBE;EACpD,MAAM;IAAEG;EAAa,CAAE,GAAGH;EAC1B,oBACEH,oBAACI,MAAMG,IAAI,eAAKF,UAAUE,IAAI,GAC3BH,MAAMI,KAAK,KAAKF,kBAAkB,WAAWA,kBAAkB,QAAO,kBAAMN,oBAACI,MAAMI,KAAK,eAAKH,UAAUG,KAAK,IAC5GJ,MAAMK,OAAO,iBAAIT,oBAACI,MAAMK,OAAO,eAAKJ,UAAUI,OAAO,IACrDL,MAAMI,KAAK,KAAKF,kBAAkB,WAAWA,kBAAkB,OAAM,kBAAMN,oBAACI,MAAMI,KAAK,eAAKH,UAAUG,KAAK;AAGlH","names":["React","getSlots","renderSpinner_unstable","state","slots","slotProps","labelPosition","root","label","spinner"],"sources":["../../../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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,YAAYA,WAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAE/D,SAASC,KAAK,QAAQ;AACtB,SAASC,UAAU,QAAQ;AAE3B;;;;;;;;;AASA,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,QAA8C;EACrG;EACA,MAAM;IAAEC,aAAa;IAAWC,gBAAgB;IAASC,OAAO;EAAQ,CAAE,GAAGJ;EAC7E,MAAMK,SAAST,MAAM;EAErB,MAAM;IAAEU,OAAO;IAAeC;IAAU,GAAGC;EAAAA,CAAM,GAAGR;EACpD,MAAMS,aAAaf,sBAAsB,OAAO;IAAEO;IAAKK;IAAM,GAAGE;EAAK,GAAG,CAAC,OAAO;EAEhF,MAAME,iBAAiBf,iBAAiBK,MAAMW,KAAK,EAAE;IACnDC,cAAc;MACZC,IAAIR;IACN;IACAS,UAAU;EACZ;EAEA,MAAMC,mBAAmBpB,iBAAiBK,MAAMgB,OAAO,EAAE;IACvDF,UAAU,IAAI;IACdF,cAAc;MACZK,uBAAUxB,oBAACK;MACXS;IACF;EACF;EAEA,IAAIG,kBAAkBD,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;IAClEA,UAAU,CAAC,kBAAkB,GAAGC,eAAeG,EAAE;EACnD;EAEA,MAAMK,QAAsB;IAC1BhB;IACAC;IACAC;IACAe,YAAY;MACVC,MAAM;MACNJ,SAAS;MACTL,OAAOd;IACT;IACAuB,MAAMX;IACNO,SAASD;IACTJ,OAAOD;EACT;EACA,OAAOQ;AACT","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","state","components","root"],"sources":["../../../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n // Props\n const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n const baseId = useId('spinner');\n\n const { role = 'progressbar', tabIndex, ...rest } = props;\n const nativeRoot = getNativeElementProps('div', { ref, role, ...rest }, ['size']);\n\n const labelShorthand = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId,\n },\n required: false,\n });\n\n const spinnerShortHand = resolveShorthand(props.spinner, {\n required: true,\n defaultProps: {\n children: <DefaultSvg />,\n tabIndex,\n },\n });\n\n if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n nativeRoot['aria-labelledby'] = labelShorthand.id;\n }\n\n const state: SpinnerState = {\n appearance,\n labelPosition,\n size,\n components: {\n root: 'div',\n spinner: 'span',\n label: Label,\n },\n root: nativeRoot,\n spinner: spinnerShortHand,\n label: labelShorthand,\n };\n return state;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","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":"","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"]}
|
|
1
|
+
{"version":3,"mappings":"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","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","makeStyles","useLoaderStyles","useTrackStyles","useLabelStyles","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","vertical","horizontal","spinnerSVG"],"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"]}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB
|
|
1
|
+
{"version":3,"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB","names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n Spinner,\n spinnerClassNames,\n renderSpinner_unstable,\n useSpinner_unstable,\n useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"]}
|
package/lib-commonjs/Spinner.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/Spinner/index"), exports);
|
|
7
|
+
//# sourceMappingURL=Spinner.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/Spinner.js"],"sourcesContent":["export * from './components/Spinner/index';\n//# sourceMappingURL=Spinner.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,mCAAmC"}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "DefaultSvg", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>DefaultSvg
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const DefaultSvg = ()
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
}),
|
|
13
|
-
|
|
14
|
-
}));
|
|
15
|
-
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const DefaultSvg = ()=>/*#__PURE__*/ _react.createElement("svg", {
|
|
12
|
+
className: "fui-Spinner__Progressbar"
|
|
13
|
+
}, /*#__PURE__*/ _react.createElement("circle", {
|
|
14
|
+
className: "fui-Spinner__Track"
|
|
15
|
+
}), /*#__PURE__*/ _react.createElement("circle", {
|
|
16
|
+
className: "fui-Spinner__Tail"
|
|
17
|
+
})); //# sourceMappingURL=DefaultSvg.js.map
|
|
18
|
+
|
|
16
19
|
//# sourceMappingURL=DefaultSvg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/DefaultSvg.js"],"sourcesContent":["import * as React from 'react';\nexport const DefaultSvg = () => /*#__PURE__*/React.createElement(\"svg\", {\n className: \"fui-Spinner__Progressbar\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n className: \"fui-Spinner__Track\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n className: \"fui-Spinner__Tail\"\n}));\n//# sourceMappingURL=DefaultSvg.js.map"],"names":["DefaultSvg","React","createElement","className"],"mappings":";;;;+BACaA;;aAAAA;;;6DADU;AAChB,MAAMA,aAAa,IAAM,WAAW,GAAEC,OAAMC,aAAa,CAAC,OAAO;QACtEC,WAAW;IACb,GAAG,WAAW,GAAEF,OAAMC,aAAa,CAAC,UAAU;QAC5CC,WAAW;IACb,IAAI,WAAW,GAAEF,OAAMC,aAAa,CAAC,UAAU;QAC7CC,WAAW;IACb,KACA,sCAAsC"}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Spinner", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>Spinner
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const state = useSpinner_1.useSpinner_unstable(props, ref);
|
|
16
|
-
useSpinnerStyles_1.useSpinnerStyles_unstable(state);
|
|
17
|
-
return renderSpinner_1.renderSpinner_unstable(state);
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const _useSpinner = require("./useSpinner");
|
|
12
|
+
const _renderSpinner = require("./renderSpinner");
|
|
13
|
+
const _useSpinnerStyles = require("./useSpinnerStyles");
|
|
14
|
+
const Spinner = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
15
|
+
const state = (0, _useSpinner.useSpinner_unstable)(props, ref);
|
|
16
|
+
(0, _useSpinnerStyles.useSpinnerStyles_unstable)(state);
|
|
17
|
+
return (0, _renderSpinner.renderSpinner_unstable)(state);
|
|
18
18
|
});
|
|
19
|
-
|
|
19
|
+
Spinner.displayName = 'Spinner'; //# sourceMappingURL=Spinner.js.map
|
|
20
|
+
|
|
20
21
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/Spinner.js"],"sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n useSpinnerStyles_unstable(state);\n return renderSpinner_unstable(state);\n});\nSpinner.displayName = 'Spinner';\n//# sourceMappingURL=Spinner.js.map"],"names":["Spinner","React","forwardRef","props","ref","state","useSpinner_unstable","useSpinnerStyles_unstable","renderSpinner_unstable","displayName"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;4BACa;+BACG;kCACG;AAInC,MAAMA,UAAU,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnE,MAAMC,QAAQC,IAAAA,+BAAmB,EAACH,OAAOC;IACzCG,IAAAA,2CAAyB,EAACF;IAC1B,OAAOG,IAAAA,qCAAsB,EAACH;AAChC;AACAL,QAAQS,WAAW,GAAG,WACtB,mCAAmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/Spinner.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Spinner.types.js.map"],"names":[],"mappings":";;;;CACA,yCAAyC"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./Spinner"), exports);
|
|
7
|
+
_exportStar(require("./Spinner.types"), exports);
|
|
8
|
+
_exportStar(require("./renderSpinner"), exports);
|
|
9
|
+
_exportStar(require("./useSpinner"), exports);
|
|
10
|
+
_exportStar(require("./useSpinnerStyles"), exports);
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
12
|
+
|
|
12
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/index.js"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
|
@@ -1,31 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "renderSpinner_unstable", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>renderSpinner_unstable
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
slots,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const {
|
|
18
|
-
labelPosition
|
|
19
|
-
} = state;
|
|
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
|
-
}));
|
|
29
|
-
};
|
|
30
|
-
exports.renderSpinner_unstable = renderSpinner_unstable;
|
|
9
|
+
const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
|
|
10
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
11
|
+
const _extends = require("@swc/helpers/lib/_extends.js").default;
|
|
12
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
13
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
14
|
+
const renderSpinner_unstable = (state)=>{
|
|
15
|
+
const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
|
|
16
|
+
const { labelPosition } = state;
|
|
17
|
+
return /*#__PURE__*/ _react.createElement(slots.root, _extends({}, slotProps.root), slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ _react.createElement(slots.label, _extends({}, slotProps.label)), slots.spinner && /*#__PURE__*/ _react.createElement(slots.spinner, _extends({}, slotProps.spinner)), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ _react.createElement(slots.label, _extends({}, slotProps.label)));
|
|
18
|
+
}; //# sourceMappingURL=renderSpinner.js.map
|
|
19
|
+
|
|
31
20
|
//# sourceMappingURL=renderSpinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Spinner/renderSpinner.js"],"sourcesContent":["import _extends from \"@swc/helpers/src/_extends.mjs\";\nimport * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n const {\n labelPosition\n } = state;\n return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root), slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, _extends({}, slotProps.label)), slots.spinner && /*#__PURE__*/React.createElement(slots.spinner, _extends({}, slotProps.spinner)), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, _extends({}, slotProps.label)));\n};\n//# sourceMappingURL=renderSpinner.js.map"],"names":["renderSpinner_unstable","state","slots","slotProps","getSlots","labelPosition","React","createElement","root","_extends","label","spinner"],"mappings":";;;;+BAMaA;;aAAAA;;;;yBANQ;6DACE;gCACE;AAIlB,MAAMA,yBAAyBC,CAAAA,QAAS;IAC7C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,MAAM,EACJI,cAAa,EACd,GAAGJ;IACJ,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACL,MAAMM,IAAI,EAAEC,SAAS,CAAC,GAAGN,UAAUK,IAAI,GAAGN,MAAMQ,KAAK,IAAKL,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,KAAM,WAAW,GAAEC,OAAMC,aAAa,CAACL,MAAMQ,KAAK,EAAED,SAAS,CAAC,GAAGN,UAAUO,KAAK,IAAIR,MAAMS,OAAO,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACL,MAAMS,OAAO,EAAEF,SAAS,CAAC,GAAGN,UAAUQ,OAAO,IAAIT,MAAMQ,KAAK,IAAKL,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,KAAM,WAAW,GAAEC,OAAMC,aAAa,CAACL,MAAMQ,KAAK,EAAED,SAAS,CAAC,GAAGN,UAAUO,KAAK;AACte,GACA,yCAAyC"}
|