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

package/components/SidePage/SidePageContainer/SidePageContainer.js

@@ -1,28 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 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 { jsStyles } from "../SidePage.styles";
-/**
- * Контейнер с отступами
- *
- * @visibleName SidePage.Container
- */
-
-export var SidePageContainer = /*#__PURE__*/function (_React$Component) {
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../SidePage.styles";
+import { SidePageContext } from "../SidePageContext";
+export
+/**
+* Контейнер с отступами
+*
+* @visibleName SidePage.Container
+*/
+var SidePageContainer = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageContainer, _React$Component);
 
   function SidePageContainer() {
-    return _React$Component.apply(this, arguments) || this;
+    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.theme = void 0;
+    _this.setRootNode = void 0;
+    return _this;
   }
 
   var _proto = SidePageContainer.prototype;
 
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.bodyContainer()
-    }, this.props.children));
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
+    return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
+      var _cx;
+
+      var hasHeader = _ref.hasHeader,
+          hasFooter = _ref.hasFooter,
+          hasPanel = _ref.hasPanel;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx = {}, _cx[styles.container(_this3.theme)] = true, _cx[styles.containerWithoutHeader(_this3.theme)] = !hasHeader, _cx[styles.containerWithoutFooter(_this3.theme)] = !hasFooter, _cx[styles.containerWithPanel(_this3.theme)] = hasPanel, _cx))
+      }, _this3.props.children));
+    });
   };
 
   return SidePageContainer;
-}(React.Component);
-SidePageContainer.__KONTUR_REACT_UI__ = 'SidePageContainer';
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageContainer', _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","CommonWrapper","jsStyles","SidePageContainer","render","props","bodyContainer","children","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,QAAT,QAAyB,mBAAzB;;;;AAIA;AACA;AACA;AACA;AACA;AACA,WAAaC,iBAAb;;;AAGSC,EAAAA,MAHT,GAGE,kBAAgB;AACd;AACE,0BAAC,aAAD,EAAmB,KAAKC,KAAxB;AACE,mCAAK,SAAS,EAAEH,QAAQ,CAACI,aAAT,EAAhB,IAA2C,KAAKD,KAAL,CAAWE,QAAtD,CADF,CADF;;;AAKD,GATH,4BAAuCP,KAAK,CAACQ,SAA7C,EAAaL,iB,CACGM,mB,GAAsB,mB","sourcesContent":["import React from 'react';\r\n\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\n\r\nexport type SidePageContainerProps = CommonProps;\r\n\r\n/**\r\n * Контейнер с отступами\r\n *\r\n * @visibleName SidePage.Container\r\n */\r\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\r\n\r\n  public render() {\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div className={jsStyles.bodyContainer()}>{this.props.children}</div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","rootNode","styles","SidePageContext","SidePageContainer","theme","setRootNode","render","renderMain","hasHeader","hasFooter","hasPanel","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","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,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;;;;;;;AAUA,OANA;AACA;AACA;AACA;AACA,GAEA,IAAaC,iBAAb,GADCH,QACD,oXAGUI,KAHV,gBAIUC,WAJV;;AAMSC,EAAAA,MANT,GAME,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACF,KAAD,EAAW;AACV,QAAA,MAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,MAAI,CAACG,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAfH;;AAiBSA,EAAAA,UAjBT,GAiBE,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,CAACL,WAAjC,IAAkD,MAAI,CAACM,KAAvD;AACE;AACE,YAAA,SAAS,EAAEZ,EAAE;AACVE,YAAAA,MAAM,CAACW,SAAP,CAAiB,MAAI,CAACR,KAAtB,CADU,IACqB,IADrB;AAEVH,YAAAA,MAAM,CAACY,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAFU,IAEkC,CAACI,SAFnC;AAGVP,YAAAA,MAAM,CAACa,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAHU,IAGkC,CAACK,SAHnC;AAIVR,YAAAA,MAAM,CAACc,kBAAP,CAA0B,MAAI,CAACX,KAA/B,CAJU,IAI8BM,QAJ9B,OADf;;;AAQG,UAAA,MAAI,CAACC,KAAL,CAAWK,QARd,CADF,CADD,GADH,CADF;;;;;;AAkBD,GApCH,4BAAuCpB,KAAK,CAACqB,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 { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n  private theme!: Theme;\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              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              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageContainer.d.ts

