@skbkontur/side-menu 0.4.0 → 0.4.2

package/src/{SideMenuLogotype.d.ts → internal/SideMenuLogotype.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SideMenuHeaderProps } from './SideMenuHeader';
+import { SideMenuHeaderProps } from '../SideMenuHeader/SideMenuHeader';
 declare const SideMenuLogotypeWithStaticFields: React.ForwardRefExoticComponent<SideMenuHeaderProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };

package/src/{SideMenuLogotype.js → internal/SideMenuLogotype.js}

@@ -1,8 +1,8 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
 /**
  * Логотип
  *

package/src/internal/SubMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface SubMenuProps {
+    children?: React.ReactNode;
+    generatedId?: string;
+    isOpened?: boolean;
+    isSubMenu?: boolean;
+    isMinimised?: boolean;
+    isSeparatedMenu?: boolean;
+}
+declare const SubMenuWithStaticFields: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SubMenuWithStaticFields as SubMenu };

package/src/internal/SubMenu.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { SeparatedSubMenu } from './SeparatedSubMenu';
+import { InnerSubMenu } from './InnerSubMenu';
+/**
+ * Подменю
+ *
+ * @visibleName InnerSubMenu
+ */
+var SubMenu = forwardRef(function (_a, ref) {
+    var children = _a.children, isOpened = _a.isOpened, isSubMenu = _a.isSubMenu, isMinimised = _a.isMinimised, isSeparatedMenu = _a.isSeparatedMenu, generatedId = _a.generatedId;
+    if (!children || !isOpened || isSubMenu || isMinimised) {
+        return null;
+    }
+    if (isSeparatedMenu) {
+        return (React.createElement(SeparatedSubMenu, { generatedId: generatedId, ref: ref }, children));
+    }
+    return (React.createElement(InnerSubMenu, { generatedId: generatedId, ref: ref }, children));
+});
+SubMenu.displayName = 'SubMenu';
+var SubMenuWithStaticFields = Object.assign(SubMenu, { __KONTUR_REACT_UI__: 'SubMenu' });
+export { SubMenuWithStaticFields as SubMenu };

package/utils/scripts.d.ts

@@ -1,7 +1,9 @@
 import { ReactElement } from 'react';
-import { FlattedArrayElementType } from '../src/SideMenuBodyChildren';
+import { FlattedArrayElementType } from '../src/internal/InnerBody';
 export declare const getItemId: (prefix: 'body' | 'footer', id: string | number) => string;
+export declare const isClickableSubElement: (element: string) => boolean;
+export declare const isClickableElement: (element: string) => boolean;
 export declare const getAllParents: (id: string, flattedArrayOfAllElements: FlattedArrayElementType[]) => string[];
 export declare const getElementsChildren: (element: ReactElement, levelIndex: string) => FlattedArrayElementType[];
-export declare const isOpenedParents: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean;
+export declare const isOpenedParents: (id: string | undefined, generatedId: string | undefined, openedParents: string[] | undefined) => boolean | "" | undefined;
 export declare const isIdActive: (id: string | undefined, activeMenuItem: string | undefined | null) => boolean;

package/utils/scripts.js

@@ -3,10 +3,18 @@ import { isNonNullable } from '@skbkontur/react-ui/lib/utils';
 export var getItemId = function (prefix, id) {
     return prefix + "-" + id;
 };
