@skbkontur/side-menu 0.1.1

package/src/SideMenu.styles.js

@@ -0,0 +1,162 @@
+import { __makeTemplateObject } from "tslib";
+import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+var styles = {
+    root: function () {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f0f0f0;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f0f0f0;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
+    },
+    rootSafari: function () {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
+    },
+    rootWithoutScrollBar: function () {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n     -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n    "], ["\n     -ms-overflow-style: none;\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        display: none;\n        width: 0;\n    "])));
+    },
+    minimisedRoot: function () {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 72px !important;\n    "], ["\n      width: 72px !important;\n    "])));
+    },
+    rootWithInnerSubMenu: function () {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+    },
+    rootWrapper: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n    "])));
+    },
+    rootWrapperIE: function () {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: relative;\n      top: -15px;\n    "], ["\n      position: relative;\n      top: -15px;\n    "])));
+    },
+    rightBorder: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n      left: -10px;\n      width: 20px;\n      background: transparent;\n    "], ["\n      position: relative;\n      left: -10px;\n      width: 20px;\n      background: transparent;\n    "])));
+    },
+    resizableRightBorder: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
+    },
+    body: function () {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "])));
+    },
+    footer: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      flex-grow: 0;\n    "], ["\n      flex-grow: 0;\n    "])));
+    },
+    headerWrapper: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f0f0f0;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "], ["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f0f0f0;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "])));
+    },
+    headerMinimisedWrapper: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "], ["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "])));
+    },
+    headerFixedWrapper: function () {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      border-bottom: 1px solid #e6e6e6;\n    "], ["\n      border-bottom: 1px solid #e6e6e6;\n    "])));
+    },
+    item: function () {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: 100%;\n      background: #f0f0f0;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: #f6f6f6;\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      width: 100%;\n      background: #f0f0f0;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: #f6f6f6;\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
+    },
+    subItem: function () {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+    },
+    focusedItem: function () {
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "], ["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "])));
+    },
+    activeItem: function () {
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      background: #fff !important;\n    "], ["\n      background: #fff !important;\n    "])));
+    },
+    activeSubItem: function () {
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background: #f2f2f2 !important;\n    "], ["\n      background: #f2f2f2 !important;\n    "])));
+    },
+    itemWrapper: function () {
+        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+    },
+    itemMultilineWrapper: function () {
+        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+    },
+    itemLargeWrapper: function () {
+        return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
+    },
+    subItemLargeWrapper: function () {
+        return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
+    },
+    itemLargeMultilineWrapper: function () {
+        return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+    },
+    itemLargeWrapperWithoutIcon: function () {
+        return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      padding-top: 13px !important;\n      padding-bottom: 13px !important;\n    "], ["\n      padding-top: 13px !important;\n      padding-bottom: 13px !important;\n    "])));
+    },
+    subItemWrapper: function () {
+        return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+    },
+    itemWrapperWithoutIcon: function () {
+        return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      min-height: 20px;\n      padding-top: 10px !important;\n      padding-bottom: 10px !important;\n    "], ["\n      min-height: 20px;\n      padding-top: 10px !important;\n      padding-bottom: 10px !important;\n    "])));
+    },
+    itemText: function () {
+        return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      line-height: 20px;\n      margin-right: 8px;\n    "], ["\n      line-height: 20px;\n      margin-right: 8px;\n    "])));
+    },
+    itemTextTransitioned: function () {
+        return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));
+    },
+    itemTextMultiline: function () {
+        return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+    },
+    subItemText: function () {
+        return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
+    },
+    itemTextWithoutItemIcon: function () {
+        return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+    },
+    itemTextWithoutColumnIcons: function () {
+        return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      margin-left: 12px;\n    "], ["\n      margin-left: 12px;\n    "])));
+    },
+    subItemTextWithoutColumnIcons: function () {
+        return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+    },
+    itemTextLarge: function () {
+        return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+    },
+    divider: function () {
+        return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      background: #d6d6d6;\n      height: 1px;\n      border: none;\n      margin: 4px 8px;\n    "], ["\n      background: #d6d6d6;\n      height: 1px;\n      border: none;\n      margin: 4px 8px;\n    "])));
+    },
+    icon: function () {
+        return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n    "])));
+    },
+    iconMultiline: function () {
+        return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
+    },
+    iconLarge: function () {
+        return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
+    },
+    iconSubItemLarge: function () {
+        return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
+    },
+    iconSubItem: function () {
+        return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
+    },
+    avatarIcon: function () {
+        return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+    },
+    headerIcon: function () {
+        return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+    },
+    marker: function () {
+        return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "], ["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "])));
+    },
+    markerMultiline: function () {
+        return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+    },
+    dropdownMenuSeparator: function () {
+        return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      margin: 4px 32px;\n      background-color: #ebebeb;\n      height: 1px;\n      border: 0;\n    "], ["\n      margin: 4px 32px;\n      background-color: #ebebeb;\n      height: 1px;\n      border: 0;\n    "])));
+    },
+    subItemHeader: function () {
+        return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n    "], ["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n    "])));
+    },
+    separatedMenu: function () {
+        return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding-top: 24px;\n    "], ["\n      position: absolute;\n      top: 0;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding-top: 24px;\n    "])));
+    },
+    buttonsGroup: function () {
+        return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding-bottom: 16px;\n      & span:not(:first-child) {\n        margin-top: 8px;\n      }\n    "], ["\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding-bottom: 16px;\n      & span:not(:first-child) {\n        margin-top: 8px;\n      }\n    "])));
+    },
+    dropdownWrapper: function () {
+        return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+    },
+    dropdownLabel: function () {
+        return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n      width: 200px;\n    "], ["\n      width: 200px;\n    "])));
+    },
+    subItemMenu: function () {
+        return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
+    },
+};
+export var jsStyles = memoizeStyle(styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52;

package/src/SideMenuAvatar.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
+declare type SideMenuAvatarInterface = {
+    onLogout?: () => void;
+};
+declare type DefaultProps = {
+    cabinetUrl: string;
+};
+export declare type SideMenuAvatarProps = CommonProps & UserAvatarProps & SideMenuAvatarInterface & Partial<DefaultProps>;
+declare type SideMenuAvatarComponentProps = CommonProps & UserAvatarProps & SideMenuAvatarInterface & DefaultProps;
+/**
+ * Аватар пользователя
+ *
+ * @visibleName SideMenu.Avatar
+ */
+export declare class SideMenuAvatar extends React.Component<SideMenuAvatarComponentProps> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: {
+        cabinetUrl: string;
+    };
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}
+export {};

