@skbkontur/side-menu 0.6.1 → 0.7.0

package/src/SideMenu/SideMenu.styles.js

@@ -1,49 +1,68 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+export var sideMenuMinimizedWidth = '72px';
+export var sideMenuStandardWidth = '232px';
+export var sideMenuForTouchScreenWidth = '328px';
+export var sideMenuBoxShadow = '4px 4px 24px rgba(0, 0, 0, 0.24)';
 var styles = {
-    sideMenuZIndex: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n    "], ["\n      position: relative;\n      height: 100%;\n    "])));
+    root: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "], ["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "])));
     },
-    sideMenuZIndexForTabletsOrMobiles: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n    "], ["\n      position: absolute;\n      top: 0;\n    "])));
+    rootForTabletsOrMobiles: function () {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 68px;\n      position: absolute;\n      top: 0;\n    "], ["\n      height: 68px;\n      position: absolute;\n      top: 0;\n    "])));
     },
-    root: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
+    shownRootForTabletsOrMobiles: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 100vh;\n    "], ["\n      height: 100vh;\n    "])));
+    },
+    rootForNarrowDesktops: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), sideMenuMinimizedWidth);
+    },
+    separatedRootForNarrowDesktops: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: #fff;\n    "], ["\n      width: calc(", " + ", ");\n      background: #fff;\n    "])), sideMenuMinimizedWidth, sideMenuStandardWidth);
     },
-    rootSafari: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
+    separatedRootForDesktops: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: #fff;\n    "], ["\n      width: calc(", " + ", ");\n      background: #fff;\n    "])), sideMenuStandardWidth, sideMenuStandardWidth);
     },
-    rootInnerWithoutScrollBar: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "], ["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "])));
+    container: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])), sideMenuStandardWidth);
     },
-    collapsedRootInnerForTabletsOrMobiles: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
+    containerSafari: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
     },
-    minimisedRoot: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: 72px !important;\n    "], ["\n      width: 72px !important;\n    "])));
+    contentWrapperWithoutScrollBar: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "], ["\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n      }\n    "])));
     },
-    rootWithInnerSubMenu: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+    collapsedContentWrapperForTabletsOrMobiles: function () {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
     },
-    rootForTouchScreens: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      width: 328px;\n    "], ["\n      width: 328px;\n    "])));
+    minimizedContainer: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), sideMenuMinimizedWidth);
     },
-    rootInSeparatedMenuForMobiles: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+    innerContainer: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
-    rootInnerContainer: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "], ["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "])));
+    containerForTouchScreens: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), sideMenuForTouchScreenWidth);
     },
-    rootWrapper: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
+    separatedContainerForMobiles: function () {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
     },
-    rootWrapperIE: function () {
+    contentWrapper: function () {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "], ["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "])));
+    },
+    wrapper: function () {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
+    },
+    wrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+    },
+    wrapperWithShadow: function () {
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), sideMenuBoxShadow);
     },
-    collapsedRootForTabletsOrMobiles: function () {
-        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+    collapsedContainerForTabletsOrMobiles: function () {
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
     },
 };
 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;
+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, templateObject_18, templateObject_19;

package/src/SideMenuBody/SideMenuBody.js

@@ -9,7 +9,7 @@ var SideMenuBodyInner = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     if (context.isShown) {
-        return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
+        return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className), ref: ref }, rest),
             React.createElement(InnerBody, null, children)));
     }
     return null;

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    body(): string;
+    root(): string;
 };

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    body: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "])));
     },
 };

package/src/SideMenuContext.d.ts

