@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

package/components/SidePage/SidePage.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { SidePageBody } from './SidePageBody';
 import { SidePageContainer } from './SidePageContainer';
 import { SidePageFooter } from './SidePageFooter';
 import { SidePageHeader } from './SidePageHeader';
-export interface SidePageProps extends CommonProps {
+export interface SidePageProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {
     /**
      * Добавить блокирующий фон, когда сайдпейдж открыт
      */
@@ -26,6 +26,10 @@ export interface SidePageProps extends CommonProps {
      * Escape или на крестик).
      */
     onClose?: () => void;
+    /**
+     * Вызывается, когда анимация открытия сайдпейджа полностью прошла
+     */
+    onOpened?: () => void;
     /**
      * Показывать сайдпэйдж слева
      *
@@ -39,7 +43,7 @@ export interface SidePageProps extends CommonProps {
     /**
      * Работает только при заблокированном фоне: `blockBackground = true`
      */
-    disableFocusLock: boolean;
+    disableFocusLock?: boolean;
     /**
      * задает отступ от края экрана
      */
@@ -54,6 +58,11 @@ export interface SidePageState {
     hasFooter: boolean;
     hasPanel: boolean;
 }
+export declare const SidePageDataTids: {
+    readonly root: "SidePage__root";
+    readonly container: "SidePage__container";
+};
+declare type DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'disableFocusLock' | 'offset' | 'role'>>;
 /**
  * Сайдпейдж
  *
@@ -72,7 +81,8 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     state: SidePageState;
     private theme;
     private stackSubscription;
-    private layoutRef;
+    private layout;
+    private header;
     private footer;
     private rootRef;
     componentDidMount(): void;
@@ -82,11 +92,8 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
      * @public
      */
     updateLayout: () => void;
-    static defaultProps: {
-        disableAnimations: boolean;
-        disableFocusLock: boolean;
-        offset: number;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     render(): JSX.Element;
     private renderMain;
     private renderContainer;
@@ -98,8 +105,11 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private handleClickOutside;
     private handleKeyDown;
     private requestClose;
+    private headerRef;
     private footerRef;
+    private layoutRef;
     private setHasHeader;
     private setHasFooter;
     private setHasPanel;
 }
+export {};

package/components/SidePage/SidePage.md

@@ -46,3 +46,19 @@ function close() {
   <Button onClick={open}>Open</Button>
 </div>;
 ```
+
+#### Локали по умолчанию
+
+```typescript static
+interface SidePageLocale {
+  closeButtonAriaLabel?: string;
+}
+
+const ru_RU = {
+  closeButtonAriaLabel: 'Закрыть модальное окно'
+}
+
+const en_GB = {
+  closeButtonAriaLabel: 'Close modal window'
+}
+```

package/components/SidePage/SidePage.styles/SidePage.styles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
@@ -57,7 +57,7 @@ export var styles = memoizeStyle({
     return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
   header: function header(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor, t.sidePageHeaderFontWeight);
   },
   mobileHeader: function mobileHeader(t) {
     return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
@@ -124,19 +124,22 @@ export var styles = memoizeStyle({
   footerFixed: function footerFixed(t) {
     return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
   },
+  panelFixed: function panelFixed(t) {
+    return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.sidePageFixedPanelShadow);
+  },
   transitionLeft: function transitionLeft() {
-    return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
+    return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
   },
   transitionRight: function transitionRight() {
-    return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
+    return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
   },
   transitionActive: function transitionActive() {
-    return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
+    return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    "])));
   },
   transitionLeave: function transitionLeave() {
-    return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
+    return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   transitionLeaveActive: function transitionLeaveActive() {
-    return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
 });

package/components/SidePage/SidePage.styles/SidePage.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","mobileRoot","overlay","body","t","modalBodyTextColor","mobileBody","container","sidePagePaddingLeft","sidePagePaddingRight","mobileContainer","mobileSidePagePaddingLeft","mobileSidePagePaddingRight","mobileSidePagePaddingBottom","containerWithoutHeader","sidePagePaddingTop","mobileContainerWithoutHeader","mobileSidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","mobileHeader","mobileSidePageHeaderFontSize","mobileSidePageHeaderLineHeight","mobileSidePageHeaderPaddingTop","mobileSidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","mobileTitle","mobileSidePageCloseButtonPadding","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","mobileClose","mobileSidePageCloseButtonClickArea","closeFocus","borderColorFocus","wrapperClose","mobileWrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","wrapperCloseFixed","footerWrapper","footer","sidePageFooterTextColor","positionStatic","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","mobileFooterContent","mobileSidePageFooterPadding","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      top: 0;\n    `;\n  },\n\n  mobileRoot() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  overlay() {\n    return css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody() {\n    return css`\n      font-size: 16px;\n      line-height: 22px;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  mobileContainer(t: Theme) {\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${t.mobileSidePagePaddingRight};\n      padding-bottom: ${t.mobileSidePagePaddingBottom};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.sidePagePaddingTop};\n    `;\n  },\n\n  mobileContainerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.mobileSidePagePaddingTop};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  focusLock() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  wrapperLeft() {\n    return css`\n      float: left;\n    `;\n  },\n\n  wrapperMarginLeft() {\n    return css`\n      margin-left: 20px;\n    `;\n  },\n\n  wrapperMarginRight() {\n    return css`\n      margin-right: 20px;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.sidePageHeaderFontSize};\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      width: 100%;\n      position: relative;\n      color: ${t.sidePageHeaderTextColor};\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileSidePageHeaderFontSize};\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n    `;\n  },\n\n  headerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      font-size: ${t.sidePageHeaderFixedFontSize};\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedHeaderShadow};\n      }\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonPadding) +\n      parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n      parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  mobileTitle(t: Theme) {\n    const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  titleFixed() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  background() {\n    return css`\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  backgroundGray(t: Theme) {\n    return css`\n      background: ${t.sidePageBackingBg};\n      opacity: ${t.sidePageBackingBgOpacity};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      box-shadow: ${t.sidePageContainerShadow};\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      cursor: pointer;\n      color: ${t.sidePageCloseButtonColor};\n      padding: ${t.sidePageCloseButtonClickArea};\n      margin: -${t.sidePageCloseButtonClickArea};\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ${t.sidePageCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.sidePageCloseIconSize};\n        height: ${t.sidePageCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  mobileClose(t: Theme) {\n    return css`\n      padding: ${t.mobileSidePageCloseButtonClickArea};\n      margin: -${t.mobileSidePageCloseButtonClickArea};\n      font-size: 0;\n    `;\n  },\n\n  closeFocus(t: Theme) {\n    return css`\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  wrapperClose(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      position: absolute;\n      right: ${t.sidePageCloseButtonPadding};\n      top: 0;\n    `;\n  },\n\n  mobileWrapperClose(t: Theme) {\n    return css`\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      right: ${t.mobileSidePageCloseButtonPadding};\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      background: ${t.sidePageFooterPanelBg};\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  wrapperCloseFixed(t: Theme) {\n    return css`\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ${t.sidePageFooterTextColor};\n    `;\n  },\n\n  positionStatic() {\n    return css`\n      position: static;\n    `;\n  },\n\n  footerContent(t: Theme) {\n    return css`\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  mobileFooterContent(t: Theme) {\n    return css`\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ${t.mobileSidePageFooterPadding};\n    `;\n  },\n\n  footerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedFooterShadow};\n      }\n    `;\n  },\n\n  transitionLeft() {\n    return css`\n      transform: translateX(100px);\n    `;\n  },\n\n  transitionRight() {\n    return css`\n      transform: translateX(-100px);\n    `;\n  },\n\n  transitionActive() {\n    return css`\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["SidePage.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","mobileRoot","overlay","body","t","modalBodyTextColor","mobileBody","container","sidePagePaddingLeft","sidePagePaddingRight","mobileContainer","mobileSidePagePaddingLeft","mobileSidePagePaddingRight","mobileSidePagePaddingBottom","containerWithoutHeader","sidePagePaddingTop","mobileContainerWithoutHeader","mobileSidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","sidePageHeaderFontWeight","mobileHeader","mobileSidePageHeaderFontSize","mobileSidePageHeaderLineHeight","mobileSidePageHeaderPaddingTop","mobileSidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","mobileTitle","mobileSidePageCloseButtonPadding","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","mobileClose","mobileSidePageCloseButtonClickArea","closeFocus","borderColorFocus","wrapperClose","mobileWrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","wrapperCloseFixed","footerWrapper","footer","sidePageFooterTextColor","positionStatic","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","mobileFooterContent","mobileSidePageFooterPadding","footerFixed","sidePageFixedFooterShadow","panelFixed","sidePageFixedPanelShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      top: 0;\n    `;\n  },\n\n  mobileRoot() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  overlay() {\n    return css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody() {\n    return css`\n      font-size: 16px;\n      line-height: 22px;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  mobileContainer(t: Theme) {\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${t.mobileSidePagePaddingRight};\n      padding-bottom: ${t.mobileSidePagePaddingBottom};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.sidePagePaddingTop};\n    `;\n  },\n\n  mobileContainerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.mobileSidePagePaddingTop};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  focusLock() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  wrapperLeft() {\n    return css`\n      float: left;\n    `;\n  },\n\n  wrapperMarginLeft() {\n    return css`\n      margin-left: 20px;\n    `;\n  },\n\n  wrapperMarginRight() {\n    return css`\n      margin-right: 20px;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.sidePageHeaderFontSize};\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      width: 100%;\n      position: relative;\n      color: ${t.sidePageHeaderTextColor};\n      font-weight: ${t.sidePageHeaderFontWeight};\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileSidePageHeaderFontSize};\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n    `;\n  },\n\n  headerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      font-size: ${t.sidePageHeaderFixedFontSize};\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedHeaderShadow};\n      }\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonPadding) +\n      parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n      parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  mobileTitle(t: Theme) {\n    const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  titleFixed() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  background() {\n    return css`\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  backgroundGray(t: Theme) {\n    return css`\n      background: ${t.sidePageBackingBg};\n      opacity: ${t.sidePageBackingBgOpacity};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      box-shadow: ${t.sidePageContainerShadow};\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      cursor: pointer;\n      color: ${t.sidePageCloseButtonColor};\n      padding: ${t.sidePageCloseButtonClickArea};\n      margin: -${t.sidePageCloseButtonClickArea};\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ${t.sidePageCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.sidePageCloseIconSize};\n        height: ${t.sidePageCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  mobileClose(t: Theme) {\n    return css`\n      padding: ${t.mobileSidePageCloseButtonClickArea};\n      margin: -${t.mobileSidePageCloseButtonClickArea};\n      font-size: 0;\n    `;\n  },\n\n  closeFocus(t: Theme) {\n    return css`\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  wrapperClose(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      position: absolute;\n      right: ${t.sidePageCloseButtonPadding};\n      top: 0;\n    `;\n  },\n\n  mobileWrapperClose(t: Theme) {\n    return css`\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      right: ${t.mobileSidePageCloseButtonPadding};\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      background: ${t.sidePageFooterPanelBg};\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  wrapperCloseFixed(t: Theme) {\n    return css`\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ${t.sidePageFooterTextColor};\n    `;\n  },\n\n  positionStatic() {\n    return css`\n      position: static;\n    `;\n  },\n\n  footerContent(t: Theme) {\n    return css`\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  mobileFooterContent(t: Theme) {\n    return css`\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ${t.mobileSidePageFooterPadding};\n    `;\n  },\n\n  footerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedFooterShadow};\n      }\n    `;\n  },\n\n  panelFixed(t: Theme) {\n    return css`\n      &:before {\n        box-shadow: ${t.sidePageFixedPanelShadow};\n      }\n    `;\n  },\n\n  transitionLeft() {\n    return css`\n      transform: translateX(100px);\n    `;\n  },\n\n  transitionRight() {\n    return css`\n      transform: translateX(-100px);\n    `;\n  },\n\n  transitionActive() {\n    return css`\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}

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

@@ -39,6 +39,7 @@ export declare const styles: {
     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

@@ -11,13 +11,16 @@ import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-export
+export var SidePageBodyDataTids = {
+  root: 'SidePageBody__root'
+};
 /**
-* Тело для сайдпейджа
-*
-* @visibleName SidePage.Body
-*/
-var SidePageBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
+ */
+
+export var SidePageBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageBody, _React$Component);
 
   function SidePageBody() {
@@ -47,6 +50,7 @@ var SidePageBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2
       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));
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageBody.tsx"],"names":["React","CommonWrapper","ThemeContext","responsiveLayout","cx","rootNode","styles","SidePageContext","SidePageBody","context","componentDidUpdate","updateLayout","render","theme","setRootNode","props","body","mobileBody","isMobileLayout","children","Component","__KONTUR_REACT_UI__","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;;;;;;;;;;;;AAYA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,YAAb,GAFCL,gBAED,UADCE,QACD,0WAISI,OAJT,GAIwC,MAAKA,OAJ7C;;;;AAQSC,EAAAA,kBART,GAQE,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GAVH;;AAYSC,EAAAA,MAZT,GAYE,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,uCAAK,SAAS,EAAEX,EAAE,CAACE,MAAM,CAACU,IAAP,CAAYH,KAAZ,CAAD,iBAAwBP,MAAM,CAACW,UAAP,EAAxB,IAA8C,MAAI,CAACC,cAAnD,OAAlB;AACG,UAAA,MAAI,CAACH,KAAL,CAAWI,QADd,CADF,CADF;;;;AAOD,OATH,CADF;;;AAaD,GA1BH,uBAAkCnB,KAAK,CAACoB,SAAxC,WACgBC,mBADhB,GACsC,cADtC,UAGgBC,WAHhB,GAG8Bf,eAH9B","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/**\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\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 className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}>\n                {this.props.children}\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\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__","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;;;;AAISM,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;;;AAQSC,EAAAA,kBART,GAQE,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GAVH;;AAYSC,EAAAA,MAZT,GAYE,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,GA7BH,uBAAkCrB,KAAK,CAACsB,SAAxC,WACgBC,mBADhB,GACsC,cADtC,UAGgBC,WAHhB,GAG8BjB,eAH9B","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\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

@@ -4,6 +4,9 @@ import { SidePageContextType } from './SidePageContext';
 export interface SidePageBodyProps extends CommonProps {
     children?: React.ReactNode;
 }
+export declare const SidePageBodyDataTids: {
+    readonly root: "SidePageBody__root";
+};
 /**
  * Тело для сайдпейджа
  *

package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js

@@ -0,0 +1,42 @@
+import React, { useContext, useState } from 'react';
+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() {
+    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));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageCloseButton.tsx"],"names":["React","useContext","useState","ThemeContext","useLocaleForControl","CrossIcon","cx","keyListener","styles","SidePageLocaleHelper","SidePageHeaderDataTids","SidePageContext","SidePageCloseButton","isFocusedByTab","setIsFocusedByTab","locale","theme","sidePageContext","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","closeButtonAriaLabel","close","closeFocus","requestClose"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,QAA5B,QAA4C,OAA5C;;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,kBAA4CV,QAAQ,CAAC,KAAD,CAApD,CAAOW,cAAP,gBAAuBC,iBAAvB;;AAEA,MAAMC,MAAM,GAAGX,mBAAmB,CAAC,UAAD,EAAaK,oBAAb,CAAlC;AACA,MAAMO,KAAK,GAAGf,UAAU,CAACE,YAAD,CAAxB;AACA,MAAMc,eAAe,GAAGhB,UAAU,CAACU,eAAD,CAAlC;;AAEA,MAAMO,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIZ,WAAW,CAACa,YAAhB,EAA8B;AAC5BN,QAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AACF,KAJoB,CAArB;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","sourcesContent":["import React, { useContext, useState } from 'react';\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    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"]}

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 @@
+export declare const SidePageCloseButton: () => JSX.Element;

package/components/SidePage/SidePageContainer/SidePageContainer.js

@@ -11,13 +11,16 @@ import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { rootNode } from "../../../lib/rootNode";
 import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-export
+export var SidePageContainerDataTids = {
+  root: 'SidePageContainer__root'
+};
 /**
-* Контейнер с отступами
-*
-* @visibleName SidePage.Container
-*/
-var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
+ */
+
+export var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageContainer, _React$Component);
 
   function SidePageContainer() {
@@ -47,6 +50,7 @@ var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _cl
       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));
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","styles","SidePageContext","SidePageContainer","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;;;;;;;;AAWA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,iBAAb,GAFCJ,gBAED,UADCC,QACD;;;AAOSI,EAAAA,MAPT,GAOE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAhBH;;AAkBSA,EAAAA,UAlBT,GAkBE,sBAAoB;AAClB;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,YAAA,SAAS,EAAEb,EAAE;AACVG,YAAAA,MAAM,CAACW,SAAP,CAAiB,MAAI,CAACP,KAAtB,CADU,IACqB,IADrB;AAEVJ,YAAAA,MAAM,CAACY,sBAAP,CAA8B,MAAI,CAACR,KAAnC,CAFU,IAEkC,CAACE,SAFnC;AAGVN,YAAAA,MAAM,CAACa,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAHU,IAGkC,CAACG,SAHnC;AAIVP,YAAAA,MAAM,CAACc,kBAAP,CAA0B,MAAI,CAACV,KAA/B,CAJU,IAI8BI,QAJ9B;AAKVR,YAAAA,MAAM,CAACe,eAAP,CAAuB,MAAI,CAACX,KAA5B,CALU,IAK2B,MAAI,CAACY,cALhC;AAMVhB,YAAAA,MAAM,CAACiB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwC,MAAI,CAACY,cAAL,IAAuB,CAACV,SANhE,OADf;;;AAUG,UAAA,MAAI,CAACI,KAAL,CAAWQ,QAVd,CADF,CADD,GADH,CADF;;;;;;AAoBD,GAvCH,4BAAuCxB,KAAK,CAACyB,SAA7C,WACgBC,mBADhB,GACsC,mBADtC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              className={cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","responsiveLayout","rootNode","styles","SidePageContext","SidePageContainerDataTids","root","SidePageContainer","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;AAIA,OAAO,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,iBAAb,GAFCN,gBAED,UADCC,QACD;;;;;;;AAOSM,EAAAA,MAPT,GAOE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAhBH;;AAkBSA,EAAAA,UAlBT,GAkBE,sBAAoB;AAClB;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUV,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAEN,EAAE;AACVG,YAAAA,MAAM,CAACa,SAAP,CAAiB,MAAI,CAACP,KAAtB,CADU,IACqB,IADrB;AAEVN,YAAAA,MAAM,CAACc,sBAAP,CAA8B,MAAI,CAACR,KAAnC,CAFU,IAEkC,CAACE,SAFnC;AAGVR,YAAAA,MAAM,CAACe,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAHU,IAGkC,CAACG,SAHnC;AAIVT,YAAAA,MAAM,CAACgB,kBAAP,CAA0B,MAAI,CAACV,KAA/B,CAJU,IAI8BI,QAJ9B;AAKVV,YAAAA,MAAM,CAACiB,eAAP,CAAuB,MAAI,CAACX,KAA5B,CALU,IAK2B,MAAI,CAACY,cALhC;AAMVlB,YAAAA,MAAM,CAACmB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwC,MAAI,CAACY,cAAL,IAAuB,CAACV,SANhE,OAFf;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWQ,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,GAxCH,4BAAuC1B,KAAK,CAAC2B,SAA7C,WACgBC,mBADhB,GACsC,mBADtC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageContainer.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type SidePageContainerProps = CommonProps;
+export declare const SidePageContainerDataTids: {
+    readonly root: "SidePageContainer__root";
+};
 /**
  * Контейнер с отступами
  *

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;;;;;;;;;;;;;;;;;AAiBA,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';\n\nimport { SidePageFooter } from './SidePageFooter';\n\nexport interface SidePageContextType {\n  requestClose: () => void;\n  getWidth: () => number | string;\n  updateLayout: () => 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  footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\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,11 @@
 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;

package/components/SidePage/SidePageFooter/SidePageFooter.js

@@ -11,15 +11,23 @@ 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";
-export
+export var SidePageFooterDataTids = {
+  root: 'SidePageFooter__root'
+};
 /**
-* Футер сайдпейджа.
-*
-* @visibleName SidePage.Footer
-*/
-var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
+ */
+
+export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(SidePageFooter, _React$Component);
 
   function SidePageFooter() {
@@ -49,9 +57,8 @@ var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class
       var wrapper = getRootNode(_assertThisInitialized(_this));
 
       if (wrapper && _this.content) {
-        var wrapperRect = wrapper.getBoundingClientRect();
-
-        var contentRect = _this.content.getBoundingClientRect();
+        var wrapperRect = getDOMRect(wrapper);
+        var contentRect = getDOMRect(_this.content);
 
         var _fixed = wrapperRect.top > contentRect.top;
 
@@ -119,9 +126,18 @@ var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
+    var separator = null;
+
+    if (isTheme2022(this.theme)) {
+      separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
+        fixed: this.state.fixed
+      });
+    }
+
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": SidePageFooterDataTids.root,
       style: {
         height: this.getContentHeight()
       },
@@ -135,10 +151,13 @@ var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class
         style: {
           width: getWidth()
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)),
+      }, 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));
     })));
   };
 
