@skbkontur/side-menu 0.1.4 → 0.2.1

package/src/SideMenuItem.js

@@ -1,184 +1,153 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
 import { keyListener } from '@skbkontur/react-ui/lib/events/keyListener';
 import { jsStyles } from './SideMenu.styles';
-import { SideMenuThemeContext } from './SideMenuContext';
+import { SideMenuContext } from './SideMenuContext';
+import { SeparatedSubMenu } from './SeparatedSubMenu';
+import { InnerSubMenu } from './InnerSubMenu';
 /**
  * Элемент списка
  *
  * @visibleName SideMenu.Item
  */
-var SideMenuItem = /** @class */ (function (_super) {
-    __extends(SideMenuItem, _super);
-    function SideMenuItem(props) {
-        var _this = _super.call(this, props) || this;
-        _this.previousContext = {};
-        _this.renderInnerSubMenu = function () {
-            var childrenWithProps = React.Children.map(_this.props.children, function (child) {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { parent: _this });
-                }
-                return child;
-            });
-            return _this.state.isOpened && !_this.context.isMinimised && !_this.props.isSubMenu && childrenWithProps;
-        };
-        _this.renderSeparatedSubMenu = function () {
-            var _a;
-            var hasSubItems = false;
-            var subItemHasChildren = function (subItem) {
-                return subItem &&
-                    typeof subItem === 'object' &&
-                    'type' in subItem &&
-                    typeof subItem.type === 'function' &&
-                    (subItem === null || subItem === void 0 ? void 0 : subItem.type.name) === 'SideMenuSubItem' &&
-                    subItem.props.children;
-            };
-            if (_this.state.isOpened) {
-                React.Children.map(_this.props.children, function (child) {
-                    if (subItemHasChildren(child)) {
-                        hasSubItems = true;
-                    }
-                });
+var SideMenuItem = forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f;
+    var className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, icon = _a.icon, marker = _a.marker, caption = _a.caption, parent = _a.parent, isSubMenu = _a.isSubMenu, children = _a.children, rest = __rest(_a, ["className", "onClick", "onKeyDown", "icon", "marker", "caption", "parent", "isSubMenu", "children"]);
+    var context = useContext(SideMenuContext);
+    var textRef = useRef(null);
+    var _g = useState(false), isOpened = _g[0], setIsOpened = _g[1];
+    var _h = useState(false), focusedByTab = _h[0], setFocusedByTab = _h[1];
+    var _j = useState(false), isMultiline = _j[0], setIsMultiline = _j[1];
+    var _k = useState(context), oldContext = _k[0], setOldContext = _k[1];
+    var id = useState('id' + Math.floor(Math.random() * 10000))[0];
+    var getNumberOfTextLines = function () {
+        if (textRef.current) {
+            var el = textRef.current;
+            var textHeight = +el.offsetHeight;
+            var lineHeight = parseInt(window.getComputedStyle(textRef.current).getPropertyValue('line-height'));
+            var lines = textHeight / lineHeight;
+            if (lines >= 2) {
+                setIsMultiline(true);
             }
-            return (_this.state.isOpened &&
-                !_this.props.isSubMenu && (React.createElement("div", { className: cx((_a = {}, _a[jsStyles.root()] = true, _a[jsStyles.separatedMenu()] = true, _a)), ref: function (node) { return (_this.separatedMenu = node); } },
-                React.createElement(SideMenuThemeContext.Provider, { value: __assign({ hasSubIcons: hasSubItems }, _this.context) }, _this.props.children))));
-        };
-        _this.handleClick = function (e) {
-            if (_this.props.onClick) {
-                _this.props.onClick(e);
-            }
-            _this.setActive();
-            _this.setState({ isOpened: !!_this.props.children });
-        };
-        _this.handleFocus = function () {
-            requestAnimationFrame(function () {
-                if (keyListener.isTabPressed) {
-                    _this.setState({ focusedByTab: true });
-                }
-            });
-        };
-        _this.handleBlur = function () {
-            _this.setState({ focusedByTab: false });
-        };
-        _this.handleKeyDown = function (e) {
-            var _a, _b;
-            if (e.key === 'Enter') {
-                _this.setState({ isOpened: !_this.props.children ? false : !_this.state.isOpened });
-                _this.setActive();
-            }
-            (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-        };
-        _this.setActive = function () {
-            if (_this.props.isSubMenu) {
-                if (_this.props.parent) {
-                    _this.context.setActiveItem(_this.props.parent);
-                }
-                _this.context.setActiveSubItem(_this);
-            }
-            else {
-                if (!_this.context.isSeparatedMenu) {
-                    _this.context.setActiveSubItem(null);
-                }
-                _this.context.setActiveItem(_this);
+        }
+    };
+    useEffect(function () {
+        var _a;
+        if (icon && !isSubMenu) {
+            (_a = context.setHasIcons) === null || _a === void 0 ? void 0 : _a.call(context);
+        }
+        getNumberOfTextLines();
+    });
+    useEffect(function () {
+        if (oldContext.activeItem !== context.activeItem && context.activeItem !== id) {
+            setIsOpened(false);
+        }
+        setOldContext(context);
+    }, [context.activeItem]);
+    var setActive = function () {
+        var _a, _b, _c, _d;
+        if (isSubMenu) {
+            if (parent) {
+                (_a = context.setActiveItem) === null || _a === void 0 ? void 0 : _a.call(context, parent);
             }
-        };
-        _this.state = {
-            isOpened: false,
-            focusedByTab: false,
-            isMultiline: false,
-        };
-        _this.textRef = React.createRef();
-        return _this;
-    }
-    SideMenuItem.prototype.componentDidMount = function () {
-        var _a, _b;
-        if (this.props.icon && !this.props.isSubMenu) {
-            (_b = (_a = this.context).setHasIcons) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_b = context.setActiveSubItem) === null || _b === void 0 ? void 0 : _b.call(context, id);
         }
-        if (this.textRef.current) {
-            var el = this.textRef.current;
-            var divHeight = +el.offsetHeight;
-            var lineHeight = parseInt(window.getComputedStyle(this.textRef.current).getPropertyValue('font-size')) * 1.14;
-            var lines = divHeight / lineHeight;
-            if (lines > 2) {
-                this.setState({ isMultiline: true });
+        else {
+            if (!context.isSeparatedMenu) {
+                (_c = context.setActiveSubItem) === null || _c === void 0 ? void 0 : _c.call(context, null);
             }
+            (_d = context.setActiveItem) === null || _d === void 0 ? void 0 : _d.call(context, id);
         }
-        this.previousContext = this.context;
     };
-    SideMenuItem.prototype.componentDidUpdate = function () {
-        if (this.previousContext.activeItem !== this.context.activeItem && this.context.activeItem !== this) {
-            this.setState({ isOpened: false });
+    var active = false;
+    if (context) {
+        active = context.activeItem === id || context.activeSubItem === id;
+    }
+    // @ts-expect-error: accessing private property
+    var isIconUserAvatar = typeof (icon === null || icon === void 0 ? void 0 : icon.type) === 'function' && icon.type.__KONTUR_REACT_UI__ === 'UserAvatar';
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
         }
-        this.previousContext = this.context;
+        setActive();
+        setIsOpened(!!children);
+    };
+    var handleFocus = function () {
+        requestAnimationFrame(function () {
+            if (keyListener.isTabPressed) {
+                setFocusedByTab(true);
+            }
+        });
+    };
+    var handleBlur = function () {
+        setFocusedByTab(false);
     };
-    SideMenuItem.prototype.render = function () {
-        return this.renderMain();
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            setIsOpened(!isOpened);
+            setActive();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     };
-    SideMenuItem.prototype.renderMain = function () {
-        var _a, _b, _c, _d, _e;
-        var active = false;
-        if (this.context) {
-            active = this.context.activeItem === this || this.context.activeSubItem === this;
+    var renderSubMenu = function () {
+        if (children && isOpened && !isSubMenu && !context.isMinimised) {
+            if (context.isSeparatedMenu) {
+                return React.createElement(SeparatedSubMenu, null, children);
+            }
+            else {
+                return React.createElement(InnerSubMenu, { id: id }, children);
+            }
         }
-        var _f = this.props, icon = _f.icon, marker = _f.marker, caption = _f.caption, isSubMenu = _f.isSubMenu;
-        var isIconUserAvatar = typeof icon === 'object' && typeof icon.type === 'function' && icon.type.name === 'UserAvatar';
-        var itemClasses = cx((_a = {},
-            _a[jsStyles.item()] = true,
-            _a[jsStyles.subItem()] = this.context.isSeparatedMenu && isSubMenu,
-            _a[jsStyles.focusedItem()] = this.state.focusedByTab,
-            _a[jsStyles.activeItem()] = (active && !this.state.isOpened) ||
-                (active && this.state.isOpened && !this.context.activeSubItem) ||
-                (active && this.state.isOpened && isSubMenu),
-            _a[jsStyles.activeSubItem()] = active && this.context.isSeparatedMenu && isSubMenu,
-            _a));
-        var iconClasses = cx((_b = {},
-            _b[jsStyles.icon()] = true,
-            _b[jsStyles.iconMultiline()] = this.state.isMultiline,
-            _b[jsStyles.iconLarge()] = this.context.size === 'large',
-            _b[jsStyles.iconSubItem()] = isSubMenu,
-            _b[jsStyles.iconSubItemLarge()] = isSubMenu && this.context.size === 'large',
-            _b[jsStyles.avatarIcon()] = isIconUserAvatar,
-            _b));
-        var textClasses = cx((_c = {},
-            _c[jsStyles.itemText()] = true,
-            _c[jsStyles.itemTextTransitioned()] = this.context.isTransitioned,
-            _c[jsStyles.subItemText()] = isSubMenu,
-            _c[jsStyles.itemTextWithoutItemIcon()] = !icon,
-            _c[jsStyles.itemTextWithoutColumnIcons()] = !this.context.hasIcons && !isSubMenu,
-            _c[jsStyles.subItemTextWithoutColumnIcons()] = isSubMenu && this.context.isSeparatedMenu && !this.context.hasSubIcons,
-            _c[jsStyles.itemTextLarge()] = this.context.size === 'large',
-            _c[jsStyles.itemTextMultiline()] = this.state.isMultiline,
-            _c));
-        var markerClasses = cx((_d = {},
-            _d[jsStyles.marker()] = true,
-            _d[jsStyles.markerMultiline()] = this.state.isMultiline,
-            _d));
-        var itemWrapperClasses = cx((_e = {},
-            _e[jsStyles.itemWrapper()] = true,
-            _e[jsStyles.itemMultilineWrapper()] = this.state.isMultiline,
-            _e[jsStyles.subItemWrapper()] = isSubMenu,
-            _e[jsStyles.itemWrapperWithoutIcon()] = !this.props.icon && !isSubMenu,
-            _e[jsStyles.itemLargeWrapper()] = this.context.size === 'large',
-            _e[jsStyles.subItemLargeWrapper()] = this.context.size === 'large' && isSubMenu,
-            _e[jsStyles.itemLargeMultilineWrapper()] = this.state.isMultiline && this.context.size === 'large',
-            _e[jsStyles.itemLargeWrapperWithoutIcon()] = !this.props.icon && !isSubMenu && this.context.size === 'large',
-            _e));
-        return (React.createElement(CommonWrapper, __assign({}, this.props),
-            React.createElement("div", null,
-                React.createElement("div", { className: itemClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur },
-                    React.createElement("div", { className: itemWrapperClasses },
-                        icon && (React.createElement("span", { className: iconClasses }, React.cloneElement(icon, { size: isSubMenu ? 16 : 24, disableCompensation: true }))),
-                        !this.context.isMinimised && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: textClasses, ref: this.textRef }, caption),
-                            marker && React.createElement("span", { className: markerClasses }, marker))))),
-                this.context.isSeparatedMenu ? this.renderSeparatedSubMenu() : this.renderInnerSubMenu())));
     };
-    SideMenuItem.__KONTUR_REACT_UI__ = 'SideMenuItem';
-    SideMenuItem.contextType = SideMenuThemeContext;
-    return SideMenuItem;
-}(React.Component));
-export { SideMenuItem };
+    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()] = (active && !isOpened) ||
+                    (active && isOpened && !context.activeSubItem) ||
+                    (active && isOpened && isSubMenu),
+                _b[jsStyles.activeSubItem()] = active && context.isSeparatedMenu && isSubMenu,
+                _b), className), onClick: handleClick, onKeyDown: handleKeyDown, 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.itemWrapperWithoutIcon()] = !icon && !isSubMenu,
+                    _c[jsStyles.itemLargeWrapper()] = context.size === 'large',
+                    _c[jsStyles.subItemLargeWrapper()] = context.size === 'large' && isSubMenu,
+                    _c[jsStyles.itemLargeMultilineWrapper()] = isMultiline && context.size === 'large',
+                    _c[jsStyles.itemLargeWrapperWithoutIcon()] = !icon && !isSubMenu && context.size === 'large',
+                    _c)) },
+                icon && (React.createElement("span", { className: cx((_d = {},
+                        _d[jsStyles.icon()] = true,
+                        _d[jsStyles.iconMultiline()] = isMultiline,
+                        _d[jsStyles.iconLarge()] = context.size === 'large',
+                        _d[jsStyles.iconSubItem()] = isSubMenu,
+                        _d[jsStyles.iconSubItemLarge()] = isSubMenu && context.size === 'large',
+                        _d[jsStyles.avatarIcon()] = isIconUserAvatar,
+                        _d)) }, React.cloneElement(icon, {
+                    size: isSubMenu ? 16 : 24,
+                    disableCompensation: true,
+                }))),
+                !context.isMinimised && (React.createElement("div", { className: jsStyles.textAndMarkerWrapper() },
+                    React.createElement("p", { className: cx((_e = {},
+                            _e[jsStyles.itemText()] = true,
+                            _e[jsStyles.itemTextTransitioned()] = context.isTransitioned,
+                            _e[jsStyles.subItemText()] = isSubMenu,
+                            _e[jsStyles.itemTextWithoutItemIcon()] = !icon,
+                            _e[jsStyles.itemTextWithoutColumnIcons()] = !context.hasIcons && !isSubMenu,
+                            _e[jsStyles.subItemTextWithoutColumnIcons()] = isSubMenu && context.isSeparatedMenu && !context.hasSubIcons,
+                            _e[jsStyles.itemTextLarge()] = context.size === 'large',
+                            _e[jsStyles.itemTextMultiline()] = isMultiline,
+                            _e)), ref: textRef }, caption),
+                    marker && (React.createElement("span", { className: cx((_f = {},
+                            _f[jsStyles.marker()] = true,
+                            _f[jsStyles.markerMultiline()] = isMultiline,
+                            _f)) }, marker)))))),
+        renderSubMenu()));
+});
+SideMenuItem.displayName = 'SideMenuItem';
+var SideMenuItemWithStaticFields = Object.assign(SideMenuItem, { __KONTUR_REACT_UI__: 'SideMenuItem' });
+export { SideMenuItemWithStaticFields as SideMenuItem };

