@fluentui/react-spinner 9.0.14 → 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.
- package/CHANGELOG.json +48 -1
- package/CHANGELOG.md +14 -2
- package/lib/components/Spinner/DefaultSvg.js.map +1 -1
- package/lib/components/Spinner/Spinner.js +0 -1
- package/lib/components/Spinner/Spinner.js.map +1 -1
- package/lib/components/Spinner/renderSpinner.js +8 -5
- package/lib/components/Spinner/renderSpinner.js.map +1 -1
- package/lib/components/Spinner/useSpinner.js +0 -3
- package/lib/components/Spinner/useSpinner.js.map +1 -1
- package/lib/components/Spinner/useSpinnerStyles.js +149 -161
- package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Spinner.js +0 -2
- package/lib-commonjs/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/DefaultSvg.js +0 -3
- package/lib-commonjs/components/Spinner/DefaultSvg.js.map +1 -1
- package/lib-commonjs/components/Spinner/Spinner.js +0 -6
- package/lib-commonjs/components/Spinner/Spinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/Spinner.types.js.map +1 -1
- package/lib-commonjs/components/Spinner/index.js +0 -6
- package/lib-commonjs/components/Spinner/index.js.map +1 -1
- package/lib-commonjs/components/Spinner/renderSpinner.js +8 -9
- package/lib-commonjs/components/Spinner/renderSpinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/useSpinner.js +0 -9
- package/lib-commonjs/components/Spinner/useSpinner.js.map +1 -1
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js +137 -153
- package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
|
@@ -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":"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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":"../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"],"
|
|
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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-spinner/src/Spinner.ts"],"
|
|
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"]}
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"]}
|
|
@@ -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);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/index.ts"],"
|
|
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"]}
|
|
@@ -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, {
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"]}
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useSpinner_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
-
|
|
12
9
|
const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
|
|
13
|
-
|
|
14
10
|
const DefaultSvg_1 = /*#__PURE__*/require("./DefaultSvg");
|
|
15
11
|
/**
|
|
16
12
|
* Create the state required to render Spinner.
|
|
@@ -21,8 +17,6 @@ const DefaultSvg_1 = /*#__PURE__*/require("./DefaultSvg");
|
|
|
21
17
|
* @param props - props from this instance of Spinner
|
|
22
18
|
* @param ref - reference to root HTMLElement of Spinner
|
|
23
19
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
20
|
const useSpinner_unstable = (props, ref) => {
|
|
27
21
|
// Props
|
|
28
22
|
const {
|
|
@@ -54,11 +48,9 @@ const useSpinner_unstable = (props, ref) => {
|
|
|
54
48
|
tabIndex
|
|
55
49
|
}
|
|
56
50
|
});
|
|
57
|
-
|
|
58
51
|
if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
|
|
59
52
|
nativeRoot['aria-labelledby'] = labelShorthand.id;
|
|
60
53
|
}
|
|
61
|
-
|
|
62
54
|
const state = {
|
|
63
55
|
appearance,
|
|
64
56
|
labelPosition,
|
|
@@ -74,6 +66,5 @@ const useSpinner_unstable = (props, ref) => {
|
|
|
74
66
|
};
|
|
75
67
|
return state;
|
|
76
68
|
};
|
|
77
|
-
|
|
78
69
|
exports.useSpinner_unstable = useSpinner_unstable;
|
|
79
70
|
//# sourceMappingURL=useSpinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,mBAAmB,GAAG,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,GAAGC,uBAAK,CAAC,SAAS,CAAC;EAE/B,MAAM;IAAEC,IAAI,GAAG,aAAa;IAAEC,QAAQ;IAAE,GAAGC;EAAI,CAAE,GAAGT,KAAK;EACzD,MAAMU,UAAU,GAAGJ,uCAAqB,CAAC,KAAK,EAAE;IAAEL,GAAG;IAAEM,IAAI;IAAE,GAAGE;EAAI,CAAE,EAAE,CAAC,MAAM,CAAC,CAAC;EAEjF,MAAME,cAAc,GAAGL,kCAAgB,CAACN,KAAK,CAACY,KAAK,EAAE;IACnDC,YAAY,EAAE;MACZC,EAAE,EAAET;KACL;IACDU,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,gBAAgB,GAAGV,kCAAgB,CAACN,KAAK,CAACiB,OAAO,EAAE;IACvDF,QAAQ,EAAE,IAAI;IACdF,YAAY,EAAE;MACZK,QAAQ,EAAEC,oBAACC,uBAAU,OAAG;MACxBZ;;GAEH,CAAC;EAEF,IAAIG,cAAc,IAAID,UAAU,IAAI,CAACA,UAAU,CAAC,iBAAiB,CAAC,EAAE;IAClEA,UAAU,CAAC,iBAAiB,CAAC,GAAGC,cAAc,CAACG,EAAE;;EAGnD,MAAMO,KAAK,GAAiB;IAC1BnB,UAAU;IACVC,aAAa;IACbC,IAAI;IACJkB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXN,OAAO,EAAE,MAAM;MACfL,KAAK,EAAEY;KACR;IACDD,IAAI,EAAEb,UAAU;IAChBO,OAAO,EAAED,gBAAgB;IACzBJ,KAAK,EAAED;GACR;EACD,OAAOU,KAAK;AACd,CAAC;AAzCYI,2BAAmB","names":["useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","react_utilities_1","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","React","DefaultSvg_1","state","components","root","react_label_1","exports"],"sourceRoot":"../src/","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"]}
|