@skbkontur/side-menu 0.12.2 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.14.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.13.0...@skbkontur/side-menu@0.14.0) (2023-06-14)
+
+
+### Features
+
+* **SideMenu:** change avatar size ([6597054](https://git.skbkontur.ru/ui/ui-parking/commits/659705403bda74aa60e6a21b8778d7a71e3fb669))
+
+
+
+
+
+# [0.13.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.12.2...@skbkontur/side-menu@0.13.0) (2023-06-09)
+
+
+### Features
+
+* **SideMenu:** add basic semantic ([e986397](https://git.skbkontur.ru/ui/ui-parking/commits/e986397737b395eed7086a99b7a12b6bc45ea8ae))
+
+
+
+
+
 ## [0.12.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.12.1...@skbkontur/side-menu@0.12.2) (2023-06-08)
 
 

package/internal/themes/SideMenuTheme.d.ts

@@ -27,7 +27,7 @@ export declare class SideMenuTheme extends SideMenuTheme_base {
     static sideMenuSubItemHeaderFontSize: string;
     static sideMenuSubItemHeaderColor: string;
     static sideMenuSubItemHeaderPadding: string;
-    static sideMenuAvatarMargin: string;
+    static sideMenuAvatarSize: string;
     static get sideMenuCaptionLineHeight(): string;
     static sideMenuCaptionFontSize: string;
     static sideMenuCaptionFontSizeForTouchScreens: string;

package/internal/themes/SideMenuTheme.js

@@ -118,7 +118,7 @@ var SideMenuTheme = /** @class */ (function (_super) {
     SideMenuTheme.sideMenuSubItemHeaderPadding = '10px 8px 2px 40px';
     //#endregion
     //#region Avatar
-    SideMenuTheme.sideMenuAvatarMargin = '0 4px';
+    SideMenuTheme.sideMenuAvatarSize = '24px';
     SideMenuTheme.sideMenuCaptionFontSize = '14px';
     SideMenuTheme.sideMenuCaptionFontSizeForTouchScreens = '18px';
     SideMenuTheme.sideMenuCaptionLineHeightForTouchScreens = '24px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/SideMenu/SideMenu.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useContext, useEffect, useRef, useState } from 'reac
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { customStyles, jsStyles } from './SideMenu.styles';
+import { jsStylesForSideMenu, customStyles } from './SideMenu.styles';
 import { SideMenuOrganisations } from '../SideMenuOrganisations/SideMenuOrganisations';
 import { SideMenuContext } from '../SideMenuContext';
 import { SideMenuBody } from '../SideMenuBody/SideMenuBody';
@@ -190,31 +190,31 @@ var SideMenuInner = forwardRef(function (_a, ref) {
             setHeaderHeight: setHeaderHeight,
         } },
         React.createElement(ZIndex, { priority: isSideMenuOverflowing ? 8 : 0, className: cx((_b = {},
-                _b[jsStyles.root()] = true,
+                _b[jsStylesForSideMenu.root()] = true,
                 _b[customStyles.rootForTabletsOrMobiles(headerHeight)] = isTabletOrMobile,
-                _b[jsStyles.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
-                _b[jsStyles.rootForNarrowDesktops(theme)] = isNarrowDesktop,
-                _b[jsStyles.separatedRootForNarrowDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
-                _b[jsStyles.separatedRootForDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
+                _b[jsStylesForSideMenu.shownRootForTabletsOrMobiles()] = isShown && isTabletOrMobile,
+                _b[jsStylesForSideMenu.rootForNarrowDesktops(theme)] = isNarrowDesktop,
+                _b[jsStylesForSideMenu.separatedRootForNarrowDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isNarrowDesktop,
+                _b[jsStylesForSideMenu.separatedRootForDesktops(theme)] = separatedMenuWithoutOverlay && isSeparatedMenuShown && isDesktopQuery,
                 _b)) },
             React.createElement(React.Fragment, null,
                 shouldShowBackdrop && React.createElement(Backdrop, { style: backdropStyle }),
                 React.createElement(RenderLayer, { onClickOutside: function () { return handleIsShown(false); } },
                     React.createElement("aside", __assign({ className: cx((_c = {},
-                            _c[jsStyles.wrapper()] = true,
-                            _c[jsStyles.wrapperIE()] = isIE11,
-                            _c[jsStyles.wrapperWithShadow(theme)] = isSideMenuOverContent,
+                            _c[jsStylesForSideMenu.wrapper()] = true,
+                            _c[jsStylesForSideMenu.wrapperIE()] = isIE11,
+                            _c[jsStylesForSideMenu.wrapperWithShadow(theme)] = isSideMenuOverContent,
                             _c), className), "data-tid": SideMenuDataTids.root, ref: ref }, rest, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: showMinimizedRootForNarrowDesktopWithOverlay }),
                         React.createElement("div", { className: cx((_d = {},
-                                _d[jsStyles.container(theme)] = true,
-                                _d[jsStyles.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
-                                _d[jsStyles.minimizedContainer(theme)] = isMinimized,
-                                _d[jsStyles.innerContainer()] = !isSeparatedMenu,
-                                _d[jsStyles.containerForTouchScreens(theme)] = isTouchScreen,
-                                _d[jsStyles.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
+                                _d[jsStylesForSideMenu.container(theme)] = true,
+                                _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
+                                _d[jsStylesForSideMenu.minimizedContainer(theme)] = isMinimized,
+                                _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenu,
+                                _d[jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
+                                _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
                                 _d)) },
                             React.createElement("div", { className: cx((_e = {},
-                                    _e[jsStyles.contentWrapper()] = true,
+                                    _e[jsStylesForSideMenu.contentWrapper()] = true,
                                     _e)) }, children)),
                         !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
 });

package/src/SideMenu/SideMenu.styles.d.ts

@@ -2,7 +2,7 @@ import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const customStyles: {
     rootForTabletsOrMobiles(headerHeight?: number | undefined): string;
 };
-export declare const jsStyles: {
+export declare const jsStylesForSideMenu: {
     root(): string;
     shownRootForTabletsOrMobiles(): string;
     rootForNarrowDesktops(t: SideMenuTheme): string;
@@ -18,4 +18,5 @@ export declare const jsStyles: {
     wrapperIE(): string;
     wrapperWithShadow(t: SideMenuTheme): string;
     collapsedContainerForTabletsOrMobiles(): string;
+    list(): string;
 };

package/src/SideMenu/SideMenu.styles.js

@@ -49,11 +49,14 @@ var styles = {
     collapsedContainerForTabletsOrMobiles: function () {
         return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
     },
+    list: function () {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
+    },
 };
 export var customStyles = {
     rootForTabletsOrMobiles: function (headerHeight) {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
     },
 };
-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, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+export var jsStylesForSideMenu = memoizeStyle(styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/src/SideMenuAvatar/SideMenuAvatar.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
+import { UserAvatarProps } from '../../../react-ui-addons/';
 import { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
-export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon' | '_avatar' | 'caption' | 'style'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
+export interface SideMenuAvatarProps extends Omit<UserAvatarProps, 'style'>, Omit<SideMenuDropdownProps, 'icon' | 'caption'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
 }
 /**
  * Аватар пользователя
  *
  * @visibleName SideMenu.Avatar
  */
-export declare const SideMenuAvatar: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const SideMenuAvatar: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLLIElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuAvatar/SideMenuAvatar.js

@@ -1,12 +1,13 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
-import { UserAvatar } from '@skbkontur/react-ui-addons/components/UserAvatar';
+import React, { forwardRef, useContext } from 'react';
+import { UserAvatar } from '../../../react-ui-addons/';
 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"]);
-    return (
-    // @ts-expect-error: icon is not provided as _avatar replaces it
-    React.createElement(SideMenuDropdown, __assign({ _avatar: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
+    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));
 });
 SideMenuAvatarInner.displayName = 'SideMenuAvatar';
 /**

package/src/SideMenuBody/SideMenuBody.js

@@ -8,8 +8,9 @@ import { SideMenuContext } from '../SideMenuContext';
 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';
 var SideMenuBodyInner = forwardRef(function (_a, ref) {
-    var _b;
+    var _b, _c;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     var scrollContainerRef = useRef(null);
@@ -32,13 +33,14 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
     }, [context.activeMenuItem, context.isShown]);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     if (context.isShown) {
-        return (React.createElement("div", { ref: mergeRefs([ref, sideMenuBodyRef]), style: { overflow: 'hidden', height: '100%' } },
+        return (React.createElement("div", { ref: mergeRefs([ref, sideMenuBodyRef]), className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className) },
             React.createElement(ScrollContainer, { style: { position: 'static' }, onScrollStateChangeY: function (state) {
                     var _a;
                     (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
                 }, hideScrollBar: true, ref: scrollContainerRef },
-                React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className) }, rest),
-                    React.createElement(InnerBody, null, children)))));
+                React.createElement("nav", null,
+                    React.createElement("ul", __assign({ className: cx((_c = {}, _c[jsStylesForSideMenu.list()] = true, _c[jsStyles.wrapper(theme)] = true, _c)) }, rest),
+                        React.createElement(InnerBody, null, children))))));
     }
     return null;
 });

package/src/SideMenuBody/SideMenuBody.styles.d.ts

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

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -3,8 +3,11 @@ 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      flex-grow: 1;\n      padding-bottom: ", ";\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 1;\n      padding-bottom: ", ";\n      margin: 0 ", ";\n    "])), t.sideMenuBodyPaddingBottom, t.sideMenuMarginX);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 1;\n      margin: 0 ", ";\n      height: 100%;\n      overflow: hidden;\n    "], ["\n      flex-grow: 1;\n      margin: 0 ", ";\n      height: 100%;\n      overflow: hidden;\n    "])), t.sideMenuMarginX);
+    },
+    wrapper: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sideMenuBodyPaddingBottom);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -2,11 +2,9 @@ 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' | '_avatar' | 'id' | '_generatedId' | 'subCaption' | '_isAvatar'> {
+export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'id' | '_generatedId' | 'subCaption' | '_isAvatar'> {
     children?: React.ReactNode;
     disableAnimations?: boolean;
-    /** @ignore */
-    _avatar?: React.ReactElement;
     id?: string;
     /** @ignore */
     _generatedId?: string;
@@ -16,6 +14,6 @@ export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuPro
  *
  * @visibleName SideMenu.Dropdown
  */
-export declare const SideMenuDropdown: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const SideMenuDropdown: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLLIElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -8,16 +8,16 @@ 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, _avatar = _a._avatar, 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", "_avatar", "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, 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 context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    return (React.createElement("div", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },
+    return (React.createElement("li", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },
         React.createElement(DropdownMenu, __assign({ caption: React.createElement("div", { className: cx((_c = {},
                     _c[jsStyles.label(theme)] = true,
                     _c[jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
                     _c[jsStyles.minimizedLabel()] = context.isMinimized,
                     _c)) },
-                React.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, _avatar: _avatar, 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, 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/SideMenuFooter/SideMenuFooter.js

@@ -5,6 +5,7 @@ import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './SideMenuFooter.styles';
 import { getItemId } from '../../lib/utils/scripts';
 import { SideMenuContext } from '../SideMenuContext';
+import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var _b;
@@ -20,14 +21,15 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
                 _b[jsStyles.root(theme)] = true,
                 _b[jsStyles.rootFixed(theme)] = isFixed,
                 _b[jsStyles.rootTransitioned()] = context.isBeingTransitioned,
-                _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
-                    _generatedId: getItemId('footer', index++),
-                });
-            }
-            return child;
-        })));
+                _b), className), ref: ref }, rest),
+            React.createElement("ul", { className: jsStylesForSideMenu.list() }, React.Children.map(children, function (child, index) {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        _generatedId: getItemId('footer', index++),
+                    });
+                }
+                return child;
+            }))));
     }
     return null;
 });

package/src/SideMenuOrganisations/SideMenuOrganisations.d.ts

@@ -5,6 +5,6 @@ import { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
  *
  * @visibleName SideMenu.Organisations
  */
-export declare const SideMenuOrganisations: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const SideMenuOrganisations: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLLIElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuSubItem/SideMenuSubItem.d.ts

@@ -7,6 +7,6 @@ export interface SideMenuSubItemProps extends Omit<SideMenuItemProps, 'icon'>, P
  *
  * @visibleName SideMenu.SubItem
  */
-export declare const SideMenuSubItem: React.ForwardRefExoticComponent<SideMenuSubItemProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const SideMenuSubItem: React.ForwardRefExoticComponent<SideMenuSubItemProps & React.RefAttributes<HTMLLIElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuSubItem/SideMenuSubItem.js

@@ -10,13 +10,13 @@ var SideMenuSubItemInner = forwardRef(function (_a, ref) {
     var context = useContext(SideMenuContext);
     var isOpened = useOpenedSubElementState(id, _generatedId, context.openedParents, context.activeMenuItem);
     var icon = useMemoIcon(children, isOpened);
-    return (React.createElement("div", { ref: ref },
+    return (React.createElement("li", { 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)));
+            icon: icon, _isSubMenu: true, id: id, _generatedId: _generatedId, "aria-expanded": children ? isOpened : undefined, "aria-controls": children ? "" + (id || _generatedId) : undefined }, rest)),
+        children && isOpened && (React.createElement(NestedMenu, { _generatedId: _generatedId, htmlId: "" + (id || _generatedId) }, children))));
 });
 SideMenuSubItemInner.displayName = 'SideMenuSubItem';
 /**

package/src/SideMenuSubLink/SideMenuSubLink.d.ts

@@ -11,6 +11,6 @@ export interface SideMenuSubLinkProps extends Omit<SideMenuLinkProps, 'icon'>, P
  *
  * @visibleName SideMenu.SubLink
  */
-export declare const SideMenuSubLink: React.ForwardRefExoticComponent<SideMenuSubLinkProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const SideMenuSubLink: React.ForwardRefExoticComponent<SideMenuSubLinkProps & React.RefAttributes<HTMLLIElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/SideMenuSubLink/SideMenuSubLink.js

@@ -10,13 +10,13 @@ var SideMenuSubLinkInner = forwardRef(function (_a, ref) {
     var context = useContext(SideMenuContext);
     var isOpened = useOpenedSubElementState(id, _generatedId, context.openedParents, context.activeMenuItem);
     var icon = useMemoIcon(children, isOpened);
-    return (React.createElement("div", { ref: ref },
+    return (React.createElement("li", { 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)));
+            icon: icon, _isSubMenu: true, _isNestedSubMenu: _isNestedSubMenu, id: id, _generatedId: _generatedId, "aria-expanded": children ? isOpened : undefined, "aria-controls": children ? "" + (id || _generatedId) : undefined }, rest)),
+        children && isOpened && (React.createElement(NestedMenu, { _generatedId: _generatedId, htmlId: "" + (id || _generatedId) }, children))));
 });
 SideMenuSubLinkInner.displayName = 'SideMenuSubLink';
 /**

package/src/internal/ClickableElement.d.ts

@@ -14,8 +14,6 @@ export interface CommonClickableElementProps extends CommonProps {
     /** @ignore */
     _isNestedSubMenu?: boolean;
     /** @ignore */
-    _avatar?: React.ReactElement;
-    /** @ignore */
     _isDropdown?: boolean;
     /** @ignore */
     _isAvatar?: boolean;

package/src/internal/ClickableElement.js

@@ -17,7 +17,7 @@ import { ThemeContext } from '@skbkontur/react-ui';
  */
 var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
-    var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, 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, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar"]);
+    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, 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, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
@@ -95,17 +95,20 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
     var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isNarrowDesktop && context.isMinimized;
-    return (React.createElement("div", null,
-        React.cloneElement(React.createElement(Tag, null), __assign({ className: cx((_b = {},
-                _b[jsStyles.root(theme)] = true,
-                _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
-                _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
-                _b[jsStyles.activeRoot(theme)] = isActive ||
-                    shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
-                    shouldHighlightTopLevelItemWhenMenuIsMinimized,
-                _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
-                _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _avatar: _avatar, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar })), ref: ref }, rest)),
-        React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: context.isMinimized }, children)));
+    var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
+    var newProps = __assign({ className: cx((_b = {},
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
+            _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
+            _b[jsStyles.activeRoot(theme)] = isActive ||
+                shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
+                shouldHighlightTopLevelItemWhenMenuIsMinimized,
+            _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
+            _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar })), ref: ref }, rest);
+    return (React.createElement(Component, null,
+        React.cloneElement(React.createElement(Tag, null), children
+            ? __assign(__assign({}, newProps), { 'aria-expanded': isOpened, 'aria-controls': "" + (id || _generatedId) }) : __assign({}, newProps)),
+        React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: context.isMinimized, htmlId: "" + (id || _generatedId) }, children)));
 });
 ClickableElement.displayName = 'ClickableElement';
 var ClickableElementWithStaticFields = Object.assign(ClickableElement, {

package/src/internal/InnerSubMenu.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 interface InnerSubMenuProps {
     children?: React.ReactNode;
     generatedId?: string;
+    htmlId: string;
 }
-declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+declare const InnerSubMenuWithStaticFields: React.ForwardRefExoticComponent<InnerSubMenuProps & React.RefAttributes<HTMLUListElement>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { InnerSubMenuWithStaticFields as InnerSubMenu };

package/src/internal/InnerSubMenu.js

@@ -1,14 +1,15 @@
 import React, { forwardRef } from 'react';
 import { isClickableSubElement } from '../../lib/utils/scripts';
+import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
 /**
  * Подменю, раскрывающееся внутри основного меню
  *
  * @visibleName InnerSubMenu
  */
 var InnerSubMenu = forwardRef(function (_a, ref) {
-    var children = _a.children, generatedId = _a.generatedId;
+    var children = _a.children, generatedId = _a.generatedId, htmlId = _a.htmlId;
     var levelIndex = 0;
-    return (React.createElement("div", { ref: ref }, React.Children.map(children, function (child) {
+    return (React.createElement("ul", { ref: ref, id: htmlId, className: jsStylesForSideMenu.list() }, React.Children.map(children, function (child) {
         if (React.isValidElement(child)) {
             if (
             // @ts-expect-error: accessing private property

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
 interface CaptionProps extends Pick<SideMenuItemProps, '_isSubMenu' | '_isNestedSubMenu' | 'caption' | '_isBackButton' | '_isDropdown' | '_isAvatar' | 'subCaption'> {
-    hasShortcutImage: boolean;
+    hasIcon: boolean;
     isMultiline: boolean;
 }
 export declare const Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLParagraphElement>>;

package/src/internal/ItemContent/Caption.js

@@ -23,7 +23,7 @@ var getCaptionTail = function (caption, visibleWidth, fullWidth) {
 };
 export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
+    var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons, isTablet = _d.isTablet, isMobile = _d.isMobile;
     var captionRef = useRef(null);
@@ -57,8 +57,8 @@ export var Caption = forwardRef(function (_a, ref) {
                 _c[jsStyles.captionTruncated()] = _isDropdown && (!_isAvatar || isAvatarCaptionSingleWord(caption, _isAvatar)),
                 _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
                 _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
-                _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
-                _c[jsStyles.captionWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
+                _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasIcon,
+                _c[jsStyles.captionWithoutItemIcon()] = !hasIcon && !isSeparatedMenu,
                 _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
                 _c[jsStyles.captionLarge(theme)] = size === 'large',
                 _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SideMenuItemProps } from '../../SideMenuItem/SideMenuItem';
-interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton'> {
+interface IconProps extends Pick<SideMenuItemProps, '_isSubMenu' | 'icon' | '_isBackButton' | '_isAvatar'> {
     isMultiline: boolean;
 }
-export declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton }: 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 declare const Icon: ({ icon, _isSubMenu, isMultiline, _isBackButton, _isAvatar }: 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

@@ -14,7 +14,7 @@ var getIconSize = function (theme, _isSubMenu, _isBackButton) {
 };
 export var Icon = function (_a) {
     var _b;
-    var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c;
+    var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c, _isAvatar = _a._isAvatar;
     var context = useContext(SideMenuContext);
     var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
     var theme = getSideMenuTheme(useContext(ThemeContext));
@@ -30,6 +30,7 @@ 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)),
     });
 };

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

@@ -7,4 +7,5 @@ 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

@@ -23,6 +23,9 @@ 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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/src/internal/ItemContent/ItemContent.js

@@ -7,7 +7,6 @@ import { useNumberOfTextLinesInSubItem } from '../../../hooks/useNumberOfTextLin
 import { Icon } from './Icon';
 import { Caption } from './Caption';
 import { Marker } from './Marker';
-import { Avatar } from './Avatar';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
 import { sideMenuMultilineCaptionPaddingTop } from './Caption.styles';
@@ -20,7 +19,7 @@ var getItemContentHeight = function (theme, linesNumber, size) {
  */
 var ItemContent = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
+    var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     var context = useContext(SideMenuContext);
     var size = context.size, isTouchScreen = context.isTouchScreen;
     var textRef = useRef(null);
@@ -57,7 +56,6 @@ var ItemContent = forwardRef(function (_a, ref) {
             });
         }
     }, [textRef.current, context.isBeingTransitioned]);
-    var hasShortcutImage = !!icon || !!_avatar;
     var isSeparatedSubMenuInNarrowDesktopWithoutOverlay = _isSubMenu && context.separatedMenuWithoutOverlay && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
@@ -68,14 +66,13 @@ var ItemContent = forwardRef(function (_a, ref) {
             _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
             _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
             _b)), ref: ref },
-        icon && React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton }),
-        _avatar && React.createElement(Avatar, { _avatar: _avatar }),
+        icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar })),
         (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: cx((_c = {},
                 _c[jsStyles.textAndMarkerWrapper()] = true,
                 _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
                 _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
                 _c)) },
-            React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
+            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 || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));
 });
 ItemContent.displayName = 'ItemContent';

