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

package/cjs/components/SidePage/SidePageFooter.js

@@ -0,0 +1,146 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.SidePageFooter = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+
+var _SidePage = require("./SidePage.styles");
+var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
+ */var
+
+SidePageFooter = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SidePageFooter, _React$Component);function SidePageFooter() {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.
+
+
+
+    context = _this.context;_this.
+    isMobileLayout = void 0;_this.
+
+    state = {
+      fixed: false };_this.
+
+
+    theme = void 0;_this.
+    content = null;_this.
+    wrapper = null;_this.
+    layoutSub = null;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    update = function () {
+      _this.setProperStyles();
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    refContent = function (node) {
+      _this.content = node;
+    };_this.
+
+    refWrapper = function (node) {
+      _this.wrapper = node;
+    };_this.
+
+    setProperStyles = function () {
+      if (_this.wrapper && _this.content) {
+        var wrapperRect = _this.wrapper.getBoundingClientRect();
+        var contentRect = _this.content.getBoundingClientRect();
+        var _fixed = wrapperRect.top > contentRect.top;
+        _this.setState({ fixed: _fixed });
+      }
+    };return _this;}var _proto = SidePageFooter.prototype;_proto.componentDidMount = function componentDidMount() {var _this$context$setHasF, _this$context, _this$context$setHasP, _this$context2;this.context.footerRef(this);this.update();this.layoutSub = LayoutEvents.addListener(this.update);(_this$context$setHasF = (_this$context = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF.call(_this$context);(_this$context$setHasP = (_this$context2 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP.call(_this$context2, this.props.panel);};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$context$setHasP2, _this$context3;this.props.panel !== prevProps.panel && ((_this$context$setHasP2 = (_this$context3 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP2.call(_this$context3, this.props.panel));};_proto.componentWillUnmount = function componentWillUnmount() {var _this$context$setHasF2, _this$context4, _this$context$setHasP3, _this$context5;this.context.footerRef(null);if (this.layoutSub) {this.layoutSub.remove();}(_this$context$setHasF2 = (_this$context4 = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF2.call(_this$context4, false);(_this$context$setHasP3 = (_this$context5 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP3.call(_this$context5, false);};_proto.getSticky = function getSticky() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_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 _this3 = this;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { style: { height: this.getContentHeight() }, className: _SidePage.styles.footerWrapper(), ref: this.refWrapper }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cx, _cx2;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footer(_this3.theme), (_cx = {}, _cx[_SidePage.styles.positionStatic()] = !_this3.getSticky(), _cx)), style: { width: getWidth() } }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[_SidePage.styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[_SidePage.styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[_SidePage.styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)), ref: _this3.refContent }, _this3.props.children));})));};_proto.
+
+  getContentHeight = function getContentHeight() {
+    if (!this.content) {
+      return 'auto';
+    }
+    return this.content.getBoundingClientRect().height;
+  };return SidePageFooter;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class;exports.SidePageFooter = SidePageFooter;

package/cjs/components/SidePage/SidePageFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooter","responsiveLayout","context","isMobileLayout","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","render","renderMain","height","getContentHeight","styles","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","mobileFooterContent","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"iVAAA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,oD;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA,G;;AAEaA,c,OADZC,kC;;;;AAKQC,IAAAA,O,GAA+B,MAAKA,O;AACnCC,IAAAA,c;;AAEDC,IAAAA,K,GAAQ;AACbC,MAAAA,KAAK,EAAE,KADM,E;;;AAIPC,IAAAA,K;AACAC,IAAAA,O,GAA8B,I;AAC9BC,IAAAA,O,GAA8B,I;AAC9BC,IAAAA,S,GAAgE,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CjEC,IAAAA,M,GAAS,YAAM;AACpB,YAAKC,eAAL;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCOC,IAAAA,U,GAAa,UAACC,IAAD,EAA8B;AACjD,YAAKN,OAAL,GAAeM,IAAf;AACD,K;;AAEOC,IAAAA,U,GAAa,UAACD,IAAD,EAA8B;AACjD,YAAKL,OAAL,GAAeK,IAAf;AACD,K;;AAEOF,IAAAA,e,GAAkB,YAAM;AAC9B,UAAI,MAAKH,OAAL,IAAgB,MAAKD,OAAzB,EAAkC;AAChC,YAAMQ,WAAW,GAAG,MAAKP,OAAL,CAAaQ,qBAAb,EAApB;AACA,YAAMC,WAAW,GAAG,MAAKV,OAAL,CAAaS,qBAAb,EAApB;AACA,YAAMX,MAAK,GAAGU,WAAW,CAACG,GAAZ,GAAkBD,WAAW,CAACC,GAA5C;AACA,cAAKC,QAAL,CAAc,EAAEd,KAAK,EAALA,MAAF,EAAd;AACD;AACF,K,4DA/FMe,iB,GAAP,6BAA2B,iFACzB,KAAKlB,OAAL,CAAamB,SAAb,CAAuB,IAAvB,EACA,KAAKX,MAAL,GACA,KAAKD,SAAL,GAAiBa,YAAY,CAACC,WAAb,CAAyB,KAAKb,MAA9B,CAAjB,CACA,+CAAKR,OAAL,EAAasB,YAAb,+DACA,gDAAKtB,OAAL,EAAauB,WAAb,gEAA2B,KAAKC,KAAL,CAAWC,KAAtC,EACD,C,QAEMC,kB,GAAP,4BAA0BC,SAA1B,EAAoE,4CAClE,KAAKH,KAAL,CAAWC,KAAX,KAAqBE,SAAS,CAACF,KAA/B,+BAAwC,uBAAKzB,OAAL,EAAauB,WAArD,qBAAwC,4CAA2B,KAAKC,KAAL,CAAWC,KAAtC,CAAxC,EACD,C,QAEMG,oB,GAAP,gCAA8B,oFAC5B,KAAK5B,OAAL,CAAamB,SAAb,CAAuB,IAAvB,EACA,IAAI,KAAKZ,SAAT,EAAoB,CAClB,KAAKA,SAAL,CAAesB,MAAf,GACD,CACD,iDAAK7B,OAAL,EAAasB,YAAb,iEAA4B,KAA5B,EACA,iDAAKtB,OAAL,EAAauB,WAAb,iEAA2B,KAA3B,EACD,C,QAEMO,S,GAAP,qBAAmB,CACjB,IAAI,OAAO,KAAKN,KAAL,CAAWO,MAAlB,KAA6B,WAAjC,EAA8C,CAC5C,OAAO,KAAKP,KAAL,CAAWO,MAAlB,CACD,CAED,IAAI,KAAK9B,cAAT,EAAyB,CACvB,OAAO,KAAP,CACD,CAED,OAAO,IAAP,CACD,C,QAEM+B,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAC5B,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAAC6B,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAMOA,U,GAAR,sBAAqB,mBACnB,oBACE,6BAAC,4BAAD,EAAmB,KAAKT,KAAxB,eACE,sCAAK,KAAK,EAAE,EAAEU,MAAM,EAAE,KAAKC,gBAAL,EAAV,EAAZ,EAAiD,SAAS,EAAEC,iBAAOC,aAAP,EAA5D,EAAoF,GAAG,EAAE,KAAKzB,UAA9F,iBACE,6BAAC,gCAAD,CAAiB,QAAjB,QACG,mCAAG0B,QAAH,QAAGA,QAAH,qBACC,sCACE,SAAS,EAAE,iBAAGF,iBAAOG,MAAP,CAAc,MAAI,CAACnC,KAAnB,CAAH,iBACRgC,iBAAOI,cAAP,EADQ,IACkB,CAAC,MAAI,CAACV,SAAL,EADnB,OADb,EAIE,KAAK,EAAE,EACLW,KAAK,EAAEH,QAAQ,EADV,EAJT,iBAQE,sCACE,SAAS,EAAE,iBAAGF,iBAAOM,aAAP,CAAqB,MAAI,CAACtC,KAA1B,CAAH,mBACRgC,iBAAOO,WAAP,CAAmB,MAAI,CAACvC,KAAxB,CADQ,IACyB,MAAI,CAACF,KAAL,CAAWC,KADpC,OAERiC,iBAAOX,KAAP,CAAa,MAAI,CAACrB,KAAlB,CAFQ,IAEmB,CAAC,CAAC,MAAI,CAACoB,KAAL,CAAWC,KAFhC,OAGRW,iBAAOQ,mBAAP,CAA2B,MAAI,CAACxC,KAAhC,CAHQ,IAGiC,MAAI,CAACH,cAHtC,QADb,EAME,GAAG,EAAE,MAAI,CAACS,UANZ,IAQG,MAAI,CAACc,KAAL,CAAWqB,QARd,CARF,CADD,EADH,CADF,CADF,CADF,CA6BD,C;;AAmBOV,EAAAA,gB,GAAR,4BAA2B;AACzB,QAAI,CAAC,KAAK9B,OAAV,EAAmB;AACjB,aAAO,MAAP;AACD;AACD,WAAO,KAAKA,OAAL,CAAaS,qBAAb,GAAqCoB,MAA5C;AACD,G,yBAtHiCY,eAAMC,S,WAC1BC,mB,GAAsB,gB,UAEtBC,W,GAAcC,gC","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private wrapper: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()} ref={this.refWrapper}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private refWrapper = (node: HTMLElement | null) => {\n    this.wrapper = node;\n  };\n\n  private setProperStyles = () => {\n    if (this.wrapper && this.content) {\n      const wrapperRect = this.wrapper.getBoundingClientRect();\n      const contentRect = this.content.getBoundingClientRect();\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return this.content.getBoundingClientRect().height;\n  }\n}\n"]}