@@ -147,7 +166,7 @@ var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_temp = _class
       return 'auto';
     }
 
-    return this.content.getBoundingClientRect().height;
+    return getDOMRect(this.content).height;
   };
 
   return SidePageFooter;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","responsiveLayout","getRootNode","rootNode","styles","SidePageContext","SidePageFooter","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","setRootNode","height","getContentHeight","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","mobileFooterContent","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = 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"]}
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","responsiveLayout","getRootNode","rootNode","getDOMRect","Gapped","isNonNullable","ModalSeparator","isTheme2022","styles","SidePageContext","SidePageFooterDataTids","root","SidePageFooter","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","separator","setRootNode","height","getContentHeight","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","gap","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  /**\n   * Закрепляет футер снизу сайдпейджа\n   */\n  sticky?: boolean;\n  /**\n   * Задаёт отступ между элементами футера\n   */\n  gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n  fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n  root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state: SidePageFooterState = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    let separator: React.ReactNode = null;\n    if (isTheme2022(this.theme)) {\n      separator = (this.props.panel || this.state.fixed) && <ModalSeparator fixed={this.state.fixed} />;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageFooterDataTids.root}\n          style={{ height: this.getContentHeight() }}\n          className={styles.footerWrapper()}\n        >\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                {separator}\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {isNonNullable(this.props.gap) ? (\n                    <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n                      {this.props.children}\n                    </Gapped>\n                  ) : (\n                    this.props.children\n                  )}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = getDOMRect(wrapper);\n      const contentRect = getDOMRect(this.content);\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return getDOMRect(this.content).height;\n  }\n}\n"]}