@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,20 +1,22 @@
-"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.SidePageHeaderDataTids = 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");
 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 _decorator = require("../ResponsiveLayout/decorator");
+var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _ModalSeparator = require("../Modal/ModalSeparator");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 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;
 
 
 
@@ -24,20 +26,40 @@ var FIXED_HEADER_HEIGHT = 50;
 
 
 
-/**
-                               * Шапка сайдпейджа
-                               *
-                               * @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.
+
+
+var SidePageHeaderDataTids = {
+  root: 'SidePageHeader__root',
+  close: 'SidePage__close' };
+
+
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
+ */exports.SidePageHeaderDataTids = SidePageHeaderDataTids;var
+
+
+SidePageHeader = (0, _decorator.responsiveLayout)(_class = (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.
 
 
@@ -51,15 +73,26 @@ 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.
 
@@ -83,49 +116,126 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
-    renderHeader = function (fixed) {var _cn, _cn2;if (fixed === void 0) {fixed = false;}
-      return (
-        _react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.header(), (_cn = {}, _cn[_SidePage.jsStyles.headerFixed(_this.theme)] = fixed, _cn)) },
-        _this.renderClose(),
-        _react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.title(), (_cn2 = {}, _cn2[_SidePage.jsStyles.titleFixed()] = fixed, _cn2)) },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    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.
 
-    renderCloseContent = function (fixed) {return (
-        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
-        function (_ref) {var _cn3;var requestClose = _ref.requestClose;return (
-            _react.default.createElement("a", {
-              className: (0, _classnames.default)(_SidePage.jsStyles.close(_this.theme), (_cn3 = {}, _cn3[
-              _SidePage.jsStyles.fixed()] = fixed, _cn3)),
+    renderHeader2022 = function (fixed) {if (fixed === void 0) {fixed = false;}
+      var isDisplayed = _this.props.hasSeparator || fixed;
+      return /*#__PURE__*/(
+        _react.default.createElement("div", null,
+        _this.renderHeader(fixed),
+        isDisplayed && /*#__PURE__*/_react.default.createElement(_ModalSeparator.ModalSeparator, { fixed: fixed })));
 
-              onClick: requestClose,
-              "data-tid": "SidePage__close" },
 
-            _react.default.createElement("span", { className: _SidePage.jsStyles.closeIcon() },
-            _react.default.createElement(_CrossIcon.CrossIcon, null))));}));};_this.
+    };_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)) },
+
 
+        _this.isMobileLayout ?
+        _this.closeIcon() : /*#__PURE__*/
 