package/src/SideMenuLogotype.d.ts

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

package/src/SideMenuLogotype.js

@@ -0,0 +1,65 @@
+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';
+/**
+ * Логотип
+ *
+ * @visibleName SideMenu.Logotype
+ */
+var SideMenuLogotype = forwardRef(function (_a, ref) {
+    var productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, rest = __rest(_a, ["productLogo", "konturLogo", "iconUrl"]);
+    var context = useContext(SideMenuContext);
+    var refLogotype = useRef(null);
+    var _b = useState(28), size = _b[0], setSize = _b[1];
+    useEffect(function () {
+        var _a, _b, _c;
+        (_a = context.setProductColor) === null || _a === void 0 ? void 0 : _a.call(context, productLogo === null || productLogo === void 0 ? void 0 : productLogo.props.color);
+        var logotypeWidth = (_c = (_b = refLogotype.current) === null || _b === void 0 ? void 0 : _b.logotypeRef) === null || _c === void 0 ? void 0 : _c.clientWidth;
+        if (logotypeWidth && logotypeWidth > 186) {
+            //TODO 186 заменить на headerWrapper width после возврата к кастомизации
+            setSize(24);
+        }
+    });
+    var widgetTimer;
+    var _c = useState(false), withWidget = _c[0], setWithWidget = _c[1];
+    var handleMouseEnter = function () {
+        widgetTimer = setTimeout(function () {
+            setWithWidget(true);
+        }, 500);
+    };
+    var handleMouseLeave = function () {
+        if (widgetTimer) {
+            clearTimeout(widgetTimer);
+        }
+        setWithWidget(false);
+    };
+    var changeCamelCaseToKebabCase = function (str) {
+        return str
+            .split('')
+            .map(function (letter, idx) {
+            return letter.toUpperCase() === letter ? "" + (idx !== 0 ? '-' : '') + letter.toLowerCase() : letter;
+        })
+            .join('');
+    };
+    var getProductName = function () {
+        var name = 'kontur';
+        if (productLogo && typeof productLogo.type === 'function') {
+            name = changeCamelCaseToKebabCase(productLogo.type.name);
+        }
+        return name;
+    };
+    var productName = getProductName();
+    var getStaticIconPath = function () {
+        return "https://s.kontur.ru/common-v2/icons-products/" + productName + "/" + productName + "-32.svg";
+    };
+    if (context.isMinimised || context.isTransitioned) {
+        return React.createElement("img", { className: jsStyles.headerIcon(), src: iconUrl || getStaticIconPath(), alt: productName });
+    }
+    return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref },
+        React.createElement(Logotype, __assign({ ref: refLogotype, size: size, productLogo: productLogo, konturLogo: konturLogo, withWidget: withWidget }, rest))));
+});
+SideMenuLogotype.displayName = 'SideMenuLogotype';
+var SideMenuLogotypeWithStaticFields = Object.assign(SideMenuLogotype, { __KONTUR_REACT_UI__: 'SideMenuLogotype' });
+export { SideMenuLogotypeWithStaticFields as SideMenuLogotype };

