@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/components/SidePage/SidePageContainer/SidePageContainer.js

@@ -4,13 +4,13 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { rootNode } from "../../../lib/rootNode";
-import { styles } from "../SidePage.styles";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { SidePageContext } from "../SidePageContext";
+import { getStyles } from "../SidePage.styles";
 export var SidePageContainerDataTids = {
   root: 'SidePageContainer__root'
 };
@@ -32,17 +32,21 @@ export var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_tem
   _proto.render = function render() {
     var _this = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this.theme = theme;
+        return _this.renderMain();
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
     var _this2 = this;
 
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-      var _cx;
+      var _this2$emotion$cx;
 
       var hasHeader = _ref.hasHeader,
           hasFooter = _ref.hasFooter,
@@ -51,10 +55,10 @@ export var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_tem
         rootNodeRef: _this2.setRootNode
       }, _this2.props), /*#__PURE__*/React.createElement("div", {
         "data-tid": SidePageContainerDataTids.root,
-        className: cx((_cx = {}, _cx[styles.container(_this2.theme)] = true, _cx[styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _cx[styles.containerWithoutFooter(_this2.theme)] = !hasFooter, _cx[styles.containerWithPanel(_this2.theme)] = hasPanel, _cx[styles.mobileContainer(_this2.theme)] = _this2.isMobileLayout, _cx[styles.mobileContainerWithoutHeader(_this2.theme)] = _this2.isMobileLayout && !hasHeader, _cx))
+        className: _this2.emotion.cx((_this2$emotion$cx = {}, _this2$emotion$cx[styles.container(_this2.theme)] = true, _this2$emotion$cx[styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _this2$emotion$cx[styles.containerWithoutFooter(_this2.theme)] = !hasFooter, _this2$emotion$cx[styles.containerWithPanel(_this2.theme)] = hasPanel, _this2$emotion$cx[styles.mobileContainer(_this2.theme)] = _this2.isMobileLayout, _this2$emotion$cx[styles.mobileContainerWithoutHeader(_this2.theme)] = _this2.isMobileLayout && !hasHeader, _this2$emotion$cx))
       }, _this2.props.children));
     });
   };
 
   return SidePageContainer;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageContainer', _temp)) || _class) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageContainer', _class2.displayName = 'SidePageContainer', _temp)) || _class) || _class;

