Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

1718
node_modules/@fluentui/react-spinner/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-spinner/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-spinner
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

45
node_modules/@fluentui/react-spinner/README.md generated vendored Normal file
View File

@@ -0,0 +1,45 @@
# @fluentui/react-spinner
**Spinner components for [Fluent UI React](https://react.fluentui.dev/)**
The Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinners are typically indeterminate progress indicators that is used when it is unknown how long a task will take to complete. They can be various sizes, located inline with content or centered. They generally appear while an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.
## Usage
To import Spinner:
```js
import { Spinner } from '@fluentui/react-components';
```
### Examples
```js
<Spinner label="Loading..." />
<Spinner label="Loading..." appearance="inverted" />
<Spinner label="Loading..." size="large" />
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-spinner` from the list.
#### Rendering Spinner without the animated circle
You can directly override the Spinner slot to render a Spinner without the animated circle, as shown below
```js
<Spinner spinner={null} appearance="primary" label="Primary Spinner" />
<Spinner spinner={{style:{visibility: 'hidden'}}} appearance="inverted" label="Inverted Spinner" />
```
### Specification
See [SPEC.md](./SPEC.md).
### Migration Guide
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Spinner implementation.

128
node_modules/@fluentui/react-spinner/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,128 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { Label } from '@fluentui/react-label';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* Render the final JSX of Spinner
*/
export declare const renderSpinner_unstable: (state: SpinnerBaseState) => JSXElement;
/**
* Converged Spinner component for the fluentui repo
*/
export declare const Spinner: ForwardRefComponent<SpinnerProps>;
/**
* Spinner base props, excluding design-related props like appearance and size.
*/
export declare type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;
/**
* Spinner base state, excluding design-related state like appearance and size.
*/
export declare type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;
export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
/**
* @internal
*/
export declare const SpinnerContextProvider: React_2.Provider<SpinnerContextValue | undefined>;
/**
* @internal
*/
export declare type SpinnerContextValue = Pick<SpinnerProps, 'size'>;
/**
* Spinner Props
*/
export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {
/**
* The appearance of the Spinner.
* @default 'primary'
*/
appearance?: 'primary' | 'inverted';
/**
* Time in milliseconds after component mount before spinner is visible.
* @default 0
*/
delay?: number;
/**
* Where the label is positioned relative to the Spinner
* @default 'after'
*/
labelPosition?: 'above' | 'below' | 'before' | 'after';
/**
* The size of the spinner.
* @default 'medium'
*/
size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
};
export declare type SpinnerSlots = {
/**
* The root of the Spinner.
* The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
*/
root: NonNullable<Slot<'div', 'span'>>;
/**
* The animated spinning ring.
*/
spinner?: Slot<'span'>;
/**
* The part of the spinner that rotates.
*/
spinnerTail?: NonNullable<Slot<'span'>>;
/**
* An optional label for the Spinner.
*/
label?: Slot<typeof Label>;
};
/**
* State used in rendering Spinner
*/
export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {
/**
* Should the spinner be rendered in the DOM
*/
shouldRenderSpinner: boolean;
};
/**
* Create the state required to render Spinner.
*
* The returned state can be modified with hooks such as useSpinnerStyles_unstable,
* before being passed to renderSpinner_unstable.
*
* @param props - props from this instance of Spinner
* @param ref - reference to root HTMLElement of Spinner
*/
export declare const useSpinner_unstable: (props: SpinnerProps, ref: React_2.Ref<HTMLElement>) => SpinnerState;
/**
* Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,
* and delay-based visibility logic.
*
* @param props - User provided props to the Spinner component.
* @param ref - User provided ref to be passed to the Spinner component.
*/
export declare const useSpinnerBase_unstable: (props: SpinnerBaseProps, ref: React_2.Ref<HTMLElement>) => SpinnerBaseState;
/**
* @internal
*/
export declare const useSpinnerContext: () => SpinnerContextValue;
/**
* Apply styling to the Spinner slots based on the state
*/
export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
export { }

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Spinner: function() {
return _index.Spinner;
},
renderSpinner_unstable: function() {
return _index.renderSpinner_unstable;
},
spinnerClassNames: function() {
return _index.spinnerClassNames;
},
useSpinnerBase_unstable: function() {
return _index.useSpinnerBase_unstable;
},
useSpinnerStyles_unstable: function() {
return _index.useSpinnerStyles_unstable;
},
useSpinner_unstable: function() {
return _index.useSpinner_unstable;
}
});
const _index = require("./components/Spinner/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type {\n SpinnerBaseProps,\n SpinnerBaseState,\n SpinnerProps,\n SpinnerSlots,\n SpinnerState,\n} from './components/Spinner/index';\nexport {\n Spinner,\n renderSpinner_unstable,\n spinnerClassNames,\n useSpinnerStyles_unstable,\n useSpinner_unstable,\n useSpinnerBase_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable","useSpinnerBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eAGjBG,8BAAuB;;;eAFvBF,gCAAyB;;;eACzBC,0BAAmB;;;uBAEd,6BAA6B"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Spinner", {
enumerable: true,
get: function() {
return Spinner;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSpinner = require("./useSpinner");
const _renderSpinner = require("./renderSpinner");
const _useSpinnerStylesstyles = require("./useSpinnerStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Spinner = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSpinner.useSpinner_unstable)(props, ref);
(0, _useSpinnerStylesstyles.useSpinnerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSpinnerStyles_unstable')(state);
return (0, _renderSpinner.renderSpinner_unstable)(state);
});
Spinner.displayName = 'Spinner';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n\n useSpinnerStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n\n return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","Spinner","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;qCAG1B,kCAAkC;AAKvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQR,+BAAAA,EAAoBM,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOP,qCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* Spinner base state, excluding design-related state like appearance and size.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"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', 'span'>>;\n\n /**\n * The animated spinning ring.\n */\n spinner?: Slot<'span'>;\n\n /**\n * The part of the spinner that rotates.\n */\n spinnerTail?: NonNullable<Slot<'span'>>;\n\n /**\n * An optional label for 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 * Time in milliseconds after component mount before spinner is visible.\n * @default 0\n */\n delay?: number;\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?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {\n /**\n * Should the spinner be rendered in the DOM\n */\n shouldRenderSpinner: boolean;\n };\n\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Spinner: function() {
return _Spinner.Spinner;
},
renderSpinner_unstable: function() {
return _renderSpinner.renderSpinner_unstable;
},
spinnerClassNames: function() {
return _useSpinnerStylesstyles.spinnerClassNames;
},
useSpinnerBase_unstable: function() {
return _useSpinner.useSpinnerBase_unstable;
},
useSpinnerStyles_unstable: function() {
return _useSpinnerStylesstyles.useSpinnerStyles_unstable;
},
useSpinner_unstable: function() {
return _useSpinner.useSpinner_unstable;
}
});
const _Spinner = require("./Spinner");
const _renderSpinner = require("./renderSpinner");
const _useSpinner = require("./useSpinner");
const _useSpinnerStylesstyles = require("./useSpinnerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBG,yCAAiB;;;eADID,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSpinner_unstable", {
enumerable: true,
get: function() {
return renderSpinner_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSpinner_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { labelPosition, shouldRenderSpinner } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {}),
state.spinner && shouldRenderSpinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinner, {
children: state.spinnerTail && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinnerTail, {})
}),
state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\n assertSlots<SpinnerSlots>(state);\n const { labelPosition, shouldRenderSpinner } = state;\n return (\n <state.root>\n {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n <state.label />\n )}\n {state.spinner && shouldRenderSpinner && (\n <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n )}\n {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n <state.label />\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}