@@ -1,7 +1,8 @@
 import { FlattedArrayElementType } from './internal/InnerBody';
 export interface SideMenuContextType {
-    isMinimised?: boolean;
-    isTransitioned?: boolean;
+    isMinimized?: boolean;
+    setIsMinimized?: (isMinimized: boolean) => void;
+    isBeingTransitioned?: boolean;
     isSeparatedMenu?: boolean;
     size?: 'small' | 'large';
     activeMenuItem?: string | null;
@@ -19,9 +20,11 @@ export interface SideMenuContextType {
     isShown?: boolean;
     toggleIsShown?: () => void;
     flattedArrayOfAllElements?: FlattedArrayElementType[];
-    separatedMenuIsShown?: boolean;
-    setSeparatedMenuIsShown?: (separatedMenuIsShown: boolean) => void;
-    mobileSeparatedMenuIsScrolling?: boolean;
-    setMobileSeparatedMenuIsScrolling?: (isScrolling: boolean) => void;
+    isSeparatedMenuShown?: boolean;
+    setIsSeparatedMenuShown?: (separatedMenuIsShown: boolean) => void;
+    separatedMenuWithoutOverlay?: boolean;
+    setIsMouseOutside?: (v: boolean) => void;
+    isMobileSeparatedMenuScrolling?: boolean;
+    setIsMobileSeparatedMenuScrolling?: (isScrolling: boolean) => void;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuDivider/SideMenuDivider.js

@@ -5,7 +5,7 @@ import { jsStyles } from './SideMenuDivider.styles';
 var SideMenuDividerInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
-    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.sideMenuDivider()] = true, _b), className), ref: ref }, rest));
+    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className), ref: ref }, rest));
 });
 SideMenuDividerInner.displayName = 'SideMenuDivider';
 /**

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    sideMenuDivider(): string;
+    root(): string;
 };

package/src/SideMenuDivider/SideMenuDivider.styles.js

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

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -11,8 +11,8 @@ 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, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_generatedId", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
     var context = useContext(SideMenuContext);
     var label = (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.dropdownLabel()] = true,
-            _b[jsStyles.dropdownLabelMinimized()] = context.isMinimised,
+            _b[jsStyles.label()] = true,
+            _b[jsStyles.minimizedLabel()] = context.isMinimized,
             _b)) },
         React.createElement(SideMenuItem, { icon: icon, caption: caption, _avatar: _avatar, id: id, _isDropdown: true })));
     return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
@@ -21,15 +21,15 @@ var SideMenuDropdownInner = forwardRef(function (_a, ref) {
             popupBorderRadius: '8px',
             menuItemPaddingX: '32px',
         }, DEFAULT_THEME) },
-        React.createElement("div", { className: cx((_c = {}, _c[jsStyles.dropdownWrapper()] = true, _c), className), ref: ref },
+        React.createElement("div", { className: cx((_c = {}, _c[jsStyles.wrapper()] = true, _c), className), ref: ref },
             React.createElement(DropdownMenu, __assign({ caption: label, 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, {
                         onClick: function () {
-                            var _a;
+                            var _a, _b, _c;
                             (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
-                            child.props.onClick();
+                            (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
                         },
                     });
                 }

package/src/SideMenuDropdown/SideMenuDropdown.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const jsStyles: {
-    dropdownLabel(): string;
-    dropdownLabelMinimized(): string;
-    dropdownWrapper(): string;
+    label(): string;
+    minimizedLabel(): string;
+    wrapper(): string;
 };

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -1,13 +1,13 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    dropdownLabel: function () {
+    label: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 200px;\n      transition: width 1s;\n    "], ["\n      width: 200px;\n      transition: width 1s;\n    "])));
     },
-    dropdownLabelMinimized: function () {
+    minimizedLabel: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
-    dropdownWrapper: function () {
+    wrapper: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
 };

package/src/SideMenuFooter/SideMenuFooter.js

@@ -9,7 +9,7 @@ var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
     if (context.isShown) {
-        return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
+        return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
             if (React.isValidElement(child)) {
                 return React.cloneElement(child, {
                     _generatedId: getItemId('footer', index++),

package/src/SideMenuFooter/SideMenuFooter.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    footer(): string;
+    root(): string;
 };

package/src/SideMenuFooter/SideMenuFooter.styles.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    footer: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 0;\n    "], ["\n      flex-grow: 0;\n    "])));
     },
 };

package/src/SideMenuHeader/SideMenuHeader.js

@@ -20,7 +20,7 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
         }
     };
     useEffect(function () {
-        if (!context.separatedMenuIsShown) {
+        if (!context.isSeparatedMenuShown) {
             window.addEventListener('scroll', checkFixed, true);
         }
         return function () {
@@ -28,14 +28,14 @@ var SideMenuHeaderInner = forwardRef(function (_a, ref) {
         };
     });
     useEffect(function () {
-        context.mobileSeparatedMenuIsScrolling !== undefined && setIsFixed(context.mobileSeparatedMenuIsScrolling);
-    }, [context.mobileSeparatedMenuIsScrolling]);
+        context.isMobileSeparatedMenuScrolling !== undefined && setIsFixed(context.isMobileSeparatedMenuScrolling);
+    }, [context.isMobileSeparatedMenuScrolling]);
     return (React.createElement("header", __assign({ className: cx((_b = {},
-            _b[jsStyles.headerWrapper()] = true,
-            _b[jsStyles.headerFixedWrapper()] = isFixed,
-            _b[jsStyles.headerMinimisedWrapper()] = context.isMinimised || context.isTransitioned,
-            _b[jsStyles.headerCollapsedWrapperForTabletsOrMobiles()] = !context.isShown,
-            _b[jsStyles.headerWithSeparatedMenuShown()] = context.isShown && context.isMobile && context.separatedMenuIsShown,
+            _b[jsStyles.root()] = true,
+            _b[jsStyles.fixedRoot()] = isFixed,
+            _b[jsStyles.minimizedRoot()] = context.isMinimized || context.isBeingTransitioned,
+            _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown,
+            _b[jsStyles.rootWithSeparatedMenuShown()] = context.isShown && context.isMobile && context.isSeparatedMenuShown,
             _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style }, rest),
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });

package/src/SideMenuHeader/SideMenuHeader.styles.d.ts

@@ -1,7 +1,7 @@
 export declare const jsStyles: {
-    headerWrapper(): string;
-    headerMinimisedWrapper(): string;
-    headerCollapsedWrapperForTabletsOrMobiles(): string;
-    headerWithSeparatedMenuShown(): string;
-    headerFixedWrapper(): string;
+    root(): string;
+    minimizedRoot(): string;
+    collapsedRootForTabletsOrMobiles(): string;
+    rootWithSeparatedMenuShown(): string;
+    fixedRoot(): string;
 };

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -2,19 +2,19 @@ import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var headerWrapperPaddingX = '8px';
 var styles = {
-    headerWrapper: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px ", " 16px;\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px ", " 16px;\n    "])), headerWrapperPaddingX, headerWrapperPaddingX);
     },
-    headerMinimisedWrapper: function () {
+    minimizedRoot: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "], ["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "])));
     },
-    headerCollapsedWrapperForTabletsOrMobiles: function () {
+    collapsedRootForTabletsOrMobiles: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
     },
-    headerWithSeparatedMenuShown: function () {
+    rootWithSeparatedMenuShown: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
     },
-    headerFixedWrapper: function () {
+    fixedRoot: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "], ["\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "])));
     },
 };

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.js

@@ -7,7 +7,7 @@ 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));
+    return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.rootInSeparatedSubMenu()] = context.isSeparatedMenu, _b), className), ref: ref }, rest), children));
 });
 SideMenuSubItemHeaderInner.displayName = 'SideMenuSubItemHeader';
 /**

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const jsStyles: {
-    subItemHeader(): string;
-    subItemHeaderInSeparatedSubMenu(): string;
+    root(): string;
+    rootInSeparatedSubMenu(): string;
 };

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.styles.js

@@ -1,10 +1,10 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    subItemHeader: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "], ["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "])));
     },
-    subItemHeaderInSeparatedSubMenu: function () {
+    rootInSeparatedSubMenu: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-left: 8px;\n    "], ["\n      padding-left: 8px;\n    "])));
     },
 };

package/src/internal/BackButton.js

@@ -13,7 +13,7 @@ var BackButton = forwardRef(function (_a, ref) {
     var context = useContext(SideMenuContext);
     return (React.createElement(SideMenuItem, { "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isDropdown: true, _isSubMenu: true, onClick: function () {
             var _a, _b, _c, _d;
-            (_a = context.setSeparatedMenuIsShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
+            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
             if (id) {
                 (_b = context.switchActiveMenuItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
             }

package/src/internal/Backdrop.js

@@ -6,7 +6,7 @@ import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 export var Backdrop = function () {
     var _a;
     return (React.createElement("div", { className: cx((_a = {},
-            _a[jsStyles.backdropForTabletsOrMobiles()] = true,
+            _a[jsStyles.rootForTabletsOrMobiles()] = true,
             _a)), style: {
             background: DEFAULT_THEME.sidePageBackingBg,
             opacity: DEFAULT_THEME.sidePageBackingBgOpacity,

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    backdropForTabletsOrMobiles(): string;
+    rootForTabletsOrMobiles(): string;
 };

package/src/internal/Backdrop.styles.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    backdropForTabletsOrMobiles: function () {
+    rootForTabletsOrMobiles: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
     },
 };

package/src/internal/Burger.js

@@ -5,6 +5,6 @@ import { UiMenuBarsThreeHIcon24Regular } from '@skbkontur/icons';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 export var Burger = function () {
     var context = useContext(SideMenuContext);
-    return (React.createElement("button", { className: jsStyles.burgerWrapperForTabletsOrMobiles(), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
+    return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
         React.createElement(UiMenuBarsThreeHIcon24Regular, null)));
 };

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

@@ -1,3 +1,3 @@
 export declare const jsStyles: {
-    burgerWrapperForTabletsOrMobiles(): string;
+    rootForTabletsOrMobiles(): string;
 };

package/src/internal/Burger.styles.js

@@ -2,8 +2,8 @@ import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
 var styles = {
-    burgerWrapperForTabletsOrMobiles: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      margin-right: 8px;\n    "], ["\n      ", ";\n      margin-right: 8px;\n    "])), resetButton());
+    rootForTabletsOrMobiles: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      margin-right: 8px;\n      cursor: pointer;\n    "], ["\n      ", ";\n      margin-right: 8px;\n      cursor: pointer;\n    "])), resetButton());
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/ClickableElement.js

@@ -18,17 +18,16 @@ var ClickableElement = forwardRef(function (_a, ref) {
     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, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton"]);
     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, context.separatedMenuIsShown, context.isMobile && context.isSeparatedMenu);
+    var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
+    var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
     var hasChildren = function (id, generatedId) {
         var _a, _b;
         var parentId = id ? 'id' : 'generatedParentId';
         var childId = id !== null && id !== void 0 ? id : generatedId;
         return (_b = (_a = context.flattedArrayOfAllElements) === null || _a === void 0 ? void 0 : _a.filter(function (el) { return el[parentId] === childId; })) === null || _b === void 0 ? void 0 : _b.length;
     };
-    var handleClick = function (e) {
-        var _a, _b, _c, _d, _e;
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    var switchActiveItem = function () {
+        var _a, _b, _c;
         if (id) {
             (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
         }
@@ -38,35 +37,72 @@ var ClickableElement = forwardRef(function (_a, ref) {
         else if (_generatedId) {
             (_c = context.switchActiveMenuItem) === null || _c === void 0 ? void 0 : _c.call(context, _generatedId);
         }
-        if (!hasChildren(id || rest.href, _generatedId) && !_isDropdown) {
-            (_d = context.toggleIsShown) === null || _d === void 0 ? void 0 : _d.call(context);
+    };
+    var toggleIsShown = function (lastElementInTheHierarchy) {
+        var _a;
+        if ((context.isMobile || context.isTablet) && lastElementInTheHierarchy) {
+            (_a = context.toggleIsShown) === null || _a === void 0 ? void 0 : _a.call(context);
+        }
+    };
+    var setIsMinimized = function (lastElementInTheHierarchy) {
+        var _a, _b;
+        var topLevelItemInSideMenuWithOverlay = context.separatedMenuWithoutOverlay && !_isSubMenu && children;
+        if (context.isNarrowDesktop && (lastElementInTheHierarchy || topLevelItemInSideMenuWithOverlay)) {
+            (_a = context.setIsMinimized) === null || _a === void 0 ? void 0 : _a.call(context, true);
+        }
+        if (!_isSubMenu) {
+            (_b = context.setIsMinimized) === null || _b === void 0 ? void 0 : _b.call(context, false);
+        }
+    };
+    var setMouseIsOutside = function (lastElementInTheHierarchy) {
+        var _a;
+        if (lastElementInTheHierarchy) {
+            (_a = context.setIsMouseOutside) === null || _a === void 0 ? void 0 : _a.call(context, true);
+        }
+    };
+    var setSeparatedMenuIsShown = function () {
+        var _a, _b;
+        if (!_isSubMenu && context.separatedMenuWithoutOverlay) {
+            (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
         }
         if (context.isSeparatedMenu && !_isSubMenu && children) {
-            (_e = context.setSeparatedMenuIsShown) === null || _e === void 0 ? void 0 : _e.call(context, true);
+            (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, true);
         }
     };
+    var handleClick = function (e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        var lastElementInTheHierarchy = !hasChildren(id || rest.href, _generatedId) && !_isDropdown;
+        switchActiveItem();
+        toggleIsShown(lastElementInTheHierarchy);
+        setIsMinimized(lastElementInTheHierarchy);
+        setMouseIsOutside(lastElementInTheHierarchy);
+        setSeparatedMenuIsShown();
+    };
     var handleFocus = function (e) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
         requestAnimationFrame(function () {
             if (keyListener.isTabPressed) {
-                setFocusedByTab(true);
+                setIsFocusedByTab(true);
             }
         });
     };
     var handleBlur = function (e) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-        setFocusedByTab(false);
+        setIsFocusedByTab(false);
     };
-    var isOpenedFirstLevelItemInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
+    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.clickableElement()] = true,
-                _b[jsStyles.clickableSubElement()] = context.isSeparatedMenu && _isSubMenu,
-                _b[jsStyles.focusedClickableElement()] = focusedByTab,
-                _b[jsStyles.activeClickableElement()] = isActive || isOpenedFirstLevelItemInSeparatedMenu,
-                _b[jsStyles.activeClickableSubElement()] = isActive && context.isSeparatedMenu && _isSubMenu,
+                _b[jsStyles.root()] = true,
+                _b[jsStyles.rootSubItem()] = context.isSeparatedMenu && _isSubMenu,
+                _b[jsStyles.focusedRoot()] = isFocusedByTab,
+                _b[jsStyles.activeRoot()] = isActive ||
+                    shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
+                    shouldHighlightTopLevelItemWhenMenuIsMinimized,
+                _b[jsStyles.activeRootSubItemInSeparatedSubMenu()] = 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, _isBackButton: _isBackButton })), ref: ref }, rest)),
-        React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimised: context.isMinimised }, children)));
+        React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: context.isMinimized }, children)));
 });
 ClickableElement.displayName = 'ClickableElement';
 var ClickableElementWithStaticFields = Object.assign(ClickableElement, {

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

@@ -1,7 +1,7 @@
 export declare const jsStyles: {
-    clickableElement(): string;
-    clickableSubElement(): string;
-    focusedClickableElement(): string;
-    activeClickableElement(): string;
-    activeClickableSubElement(): string;
+    root(): string;
+    rootSubItem(): string;
+    focusedRoot(): string;
+    activeRoot(): string;
+    activeRootSubItemInSeparatedSubMenu(): string;
 };

package/src/internal/ClickableElement.styles.js

@@ -1,19 +1,19 @@
 import { __makeTemplateObject } from "tslib";
 import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var styles = {
-    clickableElement: function () {
+    root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
     },
-    clickableSubElement: function () {
+    rootSubItem: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "], ["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "])));
     },
-    focusedClickableElement: function () {
+    focusedRoot: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "], ["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "])));
     },
-    activeClickableElement: function () {
+    activeRoot: function () {
         return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: #fff !important;\n    "], ["\n      background: #fff !important;\n    "])));
     },
-    activeClickableSubElement: function () {
+    activeRootSubItemInSeparatedSubMenu: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: #f2f2f2 !important;\n    "], ["\n      background: #f2f2f2 !important;\n    "])));
     },
 };

package/src/internal/InnerBody.js

@@ -52,7 +52,7 @@ var InnerBody = function (_a) {
             // @ts-expect-error: accessing private property
             if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuDivider') {
                 return React.cloneElement(child, {
-                    className: jsStyles.innerBodyDivider(),
+                    className: jsStyles.divider(),
                 });
             }
             if (