first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
@@ -0,0 +1,7 @@
import * as React from 'react';
import type { ISpinnerProps } from './Spinner.types';
import type { JSXElement } from '@fluentui/utilities';
export declare class SpinnerBase extends React.Component<ISpinnerProps, any> {
static defaultProps: ISpinnerProps;
render(): JSXElement;
}
@@ -0,0 +1,46 @@
define(["require", "exports", "tslib", "react", "./Spinner.types", "../../Utilities"], function (require, exports, tslib_1, React, Spinner_types_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpinnerBase = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
var SpinnerBase = /** @class */ (function (_super) {
tslib_1.__extends(SpinnerBase, _super);
function SpinnerBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
SpinnerBase.prototype.render = function () {
// eslint-disable-next-line @typescript-eslint/no-deprecated
var _a = this.props, type = _a.type, size = _a.size, ariaLabel = _a.ariaLabel, ariaLive = _a.ariaLive, styles = _a.styles, label = _a.label, theme = _a.theme, className = _a.className, labelPosition = _a.labelPosition;
var statusMessage = ariaLabel;
var nativeProps = (0, Utilities_1.getNativeProps)(this.props, Utilities_1.divProperties, ['size']);
// SpinnerType is deprecated. If someone is still using this property, rather than putting the SpinnerType into the
// ISpinnerStyleProps, we'll map SpinnerType to its equivalent SpinnerSize and pass that in. Once SpinnerType
// finally goes away we should delete this.
var styleSize = size;
if (styleSize === undefined && type !== undefined) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
styleSize = type === Spinner_types_1.SpinnerType.large ? Spinner_types_1.SpinnerSize.large : Spinner_types_1.SpinnerSize.medium;
}
var classNames = getClassNames(styles, {
theme: theme,
size: styleSize,
className: className,
labelPosition: labelPosition,
});
return (React.createElement("div", tslib_1.__assign({}, nativeProps, { className: classNames.root }),
React.createElement("div", { className: classNames.circle }),
label && React.createElement("div", { className: classNames.label }, label),
statusMessage && (React.createElement("div", { role: "status", "aria-live": ariaLive },
React.createElement(Utilities_1.DelayedRender, null,
React.createElement("div", { className: classNames.screenReaderText }, statusMessage))))));
};
SpinnerBase.defaultProps = {
size: Spinner_types_1.SpinnerSize.medium,
ariaLive: 'polite',
labelPosition: 'bottom',
};
return SpinnerBase;
}(React.Component));
exports.SpinnerBase = SpinnerBase;
});
//# sourceMappingURL=Spinner.base.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Spinner.base.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.base.tsx"],"names":[],"mappings":";;;;IAOA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAsC,CAAC;IAE/E;QAAiC,uCAAmC;QAApE;;QA2CA,CAAC;QApCQ,4BAAM,GAAb;YACE,4DAA4D;YACtD,IAAA,KAAsF,IAAI,CAAC,KAAK,EAA9F,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,aAAa,mBAAe,CAAC;YACvG,IAAM,aAAa,GAAG,SAAS,CAAC;YAChC,IAAM,WAAW,GAAG,IAAA,0BAAc,EAAuC,IAAI,CAAC,KAAK,EAAE,yBAAa,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;YAE9G,mHAAmH;YACnH,6GAA6G;YAC7G,2CAA2C;YAC3C,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,IAAI,SAAS,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBAClD,4DAA4D;gBAC5D,SAAS,GAAG,IAAI,KAAK,2BAAW,CAAC,KAAK,CAAC,CAAC,CAAC,2BAAW,CAAC,KAAK,CAAC,CAAC,CAAC,2BAAW,CAAC,MAAM,CAAC;YAClF,CAAC;YAED,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,IAAI,EAAE,SAAS;gBACf,SAAS,WAAA;gBACT,aAAa,eAAA;aACd,CAAC,CAAC;YAEH,OAAO,CACL,gDAAS,WAAW,IAAE,SAAS,EAAE,UAAU,CAAC,IAAI;gBAC9C,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,GAAI;gBACpC,KAAK,IAAI,6BAAK,SAAS,EAAE,UAAU,CAAC,KAAK,IAAG,KAAK,CAAO;gBACxD,aAAa,IAAI,CAChB,6BAAK,IAAI,EAAC,QAAQ,eAAY,QAAQ;oBACpC,oBAAC,yBAAa;wBACZ,6BAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,IAAG,aAAa,CAAO,CACpD,CACZ,CACP,CACG,CACP,CAAC;QACJ,CAAC;QAzCa,wBAAY,GAAkB;YAC1C,IAAI,EAAE,2BAAW,CAAC,MAAM;YACxB,QAAQ,EAAE,QAAQ;YAClB,aAAa,EAAE,QAAQ;SACxB,CAAC;QAsCJ,kBAAC;KAAA,AA3CD,CAAiC,KAAK,CAAC,SAAS,GA2C/C;IA3CY,kCAAW","sourcesContent":["import * as React from 'react';\nimport { SpinnerType, SpinnerSize } from './Spinner.types';\nimport { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';\nimport type { ISpinnerProps, ISpinnerStyleProps, ISpinnerStyles } from './Spinner.types';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<ISpinnerStyleProps, ISpinnerStyles>();\n\nexport class SpinnerBase extends React.Component<ISpinnerProps, any> {\n public static defaultProps: ISpinnerProps = {\n size: SpinnerSize.medium,\n ariaLive: 'polite',\n labelPosition: 'bottom',\n };\n\n public render(): JSXElement {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { type, size, ariaLabel, ariaLive, styles, label, theme, className, labelPosition } = this.props;\n const statusMessage = ariaLabel;\n const nativeProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties, ['size']);\n\n // SpinnerType is deprecated. If someone is still using this property, rather than putting the SpinnerType into the\n // ISpinnerStyleProps, we'll map SpinnerType to its equivalent SpinnerSize and pass that in. Once SpinnerType\n // finally goes away we should delete this.\n let styleSize = size;\n if (styleSize === undefined && type !== undefined) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n styleSize = type === SpinnerType.large ? SpinnerSize.large : SpinnerSize.medium;\n }\n\n const classNames = getClassNames(styles!, {\n theme: theme!,\n size: styleSize,\n className,\n labelPosition,\n });\n\n return (\n <div {...nativeProps} className={classNames.root}>\n <div className={classNames.circle} />\n {label && <div className={classNames.label}>{label}</div>}\n {statusMessage && (\n <div role=\"status\" aria-live={ariaLive}>\n <DelayedRender>\n <div className={classNames.screenReaderText}>{statusMessage}</div>\n </DelayedRender>\n </div>\n )}\n </div>\n );\n }\n}\n"]}
+3
View File
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { ISpinnerProps } from './Spinner.types';
export declare const Spinner: React.FunctionComponent<ISpinnerProps>;
+7
View File
@@ -0,0 +1,7 @@
define(["require", "exports", "../../Utilities", "./Spinner.base", "./Spinner.styles"], function (require, exports, Utilities_1, Spinner_base_1, Spinner_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Spinner = void 0;
exports.Spinner = (0, Utilities_1.styled)(Spinner_base_1.SpinnerBase, Spinner_styles_1.getStyles, undefined, { scope: 'Spinner' });
});
//# sourceMappingURL=Spinner.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Spinner.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,OAAO,GAA2C,IAAA,kBAAM,EAInE,0BAAW,EAAE,0BAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { SpinnerBase } from './Spinner.base';\nimport { getStyles } from './Spinner.styles';\nimport type { ISpinnerProps, ISpinnerStyles, ISpinnerStyleProps } from './Spinner.types';\n\nexport const Spinner: React.FunctionComponent<ISpinnerProps> = styled<\n ISpinnerProps,\n ISpinnerStyleProps,\n ISpinnerStyles\n>(SpinnerBase, getStyles, undefined, { scope: 'Spinner' });\n"]}
@@ -0,0 +1,2 @@
import type { ISpinnerStyleProps, ISpinnerStyles } from './Spinner.types';
export declare const getStyles: (props: ISpinnerStyleProps) => ISpinnerStyles;
@@ -0,0 +1,116 @@
define(["require", "exports", "tslib", "./Spinner.types", "../../Styling", "../../Utilities"], function (require, exports, tslib_1, Spinner_types_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var GlobalClassNames = {
root: 'ms-Spinner',
circle: 'ms-Spinner-circle',
label: 'ms-Spinner-label',
};
var spinAnimation = (0, Utilities_1.memoizeFunction)(function () {
return (0, Styling_1.keyframes)({
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
});
});
var getStyles = function (props) {
var _a;
var theme = props.theme, size = props.size, className = props.className, labelPosition = props.labelPosition;
var palette = theme.palette;
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
return {
root: [
classNames.root,
{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
labelPosition === 'top' && {
flexDirection: 'column-reverse',
},
labelPosition === 'right' && {
flexDirection: 'row',
},
labelPosition === 'left' && {
flexDirection: 'row-reverse',
},
className,
],
circle: [
classNames.circle,
{
boxSizing: 'border-box',
borderRadius: '50%',
borderWidth: '1.5px',
borderStyle: 'solid',
borderTopColor: palette.themePrimary,
borderRightColor: palette.themeLight,
borderBottomColor: palette.themeLight,
borderLeftColor: palette.themeLight,
animationName: spinAnimation(),
animationDuration: '1.3s',
animationIterationCount: 'infinite',
animationTimingFunction: 'cubic-bezier(.53,.21,.29,.67)',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderTopColor: 'Highlight' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_a),
},
size === Spinner_types_1.SpinnerSize.xSmall && [
'ms-Spinner--xSmall',
{
width: 12,
height: 12,
},
],
size === Spinner_types_1.SpinnerSize.small && [
'ms-Spinner--small',
{
width: 16,
height: 16,
},
],
size === Spinner_types_1.SpinnerSize.medium && [
'ms-Spinner--medium',
{
width: 20,
height: 20,
},
],
size === Spinner_types_1.SpinnerSize.large && [
'ms-Spinner--large',
{
width: 28,
height: 28,
},
],
],
label: [
classNames.label,
theme.fonts.small,
{
color: palette.themePrimary,
margin: '8px 0 0',
textAlign: 'center',
},
labelPosition === 'top' && {
margin: '0 0 8px',
},
labelPosition === 'right' && {
margin: '0 0 0 8px',
},
labelPosition === 'left' && {
margin: '0 8px 0 0',
},
],
screenReaderText: Styling_1.hiddenContentStyle,
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=Spinner.styles.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,129 @@
import * as React from 'react';
import type { ITheme, IStyle } from '../../Styling';
import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
/**
* {@docCategory Spinner}
*/
export interface ISpinner {
}
/**
* Spinner component props.
* {@docCategory Spinner}
*/
export interface ISpinnerProps extends React.HTMLAttributes<HTMLElement> {
/**
* Optional callback to access the ISpinner interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<ISpinner>;
/**
* @deprecated Use `size` instead. Will be removed at \>= 2.0.0.
*/
type?: SpinnerType;
/**
* The size of Spinner to render.
* @defaultvalue SpinnerType.medium
*/
size?: SpinnerSize;
/**
* The label to show next to the Spinner. Label updates will be announced to the screen readers.
* Use ariaLive to control politeness level.
*/
label?: string;
/**
* Additional CSS class(es) to apply to the Spinner.
*/
className?: string;
/**
* Politeness setting for label update announcement.
* @defaultvalue polite
*/
ariaLive?: 'assertive' | 'polite' | 'off';
/**
* Alternative status label for screen reader
*/
ariaLabel?: string;
/**
* Theme (provided through customization.)
*/
theme?: ITheme;
/**
* Call to provide customized styling that will layer on top of the variant rules.
*/
styles?: IStyleFunctionOrObject<ISpinnerStyleProps, ISpinnerStyles>;
/**
* The position of the label in regards of the spinner animation.
* @defaultvalue SpinnerLabelPosition.bottom
*/
labelPosition?: SpinnerLabelPosition;
}
/**
* Possible variations of the spinner circle size.
* {@docCategory Spinner}
*/
export declare enum SpinnerSize {
/**
* 12px Spinner diameter
*/
xSmall = 0,
/**
* 16px Spinner diameter
*/
small = 1,
/**
* 20px Spinner diameter
*/
medium = 2,
/**
* 28px Spinner diameter
*/
large = 3
}
/**
* Possible locations of the label in regards to the spinner
* {@docCategory Spinner}
*/
export type SpinnerLabelPosition = 'top' | 'right' | 'bottom' | 'left';
/**
* @deprecated Use `SpinnerSize` instead. Will be removed at \>= 2.0.0.
* {@docCategory Spinner}
*/
export declare enum SpinnerType {
/**
* @deprecated Use `SpinnerSize.medium` instead. Will be removed at \>= 2.0.0.
*/
normal = 0,
/**
* @deprecated Use `SpinnerSize.large` instead. Will be removed at \>= 2.0.0.
*/
large = 1
}
/**
* The props needed to construct styles.
* This represents the simplified set of immutable things which control the class names.
* {@docCategory Spinner}
*/
export interface ISpinnerStyleProps {
/** Theme provided by High-Order Component. */
theme: ITheme;
/** Size of the spinner animation. */
size?: SpinnerSize;
/** CSS class name for the component attached to the root stylable area. */
className?: string;
/** Position of the label in regards to the spinner animation. */
labelPosition?: SpinnerLabelPosition;
}
/**
* Represents the stylable areas of the control.
* {@docCategory Spinner}
*/
export interface ISpinnerStyles {
/** Styles for the root element. Refers to the wrapper containing both the circle and the label. */
root?: IStyle;
/** Styles for the spinner circle animation. */
circle?: IStyle;
/** Styles for the label accompanying the circle. */
label?: IStyle;
/** Styles for the hidden helper element to aid with screen readers. */
screenReaderText?: IStyle;
}
@@ -0,0 +1,44 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpinnerType = exports.SpinnerSize = void 0;
/**
* Possible variations of the spinner circle size.
* {@docCategory Spinner}
*/
var SpinnerSize;
(function (SpinnerSize) {
/**
* 12px Spinner diameter
*/
SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall";
/**
* 16px Spinner diameter
*/
SpinnerSize[SpinnerSize["small"] = 1] = "small";
/**
* 20px Spinner diameter
*/
SpinnerSize[SpinnerSize["medium"] = 2] = "medium";
/**
* 28px Spinner diameter
*/
SpinnerSize[SpinnerSize["large"] = 3] = "large";
})(SpinnerSize || (exports.SpinnerSize = SpinnerSize = {}));
/**
* @deprecated Use `SpinnerSize` instead. Will be removed at \>= 2.0.0.
* {@docCategory Spinner}
*/
var SpinnerType;
(function (SpinnerType) {
/**
* @deprecated Use `SpinnerSize.medium` instead. Will be removed at \>= 2.0.0.
*/
SpinnerType[SpinnerType["normal"] = 0] = "normal";
/**
* @deprecated Use `SpinnerSize.large` instead. Will be removed at \>= 2.0.0.
*/
SpinnerType[SpinnerType["large"] = 1] = "large";
})(SpinnerType || (exports.SpinnerType = SpinnerType = {}));
});
//# sourceMappingURL=Spinner.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"Spinner.types.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.types.ts"],"names":[],"mappings":";;;;IAuEA;;;OAGG;IACH,IAAY,WAoBX;IApBD,WAAY,WAAW;QACrB;;WAEG;QACH,iDAAU,CAAA;QAEV;;WAEG;QACH,+CAAS,CAAA;QAET;;WAEG;QACH,iDAAU,CAAA;QAEV;;WAEG;QACH,+CAAS,CAAA;IACX,CAAC,EApBW,WAAW,2BAAX,WAAW,QAoBtB;IAQD;;;OAGG;IACH,IAAY,WAUX;IAVD,WAAY,WAAW;QACrB;;WAEG;QACH,iDAAU,CAAA;QAEV;;WAEG;QACH,+CAAS,CAAA;IACX,CAAC,EAVW,WAAW,2BAAX,WAAW,QAUtB","sourcesContent":["import * as React from 'react';\nimport type { ITheme, IStyle } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\n/**\n * {@docCategory Spinner}\n */\nexport interface ISpinner {}\n\n/**\n * Spinner component props.\n * {@docCategory Spinner}\n */\nexport interface ISpinnerProps extends React.HTMLAttributes<HTMLElement> {\n /**\n * Optional callback to access the ISpinner interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<ISpinner>;\n\n /**\n * @deprecated Use `size` instead. Will be removed at \\>= 2.0.0.\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type?: SpinnerType;\n\n /**\n * The size of Spinner to render.\n * @defaultvalue SpinnerType.medium\n */\n size?: SpinnerSize;\n\n /**\n * The label to show next to the Spinner. Label updates will be announced to the screen readers.\n * Use ariaLive to control politeness level.\n */\n label?: string;\n\n /**\n * Additional CSS class(es) to apply to the Spinner.\n */\n className?: string;\n\n /**\n * Politeness setting for label update announcement.\n * @defaultvalue polite\n */\n ariaLive?: 'assertive' | 'polite' | 'off';\n\n /**\n * Alternative status label for screen reader\n */\n ariaLabel?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISpinnerStyleProps, ISpinnerStyles>;\n\n /**\n * The position of the label in regards of the spinner animation.\n * @defaultvalue SpinnerLabelPosition.bottom\n */\n labelPosition?: SpinnerLabelPosition;\n}\n\n/**\n * Possible variations of the spinner circle size.\n * {@docCategory Spinner}\n */\nexport enum SpinnerSize {\n /**\n * 12px Spinner diameter\n */\n xSmall = 0,\n\n /**\n * 16px Spinner diameter\n */\n small = 1,\n\n /**\n * 20px Spinner diameter\n */\n medium = 2,\n\n /**\n * 28px Spinner diameter\n */\n large = 3,\n}\n\n/**\n * Possible locations of the label in regards to the spinner\n * {@docCategory Spinner}\n */\nexport type SpinnerLabelPosition = 'top' | 'right' | 'bottom' | 'left';\n\n/**\n * @deprecated Use `SpinnerSize` instead. Will be removed at \\>= 2.0.0.\n * {@docCategory Spinner}\n */\nexport enum SpinnerType {\n /**\n * @deprecated Use `SpinnerSize.medium` instead. Will be removed at \\>= 2.0.0.\n */\n normal = 0,\n\n /**\n * @deprecated Use `SpinnerSize.large` instead. Will be removed at \\>= 2.0.0.\n */\n large = 1,\n}\n\n/**\n * The props needed to construct styles.\n * This represents the simplified set of immutable things which control the class names.\n * {@docCategory Spinner}\n */\nexport interface ISpinnerStyleProps {\n /** Theme provided by High-Order Component. */\n theme: ITheme;\n\n /** Size of the spinner animation. */\n size?: SpinnerSize;\n\n /** CSS class name for the component attached to the root stylable area. */\n className?: string;\n\n /** Position of the label in regards to the spinner animation. */\n labelPosition?: SpinnerLabelPosition;\n}\n\n/**\n * Represents the stylable areas of the control.\n * {@docCategory Spinner}\n */\nexport interface ISpinnerStyles {\n /** Styles for the root element. Refers to the wrapper containing both the circle and the label. */\n root?: IStyle;\n\n /** Styles for the spinner circle animation. */\n circle?: IStyle;\n\n /** Styles for the label accompanying the circle. */\n label?: IStyle;\n\n /** Styles for the hidden helper element to aid with screen readers. */\n screenReaderText?: IStyle;\n}\n"]}
+3
View File
@@ -0,0 +1,3 @@
export * from './Spinner';
export * from './Spinner.base';
export * from './Spinner.types';
+8
View File
@@ -0,0 +1,8 @@
define(["require", "exports", "tslib", "./Spinner", "./Spinner.base", "./Spinner.types"], function (require, exports, tslib_1, Spinner_1, Spinner_base_1, Spinner_types_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
tslib_1.__exportStar(Spinner_1, exports);
tslib_1.__exportStar(Spinner_base_1, exports);
tslib_1.__exportStar(Spinner_types_1, exports);
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Spinner/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,8CAA+B;IAC/B,+CAAgC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.base';\nexport * from './Spinner.types';\n"]}