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

package/components/Select/Select.styles.d.ts

@@ -1,18 +1,18 @@
-/** Правила — в `Select.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    rootMobile: string;
-    placeholder: string;
-    placeholderDisabled: string;
-    customUsePlaceholder: string;
-    arrowWrap: string;
-    arrowDisabled: string;
-    customUseArrow: string;
-    label: string;
-    search: string;
-    leftIconSmall: string;
-    leftIconMedium: string;
-    leftIconLarge: string;
-    leftIconLink: string;
-    selectButtonContainer: string;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    rootMobile(t: Theme): string;
+    placeholder(t: Theme): string;
+    placeholderDisabled(t: Theme): string;
+    customUsePlaceholder(): string;
+    arrowWrap(t: Theme): string;
+    arrowDisabled(t: Theme): string;
+    customUseArrow(): string;
+    label(): string;
+    search(): string;
+    leftIconSmall(t: Theme): string;
+    leftIconMedium(t: Theme): string;
+    leftIconLarge(t: Theme): string;
+    leftIconLink(t: Theme): string;
+    selectButtonContainer(): string;
 }>;

package/components/Select/Select.styles.js

@@ -1,20 +1,57 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-/** Правила — в `Select.css`; здесь только имена классов. */
-export var getStyles = staticStyles({
-    root: 'react-ui-Select-root',
-    rootMobile: 'react-ui-Select-rootMobile',
-    placeholder: 'react-ui-Select-placeholder',
-    placeholderDisabled: 'react-ui-Select-placeholderDisabled',
-    customUsePlaceholder: 'react-ui-Select-customUsePlaceholder',
-    arrowWrap: 'react-ui-Select-arrowWrap',
-    arrowDisabled: 'react-ui-Select-arrowDisabled',
-    customUseArrow: 'react-ui-Select-customUseArrow',
-    label: 'react-ui-Select-label',
-    search: 'react-ui-Select-search',
-    leftIconSmall: 'react-ui-Select-leftIconSmall',
-    leftIconMedium: 'react-ui-Select-leftIconMedium',
-    leftIconLarge: 'react-ui-Select-leftIconLarge',
-    leftIconLink: 'react-ui-Select-leftIconLink',
-    selectButtonContainer: 'react-ui-Select-selectButtonContainer',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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      display: inline-block;\n      position: relative;\n      line-height: normal;\n    "], ["\n      display: inline-block;\n      position: relative;\n      line-height: normal;\n    "])));
+        },
+        rootMobile: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n      max-width: ", ";\n    "], ["\n      width: ", ";\n      max-width: ", ";\n    "])), t.selectRootWidthMobile, t.mobileSelectMaxWidth);
+        },
+        placeholder: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      text-overflow: ellipsis;\n    "], ["\n      color: ", ";\n      text-overflow: ellipsis;\n    "])), t.selectPlaceholderColor);
+        },
+        placeholderDisabled: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.selectPlaceholderColorDisabled);
+        },
+        customUsePlaceholder: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: inherit;\n      opacity: 0.7;\n    "], ["\n      color: inherit;\n      opacity: 0.7;\n    "])));
+        },
+        arrowWrap: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n      flex-shrink: 0;\n    "], ["\n      color: ", ";\n      flex-shrink: 0;\n    "])), t.selectMenuArrowColor);
+        },
+        arrowDisabled: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.selectMenuArrowColorDisabled);
+        },
+        customUseArrow: function () {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: inherit;\n      opacity: 0.7;\n    "], ["\n      color: inherit;\n      opacity: 0.7;\n    "])));
+        },
+        label: function () {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+        },
+        search: function () {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin: 1px 4px 4px;\n    "], ["\n      margin: 1px 4px 4px;\n    "])));
+        },
+        leftIconSmall: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-right: ", ";\n      width: ", ";\n    "], ["\n      margin-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapSmall, t.btnIconSizeSmall);
+        },
+        leftIconMedium: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      margin-right: ", ";\n      width: ", ";\n    "], ["\n      margin-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapMedium, t.btnIconSizeMedium);
+        },
+        leftIconLarge: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      margin-right: ", ";\n      width: ", ";\n    "], ["\n      margin-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapLarge, t.btnIconSizeLarge);
+        },
+        leftIconLink: function (t) {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnLinkIconMarginRight);
+        },
+        selectButtonContainer: function () {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    "], ["\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\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;
 //# sourceMappingURL=Select.styles.js.map

package/components/Select/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,4DAA4D;AAC5D,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,sBAAsB;IAC5B,UAAU,EAAE,4BAA4B;IACxC,WAAW,EAAE,6BAA6B;IAC1C,mBAAmB,EAAE,qCAAqC;IAC1D,oBAAoB,EAAE,sCAAsC;IAC5D,SAAS,EAAE,2BAA2B;IACtC,aAAa,EAAE,+BAA+B;IAC9C,cAAc,EAAE,gCAAgC;IAChD,KAAK,EAAE,uBAAuB;IAC9B,MAAM,EAAE,wBAAwB;IAChC,aAAa,EAAE,+BAA+B;IAC9C,cAAc,EAAE,gCAAgC;IAChD,aAAa,EAAE,+BAA+B;IAC9C,YAAY,EAAE,8BAA8B;IAC5C,qBAAqB,EAAE,uCAAuC;CAC/D,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `Select.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-Select-root',\n  rootMobile: 'react-ui-Select-rootMobile',\n  placeholder: 'react-ui-Select-placeholder',\n  placeholderDisabled: 'react-ui-Select-placeholderDisabled',\n  customUsePlaceholder: 'react-ui-Select-customUsePlaceholder',\n  arrowWrap: 'react-ui-Select-arrowWrap',\n  arrowDisabled: 'react-ui-Select-arrowDisabled',\n  customUseArrow: 'react-ui-Select-customUseArrow',\n  label: 'react-ui-Select-label',\n  search: 'react-ui-Select-search',\n  leftIconSmall: 'react-ui-Select-leftIconSmall',\n  leftIconMedium: 'react-ui-Select-leftIconMedium',\n  leftIconLarge: 'react-ui-Select-leftIconLarge',\n  leftIconLink: 'react-ui-Select-leftIconLink',\n  selectButtonContainer: 'react-ui-Select-selectButtonContainer',\n});\n"]}
+{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["Select.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,gKAAA,6FAIT,KAAC;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,uHAAA,iBACC,EAAuB,sBACnB,EAAsB,SACpC,KAFU,CAAC,CAAC,qBAAqB,EACnB,CAAC,CAAC,oBAAoB,EACnC;QACJ,CAAC;QAED,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,+HAAA,iBACC,EAAwB,yCAElC,KAFU,CAAC,CAAC,sBAAsB,EAEjC;QACJ,CAAC;QAED,mBAAmB,YAAC,CAAQ;YAC1B,OAAO,GAAG,+FAAA,iBACC,EAAgC,SAC1C,KADU,CAAC,CAAC,8BAA8B,EACzC;QACJ,CAAC;QAED,oBAAoB;YAClB,OAAO,GAAG,uHAAA,oDAGT,KAAC;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,sHAAA,iBACC,EAAsB,gCAEhC,KAFU,CAAC,CAAC,oBAAoB,EAE/B;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,+FAAA,iBACC,EAA8B,SACxC,KADU,CAAC,CAAC,4BAA4B,EACvC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,uHAAA,oDAGT,KAAC;QACJ,CAAC;QAED,KAAK;YACH,OAAO,GAAG,uLAAA,oHAKT,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,yGAAA,oCAET,KAAC;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,4HAAA,wBACQ,EAAoB,kBAC3B,EAAkB,SAC5B,KAFiB,CAAC,CAAC,kBAAkB,EAC3B,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,4HAAA,wBACQ,EAAqB,kBAC5B,EAAmB,SAC7B,KAFiB,CAAC,CAAC,mBAAmB,EAC5B,CAAC,CAAC,iBAAiB,EAC5B;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,4HAAA,wBACQ,EAAoB,kBAC3B,EAAkB,SAC5B,KAFiB,CAAC,CAAC,kBAAkB,EAC3B,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,wGAAA,wBACQ,EAAwB,SACzC,KADiB,CAAC,CAAC,sBAAsB,EACxC;QACJ,CAAC;QAED,qBAAqB;YACnB,OAAO,GAAG,qKAAA,gGAIT,KAAC;QACJ,CAAC;KACF,CAAC;AAzG8D,CAyG9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\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      display: inline-block;\n      position: relative;\n      line-height: normal;\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      width: ${t.selectRootWidthMobile};\n      max-width: ${t.mobileSelectMaxWidth};\n    `;\n  },\n\n  placeholder(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColor};\n      text-overflow: ellipsis;\n    `;\n  },\n\n  placeholderDisabled(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColorDisabled};\n    `;\n  },\n\n  customUsePlaceholder() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  arrowWrap(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColor};\n      flex-shrink: 0;\n    `;\n  },\n\n  arrowDisabled(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColorDisabled};\n    `;\n  },\n\n  customUseArrow() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  label() {\n    return css`\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    `;\n  },\n\n  search() {\n    return css`\n      margin: 1px 4px 4px;\n    `;\n  },\n\n  leftIconSmall(t: Theme) {\n    return css`\n      margin-right: ${t.selectIconGapSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  leftIconMedium(t: Theme) {\n    return css`\n      margin-right: ${t.selectIconGapMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  leftIconLarge(t: Theme) {\n    return css`\n      margin-right: ${t.selectIconGapLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  leftIconLink(t: Theme) {\n    return css`\n      margin-right: ${t.btnLinkIconMarginRight};\n    `;\n  },\n\n  selectButtonContainer() {\n    return css`\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    `;\n  },\n}));\n"]}

package/components/Select/selectTheme.js

@@ -1,47 +1,27 @@
 import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
-/**
- * Отступы по горизонтали без иконки: кнопочный токен читает селектовый.
- *
- * С иконкой не переопределяется ничего: значение и так равно кнопочному токену
- * базы, а геттер «токен в самого себя» был бы рекурсией. Свойства навешиваются
- * дескрипторами, а не спредом: спред читает геттер на месте и превращает
- * ссылку обратно в значение — то есть в литерал, зависящий от темы.
- */
-var definePaddingsWithoutIcon = function (target) {
-    ['Small', 'Medium', 'Large'].forEach(function (size) {
-        Object.defineProperty(target, "btnPaddingX".concat(size), {
-            get: function () {
-                return this["selectPaddingX".concat(size)];
-            },
-            enumerable: true,
-            configurable: true,
-        });
-    });
-};
 export var getSelectTheme = function (theme, props) {
-    var remap = {
+    var baseTheme = ThemeFactory.create({
         btnDefaultBg: theme.selectDefaultBg,
-        get btnDefaultHoverBg() {
-            return this.selectHoverBg;
-        },
-        get btnDefaultActiveBg() {
-            return this.selectActiveBg;
-        },
+        btnDefaultHoverBg: theme.selectHoverBg,
+        btnDefaultActiveBg: theme.selectActiveBg,
         btnBorderWidth: theme.selectBorderWidth,
         btnOutlineWidth: theme.selectOutlineWidth,
         btnLineHeightSmall: theme.selectLineHeightSmall,
         btnFontSizeSmall: theme.selectFontSizeSmall,
+        btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,
         btnPaddingYSmall: theme.selectPaddingYSmall,
         btnIconSizeSmall: theme.selectIconSizeSmall,
         btnBorderRadiusSmall: theme.selectBorderRadiusSmall,
         btnLinkHoverTextDecoration: 'none',
         btnLineHeightMedium: theme.selectLineHeightMedium,
         btnFontSizeMedium: theme.selectFontSizeMedium,
+        btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,
         btnPaddingYMedium: theme.selectPaddingYMedium,
         btnIconSizeMedium: theme.selectIconSizeMedium,
         btnBorderRadiusMedium: theme.selectBorderRadiusMedium,
         btnLineHeightLarge: theme.selectLineHeightLarge,
         btnFontSizeLarge: theme.selectFontSizeLarge,
+        btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,
         btnPaddingYLarge: theme.selectPaddingYLarge,
         btnIconSizeLarge: theme.selectIconSizeLarge,
         btnBorderRadiusLarge: theme.selectBorderRadiusLarge,
@@ -50,11 +30,7 @@ export var getSelectTheme = function (theme, props) {
         btnDisabledTextColor: theme.selectTextColorDisabled,
         btnDefaultHoverBorderColor: theme.selectBorderColorHover,
         btnBorderColorTransition: theme.selectBorderColorTransition,
-    };
-    if (!props._icon) {
-        definePaddingsWithoutIcon(remap);
-    }
-    var baseTheme = ThemeFactory.create(remap, theme);
+    }, theme);
     if (props.theme) {
         return ThemeFactory.create(props.theme, baseTheme);
     }

package/components/Select/selectTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectTheme.js","sourceRoot":"","sources":["selectTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE;;;;;;;GAOG;AACH,IAAM,yBAAyB,GAAG,UAAC,MAAc;IAC9C,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,OAAO,CAAC,UAAC,IAAI;QACnD,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,qBAAc,IAAI,CAAE,EAAE;YAClD,GAAG;gBACD,OAAO,IAAI,CAAC,wBAAiB,IAAI,CAAE,CAAC,CAAC;YACvC,CAAC;YACD,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI;SACnB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAY,EAAE,KAA4B;IACvE,IAAM,KAAK,GAAY;QACrB,YAAY,EAAE,KAAK,CAAC,eAAe;QACnC,IAAI,iBAAiB;YACnB,OAAO,IAAI,CAAC,aAAa,CAAC;QAC5B,CAAC;QACD,IAAI,kBAAkB;YACpB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC7B,CAAC;QAED,cAAc,EAAE,KAAK,CAAC,iBAAiB;QACvC,eAAe,EAAE,KAAK,CAAC,kBAAkB;QAEzC,kBAAkB,EAAE,KAAK,CAAC,qBAAqB;QAC/C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,oBAAoB,EAAE,KAAK,CAAC,uBAAuB;QAEnD,0BAA0B,EAAE,MAAM;QAElC,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;QACjD,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,qBAAqB,EAAE,KAAK,CAAC,wBAAwB;QAErD,kBAAkB,EAAE,KAAK,CAAC,qBAAqB;QAC/C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,oBAAoB,EAAE,KAAK,CAAC,uBAAuB;QAEnD,aAAa,EAAE,KAAK,CAAC,gBAAgB;QACrC,sBAAsB,EAAE,KAAK,CAAC,yBAAyB;QACvD,oBAAoB,EAAE,KAAK,CAAC,uBAAuB;QAEnD,0BAA0B,EAAE,KAAK,CAAC,sBAAsB;QACxD,wBAAwB,EAAE,KAAK,CAAC,2BAA2B;KAC5D,CAAC;IAEF,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACjB,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,IAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEpD,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { SelectProps } from './Select.js';\n\n/**\n * Отступы по горизонтали без иконки: кнопочный токен читает селектовый.\n *\n * С иконкой не переопределяется ничего: значение и так равно кнопочному токену\n * базы, а геттер «токен в самого себя» был бы рекурсией. Свойства навешиваются\n * дескрипторами, а не спредом: спред читает геттер на месте и превращает\n * ссылку обратно в значение — то есть в литерал, зависящий от темы.\n */\nconst definePaddingsWithoutIcon = (target: object): void => {\n  (['Small', 'Medium', 'Large'] as const).forEach((size) => {\n    Object.defineProperty(target, `btnPaddingX${size}`, {\n      get(this: Theme) {\n        return this[`selectPaddingX${size}`];\n      },\n      enumerable: true,\n      configurable: true,\n    });\n  });\n};\n\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\n  const remap: ThemeIn = {\n    btnDefaultBg: theme.selectDefaultBg,\n    get btnDefaultHoverBg() {\n      return this.selectHoverBg;\n    },\n    get btnDefaultActiveBg() {\n      return this.selectActiveBg;\n    },\n\n    btnBorderWidth: theme.selectBorderWidth,\n    btnOutlineWidth: theme.selectOutlineWidth,\n\n    btnLineHeightSmall: theme.selectLineHeightSmall,\n    btnFontSizeSmall: theme.selectFontSizeSmall,\n    btnPaddingYSmall: theme.selectPaddingYSmall,\n    btnIconSizeSmall: theme.selectIconSizeSmall,\n    btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\n\n    btnLinkHoverTextDecoration: 'none',\n\n    btnLineHeightMedium: theme.selectLineHeightMedium,\n    btnFontSizeMedium: theme.selectFontSizeMedium,\n    btnPaddingYMedium: theme.selectPaddingYMedium,\n    btnIconSizeMedium: theme.selectIconSizeMedium,\n    btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\n\n    btnLineHeightLarge: theme.selectLineHeightLarge,\n    btnFontSizeLarge: theme.selectFontSizeLarge,\n    btnPaddingYLarge: theme.selectPaddingYLarge,\n    btnIconSizeLarge: theme.selectIconSizeLarge,\n    btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\n\n    btnDisabledBg: theme.selectBgDisabled,\n    btnDisabledBorderColor: theme.selectBorderColorDisabled,\n    btnDisabledTextColor: theme.selectTextColorDisabled,\n\n    btnDefaultHoverBorderColor: theme.selectBorderColorHover,\n    btnBorderColorTransition: theme.selectBorderColorTransition,\n  };\n\n  if (!props._icon) {\n    definePaddingsWithoutIcon(remap);\n  }\n\n  const baseTheme = ThemeFactory.create(remap, theme);\n\n  if (props.theme) {\n    return ThemeFactory.create(props.theme, baseTheme);\n  }\n\n  return baseTheme;\n};\n"]}
+{"version":3,"file":"selectTheme.js","sourceRoot":"","sources":["selectTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAY,EAAE,KAA4B;IACvE,IAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CACnC;QACE,YAAY,EAAE,KAAK,CAAC,eAAe;QACnC,iBAAiB,EAAE,KAAK,CAAC,aAAa;QACtC,kBAAkB,EAAE,KAAK,CAAC,cAAc;QAExC,cAAc,EAAE,KAAK,CAAC,iBAAiB;QACvC,eAAe,EAAE,KAAK,CAAC,kBAAkB;QAEzC,kBAAkB,EAAE,KAAK,CAAC,qBAAqB;QAC/C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,mBAAmB;QAClF,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,oBAAoB,EAAE,KAAK,CAAC,uBAAuB;QAEnD,0BAA0B,EAAE,MAAM;QAElC,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;QACjD,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,iBAAiB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,oBAAoB;QACrF,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,qBAAqB,EAAE,KAAK,CAAC,wBAAwB;QAErD,kBAAkB,EAAE,KAAK,CAAC,qBAAqB;QAC/C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,mBAAmB;QAClF,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,gBAAgB,EAAE,KAAK,CAAC,mBAAmB;QAC3C,oBAAoB,EAAE,KAAK,CAAC,uBAAuB;QAEnD,aAAa,EAAE,KAAK,CAAC,gBAAgB;QACrC,sBAAsB,EAAE,KAAK,CAAC,yBAAyB;QACvD,oBAAoB,EAAE,KAAK,CAAC,uBAAuB;QAEnD,0BAA0B,EAAE,KAAK,CAAC,sBAAsB;QACxD,wBAAwB,EAAE,KAAK,CAAC,2BAA2B;KAC5D,EACD,KAAK,CACN,CAAC;IAEF,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { SelectProps } from './Select.js';\n\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\n  const baseTheme = ThemeFactory.create(\n    {\n      btnDefaultBg: theme.selectDefaultBg,\n      btnDefaultHoverBg: theme.selectHoverBg,\n      btnDefaultActiveBg: theme.selectActiveBg,\n\n      btnBorderWidth: theme.selectBorderWidth,\n      btnOutlineWidth: theme.selectOutlineWidth,\n\n      btnLineHeightSmall: theme.selectLineHeightSmall,\n      btnFontSizeSmall: theme.selectFontSizeSmall,\n      btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,\n      btnPaddingYSmall: theme.selectPaddingYSmall,\n      btnIconSizeSmall: theme.selectIconSizeSmall,\n      btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\n\n      btnLinkHoverTextDecoration: 'none',\n\n      btnLineHeightMedium: theme.selectLineHeightMedium,\n      btnFontSizeMedium: theme.selectFontSizeMedium,\n      btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,\n      btnPaddingYMedium: theme.selectPaddingYMedium,\n      btnIconSizeMedium: theme.selectIconSizeMedium,\n      btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.selectLineHeightLarge,\n      btnFontSizeLarge: theme.selectFontSizeLarge,\n      btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,\n      btnPaddingYLarge: theme.selectPaddingYLarge,\n      btnIconSizeLarge: theme.selectIconSizeLarge,\n      btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\n\n      btnDisabledBg: theme.selectBgDisabled,\n      btnDisabledBorderColor: theme.selectBorderColorDisabled,\n      btnDisabledTextColor: theme.selectTextColorDisabled,\n\n      btnDefaultHoverBorderColor: theme.selectBorderColorHover,\n      btnBorderColorTransition: theme.selectBorderColorTransition,\n    },\n    theme,\n  );\n\n  if (props.theme) {\n    return ThemeFactory.create(props.theme, baseTheme);\n  }\n\n  return baseTheme;\n};\n"]}

package/components/SidePage/SidePage.d.ts

@@ -50,6 +50,8 @@ export interface SidePageState {
     hasHeader: boolean;
     hasFooter: boolean;
     hasPanel: boolean;
+    stickyHeaderHeight: number;
+    stickyFooterHeight: number;
 }
 export declare const SidePageDataTids: {
     readonly root: "SidePage__root";
@@ -75,8 +77,10 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     static Container: typeof SidePageContainer;
     state: SidePageState;
     private globalObject;
+    private emotion;
     private cx;
     private styles;
+    private theme;
     private stackSubscription;
     private layout;
     private header;
@@ -110,5 +114,7 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private setHasHeader;
     private setHasFooter;
     private setHasPanel;
+    private setStickyHeaderHeight;
+    private setStickyFooterHeight;
 }
 export {};

package/components/SidePage/SidePage.js

@@ -46,6 +46,7 @@ import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { ModalStack } from '../../lib/ModalStack.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { isNonNullable, isReactUIInstance } from '../../lib/utils.js';
 import { ResponsiveLayout } from '../ResponsiveLayout/index.js';
 import { getStyles } from './SidePage.styles.js';
@@ -75,6 +76,8 @@ var SidePage = /** @class */ (function (_super) {
             hasHeader: false,
             hasFooter: false,
             hasPanel: false,
+            stickyHeaderHeight: 0,
+            stickyFooterHeight: 0,
         };
         _this.stackSubscription = null;
         _this.layout = null;
@@ -104,6 +107,8 @@ var SidePage = /** @class */ (function (_super) {
                 setHasHeader: _this.setHasHeader,
                 setHasFooter: _this.setHasFooter,
                 setHasPanel: _this.setHasPanel,
+                setStickyHeaderHeight: _this.setStickyHeaderHeight,
+                setStickyFooterHeight: _this.setStickyFooterHeight,
             };
         };
         _this.getWidth = function () {
@@ -180,6 +185,18 @@ var SidePage = /** @class */ (function (_super) {
             if (hasPanel === void 0) { hasPanel = false; }
             _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
         };
+        _this.setStickyHeaderHeight = function (stickyHeaderHeight) {
+            if (stickyHeaderHeight === void 0) { stickyHeaderHeight = 0; }
+            if (_this.state.stickyHeaderHeight !== stickyHeaderHeight) {
+                _this.setState({ stickyHeaderHeight: stickyHeaderHeight });
+            }
+        };
+        _this.setStickyFooterHeight = function (stickyFooterHeight) {
+            if (stickyFooterHeight === void 0) { stickyFooterHeight = 0; }
+            if (_this.state.stickyFooterHeight !== stickyFooterHeight) {
+                _this.setState({ stickyFooterHeight: stickyFooterHeight });
+            }
+        };
         return _this;
     }
     SidePage_1 = SidePage;
@@ -205,11 +222,12 @@ var SidePage = /** @class */ (function (_super) {
         ModalStack.remove(this, this.globalObject);
     };
     SidePage.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();
+        }));
     };
     SidePage.prototype.renderMain = function () {
         var _this = this;
@@ -259,12 +277,12 @@ var SidePage = /** @class */ (function (_super) {
             } },
             React.createElement(FocusLock, { disabled: this.isFocusLockDisabled, autoFocus: false, className: this.styles.focusLock() },
                 React.createElement(RenderLayer, { onClickOutside: this.handleClickOutside, active: true },
-                    React.createElement("div", { "data-tid": SidePageDataTids.container, className: this.cx(this.styles.wrapper(), (_b = {},
+                    React.createElement("div", { "data-tid": SidePageDataTids.container, className: this.cx(this.styles.wrapper(this.theme), (_b = {},
                             _b[this.styles.wrapperLeft()] = fromLeft,
                             _b[this.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft,
                             _b[this.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft,
-                            _b[this.styles.shadow()] = this.state.hasShadow,
-                            _b)), ref: this.layoutRef },
+                            _b[this.styles.shadow(this.theme)] = this.state.hasShadow,
+                            _b)), "data-scroll-inset-top": this.state.stickyHeaderHeight || undefined, "data-scroll-inset-bottom": this.state.stickyFooterHeight || undefined, ref: this.layoutRef },
                         React.createElement(SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children))))));
     };
     SidePage.prototype.renderShadow = function () {
@@ -273,7 +291,7 @@ var SidePage = /** @class */ (function (_super) {
             React.createElement(HideBodyVerticalScroll, { key: "hbvs" }),
             React.createElement("div", { key: "overlay", className: this.cx((_a = {},
                     _a[this.styles.background()] = true,
-                    _a[this.styles.backgroundGray()] = this.state.hasBackground,
+                    _a[this.styles.backgroundGray(this.theme)] = this.state.hasBackground,
                     _a)) })));
     };
     SidePage.prototype.getTransitionNames = function () {

package/components/SidePage/SidePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePage.js","sourceRoot":"","sources":["SidePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.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 { isNonNullable, isReactUIInstance } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageBody } from './SidePageBody.js';\nimport { SidePageContainer } from './SidePageContainer.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageFooter } from './SidePageFooter.js';\nimport { SidePageHeader } from './SidePageHeader.js';\nexport interface SidePageProps\n  extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {\n  /** Блокирует фон, когда сайдпейдж открыт: основная страница затемняется, действия на ней становятся недоступны. */\n  blockBackground?: boolean;\n\n  /** Отключает событие `onClose` и блокирует кнопку закрытия сайдпейджа. */\n  disableClose?: boolean;\n\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   * @deprecated Используйте `ignoreOutsideClick` вместо `ignoreBackgroundClick`\n   **/\n  ignoreBackgroundClick?: boolean;\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   **/\n  ignoreOutsideClick?: boolean;\n\n  /** Ширина сайдпейджа. */\n  width?: number | string;\n\n  /** Ширина сайдпейджа в мобильном режиме. По умолчанию ширина во весь экран. */\n  mobileWidth?: number | string;\n\n  /** Событие закрытия сайдпейджа пользователем: нажатие на фон, Escape или крестик. */\n  onClose?: () => void;\n\n  /** Событие завершения анимации открытия сайдпейджа. */\n  onOpened?: () => void;\n\n  /** Отображает сайдпейдж слева. */\n  fromLeft?: boolean;\n\n  /** Отключает анимацию открытия сайдпейджа. */\n  disableAnimations?: boolean;\n\n  /** Выключает ограничение на фокус вне сайдпейджа.\n   * Работает только при заблокированном фоне `blockBackground = true`.*/\n  disableFocusLock?: boolean;\n\n  /** Отступ от края экрана до сайдпейджа. */\n  offset?: number | string;\n  /**\n   * Событие нажатия на фон.\n   */\n  onOutsideClick?: (e: Event) => void;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const SidePageDataTids = {\n  root: 'SidePage__root',\n  container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'offset' | 'role'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.\n *\n * Составной компонент, включает в себя:\n * - «шапку» [SidePage.Header](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepageheader--docs), состоящую из заголовка и крестика закрытия окна;\n * - контент-зону [SidePage.Body](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagebody--docs) и контейнер с отступами [SidePage.Container](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagecontainer--docs);\n * - футер [SidePage.Footer](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagefooter--docs).\n */\n@withRenderEnvironment\n@rootNode\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n  public static displayName = 'SidePage';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private cx!: ClassNames;\n  private styles!: ReturnType<typeof getStyles>;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  public rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    this.globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange, this.globalObject);\n  }\n\n  public componentDidUpdate(prevProps: SidePageProps) {\n    if (prevProps.blockBackground !== this.props.blockBackground) {\n      ModalStack.rerender(this.globalObject);\n      this.setState({\n        hasBackground: ModalStack.isBlocking(this, this.globalObject),\n      });\n    }\n  }\n\n  public componentWillUnmount() {\n    this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this, this.globalObject);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    this.header?.update();\n    this.footer?.update();\n  };\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    offset: 0,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(SidePage.defaultProps);\n\n  public render(): JSX.Element {\n    this.styles = getStyles();\n\n    // Подписка на тему больше не нужна: значения приходят CSS-переменными, а\n    // класс с ними держит CommonWrapper. Смена темы обновляет стили без\n    // перерисовки этого компонента.\n    return this.renderMain();\n  }\n\n  private renderMain() {\n    const { blockBackground, onOpened } = this.props;\n    const disableAnimations = this.getProps().disableAnimations;\n    return (\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <RenderContainer>\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <ZIndex\n                priority={'Sidepage'}\n                onScroll={LayoutEvents.emit}\n                createStackingContext\n                style={{ position: 'absolute' }}\n              >\n                {!isMobile && blockBackground && this.renderShadow()}\n                <CSSTransition\n                  in\n                  classNames={this.getTransitionNames()}\n                  appear={!disableAnimations}\n                  enter={!disableAnimations}\n                  exit={false}\n                  timeout={{\n                    enter: TRANSITION_TIMEOUT,\n                    exit: TRANSITION_TIMEOUT,\n                  }}\n                  nodeRef={this.rootRef}\n                  onEntered={onOpened}\n                >\n                  {this.renderContainer(isMobile)}\n                </CSSTransition>\n                {isMobile && <HideBodyVerticalScroll />}\n              </ZIndex>\n            </CommonWrapper>\n          </RenderContainer>\n        )}\n      </ResponsiveLayout>\n    );\n  }\n\n  private get isFocusLockDisabled() {\n    const { disableFocusLock } = this.getProps();\n    const { blockBackground } = this.props;\n    if (!blockBackground) {\n      return true;\n    }\n    if (disableFocusLock !== undefined) {\n      return disableFocusLock;\n    }\n    return false;\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { mobileWidth, blockBackground, fromLeft, 'aria-label': ariaLabel } = this.props;\n    const { offset, role } = this.getProps();\n\n    const widthDesktop = this.props.width || (blockBackground ? 800 : 500);\n    const widthMobile = mobileWidth || '100%';\n    const width = isMobile ? widthMobile : widthDesktop;\n\n    return (\n      <div\n        aria-modal\n        role={role}\n        aria-label={ariaLabel}\n        data-tid={SidePageDataTids.root}\n        className={this.cx({\n          [this.styles.root()]: true,\n        })}\n        ref={this.rootRef}\n        onScroll={LayoutEvents.emit}\n        style={{\n          width,\n          right: fromLeft ? 'auto' : offset,\n          left: fromLeft ? offset : 'auto',\n        }}\n      >\n        <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={this.styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid={SidePageDataTids.container}\n              className={this.cx(this.styles.wrapper(), {\n                [this.styles.wrapperLeft()]: fromLeft,\n                [this.styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [this.styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [this.styles.shadow()]: this.state.hasShadow,\n              })}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </div>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <div className={this.styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={this.cx({\n            [this.styles.background()]: true,\n            [this.styles.backgroundGray()]: this.state.hasBackground,\n          })}\n        />\n      </div>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? this.styles.transitionRight : this.styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: this.styles.transitionActive(),\n      exit: this.styles.transitionLeave(),\n      exitActive: this.styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: this.styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    const sidePages = stack.filter(\n      (x) => isReactUIInstance<SidePage>(x, 'SidePage') && x.props.fromLeft === this.props.fromLeft,\n    );\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this, this.globalObject);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !(this.props.ignoreBackgroundClick || this.props.ignoreOutsideClick)) {\n      // ignore mousedown on window scrollbar\n      if (\n        isInstanceOf(e, this.globalObject.MouseEvent) &&\n        this.globalObject.document &&\n        e.clientX > this.globalObject.document.documentElement.clientWidth\n      ) {\n        return;\n      }\n      if (this.props.onOutsideClick) {\n        this.props.onOutsideClick(e);\n        if (e.defaultPrevented) {\n          return;\n        }\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      e.stopPropagation();\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private headerRef = (ref: SidePageHeader | null) => {\n    this.header = ref;\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"file":"SidePage.js","sourceRoot":"","sources":["SidePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.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 { isNonNullable, isReactUIInstance } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageBody } from './SidePageBody.js';\nimport { SidePageContainer } from './SidePageContainer.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageFooter } from './SidePageFooter.js';\nimport { SidePageHeader } from './SidePageHeader.js';\nexport interface SidePageProps\n  extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {\n  /** Блокирует фон, когда сайдпейдж открыт: основная страница затемняется, действия на ней становятся недоступны. */\n  blockBackground?: boolean;\n\n  /** Отключает событие `onClose` и блокирует кнопку закрытия сайдпейджа. */\n  disableClose?: boolean;\n\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   * @deprecated Используйте `ignoreOutsideClick` вместо `ignoreBackgroundClick`\n   **/\n  ignoreBackgroundClick?: boolean;\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   **/\n  ignoreOutsideClick?: boolean;\n\n  /** Ширина сайдпейджа. */\n  width?: number | string;\n\n  /** Ширина сайдпейджа в мобильном режиме. По умолчанию ширина во весь экран. */\n  mobileWidth?: number | string;\n\n  /** Событие закрытия сайдпейджа пользователем: нажатие на фон, Escape или крестик. */\n  onClose?: () => void;\n\n  /** Событие завершения анимации открытия сайдпейджа. */\n  onOpened?: () => void;\n\n  /** Отображает сайдпейдж слева. */\n  fromLeft?: boolean;\n\n  /** Отключает анимацию открытия сайдпейджа. */\n  disableAnimations?: boolean;\n\n  /** Выключает ограничение на фокус вне сайдпейджа.\n   * Работает только при заблокированном фоне `blockBackground = true`.*/\n  disableFocusLock?: boolean;\n\n  /** Отступ от края экрана до сайдпейджа. */\n  offset?: number | string;\n  /**\n   * Событие нажатия на фон.\n   */\n  onOutsideClick?: (e: Event) => void;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n  stickyHeaderHeight: number;\n  stickyFooterHeight: number;\n}\n\nexport const SidePageDataTids = {\n  root: 'SidePage__root',\n  container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'offset' | 'role'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.\n *\n * Составной компонент, включает в себя:\n * - «шапку» [SidePage.Header](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepageheader--docs), состоящую из заголовка и крестика закрытия окна;\n * - контент-зону [SidePage.Body](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagebody--docs) и контейнер с отступами [SidePage.Container](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagecontainer--docs);\n * - футер [SidePage.Footer](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagefooter--docs).\n */\n@withRenderEnvironment\n@rootNode\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n  public static displayName = 'SidePage';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n    stickyHeaderHeight: 0,\n    stickyFooterHeight: 0,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  public rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    this.globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange, this.globalObject);\n  }\n\n  public componentDidUpdate(prevProps: SidePageProps) {\n    if (prevProps.blockBackground !== this.props.blockBackground) {\n      ModalStack.rerender(this.globalObject);\n      this.setState({\n        hasBackground: ModalStack.isBlocking(this, this.globalObject),\n      });\n    }\n  }\n\n  public componentWillUnmount() {\n    this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this, this.globalObject);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    this.header?.update();\n    this.footer?.update();\n  };\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    offset: 0,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(SidePage.defaultProps);\n\n  public render(): 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  private renderMain() {\n    const { blockBackground, onOpened } = this.props;\n    const disableAnimations = this.getProps().disableAnimations;\n    return (\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <RenderContainer>\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <ZIndex\n                priority={'Sidepage'}\n                onScroll={LayoutEvents.emit}\n                createStackingContext\n                style={{ position: 'absolute' }}\n              >\n                {!isMobile && blockBackground && this.renderShadow()}\n                <CSSTransition\n                  in\n                  classNames={this.getTransitionNames()}\n                  appear={!disableAnimations}\n                  enter={!disableAnimations}\n                  exit={false}\n                  timeout={{\n                    enter: TRANSITION_TIMEOUT,\n                    exit: TRANSITION_TIMEOUT,\n                  }}\n                  nodeRef={this.rootRef}\n                  onEntered={onOpened}\n                >\n                  {this.renderContainer(isMobile)}\n                </CSSTransition>\n                {isMobile && <HideBodyVerticalScroll />}\n              </ZIndex>\n            </CommonWrapper>\n          </RenderContainer>\n        )}\n      </ResponsiveLayout>\n    );\n  }\n\n  private get isFocusLockDisabled() {\n    const { disableFocusLock } = this.getProps();\n    const { blockBackground } = this.props;\n    if (!blockBackground) {\n      return true;\n    }\n    if (disableFocusLock !== undefined) {\n      return disableFocusLock;\n    }\n    return false;\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { mobileWidth, blockBackground, fromLeft, 'aria-label': ariaLabel } = this.props;\n    const { offset, role } = this.getProps();\n\n    const widthDesktop = this.props.width || (blockBackground ? 800 : 500);\n    const widthMobile = mobileWidth || '100%';\n    const width = isMobile ? widthMobile : widthDesktop;\n\n    return (\n      <div\n        aria-modal\n        role={role}\n        aria-label={ariaLabel}\n        data-tid={SidePageDataTids.root}\n        className={this.cx({\n          [this.styles.root()]: true,\n        })}\n        ref={this.rootRef}\n        onScroll={LayoutEvents.emit}\n        style={{\n          width,\n          right: fromLeft ? 'auto' : offset,\n          left: fromLeft ? offset : 'auto',\n        }}\n      >\n        <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={this.styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid={SidePageDataTids.container}\n              className={this.cx(this.styles.wrapper(this.theme), {\n                [this.styles.wrapperLeft()]: fromLeft,\n                [this.styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [this.styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [this.styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              data-scroll-inset-top={this.state.stickyHeaderHeight || undefined}\n              data-scroll-inset-bottom={this.state.stickyFooterHeight || undefined}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </div>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n      setStickyHeaderHeight: this.setStickyHeaderHeight,\n      setStickyFooterHeight: this.setStickyFooterHeight,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <div className={this.styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={this.cx({\n            [this.styles.background()]: true,\n            [this.styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </div>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? this.styles.transitionRight : this.styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: this.styles.transitionActive(),\n      exit: this.styles.transitionLeave(),\n      exitActive: this.styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: this.styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    const sidePages = stack.filter(\n      (x) => isReactUIInstance<SidePage>(x, 'SidePage') && x.props.fromLeft === this.props.fromLeft,\n    );\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this, this.globalObject);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !(this.props.ignoreBackgroundClick || this.props.ignoreOutsideClick)) {\n      // ignore mousedown on window scrollbar\n      if (\n        isInstanceOf(e, this.globalObject.MouseEvent) &&\n        this.globalObject.document &&\n        e.clientX > this.globalObject.document.documentElement.clientWidth\n      ) {\n        return;\n      }\n      if (this.props.onOutsideClick) {\n        this.props.onOutsideClick(e);\n        if (e.defaultPrevented) {\n          return;\n        }\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      e.stopPropagation();\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private headerRef = (ref: SidePageHeader | null) => {\n    this.header = ref;\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n\n  private setStickyHeaderHeight = (stickyHeaderHeight = 0) => {\n    if (this.state.stickyHeaderHeight !== stickyHeaderHeight) {\n      this.setState({ stickyHeaderHeight });\n    }\n  };\n\n  private setStickyFooterHeight = (stickyFooterHeight = 0) => {\n    if (this.state.stickyFooterHeight !== stickyFooterHeight) {\n      this.setState({ stickyFooterHeight });\n    }\n  };\n}\n"]}

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

@@ -1,50 +1,50 @@
-/** Правила — в `SidePage.css`; здесь только имена классов. */
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    root: string;
-    overlay: string;
-    body: string;
-    mobileBody: string;
-    container: string;
-    mobileContainer: string;
-    containerWithoutHeader: string;
-    mobileContainerWithoutHeader: string;
-    containerWithoutFooter: string;
-    containerWithPanel: string;
-    focusLock: string;
-    wrapper: string;
-    wrapperLeft: string;
-    wrapperMarginLeft: string;
-    wrapperMarginRight: string;
-    headerWrapper: string;
-    header: string;
-    mobileHeader: string;
-    headerFixed: string;
-    headerNativeStuck: string;
-    title: string;
-    mobileTitle: string;
-    titleCut: string;
-    background: string;
-    backgroundGray: string;
-    shadow: string;
-    close: string;
-    closeSticky: string;
-    closeMobile: string;
-    closeFocus: string;
-    wrapperClose: string;
-    wrapperClose6_4: string;
-    mobileWrapperClose: string;
-    panel: string;
-    wrapperCloseFixed: string;
-    footerWrapper: string;
-    footer: string;
-    positionStatic: string;
-    footerContent: string;
-    mobileFooterContent: string;
-    footerFixed: string;
-    panelFixed: string;
-    transitionLeft: string;
-    transitionRight: string;
-    transitionActive: string;
-    transitionLeave: string;
-    transitionLeaveActive: string;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    overlay(): string;
+    body(t: Theme): string;
+    mobileBody(): string;
+    container(t: Theme): string;
+    mobileContainer(t: Theme): string;
+    containerWithoutHeader(t: Theme): string;
+    mobileContainerWithoutHeader(t: Theme): string;
+    containerWithoutFooter(t: Theme): string;
+    containerWithPanel(t: Theme): string;
+    focusLock(): string;
+    wrapper(t: Theme): string;
+    wrapperLeft(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    headerFixed(t: Theme): string;
+    headerNativeStuck(t: Theme): string;
+    title(t: Theme): string;
+    mobileTitle(t: Theme): string;
+    titleCut(): string;
+    background(): string;
+    backgroundGray(t: Theme): string;
+    shadow(t: Theme): string;
+    close(t: Theme): string;
+    closeSticky(t: Theme): string;
+    closeMobile(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
+    wrapperClose6_4(): string;
+    mobileWrapperClose(t: Theme): string;
+    panel(t: Theme): string;
+    wrapperCloseFixed(t: Theme): string;
+    footerWrapper(): string;
+    footer(t: Theme): string;
+    positionStatic(): string;
+    footerContent(t: Theme): string;
+    mobileFooterContent(t: Theme): string;
+    footerFixed(t: Theme): string;
+    panelFixed(t: Theme): string;
+    transitionLeft(): string;
+    transitionRight(): string;
+    transitionActive(): string;
+    transitionLeave(): string;
+    transitionLeaveActive(): string;
 }>;