@skbkontur/react-ui 0.0.0-031e4bb3f9 → 0.0.0-0fe669bb2d

package/components/SidePage/SidePageFooter.d.ts

@@ -7,30 +7,38 @@ export interface SidePageFooterProps extends CommonProps {
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    sticky?: boolean;
 }
+interface SidePageFooterState {
+    fixed: boolean;
+}
+export declare const SidePageFooterDataTids: {
+    readonly root: "SidePageFooter__root";
+};
 /**
  * Футер сайдпейджа.
  *
  * @visibleName SidePage.Footer
  */
-export declare class SidePageFooter extends React.Component<SidePageFooterProps> {
+export declare class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {
     static __KONTUR_REACT_UI__: string;
     static contextType: React.Context<SidePageContextType>;
     context: SidePageContextType;
-    state: {
-        fixed: boolean;
-    };
+    private isMobileLayout;
+    state: SidePageFooterState;
     private theme;
     private content;
-    private wrapper;
     private layoutSub;
+    private setRootNode;
     componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<SidePageFooterProps>): void;
     componentWillUnmount(): void;
+    getSticky(): boolean;
     render(): JSX.Element;
     update: () => void;
     private renderMain;
     private refContent;
-    private refWrapper;
     private setProperStyles;
     private getContentHeight;
 }
+export {};

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -1,21 +1,34 @@
+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 { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
- * Шапка сайдпейджа
- *
- * @visibleName SidePage.Header
+export var SidePageHeaderDataTids = {
+  root: 'SidePageHeader__root',
+  close: 'SidePage__close'
+};
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
  */
 
-export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
+export var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageHeader, _React$Component);
 
   function SidePageHeader() {
@@ -26,72 +39,88 @@ 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.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(_this.theme), (_cn = {}, _cn[jsStyles.headerFixed(_this.theme)] = fixed, _cn))
-      }, _this.renderClose(), /*#__PURE__*/React.createElement("div", {
-        className: cn(jsStyles.title(_this.theme), (_cn2 = {}, _cn2[jsStyles.titleFixed()] = fixed, _cn2))
+        className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx[styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _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))
       }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children));
     };
 
-    _this.renderCloseContent = function (fixed) {
+    _this.renderClose = function (fixed) {
+      var _cx3;
+
+      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3))
+      }, _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 _cn3, _cn4;
+        var _cx4;
 
         var requestClose = _ref.requestClose;
-        return /*#__PURE__*/React.createElement("a", {
-          className: cn(jsStyles.close(_this.theme), (_cn3 = {}, _cn3[jsStyles.fixed(_this.theme)] = fixed, _cn3)),
+        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": "SidePage__close"
-        }, /*#__PURE__*/React.createElement("span", {
-          className: cn(jsStyles.closeIcon(_this.theme), (_cn4 = {}, _cn4[jsStyles.fixed(_this.theme)] = fixed, _cn4))
-        }, /*#__PURE__*/React.createElement(CrossIcon, null)));
+          "data-tid": SidePageHeaderDataTids.close,
+          tabIndex: 0
+        }, /*#__PURE__*/React.createElement(CrossIcon, null));
       });
     };
 
-    _this.renderClose = function () {
-      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
-      return /*#__PURE__*/React.createElement(Sticky, {
-        side: "top",
-        offset: stickyOffset
-      }, _this.renderCloseContent);
-    };
-
     _this.updateReadyToFix = function () {
       if (_this.wrapper) {
-        var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
-
+        var wrapperScrolledUp = getDOMRect(_this.wrapper).top;
         var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
 
         _this.setState(function (state) {
-          return state.isReadyToFix !== isReadyToFix ? {
+          return state.isReadyToFix !== isReadyToFix ? _extends({}, state, {
             isReadyToFix: isReadyToFix
-          } : state;
+          }) : state;
         });
       }
     };
@@ -100,6 +129,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;
   }
 
@@ -114,11 +163,30 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
     });
   };
 
