@cloud-ru/ds-uikit-product-header 2.1.3 → 2.1.4-preview-0fb5d9fa.0

package/README.md

@@ -303,6 +303,7 @@ function LocalMainMenu() {
 | `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
 | `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
 | `onSegmentServiceClick` | `((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)` | — | Колбэк клика по карточке сервиса в сегменте. |
+| `onToggleAllGroupsExpanded` | `((action: "collapseAllGroups" \| "expandAllGroups") => void)` | — | Колбэк смены всех групп раскрытых. |
 | `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
 | `open` | `boolean` | — | Открыто ли меню. <br/> Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку). |
 | `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
@@ -477,6 +478,7 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
 | `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
 | `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
 | `onSegmentServiceClick` | `((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)` | — | Колбэк клика по карточке сервиса в сегменте. |
+| `onToggleAllGroupsExpanded` | `((action: "collapseAllGroups" \| "expandAllGroups") => void)` | — | Колбэк смены всех групп раскрытых. |
 | `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
 | `open` | `boolean` | `false` | Открыто ли меню. <br/> Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку). |
 | `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |

package/dist/cjs/components/MainMenu/MainMenu.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from './types';
-export declare function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/MainMenu.js

@@ -11,7 +11,7 @@ const locale_1 = require("../../locale");
 const HeaderButton_1 = require("../HeaderButton");
 const MenuDesktop_1 = require("./helperComponents/MenuDesktop");
 const MenuMobile_1 = require("./helperComponents/MenuMobile");
-function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
+function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const searchValue = search?.value;
@@ -25,5 +25,5 @@ function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platform
     }, [setOpen]);
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
     const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: handleOpen, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerButton }), (0, jsx_runtime_1.jsx)(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: handleOpen, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerButton }), (0, jsx_runtime_1.jsx)(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, onToggleAllGroupsExpanded: onToggleAllGroupsExpanded, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/Content.d.ts

@@ -36,6 +36,10 @@ export type ContentProps = {
      * (без id синтетической группы избранного).
      */
     onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+    /**
+     * Колбэк смены всех групп раскрытых.
+     */
+    onToggleAllGroupsExpanded?(action: 'collapseAllGroups' | 'expandAllGroups'): void;
     /**
      * Колбэк клика по карточке сервиса в сегменте.
      */
@@ -63,4 +67,4 @@ export type ContentProps = {
     /** Флаг загрузки данных */
     loading?: boolean;
 };
-export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, onToggleAllGroupsExpanded, className, footer, favorite, isMobile, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js

@@ -26,7 +26,7 @@ const useContentSegmentsSortable_1 = require("./hooks/useContentSegmentsSortable
 const useProgressiveCount_1 = require("./hooks/useProgressiveCount");
 const useSegmentDnd_1 = require("./hooks/useSegmentDnd");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function Content({ searchValue, search, rightTop, segments, searchGroups = emptyArray_1.EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
+function Content({ searchValue, search, rightTop, segments, searchGroups = emptyArray_1.EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, onToggleAllGroupsExpanded, className, footer, favorite, isMobile, preferences, loading, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
     const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
@@ -82,13 +82,14 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
     const visibleGroupIds = (0, react_1.useMemo)(() => visibleGroups.map(({ id }) => id), [visibleGroups]);
     const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
     const handleToggleAllGroupsExpanded = (0, react_1.useCallback)(() => {
+        onToggleAllGroupsExpanded?.(allGroupsExpanded ? 'collapseAllGroups' : 'expandAllGroups');
         if (allGroupsExpanded) {
             const visibleIdsSet = new Set(visibleGroupIds);
             onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
             return;
         }
         onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
-    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds, onToggleAllGroupsExpanded]);
     const cardsContext = (0, react_1.useMemo)(() => ({
         showDescription,
         isMobile,
@@ -116,5 +117,5 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles_module_scss_1.default.noData }));
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { type: mountAnimationType, className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] }) })), cards, footer] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { type: mountAnimationType, className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightTop, "data-mobile": isMobile || undefined, children: rightTop })] }) })), cards, footer] })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -1,8 +1 @@
-import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
-export type SortableGroupDragHandleProps = {
-    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
-    attributes?: DraggableAttributes;
-    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
-    listeners?: DraggableSyntheticListeners;
-};
-export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupDragHandle(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js

@@ -9,7 +9,7 @@ const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const utils_1 = require("@cloud-ru/ds-utils");
 const locale_1 = require("../../../../../../../locale");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
-function SortableGroupDragHandle({ attributes, listeners }) {
+function SortableGroupDragHandle() {
     const { t } = locale_1.headerLocale.useTranslations();
-    return ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, type: 'button', className: styles_module_scss_1.default.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(system_1.DragDropSVG, { size: 24 }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(system_1.DragDropSVG, { size: 24 }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -1,11 +1,15 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { LinksGroup, LinksGroupTitle } from '../../../../../types';
-import { SortableGroupDragHandleProps } from './SortableGroupDragHandle';
 export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     label: LinksGroupTitle;
     isExpanded?: boolean;
     enableServiceDrag?: boolean;
     isMobile?: boolean;
-} & SortableGroupDragHandleProps;
+    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
+    attributes?: DraggableAttributes;
+    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
+    listeners?: DraggableSyntheticListeners;
+};
 declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
 export {};

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -18,6 +18,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
         e.stopPropagation();
         label?.onClick?.(e);
     }, [label]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, {}), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }
 exports.SortableGroupHeader = (0, react_1.memo)(SortableGroupHeaderBase);

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -8,6 +8,7 @@
   outline:none;
 }
 .headerActions[data-always-visible]{
+  pointer-events:auto;
   opacity:1;
 }
 
