@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba583fb2

package/components/SidePage/SidePageFooter.d.ts

@@ -1,31 +1,43 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { GappedProps } from '../Gapped';
 import { SidePageContextType } from './SidePageContext';
-export interface SidePageFooterProps extends CommonProps {
+export interface SidePageFooterProps extends Omit<CommonProps, 'children'> {
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
     /**
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    /**
+     * Закрепляет футер снизу сайдпейджа
+     */
     sticky?: boolean;
+    /**
+     * Задаёт отступ между элементами футера
+     */
+    gap?: GappedProps['gap'];
+}
+interface SidePageFooterState {
+    fixed: boolean;
 }
+export declare const SidePageFooterDataTids: {
+    readonly root: "SidePageFooter__root";
+};
 /**
  * Футер сайдпейджа.
  *
  * @visibleName SidePage.Footer
  */
-export declare class SidePageFooter extends React.Component<SidePageFooterProps> {
+export declare class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {
     static __KONTUR_REACT_UI__: string;
     static contextType: React.Context<SidePageContextType>;
     context: SidePageContextType;
     private isMobileLayout;
-    state: {
-        fixed: boolean;
-    };
+    state: SidePageFooterState;
     private theme;
     private content;
-    private wrapper;
     private layoutSub;
+    private setRootNode;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<SidePageFooterProps>): void;
     componentWillUnmount(): void;
@@ -34,7 +46,7 @@ export declare class SidePageFooter extends React.Component<SidePageFooterProps>
     update: () => void;
     private renderMain;
     private refContent;
-    private refWrapper;
     private setProperStyles;
     private getContentHeight;
 }
+export {};

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -1,27 +1,36 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _class, _class2, _temp;
 
 import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
 import { Sticky } from "../../Sticky";
-import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { isFunction } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { keyListener } from "../../../lib/events/keyListener";
-import { responsiveLayout } from "../../ResponsiveLayout";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { ModalSeparator } from "../../Modal/ModalSeparator";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-export
+import { SidePageCloseButton } from "../SidePageCloseButton";
+export var SidePageHeaderDataTids = {
+  root: 'SidePageHeader__root',
+  close: 'SidePage__close'
+};
 /**
-* Шапка сайдпейджа
-*
-* @visibleName SidePage.Header
-*/
-var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
+ */
+
+export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageHeader, _React$Component);
 
   function SidePageHeader() {
@@ -33,26 +42,33 @@ var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/f
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.context = _this.context;
-    _this.isMobileLayout = void 0;
     _this.state = {
-      isReadyToFix: false,
-      focusedByTab: false
+      isReadyToFix: false
     };
-    _this.theme = void 0;
     _this.wrapper = null;
+    _this.sticky = null;
     _this.lastRegularHeight = 0;
+    _this.closeIcon = /*#__PURE__*/React.createElement(SidePageCloseButton, null);
 
     _this.componentDidMount = function () {
-      window.addEventListener('scroll', _this.update, true);
+      globalObject.addEventListener == null ? void 0 : globalObject.addEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
+
+      _this.context.headerRef(_assertThisInitialized(_this));
     };
 
     _this.componentWillUnmount = function () {
-      window.removeEventListener('scroll', _this.update, true);
+      globalObject.removeEventListener == null ? void 0 : globalObject.removeEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
+
+      _this.context.headerRef(null);
     };
 
     _this.update = function () {
+      var _this$sticky;
+
+      (_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
+
       _this.updateReadyToFix();
     };
 
@@ -70,40 +86,32 @@ var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/f
       }, 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.createElement("div", null, _this.renderHeader(fixed), isDisplayed && /*#__PURE__*/React.createElement(ModalSeparator, {
+        fixed: fixed
+      }));
+    };
+
     _this.renderClose = function (fixed) {
       var _cx3;
 
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
       return /*#__PURE__*/React.createElement("div", {
         className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3))
-      }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-        var _cx4;
-
-        var requestClose = _ref.requestClose;
-        var button = /*#__PURE__*/React.createElement("button", {
-          className: cx(styles.close(_this.theme), (_cx4 = {}, _cx4[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4[styles.mobileClose(_this.theme)] = _this.isMobileLayout, _cx4)),
-          onFocus: _this.handleFocus,
-          onBlur: _this.handleBlur,
-          onClick: requestClose,
-          "data-tid": "SidePage__close",
-          tabIndex: 0
-        }, /*#__PURE__*/React.createElement(CrossIcon, null));
-
-        if (_this.isMobileLayout) {
-          return button;
-        }
-
-        return /*#__PURE__*/React.createElement(Sticky, {
-          side: "top",
-          offset: stickyOffset
-        }, button);
-      }));
+      }, _this.isMobileLayout ? _this.closeIcon : /*#__PURE__*/React.createElement(Sticky, {
+        side: "top",
+        offset: stickyOffset
+      }, _this.closeIcon));
     };
 
     _this.updateReadyToFix = function () {
       if (_this.wrapper) {
-        var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
-
+        var wrapperScrolledUp = getDOMRect(_this.wrapper).top;
         var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
 
         _this.setState(function (state) {
@@ -118,20 +126,8 @@ var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/f
       _this.wrapper = el;
     };
 
-    _this.handleFocus = function () {
-      requestAnimationFrame(function () {
-        if (keyListener.isTabPressed) {
-          _this.setState({
-            focusedByTab: true
-          });
-        }
-      });
-    };
-
-    _this.handleBlur = function () {
-      _this.setState({
-        focusedByTab: false
-      });
+    _this.stickyRef = function (el) {
+      _this.sticky = el;
     };
 
     return _this;
@@ -164,12 +160,17 @@ var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/f
     var isReadyToFix = this.state.isReadyToFix;
     var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;
     var isStickyMobile = this.isMobileLayout && this.getStickyProp();
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+    var header = isTheme2022(this.theme) ? this.renderHeader2022 : this.renderHeader;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": SidePageHeaderDataTids.root,
       ref: this.wrapperRef,
       className: styles.headerWrapper()
     }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
+      ref: this.stickyRef,
       side: "top"
-    }, this.renderHeader) : this.renderHeader()));
+    }, header) : header()));
   };
 
   _createClass(SidePageHeader, [{
@@ -182,7 +183,7 @@ var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/f
       }
 
       if (!isReadyToFix) {
-        this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;
+        this.lastRegularHeight = getDOMRect(this.wrapper).height;
       }
 
       return this.lastRegularHeight;
@@ -196,4 +197,6 @@ var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/f
   }]);
 
   return SidePageHeader;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = SidePageContext, _temp)) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = SidePageContext, _class2.defaultProps = {
+  hasSeparator: false
+}, _temp)) || _class) || _class;

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

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