View File

@@ -0,0 +1,98 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useSpinnerBase_unstable: function() {
return useSpinnerBase_unstable;
},
useSpinner_unstable: function() {
return useSpinner_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactlabel = require("@fluentui/react-label");
const _SpinnerContext = require("../../contexts/SpinnerContext");
const useSpinner_unstable = (props, ref)=>{
const { size: contextSize } = (0, _SpinnerContext.useSpinnerContext)();
const { appearance = 'primary', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
const baseState = useSpinnerBase_unstable(baseProps, ref);
return {
...baseState,
appearance,
size
};
};
const useSpinnerBase_unstable = (props, ref)=>{
const { delay = 0, labelPosition = 'after' } = props;
const baseId = (0, _reactutilities.useId)('spinner');
const { role = 'progressbar', ...rest } = props;
const nativeRoot = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
role,
...rest
}), {
elementType: 'div'
});
const [isShownAfterDelay, setIsShownAfterDelay] = _react.useState(false);
const [setDelayTimeout, clearDelayTimeout] = (0, _reactutilities.useTimeout)();
_react.useEffect(()=>{
if (delay <= 0) {
return;
}
setDelayTimeout(()=>{
setIsShownAfterDelay(true);
}, delay);
return ()=>{
clearDelayTimeout();
};
}, [
setDelayTimeout,
clearDelayTimeout,
delay
]);
const labelShorthand = _reactutilities.slot.optional(props.label, {
defaultProps: {
id: baseId
},
renderByDefault: false,
elementType: _reactlabel.Label
});
const spinnerShortHand = _reactutilities.slot.optional(props.spinner, {
renderByDefault: true,
elementType: 'span'
});
if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
nativeRoot['aria-labelledby'] = labelShorthand.id;
}
const state = {
delay,
labelPosition,
shouldRenderSpinner: !delay || isShownAfterDelay,
components: {
root: 'div',
spinner: 'span',
spinnerTail: 'span',
label: _reactlabel.Label
},
root: nativeRoot,
spinner: spinnerShortHand,
spinnerTail: _reactutilities.slot.always(props.spinnerTail, {
elementType: 'span'
}),
label: labelShorthand
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,257 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
spinnerClassNames: function() {
return spinnerClassNames;
},
useSpinnerStyles_unstable: function() {
return useSpinnerStyles_unstable;
}
});
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _react = require("@griffel/react");
const spinnerClassNames = {
root: 'fui-Spinner',
spinner: 'fui-Spinner__spinner',
spinnerTail: 'fui-Spinner__spinnerTail',
label: 'fui-Spinner__label'
};
/**
* CSS variables used internally by Spinner
*/ const vars = {
strokeWidth: '--fui-Spinner--strokeWidth'
};
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rpp59a7", null, [
".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"
]);
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
vertical: {
Beiy3e4: "f1vx9l62"
}
}, {
d: [
".f1vx9l62{flex-direction:column;}"
]
});
const useSpinnerBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvgcg50", "r15nd2jo", {
r: [
".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}",
"@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}",
".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}",
"@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"
],
s: [
"@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}",
"@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}",
"@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}",
"@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration:1.8s;}}"
]
});
// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
// The segments are rotated out from behind the mask to expand the visible arc from
// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
// The tail and spinner itself also have 360deg rotation animations for the spin.
const useSpinnerTailBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rxov3xa", "r1o544mv", {
r: [
".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}",
".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
"@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}",
".rxov3xa::before{animation-name:r18vhmn8;}",
"@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}",
".rxov3xa::after{animation-name:rkgrvoi;}",
"@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}",
".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}",
".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
"@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}",
".r1o544mv::before{animation-name:r17whflh;}",
"@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}",
".r1o544mv::after{animation-name:re4odhl;}",
"@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"
],
s: [
"@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}",
"@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"
]
});
const useSpinnerStyles = /*#__PURE__*/ (0, _react.__styles)({
inverted: {
De3pzq: "fr407j0",
sj55zd: "f1f7voed"
},
rtlTail: {
btxmck: "f179dep3",
gb5jj2: "fbz9ihp",
Bdya8wy: "f1pme1qz"
},
"extra-tiny": {
Bqenvij: "fd461yt",
a9b677: "fjw5fx7",
qmp6fs: "f1v3ph3m"
},
tiny: {
Bqenvij: "fjamq6b",
a9b677: "f64fuq3",
qmp6fs: "f1v3ph3m"
},
"extra-small": {
Bqenvij: "frvgh55",
a9b677: "fq4mcun",
qmp6fs: "f1v3ph3m"
},
small: {
Bqenvij: "fxldao9",
a9b677: "f1w9dchk",
qmp6fs: "f1v3ph3m"
},
medium: {
Bqenvij: "f1d2rq10",
a9b677: "f1szoe96",
qmp6fs: "fb52u90"
},
large: {
Bqenvij: "f8ljn23",
a9b677: "fpdz1er",
qmp6fs: "fb52u90"
},
"extra-large": {
Bqenvij: "fbhnoac",
a9b677: "feqmc2u",
qmp6fs: "fb52u90"
},
huge: {
Bqenvij: "f1ft4266",
a9b677: "fksc0bp",
qmp6fs: "fa3u9ii"
}
}, {
d: [
".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}",
".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}",
".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}",
".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}",
".fd461yt{height:16px;}",
".fjw5fx7{width:16px;}",
".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}",
".fjamq6b{height:20px;}",
".f64fuq3{width:20px;}",
".frvgh55{height:24px;}",
".fq4mcun{width:24px;}",
".fxldao9{height:28px;}",
".f1w9dchk{width:28px;}",
".f1d2rq10{height:32px;}",
".f1szoe96{width:32px;}",
".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}",
".f8ljn23{height:36px;}",
".fpdz1er{width:36px;}",
".fbhnoac{height:40px;}",
".feqmc2u{width:40px;}",
".f1ft4266{height:44px;}",
".fksc0bp{width:44px;}",
".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.f1pme1qz{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
]
]
});
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
inverted: {
sj55zd: "fonrgv7"
},
"extra-tiny": {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
tiny: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
"extra-small": {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
small: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
large: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
"extra-large": {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
huge: {
Bahqtrf: "fk6fouc",
Be2twd7: "f1pp30po",
Bhrd7zp: "fl43uef",
Bg96gwp: "f106mvju"
}
}, {
d: [
".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".f106mvju{line-height:var(--lineHeightBase500);}"
]
});
const useSpinnerStyles_unstable = (state)=>{
'use no memo';
const { labelPosition, size, appearance } = state;
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const rootBaseClassName = useRootBaseClassName();
const rootStyles = useRootStyles();
const spinnerBaseClassName = useSpinnerBaseClassName();
const spinnerStyles = useSpinnerStyles();
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
const labelStyles = useLabelStyles();
state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
if (state.spinner) {
state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
}
if (state.spinnerTail) {
state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
}
if (state.label) {
state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,247 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
spinnerClassNames: function() {
return spinnerClassNames;
},
useSpinnerStyles_unstable: function() {
return useSpinnerStyles_unstable;
}
});
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const spinnerClassNames = {
root: 'fui-Spinner',
spinner: 'fui-Spinner__spinner',
spinnerTail: 'fui-Spinner__spinnerTail',
label: 'fui-Spinner__label'
};
/**
* CSS variables used internally by Spinner
*/ const vars = {
strokeWidth: '--fui-Spinner--strokeWidth'
};
const useRootBaseClassName = (0, _react.makeResetStyles)({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: '0',
gap: '8px',
overflow: 'hidden',
minWidth: 'min-content'
});
const useRootStyles = (0, _react.makeStyles)({
vertical: {
flexDirection: 'column'
}
});
const useSpinnerBaseClassName = (0, _react.makeResetStyles)({
position: 'relative',
flexShrink: 0,
// Use a mask to create the ring shape of the spinner.
maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,
backgroundColor: _reacttheme.tokens.colorBrandStroke2Contrast,
color: _reacttheme.tokens.colorBrandStroke1,
'@media screen and (forced-colors: active)': {
backgroundColor: 'HighlightText',
color: 'Highlight',
forcedColorAdjust: 'none'
},
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
animationName: {
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
},
'@media screen and (prefers-reduced-motion: reduce)': {
animationDuration: '1.8s'
}
});
// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
// The segments are rotated out from behind the mask to expand the visible arc from
// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
// The tail and spinner itself also have 360deg rotation animations for the spin.
const useSpinnerTailBaseClassName = (0, _react.makeResetStyles)({
position: 'absolute',
display: 'block',
width: '100%',
height: '100%',
maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
'&::before, &::after': {
content: '""',
position: 'absolute',
display: 'block',
width: '100%',
height: '100%',
animation: 'inherit',
backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'
},
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: _reacttheme.tokens.curveEasyEase,
animationName: {
'0%': {
transform: 'rotate(-135deg)'
},
'50%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(225deg)'
}
},
'&::before': {
animationName: {
'0%': {
transform: 'rotate(0deg)'
},
'50%': {
transform: 'rotate(105deg)'
},
'100%': {
transform: 'rotate(0deg)'
}
}
},
'&::after': {
animationName: {
'0%': {
transform: 'rotate(0deg)'
},
'50%': {
transform: 'rotate(225deg)'
},
'100%': {
transform: 'rotate(0deg)'
}
}
},
'@media screen and (prefers-reduced-motion: reduce)': {
animationIterationCount: '0',
backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',
'&::before, &::after': {
content: 'none'
}
}
});
const useSpinnerStyles = (0, _react.makeStyles)({
inverted: {
backgroundColor: _reacttheme.tokens.colorNeutralStrokeAlpha2,
color: _reacttheme.tokens.colorNeutralStrokeOnBrand2
},
rtlTail: {
maskImage: 'conic-gradient(white 255deg, transparent 255deg)',
'&::before, &::after': {
backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'
},
'@media screen and (prefers-reduced-motion: reduce)': {
backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'
}
},
'extra-tiny': {
height: '16px',
width: '16px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
},
tiny: {
height: '20px',
width: '20px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
},
'extra-small': {
height: '24px',
width: '24px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
},
small: {
height: '28px',
width: '28px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
},
medium: {
height: '32px',
width: '32px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
},
large: {
height: '36px',
width: '36px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
},
'extra-large': {
height: '40px',
width: '40px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
},
huge: {
height: '44px',
width: '44px',
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThickest
}
});
const useLabelStyles = (0, _react.makeStyles)({
inverted: {
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
},
'extra-tiny': {
..._reacttheme.typographyStyles.body1
},
tiny: {
..._reacttheme.typographyStyles.body1
},
'extra-small': {
..._reacttheme.typographyStyles.body1
},
small: {
..._reacttheme.typographyStyles.body1
},
medium: {
..._reacttheme.typographyStyles.subtitle2
},
large: {
..._reacttheme.typographyStyles.subtitle2
},
'extra-large': {
..._reacttheme.typographyStyles.subtitle2
},
huge: {
..._reacttheme.typographyStyles.subtitle1
}
});
const useSpinnerStyles_unstable = (state)=>{
'use no memo';
const { labelPosition, size, appearance } = state;
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const rootBaseClassName = useRootBaseClassName();
const rootStyles = useRootStyles();
const spinnerBaseClassName = useSpinnerBaseClassName();
const spinnerStyles = useSpinnerStyles();
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
const labelStyles = useLabelStyles();
state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
if (state.spinner) {
state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
}
if (state.spinnerTail) {
state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
}
if (state.label) {
state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,28 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SpinnerContextProvider: function() {
return SpinnerContextProvider;
},
useSpinnerContext: function() {
return useSpinnerContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const SpinnerContext = /*#__PURE__*/ _react.createContext(undefined);
const SpinnerContextDefaultValue = {};
const SpinnerContextProvider = SpinnerContext.Provider;
const useSpinnerContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(SpinnerContext)) !== null && _React_useContext !== void 0 ? _React_useContext : SpinnerContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/**\n * @internal\n */\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/**\n * @internal\n */\nexport const useSpinnerContext = (): SpinnerContextValue =>\n React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;0BAiBaK;;;qBAKAE;;;;;iEApBU,QAAQ;AAG/B,MAAMN,+BAAiBD,OAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAKlD,MAAMC,yBAAyBJ,eAAeK,QAAQ,CAAC;AAKvD,MAAMC,oBAAoB;QAC/BP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,eAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAoCI;EAA2B"}

View File

@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SpinnerContextProvider: function() {
return _SpinnerContext.SpinnerContextProvider;
},
useSpinnerContext: function() {
return _SpinnerContext.useSpinnerContext;
}
});
const _SpinnerContext = require("./SpinnerContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SpinnerContextValue } from './SpinnerContext';\nexport { SpinnerContextProvider, useSpinnerContext } from './SpinnerContext';\n"],"names":["SpinnerContextProvider","useSpinnerContext"],"mappings":";;;;;;;;;;;;eACSA,sCAAsB;;;eAAEC,iCAAiB;;;gCAAQ,mBAAmB"}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Spinner: function() {
return _Spinner.Spinner;
},
SpinnerContextProvider: function() {
return _index.SpinnerContextProvider;
},
renderSpinner_unstable: function() {
return _Spinner.renderSpinner_unstable;
},
spinnerClassNames: function() {
return _Spinner.spinnerClassNames;
},
useSpinnerBase_unstable: function() {
return _Spinner.useSpinnerBase_unstable;
},
useSpinnerContext: function() {
return _index.useSpinnerContext;
},
useSpinnerStyles_unstable: function() {
return _Spinner.useSpinnerStyles_unstable;
},
useSpinner_unstable: function() {
return _Spinner.useSpinner_unstable;
}
});
const _Spinner = require("./Spinner");
const _index = require("./contexts/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Spinner,\n spinnerClassNames,\n renderSpinner_unstable,\n useSpinner_unstable,\n useSpinnerStyles_unstable,\n useSpinnerBase_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState, SpinnerBaseProps, SpinnerBaseState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","useSpinnerBase_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":";;;;;;;;;;;IACEA;+BAAO;;IAQAM;4CAAsB;;;eAN7BJ,+BAAsB;;;eADtBD,0BAAiB;;;eAIjBI,gCAAuB;;;eAGQE,wBAAiB;;;eAJhDH,kCAAyB;;;eADzBD,4BAAmB;;;yBAGd,YAAY;uBAEuC,mBAAmB"}