+var SideMenuClickableSubElements = ['SideMenuSubItem', 'SideMenuSubLink'];
+export var isClickableSubElement = function (element) {
+    return SideMenuClickableSubElements.includes(element);
+};
+var SideMenuClickableElements = ['SideMenuItem', 'SideMenuLink'];
+export var isClickableElement = function (element) {
+    return SideMenuClickableElements.includes(element);
+};
 export var getAllParents = function (id, flattedArrayOfAllElements) {
     var parentsArray = [];
     var element = flattedArrayOfAllElements.find(function (element) { return element.id === id || element.generatedId === id; });
-    if (element && isNonNullable(element.parentId)) {
+    if (element && element.id && isNonNullable(element.parentId)) {
         parentsArray.push(element.parentId);
         parentsArray.push.apply(parentsArray, getAllParents(element.parentId, flattedArrayOfAllElements));
     }
@@ -21,16 +29,16 @@ export var getElementsChildren = function (element, levelIndex) {
     if (element.props.children) {
         var childLevelIndex_1 = 0;
         React.Children.map(element.props.children, function (child) {
-            var isActionableComponent = 
+            var isClickableComponent = 
             // @ts-expect-error: accessing private property
-            child.type.__KONTUR_REACT_UI__ === 'SideMenuItem' ||
+            isClickableElement(child.type.__KONTUR_REACT_UI__) ||
                 // @ts-expect-error: accessing private property
-                child.type.__KONTUR_REACT_UI__ === 'SideMenuSubItem';
-            if (isValidElement(child) && isActionableComponent) {
+                isClickableSubElement(child.type.__KONTUR_REACT_UI__);
+            if (isValidElement(child) && isClickableComponent) {
                 childrenArray.push({
-                    id: child.props.id,
+                    id: child.props.id || child.props.href,
                     generatedId: levelIndex + "-" + childLevelIndex_1,
-                    parentId: element.props.id,
+                    parentId: element.props.id || element.props.href,
                     generatedParentId: "" + levelIndex,
                 });
                 var subChildrenArray = getElementsChildren(child, levelIndex + "-" + childLevelIndex_1);
@@ -45,13 +53,9 @@ export var isOpenedParents = function (id, generatedId, openedParents) {
     if (!openedParents || (openedParents === null || openedParents === void 0 ? void 0 : openedParents.length) === 0) {
         return false;
     }
-    if (id) {
-        return openedParents.includes(id);
-    }
-    if (generatedId) {
-        return openedParents.includes(generatedId);
-    }
-    return false;
+    var idIsOpened = id && openedParents.includes(id);
+    var generatedIdIsOpened = generatedId && openedParents.includes(generatedId);
+    return idIsOpened || generatedIdIsOpened;
 };
 export var isIdActive = function (id, activeMenuItem) {
     return !!id && !!activeMenuItem && id === activeMenuItem;

package/src/SideMenu.d.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-import { SideMenuOrganisations } from './SideMenuOrganisations';
-import { SideMenuBody } from './SideMenuBody';
-import { SideMenuFooter } from './SideMenuFooter';
-import { SideMenuHeader } from './SideMenuHeader';
-import { SideMenuItem } from './SideMenuItem';
-import { SideMenuAvatar } from './SideMenuAvatar';
-import { SideMenuSubItem } from './SideMenuSubItem';
-import { SideMenuDivider } from './SideMenuDivider';
-import { SideMenuSubItemHeader } from './SideMenuSubItemHeader';
-import { SideMenuDropdown } from './SideMenuDropdown';
-export interface SideMenuProps extends CommonProps {
-    children?: React.ReactNode;
-    size?: 'small' | 'large';
-    isSeparatedMenu?: boolean;
-    disableSwipe?: boolean;
-    value?: string;
-    onValueChange?: (value: string) => void;
-}
-interface SubComponents {
-    Body: typeof SideMenuBody;
-    Footer: typeof SideMenuFooter;
-    Header: typeof SideMenuHeader;
-    Item: typeof SideMenuItem;
-    SubItem: typeof SideMenuSubItem;
-    SubItemHeader: typeof SideMenuSubItemHeader;
-    Avatar: typeof SideMenuAvatar;
-    Organisations: typeof SideMenuOrganisations;
-    Divider: typeof SideMenuDivider;
-    Dropdown: typeof SideMenuDropdown;
-    __KONTUR_REACT_UI__: string;
-}
-export declare const SideMenuDataTids: {
-    root: string;
-};
-declare const SideMenuWithStaticFields: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>> & SubComponents;
-export { SideMenuWithStaticFields as SideMenu };

package/src/SideMenuAvatar.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
-import { SideMenuDropdownProps } from './SideMenuDropdown';
-export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
-}
-declare const SideMenuAvatarWithStaticFields: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuAvatarWithStaticFields as SideMenuAvatar };

package/src/SideMenuBody.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export interface SideMenuBodyProps extends CommonProps {
-    children?: React.ReactNode;
-}
-declare const SideMenuBodyWithStaticFields: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<HTMLDivElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuBodyWithStaticFields as SideMenuBody };

package/src/SideMenuDivider.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-declare const SideMenuDividerWithStaticFields: React.ForwardRefExoticComponent<CommonProps & React.RefAttributes<HTMLHRElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuDividerWithStaticFields as SideMenuDivider };

package/src/SideMenuItem.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export interface SideMenuItemProps extends CommonProps {
-    onClick?: (event: React.MouseEvent) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    children?: React.ReactNode;
-    icon: React.ReactElement;
-    marker?: string;
-    caption?: string;
-    id?: string;
-    _generatedId?: string;
-    _isSubMenu?: boolean;
-    _isNestedSubMenu?: boolean;
-    _avatar?: React.ReactElement;
-}
-declare const SideMenuItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuItemWithStaticFields as SideMenuItem };

package/src/SideMenuItem.js

@@ -1,126 +0,0 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
-import { SeparatedSubMenu } from './SeparatedSubMenu';
-import { InnerSubMenu } from './InnerSubMenu';
-import { useNumberOfTextLinesInItem } from '../hooks/useNumberOfTextLinesInItem';
-import { isIdActive, isOpenedParents } from '../utils/scripts';
-/**
- * Элемент списка
- *
- * @visibleName SideMenu.Item
- */
-var SideMenuItem = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g;
-    var _h;
-    var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, 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, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "_avatar", "marker", "caption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId"]);
-    var context = useContext(SideMenuContext);
-    var textRef = useRef(null);
-    var _j = useState(false), isOpened = _j[0], setIsOpened = _j[1];
-    var _k = useState(false), isActive = _k[0], setIsActive = _k[1];
-    var _l = useState(false), focusedByTab = _l[0], setFocusedByTab = _l[1];
-    var _m = useState(false), isMultiline = _m[0], setIsMultiline = _m[1];
-    useEffect(function () {
-        useNumberOfTextLinesInItem(textRef, setIsMultiline);
-    }, [textRef.current]);
-    useEffect(function () {
-        var isOpenedParent = isOpenedParents(id, _generatedId, context.openedParents);
-        setIsOpened(!!children && (isOpenedParent || isActive));
-    }, [(_h = context.openedParents) === null || _h === void 0 ? void 0 : _h.toString(), isActive]);
-    useEffect(function () {
-        var idIsActive = isIdActive(id, context.activeMenuItem);
-        var generatedIdIsActive = isIdActive(_generatedId, context.activeMenuItem);
-        setIsActive(idIsActive || generatedIdIsActive);
-    }, [context.activeMenuItem]);
-    var handleClick = function (e) {
-        var _a, _b;
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        if (id) {
-            (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
-        }
-        else if (_generatedId) {
-            (_b = context.switchActiveMenuItem) === null || _b === void 0 ? void 0 : _b.call(context, _generatedId);
-        }
-    };
-    var handleFocus = function () {
-        requestAnimationFrame(function () {
-            if (keyListener.isTabPressed) {
-                setFocusedByTab(true);
-            }
-        });
-    };
-    var handleBlur = function () {
-        setFocusedByTab(false);
-    };
-    var renderSubMenu = function () {
-        if (children && isOpened && !_isSubMenu && !context.isMinimised) {
-            if (context.isSeparatedMenu) {
-                return React.createElement(SeparatedSubMenu, { generatedId: _generatedId }, children);
-            }
-            else {
-                return React.createElement(InnerSubMenu, { generatedId: _generatedId }, children);
-            }
-        }
-    };
-    var hasShortcutImage = icon || _avatar;
-    var isOpenedFirstLevelItemInSeparatedMenu = isOpened && !_isSubMenu && context.isSeparatedMenu;
-    return (React.createElement("div", null,
-        React.createElement("button", __assign({ className: cx((_b = {},
-                _b[jsStyles.item()] = true,
-                _b[jsStyles.subItem()] = context.isSeparatedMenu && _isSubMenu,
-                _b[jsStyles.focusedItem()] = focusedByTab,
-                _b[jsStyles.activeItem()] = isActive || isOpenedFirstLevelItemInSeparatedMenu,
-                _b[jsStyles.activeSubItem()] = isActive && context.isSeparatedMenu && _isSubMenu,
-                _b), className), onClick: handleClick, tabIndex: 0, onFocus: handleFocus, onBlur: handleBlur, ref: ref }, rest),
-            React.createElement("div", { className: cx((_c = {},
-                    _c[jsStyles.itemWrapper()] = true,
-                    _c[jsStyles.itemMultilineWrapper()] = isMultiline,
-                    _c[jsStyles.subItemWrapper()] = _isSubMenu,
-                    _c[jsStyles.itemLargeWrapper()] = context.size === 'large',
-                    _c[jsStyles.subItemLargeWrapper()] = context.size === 'large' && _isSubMenu,
-                    _c[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
-                    _c)) },
-                icon &&
-                    React.cloneElement(icon, {
-                        size: _isSubMenu ? 16 : 24,
-                        disableCompensation: true,
-                        className: cx((_d = {},
-                            _d[jsStyles.icon()] = true,
-                            _d[jsStyles.iconMultiline()] = isMultiline,
-                            _d[jsStyles.iconLarge()] = context.size === 'large',
-                            _d[jsStyles.iconMultilineLarge()] = context.size === 'large' && isMultiline,
-                            _d[jsStyles.iconSubItem()] = _isSubMenu,
-                            _d[jsStyles.iconSubItemSeparatedMenu()] = context.isSeparatedMenu && _isSubMenu,
-                            _d[jsStyles.iconSubItemLarge()] = _isSubMenu && context.size === 'large',
-                            _d)),
-                    }),
-                _avatar &&
-                    React.cloneElement(_avatar, {
-                        className: cx((_e = {},
-                            _e[jsStyles.avatarIcon()] = true,
-                            _e)),
-                    }),
-                !context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
-                    React.createElement("p", { className: cx((_f = {},
-                            _f[jsStyles.itemText()] = true,
-                            _f[jsStyles.itemTextTransitioned()] = context.isTransitioned,
-                            _f[jsStyles.subItemText()] = _isSubMenu,
-                            _f[jsStyles.subItemTextSeparatedMenuFirstLevel()] = context.isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
-                            _f[jsStyles.nestedSubItemTextSeparatedMenu()] = context.isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
-                            _f[jsStyles.itemTextWithoutItemIcon()] = !hasShortcutImage && !context.isSeparatedMenu,
-                            _f[jsStyles.subItemTextWithoutColumnIcons()] = _isSubMenu && context.isSeparatedMenu && !context.hasSubIcons,
-                            _f[jsStyles.itemTextLarge()] = context.size === 'large',
-                            _f[jsStyles.itemTextMultiline()] = isMultiline,
-                            _f)), ref: textRef }, caption),
-                    marker && (React.createElement("span", { className: cx((_g = {},
-                            _g[jsStyles.marker()] = true,
-                            _g[jsStyles.markerMultiline()] = isMultiline,
-                            _g)) }, marker)))))),
-        renderSubMenu()));
-});
-SideMenuItem.displayName = 'SideMenuItem';
-var SideMenuItemWithStaticFields = Object.assign(SideMenuItem, { __KONTUR_REACT_UI__: 'SideMenuItem' });
-export { SideMenuItemWithStaticFields as SideMenuItem };

