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;
}
+45
View File
@@ -0,0 +1,45 @@
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { SpinnerType, SpinnerSize } from './Spinner.types';
import { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';
var getClassNames = classNamesFunction();
var SpinnerBase = /** @class */ (function (_super) {
__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 = getNativeProps(this.props, 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 === SpinnerType.large ? SpinnerSize.large : SpinnerSize.medium;
}
var classNames = getClassNames(styles, {
theme: theme,
size: styleSize,
className: className,
labelPosition: labelPosition,
});
return (React.createElement("div", __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(DelayedRender, null,
React.createElement("div", { className: classNames.screenReaderText }, statusMessage))))));
};
SpinnerBase.defaultProps = {
size: SpinnerSize.medium,
ariaLive: 'polite',
labelPosition: 'bottom',
};
return SpinnerBase;
}(React.Component));
export { 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":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKnG,IAAM,aAAa,GAAG,kBAAkB,EAAsC,CAAC;AAE/E;IAAiC,+BAAmC;IAApE;;IA2CA,CAAC;IApCQ,4BAAM,GAAb;QACE,4DAA4D;QACtD,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;QACvG,IAAM,aAAa,GAAG,SAAS,CAAC;QAChC,IAAM,WAAW,GAAG,cAAc,CAAuC,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QAE9G,mHAAmH;QACnH,6GAA6G;QAC7G,2CAA2C;QAC3C,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,IAAI,SAAS,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YAClD,4DAA4D;YAC5D,SAAS,GAAG,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;QAClF,CAAC;QAED,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,IAAI,EAAE,SAAS;YACf,SAAS,WAAA;YACT,aAAa,eAAA;SACd,CAAC,CAAC;QAEH,OAAO,CACL,wCAAS,WAAW,IAAE,SAAS,EAAE,UAAU,CAAC,IAAI;YAC9C,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,GAAI;YACpC,KAAK,IAAI,6BAAK,SAAS,EAAE,UAAU,CAAC,KAAK,IAAG,KAAK,CAAO;YACxD,aAAa,IAAI,CAChB,6BAAK,IAAI,EAAC,QAAQ,eAAY,QAAQ;gBACpC,oBAAC,aAAa;oBACZ,6BAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,IAAG,aAAa,CAAO,CACpD,CACZ,CACP,CACG,CACP,CAAC;IACJ,CAAC;IAzCa,wBAAY,GAAkB;QAC1C,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,QAAQ,EAAE,QAAQ;QAClB,aAAa,EAAE,QAAQ;KACxB,CAAC;IAsCJ,kBAAC;CAAA,AA3CD,CAAiC,KAAK,CAAC,SAAS,GA2C/C;SA3CY,WAAW","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>;
+5
View File
@@ -0,0 +1,5 @@
import { styled } from '../../Utilities';
import { SpinnerBase } from './Spinner.base';
import { getStyles } from './Spinner.styles';
export var Spinner = styled(SpinnerBase, getStyles, undefined, { scope: 'Spinner' });
//# sourceMappingURL=Spinner.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Spinner.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,MAAM,CAAC,IAAM,OAAO,GAA2C,MAAM,CAInE,WAAW,EAAE,SAAS,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;
+114
View File
@@ -0,0 +1,114 @@
import { __assign } from "tslib";
import { SpinnerSize } from './Spinner.types';
import { hiddenContentStyle, keyframes, HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle, } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var GlobalClassNames = {
root: 'ms-Spinner',
circle: 'ms-Spinner-circle',
label: 'ms-Spinner-label',
};
var spinAnimation = memoizeFunction(function () {
return keyframes({
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
});
});
export 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 = 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[HighContrastSelector] = __assign({ borderTopColor: 'Highlight' }, getHighContrastNoAdjustStyle()),
_a),
},
size === SpinnerSize.xSmall && [
'ms-Spinner--xSmall',
{
width: 12,
height: 12,
},
],
size === SpinnerSize.small && [
'ms-Spinner--small',
{
width: 16,
height: 16,
},
],
size === SpinnerSize.medium && [
'ms-Spinner--medium',
{
width: 20,
height: 20,
},
],
size === 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: hiddenContentStyle,
};
};
//# sourceMappingURL=Spinner.styles.js.map
File diff suppressed because one or more lines are too long
+129
View File
@@ -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;
}
+39
View File
@@ -0,0 +1,39 @@
/**
* Possible variations of the spinner circle size.
* {@docCategory Spinner}
*/
export 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 || (SpinnerSize = {}));
/**
* @deprecated Use `SpinnerSize` instead. Will be removed at \>= 2.0.0.
* {@docCategory Spinner}
*/
export 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 || (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":"AAuEA;;;GAGG;AACH,MAAM,CAAN,IAAY,WAoBX;AApBD,WAAY,WAAW;IACrB;;OAEG;IACH,iDAAU,CAAA;IAEV;;OAEG;IACH,+CAAS,CAAA;IAET;;OAEG;IACH,iDAAU,CAAA;IAEV;;OAEG;IACH,+CAAS,CAAA;AACX,CAAC,EApBW,WAAW,KAAX,WAAW,QAoBtB;AAQD;;;GAGG;AACH,MAAM,CAAN,IAAY,WAUX;AAVD,WAAY,WAAW;IACrB;;OAEG;IACH,iDAAU,CAAA;IAEV;;OAEG;IACH,+CAAS,CAAA;AACX,CAAC,EAVW,WAAW,KAAX,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';
+4
View File
@@ -0,0 +1,4 @@
export * from './Spinner';
export * from './Spinner.base';
export * from './Spinner.types';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.base';\nexport * from './Spinner.types';\n"]}