@skbkontur/side-menu 0.14.8 → 1.0.1-router-test.0

package/internal/themes/SideMenuTheme.d.ts

@@ -14,7 +14,6 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuLineHeight: string;
     static sideMenuLargeLineHeight: string;
     static sideMenuProductColor: string;
-    static sideMenuFixedSeparatorColor: string;
     static sideMenuDesktopMediaQuery: string;
     static sideMenuNarrowDesktopMediaQuery: string;
     static sideMenuTabletMediaQuery: string;
@@ -62,21 +61,28 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuItemContentLargePaddingY: string;
     static sideMenuSubItemContentPaddingY: string;
     static sideMenuSubItemContentLargePaddingY: string;
-    static sideMenuItemContentLargeMultilinePaddingY: string;
+    static sideMenuItemContentLargeMultilinePaddingTop: string;
+    static sideMenuItemContentLargeMultilinePaddingBottom: string;
+    static sideMenuItemContentMultilinePaddingTop: string;
+    static sideMenuItemContentMultilinePaddingBottom: string;
     static sideMenuItemContentPaddingYForTouchScreens: string;
     static sideMenuSubItemContentPaddingYForTouchScreens: string;
     static sideMenuMarkerPaddingX: string;
+    static sideMenuMarkerPaddingY: string;
     static get sideMenuMarkerBg(): string;
     static sideMenuMarkerColor: string;
+    static get sideMenuMarkerSubItemColor(): string;
     static sideMenuMarkerMarginRight: string;
     static sideMenuMarkerFontWeight: string;
+    static sideMenuSubItemMarkerFontWeight: string;
     static sideMenuMarkerMultilineMarginTop: string;
+    static sideMenuMarkerLineHeight: string;
     static sideMenuBurgerMarginRight: string;
     static sideMenuItemBorderRadius: string;
     static sideMenuItemHoverBg: string;
     static sideMenuItemActiveBg: string;
-    static sideMenuSubItemWithSeparatedSubMenuHoverBg: string;
-    static sideMenuSubItemWithSeparatedSubMenuActiveBg: string;
+    static get sideMenuSubItemWithSeparatedSubMenuHoverBg(): string;
+    static get sideMenuSubItemWithSeparatedSubMenuActiveBg(): string;
     static sideMenuFocusedItemBoxShadowInset: string;
     static sideMenuFocusedItemBoxShadowOffsetX: string;
     static sideMenuFocusedItemBoxShadowOffsetY: string;
@@ -84,8 +90,9 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuFocusedItemBoxShadowSpreadRadius: string;
     static sideMenuFocusedItemBoxShadowColor: string;
     static get sideMenuFocusedItemBoxShadow(): string;
-    static sideMenuDividerBgColor: string;
     static sideMenuDividerMarginX: string;
+    static sideMenuDividerMarginY: string;
+    static sideMenuDividerBgColor: string;
     static sideMenuNestedMenuPaddingLeft: string;
     static sideMenuRightBorderWidth: string;
     static get sideMenuRightBorderColor(): string;

package/internal/themes/SideMenuTheme.js

