@semcore/spin-container 7.41.0-prerelease.9 → 7.41.1-prerelease.0

package/CHANGELOG.md

@@ -2,11 +2,17 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [7.41.0] - 2025-02-28
+## [7.41.1] - 2025-03-17
 
 ### Changed
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/spin` [5.40.1 ~> 5.41.0], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/animation` [2.40.1 ~> 2.41.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Version patch update due to children dependencies update (`@semcore/utils` [4.48.0 ~> 4.48.1], `@semcore/spin` [5.41.0 ~> 5.41.1], `@semcore/flex-box` [5.41.0 ~> 5.41.1], `@semcore/animation` [2.41.0 ~> 2.41.1], `@semcore/core` [2.39.0 ~> 2.39.1]).
+
+## [7.41.0] - 2025-03-14
+
+### Added
+
+- Build for ESM.
 
 ## [7.40.4] - 2025-02-05
 

package/lib/cjs/SpinContainer.js

@@ -22,14 +22,14 @@ var _flexBox = require("@semcore/flex-box");
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
 var _findComponent = require("@semcore/utils/lib/findComponent");
 /*__reshadow-styles__:"./style/spin-container.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SSpinContainer_1l6x4_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1l6x4_gg_{z-index:0;position:relative}.___SOverlay_1l6x4_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1l6x4_gg_._theme_invert_1l6x4_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_1l6x4_gg_._theme_dark_1l6x4_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_1l6x4_gg_._theme_custom_1l6x4_gg_{background-color:var(--background_1l6x4)}" /*__inner_css_end__*/, "1l6x4_gg_") /*__reshadow_css_end__*/, {
-  "__SSpinContainer": "___SSpinContainer_1l6x4_gg_",
-  "__SContent": "___SContent_1l6x4_gg_",
-  "__SOverlay": "___SOverlay_1l6x4_gg_",
-  "_theme_invert": "_theme_invert_1l6x4_gg_",
-  "_theme_dark": "_theme_dark_1l6x4_gg_",
-  "_theme_custom": "_theme_custom_1l6x4_gg_",
-  "--background": "--background_1l6x4"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SSpinContainer_1j2p5_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1j2p5_gg_{z-index:0;position:relative}.___SOverlay_1j2p5_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1j2p5_gg_._theme_invert_1j2p5_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_1j2p5_gg_._theme_dark_1j2p5_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_1j2p5_gg_._theme_custom_1j2p5_gg_{background-color:var(--background_1j2p5)}" /*__inner_css_end__*/, "1j2p5_gg_") /*__reshadow_css_end__*/, {
+  "__SSpinContainer": "___SSpinContainer_1j2p5_gg_",
+  "__SContent": "___SContent_1j2p5_gg_",
+  "__SOverlay": "___SOverlay_1j2p5_gg_",
+  "_theme_invert": "_theme_invert_1j2p5_gg_",
+  "_theme_dark": "_theme_dark_1j2p5_gg_",
+  "_theme_custom": "_theme_custom_1j2p5_gg_",
+  "--background": "--background_1j2p5"
 });
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(SpinContainerRoot, _Component);

package/lib/es6/SpinContainer.js

@@ -17,14 +17,14 @@ import { Box } from '@semcore/flex-box';
 import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
 import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
 /*__reshadow-styles__:"./style/spin-container.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SSpinContainer_1l6x4_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1l6x4_gg_{z-index:0;position:relative}.___SOverlay_1l6x4_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1l6x4_gg_._theme_invert_1l6x4_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_1l6x4_gg_._theme_dark_1l6x4_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_1l6x4_gg_._theme_custom_1l6x4_gg_{background-color:var(--background_1l6x4)}" /*__inner_css_end__*/, "1l6x4_gg_") /*__reshadow_css_end__*/, {
-  "__SSpinContainer": "___SSpinContainer_1l6x4_gg_",
-  "__SContent": "___SContent_1l6x4_gg_",
-  "__SOverlay": "___SOverlay_1l6x4_gg_",
-  "_theme_invert": "_theme_invert_1l6x4_gg_",
-  "_theme_dark": "_theme_dark_1l6x4_gg_",
-  "_theme_custom": "_theme_custom_1l6x4_gg_",
-  "--background": "--background_1l6x4"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SSpinContainer_1j2p5_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1j2p5_gg_{z-index:0;position:relative}.___SOverlay_1j2p5_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1j2p5_gg_._theme_invert_1j2p5_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_1j2p5_gg_._theme_dark_1j2p5_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_1j2p5_gg_._theme_custom_1j2p5_gg_{background-color:var(--background_1j2p5)}" /*__inner_css_end__*/, "1j2p5_gg_") /*__reshadow_css_end__*/, {
+  "__SSpinContainer": "___SSpinContainer_1j2p5_gg_",
+  "__SContent": "___SContent_1j2p5_gg_",
+  "__SOverlay": "___SOverlay_1j2p5_gg_",
+  "_theme_invert": "_theme_invert_1j2p5_gg_",
+  "_theme_dark": "_theme_dark_1j2p5_gg_",
+  "_theme_custom": "_theme_custom_1j2p5_gg_",
+  "--background": "--background_1j2p5"
 });
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   _inherits(SpinContainerRoot, _Component);

package/lib/esm/SpinContainer.mjs

