@skbkontur/side-menu 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "0.12.2",
+  "version": "0.13.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

@@ -8,6 +8,6 @@ export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropd
  *
  * @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/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

@@ -16,6 +16,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

@@ -11,7 +11,7 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     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 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,

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

@@ -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, _avatar: _avatar, _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/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' });