@semcore/spin-container 16.0.0-prerelease.4 → 16.0.0-prerelease.7

package/lib/esm/SpinContainer.mjs

@@ -1,132 +1,157 @@
-import h from "@babel/runtime/helpers/esm/objectSpread2";
-import y from "@babel/runtime/helpers/esm/classCallCheck";
-import C from "@babel/runtime/helpers/esm/createClass";
-import z from "@babel/runtime/helpers/esm/assertThisInitialized";
-import S from "@babel/runtime/helpers/esm/inherits";
-import k from "@babel/runtime/helpers/esm/createSuper";
-import c from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as p, createComponent as T, assignProps as f, Component as q } from "@semcore/core";
-import i from "react";
-import { FadeInOut as A } from "@semcore/animation";
-import M from "@semcore/spin";
-import { Box as x } from "@semcore/flex-box";
-import w from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import { isAdvanceMode as F } from "@semcore/core/lib/utils/findComponent";
-var I = (
+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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { FadeInOut } from "@semcore/animation";
+import Spin from "@semcore/spin";
+import { Box } from "@semcore/flex-box";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+var style = (
   /*__reshadow_css_start__*/
-  (p.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     ".___SSpinContainer_quxrx_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_quxrx_gg_{z-index:0;position:relative}.___SOverlay_quxrx_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_quxrx_gg_._theme_invert_quxrx_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_quxrx_gg_._theme_dark_quxrx_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_quxrx_gg_._theme_custom_quxrx_gg_{background-color:var(--background_quxrx)}",
     "quxrx_gg_"
   ), {
-    __SSpinContainer: "___SSpinContainer_quxrx_gg_",
-    __SContent: "___SContent_quxrx_gg_",
-    __SOverlay: "___SOverlay_quxrx_gg_",
-    _theme_invert: "_theme_invert_quxrx_gg_",
-    _theme_dark: "_theme_dark_quxrx_gg_",
-    _theme_custom: "_theme_custom_quxrx_gg_",
+    "__SSpinContainer": "___SSpinContainer_quxrx_gg_",
+    "__SContent": "___SContent_quxrx_gg_",
+    "__SOverlay": "___SOverlay_quxrx_gg_",
+    "_theme_invert": "_theme_invert_quxrx_gg_",
+    "_theme_dark": "_theme_dark_quxrx_gg_",
+    "_theme_custom": "_theme_custom_quxrx_gg_",
     "--background": "--background_quxrx"
   })
-), m = /* @__PURE__ */ function(s) {
-  S(r, s);
-  var _ = k(r);
-  function r() {
-    var a;
-    y(this, r);
-    for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++)
-      t[n] = arguments[n];
-    return a = _.call.apply(_, [this].concat(t)), c(z(a), "state", {
-      inert: a.props.loading
-    }), a;
+);
+var SpinContainerRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(SpinContainerRoot2, _Component);
+  var _super = _createSuper(SpinContainerRoot2);
+  function SpinContainerRoot2() {
+    var _this;
+    _classCallCheck(this, SpinContainerRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      inert: _this.props.loading
+    });
+    return _this;
   }
-  return C(r, [{
+  _createClass(SpinContainerRoot2, [{
     key: "componentDidUpdate",
-    value: function(e) {
-      var t = this, n = this.props.loading;
-      e.loading !== n && (this.inertTimer && clearTimeout(this.inertTimer), n ? this.setState({
-        inert: !0
-      }) : this.inertTimer = setTimeout(function() {
-        t.setState({
-          inert: !1
-        });
-      }, this.asProps.duration + 50));
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+      var loading = this.props.loading;
+      if (prevProps.loading !== loading) {
+        if (this.inertTimer) {
+          clearTimeout(this.inertTimer);
+        }
+        if (loading) {
+          this.setState({
+            inert: true
+          });
+        } else {
+          this.inertTimer = setTimeout(function() {
+            _this2.setState({
+              inert: false
+            });
+          }, this.asProps.duration + 50);
+        }
+      }
     }
   }, {
     key: "getOverlayProps",
-    value: function() {
-      var e = this.asProps, t = e.loading, n = e.background, o = e.duration, d = e.size, l = e.theme, u = e.resolveColor;
+    value: function getOverlayProps() {
+      var _this$asProps = this.asProps, loading = _this$asProps.loading, background = _this$asProps.background, duration = _this$asProps.duration, size = _this$asProps.size, theme = _this$asProps.theme, resolveColor = _this$asProps.resolveColor;
       return {
-        background: n,
+        background,
         // for Animated
-        loading: t,
-        duration: o,
+        loading,
+        duration,
         // for Spin
-        size: d,
-        theme: l,
-        resolveColor: u
+        size,
+        theme,
+        resolveColor
       };
     }
   }, {
     key: "getContentProps",
-    value: function() {
-      var e = this.state.inert;
+    value: function getContentProps() {
+      var inert = this.state.inert;
       return {
-        inert: e ? "" : void 0
+        inert: inert ? "" : void 0
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var e = this.asProps, t, n = x, o = this.asProps, d = o.styles, l = o.Children, u = o.forcedAdvancedMode, g = u || F(l, [v.Overlay.displayName]);
-      return t = p(d), /* @__PURE__ */ i.createElement(n, t.cn("SSpinContainer", h({}, f({}, e))), g ? /* @__PURE__ */ i.createElement(l, t.cn("Children", {})) : /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(v.Content, null, /* @__PURE__ */ i.createElement(l, t.cn("Children", {}))), /* @__PURE__ */ i.createElement(v.Overlay, null)));
+    value: function render() {
+      var _ref = this.asProps, _ref4;
+      var SSpinContainer = Box;
+      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, Children = _this$asProps2.Children, forcedAdvancedMode = _this$asProps2.forcedAdvancedMode;
+      var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [SpinContainer.Overlay.displayName]);
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SSpinContainer, _ref4.cn("SSpinContainer", _objectSpread({}, assignProps({}, _ref))), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SpinContainer.Content, null, /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))), /* @__PURE__ */ React.createElement(SpinContainer.Overlay, null)));
     }
-  }]), r;
-}(q);
-c(m, "displayName", "SpinContainer");
-c(m, "style", I);
-c(m, "defaultProps", {
+  }]);
+  return SpinContainerRoot2;
+}(Component);
+_defineProperty(SpinContainerRoot, "displayName", "SpinContainer");
+_defineProperty(SpinContainerRoot, "style", style);
+_defineProperty(SpinContainerRoot, "defaultProps", {
   size: "xxl",
   theme: "dark",
   duration: 200
 });
