@fluentui/react-skeleton 9.0.35 → 9.0.37
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.json +57 -3
- package/CHANGELOG.md +26 -4
- package/lib/components/Skeleton/useSkeleton.js +6 -3
- package/lib/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib/components/SkeletonItem/useSkeletonItem.js +6 -3
- package/lib/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/lib-commonjs/components/Skeleton/useSkeleton.js +5 -2
- package/lib-commonjs/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js +5 -2
- package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/package.json +5 -5
- package/SPEC.md +0 -105
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-skeleton",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Sat, 28 Oct 2023 23:32:06 GMT",
|
|
6
|
+
"tag": "@fluentui/react-skeleton_v9.0.37",
|
|
7
|
+
"version": "9.0.37",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-skeleton",
|
|
13
|
+
"comment": "Bump @fluentui/react-field to v9.1.39",
|
|
14
|
+
"commit": "555b0fae3ec7f052e765557ae243c58000514f92"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-skeleton",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.11.0",
|
|
20
|
+
"commit": "555b0fae3ec7f052e765557ae243c58000514f92"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Wed, 18 Oct 2023 17:54:06 GMT",
|
|
27
|
+
"tag": "@fluentui/react-skeleton_v9.0.36",
|
|
28
|
+
"version": "9.0.36",
|
|
29
|
+
"comments": {
|
|
30
|
+
"patch": [
|
|
31
|
+
{
|
|
32
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
33
|
+
"package": "@fluentui/react-skeleton",
|
|
34
|
+
"commit": "967882a55a7333effea42e4c24a64e8547309116",
|
|
35
|
+
"comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-skeleton",
|
|
40
|
+
"comment": "Bump @fluentui/react-field to v9.1.38",
|
|
41
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-skeleton",
|
|
46
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.18",
|
|
47
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-skeleton",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.15.1",
|
|
53
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Thu, 12 Oct 2023 14:55:44 GMT",
|
|
6
60
|
"tag": "@fluentui/react-skeleton_v9.0.35",
|
|
7
61
|
"version": "9.0.35",
|
|
8
62
|
"comments": {
|
|
@@ -11,13 +65,13 @@
|
|
|
11
65
|
"author": "beachball",
|
|
12
66
|
"package": "@fluentui/react-skeleton",
|
|
13
67
|
"comment": "Bump @fluentui/react-field to v9.1.37",
|
|
14
|
-
"commit": "
|
|
68
|
+
"commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
|
|
15
69
|
},
|
|
16
70
|
{
|
|
17
71
|
"author": "beachball",
|
|
18
72
|
"package": "@fluentui/react-skeleton",
|
|
19
73
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.17",
|
|
20
|
-
"commit": "
|
|
74
|
+
"commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
|
|
21
75
|
}
|
|
22
76
|
]
|
|
23
77
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-skeleton
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Sat, 28 Oct 2023 23:32:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.37)
|
|
8
|
+
|
|
9
|
+
Sat, 28 Oct 2023 23:32:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.36..@fluentui/react-skeleton_v9.0.37)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.1.39 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/555b0fae3ec7f052e765557ae243c58000514f92) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.36)
|
|
18
|
+
|
|
19
|
+
Wed, 18 Oct 2023 17:54:06 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.35..@fluentui/react-skeleton_v9.0.36)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29499](https://github.com/microsoft/fluentui/pull/29499) by bernardo.sunderhus@gmail.com)
|
|
25
|
+
- Bump @fluentui/react-field to v9.1.38 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.18 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.15.1 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.0.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.35)
|
|
8
30
|
|
|
9
|
-
Thu, 12 Oct 2023 14:
|
|
31
|
+
Thu, 12 Oct 2023 14:55:44 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.34..@fluentui/react-skeleton_v9.0.35)
|
|
11
33
|
|
|
12
34
|
### Patches
|
|
13
35
|
|
|
14
|
-
- Bump @fluentui/react-field to v9.1.37 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #
|
|
36
|
+
- Bump @fluentui/react-field to v9.1.37 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
|
|
37
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
|
|
16
38
|
|
|
17
39
|
## [9.0.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.34)
|
|
18
40
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render Skeleton.
|
|
@@ -12,8 +12,11 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
|
12
12
|
*/ export const useSkeleton_unstable = (props, ref)=>{
|
|
13
13
|
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
|
|
14
14
|
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;
|
|
15
|
-
const root = slot.always(
|
|
16
|
-
|
|
15
|
+
const root = slot.always(getIntrinsicElementProps('div', {
|
|
16
|
+
// FIXME:
|
|
17
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
18
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
19
|
+
ref: ref,
|
|
17
20
|
role: 'progressbar',
|
|
18
21
|
'aria-busy': true,
|
|
19
22
|
'aria-label': 'Loading Content',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSkeleton.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["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 'aria-label': 'Loading Content',\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,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,cAAc;QACd,GAAGR,KAAK;IACV,IACA;QAAES,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAWE;QAAYM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACpE,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render SkeletonItem.
|
|
@@ -12,8 +12,11 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
|
|
|
12
12
|
*/ export const useSkeletonItem_unstable = (props, ref)=>{
|
|
13
13
|
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
|
|
14
14
|
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;
|
|
15
|
-
const root = slot.always(
|
|
16
|
-
|
|
15
|
+
const root = slot.always(getIntrinsicElementProps('div', {
|
|
16
|
+
// FIXME:
|
|
17
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
18
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
19
|
+
ref: ref,
|
|
17
20
|
...props
|
|
18
21
|
}), {
|
|
19
22
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["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"],"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"}
|
|
@@ -15,8 +15,11 @@ const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
|
15
15
|
const useSkeleton_unstable = (props, ref)=>{
|
|
16
16
|
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
|
|
17
17
|
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;
|
|
18
|
-
const root = _reactutilities.slot.always((0, _reactutilities.
|
|
19
|
-
|
|
18
|
+
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
19
|
+
// FIXME:
|
|
20
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
21
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
22
|
+
ref: ref,
|
|
20
23
|
role: 'progressbar',
|
|
21
24
|
'aria-busy': true,
|
|
22
25
|
'aria-label': 'Loading Content',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSkeleton.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useSkeleton.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\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 */ export const useSkeleton_unstable = (props, ref)=>{\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque' } = props;\n const root = slot.always(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,\n role: 'progressbar',\n 'aria-busy': true,\n 'aria-label': 'Loading Content',\n ...props\n }), {\n elementType: 'div'\n });\n return {\n animation,\n appearance,\n components: {\n root: 'div'\n },\n root\n };\n};\n"],"names":["useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","useSkeletonContext","root","slot","always","getIntrinsicElementProps","role","elementType","components"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;iCACZ;AASxB,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,mCAAkB;IACzF,MAAM,EAAEJ,YAAYC,qBAAqB,QAAQA,qBAAqB,KAAK,IAAIA,mBAAmB,MAAM,EAAEC,aAAaC,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAE,GAAGL;IACrN,MAAMO,OAAOC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;QACrD,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FT,KAAKA;QACLU,MAAM;QACN,aAAa;QACb,cAAc;QACd,GAAGX,KAAK;IACZ,IAAI;QACAY,aAAa;IACjB;IACA,OAAO;QACHV;QACAE;QACAS,YAAY;YACRN,MAAM;QACV;QACAA;IACJ;AACJ"}
|
|
@@ -15,8 +15,11 @@ const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
|
15
15
|
const useSkeletonItem_unstable = (props, ref)=>{
|
|
16
16
|
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
|
|
17
17
|
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;
|
|
18
|
-
const root = _reactutilities.slot.always((0, _reactutilities.
|
|
19
|
-
|
|
18
|
+
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
19
|
+
// FIXME:
|
|
20
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
21
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
22
|
+
ref: ref,
|
|
20
23
|
...props
|
|
21
24
|
}), {
|
|
22
25
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSkeletonItem.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useSkeletonItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\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 */ export const useSkeletonItem_unstable = (props, ref)=>{\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = 16, shape = 'rectangle' } = props;\n const root = slot.always(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,\n ...props\n }), {\n elementType: 'div'\n });\n return {\n appearance,\n animation,\n size,\n shape,\n components: {\n root: 'div'\n },\n root\n };\n};\n"],"names":["useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","useSkeletonContext","size","shape","root","slot","always","getIntrinsicElementProps","elementType","components"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;iCACZ;AASxB,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGC,IAAAA,mCAAkB;IACzF,MAAM,EAAEJ,YAAYC,qBAAqB,QAAQA,qBAAqB,KAAK,IAAIA,mBAAmB,MAAM,EAAEC,aAAaC,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB,QAAQ,EAAEE,OAAO,EAAE,EAAEC,QAAQ,WAAW,EAAE,GAAGR;IACrP,MAAMS,OAAOC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;QACrD,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FX,KAAKA;QACL,GAAGD,KAAK;IACZ,IAAI;QACAa,aAAa;IACjB;IACA,OAAO;QACHT;QACAF;QACAK;QACAC;QACAM,YAAY;YACRL,MAAM;QACV;QACAA;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-skeleton",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.37",
|
|
4
4
|
"description": "Converged v9 Skeleton Component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "^9.1.
|
|
36
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
37
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
35
|
+
"@fluentui/react-field": "^9.1.39",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "^9.0.18",
|
|
37
|
+
"@fluentui/react-shared-contexts": "^9.11.0",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.14",
|
|
39
|
-
"@fluentui/react-utilities": "^9.15.
|
|
39
|
+
"@fluentui/react-utilities": "^9.15.1",
|
|
40
40
|
"@griffel/react": "^1.5.14",
|
|
41
41
|
"@swc/helpers": "^0.5.1"
|
|
42
42
|
},
|
package/SPEC.md
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-skeleton Spec
|
|
2
|
-
|
|
3
|
-
## Background
|
|
4
|
-
|
|
5
|
-
The `Skeleton` component is a temporary placeholder for UI that is in a loading state.
|
|
6
|
-
|
|
7
|
-
## Prior Art
|
|
8
|
-
|
|
9
|
-
| Library | Component Name | Spec Link | Notes |
|
|
10
|
-
| ----------- | -------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
-
| Ant Design | Skeleton | [Skeleton](https://ant.design/components/skeleton/) | Has an `avatar`, `button`, `list`, and `togglebutton`. Has animated and non-animated versions, and shape variants for the component skeletons(rounded or rectangular). |
|
|
12
|
-
| Fast | Skeleton | [Skeleton](https://explore.fast.design/components/fast-skeleton) | Has three components: `Avatar`, `List`, and `Button`. No shape variants. |
|
|
13
|
-
| Semantic UI | Placeholder | [Placeholder](https://react.semantic-ui.com/elements/placeholder/) | Has `Header` and `Paragraph` subcomponents. The `Header` can take in an image as a prop |
|
|
14
|
-
| UI Fabric | Shimmer | [Shimmer](https://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer) | Shimmer has a way to pass in custom elements as well as the defaults. There is also a prop to change the colors of the Skeleton components. |
|
|
15
|
-
|
|
16
|
-
### Comparison of v8 and v0
|
|
17
|
-
|
|
18
|
-
The existing components are:
|
|
19
|
-
|
|
20
|
-
- v8
|
|
21
|
-
- `Shimmer`
|
|
22
|
-
- v0
|
|
23
|
-
- Does not have an existing `Skeleton` component.
|
|
24
|
-
|
|
25
|
-
## Sample Code
|
|
26
|
-
|
|
27
|
-
Basic example:
|
|
28
|
-
|
|
29
|
-
```jsx
|
|
30
|
-
import { Skeleton, SkeletonItem } from '@fluentui/react-skeleton';
|
|
31
|
-
|
|
32
|
-
function App() {
|
|
33
|
-
return (
|
|
34
|
-
<Skeleton>
|
|
35
|
-
<SkeletonItem shape="circle" size={24} />
|
|
36
|
-
<SkeletonItem shape="rectangle" size={16} />
|
|
37
|
-
</Skeleton>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Variants
|
|
43
|
-
|
|
44
|
-
- There are three basic `Skeleton` shapes
|
|
45
|
-
- `Rectangle`
|
|
46
|
-
- `Circle`
|
|
47
|
-
- `Square`
|
|
48
|
-
|
|
49
|
-
### Shape
|
|
50
|
-
|
|
51
|
-
The `Skeleton` is a combination of any of the two shapes in order to represent the content that will be loaded onto the screen. That is, it is a combination of rectangles and circles that is a visual representation of the wireframe of a page.
|
|
52
|
-
|
|
53
|
-
## API
|
|
54
|
-
|
|
55
|
-
### Slots
|
|
56
|
-
|
|
57
|
-
- `root` - The root slot of the `Skeleton` is the container that will contain the items that make up a `Skeleton` in representation of the data that is loading. The default html element is a `svg`.
|
|
58
|
-
|
|
59
|
-
### Props
|
|
60
|
-
|
|
61
|
-
See API at:
|
|
62
|
-
|
|
63
|
-
- [Skeleton.types.ts](./src/components/Skeleton/Skeleton.types.ts).
|
|
64
|
-
- [SkeletonItem.types.ts](./src/components/SkeletonItem/SkeletonItem.types.ts).
|
|
65
|
-
|
|
66
|
-
## Structure
|
|
67
|
-
|
|
68
|
-
```html
|
|
69
|
-
<!-- Container for Skeleton -->
|
|
70
|
-
|
|
71
|
-
<div class="fui-Skeleton">
|
|
72
|
-
<!-- Container for SkeletonElement -->
|
|
73
|
-
|
|
74
|
-
<div class="fui-SkeletonItem" />
|
|
75
|
-
</div>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## Migration
|
|
79
|
-
|
|
80
|
-
See [MIGRATION.md](./MIGRATION.md).
|
|
81
|
-
|
|
82
|
-
## Behaviors
|
|
83
|
-
|
|
84
|
-
### States
|
|
85
|
-
|
|
86
|
-
- **Display** - The `Skeleton` will use the following priority:
|
|
87
|
-
|
|
88
|
-
- The `appearance` prop will allow the use of a `translucent` appearance.
|
|
89
|
-
- Specifying `wave` or `pulse` will change the animation style of the `Skeleton`
|
|
90
|
-
- The component also has `rtl` support and will animate the `Skeleton` from right to left if set.
|
|
91
|
-
- Setting the `shape` prop in `<SkeletonItem />` will render a `rectangle`, `square`, or a `circle` (default is `rectangle`).
|
|
92
|
-
- Setting the `size` prop in `<SkeletonItem />` will allow the user to specify the size of the element (default is 16).
|
|
93
|
-
|
|
94
|
-
### Interaction
|
|
95
|
-
|
|
96
|
-
The Skeleton is non-interactive.
|
|
97
|
-
|
|
98
|
-
- **Keyboard** - Not keyboard focusable.
|
|
99
|
-
- **Mouse** - Nothing
|
|
100
|
-
|
|
101
|
-
- **Touch** - Nothing
|
|
102
|
-
|
|
103
|
-
## Accessibility
|
|
104
|
-
|
|
105
|
-
- An `aria-label` is added to the `Skeleton` container to let users know that content is loading
|