@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-9cd4422b72

package/components/SidePage/SidePage.styles.d.ts

@@ -1,25 +1,45 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
     root(): string;
+    mobileRoot(): string;
     overlay(): string;
-    body(): string;
-    bodyContainer(): string;
-    container(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    layout(): string;
-    header(): string;
-    headerFixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    title(): string;
+    body(t: Theme): string;
+    mobileBody(): string;
+    container(t: Theme): string;
+    mobileContainer(t: Theme): string;
+    containerWithoutHeader(t: Theme): string;
+    mobileContainerWithoutHeader(t: Theme): string;
+    containerWithoutFooter(t: Theme): string;
+    containerWithPanel(t: Theme): string;
+    focusLock(): string;
+    wrapper(t: Theme): string;
+    wrapperLeft(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    headerFixed(t: Theme): string;
+    title(t: Theme): string;
+    mobileTitle(t: Theme): string;
     titleFixed(): string;
     background(): string;
-    backgroundGray(): string;
-    shadow(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    leftSide(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    panel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    closeIcon(): string;
-    fixed(): string;
-    footer(): string;
-    footerContent(): string;
-    footerFixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    backgroundGray(t: Theme): string;
+    shadow(t: Theme): string;
+    close(t: Theme): string;
+    mobileClose(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
+    mobileWrapperClose(t: Theme): string;
+    panel(t: Theme): string;
+    wrapperCloseFixed(t: Theme): string;
+    footerWrapper(): string;
+    footer(t: Theme): string;
+    positionStatic(): string;
+    footerContent(t: Theme): string;
+    mobileFooterContent(t: Theme): string;
+    footerFixed(t: Theme): string;
+    panelFixed(t: Theme): string;
     transitionLeft(): string;
     transitionRight(): string;
     transitionActive(): string;

package/components/SidePage/SidePageBody/SidePageBody.js

@@ -1,16 +1,26 @@
+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 { jsStyles } from "../SidePage.styles";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
-                                                      * Тело для сайдпейджа
-                                                      *
-                                                      * @visibleName SidePage.Body
-                                                      */
-
-export var SidePageBody =
-/*#__PURE__*/
-function (_React$Component) {
+export var SidePageBodyDataTids = {
+  root: 'SidePageBody__root'
+};
+/**
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
+ */
+
+export var SidePageBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageBody, _React$Component);
 
   function SidePageBody() {
@@ -32,12 +42,19 @@ function (_React$Component) {
   };
 
   _proto.render = function render() {
-    return React.createElement("div", {
-      className: jsStyles.body()
-    }, this.props.children);
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx;
+
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), /*#__PURE__*/React.createElement("div", {
+        "data-tid": SidePageBodyDataTids.root,
+        className: cx(styles.body(theme), (_cx = {}, _cx[styles.mobileBody()] = _this2.isMobileLayout, _cx))
+      }, _this2.props.children));
+    });
   };
 
   return SidePageBody;
-}(React.Component);
-SidePageBody.__KONTUR_REACT_UI__ = 'SidePageBody';
-SidePageBody.contextType = SidePageContext;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageBody', _class2.displayName = 'SidePageBody', _class2.contextType = SidePageContext, _temp)) || _class) || _class;

package/components/SidePage/SidePageBody/SidePageBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageBody.tsx"],"names":["React","jsStyles","SidePageContext","SidePageBody","context","componentDidUpdate","updateLayout","render","body","props","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;AAKA;;;;;AAKA,WAAaC,YAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,EAAAA,kBANT,GAME,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GARH;;AAUSC,EAAAA,MAVT,GAUE,kBAA6B;AAC3B,WAAO,6BAAK,SAAS,EAAEN,QAAQ,CAACO,IAAT,EAAhB,IAAkC,KAAKC,KAAL,CAAWC,QAA7C,CAAP;AACD,GAZH,uBAAkCV,KAAK,CAACW,SAAxC,EAAaR,Y,CACGS,mB,GAAsB,c,CADzBT,Y,CAGGU,W,GAAcX,e","sourcesContent":["import React from 'react';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\n\r\nexport interface SidePageBodyProps {\r\n  children?: React.ReactNode;\r\n}\r\n/**\r\n * Тело для сайдпейджа\r\n *\r\n * @visibleName SidePage.Body\r\n */\r\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageBody';\r\n\r\n  public static contextType = SidePageContext;\r\n  public context: SidePageContextType = this.context;\r\n\r\n  public componentDidUpdate() {\r\n    this.context.updateLayout();\r\n  }\r\n\r\n  public render(): JSX.Element {\r\n    return <div className={jsStyles.body()}>{this.props.children}</div>;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["SidePageBody.tsx"],"names":["React","CommonWrapper","ThemeContext","responsiveLayout","cx","rootNode","styles","SidePageContext","SidePageBodyDataTids","root","SidePageBody","context","componentDidUpdate","updateLayout","render","theme","setRootNode","props","body","mobileBody","isMobileLayout","children","Component","__KONTUR_REACT_UI__","displayName","contextType"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;AAMA,OAAO,IAAMC,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B,EAA7B;;AAGP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,YAAb,GAFCP,gBAED,UADCE,QACD;;;;;AAKSM,IAAAA,OALT,GAKwC,MAAKA,OAL7C;;;;AASSC,EAAAA,kBATT,GASE,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GAXH;;AAaSC,EAAAA,MAbT,GAaE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUT,oBAAoB,CAACC,IADjC;AAEE,YAAA,SAAS,EAAEL,EAAE,CAACE,MAAM,CAACY,IAAP,CAAYH,KAAZ,CAAD,iBAAwBT,MAAM,CAACa,UAAP,EAAxB,IAA8C,MAAI,CAACC,cAAnD,OAFf;;AAIG,UAAA,MAAI,CAACH,KAAL,CAAWI,QAJd,CADF,CADF;;;;AAUD,OAZH,CADF;;;AAgBD,GA9BH,uBAAkCrB,KAAK,CAACsB,SAAxC,WACgBC,mBADhB,GACsC,cADtC,UAEgBC,WAFhB,GAE8B,cAF9B,UAIgBC,WAJhB,GAI8BlB,eAJ9B","sourcesContent":["import React from 'react';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageBodyProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport const SidePageBodyDataTids = {\n  root: 'SidePageBody__root',\n} as const;\n/**\n * Тело для сайдпейджа\n *\n * @visibleName SidePage.Body\n */\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageBody';\n  public static displayName = 'SidePageBody';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={SidePageBodyDataTids.root}\n                className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}\n              >\n                {this.props.children}\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageBody.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
 import { SidePageContextType } from './SidePageContext';
