@skbkontur/side-menu 0.9.5 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.10.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.5...@skbkontur/side-menu@0.10.0) (2023-05-26)
+
+
+### Features
+
+* **SideMenu:** add customization ([a8d9f01](https://git.skbkontur.ru/ui/ui-parking/commits/a8d9f01967fe8faae5557ea272378f13fd520205))
+
+
+
+
+
 ## [0.9.5](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.9.4...@skbkontur/side-menu@0.9.5) (2023-05-26)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -590,16 +590,21 @@ const items = [
 ```
 
 ### Адаптивность
-Все брейкпойнты вынесены в пропы:
+Брейкпойнты можно менять через пропы:
 
-| Проп | Дефолтное значение |
-| ------|--------------------|
-|desktopMediaQuery|'(min-width: 1200px)'|
-|narrowDesktopMediaQuery|'(min-width: 992px)'|
-|tabletMediaQuery|'(min-width: 768px)'|
-|mobileMediaQuery|'(min-width: 0px)'|
+`desktopMediaQuery`
+`narrowDesktopMediaQuery`
+`tabletMediaQuery`
+`mobileMediaQuery`
 
-Для того чтобы пропускать брекпойнты достаточно указать значение, равное следующему за ним брейкпойнту.
+Либо через переменные темы:
+
+`sideMenuDesktopMediaQuery = '(min-width: 1200px)';`
+`sideMenuNarrowDesktopMediaQuery = '(min-width: 992px)';`
+`sideMenuTabletMediaQuery = '(min-width: 768px)';`
+`sideMenuMobileMediaQuery = '(min-width: 0px)';`
+
+Для того чтобы пропускать брекпойнты, достаточно указать значение, равное следующему за ним брейкпойнту.
 Например, в следующем случае у `SideMenu` не будет адаптива для планшетов:
 
 `<SideMenu tabletMediaQuery={'(min-width: 768px)'} narrowDesktopMediaQuery={'(min-width: 768px)'}/>`
@@ -697,4 +702,80 @@ import { useHistory } from "react-router-dom";
 Детали реализации можно посмотреть здесь: https://github.com/remix-run/react-router/blob/v5/packages/react-router-dom/modules/Link.js#L36
 
 
-При необходимости вы можете повторить часть этой логики в своей обёртке.
+При необходимости вы можете повторить часть этой логики в своей обёртке.
+
+#### Пример кастомизации
+
+```jsx harmony
+import { Kontur, Ofd } from '@skbkontur/logos';
+import { SideMenu } from './index';
+import {
+  DocTextIcon24Regular,
+  SettingsGearIcon24Regular,
+} from '@skbkontur/icons';
+import { ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
+
+<div style={{ height: '200px', position: 'relative' }}>
+  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px' })}>
+    <SideMenu disableSwipe={false}>
+      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
+      <SideMenu.Body>
+        <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'новое'} />
+      </SideMenu.Body>
+      <SideMenu.Footer>
+        <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
+      </SideMenu.Footer>
+    </SideMenu>
+  </ThemeContext.Provider>
+</div>
+
+```
+
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuWidth: string;
+  sideMenuWidthForTouchScreens: string;
+  sideMenuMinimizedWidth: string;
+  sideMenuMarginX: string;
+  sideMenuBgColor: string;
+  sideMenuBoxShadowOffsetX: string;
+  sideMenuBoxShadowOffsetY: string;
+  sideMenuBoxShadowBlurRadius: string;
+  sideMenuBoxShadowColor: string;
+  sideMenuBoxShadow: string;
+  sideMenuLineHeight: string;
+  sideMenuLargeLineHeight: string;
+  sideMenuProductColor: string;
+  sideMenuFixedSeparatorColor: string;
+  sideMenuDesktopMediaQuery: string;
+  sideMenuNarrowDesktopMediaQuery: string;
+  sideMenuTabletMediaQuery: string;
+  sideMenuMobileMediaQuery: string;
+  //#region SeparatedSubMenu
+  sideMenuSeparatedSubMenuBgColor: string;
+  sideMenuSeparatedSubMenuBorderRightColor: string;
+  sideMenuSeparatedSubMenuPaddingY: string;
+  sideMenuSeparatedSubMenuPaddingX: string;
+  //#endregion
+  //#region NestedMenu
+  sideMenuNestedMenuPaddingLeft: string;
+  //#endregion
+  //#region RightBorder
+  MenuRightBorderWidth: string;
+  sideMenuRightBorderColor: string;
+  sideMenuRightBorderHoverWidth: string;
+  // #region BackButton (for Mobiles)
+  sideMenuBackButtonCaptionFontWeight: string;
+  sideMenuBackButtonCaptionFontSize: string;
+  sideMenuBackButtonCaptionLineHeight: string;
+  sideMenuBackButtonCaptionPaddingY: string;
+  sideMenuBackButtonIconPaddingLeft: string;
+  sideMenuBackButtonIconPaddingRight: string;
+  //#endregion
+  // #region Burger (for Mobiles or Tablets)
+  sideMenuBurgerMarginRight: string;
+  //#endregion
+}
+```

package/hooks/useActiveState.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isElementActive } from '../utils/scripts';
+import { isElementActive } from '../lib/utils/scripts';
 export var useActiveState = function (id, href, generatedId, activeMenuItem) {
     var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
     useEffect(function () {

package/hooks/useNumberOfTextLinesInItem.d.ts

@@ -1,2 +1,13 @@
 import React from 'react';
-export declare const useNumberOfTextLinesInItem: (textRef: React.RefObject<HTMLDivElement>, setLinesNumber: React.Dispatch<React.SetStateAction<number>>, text?: string, marker?: string, size?: string) => void;
+import { SideMenuTheme } from '../lib/theming/ThemeTypes';
+interface UseNumberOfTextLinesInItem {
+    textRef: React.RefObject<HTMLDivElement>;
+    setLinesNumber: React.Dispatch<React.SetStateAction<number>>;
+    theme: SideMenuTheme;
+    caption?: string;
+    marker?: string;
+    size?: 'small' | 'large';
+    isTouchScreen?: boolean;
+}
+export declare const useNumberOfTextLinesInItem: ({ textRef, setLinesNumber, theme, caption, marker, size, isTouchScreen, }: UseNumberOfTextLinesInItem) => void;
+export {};

package/hooks/useNumberOfTextLinesInItem.js

@@ -1,31 +1,46 @@
-import { isBrowser } from '../utils/scripts';
-export var useNumberOfTextLinesInItem = function (textRef, setLinesNumber, text, marker, size) {
-    if (text === void 0) { text = ''; }
-    if (marker === void 0) { marker = ''; }
-    if (size === void 0) { size = 'small'; }
-    var getContainerWidth = function (ctx, marker) {
-        var containerWidth = 232 - 2 * 16 - 24 - 2 * 8; //TODO после перехода на переменные темы заменить на формулу: side-menu-width - 2 * side-menu-paddingX - iconWidth - 2 * iconPaddingX
-        var markerPaddings = marker ? 2 * 6 + 8 : 0; //TODO после перехода на переменные темы заменить на marker-padding-x и marker-margin-right
-        var markerWidth = ctx.measureText(marker).width + markerPaddings;
-        return containerWidth - markerWidth - 8; //TODO после перехода на переменные темы заменить на caption-margin-right
-    };
-    var getNumberOfLines = function (ctx, words, containerWidth) {
-        var line = '';
-        var lineCount = 1;
-        words.forEach(function (word, i) {
-            var testLine = (line + " " + word).trim();
-            var testWidth = ctx.measureText(testLine).width;
-            if (testWidth > containerWidth && i > 0) {
-                line = '';
-                lineCount++;
-            }
-            else {
-                line = testLine;
-            }
-        });
-        return lineCount;
-    };
-    var fontSize = size === 'small' ? 14 : 16; //TODO после перехода на переменные темы заменить на side-menu-font-size-small и side-menu-font-size-large
+import { sideMenuCaptionMarginRight } from '../src/internal/ItemContent/Caption.styles';
+import { isBrowser } from '../lib/utils/scripts';
+var getNumberOfLines = function (ctx, words, containerWidth) {
+    var line = '';
+    var lineCount = 1;
+    words.forEach(function (word, i) {
+        var testLine = (line + " " + word).trim();
+        var testWidth = ctx.measureText(testLine).width;
+        if (testWidth > containerWidth && i > 0) {
+            line = '';
+            lineCount++;
+        }
+        else {
+            line = testLine;
+        }
+    });
+    return lineCount;
+};
+var getContainerWidth = function (ctx, marker, theme, isTouchScreen) {
+    var containerWidth = parseInt(isTouchScreen ? theme.sideMenuWidthForTouchScreens : theme.sideMenuWidth) -
+        2 * parseInt(theme.sideMenuMarginX) -
+        parseInt(theme.sideMenuIconSize) -
+        2 * parseInt(theme.sideMenuIconPaddingX);
+    var markerPaddings = marker
+        ? 2 * parseInt(theme.sideMenuMarkerPaddingX) + parseInt(theme.sideMenuMarkerMarginRight)
+        : 0;
+    var markerWidth = ctx.measureText(marker).width + markerPaddings;
+    return containerWidth - markerWidth - parseInt(sideMenuCaptionMarginRight);
+};
+var getFontSize = function (theme, isTouchScreen, size) {
+    if (size !== 'small') {
+        return parseInt(theme.sideMenuCaptionLargeFontSize);
+    }
+    if (isTouchScreen) {
+        return parseInt(theme.sideMenuCaptionFontSizeForTouchScreens);
+    }
+    else {
+        return parseInt(theme.sideMenuCaptionFontSize);
+    }
+};
+export var useNumberOfTextLinesInItem = function (_a) {
+    var textRef = _a.textRef, setLinesNumber = _a.setLinesNumber, theme = _a.theme, _b = _a.caption, caption = _b === void 0 ? '' : _b, _c = _a.marker, marker = _c === void 0 ? '' : _c, size = _a.size, isTouchScreen = _a.isTouchScreen;
+    var fontSize = getFontSize(theme, isTouchScreen, size);
     var fontFamily = textRef.current && isBrowser
         ? window.getComputedStyle(textRef.current).getPropertyValue('font-family')
         : "'Lab Grotesque', 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif";
@@ -33,7 +48,7 @@ export var useNumberOfTextLinesInItem = function (textRef, setLinesNumber, text,
     var ctx = canvas.getContext('2d');
     if (ctx) {
         ctx.font = fontSize + "px " + fontFamily;
-        var words = text.split(' ');
-        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, marker)));
+        var words = caption.split(' ');
+        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, marker, theme, isTouchScreen)));
     }
 };

