@skbkontur/side-menu 1.0.2 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.1.0...@skbkontur/side-menu@1.2.0) (2023-08-18)
+
+
+### Features
+
+* **SideMenuAvatar:** add caption prop ([275f38b](https://git.skbkontur.ru/ui/ui-parking/commits/275f38b68e12e0d294a8be49222e60a9efb5f8bf))
+* **SideMenuDropdown:** add prop marker ([ae9e880](https://git.skbkontur.ru/ui/ui-parking/commits/ae9e8803d01ce4ffeeb74541e62a10cec3ccb233))
+
+
+
+
+
+# [1.1.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.0.2...@skbkontur/side-menu@1.1.0) (2023-08-07)
+
+
+### Features
+
+* **SideMenu:** add component prop to link ([2beb8b3](https://git.skbkontur.ru/ui/ui-parking/commits/2beb8b3cbd81830542554a18fbc26a9a7b2119b0))
+
+
+
+
+
 ## [1.0.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.0.1...@skbkontur/side-menu@1.0.2) (2023-08-04)
 
 

package/README.md

@@ -1,5 +1,3 @@
-### Бета-версия компонента SideMenu
-
 SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
 
 [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
@@ -9,17 +7,15 @@ import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Kontur, Ofd } from '@skbkontur/logos';
 import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
-import {
-  DocTextIcon24Regular,
-  CommentRectTextIcon24Regular,
-  LightbulbIcon24Regular,
-  BookOpenTextIcon24Regular,
-  BookmarkIcon24Regular,
-  StackHDownIcon24Regular,
-  SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular,
-  AttachLinkIcon,
-} from '@skbkontur/icons';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
+import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
+import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
+import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
+import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
+import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
+import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
+import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
 
 <div style={{height: '600px', position: 'relative'}}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
@@ -32,7 +28,7 @@ import {
                       <SideMenu.SubItem caption={'Исходящие1'}/>
                       <SideMenu.SubItem caption={'Исходящие2'}/>
                   </SideMenu.SubItem>
-                  <SideMenu.SubItem caption={'Внутренние'}/>
+                  <SideMenu.SubItem caption={'Внутренние'} marker/>
                   <SideMenu.SubItem caption={'Черновики'}/>
                   <SideMenu.SubItem caption={'Удаленные'}/>
                   <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
@@ -40,7 +36,7 @@ import {
                   <SideMenu.SubItem caption={'Требуют обработки'}/>
                   <SideMenu.SubItem caption={'Обработанные'}/>
               </SideMenu.Item>
-              <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
+              <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'} marker/>
               <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
                   <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
                   <SideMenu.SubItem caption={'Исходящие'}/>
@@ -90,16 +86,14 @@ import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Buhgalteria, Kontur } from '@skbkontur/logos';
 import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
-import {
-  DocTextIcon24Regular,
-  CommentRectTextIcon24Regular,
-  LightbulbIcon24Regular,
-  BookOpenTextIcon24Regular,
-  BookmarkIcon24Regular,
-  StackHDownIcon24Regular,
-  SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular
-} from '@skbkontur/icons';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
+import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
+import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
+import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
+import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
+import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
+import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
 
 const [opened, setOpened] = React.useState(false);
 const [panel, setPanel] = React.useState(false);
@@ -217,17 +211,15 @@ import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Kontur, Ofd } from '@skbkontur/logos';
 import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
-import {
-  DocTextIcon24Regular,
-  CommentRectTextIcon24Regular,
-  LightbulbIcon24Regular,
-  BookOpenTextIcon24Regular,
-  BookmarkIcon24Regular,
-  StackHDownIcon24Regular,
-  SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular,
-  AttachLinkIcon24Regular
-} from '@skbkontur/icons';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
+import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
+import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
+import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
+import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
+import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
+import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
+import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
 
 
 const [activeItem, setActiveItem] = useState('122');
@@ -352,16 +344,15 @@ import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
 import { Kontur, Ofd } from '@skbkontur/logos';
 import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
 import { SideMenu } from './index';
-import {
-  DocTextIcon24Regular,
-  CommentRectTextIcon24Regular,
-  LightbulbIcon24Regular,
-  BookOpenTextIcon24Regular,
-  BookmarkIcon24Regular,
-  StackHDownIcon24Regular,
-  SettingsGearIcon24Regular,
-  FaceAHappyIcon24Regular
-} from '@skbkontur/icons';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { CommentRectTextIcon24Regular } from '@skbkontur/icons/icons/CommentRectTextIcon/CommentRectTextIcon24Regular';
+import { LightbulbIcon24Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon24Regular';
+import { BookOpenTextIcon24Regular } from '@skbkontur/icons/icons/BookOpenTextIcon/BookOpenTextIcon24Regular';
+import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/BookmarkIcon24Regular';
+import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
+import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
+import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
+
 
 
 const [activeItem, setActiveItem] = useState(undefined);
@@ -591,15 +582,37 @@ import { useHistory } from "react-router-dom";
 
 При необходимости вы можете повторить часть этой логики в своей обёртке.
 
+---
+
+Также можно использовать `SideMenu.Link` передав туда компонент ссылки, например обертку со ссылкой из `react-router-dom`:
+
+```ts static
+import { Link } from 'react-router-dom';
+
+interface SideMenuReactRouterLinkProps extends SideMenuLinkProps {
+  href: string;
+}
+
+const LinkWrapper = React.forwardRef<HTMLAnchorElement, SideMenuReactRouterLinkProps>(({ href, ...rest }, ref) => (
+  <Link {...rest} to={href} ref={ref} />
+));
+
+const SideMenuReactRouterLink: React.FunctionComponent<SideMenuReactRouterLinkProps> = (props) => (
+  <SideMenu.Link {...props} component={LinkWrapper} />
+);
+```
+
+Если вы используете кастомную ссылку, то убедитесь, что она прокидывает `ref` и остальные пропсы в корневой элемент.
+
+Пример в [песочнице](https://codesandbox.io/s/side-menu-react-router-dom-vtv6r8)
+
 #### Пример кастомизации
 
 ```jsx harmony
 import { Kontur, Ofd } from '@skbkontur/logos';
 import { SideMenu } from './index';
-import {
-  DocTextIcon24Regular,
-  SettingsGearIcon24Regular,
-} from '@skbkontur/icons';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
 import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
 
 <div style={{ height: '200px', position: 'relative' }}>

package/hooks/useMemoIcon.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
-import { ArrowCDownIcon16Regular, ArrowCRightIcon16Regular } from '@skbkontur/icons';
+import { ArrowCDownIcon16Regular } from '@skbkontur/icons/icons/ArrowCDownIcon/ArrowCDownIcon16Regular';
+import { ArrowCRightIcon16Regular } from '@skbkontur/icons/icons/ArrowCRightIcon/ArrowCRightIcon16Regular';
 export var useMemoIcon = function (children, isOpened) {
     return useMemo(function () {
         if (children) {

package/hooks/useNumberOfTextLinesInItem.d.ts

@@ -5,7 +5,7 @@ interface UseNumberOfTextLinesInItem {
     setLinesNumber: React.Dispatch<React.SetStateAction<number>>;
     theme: SideMenuTheme;
     caption?: string;
-    marker?: string;
+    marker?: string | boolean;
     size?: 'small' | 'large';
     isTouchScreen?: boolean;
 }

package/hooks/useNumberOfTextLinesInItem.js

@@ -16,7 +16,7 @@ var getNumberOfLines = function (ctx, words, containerWidth) {
     });
     return lineCount;
 };
-var getContainerWidth = function (ctx, marker, theme, isTouchScreen) {
+var getContainerWidth = function (ctx, theme, marker, isTouchScreen) {
     var containerWidth = parseInt(isTouchScreen ? theme.sideMenuWidthForTouchScreens : theme.sideMenuWidth) -
         2 * parseInt(theme.sideMenuMarginX) -
         parseInt(theme.sideMenuIconSize) -
@@ -24,7 +24,17 @@ var getContainerWidth = function (ctx, marker, theme, isTouchScreen) {
     var markerPaddings = marker
         ? 2 * parseInt(theme.sideMenuMarkerPaddingX) + parseInt(theme.sideMenuMarkerMarginRight)
         : 0;
-    var markerWidth = ctx.measureText(marker).width + markerPaddings;
+    var emptyMarker = marker === true || marker === '';
+    var markerWidth;
+    if (emptyMarker) {
+        markerWidth = 8;
+    }
+    else if (typeof marker === 'string') {
+        markerWidth = ctx.measureText(marker).width + markerPaddings;
+    }
+    else {
+        markerWidth = 0;
+    }
     return containerWidth - markerWidth - parseInt(sideMenuCaptionMarginRight);
 };
 var getFontSize = function (theme, isTouchScreen, size) {
@@ -39,7 +49,7 @@ var getFontSize = function (theme, isTouchScreen, size) {
     }
 };
 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 textRef = _a.textRef, setLinesNumber = _a.setLinesNumber, theme = _a.theme, _b = _a.caption, caption = _b === void 0 ? '' : _b, marker = _a.marker, size = _a.size, isTouchScreen = _a.isTouchScreen;
     var fontSize = getFontSize(theme, isTouchScreen, size);
     var fontFamily = textRef.current && isBrowser
         ? window.getComputedStyle(textRef.current).getPropertyValue('font-family')
@@ -49,6 +59,6 @@ export var useNumberOfTextLinesInItem = function (_a) {
     if (ctx) {
         ctx.font = fontSize + "px " + fontFamily;
         var words = caption.split(' ');
-        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, marker, theme, isTouchScreen)));
+        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, theme, marker, isTouchScreen)));
     }
 };

package/internal/themes/SideMenuTheme.d.ts

@@ -71,6 +71,7 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuMarkerPaddingY: string;
     static get sideMenuMarkerBg(): string;
     static sideMenuMarkerColor: string;
+    static sideMenuSubItemEmptyMarkerBg: string;
     static get sideMenuMarkerSubItemColor(): string;
     static sideMenuMarkerMarginRight: string;
     static sideMenuMarkerFontWeight: string;

package/internal/themes/SideMenuTheme.js

@@ -185,6 +185,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuMarkerPaddingX = '6px';
     SideMenuTheme.sideMenuMarkerPaddingY = '0px';
     SideMenuTheme.sideMenuMarkerColor = '#fff';
+    SideMenuTheme.sideMenuSubItemEmptyMarkerBg = '#adadad';
     SideMenuTheme.sideMenuMarkerMarginRight = '8px';
     SideMenuTheme.sideMenuMarkerFontWeight = '600';
     SideMenuTheme.sideMenuSubItemMarkerFontWeight = '400';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
     "@skbkontur/react-ui": "4.13.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "^0.17.2",
+    "@skbkontur/icons": "^1.4.3",
     "@skbkontur/react-ui-addons": "^4.9.0",
     "tslib": "^1"
   }

package/src/SideMenu/SideMenu.styles.js

@@ -7,7 +7,7 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "], ["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "])));
     },
     shownRootForTabletsOrMobiles: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 100vh;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: 100vh;\n      transition: height ", "ms ease-out;\n    "])), burgerTransitionDuration);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      height: 100%;\n      transition: height ", "ms ease-out;\n    "], ["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      height: 100%;\n      transition: height ", "ms ease-out;\n    "])), burgerTransitionDuration);
     },
     rootForNarrowDesktops: function (t) {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuMinimizedWidth);

package/src/SideMenuAvatar/SideMenuAvatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UserAvatarProps } from '@skbkontur/react-ui-addons/';
 import { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
-export interface SideMenuAvatarProps extends Omit<UserAvatarProps, 'style'>, Omit<SideMenuDropdownProps, 'icon' | 'caption'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
+export interface SideMenuAvatarProps extends Omit<UserAvatarProps, 'style'>, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
 }
 /**
  * Аватар пользователя

package/src/SideMenuAvatar/SideMenuAvatar.js

@@ -5,9 +5,9 @@ import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
 var SideMenuAvatarInner = forwardRef(function (_a, ref) {
-    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon"]);
+    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, caption = _a.caption, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon", "caption"]);
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    return (React.createElement(SideMenuDropdown, __assign({ icon: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl, style: { width: theme.sideMenuAvatarSize, height: theme.sideMenuAvatarSize } }), caption: userName, menuWidth: 200, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
+    return (React.createElement(SideMenuDropdown, __assign({ icon: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl, style: { width: theme.sideMenuAvatarSize, height: theme.sideMenuAvatarSize } }), caption: userName || caption, menuWidth: 200, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
 });
 SideMenuAvatarInner.displayName = 'SideMenuAvatar';
 /**

package/src/SideMenuAvatar/SideMenuAvatar.md

@@ -1,3 +1,24 @@
+Передача пропа `userName` позволяет использовать иконку с инициалами, а передача пропа `caption` позволяет использовать иконку силуэта
+```jsx harmony
+import { SideMenu } from '../../index';
+import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
+
+<SideMenu>
+  <SideMenu.Footer>
+    <SideMenu.Avatar caption={'Елена Ишматова'} />
+    <SideMenu.Avatar
+      userName={'Елена Ишматова'}
+    />
+    <SideMenu.Avatar
+      userName={'Елена Ишматова'}
+      avatarUrl={getKonturAvatarUrl({
+        userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
+      })}
+    />
+  </SideMenu.Footer>
+</SideMenu>
+```
+
 #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
 
 ```typescript
@@ -5,3 +26,4 @@
   sideMenuAvatarMargin: string;
 }
 ```
+

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { DropdownMenuProps } from '@skbkontur/react-ui';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 import { SideMenuItemProps } from '../SideMenuItem/SideMenuItem';
-export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'id' | '_generatedId' | 'subCaption' | '_isAvatar'> {
+export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'marker' | 'id' | '_generatedId' | 'subCaption' | '_isAvatar'> {
     children?: React.ReactNode;
     disableAnimations?: boolean;
     id?: string;

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -8,7 +8,7 @@ import { SideMenuContext } from '../SideMenuContext';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
-    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "_generatedId", "children", "caption", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
+    var icon = _a.icon, id = _a.id, _generatedId = _a._generatedId, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, rest = __rest(_a, ["icon", "id", "_generatedId", "children", "caption", "marker", "subCaption", "className", "disableAnimations", "menuWidth", "_isAvatar"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     return (React.createElement("li", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },
@@ -17,7 +17,7 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
                     _c[jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
                     _c[jsStyles.minimizedLabel()] = context.isMinimized,
                     _c)) },
-                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
+                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
             // @ts-expect-error: accessing private property
             if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
                 return React.cloneElement(child, {

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

@@ -58,6 +58,7 @@
   sideMenuMarkerPaddingX: string;
   sideMenuMarkerPaddingY: string;
   sideMenuMarkerBg: string;
+  sideMenuSubItemEmptyMarkerBg: string;
   sideMenuMarkerColor: string;
   sideMenuMarkerSubItemColor: string;
   sideMenuMarkerMarginRight: string;

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/BackButton.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from 'react';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { ArrowALeftIcon20Regular } from '@skbkontur/icons';
+import { ArrowALeftIcon20Regular } from '@skbkontur/icons/icons/ArrowALeftIcon/ArrowALeftIcon20Regular';
 import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
 import { SideMenuContext } from '../SideMenuContext';
 /**

package/src/internal/Burger.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { jsStyles } from './Burger.styles';
 import { SideMenuContext } from '../SideMenuContext';
-import { UiMenuBars3HIcon24Regular } from '@skbkontur/icons';
+import { UiMenuBars3HIcon24Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';

package/src/internal/ClickableElement.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 export interface CommonClickableElementProps extends CommonProps {
     children?: React.ReactNode;
     icon: React.ReactElement;
-    marker?: string;
+    marker?: string | true;
     caption?: string;
     subCaption?: ReactNode;
     id?: string;
@@ -21,12 +21,12 @@ 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>>;
-    onFocus?: React.EventHandler<React.FocusEvent<Element>>;
-    onBlur?: React.EventHandler<React.FocusEvent<Element>>;
+    onClick?: React.EventHandler<React.MouseEvent>;
+    onKeyDown?: React.EventHandler<React.KeyboardEvent>;
+    onFocus?: React.EventHandler<React.FocusEvent>;
+    onBlur?: React.EventHandler<React.FocusEvent>;
 }
 declare const ClickableElementWithStaticFields: React.ForwardRefExoticComponent<ClickableElementProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/ClickableElement.js

@@ -25,7 +25,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
     var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
     var hasChildren = function (id, generatedId) {
         var _a, _b;
-        var parentId = id ? 'id' : 'generatedParentId';
+        var parentId = id ? 'parentId' : 'generatedParentId';
         var childId = id !== null && id !== void 0 ? id : generatedId;
         return (_b = (_a = context.flattedArrayOfAllElements) === null || _a === void 0 ? void 0 : _a.filter(function (el) { return el[parentId] === childId; })) === null || _b === void 0 ? void 0 : _b.length;
     };

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

@@ -5,7 +5,7 @@ export var sideMenuMultilineCaptionPaddingTop = '4px';
 export var sideMenuCaptionMarginRight = '8px';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "])));
     },
     rootBeingTransitioned: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));

package/src/internal/ItemContent/ItemContent.js

@@ -74,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, _isSubMenu: _isSubMenu }))))));
+            marker !== undefined && (!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/Marker.js

@@ -7,9 +7,12 @@ export var Marker = function (_a) {
     var _b;
     var isMultiline = _a.isMultiline, marker = _a.marker, _isSubMenu = _a._isSubMenu;
     var theme = getSideMenuTheme(useContext(ThemeContext));
+    var emptyMarker = marker === true || marker === '';
     return (React.createElement("span", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootEmpty(theme)] = emptyMarker,
             _b[jsStyles.rootMultiline(theme)] = isMultiline,
             _b[jsStyles.rootSubMenu(theme)] = _isSubMenu,
+            _b[jsStyles.rootSubMenuEmpty(theme)] = _isSubMenu && emptyMarker,
             _b)) }, marker));
 };

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

@@ -1,6 +1,8 @@
 import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
+    rootEmpty(t: SideMenuTheme): string;
     rootMultiline(t: SideMenuTheme): string;
     rootSubMenu(t: SideMenuTheme): string;
+    rootSubMenuEmpty(t: SideMenuTheme): string;
 };

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

@@ -3,14 +3,20 @@ 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: ", " ", ";\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);
+        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      min-height: 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      min-height: 8px;\n      text-align: center;\n      flex-shrink: 0;\n    "])), t.sideMenuMarkerPaddingY, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuMarkerLineHeight, t.sideMenuMarkerFontWeight);
+    },
+    rootEmpty: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: 0;\n      margin-right: calc(", " + ", ");\n    "], ["\n      padding: 0;\n      margin-right: calc(", " + ", ");\n    "])), t.sideMenuMarkerMarginRight, t.sideMenuMarkerPaddingX);
     },
     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);
+        return css(templateObject_3 || (templateObject_3 = __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);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: transparent;\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      background: transparent;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sideMenuMarkerSubItemColor, t.sideMenuSubItemMarkerFontWeight);
+    },
+    rootSubMenuEmpty: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSubItemEmptyMarkerBg);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;