-export interface SidePageBodyProps {
+export interface SidePageBodyProps extends CommonProps {
     children?: React.ReactNode;
 }
+export declare const SidePageBodyDataTids: {
+    readonly root: "SidePageBody__root";
+};
 /**
  * Тело для сайдпейджа
  *
@@ -10,8 +14,11 @@ export interface SidePageBodyProps {
  */
 export declare class SidePageBody extends React.Component<SidePageBodyProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static contextType: React.Context<SidePageContextType>;
     context: SidePageContextType;
+    private isMobileLayout;
+    private setRootNode;
     componentDidUpdate(): void;
     render(): JSX.Element;
 }

package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js

@@ -0,0 +1,45 @@
+import React, { useContext, useState } from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
+import { CrossIcon } from "../../../internal/icons/CrossIcon";
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { styles } from "../SidePage.styles";
+import { SidePageLocaleHelper } from "../locale";
+import { SidePageHeaderDataTids } from "../SidePageHeader";
+import { SidePageContext } from "../SidePageContext";
+export var SidePageCloseButton = function SidePageCloseButton() {
+  var _cx;
+
+  var _useState = useState(false),
+      isFocusedByTab = _useState[0],
+      setIsFocusedByTab = _useState[1];
+
+  var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
+  var theme = useContext(ThemeContext);
+  var sidePageContext = useContext(SidePageContext);
+
+  var handleFocus = function handleFocus() {
+    globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setIsFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setIsFocusedByTab(false);
+  };
+
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-label": locale == null ? void 0 : locale.closeButtonAriaLabel,
+    className: cx(styles.close(theme), (_cx = {}, _cx[styles.closeFocus(theme)] = isFocusedByTab, _cx)),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: sidePageContext.requestClose,
+    "data-tid": SidePageHeaderDataTids.close
+  }, /*#__PURE__*/React.createElement(CrossIcon, null));
+};
+SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';
+SidePageCloseButton.displayName = 'SidePageCloseButton';

