@cloud-ru/ds-uikit-product-header 2.1.4-preview-e8fab9b7.0 → 2.1.4-preview-20b4671f.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +0 -2
  2. package/dist/cjs/components/MainMenu/MainMenu.d.ts +1 -1
  3. package/dist/cjs/components/MainMenu/MainMenu.js +2 -2
  4. package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css +0 -1
  5. package/dist/cjs/components/MainMenu/helperComponents/Content/Content.d.ts +1 -5
  6. package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +3 -4
  7. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts +8 -1
  8. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js +2 -2
  9. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts +2 -6
  10. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js +1 -1
  11. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +10 -13
  12. package/dist/cjs/components/MainMenu/helperComponents/Content/styles.module.css +0 -15
  13. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts +1 -1
  14. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +4 -4
  15. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts +1 -1
  16. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.js +3 -3
  17. package/dist/cjs/components/MainMenu/hooks/useMainMenuDnd.js +0 -12
  18. package/dist/cjs/components/MainMenu/types.d.ts +1 -1
  19. package/dist/cjs/style.css +10 -37
  20. package/dist/esm/components/MainMenu/MainMenu.d.ts +1 -1
  21. package/dist/esm/components/MainMenu/MainMenu.js +2 -2
  22. package/dist/esm/components/MainMenu/helperComponents/Banners/styles.module.css +0 -1
  23. package/dist/esm/components/MainMenu/helperComponents/Content/Content.d.ts +1 -5
  24. package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +3 -4
  25. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts +8 -1
  26. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js +2 -2
  27. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts +2 -6
  28. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js +1 -1
  29. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +10 -13
  30. package/dist/esm/components/MainMenu/helperComponents/Content/styles.module.css +0 -15
  31. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts +1 -1
  32. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +5 -5
  33. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts +1 -1
  34. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.js +2 -2
  35. package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.js +1 -10
  36. package/dist/esm/components/MainMenu/types.d.ts +1 -1
  37. package/dist/esm/style.css +10 -37
  38. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  39. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  40. package/package.json +18 -18
  41. package/src/components/MainMenu/MainMenu.tsx +0 -2
  42. package/src/components/MainMenu/helperComponents/Banners/styles.module.scss +0 -1
  43. package/src/components/MainMenu/helperComponents/Content/Content.tsx +2 -12
  44. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.tsx +11 -1
  45. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.tsx +4 -9
  46. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +19 -27
  47. package/src/components/MainMenu/helperComponents/Content/styles.module.scss +0 -22
  48. package/src/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.tsx +4 -6
  49. package/src/components/MainMenu/helperComponents/MenuDesktop/constants.ts +2 -2
  50. package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss +2 -6
  51. package/src/components/MainMenu/hooks/useMainMenuDnd.tsx +1 -12
  52. package/src/components/MainMenu/types.ts +0 -1
  53. package/dist/cjs/components/MainMenu/styles.module.css +0 -8
  54. package/dist/esm/components/MainMenu/styles.module.css +0 -8
  55. package/src/components/MainMenu/styles.module.scss +0 -10
package/README.md CHANGED
@@ -303,7 +303,6 @@ function LocalMainMenu() {
303
303
  | `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
304
304
  | `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
305
305
  | `onSegmentServiceClick` | `((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)` | — | Колбэк клика по карточке сервиса в сегменте. |
306
- | `onToggleAllGroupsExpanded` | `((action: "collapseAll" \| "expandAll") => void)` | — | Колбэк смены всех групп раскрытых. |
307
306
  | `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
308
307
  | `open` | `boolean` | — | Открыто ли меню. <br/> Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку). |
309
308
  | `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
@@ -478,7 +477,6 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
478
477
  | `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
479
478
  | `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
480
479
  | `onSegmentServiceClick` | `((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)` | — | Колбэк клика по карточке сервиса в сегменте. |
481
- | `onToggleAllGroupsExpanded` | `((action: "collapseAll" \| "expandAll") => void)` | — | Колбэк смены всех групп раскрытых. |
482
480
  | `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
483
481
  | `open` | `boolean` | `false` | Открыто ли меню. <br/> Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку). |
484
482
  | `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
@@ -1,2 +1,2 @@
1
1
  import { MainMenuProps } from './types';
2
- 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;
2
+ 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;
@@ -11,7 +11,7 @@ const locale_1 = require("../../locale");
11
11
  const HeaderButton_1 = require("../HeaderButton");
12
12
  const MenuDesktop_1 = require("./helperComponents/MenuDesktop");
13
13
  const MenuMobile_1 = require("./helperComponents/MenuMobile");
14
- 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, }) {
14
+ 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, }) {
15
15
  const { t } = locale_1.headerLocale.useTranslations();
16
16
  const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
17
17
  const searchValue = search?.value;
@@ -25,5 +25,5 @@ function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platform
25
25
  }, [setOpen]);