@@ -63,20 +64,25 @@
     animation:none;
   }
 }
-.group[data-drag-preview]{
-  cursor:grabbing;
-}
 .group[data-drag-preview] .header{
-  cursor:grabbing;
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
   opacity:1;
 }
+.group:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .group:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
 
 .groupDragPreview{
-  cursor:grabbing;
   container-type:inline-size;
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
@@ -119,7 +125,6 @@
 
 .groupBody{
   display:grid;
-  grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
 .groupBody:not([data-subcategory-body]){
@@ -128,10 +133,8 @@
 .groupBody:not([data-show-description]){
   gap:0;
 }
-@container (width <= 728px){
-  .groupBody:not([data-mobile]){
-    grid-template-columns:repeat(2, minmax(auto, 1fr));
-  }
+.groupBody:not([data-mobile]){
+  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
 }
 .groupBody[data-mobile]{
   grid-template-columns:repeat(1, minmax(200px, 1fr));

package/dist/cjs/components/MainMenu/helperComponents/Content/styles.module.css

@@ -21,6 +21,21 @@
   gap:inherit;
 }
 
+.rightTop{
+  width:100%;
+  min-width:0;
+}
+.rightTop:not([data-mobile]){
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(max(286px, (100% - var(--sn-primitive-dimension-4, 4px)) / 2), 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+.rightTop[data-mobile]{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
 .noData{
   flex:1 1 auto;
   place-self:center center;

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from '../../types';
-export declare function MenuDesktop({ open, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDesktop({ open, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js

@@ -21,7 +21,7 @@ const MountAnimation_1 = require("../MountAnimation");
 const Search_1 = require("../Search");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = constants_2.MENU_WIDTH_DEFAULT, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { scrollRef, searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
         segments,
         search,
@@ -56,12 +56,12 @@ function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segm
     const handleCloseDrawer = (0, react_1.useCallback)(() => {
         setOpen?.(false);
     }, [setOpen]);
-    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, servicesById: servicesById }), hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    const menu = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, servicesById: servicesById }), hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.mainMenu.right, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { className: styles_module_scss_1.default.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, onToggleAllGroupsExpanded: onToggleAllGroupsExpanded, preferences: preferences, loading: loading }) }) })] }))] })] }));
     return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles_module_scss_1.default.drawer, rootClassName: styles_module_scss_1.default.drawerRoot, "data-test-id": constants_1.TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: constants_2.MENU_WIDTH_MIN,
