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

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

@@ -0,0 +1,29 @@
+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 { SwitchRow } from '@cloud-ru/ds-uikit-product-switch-row';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { startTransition } from 'react';
+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, }) {
+    const { t } = headerLocale.useTranslations();
+    const [open = false, setOpen] = useValueControl({
+        value: preferences?.open,
+        onChange: preferences?.onOpenChange,
+    });
+    const closeModal = () => setOpen(false);
+    const openModal = () => setOpen(true);
+    const handleShowDescriptionChange = (value) => {
+        startTransition(() => preferences?.showDescription?.onChange(value));
+    };
+    const hasSegmentItems = 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: {
+                                    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/index.d.ts

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

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

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

package/dist/esm/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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.d.ts

@@ -0,0 +1,11 @@
+import { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types.js';
+import { SortableGroupCardsProps } from './components/index.js';
+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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js

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

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

@@ -0,0 +1,8 @@
+import { InnerLink } from '../../../../../types.js';
+import { ServiceCardProps } from '../../../../ServiceCard/index.js';
+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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { hasNestedItems } from '../../../../../utils/innerLink.js';
+import { DraggableServiceCard } from '../../../../ServiceCard/index.js';
+import styles from '../styles.module.css';
+import { SubCategory } from './SubCategory/index.js';
+export function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, }) {
+    return (_jsx("div", { className: styles.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
+            if (service.hidden) {
+                return null;
+            }
+            const key = String(groupId) + service.id;
+            if (hasNestedItems(service)) {
+                return (_jsx(SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, onServiceClick: onServiceClick }, key));
+            }
+            return (_jsx(DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));
+        }) }));
+}

package/dist/esm/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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
+import { stopEventPropagation } from '@cloud-ru/ds-utils';
+import { headerLocale } from '../../../../../../../locale/index.js';
+import styles from '../styles.module.css';
+export function SortableGroupDragHandle({ attributes, listeners }) {
+    const { t } = headerLocale.useTranslations();
+    return (_jsx("button", { ...attributes, ...listeners, type: 'button', className: styles.dragHandle, "aria-label": t('dragGroup'), "data-test-id": 'header__drawer-menu__group-card-drag-handle', onClick: stopEventPropagation, children: _jsx(DragDropSVG, { size: 24 }) }));
+}

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

@@ -0,0 +1,9 @@
+import { LinksGroupTitle } from '../../../../../types.js';
+import { SortableGroupDragHandleProps } from './SortableGroupDragHandle.js';
+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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Typography } from '@cloud-ru/ds-typography';
+import styles from '../styles.module.css';
+import { SortableGroupDragHandle } from './SortableGroupDragHandle.js';
+export function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, children: label.text }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
+}

package/dist/esm/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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.js

@@ -0,0 +1,6 @@
+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 }) })] }) })] }) }));
+}

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

