@skbkontur/react-ui 0.0.0-4cd450ed1e → 0.0.0-4da47ece08

package/cjs/components/SidePage/SidePageFooter.js

@@ -1,13 +1,20 @@
-"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").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.SidePageFooterDataTids = 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 _decorator = require("../ResponsiveLayout/decorator");
+var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _Gapped = require("../Gapped");
+var _utils = require("../../lib/utils");
+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;
 
 
 
@@ -17,25 +24,43 @@ var _SidePageContext = require("./SidePageContext");
 
 
 
-/**
- * Футер сайдпейджа.
- *
- * @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.
+
+
+
+
+
+
+
+
+
+
+
+var SidePageFooterDataTids = {
+  root: 'SidePageFooter__root' };
+
+
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
+ */exports.SidePageFooterDataTids = SidePageFooterDataTids;var
+
+
+SidePageFooter = (0, _decorator.responsiveLayout)(_class = (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.
+
 
 
 
     context = _this.context;_this.
 
+
     state = {
       fixed: false };_this.
 
 
-    theme = void 0;_this.
+
     content = null;_this.
-    wrapper = null;_this.
     layoutSub = null;_this.
 
 
@@ -57,6 +82,27 @@ SidePageFooter = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -85,6 +131,26 @@ SidePageFooter = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -99,22 +165,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 contentRect = _this.content.getBoundingClientRect();
+      var wrapper = (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
+      if (wrapper && _this.content) {
+        var wrapperRect = (0, _getDOMRect.getDOMRect)(wrapper);
+        var contentRect = (0, _getDOMRect.getDOMRect)(_this.content);
         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(_this3.theme), (_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.getSticky = function getSticky() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var separator = null;if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/_react.default.createElement(_ModalSeparator.ModalSeparator, { fixed: this.state.fixed });}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageFooterDataTids.root, style: { height: this.getContentHeight() }, className: _SidePage.styles.footerWrapper() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cx, _cx2;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footer(_this3.theme), (_cx = {}, _cx[_SidePage.styles.positionStatic()] = !_this3.getSticky(), _cx)), style: { width: getWidth() } }, separator, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[_SidePage.styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[_SidePage.styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[_SidePage.styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _cx2[_SidePage.styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)), ref: _this3.refContent }, (0, _utils.isNonNullable)(_this3.props.gap) ? /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: _this3.isMobileLayout, gap: _this3.props.gap }, _this3.props.children) : _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 (0, _getDOMRect.getDOMRect)(this.content).height;
+  };return SidePageFooter;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.displayName = 'SidePageFooter', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class) || _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(this.theme), {\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":["SidePageFooterDataTids","root","SidePageFooter","responsiveLayout","rootNode","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","separator","setRootNode","height","getContentHeight","styles","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","gap","children","React","Component","__KONTUR_REACT_UI__","displayName","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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\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 SidePageFooterProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  /**\n   * Закрепляет футер снизу сайдпейджа\n   */\n  sticky?: boolean;\n  /**\n   * Задаёт отступ между элементами футера\n   */\n  gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n  fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n  root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n  public static displayName = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state: SidePageFooterState = {\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 getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    let separator: React.ReactNode = null;\n    if (isTheme2022(this.theme)) {\n      separator = (this.props.panel || this.state.fixed) && <ModalSeparator fixed={this.state.fixed} />;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageFooterDataTids.root}\n          style={{ height: this.getContentHeight() }}\n          className={styles.footerWrapper()}\n        >\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                {separator}\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {isNonNullable(this.props.gap) ? (\n                    <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n                      {this.props.children}\n                    </Gapped>\n                  ) : (\n                    this.props.children\n                  )}\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 = getDOMRect(wrapper);\n      const contentRect = getDOMRect(this.content);\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 getDOMRect(this.content).height;\n  }\n}\n"]}

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

@@ -1,11 +1,18 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface SidePageHeaderProps extends CommonProps {
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
+    sticky?: boolean;
+    hasSeparator?: boolean;
 }
 export interface SidePageHeaderState {
     isReadyToFix: boolean;
 }