@@ -8,5 +8,8 @@ export declare type SidePageContainerProps = CommonProps;
  */
 export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
     static __KONTUR_REACT_UI__: string;
+    private theme;
+    private setRootNode;
     render(): JSX.Element;
+    renderMain(): JSX.Element;
 }

package/components/SidePage/SidePageContext/SidePageContext.js

@@ -9,6 +9,9 @@ export var SidePageContext = /*#__PURE__*/React.createContext({
   updateLayout: function updateLayout() {
     return undefined;
   },
+  headerRef: function headerRef() {
+    return undefined;
+  },
   footerRef: function footerRef() {
     return undefined;
   }

package/components/SidePage/SidePageContext/SidePageContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContext.ts"],"names":["React","SidePageContext","createContext","requestClose","undefined","getWidth","updateLayout","footerRef","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;AAWA,OAAO,IAAMC,eAAe,gBAAGD,KAAK,CAACE,aAAN,CAAyC;AACtEC,EAAAA,YAAY,EAAE,gCAAMC,SAAN,EADwD;AAEtEC,EAAAA,QAAQ,EAAE,4BAAM,MAAN,EAF4D;AAGtEC,EAAAA,YAAY,EAAE,gCAAMF,SAAN,EAHwD;AAItEG,EAAAA,SAAS,EAAE,6BAAMH,SAAN,EAJ2D,EAAzC,CAAxB;;;AAOPH,eAAe,CAACO,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React from 'react';\r\n\r\nimport { SidePageFooter } from './SidePageFooter';\r\n\r\nexport interface SidePageContextType {\r\n  requestClose: () => void;\r\n  getWidth: () => number | string;\r\n  updateLayout: () => void;\r\n  footerRef: (ref: SidePageFooter | null) => void;\r\n}\r\n\r\nexport const SidePageContext = React.createContext<SidePageContextType>({\r\n  requestClose: () => undefined,\r\n  getWidth: () => 'auto',\r\n  updateLayout: () => undefined,\r\n  footerRef: () => undefined,\r\n});\r\n\r\nSidePageContext.displayName = 'SidePageContext';\r\n"]}
+{"version":3,"sources":["SidePageContext.ts"],"names":["React","SidePageContext","createContext","requestClose","undefined","getWidth","updateLayout","headerRef","footerRef","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;;;;;;;;;AAmBA,OAAO,IAAMC,eAAe,gBAAGD,KAAK,CAACE,aAAN,CAAyC;AACtEC,EAAAA,YAAY,EAAE,gCAAMC,SAAN,EADwD;AAEtEC,EAAAA,QAAQ,EAAE,4BAAM,MAAN,EAF4D;AAGtEC,EAAAA,YAAY,EAAE,gCAAMF,SAAN,EAHwD;AAItEG,EAAAA,SAAS,EAAE,6BAAMH,SAAN,EAJ2D;AAKtEI,EAAAA,SAAS,EAAE,6BAAMJ,SAAN,EAL2D,EAAzC,CAAxB;;;AAQPH,eAAe,CAACQ,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React from 'react';\n\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\n\nexport interface SidePageContextType {\n  requestClose: () => void;\n  getWidth: () => number | string;\n  updateLayout: () => void;\n  headerRef: (ref: SidePageHeader | null) => void;\n  footerRef: (ref: SidePageFooter | null) => void;\n  hasHeader?: boolean;\n  hasFooter?: boolean;\n  hasPanel?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n}\n\nexport const SidePageContext = React.createContext<SidePageContextType>({\n  requestClose: () => undefined,\n  getWidth: () => 'auto',\n  updateLayout: () => undefined,\n  headerRef: () => undefined,\n  footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\n"]}

package/components/SidePage/SidePageContext.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
 import { SidePageFooter } from './SidePageFooter';
+import { SidePageHeader } from './SidePageHeader';
 export interface SidePageContextType {
     requestClose: () => void;
     getWidth: () => number | string;
     updateLayout: () => void;
+    headerRef: (ref: SidePageHeader | null) => void;
     footerRef: (ref: SidePageFooter | null) => void;
+    hasHeader?: boolean;
+    hasFooter?: boolean;
+    hasPanel?: boolean;
+    setHasHeader?: (value?: boolean) => void;
+    setHasFooter?: (value?: boolean) => void;
+    setHasPanel?: (value?: boolean) => void;
 }
 export declare const SidePageContext: React.Context<SidePageContextType>;

package/components/SidePage/SidePageFooter/SidePageFooter.js

@@ -1,18 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 cn from 'classnames';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../SidePage.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
- * Футер сайдпейджа.
- *
- * @visibleName SidePage.Footer
- */
-
-export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
+export
+/**
+* Футер сайдпейджа.
+*
+* @visibleName SidePage.Footer
+*/
+var SidePageFooter = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageFooter, _React$Component);
 
   function SidePageFooter() {
@@ -29,8 +35,8 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
     };
     _this.theme = void 0;
     _this.content = null;
-    _this.wrapper = null;
     _this.layoutSub = null;
+    _this.setRootNode = void 0;
 
     _this.update = function () {
       _this.setProperStyles();
@@ -40,13 +46,11 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
       _this.content = node;
     };
 
-    _this.refWrapper = function (node) {
-      _this.wrapper = node;
-    };
-
     _this.setProperStyles = function () {
-      if (_this.wrapper && _this.content) {
-        var wrapperRect = _this.wrapper.getBoundingClientRect();
+      var wrapper = getRootNode(_assertThisInitialized(_this));
+
+      if (wrapper && _this.content) {
+        var wrapperRect = wrapper.getBoundingClientRect();
 
         var contentRect = _this.content.getBoundingClientRect();
 
@@ -64,17 +68,32 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
   var _proto = SidePageFooter.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
+    var _this$context$setHasF, _this$context, _this$context$setHasP, _this$context2;
+
     this.context.footerRef(this);
     this.update();
     this.layoutSub = LayoutEvents.addListener(this.update);
+    (_this$context$setHasF = (_this$context = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF.call(_this$context);
+    (_this$context$setHasP = (_this$context2 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP.call(_this$context2, this.props.panel);
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$context$setHasP2, _this$context3;
+
+    this.props.panel !== prevProps.panel && ((_this$context$setHasP2 = (_this$context3 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP2.call(_this$context3, this.props.panel));
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
+    var _this$context$setHasF2, _this$context4, _this$context$setHasP3, _this$context5;
+
     this.context.footerRef(null);
 
     if (this.layoutSub) {
       this.layoutSub.remove();
     }
+
+    (_this$context$setHasF2 = (_this$context4 = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF2.call(_this$context4, false);
+    (_this$context$setHasP3 = (_this$context5 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP3.call(_this$context5, false);
   };
 
   _proto.render = function render() {
@@ -89,22 +108,24 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
       style: {
         height: this.getContentHeight()
       },
-      ref: this.refWrapper
+      className: styles.footerWrapper()
     }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-      var _cn;
+      var _cx;
 
       var getWidth = _ref.getWidth;
       return /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.footer(),
+        className: styles.footer(),
         style: {
           width: getWidth()
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: cn(jsStyles.footerContent(), (_cn = {}, _cn[jsStyles.panel(_this3.theme)] = !!_this3.props.panel, _cn[jsStyles.footerFixed(_this3.theme)] = _this3.state.fixed, _cn)),
+        className: cx(styles.footerContent(_this3.theme), (_cx = {}, _cx[styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx[styles.panel(_this3.theme)] = !!_this3.props.panel, _cx)),
         ref: _this3.refContent
       }, _this3.props.children));
     })));
@@ -119,6 +140,4 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
   };
 
   return SidePageFooter;
-}(React.Component);
-SidePageFooter.__KONTUR_REACT_UI__ = 'SidePageFooter';
-SidePageFooter.contextType = SidePageContext;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.contextType = SidePageContext, _temp)) || _class;

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

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

package/components/SidePage/SidePageFooter.d.ts

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

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -1,26 +1,28 @@
+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 cn from 'classnames';
 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 { jsStyles } from "../SidePage.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-var REGULAR_HEADER_PADDING_TOP = 25;
-var FIXED_HEADER_PADDING_TOP = 13;
-var FONT_FAMILY_CORRECTION = 1;
-var CLOSE_ELEMENT_OFFSET = REGULAR_HEADER_PADDING_TOP - FIXED_HEADER_PADDING_TOP - FONT_FAMILY_CORRECTION;
-var FIXED_HEADER_HEIGHT = 50;
-/**
- * Шапка сайдпейджа
- *
- * @visibleName SidePage.Header
- */
-
-export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
+export
+/**
+* Шапка сайдпейджа
+*
+* @visibleName SidePage.Header
+*/
+var SidePageHeader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageHeader, _React$Component);
 
   function SidePageHeader() {
@@ -31,71 +33,89 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.context = _this.context;
     _this.state = {
-      isReadyToFix: false
+      isReadyToFix: false,
+      focusedByTab: false
     };
     _this.theme = void 0;
     _this.wrapper = null;
+    _this.sticky = null;
     _this.lastRegularHeight = 0;
+    _this.setRootNode = void 0;
 
     _this.componentDidMount = function () {
       window.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);
+      _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();
     };
 
     _this.renderHeader = function (fixed) {
-      var _cn, _cn2;
+      var _cx, _cx2;
 
       if (fixed === void 0) {
         fixed = false;
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: cn(jsStyles.header(), (_cn = {}, _cn[jsStyles.headerFixed(_this.theme)] = fixed, _cn))
-      }, _this.renderClose(), /*#__PURE__*/React.createElement("div", {
-        className: cn(jsStyles.title(), (_cn2 = {}, _cn2[jsStyles.titleFixed()] = fixed, _cn2))
+        className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx))
+      }, _this.renderClose(fixed), /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.titleFixed()] = fixed, _cx2))
       }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children));
     };
 