package/components/SidePage/SidePageContainer/SidePageContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","styles","SidePageContext","SidePageContainerDataTids","root","SidePageContainer","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;AAIA,OAAO,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,iBAAb,GAFCN,gBAED,UADCC,QACD;;;;;;;AAOSM,EAAAA,MAPT,GAOE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAhBH;;AAkBSA,EAAAA,UAlBT,GAkBE,sBAAoB;AAClB;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUV,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAEN,EAAE;AACVG,YAAAA,MAAM,CAACa,SAAP,CAAiB,MAAI,CAACP,KAAtB,CADU,IACqB,IADrB;AAEVN,YAAAA,MAAM,CAACc,sBAAP,CAA8B,MAAI,CAACR,KAAnC,CAFU,IAEkC,CAACE,SAFnC;AAGVR,YAAAA,MAAM,CAACe,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAHU,IAGkC,CAACG,SAHnC;AAIVT,YAAAA,MAAM,CAACgB,kBAAP,CAA0B,MAAI,CAACV,KAA/B,CAJU,IAI8BI,QAJ9B;AAKVV,YAAAA,MAAM,CAACiB,eAAP,CAAuB,MAAI,CAACX,KAA5B,CALU,IAK2B,MAAI,CAACY,cALhC;AAMVlB,YAAAA,MAAM,CAACmB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwC,MAAI,CAACY,cAAL,IAAuB,CAACV,SANhE,OAFf;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWQ,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,GAxCH,4BAAuC1B,KAAK,CAAC2B,SAA7C,WACgBC,mBADhB,GACsC,mBADtC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","CommonWrapper","EmotionConsumer","responsiveLayout","rootNode","ThemeConsumer","SidePageContext","getStyles","SidePageContainerDataTids","root","SidePageContainer","render","emotion","theme","renderMain","styles","hasHeader","hasFooter","hasPanel","setRootNode","props","cx","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,aAAT,QAA8B,gCAA9B;;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,SAAT,QAA0B,mBAA1B;;;;AAIA,OAAO,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,iBAAb,GAFCP,gBAED,UADCC,QACD;;;;;;;;;AASSO,EAAAA,MATT,GASE,kBAAgB;AACd;AACE,0BAAC,eAAD;AACG,gBAACC,OAAD,EAAa;AACZ,QAAA,KAAI,CAACA,OAAL,GAAeA,OAAf;AACA;AACE,8BAAC,aAAD;AACG,oBAACC,KAAD,EAAW;AACV,YAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,mBAAO,KAAI,CAACC,UAAL,EAAP;AACD,WAJH,CADF;;;AAQD,OAXH,CADF;;;AAeD,GAzBH;;AA2BSA,EAAAA,UA3BT,GA2BE,sBAAoB;AAClB,QAAMC,MAAM,GAAGR,SAAS,CAAC,KAAKK,OAAN,CAAxB;;AAEA;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,iDAAGI,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUZ,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAE,MAAI,CAACG,OAAL,CAAaS,EAAb;AACRN,YAAAA,MAAM,CAACO,SAAP,CAAiB,MAAI,CAACT,KAAtB,CADQ,IACuB,IADvB;AAERE,YAAAA,MAAM,CAACQ,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAFQ,IAEoC,CAACG,SAFrC;AAGRD,YAAAA,MAAM,CAACS,sBAAP,CAA8B,MAAI,CAACX,KAAnC,CAHQ,IAGoC,CAACI,SAHrC;AAIRF,YAAAA,MAAM,CAACU,kBAAP,CAA0B,MAAI,CAACZ,KAA/B,CAJQ,IAIgCK,QAJhC;AAKRH,YAAAA,MAAM,CAACW,eAAP,CAAuB,MAAI,CAACb,KAA5B,CALQ,IAK6B,MAAI,CAACc,cALlC;AAMRZ,YAAAA,MAAM,CAACa,4BAAP,CAAoC,MAAI,CAACf,KAAzC,CANQ,IAM0C,MAAI,CAACc,cAAL,IAAuB,CAACX,SANlE,qBAFb;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWS,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,GAnDH,4BAAuC7B,KAAK,CAAC8B,SAA7C,WACgBC,mBADhB,GACsC,mBADtC,UAEgBC,WAFhB,GAE8B,mBAF9B","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext } from './SidePageContext';\nimport { getStyles } from './SidePage.styles';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n  public static displayName = 'SidePageContainer';\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={this.emotion.cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageContainer.d.ts

@@ -11,7 +11,9 @@ export declare const SidePageContainerDataTids: {
  */
 export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private theme;
+    private emotion;
     private isMobileLayout;
     private setRootNode;
     render(): JSX.Element;

package/components/SidePage/SidePageFooter/SidePageFooter.js

@@ -6,14 +6,18 @@ var _class, _class2, _temp;
 
 import React from 'react';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
-import { styles } from "../SidePage.styles";
+import { Gapped } from "../../Gapped";
+import { isNonNullable } from "../../../lib/utils";
+import { ModalSeparator } from "../../Modal/ModalSeparator";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { SidePageContext } from "../SidePageContext";
+import { getStyles } from "../SidePage.styles";
 export var SidePageFooterDataTids = {
   root: 'SidePageFooter__root'
 };
@@ -113,15 +117,27 @@ export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp =
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
+    var separator = null;
+
+    if (isTheme2022(this.theme)) {
+      separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
+        fixed: this.state.fixed
+      });
+    }
+
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -131,18 +147,21 @@ export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp =
       },
       className: styles.footerWrapper()
     }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-      var _cx, _cx2;
+      var _this3$emotion$cx, _this3$emotion$cx2;
 
       var getWidth = _ref.getWidth;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.footer(_this3.theme), (_cx = {}, _cx[styles.positionStatic()] = !_this3.getSticky(), _cx)),
