@skbkontur/side-menu 1.2.1 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.3.0...@skbkontur/side-menu@1.4.0) (2023-08-24)
+
+
+### Features
+
+* **SideMenuItem:** add isButton prop ([cad902f](https://git.skbkontur.ru/ui/ui-parking/commits/cad902fc5a62b513e8ec2a09421166b09c044293))
+
+
+
+
+
+# [1.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.2.1...@skbkontur/side-menu@1.3.0) (2023-08-22)
+
+
+### Features
+
+* **SideMenu:** fix animation logic ([0d80df9](https://git.skbkontur.ru/ui/ui-parking/commits/0d80df987faae0970f67680239b8a933fa32bcc7))
+
+
+
+
+
 ## [1.2.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@1.2.0...@skbkontur/side-menu@1.2.1) (2023-08-21)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -96,7 +96,6 @@ import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIc
 import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
 
 const [opened, setOpened] = React.useState(false);
-const [panel, setPanel] = React.useState(false);
 
 const open = () => {
   setOpened(true);
@@ -175,10 +174,7 @@ const renderModal = () => {
         <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
       </SideMenu.Body>
       <SideMenu.Footer>
-        <div>
-          {opened && renderModal()}
-          <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
-        </div>
+        <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open} isButton={true}/>
         <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
         <SideMenu.Avatar
           userName={'Ишматова Елена'}
@@ -198,6 +194,7 @@ const renderModal = () => {
   </ThemeContext.Provider>
   <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
     {'Content '.repeat(100)}
+    {opened && renderModal()}
   </div>
 </div>
 ```
@@ -219,7 +216,7 @@ import { BookmarkIcon24Regular } from '@skbkontur/icons/icons/BookmarkIcon/Bookm
 import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
 import { SettingsGearIcon24Regular } from '@skbkontur/icons/icons/SettingsGearIcon/SettingsGearIcon24Regular';
 import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
-import { AttachLinkIcon } from '@skbkontur/icons/icons/AttachLinkIcon';
+import { AttachLinkIcon24Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon24Regular';
 
 
 const [activeItem, setActiveItem] = useState('122');

package/hooks/useActiveState.d.ts

@@ -1 +1 @@
-export declare const useActiveState: (id?: string | undefined, href?: string | undefined, generatedId?: string | undefined, activeMenuItem?: string | null | undefined) => boolean;
+export declare const useActiveState: (id?: string | undefined, href?: string | undefined, generatedId?: string | undefined, activeMenuItem?: string | null | undefined, isButton?: boolean | undefined) => boolean;

package/hooks/useActiveState.js

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import { isElementActive } from '../lib/utils/scripts';
-export var useActiveState = function (id, href, generatedId, activeMenuItem) {
+export var useActiveState = function (id, href, generatedId, activeMenuItem, isButton) {
     var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
     useEffect(function () {
+        if (isButton)
+            return;
         var isHrefActive = isElementActive(href, activeMenuItem);
         var isIdActive = isElementActive(id, activeMenuItem);
         var isGeneratedIdActive = isElementActive(generatedId, activeMenuItem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@skbkontur/icons": "^1.4.3",
-    "@skbkontur/react-ui-addons": "^4.9.0",
+    "@skbkontur/react-ui-addons": "^4.9.1",
     "tslib": "^1"
   }
 }

package/src/SideMenu/SideMenu.js

@@ -207,12 +207,14 @@ var SideMenuInner = forwardRef(function (_a, ref) {
                                 _d[jsStylesForSideMenu.container(theme)] = true,
                                 _d[jsStylesForSideMenu.collapsedContainerForTabletsOrMobiles()] = !isShown && !isBeingTransitioned,
                                 _d[jsStylesForSideMenu.minimizedContainer(theme)] = isMinimized,
-                                _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenu,
+                                _d[jsStylesForSideMenu.innerContainer()] = !isSeparatedMenuShown,
                                 _d[jsStylesForSideMenu.containerForTouchScreens(theme)] = isTouchScreen,
                                 _d[jsStylesForSideMenu.separatedContainerForMobiles(theme)] = isMobile && isSeparatedMenuShown && (isShown || isBeingTransitioned),
                                 _d)) },
                             React.createElement("div", { className: cx((_e = {},
-                                    _e[jsStylesForSideMenu.contentWrapper()] = true,
+                                    _e[jsStylesForSideMenu.contentWrapper(theme)] = true,
+                                    _e[jsStylesForSideMenu.contentWrapperForTouchScreens(theme)] = isTouchScreen,
+                                    _e[jsStylesForSideMenu.minimizedContentWrapper()] = isMinimized,
                                     _e)) }, children)),
                         !disableSwipe && isDesktopQuery && !isSeparatedMenuShown && (React.createElement(RightBorder, { setIsMinimized: setIsMinimized }))))))));
 });

package/src/SideMenu/SideMenu.styles.d.ts

@@ -13,7 +13,9 @@ export declare const jsStylesForSideMenu: {
     innerContainer(): string;
     containerForTouchScreens(t: SideMenuTheme): string;
     separatedContainerForMobiles(t: SideMenuTheme): string;
-    contentWrapper(): string;
+    contentWrapper(t: SideMenuTheme): string;
+    contentWrapperForTouchScreens(t: SideMenuTheme): string;
+    minimizedContentWrapper(): string;
     wrapper(): string;
     wrapperIE(): string;
     wrapperWithShadow(t: SideMenuTheme): string;

package/src/SideMenu/SideMenu.styles.js

@@ -33,30 +33,36 @@ var styles = {
     separatedContainerForMobiles: function (t) {
         return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
-    contentWrapper: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n    "])));
+    contentWrapper: function (t) {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n      width: ", ";\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow: hidden;\n      width: ", ";\n    "])), t.sideMenuWidth);
+    },
+    contentWrapperForTouchScreens: function (t) {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.sideMenuWidthForTouchScreens);
+    },
+    minimizedContentWrapper: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
     wrapper: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
+        return css(templateObject_14 || (templateObject_14 = __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 css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "], ["\n      position: relative;\n      top: -", ";\n      height: calc(100% + ", ");\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+        return css(templateObject_15 || (templateObject_15 = __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 css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuBoxShadow);
     },
     collapsedContainerForTabletsOrMobiles: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
     },
     list: function () {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "], ["\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    "])));
     },
 };
 export var customStyles = {
     rootForTabletsOrMobiles: function (headerHeight) {
-        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "], ["\n      height: ", "px;\n      position: absolute;\n      top: 0;\n      transition: height ", "ms ease-out;\n    "])), headerHeight, burgerTransitionDuration);
     },
 };
 export var jsStylesForSideMenu = 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;
+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;

package/src/SideMenuItem/SideMenuItem.md

@@ -1,3 +1,59 @@
+
+Проп `isButton` позволяет использовать пункт меню как обычную кнопку. В таком случае пункт меню не участвует в навигации и не выделяется:
+
+```jsx harmony
+import { Kontur, Buhgalteria } from '@skbkontur/logos';
+import { SideMenu } from '../../index';
+import { DocTextIcon24Regular } from '@skbkontur/icons/icons/DocTextIcon/DocTextIcon24Regular';
+import { FaceAHappyIcon24Regular } from '@skbkontur/icons/icons/FaceAHappyIcon/FaceAHappyIcon24Regular';
+import { StackHDownIcon24Regular } from '@skbkontur/icons/icons/StackHDownIcon/StackHDownIcon24Regular';
+import { ThemeContext, ThemeFactory, Modal, Input } from '@skbkontur/react-ui';
+
+const [opened, setOpened] = React.useState(false);
+
+const open = () => {
+  setOpened(true);
+};
+
+const close = () => {
+  setOpened(false);
+};
+
+const renderModal = () => {
+  return (
+    <Modal onClose={close}>
+      <Modal.Header>Выбор организации</Modal.Header>
+      <Modal.Body>
+        <Input />
+        <div>Список организаций</div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+<div style={{ height: '100%', display: 'flex' }}>
+  <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
+    <SideMenu>
+      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Buhgalteria />} withWidget={false} />
+      <SideMenu.Body>
+        <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы'} marker={'2'} />
+        <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'} />
+      </SideMenu.Body>
+      <SideMenu.Footer>
+        <SideMenu.Item
+          icon={<StackHDownIcon24Regular />}
+          caption={'СКБ Контур'}
+          onClick={open}
+          isButton={true}
+        />
+      </SideMenu.Footer>
+    </SideMenu>
+  </ThemeContext.Provider>
+  {opened && renderModal()}
+</div>
+
+
+```
 #### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
 
 ```typescript

package/src/internal/ClickableElement.d.ts

@@ -7,6 +7,7 @@ export interface CommonClickableElementProps extends CommonProps {
     caption?: string;
     subCaption?: ReactNode;
     id?: string;
+    isButton?: boolean;
     /** @ignore */
     _generatedId?: string;
     /** @ignore */

package/src/internal/ClickableElement.js

@@ -17,10 +17,10 @@ import { ThemeContext } from '@skbkontur/react-ui';
  */
 var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
-    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar"]);
+    var onClick = _a.onClick, icon = _a.icon, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, _isAvatar = _a._isAvatar, isButton = _a.isButton, rest = __rest(_a, ["onClick", "icon", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton", "_isAvatar", "isButton"]);
     var context = useContext(SideMenuContext);
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
+    var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem, isButton);
     var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
     var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
     var hasChildren = function (id, generatedId) {
@@ -31,6 +31,8 @@ var ClickableElement = forwardRef(function (_a, ref) {
     };
     var switchActiveItem = function () {
         var _a, _b, _c;
+        if (isButton)
+            return;
         if (id) {
             (_a = context.switchActiveMenuItem) === null || _a === void 0 ? void 0 : _a.call(context, id);
         }
@@ -100,6 +102,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
     var Component = _isSubMenu || _isDropdown ? 'div' : 'li';
     var newProps = __assign({ className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootButton(theme)] = isButton,
             _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
             _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
             _b[jsStyles.activeRoot(theme)] = isActive ||

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

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

package/src/internal/ClickableElement.styles.js

@@ -6,18 +6,21 @@ var styles = {
     root: function (t) {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      user-select: text;\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
     },
+    rootButton: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      &:active {\n        background: ", ";\n      }\n    "])), t.sideMenuItemActiveBg);
+    },
     rootSubItemInSeparatedSubMenu: function (t) {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
     },
     focusedRoot: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
     },
     activeRoot: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
     },
     activeRootSubItemInSeparatedSubMenu: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/src/internal/ItemContent/Caption.js

@@ -3,7 +3,6 @@ import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Caption.styles';
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { SideMenuContext } from '../../SideMenuContext';
-import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 var getTruncatedUserName = function (caption, visibleWidth, fullWidth) {
     var _a = caption.split(' '), firstName = _a[0], lastName = _a[1];
@@ -25,7 +24,7 @@ export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
     var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasIcon = _a.hasIcon, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton, _isDropdown = _a._isDropdown, _isAvatar = _a._isAvatar;
     var theme = getSideMenuTheme(useContext(ThemeContext));
-    var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons, isTablet = _d.isTablet, isMobile = _d.isMobile;
+    var _d = useContext(SideMenuContext), isBeingTransitioned = _d.isBeingTransitioned, isSeparatedMenu = _d.isSeparatedMenu, size = _d.size, isTouchScreen = _d.isTouchScreen, hasSubIcons = _d.hasSubIcons;
     var captionRef = useRef(null);
     var _e = useState(''), tail = _e[0], setTail = _e[1];
     useEffect(function () {
@@ -48,7 +47,6 @@ export var Caption = forwardRef(function (_a, ref) {
     };
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
-            _b[jsStyles.rootBeingTransitioned()] = isBeingTransitioned && !_isSubMenu && !(isTablet || isMobile),
             _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b)), ref: ref },
         React.createElement("p", { className: cx((_c = {},
@@ -64,7 +62,7 @@ export var Caption = forwardRef(function (_a, ref) {
                 _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
                 _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
                 _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
-                _c)), ref: mergeRefs([ref, captionRef]), "data-tail": tail }, caption),
+                _c)), ref: captionRef, "data-tail": tail }, caption),
         subCaption));
 });
 Caption.displayName = 'Caption';

package/src/internal/ItemContent/Caption.styles.d.ts

@@ -3,7 +3,6 @@ export declare const sideMenuMultilineCaptionPaddingTop = "4px";
 export declare const sideMenuCaptionMarginRight = "8px";
 export declare const jsStyles: {
     root(): string;
-    rootBeingTransitioned(): string;
     rootMultiline(): string;
     caption(t: SideMenuTheme): string;
     captionForTouchScreens(t: SideMenuTheme): string;

package/src/internal/ItemContent/Caption.styles.js

@@ -7,48 +7,45 @@ var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    "])));
     },
-    rootBeingTransitioned: function () {
-        return css(templateObject_2 || (templateObject_2 = __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    "])));
-    },
     rootMultiline: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), sideMenuMultilineCaptionPaddingTop);
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), sideMenuMultilineCaptionPaddingTop);
     },
     caption: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n      overflow-wrap: anywhere;\n    "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
     },
     captionForTouchScreens: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
     },
     captionSubItem: function (t) {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
     },
     captionSubItemForTouchScreens: function (t) {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
     },
     captionSubItemSeparatedMenuTopLevel: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
     },
     captionNestedItemSeparatedMenu: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
     },
     captionWithoutItemIcon: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
     captionSubItemWithoutColumnIcons: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
     captionLarge: function (t) {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
     },
     captionInBackButton: function (t) {
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
     },
     captionDropdown: function () {
-        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow: hidden;\n    "], ["\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
     },
     captionTruncated: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      text-overflow: ellipsis;\n      &::before {\n        float: right;\n        content: attr(data-tail);\n      }\n    "], ["\n      text-overflow: ellipsis;\n      &::before {\n        float: right;\n        content: attr(data-tail);\n      }\n    "])));
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      text-overflow: ellipsis;\n      &::before {\n        float: right;\n        content: attr(data-tail);\n      }\n    "], ["\n      text-overflow: ellipsis;\n      &::before {\n        float: right;\n        content: attr(data-tail);\n      }\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;
+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;

