@fluentui/react-skeleton 9.0.0-beta.3 → 9.0.0-beta.5
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/.swcrc +30 -0
- package/CHANGELOG.json +73 -1
- package/CHANGELOG.md +27 -2
- package/lib/Skeleton.js.map +1 -1
- package/lib/SkeletonItem.js.map +1 -1
- package/lib/components/Skeleton/Skeleton.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/renderSkeleton.js +1 -3
- package/lib/components/Skeleton/renderSkeleton.js.map +1 -1
- package/lib/components/Skeleton/useSkeleton.js +1 -0
- package/lib/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib/components/Skeleton/useSkeletonContextValues.js.map +1 -1
- package/lib/components/Skeleton/useSkeletonStyles.js.map +1 -1
- package/lib/components/SkeletonItem/SkeletonItem.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/renderSkeletonItem.js +1 -3
- package/lib/components/SkeletonItem/renderSkeletonItem.js.map +1 -1
- package/lib/components/SkeletonItem/useSkeletonItem.js +1 -0
- package/lib/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/lib/components/SkeletonItem/useSkeletonItemStyles.js.map +1 -1
- package/lib/contexts/SkeletonContext.js +2 -4
- package/lib/contexts/SkeletonContext.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Skeleton.js +5 -4
- package/lib-commonjs/Skeleton.js.map +1 -1
- package/lib-commonjs/SkeletonItem.js +5 -4
- package/lib-commonjs/SkeletonItem.js.map +1 -1
- package/lib-commonjs/components/Skeleton/Skeleton.js +18 -17
- package/lib-commonjs/components/Skeleton/Skeleton.js.map +1 -1
- package/lib-commonjs/components/Skeleton/Skeleton.types.js +3 -2
- package/lib-commonjs/components/Skeleton/Skeleton.types.js.map +1 -1
- package/lib-commonjs/components/Skeleton/index.js +10 -9
- package/lib-commonjs/components/Skeleton/index.js.map +1 -1
- package/lib-commonjs/components/Skeleton/renderSkeleton.js +16 -21
- package/lib-commonjs/components/Skeleton/renderSkeleton.js.map +1 -1
- package/lib-commonjs/components/Skeleton/useSkeleton.js +29 -40
- package/lib-commonjs/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib-commonjs/components/Skeleton/useSkeletonContextValues.js +21 -18
- package/lib-commonjs/components/Skeleton/useSkeletonContextValues.js.map +1 -1
- package/lib-commonjs/components/Skeleton/useSkeletonStyles.js +19 -14
- package/lib-commonjs/components/Skeleton/useSkeletonStyles.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/SkeletonItem.js +16 -12
- package/lib-commonjs/components/SkeletonItem/SkeletonItem.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/SkeletonItem.types.js +3 -2
- package/lib-commonjs/components/SkeletonItem/SkeletonItem.types.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/index.js +9 -8
- package/lib-commonjs/components/SkeletonItem/index.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/renderSkeletonItem.js +13 -18
- package/lib-commonjs/components/SkeletonItem/renderSkeletonItem.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js +28 -41
- package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.js +333 -215
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.js.map +1 -1
- package/lib-commonjs/contexts/SkeletonContext.js +18 -11
- package/lib-commonjs/contexts/SkeletonContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +5 -4
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/index.js +27 -79
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -8
package/.swcrc
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
+
"exclude": [
|
|
4
|
+
"/testing",
|
|
5
|
+
"/**/*.cy.ts",
|
|
6
|
+
"/**/*.cy.tsx",
|
|
7
|
+
"/**/*.spec.ts",
|
|
8
|
+
"/**/*.spec.tsx",
|
|
9
|
+
"/**/*.test.ts",
|
|
10
|
+
"/**/*.test.tsx"
|
|
11
|
+
],
|
|
12
|
+
"jsc": {
|
|
13
|
+
"parser": {
|
|
14
|
+
"syntax": "typescript",
|
|
15
|
+
"tsx": true,
|
|
16
|
+
"decorators": false,
|
|
17
|
+
"dynamicImport": false
|
|
18
|
+
},
|
|
19
|
+
"externalHelpers": true,
|
|
20
|
+
"transform": {
|
|
21
|
+
"react": {
|
|
22
|
+
"runtime": "classic",
|
|
23
|
+
"useSpread": true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"target": "es2019"
|
|
27
|
+
},
|
|
28
|
+
"minify": false,
|
|
29
|
+
"sourceMaps": true
|
|
30
|
+
}
|
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,79 @@
|
|
|
2
2
|
"name": "@fluentui/react-skeleton",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 23 Mar 2023 12:28:45 GMT",
|
|
6
|
+
"tag": "@fluentui/react-skeleton_v9.0.0-beta.5",
|
|
7
|
+
"version": "9.0.0-beta.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-skeleton",
|
|
13
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.28",
|
|
14
|
+
"commit": "be0ca69899300abe3c8478c435e0f6837138479b"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-skeleton",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
|
|
20
|
+
"commit": "be0ca69899300abe3c8478c435e0f6837138479b"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 21 Mar 2023 21:23:02 GMT",
|
|
27
|
+
"tag": "@fluentui/react-skeleton_v9.0.0-beta.4",
|
|
28
|
+
"version": "9.0.0-beta.4",
|
|
29
|
+
"comments": {
|
|
30
|
+
"prerelease": [
|
|
31
|
+
{
|
|
32
|
+
"author": "tristan.watanabe@gmail.com",
|
|
33
|
+
"package": "@fluentui/react-skeleton",
|
|
34
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
|
35
|
+
"comment": "chore: migrate to swc transpilation approach."
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "tristan.watanabe@gmail.com",
|
|
39
|
+
"package": "@fluentui/react-skeleton",
|
|
40
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
|
41
|
+
"comment": "fix: add node field to package.json exports map."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-skeleton",
|
|
46
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.27",
|
|
47
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-skeleton",
|
|
52
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
|
|
53
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-skeleton",
|
|
58
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
|
59
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-skeleton",
|
|
64
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
|
65
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-skeleton",
|
|
70
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
|
71
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
|
6
78
|
"tag": "@fluentui/react-skeleton_v9.0.0-beta.3",
|
|
7
79
|
"version": "9.0.0-beta.3",
|
|
8
80
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-skeleton
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 23 Mar 2023 12:28:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.0-beta.5)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Mar 2023 12:28:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.0-beta.4..@fluentui/react-skeleton_v9.0.0-beta.5)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.28 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.0-beta.4)
|
|
18
|
+
|
|
19
|
+
Tue, 21 Mar 2023 21:23:02 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.0-beta.3..@fluentui/react-skeleton_v9.0.0-beta.4)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
|
25
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
|
26
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.27 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
27
|
+
- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
28
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
30
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.0-beta.3)
|
|
8
33
|
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
|
34
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.0-beta.2..@fluentui/react-skeleton_v9.0.0-beta.3)
|
|
11
36
|
|
|
12
37
|
### Changes
|
package/lib/Skeleton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Skeleton.ts"],"sourcesContent":["export * from './components/Skeleton/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/SkeletonItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export * from './components/SkeletonItem/index';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"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';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,wBAAwB,QAAQ;AAIzC;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBN,wBAAA,CAAyBK,KAAA;EAE/CN,0BAAA,CAA2BM,KAAA;EAC3B,OAAOP,uBAAA,CAAwBO,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"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 */\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"],"mappings":"AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Skeleton/index.ts"],"sourcesContent":["export * from './Skeleton';\nexport * from './Skeleton.types';\nexport * from './renderSkeleton';\nexport * from './useSkeleton';\nexport * from './useSkeletonContextValues';\nexport * from './useSkeletonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -11,8 +11,6 @@ export const renderSkeleton_unstable = (state, contextValues) => {
|
|
|
11
11
|
} = getSlots(state);
|
|
12
12
|
return /*#__PURE__*/React.createElement(SkeletonContextProvider, {
|
|
13
13
|
value: contextValues.skeletonGroup
|
|
14
|
-
}, /*#__PURE__*/React.createElement(slots.root,
|
|
15
|
-
...slotProps.root
|
|
16
|
-
}));
|
|
14
|
+
}, /*#__PURE__*/React.createElement(slots.root, slotProps.root));
|
|
17
15
|
};
|
|
18
16
|
//# sourceMappingURL=renderSkeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","slots","slotProps","createElement","value","skeletonGroup","root"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","slots","slotProps","createElement","value","skeletonGroup","root"],"sources":["../../../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<SkeletonSlots>(state);\n\n return (\n <SkeletonContextProvider value={contextValues.skeletonGroup}>\n <slots.root {...slotProps.root} />\n </SkeletonContextProvider>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,uBAAuB,QAAQ;AAGxC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAwBG,KAAA;EAErD,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,uBAAA;IAAwBO,KAAA,EAAOJ,aAAA,CAAcK;kBAC5CV,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAGpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getNativeElementProps","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","role","components"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","role","components"],"sources":["../../../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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 = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-busy': true,\n 'aria-label': 'Loading Content',\n ...props,\n });\n\n return {\n animation,\n appearance,\n components: {\n root: 'div',\n },\n root,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAA+C;EACxG,MAAM;IAAEC,SAAA,EAAWC,gBAAA;IAAkBC,UAAA,EAAYC;EAAiB,CAAE,GAAGP,kBAAA;EACvE,MAAM;IAAEI,SAAA,GAAYC,gBAAA,aAAAA,gBAAA,cAAAA,gBAAA,GAAoB,MAAM;IAAEC,UAAA,GAAaC,iBAAA,aAAAA,iBAAA,cAAAA,iBAAA,GAAqB;EAAQ,CAAE,GAAGL,KAAA;EAE/F,MAAMM,IAAA,GAAOT,qBAAA,CAAsB,OAAO;IACxCI,GAAA;IACAM,IAAA,EAAM;IACN,aAAa,IAAI;IACjB,cAAc;IACd,GAAGP;EACL;EAEA,OAAO;IACLE,SAAA;IACAE,UAAA;IACAI,UAAA,EAAY;MACVF,IAAA,EAAM;IACR;IACAA;EACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,OAAO,MAAMC,wBAAA,GAA4BC,KAAA,IAAgD;EACvF,MAAM;IAAEC,SAAA;IAAWC;EAAU,CAAE,GAAGF,KAAA;EAElC,MAAMG,aAAA,GAAgBL,KAAA,CAAMM,OAAO,CACjC,OAAO;IACLH,SAAA;IACAC;EACF,IACA,CAACD,SAAA,EAAWC,UAAA,CAAW;EAGzB,OAAO;IAAEC;EAAc;AACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mergeClasses","skeletonClassNames","root","useSkeletonStyles_unstable","state","className"],"sources":["
|
|
1
|
+
{"version":3,"names":["mergeClasses","skeletonClassNames","root","useSkeletonStyles_unstable","state","className"],"sources":["../../../src/components/Skeleton/useSkeletonStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n root: 'fui-Skeleton',\n};\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);\n\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;AACR;AAEA;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAwC;EACjFA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGL,YAAA,CAAaC,kBAAA,CAAmBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAEjF,OAAOD,KAAA;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"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';\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAI/C,OAAO,MAAMC,YAAA,gBAAuDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQP,wBAAA,CAAyBK,KAAA,EAAOC,GAAA;EAE9CJ,8BAAA,CAA+BK,KAAA;EAC/B,OAAON,2BAAA,CAA4BM,KAAA;AACrC;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"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"],"mappings":"AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/SkeletonItem/index.ts"],"sourcesContent":["export * from './SkeletonItem';\nexport * from './SkeletonItem.types';\nexport * from './renderSkeletonItem';\nexport * from './useSkeletonItem';\nexport * from './useSkeletonItemStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -8,8 +8,6 @@ export const renderSkeletonItem_unstable = state => {
|
|
|
8
8
|
slots,
|
|
9
9
|
slotProps
|
|
10
10
|
} = getSlots(state);
|
|
11
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
12
|
-
...slotProps.root
|
|
13
|
-
});
|
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root);
|
|
14
12
|
};
|
|
15
13
|
//# sourceMappingURL=renderSkeletonItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getSlots","renderSkeletonItem_unstable","state","slots","slotProps","createElement","root"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getSlots","renderSkeletonItem_unstable","state","slots","slotProps","createElement","root"],"sources":["../../../src/components/SkeletonItem/renderSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<SkeletonItemSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,2BAAA,GAA+BC,KAAA,IAA6B;EACvE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA4BE,KAAA;EAEzD,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;AACvC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getNativeElementProps","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","components"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","components"],"sources":["../../../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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 = getNativeElementProps('div', {\n ref,\n ...props,\n });\n\n return {\n appearance,\n animation,\n size,\n shape,\n components: {\n root: 'div',\n },\n root,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AAGnC;;;;;;;;;AASA,OAAO,MAAMC,wBAAA,GAA2BA,CAACC,KAAA,EAA0BC,GAAA,KAAmD;EACpH,MAAM;IAAEC,SAAA,EAAWC,gBAAA;IAAkBC,UAAA,EAAYC;EAAiB,CAAE,GAAGP,kBAAA;EACvE,MAAM;IACJI,SAAA,GAAYC,gBAAA,aAAAA,gBAAA,cAAAA,gBAAA,GAAoB,MAAM;IACtCC,UAAA,GAAaC,iBAAA,aAAAA,iBAAA,cAAAA,iBAAA,GAAqB,QAAQ;IAC1CC,IAAA,GAAO;IACPC,KAAA,GAAQ;EAAW,CACpB,GAAGP,KAAA;EAEJ,MAAMQ,IAAA,GAAOX,qBAAA,CAAsB,OAAO;IACxCI,GAAA;IACA,GAAGD;EACL;EAEA,OAAO;IACLI,UAAA;IACAF,SAAA;IACAI,IAAA;IACAC,KAAA;IACAE,UAAA,EAAY;MACVD,IAAA,EAAM;IACR;IACAA;EACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","useFluent_unstable","useFluent","tokens","skeletonItemClassNames","root","skeletonWaveAnimationRTL","from","backgroundPositionX","to","skeletonWaveAnimation","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bkjc3bi","B8a6bjv","Bpptf2m","Bgh53k4","w3vfg9","vin17d","Ezkn3b","wave","Bv12yb3","Bcmaq0h","Bpep1pd","waveRtl","pulse","De3pzq","translucent","translucentPulse","d","k","m","useRectangleStyles","Bqenvij","a9b677","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","dir","rootStyles","rectStyles","sizeStyles","circleStyles","className"],"sources":["
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","useFluent_unstable","useFluent","tokens","skeletonItemClassNames","root","skeletonWaveAnimationRTL","from","backgroundPositionX","to","skeletonWaveAnimation","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bkjc3bi","B8a6bjv","Bpptf2m","Bgh53k4","w3vfg9","vin17d","Ezkn3b","wave","Bv12yb3","Bcmaq0h","Bpep1pd","waveRtl","pulse","De3pzq","translucent","translucentPulse","d","k","m","useRectangleStyles","Bqenvij","a9b677","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","dir","rootStyles","rectStyles","sizeStyles","circleStyles","className"],"sources":["../../../src/components/SkeletonItem/useSkeletonItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimationRTL = {\n from: {\n backgroundPositionX: '300% /* @noflip */',\n },\n to: {\n backgroundPositionX: '0% /* @noflip */',\n },\n};\n\nconst skeletonWaveAnimation = {\n from: {\n backgroundPositionX: '0% /* @noflip */',\n },\n to: {\n backgroundPositionX: '300% /* @noflip */',\n },\n};\n\nconst skeletonPulseAnimation = {\n from: {\n opacity: '1',\n },\n to: {\n opacity: '0.4',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n ...shorthands.overflow('hidden'),\n backgroundSize: '300% 100%',\n backgroundPositionX: 'center',\n backgroundPositionY: 'center',\n backgroundAttachment: 'fixed',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n },\n wave: {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText',\n },\n },\n waveRtl: {\n animationName: skeletonWaveAnimationRTL,\n },\n pulse: {\n animationName: skeletonPulseAnimation,\n backgroundColor: tokens.colorNeutralStencil1,\n },\n translucent: {\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1Alpha} 0%,\n ${tokens.colorNeutralStencil2Alpha} 50%,\n ${tokens.colorNeutralStencil1Alpha} 100%)`,\n },\n translucentPulse: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n },\n});\n\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n ...shorthands.borderRadius('4px'),\n },\n 8: { height: '8px' },\n 12: { height: '12px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 24: { height: '24px' },\n 28: { height: '28px' },\n 32: { height: '32px' },\n 36: { height: '36px' },\n 40: { height: '40px' },\n 48: { height: '48px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 96: { height: '96px' },\n 120: { height: '120px' },\n 128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n 8: { width: '8px', height: '8px' },\n 12: { width: '12px', height: '12px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n root: {\n ...shorthands.borderRadius('50%'),\n },\n});\n\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n const { animation, appearance, size, shape } = state;\n const { dir } = useFluent();\n\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n\n state.root.className = mergeClasses(\n skeletonItemClassNames.root,\n rootStyles.root,\n animation === 'wave' && rootStyles.wave,\n animation === 'wave' && dir === 'rtl' && rootStyles.waveRtl,\n animation === 'pulse' && rootStyles.pulse,\n appearance === 'translucent' && rootStyles.translucent,\n animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n shape === 'rectangle' && rectStyles.root,\n shape === 'rectangle' && rectStyles[size],\n shape === 'square' && sizeStyles[size],\n shape === 'circle' && circleStyles.root,\n shape === 'circle' && sizeStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -2,8 +2,6 @@ import * as React from 'react';
|
|
|
2
2
|
const SkeletonContext = /*#__PURE__*/React.createContext(undefined);
|
|
3
3
|
const skeletonContextDefaultValue = {};
|
|
4
4
|
export const SkeletonContextProvider = SkeletonContext.Provider;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return (_a = React.useContext(SkeletonContext)) !== null && _a !== void 0 ? _a : skeletonContextDefaultValue;
|
|
8
|
-
};
|
|
5
|
+
var _React_useContext;
|
|
6
|
+
export const useSkeletonContext = () => (_React_useContext = React.useContext(SkeletonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : skeletonContextDefaultValue;
|
|
9
7
|
//# sourceMappingURL=SkeletonContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","
|
|
1
|
+
{"version":3,"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","_React_useContext","useSkeletonContext","useContext"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,MAAMC,eAAA,gBAAkBD,KAAA,CAAME,aAAa,CAAmCC,SAAA;AAO9E,MAAMC,2BAAA,GAAoD,CAAC;AAE3D,OAAO,MAAMC,uBAAA,GAA0BJ,eAAA,CAAgBK,QAAQ;IAEvBC,iBAAA;AAAxC,OAAO,MAAMC,kBAAA,GAAqBA,CAAA,KAAM,CAAAD,iBAAA,GAAAP,KAAA,CAAMS,UAAU,CAACR,eAAA,eAAjBM,iBAAA,cAAAA,iBAAA,GAAqCH,2BAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './SkeletonContext';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","SkeletonContextProvider","useSkeletonContext"],"sources":["../src/
|
|
1
|
+
{"version":3,"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","SkeletonContextProvider","useSkeletonContext"],"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"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,QACf;AAEP,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB;AAEP,SAASC,uBAAuB,EAAEC,kBAAkB,QAAQ"}
|
package/lib-commonjs/Skeleton.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/Skeleton/index"), exports);
|
|
7
|
+
//# sourceMappingURL=Skeleton.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/Skeleton.js"],"sourcesContent":["export * from './components/Skeleton/index';\n//# sourceMappingURL=Skeleton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,oCAAoC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/SkeletonItem/index"), exports);
|
|
7
|
+
//# sourceMappingURL=SkeletonItem.js.map
|
|
8
|
+
|
|
8
9
|
//# sourceMappingURL=SkeletonItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../lib/SkeletonItem.js"],"sourcesContent":["export * from './components/SkeletonItem/index';\n//# sourceMappingURL=SkeletonItem.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,wCAAwC"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Skeleton", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>Skeleton
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const contextValues = useSkeletonContextValues_1.useSkeletonContextValues(state);
|
|
18
|
-
useSkeletonStyles_1.useSkeletonStyles_unstable(state);
|
|
19
|
-
return renderSkeleton_1.renderSkeleton_unstable(state, contextValues);
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const _useSkeleton = require("./useSkeleton");
|
|
12
|
+
const _renderSkeleton = require("./renderSkeleton");
|
|
13
|
+
const _useSkeletonStyles = require("./useSkeletonStyles");
|
|
14
|
+
const _useSkeletonContextValues = require("./useSkeletonContextValues");
|
|
15
|
+
const Skeleton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
|
+
const state = (0, _useSkeleton.useSkeleton_unstable)(props, ref);
|
|
17
|
+
const contextValues = (0, _useSkeletonContextValues.useSkeletonContextValues)(state);
|
|
18
|
+
(0, _useSkeletonStyles.useSkeletonStyles_unstable)(state);
|
|
19
|
+
return (0, _renderSkeleton.renderSkeleton_unstable)(state, contextValues);
|
|
20
20
|
});
|
|
21
|
-
|
|
21
|
+
Skeleton.displayName = 'Skeleton'; //# sourceMappingURL=Skeleton.js.map
|
|
22
|
+
|
|
22
23
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Skeleton/Skeleton.js"],"sourcesContent":["import * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n useSkeletonStyles_unstable(state);\n return renderSkeleton_unstable(state, contextValues);\n});\nSkeleton.displayName = 'Skeleton';\n//# sourceMappingURL=Skeleton.js.map"],"names":["Skeleton","React","forwardRef","props","ref","state","useSkeleton_unstable","contextValues","useSkeletonContextValues","useSkeletonStyles_unstable","renderSkeleton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACc;gCACG;mCACG;0CACF;AAIlC,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAwB,EAACH;IAC/CI,IAAAA,6CAA0B,EAACJ;IAC3B,OAAOK,IAAAA,uCAAuB,EAACL,OAAOE;AACxC;AACAP,SAASW,WAAW,GAAG,YACvB,oCAAoC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Skeleton/Skeleton.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Skeleton.types.js.map"],"names":[],"mappings":";;;;CACA,0CAA0C"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./Skeleton"), exports);
|
|
7
|
+
_exportStar(require("./Skeleton.types"), exports);
|
|
8
|
+
_exportStar(require("./renderSkeleton"), exports);
|
|
9
|
+
_exportStar(require("./useSkeleton"), exports);
|
|
10
|
+
_exportStar(require("./useSkeletonContextValues"), exports);
|
|
11
|
+
_exportStar(require("./useSkeletonStyles"), exports);
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
13
|
+
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Skeleton/index.js"],"sourcesContent":["export * from './Skeleton';\nexport * from './Skeleton.types';\nexport * from './renderSkeleton';\nexport * from './useSkeleton';\nexport * from './useSkeletonContextValues';\nexport * from './useSkeletonStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|