@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

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

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = Content;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const accordion_1 = require("@cloud-ru/ds-accordion");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const info_block_1 = require("@cloud-ru/ds-info-block");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const locale_1 = require("../../../../locale");
+const shouldBeOpenedInNewTab_1 = require("../../../../utils/shouldBeOpenedInNewTab");
+const utils_2 = require("../../utils");
+const ContentToolbar_1 = require("./helperComponents/ContentToolbar");
+const SortableGroup_1 = require("./helperComponents/SortableGroup");
+const useContentSegmentsSortable_1 = require("./hooks/useContentSegmentsSortable");
+const useSegmentDnd_1 = require("./hooks/useSegmentDnd");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, className, footer, favorite, isMobile, onClose, preferences, loading, }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
+    const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
+    const visibleSegments = (0, react_1.useMemo)(() => segments.filter(segment => segment.items.some(group => (0, utils_2.getLinksGroupVisibleItemsCount)(group) > 0)), [segments]);
+    const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
+    const [segmentId = defaultSegmentId, setSegmentId] = (0, utils_1.useValueControl)({
+        value: activeSegmentId,
+        defaultValue: defaultSegmentId,
+        onChange: onActiveSegmentChange,
+    });
+    const isSearching = Boolean(searchValue);
+    const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
+    (0, react_1.useEffect)(() => {
+        if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+            setSegmentId(defaultSegmentId);
+        }
+    }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
+    const handleLinkClick = (0, react_1.useCallback)(({ disabled, onClick }, e) => {
+        if (disabled) {
+            e?.preventDefault();
+            return;
+        }
+        if (!(0, shouldBeOpenedInNewTab_1.shouldBeOpenedInNewTab)(e)) {
+            e?.preventDefault();
+            onClose?.();
+        }
+        onClick?.(e);
+    }, [onClose]);
+    const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = (0, useContentSegmentsSortable_1.useContentSegmentsSortable)({
+        segments,
+        activeSegmentId: segmentId,
+        isSearching,
+        searchGroups,
+        segmentPrefsById,
+        onSegmentOrderChange,
+        onSegmentExpandedChange,
+        disabled: isSearching,
+        isMobile,
+    });
+    const visibleGroups = (0, react_1.useMemo)(() => orderedGroups.filter(group => (0, utils_2.getLinksGroupVisibleItemsCount)(group) > 0), [orderedGroups]);
+    (0, useSegmentDnd_1.useSegmentDnd)({
+        visibleGroups,
+        expandedIds,
+        onSortableDragEnd: handleSortableDragEnd,
+        showDescription,
+        showGroupsColors: preferences?.showGroupsColors?.value,
+        favorite,
+    });
+    const allGroupsExpanded = visibleGroups.length > 0 && visibleGroups.every(({ id }) => expandedIds.includes(id));
+    const handleToggleAllGroupsExpanded = (0, react_1.useCallback)(() => {
+        const visibleIds = visibleGroups.map(({ id }) => id);
+        if (allGroupsExpanded) {
+            onExpandedChange(expandedIds.filter(id => !visibleIds.includes(id)));
+            return;
+        }
+        onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
+    const segmentItems = (0, react_1.useMemo)(() => visibleSegments.map(segment => ({
+        value: segment.id,
+        label: segment.label,
+        icon: segment.icon,
+    })), [visibleSegments]);
+    const hasCards = visibleGroups.length > 0;
+    const cards = (() => {
+        if (loading) {
+            return Array.from({ length: 5 }).map((_, index) => (0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupSkeleton, { isMobile: isMobile }, index));
+        }
+        if (hasCards) {
+            return ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, items, favoritesEnabled = true, blockColor, highlight }) => ((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroup, { id: id, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: (0, utils_2.resolveGroupBlockColor)(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: 'm', icon: {
+                icon: system_1.SearchSVG,
+                appearance: 'neutral',
+            }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? 'header__drawer-menu__no-data-found' : 'header__drawer-menu__no-data' }));
+    })();
+    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-mobile": isMobile || undefined, "data-empty": !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] })] }));
+}

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

@@ -0,0 +1,9 @@
+export declare const TEST_IDS: {
+    readonly toolbar: "header__drawer-menu__content-toolbar";
+    readonly segmentControl: "header__drawer-menu__content-segment";
+    readonly toggleAllGroups: "header__drawer-menu__content-toggle-all-groups";
+    readonly settingsButton: "header__drawer-menu__content-settings-button";
+    readonly settingsModal: "header__drawer-menu__content-settings-modal";
+    readonly settingsShowGroupsColorsSwitch: "header__drawer-menu__content-settings-show-groups-colors-switch";
+    readonly settingsShowDescriptionSwitch: "header__drawer-menu__content-settings-show-description-switch";
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = void 0;
+exports.TEST_IDS = {
+    toolbar: 'header__drawer-menu__content-toolbar',
+    segmentControl: 'header__drawer-menu__content-segment',
+    toggleAllGroups: 'header__drawer-menu__content-toggle-all-groups',
+    settingsButton: 'header__drawer-menu__content-settings-button',
+    settingsModal: 'header__drawer-menu__content-settings-modal',
+    settingsShowGroupsColorsSwitch: 'header__drawer-menu__content-settings-show-groups-colors-switch',
+    settingsShowDescriptionSwitch: 'header__drawer-menu__content-settings-show-description-switch',
+};

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { MainMenuPreferencesProps } from '../../../../types';
+export type ContentToolbarSegmentItem = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type ContentToolbarProps = {
+    segment: string;
+    onSegmentChange(segment: string): void;
+    segmentItems: ContentToolbarSegmentItem[];
+    allGroupsExpanded: boolean;
+    onToggleAllGroupsExpanded(): void;
+    /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
+    preferences?: MainMenuPreferencesProps;
+    isMobile?: boolean;
+};
+export declare function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, }: ContentToolbarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentToolbar = ContentToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 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");
+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, }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({
+        value: preferences?.open,
+        onChange: preferences?.onOpenChange,
+    });
+    const closeModal = () => setOpen(false);
+    const openModal = () => setOpen(true);
+    const handleShowDescriptionChange = (value) => {
+        (0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
+    };
+    const hasSegmentItems = 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: {
+                                    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/index.d.ts

@@ -0,0 +1 @@
+export * from './ContentToolbar';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ContentToolbar"), exports);

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

@@ -0,0 +1,27 @@
+.root{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-32, 32px);
+}
+
+.segmentControl{
+  flex-shrink:0;
+}
+
+.actions{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  margin-left:auto;
+}
+
+.settingsContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  width:100%;
+}

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