package/src/SideMenuAvatar.js

@@ -0,0 +1,47 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { DEFAULT_THEME, DropdownMenu, MenuItem, ThemeFactory } from '@skbkontur/react-ui';
+import { UserAvatar } from '@skbkontur/react-ui-addons/components/UserAvatar';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuItem } from './SideMenuItem';
+import { SideMenuDropdownMenuSeparator } from './SideMenuDropdownMenuSeparator';
+/**
+ * Аватар пользователя
+ *
+ * @visibleName SideMenu.Avatar
+ */
+var SideMenuAvatar = /** @class */ (function (_super) {
+    __extends(SideMenuAvatar, _super);
+    function SideMenuAvatar() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SideMenuAvatar.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuAvatar.prototype.renderMain = function () {
+        var _a = this.props, cabinetUrl = _a.cabinetUrl, userName = _a.userName, onLogout = _a.onLogout;
+        var label = (React.createElement("div", { className: jsStyles.dropdownLabel() },
+            React.createElement(SideMenuItem, { icon: React.createElement(UserAvatar, __assign({}, this.props)), caption: userName })));
+        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: 200, positions: ['top left'] },
+                        React.createElement(MenuItem, { href: cabinetUrl, target: "_blank" }, "\u041B\u0438\u0447\u043D\u044B\u0439 \u043A\u0430\u0431\u0438\u043D\u0435\u0442"),
+                        React.createElement(MenuItem, null, "\u0411\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u044C"),
+                        React.createElement(SideMenuDropdownMenuSeparator, null),
+                        React.createElement(MenuItem, { onClick: onLogout }, "\u0412\u044B\u0439\u0442\u0438"))))));
+    };
+    SideMenuAvatar.__KONTUR_REACT_UI__ = 'SideMenuAvatar';
+    SideMenuAvatar.defaultProps = {
+        cabinetUrl: 'https://cabinet.kontur.ru',
+    };
+    return SideMenuAvatar;
+}(React.Component));
+export { SideMenuAvatar };

package/src/SideMenuBody.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+/**
+ * Основной контейнер для меню
+ *
+ * @visibleName SideMenu.Body
+ */
+export declare type SideMenuBodyProps = CommonProps;
+export declare const SideMenuBody: React.FC<SideMenuBodyProps>;

package/src/SideMenuBody.js

@@ -0,0 +1,16 @@
+import { __assign } from "tslib";
+import React, { useContext, useState } from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { SideMenuThemeContext } from './SideMenuContext';
+import { jsStyles } from './SideMenu.styles';
+export var SideMenuBody = function (props) {
+    var _a = useState(false), hasIcons = _a[0], setHasIcons = _a[1];
+    var oldContext = useContext(SideMenuThemeContext);
+    var setHasIconsTemp = function () {
+        setHasIcons(true);
+    };
+    return (React.createElement(SideMenuThemeContext.Provider, { value: __assign({ hasIcons: hasIcons, setHasIcons: setHasIconsTemp }, oldContext) },
+        React.createElement(CommonWrapper, __assign({}, props),
+            React.createElement("div", { className: jsStyles.body() }, props.children))));
+};
+SideMenuBody.__KONTUR_REACT_UI__ = 'SideMenuBody';

