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
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-skeleton
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
+11
View File
@@ -0,0 +1,11 @@
# @fluentui/react-skeleton
**React Skeleton components for [Fluent UI React](https://react.fluentui.dev/)**
## Usage
To import `Skeleton`:
```js
import { Skeleton, SkeletonItem } from '@fluentui/react-components';
```
+151
View File
@@ -0,0 +1,151 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
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 Skeleton
*/
export declare const renderSkeleton_unstable: (state: SkeletonState, contextValues: SkeletonContextValues) => JSX.Element;
/**
* Render the final JSX of SkeletonItem
*/
export declare const renderSkeletonItem_unstable: (state: SkeletonItemState) => JSX.Element;
/**
* Skeleton component - TODO: add more docs
*/
export declare const Skeleton: ForwardRefComponent<SkeletonProps>;
export declare const skeletonClassNames: SlotClassNames<SkeletonSlots>;
export declare const SkeletonContextProvider: React_2.Provider<SkeletonContextValue | undefined>;
export declare interface SkeletonContextValue {
animation?: 'wave' | 'pulse';
appearance?: 'opaque' | 'translucent';
}
declare type SkeletonContextValues = {
skeletonGroup: SkeletonContextValue;
};
export declare const SkeletonItem: ForwardRefComponent<SkeletonItemProps>;
export declare const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots>;
/**
* SkeletonItem Props
*/
export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {
/**
* Sets the animation of the SkeletonItem
* @default wave
*/
animation?: 'wave' | 'pulse';
/**
* Sets the appearance of the SkeletonItem
* @default opaque
*/
appearance?: 'opaque' | 'translucent';
/**
* Sets the size of the SkeletonItem in pixels.
* Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).
* To set a non-supported size, set `width` and `height` to override the rendered size.
* @default 16
*/
size?: SkeletonItemSize;
/**
* Sets the shape of the SkeletonItem.
* @default rectangle
*/
shape?: 'circle' | 'square' | 'rectangle';
};
/**
* Sizes for the SkeletonItem
*/
declare type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
export declare type SkeletonItemSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering SkeletonItem
*/
export declare type SkeletonItemState = ComponentState<SkeletonItemSlots> & Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;
/**
* Skeleton Props
*/
export declare type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {
/**
* The animation type for the Skeleton
* @defaultValue wave
*/
animation?: 'wave' | 'pulse';
/**
* Sets the appearance of the Skeleton.
* @defaultValue opaque
*/
appearance?: 'opaque' | 'translucent';
/**
* Sets the width value of the skeleton wrapper.
* @defaultValue 100%
* @deprecated Use `className` prop to set width
*/
width?: number | string;
};
export declare type SkeletonSlots = {
/**
* The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`
* and any data that the `Skeleton` will load. The default html element is a `div`.
*/
root: NonNullable<Slot<'div'>>;
};
/**
* State used in rendering Skeleton
*/
export declare type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>>;
/**
* Create the state required to render Skeleton.
*
* The returned state can be modified with hooks such as useSkeletonStyles_unstable,
* before being passed to renderSkeleton_unstable.
*
* @param props - props from this instance of Skeleton
* @param ref - reference to root HTMLElement of Skeleton
*/
export declare const useSkeleton_unstable: (props: SkeletonProps, ref: React_2.Ref<HTMLElement>) => SkeletonState;
export declare const useSkeletonContext: () => SkeletonContextValue;
/**
* Create the state required to render SkeletonItem.
*
* The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,
* before being passed to renderSkeletonItem_unstable.
*
* @param props - props from this instance of SkeletonItem
* @param ref - reference to root HTMLElement of SkeletonItem
*/
export declare const useSkeletonItem_unstable: (props: SkeletonItemProps, ref: React_2.Ref<HTMLElement>) => SkeletonItemState;
/**
* Apply styling to the SkeletonItem slots based on the state
*/
export declare const useSkeletonItemStyles_unstable: (state: SkeletonItemState) => SkeletonItemState;
/**
* Apply styling to the Skeleton slots based on the state
*/
export declare const useSkeletonStyles_unstable: (state: SkeletonState) => SkeletonState;
export { }
+31
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, {
Skeleton: function() {
return _index.Skeleton;
},
renderSkeleton_unstable: function() {
return _index.renderSkeleton_unstable;
},
skeletonClassNames: function() {
return _index.skeletonClassNames;
},
useSkeletonContextValues: function() {
return _index.useSkeletonContextValues;
},
useSkeletonStyles_unstable: function() {
return _index.useSkeletonStyles_unstable;
},
useSkeleton_unstable: function() {
return _index.useSkeleton_unstable;
}
});
const _index = require("./components/Skeleton/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type { SkeletonContextValues, SkeletonProps, SkeletonSlots, SkeletonState } from './components/Skeleton/index';\nexport {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n} from './components/Skeleton/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,QAAQ;eAARA,eAAQ;;IACRC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,oBAAoB;eAApBA,2BAAoB;;;uBACf"}
+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, {
SkeletonItem: function() {
return _index.SkeletonItem;
},
renderSkeletonItem_unstable: function() {
return _index.renderSkeletonItem_unstable;
},
skeletonItemClassNames: function() {
return _index.skeletonItemClassNames;
},
useSkeletonItemStyles_unstable: function() {
return _index.useSkeletonItemStyles_unstable;
},
useSkeletonItem_unstable: function() {
return _index.useSkeletonItem_unstable;
}
});
const _index = require("./components/SkeletonItem/index");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {\n SkeletonItemProps,\n SkeletonItemSize,\n SkeletonItemSlots,\n SkeletonItemState,\n} from './components/SkeletonItem/index';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n} from './components/SkeletonItem/index';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,YAAY;eAAZA,mBAAY;;IACZC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,8BAA8B;eAA9BA,qCAA8B;;IAC9BC,wBAAwB;eAAxBA,+BAAwB;;;uBACnB"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Skeleton", {
enumerable: true,
get: function() {
return Skeleton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSkeleton = require("./useSkeleton");
const _renderSkeleton = require("./renderSkeleton");
const _useSkeletonStylesstyles = require("./useSkeletonStyles.styles");
const _useSkeletonContextValues = require("./useSkeletonContextValues");
const Skeleton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSkeleton.useSkeleton_unstable)(props, ref);
const contextValues = (0, _useSkeletonContextValues.useSkeletonContextValues)(state);
(0, _useSkeletonStylesstyles.useSkeletonStyles_unstable)(state);
return (0, _renderSkeleton.renderSkeleton_unstable)(state, contextValues);
});
Skeleton.displayName = 'Skeleton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["Skeleton","React","forwardRef","props","ref","state","useSkeleton_unstable","contextValues","useSkeletonContextValues","useSkeletonStyles_unstable","renderSkeleton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACc;gCACG;yCACG;0CACF;AAOlC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAC3B,OAAOK,IAAAA,uCAAAA,EAAwBL,OAAOE;AACxC;AAEAP,SAASW,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering Skeleton
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/Skeleton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SkeletonContextValue } from '../../contexts/index';\n\nexport type SkeletonSlots = {\n /**\n * The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`\n * and any data that the `Skeleton` will load. The default html element is a `div`.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Skeleton Props\n */\nexport type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {\n /**\n * The animation type for the Skeleton\n * @defaultValue wave\n */\n animation?: 'wave' | 'pulse';\n\n /**\n * Sets the appearance of the Skeleton.\n * @defaultValue opaque\n */\n appearance?: 'opaque' | 'translucent';\n\n /**\n * Sets the width value of the skeleton wrapper.\n * @defaultValue 100%\n * @deprecated Use `className` prop to set width\n */\n width?: number | string;\n};\n\nexport type SkeletonContextValues = {\n skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAuCA;;CAEC"}
@@ -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, {
Skeleton: function() {
return _Skeleton.Skeleton;
},
renderSkeleton_unstable: function() {
return _renderSkeleton.renderSkeleton_unstable;
},
skeletonClassNames: function() {
return _useSkeletonStylesstyles.skeletonClassNames;
},
useSkeletonContextValues: function() {
return _useSkeletonContextValues.useSkeletonContextValues;
},
useSkeletonStyles_unstable: function() {
return _useSkeletonStylesstyles.useSkeletonStyles_unstable;
},
useSkeleton_unstable: function() {
return _useSkeleton.useSkeleton_unstable;
}
});
const _Skeleton = require("./Skeleton");
const _renderSkeleton = require("./renderSkeleton");
const _useSkeleton = require("./useSkeleton");
const _useSkeletonContextValues = require("./useSkeletonContextValues");
const _useSkeletonStylesstyles = require("./useSkeletonStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type { SkeletonContextValues, SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton.types';\nexport { renderSkeleton_unstable } from './renderSkeleton';\nexport { useSkeleton_unstable } from './useSkeleton';\nexport { useSkeletonContextValues } from './useSkeletonContextValues';\nexport { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAERC,uBAAuB;eAAvBA,uCAAuB;;IAGvBC,kBAAkB;eAAlBA,2CAAkB;;IADlBC,wBAAwB;eAAxBA,kDAAwB;;IACJC,0BAA0B;eAA1BA,mDAA0B;;IAF9CC,oBAAoB;eAApBA,iCAAoB;;;0BAHJ;gCAEe;6BACH;0CACI;yCACsB"}
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSkeleton_unstable", {
enumerable: true,
get: function() {
return renderSkeleton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _SkeletonContext = require("../../contexts/SkeletonContext");
const renderSkeleton_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonContext.SkeletonContextProvider, {
value: contextValues.skeletonGroup,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues) => {\n assertSlots<SkeletonSlots>(state);\n\n return (\n <SkeletonContextProvider value={contextValues.skeletonGroup}>\n <state.root />\n </SkeletonContextProvider>\n );\n};\n"],"names":["renderSkeleton_unstable","state","contextValues","assertSlots","_jsx","SkeletonContextProvider","value","skeletonGroup","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;iCACY;AAMjC,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,wCAAAA,EAAAA;QAAwBC,OAAOJ,cAAcK,aAAa;kBACzD,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSkeleton_unstable", {
enumerable: true,
get: function() {
return useSkeleton_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 _SkeletonContext = require("../../contexts/SkeletonContext");
const useSkeleton_unstable = (props, ref)=>{
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;
const root = _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: 'progressbar',
'aria-busy': true,
...props
}), {
elementType: 'div'
});
return {
animation,
appearance,
components: {
root: 'div'
},
root
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/**\n * Create the state required to render Skeleton.\n *\n * The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n *\n * @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\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: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { animation, appearance, components: { root: 'div' }, root };\n};\n"],"names":["useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","useSkeletonContext","root","slot","always","getIntrinsicElementProps","role","elementType","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;iCAEZ;AAW5B,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,mCAAAA;IACvE,MAAM,EAAEJ,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EAAEC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAAE,GAAGL;IAE/F,MAAMO,OAAOC,oBAAAA,CAAKC,MAAM,CACtBC,IAAAA,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FT,KAAKA;QACLU,MAAM;QACN,aAAa;QACb,GAAGX,KAAK;IACV,IACA;QAAEY,aAAa;IAAM;IAEvB,OAAO;QAAEV;QAAWE;QAAYS,YAAY;YAAEN,MAAM;QAAM;QAAGA;IAAK;AACpE"}
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSkeletonContextValues", {
enumerable: true,
get: function() {
return useSkeletonContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const useSkeletonContextValues = (state)=>{
const { animation, appearance } = state;
const skeletonGroup = _react.useMemo(()=>({
animation,
appearance
}), [
animation,
appearance
]);
return {
skeletonGroup
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n }),\n [animation, appearance],\n );\n\n return { skeletonGroup };\n};\n"],"names":["useSkeletonContextValues","state","animation","appearance","skeletonGroup","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGaA;;;eAAAA;;;;iEAHU;AAGhB,MAAMA,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBC,OAAMC,OAAO,CACjC,IAAO,CAAA;YACLJ;YACAC;QACF,CAAA,GACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB"}
@@ -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, {
skeletonClassNames: function() {
return skeletonClassNames;
},
useSkeletonStyles_unstable: function() {
return useSkeletonStyles_unstable;
}
});
const _react = require("@griffel/react");
const skeletonClassNames = {
root: 'fui-Skeleton'
};
const useSkeletonStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(skeletonClassNames.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\n/**\n * Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);\n return state;\n};\n"],"names":["skeletonClassNames","useSkeletonStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,kBAAkB;eAAlBA;;IAKIC,0BAA0B;eAA1BA;;;uBANY;AACtB,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AAGW,MAAMD,6BAA8BE,CAAAA;IAC3C;IACAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACL,mBAAmBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IACjF,OAAOD;AACX"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SkeletonItem", {
enumerable: true,
get: function() {
return SkeletonItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSkeletonItem = require("./useSkeletonItem");
const _renderSkeletonItem = require("./renderSkeletonItem");
const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles");
const SkeletonItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSkeletonItem.useSkeletonItem_unstable)(props, ref);
(0, _useSkeletonItemStylesstyles.useSkeletonItemStyles_unstable)(state);
return (0, _renderSkeletonItem.renderSkeletonItem_unstable)(state);
});
SkeletonItem.displayName = 'SkeletonItem';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n const state = useSkeletonItem_unstable(props, ref);\n\n useSkeletonItemStyles_unstable(state);\n return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["SkeletonItem","React","forwardRef","props","ref","state","useSkeletonItem_unstable","useSkeletonItemStyles_unstable","renderSkeletonItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;iCACkB;oCACG;6CACG;AAIxC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAC/B,OAAOG,IAAAA,+CAAAA,EAA4BH;AACrC;AAEAL,aAAaS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering SkeletonItem
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SkeletonItemSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Sizes for the SkeletonItem\n */\nexport type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {\n /**\n * Sets the animation of the SkeletonItem\n * @default wave\n */\n animation?: 'wave' | 'pulse';\n\n /**\n * Sets the appearance of the SkeletonItem\n * @default opaque\n */\n appearance?: 'opaque' | 'translucent';\n\n /**\n * Sets the size of the SkeletonItem in pixels.\n * Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).\n * To set a non-supported size, set `width` and `height` to override the rendered size.\n * @default 16\n */\n size?: SkeletonItemSize;\n\n /**\n * Sets the shape of the SkeletonItem.\n * @default rectangle\n */\n shape?: 'circle' | 'square' | 'rectangle';\n};\n\n/**\n * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AA0CA;;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, {
SkeletonItem: function() {
return _SkeletonItem.SkeletonItem;
},
renderSkeletonItem_unstable: function() {
return _renderSkeletonItem.renderSkeletonItem_unstable;
},
skeletonItemClassNames: function() {
return _useSkeletonItemStylesstyles.skeletonItemClassNames;
},
useSkeletonItemStyles_unstable: function() {
return _useSkeletonItemStylesstyles.useSkeletonItemStyles_unstable;
},
useSkeletonItem_unstable: function() {
return _useSkeletonItem.useSkeletonItem_unstable;
}
});
const _SkeletonItem = require("./SkeletonItem");
const _renderSkeletonItem = require("./renderSkeletonItem");
const _useSkeletonItem = require("./useSkeletonItem");
const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSize, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nexport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nexport { useSkeletonItem_unstable } from './useSkeletonItem';\nexport { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IAEZC,2BAA2B;eAA3BA,+CAA2B;;IAE3BC,sBAAsB;eAAtBA,mDAAsB;;IAAEC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BAHJ;oCAEe;iCACH;6CAC8B"}
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSkeletonItem_unstable", {
enumerable: true,
get: function() {
return renderSkeletonItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSkeletonItem_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/renderSkeletonItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SkeletonItemState, SkeletonItemSlots } from './SkeletonItem.types';\n\n/**\n * Render the final JSX of SkeletonItem\n */\nexport const renderSkeletonItem_unstable = (state: SkeletonItemState) => {\n assertSlots<SkeletonItemSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderSkeletonItem_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,8BAA8B,CAACC;IAC1CC,IAAAA,2BAAAA,EAA+BD;IAE/B,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSkeletonItem_unstable", {
enumerable: true,
get: function() {
return useSkeletonItem_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 _SkeletonContext = require("../../contexts/SkeletonContext");
const useSkeletonItem_unstable = (props, ref)=>{
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;
const root = _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,
...props
}), {
elementType: 'div'
});
return {
appearance,
animation,
size,
shape,
components: {
root: 'div'
},
root
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';\n\n/**\n * Create the state required to render SkeletonItem.\n *\n * The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n *\n * @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = 16,\n shape = 'rectangle',\n } = props;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\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 ...props,\n }),\n { elementType: 'div' },\n );\n return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","useSkeletonContext","size","shape","root","slot","always","getIntrinsicElementProps","elementType","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;iCACZ;AAY5B,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,mCAAAA;IACvE,MAAM,EACJJ,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CE,OAAO,EAAE,EACTC,QAAQ,WAAW,EACpB,GAAGR;IAEJ,MAAMS,OAAOC,oBAAAA,CAAKC,MAAM,CACtBC,IAAAA,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FX,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEa,aAAa;IAAM;IAEvB,OAAO;QAAET;QAAYF;QAAWK;QAAMC;QAAOM,YAAY;YAAEL,MAAM;QAAM;QAAGA;IAAK;AACjF"}
@@ -0,0 +1,368 @@
"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, {
skeletonItemClassNames: function() {
return skeletonItemClassNames;
},
useSkeletonItemStyles_unstable: function() {
return useSkeletonItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const skeletonItemClassNames = {
root: 'fui-SkeletonItem'
};
const skeletonWaveAnimation = {
to: {
transform: 'translate(100%)'
}
};
const skeletonPulseAnimation = {
'0%': {
opacity: '1'
},
'50%': {
opacity: '0.4'
},
'100%': {
opacity: '1'
}
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
qhf8xq: "f10pi13n",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
Bsft5z2: "f13zj6fq",
ap17g6: "f2gz7yw",
E3zdtr: "f1mdlcz9",
By385i5: 0,
Eqx8gd: 0,
B1piin3: 0,
bn5sak: 0,
B58onuk: "f1nt53hs",
s9ouvv: "f18xs7ez",
xr36ep: "ffm3629",
Bitv4sc: "f1f9zsvm",
Jx5sug: "f1ub80pn",
Hzyzrh: "f1e7twep"
},
wave: {
De3pzq: "f1gjxg63",
Br128sd: [
"f3fo419",
"f6m9r4"
],
h62rwi: [
"ftnv2js",
"f12jzhyt"
],
b1kco5: [
"fig1c6l",
"f1rv5y9h"
],
oi31me: "f103n15n"
},
pulse: {
Br128sd: "f171zwvm",
xr36ep: "fs3pcyf",
Bjyk6c5: "f1yu5riq"
},
translucent: {
De3pzq: "f162mh4z",
h62rwi: [
"flvf4r0",
"f1uek97b"
]
},
translucentPulse: {
De3pzq: "flu3bqm",
Bjyk6c5: "fxucc0w"
}
}, {
d: [
".f10pi13n{position:relative;}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
".f13zj6fq::after{content:\"\";}",
".f2gz7yw::after{display:block;}",
".f1mdlcz9::after{position:absolute;}",
[
".f1nt53hs::after{inset:0;}",
{
p: -1
}
],
".f18xs7ez::after{animation-iteration-count:infinite;}",
".ffm3629::after{animation-duration:3s;}",
".f1f9zsvm::after{animation-timing-function:ease-in-out;}",
".f1gjxg63{background-color:var(--colorNeutralStencil1);}",
".f3fo419::after{animation-name:f1efwx7q;}",
".f6m9r4::after{animation-name:f1kkgpz1;}",
".ftnv2js::after{background-image:linear-gradient(\n to right,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}",
".f12jzhyt::after{background-image:linear-gradient(\n to left,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}",
".fig1c6l::after{transform:translate(-100%);}",
".f1rv5y9h::after{transform:translate(100%);}",
".f171zwvm::after{animation-name:f12o7gg6;}",
".fs3pcyf::after{animation-duration:1s;}",
".f1yu5riq::after{background-color:var(--colorNeutralStencil1);}",
".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}",
".flvf4r0::after{background-image:linear-gradient(\n to right,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}",
".f1uek97b::after{background-image:linear-gradient(\n to left,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}",
".flu3bqm{background-color:none;}",
".fxucc0w::after{background-color:var(--colorNeutralStencil1Alpha);}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.f1ub80pn::after{animation-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1e7twep::after{animation-iteration-count:1;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (forced-colors: active){.f103n15n::after{background-color:WindowText;}}",
{
m: "screen and (forced-colors: active)"
}
]
],
k: [
"@keyframes f1efwx7q{to{transform:translate(100%);}}",
"@keyframes f1kkgpz1{to{transform:translate(-100%);}}",
"@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"
]
});
const useRectangleStyles = /*#__PURE__*/ (0, _react.__styles)({
"8": {
Bqenvij: "f1x82gua"
},
"12": {
Bqenvij: "fvblgha"
},
"16": {
Bqenvij: "fd461yt"
},
"20": {
Bqenvij: "fjamq6b"
},
"24": {
Bqenvij: "frvgh55"
},
"28": {
Bqenvij: "fxldao9"
},
"32": {
Bqenvij: "f1d2rq10"
},
"36": {
Bqenvij: "f8ljn23"
},
"40": {
Bqenvij: "fbhnoac"
},
"48": {
Bqenvij: "ff2sm71"
},
"56": {
Bqenvij: "fzki0ko"
},
"64": {
Bqenvij: "f16k9i2m"
},
"72": {
Bqenvij: "f1shusfg"
},
"96": {
Bqenvij: "fypu0ge"
},
"120": {
Bqenvij: "fjr5b71"
},
"128": {
Bqenvij: "fele2au"
},
root: {
a9b677: "fly5x3f",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ff3glw6"
}
}, {
d: [
".f1x82gua{height:8px;}",
".fvblgha{height:12px;}",
".fd461yt{height:16px;}",
".fjamq6b{height:20px;}",
".frvgh55{height:24px;}",
".fxldao9{height:28px;}",
".f1d2rq10{height:32px;}",
".f8ljn23{height:36px;}",
".fbhnoac{height:40px;}",
".ff2sm71{height:48px;}",
".fzki0ko{height:56px;}",
".f16k9i2m{height:64px;}",
".f1shusfg{height:72px;}",
".fypu0ge{height:96px;}",
".fjr5b71{height:120px;}",
".fele2au{height:128px;}",
".fly5x3f{width:100%;}",
[
".ff3glw6{border-radius:4px;}",
{
p: -1
}
]
]
});
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"8": {
a9b677: "f1o3cbw4",
Bqenvij: "f1x82gua"
},
"12": {
a9b677: "frx94fk",
Bqenvij: "fvblgha"
},
"16": {
a9b677: "fjw5fx7",
Bqenvij: "fd461yt"
},
"20": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
"24": {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
"28": {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
"32": {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
},
"36": {
a9b677: "fpdz1er",
Bqenvij: "f8ljn23"
},
"40": {
a9b677: "feqmc2u",
Bqenvij: "fbhnoac"
},
"48": {
a9b677: "f124akge",
Bqenvij: "ff2sm71"
},
"56": {
a9b677: "f1u66zr1",
Bqenvij: "fzki0ko"
},
"64": {
a9b677: "fa9ln6p",
Bqenvij: "f16k9i2m"
},
"72": {
a9b677: "fhcae8x",
Bqenvij: "f1shusfg"
},
"96": {
a9b677: "f1kyr2gn",
Bqenvij: "fypu0ge"
},
"120": {
a9b677: "fwfqyga",
Bqenvij: "fjr5b71"
},
"128": {
a9b677: "f1iksgmy",
Bqenvij: "fele2au"
}
}, {
d: [
".f1o3cbw4{width:8px;}",
".f1x82gua{height:8px;}",
".frx94fk{width:12px;}",
".fvblgha{height:12px;}",
".fjw5fx7{width:16px;}",
".fd461yt{height:16px;}",
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}",
".fpdz1er{width:36px;}",
".f8ljn23{height:36px;}",
".feqmc2u{width:40px;}",
".fbhnoac{height:40px;}",
".f124akge{width:48px;}",
".ff2sm71{height:48px;}",
".f1u66zr1{width:56px;}",
".fzki0ko{height:56px;}",
".fa9ln6p{width:64px;}",
".f16k9i2m{height:64px;}",
".fhcae8x{width:72px;}",
".f1shusfg{height:72px;}",
".f1kyr2gn{width:96px;}",
".fypu0ge{height:96px;}",
".fwfqyga{width:120px;}",
".fjr5b71{height:120px;}",
".f1iksgmy{width:128px;}",
".fele2au{height:128px;}"
]
});
const useCircleSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f5q2cvs"
}
}, {
d: [
[
".f5q2cvs{border-radius:50%;}",
{
p: -1
}
]
]
});
const useSkeletonItemStyles_unstable = (state)=>{
'use no memo';
const { animation, appearance, size, shape } = state;
const rootStyles = useStyles();
const rectStyles = useRectangleStyles();
const sizeStyles = useSizeStyles();
const circleStyles = useCircleSizeStyles();
state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.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, {
SkeletonContextProvider: function() {
return SkeletonContextProvider;
},
useSkeletonContext: function() {
return useSkeletonContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const SkeletonContext = /*#__PURE__*/ _react.createContext(undefined);
const skeletonContextDefaultValue = {};
const SkeletonContextProvider = SkeletonContext.Provider;
const useSkeletonContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(SkeletonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : skeletonContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue | undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' | 'pulse';\n appearance?: 'opaque' | 'translucent';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = () => React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["SkeletonContextProvider","useSkeletonContext","SkeletonContext","React","createContext","undefined","skeletonContextDefaultValue","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,uBAAAA;eAAAA;;IAEAC,kBAAAA;eAAAA;;;;iEAbU;AAEvB,MAAMC,gCAAkBC,OAAMC,aAAa,CAAmCC;AAO9E,MAAMC,8BAAoD,CAAC;AAEpD,MAAMN,0BAA0BE,gBAAgBK,QAAQ;AAExD,MAAMN,qBAAqB;QAAME;WAAAA,CAAAA,oBAAAA,OAAMK,UAAU,CAACN,gBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAqCG;AAA0B"}
+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, {
SkeletonContextProvider: function() {
return _SkeletonContext.SkeletonContextProvider;
},
useSkeletonContext: function() {
return _SkeletonContext.useSkeletonContext;
}
});
const _SkeletonContext = require("./SkeletonContext");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SkeletonContextValue } from './SkeletonContext';\nexport { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';\n"],"names":["SkeletonContextProvider","useSkeletonContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,uBAAuB;eAAvBA,wCAAuB;;IAAEC,kBAAkB;eAAlBA,mCAAkB;;;iCAAQ"}
+51
View File
@@ -0,0 +1,51 @@
"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, {
Skeleton: function() {
return _Skeleton.Skeleton;
},
SkeletonContextProvider: function() {
return _index.SkeletonContextProvider;
},
SkeletonItem: function() {
return _SkeletonItem.SkeletonItem;
},
renderSkeletonItem_unstable: function() {
return _SkeletonItem.renderSkeletonItem_unstable;
},
renderSkeleton_unstable: function() {
return _Skeleton.renderSkeleton_unstable;
},
skeletonClassNames: function() {
return _Skeleton.skeletonClassNames;
},
skeletonItemClassNames: function() {
return _SkeletonItem.skeletonItemClassNames;
},
useSkeletonContext: function() {
return _index.useSkeletonContext;
},
useSkeletonItemStyles_unstable: function() {
return _SkeletonItem.useSkeletonItemStyles_unstable;
},
useSkeletonItem_unstable: function() {
return _SkeletonItem.useSkeletonItem_unstable;
},
useSkeletonStyles_unstable: function() {
return _Skeleton.useSkeletonStyles_unstable;
},
useSkeleton_unstable: function() {
return _Skeleton.useSkeleton_unstable;
}
});
const _Skeleton = require("./Skeleton");
const _SkeletonItem = require("./SkeletonItem");
const _index = require("./contexts/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n} from './Skeleton';\nexport type { SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n} from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","SkeletonContextProvider","SkeletonItem","renderSkeletonItem_unstable","renderSkeleton_unstable","skeletonClassNames","skeletonItemClassNames","useSkeletonContext","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonStyles_unstable","useSkeleton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAeDC,uBAAuB;eAAvBA,8BAAuB;;IAP9BC,YAAY;eAAZA,0BAAY;;IACZC,2BAA2B;eAA3BA,yCAA2B;;IAR3BC,uBAAuB;eAAvBA,iCAAuB;;IACvBC,kBAAkB;eAAlBA,4BAAkB;;IAQlBC,sBAAsB;eAAtBA,oCAAsB;;IAKUC,kBAAkB;eAAlBA,yBAAkB;;IAJlDC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;IATxBC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;;0BACf;8BAQA;uBAEqD"}
+1
View File
@@ -0,0 +1 @@
export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonContextValues, useSkeletonStyles_unstable, useSkeleton_unstable } from './components/Skeleton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type { SkeletonContextValues, SkeletonProps, SkeletonSlots, SkeletonState } from './components/Skeleton/index';\nexport {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n} from './components/Skeleton/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+1
View File
@@ -0,0 +1 @@
export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable } from './components/SkeletonItem/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {\n SkeletonItemProps,\n SkeletonItemSize,\n SkeletonItemSlots,\n SkeletonItemState,\n} from './components/SkeletonItem/index';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n} from './components/SkeletonItem/index';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable"],"rangeMappings":"","mappings":"AAMA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useSkeleton_unstable } from './useSkeleton';
import { renderSkeleton_unstable } from './renderSkeleton';
import { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';
import { useSkeletonContextValues } from './useSkeletonContextValues';
/**
* Skeleton component - TODO: add more docs
*/ export const Skeleton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSkeleton_unstable(props, ref);
const contextValues = useSkeletonContextValues(state);
useSkeletonStyles_unstable(state);
return renderSkeleton_unstable(state, contextValues);
});
Skeleton.displayName = 'Skeleton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AAItE;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBN,yBAAyBK;IAE/CN,2BAA2BM;IAC3B,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
@@ -0,0 +1,3 @@
/**
* State used in rendering Skeleton
*/ export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/Skeleton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SkeletonContextValue } from '../../contexts/index';\n\nexport type SkeletonSlots = {\n /**\n * The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`\n * and any data that the `Skeleton` will load. The default html element is a `div`.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Skeleton Props\n */\nexport type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {\n /**\n * The animation type for the Skeleton\n * @defaultValue wave\n */\n animation?: 'wave' | 'pulse';\n\n /**\n * Sets the appearance of the Skeleton.\n * @defaultValue opaque\n */\n appearance?: 'opaque' | 'translucent';\n\n /**\n * Sets the width value of the skeleton wrapper.\n * @defaultValue 100%\n * @deprecated Use `className` prop to set width\n */\n width?: number | string;\n};\n\nexport type SkeletonContextValues = {\n skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAuCA;;CAEC,GACD,WAAsH"}
@@ -0,0 +1,5 @@
export { Skeleton } from './Skeleton';
export { renderSkeleton_unstable } from './renderSkeleton';
export { useSkeleton_unstable } from './useSkeleton';
export { useSkeletonContextValues } from './useSkeletonContextValues';
export { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type { SkeletonContextValues, SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton.types';\nexport { renderSkeleton_unstable } from './renderSkeleton';\nexport { useSkeleton_unstable } from './useSkeleton';\nexport { useSkeletonContextValues } from './useSkeletonContextValues';\nexport { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\n"],"names":["Skeleton","renderSkeleton_unstable","useSkeleton_unstable","useSkeletonContextValues","skeletonClassNames","useSkeletonStyles_unstable"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
@@ -0,0 +1,12 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { SkeletonContextProvider } from '../../contexts/SkeletonContext';
/**
* Render the final JSX of Skeleton
*/ export const renderSkeleton_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(SkeletonContextProvider, {
value: contextValues.skeletonGroup,
children: /*#__PURE__*/ _jsx(state.root, {})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues) => {\n assertSlots<SkeletonSlots>(state);\n\n return (\n <SkeletonContextProvider value={contextValues.skeletonGroup}>\n <state.root />\n </SkeletonContextProvider>\n );\n};\n"],"names":["assertSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","value","skeletonGroup","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,uBAAuB,QAAQ,iCAAiC;AAGzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,aAAa;kBACzD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
@@ -0,0 +1,34 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useSkeletonContext } from '../../contexts/SkeletonContext';
/**
* Create the state required to render Skeleton.
*
* The returned state can be modified with hooks such as useSkeletonStyles_unstable,
* before being passed to renderSkeleton_unstable.
*
* @param props - props from this instance of Skeleton
* @param ref - reference to root HTMLElement of Skeleton
*/ export const useSkeleton_unstable = (props, ref)=>{
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;
const root = 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: 'progressbar',
'aria-busy': true,
...props
}), {
elementType: 'div'
});
return {
animation,
appearance,
components: {
root: 'div'
},
root
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/**\n * Create the state required to render Skeleton.\n *\n * The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n *\n * @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\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: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { animation, appearance, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","always","role","elementType","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EAAEI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EAAEC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAE,GAAGL;IAE/F,MAAMM,OAAOT,KAAKU,MAAM,CACtBX,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLO,MAAM;QACN,aAAa;QACb,GAAGR,KAAK;IACV,IACA;QAAES,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAWE;QAAYM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACpE,EAAE"}
@@ -0,0 +1,14 @@
import * as React from 'react';
export const useSkeletonContextValues = (state)=>{
const { animation, appearance } = state;
const skeletonGroup = React.useMemo(()=>({
animation,
appearance
}), [
animation,
appearance
]);
return {
skeletonGroup
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n }),\n [animation, appearance],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBL,MAAMM,OAAO,CACjC,IAAO,CAAA;YACLH;YACAC;QACF,CAAA,GACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB,EAAE"}
@@ -0,0 +1,13 @@
import { mergeClasses } from '@griffel/react';
export const skeletonClassNames = {
root: 'fui-Skeleton'
};
/**
* Apply styling to the Skeleton slots based on the state
*/
export const useSkeletonStyles_unstable = state => {
'use no memo';
state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","skeletonClassNames","root","useSkeletonStyles_unstable","state","className"],"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\n/**\n * Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,kBAAkB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EAClF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -0,0 +1,10 @@
import * as React from 'react';
import { useSkeletonItem_unstable } from './useSkeletonItem';
import { renderSkeletonItem_unstable } from './renderSkeletonItem';
import { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';
export const SkeletonItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSkeletonItem_unstable(props, ref);
useSkeletonItemStyles_unstable(state);
return renderSkeletonItem_unstable(state);
});
SkeletonItem.displayName = 'SkeletonItem';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n const state = useSkeletonItem_unstable(props, ref);\n\n useSkeletonItemStyles_unstable(state);\n return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
@@ -0,0 +1,3 @@
/**
* State used in rendering SkeletonItem
*/ export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SkeletonItemSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Sizes for the SkeletonItem\n */\nexport type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {\n /**\n * Sets the animation of the SkeletonItem\n * @default wave\n */\n animation?: 'wave' | 'pulse';\n\n /**\n * Sets the appearance of the SkeletonItem\n * @default opaque\n */\n appearance?: 'opaque' | 'translucent';\n\n /**\n * Sets the size of the SkeletonItem in pixels.\n * Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).\n * To set a non-supported size, set `width` and `height` to override the rendered size.\n * @default 16\n */\n size?: SkeletonItemSize;\n\n /**\n * Sets the shape of the SkeletonItem.\n * @default rectangle\n */\n shape?: 'circle' | 'square' | 'rectangle';\n};\n\n/**\n * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AA0CA;;CAEC,GACD,WACmF"}
@@ -0,0 +1,4 @@
export { SkeletonItem } from './SkeletonItem';
export { renderSkeletonItem_unstable } from './renderSkeletonItem';
export { useSkeletonItem_unstable } from './useSkeletonItem';
export { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSize, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nexport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nexport { useSkeletonItem_unstable } from './useSkeletonItem';\nexport { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","useSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of SkeletonItem
*/ export const renderSkeletonItem_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/renderSkeletonItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SkeletonItemState, SkeletonItemSlots } from './SkeletonItem.types';\n\n/**\n * Render the final JSX of SkeletonItem\n */\nexport const renderSkeletonItem_unstable = (state: SkeletonItemState) => {\n assertSlots<SkeletonItemSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderSkeletonItem_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
@@ -0,0 +1,34 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useSkeletonContext } from '../../contexts/SkeletonContext';
/**
* Create the state required to render SkeletonItem.
*
* The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,
* before being passed to renderSkeletonItem_unstable.
*
* @param props - props from this instance of SkeletonItem
* @param ref - reference to root HTMLElement of SkeletonItem
*/ export const useSkeletonItem_unstable = (props, ref)=>{
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;
const root = 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,
...props
}), {
elementType: 'div'
});
return {
appearance,
animation,
size,
shape,
components: {
root: 'div'
},
root
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';\n\n/**\n * Create the state required to render SkeletonItem.\n *\n * The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n *\n * @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = 16,\n shape = 'rectangle',\n } = props;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\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 ...props,\n }),\n { elementType: 'div' },\n );\n return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","elementType","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,OAAO,EAAE,EACTC,QAAQ,WAAW,EACpB,GAAGP;IAEJ,MAAMQ,OAAOX,KAAKY,MAAM,CACtBb,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAYF;QAAWI;QAAMC;QAAOI,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
@@ -0,0 +1,241 @@
import { __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const skeletonItemClassNames = {
root: 'fui-SkeletonItem'
};
const skeletonWaveAnimation = {
to: {
transform: 'translate(100%)'
}
};
const skeletonPulseAnimation = {
'0%': {
opacity: '1'
},
'50%': {
opacity: '0.4'
},
'100%': {
opacity: '1'
}
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
root: {
qhf8xq: "f10pi13n",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
Bsft5z2: "f13zj6fq",
ap17g6: "f2gz7yw",
E3zdtr: "f1mdlcz9",
By385i5: 0,
Eqx8gd: 0,
B1piin3: 0,
bn5sak: 0,
B58onuk: "f1nt53hs",
s9ouvv: "f18xs7ez",
xr36ep: "ffm3629",
Bitv4sc: "f1f9zsvm",
Jx5sug: "f1ub80pn",
Hzyzrh: "f1e7twep"
},
wave: {
De3pzq: "f1gjxg63",
Br128sd: ["f3fo419", "f6m9r4"],
h62rwi: ["ftnv2js", "f12jzhyt"],
b1kco5: ["fig1c6l", "f1rv5y9h"],
oi31me: "f103n15n"
},
pulse: {
Br128sd: "f171zwvm",
xr36ep: "fs3pcyf",
Bjyk6c5: "f1yu5riq"
},
translucent: {
De3pzq: "f162mh4z",
h62rwi: ["flvf4r0", "f1uek97b"]
},
translucentPulse: {
De3pzq: "flu3bqm",
Bjyk6c5: "fxucc0w"
}
}, {
d: [".f10pi13n{position:relative;}", [".f1a3p1vp{overflow:hidden;}", {
p: -1
}], ".f13zj6fq::after{content:\"\";}", ".f2gz7yw::after{display:block;}", ".f1mdlcz9::after{position:absolute;}", [".f1nt53hs::after{inset:0;}", {
p: -1
}], ".f18xs7ez::after{animation-iteration-count:infinite;}", ".ffm3629::after{animation-duration:3s;}", ".f1f9zsvm::after{animation-timing-function:ease-in-out;}", ".f1gjxg63{background-color:var(--colorNeutralStencil1);}", ".f3fo419::after{animation-name:f1efwx7q;}", ".f6m9r4::after{animation-name:f1kkgpz1;}", ".ftnv2js::after{background-image:linear-gradient(\n to right,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}", ".f12jzhyt::after{background-image:linear-gradient(\n to left,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}", ".fig1c6l::after{transform:translate(-100%);}", ".f1rv5y9h::after{transform:translate(100%);}", ".f171zwvm::after{animation-name:f12o7gg6;}", ".fs3pcyf::after{animation-duration:1s;}", ".f1yu5riq::after{background-color:var(--colorNeutralStencil1);}", ".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}", ".flvf4r0::after{background-image:linear-gradient(\n to right,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}", ".f1uek97b::after{background-image:linear-gradient(\n to left,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}", ".flu3bqm{background-color:none;}", ".fxucc0w::after{background-color:var(--colorNeutralStencil1Alpha);}"],
m: [["@media screen and (prefers-reduced-motion: reduce){.f1ub80pn::after{animation-duration:0.01ms;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}], ["@media screen and (prefers-reduced-motion: reduce){.f1e7twep::after{animation-iteration-count:1;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}], ["@media screen and (forced-colors: active){.f103n15n::after{background-color:WindowText;}}", {
m: "screen and (forced-colors: active)"
}]],
k: ["@keyframes f1efwx7q{to{transform:translate(100%);}}", "@keyframes f1kkgpz1{to{transform:translate(-100%);}}", "@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"]
});
const useRectangleStyles = /*#__PURE__*/__styles({
"8": {
Bqenvij: "f1x82gua"
},
"12": {
Bqenvij: "fvblgha"
},
"16": {
Bqenvij: "fd461yt"
},
"20": {
Bqenvij: "fjamq6b"
},
"24": {
Bqenvij: "frvgh55"
},
"28": {
Bqenvij: "fxldao9"
},
"32": {
Bqenvij: "f1d2rq10"
},
"36": {
Bqenvij: "f8ljn23"
},
"40": {
Bqenvij: "fbhnoac"
},
"48": {
Bqenvij: "ff2sm71"
},
"56": {
Bqenvij: "fzki0ko"
},
"64": {
Bqenvij: "f16k9i2m"
},
"72": {
Bqenvij: "f1shusfg"
},
"96": {
Bqenvij: "fypu0ge"
},
"120": {
Bqenvij: "fjr5b71"
},
"128": {
Bqenvij: "fele2au"
},
root: {
a9b677: "fly5x3f",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ff3glw6"
}
}, {
d: [".f1x82gua{height:8px;}", ".fvblgha{height:12px;}", ".fd461yt{height:16px;}", ".fjamq6b{height:20px;}", ".frvgh55{height:24px;}", ".fxldao9{height:28px;}", ".f1d2rq10{height:32px;}", ".f8ljn23{height:36px;}", ".fbhnoac{height:40px;}", ".ff2sm71{height:48px;}", ".fzki0ko{height:56px;}", ".f16k9i2m{height:64px;}", ".f1shusfg{height:72px;}", ".fypu0ge{height:96px;}", ".fjr5b71{height:120px;}", ".fele2au{height:128px;}", ".fly5x3f{width:100%;}", [".ff3glw6{border-radius:4px;}", {
p: -1
}]]
});
const useSizeStyles = /*#__PURE__*/__styles({
"8": {
a9b677: "f1o3cbw4",
Bqenvij: "f1x82gua"
},
"12": {
a9b677: "frx94fk",
Bqenvij: "fvblgha"
},
"16": {
a9b677: "fjw5fx7",
Bqenvij: "fd461yt"
},
"20": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
"24": {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
"28": {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
"32": {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
},
"36": {
a9b677: "fpdz1er",
Bqenvij: "f8ljn23"
},
"40": {
a9b677: "feqmc2u",
Bqenvij: "fbhnoac"
},
"48": {
a9b677: "f124akge",
Bqenvij: "ff2sm71"
},
"56": {
a9b677: "f1u66zr1",
Bqenvij: "fzki0ko"
},
"64": {
a9b677: "fa9ln6p",
Bqenvij: "f16k9i2m"
},
"72": {
a9b677: "fhcae8x",
Bqenvij: "f1shusfg"
},
"96": {
a9b677: "f1kyr2gn",
Bqenvij: "fypu0ge"
},
"120": {
a9b677: "fwfqyga",
Bqenvij: "fjr5b71"
},
"128": {
a9b677: "f1iksgmy",
Bqenvij: "fele2au"
}
}, {
d: [".f1o3cbw4{width:8px;}", ".f1x82gua{height:8px;}", ".frx94fk{width:12px;}", ".fvblgha{height:12px;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
});
const useCircleSizeStyles = /*#__PURE__*/__styles({
root: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f5q2cvs"
}
}, {
d: [[".f5q2cvs{border-radius:50%;}", {
p: -1
}]]
});
/**
* Apply styling to the SkeletonItem slots based on the state
*/
export const useSkeletonItemStyles_unstable = state => {
'use no memo';
const {
animation,
appearance,
size,
shape
} = state;
const rootStyles = useStyles();
const rectStyles = useRectangleStyles();
const sizeStyles = useSizeStyles();
const circleStyles = useCircleSizeStyles();
state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import * as React from 'react';
const SkeletonContext = React.createContext(undefined);
const skeletonContextDefaultValue = {};
export const SkeletonContextProvider = SkeletonContext.Provider;
export const useSkeletonContext = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(SkeletonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : skeletonContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue | undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' | 'pulse';\n appearance?: 'opaque' | 'translucent';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = () => React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"rangeMappings":";;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,kBAAkBD,MAAME,aAAa,CAAmCC;AAO9E,MAAMC,8BAAoD,CAAC;AAE3D,OAAO,MAAMC,0BAA0BJ,gBAAgBK,QAAQ,CAAC;AAEhE,OAAO,MAAMC,qBAAqB;QAAMP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}
+1
View File
@@ -0,0 +1 @@
export { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SkeletonContextValue } from './SkeletonContext';\nexport { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';\n"],"names":["SkeletonContextProvider","useSkeletonContext"],"rangeMappings":"","mappings":"AACA,SAASA,uBAAuB,EAAEC,kBAAkB,QAAQ,oBAAoB"}
+3
View File
@@ -0,0 +1,3 @@
export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonStyles_unstable, useSkeleton_unstable } from './Skeleton';
export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable } from './SkeletonItem';
export { SkeletonContextProvider, useSkeletonContext } from './contexts/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n} from './Skeleton';\nexport type { SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n} from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","SkeletonContextProvider","useSkeletonContext"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAExB,SAASC,uBAAuB,EAAEC,kBAAkB,QAAQ,mBAAmB"}
+56
View File
@@ -0,0 +1,56 @@
{
"name": "@fluentui/react-skeleton",
"version": "9.2.0",
"description": "Converged v9 Skeleton Component",
"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",
"devDependencies": {
"@fluentui/eslint-plugin": "*",
"@fluentui/react-conformance": "*",
"@fluentui/react-conformance-griffel": "*",
"@fluentui/scripts-api-extractor": "*"
},
"dependencies": {
"@fluentui/react-field": "^9.2.0",
"@fluentui/react-jsx-runtime": "^9.0.50",
"@fluentui/react-shared-contexts": "^9.21.2",
"@fluentui/react-theme": "^9.1.24",
"@fluentui/react-utilities": "^9.18.20",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <19.0.0",
"@types/react-dom": ">=16.9.0 <19.0.0",
"react": ">=16.14.0 <19.0.0",
"react-dom": ">=16.14.0 <19.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"
]
}