@cloud-ru/ds-uikit-product-header 1.3.7 → 1.3.8
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/CHANGELOG.md +7 -0
- package/dist/cjs/components/MainMenu/helperComponents/Content/Content.d.ts +1 -2
- package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +2 -3
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js +1 -1
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -7
- package/dist/cjs/components/MainMenu/helperComponents/Favorites/Favorites.js +2 -2
- package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css +4 -1
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +1 -1
- package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js +1 -1
- package/dist/cjs/style.css +5 -8
- package/dist/esm/components/MainMenu/helperComponents/Content/Content.d.ts +1 -2
- package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +2 -3
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js +1 -1
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -7
- package/dist/esm/components/MainMenu/helperComponents/Favorites/Favorites.js +2 -2
- package/dist/esm/components/MainMenu/helperComponents/Favorites/styles.module.css +4 -1
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +1 -1
- package/dist/esm/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js +1 -1
- package/dist/esm/style.css +5 -8
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +13 -13
- package/src/components/MainMenu/helperComponents/Content/Content.tsx +1 -5
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.tsx +1 -1
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +1 -5
- package/src/components/MainMenu/helperComponents/Favorites/Favorites.tsx +2 -1
- package/src/components/MainMenu/helperComponents/Favorites/styles.module.scss +9 -3
- package/src/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.tsx +0 -1
- package/src/components/MainMenu/helperComponents/MenuMobile/MenuMobile.tsx +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 1.3.8 (2026-09-11)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **FF-9046:** proper favorites max-height, show decor on group drag ([00e35ad](https://github.com/cloud-ru-tech/snack-v2/commit/00e35adfd3cd28f67ed74524c6d1a045aeb97d57))
|
|
11
|
+
- **FF-9046:** remove inner drawer close handling, make card actions always visible on mobile in lastVisited ([359d774](https://github.com/cloud-ru-tech/snack-v2/commit/359d774705f1a3579d825e7e7d664014e18d7db5))
|
|
12
|
+
|
|
6
13
|
## 1.3.7 (2026-09-10)
|
|
7
14
|
|
|
8
15
|
**Note:** Version bump only for package @ds/uikit-product-header
|
|
@@ -53,9 +53,8 @@ export type ContentProps = {
|
|
|
53
53
|
rightTop?: ReactNode;
|
|
54
54
|
footer?: ReactNode;
|
|
55
55
|
isMobile?: boolean;
|
|
56
|
-
onClose?(): void;
|
|
57
56
|
className?: string;
|
|
58
57
|
/** Флаг загрузки данных */
|
|
59
58
|
loading?: boolean;
|
|
60
59
|
};
|
|
61
|
-
export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile,
|
|
60
|
+
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;
|
|
@@ -21,7 +21,7 @@ const SortableGroup_1 = require("./helperComponents/SortableGroup");
|
|
|
21
21
|
const useContentSegmentsSortable_1 = require("./hooks/useContentSegmentsSortable");
|
|
22
22
|
const useSegmentDnd_1 = require("./hooks/useSegmentDnd");
|
|
23
23
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
24
|
-
function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile,
|
|
24
|
+
function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
|
|
25
25
|
const { t } = locale_1.headerLocale.useTranslations();
|
|
26
26
|
const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
|
|
27
27
|
const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
|
|
@@ -45,11 +45,10 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
|
|
|
45
45
|
}
|
|
46
46
|
if (!(0, shouldBeOpenedInNewTab_1.shouldBeOpenedInNewTab)(e)) {
|
|
47
47
|
e?.preventDefault();
|
|
48
|
-
onClose?.();
|
|
49
48
|
}
|
|
50
49
|
onSegmentServiceClick?.(service, e);
|
|
51
50
|
service.onClick?.(e);
|
|
52
|
-
}, [
|
|
51
|
+
}, [onSegmentServiceClick]);
|
|
53
52
|
const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = (0, useContentSegmentsSortable_1.useContentSegmentsSortable)({
|
|
54
53
|
segments,
|
|
55
54
|
activeSegmentId: segmentId,
|
|
@@ -32,5 +32,5 @@ function SortableGroup({ id, icon, label, items, isExpanded, showDescription, is
|
|
|
32
32
|
}
|
|
33
33
|
function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }) {
|
|
34
34
|
const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
|
|
35
|
-
return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.groupDragPreview, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.group, "data-drag-preview": true,
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.groupDragPreview, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.group, "data-drag-preview": true, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupDragPreviewHeader, children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }) }), isExpanded && ((0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled }))] }) }));
|
|
36
36
|
}
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.groupDragPreviewHeader{
|
|
78
|
+
position:relative;
|
|
78
79
|
padding:var(--sn-primitive-dimension-4, 4px) 0;
|
|
79
80
|
}
|
|
80
81
|
|
|
@@ -130,9 +131,6 @@
|
|
|
130
131
|
height:100%;
|
|
131
132
|
border-radius:inherit;
|
|
132
133
|
}
|
|
133
|
-
[data-drag-preview] .decoration{
|
|
134
|
-
z-index:-1;
|
|
135
|
-
}
|
|
136
134
|
.decoration[data-color-scheme=light]{
|
|
137
135
|
--highlight-border-color-from:hsl(155deg 48% 42% / 100%);
|
|
138
136
|
--highlight-border-color-to:hsl(155deg 48% 42% / 32%);
|
|
@@ -192,10 +190,6 @@
|
|
|
192
190
|
visibility:visible;
|
|
193
191
|
background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
|
|
194
192
|
}
|
|
195
|
-
.colorMarker[data-block-color=red]{
|
|
196
|
-
visibility:visible;
|
|
197
|
-
background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
|
|
198
|
-
}
|
|
199
193
|
.colorMarker[data-block-color=orange]{
|
|
200
194
|
visibility:visible;
|
|
201
195
|
background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
|
|
@@ -45,7 +45,7 @@ function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
|
|
|
45
45
|
favorite.onFavoriteServiceClick?.(service.id, event);
|
|
46
46
|
service.onClick(event);
|
|
47
47
|
};
|
|
48
|
-
const recentCards = recentItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, favorite: {
|
|
48
|
+
const recentCards = recentItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
|
|
49
49
|
enabled: true,
|
|
50
50
|
checked: favorite.value.includes(service.id),
|
|
51
51
|
onChange: favorite.onChange(service.id),
|
|
@@ -57,7 +57,7 @@ function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
|
|
|
57
57
|
/* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
|
|
58
58
|
<DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
|
|
59
59
|
избранного идёт через звёздочку на карточке. */
|
|
60
|
-
return isMobile ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.listScroll, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.listScrollInner, overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: [isEmpty && (0, jsx_runtime_1.jsx)(components_1.EmptyState, { isFavoritesSegment: isFavoritesSegment, isMobile: true }), !isEmpty &&
|
|
60
|
+
return isMobile ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.listScroll, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.listScrollInner, "data-mobile": isMobile || undefined, overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: [isEmpty && (0, jsx_runtime_1.jsx)(components_1.EmptyState, { isFavoritesSegment: isFavoritesSegment, isMobile: true }), !isEmpty &&
|
|
61
61
|
isFavoritesSegment &&
|
|
62
62
|
favoriteItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: 'always', favorite: {
|
|
63
63
|
enabled: true,
|
|
@@ -47,7 +47,10 @@
|
|
|
47
47
|
|
|
48
48
|
.listScrollInner{
|
|
49
49
|
height:100%;
|
|
50
|
-
max-height:calc(
|
|
50
|
+
max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
51
|
+
}
|
|
52
|
+
.listScrollInner[data-mobile]{
|
|
53
|
+
max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
.list{
|
|
@@ -56,7 +56,7 @@ function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platf
|
|
|
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, allServiceGroups: allServiceGroups }), 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)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', 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, {
|
|
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, allServiceGroups: allServiceGroups }), 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)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', 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,
|
|
@@ -39,5 +39,5 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
|
|
|
39
39
|
const handleClose = (0, react_1.useCallback)(() => {
|
|
40
40
|
setOpen(false);
|
|
41
41
|
}, [setOpen]);
|
|
42
|
-
return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true,
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
|
|
43
43
|
}
|
package/dist/cjs/style.css
CHANGED
|
@@ -342,6 +342,7 @@
|
|
|
342
342
|
}
|
|
343
343
|
|
|
344
344
|
.groupDragPreviewHeader{
|
|
345
|
+
position:relative;
|
|
345
346
|
padding:var(--sn-primitive-dimension-4, 4px) 0;
|
|
346
347
|
}
|
|
347
348
|
|
|
@@ -397,9 +398,6 @@
|
|
|
397
398
|
height:100%;
|
|
398
399
|
border-radius:inherit;
|
|
399
400
|
}
|
|
400
|
-
[data-drag-preview] .decoration{
|
|
401
|
-
z-index:-1;
|
|
402
|
-
}
|
|
403
401
|
.decoration[data-color-scheme=light]{
|
|
404
402
|
--highlight-border-color-from:hsl(155deg 48% 42% / 100%);
|
|
405
403
|
--highlight-border-color-to:hsl(155deg 48% 42% / 32%);
|
|
@@ -459,10 +457,6 @@
|
|
|
459
457
|
visibility:visible;
|
|
460
458
|
background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
|
|
461
459
|
}
|
|
462
|
-
.colorMarker[data-block-color=red]{
|
|
463
|
-
visibility:visible;
|
|
464
|
-
background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
|
|
465
|
-
}
|
|
466
460
|
.colorMarker[data-block-color=orange]{
|
|
467
461
|
visibility:visible;
|
|
468
462
|
background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
|
|
@@ -588,7 +582,10 @@
|
|
|
588
582
|
|
|
589
583
|
.listScrollInner{
|
|
590
584
|
height:100%;
|
|
591
|
-
max-height:calc(
|
|
585
|
+
max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
586
|
+
}
|
|
587
|
+
.listScrollInner[data-mobile]{
|
|
588
|
+
max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
592
589
|
}
|
|
593
590
|
|
|
594
591
|
.list{
|
|
@@ -53,9 +53,8 @@ export type ContentProps = {
|
|
|
53
53
|
rightTop?: ReactNode;
|
|
54
54
|
footer?: ReactNode;
|
|
55
55
|
isMobile?: boolean;
|
|
56
|
-
onClose?(): void;
|
|
57
56
|
className?: string;
|
|
58
57
|
/** Флаг загрузки данных */
|
|
59
58
|
loading?: boolean;
|
|
60
59
|
};
|
|
61
|
-
export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile,
|
|
60
|
+
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;
|
|
@@ -15,7 +15,7 @@ import { SortableGroup, SortableGroupSkeleton } from './helperComponents/Sortabl
|
|
|
15
15
|
import { useContentSegmentsSortable } from './hooks/useContentSegmentsSortable.js';
|
|
16
16
|
import { useSegmentDnd } from './hooks/useSegmentDnd.js';
|
|
17
17
|
import styles from './styles.module.css';
|
|
18
|
-
export function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile,
|
|
18
|
+
export function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
|
|
19
19
|
const { t } = headerLocale.useTranslations();
|
|
20
20
|
const showDescription = useDeferredValue(preferences?.showDescription.value ?? false);
|
|
21
21
|
const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
|
|
@@ -39,11 +39,10 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
|
|
|
39
39
|
}
|
|
40
40
|
if (!shouldBeOpenedInNewTab(e)) {
|
|
41
41
|
e?.preventDefault();
|
|
42
|
-
onClose?.();
|
|
43
42
|
}
|
|
44
43
|
onSegmentServiceClick?.(service, e);
|
|
45
44
|
service.onClick?.(e);
|
|
46
|
-
}, [
|
|
45
|
+
}, [onSegmentServiceClick]);
|
|
47
46
|
const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = useContentSegmentsSortable({
|
|
48
47
|
segments,
|
|
49
48
|
activeSegmentId: segmentId,
|
|
@@ -25,5 +25,5 @@ export function SortableGroup({ id, icon, label, items, isExpanded, showDescript
|
|
|
25
25
|
}
|
|
26
26
|
export function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }) {
|
|
27
27
|
const { colorScheme } = useThemeAppearance().appearance;
|
|
28
|
-
return (_jsx(DragPreview, { className: styles.groupDragPreview, children: _jsxs("div", { className: styles.group, "data-drag-preview": true,
|
|
28
|
+
return (_jsx(DragPreview, { className: styles.groupDragPreview, children: _jsxs("div", { className: styles.group, "data-drag-preview": true, children: [_jsx("div", { className: styles.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: _jsx("div", { className: styles.decorationBackground, children: _jsx("div", { className: styles.colorMarker, "data-block-color": blockColor }) }) }), _jsx("div", { className: styles.groupDragPreviewHeader, children: _jsx(SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }) }), isExpanded && (_jsx(SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled }))] }) }));
|
|
29
29
|
}
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.groupDragPreviewHeader{
|
|
78
|
+
position:relative;
|
|
78
79
|
padding:var(--sn-primitive-dimension-4, 4px) 0;
|
|
79
80
|
}
|
|
80
81
|
|
|
@@ -130,9 +131,6 @@
|
|
|
130
131
|
height:100%;
|
|
131
132
|
border-radius:inherit;
|
|
132
133
|
}
|
|
133
|
-
[data-drag-preview] .decoration{
|
|
134
|
-
z-index:-1;
|
|
135
|
-
}
|
|
136
134
|
.decoration[data-color-scheme=light]{
|
|
137
135
|
--highlight-border-color-from:hsl(155deg 48% 42% / 100%);
|
|
138
136
|
--highlight-border-color-to:hsl(155deg 48% 42% / 32%);
|
|
@@ -192,10 +190,6 @@
|
|
|
192
190
|
visibility:visible;
|
|
193
191
|
background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
|
|
194
192
|
}
|
|
195
|
-
.colorMarker[data-block-color=red]{
|
|
196
|
-
visibility:visible;
|
|
197
|
-
background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
|
|
198
|
-
}
|
|
199
193
|
.colorMarker[data-block-color=orange]{
|
|
200
194
|
visibility:visible;
|
|
201
195
|
background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
|
|
@@ -39,7 +39,7 @@ export function Favorites({ favorite, allServiceGroups, headerClassName, isMobil
|
|
|
39
39
|
favorite.onFavoriteServiceClick?.(service.id, event);
|
|
40
40
|
service.onClick(event);
|
|
41
41
|
};
|
|
42
|
-
const recentCards = recentItems.map(service => (_jsx(CardServiceLight, { as: 'a', className: styles.card, favorite: {
|
|
42
|
+
const recentCards = recentItems.map(service => (_jsx(CardServiceLight, { as: 'a', className: styles.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
|
|
43
43
|
enabled: true,
|
|
44
44
|
checked: favorite.value.includes(service.id),
|
|
45
45
|
onChange: favorite.onChange(service.id),
|
|
@@ -51,7 +51,7 @@ export function Favorites({ favorite, allServiceGroups, headerClassName, isMobil
|
|
|
51
51
|
/* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
|
|
52
52
|
<DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
|
|
53
53
|
избранного идёт через звёздочку на карточке. */
|
|
54
|
-
return isMobile ? (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, overflow: { x: 'hidden' }, children: _jsxs("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: [isEmpty && _jsx(EmptyState, { isFavoritesSegment: isFavoritesSegment, isMobile: true }), !isEmpty &&
|
|
54
|
+
return isMobile ? (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, "data-mobile": isMobile || undefined, overflow: { x: 'hidden' }, children: _jsxs("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: [isEmpty && _jsx(EmptyState, { isFavoritesSegment: isFavoritesSegment, isMobile: true }), !isEmpty &&
|
|
55
55
|
isFavoritesSegment &&
|
|
56
56
|
favoriteItems.map(service => (_jsx(CardServiceLight, { as: 'a', className: styles.card, actionsVisibility: 'always', favorite: {
|
|
57
57
|
enabled: true,
|
|
@@ -47,7 +47,10 @@
|
|
|
47
47
|
|
|
48
48
|
.listScrollInner{
|
|
49
49
|
height:100%;
|
|
50
|
-
max-height:calc(
|
|
50
|
+
max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
51
|
+
}
|
|
52
|
+
.listScrollInner[data-mobile]{
|
|
53
|
+
max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
.list{
|
|
@@ -50,7 +50,7 @@ export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems
|
|
|
50
50
|
const handleCloseDrawer = useCallback(() => {
|
|
51
51
|
setOpen(false);
|
|
52
52
|
}, [setOpen]);
|
|
53
|
-
const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(MountAnimation, { type: 'fade-slide-up-right', className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, {
|
|
53
|
+
const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(MountAnimation, { type: 'fade-slide-up-right', className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { className: styles.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 }) }) })] }))] })] }));
|
|
54
54
|
return (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles.drawer, rootClassName: styles.drawerRoot, "data-test-id": TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
|
|
55
55
|
? {
|
|
56
56
|
min: MENU_WIDTH_MIN,
|
|
@@ -33,5 +33,5 @@ export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems,
|
|
|
33
33
|
const handleClose = useCallback(() => {
|
|
34
34
|
setOpen(false);
|
|
35
35
|
}, [setOpen]);
|
|
36
|
-
return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true,
|
|
36
|
+
return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, className: styles.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
|
|
37
37
|
}
|
package/dist/esm/style.css
CHANGED
|
@@ -342,6 +342,7 @@
|
|
|
342
342
|
}
|
|
343
343
|
|
|
344
344
|
.groupDragPreviewHeader{
|
|
345
|
+
position:relative;
|
|
345
346
|
padding:var(--sn-primitive-dimension-4, 4px) 0;
|
|
346
347
|
}
|
|
347
348
|
|
|
@@ -397,9 +398,6 @@
|
|
|
397
398
|
height:100%;
|
|
398
399
|
border-radius:inherit;
|
|
399
400
|
}
|
|
400
|
-
[data-drag-preview] .decoration{
|
|
401
|
-
z-index:-1;
|
|
402
|
-
}
|
|
403
401
|
.decoration[data-color-scheme=light]{
|
|
404
402
|
--highlight-border-color-from:hsl(155deg 48% 42% / 100%);
|
|
405
403
|
--highlight-border-color-to:hsl(155deg 48% 42% / 32%);
|
|
@@ -459,10 +457,6 @@
|
|
|
459
457
|
visibility:visible;
|
|
460
458
|
background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
|
|
461
459
|
}
|
|
462
|
-
.colorMarker[data-block-color=red]{
|
|
463
|
-
visibility:visible;
|
|
464
|
-
background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
|
|
465
|
-
}
|
|
466
460
|
.colorMarker[data-block-color=orange]{
|
|
467
461
|
visibility:visible;
|
|
468
462
|
background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
|
|
@@ -588,7 +582,10 @@
|
|
|
588
582
|
|
|
589
583
|
.listScrollInner{
|
|
590
584
|
height:100%;
|
|
591
|
-
max-height:calc(
|
|
585
|
+
max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
586
|
+
}
|
|
587
|
+
.listScrollInner[data-mobile]{
|
|
588
|
+
max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
|
|
592
589
|
}
|
|
593
590
|
|
|
594
591
|
.list{
|