package/src/SideMenuOrganisations.d.ts

@@ -1,18 +1,6 @@
 import React from 'react';
-declare type SideMenuOrganisationsProps = {
-    icon?: React.ReactElement;
-    children?: React.ReactNode;
-    caption?: string;
+import { SideMenuDropdownProps } from './SideMenuDropdown';
+declare const SideMenuOrganisationsWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
 };
-/**
- * Список организаций
- *
- * @visibleName SideMenu.Organisations
- */
-export declare class SideMenuOrganisations extends React.Component<SideMenuOrganisationsProps> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<SideMenuOrganisationsProps>;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-}
-export {};
+export { SideMenuOrganisationsWithStaticFields as SideMenuOrganisations };

package/src/SideMenuOrganisations.js

@@ -1,40 +1,17 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
-import { SideMenuItem } from './SideMenuItem';
-import { jsStyles } from './SideMenu.styles';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { SideMenuDropdown } from './SideMenuDropdown';
 /**
  * Список организаций
  *
  * @visibleName SideMenu.Organisations
  */
-var SideMenuOrganisations = /** @class */ (function (_super) {
-    __extends(SideMenuOrganisations, _super);
-    function SideMenuOrganisations() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SideMenuOrganisations.prototype.render = function () {
-        return this.renderMain();
-    };
-    SideMenuOrganisations.prototype.renderMain = function () {
-        var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
-            React.createElement(SideMenuItem, { icon: this.props.icon, caption: this.props.caption })));
-        return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
-                menuItemHoverBg: '#f6f6f6',
-                menuItemHoverColor: '#222',
-                popupBorderRadius: '8px',
-                menuItemPaddingX: '32px',
-            }, DEFAULT_THEME) },
-            React.createElement(CommonWrapper, __assign({}, this.props),
-                React.createElement("div", { className: jsStyles.dropdownWrapper() },
-                    React.createElement(DropdownMenu, { caption: label, menuWidth: '240px', positions: ['top left'] }, this.props.children)))));
-    };
-    SideMenuOrganisations.__KONTUR_REACT_UI__ = 'SideMenuOrganisations';
-    SideMenuOrganisations.defaultProps = {
-        caption: 'СКБ Контур',
-    };
-    return SideMenuOrganisations;
-}(React.Component));
-export { SideMenuOrganisations };
+var SideMenuOrganisations = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.caption, caption = _b === void 0 ? 'СКБ Контур' : _b, rest = __rest(_a, ["children", "caption"]);
+    return (React.createElement(SideMenuDropdown, __assign({ caption: caption, menuWidth: '240px', positions: ['top left'], ref: ref }, rest), children));
+});
+SideMenuOrganisations.displayName = 'SideMenuOrganisations';
+var SideMenuOrganisationsWithStaticFields = Object.assign(SideMenuOrganisations, {
+    __KONTUR_REACT_UI__: 'SideMenuOrganisations',
+});
+export { SideMenuOrganisationsWithStaticFields as SideMenuOrganisations };