package/hooks/useNumberOfTextLinesInSubItem.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>, size?: string) => void;
+import { SideMenuTheme } from '../lib/theming/ThemeTypes';
+export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>, size: string | undefined, theme: SideMenuTheme) => void;

package/hooks/useNumberOfTextLinesInSubItem.js

@@ -1,10 +1,10 @@
-export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText, size) {
+export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText, size, theme) {
     if (size === void 0) { size = 'small'; }
     if (textRef.current) {
         var el_1 = textRef.current;
         setTimeout(function () {
             var textHeight = +el_1.offsetHeight;
-            var lineHeight = size === 'small' ? 20 : 22; //TODO после возврата кастомизации заменить на переменные темы sideMenuLineHeight : sideMenuLargeLineHeight
+            var lineHeight = size === 'small' ? parseInt(theme.sideMenuLineHeight) : parseInt(theme.sideMenuLargeLineHeight);
             var lines = textHeight / lineHeight;
             if (lines >= 2) {
                 setIsMultilineText(true);

package/hooks/useOpenedState.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isParentOpened } from '../utils/scripts';
+import { isParentOpened } from '../lib/utils/scripts';
 export var useOpenedState = function (id, generatedId, openedParents, isActive, children, separatedMenuIsShown, isMobileAndSeparatedMenu) {
     if (isActive === void 0) { isActive = false; }
     var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];

package/hooks/useOpenedSubElementState.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isElementActive, isParentOpened } from '../utils/scripts';
+import { isElementActive, isParentOpened } from '../lib/utils/scripts';
 export var useOpenedSubElementState = function (id, generatedId, openedParents, activeMenuItem) {
     var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
     useEffect(function () {

package/internal/themes/SideMenuTheme.d.ts

@@ -0,0 +1,110 @@
+import { Theme as ReactUITheme } from '@skbkontur/react-ui/lib/theming/Theme';
+declare const SideMenuTheme_base: typeof import("@skbkontur/react-ui/internal/themes/DefaultTheme").DefaultTheme;
+export declare class SideMenuTheme extends SideMenuTheme_base {
+    static sideMenuWidth: string;
+    static sideMenuWidthForTouchScreens: string;
+    static sideMenuMinimizedWidth: string;
+    static sideMenuMarginX: string;
+    static sideMenuBgColor: string;
+    static sideMenuBoxShadowOffsetX: string;
+    static sideMenuBoxShadowOffsetY: string;
+    static sideMenuBoxShadowBlurRadius: string;
+    static sideMenuBoxShadowColor: string;
+    static get sideMenuBoxShadow(): string;
+    static sideMenuLineHeight: string;
+    static sideMenuLargeLineHeight: string;
+    static sideMenuProductColor: string;
+    static sideMenuFixedSeparatorColor: string;
+    static sideMenuDesktopMediaQuery: string;
+    static sideMenuNarrowDesktopMediaQuery: string;
+    static sideMenuTabletMediaQuery: string;
+    static sideMenuMobileMediaQuery: string;
+    static sideMenuBodyPaddingBottom: string;
+    static sideMenuSeparatedSubMenuBgColor: string;
+    static sideMenuSeparatedSubMenuBorderRightColor: string;
+    static sideMenuSeparatedSubMenuPaddingY: string;
+    static sideMenuSeparatedSubMenuPaddingX: string;
+    static sideMenuSubItemHeaderFontSize: string;
+    static sideMenuSubItemHeaderColor: string;
+    static sideMenuSubItemHeaderPadding: string;
+    static sideMenuAvatarMargin: string;
+    static get sideMenuCaptionLineHeight(): string;
+    static sideMenuCaptionFontSize: string;
+    static sideMenuCaptionFontSizeForTouchScreens: string;
+    static sideMenuCaptionLineHeightForTouchScreens: string;
+    static sideMenuCaptionSubItemMarginLeft: string;
+    static sideMenuCaptionSubItemFontSizeForTouchScreens: string;
+    static get sideMenuCaptionSubItemLineHeightForTouchScreens(): string;
+    static sideMenuCaptionLargeFontSize: string;
+    static get sideMenuCaptionLargeLineHeight(): string;
+    static sideMenuBackButtonCaptionFontWeight: string;
+    static sideMenuBackButtonCaptionFontSize: string;
+    static sideMenuBackButtonCaptionLineHeight: string;
+    static sideMenuBackButtonCaptionPaddingY: string;
+    static sideMenuBackButtonIconPaddingLeft: string;
+    static sideMenuBackButtonIconPaddingRight: string;
+    static sideMenuIconSize: string;
+    static sideMenuIconSubItemSize: string;
+    static sideMenuIconPaddingY: string;
+    static sideMenuIconPaddingX: string;
+    static sideMenuIconMinHeight: string;
+    static get sideMenuIconLineHeight(): string;
+    static sideMenuIconLargeMinHeight: string;
+    static get sideMenuIconLargeLineHeight(): string;
+    static sideMenuIconSubItemPaddingLeft: string;
+    static sideMenuIconSubItemPaddingRight: string;
+    static sideMenuIconSubItemMinHeight: string;
+    static sideMenuIconSubItemLineHeight: string;
+    static sideMenuIconSubItemColor: string;
+    static sideMenuIconLargeSubItemMinHeight: string;
+    static sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft: string;
+    static sideMenuItemContentPaddingY: string;
+    static sideMenuItemContentLargePaddingY: string;
+    static sideMenuSubItemContentPaddingY: string;
+    static sideMenuSubItemContentLargePaddingY: string;
+    static sideMenuItemContentLargeMultilinePaddingY: string;
+    static sideMenuItemContentPaddingYForTouchScreens: string;
+    static sideMenuSubItemContentPaddingYForTouchScreens: string;
+    static sideMenuMarkerPaddingX: string;
+    static get sideMenuMarkerBg(): string;
+    static sideMenuMarkerColor: string;
+    static sideMenuMarkerMarginRight: string;
+    static sideMenuMarkerFontWeight: string;
+    static sideMenuMarkerMultilineMarginTop: string;
+    static sideMenuBurgerMarginRight: string;
+    static sideMenuItemBorderRadius: string;
+    static sideMenuItemHoverBg: string;
+    static sideMenuItemActiveBg: string;
+    static sideMenuSubItemWithSeparatedSubMenuHoverBg: string;
+    static sideMenuSubItemWithSeparatedSubMenuActiveBg: string;
+    static sideMenuFocusedItemBoxShadowInset: string;
+    static sideMenuFocusedItemBoxShadowOffsetX: string;
+    static sideMenuFocusedItemBoxShadowOffsetY: string;
+    static sideMenuFocusedItemBoxShadowBlurRadius: string;
+    static sideMenuFocusedItemBoxShadowSpreadRadius: string;
+    static sideMenuFocusedItemBoxShadowColor: string;
+    static get sideMenuFocusedItemBoxShadow(): string;
+    static sideMenuDividerBgColor: string;
+    static sideMenuDividerMarginX: string;
+    static sideMenuNestedMenuPaddingLeft: string;
+    static sideMenuRightBorderWidth: string;
+    static get sideMenuRightBorderColor(): string;
+    static sideMenuRightBorderHoverWidth: string;
+    static sideMenuLogotypePaddingLeft: string;
+    static sideMenuLogotypePaddingTop: string;
+    static sideMenuLogotypePaddingBottom: string;
+    static sideMenuLogotypePaddingYForTouchScreens: string;
+    static sideMenuLogotypeHiddenIconPaddingLeft: string;
+    static sideMenuFooterPaddingBottom: string;
+    static sideMenuFooterPaddingTop: string;
+    static get sideMenuFooterDividerColor(): string;
+    static sideMenuHeaderPaddingTop: string;
+    static sideMenuHeaderPaddingBottom: string;
+    static get sideMenuHeaderDividerColor(): string;
+    static sideMenuHeaderPaddingTopForTouchScreens: string;
+}
+export declare const REACT_UI_SIDE_MENU_THEME_KEY = "__IS_REACT_UI_SIDE_MENU_THEME__";
+export declare const markAsSideMenuTheme: <T extends object>(theme: T) => T;
+export declare const isSideMenuTheme: (theme: ReactUITheme | SideMenuTheme) => boolean;
+export declare const SideMenuThemeInternal: typeof SideMenuTheme;
+export {};

package/internal/themes/SideMenuTheme.js

@@ -0,0 +1,234 @@
+import { __extends } from "tslib";
+import { exposeGetters } from '@skbkontur/react-ui/lib/theming/ThemeHelpers';
+var SideMenuTheme = /** @class */ (function (_super) {
+    __extends(SideMenuTheme, _super);
+    function SideMenuTheme() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SideMenuTheme, "sideMenuBoxShadow", {
+        get: function () {
+            return this.sideMenuBoxShadowOffsetX + " " + this.sideMenuBoxShadowOffsetY + " " + this.sideMenuBoxShadowBlurRadius + " " + this.sideMenuBoxShadowColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuCaptionLineHeight", {
+        //#endregion
+        // #region Caption
+        get: function () {
+            return this.sideMenuLineHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuCaptionSubItemLineHeightForTouchScreens", {
+        get: function () {
+            return this.sideMenuLargeLineHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuCaptionLargeLineHeight", {
+        get: function () {
+            return this.sideMenuLargeLineHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuIconLineHeight", {
+        get: function () {
+            return this.sideMenuLineHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuIconLargeLineHeight", {
+        get: function () {
+            return this.sideMenuLargeLineHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuMarkerBg", {
+        get: function () {
+            return this.sideMenuProductColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuFocusedItemBoxShadow", {
+        get: function () {
+            return this.sideMenuFocusedItemBoxShadowInset + " " + this.sideMenuFocusedItemBoxShadowOffsetX + " " + this.sideMenuFocusedItemBoxShadowOffsetY + " " + this.sideMenuFocusedItemBoxShadowBlurRadius + " " + this.sideMenuFocusedItemBoxShadowSpreadRadius + " " + this.sideMenuFocusedItemBoxShadowColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuRightBorderColor", {
+        get: function () {
+            return this.sideMenuProductColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuFooterDividerColor", {
+        get: function () {
+            return this.sideMenuFixedSeparatorColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuHeaderDividerColor", {
+        get: function () {
+            return this.sideMenuFixedSeparatorColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    //#region SideMenu
+    SideMenuTheme.sideMenuWidth = '232px';
+    SideMenuTheme.sideMenuWidthForTouchScreens = '328px';
+    SideMenuTheme.sideMenuMinimizedWidth = '72px';
+    SideMenuTheme.sideMenuMarginX = '16px';
+    SideMenuTheme.sideMenuBgColor = '#f6f6f6';
+    SideMenuTheme.sideMenuBoxShadowOffsetX = '4px';
+    SideMenuTheme.sideMenuBoxShadowOffsetY = '4px';
+    SideMenuTheme.sideMenuBoxShadowBlurRadius = '24px';
+    SideMenuTheme.sideMenuBoxShadowColor = 'rgba(0, 0, 0, 0.24)';
+    SideMenuTheme.sideMenuLineHeight = '20px';
+    SideMenuTheme.sideMenuLargeLineHeight = '22px';
+    SideMenuTheme.sideMenuProductColor = '#2291ff';
+    SideMenuTheme.sideMenuFixedSeparatorColor = '#e6e6e6';
+    SideMenuTheme.sideMenuDesktopMediaQuery = '(min-width: 1200px)';
+    SideMenuTheme.sideMenuNarrowDesktopMediaQuery = '(min-width: 992px)';
+    SideMenuTheme.sideMenuTabletMediaQuery = '(min-width: 768px)';
+    SideMenuTheme.sideMenuMobileMediaQuery = '(min-width: 0px)';
+    //#endregion
+    //#region Body
+    SideMenuTheme.sideMenuBodyPaddingBottom = '8px';
+    //#endregion
+    //#region SeparatedSubMenu
+    SideMenuTheme.sideMenuSeparatedSubMenuBgColor = '#fff';
+    SideMenuTheme.sideMenuSeparatedSubMenuBorderRightColor = '#e5e5e5';
+    SideMenuTheme.sideMenuSeparatedSubMenuPaddingY = '24px';
+    SideMenuTheme.sideMenuSeparatedSubMenuPaddingX = '16px';
+    //#endregion
+    //#region SubItemHeader
+    SideMenuTheme.sideMenuSubItemHeaderFontSize = '12px';
+    SideMenuTheme.sideMenuSubItemHeaderColor = 'rgba(0, 0, 0, 0.48)';
+    SideMenuTheme.sideMenuSubItemHeaderPadding = '10px 8px 2px 40px';
+    //#endregion
+    //#region Avatar
+    SideMenuTheme.sideMenuAvatarMargin = '0 4px';
+    SideMenuTheme.sideMenuCaptionFontSize = '14px';
+    SideMenuTheme.sideMenuCaptionFontSizeForTouchScreens = '18px';
+    SideMenuTheme.sideMenuCaptionLineHeightForTouchScreens = '24px';
+    SideMenuTheme.sideMenuCaptionSubItemMarginLeft = '4px';
+    SideMenuTheme.sideMenuCaptionSubItemFontSizeForTouchScreens = '16px';
+    SideMenuTheme.sideMenuCaptionLargeFontSize = '16px';
+    //#endregion
+    // #region BackButton
+    SideMenuTheme.sideMenuBackButtonCaptionFontWeight = '700';
+    SideMenuTheme.sideMenuBackButtonCaptionFontSize = '20px';
+    SideMenuTheme.sideMenuBackButtonCaptionLineHeight = '28px';
+    SideMenuTheme.sideMenuBackButtonCaptionPaddingY = '5px';
+    SideMenuTheme.sideMenuBackButtonIconPaddingLeft = '10px';
+    SideMenuTheme.sideMenuBackButtonIconPaddingRight = '6px';
+    //#endregion
+    // #region Icon
+    SideMenuTheme.sideMenuIconSize = '24';
+    SideMenuTheme.sideMenuIconSubItemSize = '16';
+    SideMenuTheme.sideMenuIconPaddingY = '0';
+    SideMenuTheme.sideMenuIconPaddingX = '8px';
+    SideMenuTheme.sideMenuIconMinHeight = '32px';
+    SideMenuTheme.sideMenuIconLargeMinHeight = '30px';
+    SideMenuTheme.sideMenuIconSubItemPaddingLeft = '20px';
+    SideMenuTheme.sideMenuIconSubItemPaddingRight = '0';
+    SideMenuTheme.sideMenuIconSubItemMinHeight = '20px';
+    SideMenuTheme.sideMenuIconSubItemLineHeight = '16px';
+    SideMenuTheme.sideMenuIconSubItemColor = '#858585';
+    SideMenuTheme.sideMenuIconLargeSubItemMinHeight = '22px';
+    SideMenuTheme.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft = '4px';
+    //#endregion
+    // #region ItemContent
+    SideMenuTheme.sideMenuItemContentPaddingY = '4px';
+    SideMenuTheme.sideMenuItemContentLargePaddingY = '9px';
+    SideMenuTheme.sideMenuSubItemContentPaddingY = '4px';
+    SideMenuTheme.sideMenuSubItemContentLargePaddingY = '5px';
+    SideMenuTheme.sideMenuItemContentLargeMultilinePaddingY = '5px';
+    SideMenuTheme.sideMenuItemContentPaddingYForTouchScreens = '8px';
+    SideMenuTheme.sideMenuSubItemContentPaddingYForTouchScreens = '9px';
+    //#endregion
+    // #region Marker
+    SideMenuTheme.sideMenuMarkerPaddingX = '6px';
+    SideMenuTheme.sideMenuMarkerColor = '#fff';
+    SideMenuTheme.sideMenuMarkerMarginRight = '8px';
+    SideMenuTheme.sideMenuMarkerFontWeight = '700';
+    SideMenuTheme.sideMenuMarkerMultilineMarginTop = '4px';
+    //#endregion
+    // #region Burger
+    SideMenuTheme.sideMenuBurgerMarginRight = '8px';
+    //#endregion
+    // #region MenuItem
+    SideMenuTheme.sideMenuItemBorderRadius = '8px';
+    SideMenuTheme.sideMenuItemHoverBg = 'rgba(255, 255, 255, 0.48)';
+    SideMenuTheme.sideMenuItemActiveBg = '#fff';
+    SideMenuTheme.sideMenuSubItemWithSeparatedSubMenuHoverBg = '#f6f6f6';
+    SideMenuTheme.sideMenuSubItemWithSeparatedSubMenuActiveBg = '#f2f2f2';
+    SideMenuTheme.sideMenuFocusedItemBoxShadowInset = 'inset';
+    SideMenuTheme.sideMenuFocusedItemBoxShadowOffsetX = '0';
+    SideMenuTheme.sideMenuFocusedItemBoxShadowOffsetY = '0';
+    SideMenuTheme.sideMenuFocusedItemBoxShadowBlurRadius = '0';
+    SideMenuTheme.sideMenuFocusedItemBoxShadowSpreadRadius = '2px';
+    SideMenuTheme.sideMenuFocusedItemBoxShadowColor = '#1c7edf';
+    //#endregion
+    //#region Divider
+    SideMenuTheme.sideMenuDividerBgColor = '#d6d6d6';
+    SideMenuTheme.sideMenuDividerMarginX = '8px';
+    //#endregion
+    //#region NestedMenu
+    SideMenuTheme.sideMenuNestedMenuPaddingLeft = '16px';
+    //#endregion
+    //#region RightBorder
+    SideMenuTheme.sideMenuRightBorderWidth = '20px';
+    SideMenuTheme.sideMenuRightBorderHoverWidth = '2px';
+    //#endregion
+    //#region Logotype
+    SideMenuTheme.sideMenuLogotypePaddingLeft = '8px';
+    SideMenuTheme.sideMenuLogotypePaddingTop = '2px';
+    SideMenuTheme.sideMenuLogotypePaddingBottom = '6px';
+    SideMenuTheme.sideMenuLogotypePaddingYForTouchScreens = '8px';
+    SideMenuTheme.sideMenuLogotypeHiddenIconPaddingLeft = '4px';
+    //#endregion
+    //#region Footer
+    SideMenuTheme.sideMenuFooterPaddingBottom = '24px';
+    SideMenuTheme.sideMenuFooterPaddingTop = '8px';
+    //#endregion
+    //#region Header
+    SideMenuTheme.sideMenuHeaderPaddingTop = '24px';
+    SideMenuTheme.sideMenuHeaderPaddingBottom = '8px';
+    SideMenuTheme.sideMenuHeaderPaddingTopForTouchScreens = '16px';
+    return SideMenuTheme;
+}(/** @class */ (function () {
+    function class_1() {
+    }
+    return class_1;
+}())));
+export { SideMenuTheme };
+export var REACT_UI_SIDE_MENU_THEME_KEY = '__IS_REACT_UI_SIDE_MENU_THEME__';
+export var markAsSideMenuTheme = function (theme) {
+    var _a;
+    return Object.create(theme, (_a = {},
+        _a[REACT_UI_SIDE_MENU_THEME_KEY] = {
+            value: true,
+            writable: false,
+            enumerable: false,
+            configurable: false,
+        },
+        _a));
+};
+export var isSideMenuTheme = function (theme) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    //@ts-ignore
+    return theme[REACT_UI_SIDE_MENU_THEME_KEY] === true;
+};
+export var SideMenuThemeInternal = exposeGetters(SideMenuTheme);

package/lib/theming/ThemeHelpers.d.ts

@@ -0,0 +1,18 @@
+import { Theme as ReactUITheme } from '@skbkontur/react-ui/lib/theming/Theme';
+import { SideMenuTheme } from './ThemeTypes';
+/**
+ * Creates SideMenuTheme out of ReactUI's Theme.
+ *
+ * Inserts SideMenu vars in the theme, puts them over ReactUI's vars,
+ * but respects these SideMenu vars values that might have been specified in ReactUI's theme before that.
+ *
+ * This allows inserting SideMenu vars in the theme on the fly
+ * (without need for users to do it manually in their apps),
+ * and using ReactUI's ThemeContext.Provider for overriding them.
+ */
+export declare const createSideMenuTheme: (theme: ReactUITheme | SideMenuTheme) => SideMenuTheme;
+export declare const getSideMenuTheme: (() => Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>) | ((arg: Readonly<typeof import("@skbkontur/react-ui/internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>) => Readonly<typeof import("../../internal/themes/SideMenuTheme").SideMenuTheme>);
+export declare const memoizeStyle: <S extends {
+    [className: string]: (() => string) | ((t: SideMenuTheme) => string);
+}>(styles: S) => S;
+export declare const cssName: (className: string) => string;