@skbkontur/side-menu 3.2.7 → 3.3.0

package/src/SideMenuBody/SideMenuBody.styles.js

@@ -1,13 +1,16 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+"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 css(templateObject_1 || (templateObject_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);
+        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);
     },
     wrapper: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sideMenuBodyPaddingBottom);
+        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sideMenuBodyPaddingBottom);
     },
 };
-export var jsStyles = memoizeStyle(styles);
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
 var templateObject_1, templateObject_2;

package/src/SideMenuContext.d.ts

@@ -26,5 +26,8 @@ export interface SideMenuContextType {
     showScrollBar?: showScrollBarType;
     sideMenuRef?: RefObject<HTMLDivElement>;
     navigation?: MenuNavigation | null;
+    openDropdownCount?: number;
+    handleDropDownOpen?: () => void;
+    handleDropDownClose?: () => void;
 }
 export declare const SideMenuContext: import("react").Context<SideMenuContextType>;

package/src/SideMenuContext.js

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

package/src/SideMenuDivider/SideMenuDivider.js

@@ -1,14 +1,17 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { jsStyles } from './SideMenuDivider.styles';
-var SideMenuDividerInner = forwardRef(function (_a, ref) {
+"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 = __rest(_a, ["className"]);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.root(theme)] = true, _b), className), ref: ref }, rest));
+    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));
 });
 SideMenuDividerInner.displayName = 'SideMenuDivider';
 /**
@@ -16,4 +19,4 @@ SideMenuDividerInner.displayName = 'SideMenuDivider';
  *
  * @visibleName SideMenu.Divider
  */
-export var SideMenuDivider = Object.assign(SideMenuDividerInner, { __KONTUR_REACT_UI__: 'SideMenuDivider' });
+exports.SideMenuDivider = Object.assign(SideMenuDividerInner, { __KONTUR_REACT_UI__: 'SideMenuDivider' });

package/src/SideMenuDivider/SideMenuDivider.styles.js

@@ -1,10 +1,13 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+"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 css(templateObject_1 || (templateObject_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);
+        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);
     },
 };
-export var jsStyles = memoizeStyle(styles);
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
 var templateObject_1;

package/src/SideMenuDropdown/SideMenuDropdown.js