package/src/SideMenuSubItem.d.ts

@@ -1,20 +1,6 @@
 import React from 'react';
 import { SideMenuItemProps } from './SideMenuItem';
-declare type SideMenuSubItemState = {
-    isOpened: boolean;
+declare const SideMenuSubItemWithStaticFields: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
 };
-/**
- * Элемент списка второго уровня
- *
- * @visibleName SideMenu.SubItem
- */
-export declare class SideMenuSubItem extends React.Component<SideMenuItemProps, SideMenuSubItemState> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<import("./SideMenuContext").SideMenuContextType>;
-    constructor(props: SideMenuItemProps);
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-    private handleClick;
-    private handleKeyDown;
-}
-export {};
+export { SideMenuSubItemWithStaticFields as SideMenuSubItem };

package/src/SideMenuSubItem.js

@@ -1,54 +1,39 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
-import { SideMenuThemeContext } from './SideMenuContext';
+import { __assign } from "tslib";
+import React, { forwardRef, useMemo, useState } from 'react';
+import { ArrowCDownIcon16Regular, ArrowCRightIcon16Regular } from '@skbkontur/icons';
 import { SideMenuItem } from './SideMenuItem';
 import { jsStyles } from './SideMenu.styles';
-import { ArrowChevronDown, ArrowChevronRight } from '@skbkontur/react-icons';
 /**
  * Элемент списка второго уровня
  *
  * @visibleName SideMenu.SubItem
  */