26
26
  const isMobile = (0, useMobileLayout_1.useMobileLayout)();
27
27
  const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
28
- 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 })] }));
28
+ 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 })] }));
29
29
  }
@@ -70,5 +70,4 @@
70
70
 
71
71
  .promoTag{
72
72
  cursor:inherit;
73
- flex-shrink:0;
74
73
  }
@@ -36,10 +36,6 @@ export type ContentProps = {
36
36
  * (без id синтетической группы избранного).
37
37
  */
38
38
  onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
39
- /**
40
- * Колбэк смены всех групп раскрытых.
41
- */
42
- onToggleAllGroupsExpanded?(action: 'collapseAll' | 'expandAll'): void;
43
39
  /**
44
40
  * Колбэк клика по карточке сервиса в сегменте.
45
41
  */
@@ -67,4 +63,4 @@ export type ContentProps = {
67
63
  /** Флаг загрузки данных */
68
64
  loading?: boolean;
69
65
  };
70
- 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;
66
+ 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;
@@ -26,7 +26,7 @@ const useContentSegmentsSortable_1 = require("./hooks/useContentSegmentsSortable
26
26
  const useProgressiveCount_1 = require("./hooks/useProgressiveCount");
27
27
  const useSegmentDnd_1 = require("./hooks/useSegmentDnd");
28
28
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
29
- function Content({ searchValue, search, rightTop, segments, searchGroups = emptyArray_1.EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, onToggleAllGroupsExpanded, className, footer, favorite, isMobile, preferences, loading, }) {
29
+ function Content({ searchValue, search, rightTop, segments, searchGroups = emptyArray_1.EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
30
30
  const { t } = locale_1.headerLocale.useTranslations();
31
31
  const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
32
32
  const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
@@ -82,14 +82,13 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
82
82
  const visibleGroupIds = (0, react_1.useMemo)(() => visibleGroups.map(({ id }) => id), [visibleGroups]);
83
83
  const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
84
84
  const handleToggleAllGroupsExpanded = (0, react_1.useCallback)(() => {
85
- onToggleAllGroupsExpanded?.(allGroupsExpanded ? 'collapseAll' : 'expandAll');
86
85
  if (allGroupsExpanded) {
87
86
  const visibleIdsSet = new Set(visibleGroupIds);
88
87
  onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
89
88
  return;
90
89
  }
91
90
  onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
92
- }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds, onToggleAllGroupsExpanded]);
91
+ }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
93
92
  const cardsContext = (0, react_1.useMemo)(() => ({
94
93
  showDescription,
95
94
  isMobile,
@@ -117,5 +116,5 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = empty
117
116
  appearance: 'neutral',
118
117
  }, 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 }));
119
118
  })();
120
- 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] })] }));
119
+ 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] })] }));
121
120
  }
@@ -1 +1,8 @@
1
- export declare function SortableGroupDragHandle(): import("react/jsx-runtime").JSX.Element;
1
+ import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
2
+ export type SortableGroupDragHandleProps = {
3
+ /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
4
+ attributes?: DraggableAttributes;
5
+ /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
6
+ listeners?: DraggableSyntheticListeners;
7
+ };
8
+ export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;
@@ -9,7 +9,7 @@ const system_1 = require("@cloud-ru/ds-icons/interface/system");
9
9
  const utils_1 = require("@cloud-ru/ds-utils");
10
10
  const locale_1 = require("../../../../../../../locale");
11
11
  const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
12
- function SortableGroupDragHandle() {
12
+ function SortableGroupDragHandle({ attributes, listeners }) {
13
13
  const { t } = locale_1.headerLocale.useTranslations();
14
- 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 }) }));
14
+ 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 }) }));
15
15
  }
@@ -1,15 +1,11 @@
1
- import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
2
1
  import { LinksGroup, LinksGroupTitle } from '../../../../../types';
2
+ import { SortableGroupDragHandleProps } from './SortableGroupDragHandle';
3
3
  export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
