@cloud-ru/ds-uikit-product-header 2.2.2 → 2.2.4-preview-57a467a6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js +1 -1
  3. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.js +1 -1
  4. package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesList.js +1 -1
  5. package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesReorderList.js +1 -1
  6. package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/RecentList.js +1 -1
  7. package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css +1 -2
  8. package/dist/cjs/style.css +1 -2
  9. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js +1 -1
  10. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.js +1 -1
  11. package/dist/esm/components/MainMenu/helperComponents/Favorites/components/FavoritesList.js +1 -1
  12. package/dist/esm/components/MainMenu/helperComponents/Favorites/components/FavoritesReorderList.js +1 -1
  13. package/dist/esm/components/MainMenu/helperComponents/Favorites/components/RecentList.js +1 -1
  14. package/dist/esm/components/MainMenu/helperComponents/Favorites/styles.module.css +1 -2
  15. package/dist/esm/style.css +1 -2
  16. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  17. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  18. package/package.json +31 -31
  19. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.tsx +1 -2
  20. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.tsx +1 -2
  21. package/src/components/MainMenu/helperComponents/Favorites/components/FavoritesList.tsx +1 -1
  22. package/src/components/MainMenu/helperComponents/Favorites/components/FavoritesReorderList.tsx +1 -1
  23. package/src/components/MainMenu/helperComponents/Favorites/components/RecentList.tsx +7 -1
  24. package/src/components/MainMenu/helperComponents/Favorites/styles.module.scss +4 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
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
+ ## 2.2.3 (2026-10-17)
7
+
8
+ ### Dependencies
9
+
10
+ - **FF-8949:** update title clickable ([fb85bb8](https://github.com/cloud-ru-tech/snack-v2/commit/fb85bb8d4fc936996778eec11f8647fb4412919f))
11
+
6
12
  ## 2.2.2 (2026-10-16)
7
13
 
8
14
  **Note:** Version bump only for package @ds/uikit-product-header
@@ -18,6 +18,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
18
18
  e.stopPropagation();
19
19
  label?.onClick?.(e);
20
20
  }, [label]);
21
- return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, {}), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
21
+ return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, content: (0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable.SimpleTitle, { title: label.text, icon: (0, utils_1.getLinkEmblem)({ icon }) }) })) : (label.text) }), (enableServiceDrag || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && (0, jsx_runtime_1.jsx)(SortableGroupDragHandle_1.SortableGroupDragHandle, {}), !isMobile && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
22
22
  }
23
23
  exports.SortableGroupHeader = (0, react_1.memo)(SortableGroupHeaderBase);
@@ -44,7 +44,7 @@ function SubCategoryTitleBase({ groupId, service, groupFavoritesEnabled, expanda
44
44
  }), [hasTooltip, cardFavoriteChange, id, isFavorite]);
45
45
  const emblem = (0, react_1.useMemo)(() => (0, utils_2.getLinkEmblem)({ icon }), [icon]);
