@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-5e1c3.0

package/components/SidePage/SidePage.styles.js

@@ -1,52 +1,158 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `SidePage.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    root: 'react-ui-SidePage-root',
-    overlay: 'react-ui-SidePage-overlay',
-    body: 'react-ui-SidePage-body',
-    mobileBody: 'react-ui-SidePage-mobileBody',
-    container: 'react-ui-SidePage-container',
-    mobileContainer: 'react-ui-SidePage-mobileContainer',
-    containerWithoutHeader: 'react-ui-SidePage-containerWithoutHeader',
-    mobileContainerWithoutHeader: 'react-ui-SidePage-mobileContainerWithoutHeader',
-    containerWithoutFooter: 'react-ui-SidePage-containerWithoutFooter',
-    containerWithPanel: 'react-ui-SidePage-containerWithPanel',
-    focusLock: 'react-ui-SidePage-focusLock',
-    wrapper: 'react-ui-SidePage-wrapper',
-    wrapperLeft: 'react-ui-SidePage-wrapperLeft',
-    wrapperMarginLeft: 'react-ui-SidePage-wrapperMarginLeft',
-    wrapperMarginRight: 'react-ui-SidePage-wrapperMarginRight',
-    headerWrapper: 'react-ui-SidePage-headerWrapper',
-    header: 'react-ui-SidePage-header',
-    mobileHeader: 'react-ui-SidePage-mobileHeader',
-    headerFixed: 'react-ui-SidePage-headerFixed',
-    headerNativeStuck: 'react-ui-SidePage-headerNativeStuck',
-    title: 'react-ui-SidePage-title',
-    mobileTitle: 'react-ui-SidePage-mobileTitle',
-    titleCut: 'react-ui-SidePage-titleCut',
-    background: 'react-ui-SidePage-background',
-    backgroundGray: 'react-ui-SidePage-backgroundGray',
-    shadow: 'react-ui-SidePage-shadow',
-    close: 'react-ui-SidePage-close',
-    closeSticky: 'react-ui-SidePage-closeSticky',
-    closeMobile: 'react-ui-SidePage-closeMobile',
-    closeFocus: 'react-ui-SidePage-closeFocus',
-    wrapperClose: 'react-ui-SidePage-wrapperClose',
-    wrapperClose6_4: 'react-ui-SidePage-wrapperClose6_4',
-    mobileWrapperClose: 'react-ui-SidePage-mobileWrapperClose',
-    panel: 'react-ui-SidePage-panel',
-    wrapperCloseFixed: 'react-ui-SidePage-wrapperCloseFixed',
-    footerWrapper: 'react-ui-SidePage-footerWrapper',
-    footer: 'react-ui-SidePage-footer',
-    positionStatic: 'react-ui-SidePage-positionStatic',
-    footerContent: 'react-ui-SidePage-footerContent',
-    mobileFooterContent: 'react-ui-SidePage-mobileFooterContent',
-    footerFixed: 'react-ui-SidePage-footerFixed',
-    panelFixed: 'react-ui-SidePage-panelFixed',
-    transitionLeft: 'react-ui-SidePage-transitionLeft',
-    transitionRight: 'react-ui-SidePage-transitionRight',
-    transitionActive: 'react-ui-SidePage-transitionActive',
-    transitionLeave: 'react-ui-SidePage-transitionLeave',
-    transitionLeaveActive: 'react-ui-SidePage-transitionLeaveActive',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "], ["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "])));
+        },
+        overlay: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
+        },
+        body: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "], ["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "])), t.modalBodyTextColor);
+        },
+        mobileBody: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+        },
+        container: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+        },
+        mobileContainer: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
+        },
+        containerWithoutHeader: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.sidePagePaddingTop);
+        },
+        mobileContainerWithoutHeader: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.mobileSidePagePaddingTop);
+        },
+        containerWithoutFooter: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+        },
+        containerWithPanel: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+        },
+        focusLock: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n    "], ["\n      height: 100%;\n    "])));
+        },
+        wrapper: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: ", ";\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      background: ", ";\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    "])), t.sidePageBgDefault);
+        },
+        wrapperLeft: function () {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      float: left;\n    "], ["\n      float: left;\n    "])));
+        },
+        wrapperMarginLeft: function () {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      margin-left: 20px;\n    "], ["\n      margin-left: 20px;\n    "])));
+        },
+        wrapperMarginRight: function () {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      margin-right: 20px;\n    "], ["\n      margin-right: 20px;\n    "])));
+        },
+        headerWrapper: function () {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      flex: 0 0 auto;\n    "], ["\n      flex: 0 0 auto;\n    "])));
+        },
+        header: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "], ["\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 (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
+        },
+        headerFixed: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background: ", ";\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: ", ";\n      }\n    "], ["\n      background: ", ";\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: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedHeaderShadow);
+        },
+        headerNativeStuck: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ", ", ", " 0px);\n    "], ["\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ", ", ", " 0px);\n    "])), t.sidePageHeaderPaddingBottom, t.sidePageBgDefault);
+        },
+        title: function (t) {
+            var paddingRight = parseInt(t.sidePageCloseButtonClickAreaLeft) +
+                parseInt(t.sidePageCloseIconSize) +
+                parseInt(t.sidePageCloseButtonClickAreaRight);
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "], ["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+        },
+        mobileTitle: function (t) {
+            var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "], ["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.mobileSidePagePaddingLeft, paddingRight);
+        },
+        titleCut: function () {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "], ["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+        },
+        background: function () {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "], ["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
+        },
+        backgroundGray: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      background: ", ";\n      opacity: ", ";\n    "], ["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+        },
+        shadow: function (t) {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
+        },
+        close: function (t) {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "], ["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickAreaTop, t.sidePageCloseButtonClickAreaTop, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonClickAreaBottom, t.sidePageCloseButtonClickAreaBottom, t.sidePageCloseButtonClickAreaLeft, t.sidePageCloseButtonClickAreaLeft, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+        },
+        closeSticky: function (t) {
+            return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n    "], ["\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n    "])), t.sidePageCloseButtonFixedClickAreaTop, t.sidePageCloseButtonFixedClickAreaTop, t.sidePageCloseButtonFixedClickAreaBottom, t.sidePageCloseButtonFixedClickAreaBottom);
+        },
+        closeMobile: function (t) {
+            return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "], ["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
+        },
+        closeFocus: function (t) {
+            return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px ", ";\n      border-radius: 4px;\n    "], ["\n      box-shadow: inset 0 0 0 2px ", ";\n      border-radius: 4px;\n    "])), t.borderColorFocus);
+        },
+        wrapperClose: function (t) {
+            return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: ", ";\n    "], ["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: ", ";\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonWrapperOffsetTop);
+        },
+        wrapperClose6_4: function () {
+            return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      height: auto;\n      padding-bottom: 0;\n    "], ["\n      height: auto;\n      padding-bottom: 0;\n    "])));
+        },
+        mobileWrapperClose: function (t) {
+            return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "], ["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
+        },
+        panel: function (t) {
+            return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "], ["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+        },
+        wrapperCloseFixed: function (t) {
+            return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      top: ", ";\n    "], ["\n      top: ", ";\n    "])), t.sidePageCloseButtonWrapperFixedOffsetTop);
+        },
+        footerWrapper: function () {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      flex: 0 0 auto;\n    "], ["\n      flex: 0 0 auto;\n    "])));
+        },
+        footer: function (t) {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "], ["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "])), t.sidePageFooterTextColor);
+        },
+        positionStatic: function () {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));
+        },
+        footerContent: function (t) {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      padding: ", " ", " ", "\n        ", ";\n    "], ["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+        },
+        mobileFooterContent: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "], ["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "])), t.mobileSidePageFooterPadding);
+        },
+        footerFixed: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\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    "], ["\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 (t) {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "], ["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.sidePageFixedPanelShadow);
+        },
+        transitionLeft: function () {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      transform: translateX(100px);\n    "], ["\n      transform: translateX(100px);\n    "])));
+        },
+        transitionRight: function () {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      transform: translateX(-100px);\n    "], ["\n      transform: translateX(-100px);\n    "])));
+        },
+        transitionActive: function () {
+            return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    "], ["\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        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 () {
+            return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
+        },
+        transitionLeaveActive: function () {
+            return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "], ["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+        },
+    });
 });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47;
 //# sourceMappingURL=SidePage.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidePage.styles.js","sourceRoot":"","sources":["SidePage.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,8DAA8D;AAC9D,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,wBAAwB;IAC9B,OAAO,EAAE,2BAA2B;IACpC,IAAI,EAAE,wBAAwB;IAC9B,UAAU,EAAE,8BAA8B;IAC1C,SAAS,EAAE,6BAA6B;IACxC,eAAe,EAAE,mCAAmC;IACpD,sBAAsB,EAAE,0CAA0C;IAClE,4BAA4B,EAAE,gDAAgD;IAC9E,sBAAsB,EAAE,0CAA0C;IAClE,kBAAkB,EAAE,sCAAsC;IAC1D,SAAS,EAAE,6BAA6B;IACxC,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,+BAA+B;IAC5C,iBAAiB,EAAE,qCAAqC;IACxD,kBAAkB,EAAE,sCAAsC;IAC1D,aAAa,EAAE,iCAAiC;IAChD,MAAM,EAAE,0BAA0B;IAClC,YAAY,EAAE,gCAAgC;IAC9C,WAAW,EAAE,+BAA+B;IAC5C,iBAAiB,EAAE,qCAAqC;IACxD,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,+BAA+B;IAC5C,QAAQ,EAAE,4BAA4B;IACtC,UAAU,EAAE,8BAA8B;IAC1C,cAAc,EAAE,kCAAkC;IAClD,MAAM,EAAE,0BAA0B;IAClC,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,+BAA+B;IAC5C,WAAW,EAAE,+BAA+B;IAC5C,UAAU,EAAE,8BAA8B;IAC1C,YAAY,EAAE,gCAAgC;IAC9C,eAAe,EAAE,mCAAmC;IACpD,kBAAkB,EAAE,sCAAsC;IAC1D,KAAK,EAAE,yBAAyB;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,aAAa,EAAE,iCAAiC;IAChD,MAAM,EAAE,0BAA0B;IAClC,cAAc,EAAE,kCAAkC;IAClD,aAAa,EAAE,iCAAiC;IAChD,mBAAmB,EAAE,uCAAuC;IAC5D,WAAW,EAAE,+BAA+B;IAC5C,UAAU,EAAE,8BAA8B;IAC1C,cAAc,EAAE,kCAAkC;IAClD,eAAe,EAAE,mCAAmC;IACpD,gBAAgB,EAAE,oCAAoC;IACtD,eAAe,EAAE,mCAAmC;IACpD,qBAAqB,EAAE,yCAAyC;CACjE,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `SidePage.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-SidePage-root',\n  overlay: 'react-ui-SidePage-overlay',\n  body: 'react-ui-SidePage-body',\n  mobileBody: 'react-ui-SidePage-mobileBody',\n  container: 'react-ui-SidePage-container',\n  mobileContainer: 'react-ui-SidePage-mobileContainer',\n  containerWithoutHeader: 'react-ui-SidePage-containerWithoutHeader',\n  mobileContainerWithoutHeader: 'react-ui-SidePage-mobileContainerWithoutHeader',\n  containerWithoutFooter: 'react-ui-SidePage-containerWithoutFooter',\n  containerWithPanel: 'react-ui-SidePage-containerWithPanel',\n  focusLock: 'react-ui-SidePage-focusLock',\n  wrapper: 'react-ui-SidePage-wrapper',\n  wrapperLeft: 'react-ui-SidePage-wrapperLeft',\n  wrapperMarginLeft: 'react-ui-SidePage-wrapperMarginLeft',\n  wrapperMarginRight: 'react-ui-SidePage-wrapperMarginRight',\n  headerWrapper: 'react-ui-SidePage-headerWrapper',\n  header: 'react-ui-SidePage-header',\n  mobileHeader: 'react-ui-SidePage-mobileHeader',\n  headerFixed: 'react-ui-SidePage-headerFixed',\n  headerNativeStuck: 'react-ui-SidePage-headerNativeStuck',\n  title: 'react-ui-SidePage-title',\n  mobileTitle: 'react-ui-SidePage-mobileTitle',\n  titleCut: 'react-ui-SidePage-titleCut',\n  background: 'react-ui-SidePage-background',\n  backgroundGray: 'react-ui-SidePage-backgroundGray',\n  shadow: 'react-ui-SidePage-shadow',\n  close: 'react-ui-SidePage-close',\n  closeSticky: 'react-ui-SidePage-closeSticky',\n  closeMobile: 'react-ui-SidePage-closeMobile',\n  closeFocus: 'react-ui-SidePage-closeFocus',\n  wrapperClose: 'react-ui-SidePage-wrapperClose',\n  wrapperClose6_4: 'react-ui-SidePage-wrapperClose6_4',\n  mobileWrapperClose: 'react-ui-SidePage-mobileWrapperClose',\n  panel: 'react-ui-SidePage-panel',\n  wrapperCloseFixed: 'react-ui-SidePage-wrapperCloseFixed',\n  footerWrapper: 'react-ui-SidePage-footerWrapper',\n  footer: 'react-ui-SidePage-footer',\n  positionStatic: 'react-ui-SidePage-positionStatic',\n  footerContent: 'react-ui-SidePage-footerContent',\n  mobileFooterContent: 'react-ui-SidePage-mobileFooterContent',\n  footerFixed: 'react-ui-SidePage-footerFixed',\n  panelFixed: 'react-ui-SidePage-panelFixed',\n  transitionLeft: 'react-ui-SidePage-transitionLeft',\n  transitionRight: 'react-ui-SidePage-transitionRight',\n  transitionActive: 'react-ui-SidePage-transitionActive',\n  transitionLeave: 'react-ui-SidePage-transitionLeave',\n  transitionLeaveActive: 'react-ui-SidePage-transitionLeaveActive',\n});\n"]}