4
4
  label: LinksGroupTitle;
5
5
  isExpanded?: boolean;
6
6
  enableServiceDrag?: boolean;
7
7
  isMobile?: boolean;
8
- /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
9
- attributes?: DraggableAttributes;
10
- /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
11
- listeners?: DraggableSyntheticListeners;
12
- };
8
+ } & SortableGroupDragHandleProps;
13
9
  declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
14
10
  export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
15
11
  export {};
@@ -18,6 +18,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
18
18
  e.stopPropagation();
19
19
  label?.onClick?.(e);
20
20
  }, [label]);
21
- 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' }))] }))] }));
21
+ 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' }))] }))] }));
22
22
  }
23
23
  exports.SortableGroupHeader = (0, react_1.memo)(SortableGroupHeaderBase);
@@ -8,7 +8,6 @@
8
8
  outline:none;
9
9
  }
10
10
  .headerActions[data-always-visible]{
11
- pointer-events:auto;
12
11
  opacity:1;
13
12
  }
14
13
 
@@ -64,25 +63,20 @@
64
63
  animation:none;
65
64
  }
66
65
  }
66
+ .group[data-drag-preview]{
67
+ cursor:grabbing;
68
+ }
67
69
  .group[data-drag-preview] .header{
70
+ cursor:grabbing;
68
71
  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
69
72
  }
70
73
  .group[data-drag-preview] .header .headerActions{
71
74
  pointer-events:auto;
72
75
  opacity:1;
73
76
  }
74
- .group:has(:focus-visible) .headerActions{
75
- pointer-events:auto;
76
- opacity:1;
77
- }
78
- @media (hover: hover){
79
- .group:hover .headerActions{
80
- pointer-events:auto;
81
- opacity:1;
82
- }
83
- }
84
77
 
85
78
  .groupDragPreview{
79
+ cursor:grabbing;
86
80
  container-type:inline-size;
87
81
  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
88
82
  }
@@ -125,6 +119,7 @@
125
119
 
126
120
  .groupBody{
127
121
  display:grid;
122
+ grid-template-columns:repeat(3, minmax(auto, 1fr));
128
123
  gap:var(--sn-primitive-dimension-4, 4px);
129
124
  }
130
125
  .groupBody:not([data-subcategory-body]){
@@ -133,8 +128,10 @@
133
128
  .groupBody:not([data-show-description]){
134
129
  gap:0;
135
130
  }
136
- .groupBody:not([data-mobile]){
137
- grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
131
+ @container (width <= 728px){
132
+ .groupBody:not([data-mobile]){
133
+ grid-template-columns:repeat(2, minmax(auto, 1fr));
134
+ }
138
135
  }
139
136
  .groupBody[data-mobile]{
140
137
  grid-template-columns:repeat(1, minmax(200px, 1fr));
@@ -21,21 +21,6 @@
21
21
  gap:inherit;
22
22
  }
23
23
 
24
- .rightTop{
25
- width:100%;
26
- min-width:0;
27
- }
28
- .rightTop:not([data-mobile]){
29
- display:grid;
30
- grid-template-columns:repeat(auto-fit, minmax(max(252px, (100% - var(--sn-primitive-dimension-4, 4px)) / 2), 1fr));
31
- gap:var(--sn-primitive-dimension-4, 4px);
32
- }
33
- .rightTop[data-mobile]{
34
- display:flex;
35
- flex-direction:column;
36
- gap:var(--sn-primitive-dimension-8, 8px);
37
- }
38
-
39
24
  .noData{
40
25
  flex:1 1 auto;
41
26
  place-self:center center;
@@ -1,2 +1,2 @@
1
1
  import { MainMenuProps } from '../../types';
2
- 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;
2
+ 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;
@@ -21,7 +21,7 @@ const MountAnimation_1 = require("../MountAnimation");
21
21
  const Search_1 = require("../Search");
22
22
  const constants_2 = require("./constants");
23
23
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
24
- 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, }) {
24
+ 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, }) {
25
25
  const { scrollRef, searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
26
26
  segments,
27
27
  search,
@@ -56,12 +56,12 @@ function MenuDesktop({ open = false, setOpen, settingItems, platformGroups, segm
56
56
  const handleCloseDrawer = (0, react_1.useCallback)(() => {
57
57
  setOpen?.(false);
58
58
  }, [setOpen]);
59
- 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 }) }) })] }))] })] }));
59
+ 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 }) }) })] }))] })] }));
60
60
  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
