@semcore/spin-container 5.0.4 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [6.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+
+## [5.1.0] - 2022-04-25
+
+### Fixed
+
+- Fixed scollable spin-container (e.g. in `data-table`).
+
+## [5.0.5] - 2022-04-03
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/animation` [1.5.0 ~> 1.5.0]).
+
 ## [5.0.4] - 2022-03-14
 
 ### Changed

package/lib/cjs/SpinContainer.js

@@ -52,16 +52,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SSpinContainer_1fs6p_gg_{z-index:0;position:relative;display:block}.___SContent_1fs6p_gg_{z-index:0;position:relative}.___SOverlay_1fs6p_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.85)}.___SOverlay_1fs6p_gg_.__background_1fs6p_gg_{background:var(--background_18krv29)}"
+".___SSpinContainer_1vd8z_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1vd8z_gg_{z-index:0;position:relative}.___SOverlay_1vd8z_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1vd8z_gg_._theme_invert_1vd8z_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1vd8z_gg_._theme_dark_1vd8z_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1vd8z_gg_._theme_custom_1vd8z_gg_{background-color:var(--background_1505dra)}"
 /*__inner_css_end__*/
-, "18krv29_gg_")
+, "1505dra_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpinContainer": "___SSpinContainer_1fs6p_gg_",
-  "__SContent": "___SContent_1fs6p_gg_",
-  "__SOverlay": "___SOverlay_1fs6p_gg_",
-  "_background": "__background_1fs6p_gg_",
-  "--background": "--background_18krv29"
+  "__SSpinContainer": "___SSpinContainer_1vd8z_gg_",
+  "__SContent": "___SContent_1vd8z_gg_",
+  "__SOverlay": "___SOverlay_1vd8z_gg_",
+  "_theme_invert": "_theme_invert_1vd8z_gg_",
+  "_theme_dark": "_theme_dark_1vd8z_gg_",
+  "_theme_custom": "_theme_custom_1vd8z_gg_",
+  "--background": "--background_1505dra"
 });
 
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
@@ -96,7 +98,7 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var SSpinContainer = _flexBox.Box;
@@ -131,19 +133,22 @@ var Overlay = /*#__PURE__*/function (_Component2) {
   (0, _createClass2["default"])(Overlay, [{
     key: "render",
     value: function render() {
-      var _ref2 = this ? this.asProps : arguments[0],
+      var _ref2 = this.asProps,
           _ref5;
 
       var SOverlay = _flexBox.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;
+      var useTheme = background ? 'custom' : theme;
       return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, _ref5.cn("FadeInOut", {
         "visible": loading,
         "duration": duration
       }), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, (0, _core.assignProps)({
+        "use:theme": useTheme,
         "use:background": (0, _color["default"])(background)
       }, _ref2)))));
     }
@@ -163,7 +168,7 @@ var Overlay = /*#__PURE__*/function (_Component2) {
 });
 
 function Content(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref6;
 
   var SContent = _flexBox.Box;

package/lib/cjs/SpinContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SpinContainer.jsx"],"names":["SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","Box","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","Component","style","SOverlay","children","props","SContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,iB;;;;;;;;;;;;WASJ,2BAAkB;AAChB,0BAAuD,KAAKC,OAA5D;AAAA,UAAQC,OAAR,iBAAQA,OAAR;AAAA,UAAiBC,UAAjB,iBAAiBA,UAAjB;AAAA,UAA6BC,QAA7B,iBAA6BA,QAA7B;AAAA,UAAuCC,IAAvC,iBAAuCA,IAAvC;AAAA,UAA6CC,KAA7C,iBAA6CA,KAA7C;AACA,aAAO;AACLH,QAAAA,UAAU,EAAVA,UADK;AAEL;AACAD,QAAAA,OAAO,EAAPA,OAHK;AAILE,QAAAA,QAAQ,EAARA,QAJK;AAKL;AACAC,QAAAA,IAAI,EAAJA,IANK;AAOLC,QAAAA,KAAK,EAALA;AAPK,OAAP;AASD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,cAAc,GASMC,YAT1B;AACA,2BAA6B,KAAKP,OAAlC;AAAA,UAAQQ,MAAR,kBAAQA,MAAR;AAAA,UAAgBC,QAAhB,kBAAgBA,QAAhB;AAEA,UAAMC,WAAW,GAAG,kCAAcD,QAAd,EAAwB,CAC1CE,aAAa,CAACC,OAAd,CAAsBC,WADoB,EAE1CF,aAAa,CAACG,OAAd,CAAsBD,WAFoB,CAAxB,CAApB;AAKA,qBAAO,mBAAQL,MAAR,CAAP,eACE,gCAAC,cAAD,mFACGE,WAAW,gBACV,gCAAC,QAAD,2BADU,gBAGV,+EACE,gCAAC,aAAD,CAAe,OAAf,qBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,aAAD,CAAe,OAAf,OAJF,CAJJ,CADF;AAcD;;;EA7C6BK,e;;iCAA1BhB,iB,iBACiB,e;iCADjBA,iB,WAEWiB,K;iCAFXjB,iB,kBAGkB;AACpBK,EAAAA,IAAI,EAAE,KADc;AAEpBC,EAAAA,KAAK,EAAE,MAFa;AAGpBF,EAAAA,QAAQ,EAAE;AAHU,C;;IA6ClBW,O;;;;;;;;;;;;WAKJ,kBAAS;AAAA;AAAA;;AACP,UAAMG,QAAQ,GAKQV,YALtB;AACA,2BAAkD,KAAKP,OAAvD;AAAA,UAAQQ,MAAR,kBAAQA,MAAR;AAAA,UAAgBN,UAAhB,kBAAgBA,UAAhB;AAAA,UAA4BD,OAA5B,kBAA4BA,OAA5B;AAAA,UAAqCE,QAArC,kBAAqCA,QAArC;AAEA,qBAAO,mBAAQK,MAAR,CAAP,eACE,gCAAC,oBAAD;AAAA,mBAAoBP,OAApB;AAAA,oBAAuCE;AAAvC,uBACE,gCAAC,QAAD;AAAA,0BAAuC,uBAAaD,UAAb;AAAvC,kBADF,CADF;AAKD;;;EAdmBa,e;;iCAAhBD,O,kBACkB;AAAA,MAAGV,IAAH,SAAGA,IAAH;AAAA,MAASC,KAAT,SAASA,KAAT;AAAA,SAAsB;AAC1Ca,IAAAA,QAAQ,eAAE,gCAAC,gBAAD;AAAM,MAAA,IAAI,EAAEd,IAAZ;AAAkB,MAAA,KAAK,EAAEC;AAAzB;AADgC,GAAtB;AAAA,C;;AAgBxB,SAASO,OAAT,CAAiBO,KAAjB,EAAwB;AAAA;AAAA;;AACtB,MAAMC,QAAQ,GAE2Bb,YAFzC;AACA,MAAQC,MAAR,GAAmBW,KAAnB,CAAQX,MAAR;AACA,iBAAO,mBAAQA,MAAR,CAAP,eAAuB,gCAAC,QAAD,6EAAvB;AACD;;AAED,IAAMG,aAAa,GAAG,sBAAgBZ,iBAAhB,EAAmC;AACvDe,EAAAA,OAAO,EAAPA,OADuD;AAEvDF,EAAAA,OAAO,EAAPA;AAFuD,CAAnC,CAAtB;eAKeD,a","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n  static displayName = 'SpinContainer';\n  static style = style;\n  static defaultProps = {\n    size: 'xxl',\n    theme: 'dark',\n    duration: 200,\n  };\n\n  getOverlayProps() {\n    const { loading, background, duration, size, theme } = this.asProps;\n    return {\n      background,\n      // for Animated\n      loading,\n      duration,\n      // for Spin\n      size,\n      theme,\n    };\n  }\n\n  render() {\n    const SSpinContainer = Root;\n    const { styles, Children } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      SpinContainer.Content.displayName,\n      SpinContainer.Overlay.displayName,\n    ]);\n\n    return sstyled(styles)(\n      <SSpinContainer render={Box}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <>\n            <SpinContainer.Content>\n              <Children />\n            </SpinContainer.Content>\n            <SpinContainer.Overlay />\n          </>\n        )}\n      </SSpinContainer>,\n    );\n  }\n}\n\nclass Overlay extends Component {\n  static defaultProps = ({ size, theme }) => ({\n    children: <Spin size={size} theme={theme} />,\n  });\n\n  render() {\n    const SOverlay = Root;\n    const { styles, background, loading, duration } = this.asProps;\n\n    return sstyled(styles)(\n      <FadeInOut visible={loading} duration={duration}>\n        <SOverlay render={Box} use:background={resolveColor(background)} />\n      </FadeInOut>,\n    );\n  }\n}\n\nfunction Content(props) {\n  const SContent = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n  Overlay,\n  Content,\n});\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}
+{"version":3,"sources":["../../src/SpinContainer.jsx"],"names":["SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","Box","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","Component","style","SOverlay","useTheme","children","props","SContent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n  static displayName = 'SpinContainer';\n  static style = style;\n  static defaultProps = {\n    size: 'xxl',\n    theme: 'dark',\n    duration: 200,\n  };\n\n  getOverlayProps() {\n    const { loading, background, duration, size, theme } = this.asProps;\n    return {\n      background,\n      // for Animated\n      loading,\n      duration,\n      // for Spin\n      size,\n      theme,\n    };\n  }\n\n  render() {\n    const SSpinContainer = Root;\n    const { styles, Children } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      SpinContainer.Content.displayName,\n      SpinContainer.Overlay.displayName,\n    ]);\n\n    return sstyled(styles)(\n      <SSpinContainer render={Box}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <>\n            <SpinContainer.Content>\n              <Children />\n            </SpinContainer.Content>\n            <SpinContainer.Overlay />\n          </>\n        )}\n      </SSpinContainer>,\n    );\n  }\n}\n\nclass Overlay extends Component {\n  static defaultProps = ({ size, theme }) => ({\n    children: <Spin size={size} theme={theme} />,\n  });\n\n  render() {\n    const SOverlay = Root;\n    const { styles, theme, background, loading, duration } = this.asProps;\n    const useTheme = background ? 'custom' : theme;\n\n    return sstyled(styles)(\n      <FadeInOut visible={loading} duration={duration}>\n        <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />\n      </FadeInOut>,\n    );\n  }\n}\n\nfunction Content(props) {\n  const SContent = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n  Overlay,\n  Content,\n});\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,38 @@
+import { PropGetterFn, ReturnEl, CProps } from '@semcore/core';
+import { ISpinProps } from '@semcore/spin';
+import { Box, IBoxProps } from '@semcore/flex-box';
+
+export interface ISpinContainerProps extends IBoxProps, ISpinProps {
+  /**
+   * Color of container spinner; you can use your own color
+   */
+  background?: string;
+  /** Duration of animation displaying in ms
+   * @default 200
+   */
+  duration?: number;
+  /**
+   * Property responsible for displaying the spinner
+   * */
+  loading?: boolean;
+}
+
+export interface ISpinContainerContext {
+  getOverlayProps: PropGetterFn;
+}
+
+export interface ISpinContainerOverlayProps extends IBoxProps {
+  /**
+   * Css background; you can use your own color
+   */
+  background?: string;
+}
+
+declare const SpinContainer: (<T>(
+  props: CProps<ISpinContainerProps & T, ISpinContainerContext>,
+) => ReturnEl) & {
+  Content: typeof Box;
+  Overlay: <T>(props: ISpinContainerOverlayProps & T) => ReturnEl;
+};
+
+export default SpinContainer;

package/lib/cjs/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _SpinContainer = _interopRequireWildcard(require("./SpinContainer"));
-
-Object.keys(_SpinContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SpinContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _SpinContainer[key];
-    }
-  });
-});
-
-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; }
+var _SpinContainer = _interopRequireDefault(require("./SpinContainer"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './SpinContainer';\nexport * from './SpinContainer';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './SpinContainer';\n"],"file":"index.js"}

package/lib/cjs/style/spin-container.shadow.css

@@ -4,6 +4,7 @@ SSpinContainer {
   z-index: 0;
   position: relative;
   display: block;
+  overflow: hidden;
 }
 
 SContent {
@@ -21,9 +22,15 @@ SOverlay {
   position: absolute;
   top: 0;
   left: 0;
+}
+
+SOverlay[theme='invert'] {
+  background-color: color-mod(var(--gray-800) a(40%));
+}
+SOverlay[theme='dark'] {
   background-color: rgba(255, 255, 255, 0.85);
 }
 
-SOverlay[background] {
-  background: var(--background);
+SOverlay[theme='custom'] {
+  background-color: var(--background);
 }

package/lib/es6/SpinContainer.js

@@ -30,16 +30,18 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SSpinContainer_1fs6p_gg_{z-index:0;position:relative;display:block}.___SContent_1fs6p_gg_{z-index:0;position:relative}.___SOverlay_1fs6p_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.85)}.___SOverlay_1fs6p_gg_.__background_1fs6p_gg_{background:var(--background_18krv29)}"
+".___SSpinContainer_1vd8z_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1vd8z_gg_{z-index:0;position:relative}.___SOverlay_1vd8z_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1vd8z_gg_._theme_invert_1vd8z_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1vd8z_gg_._theme_dark_1vd8z_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1vd8z_gg_._theme_custom_1vd8z_gg_{background-color:var(--background_1505dra)}"
 /*__inner_css_end__*/
-, "18krv29_gg_")
+, "1505dra_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpinContainer": "___SSpinContainer_1fs6p_gg_",
-  "__SContent": "___SContent_1fs6p_gg_",
-  "__SOverlay": "___SOverlay_1fs6p_gg_",
-  "_background": "__background_1fs6p_gg_",
-  "--background": "--background_18krv29"
+  "__SSpinContainer": "___SSpinContainer_1vd8z_gg_",
+  "__SContent": "___SContent_1vd8z_gg_",
+  "__SOverlay": "___SOverlay_1vd8z_gg_",
+  "_theme_invert": "_theme_invert_1vd8z_gg_",
+  "_theme_dark": "_theme_dark_1vd8z_gg_",
+  "_theme_custom": "_theme_custom_1vd8z_gg_",
+  "--background": "--background_1505dra"
 });
 
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
@@ -75,7 +77,7 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var SSpinContainer = Box;
@@ -114,19 +116,22 @@ var Overlay = /*#__PURE__*/function (_Component2) {
   _createClass(Overlay, [{
     key: "render",
     value: function render() {
-      var _ref2 = this ? this.asProps : arguments[0],
+      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;
+      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({}, _assignProps2({
+        "use:theme": useTheme,
         "use:background": resolveColor(background)
       }, _ref2)))));
     }
@@ -147,7 +152,7 @@ _defineProperty(Overlay, "defaultProps", function (_ref7) {
 });
 
 function Content(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref6;
 
   var SContent = Box;

package/lib/es6/SpinContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SpinContainer.jsx"],"names":["React","createComponent","Component","sstyled","Root","FadeInOut","Spin","Box","resolveColor","isAdvanceMode","SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","style","SOverlay","children","props","SContent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n  static displayName = 'SpinContainer';\n  static style = style;\n  static defaultProps = {\n    size: 'xxl',\n    theme: 'dark',\n    duration: 200,\n  };\n\n  getOverlayProps() {\n    const { loading, background, duration, size, theme } = this.asProps;\n    return {\n      background,\n      // for Animated\n      loading,\n      duration,\n      // for Spin\n      size,\n      theme,\n    };\n  }\n\n  render() {\n    const SSpinContainer = Root;\n    const { styles, Children } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      SpinContainer.Content.displayName,\n      SpinContainer.Overlay.displayName,\n    ]);\n\n    return sstyled(styles)(\n      <SSpinContainer render={Box}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <>\n            <SpinContainer.Content>\n              <Children />\n            </SpinContainer.Content>\n            <SpinContainer.Overlay />\n          </>\n        )}\n      </SSpinContainer>,\n    );\n  }\n}\n\nclass Overlay extends Component {\n  static defaultProps = ({ size, theme }) => ({\n    children: <Spin size={size} theme={theme} />,\n  });\n\n  render() {\n    const SOverlay = Root;\n    const { styles, background, loading, duration } = this.asProps;\n\n    return sstyled(styles)(\n      <FadeInOut visible={loading} duration={duration}>\n        <SOverlay render={Box} use:background={resolveColor(background)} />\n      </FadeInOut>,\n    );\n  }\n}\n\nfunction Content(props) {\n  const SContent = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n  Overlay,\n  Content,\n});\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}
+{"version":3,"sources":["../../src/SpinContainer.jsx"],"names":["React","createComponent","Component","sstyled","Root","FadeInOut","Spin","Box","resolveColor","isAdvanceMode","SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","style","SOverlay","useTheme","children","props","SContent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n  static displayName = 'SpinContainer';\n  static style = style;\n  static defaultProps = {\n    size: 'xxl',\n    theme: 'dark',\n    duration: 200,\n  };\n\n  getOverlayProps() {\n    const { loading, background, duration, size, theme } = this.asProps;\n    return {\n      background,\n      // for Animated\n      loading,\n      duration,\n      // for Spin\n      size,\n      theme,\n    };\n  }\n\n  render() {\n    const SSpinContainer = Root;\n    const { styles, Children } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      SpinContainer.Content.displayName,\n      SpinContainer.Overlay.displayName,\n    ]);\n\n    return sstyled(styles)(\n      <SSpinContainer render={Box}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <>\n            <SpinContainer.Content>\n              <Children />\n            </SpinContainer.Content>\n            <SpinContainer.Overlay />\n          </>\n        )}\n      </SSpinContainer>,\n    );\n  }\n}\n\nclass Overlay extends Component {\n  static defaultProps = ({ size, theme }) => ({\n    children: <Spin size={size} theme={theme} />,\n  });\n\n  render() {\n    const SOverlay = Root;\n    const { styles, theme, background, loading, duration } = this.asProps;\n    const useTheme = background ? 'custom' : theme;\n\n    return sstyled(styles)(\n      <FadeInOut visible={loading} duration={duration}>\n        <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />\n      </FadeInOut>,\n    );\n  }\n}\n\nfunction Content(props) {\n  const SContent = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n  Overlay,\n  Content,\n});\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,38 @@
+import { PropGetterFn, ReturnEl, CProps } from '@semcore/core';
+import { ISpinProps } from '@semcore/spin';
+import { Box, IBoxProps } from '@semcore/flex-box';
+
+export interface ISpinContainerProps extends IBoxProps, ISpinProps {
+  /**
+   * Color of container spinner; you can use your own color
+   */
+  background?: string;
+  /** Duration of animation displaying in ms
+   * @default 200
+   */
+  duration?: number;
+  /**
+   * Property responsible for displaying the spinner
+   * */
+  loading?: boolean;
+}
+
+export interface ISpinContainerContext {
+  getOverlayProps: PropGetterFn;
+}
+
+export interface ISpinContainerOverlayProps extends IBoxProps {
+  /**
+   * Css background; you can use your own color
+   */
+  background?: string;
+}
+
+declare const SpinContainer: (<T>(
+  props: CProps<ISpinContainerProps & T, ISpinContainerContext>,
+) => ReturnEl) & {
+  Content: typeof Box;
+  Overlay: <T>(props: ISpinContainerOverlayProps & T) => ReturnEl;
+};
+
+export default SpinContainer;

package/lib/es6/index.js

@@ -1,3 +1,2 @@
 export { default } from './SpinContainer';
-export * from './SpinContainer';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB;AACA,cAAc,iBAAd","sourcesContent":["export { default } from './SpinContainer';\nexport * from './SpinContainer';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB","sourcesContent":["export { default } from './SpinContainer';\n"],"file":"index.js"}

package/lib/es6/style/spin-container.shadow.css

@@ -4,6 +4,7 @@ SSpinContainer {
   z-index: 0;
   position: relative;
   display: block;
+  overflow: hidden;
 }
 
 SContent {
@@ -21,9 +22,15 @@ SOverlay {
   position: absolute;
   top: 0;
   left: 0;
+}
+
+SOverlay[theme='invert'] {
+  background-color: color-mod(var(--gray-800) a(40%));
+}
+SOverlay[theme='dark'] {
   background-color: rgba(255, 255, 255, 0.85);
 }
 
-SOverlay[background] {
-  background: var(--background);
+SOverlay[theme='custom'] {
+  background-color: var(--background);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/spin-container",
   "description": "SEMRush SpinContainer Component",
-  "version": "5.0.4",
+  "version": "6.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.31",
-    "@semcore/spin": "^3",
+    "@semcore/spin": "^4",
     "@semcore/flex-box": "^4",
     "@semcore/animation": "^1"
   },
@@ -29,5 +29,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/spin-container"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/src/SpinContainer.jsx

@@ -63,11 +63,12 @@ class Overlay extends Component {
 
   render() {
     const SOverlay = Root;
-    const { styles, background, loading, duration } = this.asProps;
+    const { styles, theme, background, loading, duration } = this.asProps;
+    const useTheme = background ? 'custom' : theme;
 
     return sstyled(styles)(
       <FadeInOut visible={loading} duration={duration}>
-        <SOverlay render={Box} use:background={resolveColor(background)} />
+        <SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />
       </FadeInOut>,
     );
   }

package/src/index.js

@@ -1,2 +1 @@
 export { default } from './SpinContainer';
-export * from './SpinContainer';

package/src/style/spin-container.shadow.css

@@ -4,6 +4,7 @@ SSpinContainer {
   z-index: 0;
   position: relative;
   display: block;
+  overflow: hidden;
 }
 
 SContent {
@@ -21,9 +22,15 @@ SOverlay {
   position: absolute;
   top: 0;
   left: 0;
+}
+
+SOverlay[theme='invert'] {
+  background-color: color-mod(var(--gray-800) a(40%));
+}
+SOverlay[theme='dark'] {
   background-color: rgba(255, 255, 255, 0.85);
 }
 
-SOverlay[background] {
-  background: var(--background);
+SOverlay[theme='custom'] {
+  background-color: var(--background);
 }