-    _this.renderCloseContent = function (fixed) {
+    _this.renderClose = function (fixed) {
+      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.wrapperClose(_this.theme), fixed && styles.fixed(_this.theme))
+      }, /*#__PURE__*/React.createElement(Sticky, {
+        side: "top",
+        offset: stickyOffset
+      }, _this.closeIcon));
+    };
+
+    _this.closeIcon = function () {
       return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-        var _cn3;
+        var _cx3;
 
         var requestClose = _ref.requestClose;
-        return /*#__PURE__*/React.createElement("a", {
-          className: cn(jsStyles.close(_this.theme), (_cn3 = {}, _cn3[jsStyles.fixed()] = fixed, _cn3)),
+        return /*#__PURE__*/React.createElement("button", {
+          className: cx(styles.close(_this.theme), (_cx3 = {}, _cx3[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx3)),
+          onFocus: _this.handleFocus,
+          onBlur: _this.handleBlur,
           onClick: requestClose,
-          "data-tid": "SidePage__close"
-        }, /*#__PURE__*/React.createElement("span", {
-          className: jsStyles.closeIcon()
-        }, /*#__PURE__*/React.createElement(CrossIcon, null)));
+          "data-tid": "SidePage__close",
+          tabIndex: 0
+        }, /*#__PURE__*/React.createElement(CrossIcon, null));
       });
     };
 