package/cjs/components/SidePage/SidePageHeader.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageHeaderProps extends CommonProps {
+    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
+    sticky?: boolean;
+}
+export interface SidePageHeaderState {
+    isReadyToFix: boolean;
+    focusedByTab: boolean;
+}
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
+ */
+export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private isMobileLayout;
+    state: SidePageHeaderState;
+    private theme;
+    private wrapper;
+    private lastRegularHeight;
+    get regularHeight(): number;
+    get fixedHeaderHeight(): number;
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    update: () => void;
+    render(): JSX.Element;
+    getStickyProp(): boolean;
+    private renderMain;
+    private renderHeader;
+    private renderClose;
+    private updateReadyToFix;
+    private wrapperRef;
+    private handleFocus;
+    private handleBlur;
+}

package/cjs/components/SidePage/SidePageHeader.js

@@ -0,0 +1,203 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _Sticky = require("../Sticky");
+var _CrossIcon = require("../../internal/icons/CrossIcon");
+var _utils = require("../../lib/utils");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+
+var _SidePage = require("./SidePage.styles");
+var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
+ */var
+
+SidePageHeader = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SidePageHeader, _React$Component);function SidePageHeader() {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.
+
+
+
+    context = _this.context;_this.
+
+    isMobileLayout = void 0;_this.
+
+    state = {
+      isReadyToFix: false,
+      focusedByTab: false };_this.
+
+
+    theme = void 0;_this.
+    wrapper = null;_this.
+    lastRegularHeight = 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    componentDidMount = function () {
+      window.addEventListener('scroll', _this.update, true);
+      _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
+    };_this.
+
+    componentWillUnmount = function () {
+      window.removeEventListener('scroll', _this.update, true);
+      _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
+    };_this.
+
+    update = function () {
+      _this.updateReadyToFix();
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderHeader = function (fixed) {var _cx, _cx2;if (fixed === void 0) {fixed = false;}
+      return /*#__PURE__*/(
+        _react.default.createElement("div", {
+          className: (0, _Emotion.cx)(_SidePage.styles.header(_this.theme), (_cx = {}, _cx[
+          _SidePage.styles.headerFixed(_this.theme)] = fixed, _cx[
+          _SidePage.styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx)) },
+
+
+        _this.renderClose(fixed), /*#__PURE__*/
+        _react.default.createElement("div", {
+          className: (0, _Emotion.cx)(_SidePage.styles.title(_this.theme), (_cx2 = {}, _cx2[
+          _SidePage.styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[
+          _SidePage.styles.titleFixed()] = fixed, _cx2)) },
+
+
+        (0, _utils.isFunction)(_this.props.children) ? _this.props.children(fixed) : _this.props.children)));
+
+
+
+    };_this.
+
+    renderClose = function (fixed) {var _cx3;
+      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+
+      return /*#__PURE__*/(
+        _react.default.createElement("div", {
+          className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[
+          _SidePage.styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[
+          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3)) }, /*#__PURE__*/
+
+
+        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
+        function (_ref) {var _cx4;var requestClose = _ref.requestClose;
+          var button = /*#__PURE__*/
+          _react.default.createElement("button", {
+            className: (0, _Emotion.cx)(_SidePage.styles.close(_this.theme), (_cx4 = {}, _cx4[
+            _SidePage.styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4[
+            _SidePage.styles.mobileClose(_this.theme)] = _this.isMobileLayout, _cx4)),
+
+            onFocus: _this.handleFocus,
+            onBlur: _this.handleBlur,
+            onClick: requestClose,
+            "data-tid": "SidePage__close",
+            tabIndex: 0 }, /*#__PURE__*/
+
+          _react.default.createElement(_CrossIcon.CrossIcon, null));
+
+
+
+          if (_this.isMobileLayout) {
+            return button;
+          }
+
+          return /*#__PURE__*/(
+            _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
+            button));
+
+
+        })));
+
+
+
+    };_this.
+
+    updateReadyToFix = function () {
+      if (_this.wrapper) {
+        var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
+        var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
+        _this.setState(function (state) {return state.isReadyToFix !== isReadyToFix ? (0, _extends2.default)({}, state, { isReadyToFix: isReadyToFix }) : state;});
+      }
+    };_this.
+
+    wrapperRef = function (el) {
+      _this.wrapper = el;
+    };_this.
+
+    handleFocus = function () {
+      requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed) {
+          _this.setState({ focusedByTab: true });
+        }
+      });
+    };_this.
+
+    handleBlur = function () {
+      _this.setState({ focusedByTab: false });
+    };return _this;}var _proto = SidePageHeader.prototype;_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.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class;exports.SidePageHeader = SidePageHeader;