@@ -0,0 +1,6 @@
+import { ServiceCardProps } from '../../../../../ServiceCard/index.js';
+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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { useCallback, useMemo, useState } from 'react';
+import { getNestedServiceGroupId, getSubCategoryId } from '../../../../../../utils/innerLink.js';
+import { DraggableServiceCard } from '../../../../../ServiceCard/index.js';
+import baseGroupStyles from '../../styles.module.css';
+import styles from './styles.module.css';
+import { SubCategoryTitle } from './SubCategoryTitle.js';
+export function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, }) {
+    const subcategoryId = getSubCategoryId(groupId, service.id);
+    const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
+    const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
+    // TODO: в будущем должно быть API для управления expanded state
+    const [isExpanded, setIsExpanded] = useState(subcategoryId);
+    const handleExpandedChange = useCallback(() => {
+        setIsExpanded(isExpanded ? undefined : subcategoryId);
+    }, [isExpanded, subcategoryId]);
+    return (_jsx("div", { className: styles.subcategory, "data-test-id": `header__drawer-menu__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,
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: favorite, onServiceClick: onServiceClick }), children: _jsx("div", { className: baseGroupStyles.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => (_jsx(DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
+}

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

@@ -0,0 +1,5 @@
+import { DraggableServiceCardProps } from '../../../../../ServiceCard/index.js';
+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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@cloud-ru/ds-typography';
+import { CardActionsSurface, createCardActionsKeyDownHandler } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';
+import { stopEventPropagation } from '@cloud-ru/ds-utils';
+import { useRef } from 'react';
+import { getLinkEmblem } from '../../../../../../utils/index.js';
+import { DraggableServiceCard } from '../../../../../ServiceCard/index.js';
+import styles from './styles.module.css';
+export function SubCategoryTitle({ groupId, service, showDescription: showDescriptionProp, isMobile, dragDisabled, favorite, onServiceClick, expandable, }) {
+    const titleRef = useRef(null);
+    const tooltipTriggerRef = useRef(null);
+    const favoriteRef = useRef(null);
+    const handleServiceClick = (event) => {
+        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 = createCardActionsKeyDownHandler({
+        cardRef: titleRef,
+        items: [
+            hasTooltip ? { ref: tooltipTriggerRef } : null,
+            favorite
+                ? {
+                    ref: favoriteRef,
+                    onActivate: () => favorite.onChange(service.id)(!isFavorite),
+                }
+                : null,
+        ],
+    });
+    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, before: getLinkEmblem(service), className: styles.subcategoryTitleClickable, "data-test-id": `header__drawer-menu__subcategory-title-${service.id}` }), _jsx(CardActionsSurface, { className: styles.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 && (_jsx(Typography, { as: 'p', variant: 'body', size: 's', className: styles.subcategoryDescription, "data-test-id": `header__drawer-menu__subcategory-title-${service.id}-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 }) }));
+}

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

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

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

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

package/dist/esm/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/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/index.d.ts

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './SortableGroup.js';
+export * from './components/SortableGroupCards.js';
+export * from './components/SortableGroupSkeleton.js';

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

@@ -0,0 +1,3 @@
+export * from './SortableGroup.js';
+export * from './components/SortableGroupCards.js';
+export * from './components/SortableGroupSkeleton.js';

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

