@semcore/skeleton 16.0.11 → 17.0.0-prerelease.18

package/lib/esm/Skeleton.mjs

@@ -1,63 +1,54 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
-import { Box } from "@semcore/flex-box";
 import React from "react";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-var _excluded = ["y", "x", "amount", "width", "styles", "forwardRef"];
 /*!__reshadow-styles__:"./style/skeleton.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_5mvam{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_5mvam_gg_{animation-name:pulse_5mvam;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_5mvam);will-change:opacity}.___SSkeletonSVG_5mvam_gg_._theme_invert_5mvam_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_5mvam_gg_._theme_dark_5mvam_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_5mvam_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_5mvam_gg_{animation-name:none}}",
+    "@keyframes pulse_17nle{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_17nle_gg_{animation-name:pulse_17nle;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_17nle);will-change:opacity}.___SSkeletonSVG_17nle_gg_._theme_invert_17nle_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_17nle_gg_._theme_dark_17nle_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_17nle_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_17nle_gg_{animation-name:none}}",
     /*__inner_css_end__*/
-    "5mvam_gg_"
+    "17nle_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SSkeleton": "___SSkeleton_5mvam_gg_",
-    "--durationAnim": "--durationAnim_5mvam",
-    "@pulse": "pulse_5mvam",
-    "__SSkeletonSVG": "___SSkeletonSVG_5mvam_gg_",
-    "_theme_invert": "_theme_invert_5mvam_gg_",
-    "_theme_dark": "_theme_dark_5mvam_gg_",
-    "__SText": "___SText_5mvam_gg_"
+    "__SSkeleton": "___SSkeleton_17nle_gg_",
+    "--durationAnim": "--durationAnim_17nle",
+    "@pulse": "pulse_17nle",
+    "__SSkeletonSVG": "___SSkeletonSVG_17nle_gg_",
+    "_theme_invert": "_theme_invert_17nle_gg_",
+    "_theme_dark": "_theme_dark_17nle_gg_",
+    "__SText": "___SText_17nle_gg_"
   })
 );
-var MAP_COLOR_THEME = {
+const MAP_COLOR_THEME = {
   dark: "rgba(255, 255, 255, 0.3)",
   invert: "rgba(224, 225, 233, 0.8)"
 };
-var SkeletonRoot = /* @__PURE__ */ (function(_Component) {
-  function SkeletonRoot2() {
-    _classCallCheck(this, SkeletonRoot2);
-    return _callSuper(this, SkeletonRoot2, arguments);
-  }
-  _inherits(SkeletonRoot2, _Component);
-  return _createClass(SkeletonRoot2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref3;
-      var SSkeleton = Box;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, duration = _this$asProps.duration, hidden = _this$asProps.hidden, getI18nText = _this$asProps.getI18nText;
-      if (hidden) return null;
-      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeleton, _ref3.cn("SSkeleton", _objectSpread({}, assignProps({
-        "durationAnim": "".concat(duration, "ms"),
+class SkeletonRoot extends Component {
+  render() {
+    var _ref = this.asProps, _ref3;
+    const SSkeleton = Box;
+    const {
+      styles,
+      duration,
+      hidden,
+      getI18nText
+    } = this.asProps;
+    if (hidden) return null;
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeleton, _ref3.cn("SSkeleton", {
+      ...assignProps({
+        "durationAnim": `${duration}ms`,
         "role": "img",
         "aria-label": getI18nText("loading")
-      }, _ref))));
-    }
-  }]);
-})(Component);
+      }, _ref)
+    }));
+  }
+}
 _defineProperty(SkeletonRoot, "displayName", "Skeleton");
 _defineProperty(SkeletonRoot, "style", style);
 _defineProperty(SkeletonRoot, "enhance", [i18nEnhance(localizedMessages)]);
@@ -66,71 +57,66 @@ _defineProperty(SkeletonRoot, "defaultProps", {
   height: "100%",
   duration: 2e3
 });