package/src/internal/NestedMenu.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface NestedMenuProps {
     _generatedId?: string;
     children: React.ReactNode;
+    htmlId: string;
 }
 declare const NestedMenuWithStaticFields: React.ForwardRefExoticComponent<NestedMenuProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/NestedMenu.js

@@ -3,16 +3,22 @@ import { jsStyles } from './NestedMenu.styles';
 import { isClickableSubElement } from '../../lib/utils/scripts';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
+import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 /**
  * Вложенное подменю
  *
  * @visibleName NestedMenu
  */
 var NestedMenu = forwardRef(function (_a, ref) {
-    var _generatedId = _a._generatedId, children = _a.children;
+    var _b;
+    var _generatedId = _a._generatedId, children = _a.children, htmlId = _a.htmlId;
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var levelIndex = 0;
-    return (React.createElement("div", { className: jsStyles.root(theme) }, React.Children.map(children, function (child) {
+    return (React.createElement("ul", { className: cx((_b = {},
+            _b[jsStylesForSideMenu.list()] = true,
+            _b[jsStyles.root(theme)] = true,
+            _b)), id: htmlId }, React.Children.map(children, function (child) {
         if (React.isValidElement(child) &&
             // @ts-expect-error: accessing private property
             isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {

package/src/internal/SeparatedSubMenu.d.ts

@@ -5,6 +5,7 @@ interface SeparatedSubMenuProps {
     id?: string;
     href?: string;
     caption?: string;
+    htmlId: string;
 }
 declare const SeparatedSubMenuWithStaticFields: React.ForwardRefExoticComponent<SeparatedSubMenuProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;

package/src/internal/SeparatedSubMenu.js

@@ -2,8 +2,8 @@ import { __assign } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { jsStyles } from '../SideMenu/SideMenu.styles';
-import { customStyles, jsStylesForSeparatedSubMenu } from './SeparatedSubMenu.styles';
+import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
+import { customStyles, jsStyles } from './SeparatedSubMenu.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { isClickableSubElement } from '../../lib/utils/scripts';
 import { BackButton } from './BackButton';
@@ -18,7 +18,7 @@ import { isIE11 } from '@skbkontur/react-ui/lib/client';
  */
 var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
+    var children = _a.children, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption, htmlId = _a.htmlId;
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var isSubItemWithChildren = function (child) {
@@ -37,21 +37,22 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
     var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
     return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.container(theme)] = true,
-            _b[jsStyles.containerForTouchScreens(theme)] = context.isTouchScreen,
-            _b[jsStylesForSeparatedSubMenu.root(theme)] = true,
+            _b[jsStylesForSideMenu.container(theme)] = true,
+            _b[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
+            _b[jsStyles.root(theme)] = true,
             _b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
-            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlay(theme)] = context.separatedMenuWithoutOverlay && context.isDesktop,
-            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlayForNarrowDesktop(theme)] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
-            _b[jsStylesForSeparatedSubMenu.rootWithShadow(theme)] = isSeparatedSubMenuOverContent,
+            _b[jsStyles.rootWithoutOverlay(theme)] = context.separatedMenuWithoutOverlay && context.isDesktop,
+            _b[jsStyles.rootWithoutOverlayForNarrowDesktop(theme)] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
+            _b[jsStyles.rootWithShadow(theme)] = isSeparatedSubMenuOverContent,
             _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
                 var _a;
                 (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
             }, hideScrollBar: true },
-            React.createElement("div", { className: cx((_c = {},
-                    _c[jsStylesForSeparatedSubMenu.contentWrapper(theme)] = true,
-                    _c[jsStylesForSeparatedSubMenu.contentWrapperForMobiles()] = context.isMobile,
+            React.createElement("ul", { className: cx((_c = {},
+                    _c[jsStylesForSideMenu.list()] = true,
+                    _c[jsStyles.contentWrapper(theme)] = true,
+                    _c[jsStyles.contentWrapperForMobiles()] = context.isMobile,
                     _c)) },
                 context.isMobile && React.createElement(BackButton, { caption: caption, id: id, href: href, generatedId: generatedId }),
                 React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubItems(children) }, context) }, React.Children.map(children, function (child) {

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

@@ -2,7 +2,7 @@ import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const customStyles: {
     rootForMobiles(headerHeight?: number | undefined): string;
 };
-export declare const jsStylesForSeparatedSubMenu: {
+export declare const jsStyles: {
     root(t: SideMenuTheme): string;
     rootWithoutOverlayForNarrowDesktop(t: SideMenuTheme): string;
     rootWithoutOverlay(t: SideMenuTheme): string;

package/src/internal/SeparatedSubMenu.styles.js

@@ -26,5 +26,5 @@ export var customStyles = {
         return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      height: calc(100vh - ", "px);\n      left: 0;\n      top: ", "px;\n    "], ["\n      height: calc(100vh - ", "px);\n      left: 0;\n      top: ", "px;\n    "])), headerHeight, headerHeight);
     },
 };
-export var jsStylesForSeparatedSubMenu = memoizeStyle(styles);
+export var jsStyles = memoizeStyle(styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/internal/SubMenu.d.ts

@@ -9,8 +9,9 @@ interface SubMenuProps {
     id?: string;
     href?: string;
     caption?: string;
+    htmlId: string;
 }
-declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement | HTMLUListElement>> & {
     __KONTUR_REACT_UI__: string;
 };
 export { SubMenuWithStaticFields as SubMenu };

package/src/internal/SubMenu.js

@@ -8,16 +8,16 @@ import { SideMenuContext } from '../SideMenuContext';
  * @visibleName InnerSubMenu
  */
 var SubMenu = forwardRef(function (_a, ref) {
-    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimized = _a.isMinimized, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
+    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimized = _a.isMinimized, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption, htmlId = _a.htmlId;
     var context = useContext(SideMenuContext);
     var shouldHideOverlayMenu = isMinimized && !context.separatedMenuWithoutOverlay;
     if (!children || !isOpened || isSubMenu || shouldHideOverlayMenu) {
         return null;
     }
     if (isSeparatedMenu && (context.isShown || context.isBeingTransitioned)) {
-        return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption }, children));
+        return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption, htmlId: htmlId }, children));
     }
-    return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref }, children));
+    return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref, htmlId: htmlId }, children));
 });
 SubMenu.displayName = 'SubMenu';
 var SubMenuWithStaticFields = Object.assign(SubMenu, { __KONTUR_REACT_UI__: 'SubMenu' });

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

@@ -1,5 +0,0 @@
-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

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

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

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

package/src/internal/ItemContent/Avatar.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 = {
-    avatarIcon: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), t.sideMenuAvatarMargin);
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1;