@semcore/spin-container 3.1.0 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [5.0.0] - 2022-02-22
+
+### BREAK
+
+- Add new children component `SpinContainer.Content` when using advanced mode along with `SpinContainer.Overlay`.
+
+## [4.0.1] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [4.0.0] - 2021-07-05
+
+### BREAK
+
+- Replace animation from package `react-transition-group` to `@semcore/animation`.
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+- [TS] rewrite code from TS to JS.
+
 ## [3.1.0] - 2020-12-17
 
 ### Added

package/lib/cjs/SpinContainer.js

@@ -1,16 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,13 +21,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = _interopRequireWildcard(require("@semcore/core"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = _interopRequireWildcard(require("@semcore/core"));
-
-var _reactTransitionGroup = require("react-transition-group");
+var _animation = require("@semcore/animation");
 
 var _spin = _interopRequireDefault(require("@semcore/spin"));
 
@@ -37,44 +33,36 @@ var _flexBox = require("@semcore/flex-box");
 
 var _color = _interopRequireDefault(require("@semcore/utils/lib/color"));
 
-var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
+var _findComponent = require("@semcore/utils/lib/findComponent");
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /*__reshadow-styles__:"./style/spin-container.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-".___SSpinContainer_122x3_gg_{z-index:0;position:relative;display:block}.___SContent_122x3_gg_{z-index:0;position:relative}.___SOverlay_122x3_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)}._animate--enter_1p3sp_gg_{opacity:.01}._animate--enter-active_1mtt8_gg_,._animate--exit_yqdt9_gg_{opacity:1}._animate--exit-active_15k97_gg_{opacity:.01}"
+".___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)}"
 /*__inner_css_end__*/
-, "oca35l_gg_")
+, "18krv29_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpinContainer": "___SSpinContainer_122x3_gg_",
-  "__SContent": "___SContent_122x3_gg_",
-  "__SOverlay": "___SOverlay_122x3_gg_",
-  "animate--enter": "_animate--enter_1p3sp_gg_",
-  "animate--enter-active": "_animate--enter-active_1mtt8_gg_",
-  "animate--exit": "_animate--exit_yqdt9_gg_",
-  "animate--exit-active": "_animate--exit-active_15k97_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
-
-var styled_c8 = (0, _core.create)([(
-/*__reshadow_css_start__*/
-(0, _core.__css__)(
-/*__inner_css_start__*/
-"._animate--enter-active_14twg_gg_,._animate--exit-active_1o8ww_gg_{transition:opacity var(--yk7jne_0) ease-out}"
-/*__inner_css_end__*/
-, "qcxlle_gg_")
-/*__reshadow_css_end__*/
-, {
-  "animate--exit-active": "_animate--exit-active_1o8ww_gg_",
-  "animate--enter-active": "_animate--enter-active_14twg_gg_"
-})]);
+  "__SSpinContainer": "___SSpinContainer_1fs6p_gg_",
+  "__SContent": "___SContent_1fs6p_gg_",
+  "__SOverlay": "___SOverlay_1fs6p_gg_",
+  "_background": "__background_1fs6p_gg_",
+  "--background": "--background_18krv29"
+});
 
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(SpinContainerRoot, _Component);
@@ -90,11 +78,17 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
     key: "getOverlayProps",
     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;
       return {
         background: background,
+        // for Animated
+        loading: loading,
+        duration: duration,
+        // for Spin
         size: size,
         theme: theme
       };
@@ -102,40 +96,15 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var SSpinContainer = this.Root;
-      var SContent = _flexBox.Box;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      var SSpinContainer = _flexBox.Box;
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
-          ChildrenRoot = _this$asProps2.Children,
-          duration = _this$asProps2.duration,
-          loading = _this$asProps2.loading;
-      var transitionDuration = "".concat(duration, "ms");
-
-      var _overlayChildren = overlayChildren(ChildrenRoot, SpinContainer.Overlay),
-          _overlayChildren2 = (0, _slicedToArray2["default"])(_overlayChildren, 2),
-          Children = _overlayChildren2[0],
-          Overlay = _overlayChildren2[1];
-
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles], {
-        "--yk7jne_0": transitionDuration
-      }), /*#__PURE__*/_react["default"].createElement(SSpinContainer, (0, _core.map)("SSpinContainer", {
-        render: _flexBox.Box,
-        $$style: _core.styled.$$style
-      }), /*#__PURE__*/_react["default"].createElement(SContent, {
-        className: _core.styled.styles["__SContent"]
-      }, Children), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, (0, _core.map)("CSSTransition", {
-        "in": loading,
-        timeout: duration,
-        classNames: {
-          enterActive: _core.styled.styles['animate--enter-active'],
-          exitActive: _core.styled.styles['animate--exit-active'],
-          enter: _core.styled.styles['animate--enter'],
-          exit: _core.styled.styles['animate--exit']
-        },
-        unmountOnExit: true
-      }), Overlay || /*#__PURE__*/_react["default"].createElement(SpinContainer.Overlay, {
-        className: _core.styled.styles["__SpinContainer.Overlay"]
-      })))));
+          Children = _this$asProps2.Children;
+      var advanceMode = (0, _findComponent.isAdvanceMode)(Children, [SpinContainer.Content.displayName, SpinContainer.Overlay.displayName]);
+      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSpinContainer, _ref4.cn("SSpinContainer", _objectSpread({}, (0, _core.assignProps)({}, _ref))), advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SpinContainer.Content, null, /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(SpinContainer.Overlay, null)));
     }
   }]);
   return SpinContainerRoot;
