@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/components/Link/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAd","sourcesContent":["export * from './Link';\n"]}

package/components/Link/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Link/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/Link/index.d.ts

@@ -1 +1 @@
-export { default, LinkProps, LinkState } from './Link';
+export * from './Link';

package/components/Link/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/Link/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Loader/Loader/Loader.js

@@ -0,0 +1,363 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { Spinner } from "../../Spinner";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ZIndex } from "../../../internal/ZIndex";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { TaskWithDelayAndMinimalDuration } from "../../../lib/taskWithDelayAndMinimalDuration";
+import { getTabbableElements } from "../../../lib/dom/tabbableHelpers";
+import { styles } from "../Loader.styles";
+/**
+ * DRAFT - лоадер-контейнер
+ */
+
+export var Loader = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Loader, _React$Component);
+
+  function Loader(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.theme = void 0;
+    _this.spinnerContainerNode = void 0;
+    _this.childrenContainerNode = void 0;
+    _this.spinnerNode = void 0;
+    _this.layoutEvents = void 0;
+    _this.spinnerTask = void 0;
+    _this.childrenObserver = void 0;
+
+    _this.childrenRef = function (element) {
+      _this.childrenContainerNode = element;
+    };
+
+    _this.spinnerRef = function (element) {
+      _this.spinnerContainerNode = element;
+    };
+
+    _this.checkSpinnerPosition = function () {
+      if (!_this.spinnerContainerNode) {
+        return;
+      }
+
+      var _this$spinnerContaine = _this.spinnerContainerNode.getBoundingClientRect(),
+          containerTop = _this$spinnerContaine.top,
+          containerRight = _this$spinnerContaine.right,
+          containerBottom = _this$spinnerContaine.bottom,
+          containerLeft = _this$spinnerContaine.left,
+          containerHeight = _this$spinnerContaine.height,
+          containerWidth = _this$spinnerContaine.width;
+
+      var windowHeight = window.innerHeight;
+      var windowWidth = window.innerWidth; // Если контейнер не больше высоты и не шире окна,
+      // то просто выравниваем по центру
+
+      if (windowHeight >= containerHeight && windowWidth >= containerWidth) {
+        _this.setState({
+          isStickySpinner: false,
+          spinnerStyle: {}
+        });
+
+        return;
+      }
+
+      var spinnerStyle = {
+        top: 30,
+        right: 0,
+        bottom: 30,
+        left: 0
+      }; // ПО ВЕРТИКАЛИ
+      // Если верхний край контейнера ниже верхнего края окна,
+      // то сдвигаем и лоадер
+
+      if (containerTop > 0) {
+        spinnerStyle.top = containerTop + 30;
+      } // Если нижний край контейнера выше нижнего края окна,
+      // то сдвигаем и лоадер
+
+
+      if (containerBottom < windowHeight) {
+        spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;
+      } // Если знаем высоту спиннера и нижний край контейнера поднимается
+      // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера
+
+
+      if (_this.spinnerNode) {
+        var spinnerHeight = _this.spinnerNode.getBoundingClientRect().height;
+
+        if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {
+          delete spinnerStyle.top;
+        }
+      } // ПО ГОРИЗОНТАЛИ
+      // Если левый край контейнера правее левого края окна,
+      // то сдвигаем и лоадер
+
+
+      if (containerLeft > 0) {
+        spinnerStyle.left = containerLeft;
+      } // Если правый край контейнера левее правого края окна,
+      // то сдвигаем и лоадер
+
+
+      if (containerRight < windowWidth) {
+        spinnerStyle.right = windowWidth - containerRight;
+      }
+
+      _this.setState({
+        isStickySpinner: true,
+        spinnerStyle: spinnerStyle
+      });
+    };
+
+    _this.disableChildrenFocus = function () {
+      if (!_this.childrenObserver) {
+        _this.makeObservable();
+      }
+
+      var tabbableElements = getTabbableElements(_this.childrenContainerNode);
+      tabbableElements.forEach(function (el) {
+        if (!el.hasAttribute('origin-tabindex')) {
+          el.setAttribute('origin-tabindex', el.tabIndex.toString());
+        }
+
+        el.tabIndex = -1;
+      });
+    };
+
+    _this.enableChildrenFocus = function () {
+      _this.makeUnobservable();
+
+      document.querySelectorAll('[origin-tabindex]').forEach(function (el) {
+        var _el$getAttribute;
+
+        el.setAttribute('tabindex', (_el$getAttribute = el.getAttribute('origin-tabindex')) != null ? _el$getAttribute : '0');
+        el.removeAttribute('origin-tabindex');
+      });
+    };
+
+    _this.makeObservable = function () {
+      var target = _this.childrenContainerNode;
+
+      if (!target) {
+        return;
+      }
+
+      var config = {
+        childList: true,
+        subtree: true
+      };
+      var observer = new MutationObserver(_this.disableChildrenFocus);
+      observer.observe(target, config);
+      _this.childrenObserver = observer;
+    };
+
+    _this.makeUnobservable = function () {
+      var _this$childrenObserve;
+
+      (_this$childrenObserve = _this.childrenObserver) == null ? void 0 : _this$childrenObserve.disconnect();
+      _this.childrenObserver = null;
+    };
+
+    _this.spinnerContainerNode = null;
+    _this.childrenContainerNode = null;
+    _this.childrenObserver = null;
+    _this.spinnerNode = null;
+    _this.state = {
+      isStickySpinner: false,
+      isSpinnerVisible: false,
+      isLoaderActive: false
+    };
+    _this.spinnerTask = new TaskWithDelayAndMinimalDuration({
+      delayBeforeTaskStart: _this.props.delayBeforeSpinnerShow,
+      durationOfTask: _this.props.minimalDelayBeforeSpinnerHide,
+      taskStartCallback: function taskStartCallback() {
+        return _this.setState({
+          isSpinnerVisible: true
+        });
+      },
+      taskStopCallback: function taskStopCallback() {
+        return _this.setState({
+          isSpinnerVisible: false
+        });
+      }
+    });
+    return _this;
+  }
+
+  var _proto = Loader.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.checkSpinnerPosition();
+    this.props.active && this.spinnerTask.start();
+    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));
+
+    if (this.props.active) {
+      this.disableChildrenFocus();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var _this$props = this.props,
+        component = _this$props.component,
+        active = _this$props.active,
+        delayBeforeSpinnerShow = _this$props.delayBeforeSpinnerShow,
+        minimalDelayBeforeSpinnerHide = _this$props.minimalDelayBeforeSpinnerHide;
+    var isLoaderActive = this.state.isLoaderActive;
+
+    if (active && !prevProps.active || prevProps.component !== component) {
+      this.checkSpinnerPosition();
+    }
+
+    if (delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow || minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide) {
+      this.spinnerTask.update({
+        delayBeforeTaskStart: delayBeforeSpinnerShow,
+        durationOfTask: minimalDelayBeforeSpinnerHide
+      });
+    }
+
+    if (active !== prevProps.active) {
+      active ? this.spinnerTask.start() : this.spinnerTask.stop();
+    }
+
+    if (isLoaderActive !== prevState.isLoaderActive) {
+      if (isLoaderActive) {
+        this.disableChildrenFocus();
+      } else {
+        this.enableChildrenFocus();
+      }
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.makeUnobservable();
+
+    if (this.layoutEvents) {
+      this.layoutEvents.remove();
+    }
+
+    this.spinnerTask.clearTask();
+  };
+
+  Loader.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    if (props.active && !state.isLoaderActive) {
+      return {
+        isLoaderActive: true
+      };
+    }
+
+    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {
+      return {
+        isLoaderActive: false
+      };
+    }
+
+    return state;
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _cx;
+
+    var _this$props2 = this.props,
+        type = _this$props2.type,
+        caption = _this$props2.caption,
+        component = _this$props2.component;
+    var isLoaderActive = this.state.isLoaderActive;
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+      className: styles.loader(),
+      "data-tid": isLoaderActive ? 'Loader__Veil' : ''
+    }, /*#__PURE__*/React.createElement(ZIndex, {
+      priority: 'Loader',
+      applyZIndex: isLoaderActive,
+      coverChildren: isLoaderActive,
+      style: {
+        height: '100%'
+      },
+      wrapperRef: this.childrenRef
+    }, this.props.children), isLoaderActive && /*#__PURE__*/React.createElement(ZIndex, {
+      wrapperRef: this.spinnerRef,
+      priority: 'Loader',
+      className: cx((_cx = {}, _cx[styles.active(this.theme)] = isLoaderActive, _cx))
+    }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));
+  };
+
+  _proto.renderSpinner = function renderSpinner(type, caption, component) {
+    var _cx2,
+        _this3 = this;
+
+    return /*#__PURE__*/React.createElement("span", {
+      "data-tid": 'Loader__Spinner',
+      className: cx(styles.spinnerContainer(), (_cx2 = {}, _cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)),
+      style: this.state.spinnerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.spinnerComponentWrapper(),
+      ref: function ref(element) {
+        _this3.spinnerNode = element;
+      }
+    }, component !== undefined ? component : /*#__PURE__*/React.createElement(Spinner, {
+      type: type,
+      caption: caption
+    })));
+  };
+
+  return Loader;
+}(React.Component);
+Loader.__KONTUR_REACT_UI__ = 'Loader';
+Loader.defaultProps = {
+  type: Spinner.Types.normal,
+  active: false,
+  delayBeforeSpinnerShow: isTestEnv ? 0 : 300,
+  minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000
+};
+Loader.propTypes = {
+  /**
+  * показываем лоадер или нет
+  */
+  active: PropTypes.bool,
+
+  /**
+  * Текст рядом с лоадером.
+  *
+  * @default  "Загрузка"
+  */
+  caption: Spinner.propTypes.caption,
+  component: PropTypes.node,
+
+  /**
+  * Класс для обертки
+  */
+  className: PropTypes.string,
+
+  /**
+  * Тип спиннера: mini, normal, big
+  *
+  * @default  normal
+  *
+  * Spinner.types - все доступные типы
+  */
+  type: PropTypes.oneOf(Object.keys(Spinner.Types)),
+
+  /**
+  * Время в миллисекундах для показа вуали без спиннера.
+  * @default 300
+  */
+  delayBeforeSpinnerShow: PropTypes.number,
+
+  /**
+  * Минимальное время в миллисекундах для показа спиннера
+  * @default 1000
+  */
+  minimalDelayBeforeSpinnerHide: PropTypes.number
+};