-var SkeletonSVG = /* @__PURE__ */ (function(_Component2) {
-  function SkeletonSVG2(props) {
-    var _this;
-    _classCallCheck(this, SkeletonSVG2);
-    _this = _callSuper(this, SkeletonSVG2, [props]);
-    _defineProperty(_this, "svgRef", /* @__PURE__ */ React.createRef());
+class SkeletonSVG extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "svgRef", /* @__PURE__ */ React.createRef());
     if (canUseDOM() && props.observeParentSize) {
-      _this.observer = new ResizeObserver(_this.handleResize.bind(_this));
+      this.observer = new ResizeObserver(this.handleResize.bind(this));
     }
-    return _this;
   }
-  _inherits(SkeletonSVG2, _Component2);
-  return _createClass(SkeletonSVG2, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$observer, _this$svgRef$current;
-      (_this$observer = this.observer) === null || _this$observer === void 0 || _this$observer.observe((_this$svgRef$current = this.svgRef.current) === null || _this$svgRef$current === void 0 ? void 0 : _this$svgRef$current.parentElement);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$observer2;
-      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 || _this$observer2.disconnect();
-    }
-  }, {
-    key: "handleResize",
-    value: function handleResize(data) {
-      var target = data[0].target;
-      var svg = this.svgRef.current;
-      if (target && svg) {
-        svg.setAttribute("width", "100%");
-      }
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
-      var theme = this.asProps.theme;
-      return {
-        gradientUrl: MAP_COLOR_THEME[theme]
-      };
+  componentDidMount() {
+    var _a, _b;
+    (_b = this.observer) == null ? void 0 : _b.observe((_a = this.svgRef.current) == null ? void 0 : _a.parentElement);
+  }
+  componentWillUnmount() {
+    var _a;
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+  }
+  handleResize(data) {
+    const target = data[0].target;
+    const svg = this.svgRef.current;
+    if (target && svg) {
+      svg.setAttribute("width", "100%");
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps, _ref4;
-      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, uid = _this$asProps2.uid, theme = _this$asProps2.theme, duration = _this$asProps2.duration;
-      var SSkeletonSVG = Skeleton;
-      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeletonSVG, _ref4.cn("SSkeletonSVG", _objectSpread({}, assignProps({
+  }
+  setContext() {
+    const {
+      theme
+    } = this.asProps;
+    return {
+      gradientUrl: MAP_COLOR_THEME[theme]
+    };
+  }
+  render() {
+    var _ref2 = this.asProps, _ref4;
+    const {
+      Children,
+      styles,
+      uid,
+      theme,
+      duration
+    } = this.asProps;
+    const SSkeletonSVG = Skeleton;
+    return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeletonSVG, _ref4.cn("SSkeletonSVG", {
+      ...assignProps({
         "tag": "svg",
         "ref": this.svgRef,
         "preserveAspectRatio": "none",
         "theme": theme,
-        "durationAnim": "".concat(duration, "ms")
-      }, _ref2))), /* @__PURE__ */ React.createElement("defs", _ref4.cn("defs", {}), /* @__PURE__ */ React.createElement("mask", _ref4.cn("mask", {
-        "id": uid
-      }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))), /* @__PURE__ */ React.createElement("rect", _ref4.cn("rect", {
-        "x": "0",
-        "y": "0",
-        "width": "100%",
-        "height": "100%",
-        "mask": "url(#".concat(uid, ")")
-      })));
-    }
-  }]);
-})(Component);
+        "durationAnim": `${duration}ms`
+      }, _ref2)
+    }), /* @__PURE__ */ React.createElement("defs", _ref4.cn("defs", {}), /* @__PURE__ */ React.createElement("mask", _ref4.cn("mask", {
+      "id": uid
+    }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))), /* @__PURE__ */ React.createElement("rect", _ref4.cn("rect", {
+      "x": "0",
+      "y": "0",
+      "width": "100%",
+      "height": "100%",
+      "mask": `url(#${uid})`
+    })));
+  }
+}
 _defineProperty(SkeletonSVG, "displayName", "SkeletonSVG");
 _defineProperty(SkeletonSVG, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(SkeletonSVG, "style", style);
@@ -139,33 +125,41 @@ _defineProperty(SkeletonSVG, "defaultProps", {
   duration: 2e3
 });
 function Text(props) {
-  var SText = Box;
-  var _props$y = props.y, y = _props$y === void 0 ? 0 : _props$y, _props$x = props.x, x = _props$x === void 0 ? 0 : _props$x, _props$amount = props.amount, amount = _props$amount === void 0 ? 1 : _props$amount, _props$width = props.width, width = _props$width === void 0 ? "100%" : _props$width, styles = props.styles, forwardRef = props.forwardRef, other = _objectWithoutProperties(props, _excluded);
-  var amountLine = Number(amount);
-  var renderRect = function renderRect2(props2) {
+  const SText = Box;
+  const {
+    y = 0,
+    x = 0,
+    amount = 1,
+    width = "100%",
+    styles,
+    forwardRef,
+    ...other
+  } = props;
+  const amountLine = Number(amount);
+  const renderRect = (props2) => {
     var _ref5;
-    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", _objectSpread({
+    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", {
       "tag": "rect",
       "rx": "4",
       "ry": "4",
-      "height": "8"
-    }, props2)));
+      "height": "8",
+      ...props2
+    }));
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, _toConsumableArray(Array(amountLine)).map(function(_el, index) {
-    return renderRect(_objectSpread({
-      key: index,
-      y: y || 20 * index,
-      x,
-      ref: forwardRef,
-      width
-    }, other));
-  }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, [...Array(amountLine)].map((_el, index) => renderRect({
+    key: index,
+    y: y || 20 * index,
+    x,
+    ref: forwardRef,
+    width,
+    ...other
+  })));
 }