@@ -149,47 +118,6 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   duration: 200
 });
 
-function overlayChildren(Children, Overlay) {
-  var children = (0, _getOriginChildren["default"])(Children);
-
-  if (typeof children === 'function') {
-    return [/*#__PURE__*/_react["default"].createElement(Children, null), null];
-  }
-
-  var OverlayChildren = null;
-  return [_react["default"].Children.toArray(children).map(function (element) {
-    if (! /*#__PURE__*/_react["default"].isValidElement(element)) return element;
-    if (element.type === _react["default"].Fragment) return element;
-
-    if (element.type[_core.CHILDREN_COMPONENT]) {
-      return overlayChildren(element.type, Overlay);
-    } // @ts-ignore
-
-
-    var inheritedNames = element.type[_core.INHERITED_NAME] || [element.type.displayName];
-
-    if (inheritedNames.includes(Overlay.displayName)) {
-      OverlayChildren = element;
-      return null;
-    }
-
-    return element;
-  }), OverlayChildren];
-}
-
-var styled_12c = (0, _core.create)([(
-/*__reshadow_css_start__*/
-(0, _core.__css__)(
-/*__inner_css_start__*/
-".___SOverlay_vnp1p_gg_.__background_vnp1p_gg_{background:var(--yk7jne_0)}"
-/*__inner_css_end__*/
-, "h4gl6o_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SOverlay": "___SOverlay_vnp1p_gg_",
-  "_background": "__background_vnp1p_gg_"
-})]);
-
 var Overlay = /*#__PURE__*/function (_Component2) {
   (0, _inherits2["default"])(Overlay, _Component2);
 
@@ -203,25 +131,29 @@ var Overlay = /*#__PURE__*/function (_Component2) {
   (0, _createClass2["default"])(Overlay, [{
     key: "render",
     value: function render() {
-      var SOverlay = this.Root;
+      var _ref2 = this ? this.asProps : arguments[0],
+          _ref5;
+
+      var SOverlay = _flexBox.Box;
       var _this$asProps3 = this.asProps,
+          styles = _this$asProps3.styles,
           background = _this$asProps3.background,
-          styles = _this$asProps3.styles;
-      return (0, _core.styled)(((0, _core.set)([styled_12c, styles], {
-        "--yk7jne_0": (0, _color["default"])(background)
-      }), /*#__PURE__*/_react["default"].createElement(SOverlay, (0, _core.map)("SOverlay", {
-        render: _flexBox.Box,
-        background: background,
-        $$style: _core.styled.$$style
-      }))));
+          loading = _this$asProps3.loading,
+          duration = _this$asProps3.duration;
+      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:background": (0, _color["default"])(background)
+      }, _ref2)))));
     }
   }]);
   return Overlay;
 }(_core.Component);
 
