@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

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

@@ -22,15 +22,15 @@ export declare class SidePageFooter extends React.Component<SidePageFooterProps>
     };
     private theme;
     private content;
-    private wrapper;
     private layoutSub;
+    private setRootNode;
     componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<SidePageFooterProps>): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
     update: () => void;
     private renderMain;
     private refContent;
-    private refWrapper;
     private setProperStyles;
     private getContentHeight;
 }

package/cjs/components/SidePage/SidePageFooter.js

@@ -1,13 +1,14 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageFooter = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.SidePageFooter = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));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 _rootNode = require("../../lib/rootNode");
 
 var _SidePage = require("./SidePage.styles");
-var _SidePageContext = require("./SidePageContext");
+var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
 
 
 
@@ -17,13 +18,14 @@ var _SidePageContext = require("./SidePageContext");
 
 
 
-/**
- * Футер сайдпейджа.
- *
- * @visibleName SidePage.Footer
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
  */var
 
-SidePageFooter = /*#__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.
+
+SidePageFooter = (0, _rootNode.rootNode)(_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.
 
 
 
@@ -35,8 +37,16 @@ SidePageFooter = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
     theme = void 0;_this.
     content = null;_this.
-    wrapper = null;_this.
     layoutSub = null;_this.
+    setRootNode = void 0;_this.
+
+
+
+
+
+
+
+
 
 
 
@@ -99,22 +109,19 @@ SidePageFooter = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
       _this.content = node;
     };_this.
 
-    refWrapper = function (node) {
-      _this.wrapper = node;
-    };_this.
-
     setProperStyles = function () {
-      if (_this.wrapper && _this.content) {
-        var wrapperRect = _this.wrapper.getBoundingClientRect();
+      var wrapper = (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
+      if (wrapper && _this.content) {
+        var wrapperRect = 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() {this.context.footerRef(this);this.update();this.layoutSub = LayoutEvents.addListener(this.update);};_proto.componentWillUnmount = function componentWillUnmount() {this.context.footerRef(null);if (this.layoutSub) {this.layoutSub.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 _this3 = this;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { style: { height: this.getContentHeight() }, ref: this.refWrapper }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cn;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: _SidePage.jsStyles.footer(), style: { width: getWidth() } }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.footerContent(), (_cn = {}, _cn[_SidePage.jsStyles.panel(_this3.theme)] = !!_this3.props.panel, _cn[_SidePage.jsStyles.footerFixed(_this3.theme)] = _this3.state.fixed, _cn)), ref: _this3.refContent }, _this3.props.children));})));};_proto.
+    };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.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, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { style: { height: this.getContentHeight() }, className: _SidePage.styles.footerWrapper() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cx;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: _SidePage.styles.footer(), style: { width: getWidth() } }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footerContent(_this3.theme), (_cx = {}, _cx[_SidePage.styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx[_SidePage.styles.panel(_this3.theme)] = !!_this3.props.panel, _cx)), 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);exports.SidePageFooter = SidePageFooter;SidePageFooter.__KONTUR_REACT_UI__ = 'SidePageFooter';SidePageFooter.contextType = _SidePageContext.SidePageContext;
+  };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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooter","context","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","componentWillUnmount","remove","render","renderMain","props","height","getContentHeight","getWidth","jsStyles","footer","width","footerContent","panel","footerFixed","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\n\r\nexport interface SidePageFooterProps extends CommonProps {\r\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\r\n  /**\r\n   * Включает серый цвет в футере\r\n   */\r\n  panel?: boolean;\r\n}\r\n\r\n/**\r\n * Футер сайдпейджа.\r\n *\r\n * @visibleName SidePage.Footer\r\n */\r\n\r\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\r\n\r\n  public static contextType = SidePageContext;\r\n  public context: SidePageContextType = this.context;\r\n\r\n  public state = {\r\n    fixed: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private content: HTMLElement | null = null;\r\n  private wrapper: HTMLElement | null = null;\r\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\r\n\r\n  public componentDidMount() {\r\n    this.context.footerRef(this);\r\n    this.update();\r\n    this.layoutSub = LayoutEvents.addListener(this.update);\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    this.context.footerRef(null);\r\n    if (this.layoutSub) {\r\n      this.layoutSub.remove();\r\n    }\r\n  }\r\n\r\n  public render(): JSX.Element {\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  public update = () => {\r\n    this.setProperStyles();\r\n  };\r\n\r\n  private renderMain() {\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div style={{ height: this.getContentHeight() }} ref={this.refWrapper}>\r\n          <SidePageContext.Consumer>\r\n            {({ getWidth }) => (\r\n              <div\r\n                className={jsStyles.footer()}\r\n                style={{\r\n                  width: getWidth(),\r\n                }}\r\n              >\r\n                <div\r\n                  className={cn(jsStyles.footerContent(), {\r\n                    [jsStyles.panel(this.theme)]: !!this.props.panel,\r\n                    [jsStyles.footerFixed(this.theme)]: this.state.fixed,\r\n                  })}\r\n                  ref={this.refContent}\r\n                >\r\n                  {this.props.children}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </SidePageContext.Consumer>\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private refContent = (node: HTMLElement | null) => {\r\n    this.content = node;\r\n  };\r\n\r\n  private refWrapper = (node: HTMLElement | null) => {\r\n    this.wrapper = node;\r\n  };\r\n\r\n  private setProperStyles = () => {\r\n    if (this.wrapper && this.content) {\r\n      const wrapperRect = this.wrapper.getBoundingClientRect();\r\n      const contentRect = this.content.getBoundingClientRect();\r\n      const fixed = wrapperRect.top > contentRect.top;\r\n      this.setState({ fixed });\r\n    }\r\n  };\r\n\r\n  private getContentHeight() {\r\n    if (!this.content) {\r\n      return 'auto';\r\n    }\r\n    return this.content.getBoundingClientRect().height;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooter","rootNode","context","state","fixed","theme","content","layoutSub","setRootNode","update","setProperStyles","refContent","node","wrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","render","renderMain","height","getContentHeight","styles","footerWrapper","getWidth","footer","width","footerContent","footerFixed","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","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 { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\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}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n\n@rootNode\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\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  private setRootNode!: TSetRootNode;\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 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 rootNodeRef={this.setRootNode} {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={styles.footer()}\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                  })}\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 setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = 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

@@ -1,10 +1,12 @@
 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);
 }
 export interface SidePageHeaderState {
     isReadyToFix: boolean;
+    focusedByTab: boolean;
 }
 /**
  * Шапка сайдпейджа
@@ -13,21 +15,30 @@ export interface SidePageHeaderState {
  */
 export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
     static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
     state: {
         isReadyToFix: boolean;
+        focusedByTab: boolean;
     };
     private theme;
     private wrapper;
+    private sticky;
     private lastRegularHeight;
+    private setRootNode;
     get regularHeight(): number;
+    get fixedHeaderHeight(): number;
     componentDidMount: () => void;
     componentWillUnmount: () => void;
     update: () => void;
     render(): JSX.Element;
     private renderMain;
     private renderHeader;
-    private renderCloseContent;
     private renderClose;
+    private closeIcon;
     private updateReadyToFix;
     private wrapperRef;
+    private stickyRef;
+    private handleFocus;
+    private handleBlur;
 }

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,5 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Sticky = require("../Sticky");
 var _CrossIcon = require("../../internal/icons/CrossIcon");
@@ -7,15 +6,13 @@ 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 _rootNode = require("../../lib/rootNode");
 
 var _SidePage = require("./SidePage.styles");
-var _SidePageContext = require("./SidePageContext");
+var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
 
-var REGULAR_HEADER_PADDING_TOP = 25;
-var FIXED_HEADER_PADDING_TOP = 13;
-var FONT_FAMILY_CORRECTION = 1;
-var CLOSE_ELEMENT_OFFSET = REGULAR_HEADER_PADDING_TOP - FIXED_HEADER_PADDING_TOP - FONT_FAMILY_CORRECTION;
-var FIXED_HEADER_HEIGHT = 50;
 
 
 
@@ -25,21 +22,33 @@ var FIXED_HEADER_HEIGHT = 50;
 
 
 
-/**
- * Шапка сайдпейджа
- *
- * @visibleName SidePage.Header
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
  */var
-SidePageHeader = /*#__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.
 
+SidePageHeader = (0, _rootNode.rootNode)(_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.
 
     state = {
-      isReadyToFix: false };_this.
+      isReadyToFix: false,
+      focusedByTab: false };_this.
 
 
     theme = void 0;_this.
     wrapper = null;_this.
+    sticky = null;_this.
     lastRegularHeight = 0;_this.
+    setRootNode = void 0;_this.
+
+
+
+
+
 
 
 
@@ -54,13 +63,18 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
     componentDidMount = function () {
       window.addEventListener('scroll', _this.update, true);
+      _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
+      _this.context.headerRef((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     componentWillUnmount = function () {
       window.removeEventListener('scroll', _this.update, true);
+      _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
+      _this.context.headerRef(null);
     };_this.
 
-    update = function () {
+    update = function () {var _this$sticky;
+      (_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
       _this.updateReadyToFix();
     };_this.
 
@@ -86,49 +100,78 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
-    renderHeader = function (fixed) {var _cn, _cn2;if (fixed === void 0) {fixed = false;}
+
+
+
+
+
+
+    renderHeader = function (fixed) {var _cx, _cx2;if (fixed === void 0) {fixed = false;}
       return /*#__PURE__*/(
-        _react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.header(), (_cn = {}, _cn[_SidePage.jsStyles.headerFixed(_this.theme)] = fixed, _cn)) },
-        _this.renderClose(), /*#__PURE__*/
-        _react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.title(), (_cn2 = {}, _cn2[_SidePage.jsStyles.titleFixed()] = fixed, _cn2)) },
+        _react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.header(_this.theme), (_cx = {}, _cx[_SidePage.styles.headerFixed(_this.theme)] = fixed, _cx)) },
+        _this.renderClose(fixed), /*#__PURE__*/
+        _react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.title(_this.theme), (_cx2 = {}, _cx2[_SidePage.styles.titleFixed()] = fixed, _cx2)) },
         (0, _utils.isFunction)(_this.props.children) ? _this.props.children(fixed) : _this.props.children)));
 
 
 
     };_this.
 