@@ -1,14 +1,18 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { SidePageContextType } from './SidePageContext';
-export interface SidePageHeaderProps extends CommonProps {
+export interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
     sticky?: boolean;
+    hasSeparator?: boolean;
 }
 export interface SidePageHeaderState {
     isReadyToFix: boolean;
-    focusedByTab: boolean;
 }
+export declare const SidePageHeaderDataTids: {
+    readonly root: "SidePageHeader__root";
+    readonly close: "SidePage__close";
+};
 /**
  * Шапка сайдпейджа
  *
@@ -20,9 +24,13 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     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;
@@ -32,9 +40,9 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     getStickyProp(): boolean;
     private renderMain;
     private renderHeader;
+    private renderHeader2022;
     private renderClose;
     private updateReadyToFix;
     private wrapperRef;
-    private handleFocus;
-    private handleBlur;
+    private stickyRef;
 }

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

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var SidePageLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","SidePageLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,oBAAoB,GAAG,IAAIJ,YAAJ,CAAiC;AACnEG,EAAAA,KAAK,EAALA,KADmE;AAEnED,EAAAA,KAAK,EAALA,KAFmE,EAAjC,CAA7B","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/components/SidePage/locale/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/SidePage/locale/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/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/components/SidePage/locale/locales/en/en.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Close modal window'
+};

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

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

package/components/SidePage/locale/locales/en/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/SidePage/locale/locales/en.js",
+  "module": "en",
+  "types": "../en.d.ts",
+  "sideEffects": false
+}

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

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

package/components/SidePage/locale/locales/ru/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/SidePage/locale/locales/ru.js",
+  "module": "ru",
+  "types": "../ru.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть модальное окно'
+};

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

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

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

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

package/components/SidePage/locale/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/locale/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/locale/types/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/SidePage/locale/types.js",
+  "module": "types",
+  "types": "../types.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/components/SingleToast/SingleToast/SingleToast.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Toast } from "../../Toast/Toast";
+/**
+ * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
+ */
+
+export var SingleToast = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(SingleToast, _React$Component);
+
+  function SingleToast() {
+    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.render = function () {
+      return /*#__PURE__*/React.createElement(Toast, _extends({
+        ref: SingleToast.ref
+      }, _this.props));
+    };
+
+    return _this;
+  }
+
+  return SingleToast;
+}(React.Component);
+SingleToast.ref = /*#__PURE__*/React.createRef();
+
+SingleToast.push = function () {
+  var _SingleToast$ref$curr;
+
+  SingleToast.close();
+
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  (_SingleToast$ref$curr = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);
+};
+
+SingleToast.close = function () {
+  ReactDOM.flushSync(function () {
+    var _SingleToast$ref$curr2;
+
+    return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();
+  });
+};