+        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
+        _this.closeIcon)));
 
 
 
 
-    renderClose = function () {return (
-        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: CLOSE_ELEMENT_OFFSET },
-        _this.renderCloseContent));};_this.
+    };_this.
+
+    closeIcon = function () {return /*#__PURE__*/(
+        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
+        function (_ref) {var _cx4;var requestClose = _ref.requestClose;return /*#__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)),
+
+              onFocus: _this.handleFocus,
+              onBlur: _this.handleBlur,
+              onClick: requestClose,
+              "data-tid": SidePageHeaderDataTids.close,
+              tabIndex: 0 }, /*#__PURE__*/
+
+            _react.default.createElement(_CrossIcon.CrossIcon, null)));}));};_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 wrapperScrolledUp = (0, _getDOMRect.getDOMRect)(_this.wrapper).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;
-    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return _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 _react.default.createElement("div", { ref: this.wrapperRef }, isReadyToFix ? _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.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();var header = (0, _ThemeHelpers.isTheme2022)(this.theme) ? this.renderHeader2022 : this.renderHeader;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageHeaderDataTids.root, ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, side: "top" }, header) : header()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = (0, _getDOMRect.getDOMRect)(this.wrapper).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, _class2.defaultProps = { hasSeparator: false }, _temp)) || _class) || _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\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 {\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      <div ref={this.wrapperRef}>\r\n        {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\r\n      </div>\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":["SidePageHeaderDataTids","root","close","SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","renderHeader2022","isDisplayed","hasSeparator","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext","defaultProps"],"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/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\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  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: 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 = getDOMRect(this.wrapper).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  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    const header = isTheme2022(this.theme) ? this.renderHeader2022 : this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\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 renderHeader2022 = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        {this.renderHeader(fixed)}\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\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        {this.isMobileLayout ? (\n          this.closeIcon()\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\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={SidePageHeaderDataTids.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 = getDOMRect(this.wrapper).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

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

@@ -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

@@ -1,24 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { types } from './SpinnerFallback';
-export declare type SpinnerType = 'mini' | 'normal' | 'big';
-export interface SpinnerProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+declare const types: readonly ["big", "mini", "normal"];
+export declare type SpinnerType = typeof types[number];
+export interface SpinnerProps extends CommonProps {
+    /**
+     * Подпись под спиннером
+     */
     caption?: React.ReactNode;
+    /**
+     * Переводит спиннер в "затемнённый режим"
+     *
+     * Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`
+     */
     dimmed?: boolean;
     /**
-     * Тип спиннера
+     * Размер спиннера и текста
+     *
      * @default normal
      */
-    type: SpinnerType;
+    type?: SpinnerType;
+    inline?: boolean;
     /**
-     * @deprecated Старое поведение спиннера - облачко при среднем и большом размере - исчезнет в 3.0 поведение пересено в `@skbkontur/react-ui-addons` смотри [миграцию](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MIGRATION.md)
-     *
-     * @default false
+     * Толщина спиннера
+     */
+    width?: number;
+    /**
+     * Цвет спиннера
      */
-    cloud?: boolean;
+    color?: React.CSSProperties['color'];
 }
+export declare const SpinnerDataTids: {
+    readonly root: "Spinner__root";
+};
+declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
 /**
- * DRAFT - инлайн-лоадер
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
  */
 export declare class Spinner extends React.Component<SpinnerProps> {
     static __KONTUR_REACT_UI__: string;
@@ -37,22 +54,17 @@ export declare class Spinner extends React.Component<SpinnerProps> {
          *
          * Spinner.types - все доступные типы
          */
-        type: PropTypes.Requireable<string>;
-        /**
-         * @deprecated Старое поведение спиннера - облачко при среднем и большом размере
-         *
-         * @default false - исчезнет в 3.0
-         */
-        cloud: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<"big" | "normal" | "mini">;
     };
-    static defaultProps: SpinnerProps;
-    static Types: typeof types;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static Types: Record<SpinnerType, SpinnerType>;
     private theme;
     private readonly locale;
-    constructor(props: SpinnerProps);
+    private setRootNode;
     render(): JSX.Element;
-    private renderSpinnerOld;
     private renderMain;
     private renderSpinner;
     private renderCaption;
 }
+export {};

package/cjs/components/Spinner/Spinner.js

@@ -1,19 +1,19 @@
-"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.SpinnerDataTids = 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 _warning = _interopRequireDefault(require("warning"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _decorators = require("../../lib/locale/decorators");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _utils = require("../../lib/utils");
 var _SpinnerIcon = require("../../internal/icons/SpinnerIcon");
-var _SpinnerOld = require("../../internal/SpinnerOld");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _Spinner = require("./Spinner.styles");
-var _SpinnerFallback = require("./SpinnerFallback");
 var _locale = require("./locale");var _dec, _class, _class2, _temp;
 
+var types = ['big', 'mini', 'normal'];
 
 
 
@@ -32,12 +32,8 @@ var _locale = require("./locale");var _dec, _class, _class2, _temp;
 
 
 
-/**
-                                                                     * DRAFT - инлайн-лоадер
-                                                                     */var
 
 
-Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Spinner, _React$Component);
 
 
 
@@ -49,13 +45,19 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+var SpinnerDataTids = {
+  root: 'Spinner__root' };exports.SpinnerDataTids = SpinnerDataTids;
 
 
 
 
+/**
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
+ */var
 
 
 
+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);function Spinner() {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.
 
 
 
@@ -74,8 +76,6 @@ 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.
 
 
 
@@ -84,6 +84,7 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Spinner.defaultProps);_this.
 
 
 
@@ -108,25 +109,39 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
-    renderSpinner = function (type, dimmed) {
-      var circleClassName = dimmed ? _Spinner.jsStyles.circleDimmed(_this.theme) : _Spinner.jsStyles.circle(_this.theme);
 
-      return _react.default.createElement(_SpinnerIcon.SpinnerIcon, { size: type, className: circleClassName });
+
+
+
+
+
+
+    renderSpinner = function (type, dimmed, inline) {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()] = dimmed || !!_this.props.color, _cx)),
+
+          dimmed: dimmed,
+          width: _this.props.width,
+          color: _this.props.color,
+          inline: inline }));
+
+
     };_this.
 
-    renderCaption = function (type, caption) {return (
-        _react.default.createElement("span", { className: (0, _classnames.default)(_Spinner.jsStyles[type](_this.theme), _Spinner.jsStyles.captionColor(_this.theme)) }, caption));};(0, _warning.default)(!_this.props.cloud, 'cloud is deprecated, will removed in 3.0. ');return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return !_this2.props.cloud ? _this2.renderMain() : _this2.renderSpinnerOld();});};_proto.renderSpinnerOld = function renderSpinnerOld() {return _react.default.createElement(_SpinnerOld.SpinnerOld, this.props);};_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 _react.default.createElement("div", { className: _Spinner.jsStyles.spinner() }, _react.default.createElement("span", { className: _Spinner.jsStyles.inner() }, _utils.hasSvgAnimationSupport && this.renderSpinner(type, dimmed), !_utils.hasSvgAnimationSupport && _react.default.createElement(_SpinnerFallback.SpinnerFallback, { type: type, dimmed: 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(_SpinnerFallback.types)), /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         * @deprecated Старое поведение спиннера - облачко при среднем и большом размере
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         *
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         * @default false - исчезнет в 3.0
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         */cloud: _propTypes.default.bool }, _class2.defaultProps = { type: 'normal' }, _class2.Types = _SpinnerFallback.types, _temp)) || _class);exports.Spinner = Spinner;
+    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,_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;var type = this.getProps().type;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SpinnerDataTids.root, 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(types) }, _class2.defaultProps = { type: 'normal' }, _class2.Types = Object.assign.apply(Object, [{}].concat(types.map(function (type) {var _ref;return _ref = {}, _ref[type] = type, _ref;}))), _temp)) || _class) || _class);exports.Spinner = Spinner;