+        className: _this3.emotion.cx(styles.footer(_this3.theme), (_this3$emotion$cx = {}, _this3$emotion$cx[styles.positionStatic()] = !_this3.getSticky(), _this3$emotion$cx)),
         style: {
           width: getWidth()
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _cx2[styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)),
+      }, separator, /*#__PURE__*/React.createElement("div", {
+        className: _this3.emotion.cx(styles.footerContent(_this3.theme), (_this3$emotion$cx2 = {}, _this3$emotion$cx2[styles.footerFixed(_this3.theme)] = _this3.state.fixed, _this3$emotion$cx2[styles.panel(_this3.theme)] = !!_this3.props.panel, _this3$emotion$cx2[styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _this3$emotion$cx2[styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _this3$emotion$cx2)),
         ref: _this3.refContent
-      }, _this3.props.children));
+      }, isNonNullable(_this3.props.gap) ? /*#__PURE__*/React.createElement(Gapped, {
+        vertical: _this3.isMobileLayout,
+        gap: _this3.props.gap
+      }, _this3.props.children) : _this3.props.children));
     })));
   };
 
@@ -155,4 +174,4 @@ export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp =
   };
 
   return SidePageFooter;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.contextType = SidePageContext, _temp)) || _class) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.displayName = 'SidePageFooter', _class2.contextType = SidePageContext, _temp)) || _class) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","responsiveLayout","getRootNode","rootNode","getDOMRect","styles","SidePageContext","SidePageFooterDataTids","root","SidePageFooter","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","setRootNode","height","getContentHeight","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","children","Component","__KONTUR_REACT_UI__","contextType"],"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';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n}\n\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> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private 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    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                <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                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = 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"]}
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","CommonWrapper","EmotionConsumer","responsiveLayout","getRootNode","rootNode","getDOMRect","Gapped","isNonNullable","ModalSeparator","isTheme2022","ThemeConsumer","SidePageContext","getStyles","SidePageFooterDataTids","root","SidePageFooter","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","emotion","theme","renderMain","separator","styles","setRootNode","height","getContentHeight","footerWrapper","getWidth","cx","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","gap","children","Component","__KONTUR_REACT_UI__","displayName","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { getStyles } from './SidePage.styles';\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 emotion!: Emotion;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\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    const styles = getStyles(this.emotion);\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={this.emotion.cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                {separator}\n                <div\n                  className={this.emotion.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/components/SidePage/SidePageFooter.d.ts

@@ -1,13 +1,24 @@
 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";
@@ -17,15 +28,15 @@ export declare const SidePageFooterDataTids: {
  *
  * @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 displayName: string;
     static contextType: React.Context<SidePageContextType>;
     context: SidePageContextType;
     private isMobileLayout;
-    state: {
-        fixed: boolean;
-    };
+    state: SidePageFooterState;
     private theme;
+    private emotion;
     private content;
     private layoutSub;
     private setRootNode;
@@ -40,3 +51,4 @@ export declare class SidePageFooter extends React.Component<SidePageFooterProps>
     private setProperStyles;
     private getContentHeight;
 }
+export {};

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -6,18 +6,20 @@ 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 { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
-import { styles } from "../SidePage.styles";
+import { ModalSeparator } from "../../Modal/ModalSeparator";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { SidePageContext } from "../SidePageContext";
+import { SidePageCloseButton } from "../SidePageCloseButton";
+import { getStyles } from "../SidePage.styles";
 export var SidePageHeaderDataTids = {
   root: 'SidePageHeader__root',
   close: 'SidePage__close'
@@ -41,22 +43,22 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.context = _this.context;
     _this.state = {
-      isReadyToFix: false,
-      focusedByTab: false
+      isReadyToFix: false
     };
     _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);
@@ -71,47 +73,44 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
     };
 
     _this.renderHeader = function (fixed) {
-      var _cx, _cx2;
+      var _this$emotion$cx, _this$emotion$cx2;
 
       if (fixed === void 0) {
         fixed = false;
       }
 
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx[styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx))
+        className: _this.emotion.cx(styles.header(_this.theme), (_this$emotion$cx = {}, _this$emotion$cx[styles.headerFixed(_this.theme)] = fixed, _this$emotion$cx[styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _this$emotion$cx))
       }, _this.renderClose(fixed), /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[styles.titleFixed()] = fixed, _cx2))
+        className: _this.emotion.cx(styles.title(_this.theme), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _this$emotion$cx2[styles.titleFixed()] = fixed, _this$emotion$cx2))
       }, 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 _this$emotion$cx3;
 
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      var styles = getStyles(_this.emotion);
       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))
