@semcore/spin-container 7.41.0-prerelease.1 → 7.41.0-prerelease.12

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [7.41.0] - 2025-02-27
+## [7.41.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.0], `@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]).
+- Build for ESM.
 
 ## [7.40.4] - 2025-02-05
 

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 T from "@babel/runtime/helpers/esm/assertThisInitialized";
+import x from "@babel/runtime/helpers/esm/inherits";
+import k from "@babel/runtime/helpers/esm/createSuper";
+import m from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as A } from "@semcore/utils/lib/core/index";
+import M, { sstyled as h, assignProps as f, Component as b } from "@semcore/core";
+import i from "react";
+import { FadeInOut as $ } from "@semcore/animation";
+import w from "@semcore/spin";
+import { Box as y } from "@semcore/flex-box";
+import F from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import { isAdvanceMode as I } from "@semcore/utils/lib/findComponent";
+var R = (
+  /*__reshadow_css_start__*/
+  (A.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)}",
+    "1l6x4_gg_"
+  ), {
+    __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"
+  })
+), u = /* @__PURE__ */ function(s) {
+  x(r, s);
+  var l = 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 = l.call.apply(l, [this].concat(t)), m(T(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, c = e.size, _ = e.theme, d = e.resolveColor;
+      return {
+        background: n,
+        // for Animated
+        loading: t,
+        duration: o,
+        // for Spin
+        size: c,
+        theme: _,
+        resolveColor: d
+      };
+    }
+  }, {
+    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, c = o.styles, _ = o.Children, d = o.forcedAdvancedMode, p = d || I(_, [g.Overlay.displayName]);
+      return t = h(c), /* @__PURE__ */ i.createElement(n, t.cn("SSpinContainer", v({}, f({}, e))), p ? /* @__PURE__ */ i.createElement(_, t.cn("Children", {})) : /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(g.Content, null, /* @__PURE__ */ i.createElement(_, t.cn("Children", {}))), /* @__PURE__ */ i.createElement(g.Overlay, null)));
+    }
+  }]), r;
+}(b);
+m(u, "displayName", "SpinContainer");
+m(u, "style", R);
+m(u, "defaultProps", {
+  size: "xxl",
+  theme: "dark",
+  duration: 200
+});
+m(u, "enhance", [F()]);
+var P = /* @__PURE__ */ function(s) {
+  x(r, s);
+  var l = k(r);
+  function r() {
+    return C(this, r), l.apply(this, arguments);
+  }
+  return S(r, [{
+    key: "render",
+    value: function() {
+      var e = this.asProps, t, n = y, o = this.asProps, c = o.styles, _ = o.theme, d = o.background, p = o.loading, O = o.duration, E = o.resolveColor, z = d ? "custom" : _;
+      return t = h(c), /* @__PURE__ */ i.createElement($, t.cn("FadeInOut", {
+        visible: p,
+        duration: O
+      }), /* @__PURE__ */ i.createElement(n, t.cn("SOverlay", v({}, f({
+        "use:theme": z,
+        "use:background": E(d)
+      }, e)))));
+    }
+  }]), r;
+}(b);
+m(P, "defaultProps", function(s) {
+  var l = s.size, r = s.theme;
+  return {
+    children: /* @__PURE__ */ i.createElement(w, {
+      size: l,
+      theme: r
+    })
+  };
+});
+function j(s) {
+  var l = arguments[0], r, a = y, e = s.styles;
+  return r = h(e), /* @__PURE__ */ i.createElement(a, r.cn("SContent", v({}, f({}, l))));
+}
+var g = M(u, {
+  Overlay: P,
+  Content: j
+});
+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.1",
+  "version": "7.41.0-prerelease.12",
   "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.0-prerelease.1",
-    "@semcore/spin": "5.41.0-prerelease.1",
-    "@semcore/flex-box": "5.41.0-prerelease.1",
-    "@semcore/animation": "2.41.0-prerelease.1"
+    "@semcore/utils": "4.48.0-prerelease.12",
+    "@semcore/spin": "5.41.0-prerelease.12",
+    "@semcore/flex-box": "5.41.0-prerelease.12",
+    "@semcore/animation": "2.41.0-prerelease.12"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.1",
+    "@semcore/core": "^2.39.0-prerelease.12",
     "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\/*/],
+      },
+    },
+  }),
+);