46
46
  if (expandable?.value) {
47
- return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitle, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: emblem, className: styles_module_scss_1.default.subcategoryTitleClickable, "data-test-id": titleTestId }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardActionsSurface, { className: styles_module_scss_1.default.subcategoryTitleActions, actionsVisibility: 'always', tooltip: hasTooltip
47
+ return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitle, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, content: (0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable.SimpleTitle, { title: service.label, icon: emblem }), className: styles_module_scss_1.default.subcategoryTitleClickable, "data-test-id": titleTestId }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardActionsSurface, { className: styles_module_scss_1.default.subcategoryTitleActions, actionsVisibility: 'always', tooltip: hasTooltip
48
48
  ? {
49
49
  tip: description,
50
50
  buttonRef: tooltipTriggerRef,
@@ -22,7 +22,7 @@ const EmptyState_1 = require("./EmptyState");
22
22
  */
23
23
  function FavoritesListBase({ onFavoriteChange, items, onServiceClick }) {
24
24
  const isEmpty = items.length === 0;
25
- return ((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": true, overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: isEmpty ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: true, isMobile: true })) : (items.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardNavigation, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: 'always', favorite: {
25
+ return ((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": true, overflow: { x: 'hidden' }, barHideStrategy: 'never', children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: isEmpty ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: true, isMobile: true })) : (items.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardNavigation, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: 'always', favorite: {
26
26
  enabled: true,
27
27
  checked: true,
28
28
  onChange: onFavoriteChange(service.id),
@@ -27,7 +27,7 @@ const SortableFavoriteCard_1 = require("./SortableFavoriteCard");
27
27
  function FavoritesReorderListBase({ favoriteIds, onFavoriteChange, items, onServiceClick }) {
28
28
  const { setNodeRef, listEndRef, favoriteSortableIds, insertIndex, isInsertingToEnd, showDropOver, showInsertNew } = (0, useFavoritesReorder_1.useFavoritesReorder)({ favoriteIds, favoriteItems: items });
29
29
  const isEmpty = items.length === 0;
30
- return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.listScroll, "data-insert-new": showInsertNew, children: [(0, jsx_runtime_1.jsx)(drag_and_drop_1.DropTarget, { active: Boolean(showDropOver), className: styles_module_scss_1.default.dropTarget, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.listScrollInner, overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: isEmpty ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: true })) : ((0, jsx_runtime_1.jsxs)(sortable_1.SortableContext, { items: favoriteSortableIds, strategy: sortable_1.verticalListSortingStrategy, children: [items.map((service, index) => ((0, jsx_runtime_1.jsx)(SortableFavoriteCard_1.SortableFavoriteCard, { serviceId: service.id, showInsertIndicatorBefore: insertIndex === index, showInsertIndicatorAfter: isInsertingToEnd && index === items.length - 1, isFirst: index === 0, favorite: {
30
+ return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.listScroll, "data-insert-new": showInsertNew, children: [(0, jsx_runtime_1.jsx)(drag_and_drop_1.DropTarget, { active: Boolean(showDropOver), className: styles_module_scss_1.default.dropTarget, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.listScrollInner, overflow: { x: 'hidden' }, barHideStrategy: 'never', children: (0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: isEmpty ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: true })) : ((0, jsx_runtime_1.jsxs)(sortable_1.SortableContext, { items: favoriteSortableIds, strategy: sortable_1.verticalListSortingStrategy, children: [items.map((service, index) => ((0, jsx_runtime_1.jsx)(SortableFavoriteCard_1.SortableFavoriteCard, { serviceId: service.id, showInsertIndicatorBefore: insertIndex === index, showInsertIndicatorAfter: isInsertingToEnd && index === items.length - 1, isFirst: index === 0, favorite: {
31
31
  enabled: true,
32
32
  checked: true,
33
33
  onChange: onFavoriteChange(service.id),
@@ -22,7 +22,7 @@ const EmptyState_1 = require("./EmptyState");
22
22
  function RecentListBase({ favoriteIds, onFavoriteChange, items, onServiceClick, isMobile }) {
23
23
  const isEmpty = items.length === 0;
24
24
  const favoriteIdsSet = (0, react_1.useMemo)(() => new Set(favoriteIds), [favoriteIds]);
25
- return ((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.jsx)("div", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: isEmpty ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: false, isMobile: isMobile })) : (items.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardNavigation, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
25
+ return ((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-segment": 'recent', "data-mobile": isMobile || undefined, overflow: { x: 'hidden' }, barHideStrategy: 'never', children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: isEmpty ? ((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: false, isMobile: isMobile })) : (items.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardNavigation, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
26
26
  enabled: true,
27
27
  checked: favoriteIdsSet.has(service.id),
28
28
  onChange: onFavoriteChange(service.id),
@@ -45,8 +45,7 @@
45
45
  inset:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
46
46
  }
47
47
 
48
- .listScrollInner{
49
- height:100%;
48
+ .listScrollInner[data-segment=recent]{
50
49
  max-height:calc((var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))) + var(--sn-primitive-dimension-0, 0px)) * 12 + var(--sn-primitive-dimension-8, 8px));
51
50
  }
52
51
  .listScrollInner[data-mobile]{
@@ -1127,8 +1127,7 @@
1127
1127
  inset:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
1128
1128
  }
1129
1129
 
1130
- .listScrollInner{
1131
- height:100%;
1130
+ .listScrollInner[data-segment=recent]{
1132
1131
  max-height:calc((var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))) + var(--sn-primitive-dimension-0, 0px)) * 12 + var(--sn-primitive-dimension-8, 8px));
1133
1132
  }
1134
1133
  .listScrollInner[data-mobile]{
@@ -12,6 +12,6 @@ function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, a
12
12
  e.stopPropagation();
13
13
  label?.onClick?.(e);
14
14
  }, [label]);
15
- return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: getLinkEmblem({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, {}), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
15
+ return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, ...attributes, ...listeners, tabIndex: -1, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, content: _jsx(TitleClickable.SimpleTitle, { title: label.text, icon: getLinkEmblem({ icon }) }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, {}), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
16
16
  }
17
17
  export const SortableGroupHeader = memo(SortableGroupHeaderBase);
@@ -38,7 +38,7 @@ function SubCategoryTitleBase({ groupId, service, groupFavoritesEnabled, expanda
38
38
  }), [hasTooltip, cardFavoriteChange, id, isFavorite]);
39
39
  const emblem = useMemo(() => getLinkEmblem({ icon }), [icon]);
40
40
  if (expandable?.value) {
41
- return (_jsxs("div", { className: styles.subcategoryTitle, "data-mobile": isMobile || undefined, children: [_jsxs("div", { className: styles.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [_jsx(TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: emblem, className: styles.subcategoryTitleClickable, "data-test-id": titleTestId }), _jsx(CardActionsSurface, { className: styles.subcategoryTitleActions, actionsVisibility: 'always', tooltip: hasTooltip
41
+ return (_jsxs("div", { className: styles.subcategoryTitle, "data-mobile": isMobile || undefined, children: [_jsxs("div", { className: styles.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [_jsx(TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, content: _jsx(TitleClickable.SimpleTitle, { title: service.label, icon: emblem }), className: styles.subcategoryTitleClickable, "data-test-id": titleTestId }), _jsx(CardActionsSurface, { className: styles.subcategoryTitleActions, actionsVisibility: 'always', tooltip: hasTooltip
42
42
  ? {
43
43
  tip: description,
44
44
  buttonRef: tooltipTriggerRef,
@@ -16,7 +16,7 @@ import { EmptyState } from './EmptyState/index.js';
16
16
  */
17
17
  function FavoritesListBase({ onFavoriteChange, items, onServiceClick }) {
18
18
  const isEmpty = items.length === 0;
19
- return (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, "data-mobile": true, overflow: { x: 'hidden' }, children: _jsx("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: isEmpty ? (_jsx(EmptyState, { isFavoritesSegment: true, isMobile: true })) : (items.map(service => (_jsx(CardNavigation, { as: 'a', className: styles.card, actionsVisibility: 'always', favorite: {
19
+ return (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, "data-mobile": true, overflow: { x: 'hidden' }, barHideStrategy: 'never', children: _jsx("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: isEmpty ? (_jsx(EmptyState, { isFavoritesSegment: true, isMobile: true })) : (items.map(service => (_jsx(CardNavigation, { as: 'a', className: styles.card, actionsVisibility: 'always', favorite: {
20
20
  enabled: true,
21
21
  checked: true,
22
22
  onChange: onFavoriteChange(service.id),
@@ -21,7 +21,7 @@ import { SortableFavoriteCard } from './SortableFavoriteCard.js';
21
21
  function FavoritesReorderListBase({ favoriteIds, onFavoriteChange, items, onServiceClick }) {
22
22
  const { setNodeRef, listEndRef, favoriteSortableIds, insertIndex, isInsertingToEnd, showDropOver, showInsertNew } = useFavoritesReorder({ favoriteIds, favoriteItems: items });
23
23
  const isEmpty = items.length === 0;
24
- return (_jsxs("div", { className: styles.listScroll, "data-insert-new": showInsertNew, children: [_jsx(DropTarget, { active: Boolean(showDropOver), className: styles.dropTarget, "aria-hidden": true }), _jsx(Scroll, { className: styles.listScrollInner, overflow: { x: 'hidden' }, children: _jsx("div", { ref: setNodeRef, className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: isEmpty ? (_jsx(EmptyState, { isFavoritesSegment: true })) : (_jsxs(SortableContext, { items: favoriteSortableIds, strategy: verticalListSortingStrategy, children: [items.map((service, index) => (_jsx(SortableFavoriteCard, { serviceId: service.id, showInsertIndicatorBefore: insertIndex === index, showInsertIndicatorAfter: isInsertingToEnd && index === items.length - 1, isFirst: index === 0, favorite: {
24
+ return (_jsxs("div", { className: styles.listScroll, "data-insert-new": showInsertNew, children: [_jsx(DropTarget, { active: Boolean(showDropOver), className: styles.dropTarget, "aria-hidden": true }), _jsx(Scroll, { className: styles.listScrollInner, overflow: { x: 'hidden' }, barHideStrategy: 'never', children: _jsx("div", { ref: setNodeRef, className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: isEmpty ? (_jsx(EmptyState, { isFavoritesSegment: true })) : (_jsxs(SortableContext, { items: favoriteSortableIds, strategy: verticalListSortingStrategy, children: [items.map((service, index) => (_jsx(SortableFavoriteCard, { serviceId: service.id, showInsertIndicatorBefore: insertIndex === index, showInsertIndicatorAfter: isInsertingToEnd && index === items.length - 1, isFirst: index === 0, favorite: {
25
25
  enabled: true,
26
26
  checked: true,
27
27
  onChange: onFavoriteChange(service.id),
@@ -16,7 +16,7 @@ import { EmptyState } from './EmptyState/index.js';
16
16
  function RecentListBase({ favoriteIds, onFavoriteChange, items, onServiceClick, isMobile }) {
17
17
  const isEmpty = items.length === 0;
18
18
  const favoriteIdsSet = useMemo(() => new Set(favoriteIds), [favoriteIds]);
19
- return (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, "data-mobile": isMobile || undefined, overflow: { x: 'hidden' }, children: _jsx("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: isEmpty ? (_jsx(EmptyState, { isFavoritesSegment: false, isMobile: isMobile })) : (items.map(service => (_jsx(CardNavigation, { as: 'a', className: styles.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
19
+ return (_jsx("div", { className: styles.listScroll, children: _jsx(Scroll, { className: styles.listScrollInner, "data-segment": 'recent', "data-mobile": isMobile || undefined, overflow: { x: 'hidden' }, barHideStrategy: 'never', children: _jsx("div", { className: styles.list, "data-test-id": FAVORITES_TEST_IDS.list, children: isEmpty ? (_jsx(EmptyState, { isFavoritesSegment: false, isMobile: isMobile })) : (items.map(service => (_jsx(CardNavigation, { as: 'a', className: styles.card, actionsVisibility: isMobile ? 'always' : 'hover', favorite: {
20
20
  enabled: true,
21
21
  checked: favoriteIdsSet.has(service.id),
22
22
  onChange: onFavoriteChange(service.id),
@@ -45,8 +45,7 @@
45
45
  inset:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
46
46
  }
47
47
 
48
- .listScrollInner{
49
- height:100%;
48
+ .listScrollInner[data-segment=recent]{
50
49
  max-height:calc((var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))) + var(--sn-primitive-dimension-0, 0px)) * 12 + var(--sn-primitive-dimension-8, 8px));
51
50
  }
52
51
  .listScrollInner[data-mobile]{
@@ -1127,8 +1127,7 @@
1127
1127
  inset:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
1128
1128
  }
1129
1129
 
1130
- .listScrollInner{
1131
- height:100%;
1130
+ .listScrollInner[data-segment=recent]{
1132
1131
  max-height:calc((var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))) + var(--sn-primitive-dimension-0, 0px)) * 12 + var(--sn-primitive-dimension-8, 8px));
1133
1132
  }
1134
1133
  .listScrollInner[data-mobile]{