@digigov/react-core 2.0.0-rc.26 → 2.0.0-rc.27
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/Skeleton/index.js +2 -1
- package/Skeleton/index.js.map +2 -2
- package/cjs/Skeleton/index.js +2 -1
- package/cjs/Skeleton/index.js.map +2 -2
- package/cjs/lazy/index.js +244 -1220
- package/cjs/lazy.js.map +3 -3
- package/cjs/registry/index.js +211 -593
- package/cjs/registry.js.map +3 -3
- package/index.js +1 -1
- package/lazy/index.js +246 -1226
- package/package.json +3 -3
- package/registry/index.js +287 -670
- package/src/Skeleton/index.tsx +3 -2
- package/src/lazy.js +244 -1220
- package/src/registry.js +463 -843
- package/lazy.d.ts +0 -247
- package/lazy.js.map +0 -7
- package/registry.d.ts +0 -265
- package/registry.js.map +0 -7
package/Skeleton/index.js
CHANGED
|
@@ -34,8 +34,9 @@ const Skeleton = React.forwardRef(
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
variant === "button" && /* @__PURE__ */ React.createElement(
|
|
37
|
-
|
|
37
|
+
Base,
|
|
38
38
|
{
|
|
39
|
+
as: "span",
|
|
39
40
|
className: clsx({
|
|
40
41
|
"ds-skeleton__line": true,
|
|
41
42
|
"ds-skeleton__line--size-default": width === void 0 && height === void 0
|
package/Skeleton/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Skeleton/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface SkeletonProps extends BaseProps<'span'> {\n /**\n * variant prop determines the style of the skeleton element.\n * @value 'circular', it renders a circular skeleton.\n * @value 'rectangular', it renders a rectangular skeleton.\n * @value 'text', it renders a text skeleton.\n * @value 'button', it renders a button skeleton.\n * @default 'text'\n */\n variant?: 'circular' | 'rectangular' | 'text' | 'button';\n\n /**\n * width prop determines the width of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * For better responsive experience, avoid using px and use percentage instead.\n * @default undefined\n */\n width?: number | string;\n\n /**\n * height prop determines the height of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * @default undefined\n */\n height?: number | string;\n\n /**\n * fontSize is optional. 'sm' is the default value.\n * Use 'xl' when this Skeleton is for a main page title.\n * The fontSize works only for variant 'text'.\n * You don't need fontSize if you wrap Skeleton in a typography component.\n * @value 'xl'\n * @value 'lg'\n * @value 'md'\n * @value 'sm'\n * @value 'xs'\n * @default 'sm'\n */\n fontSize?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';\n /**\n * animation prop determines if the skeleton should animate or not.\n * @default true\n */\n animation?: boolean;\n}\n/**\n * Use Skeleton component while a page is loading.\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n function Skeleton(\n {\n width,\n height,\n fontSize,\n variant = 'text',\n animation = true,\n className,\n children,\n style,\n ...props\n },\n ref\n ) {\n return (\n <Base\n as=\"span\"\n ref={ref}\n className={clsx(className, {\n 'ds-skeleton': true,\n [`ds-skeleton--font-${fontSize}`]:\n fontSize !== undefined && variant === 'text',\n [`ds-skeleton--${variant}`]:\n !!variant && (!children || typeof children === 'string'),\n 'ds-skeleton--animate': !!animation,\n 'ds-skeleton--width-fit-content': !!children && !width,\n })}\n {...props}\n style={{\n width:\n typeof children === 'string'\n ? Math.ceil(children.length * 0.5) + 'em'\n : width,\n maxWidth: width ? '100%' : undefined,\n height: height,\n ...style,\n }}\n >\n {variant === 'button' && (\n <span\n className={clsx({\n 'ds-skeleton__line': true,\n 'ds-skeleton__line--size-default':\n width === undefined && height === undefined,\n })}\n ></
|
|
5
|
-
"mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAkDzB,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,WAAW,KAAK,WAAW;AAAA,UACzB,eAAe;AAAA,UACf,CAAC,qBAAqB,QAAQ,EAAE,GAC9B,aAAa,UAAa,YAAY;AAAA,UACxC,CAAC,gBAAgB,OAAO,EAAE,GACxB,CAAC,CAAC,YAAY,CAAC,YAAY,OAAO,aAAa;AAAA,UACjD,wBAAwB,CAAC,CAAC;AAAA,UAC1B,kCAAkC,CAAC,CAAC,YAAY,CAAC;AAAA,QACnD,CAAC;AAAA,QACA,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,OACE,OAAO,aAAa,WAChB,KAAK,KAAK,SAAS,SAAS,GAAG,IAAI,OACnC;AAAA,UACN,UAAU,QAAQ,SAAS;AAAA,UAC3B;AAAA,UACA,GAAG;AAAA,QACL;AAAA;AAAA,MAEC,YAAY,YACX;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK;AAAA,YACd,qBAAqB;AAAA,YACrB,mCACE,UAAU,UAAa,WAAW;AAAA,UACtC,CAAC;AAAA;AAAA,MACF;AAAA,MAEF,OAAO,YAAY,YAAY;AAAA,IAClC;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;",
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface SkeletonProps extends BaseProps<'span'> {\n /**\n * variant prop determines the style of the skeleton element.\n * @value 'circular', it renders a circular skeleton.\n * @value 'rectangular', it renders a rectangular skeleton.\n * @value 'text', it renders a text skeleton.\n * @value 'button', it renders a button skeleton.\n * @default 'text'\n */\n variant?: 'circular' | 'rectangular' | 'text' | 'button';\n\n /**\n * width prop determines the width of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * For better responsive experience, avoid using px and use percentage instead.\n * @default undefined\n */\n width?: number | string;\n\n /**\n * height prop determines the height of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * @default undefined\n */\n height?: number | string;\n\n /**\n * fontSize is optional. 'sm' is the default value.\n * Use 'xl' when this Skeleton is for a main page title.\n * The fontSize works only for variant 'text'.\n * You don't need fontSize if you wrap Skeleton in a typography component.\n * @value 'xl'\n * @value 'lg'\n * @value 'md'\n * @value 'sm'\n * @value 'xs'\n * @default 'sm'\n */\n fontSize?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';\n /**\n * animation prop determines if the skeleton should animate or not.\n * @default true\n */\n animation?: boolean;\n}\n/**\n * Use Skeleton component while a page is loading.\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n function Skeleton(\n {\n width,\n height,\n fontSize,\n variant = 'text',\n animation = true,\n className,\n children,\n style,\n ...props\n },\n ref\n ) {\n return (\n <Base\n as=\"span\"\n ref={ref}\n className={clsx(className, {\n 'ds-skeleton': true,\n [`ds-skeleton--font-${fontSize}`]:\n fontSize !== undefined && variant === 'text',\n [`ds-skeleton--${variant}`]:\n !!variant && (!children || typeof children === 'string'),\n 'ds-skeleton--animate': !!animation,\n 'ds-skeleton--width-fit-content': !!children && !width,\n })}\n {...props}\n style={{\n width:\n typeof children === 'string'\n ? Math.ceil(children.length * 0.5) + 'em'\n : width,\n maxWidth: width ? '100%' : undefined,\n height: height,\n ...style,\n }}\n >\n {variant === 'button' && (\n <Base\n as=\"span\"\n className={clsx({\n 'ds-skeleton__line': true,\n 'ds-skeleton__line--size-default':\n width === undefined && height === undefined,\n })}\n ></Base>\n )}\n {typeof children != 'string' && children}\n </Base>\n );\n }\n);\n\nexport default Skeleton;\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAkDzB,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,WAAW,KAAK,WAAW;AAAA,UACzB,eAAe;AAAA,UACf,CAAC,qBAAqB,QAAQ,EAAE,GAC9B,aAAa,UAAa,YAAY;AAAA,UACxC,CAAC,gBAAgB,OAAO,EAAE,GACxB,CAAC,CAAC,YAAY,CAAC,YAAY,OAAO,aAAa;AAAA,UACjD,wBAAwB,CAAC,CAAC;AAAA,UAC1B,kCAAkC,CAAC,CAAC,YAAY,CAAC;AAAA,QACnD,CAAC;AAAA,QACA,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,OACE,OAAO,aAAa,WAChB,KAAK,KAAK,SAAS,SAAS,GAAG,IAAI,OACnC;AAAA,UACN,UAAU,QAAQ,SAAS;AAAA,UAC3B;AAAA,UACA,GAAG;AAAA,QACL;AAAA;AAAA,MAEC,YAAY,YACX;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,WAAW,KAAK;AAAA,YACd,qBAAqB;AAAA,YACrB,mCACE,UAAU,UAAa,WAAW;AAAA,UACtC,CAAC;AAAA;AAAA,MACF;AAAA,MAEF,OAAO,YAAY,YAAY;AAAA,IAClC;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["Skeleton"]
|
|
7
7
|
}
|
package/cjs/Skeleton/index.js
CHANGED
|
@@ -67,8 +67,9 @@ const Skeleton = import_react.default.forwardRef(
|
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
69
|
variant === "button" && /* @__PURE__ */ import_react.default.createElement(
|
|
70
|
-
|
|
70
|
+
import_Base.default,
|
|
71
71
|
{
|
|
72
|
+
as: "span",
|
|
72
73
|
className: (0, import_clsx.default)({
|
|
73
74
|
"ds-skeleton__line": true,
|
|
74
75
|
"ds-skeleton__line--size-default": width === void 0 && height === void 0
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Skeleton/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface SkeletonProps extends BaseProps<'span'> {\n /**\n * variant prop determines the style of the skeleton element.\n * @value 'circular', it renders a circular skeleton.\n * @value 'rectangular', it renders a rectangular skeleton.\n * @value 'text', it renders a text skeleton.\n * @value 'button', it renders a button skeleton.\n * @default 'text'\n */\n variant?: 'circular' | 'rectangular' | 'text' | 'button';\n\n /**\n * width prop determines the width of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * For better responsive experience, avoid using px and use percentage instead.\n * @default undefined\n */\n width?: number | string;\n\n /**\n * height prop determines the height of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * @default undefined\n */\n height?: number | string;\n\n /**\n * fontSize is optional. 'sm' is the default value.\n * Use 'xl' when this Skeleton is for a main page title.\n * The fontSize works only for variant 'text'.\n * You don't need fontSize if you wrap Skeleton in a typography component.\n * @value 'xl'\n * @value 'lg'\n * @value 'md'\n * @value 'sm'\n * @value 'xs'\n * @default 'sm'\n */\n fontSize?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';\n /**\n * animation prop determines if the skeleton should animate or not.\n * @default true\n */\n animation?: boolean;\n}\n/**\n * Use Skeleton component while a page is loading.\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n function Skeleton(\n {\n width,\n height,\n fontSize,\n variant = 'text',\n animation = true,\n className,\n children,\n style,\n ...props\n },\n ref\n ) {\n return (\n <Base\n as=\"span\"\n ref={ref}\n className={clsx(className, {\n 'ds-skeleton': true,\n [`ds-skeleton--font-${fontSize}`]:\n fontSize !== undefined && variant === 'text',\n [`ds-skeleton--${variant}`]:\n !!variant && (!children || typeof children === 'string'),\n 'ds-skeleton--animate': !!animation,\n 'ds-skeleton--width-fit-content': !!children && !width,\n })}\n {...props}\n style={{\n width:\n typeof children === 'string'\n ? Math.ceil(children.length * 0.5) + 'em'\n : width,\n maxWidth: width ? '100%' : undefined,\n height: height,\n ...style,\n }}\n >\n {variant === 'button' && (\n <span\n className={clsx({\n 'ds-skeleton__line': true,\n 'ds-skeleton__line--size-default':\n width === undefined && height === undefined,\n })}\n ></
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAkDzB,MAAM,WAAW,aAAAA,QAAM;AAAA,EAC5B,SAASC,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE,6BAAAD,QAAA;AAAA,MAAC,YAAAE;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,eAAW,YAAAC,SAAK,WAAW;AAAA,UACzB,eAAe;AAAA,UACf,CAAC,qBAAqB,QAAQ,EAAE,GAC9B,aAAa,UAAa,YAAY;AAAA,UACxC,CAAC,gBAAgB,OAAO,EAAE,GACxB,CAAC,CAAC,YAAY,CAAC,YAAY,OAAO,aAAa;AAAA,UACjD,wBAAwB,CAAC,CAAC;AAAA,UAC1B,kCAAkC,CAAC,CAAC,YAAY,CAAC;AAAA,QACnD,CAAC;AAAA,QACA,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,OACE,OAAO,aAAa,WAChB,KAAK,KAAK,SAAS,SAAS,GAAG,IAAI,OACnC;AAAA,UACN,UAAU,QAAQ,SAAS;AAAA,UAC3B;AAAA,UACA,GAAG;AAAA,QACL;AAAA;AAAA,MAEC,YAAY,YACX,6BAAAH,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface SkeletonProps extends BaseProps<'span'> {\n /**\n * variant prop determines the style of the skeleton element.\n * @value 'circular', it renders a circular skeleton.\n * @value 'rectangular', it renders a rectangular skeleton.\n * @value 'text', it renders a text skeleton.\n * @value 'button', it renders a button skeleton.\n * @default 'text'\n */\n variant?: 'circular' | 'rectangular' | 'text' | 'button';\n\n /**\n * width prop determines the width of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * For better responsive experience, avoid using px and use percentage instead.\n * @default undefined\n */\n width?: number | string;\n\n /**\n * height prop determines the height of the skeleton element.\n * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').\n * @default undefined\n */\n height?: number | string;\n\n /**\n * fontSize is optional. 'sm' is the default value.\n * Use 'xl' when this Skeleton is for a main page title.\n * The fontSize works only for variant 'text'.\n * You don't need fontSize if you wrap Skeleton in a typography component.\n * @value 'xl'\n * @value 'lg'\n * @value 'md'\n * @value 'sm'\n * @value 'xs'\n * @default 'sm'\n */\n fontSize?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';\n /**\n * animation prop determines if the skeleton should animate or not.\n * @default true\n */\n animation?: boolean;\n}\n/**\n * Use Skeleton component while a page is loading.\n */\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n function Skeleton(\n {\n width,\n height,\n fontSize,\n variant = 'text',\n animation = true,\n className,\n children,\n style,\n ...props\n },\n ref\n ) {\n return (\n <Base\n as=\"span\"\n ref={ref}\n className={clsx(className, {\n 'ds-skeleton': true,\n [`ds-skeleton--font-${fontSize}`]:\n fontSize !== undefined && variant === 'text',\n [`ds-skeleton--${variant}`]:\n !!variant && (!children || typeof children === 'string'),\n 'ds-skeleton--animate': !!animation,\n 'ds-skeleton--width-fit-content': !!children && !width,\n })}\n {...props}\n style={{\n width:\n typeof children === 'string'\n ? Math.ceil(children.length * 0.5) + 'em'\n : width,\n maxWidth: width ? '100%' : undefined,\n height: height,\n ...style,\n }}\n >\n {variant === 'button' && (\n <Base\n as=\"span\"\n className={clsx({\n 'ds-skeleton__line': true,\n 'ds-skeleton__line--size-default':\n width === undefined && height === undefined,\n })}\n ></Base>\n )}\n {typeof children != 'string' && children}\n </Base>\n );\n }\n);\n\nexport default Skeleton;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAkDzB,MAAM,WAAW,aAAAA,QAAM;AAAA,EAC5B,SAASC,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE,6BAAAD,QAAA;AAAA,MAAC,YAAAE;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,eAAW,YAAAC,SAAK,WAAW;AAAA,UACzB,eAAe;AAAA,UACf,CAAC,qBAAqB,QAAQ,EAAE,GAC9B,aAAa,UAAa,YAAY;AAAA,UACxC,CAAC,gBAAgB,OAAO,EAAE,GACxB,CAAC,CAAC,YAAY,CAAC,YAAY,OAAO,aAAa;AAAA,UACjD,wBAAwB,CAAC,CAAC;AAAA,UAC1B,kCAAkC,CAAC,CAAC,YAAY,CAAC;AAAA,QACnD,CAAC;AAAA,QACA,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,OACE,OAAO,aAAa,WAChB,KAAK,KAAK,SAAS,SAAS,GAAG,IAAI,OACnC;AAAA,UACN,UAAU,QAAQ,SAAS;AAAA,UAC3B;AAAA,UACA,GAAG;AAAA,QACL;AAAA;AAAA,MAEC,YAAY,YACX,6BAAAH,QAAA;AAAA,QAAC,YAAAE;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,eAAW,YAAAC,SAAK;AAAA,YACd,qBAAqB;AAAA,YACrB,mCACE,UAAU,UAAa,WAAW;AAAA,UACtC,CAAC;AAAA;AAAA,MACF;AAAA,MAEF,OAAO,YAAY,YAAY;AAAA,IAClC;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["React", "Skeleton", "Base", "clsx"]
|
|
7
7
|
}
|