@@ -1,26 +1,39 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext } from 'react';
-import { ThemeContext, DropdownMenu } from '@skbkontur/react-ui';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
-import { SideMenuContext } from '../SideMenuContext';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { jsStyles } from './SideMenuDropdown.styles';
-var SideMenuDropdownInner = forwardRef(function (_a, ref) {
+"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, rest = __rest(_a, ["icon", "id", "children", "caption", "marker", "subCaption", "className", "menuWidth", "_isAvatar"]);
-    var context = useContext(SideMenuContext);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    return (React.createElement("li", { className: cx((_b = {}, _b[jsStyles.wrapper()] = true, _b), className), ref: ref },
-        React.createElement(DropdownMenu, __assign({ caption: React.createElement("div", { className: cx((_c = {},
-                    _c[jsStyles.label(theme)] = true,
-                    _c[jsStyles.labelForTouchScreens(theme)] = context.isTouchScreen,
-                    _c[jsStyles.minimizedLabel()] = !context.isOpened,
+    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();
+    };
+    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();
+    };
+    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.createElement(SideMenuItem, { icon: icon, caption: caption, subCaption: subCaption, marker: marker, id: id, _isDropdown: true, _isAvatar: _isAvatar })), positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), React.Children.map(children, function (child) {
+                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) {
             // @ts-expect-error: accessing private property
-            if (React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'MenuItem') {
-                return React.cloneElement(child, {
+            if (react_1.default.isValidElement(child) && (child === null || child === void 0 ? void 0 : 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);
@@ -37,4 +50,4 @@ SideMenuDropdownInner.displayName = 'SideMenuDropdown';
  *
  * @visibleName SideMenu.Dropdown
  */
-export var SideMenuDropdown = Object.assign(SideMenuDropdownInner, { __KONTUR_REACT_UI__: 'SideMenuDropdown' });
+exports.SideMenuDropdown = Object.assign(SideMenuDropdownInner, { __KONTUR_REACT_UI__: 'SideMenuDropdown' });

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -1,20 +1,23 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
-import { transitionDuration } from '../SideMenu/SideMenu';
+"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 css(templateObject_1 || (templateObject_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, transitionDuration);
+        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);
     },
     labelForTouchScreens: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: calc(", " - 2 * ", ");\n    "], ["\n      width: calc(", " - 2 * ", ");\n    "])), t.sideMenuWidthForTouchScreens, t.sideMenuMarginX);
+        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);
     },
     minimizedLabel: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
     wrapper: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
 };
-export var jsStyles = memoizeStyle(styles);
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/src/SideMenuFooter/SideMenuFooter.js

@@ -1,28 +1,31 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useState } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { SideMenuContext } from '../SideMenuContext';
-import { jsStylesForSideMenu } from '../SideMenu/SideMenu.styles';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { SideMenuDataTids } from '../../SideMenuDataTids';
-import { jsStyles } from './SideMenuFooter.styles';
-var SideMenuFooterInner = forwardRef(function (_a, ref) {
+"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 = __rest(_a, ["className", "children"]);
-    var context = useContext(SideMenuContext);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var _c = __read(useState(false), 2), isFixed = _c[0], setIsFixed = _c[1];
-    useEffect(function () {
+    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 () {
         setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
     }, [context.hasScrollBar, context.scrollState]);
     if (!(context.isMobile || context.isTablet) || (context.isOpened && (context.isMobile || context.isTablet))) {
-        return (React.createElement("footer", __assign({ "data-tid": SideMenuDataTids.footer, "data-visual-state-fixed": isFixed, className: cx((_b = {},
-                _b[jsStyles.root(theme)] = true,
-                _b[jsStyles.rootFixed(theme)] = isFixed,
-                _b[jsStyles.rootTransitionedForTabletsOrMobiles()] = context.isBeingTransitioned && (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),
-            React.createElement("ul", { className: jsStylesForSideMenu.list() }, children)));
+            react_1.default.createElement("ul", { className: SideMenu_styles_1.jsStylesForSideMenu.list() }, children)));
     }
     return null;
 });
@@ -32,4 +35,4 @@ SideMenuFooterInner.displayName = 'SideMenuFooter';
  *
  * @visibleName SideMenu.Footer
  */
-export var SideMenuFooter = Object.assign(SideMenuFooterInner, { __KONTUR_REACT_UI__: 'SideMenuFooter' });
+exports.SideMenuFooter = Object.assign(SideMenuFooterInner, { __KONTUR_REACT_UI__: 'SideMenuFooter' });

package/src/SideMenuFooter/SideMenuFooter.styles.js

@@ -1,16 +1,19 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+"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 css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "], ["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "])), t.sideMenuFooterPaddingBottom, t.sideMenuFooterPaddingTop, t.sideMenuMarginX, t.sideMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "], ["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "])), t.sideMenuFooterPaddingBottom, t.sideMenuFooterPaddingTop, t.sideMenuMarginX, t.sideMenuBgColor);
     },
     rootFixed: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: 0 -1px 0 ", ";\n    "], ["\n      box-shadow: 0 -1px 0 ", ";\n    "])), t.sideMenuFooterDividerColor);
+        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      box-shadow: 0 -1px 0 ", ";\n    "], ["\n      box-shadow: 0 -1px 0 ", ";\n    "])), t.sideMenuFooterDividerColor);
     },
     rootTransitionedForTabletsOrMobiles: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));
+        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));
     },
 };
-export var jsStyles = memoizeStyle(styles);
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
 var templateObject_1, templateObject_2, templateObject_3;

package/src/SideMenuHeader/SideMenuHeader.js