package/src/SideMenuOrganisations.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { SideMenuDropdownProps } from './SideMenuDropdown';
-declare const SideMenuOrganisationsWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuOrganisationsWithStaticFields as SideMenuOrganisations };

package/src/SideMenuSubItem.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { SideMenuItemProps } from './SideMenuItem';
-export interface SideMenuSubItemProps extends Omit<SideMenuItemProps, 'icon'>, Partial<Pick<SideMenuItemProps, 'icon'>> {
-}
-declare const SideMenuSubItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuSubItemProps & React.RefAttributes<HTMLDivElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuSubItemWithStaticFields as SideMenuSubItem };

package/src/SideMenuSubItem.js

@@ -1,58 +0,0 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useMemo, useState } from 'react';
-import { ArrowCDownIcon16Regular, ArrowCRightIcon16Regular } from '@skbkontur/icons';
-import { SideMenuItem } from './SideMenuItem';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
-import { isIdActive, isOpenedParents } from '../utils/scripts';
-/**
- * Элемент списка второго уровня
- *
- * @visibleName SideMenu.SubItem
- */
-var SideMenuSubItem = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, _generatedId = _a._generatedId, id = _a.id, props = __rest(_a, ["children", "_generatedId", "id"]);
-    var _c = useState(false), isOpened = _c[0], setIsOpened = _c[1];
-    var context = useContext(SideMenuContext);
-    var handleClick = function () {
-        setIsOpened(true);
-    };
-    useEffect(function () {
-        var isOpenedParent = isOpenedParents(id, _generatedId, context.openedParents);
-        var idIsActive = isIdActive(id, context.activeMenuItem);
-        var generatedIdIsActive = isIdActive(_generatedId, context.activeMenuItem);
-        setIsOpened(isOpenedParent || isOpened || idIsActive || generatedIdIsActive);
-    }, [(_b = context.openedParents) === null || _b === void 0 ? void 0 : _b.toString()]);
-    var icon = useMemo(function () {
-        if (children) {
-            if (isOpened) {
-                return React.createElement(ArrowCDownIcon16Regular, null);
-            }
-            else {
-                return React.createElement(ArrowCRightIcon16Regular, null);
-            }
-        }
-    }, [isOpened, children]);
-    var levelIndex = 0;
-    return (React.createElement("div", { ref: ref },
-        React.createElement(SideMenuItem, __assign({ onClick: handleClick, 
-            /*@ts-expect-error: SideMenuItem should have icon */
-            icon: icon, _isSubMenu: true, id: id, _generatedId: _generatedId }, props)),
-        children && isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, 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__) === 'SideMenuSubItem') {
-                var oldIndex = levelIndex;
-                levelIndex++;
-                return React.cloneElement(child, {
-                    _generatedId: _generatedId + "-" + oldIndex,
-                    _isNestedSubMenu: true,
-                    ref: ref,
-                });
-            }
-            return child;
-        })))));
-});
-SideMenuSubItem.displayName = 'SideMenuSubItem';
-var SideMenuSubItemWithStaticFields = Object.assign(SideMenuSubItem, { __KONTUR_REACT_UI__: 'SideMenuSubItem' });
-export { SideMenuSubItemWithStaticFields as SideMenuSubItem };

package/src/SideMenuSubItemHeader.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export interface SideMenuSubItemHeaderProps extends CommonProps {
-    children?: React.ReactNode;
-}
-declare const SideMenuSubItemHeaderWithStaticFields: React.ForwardRefExoticComponent<SideMenuSubItemHeaderProps & React.RefAttributes<HTMLParagraphElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { SideMenuSubItemHeaderWithStaticFields as SideMenuSubItemHeader };