package/components/SingleToast/SingleToast/SingleToast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SingleToast.tsx"],"names":["React","ReactDOM","Toast","SingleToast","render","ref","props","Component","createRef","push","close","args","current","flushSync"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,KAAT,QAAkC,gBAAlC;;AAEA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;;;;AASEC,IAAAA,MATF,GASW,YAAM;AACb,0BAAO,oBAAC,KAAD,aAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,KAXH,oCAAiCN,KAAK,CAACO,SAAvC,EAAaJ,W,CACGE,G,gBAAML,KAAK,CAACQ,SAAN,E,CADTL,W,CAEGM,I,GAA0B,YAAa,2BACnDN,WAAW,CAACO,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAR,WAAW,CAACE,GAAZ,CAAgBO,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CALUR,W,CAMGO,K,GAA4B,YAAM,CAC9CT,QAAQ,CAACY,SAAT,CAAmB,yEAAMV,WAAW,CAACE,GAAZ,CAAgBO,OAAtB,qBAAM,uBAAyBF,KAAzB,EAAN,EAAnB,EACD,C","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n  public static ref = React.createRef<Toast>();\n  public static push: typeof Toast.push = (...args) => {\n    SingleToast.close();\n    SingleToast.ref.current?.push(...args);\n  };\n  public static close: typeof Toast.close = () => {\n    ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"]}

package/components/SingleToast/SingleToast/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SingleToast/SingleToast.js",
+  "module": "SingleToast",
+  "types": "../SingleToast.d.ts",
+  "sideEffects": false
+}

package/components/SingleToast/SingleToast.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Toast, ToastProps } from '../Toast/Toast';
+/**
+ * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
+ */
+export declare class SingleToast extends React.Component<ToastProps> {
+    static ref: React.RefObject<Toast>;
+    static push: typeof Toast.push;
+    static close: typeof Toast.close;
+    render: () => JSX.Element;
+}

package/components/SingleToast/SingleToast.md

@@ -0,0 +1,35 @@
+`<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
+
+_На внешний вид этого примера влияет следующий пример_
+
+```jsx harmony
+import { Button, SingleToast } from '@skbkontur/react-ui';
+
+<div>
+  <SingleToast />
+  <Button onClick={() => SingleToast.push('Статический тост')}>
+    Показать статический тост
+  </Button>
+</div>
+```
+
+`<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
+```jsx harmony
+import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
+
+const rand = () => "Пример жёлтого тоста № " + Math.round(Math.random() * 100).toString();
+
+const pushToast = () => {
+  SingleToast.push(rand(), {
+    label: "Cancel",
+    handler: () => SingleToast.push("Canceled")
+  });
+};
+
+<div>
+  <SingleToast theme={{ toastBg: '#f1c40f' }} />
+  <Button onClick={pushToast}>
+    Показать тост с жёлтым фоном
+  </Button>
+</div>
+```

package/components/SingleToast/index/index.js

@@ -0,0 +1 @@
+export * from "../SingleToast";

package/components/SingleToast/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './SingleToast';\n"]}

package/components/SingleToast/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SingleToast/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/SingleToast/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleToast';

package/components/SingleToast/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/SingleToast/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}