@@ -1,34 +1,37 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useEffect, useRef } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { getDOMRect } from '@skbkontur/react-ui/lib/dom/getDOMRect';
-import { SideMenuContext } from '../SideMenuContext';
-import { SideMenuLogotype } from '../internal/SideMenuLogotype';
-import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
-import { jsStyles } from './SideMenuHeader.styles';
-var SideMenuHeaderInner = forwardRef(function (_a, ref) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuHeader = 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 utils_1 = require("@skbkontur/react-ui/lib/utils");
+var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+var getDOMRect_1 = require("@skbkontur/react-ui/lib/dom/getDOMRect");
+var SideMenuContext_1 = require("../SideMenuContext");
+var SideMenuLogotype_1 = require("../internal/SideMenuLogotype");
+var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var SideMenuHeader_styles_1 = require("./SideMenuHeader.styles");
+var SideMenuHeaderInner = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
     var _c;
-    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, _d = _a.withWidget, withWidget = _d === void 0 ? true : _d, dataTid = _a["data-tid"], rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
-    var context = useContext(SideMenuContext);
-    var theme = getSideMenuTheme(useContext(ThemeContext));
-    var headerWrapperRef = useRef(null);
-    useEffect(function () {
+    var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, _d = _a.withWidget, withWidget = _d === void 0 ? true : _d, dataTid = _a["data-tid"], rest = tslib_1.__rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget", 'data-tid']);
+    var context = (0, react_1.useContext)(SideMenuContext_1.SideMenuContext);
+    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    var headerWrapperRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
         var _a;
         if (headerWrapperRef.current) {
-            (_a = context.setHeaderHeight) === null || _a === void 0 ? void 0 : _a.call(context, getDOMRect(headerWrapperRef.current).height);
+            (_a = context.setHeaderHeight) === null || _a === void 0 ? void 0 : _a.call(context, (0, getDOMRect_1.getDOMRect)(headerWrapperRef.current).height);
         }
     }, []);
-    return (React.createElement("header", { className: cx((_b = {},
-            _b[jsStyles.root(theme)] = true,
-            _b[jsStyles.rootForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
-            _b[jsStyles.fixedRoot(theme)] = context.isOpened && !!context.hasScrollBar && !(context.scrollState === 'top'),
-            _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isOpened && (context.isMobile || context.isTablet),
-            _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isOpened && context.isMobile && ((_c = context.navigation) === null || _c === void 0 ? void 0 : _c.isSeparatedMenuShown),
-            _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style, "data-tid": dataTid },
-        React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
+    return (react_1.default.createElement("header", { className: (0, Emotion_1.cx)((_b = {},
+            _b[SideMenuHeader_styles_1.jsStyles.root(theme)] = true,
+            _b[SideMenuHeader_styles_1.jsStyles.rootForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
+            _b[SideMenuHeader_styles_1.jsStyles.fixedRoot(theme)] = context.isOpened && !!context.hasScrollBar && !(context.scrollState === 'top'),
+            _b[SideMenuHeader_styles_1.jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isOpened && (context.isMobile || context.isTablet),
+            _b[SideMenuHeader_styles_1.jsStyles.rootWithSeparatedMenuShown(theme)] = context.isOpened && context.isMobile && ((_c = context.navigation) === null || _c === void 0 ? void 0 : _c.isSeparatedMenuShown),
+            _b), className), ref: (0, utils_1.mergeRefs)([headerWrapperRef, ref]), style: style, "data-tid": dataTid },
+        react_1.default.createElement(SideMenuLogotype_1.SideMenuLogotype, tslib_1.__assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });
 SideMenuHeaderInner.displayName = 'SideMenuHeader';
 /**
@@ -36,4 +39,4 @@ SideMenuHeaderInner.displayName = 'SideMenuHeader';
  *
  * @visibleName SideMenu.Header
  */
-export var SideMenuHeader = Object.assign(SideMenuHeaderInner, { __KONTUR_REACT_UI__: 'SideMenuHeader' });
+exports.SideMenuHeader = Object.assign(SideMenuHeaderInner, { __KONTUR_REACT_UI__: 'SideMenuHeader' });

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -1,22 +1,25 @@
-import { __makeTemplateObject } from "tslib";
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
+"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 css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: ", " 0 ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: ", " 0 ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "])), t.sideMenuMarginX, t.sideMenuHeaderPaddingTop, t.sideMenuHeaderPaddingBottom, t.sideMenuMarginX, t.sideMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: ", " 0 ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: ", " 0 ", ";\n      margin: 0 ", ";\n      background-color: ", ";\n    "])), t.sideMenuMarginX, t.sideMenuHeaderPaddingTop, t.sideMenuHeaderPaddingBottom, t.sideMenuMarginX, t.sideMenuBgColor);
     },
     rootForTabletsOrMobiles: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.sideMenuHeaderPaddingTopForTouchScreens);
+        return (0, Emotion_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.sideMenuHeaderPaddingTopForTouchScreens);
     },
     collapsedRootForTabletsOrMobiles: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
+        return (0, Emotion_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
     },
     rootWithSeparatedMenuShown: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      z-index: 9000;\n    "], ["\n      background: ", ";\n      z-index: 9000;\n    "])), t.sideMenuSeparatedSubMenuBgColor);
+        return (0, Emotion_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n      background: ", ";\n      z-index: 9000;\n    "], ["\n      background: ", ";\n      z-index: 9000;\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
     fixedRoot: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: 0 1px 0 ", ";\n    "], ["\n      box-shadow: 0 1px 0 ", ";\n    "])), t.sideMenuHeaderDividerColor);
+        return (0, Emotion_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      box-shadow: 0 1px 0 ", ";\n    "], ["\n      box-shadow: 0 1px 0 ", ";\n    "])), t.sideMenuHeaderDividerColor);
     },
 };
-export var jsStyles = memoizeStyle(styles);
+exports.jsStyles = (0, ThemeHelpers_1.memoizeStyle)(styles);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/src/SideMenuItem/SideMenuItem.js

@@ -1,9 +1,12 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
-import { ClickableElement } from '../internal/ClickableElement';
-var SideMenuItemInner = forwardRef(function (_a, ref) {
-    var component = _a.component, rest = __rest(_a, ["component"]);
-    return React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'button' }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var ClickableElement_1 = require("../internal/ClickableElement");
+var SideMenuItemInner = (0, react_1.forwardRef)(function (_a, ref) {
+    var component = _a.component, rest = tslib_1.__rest(_a, ["component"]);
+    return react_1.default.createElement(ClickableElement_1.ClickableElement, tslib_1.__assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'button' }));
 });
 SideMenuItemInner.displayName = 'SideMenuItem';
 /**
@@ -13,4 +16,4 @@ SideMenuItemInner.displayName = 'SideMenuItem';
  *
  * @visibleName SideMenu.Item
  */
-export var SideMenuItem = Object.assign(SideMenuItemInner, { __KONTUR_REACT_UI__: 'SideMenuItem' });
+exports.SideMenuItem = Object.assign(SideMenuItemInner, { __KONTUR_REACT_UI__: 'SideMenuItem' });

package/src/SideMenuLink/SideMenuLink.js

@@ -1,12 +1,15 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
-import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { ClickableElement } from '../internal/ClickableElement';
-import { jsStyles } from './SideMenuLink.styles';
-var SideMenuLinkInner = forwardRef(function (_a, ref) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideMenuLink = 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 ClickableElement_1 = require("../internal/ClickableElement");
+var SideMenuLink_styles_1 = require("./SideMenuLink.styles");
+var SideMenuLinkInner = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
-    var className = _a.className, component = _a.component, rest = __rest(_a, ["className", "component"]);
-    return (React.createElement(ClickableElement, __assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'a', className: cx((_b = {}, _b[jsStyles.link()] = true, _b), className) })));
+    var className = _a.className, component = _a.component, rest = tslib_1.__rest(_a, ["className", "component"]);
+    return (react_1.default.createElement(ClickableElement_1.ClickableElement, tslib_1.__assign({}, rest, { ref: ref, element: component !== null && component !== void 0 ? component : 'a', className: (0, Emotion_1.cx)((_b = {}, _b[SideMenuLink_styles_1.jsStyles.link()] = true, _b), className) })));
 });
 SideMenuLinkInner.displayName = 'SideMenuLink';
 /**
@@ -18,4 +21,4 @@ SideMenuLinkInner.displayName = 'SideMenuLink';
  *
  * @visibleName SideMenu.Link
  */