-(0, _defineProperty2["default"])(Overlay, "defaultProps", function (_ref2) {
-  var size = _ref2.size,
-      theme = _ref2.theme;
+(0, _defineProperty2["default"])(Overlay, "defaultProps", function (_ref7) {
+  var size = _ref7.size,
+      theme = _ref7.theme;
   return {
     children: /*#__PURE__*/_react["default"].createElement(_spin["default"], {
       size: size,
@@ -229,8 +161,19 @@ var Overlay = /*#__PURE__*/function (_Component2) {
     })
   };
 });
+
+function Content(props) {
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var SContent = _flexBox.Box;
+  var styles = props.styles;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContent, _ref6.cn("SContent", _objectSpread({}, (0, _core.assignProps)({}, _ref3))));
+}
+
 var SpinContainer = (0, _core["default"])(SpinContainerRoot, {
-  Overlay: Overlay
+  Overlay: Overlay,
+  Content: Content
 });
 var _default = SpinContainer;
 exports["default"] = _default;

package/lib/cjs/SpinContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SpinContainer.tsx"],"names":["SpinContainerRoot","asProps","background","size","theme","SSpinContainer","Root","SContent","Box","styles","ChildrenRoot","Children","duration","loading","transitionDuration","overlayChildren","SpinContainer","Overlay","enterActive","styled","exitActive","enter","exit","Component","style","children","OverlayChildren","React","toArray","map","element","isValidElement","type","Fragment","CHILDREN_COMPONENT","inheritedNames","INHERITED_NAME","displayName","includes","SOverlay"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport createComponent, {\n  CHILDREN_COMPONENT,\n  Component,\n  INHERITED_NAME,\n  Merge,\n  PropGetter,\n  styled,\n} from '@semcore/core';\nimport { CSSTransition } from 'react-transition-group';\nimport Spin, { ISpinProps } from '@semcore/spin';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\nimport style from './style/spin-container.shadow.css';\n\nexport interface ISpinContainerProps extends IBoxProps, ISpinProps {\n  /**\n   * Color of container spinner; you can use your own color\n   */\n  background?: string;\n  /** Duration of animation displaying in ms\n   * @default 200\n   */\n  duration?: number;\n  /**\n   * Property responsible for displaying the spinner\n   * */\n  loading?: boolean;\n}\n\nexport interface ISpinContainerContext extends ISpinContainerProps {\n  getOverlayProps: PropGetter<SpinContainerRoot['getOverlayProps']>;\n}\n\nclass SpinContainerRoot extends Component<ISpinContainerProps> {\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 { background, size, theme } = this.asProps;\n    return {\n      background,\n      size,\n      theme,\n    };\n  }\n\n  render() {\n    const SSpinContainer = this.Root;\n    const SContent = Box;\n    const { styles, Children: ChildrenRoot, duration, loading } = this.asProps;\n    const transitionDuration = `${duration}ms`;\n\n    const [Children, Overlay] = overlayChildren(ChildrenRoot, SpinContainer.Overlay);\n\n    return styled(styles)`\n      .animate--exit-active,\n      .animate--enter-active {\n        transition: opacity ${transitionDuration} ease-out;\n      }\n    `(\n      <SSpinContainer render={Box}>\n        <SContent>{Children}</SContent>\n        <CSSTransition\n          in={loading}\n          timeout={duration}\n          classNames={{\n            enterActive: styled.styles['animate--enter-active'],\n            exitActive: styled.styles['animate--exit-active'],\n            enter: styled.styles['animate--enter'],\n            exit: styled.styles['animate--exit'],\n          }}\n          unmountOnExit\n        >\n          {Overlay || <SpinContainer.Overlay />}\n        </CSSTransition>\n      </SSpinContainer>,\n    );\n  }\n}\n\nfunction overlayChildren(Children: any, Overlay: React.ComponentType) {\n  const children = getOriginChildren(Children);\n  if (typeof children === 'function') {\n    return [<Children />, null];\n  }\n\n  let OverlayChildren = null;\n  return [\n    React.Children.toArray(children).map((element) => {\n      if (!React.isValidElement(element)) return element;\n      if (element.type === React.Fragment) return element;\n      if (element.type[CHILDREN_COMPONENT]) {\n        return overlayChildren(element.type, Overlay);\n      }\n      // @ts-ignore\n      const inheritedNames = element.type[INHERITED_NAME] || [element.type.displayName];\n      if (inheritedNames.includes(Overlay.displayName)) {\n        OverlayChildren = element;\n        return null;\n      }\n      return element;\n    }),\n    OverlayChildren,\n  ];\n}\n\nexport interface ISpinContainerOverlayProps extends IBoxProps {\n  background?: string;\n}\n\nclass Overlay extends Component<ISpinContainerOverlayProps> {\n  static defaultProps = ({ size, theme }) => ({\n    children: <Spin size={size} theme={theme} />,\n  });\n\n  render() {\n    const SOverlay = this.Root;\n    const { background, styles } = this.asProps;\n\n    return styled(styles)`\n      SOverlay[background] {\n        background: ${resolveColor(background)};\n      }\n    `(<SOverlay render={Box} background={background} />);\n  }\n}\n\nconst SpinContainer = createComponent<\n  Merge<ISpinContainerProps, HTMLAttributes<HTMLDivElement>>,\n  {\n    Overlay: Merge<ISpinContainerOverlayProps, HTMLAttributes<HTMLDivElement>>;\n  },\n  ISpinContainerContext\n>(SpinContainerRoot, { Overlay });\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}
+{"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"}

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -18,6 +18,7 @@ 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() {
@@ -25,4 +26,8 @@ Object.keys(_SpinContainer).forEach(function (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; }
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

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

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

@@ -24,15 +24,6 @@ SOverlay {
   background-color: rgba(255, 255, 255, 0.85);
 }
 
-.animate--enter {
-  opacity: 0.01;
-}
-
-.animate--enter-active,
-.animate--exit {
-  opacity: 1;
-}
-
-.animate--exit-active {
-  opacity: 0.01;
+SOverlay[background] {
+  background: var(--background);
 }

package/lib/es6/SpinContainer.js

@@ -1,56 +1,46 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps3 } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import createComponent, { CHILDREN_COMPONENT, Component, INHERITED_NAME, styled, css, __css__, set, create, map } from '@semcore/core';
-import { CSSTransition } from 'react-transition-group';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { FadeInOut } from '@semcore/animation';
 import Spin from '@semcore/spin';
 import { Box } from '@semcore/flex-box';
 import resolveColor from '@semcore/utils/lib/color';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
+import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
 
 /*__reshadow-styles__:"./style/spin-container.shadow.css"*/
-var _ref = (
-/*__reshadow_css_start__*/
-__css__(
-/*__inner_css_start__*/
-".___SSpinContainer_122x3_gg_{z-index:0;position:relative;display:block}.___SContent_122x3_gg_{z-index:0;position:relative}.___SOverlay_122x3_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)}._animate--enter_1p3sp_gg_{opacity:.01}._animate--enter-active_1mtt8_gg_,._animate--exit_yqdt9_gg_{opacity:1}._animate--exit-active_15k97_gg_{opacity:.01}"
-/*__inner_css_end__*/
-, "oca35l_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SSpinContainer": "___SSpinContainer_122x3_gg_",
-  "__SContent": "___SContent_122x3_gg_",
-  "__SOverlay": "___SOverlay_122x3_gg_",
-  "animate--enter": "_animate--enter_1p3sp_gg_",
-  "animate--enter-active": "_animate--enter-active_1mtt8_gg_",
-  "animate--exit": "_animate--exit_yqdt9_gg_",
-  "animate--exit-active": "_animate--exit-active_15k97_gg_"
-}),
-    style = _extends({}, _ref);
-
-var styled_c8 = create([(
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-"._animate--enter-active_14twg_gg_,._animate--exit-active_1o8ww_gg_{transition:opacity var(--yk7jne_0) ease-out}"
+".___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)}"
 /*__inner_css_end__*/
-, "qcxlle_gg_")
+, "18krv29_gg_")
 /*__reshadow_css_end__*/
 , {
-  "animate--exit-active": "_animate--exit-active_1o8ww_gg_",
-  "animate--enter-active": "_animate--enter-active_14twg_gg_"
-})]);
+  "__SSpinContainer": "___SSpinContainer_1fs6p_gg_",
+  "__SContent": "___SContent_1fs6p_gg_",
+  "__SOverlay": "___SOverlay_1fs6p_gg_",
+  "_background": "__background_1fs6p_gg_",
+  "--background": "--background_18krv29"
+});
 
 var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   _inherits(SpinContainerRoot, _Component);