package/src/internal/ItemContent/ItemContent.js

@@ -1,19 +1,12 @@
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { customStyles, jsStyles } from './ItemContent.styles';
+import { jsStyles } from './ItemContent.styles';
 import { SideMenuContext } from '../../SideMenuContext';
-import { useNumberOfTextLinesInItem } from '../../../hooks/useNumberOfTextLinesInItem';
-import { useNumberOfTextLinesInSubItem } from '../../../hooks/useNumberOfTextLinesInSubItem';
 import { Icon } from './Icon';
 import { Caption } from './Caption';
 import { Marker } from './Marker';
 import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 import { ThemeContext } from '@skbkontur/react-ui';
-import { sideMenuMultilineCaptionPaddingTop } from './Caption.styles';
-var getItemContentHeight = function (theme, linesNumber, size) {
-    var lineHeight = size === 'large' ? parseInt(theme.sideMenuLargeLineHeight) : parseInt(theme.sideMenuLineHeight);
-    return linesNumber * lineHeight + parseInt(sideMenuMultilineCaptionPaddingTop);
-};
 /**
  * Контент для SideMenuItem или SideMenuLink
  */
@@ -23,58 +16,35 @@ var ItemContent = forwardRef(function (_a, ref) {
     var context = useContext(SideMenuContext);
     var size = context.size, isTouchScreen = context.isTouchScreen;
     var textRef = useRef(null);
-    var _d = useState(1), linesNumber = _d[0], setLinesNumber = _d[1];
-    var _e = useState(false), isMultilineSubItem = _e[0], setMultilineSubItem = _e[1];
-    var isMultiline = (!_isSubMenu && linesNumber > 1) || (!!_isSubMenu && isMultilineSubItem) || !!subCaption;
+    var _d = useState(false), isMultiline = _d[0], setIsMultiline = _d[1];
     var theme = getSideMenuTheme(useContext(ThemeContext));
     useEffect(function () {
-        if (!_isBackButton && !_isSubMenu && !_isDropdown) {
-            useNumberOfTextLinesInItem({
-                textRef: textRef,
-                setLinesNumber: setLinesNumber,
-                theme: theme,
-                caption: caption,
-                marker: marker,
-                size: size,
-                isTouchScreen: isTouchScreen,
-            });
+        if (!textRef.current || _isBackButton)
+            return;
+        var text = textRef.current.querySelector('p');
+        if ((text && parseInt(getComputedStyle(text).lineHeight) < text.clientHeight) || subCaption) {
+            setIsMultiline(true);
         }
-        if (!_isBackButton && _isSubMenu) {
-            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, size, theme);
-        }
-    }, [caption]);
-    useEffect(function () {
-        if (!_isBackButton && !_isDropdown) {
-            useNumberOfTextLinesInItem({
-                textRef: textRef,
-                setLinesNumber: setLinesNumber,
-                theme: theme,
-                caption: caption,
-                marker: marker,
-                size: size,
-                isTouchScreen: isTouchScreen,
-            });
-        }
-    }, [textRef.current, context.isBeingTransitioned]);
+    });
     var isSeparatedSubMenuInNarrowDesktop = _isSubMenu && context.isSeparatedMenu && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root(theme)] = true,
             _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
             _b[jsStyles.largeRoot(theme)] = size === 'large' && !_isSubMenu,
             _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