@@ -0,0 +1,11 @@
+import { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
+import { SortableGroupCardsProps } from './components';
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & {
+    id: string;
+    label: LinksGroupTitle;
+    isExpanded?: boolean;
+    blockColor?: LinksGroupBlockColor;
+    highlight?: boolean;
+};
+export declare function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }: Omit<SortableGroupProps, 'enableServiceDrag'>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableGroup = SortableGroup;
+exports.SortableGroupDragPreview = SortableGroupDragPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const accordion_1 = require("@cloud-ru/ds-accordion");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
+const theme_1 = require("@cloud-ru/ds-theme");
+const components_1 = require("./components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
+        id,
+        disabled: !enableServiceDrag,
+    });
+    const style = {
+        // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая группа "растягивается"
+        // при пересечении с соседней группой другой высоты. CSS.Translate использует только сдвиг.
+        // Во время drag transform на источнике не применяем — превью в DragOverlay, иначе transform
+        // раздувает scrollHeight контейнера и auto-scroll уходит в бесконечный цикл.
+        transform: transform ? utilities_1.CSS.Translate.toString(transform) : undefined,
+        transition,
+    };
+    const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
+    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles_module_scss_1.default.group, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, "data-test-id": `header__drawer-menu__group-card-${id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: (0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }) })] }));
+}
+function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }) {
+    const { colorScheme } = (0, theme_1.useThemeAppearance)().appearance;
+    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.groupDragPreview, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.group, "data-drag-preview": true, "data-block-color": blockColor, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.decorationBackground, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.colorMarker, "data-block-color": blockColor }) }) }), (0, jsx_runtime_1.jsx)(components_1.SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }), isExpanded && ((0, jsx_runtime_1.jsx)(components_1.SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, favorite: favorite }))] }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.d.ts

@@ -0,0 +1,8 @@
+import { InnerLink } from '../../../../../types';
+import { ServiceCardProps } from '../../../../ServiceCard';
+export type SortableGroupCardsProps = Pick<ServiceCardProps, 'showDescription' | 'isMobile' | 'favorite' | 'onServiceClick'> & {
+    groupId: string;
+    items: InnerLink[];
+    enableServiceDrag?: boolean;
+};
+export declare function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, }: SortableGroupCardsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableGroupCards = SortableGroupCards;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const innerLink_1 = require("../../../../../utils/innerLink");
+const ServiceCard_1 = require("../../../../ServiceCard");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const SubCategory_1 = require("./SubCategory");
+function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
+            if (service.hidden) {
+                return null;
+            }
+            const key = String(groupId) + service.id;
+            if ((0, innerLink_1.hasNestedItems)(service)) {
+                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }, key));
+            }
+            return ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));
+        }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -0,0 +1,6 @@
+import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+export type SortableGroupDragHandleProps = {
+    attributes?: DraggableAttributes;
+    listeners?: DraggableSyntheticListeners;
+};
+export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableGroupDragHandle = SortableGroupDragHandle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const utils_1 = require("@cloud-ru/ds-utils");
+const locale_1 = require("../../../../../../../locale");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+function SortableGroupDragHandle({ attributes, listeners }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    return ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, type: 'button', className: styles_module_scss_1.default.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: utils_1.stopEventPropagation, children: (0, jsx_runtime_1.jsx)(system_1.DragDropSVG, { size: 24 }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -0,0 +1,9 @@
+import { LinksGroupTitle } from '../../../../../types';
+import { SortableGroupDragHandleProps } from './SortableGroupDragHandle';
+export type SortableGroupHeaderProps = {
+    label: LinksGroupTitle;
+    isExpanded?: boolean;
+    enableServiceDrag?: boolean;
+    isMobile?: boolean;
+} & SortableGroupDragHandleProps;
+export declare function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableGroupHeader = SortableGroupHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const typography_1 = require("@cloud-ru/ds-typography");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const SortableGroupDragHandle_1 = require("./SortableGroupDragHandle");
+function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-expanded": isExpanded || undefined, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'title', size: 'm', className: styles_module_scss_1.default.headerTitle, children: 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, { attributes: attributes, listeners: listeners }), !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' }))] }))] }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.d.ts

@@ -0,0 +1,5 @@
+type SortableGroupSkeletonProps = {
+    isMobile?: boolean;
+};
+export declare function SortableGroupSkeleton({ isMobile }: SortableGroupSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableGroupSkeleton = SortableGroupSkeleton;
+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 }) })] }) })] }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.d.ts

@@ -0,0 +1,6 @@
+import { ServiceCardProps } from '../../../../../ServiceCard';
+export type SubCategoryProps = Pick<ServiceCardProps, 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'> & {
+    groupId: string;
+    dragDisabled?: boolean;
+};
+export declare function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubCategory = SubCategory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const accordion_1 = require("@cloud-ru/ds-accordion");
+const react_1 = require("react");
+const innerLink_1 = require("../../../../../../utils/innerLink");
+const ServiceCard_1 = require("../../../../../ServiceCard");
+const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+const SubCategoryTitle_1 = require("./SubCategoryTitle");
+function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, }) {
+    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]);
+    // TODO: в будущем должно быть API для управления expanded state
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(subcategoryId);
+    const handleExpandedChange = (0, react_1.useCallback)(() => {
+        setIsExpanded(isExpanded ? undefined : subcategoryId);
+    }, [isExpanded, subcategoryId]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `header__drawer-menu__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,
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: favorite, onServiceClick: onServiceClick }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
+}

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