@@ -67,11 +57,17 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
     key: "getOverlayProps",
     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;
       return {
         background: background,
+        // for Animated
+        loading: loading,
+        duration: duration,
+        // for Spin
         size: size,
         theme: theme
       };
@@ -79,40 +75,15 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var SSpinContainer = this.Root;
-      var SContent = Box;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      var SSpinContainer = Box;
       var _this$asProps2 = this.asProps,
           styles = _this$asProps2.styles,
-          ChildrenRoot = _this$asProps2.Children,
-          duration = _this$asProps2.duration,
-          loading = _this$asProps2.loading;
-      var transitionDuration = "".concat(duration, "ms");
-
-      var _overlayChildren = overlayChildren(ChildrenRoot, SpinContainer.Overlay),
-          _overlayChildren2 = _slicedToArray(_overlayChildren, 2),
-          Children = _overlayChildren2[0],
-          Overlay = _overlayChildren2[1];
-
-      return styled((set([styled_c8, styles], {
-        "--yk7jne_0": transitionDuration
-      }), /*#__PURE__*/React.createElement(SSpinContainer, map("SSpinContainer", {
-        render: Box,
-        $$style: styled.$$style
-      }), /*#__PURE__*/React.createElement(SContent, {
-        className: styled.styles["__SContent"]
-      }, Children), /*#__PURE__*/React.createElement(CSSTransition, map("CSSTransition", {
-        "in": loading,
-        timeout: duration,
-        classNames: {
-          enterActive: styled.styles['animate--enter-active'],
-          exitActive: styled.styles['animate--exit-active'],
-          enter: styled.styles['animate--enter'],
-          exit: styled.styles['animate--exit']
-        },
-        unmountOnExit: true
-      }), Overlay || /*#__PURE__*/React.createElement(SpinContainer.Overlay, {
-        className: styled.styles["__SpinContainer.Overlay"]
-      })))));
+          Children = _this$asProps2.Children;
+      var advanceMode = isAdvanceMode(Children, [SpinContainer.Content.displayName, SpinContainer.Overlay.displayName]);
+      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SSpinContainer, _ref4.cn("SSpinContainer", _objectSpread({}, _assignProps({}, _ref))), advanceMode ? /*#__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)));
     }
   }]);
 
@@ -129,47 +100,6 @@ _defineProperty(SpinContainerRoot, "defaultProps", {
   duration: 200
 });
 
-function overlayChildren(Children, Overlay) {
-  var children = getOriginChildren(Children);
-
-  if (typeof children === 'function') {
-    return [/*#__PURE__*/React.createElement(Children, null), null];
-  }
-
-  var OverlayChildren = null;
-  return [React.Children.toArray(children).map(function (element) {
-    if (! /*#__PURE__*/React.isValidElement(element)) return element;
-    if (element.type === React.Fragment) return element;
-
-    if (element.type[CHILDREN_COMPONENT]) {
-      return overlayChildren(element.type, Overlay);
-    } // @ts-ignore
-
-
-    var inheritedNames = element.type[INHERITED_NAME] || [element.type.displayName];
-
-    if (inheritedNames.includes(Overlay.displayName)) {
-      OverlayChildren = element;
-      return null;
-    }
-
-    return element;
-  }), OverlayChildren];
-}
-
-var styled_12c = create([(
-/*__reshadow_css_start__*/
-__css__(
-/*__inner_css_start__*/
-".___SOverlay_vnp1p_gg_.__background_vnp1p_gg_{background:var(--yk7jne_0)}"
-/*__inner_css_end__*/
-, "h4gl6o_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SOverlay": "___SOverlay_vnp1p_gg_",
-  "_background": "__background_vnp1p_gg_"
-})]);
-
 var Overlay = /*#__PURE__*/function (_Component2) {
   _inherits(Overlay, _Component2);
 
@@ -184,26 +114,30 @@ var Overlay = /*#__PURE__*/function (_Component2) {
   _createClass(Overlay, [{
     key: "render",
     value: function render() {
-      var SOverlay = this.Root;
+      var _ref2 = this ? this.asProps : arguments[0],
+          _ref5;
+
+      var SOverlay = Box;
       var _this$asProps3 = this.asProps,
+          styles = _this$asProps3.styles,
           background = _this$asProps3.background,
-          styles = _this$asProps3.styles;
-      return styled((set([styled_12c, styles], {
-        "--yk7jne_0": resolveColor(background)
-      }), /*#__PURE__*/React.createElement(SOverlay, map("SOverlay", {
-        render: Box,
-        background: background,
-        $$style: styled.$$style
-      }))));
+          loading = _this$asProps3.loading,
+          duration = _this$asProps3.duration;
+      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:background": resolveColor(background)
+      }, _ref2)))));
     }
   }]);
 
   return Overlay;
 }(Component);
 
