@semcore/spin-container 5.0.5 → 5.1.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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

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) {

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) {

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.5",
+  "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 {