@fluentui/react-skeleton 9.4.15 → 9.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -2
- package/dist/index.d.ts +15 -14
- package/lib/Skeleton.js.map +1 -1
- package/lib/SkeletonItem.js.map +1 -1
- package/lib/components/Skeleton/Skeleton.types.js.map +1 -1
- package/lib/components/Skeleton/index.js.map +1 -1
- package/lib/components/Skeleton/useSkeleton.js +3 -1
- package/lib/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib/components/Skeleton/useSkeletonContextValues.js +7 -3
- package/lib/components/Skeleton/useSkeletonContextValues.js.map +1 -1
- package/lib/components/SkeletonItem/SkeletonItem.types.js.map +1 -1
- package/lib/components/SkeletonItem/index.js.map +1 -1
- package/lib/components/SkeletonItem/useSkeletonItem.js +2 -2
- package/lib/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/lib/contexts/SkeletonContext.js.map +1 -1
- package/lib-commonjs/Skeleton.js.map +1 -1
- package/lib-commonjs/SkeletonItem.js.map +1 -1
- package/lib-commonjs/components/Skeleton/Skeleton.types.js.map +1 -1
- package/lib-commonjs/components/Skeleton/index.js.map +1 -1
- package/lib-commonjs/components/Skeleton/useSkeleton.js +3 -1
- package/lib-commonjs/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib-commonjs/components/Skeleton/useSkeletonContextValues.js +7 -3
- package/lib-commonjs/components/Skeleton/useSkeletonContextValues.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/SkeletonItem.types.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/index.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js +2 -2
- package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/lib-commonjs/contexts/SkeletonContext.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-skeleton
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 11 Mar 2026 09:20:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.5.0)
|
|
8
|
+
|
|
9
|
+
Wed, 11 Mar 2026 09:20:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.15..@fluentui/react-skeleton_v9.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat(react-skeleton): Add size and shape props to Skeleton component ([PR #35787](https://github.com/microsoft/fluentui/pull/35787) by v.kozlova13@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.15)
|
|
8
18
|
|
|
9
|
-
Wed, 25 Feb 2026 13:28
|
|
19
|
+
Wed, 25 Feb 2026 13:32:28 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.14..@fluentui/react-skeleton_v9.4.15)
|
|
11
21
|
|
|
12
22
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -28,6 +28,8 @@ export declare const SkeletonContextProvider: React_2.Provider<SkeletonContextVa
|
|
|
28
28
|
export declare interface SkeletonContextValue {
|
|
29
29
|
animation?: 'wave' | 'pulse';
|
|
30
30
|
appearance?: 'opaque' | 'translucent';
|
|
31
|
+
size?: SkeletonItemSize;
|
|
32
|
+
shape?: 'circle' | 'square' | 'rectangle';
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
declare type SkeletonContextValues = {
|
|
@@ -41,7 +43,7 @@ export declare const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots>;
|
|
|
41
43
|
/**
|
|
42
44
|
* SkeletonItem Props
|
|
43
45
|
*/
|
|
44
|
-
export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {
|
|
46
|
+
export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & Pick<SkeletonProps, 'size' | 'shape'> & {
|
|
45
47
|
/**
|
|
46
48
|
* Sets the animation of the SkeletonItem
|
|
47
49
|
* @default wave
|
|
@@ -52,18 +54,6 @@ export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {
|
|
|
52
54
|
* @default opaque
|
|
53
55
|
*/
|
|
54
56
|
appearance?: 'opaque' | 'translucent';
|
|
55
|
-
/**
|
|
56
|
-
* Sets the size of the SkeletonItem in pixels.
|
|
57
|
-
* Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).
|
|
58
|
-
* To set a non-supported size, set `width` and `height` to override the rendered size.
|
|
59
|
-
* @default 16
|
|
60
|
-
*/
|
|
61
|
-
size?: SkeletonItemSize;
|
|
62
|
-
/**
|
|
63
|
-
* Sets the shape of the SkeletonItem.
|
|
64
|
-
* @default rectangle
|
|
65
|
-
*/
|
|
66
|
-
shape?: 'circle' | 'square' | 'rectangle';
|
|
67
57
|
};
|
|
68
58
|
|
|
69
59
|
/**
|
|
@@ -100,6 +90,17 @@ export declare type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>,
|
|
|
100
90
|
* @deprecated Use `className` prop to set width
|
|
101
91
|
*/
|
|
102
92
|
width?: number | string;
|
|
93
|
+
/**
|
|
94
|
+
* Sets the size of the SkeletonItems inside the Skeleton in pixels.
|
|
95
|
+
* Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).
|
|
96
|
+
* This value can be overridden by the individual SkeletonItem's `size` prop.
|
|
97
|
+
*/
|
|
98
|
+
size?: SkeletonItemSize;
|
|
99
|
+
/**
|
|
100
|
+
* Sets the shape of the SkeletonItems inside the Skeleton.
|
|
101
|
+
* This value can be overridden by the individual SkeletonItem's `shape` prop.
|
|
102
|
+
*/
|
|
103
|
+
shape?: 'circle' | 'square' | 'rectangle';
|
|
103
104
|
};
|
|
104
105
|
|
|
105
106
|
export declare type SkeletonSlots = {
|
|
@@ -113,7 +114,7 @@ export declare type SkeletonSlots = {
|
|
|
113
114
|
/**
|
|
114
115
|
* State used in rendering Skeleton
|
|
115
116
|
*/
|
|
116
|
-
export declare type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'
|
|
117
|
+
export declare type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>> & Pick<SkeletonProps, 'size' | 'shape'>;
|
|
117
118
|
|
|
118
119
|
/**
|
|
119
120
|
* Create the state required to render Skeleton.
|
package/lib/Skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} 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"],"mappings":"AAOA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
|
package/lib/SkeletonItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } 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"],"mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
|
|
@@ -1 +1 @@
|
|
|
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', 'span'>>;\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>
|
|
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', 'span'>>;\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 * 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 /**\n * Sets the size of the SkeletonItems inside the Skeleton in pixels.\n * Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).\n * This value can be overridden by the individual SkeletonItem's `size` prop.\n */\n size?: SkeletonItemSize;\n\n /**\n * Sets the shape of the SkeletonItems inside the Skeleton.\n * This value can be overridden by the individual SkeletonItem's `shape` prop.\n */\n shape?: 'circle' | 'square' | 'rectangle';\n};\n\nexport type SkeletonContextValues = {\n skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> &\n Required<Pick<SkeletonProps, 'animation' | 'appearance'>> &\n Pick<SkeletonProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAyDA;;CAEC,GACD,WAEwC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} 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"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAQtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
|
|
@@ -12,7 +12,7 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
|
12
12
|
* @param ref - reference to root HTMLElement of Skeleton
|
|
13
13
|
*/ export const useSkeleton_unstable = (props, ref)=>{
|
|
14
14
|
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
|
|
15
|
-
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;
|
|
15
|
+
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size, shape } = props;
|
|
16
16
|
const root = slot.always(getIntrinsicElementProps('div', {
|
|
17
17
|
// FIXME:
|
|
18
18
|
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
@@ -27,6 +27,8 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
|
27
27
|
return {
|
|
28
28
|
animation,
|
|
29
29
|
appearance,
|
|
30
|
+
size,
|
|
31
|
+
shape,
|
|
30
32
|
components: {
|
|
31
33
|
root: 'div'
|
|
32
34
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,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,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * 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', size, shape } = 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, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","role","elementType","components"],"mappings":"AAAA;AAEA,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,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAE5G,MAAMQ,OAAOX,KAAKY,MAAM,CACtBb,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLS,MAAM;QACN,aAAa;QACb,GAAGV,KAAK;IACV,IACA;QAAEW,aAAa;IAAM;IAEvB,OAAO;QAAET;QAAWE;QAAYE;QAAMC;QAAOK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export const useSkeletonContextValues = (state)=>{
|
|
4
|
-
const { animation, appearance } = state;
|
|
4
|
+
const { animation, appearance, size, shape } = state;
|
|
5
5
|
const skeletonGroup = React.useMemo(()=>({
|
|
6
6
|
animation,
|
|
7
|
-
appearance
|
|
7
|
+
appearance,
|
|
8
|
+
size,
|
|
9
|
+
shape
|
|
8
10
|
}), [
|
|
9
11
|
animation,
|
|
10
|
-
appearance
|
|
12
|
+
appearance,
|
|
13
|
+
size,
|
|
14
|
+
shape
|
|
11
15
|
]);
|
|
12
16
|
return {
|
|
13
17
|
skeletonGroup
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance, size, shape } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n size,\n shape,\n }),\n [animation, appearance, size, shape],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","size","shape","skeletonGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAWC;QAAYC;QAAMC;KAAM;IAGtC,OAAO;QAAEC;IAAc;AACzB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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', 'span'>;\n};\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps } from '../Skeleton/Skeleton.types';\n\nexport type SkeletonItemSlots = {\n root: Slot<'div', 'span'>;\n};\n\n/**\n * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> &\n Pick<SkeletonProps, 'size' | 'shape'> & {\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/**\n * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WACmF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps,
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps, 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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
|
|
@@ -11,8 +11,8 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
|
11
11
|
* @param props - props from this instance of SkeletonItem
|
|
12
12
|
* @param ref - reference to root HTMLElement of SkeletonItem
|
|
13
13
|
*/ export const useSkeletonItem_unstable = (props, ref)=>{
|
|
14
|
-
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
|
|
15
|
-
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;
|
|
14
|
+
const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = useSkeletonContext();
|
|
15
|
+
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = contextSize !== null && contextSize !== void 0 ? contextSize : 16, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'rectangle' } = props;
|
|
16
16
|
const root = slot.always(getIntrinsicElementProps('div', {
|
|
17
17
|
// FIXME:
|
|
18
18
|
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n animation: contextAnimation,\n appearance: contextAppearance,\n size: contextSize,\n shape: contextShape,\n } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = contextSize ?? 16,\n shape = contextShape ?? '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","contextSize","shape","contextShape","root","always","elementType","components"],"mappings":"AAAA;AAEA,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,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,GAAGX;IACJ,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,wBAAAA,yBAAAA,cAAe,EAAE,EACxBC,QAAQC,yBAAAA,0BAAAA,eAAgB,WAAW,EACpC,GAAGT;IAEJ,MAAMU,OAAOb,KAAKc,MAAM,CACtBf,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEY,aAAa;IAAM;IAEvB,OAAO;QAAER;QAAYF;QAAWI;QAAME;QAAOK,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["'use client';\n\nimport * 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 = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;
|
|
1
|
+
{"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonItemSize } from '../components/Skeleton/Skeleton.types';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue | undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' | 'pulse';\n appearance?: 'opaque' | 'translucent';\n size?: SkeletonItemSize;\n shape?: 'circle' | 'square' | 'rectangle';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,kBAAkBD,MAAME,aAAa,CAAmCC;AAS9E,MAAMC,8BAAoD,CAAC;AAE3D,OAAO,MAAMC,0BAA0BJ,gBAAgBK,QAAQ,CAAC;AAEhE,OAAO,MAAMC,qBAAqB;QAChCP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} 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"],"mappings":";;;;;;;;;;;;eAQEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAClBC,+BAAwB;;;eACxBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } 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"],"mappings":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eACtBC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}
|
|
@@ -1 +1 @@
|
|
|
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', 'span'>>;\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>
|
|
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', 'span'>>;\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 * 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 /**\n * Sets the size of the SkeletonItems inside the Skeleton in pixels.\n * Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).\n * This value can be overridden by the individual SkeletonItem's `size` prop.\n */\n size?: SkeletonItemSize;\n\n /**\n * Sets the shape of the SkeletonItems inside the Skeleton.\n * This value can be overridden by the individual SkeletonItem's `shape` prop.\n */\n shape?: 'circle' | 'square' | 'rectangle';\n};\n\nexport type SkeletonContextValues = {\n skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> &\n Required<Pick<SkeletonProps, 'animation' | 'appearance'>> &\n Pick<SkeletonProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAyDA;;CAEC,GACD,WAEwC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} 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"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAQRC,uCAAuB;;;eAGvBG,2CAAkB;;;eADlBD,kDAAwB;;;eACJE,mDAA0B;;;eAF9CH,iCAAoB;;;0BATJ,aAAa;gCAQE,mBAAmB;6BACtB,gBAAgB;0CACZ,6BAA6B;yCACP,6BAA6B"}
|
|
@@ -15,7 +15,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
15
15
|
const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
16
16
|
const useSkeleton_unstable = (props, ref)=>{
|
|
17
17
|
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
|
|
18
|
-
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;
|
|
18
|
+
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size, shape } = props;
|
|
19
19
|
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
20
20
|
// FIXME:
|
|
21
21
|
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
@@ -30,6 +30,8 @@ const useSkeleton_unstable = (props, ref)=>{
|
|
|
30
30
|
return {
|
|
31
31
|
animation,
|
|
32
32
|
appearance,
|
|
33
|
+
size,
|
|
34
|
+
shape,
|
|
33
35
|
components: {
|
|
34
36
|
root: 'div'
|
|
35
37
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCAExC,iCAAiC;AAW7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EAAEI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EAAEC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * 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', size, shape } = 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, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","role","elementType","components"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCAExC,iCAAiC;AAW7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EAAEI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EAAEC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAE5G,MAAMQ,OAAOX,oBAAAA,CAAKY,MAAM,KACtBb,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLS,MAAM;QACN,aAAa;QACb,GAAGV,KAAK;IACV,IACA;QAAEW,aAAa;IAAM;IAEvB,OAAO;QAAET;QAAWE;QAAYE;QAAMC;QAAOK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
|
|
@@ -12,13 +12,17 @@ Object.defineProperty(exports, "useSkeletonContextValues", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const useSkeletonContextValues = (state)=>{
|
|
15
|
-
const { animation, appearance } = state;
|
|
15
|
+
const { animation, appearance, size, shape } = state;
|
|
16
16
|
const skeletonGroup = _react.useMemo(()=>({
|
|
17
17
|
animation,
|
|
18
|
-
appearance
|
|
18
|
+
appearance,
|
|
19
|
+
size,
|
|
20
|
+
shape
|
|
19
21
|
}), [
|
|
20
22
|
animation,
|
|
21
|
-
appearance
|
|
23
|
+
appearance,
|
|
24
|
+
size,
|
|
25
|
+
shape
|
|
22
26
|
]);
|
|
23
27
|
return {
|
|
24
28
|
skeletonGroup
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance, size, shape } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n size,\n shape,\n }),\n [animation, appearance, size, shape],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","size","shape","skeletonGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,gBAAgBP,OAAMQ,OAAO,CACjC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACH;QAAWC;QAAYC;QAAMC;KAAM;IAGtC,OAAO;QAAEC;IAAc;AACzB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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', 'span'>;\n};\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps } from '../Skeleton/Skeleton.types';\n\nexport type SkeletonItemSlots = {\n root: Slot<'div', 'span'>;\n};\n\n/**\n * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> &\n Pick<SkeletonProps, 'size' | 'shape'> & {\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/**\n * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WACmF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps,
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps, 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"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAEZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}
|
|
@@ -14,8 +14,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
16
16
|
const useSkeletonItem_unstable = (props, ref)=>{
|
|
17
|
-
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
|
|
18
|
-
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;
|
|
17
|
+
const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = (0, _SkeletonContext.useSkeletonContext)();
|
|
18
|
+
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = contextSize !== null && contextSize !== void 0 ? contextSize : 16, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'rectangle' } = props;
|
|
19
19
|
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
20
20
|
// FIXME:
|
|
21
21
|
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n animation: contextAnimation,\n appearance: contextAppearance,\n size: contextSize,\n shape: contextShape,\n } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = contextSize ?? 16,\n shape = contextShape ?? '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","contextSize","shape","contextShape","root","always","elementType","components"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCACxC,iCAAiC;AAY7D,iCAAiC,CAACC,OAA0BC;IACjE,MAAM,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,OAAGX,mCAAAA;IACJ,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,EAAE,EACxBC,QAAQC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,eAAgB,WAAW,EACpC,GAAGT;IAEJ,MAAMU,OAAOb,oBAAAA,CAAKc,MAAM,KACtBf,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEY,aAAa;IAAM;IAEvB,OAAO;QAAER;QAAYF;QAAWI;QAAME;QAAOK,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["'use client';\n\nimport * 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 = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonItemSize } from '../components/Skeleton/Skeleton.types';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue | undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' | 'pulse';\n appearance?: 'opaque' | 'translucent';\n size?: SkeletonItemSize;\n shape?: 'circle' | 'square' | 'rectangle';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;2BAgBaK;;;sBAEAE;;;;;iEAhBU,QAAQ;AAG/B,MAAMN,gCAAkBD,OAAME,aAAa,CAAmCC;AAS9E,MAAMC,8BAAoD,CAAC;AAEpD,MAAMC,0BAA0BJ,gBAAgBK,QAAQ,CAAC;AAEzD,MAAMC,qBAAqB;QAChCP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-skeleton",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "Converged v9 Skeleton Component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-field": "^9.4.
|
|
15
|
+
"@fluentui/react-field": "^9.4.16",
|
|
16
16
|
"@fluentui/react-jsx-runtime": "^9.4.1",
|
|
17
17
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
18
18
|
"@fluentui/react-theme": "^9.2.1",
|