-_defineProperty(Overlay, "defaultProps", function (_ref2) {
-  var size = _ref2.size,
-      theme = _ref2.theme;
+_defineProperty(Overlay, "defaultProps", function (_ref7) {
+  var size = _ref7.size,
+      theme = _ref7.theme;
   return {
     children: /*#__PURE__*/React.createElement(Spin, {
       size: size,
@@ -212,8 +146,18 @@ _defineProperty(Overlay, "defaultProps", function (_ref2) {
   };
 });
 
+function Content(props) {
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var SContent = Box;
+  var styles = props.styles;
+  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, _assignProps3({}, _ref3))));
+}
+
 var SpinContainer = createComponent(SpinContainerRoot, {
-  Overlay: Overlay
+  Overlay: Overlay,
+  Content: Content
 });
 export default SpinContainer;
 //# sourceMappingURL=SpinContainer.js.map

package/lib/es6/SpinContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SpinContainer.tsx"],"names":["React","createComponent","CHILDREN_COMPONENT","Component","INHERITED_NAME","styled","CSSTransition","Spin","Box","resolveColor","getOriginChildren","SpinContainerRoot","asProps","background","size","theme","SSpinContainer","Root","SContent","styles","ChildrenRoot","Children","duration","loading","transitionDuration","overlayChildren","SpinContainer","Overlay","enterActive","exitActive","enter","exit","style","children","OverlayChildren","toArray","map","element","isValidElement","type","Fragment","inheritedNames","displayName","includes","SOverlay"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport createComponent, {\n  CHILDREN_COMPONENT,\n  Component,\n  INHERITED_NAME,\n  Merge,\n  PropGetter,\n  styled,\n} from '@semcore/core';\nimport { CSSTransition } from 'react-transition-group';\nimport Spin, { ISpinProps } from '@semcore/spin';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\nimport style from './style/spin-container.shadow.css';\n\nexport interface ISpinContainerProps extends IBoxProps, ISpinProps {\n  /**\n   * Color of container spinner; you can use your own color\n   */\n  background?: string;\n  /** Duration of animation displaying in ms\n   * @default 200\n   */\n  duration?: number;\n  /**\n   * Property responsible for displaying the spinner\n   * */\n  loading?: boolean;\n}\n\nexport interface ISpinContainerContext extends ISpinContainerProps {\n  getOverlayProps: PropGetter<SpinContainerRoot['getOverlayProps']>;\n}\n\nclass SpinContainerRoot extends Component<ISpinContainerProps> {\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 { background, size, theme } = this.asProps;\n    return {\n      background,\n      size,\n      theme,\n    };\n  }\n\n  render() {\n    const SSpinContainer = this.Root;\n    const SContent = Box;\n    const { styles, Children: ChildrenRoot, duration, loading } = this.asProps;\n    const transitionDuration = `${duration}ms`;\n\n    const [Children, Overlay] = overlayChildren(ChildrenRoot, SpinContainer.Overlay);\n\n    return styled(styles)`\n      .animate--exit-active,\n      .animate--enter-active {\n        transition: opacity ${transitionDuration} ease-out;\n      }\n    `(\n      <SSpinContainer render={Box}>\n        <SContent>{Children}</SContent>\n        <CSSTransition\n          in={loading}\n          timeout={duration}\n          classNames={{\n            enterActive: styled.styles['animate--enter-active'],\n            exitActive: styled.styles['animate--exit-active'],\n            enter: styled.styles['animate--enter'],\n            exit: styled.styles['animate--exit'],\n          }}\n          unmountOnExit\n        >\n          {Overlay || <SpinContainer.Overlay />}\n        </CSSTransition>\n      </SSpinContainer>,\n    );\n  }\n}\n\nfunction overlayChildren(Children: any, Overlay: React.ComponentType) {\n  const children = getOriginChildren(Children);\n  if (typeof children === 'function') {\n    return [<Children />, null];\n  }\n\n  let OverlayChildren = null;\n  return [\n    React.Children.toArray(children).map((element) => {\n      if (!React.isValidElement(element)) return element;\n      if (element.type === React.Fragment) return element;\n      if (element.type[CHILDREN_COMPONENT]) {\n        return overlayChildren(element.type, Overlay);\n      }\n      // @ts-ignore\n      const inheritedNames = element.type[INHERITED_NAME] || [element.type.displayName];\n      if (inheritedNames.includes(Overlay.displayName)) {\n        OverlayChildren = element;\n        return null;\n      }\n      return element;\n    }),\n    OverlayChildren,\n  ];\n}\n\nexport interface ISpinContainerOverlayProps extends IBoxProps {\n  background?: string;\n}\n\nclass Overlay extends Component<ISpinContainerOverlayProps> {\n  static defaultProps = ({ size, theme }) => ({\n    children: <Spin size={size} theme={theme} />,\n  });\n\n  render() {\n    const SOverlay = this.Root;\n    const { background, styles } = this.asProps;\n\n    return styled(styles)`\n      SOverlay[background] {\n        background: ${resolveColor(background)};\n      }\n    `(<SOverlay render={Box} background={background} />);\n  }\n}\n\nconst SpinContainer = createComponent<\n  Merge<ISpinContainerProps, HTMLAttributes<HTMLDivElement>>,\n  {\n    Overlay: Merge<ISpinContainerOverlayProps, HTMLAttributes<HTMLDivElement>>;\n  },\n  ISpinContainerContext\n>(SpinContainerRoot, { Overlay });\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}
+{"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"}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"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;AACA,cAAc,iBAAd","sourcesContent":["export { default } from './SpinContainer';\nexport * from './SpinContainer';\n"],"file":"index.js"}

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

@@ -24,15 +24,6 @@ SOverlay {
   background-color: rgba(255, 255, 255, 0.85);
 }
 
-.animate--enter {
-  opacity: 0.01;
-}
-
-.animate--enter-active,
-.animate--exit {
-  opacity: 1;
-}
-
-.animate--exit-active {
-  opacity: 0.01;
+SOverlay[background] {
+  background: var(--background);
 }

package/lib/types/index.d.ts

@@ -1,2 +1,38 @@
-export { default } from './SpinContainer';
-export * from './SpinContainer';
+import { PropGetterFn, ReturnEl, CProps } from '@semcore/core';
+import { ISpinProps } from '@semcore/spin';
+import { 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/package.json

@@ -1,27 +1,28 @@
 {
   "name": "@semcore/spin-container",
   "description": "SEMRush SpinContainer Component",
-  "version": "3.1.0",
+  "version": "5.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build",
+    "build": "build --source=js",
     "test": "jest"
   },
   "dependencies": {
-    "@semcore/utils": "^3.15",
+    "@semcore/utils": "^3.31",
     "@semcore/spin": "^3",
     "@semcore/flex-box": "^4",
-    "react-transition-group": "^4.4"
+    "@semcore/animation": "^1"
   },
   "peerDependencies": {
-    "@semcore/core": "^1",
+    "@semcore/core": "^1.11",
     "react": "16.8 - 17"
   },
   "jest": {
-    "preset": "jest-preset-ui"
+    "preset": "@semcore/jest-preset-ui"
   }
 }

package/src/SpinContainer.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { FadeInOut } from '@semcore/animation';
+import Spin from '@semcore/spin';
+import { Box } from '@semcore/flex-box';
+import resolveColor from '@semcore/utils/lib/color';
+import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
+
+import style from './style/spin-container.shadow.css';
+
+class SpinContainerRoot extends Component {
+  static displayName = 'SpinContainer';
+  static style = style;
+  static defaultProps = {
+    size: 'xxl',
+    theme: 'dark',
+    duration: 200,
+  };
+
+  getOverlayProps() {
+    const { loading, background, duration, size, theme } = this.asProps;
+    return {
+      background,
+      // for Animated
+      loading,
+      duration,
+      // for Spin
+      size,
+      theme,
+    };
+  }
+
+  render() {
+    const SSpinContainer = Root;
+    const { styles, Children } = this.asProps;
+
+    const advanceMode = isAdvanceMode(Children, [
+      SpinContainer.Content.displayName,
+      SpinContainer.Overlay.displayName,
+    ]);
+
+    return sstyled(styles)(
+      <SSpinContainer render={Box}>
+        {advanceMode ? (
+          <Children />
+        ) : (
+          <>
+            <SpinContainer.Content>
+              <Children />
+            </SpinContainer.Content>
+            <SpinContainer.Overlay />
+          </>
+        )}
+      </SSpinContainer>,
+    );
+  }
+}
+
+class Overlay extends Component {
+  static defaultProps = ({ size, theme }) => ({
+    children: <Spin size={size} theme={theme} />,
+  });
+
+  render() {
+    const SOverlay = Root;
+    const { styles, background, loading, duration } = this.asProps;
+
+    return sstyled(styles)(
+      <FadeInOut visible={loading} duration={duration}>
+        <SOverlay render={Box} use:background={resolveColor(background)} />
+      </FadeInOut>,
+    );
+  }
+}
+
+function Content(props) {
+  const SContent = Root;
+  const { styles } = props;
+  return sstyled(styles)(<SContent render={Box} />);
+}
+
+const SpinContainer = createComponent(SpinContainerRoot, {
+  Overlay,
+  Content,
+});
+
+export default SpinContainer;

package/src/index.d.ts

@@ -0,0 +1,38 @@
+import { PropGetterFn, ReturnEl, CProps } from '@semcore/core';
+import { ISpinProps } from '@semcore/spin';
+import { 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/src/style/spin-container.shadow.css

@@ -24,15 +24,6 @@ SOverlay {
   background-color: rgba(255, 255, 255, 0.85);
 }
 
-.animate--enter {
-  opacity: 0.01;
-}
-
-.animate--enter-active,
-.animate--exit {
-  opacity: 1;
-}
-
-.animate--exit-active {
-  opacity: 0.01;
+SOverlay[background] {
+  background: var(--background);
 }

package/lib/types/SpinContainer.d.ts

@@ -1,45 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { Component, Merge, PropGetter } from '@semcore/core';
-import { ISpinProps } from '@semcore/spin';
-import { 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 extends ISpinContainerProps {
-    getOverlayProps: PropGetter<SpinContainerRoot['getOverlayProps']>;
-}
-declare class SpinContainerRoot extends Component<ISpinContainerProps> {
-    static displayName: string;
-    static style: any;
-    static defaultProps: {
-        size: string;
-        theme: string;
-        duration: number;
-    };
-    getOverlayProps(): {
-        background: string;
-        size: "s" | "xxs" | "xs" | "m" | "l" | "xl" | "xxl";
-        theme: string;
-    };
-    render(): any;
-}
-export interface ISpinContainerOverlayProps extends IBoxProps {
-    background?: string;
-}
-declare const SpinContainer: import("@semcore/core").ComponentType<Merge<ISpinContainerProps, React.HTMLAttributes<HTMLDivElement>>, {
-    Overlay: Merge<ISpinContainerOverlayProps, HTMLAttributes<HTMLDivElement>>;
-}, ISpinContainerContext, {
-    [key: string]: (arg: unknown) => void;
-}, null>;
-export default SpinContainer;

package/src/SpinContainer.tsx

@@ -1,144 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import createComponent, {
-  CHILDREN_COMPONENT,
-  Component,
-  INHERITED_NAME,
-  Merge,
-  PropGetter,
-  styled,
-} from '@semcore/core';
-import { CSSTransition } from 'react-transition-group';
-import Spin, { ISpinProps } from '@semcore/spin';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import resolveColor from '@semcore/utils/lib/color';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
-
-import style from './style/spin-container.shadow.css';
-
-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 extends ISpinContainerProps {
-  getOverlayProps: PropGetter<SpinContainerRoot['getOverlayProps']>;
-}
-
-class SpinContainerRoot extends Component<ISpinContainerProps> {
-  static displayName = 'SpinContainer';
-  static style = style;
-  static defaultProps = {
-    size: 'xxl',
-    theme: 'dark',
-    duration: 200,
-  };
-
-  getOverlayProps() {
-    const { background, size, theme } = this.asProps;
-    return {
-      background,
-      size,
-      theme,
-    };
-  }
-
-  render() {
-    const SSpinContainer = this.Root;
-    const SContent = Box;
-    const { styles, Children: ChildrenRoot, duration, loading } = this.asProps;
-    const transitionDuration = `${duration}ms`;
-
-    const [Children, Overlay] = overlayChildren(ChildrenRoot, SpinContainer.Overlay);
-
-    return styled(styles)`
-      .animate--exit-active,
-      .animate--enter-active {
-        transition: opacity ${transitionDuration} ease-out;
-      }
-    `(
-      <SSpinContainer render={Box}>
-        <SContent>{Children}</SContent>
-        <CSSTransition
-          in={loading}
-          timeout={duration}
-          classNames={{
-            enterActive: styled.styles['animate--enter-active'],
-            exitActive: styled.styles['animate--exit-active'],
-            enter: styled.styles['animate--enter'],
-            exit: styled.styles['animate--exit'],
-          }}
-          unmountOnExit
-        >
-          {Overlay || <SpinContainer.Overlay />}
-        </CSSTransition>
-      </SSpinContainer>,
-    );
-  }
-}
-
-function overlayChildren(Children: any, Overlay: React.ComponentType) {
-  const children = getOriginChildren(Children);
-  if (typeof children === 'function') {
-    return [<Children />, null];
-  }
-
-  let OverlayChildren = null;
-  return [
-    React.Children.toArray(children).map((element) => {
-      if (!React.isValidElement(element)) return element;
-      if (element.type === React.Fragment) return element;
-      if (element.type[CHILDREN_COMPONENT]) {
-        return overlayChildren(element.type, Overlay);
-      }
-      // @ts-ignore
-      const inheritedNames = element.type[INHERITED_NAME] || [element.type.displayName];
-      if (inheritedNames.includes(Overlay.displayName)) {
-        OverlayChildren = element;
-        return null;
-      }
-      return element;
-    }),
-    OverlayChildren,
-  ];
-}
-
-export interface ISpinContainerOverlayProps extends IBoxProps {
-  background?: string;
-}
-
-class Overlay extends Component<ISpinContainerOverlayProps> {
-  static defaultProps = ({ size, theme }) => ({
-    children: <Spin size={size} theme={theme} />,
-  });
-
-  render() {
-    const SOverlay = this.Root;
-    const { background, styles } = this.asProps;
-
-    return styled(styles)`
-      SOverlay[background] {
-        background: ${resolveColor(background)};
-      }
-    `(<SOverlay render={Box} background={background} />);
-  }
-}
-
-const SpinContainer = createComponent<
-  Merge<ISpinContainerProps, HTMLAttributes<HTMLDivElement>>,
-  {
-    Overlay: Merge<ISpinContainerOverlayProps, HTMLAttributes<HTMLDivElement>>;
-  },
-  ISpinContainerContext
->(SpinContainerRoot, { Overlay });
-
-export default SpinContainer;