-    _this.renderClose = function () {
-      return /*#__PURE__*/React.createElement(Sticky, {
-        side: "top",
-        offset: CLOSE_ELEMENT_OFFSET
-      }, _this.renderCloseContent);
-    };
-
     _this.updateReadyToFix = function () {
       if (_this.wrapper) {
         var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
 
-        var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= FIXED_HEADER_HEIGHT;
+        var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
 
         _this.setState(function (state) {
-          return state.isReadyToFix !== isReadyToFix ? {
+          return state.isReadyToFix !== isReadyToFix ? _extends({}, state, {
             isReadyToFix: isReadyToFix
-          } : state;
+          }) : state;
         });
       }
     };
@@ -104,6 +124,26 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
       _this.wrapper = el;
     };
 
+    _this.stickyRef = function (el) {
+      _this.sticky = el;
+    };
+
+    _this.handleFocus = function () {
+      requestAnimationFrame(function () {
+        if (keyListener.isTabPressed) {
+          _this.setState({
+            focusedByTab: true
+          });
+        }
+      });
+    };
+
+    _this.handleBlur = function () {
+      _this.setState({
+        focusedByTab: false
+      });
+    };
+
     return _this;
   }
 
@@ -120,9 +160,13 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
 
   _proto.renderMain = function renderMain() {
     var isReadyToFix = this.state.isReadyToFix;
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      ref: this.wrapperRef
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      ref: this.wrapperRef,
+      className: styles.headerWrapper()
     }, isReadyToFix ? /*#__PURE__*/React.createElement(Sticky, {
+      ref: this.stickyRef,
       side: "top"
     }, this.renderHeader) : this.renderHeader()));
   };
