@skbkontur/side-menu 0.4.1 → 0.4.2

package/src/SideMenuLink/SideMenuLink.js

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { ClickableElement } from '../internal/ClickableElement';
+import { jsStyles } from '../SideMenu.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) }));
+});
+SideMenuLinkInner.displayName = 'SideMenuLink';
+/**
+ * Ссылка для `SideMenu`
+ *
+ * Визуально повторяет `SideMenu.Item`
+ *
+ * Может принимать все атрибуты обычной HTML-ссылки
+ *
+ * @visibleName SideMenu.Link
+ */
+export var SideMenuLink = Object.assign(SideMenuLinkInner, { __KONTUR_REACT_UI__: 'SideMenuLink' });

package/src/SideMenuOrganisations/SideMenuOrganisations.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
+/**
+ * Список организаций
+ *
+ * @visibleName SideMenu.Organisations
+ */
+export declare const SideMenuOrganisations: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/{SideMenuOrganisations.js → SideMenuOrganisations/SideMenuOrganisations.js}

@@ -1,17 +1,16 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { SideMenuDropdown } from './SideMenuDropdown';
+import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
+var SideMenuOrganisationsInner = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.caption, caption = _b === void 0 ? 'СКБ Контур' : _b, rest = __rest(_a, ["children", "caption"]);
+    return (React.createElement(SideMenuDropdown, __assign({ caption: caption, menuWidth: '240px', positions: ['top left'], ref: ref }, rest), children));
+});
+SideMenuOrganisationsInner.displayName = 'SideMenuOrganisations';
 /**
  * Список организаций
  *
  * @visibleName SideMenu.Organisations
  */
-var SideMenuOrganisations = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.caption, caption = _b === void 0 ? 'СКБ Контур' : _b, rest = __rest(_a, ["children", "caption"]);
-    return (React.createElement(SideMenuDropdown, __assign({ caption: caption, menuWidth: '240px', positions: ['top left'], ref: ref }, rest), children));
-});
-SideMenuOrganisations.displayName = 'SideMenuOrganisations';
-var SideMenuOrganisationsWithStaticFields = Object.assign(SideMenuOrganisations, {
+export var SideMenuOrganisations = Object.assign(SideMenuOrganisationsInner, {
     __KONTUR_REACT_UI__: 'SideMenuOrganisations',
 });
-export { SideMenuOrganisationsWithStaticFields as SideMenuOrganisations };

package/src/SideMenuSubItem/SideMenuSubItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SideMenuItemProps } from '../SideMenuItem/SideMenuItem';
+export interface SideMenuSubItemProps extends Omit<SideMenuItemProps, 'icon'>, Partial<Pick<SideMenuItemProps, 'icon'>> {
+}
+/**
+ * Элемент списка второго уровня
+ *
+ * @visibleName SideMenu.SubItem
+ */
+export declare const SideMenuSubItem: React.ForwardRefExoticComponent<SideMenuSubItemProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/SideMenuSubItem/SideMenuSubItem.js

@@ -0,0 +1,27 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext } from 'react';
+import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
+import { SideMenuContext } from '../SideMenuContext';
+import { NestedMenu } from '../internal/NestedMenu';
+import { useOpenedSubElementState } from '../../hooks/useOpenedSubElementState';
+import { useMemoIcon } from '../../hooks/UseMemoIcon';
+var SideMenuSubItemInner = forwardRef(function (_a, ref) {
+    var children = _a.children, _generatedId = _a._generatedId, id = _a.id, rest = __rest(_a, ["children", "_generatedId", "id"]);
+    var context = useContext(SideMenuContext);
+    var isOpened = useOpenedSubElementState(id, _generatedId, context.openedParents, context.activeMenuItem);
+    var icon = useMemoIcon(children, isOpened);
+    return (React.createElement("div", { ref: ref },
+        React.createElement(SideMenuItem
+        /*@ts-expect-error: SideMenuItem should have icon */
+        , __assign({ 
+            /*@ts-expect-error: SideMenuItem should have icon */
+            icon: icon, _isSubMenu: true, id: id, _generatedId: _generatedId }, rest)),
+        children && isOpened && React.createElement(NestedMenu, { _generatedId: _generatedId }, children)));
+});
+SideMenuSubItemInner.displayName = 'SideMenuSubItem';
+/**
+ * Элемент списка второго уровня
+ *
+ * @visibleName SideMenu.SubItem
+ */
+export var SideMenuSubItem = Object.assign(SideMenuSubItemInner, { __KONTUR_REACT_UI__: 'SideMenuSubItem' });

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface SideMenuSubItemHeaderProps extends CommonProps {
+    children?: React.ReactNode;
+}
+/**
+ * Заголовок списка второго уровня
+ *
+ * @visibleName SideMenu.SubItemHeader
+ */
+export declare const SideMenuSubItemHeader: React.ForwardRefExoticComponent<SideMenuSubItemHeaderProps & React.RefAttributes<HTMLParagraphElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/{SideMenuSubItemHeader.js → SideMenuSubItemHeader/SideMenuSubItemHeader.js}

