@cloud-ru/ds-uikit-product-header 1.4.0 → 1.4.1

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/Banners/MenuBanner.js +1 -1
  3. package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css +4 -0
  4. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js +1 -2
  5. package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.js +1 -1
  6. package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css +0 -2
  7. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +0 -3
  8. package/dist/cjs/style.css +4 -5
  9. package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.js +1 -1
  10. package/dist/esm/components/MainMenu/helperComponents/Banners/styles.module.css +4 -0
  11. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js +1 -2
  12. package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.js +1 -1
  13. package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css +0 -2
  14. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +0 -3
  15. package/dist/esm/style.css +4 -5
  16. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  17. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  18. package/package.json +8 -8
  19. package/src/components/MainMenu/helperComponents/Banners/MenuBanner.tsx +1 -0
  20. package/src/components/MainMenu/helperComponents/Banners/styles.module.scss +4 -0
  21. package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.tsx +2 -5
  22. package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.tsx +3 -14
  23. package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.scss +3 -4
  24. package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss +0 -4
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
+ ## 1.4.1 (2026-09-17)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-9146:** add tooltip for settings button, fixed color for EmptyRecent icon, inherit cursor for PromoTag in MenuBanner ([6ed78fd](https://github.com/cloud-ru-tech/snack-v2/commit/6ed78fdc6e909980f2f5bbb0e71d20363aa2d308))
11
+
6
12
  # 1.4.0 (2026-09-16)
7
13
 
8
14
  ### Bug Fixes
@@ -24,5 +24,5 @@ function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#
24
24
  e.stopPropagation();
25
25
  onClose?.(e);
26
26
  }, [onClose]);
27
- return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
27
+ return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
28
28
  }
@@ -55,4 +55,8 @@
55
55
  gap:var(--sn-primitive-dimension-4, 4px);
56
56
  align-items:center;
57
57
  justify-content:flex-end;
58
+ }
59
+
60
+ .promoTag{
61
+ cursor:inherit;
58
62
  }
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ContentToolbar = ContentToolbar;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- const button_1 = require("@cloud-ru/ds-button");
9
8
  const system_1 = require("@cloud-ru/ds-icons/interface/system");
10
9
  const modal_1 = require("@cloud-ru/ds-modal");
11
10
  const segment_control_1 = require("@cloud-ru/ds-segment-control");
@@ -29,7 +28,7 @@ function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpan
29
28
  (0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
30
29
  };
31
30
  const hasSegmentItems = segmentItems && segmentItems?.length > 0;
32
- return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
31
+ return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
33
32
  label: t('close'),
34
33
  onClick: closeModal,
35
34
  }, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.settingsContent, children: [preferences.showGroupsColors && ((0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": constants_1.TEST_IDS.settingsShowGroupsColorsSwitch })), (0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": constants_1.TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: allGroupsExpanded ? (0, jsx_runtime_1.jsx)(system_1.CollapseVerticalSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": constants_1.TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.EmptyRecentSVG = EmptyRecentSVG;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  function EmptyRecentSVG({ className }) {
6
- return ((0, jsx_runtime_1.jsxs)("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', children: [(0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', stroke: 'none', fill: '#C3C8D5' }), (0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', fill: 'none', stroke: '#5E606E', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' })] }));
6
+ return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', className: className, children: [(0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', fill: 'none', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', stroke: 'none' }), (0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', strokeWidth: '1.5', fill: 'none' }), (0, jsx_runtime_1.jsx)("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', fill: 'none', strokeWidth: '1.5' })] }));
7
7
  }
@@ -2,8 +2,6 @@
2
2
  flex-shrink:0;
3
3
  width:var(--sn-primitive-dimension-40, 40px);
4
4
  height:var(--sn-primitive-dimension-40, 40px);
5
- }
6
- .emptyIcon[data-favorite]{
7
5
  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
8
6
  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
9
7
  }
@@ -1,9 +1,6 @@
1
1
  .drawer{
2
2
  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
3
3
  }
4
- .drawer svg{
5
- fill:currentcolor;
6
- }
7
4
 
8
5
  .scroll{
9
6
  box-sizing:border-box;
@@ -149,6 +149,10 @@
149
149
  align-items:center;
150
150
  justify-content:flex-end;
151
151
  }
152
+
153
+ .promoTag{
154
+ cursor:inherit;
155
+ }
152
156
  .root{
153
157
  display:flex;
154
158
  gap:var(--sn-primitive-dimension-8, 8px);
@@ -520,8 +524,6 @@
520
524
  flex-shrink:0;
521
525
  width:var(--sn-primitive-dimension-40, 40px);
522
526
  height:var(--sn-primitive-dimension-40, 40px);
523
- }
524
- .emptyIcon[data-favorite]{
525
527
  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
526
528
  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
527
529
  }
@@ -648,9 +650,6 @@
648
650
  .drawer{
649
651
  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
650
652
  }
651
- .drawer svg{
652
- fill:currentcolor;
653
- }
654
653
 
655
654
  .scroll{
656
655
  box-sizing:border-box;
@@ -18,5 +18,5 @@ export function MenuBanner({ title, promoTag, afterTitle, onClose, className, hr
18
18
  e.stopPropagation();
19
19
  onClose?.(e);
20
20
  }, [onClose]);
21
- return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
21
+ return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, className: styles.promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
22
22
  }
@@ -55,4 +55,8 @@
55
55
  gap:var(--sn-primitive-dimension-4, 4px);
56
56
  align-items:center;
57
57
  justify-content:flex-end;
58
+ }
59
+
60
+ .promoTag{
61
+ cursor:inherit;
58
62
  }
@@ -1,5 +1,4 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Button } from '@cloud-ru/ds-button';
3
2
  import { CollapseVerticalSVG, ExpandVerticalSVG, SettingsSVG } from '@cloud-ru/ds-icons/interface/system';
4
3
  import { Modal } from '@cloud-ru/ds-modal';
5
4
  import { SegmentControl } from '@cloud-ru/ds-segment-control';
@@ -23,7 +22,7 @@ export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGrou
23
22
  startTransition(() => preferences?.showDescription?.onChange(value));
24
23
  };