@@ -0,0 +1,5 @@
+import { DraggableServiceCardProps } from '../../../../../ServiceCard';
+export type SubCategoryTitleProps = {
+    groupId: string;
+} & Pick<DraggableServiceCardProps, 'expandable' | 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile' | 'dragDisabled'>;
+export declare function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }: SubCategoryTitleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubCategoryTitle = SubCategoryTitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("@cloud-ru/ds-typography");
+const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
+const uikit_product_title_clickable_1 = require("@cloud-ru/ds-uikit-product-title-clickable");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const utils_2 = require("../../../../../../utils");
+const ServiceCard_1 = require("../../../../../ServiceCard");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }) {
+    const titleRef = (0, react_1.useRef)(null);
+    const tooltipTriggerRef = (0, react_1.useRef)(null);
+    const favoriteRef = (0, react_1.useRef)(null);
+    const handleServiceClick = (event) => {
+        (0, utils_1.stopEventPropagation)(event);
+        onServiceClick?.(service, event);
+    };
+    const isFavorite = Boolean(favorite?.value.includes(service.id));
+    const showDescription = showDescriptionProp && Boolean(service.description);
+    const hasTooltip = !showDescription && service.description;
+    const handleKeyDown = (0, uikit_product_card_predefined_1.createCardActionsKeyDownHandler)({
+        cardRef: titleRef,
+        items: [
+            hasTooltip ? { ref: tooltipTriggerRef } : null,
+            favorite
+                ? {
+                    ref: favoriteRef,
+                    onActivate: () => favorite.onChange(service.id)(!isFavorite),
+                }
+                : null,
+        ],
+    });
+    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, before: (0, utils_2.getLinkEmblem)(service), className: styles_module_scss_1.default.subcategoryTitleClickable, "data-test-id": `header__drawer-menu__subcategory-title-${service.id}` }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardActionsSurface, { className: styles_module_scss_1.default.subcategoryTitleActions, visibilityStrategy: 'always', tooltip: hasTooltip
+                                ? {
+                                    tip: service.description,
+                                    buttonRef: tooltipTriggerRef,
+                                    trigger: isMobile ? 'click' : 'hoverAndFocusVisible',
+                                    'data-test-id': `header__drawer-menu__subcategory-title-${service.id}-tooltip`,
+                                }
+                                : undefined, favorite: favorite
+                                ? {
+                                    enabled: true,
+                                    checked: isFavorite,
+                                    onChange: favorite.onChange(service.id),
+                                    buttonRef: favoriteRef,
+                                    'data-test-id': `header__drawer-menu__subcategory-title-${service.id}-favorite`,
+                                }
+                                : 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": `header__drawer-menu__subcategory-title-${service.id}-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 }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SubCategoryTitle';
+export * from './SubCategory';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SubCategoryTitle"), exports);
+__exportStar(require("./SubCategory"), exports);

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

@@ -0,0 +1,66 @@
+.subcategoryTitleActions{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  min-width:0;
+  visibility:hidden;
+}
+
+.subcategory{
+  min-width:0;
+}
+.subcategory:has([data-subcategory-body]){
+  grid-column:1/-1;
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+
+.subcategoryAccordion{
+  min-width:0;
+}
+
+.subcategoryTitle{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  align-items:stretch;
+  justify-content:center;
+  min-width:0;
+  padding-left:var(--sn-primitive-dimension-4, 4px);
+}
+.subcategoryTitle:hover .subcategoryTitleActions, .subcategoryTitle:focus-within .subcategoryTitleActions{
+  visibility:visible;
+}
+
+.subcategoryTitleRow{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-32, 32px);
+}
+
+.subcategoryTitleClickable{
+  flex-shrink:1;
+  min-width:0;
+}
+
+.subcategoryDescription{
+  width:100%;
+  padding-bottom:var(--sn-primitive-dimension-4, 4px);
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.subcategoryTitleDraggable{
+  touch-action:none;
+  flex:1;
+  min-width:0;
+}
+
+.subcategoryCollapsedCard{
+  flex:1;
+  min-width:0;
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from '../../../../ServiceCard/ServiceCard';
+export * from './SubCategory/SubCategory';
+export * from './SubCategory';
+export * from './SortableGroupCards';
+export * from './SortableGroupHeader';

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

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../../../ServiceCard/ServiceCard"), exports);
+__exportStar(require("./SubCategory/SubCategory"), exports);
+__exportStar(require("./SubCategory"), exports);
+__exportStar(require("./SortableGroupCards"), exports);
+__exportStar(require("./SortableGroupHeader"), exports);