@skbkontur/side-menu 4.0.6 → 4.0.8

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.8](/compare/@skbkontur/side-menu@4.0.7...@skbkontur/side-menu@4.0.8) (2026-07-10)
+
+**Note:** Version bump only for package @skbkontur/side-menu
+
+
+
+
+
+## [4.0.7](/compare/@skbkontur/side-menu@4.0.6...@skbkontur/side-menu@4.0.7) (2026-07-07)
+
+
+### Bug Fixes
+
+* **Logotype:** deprecate konturLogo, update docs Logos → CdnLogo 4bc8889
+
+
+
+
+
 ## [4.0.6](/compare/@skbkontur/side-menu@4.0.5...@skbkontur/side-menu@4.0.6) (2026-05-19)
 
 **Note:** Version bump only for package @skbkontur/side-menu

package/README.md

@@ -21,7 +21,7 @@ const myTheme = ThemeFactory.create<SideMenuThemeIn>({
 
 ```jsx harmony
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
-import { Kontur, Ofd } from '@skbkontur/logos';
+import { CdnLogo } from '@skbkontur/ui-cdn-components';
 import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
 import { SideMenu } from '@skbkontur/side-menu';
 import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
@@ -37,7 +37,7 @@ import { IconAttachLinkRegular24 } from '@skbkontur/icons/IconAttachLinkRegular2
 <div style={{height: '600px', position: 'relative'}}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
     <SideMenu>
-          <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
+          <SideMenu.Header productLogo={<CdnLogo logo="ofd" />}/>
           <SideMenu.Body>
               <SideMenu.Item icon={<IconDocTextRegular24/>} caption={'Документы к подписанию'} marker={'2'}>
                   <SideMenu.SubItem caption={'Входящие'}/>
@@ -100,7 +100,7 @@ import { IconAttachLinkRegular24 } from '@skbkontur/icons/IconAttachLinkRegular2
 
 ```jsx harmony
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
-import { Buhgalteria, Kontur } from '@skbkontur/logos';
+import { CdnLogo } from '@skbkontur/ui-cdn-components';
 import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator } from '@skbkontur/react-ui';
 import { SideMenu } from '@skbkontur/side-menu';
 import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
@@ -145,7 +145,7 @@ const renderModal = () => {
 <div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#b750d1' })}>
     <SideMenu isSeparatedMenu={true}>
-      <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
+      <SideMenu.Header productLogo={<CdnLogo logo="extern" />} withWidget={false}/>
       <SideMenu.Body>
         <SideMenu.Item icon={<IconDocTextRegular24/>} caption={'Документы'} marker={'2'}>
           <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
@@ -225,7 +225,7 @@ const renderModal = () => {
 ```jsx harmony
 import { useState } from 'react';
 import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
-import { Kontur, Ofd } from '@skbkontur/logos';
+import { CdnLogo } from '@skbkontur/ui-cdn-components';
 import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator} from '@skbkontur/react-ui';
 import { SideMenu } from '@skbkontur/side-menu';
 import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
@@ -268,7 +268,7 @@ const items = [
 <div style={{ height: '600px', display: 'flex', position: 'relative' }}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' })}>
     <SideMenu activeItem={activeItem} onActiveItemChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
-      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} withWidget={false} />
+      <SideMenu.Header productLogo={<CdnLogo logo="ofd" />} withWidget={false} />
       <SideMenu.Body>
         <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию id=100'} marker={'2'} id={'100'}>
           <SideMenu.SubItem caption={'Входящие id=110'} id={'110'} />
@@ -508,7 +508,7 @@ import { SideMenu } from '@skbkontur/side-menu';
 #### Пример кастомизации
 
 ```jsx harmony
-import { Kontur, Ofd } from '@skbkontur/logos';
+import { CdnLogo } from '@skbkontur/ui-cdn-components';
 import { SideMenu } from '@skbkontur/side-menu';
 import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
 import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
@@ -517,7 +517,7 @@ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
 <div style={{ height: '200px', position: 'relative' }}>
   <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px', sideMenuProductColor: '#64b419' })}>
     <SideMenu>
-      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
+      <SideMenu.Header productLogo={<CdnLogo logo="ofd" />} />
       <SideMenu.Body>
         <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию'} marker={'2'} />
       </SideMenu.Body>
@@ -532,7 +532,7 @@ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
 #### Пример с использованием пропа `isOpen`
 
 ```jsx harmony
-import { Kontur, Ofd } from '@skbkontur/logos';
+import { CdnLogo } from '@skbkontur/ui-cdn-components';
 import { SideMenu } from '@skbkontur/side-menu';
 import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
 import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
@@ -544,7 +544,7 @@ const [isOpen, setIsOpen] = React.useState(true);
   <ThemeContext.Provider
     value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuProductColor: '#64b419' })}>
     <SideMenu isOpen={isOpen} onOpen={() => console.log('onOpen')} onClose={() => console.log('onClose')}>
-      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
+      <SideMenu.Header productLogo={<CdnLogo logo="ofd" />} />
       <SideMenu.Body>
         <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию'} />
       </SideMenu.Body>
@@ -562,7 +562,7 @@ const [isOpen, setIsOpen] = React.useState(true);
 #### Пример с использованием пропа `isPinned`
 
 ```jsx harmony
-import { Kontur, Ofd } from '@skbkontur/logos';
+import { CdnLogo } from '@skbkontur/ui-cdn-components';
 import { SideMenu } from '@skbkontur/side-menu';
 import { IconDocTextRegular24 } from '@skbkontur/icons/IconDocTextRegular24';
 import { IconSettingsGearRegular24 } from '@skbkontur/icons/IconSettingsGearRegular24';
@@ -583,7 +583,7 @@ React.useEffect(() => {
               onPinnedValueChange={(isPinned) => {
                 localStorage.setItem('sideMenuIsPinned', String(isPinned));
               }}>
-      <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
+      <SideMenu.Header productLogo={<CdnLogo logo="ofd" />} />
       <SideMenu.Body>
         <SideMenu.Item icon={<IconDocTextRegular24 />} caption={'Документы к подписанию'} />
       </SideMenu.Body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/side-menu",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "private": false,
   "license": "UNLICENSED",
   "author": "Kontur",
@@ -28,13 +28,13 @@
     "@skbkontur/bell-widget-npm-loader": "^0.3.0",
     "@skbkontur/colors": "^2.1.7",
     "@skbkontur/empty-state": "^2.0.2",
-    "@skbkontur/icons": ">=2 <3",
-    "@skbkontur/react-ui-addons": "^6.0.4",
+    "@skbkontur/icons": "^2.0.0",
+    "@skbkontur/react-ui-addons": "^6.0.6",
     "@skbkontur/widget-consumer-react-utils": "^1.6.12",
     "tslib": "^2.8.0"
   },
   "devDependencies": {
-    "@skbkontur/ui-cdn-components": "^1.9.0"
+    "@skbkontur/ui-cdn-components": "^2.1.0"
   },
   "peerDependencies": {
     "@skbkontur/react-ui": ">=6 <7",

package/src/SideMenu/SideMenu.d.ts

@@ -16,45 +16,66 @@ import { SideMenuSubLink } from '../SideMenuSubLink/SideMenuSubLink.js';
 export type showScrollBarType = 'always' | 'scroll' | 'hover' | 'never';
 export interface SideMenuProps extends CommonProps {
     children?: React.ReactNode;
+    /**
+     * Размер контента бокового меню.
+     */
     size?: 'small' | 'large';
     /**
-     * Проп для отображения подменю в отдельной колонке
+     * Отображает пункты меню второго уровня в отдельной колонке, а не раскрывающимся списком.
      */
     isSeparatedMenu?: boolean;
     /**
-     * Проп для закрепленного состояния (работает только на широких экранах)
+     * Закрепляет свёрнутое до иконок боковое меню на экране. Работает только на широких экранах.
      */
     isPinned?: boolean;
     /**
-     * Коллбэк для закрепленного состояния (работает только на широких экранах)
+     * Событие закреплённого состояния. Работает только на широких экранах.
      */
     onPinnedValueChange?: (isPinned: boolean) => void;
     /**
-     * Заблокировать возможность сворачивания меню до иконок на широких экранах
+     * Блокирует возможность сворачивать меню до иконок. Работает только на широких экранах.
      */
     disableCollapsing?: boolean;
+    /**
+     * Управление активным пунктом меню.
+     */
     activeItem?: string;
+    /**
+     * Событие смены активного пункта меню.
+     */
     onActiveItemChange?: (value: string) => void;
+    /**
+     * Меняет брейкпоинт для широкого экрана десктопа.
+     */
     desktopMediaQuery?: string;
+    /**
+     * Меняет брейкпоинт для маленького экрана десктопа.
+     */
     narrowDesktopMediaQuery?: string;
+    /**
+     * Меняет брейкпоинт для планшетного режима.
+     */
     tabletMediaQuery?: string;
+    /**
+     * Меняет брейкпоинт для мобильного режима.
+     */
     mobileMediaQuery?: string;
     /**
-     * Показывать скроллбар
+     * Показывает полосу прокрутки.
      */
     showScrollBar?: showScrollBarType;
     /**
-     * Открывает и закрывает меню
+     * Управляет видимостью: открыто/закрыто боковое меню.
      *
-     * Примечание: при заданном пропе `isOpen` автоматическое открытие/закрытие меню не работает
+     * Примечание: при заданном пропе `isOpen` автоматическое открытие/закрытие меню не работает.
      */
     isOpen?: boolean;
     /**
-     * Действие при открытии меню
+     * Событие открытия меню
      */
     onOpen?: () => void;
     /**
-     * Действие при закрытии меню
+     * Событие закрытия меню.
      */
     onClose?: () => void;
 }

package/src/SideMenuDropdown/SideMenuDropdown.d.ts

@@ -5,7 +5,9 @@ import React from 'react';
 import type { SideMenuItemProps } from '../SideMenuItem/SideMenuItem.js';
 export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuProps, 'caption' | 'disableAnimations'>, Pick<SideMenuItemProps, 'icon' | 'caption' | 'marker' | 'id' | 'subCaption' | '_isAvatar'> {
     children?: React.ReactNode;
+    /** Отключает анимацию раскрытия пункта меню. */
     disableAnimations?: boolean;
+    /** Идентификатор элемента. */
     id?: string;
 }
 /**

package/src/SideMenuHeader/SideMenuHeader.d.ts

@@ -1,6 +1,7 @@
 import type { LogotypeProps } from '@skbkontur/react-ui-addons/components/Logotype/Logotype';
 import React from 'react';
 export interface SideMenuHeaderProps extends Partial<LogotypeProps> {
+    /** URL до иконки. */
     iconUrl?: string;
 }
 /**

package/src/SideMenuItem/SideMenuItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { CommonClickableElementProps } from '../internal/ClickableElement.js';
 export interface SideMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonClickableElementProps {
+    /** Компонент, используемый в качестве корневого узла. */
     component?: React.ComponentType<any>;
 }
 /**

package/src/SideMenuLink/SideMenuLink.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { CommonClickableElementProps } from '../internal/ClickableElement.js';
 export interface SideMenuLinkProps<T = string> extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, CommonClickableElementProps {
+    /** Компонент, используемый в качестве корневого узла. */
     component?: React.ComponentType<any>;
+    /** Адрес ссылки или ресурса. */
     href: T;
 }
 /**

package/src/internal/ClickableElement.d.ts

@@ -3,14 +3,21 @@ import type { ReactNode } from 'react';
 import React from 'react';
 export interface CommonClickableElementProps extends CommonProps {
     children?: ReactNode;
+    /** Иконка. */
     icon: React.ReactElement;
+    /** Визуальный маркер. */
     marker?: ReactNode;
+    /** Заголовок элемента. */
     caption?: ReactNode;
+    /** Подзаголовок элемента. */
     subCaption?: ReactNode;
+    /** Идентификатор элемента. */
     id?: string;
+    /** Позволяет использовать элемент как обычную кнопку. */
     isButton?: boolean;
+    /** Блокирует элемент. */
     disabled?: boolean;
-    /** Отключает перенос строки у заголовка элемента, вместо этого он будет обрезаться многоточием */
+    /** Отключает перенос строки у заголовка элемента, вместо этого он будет обрезаться многоточием. */
     noWrap?: boolean;
     /** @ignore */
     _isSubMenu?: boolean;
@@ -23,6 +30,7 @@ export interface CommonClickableElementProps extends CommonProps {
 }
 export interface ClickableElementProps extends CommonClickableElementProps {
     element: 'a' | 'button' | React.ComponentType<any>;
+    /** Адрес ссылки или ресурса. */
     href?: string;
     onClick?: React.EventHandler<React.MouseEvent>;
     onKeyDown?: React.EventHandler<React.KeyboardEvent>;

package/src/internal/SideMenuLogotype.js

@@ -16,9 +16,12 @@ var changeCamelCaseToKebabCase = function (str) {
         .join('');
 };
 var getProductName = function (productLogo) {
-    var _a;
+    var _a, _b;
+    if (typeof ((_a = productLogo === null || productLogo === void 0 ? void 0 : productLogo.props) === null || _a === void 0 ? void 0 : _a.logo) === 'string') {
+        return productLogo.props.logo;
+    }
     // @ts-expect-error: accessing private property
-    return ((_a = productLogo === null || productLogo === void 0 ? void 0 : productLogo.type) === null || _a === void 0 ? void 0 : _a.__KONTUR_REACT_UI__)
+    return ((_b = productLogo === null || productLogo === void 0 ? void 0 : productLogo.type) === null || _b === void 0 ? void 0 : _b.__KONTUR_REACT_UI__)
         ? // @ts-expect-error: accessing private property
             changeCamelCaseToKebabCase(productLogo.type.__KONTUR_REACT_UI__.replace(/EN$/i, ''))
         : 'kontur';
@@ -49,7 +52,8 @@ var SideMenuLogotype = forwardRef(function (_a, ref) {
         var logotypeWidth = (_b = (_a = refLogotype.current) === null || _a === void 0 ? void 0 : _a.logotypeRef) === null || _b === void 0 ? void 0 : _b.clientWidth;
         var maxWidth = parseInt(theme.sideMenuWidth) -
             2 * parseInt(theme.sideMenuMarginX) -
-            parseInt(theme.sideMenuLogotypePaddingLeft);
+            parseInt(theme.sideMenuLogotypePaddingLeft) +
+            (withWidget ? -28 : 0);
         if (logotypeWidth && logotypeWidth > maxWidth && !rest.size) {
             setSize(24);
         }