@@ -0,0 +1,133 @@
+import v from "@babel/runtime/helpers/esm/objectSpread2";
+import C from "@babel/runtime/helpers/esm/classCallCheck";
+import S from "@babel/runtime/helpers/esm/createClass";
+import x from "@babel/runtime/helpers/esm/assertThisInitialized";
+import j from "@babel/runtime/helpers/esm/inherits";
+import k from "@babel/runtime/helpers/esm/createSuper";
+import d from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as T } from "@semcore/utils/lib/core/index";
+import A, { sstyled as h, assignProps as f, Component as b } from "@semcore/core";
+import i from "react";
+import { FadeInOut as M } from "@semcore/animation";
+import $ from "@semcore/spin";
+import { Box as y } from "@semcore/flex-box";
+import w from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import { isAdvanceMode as F } from "@semcore/utils/lib/findComponent";
+var I = (
+  /*__reshadow_css_start__*/
+  (T.insert(
+    /*__inner_css_start__*/
+    ".___SSpinContainer_1j2p5_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1j2p5_gg_{z-index:0;position:relative}.___SOverlay_1j2p5_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1j2p5_gg_._theme_invert_1j2p5_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_1j2p5_gg_._theme_dark_1j2p5_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_1j2p5_gg_._theme_custom_1j2p5_gg_{background-color:var(--background_1j2p5)}",
+    "1j2p5_gg_"
+  ), {
+    __SSpinContainer: "___SSpinContainer_1j2p5_gg_",
+    __SContent: "___SContent_1j2p5_gg_",
+    __SOverlay: "___SOverlay_1j2p5_gg_",
+    _theme_invert: "_theme_invert_1j2p5_gg_",
+    _theme_dark: "_theme_dark_1j2p5_gg_",
+    _theme_custom: "_theme_custom_1j2p5_gg_",
+    "--background": "--background_1j2p5"
+  })
+), c = /* @__PURE__ */ function(s) {
+  j(r, s);
+  var _ = k(r);
+  function r() {
+    var a;
+    C(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)), d(x(a), "state", {
+      inert: a.props.loading
+    }), a;
+  }
+  return S(r, [{
+    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));
+    }
+  }, {
+    key: "getOverlayProps",
+    value: function() {
+      var e = this.asProps, t = e.loading, n = e.background, o = e.duration, m = e.size, l = e.theme, p = e.resolveColor;
+      return {
+        background: n,
+        // for Animated
+        loading: t,
+        duration: o,
+        // for Spin
+        size: m,
+        theme: l,
+        resolveColor: p
+      };
+    }
+  }, {
+    key: "getContentProps",
+    value: function() {
+      var e = this.state.inert;
+      return {
+        inert: e ? "" : void 0
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var e = this.asProps, t, n = y, o = this.asProps, m = o.styles, l = o.Children, p = o.forcedAdvancedMode, u = p || F(l, [g.Overlay.displayName]);
+      return t = h(m), /* @__PURE__ */ i.createElement(n, t.cn("SSpinContainer", v({}, f({}, e))), u ? /* @__PURE__ */ i.createElement(l, t.cn("Children", {})) : /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(g.Content, null, /* @__PURE__ */ i.createElement(l, t.cn("Children", {}))), /* @__PURE__ */ i.createElement(g.Overlay, null)));
+    }
+  }]), r;
+}(b);
+d(c, "displayName", "SpinContainer");
+d(c, "style", I);
+d(c, "defaultProps", {
+  size: "xxl",
+  theme: "dark",
+  duration: 200
+});
+d(c, "enhance", [w()]);
+var P = /* @__PURE__ */ function(s) {
+  j(r, s);
+  var _ = k(r);
+  function r() {
+    return C(this, r), _.apply(this, arguments);
+  }
+  return S(r, [{
+    key: "render",
+    value: function() {
+      var e = this.asProps, t, n = y, o = this.asProps, m = o.styles, l = o.theme, p = o.background, u = o.loading, O = o.duration, E = o.resolveColor, z = p ? "custom" : l;
+      return t = h(m), /* @__PURE__ */ i.createElement(M, t.cn("FadeInOut", {
+        visible: u,
+        duration: O
+      }), /* @__PURE__ */ i.createElement(n, t.cn("SOverlay", v({}, f({
+        "use:theme": z,
+        "use:background": E(p)
+      }, e)))));
+    }
+  }]), r;
+}(b);
+d(P, "defaultProps", function(s) {
+  var _ = s.size, r = s.theme;
+  return {
+    children: /* @__PURE__ */ i.createElement($, {
+      size: _,
+      theme: r
+    })
+  };
+});
+function R(s) {
+  var _ = arguments[0], r, a = y, e = s.styles;
+  return r = h(e), /* @__PURE__ */ i.createElement(a, r.cn("SContent", v({}, f({}, _))));
+}
+var g = A(c, {
+  Overlay: P,
+  Content: R
+});
+export {
+  g as default
+};

package/lib/esm/index.mjs

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

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@semcore/spin-container",
   "description": "Semrush SpinContainer Component",
-  "version": "7.41.0-prerelease.9",
+  "version": "7.41.1-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/utils": "4.47.1-prerelease.9",
-    "@semcore/spin": "5.41.0-prerelease.9",
-    "@semcore/flex-box": "5.41.0-prerelease.9",
-    "@semcore/animation": "2.41.0-prerelease.9"
+    "@semcore/utils": "4.48.1-prerelease.0",
+    "@semcore/spin": "5.41.1-prerelease.0",
+    "@semcore/flex-box": "5.41.1-prerelease.0",
+    "@semcore/animation": "2.41.1-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.9",
+    "@semcore/core": "^2.39.1-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -29,6 +34,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);