61
61
  ? {
62
62
  min: constants_2.MENU_WIDTH_MIN,
63
- max: 'full',
64
- default: defaultWidth,
63
+ max: constants_2.MENU_WIDTH_MAX,
64
+ default: Math.min(Math.max(defaultWidth, constants_2.MENU_WIDTH_MIN), constants_2.MENU_WIDTH_MAX),
65
65
  onResizeEnd: onWidthChangeEnd,
66
66
  draggerTooltip,
67
67
  }
@@ -1,3 +1,3 @@
1
1
  export declare const MENU_WIDTH_STORAGE_KEY = "cloud-ru-main-menu-user-width";
2
2
  export declare const MENU_WIDTH_MIN: number;
3
- export declare const MENU_WIDTH_DEFAULT: number;
3
+ export declare const MENU_WIDTH_MAX: number;
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MENU_WIDTH_DEFAULT = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
3
+ exports.MENU_WIDTH_MAX = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
4
4
  exports.MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
5
5
  // паддинг справа 24px у дровера нужно компенсировать
6
- exports.MENU_WIDTH_MIN = 630 + 24;
7
- exports.MENU_WIDTH_DEFAULT = 1208 + 24;
6
+ exports.MENU_WIDTH_MIN = 960 + 24;
7
+ exports.MENU_WIDTH_MAX = 1208 + 24;
@@ -1,7 +1,4 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.useMainMenuDndOverlay = useMainMenuDndOverlay;
7
4
  exports.useMainMenuDnd = useMainMenuDnd;
@@ -14,7 +11,6 @@ const portal_context_1 = require("@cloud-ru/ds-portal-context");
14
11
  const react_1 = require("react");
15
12
  const react_dom_1 = require("react-dom");
16
13
  const ServiceCard_1 = require("../helperComponents/ServiceCard");
17
- const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
18
14
  const utils_1 = require("../utils");