package/components/Loader/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","debounce","LayoutEvents","Spinner","ThemeContext","ZIndex","CommonWrapper","cx","isTestEnv","TaskWithDelayAndMinimalDuration","getTabbableElements","styles","Loader","props","theme","spinnerContainerNode","childrenContainerNode","spinnerNode","layoutEvents","spinnerTask","childrenObserver","childrenRef","element","spinnerRef","checkSpinnerPosition","getBoundingClientRect","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","disableChildrenFocus","makeObservable","tabbableElements","forEach","el","hasAttribute","setAttribute","tabIndex","toString","enableChildrenFocus","makeUnobservable","document","querySelectorAll","getAttribute","removeAttribute","target","config","childList","subtree","observer","MutationObserver","observe","disconnect","state","isSpinnerVisible","isLoaderActive","delayBeforeTaskStart","delayBeforeSpinnerShow","durationOfTask","minimalDelayBeforeSpinnerHide","taskStartCallback","taskStopCallback","componentDidMount","active","start","addListener","componentDidUpdate","prevProps","prevState","component","update","stop","componentWillUnmount","remove","clearTask","getDerivedStateFromProps","render","renderMain","type","caption","loader","children","renderSpinner","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper","undefined","Component","__KONTUR_REACT_UI__","defaultProps","Types","normal","propTypes","bool","node","className","string","oneOf","Object","keys","number"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,QAAP,MAAqB,iBAArB;;AAEA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,OAAT,QAAsC,YAAtC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAASC,+BAAT,QAAgD,2CAAhD;AACA,SAASC,mBAAT,QAAoC,+BAApC;;AAEA,SAASC,MAAT,QAAuB,iBAAvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AACA;AACA;AACA,WAAaC,MAAb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DE,kBAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MARxBC,KAQwB,gBAPxBC,oBAOwB,gBANxBC,qBAMwB,gBALxBC,WAKwB,gBAJxBC,YAIwB,gBAHxBC,WAGwB,gBAFxBC,gBAEwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIxBC,IAAAA,WAjIwB,GAiIV,UAACC,OAAD,EAAoC;AACxD,YAAKN,qBAAL,GAA6BM,OAA7B;AACD,KAnI+B;;AAqIxBC,IAAAA,UArIwB,GAqIX,UAACD,OAAD,EAAoC;AACvD,YAAKP,oBAAL,GAA4BO,OAA5B;AACD,KAvI+B;;;;;;;;;;;;;;;;;;;;;AA4JxBE,IAAAA,oBA5JwB,GA4JD,YAAM;AACnC,UAAI,CAAC,MAAKT,oBAAV,EAAgC;AAC9B;AACD,OAHkC;;;;;;;;;AAY/B,YAAKA,oBAAL,CAA0BU,qBAA1B,EAZ+B,CAM5BC,YAN4B,yBAMjCC,GANiC,CAO1BC,cAP0B,yBAOjCC,KAPiC,CAQzBC,eARyB,yBAQjCC,MARiC,CAS3BC,aAT2B,yBASjCC,IATiC,CAUzBC,eAVyB,yBAUjCC,MAViC,CAW1BC,cAX0B,yBAWjCC,KAXiC;;AAcnC,UAAMC,YAAY,GAAGC,MAAM,CAACC,WAA5B;AACA,UAAMC,WAAW,GAAGF,MAAM,CAACG,UAA3B;;AAEA;AACA;AACA,UAAIJ,YAAY,IAAIJ,eAAhB,IAAmCO,WAAW,IAAIL,cAAtD,EAAsE;AACpE,cAAKO,QAAL,CAAc;AACZC,UAAAA,eAAe,EAAE,KADL;AAEZC,UAAAA,YAAY,EAAE,EAFF,EAAd;;AAIA;AACD;;AAED,UAAMA,YAKL;;;;;AAAG;AACFlB,QAAAA,GAAG,EAAE,EADH;AAEFE,QAAAA,KAAK,EAAE,CAFL;AAGFE,QAAAA,MAAM,EAAE,EAHN;AAIFE,QAAAA,IAAI,EAAE,CAJJ,EALJ;;;AAYA;AACA;AACA;AACA,UAAIP,YAAY,GAAG,CAAnB,EAAsB;AACpBmB,QAAAA,YAAY,CAAClB,GAAb,GAAmBD,YAAY,GAAG,EAAlC;AACD;;AAED;AACA;AACA,UAAII,eAAe,GAAGQ,YAAtB,EAAoC;AAClCO,QAAAA,YAAY,CAACd,MAAb,GAAsBe,IAAI,CAACC,GAAL,CAAST,YAAY,GAAGR,eAAxB,IAA2C,EAAjE;AACD;;AAED;AACA;AACA,UAAI,MAAKb,WAAT,EAAsB;AACpB,YAAM+B,aAAa,GAAG,MAAK/B,WAAL,CAAiBQ,qBAAjB,GAAyCU,MAA/D;;AAEA,YAAIa,aAAa,IAAIH,YAAY,CAACd,MAAb,IAAuBO,YAAY,GAAGU,aAA3D,EAA0E;AACxE,iBAAOH,YAAY,CAAClB,GAApB;AACD;AACF;;AAED;AACA;AACA;AACA,UAAIK,aAAa,GAAG,CAApB,EAAuB;AACrBa,QAAAA,YAAY,CAACZ,IAAb,GAAoBD,aAApB;AACD;;AAED;AACA;AACA,UAAIJ,cAAc,GAAGa,WAArB,EAAkC;AAChCI,QAAAA,YAAY,CAAChB,KAAb,GAAqBY,WAAW,GAAGb,cAAnC;AACD;;AAED,YAAKe,QAAL,CAAc;AACZC,QAAAA,eAAe,EAAE,IADL;AAEZC,QAAAA,YAAY,EAAZA,YAFY,EAAd;;AAID,KA3O+B;;AA6OxBI,IAAAA,oBA7OwB,GA6OD,YAAM;AACnC,UAAI,CAAC,MAAK7B,gBAAV,EAA4B;AAC1B,cAAK8B,cAAL;AACD;AACD,UAAMC,gBAAgB,GAAGzC,mBAAmB,CAAC,MAAKM,qBAAN,CAA5C;AACAmC,MAAAA,gBAAgB,CAACC,OAAjB,CAAyB,UAACC,EAAD,EAAQ;AAC/B,YAAI,CAACA,EAAE,CAACC,YAAH,CAAgB,iBAAhB,CAAL,EAAyC;AACvCD,UAAAA,EAAE,CAACE,YAAH,CAAgB,iBAAhB,EAAmCF,EAAE,CAACG,QAAH,CAAYC,QAAZ,EAAnC;AACD;AACDJ,QAAAA,EAAE,CAACG,QAAH,GAAc,CAAC,CAAf;AACD,OALD;AAMD,KAxP+B;;AA0PxBE,IAAAA,mBA1PwB,GA0PF,YAAM;AAClC,YAAKC,gBAAL;AACAC,MAAAA,QAAQ,CAACC,gBAAT,CAA0B,mBAA1B,EAA+CT,OAA/C,CAAuD,UAACC,EAAD,EAAQ;AAC7DA,QAAAA,EAAE,CAACE,YAAH,CAAgB,UAAhB,sBAA4BF,EAAE,CAACS,YAAH,CAAgB,iBAAhB,CAA5B,+BAAkE,GAAlE;AACAT,QAAAA,EAAE,CAACU,eAAH,CAAmB,iBAAnB;AACD,OAHD;AAID,KAhQ+B;;AAkQxBb,IAAAA,cAlQwB,GAkQP,YAAM;AAC7B,UAAMc,MAAM,GAAG,MAAKhD,qBAApB;AACA,UAAI,CAACgD,MAAL,EAAa;AACX;AACD;AACD,UAAMC,MAAM,GAAG;AACbC,QAAAA,SAAS,EAAE,IADE;AAEbC,QAAAA,OAAO,EAAE,IAFI,EAAf;;AAIA,UAAMC,QAAQ,GAAG,IAAIC,gBAAJ,CAAqB,MAAKpB,oBAA1B,CAAjB;AACAmB,MAAAA,QAAQ,CAACE,OAAT,CAAiBN,MAAjB,EAAyBC,MAAzB;AACA,YAAK7C,gBAAL,GAAwBgD,QAAxB;AACD,KA9Q+B;;AAgRxBT,IAAAA,gBAhRwB,GAgRL,YAAM;AAC/B,qCAAKvC,gBAAL,2CAAuBmD,UAAvB;AACA,YAAKnD,gBAAL,GAAwB,IAAxB;AACD,KAnR+B,CAG9B,MAAKL,oBAAL,GAA4B,IAA5B,CACA,MAAKC,qBAAL,GAA6B,IAA7B,CACA,MAAKI,gBAAL,GAAwB,IAAxB,CACA,MAAKH,WAAL,GAAmB,IAAnB,CAEA,MAAKuD,KAAL,GAAa,EACX5B,eAAe,EAAE,KADN,EAEX6B,gBAAgB,EAAE,KAFP,EAGXC,cAAc,EAAE,KAHL,EAAb,CAMA,MAAKvD,WAAL,GAAmB,IAAIV,+BAAJ,CAAoC,EACrDkE,oBAAoB,EAAE,MAAK9D,KAAL,CAAW+D,sBADoB,EAErDC,cAAc,EAAE,MAAKhE,KAAL,CAAWiE,6BAF0B,EAGrDC,iBAAiB,EAAE,qCAAM,MAAKpC,QAAL,CAAc,EAAE8B,gBAAgB,EAAE,IAApB,EAAd,CAAN,EAHkC,EAIrDO,gBAAgB,EAAE,oCAAM,MAAKrC,QAAL,CAAc,EAAE8B,gBAAgB,EAAE,KAApB,EAAd,CAAN,EAJmC,EAApC,CAAnB,CAd8B,aAoB/B,CA9EH,qCAgFSQ,iBAhFT,GAgFE,6BAA2B,CACzB,KAAKzD,oBAAL,GACA,KAAKX,KAAL,CAAWqE,MAAX,IAAqB,KAAK/D,WAAL,CAAiBgE,KAAjB,EAArB,CACA,KAAKjE,YAAL,GAAoBhB,YAAY,CAACkF,WAAb,CAAyBnF,QAAQ,CAAC,KAAKuB,oBAAN,EAA4B,EAA5B,CAAjC,CAApB,CAEA,IAAI,KAAKX,KAAL,CAAWqE,MAAf,EAAuB,CACrB,KAAKjC,oBAAL,GACD,CACF,CAxFH,QA0FSoC,kBA1FT,GA0FE,4BAA0BC,SAA1B,EAA4DC,SAA5D,EAA8F,mBACP,KAAK1E,KADE,CACpF2E,SADoF,eACpFA,SADoF,CACzEN,MADyE,eACzEA,MADyE,CACjEN,sBADiE,eACjEA,sBADiE,CACzCE,6BADyC,eACzCA,6BADyC,KAEpFJ,cAFoF,GAEjE,KAAKF,KAF4D,CAEpFE,cAFoF,CAI5F,IAAKQ,MAAM,IAAI,CAACI,SAAS,CAACJ,MAAtB,IAAiCI,SAAS,CAACE,SAAV,KAAwBA,SAA7D,EAAwE,CACtE,KAAKhE,oBAAL,GACD,CAED,IACEoD,sBAAsB,KAAKU,SAAS,CAACV,sBAArC,IACAE,6BAA6B,KAAKQ,SAAS,CAACR,6BAF9C,EAGE,CACA,KAAK3D,WAAL,CAAiBsE,MAAjB,CAAwB,EACtBd,oBAAoB,EAAEC,sBADA,EAEtBC,cAAc,EAAEC,6BAFM,EAAxB,EAID,CAED,IAAII,MAAM,KAAKI,SAAS,CAACJ,MAAzB,EAAiC,CAC/BA,MAAM,GAAG,KAAK/D,WAAL,CAAiBgE,KAAjB,EAAH,GAA8B,KAAKhE,WAAL,CAAiBuE,IAAjB,EAApC,CACD,CAED,IAAIhB,cAAc,KAAKa,SAAS,CAACb,cAAjC,EAAiD,CAC/C,IAAIA,cAAJ,EAAoB,CAClB,KAAKzB,oBAAL,GACD,CAFD,MAEO,CACL,KAAKS,mBAAL,GACD,CACF,CACF,CAvHH,QAyHSiC,oBAzHT,GAyHE,gCAA8B,CAC5B,KAAKhC,gBAAL,GACA,IAAI,KAAKzC,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkB0E,MAAlB,GACD,CACD,KAAKzE,WAAL,CAAiB0E,SAAjB,GACD,CA/HH,QAiIgBC,wBAjIhB,GAiIE,kCAAuCjF,KAAvC,EAA2D2D,KAA3D,EAAqG,CACnG,IAAI3D,KAAK,CAACqE,MAAN,IAAgB,CAACV,KAAK,CAACE,cAA3B,EAA2C,CACzC,OAAO,EACLA,cAAc,EAAE,IADX,EAAP,CAGD,CACD,IAAIF,KAAK,CAACE,cAAN,IAAwB,EAAE7D,KAAK,CAACqE,MAAN,IAAgBV,KAAK,CAACC,gBAAxB,CAA5B,EAAuE,CACrE,OAAO,EACLC,cAAc,EAAE,KADX,EAAP,CAGD,CAED,OAAOF,KAAP,CACD,CA9IH,QAgJSuB,MAhJT,GAgJE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACjF,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACkF,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAzJH,QA2JUA,UA3JV,GA2JE,sBAAqB,4BACkB,KAAKnF,KADvB,CACXoF,IADW,gBACXA,IADW,CACLC,OADK,gBACLA,OADK,CACIV,SADJ,gBACIA,SADJ,KAEXd,cAFW,GAEQ,KAAKF,KAFb,CAEXE,cAFW,CAInB,oBACE,oBAAC,aAAD,EAAmB,KAAK7D,KAAxB,eACE,6BAAK,SAAS,EAAEF,MAAM,CAACwF,MAAP,EAAhB,EAAiC,YAAUzB,cAAc,GAAG,cAAH,GAAoB,EAA7E,iBACE,oBAAC,MAAD,IACE,QAAQ,EAAE,QADZ,EAEE,WAAW,EAAEA,cAFf,EAGE,aAAa,EAAEA,cAHjB,EAIE,KAAK,EAAE,EAAEvC,MAAM,EAAE,MAAV,EAJT,EAKE,UAAU,EAAE,KAAKd,WALnB,IAOG,KAAKR,KAAL,CAAWuF,QAPd,CADF,EAUG1B,cAAc,iBACb,oBAAC,MAAD,IACE,UAAU,EAAE,KAAKnD,UADnB,EAEE,QAAQ,EAAE,QAFZ,EAGE,SAAS,EAAEhB,EAAE,gBACVI,MAAM,CAACuE,MAAP,CAAc,KAAKpE,KAAnB,CADU,IACkB4D,cADlB,OAHf,IAOG,KAAKF,KAAL,CAAWC,gBAAX,IAA+B,KAAK4B,aAAL,CAAmBJ,IAAnB,EAAyBC,OAAzB,EAAkCV,SAAlC,CAPlC,CAXJ,CADF,CADF,CA0BD,CAzLH,QAmMUa,aAnMV,GAmME,uBAAsBJ,IAAtB,EAAwDC,OAAxD,EAAmFV,SAAnF,EAAgH,wBAC9G,oBACE,8BACE,YAAU,iBADZ,EAEE,SAAS,EAAEjF,EAAE,CAACI,MAAM,CAAC2F,gBAAP,EAAD,mBAA+B3F,MAAM,CAAC4F,sBAAP,EAA/B,IAAiE,KAAK/B,KAAL,CAAW5B,eAA5E,QAFf,EAGE,KAAK,EAAE,KAAK4B,KAAL,CAAW3B,YAHpB,iBAKE,6BACE,SAAS,EAAElC,MAAM,CAAC6F,uBAAP,EADb,EAEE,GAAG,EAAE,aAAClF,OAAD,EAAa,CAChB,MAAI,CAACL,WAAL,GAAmBK,OAAnB,CACD,CAJH,IAMGkE,SAAS,KAAKiB,SAAd,GAA0BjB,SAA1B,gBAAsC,oBAAC,OAAD,IAAS,IAAI,EAAES,IAAf,EAAqB,OAAO,EAAEC,OAA9B,GANzC,CALF,CADF,CAgBD,CApNH,iBAA4BnG,KAAK,CAAC2G,SAAlC,EAAa9F,M,CACG+F,mB,GAAsB,Q,CADzB/F,M,CAGGgG,Y,GAAqC,EACjDX,IAAI,EAAE9F,OAAO,CAAC0G,KAAR,CAAcC,MAD6B,EAEjD5B,MAAM,EAAE,KAFyC,EAGjDN,sBAAsB,EAAEpE,SAAS,GAAG,CAAH,GAAO,GAHS,EAIjDsE,6BAA6B,EAAEtE,SAAS,GAAG,CAAH,GAAO,IAJE,E,CAHxCI,M,CAUGmG,S,GAAY,EACxB;AACJ;AACA,KACI7B,MAAM,EAAElF,SAAS,CAACgH,IAJM,EAMxB;AACJ;AACA;AACA;AACA,KACId,OAAO,EAAE/F,OAAO,CAAC4G,SAAR,CAAkBb,OAXH,EAaxBV,SAAS,EAAExF,SAAS,CAACiH,IAbG,EAexB;AACJ;AACA,KACIC,SAAS,EAAElH,SAAS,CAACmH,MAlBG,EAoBxB;AACJ;AACA;AACA;AACA;AACA;AACA,KACIlB,IAAI,EAAEjG,SAAS,CAACoH,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYnH,OAAO,CAAC0G,KAApB,CAAhB,CA3BkB,EA4BxB;AACJ;AACA;AACA,KACIjC,sBAAsB,EAAE5E,SAAS,CAACuH,MAhCV,EAiCxB;AACJ;AACA;AACA,KACIzC,6BAA6B,EAAE9E,SAAS,CAACuH,MArCjB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Spinner, SpinnerProps } from '../Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers';\n\nimport { styles } from './Loader.styles';\n\nexport interface LoaderProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Флаг переключения состояния лоадера\n   * @default false\n   */\n  active: boolean;\n  caption?: SpinnerProps['caption'];\n  /**\n   * Компонент заменяющий спиннер.\n   */\n  component?: React.ReactNode;\n  className?: string;\n  type?: 'mini' | 'normal' | 'big';\n  /**\n   * Время в миллисекундах для показа вуали без спиннера.\n   * @default 300\n   */\n  delayBeforeSpinnerShow: number;\n  /**\n   * Минимальное время в миллисекундах для показа спиннера\n   * @default 1000\n   */\n  minimalDelayBeforeSpinnerHide: number;\n}\n\nexport interface LoaderState {\n  isStickySpinner: boolean;\n  isSpinnerVisible: boolean;\n  isLoaderActive: boolean;\n  spinnerStyle?: object;\n}\n\n/**\n * DRAFT - лоадер-контейнер\n */\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n  public static __KONTUR_REACT_UI__ = 'Loader';\n\n  public static defaultProps: Partial<LoaderProps> = {\n    type: Spinner.Types.normal,\n    active: false,\n    delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n    minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n  };\n\n  public static propTypes = {\n    /**\n     * показываем лоадер или нет\n     */\n    active: PropTypes.bool,\n\n    /**\n     * Текст рядом с лоадером.\n     *\n     * @default  \"Загрузка\"\n     */\n    caption: Spinner.propTypes.caption,\n\n    component: PropTypes.node,\n\n    /**\n     * Класс для обертки\n     */\n    className: PropTypes.string,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * @default  normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\n    /**\n     * Время в миллисекундах для показа вуали без спиннера.\n     * @default 300\n     */\n    delayBeforeSpinnerShow: PropTypes.number,\n    /**\n     * Минимальное время в миллисекундах для показа спиннера\n     * @default 1000\n     */\n    minimalDelayBeforeSpinnerHide: PropTypes.number,\n  };\n\n  private theme!: Theme;\n  private spinnerContainerNode: Nullable<HTMLDivElement>;\n  private childrenContainerNode: Nullable<HTMLDivElement>;\n  private spinnerNode: Nullable<HTMLDivElement>;\n  private layoutEvents: Nullable<{ remove: () => void }>;\n  private spinnerTask: TaskWithDelayAndMinimalDuration;\n  private childrenObserver: Nullable<MutationObserver>;\n\n  constructor(props: LoaderProps) {\n    super(props);\n\n    this.spinnerContainerNode = null;\n    this.childrenContainerNode = null;\n    this.childrenObserver = null;\n    this.spinnerNode = null;\n\n    this.state = {\n      isStickySpinner: false,\n      isSpinnerVisible: false,\n      isLoaderActive: false,\n    };\n\n    this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n      delayBeforeTaskStart: this.props.delayBeforeSpinnerShow,\n      durationOfTask: this.props.minimalDelayBeforeSpinnerHide,\n      taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n      taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n    });\n  }\n\n  public componentDidMount() {\n    this.checkSpinnerPosition();\n    this.props.active && this.spinnerTask.start();\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\n\n    if (this.props.active) {\n      this.disableChildrenFocus();\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n    const { component, active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.props;\n    const { isLoaderActive } = this.state;\n\n    if ((active && !prevProps.active) || prevProps.component !== component) {\n      this.checkSpinnerPosition();\n    }\n\n    if (\n      delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow ||\n      minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n    ) {\n      this.spinnerTask.update({\n        delayBeforeTaskStart: delayBeforeSpinnerShow,\n        durationOfTask: minimalDelayBeforeSpinnerHide,\n      });\n    }\n\n    if (active !== prevProps.active) {\n      active ? this.spinnerTask.start() : this.spinnerTask.stop();\n    }\n\n    if (isLoaderActive !== prevState.isLoaderActive) {\n      if (isLoaderActive) {\n        this.disableChildrenFocus();\n      } else {\n        this.enableChildrenFocus();\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    this.makeUnobservable();\n    if (this.layoutEvents) {\n      this.layoutEvents.remove();\n    }\n    this.spinnerTask.clearTask();\n  }\n\n  public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n    if (props.active && !state.isLoaderActive) {\n      return {\n        isLoaderActive: true,\n      };\n    }\n    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {\n      return {\n        isLoaderActive: false,\n      };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { type, caption, component } = this.props;\n    const { isLoaderActive } = this.state;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div className={styles.loader()} data-tid={isLoaderActive ? 'Loader__Veil' : ''}>\n          <ZIndex\n            priority={'Loader'}\n            applyZIndex={isLoaderActive}\n            coverChildren={isLoaderActive}\n            style={{ height: '100%' }}\n            wrapperRef={this.childrenRef}\n          >\n            {this.props.children}\n          </ZIndex>\n          {isLoaderActive && (\n            <ZIndex\n              wrapperRef={this.spinnerRef}\n              priority={'Loader'}\n              className={cx({\n                [styles.active(this.theme)]: isLoaderActive,\n              })}\n            >\n              {this.state.isSpinnerVisible && this.renderSpinner(type, caption, component)}\n            </ZIndex>\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private childrenRef = (element: HTMLDivElement | null) => {\n    this.childrenContainerNode = element;\n  };\n\n  private spinnerRef = (element: HTMLDivElement | null) => {\n    this.spinnerContainerNode = element;\n  };\n\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {\n    return (\n      <span\n        data-tid={'Loader__Spinner'}\n        className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}\n        style={this.state.spinnerStyle}\n      >\n        <div\n          className={styles.spinnerComponentWrapper()}\n          ref={(element) => {\n            this.spinnerNode = element;\n          }}\n        >\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\n        </div>\n      </span>\n    );\n  }\n\n  private checkSpinnerPosition = () => {\n    if (!this.spinnerContainerNode) {\n      return;\n    }\n\n    const {\n      top: containerTop,\n      right: containerRight,\n      bottom: containerBottom,\n      left: containerLeft,\n      height: containerHeight,\n      width: containerWidth,\n    } = this.spinnerContainerNode.getBoundingClientRect();\n\n    const windowHeight = window.innerHeight;\n    const windowWidth = window.innerWidth;\n\n    // Если контейнер не больше высоты и не шире окна,\n    // то просто выравниваем по центру\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n      this.setState({\n        isStickySpinner: false,\n        spinnerStyle: {},\n      });\n      return;\n    }\n\n    const spinnerStyle: {\n      top?: number;\n      right: number;\n      bottom: number;\n      left: number;\n    } = {\n      top: 30,\n      right: 0,\n      bottom: 30,\n      left: 0,\n    };\n\n    // ПО ВЕРТИКАЛИ\n    // Если верхний край контейнера ниже верхнего края окна,\n    // то сдвигаем и лоадер\n    if (containerTop > 0) {\n      spinnerStyle.top = containerTop + 30;\n    }\n\n    // Если нижний край контейнера выше нижнего края окна,\n    // то сдвигаем и лоадер\n    if (containerBottom < windowHeight) {\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n    }\n\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n    if (this.spinnerNode) {\n      const spinnerHeight = this.spinnerNode.getBoundingClientRect().height;\n\n      if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n        delete spinnerStyle.top;\n      }\n    }\n\n    // ПО ГОРИЗОНТАЛИ\n    // Если левый край контейнера правее левого края окна,\n    // то сдвигаем и лоадер\n    if (containerLeft > 0) {\n      spinnerStyle.left = containerLeft;\n    }\n\n    // Если правый край контейнера левее правого края окна,\n    // то сдвигаем и лоадер\n    if (containerRight < windowWidth) {\n      spinnerStyle.right = windowWidth - containerRight;\n    }\n\n    this.setState({\n      isStickySpinner: true,\n      spinnerStyle,\n    });\n  };\n\n  private disableChildrenFocus = () => {\n    if (!this.childrenObserver) {\n      this.makeObservable();\n    }\n    const tabbableElements = getTabbableElements(this.childrenContainerNode);\n    tabbableElements.forEach((el) => {\n      if (!el.hasAttribute('origin-tabindex')) {\n        el.setAttribute('origin-tabindex', el.tabIndex.toString());\n      }\n      el.tabIndex = -1;\n    });\n  };\n\n  private enableChildrenFocus = () => {\n    this.makeUnobservable();\n    document.querySelectorAll('[origin-tabindex]').forEach((el) => {\n      el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n      el.removeAttribute('origin-tabindex');\n    });\n  };\n\n  private makeObservable = () => {\n    const target = this.childrenContainerNode;\n    if (!target) {\n      return;\n    }\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n    const observer = new MutationObserver(this.disableChildrenFocus);\n    observer.observe(target, config);\n    this.childrenObserver = observer;\n  };\n\n  private makeUnobservable = () => {\n    this.childrenObserver?.disconnect();\n    this.childrenObserver = null;\n  };\n}\n"]}