package/cjs/components/SidePage/SidePageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","responsiveLayout","context","isMobileLayout","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","styles","header","headerFixed","mobileHeader","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","requestClose","button","close","closeFocus","mobileClose","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","getStickyProp","sticky","isStickyDesktop","isStickyMobile","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n  };\n\n  public update = () => {\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        <SidePageContext.Consumer>\n          {({ requestClose }) => {\n            const button = (\n              <button\n                className={cx(styles.close(this.theme), {\n                  [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n                  [styles.mobileClose(this.theme)]: this.isMobileLayout,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                onClick={requestClose}\n                data-tid=\"SidePage__close\"\n                tabIndex={0}\n              >\n                <CrossIcon />\n              </button>\n            );\n\n            if (this.isMobileLayout) {\n              return button;\n            }\n\n            return (\n              <Sticky side=\"top\" offset={stickyOffset}>\n                {button}\n              </Sticky>\n            );\n          }}\n        </SidePageContext.Consumer>\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}

package/cjs/components/SidePage/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SidePage';
+export * from './SidePageHeader';
+export * from './SidePageBody';
+export * from './SidePageFooter';
+export * from './SidePageContainer';

package/cjs/components/SidePage/index.js

@@ -0,0 +1,5 @@
+"use strict";exports.__esModule = true;var _SidePage = require("./SidePage");Object.keys(_SidePage).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SidePage[key]) return;exports[key] = _SidePage[key];});
+var _SidePageHeader = require("./SidePageHeader");Object.keys(_SidePageHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SidePageHeader[key]) return;exports[key] = _SidePageHeader[key];});
+var _SidePageBody = require("./SidePageBody");Object.keys(_SidePageBody).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SidePageBody[key]) return;exports[key] = _SidePageBody[key];});
+var _SidePageFooter = require("./SidePageFooter");Object.keys(_SidePageFooter).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SidePageFooter[key]) return;exports[key] = _SidePageFooter[key];});
+var _SidePageContainer = require("./SidePageContainer");Object.keys(_SidePageContainer).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SidePageContainer[key]) return;exports[key] = _SidePageContainer[key];});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA;AACA;AACA;AACA;AACA","sourcesContent":["export * from './SidePage';\nexport * from './SidePageHeader';\nexport * from './SidePageBody';\nexport * from './SidePageFooter';\nexport * from './SidePageContainer';\n"]}