@@ -1,21 +1,20 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
-/**
- * Заголовок списка второго уровня
- *
- * @visibleName SideMenu.SubItemHeader
- */
-var SideMenuSubItemHeader = forwardRef(function (_a, ref) {
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
+var SideMenuSubItemHeaderInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.subItemHeader()] = true, _b[jsStyles.subItemHeaderInSeparatedSubMenu()] = context.isSeparatedMenu, _b), className), ref: ref }, rest), children));
 });
-SideMenuSubItemHeader.displayName = 'SideMenuSubItemHeader';
-var SideMenuSubItemHeaderWithStaticFields = Object.assign(SideMenuSubItemHeader, {
+SideMenuSubItemHeaderInner.displayName = 'SideMenuSubItemHeader';
+/**
+ * Заголовок списка второго уровня
+ *
+ * @visibleName SideMenu.SubItemHeader
+ */
+export var SideMenuSubItemHeader = Object.assign(SideMenuSubItemHeaderInner, {
     __KONTUR_REACT_UI__: 'SideMenuSubItemHeader',
 });
-export { SideMenuSubItemHeaderWithStaticFields as SideMenuSubItemHeader };

package/src/SideMenuSubLink/SideMenuSubLink.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SideMenuLinkProps } from '../SideMenuLink/SideMenuLink';
+export interface SideMenuSubLinkProps extends Omit<SideMenuLinkProps, 'icon'>, Partial<Pick<SideMenuLinkProps, 'icon'>> {
+}
+/**
+ * Ссылка в подменю для `SideMenu`
+ *
+ * Визуально повторяет `SideMenu.SubItem`
+ *
+ * Может принимать все атрибуты обычной HTML-ссылки
+ *
+ * @visibleName SideMenu.SubLink
+ */
+export declare const SideMenuSubLink: React.ForwardRefExoticComponent<SideMenuSubLinkProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/SideMenuSubLink/SideMenuSubLink.js

@@ -0,0 +1,31 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext } from 'react';
+import { SideMenuContext } from '../SideMenuContext';
+import { SideMenuLink } from '../SideMenuLink/SideMenuLink';
+import { NestedMenu } from '../internal/NestedMenu';
+import { useOpenedSubElementState } from '../../hooks/useOpenedSubElementState';
+import { useMemoIcon } from '../../hooks/UseMemoIcon';
+var SideMenuSubLinkInner = forwardRef(function (_a, ref) {
+    var className = _a.className, marker = _a.marker, id = _a.id, _generatedId = _a._generatedId, _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, children = _a.children, rest = __rest(_a, ["className", "marker", "id", "_generatedId", "_isSubMenu", "_isNestedSubMenu", "children"]);
+    var context = useContext(SideMenuContext);
+    var isOpened = useOpenedSubElementState(id, _generatedId, context.openedParents, context.activeMenuItem);
+    var icon = useMemoIcon(children, isOpened);
+    return (React.createElement("div", { ref: ref },
+        React.createElement(SideMenuLink
+        /*@ts-expect-error: SideMenuItem should have icon */
+        , __assign({ 
+            /*@ts-expect-error: SideMenuItem should have icon */
+            icon: icon, _isSubMenu: true, _isNestedSubMenu: _isNestedSubMenu, id: id, _generatedId: _generatedId }, rest)),
+        children && isOpened && React.createElement(NestedMenu, { _generatedId: _generatedId }, children)));
+});
+SideMenuSubLinkInner.displayName = 'SideMenuSubLink';
+/**
+ * Ссылка в подменю для `SideMenu`
+ *
+ * Визуально повторяет `SideMenu.SubItem`
+ *
+ * Может принимать все атрибуты обычной HTML-ссылки
+ *
+ * @visibleName SideMenu.SubLink
+ */
+export var SideMenuSubLink = Object.assign(SideMenuSubLinkInner, { __KONTUR_REACT_UI__: 'SideMenuSubLink' });

