@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

package/cjs/components/Loader/Loader.js

@@ -1,8 +1,8 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Loader = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.LoaderDataTids = exports.Loader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
+
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _Spinner = require("../Spinner");
 
@@ -10,8 +10,31 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _ZIndex = require("../../internal/ZIndex");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _currentEnvironment = require("../../lib/currentEnvironment");
+var _taskWithDelayAndMinimalDuration = require("../../lib/taskWithDelayAndMinimalDuration");
+var _tabbableHelpers = require("../../lib/dom/tabbableHelpers");
+var _rootNode = require("../../lib/rootNode");
+var _getDOMRect2 = require("../../lib/dom/getDOMRect");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Loader = require("./Loader.styles");var _class, _class2, _temp;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 types = ['mini', 'normal', 'big'];
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-var _Loader = require("./Loader.styles");
 
 
 
@@ -34,10 +57,45 @@ var _Loader = require("./Loader.styles");
 
 
 
-/**
- * DRAFT - лоадер-контейнер
+
+
+
+
+
+
+
+var LoaderDataTids = {
+  veil: 'Loader__Veil',
+  spinner: 'Loader__Spinner' };exports.LoaderDataTids = LoaderDataTids;
+
+
+
+
+
+
+/**
+ * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
+ *
+ * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
  */var