-    renderCloseContent = function (fixed) {return /*#__PURE__*/(
-        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
-        function (_ref) {var _cn3;var requestClose = _ref.requestClose;return /*#__PURE__*/(
-            _react.default.createElement("a", {
-              className: (0, _classnames.default)(_SidePage.jsStyles.close(_this.theme), (_cn3 = {}, _cn3[
-              _SidePage.jsStyles.fixed()] = fixed, _cn3)),
+    renderClose = function (fixed) {
+      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
 
-              onClick: requestClose,
-              "data-tid": "SidePage__close" }, /*#__PURE__*/
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), fixed && _SidePage.styles.fixed(_this.theme)) }, /*#__PURE__*/
+        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
+        _this.closeIcon)));
 
-            _react.default.createElement("span", { className: _SidePage.jsStyles.closeIcon() }, /*#__PURE__*/
-            _react.default.createElement(_CrossIcon.CrossIcon, null))));}));};_this.
 
 
+    };_this.
 
+    closeIcon = function () {return /*#__PURE__*/(
+        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
+        function (_ref) {var _cx3;var requestClose = _ref.requestClose;return /*#__PURE__*/(
+            _react.default.createElement("button", {
+              className: (0, _Emotion.cx)(_SidePage.styles.close(_this.theme), (_cx3 = {}, _cx3[
+              _SidePage.styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx3)),
+
+              onFocus: _this.handleFocus,
+              onBlur: _this.handleBlur,
+              onClick: requestClose,
+              "data-tid": "SidePage__close",
+              tabIndex: 0 }, /*#__PURE__*/
 
+            _react.default.createElement(_CrossIcon.CrossIcon, null)));}));};_this.
 
 
-    renderClose = function () {return /*#__PURE__*/(
-        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: CLOSE_ELEMENT_OFFSET },
-        _this.renderCloseContent));};_this.
 
 
 
     updateReadyToFix = function () {
       if (_this.wrapper) {
         var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
-        var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= FIXED_HEADER_HEIGHT;
-        _this.setState(function (state) {return state.isReadyToFix !== isReadyToFix ? { isReadyToFix: isReadyToFix } : state;});
+        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;
-    };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.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef }, isReadyToFix ? /*#__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;} }]);return SidePageHeader;}(_react.default.Component);exports.SidePageHeader = SidePageHeader;SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+    };_this.
+
+    stickyRef = function (el) {
+      _this.sticky = 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.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, 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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["REGULAR_HEADER_PADDING_TOP","FIXED_HEADER_PADDING_TOP","FONT_FAMILY_CORRECTION","CLOSE_ELEMENT_OFFSET","FIXED_HEADER_HEIGHT","SidePageHeader","state","isReadyToFix","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","jsStyles","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","setState","wrapperRef","el","render","renderMain","height","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext } from './SidePageContext';\r\n\r\nconst REGULAR_HEADER_PADDING_TOP = 25;\r\nconst FIXED_HEADER_PADDING_TOP = 13;\r\nconst FONT_FAMILY_CORRECTION = 1;\r\nconst CLOSE_ELEMENT_OFFSET = REGULAR_HEADER_PADDING_TOP - FIXED_HEADER_PADDING_TOP - FONT_FAMILY_CORRECTION;\r\nconst FIXED_HEADER_HEIGHT = 50;\r\n\r\nexport interface SidePageHeaderProps extends CommonProps {\r\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface SidePageHeaderState {\r\n  isReadyToFix: boolean;\r\n}\r\n\r\n/**\r\n * Шапка сайдпейджа\r\n *\r\n * @visibleName SidePage.Header\r\n */\r\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\r\n\r\n  public state = {\r\n    isReadyToFix: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private wrapper: HTMLElement | null = null;\r\n  private lastRegularHeight = 0;\r\n\r\n  public get regularHeight(): number {\r\n    const { isReadyToFix } = this.state;\r\n    if (!this.wrapper) {\r\n      return 0;\r\n    }\r\n    if (!isReadyToFix) {\r\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\r\n    }\r\n    return this.lastRegularHeight;\r\n  }\r\n\r\n  public componentDidMount = () => {\r\n    window.addEventListener('scroll', this.update, true);\r\n  };\r\n\r\n  public componentWillUnmount = () => {\r\n    window.removeEventListener('scroll', this.update, true);\r\n  };\r\n\r\n  public update = () => {\r\n    this.updateReadyToFix();\r\n  };\r\n\r\n  public render(): JSX.Element {\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 { isReadyToFix } = this.state;\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div ref={this.wrapperRef}>\r\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderHeader = (fixed = false) => {\r\n    return (\r\n      <div className={cn(jsStyles.header(), { [jsStyles.headerFixed(this.theme)]: fixed })}>\r\n        {this.renderClose()}\r\n        <div className={cn(jsStyles.title(), { [jsStyles.titleFixed()]: fixed })}>\r\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  private renderCloseContent = (fixed: boolean) => (\r\n    <SidePageContext.Consumer>\r\n      {({ requestClose }) => (\r\n        <a\r\n          className={cn(jsStyles.close(this.theme), {\r\n            [jsStyles.fixed()]: fixed,\r\n          })}\r\n          onClick={requestClose}\r\n          data-tid=\"SidePage__close\"\r\n        >\r\n          <span className={jsStyles.closeIcon()}>\r\n            <CrossIcon />\r\n          </span>\r\n        </a>\r\n      )}\r\n    </SidePageContext.Consumer>\r\n  );\r\n\r\n  private renderClose = () => (\r\n    <Sticky side=\"top\" offset={CLOSE_ELEMENT_OFFSET}>\r\n      {this.renderCloseContent}\r\n    </Sticky>\r\n  );\r\n\r\n  private updateReadyToFix = () => {\r\n    if (this.wrapper) {\r\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\r\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= FIXED_HEADER_HEIGHT;\r\n      this.setState(state => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\r\n    }\r\n  };\r\n\r\n  private wrapperRef = (el: HTMLElement | null) => {\r\n    this.wrapper = el;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","rootNode","context","state","isReadyToFix","focusedByTab","theme","wrapper","sticky","lastRegularHeight","setRootNode","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","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 { rootNode, TSetRootNode } from '../../lib/rootNode';\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}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@rootNode\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  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\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    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\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  private renderMain() {\n    const { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isReadyToFix ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {this.renderHeader}\n            </Sticky>\n          ) : (\n            this.renderHeader()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\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 className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\n          {this.closeIcon}\n        </Sticky>\n      </div>\n    );\n  };\n\n  private closeIcon = () => (\n    <SidePageContext.Consumer>\n      {({ requestClose }) => (\n        <button\n          className={cx(styles.close(this.theme), {\n            [styles.closeFocus(this.theme)]: this.state.focusedByTab,\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    </SidePageContext.Consumer>\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 stickyRef = (el: Sticky | null) => {\n    this.sticky = 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.js.map

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

@@ -11,6 +11,14 @@ export interface SpinnerProps extends CommonProps {
      * @default normal
      */
     type: SpinnerType;
+    /**
+     * Толщина спиннера
+     */
+    width?: number;
+    /**
+     * Цвет спиннера
+     */
+    color?: React.CSSProperties['color'];
 }
 /**
  * DRAFT - инлайн-лоадер
@@ -38,6 +46,7 @@ export declare class Spinner extends React.Component<SpinnerProps> {
     static Types: typeof types;
     private theme;
     private readonly locale;
+    private setRootNode;
     constructor(props: SpinnerProps);
     render(): JSX.Element;
     private renderMain;

package/cjs/components/Spinner/Spinner.js

@@ -1,12 +1,13 @@
-"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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Spinner = 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 _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 _rootNode = require("../../lib/rootNode");
 
 var _Spinner = require("./Spinner.styles");
 var _locale = require("./locale");var _dec, _class, _class2, _temp;
@@ -29,12 +30,22 @@ var types = {
 
 
 
-/**
- * DRAFT - инлайн-лоадер
+
+
+
+
+
+
+
+
+/**
+ * DRAFT - инлайн-лоадер
  */var
 
 
-Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Spinner, _React$Component);
+
+Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Spinner, _React$Component);
+
 
 
 
@@ -66,7 +77,9 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
   function Spinner(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.theme = void 0;_this.locale = void 0;_this.
+    _this = _React$Component.call(this, props) || this;_this.theme = void 0;_this.locale = void 0;_this.setRootNode = void 0;_this.
+
+
 
 
 
@@ -91,23 +104,31 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+    renderSpinner = function (type, dimmed) {var _cx;
+      return /*#__PURE__*/(
+        _react.default.createElement(_SpinnerIcon.SpinnerIcon, {
+          size: type,
+          className: (0, _Emotion.cx)((_cx = {}, _cx[
+          _Spinner.styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[
+          _Spinner.styles.circleDimmedColor(_this.theme)] = dimmed, _cx[
+          _Spinner.styles.circleWithoutColorAnimation(_this.theme)] = dimmed || !!_this.props.color, _cx)),
 
+          dimmed: dimmed,
+          width: _this.props.width,
+          color: _this.props.color }));
 
-    renderSpinner = function (type, dimmed) {
-      var circleClassName = dimmed ? _Spinner.jsStyles.circleDimmed(_this.theme) : _Spinner.jsStyles.circle(_this.theme);
 
-      return /*#__PURE__*/_react.default.createElement(_SpinnerIcon.SpinnerIcon, { size: type, className: circleClassName, dimmed: dimmed });
     };_this.
 
     renderCaption = function (type, caption) {return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _classnames.default)(_Spinner.jsStyles[type](_this.theme), _Spinner.jsStyles.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;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: _Spinner.jsStyles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.jsStyles.inner() }, this.renderSpinner(type, dimmed)), 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;
+        _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;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed)), 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) || _class);exports.Spinner = Spinner;

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["types","big","mini","normal","Spinner","SpinnerLocaleHelper","props","theme","locale","renderSpinner","type","dimmed","circleClassName","jsStyles","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;AACA;;AAEA;;AAEA;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;;;;;;;;;;;;;;;AAkBA;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,EAAyC;AAC/D,UAAMC,eAAe,GAAGD,MAAM,GAAGE,kBAASC,YAAT,CAAsB,MAAKP,KAA3B,CAAH,GAAuCM,kBAASE,MAAT,CAAgB,MAAKR,KAArB,CAArE;;AAEA,0BAAO,6BAAC,wBAAD,IAAa,IAAI,EAAEG,IAAnB,EAAyB,SAAS,EAAEE,eAApC,EAAqD,MAAM,EAAED,MAA7D,GAAP;AACD,KAhCgC;;AAkCzBK,IAAAA,aAlCyB,GAkCT,UAACN,IAAD,EAAoBO,OAApB;AACtB,+CAAM,SAAS,EAAE,yBAAGJ,kBAASH,IAAT,EAAe,MAAKH,KAApB,CAAH,EAA+BM,kBAASK,YAAT,CAAsB,MAAKX,KAA3B,CAA/B,CAAjB,IAAqFU,OAArF,CADsB,GAlCS,cAEhC,C,sCAEME,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAAZ,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACa,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,mBACqC,KAAKd,KAD1C,CACXI,IADW,eACXA,IADW,mCACLO,OADK,CACLA,OADK,oCACK,KAAKT,MAAL,CAAYa,OADjB,uBAC0BV,MAD1B,eAC0BA,MAD1B,CAGnB,oBACE,6BAAC,4BAAD,EAAmB,KAAKL,KAAxB,eACE,sCAAK,SAAS,EAAEO,kBAASS,OAAT,EAAhB,iBACE,uCAAM,SAAS,EAAET,kBAASU,KAAT,EAAjB,IAAoC,KAAKd,aAAL,CAAmBC,IAAnB,EAAyBC,MAAzB,CAApC,CADF,EAEGM,OAAO,IAAI,KAAKD,aAAL,CAAmBN,IAAnB,EAAyBO,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,EAQxBlB,MAAM,EAAEiB,mBAAUE,IARM,EAUxB;AACJ;AACA;AACA;AACA;AACA;AACA,KACIpB,IAAI,EAAEkB,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYjC,KAAZ,CAAhB,CAjBkB,E,UAoBZkC,Y,GAA6B,EACzCxB,IAAI,EAAE,QADmC,E,UAI7ByB,K,GAAsBnC,K","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { locale } from '../../lib/locale/decorators';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Spinner.styles';\r\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\r\n\r\nconst types: Record<SpinnerType, SpinnerType> = {\r\n  big: 'big',\r\n  mini: 'mini',\r\n  normal: 'normal',\r\n};\r\n\r\nexport type SpinnerType = 'mini' | 'normal' | 'big';\r\n\r\nexport interface SpinnerProps extends CommonProps {\r\n  caption?: React.ReactNode;\r\n  dimmed?: boolean;\r\n  /**\r\n   * Тип спиннера\r\n   * @default normal\r\n   */\r\n  type: SpinnerType;\r\n}\r\n\r\n/**\r\n * DRAFT - инлайн-лоадер\r\n */\r\n\r\n@locale('Spinner', SpinnerLocaleHelper)\r\nexport class Spinner extends React.Component<SpinnerProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Spinner';\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * Текст рядом с мини-лоадером.\r\n     *\r\n     * 'Загрузка' - значение по-умолчанию\r\n     */\r\n    caption: PropTypes.node,\r\n\r\n    dimmed: PropTypes.bool,\r\n\r\n    /**\r\n     * Тип спиннера: mini, normal, big\r\n     *\r\n     * Значение по-умолчанию - normal\r\n     *\r\n     * Spinner.types - все доступные типы\r\n     */\r\n    type: PropTypes.oneOf(Object.keys(types)),\r\n  };\r\n\r\n  public static defaultProps: SpinnerProps = {\r\n    type: 'normal',\r\n  };\r\n\r\n  public static Types: typeof types = types;\r\n  private theme!: Theme;\r\n  private readonly locale!: SpinnerLocale;\r\n\r\n  constructor(props: SpinnerProps) {\r\n    super(props);\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 { type, caption = this.locale.loading, dimmed } = this.props;\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div className={jsStyles.spinner()}>\r\n          <span className={jsStyles.inner()}>{this.renderSpinner(type, dimmed)}</span>\r\n          {caption && this.renderCaption(type, caption)}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean) => {\r\n    const circleClassName = dimmed ? jsStyles.circleDimmed(this.theme) : jsStyles.circle(this.theme);\r\n\r\n    return <SpinnerIcon size={type} className={circleClassName} dimmed={dimmed} />;\r\n  };\r\n\r\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\r\n    <span className={cn(jsStyles[type](this.theme), jsStyles.captionColor(this.theme))}>{caption}</span>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["Spinner.tsx"],"names":["types","big","mini","normal","Spinner","SpinnerLocaleHelper","rootNode","props","theme","locale","setRootNode","renderSpinner","type","dimmed","styles","circle","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","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';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\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  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\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  private setRootNode!: TSetRootNode;\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 } = this.props;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean) => {\n    return (\n      <SpinnerIcon\n        size={type}\n        className={cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation(this.theme)]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n      />\n    );\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"]}