package/src/SideMenuContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface SideMenuContextType {
+    isMinimised?: boolean;
+    isTransitioned?: boolean;
+    isSeparatedMenu?: boolean;
+    size?: 'small' | 'large';
+    hasIcons?: boolean;
+    setHasIcons?: () => void;
+    activeItem?: React.ReactNode;
+    setActiveItem?: (item: React.ReactNode) => void;
+    activeSubItem?: React.ReactNode;
+    setActiveSubItem?: (item: React.ReactNode) => void;
+    hasSubIcons?: boolean;
+}
+export declare const SideMenuThemeContext: React.Context<SideMenuContextType>;

package/src/SideMenuContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var SideMenuThemeContext = createContext({});

package/src/SideMenuDivider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Разделитель в главном меню
+ *
+ * @visibleName SideMenu.Divider
+ */
+export declare class SideMenuDivider extends React.Component {
+    static __KONTUR_REACT_UI__: string;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/src/SideMenuDivider.js

@@ -0,0 +1,25 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { jsStyles } from './SideMenu.styles';
+/**
+ * Разделитель в главном меню
+ *
+ * @visibleName SideMenu.Divider
+ */
+var SideMenuDivider = /** @class */ (function (_super) {
+    __extends(SideMenuDivider, _super);
+    function SideMenuDivider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SideMenuDivider.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuDivider.prototype.renderMain = function () {
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("hr", { className: jsStyles.divider() })));
+    };
+    SideMenuDivider.__KONTUR_REACT_UI__ = 'SideMenuDivider';
+    return SideMenuDivider;
+}(React.Component));
+export { SideMenuDivider };

package/src/SideMenuDropdownMenuSeparator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Разделитель в выпадающих меню
+ *
+ * @visibleName SideMenu.DropdownMenuSeparator
+ */
+export declare class SideMenuDropdownMenuSeparator extends React.Component {
+    static __KONTUR_REACT_UI__: string;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/src/SideMenuDropdownMenuSeparator.js

@@ -0,0 +1,25 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { jsStyles } from './SideMenu.styles';
+/**
+ * Разделитель в выпадающих меню
+ *
+ * @visibleName SideMenu.DropdownMenuSeparator
+ */
+var SideMenuDropdownMenuSeparator = /** @class */ (function (_super) {
+    __extends(SideMenuDropdownMenuSeparator, _super);
+    function SideMenuDropdownMenuSeparator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SideMenuDropdownMenuSeparator.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuDropdownMenuSeparator.prototype.renderMain = function () {
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("hr", { className: jsStyles.dropdownMenuSeparator() })));
+    };
+    SideMenuDropdownMenuSeparator.__KONTUR_REACT_UI__ = 'SideMenuDropdownMenuSeparator';
+    return SideMenuDropdownMenuSeparator;
+}(React.Component));
+export { SideMenuDropdownMenuSeparator };

package/src/SideMenuFooter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+/**
+ * Нижняя часть меню
+ *
+ * @visibleName SideMenu.Footer
+ */
+export declare type SideMenuFooterProps = CommonProps;
+export declare const SideMenuFooter: React.FC<SideMenuFooterProps>;

package/src/SideMenuFooter.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { jsStyles } from './SideMenu.styles';
+export var SideMenuFooter = function (props) { return (React.createElement(CommonWrapper, __assign({}, props),
+    React.createElement("footer", { className: jsStyles.footer() }, props.children))); };
+SideMenuFooter.__KONTUR_REACT_UI__ = 'SideMenuFooter';

package/src/SideMenuHeader.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { LogotypeProps } from '@skbkontur/react-ui-addons/components/Logotype';
+declare type SideMenuHeaderState = {
+    withWidget: boolean;
+    fixed: boolean;
+    size: number;
+};
+export interface SideMenuHeaderProps extends LogotypeProps {
+    iconUrl?: string;
+}
+/**
+ * Контейнер для логотипа
+ *
+ * @visibleName SideMenu.Header
+ */
+export declare class SideMenuHeader extends React.Component<SideMenuHeaderProps, SideMenuHeaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<import("./SideMenuContext").SideMenuContextType>;
+    private widgetTimer;
+    private readonly headerWrapperRef;
+    constructor(props: SideMenuHeaderProps);
+    componentDidMount: () => void;
+    componentWillUnmount(): void;
+    private checkFixed;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private static changeCamelCaseToKebabCase;
+}
+export {};

package/src/SideMenuHeader.js