package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageCloseButton.tsx"],"names":["React","useContext","useState","globalObject","ThemeContext","useLocaleForControl","CrossIcon","cx","keyListener","styles","SidePageLocaleHelper","SidePageHeaderDataTids","SidePageContext","SidePageCloseButton","isFocusedByTab","setIsFocusedByTab","locale","theme","sidePageContext","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","closeButtonAriaLabel","close","closeFocus","requestClose","__KONTUR_REACT_UI__","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,QAA5B,QAA4C,OAA5C;AACA,SAASC,YAAT,QAA6B,0BAA7B;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,mBAAT,QAAoC,sCAApC;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,oBAAT,QAAqC,UAArC;AACA,SAASC,sBAAT,QAAuC,kBAAvC;AACA,SAASC,eAAT,QAAgC,mBAAhC;;AAEA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,kBAA4CX,QAAQ,CAAC,KAAD,CAApD,CAAOY,cAAP,gBAAuBC,iBAAvB;;AAEA,MAAMC,MAAM,GAAGX,mBAAmB,CAAC,UAAD,EAAaK,oBAAb,CAAlC;AACA,MAAMO,KAAK,GAAGhB,UAAU,CAACG,YAAD,CAAxB;AACA,MAAMc,eAAe,GAAGjB,UAAU,CAACW,eAAD,CAAlC;;AAEA,MAAMO,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBhB,IAAAA,YAAY,CAACiB,qBAAb,oBAAAjB,YAAY,CAACiB,qBAAb,CAAqC,YAAM;AACzC,UAAIZ,WAAW,CAACa,YAAhB,EAA8B;AAC5BN,QAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AACF,KAJD;AAKD,GAND;;AAQA,MAAMO,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBP,IAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD,GAFD;;AAIA;AACE;AACE,oBAAYC,MAAZ,oBAAYA,MAAM,CAAEO,oBADtB;AAEE,MAAA,SAAS,EAAEhB,EAAE,CAACE,MAAM,CAACe,KAAP,CAAaP,KAAb,CAAD;AACVR,MAAAA,MAAM,CAACgB,UAAP,CAAkBR,KAAlB,CADU,IACiBH,cADjB,OAFf;;AAKE,MAAA,OAAO,EAAEK,WALX;AAME,MAAA,MAAM,EAAEG,UANV;AAOE,MAAA,OAAO,EAAEJ,eAAe,CAACQ,YAP3B;AAQE,kBAAUf,sBAAsB,CAACa,KARnC;;AAUE,wBAAC,SAAD,OAVF,CADF;;;AAcD,CAjCM;;AAmCPX,mBAAmB,CAACc,mBAApB,GAA0C,qBAA1C;AACAd,mBAAmB,CAACe,WAApB,GAAkC,qBAAlC","sourcesContent":["import React, { useContext, useState } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageLocaleHelper } from './locale';\nimport { SidePageHeaderDataTids } from './SidePageHeader';\nimport { SidePageContext } from './SidePageContext';\n\nexport const SidePageCloseButton = () => {\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const theme = useContext(ThemeContext);\n  const sidePageContext = useContext(SidePageContext);\n\n  const handleFocus = () => {\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setIsFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setIsFocusedByTab(false);\n  };\n\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={cx(styles.close(theme), {\n        [styles.closeFocus(theme)]: isFocusedByTab,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      <CrossIcon />\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"]}

package/components/SidePage/SidePageCloseButton/package.json

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

package/components/SidePage/SidePageCloseButton.d.ts

@@ -0,0 +1,5 @@
+export declare const SidePageCloseButton: {
+    (): JSX.Element;
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
+};

package/components/SidePage/SidePageContainer/SidePageContainer.js

@@ -1,15 +1,26 @@
+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 { jsStyles } from "../SidePage.styles";
-/**
-                                               * Контейнер с отступами
-                                               *
-                                               * @visibleName SidePage.Container
-                                               */
-
-export var SidePageContainer =
-/*#__PURE__*/
-function (_React$Component) {
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../SidePage.styles";
+import { SidePageContext } from "../SidePageContext";
+export var SidePageContainerDataTids = {
+  root: 'SidePageContainer__root'
+};
+/**
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
+ */
+
+export var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageContainer, _React$Component);
 
   function SidePageContainer() {
@@ -19,11 +30,31 @@ function (_React$Component) {
   var _proto = SidePageContainer.prototype;
 
   _proto.render = function render() {
-    return React.createElement("div", {
-      className: jsStyles.bodyContainer()
-    }, this.props.children);
+    var _this = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this.theme = theme;
+      return _this.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this2 = 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: _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))
+      }, _this2.props.children));
+    });
   };
 
   return SidePageContainer;
