@cloud-ru/ds-uikit-product-header 1.3.2 → 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/README.md

@@ -342,6 +342,7 @@ function LocalMainMenu() {
 | `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
 | `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
 | `disabled` | `boolean \| undefined` | — |  |
+| `expandableEnabled` | `boolean \| undefined` | — | Разрешено ли раскрытие карточки. default=false - Запрещено |
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточки в избранное. default=true - разрешено |
 | `hidden` | `boolean \| undefined` | — |  |
 | `href` | `string \| undefined` | — |  |
@@ -513,6 +514,7 @@ import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
 | `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
 | `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
 | `disabled` | `boolean \| undefined` | — |  |
+| `expandableEnabled` | `boolean \| undefined` | — | Разрешено ли раскрытие карточки. default=false - Запрещено |
 | `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточки в избранное. default=true - разрешено |
 | `hidden` | `boolean \| undefined` | — |  |
 | `href` | `string \| undefined` | — |  |

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

@@ -97,5 +97,5 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles_module_scss_1.default.noData }));
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), !isMobile && rightTop] })), cards, footer] })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.d.ts

@@ -14,5 +14,7 @@ export type ContentToolbarProps = {
     /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
     preferences?: MainMenuPreferencesProps;
     isMobile?: boolean;
+    /** Флаг загрузки данных — сегменты подгружаются с бэка, поэтому SegmentControl тоже уходит в скелетон. */
+    loading?: boolean;
 };
-export declare function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, }: ContentToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, loading, }: ContentToolbarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,6 +9,7 @@ const button_1 = require("@cloud-ru/ds-button");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const modal_1 = require("@cloud-ru/ds-modal");
 const segment_control_1 = require("@cloud-ru/ds-segment-control");
+const skeleton_1 = require("@cloud-ru/ds-skeleton");
 const uikit_product_switch_row_1 = require("@cloud-ru/ds-uikit-product-switch-row");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
@@ -16,7 +17,7 @@ const locale_1 = require("../../../../../../locale");
 const HeaderButton_1 = require("../../../../../HeaderButton");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, }) {
+function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, loading, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({
         value: preferences?.open,
@@ -28,7 +29,7 @@ function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpan
         (0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    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)(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) && ((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

@@ -12,6 +12,22 @@
   flex-shrink:0;
 }
 
+.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{
   display:flex;
   flex-shrink:0;

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/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -17,11 +17,14 @@ function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled
     const subcategoryId = (0, innerLink_1.getSubCategoryId)(groupId, service.id);
     const nestedGroupId = (0, innerLink_1.getNestedServiceGroupId)(groupId, service.id);
     const nestedItems = (0, react_1.useMemo)(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
+    const isExpandableEnabled = service.expandableEnabled ?? false;
     // Раскрытие подкатегории — локальное uncontrolled состояние: наружу его пока не выводим.
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(subcategoryId);
     const handleExpandedChange = (0, react_1.useCallback)(() => {
-        setIsExpanded(isExpanded ? undefined : subcategoryId);
-    }, [isExpanded, subcategoryId]);
+        if (isExpandableEnabled) {
+            setIsExpanded(isExpanded ? undefined : subcategoryId);
+        }
+    }, [isExpanded, subcategoryId, isExpandableEnabled]);
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles_module_scss_2.default.subcategoryAccordion, afterTitle: (0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.js

@@ -39,7 +39,7 @@ function SubCategoryTitle({ groupId, service, showDescription: showDescriptionPr
         ],
     });
     if (expandable?.value) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subcategoryTitle, 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: (0, utils_2.getLinkEmblem)(service), 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
+        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: (0, utils_2.getLinkEmblem)(service), 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', actionsSize: isMobile ? 's' : 'm', tooltip: hasTooltip
                                 ? {
                                     tip: service.description,
                                     buttonRef: tooltipTriggerRef,
@@ -56,5 +56,9 @@ function SubCategoryTitle({ groupId, service, showDescription: showDescriptionPr
                                 }
                                 : undefined })] }), showDescription && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'p', variant: 'body', size: 's', className: styles_module_scss_1.default.subcategoryDescription, "data-test-id": `${titleTestId}-description`, children: service.description }))] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subcategoryTitleDraggable, onPointerDown: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
+    return (
+    // Карточка — ссылка `<a>`: клик по ней бы долетал до `onClick={toggleOpen}` заголовка
+    // родительского CollapseBlockTertiary (см. TODO там) и лишний раз переключал аккордеон.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subcategoryTitleDraggable, onPointerDown: utils_1.stopEventPropagation, onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
 }

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

@@ -32,6 +32,9 @@
 .subcategoryTitle:hover .subcategoryTitleActions, .subcategoryTitle:focus-within .subcategoryTitleActions{
   visibility:visible;
 }
+.subcategoryTitle[data-mobile] .subcategoryTitleActions{
+  visibility:visible;
+}
 
 .subcategoryTitleRow{
   display:flex;

package/dist/cjs/components/MainMenu/types.d.ts

@@ -36,6 +36,8 @@ export type InnerLink = {
     badge?: CardServiceLightProps['promoTag'];
     /** Разрешено ли добавление карточки в избранное. default=true - разрешено */
     favoritesEnabled?: boolean;
+    /** Разрешено ли раскрытие карточки. default=false - Запрещено */
+    expandableEnabled?: boolean;
     /**
      * Вложенные сервисы подкатегории.
      *

package/dist/cjs/style.css

@@ -166,6 +166,22 @@
   flex-shrink:0;
 }
 
+.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{
   display:flex;
   flex-shrink:0;
@@ -214,6 +230,9 @@
 .subcategoryTitle:hover .subcategoryTitleActions, .subcategoryTitle:focus-within .subcategoryTitleActions{
   visibility:visible;
 }
+.subcategoryTitle[data-mobile] .subcategoryTitleActions{
+  visibility:visible;
+}
 
 .subcategoryTitleRow{
   display:flex;

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

@@ -91,5 +91,5 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles.noData }));
     })();
-    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [isMobile && rightTop, _jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
+    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [isMobile && rightTop, _jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), !isMobile && rightTop] })), cards, footer] })] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.d.ts

@@ -14,5 +14,7 @@ export type ContentToolbarProps = {
     /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
     preferences?: MainMenuPreferencesProps;
     isMobile?: boolean;
+    /** Флаг загрузки данных — сегменты подгружаются с бэка, поэтому SegmentControl тоже уходит в скелетон. */
+    loading?: boolean;
 };
-export declare function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, }: ContentToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, loading, }: ContentToolbarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,7 @@ 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, 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';
@@ -10,7 +11,7 @@ import { headerLocale } from '../../../../../../locale/index.js';
 import { HeaderButton } from '../../../../../HeaderButton/index.js';
 import { TEST_IDS } from '../../constants.js';
 import styles from './styles.module.css';
-export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, }) {
+export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, loading, }) {
     const { t } = headerLocale.useTranslations();
     const [open = false, setOpen] = useValueControl({
         value: preferences?.open,
@@ -22,7 +23,7 @@ export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGrou
         startTransition(() => preferences?.showDescription?.onChange(value));
     };
     const hasSegmentItems = segmentItems && segmentItems?.length > 0;
-    return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_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) && (_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

@@ -12,6 +12,22 @@
   flex-shrink:0;
 }
 
+.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{
   display:flex;
   flex-shrink:0;

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/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -11,11 +11,14 @@ export function SubCategory({ groupId, service, showDescription, isMobile, dragD
     const subcategoryId = getSubCategoryId(groupId, service.id);
     const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
     const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
+    const isExpandableEnabled = service.expandableEnabled ?? false;
     // Раскрытие подкатегории — локальное uncontrolled состояние: наружу его пока не выводим.
     const [isExpanded, setIsExpanded] = useState(subcategoryId);
     const handleExpandedChange = useCallback(() => {
-        setIsExpanded(isExpanded ? undefined : subcategoryId);
-    }, [isExpanded, subcategoryId]);
+        if (isExpandableEnabled) {
+            setIsExpanded(isExpanded ? undefined : subcategoryId);
+        }
+    }, [isExpanded, subcategoryId, isExpandableEnabled]);
     return (_jsx("div", { className: styles.subcategory, "data-test-id": `${TEST_IDS.subcategory}-${service.id}`, children: _jsx(Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: _jsx(Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles.subcategoryAccordion, afterTitle: _jsx(SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.js

@@ -33,7 +33,7 @@ export function SubCategoryTitle({ groupId, service, showDescription: showDescri
         ],
     });
     if (expandable?.value) {
-        return (_jsxs("div", { className: styles.subcategoryTitle, children: [_jsxs("div", { className: styles.subcategoryTitleRow, onKeyDown: handleKeyDown, children: [_jsx(TitleClickable, { as: 'a', href: service.href, onClick: handleServiceClick, innerRef: titleRef, title: service.label, icon: getLinkEmblem(service), className: styles.subcategoryTitleClickable, "data-test-id": titleTestId }), _jsx(CardActionsSurface, { className: styles.subcategoryTitleActions, actionsVisibility: 'always', tooltip: hasTooltip
+        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: getLinkEmblem(service), className: styles.subcategoryTitleClickable, "data-test-id": titleTestId }), _jsx(CardActionsSurface, { className: styles.subcategoryTitleActions, actionsVisibility: 'always', actionsSize: isMobile ? 's' : 'm', tooltip: hasTooltip
                                 ? {
                                     tip: service.description,
                                     buttonRef: tooltipTriggerRef,
@@ -50,5 +50,9 @@ export function SubCategoryTitle({ groupId, service, showDescription: showDescri
                                 }
                                 : undefined })] }), showDescription && (_jsx(Typography, { as: 'p', variant: 'body', size: 's', className: styles.subcategoryDescription, "data-test-id": `${titleTestId}-description`, children: service.description }))] }));
     }
-    return (_jsx("div", { className: styles.subcategoryTitleDraggable, onPointerDown: stopEventPropagation, children: _jsx(DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
+    return (
+    // Карточка — ссылка `<a>`: клик по ней бы долетал до `onClick={toggleOpen}` заголовка
+    // родительского CollapseBlockTertiary (см. TODO там) и лишний раз переключал аккордеон.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", { className: styles.subcategoryTitleDraggable, onPointerDown: stopEventPropagation, onClick: stopEventPropagation, children: _jsx(DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescriptionProp, dragDisabled: dragDisabled, expandable: expandable }) }));
 }

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

@@ -32,6 +32,9 @@
 .subcategoryTitle:hover .subcategoryTitleActions, .subcategoryTitle:focus-within .subcategoryTitleActions{
   visibility:visible;
 }
+.subcategoryTitle[data-mobile] .subcategoryTitleActions{
+  visibility:visible;
+}
 
 .subcategoryTitleRow{
   display:flex;

package/dist/esm/components/MainMenu/types.d.ts

@@ -36,6 +36,8 @@ export type InnerLink = {
     badge?: CardServiceLightProps['promoTag'];
     /** Разрешено ли добавление карточки в избранное. default=true - разрешено */
     favoritesEnabled?: boolean;
+    /** Разрешено ли раскрытие карточки. default=false - Запрещено */
+    expandableEnabled?: boolean;
     /**
      * Вложенные сервисы подкатегории.
      *

package/dist/esm/style.css

@@ -166,6 +166,22 @@
   flex-shrink:0;
 }
 
+.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{
   display:flex;
   flex-shrink:0;
@@ -214,6 +230,9 @@
 .subcategoryTitle:hover .subcategoryTitleActions, .subcategoryTitle:focus-within .subcategoryTitleActions{
   visibility:visible;
 }
+.subcategoryTitle[data-mobile] .subcategoryTitleActions{
+  visibility:visible;
+}
 
 .subcategoryTitleRow{
   display:flex;