19
15
  const restrictGroupDragToVerticalAxis = args => {
20
16
  if (args.active?.id != null && (0, utils_1.isServiceSourceDragId)(args.active.id)) {
@@ -91,14 +87,6 @@ function useMainMenuDnd({ favorite, servicesById, showDescription }) {
91
87
  }
92
88
  function MainMenuDndContext({ children, sensors, modifiers, collisionDetection, onDragStart, onDragEnd, onDragCancel, dragOverlay, overlayContextValue, }) {
93
89
  const portalContextRef = (0, portal_context_1.usePortalContext)();
94
- const isDragging = Boolean(dragOverlay);
95
- (0, react_1.useEffect)(() => {
96
- if (!isDragging)
97
- return;
98
- /* Для предотвращения случайных взаимодействий с любыми другими элементами при перетаскивании */
99
- document.body.classList.add(styles_module_scss_1.default.dragging);
100
- return () => document.body.classList.remove(styles_module_scss_1.default.dragging);
101
- }, [isDragging]);
102
90
  // `DragOverlay` рендерит `position: fixed` без собственного портала. Drawer-обёртка
103
91
  // (`.snack-rc-drawer-content-wrapper`) держит `will-change: transform`, а это, как и
104
92
  // настоящий transform, создаёт containing block для fixed-потомков — оверлей резолвится
@@ -240,7 +240,7 @@ export type MainMenuSettingsItem = Pick<InnerLink, 'id' | 'label' | 'icon' | 'on
240
240
  /** Разделитель до/после пункта. */
241
241
  divider?: 'before' | 'after';
242
242
  };
243
- export type MainMenuProps = Pick<ContentProps, 'segments' | 'searchGroups' | 'segmentPrefs' | 'activeSegmentId' | 'onActiveSegmentChange' | 'onSegmentOrderChange' | 'onSegmentExpandedChange' | 'onToggleAllGroupsExpanded' | 'onSegmentServiceClick' | 'favorite' | 'preferences' | 'loading' | 'rightTop'> & {
243
+ export type MainMenuProps = Pick<ContentProps, 'segments' | 'searchGroups' | 'segmentPrefs' | 'activeSegmentId' | 'onActiveSegmentChange' | 'onSegmentOrderChange' | 'onSegmentExpandedChange' | 'onSegmentServiceClick' | 'favorite' | 'preferences' | 'loading' | 'rightTop'> & {
244
244
  /** Кнопка открытия меню недоступна для клика. */
245
245
  disabled?: boolean;
246
246
  /**
@@ -169,7 +169,6 @@
169
169
 
170
170
  .promoTag{
171
171
  cursor:inherit;
172
- flex-shrink:0;
173
172
  }
174
173
  .root{
175
174
  display:flex;
@@ -301,7 +300,6 @@
301
300
  outline:none;
302
301
  }
303
302
  .headerActions[data-always-visible]{
304
- pointer-events:auto;
305
303
  opacity:1;
306
304
  }
307
305
 
@@ -357,25 +355,20 @@
357
355
  animation:none;
358
356
  }
359
357
  }
358
+ .group[data-drag-preview]{
359
+ cursor:grabbing;
360
+ }
360
361
  .group[data-drag-preview] .header{
362
+ cursor:grabbing;
361
363
  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
362
364
  }
363
365
  .group[data-drag-preview] .header .headerActions{
364
366
  pointer-events:auto;
365
367
  opacity:1;
366
368
  }
367
- .group:has(:focus-visible) .headerActions{
368
- pointer-events:auto;
369
- opacity:1;
370
- }
371
- @media (hover: hover){
372
- .group:hover .headerActions{
373
- pointer-events:auto;
374
- opacity:1;
375
- }
376
- }
377
369
 
378
370
  .groupDragPreview{
371
+ cursor:grabbing;
379
372
  container-type:inline-size;
380
373
  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
381
374
  }
@@ -418,6 +411,7 @@
418
411
 
419
412
  .groupBody{
420
413
  display:grid;
414
+ grid-template-columns:repeat(3, minmax(auto, 1fr));
421
415
  gap:var(--sn-primitive-dimension-4, 4px);
422
416
  }
423
417
  .groupBody:not([data-subcategory-body]){
@@ -426,8 +420,10 @@
426
420
  .groupBody:not([data-show-description]){
427
421
  gap:0;
428
422
  }
429
- .groupBody:not([data-mobile]){
430
- grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
423
+ @container (width <= 728px){
424
+ .groupBody:not([data-mobile]){
425
+ grid-template-columns:repeat(2, minmax(auto, 1fr));
426
+ }
431
427
  }
432
428
  .groupBody[data-mobile]{
433
429
  grid-template-columns:repeat(1, minmax(200px, 1fr));
@@ -579,21 +575,6 @@
579
575
  gap:inherit;
580
576
  }
581
577
 
582
- .rightTop{
583
- width:100%;
584
- min-width:0;
585
- }
586
- .rightTop:not([data-mobile]){
587
- display:grid;
588
- grid-template-columns:repeat(auto-fit, minmax(max(252px, (100% - var(--sn-primitive-dimension-4, 4px)) / 2), 1fr));
589
- gap:var(--sn-primitive-dimension-4, 4px);
590
- }
591
- .rightTop[data-mobile]{
592
- display:flex;
593
- flex-direction:column;
594
- gap:var(--sn-primitive-dimension-8, 8px);
595
- }
596
-
597
578
  .noData{
598
579
  flex:1 1 auto;
599
580
  place-self:center center;
@@ -958,14 +939,6 @@
958
939
  .staticCard{
959
940
  position:relative;
960
941
  }
961
- .dragging,
962
- .dragging *{
963
- cursor:grabbing !important;
964
- }
965
-
966
- .dragging *{
967
- pointer-events:none !important;
968
- }
969
942
  .container{
970
943
  display:flex;
971
944
  align-items:center;
@@ -1,2 +1,2 @@
1
1
  import { MainMenuProps } from './types.js';
2
- 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;
2
+ 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;
@@ -8,7 +8,7 @@ import { headerLocale } from '../../locale/index.js';
8
8
  import { HeaderButton } from '../HeaderButton/index.js';
9
9
  import { MenuDesktop } from './helperComponents/MenuDesktop/index.js';
10
10
  import { MenuMobile } from './helperComponents/MenuMobile/index.js';
11
- 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, }) {
11
+ 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, }) {
12
12
  const { t } = headerLocale.useTranslations();
13
13
  const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
14
14
  const searchValue = search?.value;
@@ -22,5 +22,5 @@ export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, p
22
22
  }, [setOpen]);
23
23
  const isMobile = useMobileLayout();
24
24
  const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
25
- 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 })] }));
25
+ 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 })] }));
26
26
  }
@@ -70,5 +70,4 @@
70
70
 
71
71
  .promoTag{
72
72
  cursor:inherit;
73
- flex-shrink:0;
74
73
  }
@@ -36,10 +36,6 @@ export type ContentProps = {
36
36
  * (без id синтетической группы избранного).
37
37
  */
38
38
  onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
39
- /**
40
- * Колбэк смены всех групп раскрытых.
41
- */
42
- onToggleAllGroupsExpanded?(action: 'collapseAll' | 'expandAll'): void;
43
39
  /**
44
40
  * Колбэк клика по карточке сервиса в сегменте.
45
41
  */
@@ -67,4 +63,4 @@ export type ContentProps = {
67
63
  /** Флаг загрузки данных */
68
64
  loading?: boolean;
69
65
  };
70
- 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;
66
+ 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;
@@ -20,7 +20,7 @@ import { useContentSegmentsSortable } from './hooks/useContentSegmentsSortable.j
20
20
  import { useProgressiveCount } from './hooks/useProgressiveCount.js';
21
21
  import { useSegmentDnd } from './hooks/useSegmentDnd.js';
22
22
  import styles from './styles.module.css';
23
- export function Content({ searchValue, search, rightTop, segments, searchGroups = EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, onToggleAllGroupsExpanded, className, footer, favorite, isMobile, preferences, loading, }) {
23
+ export function Content({ searchValue, search, rightTop, segments, searchGroups = EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
24
24
  const { t } = headerLocale.useTranslations();
25
25
  const showDescription = useDeferredValue(preferences?.showDescription.value ?? false);
26
26
  const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
@@ -76,14 +76,13 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
76
76
  const visibleGroupIds = useMemo(() => visibleGroups.map(({ id }) => id), [visibleGroups]);
77
77
  const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
78
78
  const handleToggleAllGroupsExpanded = useCallback(() => {
79
- onToggleAllGroupsExpanded?.(allGroupsExpanded ? 'collapseAll' : 'expandAll');
80
79
  if (allGroupsExpanded) {
81
80
  const visibleIdsSet = new Set(visibleGroupIds);
82
81
  onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
83
82
  return;
84
83
  }
85
84
  onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
86
- }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds, onToggleAllGroupsExpanded]);
85
+ }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
87
86
  const cardsContext = useMemo(() => ({
88
87
  showDescription,
89
88
  isMobile,
@@ -111,5 +110,5 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
111
110
  appearance: 'neutral',
112
111
  }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles.noData }));
113
112
  })();
114
- 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] })] }));
113
+ 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] })] }));
115
114
  }
