@semcore/skeleton 4.4.10 → 4.4.12

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.4.10] - 2023-02-21
+## [4.4.12] - 2023-03-16
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.47.0 ~> 3.47.1], `@semcore/flex-box` [4.7.9 ~> 4.7.10]).
+- Version patch update due to children dependencies update (`@semcore/utils` [3.47.2 ~> 3.47.3], `@semcore/flex-box` [4.7.11 ~> 4.7.12]).
 
 ## [4.4.8] - 2023-02-09
 

package/lib/cjs/Skeleton.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,15 +13,15 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -35,34 +35,22 @@ var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 
 var _excluded = ["amount", "y", "x", "styles", "forwardRef"];
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /*__reshadow-styles__:"./style/skeleton.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-"@keyframes pulse_wgski{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_wgski_gg_{animation-name:pulse_wgski;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_wgski);will-change:opacity}.___SSkeleton_wgski_gg_._theme_invert_wgski_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeleton_wgski_gg_._theme_dark_wgski_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_wgski_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_wgski_gg_{animation-name:none}}"
+"@keyframes pulse_1qpxv{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1qpxv_gg_{animation-name:pulse_1qpxv;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1qpxv);will-change:opacity}.___SSkeleton_1qpxv_gg_._theme_invert_1qpxv_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeleton_1qpxv_gg_._theme_dark_1qpxv_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1qpxv_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1qpxv_gg_{animation-name:none}}"
 /*__inner_css_end__*/
-, "wgski_gg_")
+, "1qpxv_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSkeleton": "___SSkeleton_wgski_gg_",
-  "--durationAnim": "--durationAnim_wgski",
-  "@pulse": "pulse_wgski",
-  "_theme_invert": "_theme_invert_wgski_gg_",
-  "_theme_dark": "_theme_dark_wgski_gg_",
-  "__SText": "___SText_wgski_gg_"
+  "__SSkeleton": "___SSkeleton_1qpxv_gg_",
+  "--durationAnim": "--durationAnim_1qpxv",
+  "@pulse": "pulse_1qpxv",
+  "_theme_invert": "_theme_invert_1qpxv_gg_",
+  "_theme_dark": "_theme_dark_1qpxv_gg_",
+  "__SText": "___SText_1qpxv_gg_"
 });
 var MAP_COLOR_THEME = {
   dark: 'rgba(255, 255, 255, 0.3)',
@@ -72,7 +60,7 @@ var MAP_COLOR_THEME = {
 var Skeleton = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Skeleton, _Component);
 
-  var _super = _createSuper(Skeleton);
+  var _super = (0, _createSuper2["default"])(Skeleton);
 
   function Skeleton() {
     (0, _classCallCheck2["default"])(this, Skeleton);
@@ -101,7 +89,7 @@ var Skeleton = /*#__PURE__*/function (_Component) {
           hidden = _this$asProps.hidden,
           uid = _this$asProps.uid;
       if (hidden) return null;
-      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSkeleton, _ref2.cn("SSkeleton", _objectSpread({}, (0, _core.assignProps)({
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSkeleton, _ref2.cn("SSkeleton", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "tag": "svg",
         "preserveAspectRatio": "none",
         "durationAnim": "".concat(duration, "ms"),
@@ -144,7 +132,7 @@ function Text(props) {
   var renderRect = function renderRect(props) {
     var _ref3;
 
-    return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref3.cn("SText", _objectSpread({
+    return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref3.cn("SText", (0, _objectSpread2["default"])({
       "tag": "rect",
       "rx": "4",
       "ry": "4",
@@ -153,7 +141,7 @@ function Text(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _toConsumableArray2["default"])(Array(amountLine)).map(function (el, index) {
-    return renderRect(_objectSpread({
+    return renderRect((0, _objectSpread2["default"])({
       key: index,
       y: y || 20 * index,
       x: x,

package/lib/cjs/Skeleton.js.map

@@ -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\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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"}
+{"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":"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"}

package/lib/es6/Skeleton.js

@@ -1,23 +1,14 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 var _excluded = ["amount", "y", "x", "styles", "forwardRef"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
@@ -28,17 +19,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-"@keyframes pulse_wgski{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_wgski_gg_{animation-name:pulse_wgski;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_wgski);will-change:opacity}.___SSkeleton_wgski_gg_._theme_invert_wgski_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeleton_wgski_gg_._theme_dark_wgski_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_wgski_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_wgski_gg_{animation-name:none}}"
+"@keyframes pulse_1qpxv{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1qpxv_gg_{animation-name:pulse_1qpxv;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1qpxv);will-change:opacity}.___SSkeleton_1qpxv_gg_._theme_invert_1qpxv_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeleton_1qpxv_gg_._theme_dark_1qpxv_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1qpxv_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1qpxv_gg_{animation-name:none}}"
 /*__inner_css_end__*/
-, "wgski_gg_")
+, "1qpxv_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSkeleton": "___SSkeleton_wgski_gg_",
-  "--durationAnim": "--durationAnim_wgski",
-  "@pulse": "pulse_wgski",
-  "_theme_invert": "_theme_invert_wgski_gg_",
-  "_theme_dark": "_theme_dark_wgski_gg_",
-  "__SText": "___SText_wgski_gg_"
+  "__SSkeleton": "___SSkeleton_1qpxv_gg_",
+  "--durationAnim": "--durationAnim_1qpxv",
+  "@pulse": "pulse_1qpxv",
+  "_theme_invert": "_theme_invert_1qpxv_gg_",
+  "_theme_dark": "_theme_dark_1qpxv_gg_",
+  "__SText": "___SText_1qpxv_gg_"
 });
 var MAP_COLOR_THEME = {
   dark: 'rgba(255, 255, 255, 0.3)',

package/lib/es6/Skeleton.js.map

@@ -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\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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"}
+{"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

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/skeleton",
   "description": "Semrush Skeleton Component",
-  "version": "4.4.10",
+  "version": "4.4.12",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",