@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.
- package/README.md +0 -2
- package/dist/cjs/components/MainMenu/MainMenu.d.ts +1 -1
- package/dist/cjs/components/MainMenu/MainMenu.js +2 -2
- package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css +0 -1
- package/dist/cjs/components/MainMenu/helperComponents/Content/Content.d.ts +1 -5
- package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +3 -4
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts +8 -1
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js +2 -2
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts +2 -6
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js +1 -1
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +10 -13
- package/dist/cjs/components/MainMenu/helperComponents/Content/styles.module.css +0 -15
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts +1 -1
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +4 -4
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts +1 -1
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/constants.js +3 -3
- package/dist/cjs/components/MainMenu/hooks/useMainMenuDnd.js +0 -12
- package/dist/cjs/components/MainMenu/types.d.ts +1 -1
- package/dist/cjs/style.css +10 -37
- package/dist/esm/components/MainMenu/MainMenu.d.ts +1 -1
- package/dist/esm/components/MainMenu/MainMenu.js +2 -2
- package/dist/esm/components/MainMenu/helperComponents/Banners/styles.module.css +0 -1
- package/dist/esm/components/MainMenu/helperComponents/Content/Content.d.ts +1 -5
- package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +3 -4
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts +8 -1
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js +2 -2
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts +2 -6
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js +1 -1
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +10 -13
- package/dist/esm/components/MainMenu/helperComponents/Content/styles.module.css +0 -15
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts +1 -1
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +5 -5
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts +1 -1
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.js +2 -2
- package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.js +1 -10
- package/dist/esm/components/MainMenu/types.d.ts +1 -1
- package/dist/esm/style.css +10 -37
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +18 -18
- package/src/components/MainMenu/MainMenu.tsx +0 -2
- package/src/components/MainMenu/helperComponents/Banners/styles.module.scss +0 -1
- package/src/components/MainMenu/helperComponents/Content/Content.tsx +2 -12
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.tsx +11 -1
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.tsx +4 -9
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +19 -27
- package/src/components/MainMenu/helperComponents/Content/styles.module.scss +0 -22
- package/src/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.tsx +4 -6
- package/src/components/MainMenu/helperComponents/MenuDesktop/constants.ts +2 -2
- package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss +2 -6
- package/src/components/MainMenu/hooks/useMainMenuDnd.tsx +1 -12
- package/src/components/MainMenu/types.ts +0 -1
- package/dist/cjs/components/MainMenu/styles.module.css +0 -8
- package/dist/esm/components/MainMenu/styles.module.css +0 -8
- 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,
|
|
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,
|
|
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,
|
|
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
|
}
|
|
@@ -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,
|
|
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,
|
|
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
|
|
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 }),
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
137
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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:
|
|
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,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
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 =
|
|
7
|
-
exports.
|
|
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' | '
|
|
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
|
/**
|
package/dist/cjs/style.css
CHANGED
|
@@ -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
|
-
|
|
430
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
}
|
|
@@ -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,
|
|
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,
|
|
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
|
|
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 }),
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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);
|