package/cjs/components/Spinner/Spinner.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+declare const types: Record<SpinnerType, SpinnerType>;
+export declare type SpinnerType = 'mini' | 'normal' | 'big';
+export interface SpinnerProps extends CommonProps {
+    caption?: React.ReactNode;
+    dimmed?: boolean;
+    /**
+     * Тип спиннера
+     * @default normal
+     */
+    type: SpinnerType;
+    inline?: boolean;
+}
+/**
+ * DRAFT - инлайн-лоадер
+ */
+export declare class Spinner extends React.Component<SpinnerProps> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        /**
+         * Текст рядом с мини-лоадером.
+         *
+         * 'Загрузка' - значение по-умолчанию
+         */
+        caption: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dimmed: PropTypes.Requireable<boolean>;
+        /**
+         * Тип спиннера: mini, normal, big
+         *
+         * Значение по-умолчанию - normal
+         *
+         * Spinner.types - все доступные типы
+         */
+        type: PropTypes.Requireable<string>;
+    };
+    static defaultProps: SpinnerProps;
+    static Types: typeof types;
+    private theme;
+    private readonly locale;
+    constructor(props: SpinnerProps);
+    render(): JSX.Element;
+    private renderMain;
+    private renderSpinner;
+    private renderCaption;
+}
+export {};