+export declare const SidePageHeaderDataTids: {
+    readonly root: "SidePageHeader__root";
+    readonly close: "SidePage__close";
+};
 /**
  * Шапка сайдпейджа
  *
@@ -13,22 +20,30 @@ export interface SidePageHeaderState {
  */
 export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
     static __KONTUR_REACT_UI__: string;
-    state: {
-        isReadyToFix: boolean;
-    };
+    static displayName: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private isMobileLayout;
+    state: SidePageHeaderState;
+    static defaultProps: Partial<SidePageHeaderProps>;
     private theme;
     private wrapper;
+    private sticky;
     private lastRegularHeight;
+    private setRootNode;
+    private closeIcon;
     get regularHeight(): number;
     get fixedHeaderHeight(): number;
     componentDidMount: () => void;
     componentWillUnmount: () => void;
     update: () => void;
     render(): JSX.Element;
+    getStickyProp(): boolean;
     private renderMain;
     private renderHeader;
-    private renderCloseContent;
+    private renderHeader2022;
     private renderClose;
     private updateReadyToFix;
     private wrapperRef;
+    private stickyRef;
 }

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,15 +1,21 @@
-"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").default;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 _globalObject = require("@skbkontur/global-object");
 
 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 _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 _SidePageCloseButton = require("./SidePageCloseButton");var _class, _class2, _temp;
 
 
 
@@ -19,22 +25,44 @@ var _SidePageContext = require("./SidePageContext");
 
 
 
-/**
- * Шапка сайдпейджа
- *
- * @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.
 
 
-    theme = void 0;_this.
+
+
+
+
+
     wrapper = null;_this.
+    sticky = null;_this.
     lastRegularHeight = 0;_this.
 
+    closeIcon = /*#__PURE__*/_react.default.createElement(_SidePageCloseButton.SidePageCloseButton, null);_this.
+
 
 
 
@@ -52,14 +80,19 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
     componentDidMount = function () {
-      window.addEventListener('scroll', _this.update, true);
+      _globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.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);
+      _globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.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.
 
@@ -85,57 +118,93 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
-    renderHeader = function (fixed) {var _cn, _cn2;if (fixed === void 0) {fixed = false;}
-      return /*#__PURE__*/(
-        _react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.header(_this.theme), (_cn = {}, _cn[_SidePage.jsStyles.headerFixed(_this.theme)] = fixed, _cn)) },
-        _this.renderClose(), /*#__PURE__*/
-        _react.default.createElement("div", { className: (0, _classnames.default)(_SidePage.jsStyles.title(_this.theme), (_cn2 = {}, _cn2[_SidePage.jsStyles.titleFixed()] = fixed, _cn2)) },
-        (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, _cn4;var requestClose = _ref.requestClose;return /*#__PURE__*/(
-            _react.default.createElement("a", {
-              className: (0, _classnames.default)(_SidePage.jsStyles.close(_this.theme), (_cn3 = {}, _cn3[
-              _SidePage.jsStyles.fixed(_this.theme)] = fixed, _cn3)),
 
-              onClick: requestClose,
-              "data-tid": "SidePage__close" }, /*#__PURE__*/
 
-            _react.default.createElement("span", {
-              className: (0, _classnames.default)(_SidePage.jsStyles.closeIcon(_this.theme), (_cn4 = {}, _cn4[
-              _SidePage.jsStyles.fixed(_this.theme)] = fixed, _cn4)) }, /*#__PURE__*/
 
 
-            _react.default.createElement(_CrossIcon.CrossIcon, null))));}));};_this.
 
 
 
 
 
 
-    renderClose = function () {
-      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
 
+
+
+
+
+
+
+
+
+
+    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.
+
+    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 })));
+
+
+    };_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.renderCloseContent));
+        _this.closeIcon)));
+
+
 
 
     };_this.
 
     updateReadyToFix = function () {
       if (_this.wrapper) {
-        var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
+        var wrapperScrolledUp = (0, _getDOMRect.getDOMRect)(_this.wrapper).top;
         var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
-        _this.setState(function (state) {return state.isReadyToFix !== isReadyToFix ? { isReadyToFix: isReadyToFix } : state;});
+        _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;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component);exports.SidePageHeader = SidePageHeader;SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+    };_this.
+
+    stickyRef = function (el) {
+      _this.sticky = 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.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.displayName = '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":["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","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","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\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 get fixedHeaderHeight(): number {\r\n    const { theme } = this;\r\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\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(this.theme), { [jsStyles.headerFixed(this.theme)]: fixed })}>\r\n        {this.renderClose()}\r\n        <div className={cn(jsStyles.title(this.theme), { [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(this.theme)]: fixed,\r\n          })}\r\n          onClick={requestClose}\r\n          data-tid=\"SidePage__close\"\r\n        >\r\n          <span\r\n            className={cn(jsStyles.closeIcon(this.theme), {\r\n              [jsStyles.fixed(this.theme)]: fixed,\r\n            })}\r\n          >\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    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\r\n\r\n    return (\r\n      <Sticky side=\"top\" offset={stickyOffset}>\r\n        {this.renderCloseContent}\r\n      </Sticky>\r\n    );\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 <= this.fixedHeaderHeight;\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","wrapper","sticky","lastRegularHeight","closeIcon","componentDidMount","globalObject","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","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Sticky } from '../Sticky';\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 { 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';\nimport { SidePageCloseButton } from './SidePageCloseButton';\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}\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  public static displayName = '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  };\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  private closeIcon = (<SidePageCloseButton />);\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    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.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 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"]}

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/SidePage/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { SidePageLocale } from './types';
+export * from './types';
+export declare const SidePageLocaleHelper: LocaleHelper<SidePageLocale>;

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