25
24
  const hasSegmentItems = segmentItems && segmentItems?.length > 0;
26
- return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(WithSkeleton, { loading: loading, skeleton: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: _jsx(Skeleton, { className: styles.segmentControlSkeletonBlock }) }), children: _jsx(SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles.segmentControl, "data-test-id": TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && (_jsxs("div", { className: styles.actions, children: [preferences && (_jsxs(_Fragment, { children: [_jsx(Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: _jsx(SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsButton, onClick: openModal }), _jsx(Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsModal, cancelButton: {
25
+ return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(WithSkeleton, { loading: loading, skeleton: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: _jsx(Skeleton, { className: styles.segmentControlSkeletonBlock }) }), children: _jsx(SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles.segmentControl, "data-test-id": TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && (_jsxs("div", { className: styles.actions, children: [preferences && (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { icon: _jsx(SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), _jsx(Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsModal, cancelButton: {
27
26
  label: t('close'),
28
27
  onClick: closeModal,
29
28
  }, content: _jsxs("div", { className: styles.settingsContent, children: [preferences.showGroupsColors && (_jsx(SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": TEST_IDS.settingsShowGroupsColorsSwitch })), _jsx(SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && (_jsx(HeaderButton, { icon: allGroupsExpanded ? _jsx(CollapseVerticalSVG, {}) : _jsx(ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));
@@ -1,4 +1,4 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  export function EmptyRecentSVG({ className }) {
3
- return (_jsxs("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', children: [_jsx("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' }), _jsx("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', stroke: 'none', fill: '#C3C8D5' }), _jsx("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', fill: 'none', stroke: '#5E606E', strokeWidth: '1.5' }), _jsx("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' })] }));
3
+ return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', className: className, children: [_jsx("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', fill: 'none', strokeWidth: '1.5' }), _jsx("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', stroke: 'none' }), _jsx("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', strokeWidth: '1.5', fill: 'none' }), _jsx("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', fill: 'none', strokeWidth: '1.5' })] }));
4
4
  }
@@ -2,8 +2,6 @@
2
2
  flex-shrink:0;
3
3
  width:var(--sn-primitive-dimension-40, 40px);
4
4
  height:var(--sn-primitive-dimension-40, 40px);
5
- }
6
- .emptyIcon[data-favorite]{
7
5
  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
8
6
  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
9
7
  }
@@ -1,9 +1,6 @@
1
1
  .drawer{
2
2
  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
3
3
  }
4
- .drawer svg{
5
- fill:currentcolor;
6
- }
7
4
 
8
5
  .scroll{
9
6
  box-sizing:border-box;
@@ -149,6 +149,10 @@
149
149
  align-items:center;
150
150
  justify-content:flex-end;
151
151
  }
152
+
153
+ .promoTag{
154
+ cursor:inherit;
155
+ }
152
156
  .root{
153
157
  display:flex;
154
158
  gap:var(--sn-primitive-dimension-8, 8px);
@@ -520,8 +524,6 @@
520
524
  flex-shrink:0;
521
525
  width:var(--sn-primitive-dimension-40, 40px);
522
526
  height:var(--sn-primitive-dimension-40, 40px);
523
- }
524
- .emptyIcon[data-favorite]{
525
527
  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
526
528
  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
527
529
  }
@@ -648,9 +650,6 @@
648
650
  .drawer{
649
651
  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
650
652
  }
651
- .drawer svg{
652
- fill:currentcolor;
653
- }
654
653
 
655
654
  .scroll{
656
655
  box-sizing:border-box;