Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+28
View File
@@ -0,0 +1,28 @@
"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;
},
useSpinnerStyles_unstable: function() {
return _index.useSpinnerStyles_unstable;
},
useSpinner_unstable: function() {
return _index.useSpinner_unstable;
}
});
const _index = require("./components/Spinner/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n Spinner,\n renderSpinner_unstable,\n spinnerClassNames,\n useSpinnerStyles_unstable,\n useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,OAAO;eAAPA,cAAO;;IACPC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,mBAAmB;eAAnBA,0BAAmB;;;uBACd"}
@@ -0,0 +1,23 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.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":["Spinner","React","forwardRef","props","ref","state","useSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","renderSpinner_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;4BACa;+BACG;wCACG;qCAGE;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAE1BG,IAAAA,gDAAAA,EAA4B,6BAA6BH;IAEzD,OAAOI,IAAAA,qCAAAA,EAAuBJ;AAChC;AAEAL,QAAQU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering Spinner
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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 * 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"],"names":[],"rangeMappings":";;","mappings":"AAuDA;;CAEC"}
@@ -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 _Spinner.Spinner;
},
renderSpinner_unstable: function() {
return _renderSpinner.renderSpinner_unstable;
},
spinnerClassNames: function() {
return _useSpinnerStylesstyles.spinnerClassNames;
},
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");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,OAAO;eAAPA,gBAAO;;IAEPC,sBAAsB;eAAtBA,qCAAsB;;IAEtBC,iBAAiB;eAAjBA,yCAAiB;;IAAEC,yBAAyB;eAAzBA,iDAAyB;;IAD5CC,mBAAmB;eAAnBA,+BAAmB;;;yBAHJ;+BAEe;4BACH;wCACyB"}
@@ -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, {})
]
});
};
@@ -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 { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\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":["renderSpinner_unstable","state","assertSlots","labelPosition","shouldRenderSpinner","_jsxs","root","label","_jsx","spinner","spinnerTail"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,yBAAyB,CAACC;IACrCC,IAAAA,2BAAAA,EAA0BD;IAC1B,MAAM,EAAEE,aAAa,EAAEC,mBAAmB,EAAE,GAAGH;IAC/C,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRL,MAAMM,KAAK,IAAIH,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,KAAO,WAAA,GAC5FK,IAAAA,eAAA,EAACP,MAAMM,KAAK,EAAA,CAAA;YAEbN,MAAMQ,OAAO,IAAIL,uBAAAA,WAAAA,GAChBI,IAAAA,eAAA,EAACP,MAAMQ,OAAO,EAAA;0BAAER,MAAMS,WAAW,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACP,MAAMS,WAAW,EAAA,CAAA;;YAExDT,MAAMM,KAAK,IAAIH,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,KAAM,WAAA,GAC3FK,IAAAA,eAAA,EAACP,MAAMM,KAAK,EAAA,CAAA;;;AAIpB"}
@@ -0,0 +1,85 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSpinner_unstable", {
enumerable: true,
get: 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)=>{
// Props
const { size: contextSize } = (0, _SpinnerContext.useSpinnerContext)();
const { appearance = 'primary', labelPosition = 'after', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', delay = 0 } = 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
}, [
'size'
]), {
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 = {
appearance,
delay,
labelPosition,
size,
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;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n // Props\n const { size: contextSize } = useSpinnerContext();\n const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;\n const baseId = useId('spinner');\n\n const { role = 'progressbar', ...rest } = props;\n const nativeRoot = slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role,\n ...rest,\n },\n ['size'],\n ),\n {\n elementType: 'div',\n },\n );\n const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n React.useEffect(() => {\n if (delay <= 0) {\n return;\n }\n setDelayTimeout(() => {\n setIsShownAfterDelay(true);\n }, delay);\n return () => {\n clearDelayTimeout();\n };\n }, [setDelayTimeout, clearDelayTimeout, delay]);\n const labelShorthand = slot.optional(props.label, {\n defaultProps: { id: baseId },\n renderByDefault: false,\n elementType: Label,\n });\n const spinnerShortHand = slot.optional(props.spinner, {\n renderByDefault: true,\n elementType: 'span',\n });\n if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n nativeRoot['aria-labelledby'] = labelShorthand.id;\n }\n const state: SpinnerState = {\n appearance,\n delay,\n labelPosition,\n size,\n shouldRenderSpinner: !delay || isShownAfterDelay,\n components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },\n root: nativeRoot,\n spinner: spinnerShortHand,\n spinnerTail: slot.always(props.spinnerTail, { elementType: 'span' }),\n label: labelShorthand,\n };\n return state;\n};\n"],"names":["useSpinner_unstable","props","ref","size","contextSize","useSpinnerContext","appearance","labelPosition","delay","baseId","useId","role","rest","nativeRoot","slot","always","getIntrinsicElementProps","elementType","isShownAfterDelay","setIsShownAfterDelay","React","useState","setDelayTimeout","clearDelayTimeout","useTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","Label","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCAC2C;4BAE5C;gCACY;AAW3B,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,iCAAAA;IAC9B,MAAM,EAAEC,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEJ,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAEI,QAAQ,CAAC,EAAE,GAAGP;IACvG,MAAMQ,SAASC,IAAAA,qBAAAA,EAAM;IAErB,MAAM,EAAEC,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGX;IAC1C,MAAMY,aAAaC,oBAAAA,CAAKC,MAAM,CAC5BC,IAAAA,wCAAAA,EACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5Fd,KAAKA;QACLS;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEK,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGC,IAAAA,0BAAAA;IAC7CJ,OAAMK,SAAS,CAAC;QACd,IAAIjB,SAAS,GAAG;YACd;QACF;QACAc,gBAAgB;YACdH,qBAAqB;QACvB,GAAGX;QACH,OAAO;YACLe;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBf;KAAM;IAC9C,MAAMkB,iBAAiBZ,oBAAAA,CAAKa,QAAQ,CAAC1B,MAAM2B,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIrB;QAAO;QAC3BsB,iBAAiB;QACjBd,aAAae,iBAAAA;IACf;IACA,MAAMC,mBAAmBnB,oBAAAA,CAAKa,QAAQ,CAAC1B,MAAMiC,OAAO,EAAE;QACpDH,iBAAiB;QACjBd,aAAa;IACf;IACA,IAAIS,kBAAkBb,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGa,eAAeI,EAAE;IACnD;IACA,MAAMK,QAAsB;QAC1B7B;QACAE;QACAD;QACAJ;QACAiC,qBAAqB,CAAC5B,SAASU;QAC/BmB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQX,OAAOI,iBAAAA;QAAM;QAC9EM,MAAMzB;QACNqB,SAASD;QACTM,aAAazB,oBAAAA,CAAKC,MAAM,CAACd,MAAMsC,WAAW,EAAE;YAAEtB,aAAa;QAAO;QAClEW,OAAOF;IACT;IACA,OAAOS;AACT"}
@@ -0,0 +1,256 @@
"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)("r82apo5", null, [
".r82apo5{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;}"
]);
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",
Br2kee7: "f1wkkxo7"
},
"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){.f1wkkxo7{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
@@ -0,0 +1,27 @@
"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;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * 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 = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["SpinnerContextProvider","useSpinnerContext","SpinnerContext","React","createContext","undefined","SpinnerContextDefaultValue","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeaA,sBAAAA;eAAAA;;IAKAC,iBAAAA;eAAAA;;;;iEApBU;AAGvB,MAAMC,+BAAiBC,OAAMC,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAKlD,MAAMN,yBAAyBE,eAAeK,QAAQ;AAKtD,MAAMN,oBAAoB;QAAME;WAAAA,CAAAA,oBAAAA,OAAMK,UAAU,CAACN,eAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAoCG;AAAyB"}
+19
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");
@@ -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"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,sBAAsB;eAAtBA,sCAAsB;;IAAEC,iBAAiB;eAAjBA,iCAAiB;;;gCAAQ"}
+35
View File
@@ -0,0 +1,35 @@
"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;
},
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");
+1
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} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","SpinnerContextProvider","renderSpinner_unstable","spinnerClassNames","useSpinnerContext","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,OAAO;eAAPA,gBAAO;;IAOAC,sBAAsB;eAAtBA,6BAAsB;;IAL7BC,sBAAsB;eAAtBA,+BAAsB;;IADtBC,iBAAiB;eAAjBA,0BAAiB;;IAMcC,iBAAiB;eAAjBA,wBAAiB;;IAHhDC,yBAAyB;eAAzBA,kCAAyB;;IADzBC,mBAAmB;eAAnBA,4BAAmB;;;yBAEd;uBAEmD"}