@@ -0,0 +1,11 @@
+"use strict";exports.__esModule = true;var _exportNames = { SidePageLocaleHelper: true };exports.SidePageLocaleHelper = void 0;var _LocaleHelper = require("../../../lib/locale/LocaleHelper");
+
+var _en = require("./locales/en");
+var _ru = require("./locales/ru");
+
+
+var _types = require("./types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});
+
+var SidePageLocaleHelper = new _LocaleHelper.LocaleHelper({
+  ru_RU: _ru.componentsLocales,
+  en_GB: _en.componentsLocales });exports.SidePageLocaleHelper = SidePageLocaleHelper;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["SidePageLocaleHelper","LocaleHelper","ru_RU","en_GB"],"mappings":"+HAAA;;AAEA;AACA;;;AAGA;;AAEO,IAAMA,oBAAoB,GAAG,IAAIC,0BAAJ,CAAiC;AACnEC,EAAAA,KAAK,EAALA,qBADmE;AAEnEC,EAAAA,KAAK,EAALA,qBAFmE,EAAjC,CAA7B,C","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { SidePageLocale } from './types';\n\nexport * from './types';\n\nexport const SidePageLocaleHelper = new LocaleHelper<SidePageLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/cjs/components/SidePage/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { SidePageLocale } from '../types';
+export declare const componentsLocales: SidePageLocale;

package/cjs/components/SidePage/locale/locales/en.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  closeButtonAriaLabel: 'Close modal window' };exports.componentsLocales = componentsLocales;

package/cjs/components/SidePage/locale/locales/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,oBAAoB,EAAE,oBADyB,EAA1C,C","sourcesContent":["import { SidePageLocale } from '../types';\n\nexport const componentsLocales: SidePageLocale = {\n  closeButtonAriaLabel: 'Close modal window',\n};\n"]}

package/cjs/components/SidePage/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { SidePageLocale } from '../types';
+export declare const componentsLocales: SidePageLocale;

package/cjs/components/SidePage/locale/locales/ru.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть модальное окно' };exports.componentsLocales = componentsLocales;

package/cjs/components/SidePage/locale/locales/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,oBAAoB,EAAE,wBADyB,EAA1C,C","sourcesContent":["import { SidePageLocale } from '../types';\n\nexport const componentsLocales: SidePageLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"]}

package/cjs/components/SidePage/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface SidePageLocale {
+    closeButtonAriaLabel?: string;
+}

package/cjs/components/SidePage/locale/types.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

package/cjs/components/SidePage/locale/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}