@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.styles.ts"],"names":["getStyles","emotion","root","css","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 type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        height: 100%;\n        position: fixed;\n        top: 0;\n      `;\n    },\n\n    mobileRoot() {\n      return emotion.css`\n        width: 100%;\n      `;\n    },\n\n    overlay() {\n      return emotion.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 emotion.css`\n        flex: 1 0 auto;\n        z-index: 0;\n        color: ${t.modalBodyTextColor};\n      `;\n    },\n\n    mobileBody() {\n      return emotion.css`\n        font-size: 16px;\n        line-height: 22px;\n      `;\n    },\n\n    container(t: Theme) {\n      return emotion.css`\n        padding-left: ${t.sidePagePaddingLeft};\n        padding-right: ${t.sidePagePaddingRight};\n      `;\n    },\n\n    mobileContainer(t: Theme) {\n      return emotion.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 emotion.css`\n        padding-top: ${t.sidePagePaddingTop};\n      `;\n    },\n\n    mobileContainerWithoutHeader(t: Theme) {\n      return emotion.css`\n        padding-top: ${t.mobileSidePagePaddingTop};\n      `;\n    },\n\n    containerWithoutFooter(t: Theme) {\n      return emotion.css`\n        padding-bottom: ${t.sidePagePaddingBottom};\n      `;\n    },\n\n    containerWithPanel(t: Theme) {\n      return emotion.css`\n        padding-bottom: ${t.sidePagePaddingBottom};\n      `;\n    },\n\n    focusLock() {\n      return emotion.css`\n        height: 100%;\n      `;\n    },\n\n    wrapper(t: Theme) {\n      return emotion.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 emotion.css`\n        float: left;\n      `;\n    },\n\n    wrapperMarginLeft() {\n      return emotion.css`\n        margin-left: 20px;\n      `;\n    },\n\n    wrapperMarginRight() {\n      return emotion.css`\n        margin-right: 20px;\n      `;\n    },\n\n    headerWrapper() {\n      return emotion.css`\n        flex: 0 0 auto;\n      `;\n    },\n\n    header(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n        padding-left: ${t.mobileSidePagePaddingLeft};\n        padding-right: ${paddingRight}px;\n      `;\n    },\n\n    titleFixed() {\n      return emotion.css`\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      `;\n    },\n\n    background() {\n      return emotion.css`\n        height: 100%;\n        position: absolute;\n        width: 100%;\n      `;\n    },\n\n    backgroundGray(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageBackingBg};\n        opacity: ${t.sidePageBackingBgOpacity};\n      `;\n    },\n\n    shadow(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.sidePageContainerShadow};\n      `;\n    },\n\n    close(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)};\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 emotion.css`\n        padding: ${t.mobileSidePageCloseButtonClickArea};\n        margin: -${t.mobileSidePageCloseButtonClickArea};\n        font-size: 0;\n      `;\n    },\n\n    closeFocus(t: Theme) {\n      return emotion.css`\n        outline: 2px solid ${t.borderColorFocus};\n      `;\n    },\n\n    wrapperClose(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.css`\n        line-height: ${t.sidePageHeaderFixedLineHeight};\n        padding: ${t.sidePageHeaderFixedPaddingY} 0;\n      `;\n    },\n\n    footerWrapper() {\n      return emotion.css`\n        flex: 0 0 auto;\n      `;\n    },\n\n    footer(t: Theme) {\n      return emotion.css`\n        bottom: 0;\n        position: fixed;\n        z-index: 10;\n        color: ${t.sidePageFooterTextColor};\n      `;\n    },\n\n    positionStatic() {\n      return emotion.css`\n        position: static;\n      `;\n    },\n\n    footerContent(t: Theme) {\n      return emotion.css`\n        padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n          ${t.sidePagePaddingLeft};\n      `;\n    },\n\n    mobileFooterContent(t: Theme) {\n      return emotion.css`\n        display: flex;\n        flex-flow: column nowrap;\n        padding: ${t.mobileSidePageFooterPadding};\n      `;\n    },\n\n    footerFixed(t: Theme) {\n      return emotion.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 emotion.css`\n        &:before {\n          box-shadow: ${t.sidePageFixedPanelShadow};\n        }\n      `;\n    },\n\n    transitionLeft() {\n      return emotion.css`\n        transform: translateX(100px);\n      `;\n    },\n\n    transitionRight() {\n      return emotion.css`\n        transform: translateX(-100px);\n      `;\n    },\n\n    transitionActive() {\n      return emotion.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 emotion.css`\n        opacity: 1;\n      `;\n    },\n\n    transitionLeaveActive() {\n      return emotion.css`\n        opacity: 0.01 !important;\n        transition: opacity 0.15s ease-out;\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["SidePage.styles.ts"],"names":["styles","root","css","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/cjs/components/SidePage/SidePageBody.d.ts

@@ -17,7 +17,6 @@ export declare class SidePageBody extends React.Component<SidePageBodyProps> {
     static displayName: string;
     static contextType: React.Context<SidePageContextType>;
     context: SidePageContextType;
-    private emotion;
     private isMobileLayout;
     private setRootNode;
     componentDidUpdate(): void;

package/cjs/components/SidePage/SidePageBody.js

@@ -1,11 +1,10 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SidePageBodyDataTids = exports.SidePageBody = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _decorator = require("../ResponsiveLayout/decorator");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _SidePage = require("./SidePage.styles");
 var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
@@ -33,31 +32,22 @@ SidePageBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)
 
 
 
-
   componentDidUpdate = function componentDidUpdate() {
     this.context.updateLayout();
   };_proto.
 
   render = function render() {var _this2 = this;
     return /*#__PURE__*/(
-      _react.default.createElement(_Emotion.EmotionConsumer, null,
-      function (emotion) {
-        _this2.emotion = emotion;
+      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
+      function (theme) {var _cx;
         return /*#__PURE__*/(
-          _react.default.createElement(_ThemeContext.ThemeConsumer, null,
-          function (theme) {var _this2$emotion$cx;
-            var styles = (0, _SidePage.getStyles)(_this2.emotion);
-            return /*#__PURE__*/(
-              _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/
-              _react.default.createElement("div", {
-                "data-tid": SidePageBodyDataTids.root,
-                className: _this2.emotion.cx(styles.body(theme), (_this2$emotion$cx = {}, _this2$emotion$cx[styles.mobileBody()] = _this2.isMobileLayout, _this2$emotion$cx)) },
-
-              _this2.props.children)));
-
+          _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/
+          _react.default.createElement("div", {
+            "data-tid": SidePageBodyDataTids.root,
+            className: (0, _Emotion.cx)(_SidePage.styles.body(theme), (_cx = {}, _cx[_SidePage.styles.mobileBody()] = _this2.isMobileLayout, _cx)) },
 
+          _this2.props.children)));
 
-          }));
 
 
       }));

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageBody.tsx"],"names":["SidePageBodyDataTids","root","SidePageBody","responsiveLayout","rootNode","context","componentDidUpdate","updateLayout","render","emotion","theme","styles","setRootNode","props","cx","body","mobileBody","isMobileLayout","children","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext"],"mappings":"iXAAA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA,oD;;;;;;AAMO,IAAMA,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B,EAA7B;;AAGP;AACA;AACA;AACA;AACA,G;;;AAGaC,Y,OAFZC,2B,eACAC,kB;;;;;AAMQC,IAAAA,O,GAA+B,MAAKA,O;;;;;AAKpCC,EAAAA,kB,GAAP,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,wBAAD;AACG,gBAACC,OAAD,EAAa;AACZ,QAAA,MAAI,CAACA,OAAL,GAAeA,OAAf;AACA;AACE,uCAAC,2BAAD;AACG,oBAACC,KAAD,EAAW;AACV,gBAAMC,MAAM,GAAG,yBAAU,MAAI,CAACF,OAAf,CAAf;AACA;AACE,2CAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACG,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,4BAAUb,oBAAoB,CAACC,IADjC;AAEE,gBAAA,SAAS,EAAE,MAAI,CAACQ,OAAL,CAAaK,EAAb,CAAgBH,MAAM,CAACI,IAAP,CAAYL,KAAZ,CAAhB,6CAAuCC,MAAM,CAACK,UAAP,EAAvC,IAA6D,MAAI,CAACC,cAAlE,qBAFb;;AAIG,cAAA,MAAI,CAACJ,KAAL,CAAWK,QAJd,CADF,CADF;;;;AAUD,WAbH,CADF;;;AAiBD,OApBH,CADF;;;AAwBD,G,uBAvC+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UACtBC,W,GAAc,c,UAEdC,W,GAAcC,gC","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } 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 emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                const styles = getStyles(this.emotion);\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    <div\n                      data-tid={SidePageBodyDataTids.root}\n                      className={this.emotion.cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}\n                    >\n                      {this.props.children}\n                    </div>\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SidePageBody.tsx"],"names":["SidePageBodyDataTids","root","SidePageBody","responsiveLayout","rootNode","context","componentDidUpdate","updateLayout","render","theme","setRootNode","props","styles","body","mobileBody","isMobileLayout","children","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext"],"mappings":"iXAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,oD;;;;;;AAMO,IAAMA,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B,EAA7B;;AAGP;AACA;AACA;AACA;AACA,G;;;AAGaC,Y,OAFZC,2B,eACAC,kB;;;;;AAMQC,IAAAA,O,GAA+B,MAAKA,O;;;;AAIpCC,EAAAA,kB,GAAP,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUX,oBAAoB,CAACC,IADjC;AAEE,YAAA,SAAS,EAAE,iBAAGW,iBAAOC,IAAP,CAAYJ,KAAZ,CAAH,iBAA0BG,iBAAOE,UAAP,EAA1B,IAAgD,MAAI,CAACC,cAArD,OAFb;;AAIG,UAAA,MAAI,CAACJ,KAAL,CAAWK,QAJd,CADF,CADF;;;;AAUD,OAZH,CADF;;;AAgBD,G,uBA9B+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UACtBC,W,GAAc,c,UAEdC,W,GAAcC,gC","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/cjs/components/SidePage/SidePageCloseButton.js

@@ -1,23 +1,22 @@
 "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.SidePageCloseButton = void 0;var _react = _interopRequireWildcard(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _Emotion = require("../../lib/theming/Emotion");
 var _keyListener = require("../../lib/events/keyListener");
-var _useTheme = require("../../lib/theming/useTheme");
 
 var _SidePage = require("./SidePage.styles");
 var _locale = require("./locale");
 var _SidePageHeader = require("./SidePageHeader");
 var _SidePageContext = require("./SidePageContext");
 
-var SidePageCloseButton = function SidePageCloseButton() {var _emotion$cx;
-  var emotion = (0, _Emotion.useEmotion)();
+var SidePageCloseButton = function SidePageCloseButton() {var _cx;
   var _useState = (0, _react.useState)(false),isFocusedByTab = _useState[0],setIsFocusedByTab = _useState[1];
 
   var locale = (0, _useLocaleForControl.useLocaleForControl)('SidePage', _locale.SidePageLocaleHelper);
-  var theme = (0, _useTheme.useTheme)();
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
   var sidePageContext = (0, _react.useContext)(_SidePageContext.SidePageContext);
 
   var handleFocus = function handleFocus() {
@@ -32,13 +31,11 @@ var SidePageCloseButton = function SidePageCloseButton() {var _emotion$cx;
     setIsFocusedByTab(false);
   };
 
-  var styles = (0, _SidePage.getStyles)(emotion);
-
   return /*#__PURE__*/(
     _react.default.createElement("button", {
       "aria-label": locale == null ? void 0 : locale.closeButtonAriaLabel,
-      className: emotion.cx(styles.close(theme), (_emotion$cx = {}, _emotion$cx[
-      styles.closeFocus(theme)] = isFocusedByTab, _emotion$cx)),
+      className: (0, _Emotion.cx)(_SidePage.styles.close(theme), (_cx = {}, _cx[
+      _SidePage.styles.closeFocus(theme)] = isFocusedByTab, _cx)),
 
       onFocus: handleFocus,
       onBlur: handleBlur,

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageCloseButton.tsx"],"names":["SidePageCloseButton","emotion","isFocusedByTab","setIsFocusedByTab","locale","SidePageLocaleHelper","theme","sidePageContext","SidePageContext","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","styles","closeButtonAriaLabel","cx","close","closeFocus","requestClose","SidePageHeaderDataTids","__KONTUR_REACT_UI__","displayName"],"mappings":"2KAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,MAAMC,OAAO,GAAG,0BAAhB;AACA,kBAA4C,qBAAS,KAAT,CAA5C,CAAOC,cAAP,gBAAuBC,iBAAvB;;AAEA,MAAMC,MAAM,GAAG,8CAAoB,UAApB,EAAgCC,4BAAhC,CAAf;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,MAAMC,eAAe,GAAG,uBAAWC,gCAAX,CAAxB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBC,+BAAaC,qBAAb,+CAAaA,qBAAb,CAAqC,YAAM;AACzC,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BV,QAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AACF,KAJD;AAKD,GAND;;AAQA,MAAMW,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBX,IAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD,GAFD;;AAIA,MAAMY,MAAM,GAAG,yBAAUd,OAAV,CAAf;;AAEA;AACE;AACE,oBAAYG,MAAZ,oBAAYA,MAAM,CAAEY,oBADtB;AAEE,MAAA,SAAS,EAAEf,OAAO,CAACgB,EAAR,CAAWF,MAAM,CAACG,KAAP,CAAaZ,KAAb,CAAX;AACRS,MAAAA,MAAM,CAACI,UAAP,CAAkBb,KAAlB,CADQ,IACmBJ,cADnB,eAFb;;AAKE,MAAA,OAAO,EAAEO,WALX;AAME,MAAA,MAAM,EAAEK,UANV;AAOE,MAAA,OAAO,EAAEP,eAAe,CAACa,YAP3B;AAQE,kBAAUC,uCAAuBH,KARnC;;AAUE,iCAAC,oBAAD,OAVF,CADF;;;AAcD,CApCM,C;;AAsCPlB,mBAAmB,CAACsB,mBAApB,GAA0C,qBAA1C;AACAtB,mBAAmB,CAACuB,WAApB,GAAkC,qBAAlC","sourcesContent":["import React, { useContext, useState } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './SidePage.styles';\nimport { SidePageLocaleHelper } from './locale';\nimport { SidePageHeaderDataTids } from './SidePageHeader';\nimport { SidePageContext } from './SidePageContext';\n\nexport const SidePageCloseButton = () => {\n  const emotion = useEmotion();\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const theme = useTheme();\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  const styles = getStyles(emotion);\n\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={emotion.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"]}
+{"version":3,"sources":["SidePageCloseButton.tsx"],"names":["SidePageCloseButton","isFocusedByTab","setIsFocusedByTab","locale","SidePageLocaleHelper","theme","ThemeContext","sidePageContext","SidePageContext","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","closeButtonAriaLabel","styles","close","closeFocus","requestClose","SidePageHeaderDataTids","__KONTUR_REACT_UI__","displayName"],"mappings":"2KAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,kBAA4C,qBAAS,KAAT,CAA5C,CAAOC,cAAP,gBAAuBC,iBAAvB;;AAEA,MAAMC,MAAM,GAAG,8CAAoB,UAApB,EAAgCC,4BAAhC,CAAf;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,eAAe,GAAG,uBAAWC,gCAAX,CAAxB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBC,+BAAaC,qBAAb,+CAAaA,qBAAb,CAAqC,YAAM;AACzC,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BX,QAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AACF,KAJD;AAKD,GAND;;AAQA,MAAMY,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBZ,IAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD,GAFD;;AAIA;AACE;AACE,oBAAYC,MAAZ,oBAAYA,MAAM,CAAEY,oBADtB;AAEE,MAAA,SAAS,EAAE,iBAAGC,iBAAOC,KAAP,CAAaZ,KAAb,CAAH;AACRW,uBAAOE,UAAP,CAAkBb,KAAlB,CADQ,IACmBJ,cADnB,OAFb;;AAKE,MAAA,OAAO,EAAEQ,WALX;AAME,MAAA,MAAM,EAAEK,UANV;AAOE,MAAA,OAAO,EAAEP,eAAe,CAACY,YAP3B;AAQE,kBAAUC,uCAAuBH,KARnC;;AAUE,iCAAC,oBAAD,OAVF,CADF;;;AAcD,CAjCM,C;;AAmCPjB,mBAAmB,CAACqB,mBAApB,GAA0C,qBAA1C;AACArB,mBAAmB,CAACsB,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/cjs/components/SidePage/SidePageContainer.d.ts

@@ -13,7 +13,6 @@ export declare class SidePageContainer extends React.Component<SidePageContainer
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     private theme;
-    private emotion;
     private isMobileLayout;
     private setRootNode;
     render(): JSX.Element;

package/cjs/components/SidePage/SidePageContainer.js

@@ -1,15 +1,14 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SidePageContainerDataTids = exports.SidePageContainer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 
 var _Emotion = require("../../lib/theming/Emotion");
 var _decorator = require("../ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
-var _SidePageContext = require("./SidePageContext");
-var _SidePage = require("./SidePage.styles");var _class, _class2, _temp;
+var _SidePage = require("./SidePage.styles");
+var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
 
 
 
@@ -32,41 +31,31 @@ SidePageContainer = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.root
 
 
 
-
   render = function render() {var _this = this;
     return /*#__PURE__*/(
-      _react.default.createElement(_Emotion.EmotionConsumer, null,
-      function (emotion) {
-        _this.emotion = emotion;
-        return /*#__PURE__*/(
-          _react.default.createElement(_ThemeContext.ThemeConsumer, null,
-          function (theme) {
-            _this.theme = theme;
-            return _this.renderMain();
-          }));
-
-
+      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
+      function (theme) {
+        _this.theme = theme;
+        return _this.renderMain();
       }));
 
 
   };_proto.
 
   renderMain = function renderMain() {var _this2 = this;
-    var styles = (0, _SidePage.getStyles)(this.emotion);
-
     return /*#__PURE__*/(
       _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
-      function (_ref) {var _this2$emotion$cx;var hasHeader = _ref.hasHeader,hasFooter = _ref.hasFooter,hasPanel = _ref.hasPanel;return /*#__PURE__*/(
+      function (_ref) {var _cx;var hasHeader = _ref.hasHeader,hasFooter = _ref.hasFooter,hasPanel = _ref.hasPanel;return /*#__PURE__*/(
           _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/
           _react.default.createElement("div", {
             "data-tid": SidePageContainerDataTids.root,
-            className: _this2.emotion.cx((_this2$emotion$cx = {}, _this2$emotion$cx[
-            styles.container(_this2.theme)] = true, _this2$emotion$cx[
-            styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _this2$emotion$cx[
-            styles.containerWithoutFooter(_this2.theme)] = !hasFooter, _this2$emotion$cx[
-            styles.containerWithPanel(_this2.theme)] = hasPanel, _this2$emotion$cx[
-            styles.mobileContainer(_this2.theme)] = _this2.isMobileLayout, _this2$emotion$cx[
-            styles.mobileContainerWithoutHeader(_this2.theme)] = _this2.isMobileLayout && !hasHeader, _this2$emotion$cx)) },
+            className: (0, _Emotion.cx)((_cx = {}, _cx[
+            _SidePage.styles.container(_this2.theme)] = true, _cx[
+            _SidePage.styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _cx[
+            _SidePage.styles.containerWithoutFooter(_this2.theme)] = !hasFooter, _cx[
+            _SidePage.styles.containerWithPanel(_this2.theme)] = hasPanel, _cx[
+            _SidePage.styles.mobileContainer(_this2.theme)] = _this2.isMobileLayout, _cx[
+            _SidePage.styles.mobileContainerWithoutHeader(_this2.theme)] = _this2.isMobileLayout && !hasHeader, _cx)) },
 
 
           _this2.props.children)));}));

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContainer.tsx"],"names":["SidePageContainerDataTids","root","SidePageContainer","responsiveLayout","rootNode","render","emotion","theme","renderMain","styles","hasHeader","hasFooter","hasPanel","setRootNode","props","cx","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"2XAAA;;;AAGA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,6C;;;;AAIO,IAAMA,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA,G;;;AAGaC,iB,OAFZC,2B,eACAC,kB;;;;;;;;;AAUQC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,wBAAD;AACG,gBAACC,OAAD,EAAa;AACZ,QAAA,KAAI,CAACA,OAAL,GAAeA,OAAf;AACA;AACE,uCAAC,2BAAD;AACG,oBAACC,KAAD,EAAW;AACV,YAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,mBAAO,KAAI,CAACC,UAAL,EAAP;AACD,WAJH,CADF;;;AAQD,OAXH,CADF;;;AAeD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAMC,MAAM,GAAG,yBAAU,KAAKH,OAAf,CAAf;;AAEA;AACE,mCAAC,gCAAD,CAAiB,QAAjB;AACG,iDAAGI,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUd,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAE,MAAI,CAACK,OAAL,CAAaS,EAAb;AACRN,YAAAA,MAAM,CAACO,SAAP,CAAiB,MAAI,CAACT,KAAtB,CADQ,IACuB,IADvB;AAERE,YAAAA,MAAM,CAACQ,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAFQ,IAEoC,CAACG,SAFrC;AAGRD,YAAAA,MAAM,CAACS,sBAAP,CAA8B,MAAI,CAACX,KAAnC,CAHQ,IAGoC,CAACI,SAHrC;AAIRF,YAAAA,MAAM,CAACU,kBAAP,CAA0B,MAAI,CAACZ,KAA/B,CAJQ,IAIgCK,QAJhC;AAKRH,YAAAA,MAAM,CAACW,eAAP,CAAuB,MAAI,CAACb,KAA5B,CALQ,IAK6B,MAAI,CAACc,cALlC;AAMRZ,YAAAA,MAAM,CAACa,4BAAP,CAAoC,MAAI,CAACf,KAAzC,CANQ,IAM0C,MAAI,CAACc,cAAL,IAAuB,CAACX,SANlE,qBAFb;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWS,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,G,4BAnDoCC,eAAMC,S,WAC7BC,mB,GAAsB,mB,UACtBC,W,GAAc,mB","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext } from './SidePageContext';\nimport { getStyles } from './SidePage.styles';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n  public static displayName = 'SidePageContainer';\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={this.emotion.cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SidePageContainer.tsx"],"names":["SidePageContainerDataTids","root","SidePageContainer","responsiveLayout","rootNode","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","styles","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"2XAAA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,oD;;;;AAIO,IAAMA,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA,G;;;AAGaC,iB,OAFZC,2B,eACAC,kB;;;;;;;;AASQC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB;AACE,mCAAC,gCAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUZ,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAE;AACRY,6BAAOC,SAAP,CAAiB,MAAI,CAACR,KAAtB,CADQ,IACuB,IADvB;AAERO,6BAAOE,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAFQ,IAEoC,CAACE,SAFrC;AAGRK,6BAAOG,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAHQ,IAGoC,CAACG,SAHrC;AAIRI,6BAAOI,kBAAP,CAA0B,MAAI,CAACX,KAA/B,CAJQ,IAIgCI,QAJhC;AAKRG,6BAAOK,eAAP,CAAuB,MAAI,CAACZ,KAA5B,CALQ,IAK6B,MAAI,CAACa,cALlC;AAMRN,6BAAOO,4BAAP,CAAoC,MAAI,CAACd,KAAzC,CANQ,IAM0C,MAAI,CAACa,cAAL,IAAuB,CAACX,SANlE,OAFb;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWS,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,G,4BAzCoCC,eAAMC,S,WAC7BC,mB,GAAsB,mB,UACtBC,W,GAAc,mB","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/cjs/components/SidePage/SidePageFooter.d.ts

@@ -36,7 +36,6 @@ export declare class SidePageFooter extends React.Component<SidePageFooterProps,
     private isMobileLayout;
     state: SidePageFooterState;
     private theme;
-    private emotion;
     private content;
     private layoutSub;
     private setRootNode;

package/cjs/components/SidePage/SidePageFooter.js

@@ -1,7 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.SidePageFooterDataTids = exports.SidePageFooter = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -12,10 +12,9 @@ var _Gapped = require("../Gapped");
 var _utils = require("../../lib/utils");
 var _ModalSeparator = require("../Modal/ModalSeparator");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
-var _SidePageContext = require("./SidePageContext");
-var _SidePage = require("./SidePage.styles");var _class, _class2, _temp;
+var _SidePage = require("./SidePage.styles");
+var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
 
 
 
@@ -61,7 +60,6 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-
     content = null;_this.
     layoutSub = null;_this.
 
@@ -102,13 +100,6 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-
-
-
-
-
-
-
 
 
 
@@ -168,7 +159,6 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-
 
 
     refContent = function (node) {
@@ -183,7 +173,7 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
         var _fixed = wrapperRect.top > contentRect.top;
         _this.setState({ fixed: _fixed });
       }
-    };return _this;}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 /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var _this3 = this;var separator = null;if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/_react.default.createElement(_ModalSeparator.ModalSeparator, { fixed: this.state.fixed });}var styles = (0, _SidePage.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageFooterDataTids.root, style: { height: this.getContentHeight() }, className: styles.footerWrapper() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _this3$emotion$cx, _this3$emotion$cx2;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: _this3.emotion.cx(styles.footer(_this3.theme), (_this3$emotion$cx = {}, _this3$emotion$cx[styles.positionStatic()] = !_this3.getSticky(), _this3$emotion$cx)), style: { width: getWidth() } }, separator, /*#__PURE__*/_react.default.createElement("div", { className: _this3.emotion.cx(styles.footerContent(_this3.theme), (_this3$emotion$cx2 = {}, _this3$emotion$cx2[styles.footerFixed(_this3.theme)] = _this3.state.fixed, _this3$emotion$cx2[styles.panel(_this3.theme)] = !!_this3.props.panel, _this3$emotion$cx2[styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _this3$emotion$cx2[styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _this3$emotion$cx2)), ref: _this3.refContent }, (0, _utils.isNonNullable)(_this3.props.gap) ? /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: _this3.isMobileLayout, gap: _this3.props.gap }, _this3.props.children) : _this3.props.children));})));};_proto.
+    };return _this;}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 /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this3 = this;var separator = null;if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/_react.default.createElement(_ModalSeparator.ModalSeparator, { fixed: this.state.fixed });}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageFooterDataTids.root, style: { height: this.getContentHeight() }, className: _SidePage.styles.footerWrapper() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cx, _cx2;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footer(_this3.theme), (_cx = {}, _cx[_SidePage.styles.positionStatic()] = !_this3.getSticky(), _cx)), style: { width: getWidth() } }, separator, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[_SidePage.styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[_SidePage.styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[_SidePage.styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _cx2[_SidePage.styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)), ref: _this3.refContent }, (0, _utils.isNonNullable)(_this3.props.gap) ? /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: _this3.isMobileLayout, gap: _this3.props.gap }, _this3.props.children) : _this3.props.children));})));};_proto.
 
   getContentHeight = function getContentHeight() {
     if (!this.content) {

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooterDataTids","root","SidePageFooter","responsiveLayout","rootNode","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","emotion","theme","renderMain","separator","styles","setRootNode","height","getContentHeight","footerWrapper","getWidth","cx","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","gap","children","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { getStyles } from './SidePage.styles';\n\nexport interface SidePageFooterProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  /**\n   * Закрепляет футер снизу сайдпейджа\n   */\n  sticky?: boolean;\n  /**\n   * Задаёт отступ между элементами футера\n   */\n  gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n  fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n  root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n  public static displayName = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state: SidePageFooterState = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    let separator: React.ReactNode = null;\n    if (isTheme2022(this.theme)) {\n      separator = (this.props.panel || this.state.fixed) && <ModalSeparator fixed={this.state.fixed} />;\n    }\n\n    const styles = getStyles(this.emotion);\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageFooterDataTids.root}\n          style={{ height: this.getContentHeight() }}\n          className={styles.footerWrapper()}\n        >\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={this.emotion.cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                {separator}\n                <div\n                  className={this.emotion.cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {isNonNullable(this.props.gap) ? (\n                    <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n                      {this.props.children}\n                    </Gapped>\n                  ) : (\n                    this.props.children\n                  )}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = getDOMRect(wrapper);\n      const contentRect = getDOMRect(this.content);\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return getDOMRect(this.content).height;\n  }\n}\n"]}
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooterDataTids","root","SidePageFooter","responsiveLayout","rootNode","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","separator","setRootNode","height","getContentHeight","styles","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","gap","children","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext"],"mappings":"kkBAAA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,oD;;;;;;;;;;;;;;;;;;;;;;AAsBO,IAAMA,sBAAsB,GAAG;AACpCC,EAAAA,IAAI,EAAE,sBAD8B,EAA/B;;;AAIP;AACA;AACA;AACA;AACA,G;;;AAGaC,c,OAFZC,2B,eACAC,kB;;;;;AAMQC,IAAAA,O,GAA+B,MAAKA,O;;;AAGpCC,IAAAA,K,GAA6B;AAClCC,MAAAA,KAAK,EAAE,KAD2B,E;;;;AAK5BC,IAAAA,O,GAA8B,I;AAC9BC,IAAAA,S,GAAgE,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CjEC,IAAAA,M,GAAS,YAAM;AACpB,YAAKC,eAAL;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDOC,IAAAA,U,GAAa,UAACC,IAAD,EAA8B;AACjD,YAAKL,OAAL,GAAeK,IAAf;AACD,K;;AAEOF,IAAAA,e,GAAkB,YAAM;AAC9B,UAAMG,OAAO,GAAG,uEAAhB;AACA,UAAIA,OAAO,IAAI,MAAKN,OAApB,EAA6B;AAC3B,YAAMO,WAAW,GAAG,4BAAWD,OAAX,CAApB;AACA,YAAME,WAAW,GAAG,4BAAW,MAAKR,OAAhB,CAApB;AACA,YAAMD,MAAK,GAAGQ,WAAW,CAACE,GAAZ,GAAkBD,WAAW,CAACC,GAA5C;AACA,cAAKC,QAAL,CAAc,EAAEX,KAAK,EAALA,MAAF,EAAd;AACD;AACF,K,4DA7GMY,iB,GAAP,6BAA2B,iFACzB,KAAKd,OAAL,CAAae,SAAb,CAAuB,IAAvB,EACA,KAAKV,MAAL,GACA,KAAKD,SAAL,GAAiBY,YAAY,CAACC,WAAb,CAAyB,KAAKZ,MAA9B,CAAjB,CACA,+CAAKL,OAAL,EAAakB,YAAb,+DACA,gDAAKlB,OAAL,EAAamB,WAAb,gEAA2B,KAAKC,KAAL,CAAWC,KAAtC,EACD,C,QAEMC,kB,GAAP,4BAA0BC,SAA1B,EAAoE,4CAClE,KAAKH,KAAL,CAAWC,KAAX,KAAqBE,SAAS,CAACF,KAA/B,+BAAwC,uBAAKrB,OAAL,EAAamB,WAArD,qBAAwC,4CAA2B,KAAKC,KAAL,CAAWC,KAAtC,CAAxC,EACD,C,QAEMG,oB,GAAP,gCAA8B,oFAC5B,KAAKxB,OAAL,CAAae,SAAb,CAAuB,IAAvB,EACA,IAAI,KAAKX,SAAT,EAAoB,CAClB,KAAKA,SAAL,CAAeqB,MAAf,GACD,CACD,iDAAKzB,OAAL,EAAakB,YAAb,iEAA4B,KAA5B,EACA,iDAAKlB,OAAL,EAAamB,WAAb,iEAA2B,KAA3B,EACD,C,QAEMO,S,GAAP,qBAAmB,CACjB,IAAI,OAAO,KAAKN,KAAL,CAAWO,MAAlB,KAA6B,WAAjC,EAA8C,CAC5C,OAAO,KAAKP,KAAL,CAAWO,MAAlB,CACD,CAED,IAAI,KAAKC,cAAT,EAAyB,CACvB,OAAO,KAAP,CACD,CAED,OAAO,IAAP,CACD,C,QAEMC,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAMOA,U,GAAR,sBAAqB,mBACnB,IAAIC,SAA0B,GAAG,IAAjC,CACA,IAAI,+BAAY,KAAKF,KAAjB,CAAJ,EAA6B,CAC3BE,SAAS,GAAG,CAAC,KAAKZ,KAAL,CAAWC,KAAX,IAAoB,KAAKpB,KAAL,CAAWC,KAAhC,kBAA0C,6BAAC,8BAAD,IAAgB,KAAK,EAAE,KAAKD,KAAL,CAAWC,KAAlC,GAAtD,CACD,CAED,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAK+B,WAAjC,IAAkD,KAAKb,KAAvD,gBACE,sCACE,YAAUzB,sBAAsB,CAACC,IADnC,EAEE,KAAK,EAAE,EAAEsC,MAAM,EAAE,KAAKC,gBAAL,EAAV,EAFT,EAGE,SAAS,EAAEC,iBAAOC,aAAP,EAHb,iBAKE,6BAAC,gCAAD,CAAiB,QAAjB,QACG,mCAAGC,QAAH,QAAGA,QAAH,qBACC,sCACE,SAAS,EAAE,iBAAGF,iBAAOG,MAAP,CAAc,MAAI,CAACT,KAAnB,CAAH,iBACRM,iBAAOI,cAAP,EADQ,IACkB,CAAC,MAAI,CAACd,SAAL,EADnB,OADb,EAIE,KAAK,EAAE,EACLe,KAAK,EAAEH,QAAQ,EADV,EAJT,IAQGN,SARH,eASE,sCACE,SAAS,EAAE,iBAAGI,iBAAOM,aAAP,CAAqB,MAAI,CAACZ,KAA1B,CAAH,mBACRM,iBAAOO,WAAP,CAAmB,MAAI,CAACb,KAAxB,CADQ,IACyB,MAAI,CAAC7B,KAAL,CAAWC,KADpC,OAERkC,iBAAOf,KAAP,CAAa,MAAI,CAACS,KAAlB,CAFQ,IAEmB,CAAC,CAAC,MAAI,CAACV,KAAL,CAAWC,KAFhC,OAGRe,iBAAOQ,UAAP,CAAkB,MAAI,CAACd,KAAvB,CAHQ,IAGwB,CAAC,CAAC,MAAI,CAACV,KAAL,CAAWC,KAAb,IAAsB,MAAI,CAACpB,KAAL,CAAWC,KAHzD,OAIRkC,iBAAOS,mBAAP,CAA2B,MAAI,CAACf,KAAhC,CAJQ,IAIiC,MAAI,CAACF,cAJtC,QADb,EAOE,GAAG,EAAE,MAAI,CAACrB,UAPZ,IASG,0BAAc,MAAI,CAACa,KAAL,CAAW0B,GAAzB,iBACC,6BAAC,cAAD,IAAQ,QAAQ,EAAE,MAAI,CAAClB,cAAvB,EAAuC,GAAG,EAAE,MAAI,CAACR,KAAL,CAAW0B,GAAvD,IACG,MAAI,CAAC1B,KAAL,CAAW2B,QADd,CADD,GAKC,MAAI,CAAC3B,KAAL,CAAW2B,QAdf,CATF,CADD,EADH,CALF,CADF,CADF,CAyCD,C;;AAgBOZ,EAAAA,gB,GAAR,4BAA2B;AACzB,QAAI,CAAC,KAAKhC,OAAV,EAAmB;AACjB,aAAO,MAAP;AACD;AACD,WAAO,4BAAW,KAAKA,OAAhB,EAAyB+B,MAAhC;AACD,G,yBArIiCc,eAAMC,S,WAC1BC,mB,GAAsB,gB,UACtBC,W,GAAc,gB,UAEdC,W,GAAcC,gC","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  public static displayName = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state: SidePageFooterState = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private 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"]}

package/cjs/components/SidePage/SidePageHeader.d.ts

@@ -27,7 +27,6 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     state: SidePageHeaderState;
     static defaultProps: Partial<SidePageHeaderProps>;
     private theme;
-    private emotion;
     private wrapper;
     private sticky;
     private lastRegularHeight;

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,9 +1,9 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SidePageHeaderDataTids = exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 
-
 var _Sticky = require("../Sticky");
 var _utils = require("../../lib/utils");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -12,11 +12,10 @@ var _rootNode = require("../../lib/rootNode");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 var _ModalSeparator = require("../Modal/ModalSeparator");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _SidePage = require("./SidePage.styles");
 var _SidePageContext = require("./SidePageContext");
-var _SidePageCloseButton = require("./SidePageCloseButton");
-var _SidePage = require("./SidePage.styles");var _class, _class2, _temp;
+var _SidePageCloseButton = require("./SidePageCloseButton");var _class, _class2, _temp;
 
 
 
@@ -58,7 +57,6 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-
     wrapper = null;_this.
     sticky = null;_this.
     lastRegularHeight = 0;_this.
@@ -144,29 +142,19 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-
-
-
-
-
-
-
-
-    renderHeader = function (fixed) {var _this$emotion$cx, _this$emotion$cx2;if (fixed === void 0) {fixed = false;}
-      var styles = (0, _SidePage.getStyles)(_this.emotion);
-
+    renderHeader = function (fixed) {var _cx, _cx2;if (fixed === void 0) {fixed = false;}
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          className: _this.emotion.cx(styles.header(_this.theme), (_this$emotion$cx = {}, _this$emotion$cx[
-          styles.headerFixed(_this.theme)] = fixed, _this$emotion$cx[
-          styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _this$emotion$cx)) },
+          className: (0, _Emotion.cx)(_SidePage.styles.header(_this.theme), (_cx = {}, _cx[
+          _SidePage.styles.headerFixed(_this.theme)] = fixed, _cx[
+          _SidePage.styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx)) },
 
 
         _this.renderClose(fixed), /*#__PURE__*/
         _react.default.createElement("div", {
-          className: _this.emotion.cx(styles.title(_this.theme), (_this$emotion$cx2 = {}, _this$emotion$cx2[
-          styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _this$emotion$cx2[
-          styles.titleFixed()] = fixed, _this$emotion$cx2)) },
+          className: (0, _Emotion.cx)(_SidePage.styles.title(_this.theme), (_cx2 = {}, _cx2[
+          _SidePage.styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[
+          _SidePage.styles.titleFixed()] = fixed, _cx2)) },
 
 
         (0, _utils.isFunction)(_this.props.children) ? _this.props.children(fixed) : _this.props.children)));
@@ -185,15 +173,13 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     };_this.
 
-    renderClose = function (fixed) {var _this$emotion$cx3;
+    renderClose = function (fixed) {var _cx3;
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
-      var styles = (0, _SidePage.getStyles)(_this.emotion);
-
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          className: _this.emotion.cx(styles.wrapperClose(_this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[
-          styles.wrapperCloseFixed(_this.theme)] = fixed, _this$emotion$cx3[
-          styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _this$emotion$cx3)) },
+          className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[
+          _SidePage.styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[
+          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3)) },
 
 
         _this.isMobileLayout ?
@@ -221,4 +207,4 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     stickyRef = function (el) {
       _this.sticky = el;
-    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();var header = (0, _ThemeHelpers.isTheme2022)(this.theme) ? this.renderHeader2022 : this.renderHeader;var styles = (0, _SidePage.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageHeaderDataTids.root, ref: this.wrapperRef, className: styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, side: "top" }, header) : header()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = (0, _getDOMRect.getDOMRect)(this.wrapper).height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.displayName = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _class2.defaultProps = { hasSeparator: false }, _temp)) || _class) || _class;exports.SidePageHeader = SidePageHeader;
+    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();var header = (0, _ThemeHelpers.isTheme2022)(this.theme) ? this.renderHeader2022 : this.renderHeader;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageHeaderDataTids.root, ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, side: "top" }, header) : header()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = (0, _getDOMRect.getDOMRect)(this.wrapper).height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.displayName = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _class2.defaultProps = { hasSeparator: false }, _temp)) || _class) || _class;exports.SidePageHeader = SidePageHeader;