-                max: constants_2.MENU_WIDTH_MAX,
-                default: Math.min(Math.max(defaultWidth, constants_2.MENU_WIDTH_MIN), constants_2.MENU_WIDTH_MAX),
+                max: 'full',
+                default: defaultWidth,
                 onResizeEnd: onWidthChangeEnd,
                 draggerTooltip,
             }

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const MENU_WIDTH_STORAGE_KEY = "cloud-ru-main-menu-user-width";
 export declare const MENU_WIDTH_MIN: number;
-export declare const MENU_WIDTH_MAX: number;
+export declare const MENU_WIDTH_DEFAULT: number;

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MENU_WIDTH_MAX = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
+exports.MENU_WIDTH_DEFAULT = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
 exports.MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
 // паддинг справа 24px у дровера нужно компенсировать
-exports.MENU_WIDTH_MIN = 960 + 24;
-exports.MENU_WIDTH_MAX = 1208 + 24;
+exports.MENU_WIDTH_MIN = 630 + 24;
+exports.MENU_WIDTH_DEFAULT = 1208 + 24;

package/dist/cjs/components/MainMenu/hooks/useMainMenuDnd.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMainMenuDndOverlay = useMainMenuDndOverlay;
 exports.useMainMenuDnd = useMainMenuDnd;
