@skbkontur/side-menu 3.0.6 → 3.1.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.
 
+# [3.1.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@3.0.6...@skbkontur/side-menu@3.1.0) (2024-12-09)
+
+
+### Features
+
+* **SideMenu:** collapsible menu items ([13f7caa](https://git.skbkontur.ru/ui/ui-parking/commits/13f7caa1979361150bceb372fbdbe427f3da273d))
+
+
+
+
+
 ## [3.0.6](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@3.0.5...@skbkontur/side-menu@3.0.6) (2024-11-25)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/hooks/useMemoIcon.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
-export declare const useMemoIcon: (children: React.ReactNode, isOpened: boolean) => JSX.Element | undefined;
+interface IconParams {
+    isOpened: boolean;
+    onClick: () => void;
+}
+export declare const useMemoIcon: (children: React.ReactNode, { isOpened, onClick }: IconParams) => JSX.Element | undefined;
 export declare const useMemoBorderIcon: (isCollapsed?: boolean | undefined) => JSX.Element;
+export {};

package/hooks/useMemoIcon.js

@@ -2,11 +2,12 @@ import React, { useMemo } from 'react';
 import { ArrowCDownIcon16Regular } from '@skbkontur/icons/icons/ArrowCDownIcon/ArrowCDownIcon16Regular';
 import { ArrowCRightIcon16Regular } from '@skbkontur/icons/icons/ArrowCRightIcon/ArrowCRightIcon16Regular';
 import { ArrowCLeftIcon16Regular } from '@skbkontur/icons/icons/ArrowCLeftIcon/ArrowCLeftIcon16Regular';
-export var useMemoIcon = function (children, isOpened) {
+export var useMemoIcon = function (children, _a) {
+    var isOpened = _a.isOpened, onClick = _a.onClick;
     return useMemo(function () {
         if (children) {
             if (isOpened) {
-                return React.createElement(ArrowCDownIcon16Regular, null);
+                return React.createElement(ArrowCDownIcon16Regular, { onClick: onClick });
             }
             else {
                 return React.createElement(ArrowCRightIcon16Regular, null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
     "@skbkontur/react-ui": "5.0.0"
   },
   "dependencies": {
-    "@skbkontur/icons": "^1.14.1",
+    "@skbkontur/icons": "^1.14.2",
     "@skbkontur/react-ui-addons": "^5.1.0",
     "tslib": "^1"
   }

package/src/internal/ClickableElement.js

@@ -73,7 +73,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
         }
     };
     var handleClick = function (e) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (disabled) {
             return;
         }
@@ -81,11 +81,17 @@ var ClickableElement = forwardRef(function (_a, ref) {
         if (_isBackButton || _isDropdown) {
             return;
         }
-        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(currentId, isButton);
-        var lastElementInTheHierarchy = !_isDropdown && !_isBackButton && !((_c = (_b = context.navigation) === null || _b === void 0 ? void 0 : _b.activeMenuItemTreeNode) === null || _c === void 0 ? void 0 : _c.hasChildren);
-        toggleIsShown(lastElementInTheHierarchy);
-        setIsMinimized(lastElementInTheHierarchy);
-        setMouseIsOutside(lastElementInTheHierarchy);
+        var item = (_b = (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.navigationTree) === null || _b === void 0 ? void 0 : _b.find(currentId);
+        if (isOpened && !((_c = item === null || item === void 0 ? void 0 : item.value) === null || _c === void 0 ? void 0 : _c.isSubMenu)) {
+            (_d = item === null || item === void 0 ? void 0 : item.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
+        }
+        else {
+            (_e = context.navigation) === null || _e === void 0 ? void 0 : _e.switchActiveMenuItem(currentId, isButton);
+            var lastElementInTheHierarchy = !_isDropdown && !_isBackButton && !((_g = (_f = context.navigation) === null || _f === void 0 ? void 0 : _f.activeMenuItemTreeNode) === null || _g === void 0 ? void 0 : _g.hasChildren);
+            toggleIsShown(lastElementInTheHierarchy);
+            setIsMinimized(lastElementInTheHierarchy);
+            setMouseIsOutside(lastElementInTheHierarchy);
+        }
     };
     var handleFocus = function (e) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -103,6 +109,14 @@ var ClickableElement = forwardRef(function (_a, ref) {
     var isHighlighted = isActive ||
         (isFirstLevelParentOfActiveMenuItem && !context.isOpened && context.isCollapsable) ||
         (isFirstLevelParentOfActiveMenuItem && context.isSeparatedMenu);
+    var handleCollapse = function (e) {
+        var _a, _b, _c, _d;
+        if (disabled) {
+            return;
+        }
+        e.stopPropagation();
+        (_d = (_c = (_b = (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.navigationTree) === null || _b === void 0 ? void 0 : _b.find(currentId)) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.setIsOpened(false);
+    };
     var newProps = __assign({ className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.rootButton(theme)] = isButton,
@@ -113,7 +127,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
             _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
             _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, 
             // @ts-expect-error: SideMenuItem should have icon
-            icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, isOpened) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
+            icon: _isSubMenu && !_isBackButton ? useMemoIcon(children, { isOpened: isOpened, onClick: handleCollapse }) : icon, isNestedSubMenu: isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, disabled: disabled })), ref: ref, href: href }, rest);
     return (React.createElement(Component, __assign({ "data-tid": SideMenuDataTids.clickableElement }, (_c = {}, _c[navigationAttribute] = currentId, _c)),
         React.cloneElement(React.createElement(Tag, { state: isActive ? 'active' : undefined }), children
             ? __assign(__assign({}, newProps), { 'aria-expanded': children ? isOpened : undefined, 'aria-controls': children ? currentId : undefined }) : __assign({}, newProps)),