@skbkontur/side-menu 1.12.9 → 2.0.2

package/src/internal/SeparatedSubMenu.js

@@ -6,21 +6,21 @@ import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 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';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ScrollContainer } from '@skbkontur/react-ui';
 import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
+import { navigationAttributeForSeparatedMenu } from '../Navigation';
 /**
  * Отдельностоящее подменю
  *
  * @visibleName SeparatedSubMenu
  */
 var SeparatedSubMenu = forwardRef(function (_a, ref) {
-    var _b, _c;
-    var _d, _e;
-    var children = _a.children, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption, htmlId = _a.htmlId;
+    var _b, _c, _d;
+    var _e, _f, _g;
+    var children = _a.children, caption = _a.caption, htmlId = _a.htmlId, isOpened = _a.isOpened;
     var context = useContext(SideMenuContext);
     var scrollContainerRef = useRef(null);
     var theme = getSideMenuTheme(useContext(ThemeContext));
@@ -30,27 +30,13 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
         }
         setTimeout(function () {
             var _a, _b;
-            // @ts-expect-error: accessing private method
-            (_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'));
+            isOpened && ((_a = context.setHasScrollBar) === null || _a === void 0 ? void 0 : _a.call(context, !!((_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.hasScrollBar('y'))));
         }, 50);
-    }, [context.activeMenuItem]);
-    var isSubItemWithChildren = function (child) {
-        // @ts-expect-error: accessing private property
-        return isClickableSubElement(child.type.__KONTUR_REACT_UI__) && child.props.children;
-    };
-    var hasSubItems = function (children) {
-        return React.Children.toArray(children).some(function (child) {
-            if (React.isValidElement(child)) {
-                return isSubItemWithChildren(child);
-            }
-            return child;
-        });
-    };
-    var levelIndex = 0;
-    if (!((_d = context.sideMenuRef) === null || _d === void 0 ? void 0 : _d.current)) {
+    }, [(_e = context.navigation) === null || _e === void 0 ? void 0 : _e.activeMenuItem]);
+    if (!((_f = context.sideMenuRef) === null || _f === void 0 ? void 0 : _f.current)) {
         return null;
     }
-    return ReactDOM.createPortal(React.createElement("div", { className: cx((_b = {},
+    return ReactDOM.createPortal(React.createElement("div", __assign({ className: cx((_b = {},
             _b[jsStylesForSideMenu.container(theme)] = true,
             _b[jsStylesForSideMenu.containerForTouchScreens(theme)] = context.isTouchScreen,
             _b[jsStyles.root(theme)] = true,
@@ -59,31 +45,19 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
             _b[jsStyles.rootForTouchScreens(theme)] = context.isTouchScreen && context.isOpened && context.isCollapsable,
             _b[jsStyles.rootForNarrowDesktop(theme)] = context.isCollapsable,
             _b[jsStyles.rootWithShadow(theme)] = context.isTablet && !isIE11,
-            _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
+            _b[jsStylesForSideMenu.hidden()] = !isOpened || (!context.isOpened && (context.isTablet || context.isMobile)),
+            _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu }, (_c = {}, _c[navigationAttributeForSeparatedMenu] = htmlId, _c)),
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
                 var _a;
                 (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
             }, ref: scrollContainerRef, showScrollBar: context.isTouchScreen ? 'always' : context.showScrollBar, hideScrollBar: context.hideScrollBar },
-            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) {
-                    if (React.isValidElement(child)) {
-                        if (
-                        // @ts-expect-error: accessing private property
-                        isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {
-                            var oldIndex = levelIndex;
-                            levelIndex++;
-                            return React.cloneElement(child, {
-                                _generatedId: generatedId + "-" + oldIndex,
-                            });
-                        }
-                        return child;
-                    }
-                }))))), (_e = context.sideMenuRef) === null || _e === void 0 ? void 0 : _e.current);
+            React.createElement("ul", { className: cx((_d = {},
+                    _d[jsStylesForSideMenu.list()] = true,
+                    _d[jsStyles.contentWrapper(theme)] = true,
+                    _d[jsStyles.contentWrapperForMobiles()] = context.isMobile,
+                    _d)) },
+                context.isMobile && React.createElement(BackButton, { caption: caption, id: htmlId }),
+                children))), (_g = context.sideMenuRef) === null || _g === void 0 ? void 0 : _g.current);
 });
 SeparatedSubMenu.displayName = 'SeparatedSubMenu';
 var SeparatedSubMenuWithStaticFields = Object.assign(SeparatedSubMenu, { __KONTUR_REACT_UI__: 'SeparatedSubMenu' });