package/cjs/components/Spinner/Spinner.js

@@ -0,0 +1,114 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Spinner = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _decorators = require("../../lib/locale/decorators");
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _SpinnerIcon = require("../../internal/icons/SpinnerIcon");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _Spinner = require("./Spinner.styles");
+var _locale = require("./locale");var _dec, _class, _class2, _temp;
+
+var types = {
+  big: 'big',
+  mini: 'mini',
+  normal: 'normal' };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * DRAFT - инлайн-лоадер
+ */var
+
+
+Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Spinner, _React$Component);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  function Spinner(props) {var _this;
+    _this = _React$Component.call(this, props) || this;_this.theme = void 0;_this.locale = void 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderSpinner = function (type, dimmed, inline) {
+      var circleClassName = dimmed ? _Spinner.styles.circleDimmed(_this.theme) : _Spinner.styles.circle(_this.theme);
+
+      return /*#__PURE__*/_react.default.createElement(_SpinnerIcon.SpinnerIcon, { size: type, className: circleClassName, dimmed: dimmed, inline: inline });
+    };_this.
+
+    renderCaption = function (type, caption) {return /*#__PURE__*/(
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner.styles[type](_this.theme), _Spinner.styles.captionColor(_this.theme)) }, caption));};return _this;}var _proto = Spinner.prototype;_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 _this$props = this.props,type = _this$props.type,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
+   * Текст рядом с мини-лоадером.
+   *
+   * 'Загрузка' - значение по-умолчанию
+   */caption: _propTypes.default.node, dimmed: _propTypes.default.bool, /**
+   * Тип спиннера: mini, normal, big
+   *
+   * Значение по-умолчанию - normal
+   *
+   * Spinner.types - все доступные типы
+   */type: _propTypes.default.oneOf(Object.keys(types)) }, _class2.defaultProps = { type: 'normal' }, _class2.Types = types, _temp)) || _class);exports.Spinner = Spinner;