package/src/internal/ClickableElement.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface CommonClickableElementProps extends CommonProps {
+    children?: React.ReactNode;
+    icon: React.ReactElement;
+    marker?: string;
+    caption?: string;
+    id?: string;
+    _generatedId?: string;
+    _isSubMenu?: boolean;
+    _isNestedSubMenu?: boolean;
+    _avatar?: React.ReactElement;
+}
+export interface ClickableElementProps extends CommonClickableElementProps {
+    element: 'a' | 'button';
+    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>>;
+}
+declare const ClickableElementWithStaticFields: React.ForwardRefExoticComponent<ClickableElementProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { ClickableElementWithStaticFields as ClickableElement };

package/src/internal/ClickableElement.js

@@ -0,0 +1,63 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext, useState } from 'react';
+import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
+import { SideMenuContext } from '../SideMenuContext';
+import { ItemContent } from './ItemContent/ItemContent';
+import { SubMenu } from './SubMenu';
+import { useOpenedState } from '../../hooks/useOpenedState';
+import { useActiveState } from '../../hooks/useActiveState';
+import { jsStyles } from '../SideMenu.styles';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+/**
+ * Элемент списка (пункт меню либо ссылка)
+ *
+ * @visibleName ClickableElement
+ */
+var ClickableElement = forwardRef(function (_a, ref) {
+    var _b;
+    var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className"]);
+    var context = useContext(SideMenuContext);
+    var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
+    var _c = useState(false), focusedByTab = _c[0], setFocusedByTab = _c[1];
+    var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children);
+    var handleClick = function (e) {
+        var _a, _b, _c;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (id) {
+            (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
+        }
+        else if (rest.href) {
+            (_b = context.switchActiveMenuItem) === null || _b === void 0 ? void 0 : _b.call(context, rest.href);
+        }
+        else if (_generatedId) {
+            (_c = context.switchActiveMenuItem) === null || _c === void 0 ? void 0 : _c.call(context, _generatedId);
+        }
+    };
+    var handleFocus = function (e) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        requestAnimationFrame(function () {
+            if (keyListener.isTabPressed) {
+                setFocusedByTab(true);
+            }
+        });
+    };
+    var handleBlur = function (e) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        setFocusedByTab(false);
+    };
+    var isOpenedFirstLevelItemInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
+    return (React.createElement("div", null,
+        React.cloneElement(React.createElement(Tag, null), __assign({ className: cx((_b = {},
+                _b[jsStyles.item()] = true,
+                _b[jsStyles.subItem()] = context.isSeparatedMenu && _isSubMenu,
+                _b[jsStyles.focusedItem()] = focusedByTab,
+                _b[jsStyles.activeItem()] = isActive || isOpenedFirstLevelItemInSeparatedMenu,
+                _b[jsStyles.activeSubItem()] = isActive && context.isSeparatedMenu && _isSubMenu,
+                _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, marker: marker, _avatar: _avatar })), ref: ref }, rest)),
+        React.createElement(SubMenu, { generatedId: _generatedId, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimised: context.isMinimised }, children)));
+});
+ClickableElement.displayName = 'ClickableElement';
+var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
+    __KONTUR_REACT_UI__: 'ClickableElement',
+});
+export { ClickableElementWithStaticFields as ClickableElement };

package/src/{SideMenuBodyChildren.d.ts → internal/InnerBody.d.ts}

@@ -6,7 +6,7 @@ export interface FlattedArrayElementType {
     parentId: string | null;
     generatedParentId: string | null;
 }