+{"version":3,"file":"SidePage.styles.js","sourceRoot":"","sources":["SidePage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      top: 0;\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\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  headerNativeStuck(t: Theme) {\n    return css`\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ${t.sidePageHeaderPaddingBottom}, ${t.sidePageBgDefault} 0px);\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonClickAreaLeft) +\n      parseInt(t.sidePageCloseIconSize) +\n      parseInt(t.sidePageCloseButtonClickAreaRight);\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  titleCut() {\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-top: ${t.sidePageCloseButtonClickAreaTop};\n      margin-top: -${t.sidePageCloseButtonClickAreaTop};\n      padding-right: ${t.sidePageCloseButtonClickAreaRight};\n      margin-right: -${t.sidePageCloseButtonClickAreaRight};\n      padding-bottom: ${t.sidePageCloseButtonClickAreaBottom};\n      margin-bottom: -${t.sidePageCloseButtonClickAreaBottom};\n      padding-left: ${t.sidePageCloseButtonClickAreaLeft};\n      margin-left: -${t.sidePageCloseButtonClickAreaLeft};\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  closeSticky(t: Theme) {\n    return css`\n      padding-top: ${t.sidePageCloseButtonFixedClickAreaTop};\n      margin-top: -${t.sidePageCloseButtonFixedClickAreaTop};\n      padding-bottom: ${t.sidePageCloseButtonFixedClickAreaBottom};\n      margin-bottom: -${t.sidePageCloseButtonFixedClickAreaBottom};\n    `;\n  },\n\n  closeMobile(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      box-shadow: inset 0 0 0 2px ${t.borderColorFocus};\n      border-radius: 4px;\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.sidePageCloseButtonClickAreaRight};\n      top: ${t.sidePageCloseButtonWrapperOffsetTop};\n    `;\n  },\n\n  wrapperClose6_4() {\n    return css`\n      height: auto;\n      padding-bottom: 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      top: ${t.sidePageCloseButtonWrapperFixedOffsetTop};\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:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        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/SidePageBody.d.ts

@@ -21,6 +21,7 @@ export declare class SidePageBody extends React.Component<SidePageBodyProps> {
     private isMobileLayout;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private emotion;
     private cx;
     private styles;
     componentDidUpdate(): void;

package/components/SidePage/SidePageBody.js

@@ -34,6 +34,7 @@ import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
 import { getStyles } from './SidePage.styles.js';
 import { SidePageContext } from './SidePageContext.js';
@@ -56,13 +57,13 @@ var SidePageBody = /** @class */ (function (_super) {
         this.context.updateLayout();
     };
     SidePageBody.prototype.render = function () {
-        var _a;
-        this.styles = getStyles();
-        // Подписка на тему больше не нужна: значения приходят CSS-переменными, а
-        // класс с ними держит CommonWrapper. Смена темы обновляет стили без
-        // перерисовки этого компонента.
-        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
-            React.createElement("div", { "data-tid": SidePageBodyDataTids.root, className: this.cx(this.styles.body(), (_a = {}, _a[this.styles.mobileBody()] = this.isMobileLayout, _a)) }, this.props.children)));
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            var _a;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
+                React.createElement("div", { "data-tid": SidePageBodyDataTids.root, className: _this.cx(_this.styles.body(theme), (_a = {}, _a[_this.styles.mobileBody()] = _this.isMobileLayout, _a)) }, _this.props.children)));
+        }));
     };
     SidePageBody.__KONTUR_REACT_UI__ = 'SidePageBody';
     SidePageBody.displayName = 'SidePageBody';