+  _proto.getStickyProp = function getStickyProp() {
+    if (typeof this.props.sticky !== 'undefined') {
+      return this.props.sticky;
+    }
+
+    if (this.isMobileLayout) {
+      return false;
+    }
+
+    return true;
+  };
+
   _proto.renderMain = function renderMain() {
     var isReadyToFix = this.state.isReadyToFix;
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      ref: this.wrapperRef
-    }, isReadyToFix ? /*#__PURE__*/React.createElement(Sticky, {
+    var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;
+    var isStickyMobile = this.isMobileLayout && this.getStickyProp();
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": SidePageHeaderDataTids.root,
+      ref: this.wrapperRef,
+      className: styles.headerWrapper()
+    }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
+      ref: this.stickyRef,
       side: "top"
     }, this.renderHeader) : this.renderHeader()));
   };
@@ -133,7 +201,7 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!isReadyToFix) {
-        this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;
+        this.lastRegularHeight = getDOMRect(this.wrapper).height;
       }
 
       return this.lastRegularHeight;
@@ -147,5 +215,4 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return SidePageHeader;
-}(React.Component);
-SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = SidePageContext, _temp)) || _class) || _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","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","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext } from './SidePageContext';\r\n\r\nexport interface SidePageHeaderProps extends CommonProps {\r\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface SidePageHeaderState {\r\n  isReadyToFix: boolean;\r\n}\r\n\r\n/**\r\n * Шапка сайдпейджа\r\n *\r\n * @visibleName SidePage.Header\r\n */\r\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\r\n\r\n  public state = {\r\n    isReadyToFix: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private wrapper: HTMLElement | null = null;\r\n  private lastRegularHeight = 0;\r\n\r\n  public get regularHeight(): number {\r\n    const { isReadyToFix } = this.state;\r\n    if (!this.wrapper) {\r\n      return 0;\r\n    }\r\n    if (!isReadyToFix) {\r\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\r\n    }\r\n    return this.lastRegularHeight;\r\n  }\r\n\r\n  public get fixedHeaderHeight(): number {\r\n    const { theme } = this;\r\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\r\n  }\r\n\r\n  public componentDidMount = () => {\r\n    window.addEventListener('scroll', this.update, true);\r\n  };\r\n\r\n  public componentWillUnmount = () => {\r\n    window.removeEventListener('scroll', this.update, true);\r\n  };\r\n\r\n  public update = () => {\r\n    this.updateReadyToFix();\r\n  };\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { isReadyToFix } = this.state;\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div ref={this.wrapperRef}>\r\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderHeader = (fixed = false) => {\r\n    return (\r\n      <div className={cn(jsStyles.header(this.theme), { [jsStyles.headerFixed(this.theme)]: fixed })}>\r\n        {this.renderClose()}\r\n        <div className={cn(jsStyles.title(this.theme), { [jsStyles.titleFixed()]: fixed })}>\r\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  private renderCloseContent = (fixed: boolean) => (\r\n    <SidePageContext.Consumer>\r\n      {({ requestClose }) => (\r\n        <a\r\n          className={cn(jsStyles.close(this.theme), {\r\n            [jsStyles.fixed(this.theme)]: fixed,\r\n          })}\r\n          onClick={requestClose}\r\n          data-tid=\"SidePage__close\"\r\n        >\r\n          <span\r\n            className={cn(jsStyles.closeIcon(this.theme), {\r\n              [jsStyles.fixed(this.theme)]: fixed,\r\n            })}\r\n          >\r\n            <CrossIcon />\r\n          </span>\r\n        </a>\r\n      )}\r\n    </SidePageContext.Consumer>\r\n  );\r\n\r\n  private renderClose = () => {\r\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\r\n\r\n    return (\r\n      <Sticky side=\"top\" offset={stickyOffset}>\r\n        {this.renderCloseContent}\r\n      </Sticky>\r\n    );\r\n  };\r\n\r\n  private updateReadyToFix = () => {\r\n    if (this.wrapper) {\r\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\r\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\r\n      this.setState(state => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\r\n    }\r\n  };\r\n\r\n  private wrapperRef = (el: HTMLElement | null) => {\r\n    this.wrapper = el;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["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"]}

package/components/SidePage/SidePageHeader.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,kBAAd;AACA,cAAc,gBAAd;AACA,cAAc,kBAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './SidePage';\r\nexport * from './SidePageHeader';\r\nexport * from './SidePageBody';\r\nexport * from './SidePageFooter';\r\nexport * from './SidePageContainer';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,kBAAd;AACA,cAAc,gBAAd;AACA,cAAc,kBAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './SidePage';\nexport * from './SidePageHeader';\nexport * from './SidePageBody';\nexport * from './SidePageFooter';\nexport * from './SidePageContainer';\n"]}

package/components/Spinner/Spinner/Spinner.js

@@ -1,47 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _dec, _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import { locale } from "../../../lib/locale/decorators";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { SpinnerIcon } from "../../../internal/icons/SpinnerIcon";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Spinner.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { styles } from "../Spinner.styles";
 import { SpinnerLocaleHelper } from "../locale";
 var types = {
   big: 'big',
   mini: 'mini',
   normal: 'normal'
 };
+export var SpinnerDataTids = {
+  root: 'Spinner__root'
+};
 export
-/**
-* DRAFT - инлайн-лоадер
+/**
+* DRAFT - инлайн-лоадер
 */
-var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Spinner, _React$Component);
 
-  function Spinner(props) {
+  function Spinner() {
     var _this;
 
-    _this = _React$Component.call(this, props) || this;
-    _this.theme = void 0;
-    _this.locale = void 0;
+    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.getProps = createPropsGetter(Spinner.defaultProps);
+
+    _this.renderSpinner = function (type, dimmed, inline) {
+      var _cx;
 
-    _this.renderSpinner = function (type, dimmed) {
-      var circleClassName = dimmed ? jsStyles.circleDimmed(_this.theme) : jsStyles.circle(_this.theme);
       return /*#__PURE__*/React.createElement(SpinnerIcon, {
         size: type,
-        className: circleClassName,
-        dimmed: dimmed
+        className: cx((_cx = {}, _cx[styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[styles.circleDimmedColor(_this.theme)] = dimmed, _cx[styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _cx)),
+        dimmed: dimmed,
+        width: _this.props.width,
+        color: _this.props.color,
+        inline: inline
       });
     };
 
     _this.renderCaption = function (type, caption) {
       return /*#__PURE__*/React.createElement("span", {
-        className: cn(jsStyles[type](_this.theme), jsStyles.captionColor(_this.theme))
+        className: cx(styles[type](_this.theme), styles.captionColor(_this.theme))
       }, caption);
     };
 
@@ -61,35 +74,39 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), _dec(_class = (_te
 
   _proto.renderMain = function renderMain() {
     var _this$props = this.props,
-        type = _this$props.type,
         _this$props$caption = _this$props.caption,
         caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,
-        dimmed = _this$props.dimmed;
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.spinner()
+        dimmed = _this$props.dimmed,
+        inline = _this$props.inline;
+    var type = this.getProps().type;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": SpinnerDataTids.root,
+      className: styles.spinner()
     }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.inner()
-    }, this.renderSpinner(type, dimmed)), caption && this.renderCaption(type, caption)));
+      className: styles.inner()
+    }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));
   };
 
   return Spinner;
 }(React.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = {
-  /**
-  * Текст рядом с мини-лоадером.
-  *
-  * 'Загрузка' - значение по-умолчанию
+  /**
+  * Текст рядом с мини-лоадером.
+  *
+  * 'Загрузка' - значение по-умолчанию
   */
   caption: PropTypes.node,
   dimmed: PropTypes.bool,
 
-  /**
-  * Тип спиннера: mini, normal, big
-  *
-  * Значение по-умолчанию - normal
-  *
-  * Spinner.types - все доступные типы
+  /**
+  * Тип спиннера: mini, normal, big
+  *
+  * Значение по-умолчанию - normal
+  *
+  * Spinner.types - все доступные типы
   */
   type: PropTypes.oneOf(Object.keys(types))
 }, _class2.defaultProps = {
   type: 'normal'
-}, _class2.Types = types, _temp)) || _class);
+}, _class2.Types = types, _temp)) || _class) || _class);

