@skbkontur/side-menu 3.1.8 → 3.2.0

package/src/internal/BackButton.js

@@ -1,25 +1,25 @@
-import { __assign } from "tslib";
-import React, { forwardRef, useContext } from 'react';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { ArrowALeftIcon20Regular } from '@skbkontur/icons/icons/ArrowALeftIcon/ArrowALeftIcon20Regular';
-import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
-import { SideMenuContext } from '../SideMenuContext';
-import { navigationAttributeBackButton } from '../Navigation';
-/**
- * Кнопка возврата в меню первого уровня
- *
- * @visibleName BackButton
- */
-var BackButton = forwardRef(function (_a, ref) {
-    var _b;
-    var caption = _a.caption, id = _a.id, href = _a.href;
-    var context = useContext(SideMenuContext);
-    var handleClick = function () {
-        var _a;
-        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(id);
-    };
-    return (React.createElement(SideMenuItem, __assign({ "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isSubMenu: true, onClick: handleClick, _isBackButton: true, ref: ref }, (_b = {}, _b[navigationAttributeBackButton] = '', _b))));
-});
-BackButton.displayName = 'BackButton';
-var BackButtonWithStaticFields = Object.assign(BackButton, { __KONTUR_REACT_UI__: 'BackButton' });
-export { BackButtonWithStaticFields as BackButton };
+import { __assign } from "tslib";
+import React, { forwardRef, useContext } from 'react';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { ArrowALeftIcon20Regular } from '@skbkontur/icons/icons/ArrowALeftIcon/ArrowALeftIcon20Regular';
+import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
+import { SideMenuContext } from '../SideMenuContext';
+import { navigationAttributeBackButton } from '../Navigation';
+/**
+ * Кнопка возврата в меню первого уровня
+ *
+ * @visibleName BackButton
+ */
+var BackButton = forwardRef(function (_a, ref) {
+    var _b;
+    var caption = _a.caption, id = _a.id, href = _a.href;
+    var context = useContext(SideMenuContext);
+    var handleClick = function () {
+        var _a;
+        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.switchActiveMenuItem(id);
+    };
+    return (React.createElement(SideMenuItem, __assign({ "data-tid": SideMenuDataTids.backButton, icon: React.createElement(ArrowALeftIcon20Regular, null), caption: caption, _isSubMenu: true, onClick: handleClick, _isBackButton: true, ref: ref }, (_b = {}, _b[navigationAttributeBackButton] = '', _b))));
+});
+BackButton.displayName = 'BackButton';
+var BackButtonWithStaticFields = Object.assign(BackButton, { __KONTUR_REACT_UI__: 'BackButton' });
+export { BackButtonWithStaticFields as BackButton };

package/src/internal/Backdrop.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
-export declare const Backdrop: (props: {
-    style: CSSProperties;
-}) => JSX.Element;
+import { CSSProperties } from 'react';
+export declare const Backdrop: (props: {
+    style: CSSProperties;
+}) => JSX.Element;

package/src/internal/Backdrop.js

@@ -1,13 +1,13 @@
-import { __assign } from "tslib";
-import React from 'react';
-import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
-import { jsStyles } from './Backdrop.styles';
-import { LIGHT_THEME } from '@skbkontur/react-ui';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-export var Backdrop = function (props) {
-    var _a;
-    return (React.createElement("div", { className: cx((_a = {},
-            _a[jsStyles.rootForTabletsOrMobiles()] = true,
-            _a)), style: __assign({ background: LIGHT_THEME.sidePageBackingBg }, props.style) },
-        React.createElement(HideBodyVerticalScroll, null)));
-};
+import { __assign } from "tslib";
+import React from 'react';
+import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
+import { jsStyles } from './Backdrop.styles';
+import { LIGHT_THEME } from '@skbkontur/react-ui';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+export var Backdrop = function (props) {
+    var _a;
+    return (React.createElement("div", { className: cx((_a = {},
+            _a[jsStyles.rootForTabletsOrMobiles()] = true,
+            _a)), style: __assign({ background: LIGHT_THEME.sidePageBackingBg }, props.style) },
+        React.createElement(HideBodyVerticalScroll, null)));
+};

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

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

package/src/internal/Backdrop.styles.js

@@ -1,10 +1,10 @@
-import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { burgerTransitionDuration } from '../SideMenu/SideMenu';
-var styles = {
-    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      transition: opacity ", "ms ease-out;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "])), burgerTransitionDuration);
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1;
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { burgerTransitionDuration } from '../SideMenu/SideMenu';
+var styles = {
+    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      transition: opacity ", "ms ease-out;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "])), burgerTransitionDuration);
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1;

package/src/internal/Burger.d.ts

@@ -1 +1 @@
-export declare const Burger: () => JSX.Element;
+export declare const Burger: () => JSX.Element;

package/src/internal/Burger.js

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
-import { jsStyles } from './Burger.styles';
-import { SideMenuContext } from '../SideMenuContext';
-import { UiMenuBars3HIcon24Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { ThemeContext } from '@skbkontur/react-ui';
-export var Burger = function () {
-    var context = useContext(SideMenuContext);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids.burger },
-        React.createElement(UiMenuBars3HIcon24Regular, null)));
-};
+import React, { useContext } from 'react';
+import { jsStyles } from './Burger.styles';
+import { SideMenuContext } from '../SideMenuContext';
+import { UiMenuBars3HIcon24Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon24Regular';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
+export var Burger = function () {
+    var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsOpened, "data-tid": SideMenuDataTids.burger },
+        React.createElement(UiMenuBars3HIcon24Regular, null)));
+};

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

@@ -1,4 +1,4 @@
-import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
-export declare const jsStyles: {
-    rootForTabletsOrMobiles(t: SideMenuTheme): string;
-};
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
+export declare const jsStyles: {
+    rootForTabletsOrMobiles(t: SideMenuTheme): string;
+};

package/src/internal/Burger.styles.js

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

package/src/internal/ClickableElement.d.ts

@@ -1,32 +1,32 @@
-import React, { ReactNode } from 'react';
-import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export interface CommonClickableElementProps extends CommonProps {
-    children?: React.ReactNode;
-    icon: React.ReactElement;
-    marker?: string | true;
-    caption?: ReactNode;
-    subCaption?: ReactNode;
-    id?: string;
-    isButton?: boolean;
-    disabled?: boolean;
-    /** @ignore */
-    _isSubMenu?: boolean;
-    /** @ignore */
-    _isDropdown?: boolean;
-    /** @ignore */
-    _isAvatar?: boolean;
-    /** @ignore */
-    _isBackButton?: boolean;
-}
-export interface ClickableElementProps extends CommonClickableElementProps {
-    element: 'a' | 'button' | React.ComponentType<any>;
-    href?: string;
-    onClick?: React.EventHandler<React.MouseEvent>;
-    onKeyDown?: React.EventHandler<React.KeyboardEvent>;
-    onFocus?: React.EventHandler<React.FocusEvent>;
-    onBlur?: React.EventHandler<React.FocusEvent>;
-}
-declare const ClickableElementWithStaticFields: React.ForwardRefExoticComponent<ClickableElementProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
-    __KONTUR_REACT_UI__: string;
-};
-export { ClickableElementWithStaticFields as ClickableElement };
+import React, { ReactNode } from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface CommonClickableElementProps extends CommonProps {
+    children?: React.ReactNode;
+    icon: React.ReactElement;
+    marker?: string | true;
+    caption?: ReactNode;
+    subCaption?: ReactNode;
+    id?: string;
+    isButton?: boolean;
+    disabled?: boolean;
+    /** @ignore */
+    _isSubMenu?: boolean;
+    /** @ignore */
+    _isDropdown?: boolean;
+    /** @ignore */
+    _isAvatar?: boolean;
+    /** @ignore */
+    _isBackButton?: boolean;
+}
+export interface ClickableElementProps extends CommonClickableElementProps {
+    element: 'a' | 'button' | React.ComponentType<any>;
+    href?: string;
+    onClick?: React.EventHandler<React.MouseEvent>;
+    onKeyDown?: React.EventHandler<React.KeyboardEvent>;
+    onFocus?: React.EventHandler<React.FocusEvent>;
+    onBlur?: React.EventHandler<React.FocusEvent>;
+}
+declare const ClickableElementWithStaticFields: React.ForwardRefExoticComponent<ClickableElementProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { ClickableElementWithStaticFields as ClickableElement };

package/src/internal/ClickableElement.js

@@ -1,141 +1,141 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useState } from 'react';
-import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
-import { SideMenuContext } from '../SideMenuContext';
-import { ItemContent } from './ItemContent/ItemContent';
-import { SubMenu } from './SubMenu';
-import { jsStyles } from './ClickableElement.styles';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { ThemeContext } from '@skbkontur/react-ui';
-import { useMemoIcon } from '../../hooks/useMemoIcon';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { navigationAttribute } from '../Navigation';
-import { generateId } from '../../lib/utils/scripts';
-/**
- * Элемент списка (пункт меню либо ссылка)
- *
- * @visibleName ClickableElement
- */
-var ClickableElement = forwardRef(function (_a, ref) {
-    var _b, _c;
-    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
-    var context = useContext(SideMenuContext);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var _d = __read(useState(false), 2), isActive = _d[0], setIsActive = _d[1];
-    var _e = __read(useState(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
-    var _f = __read(useState(false), 2), isOpened = _f[0], setIsOpened = _f[1];
-    var _g = __read(useState(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
-    var _h = __read(useState(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
-    var _j = __read(useState(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
-    var _k = __read(useState(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
-    useEffect(function () {
-        var _a;
-        if (!currentId) {
-            var generatedId = generateId();
-            setCurrentId(generatedId);
-        }
-        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
-            setIsActive: setIsActive,
-            setIsOpened: setIsOpened,
-            isSubMenu: _isSubMenu,
-            setIsNestedSubMenu: setIsNestedSubMenu,
-            setHasSubIcons: setHasSubIcons,
-            setIsFirstLevelParentOfActiveMenuItem: setIsFirstLevelParentOfActiveMenuItem,
-        });
-        return function () {
-            var _a;
-            (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.updateNavigationTree();
-        };
-    });
-    var toggleIsShown = function (lastElementInTheHierarchy) {
-        var _a;
-        if ((context.isMobile || context.isTablet) && lastElementInTheHierarchy) {
-            (_a = context.toggleIsOpened) === null || _a === void 0 ? void 0 : _a.call(context);
-        }
-    };
-    var setIsMinimized = function (lastElementInTheHierarchy) {
-        var _a, _b;
-        if (context.isMobile || context.isTablet || (context.isDesktop && !context.isCollapsable))
-            return;
-        var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
-        if (context.isCollapsable && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
-            (_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 handleClick = function (e) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (disabled) {
-            return;
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        if (_isBackButton || _isDropdown) {
-            return;
-        }
-        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);
-        requestAnimationFrame(function () {
-            if (keyListener.isTabPressed) {
-                setIsFocusedByTab(true);
-            }
-        });
-    };
-    var handleBlur = function (e) {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-        setIsFocusedByTab(false);
-    };
-    var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
-    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,
-            _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
-            _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
-            _b[jsStyles.disabledRoot(theme)] = disabled,
-            _b[jsStyles.activeRoot(theme)] = isHighlighted,
-            _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: 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)),
-        React.createElement(SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
-            React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubIcons }, context) }, children))));
-});
-ClickableElement.displayName = 'ClickableElement';
-var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
-    __KONTUR_REACT_UI__: 'ClickableElement',
-});
-export { ClickableElementWithStaticFields as ClickableElement };
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
+import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
+import { SideMenuContext } from '../SideMenuContext';
+import { ItemContent } from './ItemContent/ItemContent';
+import { SubMenu } from './SubMenu';
+import { jsStyles } from './ClickableElement.styles';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
+import { useMemoIcon } from '../../hooks/useMemoIcon';
+import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { navigationAttribute } from '../Navigation';
+import { generateId } from '../../lib/utils/scripts';
+/**
+ * Элемент списка (пункт меню либо ссылка)
+ *
+ * @visibleName ClickableElement
+ */
+var ClickableElement = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, href = _a.href, disabled = _a.disabled, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton", "href", "disabled"]);
+    var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    var _d = __read(useState(false), 2), isActive = _d[0], setIsActive = _d[1];
+    var _e = __read(useState(false), 2), isFirstLevelParentOfActiveMenuItem = _e[0], setIsFirstLevelParentOfActiveMenuItem = _e[1];
+    var _f = __read(useState(false), 2), isOpened = _f[0], setIsOpened = _f[1];
+    var _g = __read(useState(false), 2), isNestedSubMenu = _g[0], setIsNestedSubMenu = _g[1];
+    var _h = __read(useState(false), 2), hasSubIcons = _h[0], setHasSubIcons = _h[1];
+    var _j = __read(useState(false), 2), isFocusedByTab = _j[0], setIsFocusedByTab = _j[1];
+    var _k = __read(useState(id || href || ''), 2), currentId = _k[0], setCurrentId = _k[1];
+    useEffect(function () {
+        var _a;
+        if (!currentId) {
+            var generatedId = generateId();
+            setCurrentId(generatedId);
+        }
+        (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.addValue(currentId, {
+            setIsActive: setIsActive,
+            setIsOpened: setIsOpened,
+            isSubMenu: _isSubMenu,
+            setIsNestedSubMenu: setIsNestedSubMenu,
+            setHasSubIcons: setHasSubIcons,
+            setIsFirstLevelParentOfActiveMenuItem: setIsFirstLevelParentOfActiveMenuItem,
+        });
+        return function () {
+            var _a;
+            (_a = context.navigation) === null || _a === void 0 ? void 0 : _a.updateNavigationTree();
+        };
+    });
+    var toggleIsShown = function (lastElementInTheHierarchy) {
+        var _a;
+        if ((context.isMobile || context.isTablet) && lastElementInTheHierarchy) {
+            (_a = context.toggleIsOpened) === null || _a === void 0 ? void 0 : _a.call(context);
+        }
+    };
+    var setIsMinimized = function (lastElementInTheHierarchy) {
+        var _a, _b;
+        if (context.isMobile || context.isTablet || (context.isDesktop && !context.isCollapsable))
+            return;
+        var topLevelItemInSeparatedSideMenu = context.isSeparatedMenu && !_isSubMenu && children;
+        if (context.isCollapsable && (lastElementInTheHierarchy || topLevelItemInSeparatedSideMenu)) {
+            (_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 handleClick = function (e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (disabled) {
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        if (_isBackButton || _isDropdown) {
+            return;
+        }
+        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);
+        requestAnimationFrame(function () {
+            if (keyListener.isTabPressed) {
+                setIsFocusedByTab(true);
+            }
+        });
+    };
+    var handleBlur = function (e) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        setIsFocusedByTab(false);
+    };
+    var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
+    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,
+            _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
+            _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
+            _b[jsStyles.disabledRoot(theme)] = disabled,
+            _b[jsStyles.activeRoot(theme)] = isHighlighted,
+            _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: 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)),
+        React.createElement(SubMenu, { caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, htmlId: currentId, isOpened: isOpened },
+            React.createElement(SideMenuContext.Provider, { value: __assign({ hasSubIcons: hasSubIcons }, context) }, children))));
+});
+ClickableElement.displayName = 'ClickableElement';
+var ClickableElementWithStaticFields = Object.assign(ClickableElement, {
+    __KONTUR_REACT_UI__: 'ClickableElement',
+});
+export { ClickableElementWithStaticFields as ClickableElement };

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