@@ -11,6 +14,7 @@ const portal_context_1 = require("@cloud-ru/ds-portal-context");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const ServiceCard_1 = require("../helperComponents/ServiceCard");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const utils_1 = require("../utils");
 const restrictGroupDragToVerticalAxis = args => {
     if (args.active?.id != null && (0, utils_1.isServiceSourceDragId)(args.active.id)) {
@@ -87,6 +91,14 @@ function useMainMenuDnd({ favorite, servicesById, showDescription }) {
 }
 function MainMenuDndContext({ children, sensors, modifiers, collisionDetection, onDragStart, onDragEnd, onDragCancel, dragOverlay, overlayContextValue, }) {
     const portalContextRef = (0, portal_context_1.usePortalContext)();
+    const isDragging = Boolean(dragOverlay);
+    (0, react_1.useEffect)(() => {
+        if (!isDragging)
+            return;
+        /* Для предотвращения случайных взаимодействий с любыми другими элементами при перетаскивании */
+        document.body.classList.add(styles_module_scss_1.default.dragging);
+        return () => document.body.classList.remove(styles_module_scss_1.default.dragging);
+    }, [isDragging]);
     // `DragOverlay` рендерит `position: fixed` без собственного портала. Drawer-обёртка
     // (`.snack-rc-drawer-content-wrapper`) держит `will-change: transform`, а это, как и
     // настоящий transform, создаёт containing block для fixed-потомков — оверлей резолвится

package/dist/cjs/components/MainMenu/styles.module.css

@@ -0,0 +1,8 @@
+.dragging,
+.dragging *{
+  cursor:grabbing !important;
+}
+
+.dragging *{
+  pointer-events:none !important;
+}

package/dist/cjs/components/MainMenu/types.d.ts

@@ -240,7 +240,7 @@ export type MainMenuSettingsItem = Pick<InnerLink, 'id' | 'label' | 'icon' | 'on
     /** Разделитель до/после пункта. */
     divider?: 'before' | 'after';
 };
-export type MainMenuProps = Pick<ContentProps, 'segments' | 'searchGroups' | 'segmentPrefs' | 'activeSegmentId' | 'onActiveSegmentChange' | 'onSegmentOrderChange' | 'onSegmentExpandedChange' | 'onSegmentServiceClick' | 'favorite' | 'preferences' | 'loading' | 'rightTop'> & {
+export type MainMenuProps = Pick<ContentProps, 'segments' | 'searchGroups' | 'segmentPrefs' | 'activeSegmentId' | 'onActiveSegmentChange' | 'onSegmentOrderChange' | 'onSegmentExpandedChange' | 'onToggleAllGroupsExpanded' | 'onSegmentServiceClick' | 'favorite' | 'preferences' | 'loading' | 'rightTop'> & {
     /** Кнопка открытия меню недоступна для клика. */
     disabled?: boolean;
     /**

package/dist/cjs/style.css

@@ -300,6 +300,7 @@
   outline:none;
 }
 .headerActions[data-always-visible]{
+  pointer-events:auto;
   opacity:1;
 }
 
@@ -355,20 +356,25 @@
     animation:none;
   }
 }
-.group[data-drag-preview]{
-  cursor:grabbing;
-}
 .group[data-drag-preview] .header{
-  cursor:grabbing;
   background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
 }
 .group[data-drag-preview] .header .headerActions{
   pointer-events:auto;
   opacity:1;
 }
+.group:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .group:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
 
 .groupDragPreview{
-  cursor:grabbing;
   container-type:inline-size;
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
@@ -411,7 +417,6 @@
 
 .groupBody{
   display:grid;
-  grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
 .groupBody:not([data-subcategory-body]){
@@ -420,10 +425,8 @@
 .groupBody:not([data-show-description]){
   gap:0;
 }
-@container (width <= 728px){
-  .groupBody:not([data-mobile]){
-    grid-template-columns:repeat(2, minmax(auto, 1fr));
-  }
+.groupBody:not([data-mobile]){
+  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
 }
 .groupBody[data-mobile]{
   grid-template-columns:repeat(1, minmax(200px, 1fr));
@@ -575,6 +578,21 @@
   gap:inherit;
 }
 
+.rightTop{
+  width:100%;
+  min-width:0;
+}
+.rightTop:not([data-mobile]){
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(max(286px, (100% - var(--sn-primitive-dimension-4, 4px)) / 2), 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+.rightTop[data-mobile]{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
 .noData{
   flex:1 1 auto;
   place-self:center center;
@@ -939,6 +957,14 @@
 .staticCard{
   position:relative;
 }
+.dragging,
+.dragging *{
+  cursor:grabbing !important;
+}
+
+.dragging *{
+  pointer-events:none !important;
+}
 .container{
   display:flex;
   align-items:center;

package/dist/esm/components/MainMenu/MainMenu.d.ts

@@ -1,2 +1,2 @@
 import { MainMenuProps } from './types.js';
-export declare function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/MainMenu.js

@@ -8,7 +8,7 @@ import { headerLocale } from '../../locale/index.js';
 import { HeaderButton } from '../HeaderButton/index.js';
 import { MenuDesktop } from './helperComponents/MenuDesktop/index.js';
 import { MenuMobile } from './helperComponents/MenuMobile/index.js';
-export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
+export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onToggleAllGroupsExpanded, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { t } = headerLocale.useTranslations();
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const searchValue = search?.value;
@@ -22,5 +22,5 @@ export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, p
     }, [setOpen]);
     const isMobile = useMobileLayout();
     const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
-    return (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: _jsx(MainMenuSVG, {}), onClick: handleOpen, "data-test-id": TEST_IDS.mainMenu.drawerButton }), _jsx(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: _jsx(MainMenuSVG, {}), onClick: handleOpen, "data-test-id": TEST_IDS.mainMenu.drawerButton }), _jsx(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, onToggleAllGroupsExpanded: onToggleAllGroupsExpanded, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/Content.d.ts

@@ -36,6 +36,10 @@ export type ContentProps = {
      * (без id синтетической группы избранного).
      */
     onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+    /**
+     * Колбэк смены всех групп раскрытых.
+     */
+    onToggleAllGroupsExpanded?(action: 'collapseAllGroups' | 'expandAllGroups'): void;
     /**
      * Колбэк клика по карточке сервиса в сегменте.
      */
@@ -63,4 +67,4 @@ export type ContentProps = {
     /** Флаг загрузки данных */
     loading?: boolean;
 };
-export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, onToggleAllGroupsExpanded, className, footer, favorite, isMobile, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/Content.js

@@ -20,7 +20,7 @@ import { useContentSegmentsSortable } from './hooks/useContentSegmentsSortable.j
 import { useProgressiveCount } from './hooks/useProgressiveCount.js';
 import { useSegmentDnd } from './hooks/useSegmentDnd.js';
 import styles from './styles.module.css';
-export function Content({ searchValue, search, rightTop, segments, searchGroups = EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
+export function Content({ searchValue, search, rightTop, segments, searchGroups = EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, onToggleAllGroupsExpanded, className, footer, favorite, isMobile, preferences, loading, }) {
     const { t } = headerLocale.useTranslations();
     const showDescription = useDeferredValue(preferences?.showDescription.value ?? false);
     const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
@@ -76,13 +76,14 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
     const visibleGroupIds = useMemo(() => visibleGroups.map(({ id }) => id), [visibleGroups]);
     const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
     const handleToggleAllGroupsExpanded = useCallback(() => {
+        onToggleAllGroupsExpanded?.(allGroupsExpanded ? 'collapseAllGroups' : 'expandAllGroups');
         if (allGroupsExpanded) {
             const visibleIdsSet = new Set(visibleGroupIds);
             onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
             return;
         }
         onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
-    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds, onToggleAllGroupsExpanded]);
     const cardsContext = useMemo(() => ({
         showDescription,
         isMobile,
@@ -110,5 +111,5 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles.noData }));
     })();
-    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsx(_Fragment, { children: _jsxs(MountAnimation, { type: mountAnimationType, className: styles.top, children: [_jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] }) })), cards, footer] })] }));
+    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsx(_Fragment, { children: _jsxs(MountAnimation, { type: mountAnimationType, className: styles.top, children: [_jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), _jsx("div", { className: styles.rightTop, "data-mobile": isMobile || undefined, children: rightTop })] }) })), cards, footer] })] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -1,8 +1 @@
-import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
-export type SortableGroupDragHandleProps = {
-    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
-    attributes?: DraggableAttributes;
-    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
-    listeners?: DraggableSyntheticListeners;
-};
-export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupDragHandle(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js

@@ -3,7 +3,7 @@ import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
 import { stopEventPropagation } from '@cloud-ru/ds-utils';
 import { headerLocale } from '../../../../../../../locale/index.js';
 import styles from '../styles.module.css';
-export function SortableGroupDragHandle({ attributes, listeners }) {
+export function SortableGroupDragHandle() {
     const { t } = headerLocale.useTranslations();
-    return (_jsx("button", { ...attributes, ...listeners, type: 'button', className: styles.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: stopEventPropagation, children: _jsx(DragDropSVG, { size: 24 }) }));
+    return (_jsx("button", { type: 'button', className: styles.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: stopEventPropagation, children: _jsx(DragDropSVG, { size: 24 }) }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -1,11 +1,15 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { LinksGroup, LinksGroupTitle } from '../../../../../types.js';
-import { SortableGroupDragHandleProps } from './SortableGroupDragHandle.js';
 export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     label: LinksGroupTitle;
     isExpanded?: boolean;
     enableServiceDrag?: boolean;
     isMobile?: boolean;
-} & SortableGroupDragHandleProps;
+    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
+    attributes?: DraggableAttributes;
+    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
+    listeners?: DraggableSyntheticListeners;
+};
 declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
 export {};

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -12,6 +12,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
         e.stopPropagation();
         label?.onClick?.(e);
     }, [label]);
-    return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: getLinkEmblem({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+    return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: getLinkEmblem({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, {}), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }
 export const SortableGroupHeader = memo(SortableGroupHeaderBase);