-declare const SideMenuBodyChildrenWithStaticFields: React.FC<CommonProps> & {
+declare const InnerBodyWithStaticFields: React.FC<CommonProps> & {
     __KONTUR_REACT_UI__: string;
 };
-export { SideMenuBodyChildrenWithStaticFields as SideMenuBodyChildren };
+export { InnerBodyWithStaticFields as InnerBody };

package/src/{SideMenuBodyChildren.js → internal/InnerBody.js}

@@ -1,14 +1,14 @@
 import { __assign } from "tslib";
 import React, { isValidElement, useContext, useEffect, useRef, useState } from 'react';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
-import { getAllParents, getElementsChildren, getItemId } from '../utils/scripts';
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
+import { getAllParents, getElementsChildren, getItemId, isClickableElement } from '../../utils/scripts';
 /**
  * Внутренняя часть SideMenuBody
  *
- * @visibleName SideMenuBodyChildren
+ * @visibleName InnerBody
  */
-var SideMenuBodyChildren = function (_a) {
+var InnerBody = function (_a) {
     var children = _a.children;
     var context = useContext(SideMenuContext);
     var _b = useState([]), parents = _b[0], setParents = _b[1];
@@ -18,10 +18,10 @@ var SideMenuBodyChildren = function (_a) {
         React.Children.map(children, function (child) {
             if (isValidElement(child) &&
                 // @ts-expect-error: accessing private property
-                child.type.__KONTUR_REACT_UI__ === 'SideMenuItem') {
+                isClickableElement(child.type.__KONTUR_REACT_UI__)) {
                 var generatedId = getItemId('body', levelIndex++);
                 flattedArrayOfAllElements.current.push({
-                    id: child.props.id,
+                    id: child.props.id || child.props.href,
                     generatedId: generatedId,
                     parentId: null,
                     generatedParentId: null,
@@ -50,8 +50,9 @@ var SideMenuBodyChildren = function (_a) {
                     className: jsStyles.dividerInSideMenu(),
                 });
             }
+            if (
             // @ts-expect-error: accessing private property
-            if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuItem') {
+            isClickableElement(child.type.__KONTUR_REACT_UI__)) {
                 var oldIndex = levelIndex;
                 levelIndex++;
                 return React.cloneElement(child, {
@@ -62,8 +63,8 @@ var SideMenuBodyChildren = function (_a) {
         }
     })));
 };
-SideMenuBodyChildren.displayName = 'SideMenuBodyChildren';
-var SideMenuBodyChildrenWithStaticFields = Object.assign(SideMenuBodyChildren, {
-    __KONTUR_REACT_UI__: 'SideMenuBodyChildren',
+InnerBody.displayName = 'InnerBody';
+var InnerBodyWithStaticFields = Object.assign(InnerBody, {
+    __KONTUR_REACT_UI__: 'InnerBody',
 });
-export { SideMenuBodyChildrenWithStaticFields as SideMenuBodyChildren };
+export { InnerBodyWithStaticFields as InnerBody };

package/src/{InnerSubMenu.js → internal/InnerSubMenu.js}

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { isClickableSubElement } from '../../utils/scripts';
 /**
  * Подменю, раскрывающееся внутри основного меню
  *
@@ -9,8 +10,9 @@ var InnerSubMenu = forwardRef(function (_a, ref) {
     var levelIndex = 0;
     return (React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
+            if (
             // @ts-expect-error: accessing private property
-            if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem') {
+            isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
                 var oldIndex = levelIndex;
                 levelIndex++;
                 return React.cloneElement(child, {

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
+declare type AvatarProps = Pick<SideMenuItemProps, '_avatar'>;
+export declare const Avatar: ({ _avatar }: AvatarProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export {};

package/src/internal/ItemContent/Avatar.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from '../../SideMenu.styles';
+export var Avatar = function (_a) {
+    var _b;
+    var _avatar = _a._avatar;
+    return React.cloneElement(_avatar, {
+        className: cx((_b = {},
+            _b[jsStyles.avatarIcon()] = true,
+            _b)),
+    });
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ItemContentProps } from './ItemContent';
+import { SideMenuContextType } from '../../SideMenuContext';
+interface CaptionProps extends Pick<ItemContentProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption'>, Pick<SideMenuContextType, 'isTransitioned' | 'isSeparatedMenu' | 'hasSubIcons' | 'size'> {
+    hasShortcutImage: boolean;
+    isMultiline: boolean;
+}
+export declare const Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export {};

package/src/internal/ItemContent/Caption.js

@@ -0,0 +1,19 @@
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from '../../SideMenu.styles';
+import React, { forwardRef } from 'react';
+export var Caption = forwardRef(function (_a, ref) {
+    var _b;
+    var isTransitioned = _a.isTransitioned, _isSubMenu = _a._isSubMenu, isSeparatedMenu = _a.isSeparatedMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, hasSubIcons = _a.hasSubIcons, size = _a.size, caption = _a.caption, isMultiline = _a.isMultiline;
+    return (React.createElement("p", { className: cx((_b = {},
+            _b[jsStyles.itemText()] = true,
+            _b[jsStyles.itemTextTransitioned()] = isTransitioned,
+            _b[jsStyles.subItemText()] = _isSubMenu,
+            _b[jsStyles.subItemTextSeparatedMenuFirstLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
+            _b[jsStyles.nestedSubItemTextSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
+            _b[jsStyles.itemTextWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
+            _b[jsStyles.subItemTextWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
+            _b[jsStyles.itemTextLarge()] = size === 'large',
+            _b[jsStyles.itemTextMultiline()] = isMultiline,
+            _b)), ref: ref }, caption));
+});
+Caption.displayName = 'Caption';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ItemContentProps } from './ItemContent';
+import { SideMenuContextType } from '../../SideMenuContext';
+interface IconProps extends Pick<ItemContentProps, '_isSubMenu' | 'icon'>, Pick<SideMenuContextType, 'isSeparatedMenu' | 'size'> {
+    isMultiline: boolean;
+}
+export declare const Icon: ({ icon, _isSubMenu, isMultiline, size, isSeparatedMenu }: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export {};

package/src/internal/ItemContent/Icon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from '../../SideMenu.styles';
+export var Icon = function (_a) {
+    var _b;
+    var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, size = _a.size, isSeparatedMenu = _a.isSeparatedMenu;
+    return React.cloneElement(icon, {
+        size: _isSubMenu ? 16 : 24,
+        disableCompensation: true,
+        className: cx((_b = {},
+            _b[jsStyles.icon()] = true,
+            _b[jsStyles.iconMultiline()] = isMultiline,
+            _b[jsStyles.iconLarge()] = size === 'large',
+            _b[jsStyles.iconMultilineLarge()] = size === 'large' && isMultiline,
+            _b[jsStyles.iconSubItem()] = _isSubMenu,
+            _b[jsStyles.iconSubItemSeparatedMenu()] = isSeparatedMenu && _isSubMenu,
+            _b[jsStyles.iconSubItemLarge()] = _isSubMenu && size === 'large',
+            _b)),
+    });
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
+export declare type ItemContentProps = Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isNestedSubMenu' | 'caption' | 'marker' | '_avatar'>;
+declare const ItemContentWithStaticFields: React.ForwardRefExoticComponent<Pick<SideMenuItemProps, "_isSubMenu" | "icon" | "_isNestedSubMenu" | "caption" | "marker" | "_avatar"> & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { ItemContentWithStaticFields as ItemContent };

package/src/internal/ItemContent/ItemContent.js

@@ -0,0 +1,39 @@
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from '../../SideMenu.styles';
+import { SideMenuContext } from '../../SideMenuContext';
+import { useNumberOfTextLinesInItem } from '../../../hooks/useNumberOfTextLinesInItem';
+import { Icon } from './Icon';
+import { Caption } from './Caption';
+import { Marker } from './Marker';
+import { Avatar } from './Avatar';
+/**
+ * Контент для SideMenuItem или SideMenuLink
+ */
+var ItemContent = forwardRef(function (_a, ref) {
+    var _b;
+    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, marker = _a.marker, _avatar = _a._avatar;
+    var context = useContext(SideMenuContext);
+    var textRef = useRef(null);
+    var _c = useState(false), isMultiline = _c[0], setIsMultiline = _c[1];
+    useEffect(function () {
+        useNumberOfTextLinesInItem(textRef, setIsMultiline);
+    }, [textRef.current]);
+    var hasShortcutImage = !!icon || !!_avatar;
+    return (React.createElement("div", { className: cx((_b = {},
+            _b[jsStyles.itemWrapper()] = true,
+            _b[jsStyles.itemMultilineWrapper()] = isMultiline,
+            _b[jsStyles.subItemWrapper()] = _isSubMenu,
+            _b[jsStyles.itemLargeWrapper()] = context.size === 'large',
+            _b[jsStyles.subItemLargeWrapper()] = context.size === 'large' && _isSubMenu,
+            _b[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
+            _b)), ref: ref },
+        icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, size: context.size, isSeparatedMenu: context.isSeparatedMenu })),
+        _avatar && React.createElement(Avatar, { _avatar: _avatar }),
+        !context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
+            React.createElement(Caption, { isTransitioned: context.isTransitioned, _isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, size: context.size, hasSubIcons: context.hasSubIcons, isMultiline: isMultiline, caption: caption, ref: textRef }),
+            marker && React.createElement(Marker, { isMultiline: isMultiline, marker: marker })))));
+});
+ItemContent.displayName = 'ItemContent';
+var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });
+export { ItemContentWithStaticFields as ItemContent };

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

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

package/src/internal/ItemContent/Marker.js

@@ -0,0 +1,11 @@
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { jsStyles } from '../../SideMenu.styles';
+import React from 'react';
+export var Marker = function (_a) {
+    var _b;
+    var isMultiline = _a.isMultiline, marker = _a.marker;
+    return (React.createElement("span", { className: cx((_b = {},
+            _b[jsStyles.marker()] = true,
+            _b[jsStyles.markerMultiline()] = isMultiline,
+            _b)) }, marker));
+};

package/src/internal/NestedMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface NestedMenuProps {
+    _generatedId?: string;
+    children: React.ReactNode;
+}
+declare const NestedMenuWithStaticFields: React.ForwardRefExoticComponent<NestedMenuProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { NestedMenuWithStaticFields as NestedMenu };

package/src/internal/NestedMenu.js

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import { jsStyles } from '../SideMenu.styles';
+import { isClickableSubElement } from '../../utils/scripts';
+/**
+ * Вложенное подменю
+ *
+ * @visibleName NestedMenu
+ */
+var NestedMenu = forwardRef(function (_a, ref) {
+    var _generatedId = _a._generatedId, children = _a.children;
+    var levelIndex = 0;
+    return (React.createElement("div", { className: jsStyles.nestedMenu() }, React.Children.map(children, function (child) {
+        if (React.isValidElement(child) &&
+            // @ts-expect-error: accessing private property
+            isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
+            return React.cloneElement(child, {
+                _generatedId: _generatedId + "-" + levelIndex++,
+                _isNestedSubMenu: true,
+                ref: ref,
+            });
+        }
+        return child;
+    })));
+});
+NestedMenu.displayName = 'NestedMenu';
+var NestedMenuWithStaticFields = Object.assign(NestedMenu, { __KONTUR_REACT_UI__: 'NestedMenu' });
+export { NestedMenuWithStaticFields as NestedMenu };

package/src/{RightBorder.js → internal/RightBorder.js}

@@ -1,7 +1,7 @@
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { customStyles, jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
+import { customStyles, jsStyles } from '../SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
 /**
  * Элемент интерактивной правой границы
  *

package/src/{SeparatedSubMenu.js → internal/SeparatedSubMenu.js}

@@ -1,8 +1,9 @@
 import { __assign } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
+import { isClickableSubElement } from '../../utils/scripts';
 /**
  * Отдельностоящее подменю
  *
@@ -14,7 +15,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var context = useContext(SideMenuContext);
     var isSubItemWithChildren = function (child) {
         // @ts-expect-error: accessing private property
-        return (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem' && child.props.children;
+        return isClickableSubElement(child.type.__KONTUR_REACT_UI__) && child.props.children;
     };
     var hasSubItems = function (children) {
         return React.Children.toArray(children).some(function (child) {
@@ -28,8 +29,9 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.separatedMenu()] = true, _b)), ref: ref },
         React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
+                if (
                 // @ts-expect-error: accessing private property
-                if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuSubItem') {
+                isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
                     var oldIndex = levelIndex;
                     levelIndex++;
                     return React.cloneElement(child, {