-export var SideMenuLink = Object.assign(SideMenuLinkInner, { __KONTUR_REACT_UI__: 'SideMenuLink' });
+exports.SideMenuLink = Object.assign(SideMenuLinkInner, { __KONTUR_REACT_UI__: 'SideMenuLink' });

package/src/SideMenuLink/SideMenuLink.styles.js

@@ -1,9 +1,12 @@
-import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+"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 styles = {
     link: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      text-decoration: none;\n      display: inline-block;\n    "], ["\n      text-decoration: none;\n      display: inline-block;\n    "])));
+        return (0, Emotion_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      text-decoration: none;\n      display: inline-block;\n    "], ["\n      text-decoration: none;\n      display: inline-block;\n    "])));
     },
 };
-export var jsStyles = memoizeStyle(styles);
+exports.jsStyles = (0, Emotion_1.memoizeStyle)(styles);
 var templateObject_1;

package/src/SideMenuNotifications/BellWidget.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { OperationResult } from '@skbkontur/operation-result';
+import type { ImportFaults, WidgetApi, RenderFault, RenderDisposeFault } from '@skbkontur/bell-widget-npm-loader' assert { 'resolution-mode': 'import' };
+export interface BellWidgetProps {
+    widgetApi: Promise<OperationResult<ImportFaults, WidgetApi>>;
+    onClose(): void;
+    onError?: (error: ImportFaults | RenderFault | RenderDisposeFault) => void;
+    renderErrorButton?: (error: ImportFaults | RenderFault, retryRender: () => void) => React.ReactNode;
+    renderErrorMessage?: (error: ImportFaults | RenderFault, retryRender: () => void) => React.ReactNode;
+}
+export declare const BellWidget: React.FC<BellWidgetProps>;