package/components/SidePage/SidePageBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageBody.js","sourceRoot":"","sources":["SidePageBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,oBAAoB;CAClB,CAAC;AACX;;;;GAIG;AAIH;IAAkC,gCAAkC;IAApE;;QAKS,aAAO,GAAwB,KAAI,CAAC,OAAO,CAAC;;IA4BrD,CAAC;IArBQ,yCAAkB,GAAzB;QACE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;IAC9B,CAAC;IAEM,6BAAM,GAAb;;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAE1B,yEAAyE;QACzE,oEAAoE;QACpE,gCAAgC;QAChC,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,yCACY,oBAAoB,CAAC,IAAI,EACnC,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,IAAI,CAAC,cAAc,MAAG,IAE1F,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB,CAAC;IACJ,CAAC;IA/Ba,gCAAmB,GAAG,cAAc,AAAjB,CAAkB;IACrC,wBAAW,GAAG,cAAc,AAAjB,CAAkB;IAE7B,wBAAW,GAAG,eAAe,AAAlB,CAAmB;IAJjC,YAAY;QAHxB,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,YAAY,CAiCxB;IAAD,mBAAC;CAAA,AAjCD,CAAkC,KAAK,CAAC,SAAS,GAiChD;SAjCY,YAAY","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { ClassNames } from '../../lib/theming/Emotion.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\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@withRenderEnvironment\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  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private cx!: ClassNames;\n  private styles!: ReturnType<typeof getStyles>;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles();\n\n    // Подписка на тему больше не нужна: значения приходят CSS-переменными, а\n    // класс с ними держит CommonWrapper. Смена темы обновляет стили без\n    // перерисовки этого компонента.\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageBodyDataTids.root}\n          className={this.cx(this.styles.body(), { [this.styles.mobileBody()]: this.isMobileLayout })}\n        >\n          {this.props.children}\n        </div>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"file":"SidePageBody.js","sourceRoot":"","sources":["SidePageBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,oBAAoB;CAClB,CAAC;AACX;;;;GAIG;AAIH;IAAkC,gCAAkC;IAApE;;QAKS,aAAO,GAAwB,KAAI,CAAC,OAAO,CAAC;;IAgCrD,CAAC;IAxBQ,yCAAkB,GAAzB;QACE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;IAC9B,CAAC;IAEM,6BAAM,GAAb;QAAA,iBAmBC;QAlBC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;;YACL,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,oBAAoB,CAAC,IAAI,EACnC,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAI,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,KAAI,CAAC,cAAc,MAAG,IAE/F,KAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAnCa,gCAAmB,GAAG,cAAc,AAAjB,CAAkB;IACrC,wBAAW,GAAG,cAAc,AAAjB,CAAkB;IAE7B,wBAAW,GAAG,eAAe,AAAlB,CAAmB;IAJjC,YAAY;QAHxB,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,YAAY,CAqCxB;IAAD,mBAAC;CAAA,AArCD,CAAkC,KAAK,CAAC,SAAS,GAqChD;SArCY,YAAY","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\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@withRenderEnvironment\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  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\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={this.cx(this.styles.body(theme), { [this.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/SidePageCloseButton.js