@@ -0,0 +1,86 @@
+import { __assign, __extends } from "tslib";
+import React from 'react';
+import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { CommonWrapper } from '@skbkontur/react-ui/internal/CommonWrapper';
+import { Logotype } from '@skbkontur/react-ui-addons/components/Logotype';
+import { jsStyles } from './SideMenu.styles';
+import { SideMenuThemeContext } from './SideMenuContext';
+/**
+ * Контейнер для логотипа
+ *
+ * @visibleName SideMenu.Header
+ */
+var SideMenuHeader = /** @class */ (function (_super) {
+    __extends(SideMenuHeader, _super);
+    function SideMenuHeader(props) {
+        var _this = _super.call(this, props) || this;
+        _this.componentDidMount = function () {
+            window.addEventListener('scroll', _this.checkFixed, true);
+            if (_this.headerWrapperRef.current &&
+                _this.headerWrapperRef.current.scrollWidth > _this.headerWrapperRef.current.clientWidth) {
+                _this.setState({ size: 24 });
+            }
+        };
+        _this.checkFixed = function () {
+            if (_this.headerWrapperRef.current && _this.headerWrapperRef.current.offsetTop > 0) {
+                _this.setState({ fixed: true });
+            }
+            else {
+                _this.setState({ fixed: false });
+            }
+        };
+        _this.handleMouseEnter = function () {
+            _this.widgetTimer = setTimeout(function () {
+                _this.setState({ withWidget: true });
+            }, 500);
+        };
+        _this.handleMouseLeave = function () {
+            if (_this.widgetTimer) {
+                clearTimeout(_this.widgetTimer);
+            }
+            _this.setState({ withWidget: false });
+        };
+        _this.state = {
+            withWidget: false,
+            fixed: false,
+            size: 28,
+        };
+        _this.headerWrapperRef = React.createRef();
+        return _this;
+    }
+    SideMenuHeader.prototype.componentWillUnmount = function () {
+        if (this.widgetTimer) {
+            clearTimeout(this.widgetTimer);
+        }
+        window.removeEventListener('scroll', this.checkFixed, true);
+    };
+    SideMenuHeader.prototype.render = function () {
+        return this.renderMain();
+    };
+    SideMenuHeader.prototype.renderMain = function () {
+        var _a;
+        var name = 'kontur';
+        if (this.props.productLogo && typeof this.props.productLogo.type === 'function') {
+            name = this.props.productLogo.type.name;
+            var capitalLetters = name.match(/[A-Z]/g);
+            if (capitalLetters && capitalLetters.length > 1) {
+                name = SideMenuHeader.changeCamelCaseToKebabCase(name, capitalLetters[1]);
+            }
+        }
+        return (React.createElement(CommonWrapper, __assign({}, this.props),
+            React.createElement("header", { className: cx((_a = {},
+                    _a[jsStyles.headerWrapper()] = true,
+                    _a[jsStyles.headerFixedWrapper()] = this.state.fixed,
+                    _a[jsStyles.headerMinimisedWrapper()] = this.context.isMinimised || this.context.isTransitioned,
+                    _a)), ref: this.headerWrapperRef }, this.context.isMinimised || this.context.isTransitioned ? (React.createElement("img", { className: jsStyles.headerIcon(), src: this.props.iconUrl || "https://s.kontur.ru/common-v2/icons-products/" + name + "/" + name + "-32.png", alt: name })) : (React.createElement("div", { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
+                React.createElement(Logotype, __assign({ size: this.state.size }, this.props, { withWidget: this.state.withWidget })))))));
+    };
+    SideMenuHeader.changeCamelCaseToKebabCase = function (str, capitalLetter) {
+        var index = str.split('').indexOf(capitalLetter);
+        return str.substring(0, index) + '-' + str.substring(index);
+    };
+    SideMenuHeader.__KONTUR_REACT_UI__ = 'SideMenuHeader';
+    SideMenuHeader.contextType = SideMenuThemeContext;
+    return SideMenuHeader;
+}(React.Component));
+export { SideMenuHeader };

package/src/SideMenuItem.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { SideMenuContextType } from './SideMenuContext';
+export declare type SideMenuItemProps = {
+    _onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    _onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    children?: React.ReactNode;
+    icon?: React.ReactElement;
+    marker?: string;
+    caption?: string;
+    isSubMenu?: boolean;
+    parent?: React.ReactNode;
+};
+declare type SideMenuItemState = {
+    isOpened: boolean;
+    focusedByTab: boolean;
+    isMultiline: boolean;
+};
+/**
+ * Элемент списка
+ *
+ * @visibleName SideMenu.Item
+ */
+export declare class SideMenuItem extends React.Component<SideMenuItemProps, SideMenuItemState> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SideMenuContextType>;
+    private previousContext;
+    private readonly textRef;
+    private separatedMenu;
+    constructor(props: SideMenuItemProps);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+    private renderInnerSubMenu;
+    private renderSeparatedSubMenu;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private setActive;
+}
+export {};