@@ -1 +1,8 @@
1
- export declare function SortableGroupDragHandle(): import("react/jsx-runtime").JSX.Element;
1
+ import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
2
+ export type SortableGroupDragHandleProps = {
3
+ /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
4
+ attributes?: DraggableAttributes;
5
+ /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
6
+ listeners?: DraggableSyntheticListeners;
7
+ };
8
+ export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;
@@ -3,7 +3,7 @@ import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
3
3
  import { stopEventPropagation } from '@cloud-ru/ds-utils';
4
4
  import { headerLocale } from '../../../../../../../locale/index.js';
5
5
  import styles from '../styles.module.css';
6
- export function SortableGroupDragHandle() {
6
+ export function SortableGroupDragHandle({ attributes, listeners }) {
7
7
  const { t } = headerLocale.useTranslations();
8
- 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 }) }));
8
+ 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 }) }));
9
9
  }
@@ -1,15 +1,11 @@
1
- import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
2
1
  import { LinksGroup, LinksGroupTitle } from '../../../../../types.js';
2
+ import { SortableGroupDragHandleProps } from './SortableGroupDragHandle.js';
3
3
  export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
4
4
  label: LinksGroupTitle;
5
5
  isExpanded?: boolean;
6
6
  enableServiceDrag?: boolean;
7
7
  isMobile?: boolean;
8
- /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
9
- attributes?: DraggableAttributes;
10
- /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
11
- listeners?: DraggableSyntheticListeners;
12
- };
8
+ } & SortableGroupDragHandleProps;
13
9
  declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
14
10
  export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
15
11
  export {};
@@ -12,6 +12,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
12
12
  e.stopPropagation();
13
13
  label?.onClick?.(e);
14
14
  }, [label]);
15
- 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' }))] }))] }));
15
+ 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' }))] }))] }));
16
16
  }
17
17
  export const SortableGroupHeader = memo(SortableGroupHeaderBase);