-var SideMenuSubItem = /** @class */ (function (_super) {
-    __extends(SideMenuSubItem, _super);
-    function SideMenuSubItem(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleClick = function () {
-            _this.setState({ isOpened: true });
-        };
-        _this.handleKeyDown = function (e) {
-            var _a, _b;
-            if (e.key === 'Enter') {
-                _this.setState({ isOpened: true });
-            }
-            (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-        };
-        _this.state = {
-            isOpened: false,
-        };
-        return _this;
-    }
-    SideMenuSubItem.prototype.render = function () {
-        return this.renderMain();
+var SideMenuSubItem = forwardRef(function (props, ref) {
+    var _a = useState(false), isOpened = _a[0], setIsOpened = _a[1];
+    var handleClick = function () {
+        setIsOpened(true);
+    };
+    var handleKeyDown = function (e) {
+        var _a;
+        if (e.key === 'Enter') {
+            setIsOpened(true);
+        }
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    SideMenuSubItem.prototype.renderMain = function () {
-        var icon;
-        if (this.props.children) {
-            if (this.state.isOpened) {
-                icon = React.createElement(ArrowChevronDown, null);
+    var icon = useMemo(function () {
+        if (props.children) {
+            if (isOpened) {
+                return React.createElement(ArrowCDownIcon16Regular, null);
             }
             else {
-                icon = React.createElement(ArrowChevronRight, null);
+                return React.createElement(ArrowCRightIcon16Regular, null);
             }
         }
-        return (React.createElement(CommonWrapper, __assign({}, this.props),
-            React.createElement("div", null,
-                React.createElement(SideMenuItem, __assign({}, this.props, { onClick: this.handleClick, icon: icon, isSubMenu: true, onKeyDown: this.handleKeyDown })),
-                this.props.children && this.state.isOpened && (React.createElement("div", { className: jsStyles.subItemMenu() }, this.props.children)))));
-    };
-    SideMenuSubItem.__KONTUR_REACT_UI__ = 'SideMenuSubItem';
-    SideMenuSubItem.contextType = SideMenuThemeContext;
-    return SideMenuSubItem;
-}(React.Component));
-export { SideMenuSubItem };
+    }, [isOpened, props.children]);
+    return (React.createElement("div", { ref: ref },
+        React.createElement(SideMenuItem, __assign({ onClick: handleClick, icon: icon, isSubMenu: true, onKeyDown: handleKeyDown }, props)),
+        props.children && isOpened && React.createElement("div", { className: jsStyles.subItemMenu() }, props.children)));
+});
+SideMenuSubItem.displayName = 'SideMenuSubItem';
+var SideMenuSubItemWithStaticFields = Object.assign(SideMenuSubItem, { __KONTUR_REACT_UI__: 'SideMenuSubItem' });
+export { SideMenuSubItemWithStaticFields as SideMenuSubItem };

package/src/SideMenuSubItemHeader.d.ts

@@ -1,16 +1,9 @@
 import React from 'react';
 import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
-export declare type SideMenuSubItemHeaderProps = CommonProps & {
+export interface SideMenuSubItemHeaderProps extends CommonProps {
     children?: React.ReactNode;
-};
-/**
- * Заголовок списка второго уровня
- *
- * @visibleName SideMenu.SubItemHeader
- */
-export declare class SideMenuSubItemHeader extends React.Component<SideMenuSubItemHeaderProps> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<import("./SideMenuContext").SideMenuContextType>;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
 }
+declare const SideMenuSubItemHeaderWithStaticFields: React.ForwardRefExoticComponent<SideMenuSubItemHeaderProps & React.RefAttributes<HTMLParagraphElement>> & {
+    __KONTUR_REACT_UI__: string;
+};
+export { SideMenuSubItemHeaderWithStaticFields as SideMenuSubItemHeader };

package/src/SideMenuSubItemHeader.js

@@ -1,27 +1,19 @@
-import { __assign, __extends } from "tslib";
-import React from 'react';
-import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './SideMenu.styles';
-import { SideMenuThemeContext } from './SideMenuContext';
 /**
  * Заголовок списка второго уровня
  *
  * @visibleName SideMenu.SubItemHeader
  */
-var SideMenuSubItemHeader = /** @class */ (function (_super) {
-    __extends(SideMenuSubItemHeader, _super);
-    function SideMenuSubItemHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SideMenuSubItemHeader.prototype.render = function () {
-        return this.renderMain();
-    };
-    SideMenuSubItemHeader.prototype.renderMain = function () {
-        return (React.createElement(CommonWrapper, __assign({}, this.props),
-            React.createElement("div", { className: jsStyles.subItemHeader() }, this.props.children)));
-    };
-    SideMenuSubItemHeader.__KONTUR_REACT_UI__ = 'SideMenuSubItemHeader';
-    SideMenuSubItemHeader.contextType = SideMenuThemeContext;
-    return SideMenuSubItemHeader;
-}(React.Component));
-export { SideMenuSubItemHeader };
+var SideMenuSubItemHeader = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.subItemHeader()] = true, _b), className), ref: ref }, rest), children));
+});
+SideMenuSubItemHeader.displayName = 'SideMenuSubItemHeader';
+var SideMenuSubItemHeaderWithStaticFields = Object.assign(SideMenuSubItemHeader, {
+    __KONTUR_REACT_UI__: 'SideMenuSubItemHeader',
+});
+export { SideMenuSubItemHeaderWithStaticFields as SideMenuSubItemHeader };