-Loader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Loader, _React$Component);
+
+Loader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Loader, _React$Component);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -81,7 +139,24 @@ Loader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
   function Loader(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.theme = void 0;_this.containerNode = void 0;_this.spinnerNode = void 0;_this.layoutEvents = void 0;_this.
+    _this = _React$Component.call(this, props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Loader.defaultProps);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -151,8 +226,54 @@ Loader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
-    wrapperRef = function (element) {
-      _this.containerNode = element;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    childrenRef = function (element) {
+      _this.childrenContainerNode = element;
+    };_this.
+
+    spinnerRef = function (element) {
+      _this.spinnerContainerNode = element;
     };_this.
 
 
@@ -173,19 +294,20 @@ Loader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
     checkSpinnerPosition = function () {
-      if (!_this.containerNode) {
+      if (!_this.spinnerContainerNode) {
         return;
-      }var _this$containerNode$g =
-
+      }
 
+      var _getDOMRect =
 
 
 
 
 
 
-      _this.containerNode.getBoundingClientRect(),containerTop = _this$containerNode$g.top,containerRight = _this$containerNode$g.right,containerBottom = _this$containerNode$g.bottom,containerLeft = _this$containerNode$g.left,containerHeight = _this$containerNode$g.height,containerWidth = _this$containerNode$g.width;
+      (0, _getDOMRect2.getDOMRect)(_this.spinnerContainerNode),containerTop = _getDOMRect.top,containerRight = _getDOMRect.right,containerBottom = _getDOMRect.bottom,containerLeft = _getDOMRect.left,containerHeight = _getDOMRect.height,containerWidth = _getDOMRect.width;
 
       var windowHeight = window.innerHeight;
       var windowWidth = window.innerWidth;
@@ -227,12 +349,11 @@ Loader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
       // Если знаем высоту спиннера и нижний край контейнера поднимается
       // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера
-      if (_this.spinnerNode) {
-        var spinnerHeight = _this.spinnerNode.getBoundingClientRect().height;
 
-        if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {
-          delete spinnerStyle.top;
-        }
+      var spinnerHeight = (0, _getDOMRect2.getDOMRect)(_this.spinnerNode).height;
+
+      if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {
+        delete spinnerStyle.top;
       }
 
       // ПО ГОРИЗОНТАЛИ
@@ -252,18 +373,63 @@ Loader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
         isStickySpinner: true,
         spinnerStyle: spinnerStyle });
 
-    };_this.containerNode = null;_this.spinnerNode = null;_this.state = { isStickySpinner: false };return _this;}var _proto = Loader.prototype;_proto.componentDidMount = function componentDidMount() {this.checkSpinnerPosition();this.layoutEvents = LayoutEvents.addListener((0, _lodash.default)(this.checkSpinnerPosition, 10));};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$props = this.props,component = _this$props.component,active = _this$props.active;if (active && !prevProps.active || prevProps.component !== component) {this.checkSpinnerPosition();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn;var _this$props2 = this.props,active = _this$props2.active,type = _this$props2.type,caption = _this$props2.caption,component = _this$props2.component;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: _Loader.jsStyles.loader() }, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Loader', applyZIndex: this.props.active, coverChildren: this.props.active, style: { height: '100%' } }, this.props.children), active && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { wrapperRef: this.wrapperRef, priority: 'Loader', className: (0, _classnames.default)((_cn = {}, _cn[_Loader.jsStyles.active(this.theme)] = active, _cn)) }, this.renderSpinner(type, caption, component))));};_proto.renderSpinner = function renderSpinner(type, caption, component) {var _this3 = this;return /*#__PURE__*/_react.default.createElement("span", { className: this.state.isStickySpinner ? _Loader.jsStyles.spinnerContainerSticky() : _Loader.jsStyles.spinnerContainerCenter(), style: this.state.spinnerStyle }, /*#__PURE__*/_react.default.createElement("div", { className: _Loader.jsStyles.spinnerComponentWrapper(), ref: function ref(element) {_this3.spinnerNode = element;} }, component !== undefined ? component : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: type, caption: caption })));};return Loader;}(_react.default.Component);exports.Loader = Loader;Loader.__KONTUR_REACT_UI__ = 'Loader';Loader.defaultProps = { type: _Spinner.Spinner.Types.normal, active: false };Loader.propTypes = { /**
-   * показываем лоадер или нет
-   */active: _propTypes.default.bool, /**
-   * Текст рядом с лоадером.
-   *
-   * @default  "Загрузка"
-   */caption: _Spinner.Spinner.propTypes.caption, component: _propTypes.default.node, /**
-   * Класс для обертки
-   */className: _propTypes.default.string, /**
-   * Тип спиннера: mini, normal, big
-   *
-   * @default  normal
-   *
-   * Spinner.types - все доступные типы
-   */type: _propTypes.default.oneOf(Object.keys(_Spinner.Spinner.Types)) };
+    };_this.
+
+    disableChildrenFocus = function () {
+      if (!_this.childrenObserver) {
+        _this.makeObservable();
+      }
+      var tabbableElements = (0, _tabbableHelpers.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();
+      // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers
+      Array.from(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.TaskWithDelayAndMinimalDuration({ delayBeforeTaskStart: _this.getProps().delayBeforeSpinnerShow, durationOfTask: _this.getProps().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() {var active = this.getProps().active;this.checkSpinnerPosition();active && this.spinnerTask.start();this.layoutEvents = LayoutEvents.addListener((0, _lodash.default)(this.checkSpinnerPosition, 10));if (active) {this.disableChildrenFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var component = this.props.component;var _this$getProps = this.getProps(),active = _this$getProps.active,delayBeforeSpinnerShow = _this$getProps.delayBeforeSpinnerShow,minimalDelayBeforeSpinnerHide = _this$getProps.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.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx;var _this$props = this.props,caption = _this$props.caption,component = _this$props.component;var type = this.getProps().type;var isLoaderActive = this.state.isLoaderActive;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: _Loader.styles.loader(), "data-tid": isLoaderActive ? LoaderDataTids.veil : '' }, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { applyZIndex: isLoaderActive, coverChildren: isLoaderActive, style: { height: '100%' }, wrapperRef: this.childrenRef }, this.props.children), isLoaderActive && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { wrapperRef: this.spinnerRef, className: (0, _Emotion.cx)((_cx = {}, _cx[_Loader.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.default.createElement("span", { "data-tid": LoaderDataTids.spinner, className: (0, _Emotion.cx)(_Loader.styles.spinnerContainer(), (_cx2 = {}, _cx2[_Loader.styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)), style: this.state.spinnerStyle }, /*#__PURE__*/_react.default.createElement("div", { className: _Loader.styles.spinnerComponentWrapper(), ref: function ref(element) {_this3.spinnerNode = element;} }, component !== undefined ? component : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: type, caption: caption })));};return Loader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.defaultProps = { type: 'normal', active: false, delayBeforeSpinnerShow: _currentEnvironment.isTestEnv ? 0 : 300, minimalDelayBeforeSpinnerHide: _currentEnvironment.isTestEnv ? 0 : 1000 }, _class2.propTypes = { /**
+   * показываем лоадер или нет
+   */active: _propTypes.default.bool, /**
+   * Текст рядом с лоадером.
+   *
+   * @default  "Загрузка"
+   */caption: _Spinner.Spinner.propTypes.caption, component: _propTypes.default.node, /**
+   * Класс для обертки
+   */className: _propTypes.default.string, /**
+   * Тип спиннера: mini, normal, big
+   *
+   * @default  normal
+   */type: _propTypes.default.oneOf(types), /**
+   * Время в миллисекундах для показа вуали без спиннера.
+   * @default 300
+   */delayBeforeSpinnerShow: _propTypes.default.number, /**
+   * Минимальное время в миллисекундах для показа спиннера
+   * @default 1000
+   */minimalDelayBeforeSpinnerHide: _propTypes.default.number }, _temp)) || _class;exports.Loader = Loader;

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

@@ -1 +1 @@
-{"version":3,"sources":["Loader.tsx"],"names":["Loader","props","theme","containerNode","spinnerNode","layoutEvents","wrapperRef","element","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","state","componentDidMount","LayoutEvents","addListener","componentDidUpdate","prevProps","component","active","componentWillUnmount","remove","render","renderMain","type","caption","jsStyles","loader","children","renderSpinner","spinnerContainerSticky","spinnerContainerCenter","spinnerComponentWrapper","undefined","React","Component","__KONTUR_REACT_UI__","defaultProps","Spinner","Types","normal","propTypes","PropTypes","bool","node","className","string","oneOf","Object","keys"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport debounce from 'lodash.debounce';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Spinner, SpinnerProps } from '../Spinner';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Loader.styles';\r\n\r\nexport interface LoaderProps extends CommonProps {\r\n  children?: React.ReactNode;\r\n  /**\r\n   * Флаг переключения состояния лоадера\r\n   * @default false\r\n   */\r\n  active: boolean;\r\n  caption?: SpinnerProps['caption'];\r\n  /**\r\n   * Компонент заменяющий спиннер.\r\n   */\r\n  component?: React.ReactNode;\r\n  className?: string;\r\n  type?: 'mini' | 'normal' | 'big';\r\n}\r\n\r\nexport interface LoaderState {\r\n  isStickySpinner: boolean;\r\n  spinnerStyle?: object;\r\n}\r\n\r\n/**\r\n * DRAFT - лоадер-контейнер\r\n */\r\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\r\n  public static __KONTUR_REACT_UI__ = 'Loader';\r\n\r\n  public static defaultProps: Partial<LoaderProps> = {\r\n    type: Spinner.Types.normal,\r\n    active: false,\r\n  };\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * показываем лоадер или нет\r\n     */\r\n    active: PropTypes.bool,\r\n\r\n    /**\r\n     * Текст рядом с лоадером.\r\n     *\r\n     * @default  \"Загрузка\"\r\n     */\r\n    caption: Spinner.propTypes.caption,\r\n\r\n    component: PropTypes.node,\r\n\r\n    /**\r\n     * Класс для обертки\r\n     */\r\n    className: PropTypes.string,\r\n\r\n    /**\r\n     * Тип спиннера: mini, normal, big\r\n     *\r\n     * @default  normal\r\n     *\r\n     * Spinner.types - все доступные типы\r\n     */\r\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private containerNode: Nullable<HTMLDivElement>;\r\n  private spinnerNode: Nullable<HTMLDivElement>;\r\n  private layoutEvents: Nullable<{ remove: () => void }>;\r\n\r\n  constructor(props: LoaderProps) {\r\n    super(props);\r\n\r\n    this.containerNode = null;\r\n    this.spinnerNode = null;\r\n\r\n    this.state = {\r\n      isStickySpinner: false,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    this.checkSpinnerPosition();\r\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\r\n  }\r\n\r\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>) {\r\n    const { component, active } = this.props;\r\n\r\n    if ((active && !prevProps.active) || prevProps.component !== component) {\r\n      this.checkSpinnerPosition();\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.layoutEvents) {\r\n      this.layoutEvents.remove();\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { active, type, caption, component } = this.props;\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div className={jsStyles.loader()}>\r\n          <ZIndex\r\n            priority={'Loader'}\r\n            applyZIndex={this.props.active}\r\n            coverChildren={this.props.active}\r\n            style={{ height: '100%' }}\r\n          >\r\n            {this.props.children}\r\n          </ZIndex>\r\n          {active && (\r\n            <ZIndex\r\n              wrapperRef={this.wrapperRef}\r\n              priority={'Loader'}\r\n              className={cn({\r\n                [jsStyles.active(this.theme)]: active,\r\n              })}\r\n            >\r\n              {this.renderSpinner(type, caption, component)}\r\n            </ZIndex>\r\n          )}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private wrapperRef = (element: HTMLDivElement | null) => {\r\n    this.containerNode = element;\r\n  };\r\n\r\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {\r\n    return (\r\n      <span\r\n        className={this.state.isStickySpinner ? jsStyles.spinnerContainerSticky() : jsStyles.spinnerContainerCenter()}\r\n        style={this.state.spinnerStyle}\r\n      >\r\n        <div\r\n          className={jsStyles.spinnerComponentWrapper()}\r\n          ref={element => {\r\n            this.spinnerNode = element;\r\n          }}\r\n        >\r\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\r\n        </div>\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private checkSpinnerPosition = () => {\r\n    if (!this.containerNode) {\r\n      return;\r\n    }\r\n\r\n    const {\r\n      top: containerTop,\r\n      right: containerRight,\r\n      bottom: containerBottom,\r\n      left: containerLeft,\r\n      height: containerHeight,\r\n      width: containerWidth,\r\n    } = this.containerNode.getBoundingClientRect();\r\n\r\n    const windowHeight = window.innerHeight;\r\n    const windowWidth = window.innerWidth;\r\n\r\n    // Если контейнер не больше высоты и не шире окна,\r\n    // то просто выравниваем по центру\r\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\r\n      this.setState({\r\n        isStickySpinner: false,\r\n        spinnerStyle: {},\r\n      });\r\n      return;\r\n    }\r\n\r\n    const spinnerStyle: {\r\n      top?: number;\r\n      right: number;\r\n      bottom: number;\r\n      left: number;\r\n    } = {\r\n      top: 30,\r\n      right: 0,\r\n      bottom: 30,\r\n      left: 0,\r\n    };\r\n\r\n    // ПО ВЕРТИКАЛИ\r\n    // Если верхний край контейнера ниже верхнего края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerTop > 0) {\r\n      spinnerStyle.top = containerTop + 30;\r\n    }\r\n\r\n    // Если нижний край контейнера выше нижнего края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerBottom < windowHeight) {\r\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\r\n    }\r\n\r\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\r\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\r\n    if (this.spinnerNode) {\r\n      const spinnerHeight = this.spinnerNode.getBoundingClientRect().height;\r\n\r\n      if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\r\n        delete spinnerStyle.top;\r\n      }\r\n    }\r\n\r\n    // ПО ГОРИЗОНТАЛИ\r\n    // Если левый край контейнера правее левого края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerLeft > 0) {\r\n      spinnerStyle.left = containerLeft;\r\n    }\r\n\r\n    // Если правый край контейнера левее правого края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerRight < windowWidth) {\r\n      spinnerStyle.right = windowWidth - containerRight;\r\n    }\r\n\r\n    this.setState({\r\n      isStickySpinner: true,\r\n      spinnerStyle,\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Loader.tsx"],"names":["types","LoaderDataTids","veil","spinner","Loader","rootNode","props","getProps","defaultProps","childrenRef","element","childrenContainerNode","spinnerRef","spinnerContainerNode","checkSpinnerPosition","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","spinnerNode","disableChildrenFocus","childrenObserver","makeObservable","tabbableElements","forEach","el","hasAttribute","setAttribute","tabIndex","toString","enableChildrenFocus","makeUnobservable","Array","from","document","querySelectorAll","getAttribute","removeAttribute","target","config","childList","subtree","observer","MutationObserver","observe","disconnect","state","isSpinnerVisible","isLoaderActive","spinnerTask","TaskWithDelayAndMinimalDuration","delayBeforeTaskStart","delayBeforeSpinnerShow","durationOfTask","minimalDelayBeforeSpinnerHide","taskStartCallback","taskStopCallback","componentDidMount","active","start","layoutEvents","LayoutEvents","addListener","componentDidUpdate","prevProps","prevState","component","update","stop","componentWillUnmount","remove","clearTask","getDerivedStateFromProps","render","theme","renderMain","caption","type","setRootNode","styles","loader","children","renderSpinner","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper","undefined","React","Component","__KONTUR_REACT_UI__","isTestEnv","propTypes","PropTypes","bool","Spinner","node","className","string","oneOf","number"],"mappings":"6VAAA;AACA;AACA;;;AAGA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,yC;;AAEA,IAAMA,KAAK,GAAG,CAAC,MAAD,EAAS,QAAT,EAAmB,KAAnB,CAAd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB;AAE5BC,EAAAA,OAAO,EAAE,iBAFmB,EAAvB,C;;;;;;;AASP;AACA;AACA;AACA;AACA,G;;AAEaC,M,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DC,kBAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MAjDxBC,QAiDwB,GAjDb,0CAAkBH,MAAM,CAACI,YAAzB,CAiDa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkIxBC,IAAAA,WAlIwB,GAkIV,UAACC,OAAD,EAAoC;AACxD,YAAKC,qBAAL,GAA6BD,OAA7B;AACD,KApI+B;;AAsIxBE,IAAAA,UAtIwB,GAsIX,UAACF,OAAD,EAAoC;AACvD,YAAKG,oBAAL,GAA4BH,OAA5B;AACD,KAxI+B;;;;;;;;;;;;;;;;;;;;;AA6JxBI,IAAAA,oBA7JwB,GA6JD,YAAM;AACnC,UAAI,CAAC,MAAKD,oBAAV,EAAgC;AAC9B;AACD;;AAED;;;;;;;AAOI,mCAAW,MAAKA,oBAAhB,CAPJ,CACOE,YADP,eACEC,GADF,CAESC,cAFT,eAEEC,KAFF,CAGUC,eAHV,eAGEC,MAHF,CAIQC,aAJR,eAIEC,IAJF,CAKUC,eALV,eAKEC,MALF,CAMSC,cANT,eAMEC,KANF;;AASA,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;;AAEA,UAAMkB,aAAa,GAAG,6BAAW,MAAKC,WAAhB,EAA6Bd,MAAnD;;AAEA,UAAIa,aAAa,IAAIH,YAAY,CAACd,MAAb,IAAuBO,YAAY,GAAGU,aAA3D,EAA0E;AACxE,eAAOH,YAAY,CAAClB,GAApB;AACD;;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;;AA6OxBK,IAAAA,oBA7OwB,GA6OD,YAAM;AACnC,UAAI,CAAC,MAAKC,gBAAV,EAA4B;AAC1B,cAAKC,cAAL;AACD;AACD,UAAMC,gBAAgB,GAAG,0CAAoB,MAAK/B,qBAAzB,CAAzB;AACA+B,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;AACA;AACAC,MAAAA,KAAK,CAACC,IAAN,CAAWC,QAAQ,CAACC,gBAAT,CAA0B,mBAA1B,CAAX,EAA2DX,OAA3D,CAAmE,UAACC,EAAD,EAAQ;AACzEA,QAAAA,EAAE,CAACE,YAAH,CAAgB,UAAhB,sBAA4BF,EAAE,CAACW,YAAH,CAAgB,iBAAhB,CAA5B,+BAAkE,GAAlE;AACAX,QAAAA,EAAE,CAACY,eAAH,CAAmB,iBAAnB;AACD,OAHD;AAID,KAjQ+B;;AAmQxBf,IAAAA,cAnQwB,GAmQP,YAAM;AAC7B,UAAMgB,MAAM,GAAG,MAAK9C,qBAApB;AACA,UAAI,CAAC8C,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,MAAKvB,oBAA1B,CAAjB;AACAsB,MAAAA,QAAQ,CAACE,OAAT,CAAiBN,MAAjB,EAAyBC,MAAzB;AACA,YAAKlB,gBAAL,GAAwBqB,QAAxB;AACD,KA/Q+B;;AAiRxBX,IAAAA,gBAjRwB,GAiRL,YAAM;AAC/B,qCAAKV,gBAAL,2CAAuBwB,UAAvB;AACA,YAAKxB,gBAAL,GAAwB,IAAxB;AACD,KApR+B,CAG9B,MAAK3B,oBAAL,GAA4B,IAA5B,CACA,MAAKF,qBAAL,GAA6B,IAA7B,CACA,MAAK6B,gBAAL,GAAwB,IAAxB,CACA,MAAKF,WAAL,GAAmB,IAAnB,CAEA,MAAK2B,KAAL,GAAa,EACXhC,eAAe,EAAE,KADN,EAEXiC,gBAAgB,EAAE,KAFP,EAGXC,cAAc,EAAE,KAHL,EAAb,CAMA,MAAKC,WAAL,GAAmB,IAAIC,gEAAJ,CAAoC,EACrDC,oBAAoB,EAAE,MAAK/D,QAAL,GAAgBgE,sBADe,EAErDC,cAAc,EAAE,MAAKjE,QAAL,GAAgBkE,6BAFqB,EAGrDC,iBAAiB,EAAE,qCAAM,MAAK1C,QAAL,CAAc,EAAEkC,gBAAgB,EAAE,IAApB,EAAd,CAAN,EAHkC,EAIrDS,gBAAgB,EAAE,oCAAM,MAAK3C,QAAL,CAAc,EAAEkC,gBAAgB,EAAE,KAApB,EAAd,CAAN,EAJmC,EAApC,CAAnB,CAd8B,aAoB/B,C,qCAEMU,iB,GAAP,6BAA2B,CACzB,IAAMC,MAAM,GAAG,KAAKtE,QAAL,GAAgBsE,MAA/B,CACA,KAAK/D,oBAAL,GACA+D,MAAM,IAAI,KAAKT,WAAL,CAAiBU,KAAjB,EAAV,CACA,KAAKC,YAAL,GAAoBC,YAAY,CAACC,WAAb,CAAyB,qBAAS,KAAKnE,oBAAd,EAAoC,EAApC,CAAzB,CAApB,CAEA,IAAI+D,MAAJ,EAAY,CACV,KAAKtC,oBAAL,GACD,CACF,C,QAEM2C,kB,GAAP,4BAA0BC,SAA1B,EAA4DC,SAA5D,EAA8F,CAC5F,IAAQC,SAAR,GAAsB,KAAK/E,KAA3B,CAAQ+E,SAAR,CACA,qBAA0E,KAAK9E,QAAL,EAA1E,CAAQsE,MAAR,kBAAQA,MAAR,CAAgBN,sBAAhB,kBAAgBA,sBAAhB,CAAwCE,6BAAxC,kBAAwCA,6BAAxC,CACA,IAAQN,cAAR,GAA2B,KAAKF,KAAhC,CAAQE,cAAR,CAEA,IAAKU,MAAM,IAAI,CAACM,SAAS,CAACN,MAAtB,IAAiCM,SAAS,CAACE,SAAV,KAAwBA,SAA7D,EAAwE,CACtE,KAAKvE,oBAAL,GACD,CAED,IACEyD,sBAAsB,KAAKY,SAAS,CAACZ,sBAArC,IACAE,6BAA6B,KAAKU,SAAS,CAACV,6BAF9C,EAGE,CACA,KAAKL,WAAL,CAAiBkB,MAAjB,CAAwB,EACtBhB,oBAAoB,EAAEC,sBADA,EAEtBC,cAAc,EAAEC,6BAFM,EAAxB,EAID,CAED,IAAII,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC,CAC/BA,MAAM,GAAG,KAAKT,WAAL,CAAiBU,KAAjB,EAAH,GAA8B,KAAKV,WAAL,CAAiBmB,IAAjB,EAApC,CACD,CAED,IAAIpB,cAAc,KAAKiB,SAAS,CAACjB,cAAjC,EAAiD,CAC/C,IAAIA,cAAJ,EAAoB,CAClB,KAAK5B,oBAAL,GACD,CAFD,MAEO,CACL,KAAKU,mBAAL,GACD,CACF,CACF,C,QAEMuC,oB,GAAP,gCAA8B,CAC5B,KAAKtC,gBAAL,GACA,IAAI,KAAK6B,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkBU,MAAlB,GACD,CACD,KAAKrB,WAAL,CAAiBsB,SAAjB,GACD,C,QAEaC,wB,GAAd,kCAAuCrF,KAAvC,EAA2D2D,KAA3D,EAAqG,CACnG,IAAI3D,KAAK,CAACuE,MAAN,IAAgB,CAACZ,KAAK,CAACE,cAA3B,EAA2C,CACzC,OAAO,EACLA,cAAc,EAAE,IADX,EAAP,CAGD,CACD,IAAIF,KAAK,CAACE,cAAN,IAAwB,EAAE7D,KAAK,CAACuE,MAAN,IAAgBZ,KAAK,CAACC,gBAAxB,CAA5B,EAAuE,CACrE,OAAO,EACLC,cAAc,EAAE,KADX,EAAP,CAGD,CAED,OAAOF,KAAP,CACD,C,QAEM2B,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,SACnB,kBAA+B,KAAKxF,KAApC,CAAQyF,OAAR,eAAQA,OAAR,CAAiBV,SAAjB,eAAiBA,SAAjB,CACA,IAAMW,IAAI,GAAG,KAAKzF,QAAL,GAAgByF,IAA7B,CACA,IAAQ7B,cAAR,GAA2B,KAAKF,KAAhC,CAAQE,cAAR,CAEA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAK8B,WAAjC,IAAkD,KAAK3F,KAAvD,gBACE,sCAAK,SAAS,EAAE4F,eAAOC,MAAP,EAAhB,EAAiC,YAAUhC,cAAc,GAAGlE,cAAc,CAACC,IAAlB,GAAyB,EAAlF,iBACE,6BAAC,cAAD,IACE,WAAW,EAAEiE,cADf,EAEE,aAAa,EAAEA,cAFjB,EAGE,KAAK,EAAE,EAAE3C,MAAM,EAAE,MAAV,EAHT,EAIE,UAAU,EAAE,KAAKf,WAJnB,IAMG,KAAKH,KAAL,CAAW8F,QANd,CADF,EASGjC,cAAc,iBACb,6BAAC,cAAD,IACE,UAAU,EAAE,KAAKvD,UADnB,EAEE,SAAS,EAAE,gCACRsF,eAAOrB,MAAP,CAAc,KAAKgB,KAAnB,CADQ,IACoB1B,cADpB,OAFb,IAMG,KAAKF,KAAL,CAAWC,gBAAX,IAA+B,KAAKmC,aAAL,CAAmBL,IAAnB,EAAyBD,OAAzB,EAAkCV,SAAlC,CANlC,CAVJ,CADF,CADF,CAwBD,C,QAUOgB,a,GAAR,uBAAsBL,IAAtB,EAAyCD,OAAzC,EAAoEV,SAApE,EAAiG,wBAC/F,oBACE,uCACE,YAAUpF,cAAc,CAACE,OAD3B,EAEE,SAAS,EAAE,iBAAG+F,eAAOI,gBAAP,EAAH,mBAAiCJ,eAAOK,sBAAP,EAAjC,IAAmE,KAAKtC,KAAL,CAAWhC,eAA9E,QAFb,EAGE,KAAK,EAAE,KAAKgC,KAAL,CAAW/B,YAHpB,iBAKE,sCACE,SAAS,EAAEgE,eAAOM,uBAAP,EADb,EAEE,GAAG,EAAE,aAAC9F,OAAD,EAAa,CAChB,MAAI,CAAC4B,WAAL,GAAmB5B,OAAnB,CACD,CAJH,IAMG2E,SAAS,KAAKoB,SAAd,GAA0BpB,SAA1B,gBAAsC,6BAAC,gBAAD,IAAS,IAAI,EAAEW,IAAf,EAAqB,OAAO,EAAED,OAA9B,GANzC,CALF,CADF,CAgBD,C,iBAtNyBW,eAAMC,S,WAClBC,mB,GAAsB,Q,UAEtBpG,Y,GAA6B,EACzCwF,IAAI,EAAE,QADmC,EAEzCnB,MAAM,EAAE,KAFiC,EAGzCN,sBAAsB,EAAEsC,gCAAY,CAAZ,GAAgB,GAHC,EAIzCpC,6BAA6B,EAAEoC,gCAAY,CAAZ,GAAgB,IAJN,E,UAS7BC,S,GAAY,EACxB;AACJ;AACA,KACIjC,MAAM,EAAEkC,mBAAUC,IAJM,EAMxB;AACJ;AACA;AACA;AACA,KACIjB,OAAO,EAAEkB,iBAAQH,SAAR,CAAkBf,OAXH,EAaxBV,SAAS,EAAE0B,mBAAUG,IAbG,EAexB;AACJ;AACA,KACIC,SAAS,EAAEJ,mBAAUK,MAlBG,EAoBxB;AACJ;AACA;AACA;AACA,KACIpB,IAAI,EAAEe,mBAAUM,KAAV,CAAgBrH,KAAhB,CAzBkB,EA0BxB;AACJ;AACA;AACA,KACIuE,sBAAsB,EAAEwC,mBAAUO,MA9BV,EA+BxB;AACJ;AACA;AACA,KACI7C,6BAA6B,EAAEsC,mBAAUO,MAnCjB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\n\nimport { AnyObject } from '../../lib/utils';\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';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Loader.styles';\n\nconst types = ['mini', 'normal', 'big'] as const;\n\nexport type LoaderType = typeof types[number];\n\nexport interface LoaderProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Флаг переключения состояния лоадера\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Подпись под спиннером\n   */\n  caption?: SpinnerProps['caption'];\n  /**\n   * Компонент заменяющий спиннер.\n   */\n  component?: React.ReactNode;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: LoaderType;\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?: AnyObject;\n}\n\nexport const LoaderDataTids = {\n  veil: 'Loader__Veil',\n  spinner: 'Loader__Spinner',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>\n>;\n\n/**\n * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер\n *\n * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)\n */\n@rootNode\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n  public static __KONTUR_REACT_UI__ = 'Loader';\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n    active: false,\n    delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n    minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n  };\n\n  private getProps = createPropsGetter(Loader.defaultProps);\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    type: PropTypes.oneOf(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 setRootNode!: TSetRootNode;\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.getProps().delayBeforeSpinnerShow,\n      durationOfTask: this.getProps().minimalDelayBeforeSpinnerHide,\n      taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n      taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n    });\n  }\n\n  public componentDidMount() {\n    const active = this.getProps().active;\n    this.checkSpinnerPosition();\n    active && this.spinnerTask.start();\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\n\n    if (active) {\n      this.disableChildrenFocus();\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n    const { component } = this.props;\n    const { active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.getProps();\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 { caption, component } = this.props;\n    const type = this.getProps().type;\n    const { isLoaderActive } = this.state;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.veil : ''}>\n          <ZIndex\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              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?: LoaderType, caption?: React.ReactNode, component?: React.ReactNode) {\n    return (\n      <span\n        data-tid={LoaderDataTids.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    } = getDOMRect(this.spinnerContainerNode);\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\n    const spinnerHeight = getDOMRect(this.spinnerNode).height;\n\n    if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n      delete spinnerStyle.top;\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    // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers\n    Array.from(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/cjs/components/Loader/Loader.md

@@ -1,25 +1,32 @@
-```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>
-```
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+const [isActive, setIsActive] = React.useState(true);
+
+<>
+  <Button onClick={() => setIsActive(!isActive)}>{isActive ? 'Остановить загрузку' : 'Продолжить загрузку'}</Button>
+  <Loader type="big" active={isActive}>
+    <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/cjs/components/Loader/Loader.styles.d.ts

@@ -1,10 +1,8 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     active(t: Theme): string;
-    fillContainerPosition(): string;
     loader(): string;
     spinnerContainer(): string;
     spinnerContainerSticky(): string;
-    spinnerContainerCenter(): string;
     spinnerComponentWrapper(): string;
 };

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

@@ -1,27 +1,22 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   active: function active(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      background: ", ";\n    "])),
-    styles.fillContainerPosition(),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ", ";\n    "])),
+    t.loaderBorderRadius,
 
-    t.loaderBg);
-
-  },
-
-  fillContainerPosition: function fillContainerPosition() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n    "])));
 
 
 
 
 
+    t.loaderBg);
 
   },
 
   loader: function loader() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    "])));
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    "])));
 
 
 
@@ -31,16 +26,11 @@ var styles = {
   },
 
   spinnerContainer: function spinnerContainer() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      margin: auto;\n      text-align: center;\n    "])));
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      position: fixed;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])),
-    styles.spinnerContainer());
 
 
 