-var Skeleton = createComponent(SkeletonRoot);
-const Skeleton$1 = createComponent(SkeletonSVG, {
+const Skeleton = createComponent(SkeletonRoot);
+const Skeleton_default = createComponent(SkeletonSVG, {
   Text
 });
 export {
   Skeleton,
-  Skeleton$1 as default
+  Skeleton_default as default
 };

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -12,7 +12,7 @@ import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
-var localizedMessages = {
+const localizedMessages = {
   de,
   en,
   es,

package/lib/types/index.d.ts

@@ -1,9 +1,7 @@
-import type { Intergalactic, UnknownProperties } from '@semcore/core';
+import type { BoxProps } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
 import type { UniqueIDProps } from '@semcore/core/lib/utils/uniqueID';
-import type { BoxProps } from '@semcore/flex-box';
 
-/** @deprecated */
-export interface ISkeletonProps extends SkeletonProps, UnknownProperties {}
 export type SkeletonProps = BoxProps &
   UniqueIDProps & {
     /**
@@ -29,14 +27,10 @@ export type SkeletonProps = BoxProps &
     observeParentSize?: boolean;
   };
 
-/** @deprecated */
-export interface ISkeletonCtx extends SkeletonCtx, UnknownProperties {}
 export type SkeletonCtx = {
   gradientUrl: 'string';
 };
 
-/** @deprecated */
-export interface ISkeletonTextProps extends SkeletonTextProps, UnknownProperties {}
 export type SkeletonTextProps = BoxProps & {
   /**
    * Number of items to be returned

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/skeleton",
   "description": "Semrush Skeleton Component",
-  "version": "16.0.11",
+  "version": "17.0.0-prerelease.18",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
@@ -13,11 +13,8 @@
     "import": "./lib/esm/index.mjs",
     "types": "./lib/types/index.d.ts"
   },
-  "dependencies": {
-    "@semcore/flex-box": "16.0.11"
-  },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^17.0.0-prerelease.18"
   },
   "repository": {
     "type": "git",
@@ -25,8 +22,9 @@
     "directory": "semcore/skeleton"
   },
   "devDependencies": {
-    "@semcore/core": "16.5.1",
-    "@semcore/testing-utils": "1.0.0"
+    "@semcore/core": "17.0.0-prerelease.18",
+    "@semcore/testing-utils": "1.0.0",
+    "@semcore/base-components": "17.0.0-prerelease.18"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js && pnpm vite build"