-            _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu,
+            _b[jsStyles.multilineRoot(theme)] = isMultiline && !_isSubMenu && !context.isMinimized,
             _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
             _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
             _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
             _b)), ref: ref },
         icon && (React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton, _isAvatar: _isAvatar })),
-        (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: cx((_c = {},
+        React.createElement("div", { className: cx((_c = {},
                 _c[jsStyles.textAndMarkerWrapper()] = true,
                 _c[jsStyles.textAndMarkerWrapperDropdown()] = _isDropdown,
-                _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
+                _c[jsStyles.textAndMarkerWrapperMinimized()] = context.isMinimized && !_isSubMenu,
                 _c)) },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasIcon: !!icon, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, _isDropdown: _isDropdown, _isAvatar: _isAvatar, ref: textRef }),
-            marker !== undefined && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu }))))));
+            marker !== undefined && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktop) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker, _isSubMenu: _isSubMenu })))));
 });
 ItemContent.displayName = 'ItemContent';
 var ItemContentWithStaticFields = Object.assign(ItemContent, { __KONTUR_REACT_UI__: 'ItemContent' });

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

@@ -1,7 +1,4 @@
 import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
-export declare const customStyles: {
-    textAndMarkerWrapperMultiline(height: number): string;
-};
 export declare const jsStyles: {
     root(t: SideMenuTheme): string;
     largeRoot(t: SideMenuTheme): string;
@@ -13,4 +10,5 @@ export declare const jsStyles: {
     subItemRoot(t: SideMenuTheme): string;
     textAndMarkerWrapper(): string;
     textAndMarkerWrapperDropdown(): string;
+    textAndMarkerWrapperMinimized(): string;
 };

package/src/internal/ItemContent/ItemContent.styles.js

@@ -32,10 +32,8 @@ var styles = {
     textAndMarkerWrapperDropdown: function () {
         return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      overflow: hidden;\n    "], ["\n      overflow: hidden;\n    "])));
     },
-};
-export var customStyles = {
-    textAndMarkerWrapperMultiline: function (height) {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
+    textAndMarkerWrapperMinimized: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/SideMenuLogotype.styles.js

@@ -9,19 +9,19 @@ var styles = {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
     },
     icon: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: 0;\n      opacity: 1;\n    "], ["\n      left: 0;\n      opacity: 1;\n    "])));
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      opacity: 1;\n      width: auto;\n    "], ["\n      opacity: 1;\n      width: auto;\n    "])));
     },
     iconHidden: function (t) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      left: -", ";\n      display: block;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", ";\n      display: block;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), sideMenuLogotypeGapBetweenIconAndLogo, t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "], ["\n      display: block;\n      width: 0;\n      padding-left: ", ";\n      opacity: 0;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypeHiddenIconPaddingLeft, transitionDuration);
     },
     logoWrapper: function (t) {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      left: -", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      position: relative;\n      left: -", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), sideMenuLogotypeIconSize, t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      display: flex;\n      opacity: 1;\n      transition: all ", "ms ease-out;\n    "])), t.sideMenuLogotypePaddingTop, t.sideMenuLogotypePaddingBottom, t.sideMenuLogotypePaddingLeft, transitionDuration);
     },
     logoWrapperForTabletsOrMobiles: function (t) {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      left: 0;\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      left: 0;\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuLogotypePaddingYForTouchScreens, t.sideMenuLogotypePaddingYForTouchScreens);
     },
     logoWrapperHidden: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: ", "px;\n      opacity: 0;\n    "], ["\n      left: ", "px;\n      opacity: 0;\n    "])), parseInt(sideMenuLogotypeGapBetweenIconAndLogo) - parseInt(sideMenuLogotypeIconSize));
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      opacity: 0;\n    "], ["\n      opacity: 0;\n    "])));
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/hooks/useNumberOfTextLinesInItem.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { SideMenuTheme } from '../lib/theming/ThemeTypes';
-interface UseNumberOfTextLinesInItem {
-    textRef: React.RefObject<HTMLDivElement>;
-    setLinesNumber: React.Dispatch<React.SetStateAction<number>>;
-    theme: SideMenuTheme;
-    caption?: string;
-    marker?: string | boolean;
-    size?: 'small' | 'large';
-    isTouchScreen?: boolean;
-}
-export declare const useNumberOfTextLinesInItem: ({ textRef, setLinesNumber, theme, caption, marker, size, isTouchScreen, }: UseNumberOfTextLinesInItem) => void;
-export {};