1
node_modules/@fluentui/react-spinner/lib/Spinner.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Spinner, renderSpinner_unstable, spinnerClassNames, useSpinnerStyles_unstable, useSpinner_unstable, useSpinnerBase_unstable } from './components/Spinner/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type {\n SpinnerBaseProps,\n SpinnerBaseState,\n SpinnerProps,\n SpinnerSlots,\n SpinnerState,\n} from './components/Spinner/index';\nexport {\n Spinner,\n renderSpinner_unstable,\n spinnerClassNames,\n useSpinnerStyles_unstable,\n useSpinner_unstable,\n useSpinnerBase_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable","useSpinnerBase_unstable"],"mappings":"AAOA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useSpinner_unstable } from './useSpinner';
import { renderSpinner_unstable } from './renderSpinner';
import { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Converged Spinner component for the fluentui repo
*/ export const Spinner = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSpinner_unstable(props, ref);
useSpinnerStyles_unstable(state);
useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);
return renderSpinner_unstable(state);
});
Spinner.displayName = 'Spinner';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n const state = useSpinner_unstable(props, ref);\n\n useSpinnerStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n\n return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","Spinner","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQR,oBAAoBM,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOP,uBAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* Spinner base state, excluding design-related state like appearance and size.
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"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', 'span'>>;\n\n /**\n * The animated spinning ring.\n */\n spinner?: Slot<'span'>;\n\n /**\n * The part of the spinner that rotates.\n */\n spinnerTail?: NonNullable<Slot<'span'>>;\n\n /**\n * An optional label for 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 * Time in milliseconds after component mount before spinner is visible.\n * @default 0\n */\n delay?: number;\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?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {\n /**\n * Should the spinner be rendered in the DOM\n */\n shouldRenderSpinner: boolean;\n };\n\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}