package/src/internal/SideMenuLogotype.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
 import { jsStyles, sideMenuLogotypeIconSize } from './SideMenuLogotype.styles';
@@ -37,8 +37,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
     var theme = getSideMenuTheme(useContext(ThemeContext));
     var productName = getProductName(productLogo);
     var refLogotype = useRef(null);
-    var _e = useState(28), size = _e[0], setSize = _e[1];
-    var _f = useState(getStaticIconPath(productName)), productIconUrl = _f[0], setProductIconUrl = _f[1];
+    var _e = __read(useState(28), 2), size = _e[0], setSize = _e[1];
+    var _f = __read(useState(getStaticIconPath(productName)), 2), productIconUrl = _f[0], setProductIconUrl = _f[1];
     useEffect(function () {
         var _a, _b;
         var logotypeWidth = (_b = (_a = refLogotype.current) === null || _a === void 0 ? void 0 : _a.logotypeRef) === null || _b === void 0 ? void 0 : _b.clientWidth;

package/src/internal/SubMenu.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
 import { CommonClickableElementProps } from './ClickableElement';
-interface SubMenuProps extends Pick<CommonClickableElementProps, 'caption' | 'id'> {
+interface SubMenuProps extends Pick<CommonClickableElementProps, 'caption'> {
     children?: React.ReactNode;
-    generatedId?: string;
     isOpened?: boolean;
     isSubMenu?: boolean;
-    isMinimized?: boolean;
     isSeparatedMenu?: boolean;
-    href?: string;
     htmlId: string;
 }
 declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement | HTMLUListElement>> & {

package/src/internal/SubMenu.js

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from 'react';
 import { SeparatedSubMenu } from './SeparatedSubMenu';
 import { InnerSubMenu } from './InnerSubMenu';
+import { NestedMenu } from './NestedMenu';
 import { SideMenuContext } from '../SideMenuContext';
 /**
  * Подменю
@@ -8,19 +9,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, htmlId = _a.htmlId;
+    var _b;
+    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isSeparatedMenu = _a.isSeparatedMenu, caption = _a.caption, htmlId = _a.htmlId;
     var context = useContext(SideMenuContext);
-    var shouldHideMenu = isMinimized && !context.isSeparatedMenu;
-    if (!children || !isOpened || isSubMenu || shouldHideMenu) {
-        return null;
+    if (isSubMenu) {
+        return (React.createElement(NestedMenu, { ref: ref, htmlId: htmlId, isOpened: isOpened }, children));
     }
-    if (isSeparatedMenu &&
-        (!(context.isMobile || context.isTablet) ||
-            (context.isOpened && (context.isMobile || context.isTablet)) ||
-            context.isBeingTransitioned)) {
-        return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, id: id, href: href, ref: ref, caption: caption, htmlId: htmlId }, children));
+    if (isSeparatedMenu) {
+        return (React.createElement(SeparatedSubMenu, { ref: ref, caption: caption, htmlId: htmlId, isOpened: isOpened && ((_b = context.navigation) === null || _b === void 0 ? void 0 : _b.isSeparatedMenuShown) }, children));
     }
-    return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref, htmlId: htmlId }, children));
+    return (React.createElement(InnerSubMenu, { ref: ref, htmlId: htmlId, isOpened: isOpened }, children));
 });
 SubMenu.displayName = 'SubMenu';
 var SubMenuWithStaticFields = Object.assign(SubMenu, { __KONTUR_REACT_UI__: 'SubMenu' });

package/hooks/useActiveState.d.ts

@@ -1 +0,0 @@
-export declare const useActiveState: (id?: string | undefined, href?: string | undefined, generatedId?: string | undefined, activeMenuItem?: string | null | undefined) => boolean;

package/hooks/useActiveState.js

@@ -1,12 +0,0 @@
-import { useEffect, useState } from 'react';
-import { isElementActive } from '../lib/utils/scripts';
-export var useActiveState = function (id, href, generatedId, activeMenuItem) {
-    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
-    useEffect(function () {
-        var isHrefActive = isElementActive(href, activeMenuItem);
-        var isIdActive = isElementActive(id, activeMenuItem);
-        var isGeneratedIdActive = isElementActive(generatedId, activeMenuItem);
-        setIsActive(isHrefActive || isIdActive || isGeneratedIdActive);
-    }, [activeMenuItem]);
-    return isActive;
-};

package/hooks/useOpenedState.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useOpenedState: (id?: string | undefined, generatedId?: string | undefined, openedParents?: string[] | undefined, isActive?: boolean, children?: React.ReactNode, separatedMenuIsShown?: boolean | undefined, isMobileAndSeparatedMenu?: boolean | undefined) => boolean;

package/hooks/useOpenedState.js

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react';
-import { isParentOpened } from '../lib/utils/scripts';
-export var useOpenedState = function (id, generatedId, openedParents, isActive, children, separatedMenuIsShown, isMobileAndSeparatedMenu) {
-    if (isActive === void 0) { isActive = false; }
-    var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
-    useEffect(function () {
-        var isOpenedParent = isParentOpened(id, generatedId, openedParents);
-        var isOpenedOrActiveClickableElement = !!children && (isOpenedParent || isActive);
-        var isOpenedInOpenedSeparatedMenu = isOpenedOrActiveClickableElement && !!separatedMenuIsShown;
-        var isOpened = isMobileAndSeparatedMenu ? isOpenedInOpenedSeparatedMenu : isOpenedOrActiveClickableElement;
-        setIsOpened(isOpened);
-    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), isActive, separatedMenuIsShown]);
-    return isOpened;
-};

package/hooks/useOpenedSubElementState.d.ts

@@ -1 +0,0 @@
-export declare const useOpenedSubElementState: (id?: string | undefined, generatedId?: string | undefined, openedParents?: string[] | undefined, activeMenuItem?: string | null | undefined) => boolean;

package/hooks/useOpenedSubElementState.js

@@ -1,12 +0,0 @@
-import { useEffect, useState } from 'react';
-import { isElementActive, isParentOpened } from '../lib/utils/scripts';
-export var useOpenedSubElementState = function (id, generatedId, openedParents, activeMenuItem) {
-    var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
-    useEffect(function () {
-        var isOpenedParent = isParentOpened(id, generatedId, openedParents);
-        var isIdActive = isElementActive(id, activeMenuItem);
-        var isGeneratedIdActive = isElementActive(generatedId, activeMenuItem);
-        setIsOpened(isOpenedParent || isOpened || isIdActive || isGeneratedIdActive);
-    }, [openedParents === null || openedParents === void 0 ? void 0 : openedParents.toString(), activeMenuItem]);
-    return isOpened;
-};

package/src/internal/InnerBody.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export interface FlattedArrayElementType {
-    id: string;
-    generatedId: string;
-    parentId: string | null;
-    generatedParentId: string | null;
-    childrenId: string[];
-    generatedChildrenId: string[];
-}
-declare const InnerBodyWithStaticFields: React.FC<CommonProps> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { InnerBodyWithStaticFields as InnerBody };

package/src/internal/InnerBody.js

@@ -1,108 +0,0 @@
-import { __assign, __spreadArrays } from "tslib";
-import React, { isValidElement, useContext, useEffect, useRef, useState } from 'react';
-import { SideMenuContext } from '../SideMenuContext';
-import { getAllParents, getChildrenIdArray, getElementsChildren, getItemId, isClickableElement, } from '../../lib/utils/scripts';
-/**
- * Внутренняя часть SideMenuBody
- *
- * @visibleName InnerBody
- */
-var InnerBody = function (_a) {
-    var children = _a.children;
-    var context = useContext(SideMenuContext);
-    var _b = useState([]), parents = _b[0], setParents = _b[1];
-    var flattedArrayOfAllElements = useRef([]);
-    var getFlattedArrayOfAllElements = function () {
-        var levelIndex = 0;
-        React.Children.map(children, function (child) {
-            if (isValidElement(child) &&
-                // @ts-expect-error: accessing private property
-                isClickableElement(child.type.__KONTUR_REACT_UI__)) {
-                var generatedId = getItemId('body', levelIndex++);
-                var childrenArray = getElementsChildren(child, generatedId);
-                var childrenId = getChildrenIdArray(childrenArray, child.props.id);
-                var generatedChildrenId = getChildrenIdArray(childrenArray, generatedId, true);
-                flattedArrayOfAllElements.current.push({
-                    id: child.props.id || child.props.href,
-                    generatedId: generatedId,
-                    parentId: null,
-                    generatedParentId: null,
-                    childrenId: childrenId,
-                    generatedChildrenId: generatedChildrenId,
-                });
-                childrenArray.forEach(function (el) { return flattedArrayOfAllElements.current.push(el); });
-            }
-        });
-    };
-    var getActiveItems = function (activeItem) {
-        if (activeItem) {
-            return getAllParents(activeItem, flattedArrayOfAllElements.current);
-        }
-        return [];
-    };
-    var getOpenedParents = function () {
-        var activeMenuItems = getActiveItems(context.activeMenuItem);
-        var clickedButtons = getActiveItems(context.clickedButton);
-        setParents(__spreadArrays(activeMenuItems, clickedButtons));
-    };
-    var activeMenuItemHasParent = function () {
-        if (!context.activeMenuItem)
-            return;
-        var parentOfActiveMenuItem = getAllParents(context.activeMenuItem, flattedArrayOfAllElements.current);
-        return parentOfActiveMenuItem.length > 0;
-    };
-    var activeMenuItemHasChildren = function () {
-        if (!context.activeMenuItem)
-            return;
-        var childrenOfActiveMenuItem = getChildrenIdArray(flattedArrayOfAllElements.current, context.activeMenuItem);
-        var childrenOfActiveMenuItemGenerated = getChildrenIdArray(flattedArrayOfAllElements.current, context.activeMenuItem, true);
-        return childrenOfActiveMenuItem.length > 0 || childrenOfActiveMenuItemGenerated.length > 0;
-    };
-    var setSeparatedMenuIsShown = function () {
-        var _a, _b;
-        if (!context.isSeparatedMenu)
-            return;
-        var activeItemHasParent = activeMenuItemHasParent();
-        var isActive = activeItemHasParent || activeMenuItemHasChildren() || false;
-        var isMinimizedInWideDesktop = !context.isOpened && context.isDesktop && !context.isCollapsable;
-        if (context.isMobile && !activeItemHasParent && context.isSeparatedMenuShown) {
-            return (_a = context.setIsSeparatedMenuShown) === null || _a === void 0 ? void 0 : _a.call(context, false);
-        }
-        (_b = context.setIsSeparatedMenuShown) === null || _b === void 0 ? void 0 : _b.call(context, isActive && !isMinimizedInWideDesktop);
-    };
-    useEffect(function () {
-        getFlattedArrayOfAllElements();
-    }, [children]);
-    useEffect(function () {
-        getOpenedParents();
-        setSeparatedMenuIsShown();
-    }, [context.activeMenuItem, context.isOpened, context.clickedButton]);
-    useEffect(function () {
-        var _a;
-        if (context.activeMenuItem && context.clickedButton) {
-            if (!getAllParents(context.activeMenuItem, flattedArrayOfAllElements.current).includes(context.clickedButton)) {
-                (_a = context.setClickedButton) === null || _a === void 0 ? void 0 : _a.call(context, null);
-            }
-        }
-    }, [context.activeMenuItem]);
-    var levelIndex = 0;
-    return (React.createElement(SideMenuContext.Provider, { value: __assign({ openedParents: parents, flattedArrayOfAllElements: flattedArrayOfAllElements.current }, context) }, React.Children.map(children, function (child) {
-        if (React.isValidElement(child)) {
-            if (
-            // @ts-expect-error: accessing private property
-            isClickableElement(child.type.__KONTUR_REACT_UI__)) {
-                var oldIndex = levelIndex;
-                levelIndex++;
-                return React.cloneElement(child, {
-                    _generatedId: getItemId('body', oldIndex),
-                });
-            }
-            return child;
-        }
-    })));
-};
-InnerBody.displayName = 'InnerBody';
-var InnerBodyWithStaticFields = Object.assign(InnerBody, {
-    __KONTUR_REACT_UI__: 'InnerBody',
-});
-export { InnerBodyWithStaticFields as InnerBody };