package/components/Loader/Loader/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Loader/Loader.js",
+  "module": "Loader",
+  "types": "../Loader.d.ts",
+  "sideEffects": false
+}

package/components/Loader/Loader.d.ts

@@ -1,57 +1,99 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { SpinnerType, SpinnerProps } from '../Spinner';
-export interface LoaderProps {
-    children?: React.ReactNode;
-    active: boolean;
-    caption?: SpinnerProps['caption'];
-    className?: string;
-    type?: 'mini' | 'normal' | 'big';
-}
-export interface LoaderState {
-    isStickySpinner: boolean;
-    spinnerStyle?: object;
-}
-/**
- * DRAFT - лоадер-контейнер
- */
-declare class Loader extends React.Component<LoaderProps, LoaderState> {
-    static defaultProps: {
-        type: SpinnerType;
-    };
-    static propTypes: {
-        /**
-         * показываем лоадер или нет
-         */
-        active: PropTypes.Validator<boolean>;
-        /**
-         * Текст рядом с лоадером.
-         *
-         * "Загрузка" - значение по-умолчанию
-         */
-        caption: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Класс для обертки
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Тип спиннера: mini, normal, big
-         *
-         * Значение по-умолчанию - normal
-         *
-         * Spinner.types - все доступные типы
-         */
-        type: PropTypes.Requireable<string>;
-    };
-    private containerNode;
-    private spinnerNode;
-    private spinnerHeight?;
-    private layoutEvents;
-    constructor(props: LoaderProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private renderSpinner;
-    private checkSpinnerPosition;
-}
-export default Loader;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SpinnerProps } from '../Spinner';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface LoaderProps extends CommonProps {
+    children?: React.ReactNode;
+    /**
+     * Флаг переключения состояния лоадера
+     * @default false
+     */
+    active: boolean;
+    caption?: SpinnerProps['caption'];
+    /**
+     * Компонент заменяющий спиннер.
+     */
+    component?: React.ReactNode;
+    className?: string;
+    type?: 'mini' | 'normal' | 'big';
+    /**
+     * Время в миллисекундах для показа вуали без спиннера.
+     * @default 300
+     */
+    delayBeforeSpinnerShow: number;
+    /**
+     * Минимальное время в миллисекундах для показа спиннера
+     * @default 1000
+     */
+    minimalDelayBeforeSpinnerHide: number;
+}
+export interface LoaderState {
+    isStickySpinner: boolean;
+    isSpinnerVisible: boolean;
+    isLoaderActive: boolean;
+    spinnerStyle?: object;
+}
+/**
+ * DRAFT - лоадер-контейнер
+ */
+export declare class Loader extends React.Component<LoaderProps, LoaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: Partial<LoaderProps>;
+    static propTypes: {
+        /**
+         * показываем лоадер или нет
+         */
+        active: PropTypes.Requireable<boolean>;
+        /**
+         * Текст рядом с лоадером.
+         *
+         * @default  "Загрузка"
+         */
+        caption: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Класс для обертки
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Тип спиннера: mini, normal, big
+         *
+         * @default  normal
+         *
+         * Spinner.types - все доступные типы
+         */
+        type: PropTypes.Requireable<string>;
+        /**
+         * Время в миллисекундах для показа вуали без спиннера.
+         * @default 300
+         */
+        delayBeforeSpinnerShow: PropTypes.Requireable<number>;
+        /**
+         * Минимальное время в миллисекундах для показа спиннера
+         * @default 1000
+         */
+        minimalDelayBeforeSpinnerHide: PropTypes.Requireable<number>;
+    };
+    private theme;
+    private spinnerContainerNode;
+    private childrenContainerNode;
+    private spinnerNode;
+    private layoutEvents;
+    private spinnerTask;
+    private childrenObserver;
+    constructor(props: LoaderProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>): void;
+    componentWillUnmount(): void;
+    static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState>;
+    render(): JSX.Element;
+    private renderMain;
+    private childrenRef;
+    private spinnerRef;
+    private renderSpinner;
+    private checkSpinnerPosition;
+    private disableChildrenFocus;
+    private enableChildrenFocus;
+    private makeObservable;
+    private makeUnobservable;
+}