+        className: _this.emotion.cx(styles.wrapperClose(_this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _this$emotion$cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _this$emotion$cx3))
       }, _this.isMobileLayout ? _this.closeIcon : /*#__PURE__*/React.createElement(Sticky, {
         side: "top",
         offset: stickyOffset
       }, _this.closeIcon));
     };
 
-    _this.closeIcon = function () {
-      return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-        var _cx4;
-
-        var requestClose = _ref.requestClose;
-        return /*#__PURE__*/React.createElement("button", {
-          className: cx(styles.close(_this.theme), (_cx4 = {}, _cx4[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4)),
-          onFocus: _this.handleFocus,
-          onBlur: _this.handleBlur,
-          onClick: requestClose,
-          "data-tid": SidePageHeaderDataTids.close,
-          tabIndex: 0
-        }, /*#__PURE__*/React.createElement(CrossIcon, null));
-      });
-    };
-
     _this.updateReadyToFix = function () {
       if (_this.wrapper) {
         var wrapperScrolledUp = getDOMRect(_this.wrapper).top;
@@ -133,22 +132,6 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
       _this.sticky = el;
     };
 
-    _this.handleFocus = function () {
-      requestAnimationFrame(function () {
-        if (keyListener.isTabPressed) {
-          _this.setState({
-            focusedByTab: true
-          });
-        }
-      });
-    };
-
-    _this.handleBlur = function () {
-      _this.setState({
-        focusedByTab: false
-      });
-    };
-
     return _this;
   }
 
@@ -157,9 +140,12 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
@@ -179,6 +165,8 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
     var isReadyToFix = this.state.isReadyToFix;
     var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;
     var isStickyMobile = this.isMobileLayout && this.getStickyProp();
+    var header = isTheme2022(this.theme) ? this.renderHeader2022 : this.renderHeader;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -188,7 +176,7 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
     }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
       ref: this.stickyRef,
       side: "top"
-    }, this.renderHeader) : this.renderHeader()));
+    }, header) : header()));
   };
 
   _createClass(SidePageHeader, [{
@@ -215,4 +203,6 @@ export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp =
   }]);
 
   return SidePageHeader;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = SidePageContext, _temp)) || _class) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.displayName = '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","rootNode","getDOMRect","styles","SidePageContext","SidePageHeaderDataTids","root","close","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","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/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\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\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  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    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              {this.renderHeader}\n            </Sticky>\n          ) : (\n            this.renderHeader()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div\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    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"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","globalObject","Sticky","isFunction","CommonWrapper","EmotionConsumer","responsiveLayout","rootNode","getDOMRect","ModalSeparator","isTheme2022","ThemeConsumer","SidePageContext","SidePageCloseButton","getStyles","SidePageHeaderDataTids","root","close","SidePageHeader","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","closeIcon","componentDidMount","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","emotion","cx","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__","displayName","contextType","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Sticky } from '../Sticky';\nimport { isFunction } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\nimport { getStyles } from './SidePage.styles';\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 emotion!: Emotion;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\n\n    return (\n      <div\n        className={this.emotion.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={this.emotion.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    const styles = getStyles(this.emotion);\n\n    return (\n      <div\n        className={this.emotion.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,13 +1,13 @@
 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";
@@ -20,15 +20,19 @@ export declare const SidePageHeaderDataTids: {
  */
 export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static contextType: React.Context<SidePageContextType>;
     context: SidePageContextType;
     private isMobileLayout;
     state: SidePageHeaderState;
+    static defaultProps: Partial<SidePageHeaderProps>;
     private theme;
+    private emotion;
     private wrapper;
     private sticky;
     private lastRegularHeight;
     private setRootNode;
+    private closeIcon;
     get regularHeight(): number;
     get fixedHeaderHeight(): number;
     componentDidMount: () => void;
@@ -38,11 +42,9 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     getStickyProp(): boolean;
     private renderMain;
     private renderHeader;
+    private renderHeader2022;
     private renderClose;
-    private closeIcon;
     private updateReadyToFix;
     private wrapperRef;
     private stickyRef;
-    private handleFocus;
-    private handleBlur;
 }

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"]}