@skbkontur/side-menu 3.3.3 → 3.3.5-19a67.0

package/src/SideMenu/SideMenu.styles.js

@@ -1,80 +1,149 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStylesForSideMenu = exports.customStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenu_1 = require("./SideMenu");
-var styles = {
-    root: function () {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "], ["\n      position: relative;\n      height: 100%;\n      flex-shrink: 0;\n    "])));
-    },
-    shownRootForTabletsOrMobiles: function () {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      position: absolute;\n      height: 100%;\n    "], ["\n      @supports (height: 100dvh) {\n        height: 100dvh;\n      }\n      position: absolute;\n      height: 100%;\n    "])));
-    },
-    transitionedRootForTabletsOrMobiles: function () {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      position: absolute;\n    "], ["\n      position: absolute;\n    "])));
-    },
-    rootForNarrowDesktops: function (t) {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuMinimizedWidth);
-    },
-    separatedRootForNarrowDesktops: function (t) {
-        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
-    },
-    separatedRootForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuMinimizedWidth, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
-    },
-    separatedRootForTouchScreensForDesktops: function (t) {
-        return (0, Emotion_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidthForTouchScreens, t.sideMenuWidthForTouchScreens, t.sideMenuSeparatedSubMenuBgColor);
-    },
-    separatedRootForDesktops: function (t) {
-        return (0, Emotion_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n      width: calc(", " + ", ");\n      background: ", ";\n    "], ["\n      width: calc(", " + ", ");\n      background: ", ";\n    "])), t.sideMenuWidth, t.sideMenuWidth, t.sideMenuSeparatedSubMenuBgColor);
-    },
-    container: function (t) {
-        return (0, Emotion_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: ", ";\n      height: 100%;\n      background: ", ";\n      position: relative;\n      box-sizing: border-box;\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuBgColor, SideMenu_1.transitionDuration);
-    },
-    minimizedContainer: function (t) {
-        return (0, Emotion_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n      width: ", " !important;\n    "], ["\n      width: ", " !important;\n    "])), t.sideMenuMinimizedWidth);
-    },
-    containerForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
-    },
-    separatedContainerForMobiles: function (t) {
-        return (0, Emotion_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
-    },
-    contentWrapper: function (t) {
-        return (0, Emotion_1.css)(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: ", ";\n    "], ["\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: ", ";\n    "])), t.sideMenuWidth);
-    },
-    contentWrapperForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
-    },
-    minimizedContentWrapper: function () {
-        return (0, Emotion_1.css)(templateObject_15 || (templateObject_15 = tslib_1.__makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
-    },
-    wrapper: function () {
-        return (0, Emotion_1.css)(templateObject_16 || (templateObject_16 = tslib_1.__makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
-    },
-    wrapperIE: function () {
-        var ieRootWrapperCorrection = 15;
-        return (0, Emotion_1.css)(templateObject_17 || (templateObject_17 = tslib_1.__makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
-    },
-    wrapperWithShadow: function (t) {
-        return (0, Emotion_1.css)(templateObject_18 || (templateObject_18 = tslib_1.__makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
-    },
-    collapsedContainerForTabletsOrMobiles: function () {
-        return (0, Emotion_1.css)(templateObject_19 || (templateObject_19 = tslib_1.__makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
-    },
-    list: function () {
-        return (0, Emotion_1.css)(templateObject_20 || (templateObject_20 = tslib_1.__makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
-    },
-    hidden: function () {
-        return (0, Emotion_1.css)(templateObject_21 || (templateObject_21 = tslib_1.__makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenu_1 = require("./SideMenu");
+const styles = {
+    root() {
+        return (0, Emotion_1.css) `
+      position: relative;
+      height: 100%;
+      flex-shrink: 0;
+    `;
+    },
+    shownRootForTabletsOrMobiles() {
+        return (0, Emotion_1.css) `
+      @supports (height: 100dvh) {
+        height: 100dvh;
+      }
+      position: absolute;
+      height: 100%;
+    `;
+    },
+    transitionedRootForTabletsOrMobiles() {
+        return (0, Emotion_1.css) `
+      position: absolute;
+    `;
+    },
+    rootForNarrowDesktops(t) {
+        return (0, Emotion_1.css) `
+      width: ${t.sideMenuMinimizedWidth};
+    `;
+    },
+    separatedRootForNarrowDesktops(t) {
+        return (0, Emotion_1.css) `
+      width: calc(${t.sideMenuMinimizedWidth} + ${t.sideMenuWidth});
+      background: ${t.sideMenuSeparatedSubMenuBgColor};
+    `;
+    },
+    separatedRootForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      width: calc(${t.sideMenuMinimizedWidth} + ${t.sideMenuWidthForTouchScreens});
+      background: ${t.sideMenuSeparatedSubMenuBgColor};
+    `;
+    },
+    separatedRootForTouchScreensForDesktops(t) {
+        return (0, Emotion_1.css) `
+      width: calc(${t.sideMenuWidthForTouchScreens} + ${t.sideMenuWidthForTouchScreens});
+      background: ${t.sideMenuSeparatedSubMenuBgColor};
+    `;
+    },
+    separatedRootForDesktops(t) {
+        return (0, Emotion_1.css) `
+      width: calc(${t.sideMenuWidth} + ${t.sideMenuWidth});
+      background: ${t.sideMenuSeparatedSubMenuBgColor};
+    `;
+    },
+    container(t) {
+        return (0, Emotion_1.css) `
+      width: ${t.sideMenuWidth};
+      height: 100%;
+      background: ${t.sideMenuBgColor};
+      position: relative;
+      box-sizing: border-box;
+      transition: width ${SideMenu_1.transitionDuration}ms ease-out;
+    `;
+    },
+    minimizedContainer(t) {
+        return (0, Emotion_1.css) `
+      width: ${t.sideMenuMinimizedWidth} !important;
+    `;
+    },
+    containerForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      width: ${t.sideMenuWidthForTouchScreens};
+    `;
+    },
+    separatedContainerForMobiles(t) {
+        return (0, Emotion_1.css) `
+      background: ${t.sideMenuSeparatedSubMenuBgColor};
+    `;
+    },
+    contentWrapper(t) {
+        return (0, Emotion_1.css) `
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: ${t.sideMenuWidth};
+    `;
+    },
+    contentWrapperForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      width: ${t.sideMenuWidthForTouchScreens};
+    `;
+    },
+    minimizedContentWrapper() {
+        return (0, Emotion_1.css) `
+      width: 100%;
+    `;
+    },
+    wrapper() {
+        return (0, Emotion_1.css) `
+      height: 100%;
+      display: inline-flex;
+      position: relative;
+    `;
+    },
+    wrapperIE() {
+        const ieRootWrapperCorrection = 15;
+        return (0, Emotion_1.css) `
+      position: relative;
+      top: -${ieRootWrapperCorrection};
+      height: calc(100% + ${ieRootWrapperCorrection});
+    `;
+    },
+    wrapperWithShadow(t) {
+        return (0, Emotion_1.css) `
+      box-shadow: ${t.sideMenuBoxShadow};
+    `;
+    },
+    collapsedContainerForTabletsOrMobiles() {
+        return (0, Emotion_1.css) `
+      background-color: transparent;
+    `;
+    },
+    list() {
+        return (0, Emotion_1.css) `
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    `;
+    },
+    hidden() {
+        return (0, Emotion_1.css) `
+      display: none;
+    `;
     },
 };
 exports.customStyles = {
-    rootForTabletsOrMobiles: function (headerHeight) {
-        return (0, Emotion_1.css)(templateObject_22 || (templateObject_22 = tslib_1.__makeTemplateObject(["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, SideMenu_1.burgerTransitionDuration);
+    rootForTabletsOrMobiles(headerHeight) {
+        return (0, Emotion_1.css) `
+      height: ${headerHeight}px;
+      top: 0;
+      transition: height ${SideMenu_1.burgerTransitionDuration}ms ease-out;
+    `;
     },
 };
 exports.jsStylesForSideMenu = (0, ThemeHelpers_1.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;

package/src/SideMenuAvatar/SideMenuAvatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { UserAvatarProps } from '@skbkontur/react-ui-addons/';
+import type { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
 import type { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
 export interface SideMenuAvatarProps extends Omit<UserAvatarProps, 'style'>, Omit<SideMenuDropdownProps, 'icon'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
 }

package/src/SideMenuAvatar/SideMenuAvatar.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideMenuAvatar = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var react_ui_addons_1 = require("@skbkontur/react-ui-addons/");
-var react_ui_1 = require("@skbkontur/react-ui");
-var SideMenuDropdown_1 = require("../SideMenuDropdown/SideMenuDropdown");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenuAvatarInner = (0, react_1.forwardRef)(function (_a, ref) {
-    var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, caption = _a.caption, _b = _a.menuWidth, menuWidth = _b === void 0 ? 200 : _b, rest = tslib_1.__rest(_a, ["userName", "avatarUrl", "children", "icon", "caption", "menuWidth"]);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    return (react_1.default.createElement(SideMenuDropdown_1.SideMenuDropdown, tslib_1.__assign({ icon: react_1.default.createElement(react_ui_addons_1.UserAvatar, { userName: userName, avatarUrl: avatarUrl, style: { width: theme.sideMenuAvatarSize, height: theme.sideMenuAvatarSize } }), caption: userName || caption, menuWidth: menuWidth, positions: ['top left'], _isAvatar: true, ref: ref }, rest), children));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const UserAvatar_1 = require("@skbkontur/react-ui-addons/components/UserAvatar");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const SideMenuDropdown_1 = require("../SideMenuDropdown/SideMenuDropdown");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenuAvatarInner = (0, react_1.forwardRef)(({ userName, avatarUrl, children, icon, caption, menuWidth = 200, ...rest }, ref) => {
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    return (react_1.default.createElement(SideMenuDropdown_1.SideMenuDropdown, { icon: react_1.default.createElement(UserAvatar_1.UserAvatar, { userName: userName, avatarUrl: avatarUrl, style: { width: theme.sideMenuAvatarSize, height: theme.sideMenuAvatarSize } }), caption: userName || caption, menuWidth: menuWidth, positions: ['top left'], _isAvatar: true, ref: ref, ...rest }, children));
 });
 SideMenuAvatarInner.displayName = 'SideMenuAvatar';
 /**

package/src/SideMenuBody/SideMenuBody.js

@@ -1,25 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideMenuBody = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
-var SideMenuContext_1 = require("../SideMenuContext");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
-var SideMenuBody_styles_1 = require("./SideMenuBody.styles");
-var SideMenuBodyInner = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var className = _a.className, children = _a.children, rest = tslib_1.__rest(_a, ["className", "children"]);
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
-    return (react_1.default.createElement("div", { ref: ref, className: (0, Emotion_1.cx)((_b = {},
-            _b[SideMenuBody_styles_1.jsStyles.root(theme)] = true,
-            _b[SideMenu_styles_1.jsStylesForSideMenu.hidden()] = !context.isOpened && (context.isMobile || context.isTablet),
-            _b)) },
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const SideMenuContext_1 = require("../SideMenuContext");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
+const SideMenuBody_styles_1 = require("./SideMenuBody.styles");
+const SideMenuBodyInner = (0, react_1.forwardRef)(({ className, children, ...rest }, ref) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    return (react_1.default.createElement("div", { ref: ref, className: (0, Emotion_1.cx)({
+            [SideMenuBody_styles_1.jsStyles.root(theme)]: true,
+            [SideMenu_styles_1.jsStylesForSideMenu.hidden()]: !context.isOpened && (context.isMobile || context.isTablet),
+        }) },
         react_1.default.createElement("nav", null,
-            react_1.default.createElement("ul", tslib_1.__assign({ className: (0, Emotion_1.cx)((_c = {}, _c[SideMenu_styles_1.jsStylesForSideMenu.list()] = true, _c[SideMenuBody_styles_1.jsStyles.wrapper(theme)] = true, _c)) }, rest), children))));
+            react_1.default.createElement("ul", { className: (0, Emotion_1.cx)({ [SideMenu_styles_1.jsStylesForSideMenu.list()]: true, [SideMenuBody_styles_1.jsStyles.wrapper(theme)]: true }), ...rest }, children))));
 });
 SideMenuBodyInner.displayName = 'SideMenuBody';
 /**

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -1,16 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var styles = {
-    root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      flex-grow: 1;\n      margin: 0 ", ";\n      min-height: 100%;\n    "], ["\n      flex-grow: 1;\n      margin: 0 ", ";\n      min-height: 100%;\n    "])), t.sideMenuMarginX);
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      flex-grow: 1;
+      margin: 0 ${t.sideMenuMarginX};
+      min-height: 100%;
+    `;
     },
-    wrapper: function (t) {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sideMenuBodyPaddingBottom);
+    wrapper(t) {
+        return (0, Emotion_1.css) `
+      padding-bottom: ${t.sideMenuBodyPaddingBottom};
+    `;
     },
 };
 exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
-var templateObject_1, templateObject_2;

package/src/SideMenuContext.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { ScrollContainerScrollStateY } from '@skbkontur/react-ui';
+import type { ScrollContainerScrollStateY } from '@skbkontur/react-ui/components/ScrollContainer';
 import type { showScrollBarType } from './SideMenu/SideMenu';
 import type { MenuNavigation } from './Navigation';
 export interface SideMenuContextType {

package/src/SideMenuContext.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideMenuContext = void 0;
-var react_1 = require("react");
+const react_1 = require("react");
 exports.SideMenuContext = (0, react_1.createContext)({});

package/src/SideMenuDivider/SideMenuDivider.js

@@ -1,17 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideMenuDivider = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var react_ui_1 = require("@skbkontur/react-ui");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenuDivider_styles_1 = require("./SideMenuDivider.styles");
-var SideMenuDividerInner = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var className = _a.className, rest = tslib_1.__rest(_a, ["className"]);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    return react_1.default.createElement("hr", tslib_1.__assign({ className: (0, Emotion_1.cx)((_b = {}, _b[SideMenuDivider_styles_1.jsStyles.root(theme)] = true, _b), className), ref: ref }, rest));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenuDivider_styles_1 = require("./SideMenuDivider.styles");
+const SideMenuDividerInner = (0, react_1.forwardRef)(({ className, ...rest }, ref) => {
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    return react_1.default.createElement("hr", { className: (0, Emotion_1.cx)({ [SideMenuDivider_styles_1.jsStyles.root(theme)]: true }, className), ref: ref, ...rest });
 });
 SideMenuDividerInner.displayName = 'SideMenuDivider';
 /**

package/src/SideMenuDivider/SideMenuDivider.styles.js

@@ -1,13 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var styles = {
-    root: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      height: 1px;\n      border: none;\n      background: ", ";\n      margin: ", " ", ";\n    "], ["\n      height: 1px;\n      border: none;\n      background: ", ";\n      margin: ", " ", ";\n    "])), t.sideMenuDividerBgColor, t.sideMenuDividerMarginY, t.sideMenuDividerMarginX);
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const styles = {
+    root(t) {
+        return (0, Emotion_1.css) `
+      height: 1px;
+      border: none;
+      background: ${t.sideMenuDividerBgColor};
+      margin: ${t.sideMenuDividerMarginY} ${t.sideMenuDividerMarginX};
+    `;
     },
 };
 exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
-var templateObject_1;

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DropdownMenuProps } from '@skbkontur/react-ui';
+import type { DropdownMenuProps } from '@skbkontur/react-ui/components/DropdownMenu';
 import type { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 import type { SideMenuItemProps } from '../SideMenuItem/SideMenuItem';
 export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'marker' | 'id' | 'subCaption' | '_isAvatar'> {

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -1,43 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideMenuDropdown = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var react_ui_1 = require("@skbkontur/react-ui");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var SideMenuItem_1 = require("../SideMenuItem/SideMenuItem");
-var SideMenuContext_1 = require("../SideMenuContext");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenuDropdown_styles_1 = require("./SideMenuDropdown.styles");
-var SideMenuDropdownInner = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var icon = _a.icon, id = _a.id, children = _a.children, caption = _a.caption, marker = _a.marker, subCaption = _a.subCaption, className = _a.className, menuWidth = _a.menuWidth, _isAvatar = _a._isAvatar, onClose = _a.onClose, onOpen = _a.onOpen, rest = tslib_1.__rest(_a, ["icon", "id", "children", "caption", "marker", "subCaption", "className", "menuWidth", "_isAvatar", "onClose", "onOpen"]);
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(react_ui_1.ThemeContext));
-    var handleOpen = function () {
-        var _a;
-        (_a = context.handleDropDownOpen) === null || _a === void 0 ? void 0 : _a.call(context);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const DropdownMenu_1 = require("@skbkontur/react-ui/components/DropdownMenu");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const SideMenuItem_1 = require("../SideMenuItem/SideMenuItem");
+const SideMenuContext_1 = require("../SideMenuContext");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenuDropdown_styles_1 = require("./SideMenuDropdown.styles");
+const SideMenuDropdownInner = (0, react_1.forwardRef)(({ icon, id, children, caption, marker, subCaption, className, menuWidth, _isAvatar, onClose, onOpen, ...rest }, ref) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const handleOpen = () => {
+        context.handleDropDownOpen?.();
+        onOpen?.();
     };
-    var handleClose = function () {
-        var _a;
-        (_a = context.handleDropDownClose) === null || _a === void 0 ? void 0 : _a.call(context);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+    const handleClose = () => {
+        context.handleDropDownClose?.();
+        onClose?.();
     };
-    return (react_1.default.createElement("li", { className: (0, Emotion_1.cx)((_b = {}, _b[SideMenuDropdown_styles_1.jsStyles.wrapper()] = true, _b), className), ref: ref },
-        react_1.default.createElement(react_ui_1.DropdownMenu, tslib_1.__assign({ caption: react_1.default.createElement("div", { className: (0, Emotion_1.cx)((_c = {},
-                    _c[SideMenuDropdown_styles_1.jsStyles.label(theme)] = true,
-                    _c[SideMenuDropdown_styles_1.jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
-                    _c[SideMenuDropdown_styles_1.jsStyles.minimizedLabel()] = !context.isOpened,
-                    _c)) },
-                react_1.default.createElement(SideMenuItem_1.SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth, onOpen: handleOpen, onClose: handleClose }, rest), react_1.default.Children.map(children, function (child) {
+    return (react_1.default.createElement("li", { className: (0, Emotion_1.cx)({ [SideMenuDropdown_styles_1.jsStyles.wrapper()]: true }, className), ref: ref },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { caption: react_1.default.createElement("div", { className: (0, Emotion_1.cx)({
+                    [SideMenuDropdown_styles_1.jsStyles.label(theme)]: true,
+                    [SideMenuDropdown_styles_1.jsStyles.labelForTouchScreens(theme)]: context.isTouchScreen,
+                    [SideMenuDropdown_styles_1.jsStyles.minimizedLabel()]: !context.isOpened,
+                }) },
+                react_1.default.createElement(SideMenuItem_1.SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth, onOpen: handleOpen, onClose: handleClose, ...rest }, react_1.default.Children.map(children, (child) => {
             // @ts-expect-error: accessing private property
-            if (react_1.default.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
+            if (react_1.default.isValidElement(child) && child?.type.__KONTUR_REACT_UI__ === 'MenuItem') {
                 return react_1.default.cloneElement(child, {
-                    onClick: function () {
-                        var _a, _b, _c;
-                        (_a = context.toggleIsOpened) === null || _a === void 0 ? void 0 : _a.call(context);
-                        (_c = (_b = child.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
+                    onClick: () => {
+                        context.toggleIsOpened?.();
+                        child.props.onClick?.();
                     },
                 });
             }

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -1,23 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsStyles = void 0;
-var tslib_1 = require("tslib");
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenu_1 = require("../SideMenu/SideMenu");
-var styles = {
-    label: function (t) {
-        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      width: calc(", " - 2 * ", ");\n      transition: width ", "ms ease-out;\n    "], ["\n      width: calc(", " - 2 * ", ");\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuMarginX, SideMenu_1.transitionDuration);
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenu_1 = require("../SideMenu/SideMenu");
+const styles = {
+    label(t) {
+        return (0, Emotion_1.css) `
+      width: calc(${t.sideMenuWidth} - 2 * ${t.sideMenuMarginX});
+      transition: width ${SideMenu_1.transitionDuration}ms ease-out;
+    `;
     },
-    labelForTouchScreens: function (t) {
-        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      width: calc(", " - 2 * ", ");\n    "], ["\n      width: calc(", " - 2 * ", ");\n    "])), t.sideMenuWidthForTouchScreens, t.sideMenuMarginX);
+    labelForTouchScreens(t) {
+        return (0, Emotion_1.css) `
+      width: calc(${t.sideMenuWidthForTouchScreens} - 2 * ${t.sideMenuMarginX});
+    `;
     },
-    minimizedLabel: function () {
-        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+    minimizedLabel() {
+        return (0, Emotion_1.css) `
+      width: 100%;
+    `;
     },
-    wrapper: function () {
-        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+    wrapper() {
+        return (0, Emotion_1.css) `
+      overflow-x: hidden;
+    `;
     },
 };
 exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/src/SideMenuFooter/SideMenuFooter.js

@@ -1,30 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideMenuFooter = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
-var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
-var SideMenuContext_1 = require("../SideMenuContext");
-var SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
-var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
-var SideMenuDataTids_1 = require("../../SideMenuDataTids");
-var SideMenuFooter_styles_1 = require("./SideMenuFooter.styles");
-var SideMenuFooterInner = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var className = _a.className, children = _a.children, rest = tslib_1.__rest(_a, ["className", "children"]);
-    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
-    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
-    var _c = tslib_1.__read((0, react_1.useState)(false), 2), isFixed = _c[0], setIsFixed = _c[1];
-    (0, react_1.useEffect)(function () {
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+const ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+const SideMenuContext_1 = require("../SideMenuContext");
+const SideMenu_styles_1 = require("../SideMenu/SideMenu.styles");
+const ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+const SideMenuDataTids_1 = require("../../SideMenuDataTids");
+const SideMenuFooter_styles_1 = require("./SideMenuFooter.styles");
+const SideMenuFooterInner = (0, react_1.forwardRef)(({ className, children, ...rest }, ref) => {
+    const context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    const theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    const [isFixed, setIsFixed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
     }, [context.hasScrollBar, context.scrollState]);
     if (!(context.isMobile || context.isTablet) || (context.isOpened && (context.isMobile || context.isTablet))) {
-        return (react_1.default.createElement("footer", tslib_1.__assign({ "data-tid": SideMenuDataTids_1.SideMenuDataTids.footer, "data-visual-state-fixed": isFixed, className: (0, Emotion_1.cx)((_b = {},
-                _b[SideMenuFooter_styles_1.jsStyles.root(theme)] = true,
-                _b[SideMenuFooter_styles_1.jsStyles.rootFixed(theme)] = isFixed,
-                _b[SideMenuFooter_styles_1.jsStyles.rootTransitionedForTabletsOrMobiles()] = context.isBeingTransitioned && (context.isMobile || context.isTablet),
-                _b), className), ref: ref }, rest),
+        return (react_1.default.createElement("footer", { "data-tid": SideMenuDataTids_1.SideMenuDataTids.footer, "data-visual-state-fixed": isFixed, className: (0, Emotion_1.cx)({
+                [SideMenuFooter_styles_1.jsStyles.root(theme)]: true,
+                [SideMenuFooter_styles_1.jsStyles.rootFixed(theme)]: isFixed,
+                [SideMenuFooter_styles_1.jsStyles.rootTransitionedForTabletsOrMobiles()]: context.isBeingTransitioned && (context.isMobile || context.isTablet),
+            }, className), ref: ref, ...rest },
             react_1.default.createElement("ul", { className: SideMenu_styles_1.jsStylesForSideMenu.list() }, children)));
     }
     return null;