@@ -1,10 +1,10 @@
-import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
-export declare const jsStyles: {
-    root(t: SideMenuTheme): string;
-    rootButton(t: SideMenuTheme): string;
-    rootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
-    focusedRoot(t: SideMenuTheme): string;
-    disabledRoot(t: SideMenuTheme): string;
-    activeRoot(t: SideMenuTheme): string;
-    activeRootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
-};
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
+export declare const jsStyles: {
+    root(t: SideMenuTheme): string;
+    rootButton(t: SideMenuTheme): string;
+    rootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
+    focusedRoot(t: SideMenuTheme): string;
+    disabledRoot(t: SideMenuTheme): string;
+    activeRoot(t: SideMenuTheme): string;
+    activeRootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
+};

package/src/internal/ClickableElement.styles.js

@@ -1,29 +1,29 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-var styles = {
-    root: function (t) {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
-    },
-    rootButton: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      &:active {\n        background: ", ";\n      }\n    "])), t.sideMenuItemActiveBg);
-    },
-    rootSubItemInSeparatedSubMenu: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
-    },
-    focusedRoot: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
-    },
-    disabledRoot: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), t.sideMenuItemDisabledColor);
-    },
-    activeRoot: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
-    },
-    activeRootSubItemInSeparatedSubMenu: function (t) {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
-    },
-};
-export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+import { __makeTemplateObject } from "tslib";
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+var styles = {
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
+    },
+    rootButton: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      &:active {\n        background: ", ";\n      }\n    "])), t.sideMenuItemActiveBg);
+    },
+    rootSubItemInSeparatedSubMenu: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
+    },
+    focusedRoot: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
+    },
+    disabledRoot: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      pointer-events: none;\n    "], ["\n      color: ", ";\n      pointer-events: none;\n    "])), t.sideMenuItemDisabledColor);
+    },
+    activeRoot: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
+    },
+    activeRootSubItemInSeparatedSubMenu: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;