@semcore/skeleton 4.0.7 → 4.1.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 CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [4.1.0] - 2022-09-22
6
+
7
+ ### Changed
8
+
9
+ - All skeletons are `aria-busy` from now.
10
+
11
+ ## [4.0.8] - 2022-08-30
12
+
13
+ ### Changed
14
+
15
+ - Version patch update due to children dependencies update (`@semcore/utils` [3.37.0 ~> 3.37.1], `@semcore/flex-box` [4.5.10 ~> 4.5.11]).
16
+
5
17
  ## [4.0.7] - 2022-08-18
6
18
 
7
19
  ### Changed
@@ -52,17 +52,17 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SSkeleton_y7f5z_gg_{-webkit-animation-name:pulse_y7f5z;animation-name:pulse_y7f5z;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_y7f5z);animation-duration:var(--durationAnim_y7f5z);will-change:opacity}@-webkit-keyframes pulse_y7f5z{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_y7f5z{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_y7f5z_gg_._theme_invert_y7f5z_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_y7f5z_gg_._theme_dark_y7f5z_gg_{fill:hsla(0,0%,100%,.3)}.___SText_y7f5z_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_y7f5z_gg_{-webkit-animation-name:none;animation-name:none}}"
55
+ ".___SSkeleton_1sa82_gg_{-webkit-animation-name:pulse_1sa82;animation-name:pulse_1sa82;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_1sa82);animation-duration:var(--durationAnim_1sa82);will-change:opacity}@-webkit-keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1sa82_gg_._theme_invert_1sa82_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1sa82_gg_._theme_dark_1sa82_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1sa82_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1sa82_gg_{-webkit-animation-name:none;animation-name:none}}"
56
56
  /*__inner_css_end__*/
57
- , "y7f5z_gg_")
57
+ , "1sa82_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SSkeleton": "___SSkeleton_y7f5z_gg_",
61
- "--durationAnim": "--durationAnim_y7f5z",
62
- "@pulse": "pulse_y7f5z",
63
- "_theme_invert": "_theme_invert_y7f5z_gg_",
64
- "_theme_dark": "_theme_dark_y7f5z_gg_",
65
- "__SText": "___SText_y7f5z_gg_"
60
+ "__SSkeleton": "___SSkeleton_1sa82_gg_",
61
+ "--durationAnim": "--durationAnim_1sa82",
62
+ "@pulse": "pulse_1sa82",
63
+ "_theme_invert": "_theme_invert_1sa82_gg_",
64
+ "_theme_dark": "_theme_dark_1sa82_gg_",
65
+ "__SText": "___SText_1sa82_gg_"
66
66
  });