-c(m, "enhance", [w()]);
-var b = /* @__PURE__ */ function(s) {
-  S(r, s);
-  var _ = k(r);
-  function r() {
-    return y(this, r), _.apply(this, arguments);
+_defineProperty(SpinContainerRoot, "enhance", [resolveColorEnhance()]);
+var Overlay = /* @__PURE__ */ function(_Component2) {
+  _inherits(Overlay2, _Component2);
+  var _super2 = _createSuper(Overlay2);
+  function Overlay2() {
+    _classCallCheck(this, Overlay2);
+    return _super2.apply(this, arguments);
   }
-  return C(r, [{
+  _createClass(Overlay2, [{
     key: "render",
-    value: function() {
-      var e = this.asProps, t, n = x, o = this.asProps, d = o.styles, l = o.theme, u = o.background, g = o.loading, P = o.duration, O = o.resolveColor, E = u ? "custom" : l;
-      return t = p(d), /* @__PURE__ */ i.createElement(A, t.cn("FadeInOut", {
-        visible: g,
-        duration: P
-      }), /* @__PURE__ */ i.createElement(n, t.cn("SOverlay", h({}, f({
-        "use:theme": E,
-        "use:background": O(u)
-      }, e)))));
+    value: function render() {
+      var _ref2 = this.asProps, _ref5;
+      var SOverlay = Box;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, theme = _this$asProps3.theme, background = _this$asProps3.background, loading = _this$asProps3.loading, duration = _this$asProps3.duration, resolveColor = _this$asProps3.resolveColor;
+      var useTheme = background ? "custom" : theme;
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(FadeInOut, _ref5.cn("FadeInOut", {
+        "visible": loading,
+        "duration": duration
+      }), /* @__PURE__ */ React.createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, assignProps({
+        "use:theme": useTheme,
+        "use:background": resolveColor(background)
+      }, _ref2)))));
     }
-  }]), r;
-}(q);
-c(b, "defaultProps", function(s) {
-  var _ = s.size, r = s.theme;
+  }]);
+  return Overlay2;
+}(Component);
+_defineProperty(Overlay, "defaultProps", function(_ref7) {
+  var size = _ref7.size, theme = _ref7.theme;
   return {
-    children: /* @__PURE__ */ i.createElement(M, {
-      size: _,
-      theme: r
+    children: /* @__PURE__ */ React.createElement(Spin, {
+      size,
+      theme
     })
   };
 });
-function R(s) {
-  var _ = arguments[0], r, a = x, e = s.styles;
-  return r = p(e), /* @__PURE__ */ i.createElement(a, r.cn("SContent", h({}, f({}, _))));
+function Content(props) {
+  var _ref3 = arguments[0], _ref6;
+  var SContent = Box;
+  var styles = props.styles;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))));
 }
-var v = T(m, {
-  Overlay: b,
-  Content: R
+var SpinContainer = createComponent(SpinContainerRoot, {
+  Overlay,
+  Content
 });
 export {
-  v as default
+  SpinContainer as default
 };

package/lib/esm/index.mjs

@@ -1,4 +1,4 @@
-import { default as o } from "./SpinContainer.mjs";
+import { default as default2 } from "./SpinContainer.mjs";
 export {
-  o as default
+  default2 as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/spin-container",
   "description": "Semrush SpinContainer Component",
-  "version": "16.0.0-prerelease.4",
+  "version": "16.0.0-prerelease.7",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/spin": "16.0.0-prerelease.4",
-    "@semcore/flex-box": "16.0.0-prerelease.4",
-    "@semcore/animation": "16.0.0-prerelease.4"
+    "@semcore/spin": "16.0.0-prerelease.7",
+    "@semcore/flex-box": "16.0.0-prerelease.7",
+    "@semcore/animation": "16.0.0-prerelease.7"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.4"
+    "@semcore/base-components": "^16.0.0-prerelease.7"
   },
   "repository": {
     "type": "git",