@@ -142,8 +186,13 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
 
       return this.lastRegularHeight;
     }
+  }, {
+    key: "fixedHeaderHeight",
+    get: function get() {
+      var theme = this.theme;
+      return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;
+    }
   }]);
 
   return SidePageHeader;
-}(React.Component);
-SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = SidePageContext, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","cn","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","jsStyles","SidePageContext","REGULAR_HEADER_PADDING_TOP","FIXED_HEADER_PADDING_TOP","FONT_FAMILY_CORRECTION","CLOSE_ELEMENT_OFFSET","FIXED_HEADER_HEIGHT","SidePageHeader","state","isReadyToFix","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","setState","wrapperRef","el","render","renderMain","height","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext } from './SidePageContext';\r\n\r\nconst REGULAR_HEADER_PADDING_TOP = 25;\r\nconst FIXED_HEADER_PADDING_TOP = 13;\r\nconst FONT_FAMILY_CORRECTION = 1;\r\nconst CLOSE_ELEMENT_OFFSET = REGULAR_HEADER_PADDING_TOP - FIXED_HEADER_PADDING_TOP - FONT_FAMILY_CORRECTION;\r\nconst FIXED_HEADER_HEIGHT = 50;\r\n\r\nexport interface SidePageHeaderProps extends CommonProps {\r\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface SidePageHeaderState {\r\n  isReadyToFix: boolean;\r\n}\r\n\r\n/**\r\n * Шапка сайдпейджа\r\n *\r\n * @visibleName SidePage.Header\r\n */\r\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\r\n\r\n  public state = {\r\n    isReadyToFix: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private wrapper: HTMLElement | null = null;\r\n  private lastRegularHeight = 0;\r\n\r\n  public get regularHeight(): number {\r\n    const { isReadyToFix } = this.state;\r\n    if (!this.wrapper) {\r\n      return 0;\r\n    }\r\n    if (!isReadyToFix) {\r\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\r\n    }\r\n    return this.lastRegularHeight;\r\n  }\r\n\r\n  public componentDidMount = () => {\r\n    window.addEventListener('scroll', this.update, true);\r\n  };\r\n\r\n  public componentWillUnmount = () => {\r\n    window.removeEventListener('scroll', this.update, true);\r\n  };\r\n\r\n  public update = () => {\r\n    this.updateReadyToFix();\r\n  };\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { isReadyToFix } = this.state;\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div ref={this.wrapperRef}>\r\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderHeader = (fixed = false) => {\r\n    return (\r\n      <div className={cn(jsStyles.header(), { [jsStyles.headerFixed(this.theme)]: fixed })}>\r\n        {this.renderClose()}\r\n        <div className={cn(jsStyles.title(), { [jsStyles.titleFixed()]: fixed })}>\r\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  private renderCloseContent = (fixed: boolean) => (\r\n    <SidePageContext.Consumer>\r\n      {({ requestClose }) => (\r\n        <a\r\n          className={cn(jsStyles.close(this.theme), {\r\n            [jsStyles.fixed()]: fixed,\r\n          })}\r\n          onClick={requestClose}\r\n          data-tid=\"SidePage__close\"\r\n        >\r\n          <span className={jsStyles.closeIcon()}>\r\n            <CrossIcon />\r\n          </span>\r\n        </a>\r\n      )}\r\n    </SidePageContext.Consumer>\r\n  );\r\n\r\n  private renderClose = () => (\r\n    <Sticky side=\"top\" offset={CLOSE_ELEMENT_OFFSET}>\r\n      {this.renderCloseContent}\r\n    </Sticky>\r\n  );\r\n\r\n  private updateReadyToFix = () => {\r\n    if (this.wrapper) {\r\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\r\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= FIXED_HEADER_HEIGHT;\r\n      this.setState(state => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\r\n    }\r\n  };\r\n\r\n  private wrapperRef = (el: HTMLElement | null) => {\r\n    this.wrapper = el;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","rootNode","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","sticky","lastRegularHeight","setRootNode","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"mTAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;;;;;;;;;;;;AAiBA,OANA;AACA;AACA;AACA;AACA,GAEA,IAAaC,cAAb,GADCH,QACD,8WAISI,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,IAAAA,KANT,GAMiB;AACbC,MAAAA,YAAY,EAAE,KADD;AAEbC,MAAAA,YAAY,EAAE,KAFD,EANjB;;;AAWUC,IAAAA,KAXV;AAYUC,IAAAA,OAZV,GAYwC,IAZxC;AAaUC,IAAAA,MAbV,GAakC,IAblC;AAcUC,IAAAA,iBAdV,GAc8B,CAd9B;AAeUC,IAAAA,WAfV;;;;;;;;;;;;;;;;;;AAiCSC,IAAAA,iBAjCT,GAiC6B,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACA,YAAKZ,OAAL,CAAaa,YAAb,0BAAKb,OAAL,CAAaa,YAAb;AACA,YAAKb,OAAL,CAAac,SAAb;AACD,KArCH;;AAuCSC,IAAAA,oBAvCT,GAuCgC,YAAM;AAClCL,MAAAA,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqC,MAAKJ,MAA1C,EAAkD,IAAlD;AACA,YAAKZ,OAAL,CAAaa,YAAb,0BAAKb,OAAL,CAAaa,YAAb,CAA4B,KAA5B;AACA,YAAKb,OAAL,CAAac,SAAb,CAAuB,IAAvB;AACD,KA3CH;;AA6CSF,IAAAA,MA7CT,GA6CkB,YAAM;AACpB,4BAAKN,MAAL,kCAAaW,MAAb;AACA,YAAKC,gBAAL;AACD,KAhDH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EUC,IAAAA,YA9EV,GA8EyB,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE,qCAAK,SAAS,EAAE1B,EAAE,CAACG,MAAM,CAACwB,MAAP,CAAc,MAAKjB,KAAnB,CAAD,iBAA+BP,MAAM,CAACyB,WAAP,CAAmB,MAAKlB,KAAxB,CAA/B,IAAgEgB,KAAhE,OAAlB;AACG,cAAKG,WAAL,CAAiBH,KAAjB,CADH;AAEE,qCAAK,SAAS,EAAE1B,EAAE,CAACG,MAAM,CAAC2B,KAAP,CAAa,MAAKpB,KAAlB,CAAD,mBAA8BP,MAAM,CAAC4B,UAAP,EAA9B,IAAoDL,KAApD,QAAlB;AACG7B,QAAAA,UAAU,CAAC,MAAKmC,KAAL,CAAWC,QAAZ,CAAV,GAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBP,KAApB,CAAlC,GAA+D,MAAKM,KAAL,CAAWC,QAD7E,CAFF,CADF;;;;AAQD,KAvFH;;AAyFUJ,IAAAA,WAzFV,GAyFwB,UAACH,KAAD,EAAoB;AACxC,UAAMQ,YAAY,GAAGC,QAAQ,CAAC,MAAKzB,KAAL,CAAW0B,0BAAZ,CAA7B;;AAEA;AACE,qCAAK,SAAS,EAAEpC,EAAE,CAACG,MAAM,CAACkC,YAAP,CAAoB,MAAK3B,KAAzB,CAAD,EAAkCgB,KAAK,IAAIvB,MAAM,CAACuB,KAAP,CAAa,MAAKhB,KAAlB,CAA3C,CAAlB;AACE,4BAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAEwB,YAA3B;AACG,cAAKI,SADR,CADF,CADF;;;;AAOD,KAnGH;;AAqGUA,IAAAA,SArGV,GAqGsB;AAClB,4BAAC,eAAD,CAAiB,QAAjB;AACG,sCAAGC,YAAH,QAAGA,YAAH;AACC;AACE,cAAA,SAAS,EAAEvC,EAAE,CAACG,MAAM,CAACqC,KAAP,CAAa,MAAK9B,KAAlB,CAAD;AACVP,cAAAA,MAAM,CAACsC,UAAP,CAAkB,MAAK/B,KAAvB,CADU,IACsB,MAAKH,KAAL,CAAWE,YADjC,QADf;;AAIE,cAAA,OAAO,EAAE,MAAKiC,WAJhB;AAKE,cAAA,MAAM,EAAE,MAAKC,UALf;AAME,cAAA,OAAO,EAAEJ,YANX;AAOE,0BAAS,iBAPX;AAQE,cAAA,QAAQ,EAAE,CARZ;;AAUE,gCAAC,SAAD,OAVF,CADD,GADH,CADkB,GArGtB;;;;;;AAwHUf,IAAAA,gBAxHV,GAwH6B,YAAM;AAC/B,UAAI,MAAKb,OAAT,EAAkB;AAChB,YAAMiC,iBAAiB,GAAG,MAAKjC,OAAL,CAAakC,qBAAb,GAAqCC,GAA/D;AACA,YAAMtC,YAAY,GAAG,MAAKuC,aAAL,GAAqBH,iBAArB,IAA0C,MAAKI,iBAApE;AACA,cAAKC,QAAL,CAAc,UAAC1C,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,gBAA2CD,KAA3C,IAAkDC,YAAY,EAAZA,YAAlD,MAAmED,KAA/E,EAAd;AACD;AACF,KA9HH;;AAgIU2C,IAAAA,UAhIV,GAgIuB,UAACC,EAAD,EAA4B;AAC/C,YAAKxC,OAAL,GAAewC,EAAf;AACD,KAlIH;;AAoIUC,IAAAA,SApIV,GAoIsB,UAACD,EAAD,EAAuB;AACzC,YAAKvC,MAAL,GAAcuC,EAAd;AACD,KAtIH;;AAwIUT,IAAAA,WAxIV,GAwIwB,YAAM;AAC1BW,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIpD,WAAW,CAACqD,YAAhB,EAA8B;AAC5B,gBAAKL,QAAL,CAAc,EAAExC,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,KA9IH;;AAgJUkC,IAAAA,UAhJV,GAgJuB,YAAM;AACzB,YAAKM,QAAL,CAAc,EAAExC,YAAY,EAAE,KAAhB,EAAd;AACD,KAlJH,4DAkDS8C,MAlDT,GAkDE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAC7C,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAAC8C,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CA3DH,QA6DUA,UA7DV,GA6DE,sBAAqB,KACXhD,YADW,GACM,KAAKD,KADX,CACXC,YADW,CAEnB,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKM,WAAjC,IAAkD,KAAKkB,KAAvD,gBACE,6BAAK,GAAG,EAAE,KAAKkB,UAAf,EAA2B,SAAS,EAAE/C,MAAM,CAACsD,aAAP,EAAtC,IACGjD,YAAY,gBACX,oBAAC,MAAD,IAAQ,GAAG,EAAE,KAAK4C,SAAlB,EAA6B,IAAI,EAAC,KAAlC,IACG,KAAK3B,YADR,CADW,GAKX,KAAKA,YAAL,EANJ,CADF,CADF,CAaD,CA5EH,4DAiBE,eAAmC,KACzBjB,YADyB,GACR,KAAKD,KADG,CACzBC,YADyB,CAEjC,IAAI,CAAC,KAAKG,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,CAACH,YAAL,EAAmB,CACjB,KAAKK,iBAAL,GAAyB,KAAKF,OAAL,CAAakC,qBAAb,GAAqCa,MAA9D,CACD,CACD,OAAO,KAAK7C,iBAAZ,CACD,CA1BH,qCA4BE,eAAuC,KAC7BH,KAD6B,GACnB,IADmB,CAC7BA,KAD6B,CAErC,OAAOyB,QAAQ,CAACzB,KAAK,CAACiD,6BAAP,CAAR,GAAgDxB,QAAQ,CAACzB,KAAK,CAACkD,2BAAP,CAAR,GAA8C,CAArG,CACD,CA/BH,6BAAoClE,KAAK,CAACmE,SAA1C,WACgBC,mBADhB,GACsC,gBADtC,UAGgBC,WAHhB,GAG8B3D,eAH9B","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isReadyToFix ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {this.renderHeader}\n            </Sticky>\n          ) : (\n            this.renderHeader()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\n          {this.closeIcon}\n        </Sticky>\n      </div>\n    );\n  };\n\n  private closeIcon = () => (\n    <SidePageContext.Consumer>\n      {({ requestClose }) => (\n        <button\n          className={cx(styles.close(this.theme), {\n            [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n          })}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onClick={requestClose}\n          data-tid=\"SidePage__close\"\n          tabIndex={0}\n        >\n          <CrossIcon />\n        </button>\n      )}\n    </SidePageContext.Consumer>\n  );\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}