package/hooks/useNumberOfTextLinesInItem.js

@@ -1,64 +0,0 @@
-import { sideMenuCaptionMarginRight } from '../src/internal/ItemContent/Caption.styles';
-import { isBrowser } from '../lib/utils/scripts';
-var getNumberOfLines = function (ctx, words, containerWidth) {
-    var line = '';
-    var lineCount = 1;
-    words.forEach(function (word, i) {
-        var testLine = (line + " " + word).trim();
-        var testWidth = ctx.measureText(testLine).width;
-        if (testWidth > containerWidth && i > 0) {
-            line = '';
-            lineCount++;
-        }
-        else {
-            line = testLine;
-        }
-    });
-    return lineCount;
-};
-var getContainerWidth = function (ctx, theme, marker, isTouchScreen) {
-    var containerWidth = parseInt(isTouchScreen ? theme.sideMenuWidthForTouchScreens : theme.sideMenuWidth) -
-        2 * parseInt(theme.sideMenuMarginX) -
-        parseInt(theme.sideMenuIconSize) -
-        2 * parseInt(theme.sideMenuIconMarginX);
-    var markerPaddings = marker
-        ? 2 * parseInt(theme.sideMenuMarkerPaddingX) + parseInt(theme.sideMenuMarkerMarginRight)
-        : 0;
-    var emptyMarker = marker === true || marker === '';
-    var markerWidth;
-    if (emptyMarker) {
-        markerWidth = 8;
-    }
-    else if (typeof marker === 'string') {
-        markerWidth = ctx.measureText(marker).width + markerPaddings;
-    }
-    else {
-        markerWidth = 0;
-    }
-    return containerWidth - markerWidth - parseInt(sideMenuCaptionMarginRight);
-};
-var getFontSize = function (theme, isTouchScreen, size) {
-    if (size !== 'small') {
-        return parseInt(theme.sideMenuCaptionLargeFontSize);
-    }
-    if (isTouchScreen) {
-        return parseInt(theme.sideMenuCaptionFontSizeForTouchScreens);
-    }
-    else {
-        return parseInt(theme.sideMenuCaptionFontSize);
-    }
-};
-export var useNumberOfTextLinesInItem = function (_a) {
-    var textRef = _a.textRef, setLinesNumber = _a.setLinesNumber, theme = _a.theme, _b = _a.caption, caption = _b === void 0 ? '' : _b, marker = _a.marker, size = _a.size, isTouchScreen = _a.isTouchScreen;
-    var fontSize = getFontSize(theme, isTouchScreen, size);
-    var fontFamily = textRef.current && isBrowser
-        ? window.getComputedStyle(textRef.current).getPropertyValue('font-family')
-        : "'Lab Grotesque', 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif";
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    if (ctx) {
-        ctx.font = fontSize + "px " + fontFamily;
-        var words = caption.split(' ');
-        setLinesNumber(getNumberOfLines(ctx, words, getContainerWidth(ctx, theme, marker, isTouchScreen)));
-    }
-};

package/hooks/useNumberOfTextLinesInSubItem.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SideMenuTheme } from '../lib/theming/ThemeTypes';
-export declare const useNumberOfTextLinesInSubItem: (textRef: React.RefObject<HTMLDivElement>, setIsMultilineText: React.Dispatch<React.SetStateAction<boolean>>, size: string | undefined, theme: SideMenuTheme) => void;

package/hooks/useNumberOfTextLinesInSubItem.js

@@ -1,14 +0,0 @@
-export var useNumberOfTextLinesInSubItem = function (textRef, setIsMultilineText, size, theme) {
-    if (size === void 0) { size = 'small'; }
-    if (textRef.current) {
-        var el_1 = textRef.current;
-        setTimeout(function () {
-            var textHeight = +el_1.offsetHeight;
-            var lineHeight = size === 'small' ? parseInt(theme.sideMenuLineHeight) : parseInt(theme.sideMenuLargeLineHeight);
-            var lines = textHeight / lineHeight;
-            if (lines >= 2) {
-                setIsMultilineText(true);
-            }
-        }, 0);
-    }
-};