package/components/Spinner/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","cn","locale","ThemeContext","SpinnerIcon","CommonWrapper","jsStyles","SpinnerLocaleHelper","types","big","mini","normal","Spinner","props","theme","renderSpinner","type","dimmed","circleClassName","circleDimmed","circle","renderCaption","caption","captionColor","render","renderMain","loading","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { locale } from '../../lib/locale/decorators';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Spinner.styles';\r\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\r\n\r\nconst types: Record<SpinnerType, SpinnerType> = {\r\n  big: 'big',\r\n  mini: 'mini',\r\n  normal: 'normal',\r\n};\r\n\r\nexport type SpinnerType = 'mini' | 'normal' | 'big';\r\n\r\nexport interface SpinnerProps extends CommonProps {\r\n  caption?: React.ReactNode;\r\n  dimmed?: boolean;\r\n  /**\r\n   * Тип спиннера\r\n   * @default normal\r\n   */\r\n  type: SpinnerType;\r\n}\r\n\r\n/**\r\n * DRAFT - инлайн-лоадер\r\n */\r\n\r\n@locale('Spinner', SpinnerLocaleHelper)\r\nexport class Spinner extends React.Component<SpinnerProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Spinner';\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * Текст рядом с мини-лоадером.\r\n     *\r\n     * 'Загрузка' - значение по-умолчанию\r\n     */\r\n    caption: PropTypes.node,\r\n\r\n    dimmed: PropTypes.bool,\r\n\r\n    /**\r\n     * Тип спиннера: mini, normal, big\r\n     *\r\n     * Значение по-умолчанию - normal\r\n     *\r\n     * Spinner.types - все доступные типы\r\n     */\r\n    type: PropTypes.oneOf(Object.keys(types)),\r\n  };\r\n\r\n  public static defaultProps: SpinnerProps = {\r\n    type: 'normal',\r\n  };\r\n\r\n  public static Types: typeof types = types;\r\n  private theme!: Theme;\r\n  private readonly locale!: SpinnerLocale;\r\n\r\n  constructor(props: SpinnerProps) {\r\n    super(props);\r\n  }\r\n\r\n  public render() {\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 { type, caption = this.locale.loading, dimmed } = this.props;\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div className={jsStyles.spinner()}>\r\n          <span className={jsStyles.inner()}>{this.renderSpinner(type, dimmed)}</span>\r\n          {caption && this.renderCaption(type, caption)}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean) => {\r\n    const circleClassName = dimmed ? jsStyles.circleDimmed(this.theme) : jsStyles.circle(this.theme);\r\n\r\n    return <SpinnerIcon size={type} className={circleClassName} dimmed={dimmed} />;\r\n  };\r\n\r\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\r\n    <span className={cn(jsStyles[type](this.theme), jsStyles.captionColor(this.theme))}>{caption}</span>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\n  /**\n   * Тип спиннера\n   * @default normal\n   */\n  type?: SpinnerType;\n  inline?: boolean;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(types)),\n  };\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n  };\n\n  private getProps = createPropsGetter(Spinner.defaultProps);\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\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  private renderMain() {\n    const { caption = this.locale.loading, dimmed, inline } = this.props;\n    const type = this.getProps().type;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    return (\n      <SpinnerIcon\n        size={type}\n        className={cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n        inline={inline}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}

package/components/Spinner/Spinner.d.ts

@@ -10,8 +10,21 @@ export interface SpinnerProps extends CommonProps {
      * Тип спиннера
      * @default normal
      */
-    type: SpinnerType;
+    type?: SpinnerType;
+    inline?: boolean;
+    /**
+     * Толщина спиннера
+     */
+    width?: number;
+    /**
+     * Цвет спиннера
+     */
+    color?: React.CSSProperties['color'];
 }
+export declare const SpinnerDataTids: {
+    readonly root: "Spinner__root";
+};
+declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
 /**
  * DRAFT - инлайн-лоадер
  */
@@ -34,11 +47,12 @@ export declare class Spinner extends React.Component<SpinnerProps> {
          */
         type: PropTypes.Requireable<string>;
     };
-    static defaultProps: SpinnerProps;
+    static defaultProps: DefaultProps;
+    private getProps;
     static Types: typeof types;
     private theme;
     private readonly locale;
-    constructor(props: SpinnerProps);
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private renderSpinner;