View File

@@ -0,0 +1,4 @@
export { Spinner } from './Spinner';
export { renderSpinner_unstable } from './renderSpinner';
export { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';
export { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe;AAC5E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

View File

@@ -0,0 +1,17 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of Spinner
*/ export const renderSpinner_unstable = (state)=>{
assertSlots(state);
const { labelPosition, shouldRenderSpinner } = state;
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ _jsx(state.label, {}),
state.spinner && shouldRenderSpinner && /*#__PURE__*/ _jsx(state.spinner, {
children: state.spinnerTail && /*#__PURE__*/ _jsx(state.spinnerTail, {})
}),
state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ _jsx(state.label, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\n assertSlots<SpinnerSlots>(state);\n const { labelPosition, shouldRenderSpinner } = state;\n return (\n <state.root>\n {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n <state.label />\n )}\n {state.spinner && shouldRenderSpinner && (\n <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n )}\n {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n <state.label />\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAEbJ,MAAMK,OAAO,IAAIH,qCAChB,KAACF,MAAMK,OAAO;0BAAEL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}

View File

@@ -0,0 +1,93 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';
import { Label } from '@fluentui/react-label';
import { useSpinnerContext } from '../../contexts/SpinnerContext';
/**
* Create the state required to render Spinner.
*
* The returned state can be modified with hooks such as useSpinnerStyles_unstable,
* before being passed to renderSpinner_unstable.
*
* @param props - props from this instance of Spinner
* @param ref - reference to root HTMLElement of Spinner
*/ export const useSpinner_unstable = (props, ref)=>{
const { size: contextSize } = useSpinnerContext();
const { appearance = 'primary', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
const baseState = useSpinnerBase_unstable(baseProps, ref);
return {
...baseState,
appearance,
size
};
};
/**
* Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,
* and delay-based visibility logic.
*
* @param props - User provided props to the Spinner component.
* @param ref - User provided ref to be passed to the Spinner component.
*/ export const useSpinnerBase_unstable = (props, ref)=>{
const { delay = 0, labelPosition = 'after' } = props;
const baseId = useId('spinner');
const { role = 'progressbar', ...rest } = props;
const nativeRoot = slot.always(getIntrinsicElementProps('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
role,
...rest
}), {
elementType: 'div'
});
const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);
const [setDelayTimeout, clearDelayTimeout] = useTimeout();
React.useEffect(()=>{
if (delay <= 0) {
return;
}
setDelayTimeout(()=>{
setIsShownAfterDelay(true);
}, delay);
return ()=>{
clearDelayTimeout();
};
}, [
setDelayTimeout,
clearDelayTimeout,
delay
]);
const labelShorthand = slot.optional(props.label, {
defaultProps: {
id: baseId
},
renderByDefault: false,
elementType: Label
});
const spinnerShortHand = slot.optional(props.spinner, {
renderByDefault: true,
elementType: 'span'
});
if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
nativeRoot['aria-labelledby'] = labelShorthand.id;
}
const state = {
delay,
labelPosition,
shouldRenderSpinner: !delay || isShownAfterDelay,
components: {
root: 'div',
spinner: 'span',
spinnerTail: 'span',
label: Label
},
root: nativeRoot,
spinner: spinnerShortHand,
spinnerTail: slot.always(props.spinnerTail, {
elementType: 'span'
}),
label: labelShorthand
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,180 @@
'use client';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
export const spinnerClassNames = {
root: 'fui-Spinner',
spinner: 'fui-Spinner__spinner',
spinnerTail: 'fui-Spinner__spinnerTail',
label: 'fui-Spinner__label'
};
/**
* CSS variables used internally by Spinner
*/
const vars = {
strokeWidth: '--fui-Spinner--strokeWidth'
};
const useRootBaseClassName = /*#__PURE__*/__resetStyles("rpp59a7", null, [".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"]);
const useRootStyles = /*#__PURE__*/__styles({
vertical: {
Beiy3e4: "f1vx9l62"
}
}, {
d: [".f1vx9l62{flex-direction:column;}"]
});
const useSpinnerBaseClassName = /*#__PURE__*/__resetStyles("rvgcg50", "r15nd2jo", {
r: [".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}", "@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}", ".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}", "@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"],
s: ["@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}", "@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration:1.8s;}}"]
});
// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
// The segments are rotated out from behind the mask to expand the visible arc from
// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
// The tail and spinner itself also have 360deg rotation animations for the spin.
const useSpinnerTailBaseClassName = /*#__PURE__*/__resetStyles("rxov3xa", "r1o544mv", {
r: [".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}", ".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}", ".rxov3xa::before{animation-name:r18vhmn8;}", "@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}", ".rxov3xa::after{animation-name:rkgrvoi;}", "@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}", ".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}", ".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}", ".r1o544mv::before{animation-name:r17whflh;}", "@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}", ".r1o544mv::after{animation-name:re4odhl;}", "@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"],
s: ["@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"]
});
const useSpinnerStyles = /*#__PURE__*/__styles({
inverted: {
De3pzq: "fr407j0",
sj55zd: "f1f7voed"
},
rtlTail: {
btxmck: "f179dep3",
gb5jj2: "fbz9ihp",
Bdya8wy: "f1pme1qz"
},
"extra-tiny": {
Bqenvij: "fd461yt",
a9b677: "fjw5fx7",
qmp6fs: "f1v3ph3m"
},
tiny: {
Bqenvij: "fjamq6b",
a9b677: "f64fuq3",
qmp6fs: "f1v3ph3m"
},
"extra-small": {
Bqenvij: "frvgh55",
a9b677: "fq4mcun",
qmp6fs: "f1v3ph3m"
},
small: {
Bqenvij: "fxldao9",
a9b677: "f1w9dchk",
qmp6fs: "f1v3ph3m"
},
medium: {
Bqenvij: "f1d2rq10",
a9b677: "f1szoe96",
qmp6fs: "fb52u90"
},
large: {
Bqenvij: "f8ljn23",
a9b677: "fpdz1er",
qmp6fs: "fb52u90"
},
"extra-large": {
Bqenvij: "fbhnoac",
a9b677: "feqmc2u",
qmp6fs: "fb52u90"
},
huge: {
Bqenvij: "f1ft4266",
a9b677: "fksc0bp",
qmp6fs: "fa3u9ii"
}
}, {
d: [".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}", ".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}", ".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}", ".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".fxldao9{height:28px;}", ".f1w9dchk{width:28px;}", ".f1d2rq10{height:32px;}", ".f1szoe96{width:32px;}", ".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}", ".f8ljn23{height:36px;}", ".fpdz1er{width:36px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".f1ft4266{height:44px;}", ".fksc0bp{width:44px;}", ".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}"],
m: [["@media screen and (prefers-reduced-motion: reduce){.f1pme1qz{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}]]
});
const useLabelStyles = /*#__PURE__*/__styles({
inverted: {
sj55zd: "fonrgv7"
},
"extra-tiny": {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
tiny: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
"extra-small": {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
small: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
large: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
"extra-large": {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
huge: {
Bahqtrf: "fk6fouc",
Be2twd7: "f1pp30po",
Bhrd7zp: "fl43uef",
Bg96gwp: "f106mvju"
}
}, {
d: [".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
});
/**
* Apply styling to the Spinner slots based on the state
*/
export const useSpinnerStyles_unstable = state => {
'use no memo';
const {
labelPosition,
size,
appearance
} = state;
const {
dir
} = useFluent();
const rootBaseClassName = useRootBaseClassName();
const rootStyles = useRootStyles();
const spinnerBaseClassName = useSpinnerBaseClassName();
const spinnerStyles = useSpinnerStyles();
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
const labelStyles = useLabelStyles();
state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
if (state.spinner) {
state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
}
if (state.spinnerTail) {
state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
}
if (state.label) {
state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,231 @@
'use client';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
export const spinnerClassNames = {
root: 'fui-Spinner',
spinner: 'fui-Spinner__spinner',
spinnerTail: 'fui-Spinner__spinnerTail',
label: 'fui-Spinner__label'
};
/**
* CSS variables used internally by Spinner
*/ const vars = {
strokeWidth: '--fui-Spinner--strokeWidth'
};
const useRootBaseClassName = makeResetStyles({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: '0',
gap: '8px',
overflow: 'hidden',
minWidth: 'min-content'
});
const useRootStyles = makeStyles({
vertical: {
flexDirection: 'column'
}
});
const useSpinnerBaseClassName = makeResetStyles({
position: 'relative',
flexShrink: 0,
// Use a mask to create the ring shape of the spinner.
maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,
backgroundColor: tokens.colorBrandStroke2Contrast,
color: tokens.colorBrandStroke1,
'@media screen and (forced-colors: active)': {
backgroundColor: 'HighlightText',
color: 'Highlight',
forcedColorAdjust: 'none'
},
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
animationName: {
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
},
'@media screen and (prefers-reduced-motion: reduce)': {
animationDuration: '1.8s'
}
});
// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
// The segments are rotated out from behind the mask to expand the visible arc from
// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
// The tail and spinner itself also have 360deg rotation animations for the spin.
const useSpinnerTailBaseClassName = makeResetStyles({
position: 'absolute',
display: 'block',
width: '100%',
height: '100%',
maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
'&::before, &::after': {
content: '""',
position: 'absolute',
display: 'block',
width: '100%',
height: '100%',
animation: 'inherit',
backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'
},
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: tokens.curveEasyEase,
animationName: {
'0%': {
transform: 'rotate(-135deg)'
},
'50%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(225deg)'
}
},
'&::before': {
animationName: {
'0%': {
transform: 'rotate(0deg)'
},
'50%': {
transform: 'rotate(105deg)'
},
'100%': {
transform: 'rotate(0deg)'
}
}
},
'&::after': {
animationName: {
'0%': {
transform: 'rotate(0deg)'
},
'50%': {
transform: 'rotate(225deg)'
},
'100%': {
transform: 'rotate(0deg)'
}
}
},
'@media screen and (prefers-reduced-motion: reduce)': {
animationIterationCount: '0',
backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',
'&::before, &::after': {
content: 'none'
}
}
});
const useSpinnerStyles = makeStyles({
inverted: {
backgroundColor: tokens.colorNeutralStrokeAlpha2,
color: tokens.colorNeutralStrokeOnBrand2
},
rtlTail: {
maskImage: 'conic-gradient(white 255deg, transparent 255deg)',
'&::before, &::after': {
backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'
},
'@media screen and (prefers-reduced-motion: reduce)': {
backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'
}
},
'extra-tiny': {
height: '16px',
width: '16px',
[vars.strokeWidth]: tokens.strokeWidthThick
},
tiny: {
height: '20px',
width: '20px',
[vars.strokeWidth]: tokens.strokeWidthThick
},
'extra-small': {
height: '24px',
width: '24px',
[vars.strokeWidth]: tokens.strokeWidthThick
},
small: {
height: '28px',
width: '28px',
[vars.strokeWidth]: tokens.strokeWidthThick
},
medium: {
height: '32px',
width: '32px',
[vars.strokeWidth]: tokens.strokeWidthThicker
},
large: {
height: '36px',
width: '36px',
[vars.strokeWidth]: tokens.strokeWidthThicker
},
'extra-large': {
height: '40px',
width: '40px',
[vars.strokeWidth]: tokens.strokeWidthThicker
},
huge: {
height: '44px',
width: '44px',
[vars.strokeWidth]: tokens.strokeWidthThickest
}
});
const useLabelStyles = makeStyles({
inverted: {
color: tokens.colorNeutralForegroundStaticInverted
},
'extra-tiny': {
...typographyStyles.body1
},
tiny: {
...typographyStyles.body1
},
'extra-small': {
...typographyStyles.body1
},
small: {
...typographyStyles.body1
},
medium: {
...typographyStyles.subtitle2
},
large: {
...typographyStyles.subtitle2
},
'extra-large': {
...typographyStyles.subtitle2
},
huge: {
...typographyStyles.subtitle1
}
});
/**
* Apply styling to the Spinner slots based on the state
*/ export const useSpinnerStyles_unstable = (state)=>{
'use no memo';
const { labelPosition, size, appearance } = state;
const { dir } = useFluent();
const rootBaseClassName = useRootBaseClassName();
const rootStyles = useRootStyles();
const spinnerBaseClassName = useSpinnerBaseClassName();
const spinnerStyles = useSpinnerStyles();
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
const labelStyles = useLabelStyles();
state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
if (state.spinner) {
state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
}
if (state.spinnerTail) {
state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
}
if (state.label) {
state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,13 @@
'use client';
import * as React from 'react';
const SpinnerContext = React.createContext(undefined);
const SpinnerContextDefaultValue = {};
/**
* @internal
*/ export const SpinnerContextProvider = SpinnerContext.Provider;
/**
* @internal
*/ export const useSpinnerContext = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(SpinnerContext)) !== null && _React_useContext !== void 0 ? _React_useContext : SpinnerContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/**\n * @internal\n */\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/**\n * @internal\n */\nexport const useSpinnerContext = (): SpinnerContextValue =>\n React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,iBAAiBD,MAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAEzD;;CAEC,GACD,OAAO,MAAMC,yBAAyBJ,eAAeK,QAAQ,CAAC;AAE9D;;CAEC,GACD,OAAO,MAAMC,oBAAoB;QAC/BP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,6BAAjBD,+BAAAA,oBAAoCI;EAA2B"}

View File

@@ -0,0 +1 @@
export { SpinnerContextProvider, useSpinnerContext } from './SpinnerContext';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SpinnerContextValue } from './SpinnerContext';\nexport { SpinnerContextProvider, useSpinnerContext } from './SpinnerContext';\n"],"names":["SpinnerContextProvider","useSpinnerContext"],"mappings":"AACA,SAASA,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}

2
node_modules/@fluentui/react-spinner/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,2 @@
export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, useSpinnerBase_unstable } from './Spinner';
export { SpinnerContextProvider, useSpinnerContext } from './contexts/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Spinner,\n spinnerClassNames,\n renderSpinner_unstable,\n useSpinner_unstable,\n useSpinnerStyles_unstable,\n useSpinnerBase_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState, SpinnerBaseProps, SpinnerBaseState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","useSpinnerBase_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,EACzBC,uBAAuB,QAClB,YAAY;AAEnB,SAASC,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}

50
node_modules/@fluentui/react-spinner/package.json generated vendored Normal file
View File

@@ -0,0 +1,50 @@
{
"name": "@fluentui/react-spinner",
"version": "9.8.1",
"description": "Spinner component for Fluent UI React",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "./dist/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"dependencies": {
"@fluentui/react-jsx-runtime": "^9.4.1",
"@fluentui/react-label": "^9.4.0",
"@fluentui/react-shared-contexts": "^9.26.2",
"@fluentui/react-theme": "^9.2.1",
"@fluentui/react-utilities": "^9.26.2",
"@griffel/react": "^1.5.32",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <20.0.0",
"@types/react-dom": ">=16.9.0 <20.0.0",
"react": ">=16.14.0 <20.0.0",
"react-dom": ">=16.14.0 <20.0.0"
},
"beachball": {
"disallowedChangeTypes": [
"major",
"prerelease"
]
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./lib-commonjs/index.js",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
},
"./package.json": "./package.json"
},
"files": [
"*.md",
"dist/*.d.ts",
"lib",
"lib-commonjs"
]
}