67
67
  var MAP_COLOR_THEME = {
68
68
  dark: 'rgba(255, 255, 255, 0.3)',
@@ -104,7 +104,9 @@ var Skeleton = /*#__PURE__*/function (_Component) {
104
104
  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSkeleton, _ref2.cn("SSkeleton", _objectSpread({}, (0, _core.assignProps)({
105
105
  "tag": "svg",
106
106
  "preserveAspectRatio": "none",
107
- "durationAnim": "".concat(duration, "ms")
107
+ "durationAnim": "".concat(duration, "ms"),
108
+ "aria-busy": "true",
109
+ "aria-atomic": "true"
108
110
  }, _ref))), /*#__PURE__*/_react["default"].createElement("defs", _ref2.cn("defs", {}), /*#__PURE__*/_react["default"].createElement("mask", _ref2.cn("mask", {
109
111
  "id": uid
110
112
  }), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})))), /*#__PURE__*/_react["default"].createElement("rect", _ref2.cn("rect", {
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","names":["MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Box","Children","styles","duration","hidden","uid","sstyled","Component","style","width","height","uniqueIDEnhancement","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","ref","defaultProps","createComponent"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton render={Box} tag=\"svg\" preserveAspectRatio=\"none\" durationAnim={`${duration}ms`}>\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"Skeleton.js","names":["MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Box","Children","styles","duration","hidden","uid","sstyled","Component","style","width","height","uniqueIDEnhancement","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","ref","defaultProps","createComponent"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton\n render={Box}\n tag=\"svg\"\n preserveAspectRatio=\"none\"\n durationAnim={`${duration}ms`}\n aria-busy=\"true\"\n aria-atomic=\"true\"\n >\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,eAAe,GAAG;EACtBC,IAAI,EAAE,0BADgB;EAEtBC,MAAM,EAAE;AAFc,CAAxB;;IAKMC,Q;;;;;;;;;;;;WAWJ,sBAAa;MACX,IAAQC,KAAR,GAAkB,KAAKC,OAAvB,CAAQD,KAAR;MACA,OAAO;QACLE,WAAW,EAAEN,eAAe,CAACI,KAAD;MADvB,CAAP;IAGD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMG,SAAS,GAOHC,YAPZ;MACA,oBAAoD,KAAKH,OAAzD;MAAA,IAAQI,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,MAAlB,iBAAkBA,MAAlB;MAAA,IAA0BC,QAA1B,iBAA0BA,QAA1B;MAAA,IAAoCC,MAApC,iBAAoCA,MAApC;MAAA,IAA4CC,GAA5C,iBAA4CA,GAA5C;MAEA,IAAID,MAAJ,EAAY,OAAO,IAAP;MAEZ,eAAO,IAAAE,aAAA,EAAQJ,MAAR,CAAP,eACE,gCAAC,SAAD;QAAA,OAEM,KAFN;QAAA,uBAGsB,MAHtB;QAAA,0BAImBC,QAJnB;QAAA,aAKY,MALZ;QAAA,eAMc;MANd,yBAQE,2EACE;QAAA,MAAUE;MAAV,iBACE,gCAAC,QAAD,2BADF,CADF,CARF,eAaE;QAAA,KAAQ,GAAR;QAAA,KAAc,GAAd;QAAA,SAAwB,MAAxB;QAAA,UAAsC,MAAtC;QAAA,uBAA2DA,GAA3D;MAAA,GAbF,CADF;IAiBD;;;EAzCoBE,e;;iCAAjBZ,Q,iBACiB,U;iCADjBA,Q,WAEWa,K;iCAFXb,Q,kBAGkB;EACpBc,KAAK,EAAE,MADa;EAEpBC,MAAM,EAAE,MAFY;EAGpBd,KAAK,EAAE,QAHa;EAIpBO,QAAQ,EAAE;AAJU,C;iCAHlBR,Q,aASa,CAAC,IAAAgB,oBAAA,GAAD,C;;AAmCnB,SAASC,IAAT,CAAcC,KAAd,EAAqB;EACnB,IAAMC,KAAK,GAAGd,YAAd;EACA,IAAQe,MAAR,GAAuDF,KAAvD,CAAQE,MAAR;EAAA,IAAgBC,CAAhB,GAAuDH,KAAvD,CAAgBG,CAAhB;EAAA,IAAmBC,CAAnB,GAAuDJ,KAAvD,CAAmBI,CAAnB;EAAA,IAAsBf,MAAtB,GAAuDW,KAAvD,CAAsBX,MAAtB;EAAA,IAA8BgB,UAA9B,GAAuDL,KAAvD,CAA8BK,UAA9B;EAAA,IAA6CC,KAA7C,6CAAuDN,KAAvD;EACA,IAAMO,UAAU,GAAGC,MAAM,CAACN,MAAD,CAAzB;;EAEA,IAAMO,UAAU,GAAG,SAAbA,UAAa,CAACT,KAAD,EAAW;IAAA;;IAC5B,eAAO,IAAAP,aAAA,EAAQJ,MAAR,CAAP,eAAuB,gCAAC,KAAD;MAAA,OAAW,MAAX;MAAA,MAAqB,GAArB;MAAA,MAA4B,GAA5B;MAAA,UAAuC;IAAvC,GAA+CW,KAA/C,GAAvB;EACD,CAFD;;EAIA,oBACE,gCAAC,iBAAD,CAAO,QAAP,QACG,oCAAIU,KAAK,CAACH,UAAD,CAAT,EAAuBI,GAAvB,CAA2B,UAACC,EAAD,EAAKC,KAAL;IAAA,OAC1BJ,UAAU;MACRK,GAAG,EAAED,KADG;MAERV,CAAC,EAAEA,CAAC,IAAI,KAAKU,KAFL;MAGRT,CAAC,EAADA,CAHQ;MAIRW,GAAG,EAAEV;IAJG,GAKLC,KALK,EADgB;EAAA,CAA3B,CADH,CADF;AAaD;;AAEDP,IAAI,CAACiB,YAAL,GAAoB;EAClBZ,CAAC,EAAE,CADe;EAElBD,CAAC,EAAE,CAFe;EAGlBD,MAAM,EAAE,CAHU;EAIlBN,KAAK,EAAE;AAJW,CAApB;;eAOe,IAAAqB,gBAAA,EAAgBnC,QAAhB,EAA0B;EACvCiB,IAAI,EAAJA;AADuC,CAA1B,C"}
@@ -28,17 +28,17 @@ var style = (
28
28
  /*__reshadow_css_start__*/
29
29
  _sstyled.insert(
30
30
  /*__inner_css_start__*/
31
- ".___SSkeleton_y7f5z_gg_{-webkit-animation-name:pulse_y7f5z;animation-name:pulse_y7f5z;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_y7f5z);animation-duration:var(--durationAnim_y7f5z);will-change:opacity}@-webkit-keyframes pulse_y7f5z{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_y7f5z{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_y7f5z_gg_._theme_invert_y7f5z_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_y7f5z_gg_._theme_dark_y7f5z_gg_{fill:hsla(0,0%,100%,.3)}.___SText_y7f5z_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_y7f5z_gg_{-webkit-animation-name:none;animation-name:none}}"
31
+ ".___SSkeleton_1sa82_gg_{-webkit-animation-name:pulse_1sa82;animation-name:pulse_1sa82;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:var(--durationAnim_1sa82);animation-duration:var(--durationAnim_1sa82);will-change:opacity}@-webkit-keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes pulse_1sa82{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.___SSkeleton_1sa82_gg_._theme_invert_1sa82_gg_{fill:rgba(224,225,233,.8)}.___SSkeleton_1sa82_gg_._theme_dark_1sa82_gg_{fill:hsla(0,0%,100%,.3)}.___SText_1sa82_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1sa82_gg_{-webkit-animation-name:none;animation-name:none}}"
32
32
  /*__inner_css_end__*/
33
- , "y7f5z_gg_")
33
+ , "1sa82_gg_")
34
34
  /*__reshadow_css_end__*/
35
35
  , {
36
- "__SSkeleton": "___SSkeleton_y7f5z_gg_",
37
- "--durationAnim": "--durationAnim_y7f5z",
38
- "@pulse": "pulse_y7f5z",
39
- "_theme_invert": "_theme_invert_y7f5z_gg_",
40
- "_theme_dark": "_theme_dark_y7f5z_gg_",
41
- "__SText": "___SText_y7f5z_gg_"
36
+ "__SSkeleton": "___SSkeleton_1sa82_gg_",
37
+ "--durationAnim": "--durationAnim_1sa82",
38
+ "@pulse": "pulse_1sa82",
39
+ "_theme_invert": "_theme_invert_1sa82_gg_",
40
+ "_theme_dark": "_theme_dark_1sa82_gg_",
41
+ "__SText": "___SText_1sa82_gg_"
42
42
  });
43
43
  var MAP_COLOR_THEME = {
44
44
  dark: 'rgba(255, 255, 255, 0.3)',
@@ -81,7 +81,9 @@ var Skeleton = /*#__PURE__*/function (_Component) {
81
81
  return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SSkeleton, _ref2.cn("SSkeleton", _objectSpread({}, _assignProps({
82
82
  "tag": "svg",
83
83
  "preserveAspectRatio": "none",
84
- "durationAnim": "".concat(duration, "ms")
84
+ "durationAnim": "".concat(duration, "ms"),
85
+ "aria-busy": "true",
86
+ "aria-atomic": "true"
85
87
  }, _ref))), /*#__PURE__*/React.createElement("defs", _ref2.cn("defs", {}), /*#__PURE__*/React.createElement("mask", _ref2.cn("mask", {
86
88
  "id": uid
87
89
  }), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})))), /*#__PURE__*/React.createElement("rect", _ref2.cn("rect", {
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.js","names":["React","createComponent","Component","sstyled","Root","Box","uniqueIDEnhancement","MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Children","styles","duration","hidden","uid","style","width","height","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","ref","defaultProps"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton render={Box} tag=\"svg\" preserveAspectRatio=\"none\" durationAnim={`${duration}ms`}>\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"Skeleton.js","names":["React","createComponent","Component","sstyled","Root","Box","uniqueIDEnhancement","MAP_COLOR_THEME","dark","invert","Skeleton","theme","asProps","gradientUrl","SSkeleton","Children","styles","duration","hidden","uid","style","width","height","Text","props","SText","amount","y","x","forwardRef","other","amountLine","Number","renderRect","Array","map","el","index","key","ref","defaultProps"],"sources":["../../src/Skeleton.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/skeleton.shadow.css';\n\nconst MAP_COLOR_THEME = {\n dark: 'rgba(255, 255, 255, 0.3)',\n invert: 'rgba(224, 225, 233, 0.8)',\n};\n\nclass Skeleton extends Component {\n static displayName = 'Skeleton';\n static style = style;\n static defaultProps = {\n width: '100%',\n height: '100%',\n theme: 'invert',\n duration: 2000,\n };\n static enhance = [uniqueIDEnhancement()];\n\n setContext() {\n const { theme } = this.asProps;\n return {\n gradientUrl: MAP_COLOR_THEME[theme],\n };\n }\n\n render() {\n const SSkeleton = Root;\n const { Children, styles, duration, hidden, uid } = this.asProps;\n\n if (hidden) return null;\n\n return sstyled(styles)(\n <SSkeleton\n render={Box}\n tag=\"svg\"\n preserveAspectRatio=\"none\"\n durationAnim={`${duration}ms`}\n aria-busy=\"true\"\n aria-atomic=\"true\"\n >\n <defs>\n <mask id={uid}>\n <Children />\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" mask={`url(#${uid})`} />\n </SSkeleton>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Box;\n const { amount, y, x, styles, forwardRef, ...other } = props;\n const amountLine = Number(amount);\n\n const renderRect = (props) => {\n return sstyled(styles)(<SText tag=\"rect\" rx=\"4\" ry=\"4\" height=\"8\" {...props} />);\n };\n\n return (\n <React.Fragment>\n {[...Array(amountLine)].map((el, index) =>\n renderRect({\n key: index,\n y: y || 20 * index,\n x,\n ref: forwardRef,\n ...other,\n }),\n )}\n </React.Fragment>\n );\n}\n\nText.defaultProps = {\n x: 0,\n y: 0,\n amount: 1,\n width: '100%',\n};\n\nexport default createComponent(Skeleton, {\n Text,\n});\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/skeleton",
3
3
  "description": "Semrush Skeleton Component",
4
- "version": "4.0.7",
4
+ "version": "4.1.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "types": "lib/types/index.d.ts",