package/src/SideMenuNotifications/BellWidget.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BellWidget = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var XIcon20Regular_1 = require("@skbkontur/icons/icons/XIcon/XIcon20Regular");
+var Center_1 = require("@skbkontur/react-ui/components/Center/Center");
+var Spinner_1 = require("@skbkontur/react-ui/components/Spinner/Spinner");
+var Button_1 = require("@skbkontur/react-ui/components/Button/Button");
+var ThemeContext_1 = require("@skbkontur/react-ui/lib/theming/ThemeContext");
+var Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
+var operation_result_1 = require("@skbkontur/operation-result");
+var widget_consumer_react_utils_1 = require("@skbkontur/widget-consumer-react-utils");
+var SideMenuDataTids_1 = require("../../SideMenuDataTids");
+var ThemeHelpers_1 = require("../../lib/theming/ThemeHelpers");
+var SideMenuTheme_1 = require("../../internal/themes/SideMenuTheme");
+var BellWidgetView_styles_1 = require("./BellWidgetView.styles");
+var SideMenuNotifications_1 = require("./SideMenuNotifications");
+var BellWidgetError_1 = require("./BellWidgetError");
+var getBtnTopPosition = function () {
+    var _a;
+    var bellDropDownItem = document.querySelector("[data-item=\"".concat(SideMenuNotifications_1.BELL_SIDE_MENU_DATA_ITEM, "\"]"));
+    return (_a = bellDropDownItem === null || bellDropDownItem === void 0 ? void 0 : bellDropDownItem.offsetTop) !== null && _a !== void 0 ? _a : 0;
+};
+var BellWidget = function (props) {
+    var widgetApi = props.widgetApi, onClose = props.onClose, renderErrorButton = props.renderErrorButton, renderErrorMessage = props.renderErrorMessage, onError = props.onError;
+    var btnTopPosition = getBtnTopPosition();
+    var theme = (0, ThemeHelpers_1.getSideMenuTheme)((0, react_1.useContext)(ThemeContext_1.ThemeContext));
+    var hasCustomWrapperHeight = theme.sideMenuNotificationsWrapperHeight !== SideMenuTheme_1.SideMenuTheme.sideMenuNotificationsWrapperHeight;
+    var renderWidget = (0, widget_consumer_react_utils_1.usePersistentCallback)(function (container) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var api, wrapper, renderResult;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, widgetApi];
+                case 1:
+                    api = _a.sent();
+                    if ((0, operation_result_1.isFailure)(api)) {
+                        return [2 /*return*/, (0, operation_result_1.createFailure)(api.fault)];
+                    }
+                    wrapper = container.parentElement;
+                    if (wrapper) {
+                        wrapper.classList.add(BellWidgetView_styles_1.jsStyles.widgetWrapper());
+                    }
+                    container.style.height = '100%';
+                    return [4 /*yield*/, api.value.render({ container: container })];
+                case 2:
+                    renderResult = _a.sent();
+                    if ((0, operation_result_1.isFailure)(renderResult)) {
+                        onError === null || onError === void 0 ? void 0 : onError(renderResult.fault);
+                        return [2 /*return*/, (0, operation_result_1.createFailure)(renderResult.fault)];
+                    }
+                    return [2 /*return*/, (0, operation_result_1.createSuccess)({
+                            dispose: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                                var disposeResult;
+                                return tslib_1.__generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, renderResult.value.dispose()];
+                                        case 1:
+                                            disposeResult = _a.sent();
+                                            if ((0, operation_result_1.isFailure)(disposeResult)) {
+                                                onError === null || onError === void 0 ? void 0 : onError(disposeResult.fault);
+                                            }
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); },
+                        })];
+            }
+        });
+    }); }, []);
+    var buttonCloseTheme = {
+        btnBorderRadiusMedium: '20px',
+    };
+    var wrapperHeightClass = hasCustomWrapperHeight
+        ? BellWidgetView_styles_1.customStyles.customHeight(theme.sideMenuNotificationsWrapperHeight)
+        : BellWidgetView_styles_1.customStyles.defaultHeight(btnTopPosition);
+    return (react_1.default.createElement("div", { className: (0, Emotion_1.cx)(BellWidgetView_styles_1.jsStyles.root(), wrapperHeightClass) },
+        react_1.default.createElement("div", { className: BellWidgetView_styles_1.jsStyles.header(), "data-tid": SideMenuDataTids_1.SideMenuDataTids.bellHeader },
+            react_1.default.createElement("span", { className: BellWidgetView_styles_1.jsStyles.headerText() }, "\u0423\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F"),
+            react_1.default.createElement(Button_1.Button, { use: "text", size: "medium", width: 40, icon: react_1.default.createElement(XIcon20Regular_1.XIcon20Regular, null), onClick: onClose, theme: buttonCloseTheme, "data-tid": SideMenuDataTids_1.SideMenuDataTids.bellCloseButton, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F" })),
+        react_1.default.createElement(widget_consumer_react_utils_1.WidgetRenderer, { renderWidget: renderWidget, renderFault: function (_a) {
+                var fault = _a.fault, retryRender = _a.retryRender;
+                return (react_1.default.createElement(BellWidgetError_1.BellWidgetError, { renderErrorButton: renderErrorButton, error: fault, renderErrorMessage: renderErrorMessage, retryRender: retryRender }));
+            }, loader: react_1.default.createElement(Center_1.Center, null,
+                react_1.default.createElement(Spinner_1.Spinner, { caption: "\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043C \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F..." })) })));
+};
+exports.BellWidget = BellWidget;

package/src/SideMenuNotifications/BellWidgetError.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ImportFaults, RenderFault } from '@skbkontur/bell-widget-npm-loader' assert { 'resolution-mode': 'import' };
+export interface BellWidgetErrorProps {
+    error: ImportFaults | RenderFault;
+    renderErrorButton?: (error: ImportFaults | RenderFault, retryRender: () => void) => React.ReactNode;
+    renderErrorMessage?: (error: ImportFaults | RenderFault, retryRender: () => void) => React.ReactNode;
+    retryRender: VoidFunction;
+}
+export declare const BellWidgetError: React.FC<BellWidgetErrorProps>;