package/cjs/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Spinner.tsx"],"names":["types","big","mini","normal","Spinner","SpinnerLocaleHelper","props","theme","locale","renderSpinner","type","dimmed","inline","circleClassName","styles","circleDimmed","circle","renderCaption","caption","captionColor","render","renderMain","loading","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"mPAAA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,kC;;AAEA,IAAMA,KAAuC,GAAG;AAC9CC,EAAAA,GAAG,EAAE,KADyC;AAE9CC,EAAAA,IAAI,EAAE,MAFwC;AAG9CC,EAAAA,MAAM,EAAE,QAHsC,EAAhD;;;;;;;;;;;;;;;;AAmBA;AACA;AACA,G;;;AAGaC,O,WADZ,wBAAO,SAAP,EAAkBC,2BAAlB,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCC,mBAAYC,KAAZ,EAAiC;AAC/B,wCAAMA,KAAN,UAD+B,MAHzBC,KAGyB,gBAFhBC,MAEgB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BzBC,IAAAA,aA5ByB,GA4BT,UAACC,IAAD,EAAoBC,MAApB,EAAsCC,MAAtC,EAA2D;AACjF,UAAMC,eAAe,GAAGF,MAAM,GAAGG,gBAAOC,YAAP,CAAoB,MAAKR,KAAzB,CAAH,GAAqCO,gBAAOE,MAAP,CAAc,MAAKT,KAAnB,CAAnE;;AAEA,0BAAO,6BAAC,wBAAD,IAAa,IAAI,EAAEG,IAAnB,EAAyB,SAAS,EAAEG,eAApC,EAAqD,MAAM,EAAEF,MAA7D,EAAqE,MAAM,EAAEC,MAA7E,GAAP;AACD,KAhCgC;;AAkCzBK,IAAAA,aAlCyB,GAkCT,UAACP,IAAD,EAAoBQ,OAApB;AACtB,+CAAM,SAAS,EAAE,iBAAGJ,gBAAOJ,IAAP,EAAa,MAAKH,KAAlB,CAAH,EAA6BO,gBAAOK,YAAP,CAAoB,MAAKZ,KAAzB,CAA7B,CAAjB,IAAiFW,OAAjF,CADsB,GAlCS,cAEhC,C,sCAEME,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACb,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACc,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,mBAC6C,KAAKf,KADlD,CACXI,IADW,eACXA,IADW,mCACLQ,OADK,CACLA,OADK,oCACK,KAAKV,MAAL,CAAYc,OADjB,uBAC0BX,MAD1B,eAC0BA,MAD1B,CACkCC,MADlC,eACkCA,MADlC,CAGnB,oBACE,6BAAC,4BAAD,EAAmB,KAAKN,KAAxB,eACE,sCAAK,SAAS,EAAEQ,gBAAOS,OAAP,EAAhB,iBACE,uCAAM,SAAS,EAAET,gBAAOU,KAAP,EAAjB,IAAkC,KAAKf,aAAL,CAAmBC,IAAnB,EAAyBC,MAAzB,EAAiCC,MAAjC,CAAlC,CADF,EAEGM,OAAO,IAAI,KAAKD,aAAL,CAAmBP,IAAnB,EAAyBQ,OAAzB,CAFd,CADF,CADF,CAQD,C,kBAzD0BO,eAAMC,S,WACnBC,mB,GAAsB,S,UAEtBC,S,GAAY,EACxB;AACJ;AACA;AACA;AACA,KACIV,OAAO,EAAEW,mBAAUC,IANK,EAQxBnB,MAAM,EAAEkB,mBAAUE,IARM,EAUxB;AACJ;AACA;AACA;AACA;AACA;AACA,KACIrB,IAAI,EAAEmB,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYlC,KAAZ,CAAhB,CAjBkB,E,UAoBZmC,Y,GAA6B,EACzCzB,IAAI,EAAE,QADmC,E,UAI7B0B,K,GAAsBpC,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\n  /**\n   * Тип спиннера\n   * @default normal\n   */\n  type: SpinnerType;\n  inline?: boolean;\n}\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(types)),\n  };\n\n  public static defaultProps: SpinnerProps = {\n    type: 'normal',\n  };\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n\n  constructor(props: SpinnerProps) {\n    super(props);\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 = this.locale.loading, dimmed, inline } = this.props;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    const circleClassName = dimmed ? styles.circleDimmed(this.theme) : styles.circle(this.theme);\n\n    return <SpinnerIcon size={type} className={circleClassName} dimmed={dimmed} inline={inline} />;\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}