@@ -2,8 +2,8 @@ import React, { useContext, useState } from 'react';
 import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
 import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
-import { useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { SidePageLocaleHelper } from './locale/index.js';
 import { getStyles } from './SidePage.styles.js';
 import { SidePageContext } from './SidePageContext.js';
@@ -14,6 +14,8 @@ export var SidePageCloseButton = function (_a) {
     var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
     var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
     var globalObject = useGlobal();
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var keyListener = useKeyListener();
     var sidePageContext = useContext(SidePageContext);
@@ -29,10 +31,10 @@ export var SidePageCloseButton = function (_a) {
         setIsFocusedByTab(false);
     };
     var icon = React.createElement(XIcon20Regular, { align: "none" });
-    return (React.createElement("button", { "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeButtonAriaLabel, className: cx(styles.close(), (_b = {},
-            _b[styles.closeFocus()] = isFocusedByTab,
-            _b[styles.closeSticky()] = isHeaderFixed,
-            _b[styles.closeMobile()] = isMobile,
+    return (React.createElement("button", { "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeButtonAriaLabel, className: cx(styles.close(theme), (_b = {},
+            _b[styles.closeFocus(theme)] = isFocusedByTab,
+            _b[styles.closeSticky(theme)] = isHeaderFixed,
+            _b[styles.closeMobile(theme)] = isMobile,
             _b)), onFocus: handleFocus, onBlur: handleBlur, onClick: sidePageContext.requestClose, "data-tid": SidePageHeaderDataTids.close }, icon));
 };
 SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';

package/components/SidePage/SidePageCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageCloseButton.js","sourceRoot":"","sources":["SidePageCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAO7D,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAqD;;QAAnD,aAAa,mBAAA,EAAE,QAAQ,cAAA;IACrD,IAAA,KAAsC,QAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IAE5D,IAAM,MAAM,GAAG,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;IACrE,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,IAAM,WAAW,GAAG;;QAClB,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAC7C,OAAO,CACL,8CACc,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,EACxC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;YAC1B,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,cAAc;YACrC,GAAC,MAAM,CAAC,WAAW,EAAE,IAAG,aAAa;YACrC,GAAC,MAAM,CAAC,WAAW,EAAE,IAAG,QAAQ;gBAChC,EACF,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,eAAe,CAAC,YAAY,cAC3B,sBAAsB,CAAC,KAAK,IAErC,IAAI,CACE,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;AAChE,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","sourcesContent":["import React, { useContext, useState } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { SidePageLocaleHelper } from './locale/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport { SidePageHeaderDataTids } from './SidePageHeader.js';\n\nexport interface SidePageCloseButtonProps extends CommonProps {\n  isHeaderFixed: boolean;\n  isMobile?: boolean;\n}\n\nexport const SidePageCloseButton = ({ isHeaderFixed, isMobile }: SidePageCloseButtonProps): React.JSX.Element => {\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const globalObject = useGlobal();\n  const styles = useStyles(getStyles);\n  const keyListener = useKeyListener();\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 icon = <XIcon20Regular align=\"none\" />;\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={cx(styles.close(), {\n        [styles.closeFocus()]: isFocusedByTab,\n        [styles.closeSticky()]: isHeaderFixed,\n        [styles.closeMobile()]: isMobile,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      {icon}\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"]}
+{"version":3,"file":"SidePageCloseButton.js","sourceRoot":"","sources":["SidePageCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAO7D,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAqD;;QAAnD,aAAa,mBAAA,EAAE,QAAQ,cAAA;IACrD,IAAA,KAAsC,QAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IAE5D,IAAM,MAAM,GAAG,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;IACrE,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,IAAM,WAAW,GAAG;;QAClB,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAC7C,OAAO,CACL,8CACc,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,EACxC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YAC/B,GAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,IAAG,cAAc;YAC1C,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,aAAa;YAC1C,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,QAAQ;gBACrC,EACF,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,eAAe,CAAC,YAAY,cAC3B,sBAAsB,CAAC,KAAK,IAErC,IAAI,CACE,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;AAChE,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","sourcesContent":["import React, { useContext, useState } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { SidePageLocaleHelper } from './locale/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport { SidePageHeaderDataTids } from './SidePageHeader.js';\n\nexport interface SidePageCloseButtonProps extends CommonProps {\n  isHeaderFixed: boolean;\n  isMobile?: boolean;\n}\n\nexport const SidePageCloseButton = ({ isHeaderFixed, isMobile }: SidePageCloseButtonProps): React.JSX.Element => {\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const globalObject = useGlobal();\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const keyListener = useKeyListener();\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 icon = <XIcon20Regular align=\"none\" />;\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={cx(styles.close(theme), {\n        [styles.closeFocus(theme)]: isFocusedByTab,\n        [styles.closeSticky(theme)]: isHeaderFixed,\n        [styles.closeMobile(theme)]: isMobile,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      {icon}\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"]}

package/components/SidePage/SidePageContainer.d.ts

@@ -13,8 +13,10 @@ export declare const SidePageContainerDataTids: {
 export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
+    private emotion;
     private cx;
     private styles;
+    private theme;
     private isMobileLayout;
     getRootNode: TGetRootNode;
     private setRootNode;

package/components/SidePage/SidePageContainer.js

@@ -34,6 +34,7 @@ import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
 import { getStyles } from './SidePage.styles.js';
 import { SidePageContext } from './SidePageContext.js';
@@ -51,11 +52,12 @@ var SidePageContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     SidePageContainer.prototype.render = function () {
-        this.styles = getStyles();
-        // Подписка на тему больше не нужна: значения приходят CSS-переменными, а
-        // класс с ними держит CommonWrapper. Смена темы обновляет стили без
-        // перерисовки этого компонента.
-        return this.renderMain();
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
     SidePageContainer.prototype.renderMain = function () {
         var _this = this;
@@ -64,12 +66,12 @@ var SidePageContainer = /** @class */ (function (_super) {
             var hasHeader = _a.hasHeader, hasFooter = _a.hasFooter, hasPanel = _a.hasPanel;
             return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
                 React.createElement("div", { "data-tid": SidePageContainerDataTids.root, className: _this.cx((_b = {},
-                        _b[_this.styles.container()] = true,
-                        _b[_this.styles.containerWithoutHeader()] = !hasHeader,
-                        _b[_this.styles.containerWithoutFooter()] = !hasFooter,
-                        _b[_this.styles.containerWithPanel()] = hasPanel,
-                        _b[_this.styles.mobileContainer()] = _this.isMobileLayout,
-                        _b[_this.styles.mobileContainerWithoutHeader()] = _this.isMobileLayout && !hasHeader,
+                        _b[_this.styles.container(_this.theme)] = true,
+                        _b[_this.styles.containerWithoutHeader(_this.theme)] = !hasHeader,
+                        _b[_this.styles.containerWithoutFooter(_this.theme)] = !hasFooter,
+                        _b[_this.styles.containerWithPanel(_this.theme)] = hasPanel,
+                        _b[_this.styles.mobileContainer(_this.theme)] = _this.isMobileLayout,
+                        _b[_this.styles.mobileContainerWithoutHeader(_this.theme)] = _this.isMobileLayout && !hasHeader,
                         _b)) }, _this.props.children)));
         }));
     };

package/components/SidePage/SidePageContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageContainer.js","sourceRoot":"","sources":["SidePageContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAIvD,MAAM,CAAC,IAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE,yBAAyB;CACvB,CAAC;AAEX;;;;GAIG;AAIH;IAAuC,qCAAuC;IAA9E;;IA0CA,CAAC;IAhCQ,kCAAM,GAAb;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAE1B,yEAAyE;QACzE,oEAAoE;QACpE,gCAAgC;QAChC,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAEM,sCAAU,GAAjB;QAAA,iBAsBC;QArBC,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,QACtB,UAAC,EAAkC;;gBAAhC,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,CACvC,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,yBAAyB,CAAC,IAAI,EACxC,SAAS,EAAE,KAAI,CAAC,EAAE;wBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,SAAS,EAAE,IAAG,IAAI;wBAC/B,GAAC,KAAI,CAAC,MAAM,CAAC,sBAAsB,EAAE,IAAG,CAAC,SAAS;wBAClD,GAAC,KAAI,CAAC,MAAM,CAAC,sBAAsB,EAAE,IAAG,CAAC,SAAS;wBAClD,GAAC,KAAI,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAG,QAAQ;wBAC5C,GAAC,KAAI,CAAC,MAAM,CAAC,eAAe,EAAE,IAAG,KAAI,CAAC,cAAc;wBACpD,GAAC,KAAI,CAAC,MAAM,CAAC,4BAA4B,EAAE,IAAG,KAAI,CAAC,cAAc,IAAI,CAAC,SAAS;4BAC/E,IAED,KAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB;QAhBwC,CAgBxC,CACwB,CAC5B,CAAC;IACJ,CAAC;IAxCa,qCAAmB,GAAG,mBAAmB,AAAtB,CAAuB;IAC1C,6BAAW,GAAG,mBAAmB,AAAtB,CAAuB;IAFrC,iBAAiB;QAH7B,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,iBAAiB,CA0C7B;IAAD,wBAAC;CAAA,AA1CD,CAAuC,KAAK,CAAC,SAAS,GA0CrD;SA1CY,iBAAiB","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { ClassNames } from '../../lib/theming/Emotion.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\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@withRenderEnvironment\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 cx!: ClassNames;\n  private styles!: ReturnType<typeof getStyles>;\n  private isMobileLayout!: boolean;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles();\n\n    // Подписка на тему больше не нужна: значения приходят CSS-переменными, а\n    // класс с ними держит CommonWrapper. Смена темы обновляет стили без\n    // перерисовки этого компонента.\n    return this.renderMain();\n  }\n\n  public renderMain(): React.JSX.Element {\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.cx({\n                [this.styles.container()]: true,\n                [this.styles.containerWithoutHeader()]: !hasHeader,\n                [this.styles.containerWithoutFooter()]: !hasFooter,\n                [this.styles.containerWithPanel()]: hasPanel,\n                [this.styles.mobileContainer()]: this.isMobileLayout,\n                [this.styles.mobileContainerWithoutHeader()]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"file":"SidePageContainer.js","sourceRoot":"","sources":["SidePageContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAIvD,MAAM,CAAC,IAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE,yBAAyB;CACvB,CAAC;AAEX;;;;GAIG;AAIH;IAAuC,qCAAuC;IAA9E;;IAgDA,CAAC;IApCQ,kCAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,sCAAU,GAAjB;QAAA,iBAsBC;QArBC,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,QACtB,UAAC,EAAkC;;gBAAhC,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,CACvC,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,yBAAyB,CAAC,IAAI,EACxC,SAAS,EAAE,KAAI,CAAC,EAAE;wBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBACzC,GAAC,KAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,CAAC,SAAS;wBAC5D,GAAC,KAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,CAAC,SAAS;wBAC5D,GAAC,KAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;wBACtD,GAAC,KAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,cAAc;wBAC9D,GAAC,KAAI,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,cAAc,IAAI,CAAC,SAAS;4BACzF,IAED,KAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB;QAhBwC,CAgBxC,CACwB,CAC5B,CAAC;IACJ,CAAC;IA9Ca,qCAAmB,GAAG,mBAAmB,AAAtB,CAAuB;IAC1C,6BAAW,GAAG,mBAAmB,AAAtB,CAAuB;IAFrC,iBAAiB;QAH7B,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,iBAAiB,CAgD7B;IAAD,wBAAC;CAAA,AAhDD,CAAuC,KAAK,CAAC,SAAS,GAgDrD;SAhDY,iBAAiB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\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@withRenderEnvironment\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 emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\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(): React.JSX.Element {\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.cx({\n                [this.styles.container(this.theme)]: true,\n                [this.styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [this.styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [this.styles.containerWithPanel(this.theme)]: hasPanel,\n                [this.styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [this.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/SidePageContext.d.ts

@@ -13,5 +13,7 @@ export interface SidePageContextType {
     setHasHeader?: (value?: boolean) => void;
     setHasFooter?: (value?: boolean) => void;
     setHasPanel?: (value?: boolean) => void;
+    setStickyHeaderHeight?: (value?: number) => void;
+    setStickyFooterHeight?: (value?: number) => void;
 }
 export declare const SidePageContext: React.Context<SidePageContextType>;

package/components/SidePage/SidePageContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageContext.js","sourceRoot":"","sources":["SidePageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAsB;IACtE,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,QAAQ,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM;IACtB,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC1B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;CAC3B,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { SidePageFooter } from './SidePageFooter.js';\nimport type { SidePageHeader } from './SidePageHeader.js';\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"]}
+{"version":3,"file":"SidePageContext.js","sourceRoot":"","sources":["SidePageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAsB;IACtE,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,QAAQ,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM;IACtB,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC1B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;CAC3B,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { SidePageFooter } from './SidePageFooter.js';\nimport type { SidePageHeader } from './SidePageHeader.js';\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  setStickyHeaderHeight?: (value?: number) => void;\n  setStickyFooterHeight?: (value?: number) => 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/SidePageFooter.d.ts

@@ -32,8 +32,10 @@ export declare class SidePageFooter extends React.Component<React.PropsWithChild
     private isMobileLayout;
     state: SidePageFooterState;
     private globalObject;
+    private emotion;
     private cx;
     private styles;
+    private theme;
     private content;
     private layoutSub;
     getRootNode: TGetRootNode;

package/components/SidePage/SidePageFooter.js

@@ -36,6 +36,7 @@ import { getDOMRect } from '../../lib/dom/getDOMRect.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { isNonNullable } from '../../lib/utils.js';
 import { Gapped } from '../Gapped/index.js';
 import { ModalSeparator } from '../Modal/ModalSeparator.js';
@@ -67,12 +68,14 @@ var SidePageFooter = /** @class */ (function (_super) {
             _this.content = node;
         };
         _this.setProperStyles = function () {
+            var _a, _b;
             var wrapper = getRootNode(_this);
             if (wrapper && _this.content) {
                 var wrapperRect = getDOMRect(wrapper);
                 var contentRect = getDOMRect(_this.content);
                 var fixed = wrapperRect.top > contentRect.top;
                 _this.setState({ fixed: fixed });
+                (_b = (_a = _this.context).setStickyFooterHeight) === null || _b === void 0 ? void 0 : _b.call(_a, _this.getSticky() ? contentRect.height : 0);
             }
         };
         return _this;
@@ -90,13 +93,14 @@ var SidePageFooter = /** @class */ (function (_super) {
         this.props.panel !== prevProps.panel && ((_b = (_a = this.context).setHasPanel) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.panel));
     };
     SidePageFooter.prototype.componentWillUnmount = function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         this.context.footerRef(null);
         if (this.layoutSub) {
             this.layoutSub.remove();
         }
         (_b = (_a = this.context).setHasFooter) === null || _b === void 0 ? void 0 : _b.call(_a, false);
         (_d = (_c = this.context).setHasPanel) === null || _d === void 0 ? void 0 : _d.call(_c, false);
+        (_f = (_e = this.context).setStickyFooterHeight) === null || _f === void 0 ? void 0 : _f.call(_e, 0);
     };
     SidePageFooter.prototype.getSticky = function () {
         if (typeof this.props.sticky !== 'undefined') {
@@ -108,11 +112,12 @@ var SidePageFooter = /** @class */ (function (_super) {
         return true;
     };
     SidePageFooter.prototype.render = function () {
-        this.styles = getStyles();
-        // Подписка на тему больше не нужна: значения приходят CSS-переменными, а
-        // класс с ними держит CommonWrapper. Смена темы обновляет стили без
-        // перерисовки этого компонента.
-        return this.renderMain();
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
     SidePageFooter.prototype.renderMain = function () {
         var _this = this;
@@ -122,17 +127,17 @@ var SidePageFooter = /** @class */ (function (_super) {
                 React.createElement(SidePageContext.Consumer, null, function (_a) {
                     var _b, _c;
                     var getWidth = _a.getWidth;
-                    return (React.createElement("div", { className: _this.cx(_this.styles.footer(), (_b = {},
+                    return (React.createElement("div", { className: _this.cx(_this.styles.footer(_this.theme), (_b = {},
                             _b[_this.styles.positionStatic()] = !_this.getSticky(),
                             _b)), style: {
                             width: getWidth(),
                         } },
                         separator,
-                        React.createElement("div", { className: _this.cx(_this.styles.footerContent(), (_c = {},
-                                _c[_this.styles.footerFixed()] = _this.state.fixed,
-                                _c[_this.styles.panel()] = !!_this.props.panel,
-                                _c[_this.styles.panelFixed()] = !!_this.props.panel && _this.state.fixed,
-                                _c[_this.styles.mobileFooterContent()] = _this.isMobileLayout,
+                        React.createElement("div", { className: _this.cx(_this.styles.footerContent(_this.theme), (_c = {},
+                                _c[_this.styles.footerFixed(_this.theme)] = _this.state.fixed,
+                                _c[_this.styles.panel(_this.theme)] = !!_this.props.panel,
+                                _c[_this.styles.panelFixed(_this.theme)] = !!_this.props.panel && _this.state.fixed,
+                                _c[_this.styles.mobileFooterContent(_this.theme)] = _this.isMobileLayout,
                                 _c)), ref: _this.refContent }, isNonNullable(_this.props.gap) ? (React.createElement(Gapped, { vertical: _this.isMobileLayout, gap: _this.props.gap }, _this.props.children)) : (_this.props.children))));
                 }))));
     };