package/components/Loader/Loader.md

@@ -0,0 +1,25 @@
+```jsx harmony
+<Loader type="big" active>
+  <h1>Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments."</h1>
+  <p>
+    No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela,
+    Bender, we're going grave robbing.
+  </p>
+  <p>
+    Are you crazy? I can't swallow that. Large bet on myself in round one. Hey, whatcha watching?
+    <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>
+    <em>It's okay, Bender.</em> I like cooking too.
+  </p>
+  <h2>Oh, I think we should just stay friends.</h2>
+  <p>
+    No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go… look for
+    more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife
+    holding up? …To shreds, you say.
+  </p>
+  <ol>
+    <li>No! The kind with looting and maybe starting a few fires!</li>
+    <li>You are the last hope of the universe.</li>
+    <li>Hey, guess what you're accessories to.</li>
+  </ol>
+</Loader>
+```

package/components/Loader/Loader.styles/Loader.styles.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ", ";\n    "])), t.loaderBg);
+  },
+  loader: function loader() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    "])));
+  },
+  spinnerContainer: function spinnerContainer() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])));
+  },
+  spinnerContainerSticky: function spinnerContainerSticky() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n    "])));
+  },
+  spinnerComponentWrapper: function spinnerComponentWrapper() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  }
+});

package/components/Loader/Loader.styles/Loader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Loader.styles.ts"],"names":["css","memoizeStyle","styles","active","t","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,WAAOJ,GAAP;;;;;;;AAOgBI,IAAAA,CAAC,CAACC,QAPlB;;AASD,GAXgC;;AAajCC,EAAAA,MAbiC,oBAaxB;AACP,WAAON,GAAP;;;;;;;AAOD,GArBgC;;AAuBjCO,EAAAA,gBAvBiC,8BAuBd;AACjB,WAAOP,GAAP;;;;;;;;;;;;;;;;;;;AAmBD,GA3CgC;;AA6CjCQ,EAAAA,sBA7CiC,oCA6CR;AACvB,WAAOR,GAAP;;;AAGD,GAjDgC;;AAmDjCS,EAAAA,uBAnDiC,qCAmDP;AACxB,WAAOT,GAAP;;;AAGD,GAvDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ${t.loaderBg};\n    `;\n  },\n\n  loader() {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    `;\n  },\n\n  spinnerContainer() {\n    return css`\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    `;\n  },\n\n  spinnerContainerSticky() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  spinnerComponentWrapper() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}

package/components/Loader/Loader.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Loader/Loader.styles.js",
+  "module": "Loader.styles",
+  "types": "../Loader.styles.d.ts",
+  "sideEffects": false
+}