@@ -52,28 +42,19 @@ var styles = {
 
 
 
-  },
-
-  spinnerContainerCenter: function spinnerContainerCenter() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      ", ";\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])),
-    styles.spinnerContainer(),
-    styles.fillContainerPosition());
-
-
-
 
 
 
+  },
 
+  spinnerContainerSticky: function spinnerContainerSticky() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n    "])));
 
 
   },
 
   spinnerComponentWrapper: function spinnerComponentWrapper() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
-
-
-  } };
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Loader.styles.ts"],"names":["styles","active","t","css","fillContainerPosition","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerContainerCenter","spinnerComponentWrapper","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,MADa,kBACNC,CADM,EACI;AACf,eAAOC,YAAP;AACIH,IAAAA,MAAM,CAACI,qBAAP,EADJ;;AAGgBF,IAAAA,CAAC,CAACG,QAHlB;;AAKD,GAPY;;AASbD,EAAAA,qBATa,mCASW;AACtB,eAAOD,YAAP;;;;;;;AAOD,GAjBY;;AAmBbG,EAAAA,MAnBa,oBAmBJ;AACP,eAAOH,YAAP;;;;;;;AAOD,GA3BY;;AA6BbI,EAAAA,gBA7Ba,8BA6BM;AACjB,eAAOJ,YAAP;;;;;AAKD,GAnCY;;AAqCbK,EAAAA,sBArCa,oCAqCY;AACvB,eAAOL,YAAP;AACIH,IAAAA,MAAM,CAACO,gBAAP,EADJ;;;;;;;;;;;;AAaD,GAnDY;;AAqDbE,EAAAA,sBArDa,oCAqDY;AACvB,eAAON,YAAP;AACIH,IAAAA,MAAM,CAACO,gBAAP,EADJ;AAEIP,IAAAA,MAAM,CAACI,qBAAP,EAFJ;;;;;;;;;;AAYD,GAlEY;;AAoEbM,EAAAA,uBApEa,qCAoEa;AACxB,eAAOP,YAAP;;;AAGD,GAxEY,EAAf;;;AA2EO,IAAMQ,QAAQ,GAAG,2BAAaX,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  active(t: Theme) {\r\n    return css`\r\n      ${styles.fillContainerPosition()};\r\n\r\n      background: ${t.loaderBg};\r\n    `;\r\n  },\r\n\r\n  fillContainerPosition() {\r\n    return css`\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  loader() {\r\n    return css`\r\n      box-sizing: border-box;\r\n      display: inline-block;\r\n      position: relative;\r\n      width: 100%;\r\n      z-index: inherit;\r\n    `;\r\n  },\r\n\r\n  spinnerContainer() {\r\n    return css`\r\n      display: block;\r\n      margin: auto;\r\n      text-align: center;\r\n    `;\r\n  },\r\n\r\n  spinnerContainerSticky() {\r\n    return css`\r\n      ${styles.spinnerContainer()};\r\n\r\n      position: fixed;\r\n\r\n      &::before {\r\n        content: ' ';\r\n        display: inline-block;\r\n        height: 100%;\r\n        min-height: 100%;\r\n        vertical-align: middle;\r\n      }\r\n    `;\r\n  },\r\n\r\n  spinnerContainerCenter() {\r\n    return css`\r\n      ${styles.spinnerContainer()};\r\n      ${styles.fillContainerPosition()};\r\n\r\n      &::before {\r\n        content: ' ';\r\n        display: inline-block;\r\n        height: 100%;\r\n        min-height: 100%;\r\n        vertical-align: middle;\r\n      }\r\n    `;\r\n  },\r\n\r\n  spinnerComponentWrapper() {\r\n    return css`\r\n      display: inline-block;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Loader.styles.ts"],"names":["styles","active","t","css","loaderBorderRadius","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,eAAOC,YAAP;AACmBD,IAAAA,CAAC,CAACE,kBADrB;;;;;;;AAQgBF,IAAAA,CAAC,CAACG,QARlB;;AAUD,GAZgC;;AAcjCC,EAAAA,MAdiC,oBAcxB;AACP,eAAOH,YAAP;;;;;;;AAOD,GAtBgC;;AAwBjCI,EAAAA,gBAxBiC,8BAwBd;AACjB,eAAOJ,YAAP;;;;;;;;;;;;;;;;;;;AAmBD,GA5CgC;;AA8CjCK,EAAAA,sBA9CiC,oCA8CR;AACvB,eAAOL,YAAP;;;AAGD,GAlDgC;;AAoDjCM,EAAAA,uBApDiC,qCAoDP;AACxB,eAAON,YAAP;;;AAGD,GAxDgC,EAAb,CAAf,C","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      border-radius: ${t.loaderBorderRadius};\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/cjs/components/Loader/__stories__/LoaderAndButton.js

@@ -4,6 +4,12 @@ var _Tooltip = require("../../Tooltip");
 var _Button = require("../../Button");
 var _Loader = require("../Loader");var
 
+
+
+
+
+
+
 LoaderAndButton = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(LoaderAndButton, _React$Component);function LoaderAndButton() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
     state = {
       isTooltipOpened: false };return _this;}var _proto = LoaderAndButton.prototype;_proto.

