@cloud-ru/ds-uikit-product-header 1.3.3-preview-18093d38.0 → 1.3.3

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.3.3 (2026-09-05)
+
+### Bug Fixes
+
+- **FF-8974:** cards group title skeleton size ([135daa5](https://github.com/cloud-ru-tech/snack-v2/commit/135daa5eac721af7cda5f79578507d27bc76e65d))
+- **FF-8974:** skeleton for segment, visible subCategory actions on mobile and proper size, disable subCategory expand when clicked on title ([60e0b1a](https://github.com/cloud-ru-tech/snack-v2/commit/60e0b1a3dd9569b206fc5aca781d0a75f2b2ef52))
+
 ## 1.3.2 (2026-09-03)
 
 **Note:** Version bump only for package @ds/uikit-product-header

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js

@@ -29,8 +29,7 @@ function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpan
         (0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    const segmentControlSkeletonSize = isMobile ? { width: '100%', height: 48 } : { width: 262, height: 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)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { ...segmentControlSkeletonSize }) }) })) : ((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: {
+    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: {
                                     label: t('close'),
                                     onClick: closeModal,
                                 }, 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') } }))] }))] }));

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -15,6 +15,17 @@
 .segmentControlSkeleton{
   display:flex;
   flex-shrink:0;
+  width:264px;
+  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+}
+.segmentControlSkeleton[data-mobile]{
+  width:100%;
+}
+
+.segmentControlSkeletonBlock{
+  width:100%;
+  height:100%;
+  border-radius:var(--sn-segmentControl-anatomy-size-m-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .actions{

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.js

@@ -8,5 +8,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const skeleton_1 = require("@cloud-ru/ds-skeleton");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 function SortableGroupSkeleton({ isMobile }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.group, children: (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContext.Provider, { value: true, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonTitle, children: (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { lines: 1, width: isMobile ? '50%' : '30%' }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonBody, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.group, children: (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContext.Provider, { value: true, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonTitle, children: (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { variant: 'title', size: 'm', lines: 1, width: isMobile ? '50%' : '30%' }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonBody, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonService, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: 24, borderRadius: 2 }) })] }) })] }) }));
 }

package/dist/cjs/style.css

@@ -169,6 +169,17 @@
 .segmentControlSkeleton{
   display:flex;
   flex-shrink:0;
+  width:264px;
+  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+}
+.segmentControlSkeleton[data-mobile]{
+  width:100%;
+}
+
+.segmentControlSkeletonBlock{
+  width:100%;
+  height:100%;
+  border-radius:var(--sn-segmentControl-anatomy-size-m-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .actions{

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '@cloud-ru/ds-button';
 import { CollapseVerticalSVG, ExpandVerticalSVG, SettingsSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Modal } from '@cloud-ru/ds-modal';
 import { SegmentControl } from '@cloud-ru/ds-segment-control';
-import { Skeleton, SkeletonContext } from '@cloud-ru/ds-skeleton';
+import { Skeleton, WithSkeleton } from '@cloud-ru/ds-skeleton';
 import { SwitchRow } from '@cloud-ru/ds-uikit-product-switch-row';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { startTransition } from 'react';
@@ -23,8 +23,7 @@ export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGrou
         startTransition(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    const segmentControlSkeletonSize = isMobile ? { width: '100%', height: 48 } : { width: 262, height: 32 };
-    return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(_Fragment, { children: loading ? (_jsx(SkeletonContext.Provider, { value: true, children: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, children: _jsx(Skeleton, { ...segmentControlSkeletonSize }) }) })) : (_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: {
+    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: {
                                     label: t('close'),
                                     onClick: closeModal,
                                 }, 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') } }))] }))] }));

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -15,6 +15,17 @@
 .segmentControlSkeleton{
   display:flex;
   flex-shrink:0;
+  width:264px;
+  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+}
+.segmentControlSkeleton[data-mobile]{
+  width:100%;
+}
+
+.segmentControlSkeletonBlock{
+  width:100%;
+  height:100%;
+  border-radius:var(--sn-segmentControl-anatomy-size-m-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .actions{

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton, SkeletonContext, SkeletonText } from '@cloud-ru/ds-skeleton';
 import styles from '../styles.module.css';
 export function SortableGroupSkeleton({ isMobile }) {
-    return (_jsx("div", { className: styles.group, children: _jsxs(SkeletonContext.Provider, { value: true, children: [_jsx("div", { className: styles.skeletonTitle, children: _jsx(SkeletonText, { lines: 1, width: isMobile ? '50%' : '30%' }) }), _jsx("div", { className: styles.skeletonBody, children: _jsxs("div", { className: styles.groupBody, "data-mobile": isMobile || undefined, children: [_jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) }), _jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) }), _jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) }), _jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) })] }) })] }) }));
+    return (_jsx("div", { className: styles.group, children: _jsxs(SkeletonContext.Provider, { value: true, children: [_jsx("div", { className: styles.skeletonTitle, children: _jsx(SkeletonText, { variant: 'title', size: 'm', lines: 1, width: isMobile ? '50%' : '30%' }) }), _jsx("div", { className: styles.skeletonBody, children: _jsxs("div", { className: styles.groupBody, "data-mobile": isMobile || undefined, children: [_jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) }), _jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) }), _jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) }), _jsx("div", { className: styles.skeletonService, children: _jsx(Skeleton, { height: 24, borderRadius: 2 }) })] }) })] }) }));
 }

package/dist/esm/style.css

@@ -169,6 +169,17 @@
 .segmentControlSkeleton{
   display:flex;
   flex-shrink:0;
+  width:264px;
+  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+}
+.segmentControlSkeleton[data-mobile]{
+  width:100%;
+}
+
+.segmentControlSkeletonBlock{
+  width:100%;
+  height:100%;
+  border-radius:var(--sn-segmentControl-anatomy-size-m-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .actions{