@@ -0,0 +1,231 @@
+.headerActions{
+  pointer-events:none;
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  opacity:0;
+  outline:none;
+}
+.headerActions[data-always-visible]{
+  opacity:1;
+}
+
+.header{
+  display:flex;
+  flex:1 0 0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-40, 40px);
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+.header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .header:hover{
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  }
+  .header:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
+
+.headerTitle{
+  flex:1 0 0;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+
+.group{
+  position:relative;
+  overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.group[data-drag-preview]{
+  cursor:grabbing;
+}
+.group[data-drag-preview] .header{
+  cursor:grabbing;
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.group[data-drag-preview] .header .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+
+.groupDragPreview{
+  cursor:grabbing;
+  container-type:inline-size;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.dragHandle{
+  all:unset;
+  touch-action:none;
+  cursor:grab;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+  border:none;
+  border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background-color:transparent;
+  outline:none;
+}
+.dragHandle:active{
+  cursor:grabbing;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.groupBody{
+  display:grid;
+  grid-template-columns:repeat(3, minmax(auto, 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+@container (width <= 728px){
+  .groupBody:not([data-mobile]){
+    grid-template-columns:repeat(2, minmax(auto, 1fr));
+  }
+}
+.groupBody[data-mobile]{
+  grid-template-columns:repeat(1, minmax(200px, 1fr));
+}
+
+.decoration{
+  --highlight-border-width:1px;
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:100%;
+  height:100%;
+  border-radius:inherit;
+}
+[data-drag-preview] .decoration{
+  z-index:-1;
+}
+.decoration[data-color-scheme=light]{
+  --highlight-border-color-from:hsl(155deg 48% 42% / 100%);
+  --highlight-border-color-to:hsl(155deg 48% 42% / 32%);
+  --highlight-background-color-from:hsl(0deg 0% 99% / 20%);
+  --highlight-background-color-to:hsl(152deg 39% 79% / 12%);
+  --highlight-background-color:hsl(0deg 0% 99% / 100%);
+}
+.decoration[data-color-scheme=dark]{
+  --highlight-border-color-from:hsl(153deg 30% 55% / 100%);
+  --highlight-border-color-to:hsl(157deg 51% 19% / 100%);
+  --highlight-background-color-from:hsl(240deg 14% 16% / 100%);
+  --highlight-background-color-to:hsl(157deg 51% 19% / 20%);
+  --highlight-background-color:hsl(240deg 14% 16% / 100%);
+}
+.decoration[data-is-highlighted]::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  opacity:0.64;
+  background-image:linear-gradient(90deg, var(--highlight-border-color-from) 0%, var(--highlight-border-color-to) 50%, var(--highlight-border-color-from) 100%);
+}
+
+.decorationBackground{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  overflow:hidden;
+  background-color:transparent;
+}
+[data-is-highlighted] .decorationBackground{
+  inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
+  border-radius:calc(var(--sn-primitive-dimension-4, 4px) - var(--highlight-border-width));
+  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
+}
+
+.colorMarker{
+  content:"";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  width:var(--sn-primitive-dimension-4, 4px);
+  visibility:hidden;
+}
+.colorMarker[data-block-color=transparent]{
+  visibility:visible;
+  background-color:"transparent";
+}
+.colorMarker[data-block-color=neutral]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.colorMarker[data-block-color=primary]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+.colorMarker[data-block-color=red]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
+}
+.colorMarker[data-block-color=orange]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+}
+.colorMarker[data-block-color=yellow]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+}
+.colorMarker[data-block-color=green]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+}
+.colorMarker[data-block-color=blue]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+}
+.colorMarker[data-block-color=violet]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+}
+.colorMarker[data-block-color=pink]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+}
+
+.skeletonTitle{
+  display:flex;
+  align-items:center;
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-8, 8px);
+  font-size:var(--sn-primitive-dimension-16, 16px);
+  line-height:var(--sn-primitive-dimension-40, 40px);
+}
+
+.skeletonBody{
+  padding-bottom:var(--sn-primitive-dimension-4, 4px);
+}
+
+.skeletonService{
+  padding:var(--sn-primitive-dimension-4, 4px);
+}

package/dist/esm/components/MainMenu/helperComponents/Content/hooks/useContentSegmentsSortable.d.ts

@@ -0,0 +1,24 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { LinksGroup, MainMenuSegment, MainMenuSegmentPrefs } from '../../../types.js';
+type UseContentSegmentsSortableProps = {
+    segments: MainMenuSegment[];
+    activeSegmentId: string;
+    isSearching: boolean;
+    searchGroups: LinksGroup[];
+    segmentPrefsById: Map<string, MainMenuSegmentPrefs>;
+    onSegmentOrderChange?(segmentId: string, orderedGroupIds: string[]): void;
+    onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+    disabled?: boolean;
+    isMobile?: boolean;
+};
+/**
+ * Порядок и expanded для активного сегмента или поисковой выдачи.
+ * Uncontrolled-состояние кэшируется по id сегмента, чтобы не сбрасываться при переключении.
+ */
+export declare function useContentSegmentsSortable({ segments, activeSegmentId, isSearching, searchGroups, segmentPrefsById, onSegmentOrderChange, onSegmentExpandedChange, disabled, isMobile, }: UseContentSegmentsSortableProps): {
+    orderedGroups: LinksGroup[];
+    expandedIds: string[];
+    onExpandedChange: (value?: string[]) => void;
+    handleDragEnd: ({ active, over }: DragEndEvent) => void;
+};
+export {};