@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.
Files changed (29) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/MainMenu/helperComponents/Content/Content.d.ts +1 -2
  3. package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +2 -3
  4. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js +1 -1
  5. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -7
  6. package/dist/cjs/components/MainMenu/helperComponents/Favorites/Favorites.js +2 -2
  7. package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css +4 -1
  8. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +1 -1
  9. package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js +1 -1
  10. package/dist/cjs/style.css +5 -8
  11. package/dist/esm/components/MainMenu/helperComponents/Content/Content.d.ts +1 -2
  12. package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +2 -3
  13. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js +1 -1
  14. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -7
  15. package/dist/esm/components/MainMenu/helperComponents/Favorites/Favorites.js +2 -2
  16. package/dist/esm/components/MainMenu/helperComponents/Favorites/styles.module.css +4 -1
  17. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js +1 -1
  18. package/dist/esm/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js +1 -1
  19. package/dist/esm/style.css +5 -8
  20. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  21. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  22. package/package.json +13 -13
  23. package/src/components/MainMenu/helperComponents/Content/Content.tsx +1 -5
  24. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.tsx +1 -1
  25. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +1 -5
  26. package/src/components/MainMenu/helperComponents/Favorites/Favorites.tsx +2 -1
  27. package/src/components/MainMenu/helperComponents/Favorites/styles.module.scss +9 -3
  28. package/src/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.tsx +0 -1
  29. 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, onClose, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;
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, onClose, preferences, loading, }) {
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
- }, [onClose, onSegmentServiceClick]);
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, "data-block-color": blockColor, 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 }))] }) }));
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((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-4, 4px));
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, { onClose: handleCloseDrawer, 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 }) }) })] }))] })] }));
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, onClose: handleClose, 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 })] }) }) }));
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
  }
@@ -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((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-4, 4px));
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, onClose, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;
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, onClose, preferences, loading, }) {
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
- }, [onClose, onSegmentServiceClick]);
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, "data-block-color": blockColor, 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 }))] }) }));
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((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-4, 4px));
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, { onClose: handleCloseDrawer, 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 }) }) })] }))] })] }));
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, onClose: handleClose, 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 })] }) }) }));
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
  }
@@ -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((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-4, 4px));
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{