package/cjs/components/Loader/__stories__/LoaderAndButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LoaderAndButton.tsx"],"names":["LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","React","Component"],"mappings":"2PAAA;;AAEA;AACA;AACA,mC;;AAEaA,e;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,eAAe,EAAE,KADJ,E;;;AAIRC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,iKADF;;;;AAKE,mCAAC,gBAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,mCAAC,cAAD;AACE,QAAA,OAAO,EAAE,mBAAM;AACb,UAAA,MAAI,CAACI,QAAL,CAAc,EAAEC,QAAQ,EAAE,IAAZ,EAAkBL,eAAe,EAAE,IAAnC,EAAd;AACD,SAHH,wBADF,CALF;;;;;AAcE,wMAdF;;;;AAkBE;AACqG,SADrG;AAEE,0IAFF;AAGE,oEAHF,yBAlBF;;AAuBE,0FAvBF;AAwBE,gUAxBF;;;;;AA6BE;AACE,2GADF;AAEE,wFAFF;AAGE,wFAHF,CA7BF,CADF;;;;AAqCD,G,0BA3CkCM,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Tooltip } from '../../Tooltip';\r\nimport { Button } from '../../Button';\r\nimport { Loader } from '../Loader';\r\n\r\nexport class LoaderAndButton extends React.Component<{ active: boolean }> {\r\n  public state = {\r\n    isTooltipOpened: false,\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <Loader active={this.props.active} type={'big'}>\r\n        <h1>\r\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\r\n          good vestments.&quot;\r\n        </h1>\r\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\r\n          <Button\r\n            onClick={() => {\r\n              this.setState({ isActive: true, isTooltipOpened: true });\r\n            }}\r\n          >\r\n            Can you click me?\r\n          </Button>\r\n        </Tooltip>\r\n        <p>\r\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\r\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\r\n        </p>\r\n        <p>\r\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\r\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\r\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\r\n        </p>\r\n        <h2>Oh, I think we should just stay friends.</h2>\r\n        <p>\r\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\r\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\r\n          his wife holding up? …To shreds, you say.\r\n        </p>\r\n        <ol>\r\n          <li>No! The kind with looting and maybe starting a few fires!</li>\r\n          <li>You are the last hope of the universe.</li>\r\n          <li>Hey, guess what you&apos;re accessories to.</li>\r\n        </ol>\r\n      </Loader>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["LoaderAndButton.tsx"],"names":["LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","React","Component"],"mappings":"2PAAA;;AAEA;AACA;AACA,mC;;;;;;;;AAQaA,e;AACJC,IAAAA,K,GAA8B;AACnCC,MAAAA,eAAe,EAAE,KADkB,E;;;AAI9BC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,iKADF;;;;AAKE,mCAAC,gBAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,mCAAC,cAAD;AACE,QAAA,OAAO,EAAE,mBAAM;AACb,UAAA,MAAI,CAACI,QAAL,CAAc,EAAEC,QAAQ,EAAE,IAAZ,EAAkBL,eAAe,EAAE,IAAnC,EAAd;AACD,SAHH,wBADF,CALF;;;;;AAcE,wMAdF;;;;AAkBE;AACqG,SADrG;AAEE,0IAFF;AAGE,oEAHF,yBAlBF;;AAuBE,0FAvBF;AAwBE,gUAxBF;;;;;AA6BE;AACE,2GADF;AAEE,wFAFF;AAGE,wFAHF,CA7BF,CADF;;;;AAqCD,G,0BA3CkCM,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Loader } from '../Loader';\nimport { LoaderProps } from '..';\n\ntype LoaderAndButtonProps = Pick<LoaderProps, 'active'>;\ninterface LoaderAndButtonState {\n  isTooltipOpened: boolean;\n  isActive?: boolean;\n}\nexport class LoaderAndButton extends React.Component<LoaderAndButtonProps, LoaderAndButtonState> {\n  public state: LoaderAndButtonState = {\n    isTooltipOpened: false,\n  };\n\n  public render() {\n    return (\n      <Loader active={this.props.active} type={'big'}>\n        <h1>\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\n          good vestments.&quot;\n        </h1>\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\n          <Button\n            onClick={() => {\n              this.setState({ isActive: true, isTooltipOpened: true });\n            }}\n          >\n            Can you click me?\n          </Button>\n        </Tooltip>\n        <p>\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\n        </p>\n        <p>\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\n        </p>\n        <h2>Oh, I think we should just stay friends.</h2>\n        <p>\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\n          his wife holding up? …To shreds, you say.\n        </p>\n        <ol>\n          <li>No! The kind with looting and maybe starting a few fires!</li>\n          <li>You are the last hope of the universe.</li>\n          <li>Hey, guess what you&apos;re accessories to.</li>\n        </ol>\n      </Loader>\n    );\n  }\n}\n"]}

package/cjs/components/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Loader';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Loader';\n"]}

package/cjs/components/MenuHeader/MenuHeader.d.ts

@@ -4,8 +4,15 @@ export interface MenuHeaderProps extends CommonProps {
     _enableIconPadding?: boolean;
     children: ReactNode;
 }
+export declare const MenuHeaderDataTids: {
+    readonly root: "MenuHeader__root";
+};
 /**
- * Заголовок в меню.
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 declare function MenuHeader({ _enableIconPadding, children, ...rest }: MenuHeaderProps): JSX.Element;
 declare namespace MenuHeader {