-}(React.Component);
-SidePageContainer.__KONTUR_REACT_UI__ = 'SidePageContainer';
+}(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","jsStyles","SidePageContainer","render","bodyContainer","props","children","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,mBAAzB;;AAEA;;;;;AAKA,WAAaC,iBAAb;;;AAGSC,EAAAA,MAHT,GAGE,kBAA6B;AAC3B;AACE,mCAAK,SAAS,EAAEF,QAAQ,CAACG,aAAT,EAAhB;AACG,WAAKC,KAAL,CAAWC,QADd,CADF;;;AAKD,GATH,4BAAuCN,KAAK,CAACO,SAA7C,EAAaL,iB,CACGM,mB,GAAsB,mB","sourcesContent":["import React from 'react';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\n\r\n/**\r\n * Контейнер с отступами\r\n *\r\n * @visibleName SidePage.Container\r\n */\r\nexport class SidePageContainer extends React.Component {\r\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <div className={jsStyles.bodyContainer()}>\r\n        {this.props.children}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"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__","displayName"],"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;;;;;;;;AAQSM,EAAAA,MART,GAQE,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,GAjBH;;AAmBSA,EAAAA,UAnBT,GAmBE,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,GAzCH,4BAAuC1B,KAAK,CAAC2B,SAA7C,WACgBC,mBADhB,GACsC,mBADtC,UAEgBC,WAFhB,GAE8B,mBAF9B","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  public static displayName = '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"]}

package/components/SidePage/SidePageContainer.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type SidePageContainerProps = CommonProps;
+export declare const SidePageContainerDataTids: {
+    readonly root: "SidePageContainer__root";
+};
 /**
  * Контейнер с отступами
  *
  * @visibleName SidePage.Container
  */
-export declare class SidePageContainer extends React.Component {
+export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    private theme;
+    private isMobileLayout;
+    private setRootNode;
     render(): JSX.Element;
+    renderMain(): JSX.Element;
 }

package/components/SidePage/SidePageContext/SidePageContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
-export var SidePageContext = React.createContext({
+export var SidePageContext = /*#__PURE__*/React.createContext({
   requestClose: function requestClose() {
     return undefined;
   },
@@ -9,6 +9,9 @@ export var SidePageContext = 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,GAAGD,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,19 +1,33 @@
+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 { jsStyles } from "../SidePage.styles";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { Gapped } from "../../Gapped";
+import { isNonNullable } from "../../../lib/utils";
+import { ModalSeparator } from "../../Modal/ModalSeparator";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
-                                                      * Футер сайдпейджа.
-                                                      *
-                                                      * @visibleName SidePage.Footer
-                                                      */
-
-export var SidePageFooter =
-/*#__PURE__*/
-function (_React$Component) {
+export var SidePageFooterDataTids = {
+  root: 'SidePageFooter__root'
+};
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
+ */
+
+export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageFooter, _React$Component);
 
   function SidePageFooter() {
@@ -28,9 +42,7 @@ function (_React$Component) {
     _this.state = {
       fixed: false
     };
-    _this.theme = void 0;
     _this.content = null;
-    _this.wrapper = null;
     _this.layoutSub = null;
 
     _this.update = function () {
@@ -41,15 +53,12 @@ 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));
 
-        var contentRect = _this.content.getBoundingClientRect();
+      if (wrapper && _this.content) {
+        var wrapperRect = getDOMRect(wrapper);
+        var contentRect = getDOMRect(_this.content);
 
         var _fixed = wrapperRect.top > contentRect.top;
 
@@ -65,23 +74,50 @@ 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.getSticky = function getSticky() {
+    if (typeof this.props.sticky !== 'undefined') {
+      return this.props.sticky;
+    }
+
+    if (this.isMobileLayout) {
+      return false;
+    }
+
+    return true;
   };
 
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
     });
@@ -90,25 +126,39 @@ function (_React$Component) {
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
-    return React.createElement("div", {
+    var separator = null;
+
+    if (isTheme2022(this.theme)) {
+      separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
+        fixed: this.state.fixed
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": SidePageFooterDataTids.root,
       style: {
         height: this.getContentHeight()
       },
-      ref: this.refWrapper
-    }, React.createElement(SidePageContext.Consumer, null, function (_ref) {
-      var _cn;
+      className: styles.footerWrapper()
+    }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
+      var _cx, _cx2;
 
       var getWidth = _ref.getWidth;
-      return React.createElement("div", {
-        className: jsStyles.footer(),
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.footer(_this3.theme), (_cx = {}, _cx[styles.positionStatic()] = !_this3.getSticky(), _cx)),
         style: {
           width: getWidth()
         }
-      }, 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)),
+      }, separator, /*#__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)),
         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));
+    })));
   };
 
   _proto.getContentHeight = function getContentHeight() {
@@ -116,10 +166,8 @@ function (_React$Component) {
       return 'auto';
     }
 
-    return this.content.getBoundingClientRect().height;
+    return getDOMRect(this.content).height;
   };
 
   return SidePageFooter;
-}(React.Component);
-SidePageFooter.__KONTUR_REACT_UI__ = 'SidePageFooter';
-SidePageFooter.contextType = SidePageContext;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.displayName = 'SidePageFooter', _class2.contextType = SidePageContext, _temp)) || _class) || _class;