@semcore/spin-container 5.0.3 → 5.1.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [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
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/spin` [3.4.0 ~> 3.4.1], `@semcore/flex-box` [4.5.0 ~> 4.5.1], `@semcore/animation` [1.4.1 ~> 1.4.2]).
+
 ## [5.0.3] - 2022-03-05
 
 ### Changed

package/lib/cjs/SpinContainer.js

@@ -52,16 +52,16 @@ 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_umh1i_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_umh1i_gg_{z-index:0;position:relative}.___SOverlay_umh1i_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_umh1i_gg_.__background_umh1i_gg_{background:var(--background_cfhiws)}"
 /*__inner_css_end__*/
-, "18krv29_gg_")
+, "cfhiws_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_umh1i_gg_",
+  "__SContent": "___SContent_umh1i_gg_",
+  "__SOverlay": "___SOverlay_umh1i_gg_",
+  "_background": "__background_umh1i_gg_",
+  "--background": "--background_cfhiws"
 });
 
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
@@ -96,7 +96,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,7 +131,7 @@ 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;
@@ -163,7 +163,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.js"],"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","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"}

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 {

package/lib/es6/SpinContainer.js

@@ -30,16 +30,16 @@ 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_umh1i_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_umh1i_gg_{z-index:0;position:relative}.___SOverlay_umh1i_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_umh1i_gg_.__background_umh1i_gg_{background:var(--background_cfhiws)}"
 /*__inner_css_end__*/
-, "18krv29_gg_")
+, "cfhiws_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_umh1i_gg_",
+  "__SContent": "___SContent_umh1i_gg_",
+  "__SOverlay": "___SOverlay_umh1i_gg_",
+  "_background": "__background_umh1i_gg_",
+  "--background": "--background_cfhiws"
 });
 
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
@@ -75,7 +75,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,7 +114,7 @@ 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;
@@ -147,7 +147,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.js"],"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","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"}

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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/spin-container",
   "description": "SEMRush SpinContainer Component",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
@@ -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/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 {