@@ -56,6 +56,27 @@ var SideMenuTheme = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SideMenuTheme, "sideMenuMarkerSubItemColor", {
+        get: function () {
+            return this.sideMenuIconSubItemColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuSubItemWithSeparatedSubMenuHoverBg", {
+        get: function () {
+            return this.sideMenuBgColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SideMenuTheme, "sideMenuSubItemWithSeparatedSubMenuActiveBg", {
+        get: function () {
+            return this.sideMenuBgColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(SideMenuTheme, "sideMenuFocusedItemBoxShadow", {
         get: function () {
             return this.sideMenuFocusedItemBoxShadowInset + " " + this.sideMenuFocusedItemBoxShadowOffsetX + " " + this.sideMenuFocusedItemBoxShadowOffsetY + " " + this.sideMenuFocusedItemBoxShadowBlurRadius + " " + this.sideMenuFocusedItemBoxShadowSpreadRadius + " " + this.sideMenuFocusedItemBoxShadowColor;
@@ -72,14 +93,14 @@ var SideMenuTheme = /** @class */ (function (_super) {
     });
     Object.defineProperty(SideMenuTheme, "sideMenuFooterDividerColor", {
         get: function () {
-            return this.sideMenuFixedSeparatorColor;
+            return this.sideMenuDividerBgColor;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(SideMenuTheme, "sideMenuHeaderDividerColor", {
         get: function () {
-            return this.sideMenuFixedSeparatorColor;
+            return this.sideMenuDividerBgColor;
         },
         enumerable: false,
         configurable: true
@@ -89,7 +110,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuWidthForTouchScreens = '328px';
     SideMenuTheme.sideMenuMinimizedWidth = '72px';
     SideMenuTheme.sideMenuMarginX = '16px';
-    SideMenuTheme.sideMenuBgColor = '#f6f6f6';
+    SideMenuTheme.sideMenuBgColor = '#f0f0f0';
     SideMenuTheme.sideMenuBoxShadowOffsetX = '4px';
     SideMenuTheme.sideMenuBoxShadowOffsetY = '4px';
     SideMenuTheme.sideMenuBoxShadowBlurRadius = '24px';
@@ -97,7 +118,6 @@ var SideMenuTheme = /** @class */ (function (_super) {
     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)';
@@ -145,7 +165,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuIconSubItemPaddingRight = '0';
     SideMenuTheme.sideMenuIconSubItemMinHeight = '20px';
     SideMenuTheme.sideMenuIconSubItemLineHeight = '16px';
-    SideMenuTheme.sideMenuIconSubItemColor = '#858585';
+    SideMenuTheme.sideMenuIconSubItemColor = '#757575';
     SideMenuTheme.sideMenuIconLargeSubItemMinHeight = '22px';
     SideMenuTheme.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft = '4px';
     //#endregion
@@ -154,26 +174,30 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuItemContentLargePaddingY = '9px';
     SideMenuTheme.sideMenuSubItemContentPaddingY = '4px';
     SideMenuTheme.sideMenuSubItemContentLargePaddingY = '5px';
-    SideMenuTheme.sideMenuItemContentLargeMultilinePaddingY = '5px';
+    SideMenuTheme.sideMenuItemContentLargeMultilinePaddingTop = '9px';
+    SideMenuTheme.sideMenuItemContentLargeMultilinePaddingBottom = '13px';
+    SideMenuTheme.sideMenuItemContentMultilinePaddingTop = '6px';
+    SideMenuTheme.sideMenuItemContentMultilinePaddingBottom = '10px';
     SideMenuTheme.sideMenuItemContentPaddingYForTouchScreens = '8px';
     SideMenuTheme.sideMenuSubItemContentPaddingYForTouchScreens = '9px';
     //#endregion
     // #region Marker
     SideMenuTheme.sideMenuMarkerPaddingX = '6px';
+    SideMenuTheme.sideMenuMarkerPaddingY = '0px';
     SideMenuTheme.sideMenuMarkerColor = '#fff';
     SideMenuTheme.sideMenuMarkerMarginRight = '8px';
-    SideMenuTheme.sideMenuMarkerFontWeight = '700';
+    SideMenuTheme.sideMenuMarkerFontWeight = '600';
+    SideMenuTheme.sideMenuSubItemMarkerFontWeight = '400';
     SideMenuTheme.sideMenuMarkerMultilineMarginTop = '4px';
+    SideMenuTheme.sideMenuMarkerLineHeight = '20px';
     //#endregion
     // #region Burger
     SideMenuTheme.sideMenuBurgerMarginRight = '8px';
     //#endregion
     // #region MenuItem
     SideMenuTheme.sideMenuItemBorderRadius = '8px';
-    SideMenuTheme.sideMenuItemHoverBg = 'rgba(255, 255, 255, 0.48)';
+    SideMenuTheme.sideMenuItemHoverBg = '#E6E6E6';
     SideMenuTheme.sideMenuItemActiveBg = '#fff';
-    SideMenuTheme.sideMenuSubItemWithSeparatedSubMenuHoverBg = '#f6f6f6';
-    SideMenuTheme.sideMenuSubItemWithSeparatedSubMenuActiveBg = '#f2f2f2';
     SideMenuTheme.sideMenuFocusedItemBoxShadowInset = 'inset';
     SideMenuTheme.sideMenuFocusedItemBoxShadowOffsetX = '0';
     SideMenuTheme.sideMenuFocusedItemBoxShadowOffsetY = '0';
@@ -182,8 +206,9 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuFocusedItemBoxShadowColor = '#1c7edf';
     //#endregion
     //#region Divider
-    SideMenuTheme.sideMenuDividerBgColor = '#d6d6d6';
     SideMenuTheme.sideMenuDividerMarginX = '8px';
+    SideMenuTheme.sideMenuDividerMarginY = '4px';
+    SideMenuTheme.sideMenuDividerBgColor = 'rgba(0,0,0, 0.1)';
     //#endregion
     //#region NestedMenu
     SideMenuTheme.sideMenuNestedMenuPaddingLeft = '16px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.14.8",
+  "version": "1.0.1-router-test.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/SideMenuBody/SideMenuBody.js

@@ -9,6 +9,7 @@ import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { ScrollContainer, ScrollContainerDataTids } from '@skbkontur/react-ui';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
+import { burgerTransitionDuration } from '../SideMenu/SideMenu';
 var SideMenuBodyInner = forwardRef(function (_a, ref) {
     var _b, _c;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
@@ -24,13 +25,14 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
         }
     };
     useEffect(function () {
+        var delay = context.isMobile ? burgerTransitionDuration : 50;
         setTimeout(function () {
             var _a, _b;
             // @ts-expect-error: accessing private method
             (_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'));
-        }, 50);
+        }, delay);
         setScrollContainerInnerPosition();
-    }, [context.activeMenuItem, context.isShown]);
+    }, [context.activeMenuItem, context.isShown, context.isBeingTransitioned && context.isMobile]);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     if (context.isShown) {
         return (React.createElement("div", { ref: mergeRefs([ref, sideMenuBodyRef]), className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className) },

package/src/SideMenuDivider/SideMenuDivider.js

@@ -1,11 +1,14 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenuDivider.styles';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 var SideMenuDividerInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
-    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className), ref: ref }, rest));
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className), ref: ref }, rest));
 });
 SideMenuDividerInner.displayName = 'SideMenuDivider';
 /**

package/src/SideMenuDivider/SideMenuDivider.md

@@ -4,4 +4,5 @@
 {
   sideMenuDividerBgColor: string;
   sideMenuDividerMarginX: string;
+  sideMenuDividerMarginY: string;
 }

package/src/SideMenuDivider/SideMenuDivider.styles.d.ts

@@ -1,3 +1,4 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
+    root(t: SideMenuTheme): string;
 };

package/src/SideMenuDivider/SideMenuDivider.styles.js

@@ -2,8 +2,8 @@ import { __makeTemplateObject } from "tslib";
 import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "], ["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      border: none;\n      background: ", ";\n      margin: ", " ", ";\n    "], ["\n      height: 1px;\n      border: none;\n      background: ", ";\n      margin: ", " ", ";\n    "])), t.sideMenuDividerBgColor, t.sideMenuDividerMarginY, t.sideMenuDividerMarginX);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/SideMenuFooter/SideMenuFooter.styles.js

@@ -6,7 +6,7 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n    "])), t.sideMenuFooterPaddingBottom, t.sideMenuFooterPaddingTop, t.sideMenuMarginX);
     },
     rootFixed: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0 1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 1px 0 ", ";\n    "])), t.sideMenuFooterDividerColor);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: 0 -1px 0 ", ";\n    "], ["\n      box-shadow: 0 -1px 0 ", ";\n    "])), t.sideMenuFooterDividerColor);
     },
     rootTransitioned: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -12,10 +12,10 @@ var styles = {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
     },
     rootWithSeparatedMenuShown: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      z-index: 9000;\n    "], ["\n      background: ", ";\n      z-index: 9000;\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
     fixedRoot: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), t.sideMenuHeaderDividerColor);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: 0 1px 0 ", ";\n    "], ["\n      box-shadow: 0 1px 0 ", ";\n    "])), t.sideMenuHeaderDividerColor);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/SideMenuItem/SideMenuItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonClickableElementProps } from '../internal/ClickableElement';
 export interface SideMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonClickableElementProps {
+    component?: React.ComponentType<any>;
 }
 /**
  * Элемент списка

package/src/SideMenuItem/SideMenuItem.js

@@ -1,8 +1,9 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { ClickableElement } from '../internal/ClickableElement';
-var SideMenuItemInner = forwardRef(function (props, ref) {
-    return React.createElement(ClickableElement, __assign({}, props, { ref: ref, element: 'button' }));
+var SideMenuItemInner = forwardRef(function (_a, ref) {
+    var component = _a.component, rest = __rest(_a, ["component"]);
+    return React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'button' }));
 });
 SideMenuItemInner.displayName = 'SideMenuItem';
 /**

package/src/SideMenuItem/SideMenuItem.md

@@ -19,7 +19,10 @@
   sideMenuItemContentLargePaddingY: string;
   sideMenuSubItemContentPaddingY: string;
   sideMenuSubItemContentLargePaddingY: string;
-  sideMenuItemContentLargeMultilinePaddingY: string;
+  sideMenuItemContentLargeMultilinePaddingTop: string;
+  sideMenuItemContentLargeMultilinePaddingBottom: string;
+  sideMenuItemContentMultilinePaddingTop: string;
+  sideMenuItemContentMultilinePaddingBottom: string;
   sideMenuItemContentPaddingYForTouchScreens: string;
   sideMenuSubItemContentPaddingYForTouchScreens: string;
   //#endregion
@@ -53,11 +56,15 @@
   //#endregion
   // #region Marker
   sideMenuMarkerPaddingX: string;
+  sideMenuMarkerPaddingY: string;
   sideMenuMarkerBg: string;
   sideMenuMarkerColor: string;
+  sideMenuMarkerSubItemColor: string;
   sideMenuMarkerMarginRight: string;
   sideMenuMarkerFontWeight: string;
+  sideMenuSubItemMarkerFontWeight: string;
   sideMenuMarkerMultilineMarginTop: string;
+  sideMenuMarkerLineHeight: string;
   //#endregion
 }
 ```

package/src/SideMenuLink/SideMenuLink.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonClickableElementProps } from '../internal/ClickableElement';
 export interface SideMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, CommonClickableElementProps {
+    component?: React.ComponentType<any>;
 }
 /**
  * Ссылка для `SideMenu`

package/src/SideMenuLink/SideMenuLink.js

@@ -5,8 +5,8 @@ import { jsStyles } from './SideMenuLink.styles';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 var SideMenuLinkInner = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, rest = __rest(_a, ["className"]);
-    return React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: 'a', className: cx((_b = {}, _b[jsStyles.link()] = true, _b), className) }));
+    var className = _a.className, component = _a.component, rest = __rest(_a, ["className", "component"]);
+    return (React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'a', className: cx((_b = {}, _b[jsStyles.link()] = true, _b), className) })));
 });
 SideMenuLinkInner.displayName = 'SideMenuLink';
 /**

package/src/internal/ClickableElement.d.ts

@@ -21,7 +21,7 @@ export interface CommonClickableElementProps extends CommonProps {
     _isBackButton?: boolean;
 }
 export interface ClickableElementProps extends CommonClickableElementProps {
-    element: 'a' | 'button';
+    element: 'a' | 'button' | React.ComponentType<any>;
     href?: string;
     onClick?: React.EventHandler<React.MouseEvent<Element>>;
     onKeyDown?: React.EventHandler<React.KeyboardEvent<Element>>;

package/src/internal/ClickableElement.js

@@ -65,11 +65,13 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var setSeparatedMenuIsShown = function () {
         var _a, _b;
-        if (!_isSubMenu && context.isSeparatedMenu) {
-            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
+        if (_isDropdown || _isSubMenu || !context.isSeparatedMenu)
+            return;
+        if (children) {
+            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, true);
         }
-        if (context.isSeparatedMenu && !_isSubMenu && children) {
-            (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, true);
+        else {
+            (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, false);
         }
     };
     var handleClick = function (e) {

package/src/internal/InnerBody.js

@@ -1,10 +1,7 @@
 import { __assign } from "tslib";
 import React, { isValidElement, useContext, useEffect, useRef, useState } from 'react';
-import { jsStyles } from './InnerBody.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { getAllParents, getChildrenIdArray, getElementsChildren, getItemId, isClickableElement, } from '../../lib/utils/scripts';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Внутренняя часть SideMenuBody
  *
@@ -15,7 +12,6 @@ var InnerBody = function (_a) {
     var context = useContext(SideMenuContext);
     var _b = useState([]), parents = _b[0], setParents = _b[1];
     var flattedArrayOfAllElements = useRef([]);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
     var getFlattedArrayOfAllElements = function () {
         var levelIndex = 0;
         React.Children.map(children, function (child) {
@@ -52,12 +48,6 @@ var InnerBody = function (_a) {
     var levelIndex = 0;
     return (React.createElement(SideMenuContext.Provider, { value: __assign({ openedParents: parents, flattedArrayOfAllElements: flattedArrayOfAllElements.current }, context) }, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
-            // @ts-expect-error: accessing private property
-            if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuDivider') {
-                return React.cloneElement(child, {
-                    className: jsStyles.divider(theme),
-                });
-            }
             if (
             // @ts-expect-error: accessing private property
             isClickableElement(child.type.__KONTUR_REACT_UI__)) {

package/src/internal/ItemContent/Caption.js

@@ -56,7 +56,7 @@ export var Caption = forwardRef(function (_a, ref) {
                 _c[jsStyles.captionDropdown()] = _isDropdown,
                 _c[jsStyles.captionTruncated()] = _isDropdown && (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
                 _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
-                _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
+                _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu && !hasIcon,
                 _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasIcon,
                 _c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
                 _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,

package/src/internal/ItemContent/Icon.js

@@ -37,6 +37,5 @@ export var Icon = function (_a) {
             _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
             _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
             _b[jsStyles.rootBackButton(theme)] = _isBackButton,
-            _b[jsStyles.rootAvatar()] = _isAvatar,
             _b)) }, renderIcon()));
 };

package/src/internal/ItemContent/Icon.styles.d.ts

@@ -7,5 +7,4 @@ export declare const jsStyles: {
     rootSubItem(t: SideMenuTheme): string;
     rootSubItemSeparatedMenu(t: SideMenuTheme): string;
     rootBackButton(t: SideMenuTheme): string;
-    rootAvatar(): string;
 };

package/src/internal/ItemContent/Icon.styles.js

@@ -6,10 +6,10 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      margin: ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "], ["\n      display: flex;\n      align-items: center;\n      margin: ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "])), t.sideMenuIconMarginY, t.sideMenuIconMarginX, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
     },
     rootMultiline: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: -2px;\n    "], ["\n      align-self: flex-start;\n      margin-top: -2px;\n    "])));
     },
     rootLarge: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: ", ";\n      line-height: ", ";\n    "], ["\n      min-height: ", ";\n      line-height: ", ";\n    "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: ", ";\n      line-height: ", ";\n      margin-top: 0;\n    "], ["\n      min-height: ", ";\n      line-height: ", ";\n      margin-top: 0;\n    "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
     },
     rootSubItemLarge: function (t) {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-height: ", ";\n    "], ["\n      min-height: ", ";\n    "])), t.sideMenuIconLargeSubItemMinHeight);
@@ -23,9 +23,6 @@ var styles = {
     rootBackButton: function (t) {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
     },
-    rootAvatar: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      min-height: unset;\n    "], ["\n      min-height: unset;\n    "])));
-    },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/ItemContent/ItemContent.js

@@ -42,7 +42,7 @@ var ItemContent = forwardRef(function (_a, ref) {
         if (!_isBackButton && _isSubMenu) {
             useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, size, theme);
         }
-    }, []);
+    }, [caption]);
     useEffect(function () {
         if (!_isBackButton && !_isDropdown) {
             useNumberOfTextLinesInItem({
@@ -60,8 +60,9 @@ var ItemContent = forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
-            _b[jsStyles.largeRoot(theme)] = size === 'large',
+            _b[jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
             _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
+            _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu,
             _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
             _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
             _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
@@ -73,7 +74,7 @@ var ItemContent = forwardRef(function (_a, ref) {
                 _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
                 _c)) },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
-            marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
+            marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu }))))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

package/src/internal/ItemContent/ItemContent.styles.d.ts

@@ -6,6 +6,7 @@ export declare const jsStyles: {
     root(t: SideMenuTheme): string;
     largeRoot(t: SideMenuTheme): string;
     subItemLargeRoot(t: SideMenuTheme): string;
+    multilineRoot(t: SideMenuTheme): string;
     largeMultilineRoot(t: SideMenuTheme): string;
     rootForTouchScreens(t: SideMenuTheme): string;
     subItemRootForTouchScreens(t: SideMenuTheme): string;

package/src/internal/ItemContent/ItemContent.styles.js

@@ -11,29 +11,32 @@ var styles = {
     subItemLargeRoot: function (t) {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuSubItemContentLargePaddingY, t.sideMenuSubItemContentLargePaddingY);
     },
+    multilineRoot: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentMultilinePaddingTop, t.sideMenuItemContentMultilinePaddingBottom);
+    },
     largeMultilineRoot: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentLargeMultilinePaddingY, t.sideMenuItemContentLargeMultilinePaddingY);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentLargeMultilinePaddingTop, t.sideMenuItemContentLargeMultilinePaddingBottom);
     },
     rootForTouchScreens: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingYForTouchScreens, t.sideMenuItemContentPaddingYForTouchScreens);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingYForTouchScreens, t.sideMenuItemContentPaddingYForTouchScreens);
     },
     subItemRootForTouchScreens: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
     },
     subItemRoot: function (t) {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
     },
     textAndMarkerWrapper: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "])));
     },
     textAndMarkerWrapperDropdown: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
     },
 };
 export var customStyles = {
     textAndMarkerWrapperMultiline: function (height) {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/src/internal/ItemContent/Marker.d.ts

@@ -1,6 +1,6 @@
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface MarkerProps extends Pick<SideMenuItemProps, 'marker'> {
+interface MarkerProps extends Pick<SideMenuItemProps, 'marker' | '_isSubMenu'> {
     isMultiline: boolean;
 }
-export declare const Marker: ({ isMultiline, marker }: MarkerProps) => JSX.Element;
+export declare const Marker: ({ isMultiline, marker, _isSubMenu }: MarkerProps) => JSX.Element;
 export {};

package/src/internal/ItemContent/Marker.js

@@ -5,10 +5,11 @@ import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
 export var Marker = function (_a) {
     var _b;
-    var isMultiline = _a.isMultiline, marker = _a.marker;
+    var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     return (React.createElement("span", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.rootMultiline(theme)] = isMultiline,
+            _b[jsStyles.rootSubMenu(theme)] = _isSubMenu,
             _b)) }, marker));
 };

package/src/internal/ItemContent/Marker.styles.d.ts

@@ -2,4 +2,5 @@ import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
     rootMultiline(t: SideMenuTheme): string;
+    rootSubMenu(t: SideMenuTheme): string;
 };

package/src/internal/ItemContent/Marker.styles.js

@@ -3,11 +3,14 @@ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
 var styles = {
     root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-right: ", ";\n      padding-left: ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n    "], ["\n      padding-right: ", ";\n      padding-left: ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n    "])), t.sideMenuMarkerPaddingX, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuLineHeight, t.sideMenuMarkerFontWeight);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", " ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      font-size: 14px;\n      line-height: ", ";\n      font-weight: ", ";\n      min-width: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    "], ["\n      padding: ", " ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      font-size: 14px;\n      line-height: ", ";\n      font-weight: ", ";\n      min-width: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    "])), t.sideMenuMarkerPaddingY, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuMarkerLineHeight, t.sideMenuMarkerFontWeight);
     },
     rootMultiline: function (t) {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: ", ";\n    "], ["\n      align-self: flex-start;\n      margin-top: ", ";\n    "])), t.sideMenuMarkerMultilineMarginTop);
     },
+    rootSubMenu: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      background: transparent;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sideMenuMarkerSubItemColor, t.sideMenuSubItemMarkerFontWeight);
+    },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/src/internal/InnerBody.styles.d.ts

@@ -1,4 +0,0 @@
-import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
-export declare const jsStyles: {
-    divider(t: SideMenuTheme): string;
-};

package/src/internal/InnerBody.styles.js

@@ -1,10 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-var styles = {
-    divider: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n    "], ["\n      background: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n    "])), t.sideMenuDividerBgColor, t.sideMenuDividerMarginX, t.sideMenuDividerMarginX);
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1;