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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { useCallback, useRef, useState } from 'react';
+import styles from './styles.module.css';
+export function ScrollWithAnimatedStickyPanel({ panel, children }) {
+    const [positions, setPositions] = useState({ panelTopShift: 0, containerScroll: 0 });
+    const [panelHeight, setPanelHeight] = useState(0);
+    const panelRef = useRef(undefined);
+    const handleScroll = useCallback((event) => {
+        if (!event || !event.target)
+            return;
+        const target = event.target;
+        setPositions(prev => {
+            if (!panelRef.current)
+                return prev;
+            const panelHeight = panelRef.current.offsetHeight;
+            setPanelHeight(panelHeight);
+            const diff = prev.containerScroll - target.scrollTop;
+            return {
+                panelTopShift: Math.max(-panelHeight, Math.min(0, prev.panelTopShift + diff)),
+                containerScroll: target.scrollTop,
+            };
+        });
+    }, []);
+    return (_jsxs("div", { className: styles.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [_jsx(Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), _jsx("div", { className: styles.panel, ref: element => {
+                    if (element) {
+                        setPanelHeight(element.offsetHeight);
+                        panelRef.current = element;
+                    }
+                }, style: { top: positions.panelTopShift }, children: panel })] }));
+}

package/dist/esm/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/index.d.ts

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

package/dist/esm/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/index.js

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

package/dist/esm/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/styles.module.css

@@ -0,0 +1,12 @@
+.container{
+  position:relative;
+  height:100%;
+}
+.container :global .os-scrollbar-vertical{
+  top:var(--snack-autohide-panel-height, 0) !important;
+}
+
+.panel{
+  position:absolute;
+  width:100%;
+}

package/dist/esm/components/MainMenu/helperComponents/Search/Search.d.ts

@@ -0,0 +1,7 @@
+export declare const Search: import("react").ForwardRefExoticComponent<Pick<import("@cloud-ru/ds-search").SearchProps, "onFocus" | "onBlur"> & {
+    value: string;
+    onChange(value: string): void;
+    onSearchNoResult?(value: string): void;
+} & {
+    isMobile?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Search as SearchSnack } from '@cloud-ru/ds-search';
+import { forwardRef } from 'react';
+import { headerLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+export const Search = forwardRef(({ value, onChange, onBlur, onFocus, isMobile = false }, ref) => {
+    const { t } = headerLocale.useTranslations();
+    return (_jsx("div", { className: styles.searchWrap, "data-mobile": isMobile || undefined, children: _jsx(SearchSnack, { ref: ref, size: 'm', outline: !isMobile, placeholder: t('searchByServices'), value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "data-test-id": 'header__drawer-menu__search', className: styles.search, background: isMobile }) }));
+});

package/dist/esm/components/MainMenu/helperComponents/Search/index.d.ts

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

package/dist/esm/components/MainMenu/helperComponents/Search/index.js

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

package/dist/esm/components/MainMenu/helperComponents/Search/styles.module.css

@@ -0,0 +1,8 @@
+.searchWrap:not([data-mobile]){
+  flex:1 1 auto;
+  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+}
+
+.search{
+  width:100%;
+}

package/dist/esm/components/MainMenu/helperComponents/ServiceCard/ServiceCard.d.ts

@@ -0,0 +1,19 @@
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { MouseEvent } from 'react';
+import { FavoriteProps, InnerLink } from '../../types.js';
+export type ServiceCardProps = {
+    service: InnerLink;
+    favorite?: FavoriteProps;
+    isMobile?: boolean;
+    onServiceClick?(service: InnerLink, event: MouseEvent<HTMLElement>): void;
+    showDescription: boolean;
+    className?: string;
+    tabIndex?: number;
+    dragPreview?: boolean;
+} & Pick<CardServiceLightProps, 'expandable'>;
+export declare function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }: ServiceCardProps): import("react/jsx-runtime").JSX.Element;
+export type DraggableServiceCardProps = ServiceCardProps & {
+    groupId: string;
+    dragDisabled?: boolean;
+};
+export declare function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }: DraggableServiceCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDraggable } from '@dnd-kit/core';
+import { DRAG_MODE, DragGhost, DragPreview } from '@cloud-ru/ds-drag-and-drop';
+import { CardServiceInfo, CardServiceLight, } from '@cloud-ru/ds-uikit-product-card-predefined';
+import cn from 'classnames';
+import { getLinkEmblem, getServiceSourceDragId } from '../../utils/index.js';
+import styles from './styles.module.css';
+export function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }) {
+    const isInFavorites = favorite?.value.includes(service.id) ?? false;
+    const favoriteProps = !dragPreview && favorite
+        ? {
+            checked: isInFavorites,
+            onChange: favorite.onChange(service.id),
+            enabled: !service.disabled,
+        }
+        : undefined;
+    const commonProps = {
+        as: 'a',
+        title: service.label,
+        icon: getLinkEmblem(service),
+        'data-test-id': `header__drawer-menu__link-${service.id}`,
+        href: service.href,
+        onClick: (event) => onServiceClick?.(service, event),
+        favorite: favoriteProps,
+        actionsVisibility: isMobile ? 'always' : 'hover',
+        actionsSize: isMobile ? 's' : 'm',
+        promoTag: service.badge,
+        className: cn(styles.card, className),
+        tabIndex,
+        expandable,
+    };
+    const card = showDescription ? (_jsx(CardServiceInfo, { ...commonProps, description: service.description ?? '' })) : (_jsx(CardServiceLight, { ...commonProps, tooltip: !dragPreview && service.description
+            ? {
+                tip: service.description,
+            }
+            : undefined }));
+    return dragPreview ? _jsx(DragPreview, { className: styles.dragCardPreview, children: card }) : card;
+}
+export function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }) {
+    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+        id: getServiceSourceDragId(groupId, service.id),
+        disabled: dragDisabled || service.disabled || favorite?.value.includes(service.id),
+    });
+    const { tabIndex, ...restAttributes } = attributes ?? {};
+    return (_jsx(DragGhost, { innerRef: setNodeRef, className: styles.draggableCard, dragging: isDragging, mode: DRAG_MODE.Static, ...listeners, ...restAttributes, children: _jsx(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex }) }));
+}

package/dist/esm/components/MainMenu/helperComponents/ServiceCard/index.d.ts

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

package/dist/esm/components/MainMenu/helperComponents/ServiceCard/index.js

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

package/dist/esm/components/MainMenu/helperComponents/ServiceCard/styles.module.css

@@ -0,0 +1,12 @@
+.card{
+  min-width:0;
+}
+
+.dragCardPreview{
+  cursor:grabbing;
+  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+}
+
+.draggableCard{
+  min-width:0;
+}

package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.d.ts

@@ -0,0 +1,30 @@
+import { DragCancelEvent, DragEndEvent, DragStartEvent, Modifier } from '@dnd-kit/core';
+import { ReactNode } from 'react';
+import { FavoriteProps, LinksGroup } from '../types.js';
+type MainMenuDndOverlayContextValue = {
+    setGroupDragOverlay(overlay: ReactNode): void;
+};
+export declare function useMainMenuDndOverlay(): MainMenuDndOverlayContextValue;
+type UseMainMenuDndProps = {
+    favorite?: FavoriteProps;
+    /** Все группы карточек из сегментов (для резолва сервисов при DnD в избранное). */
+    groups: LinksGroup[];
+    showDescription: boolean;
+};
+export declare function useMainMenuDnd({ favorite, groups, showDescription }: UseMainMenuDndProps): {
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    modifiers: Modifier[];
+    collisionDetection: import("@dnd-kit/core").CollisionDetection;
+    onDragStart: ({ active }: DragStartEvent) => void;
+    onDragEnd: ({ active, over, delta, activatorEvent }: DragEndEvent) => void;
+    onDragCancel: ({ active }: DragCancelEvent) => void;
+    dragOverlay: string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    overlayContextValue: {
+        setGroupDragOverlay: import("react").Dispatch<import("react").SetStateAction<ReactNode>>;
+    };
+};
+export type MainMenuDndContextProps = ReturnType<typeof useMainMenuDnd> & {
+    children: ReactNode;
+};
+export declare function MainMenuDndContext({ children, sensors, modifiers, collisionDetection, onDragStart, onDragEnd, onDragCancel, dragOverlay, overlayContextValue, }: Partial<MainMenuDndContextProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/MainMenu/hooks/useMainMenuDnd.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { ServiceCard } from '../helperComponents/ServiceCard/index.js';
+import { favoriteListCollisionDetection, flatLinksGroups, getDragReferenceY, isServiceDragId, isServiceFavoriteDragId, isServiceSourceDragId, parseServiceDragId, resolveFavoriteOrderOnDragEnd, } from '../utils/index.js';
+const restrictGroupDragToVerticalAxis = args => {
+    if (args.active?.id != null && isServiceSourceDragId(args.active.id)) {
+        return args.transform;
+    }
+    if (args.active?.id != null && isServiceFavoriteDragId(args.active.id)) {
+        return restrictToVerticalAxis(args);
+    }
+    return restrictToVerticalAxis(args);
+};
+const MainMenuDndOverlayContext = createContext(null);
+export function useMainMenuDndOverlay() {
+    const context = useContext(MainMenuDndOverlayContext);
+    return (context ?? {
+        setGroupDragOverlay: () => { },
+    });
+}
+export function useMainMenuDnd({ favorite, groups, showDescription }) {
+    const [activeServiceId, setActiveServiceId] = useState(null);
+    const [groupDragOverlay, setGroupDragOverlay] = useState(null);
+    const servicesById = useMemo(() => new Map(flatLinksGroups(groups).map(service => [service.id, service])), [groups]);
+    const activeService = activeServiceId ? servicesById.get(activeServiceId) : undefined;
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const handleDragStart = useCallback(({ active }) => {
+        if (isServiceSourceDragId(active.id)) {
+            setActiveServiceId(parseServiceDragId(active.id));
+        }
+    }, []);
+    const { value: favoriteIds, onChange: onFavoriteChange, onOrderChange: onFavoriteOrderChange } = favorite ?? {};
+    const handleDragEnd = useCallback(({ active, over, delta, activatorEvent }) => {
+        if (isServiceDragId(active.id) && favoriteIds) {
+            const nextOrderIds = resolveFavoriteOrderOnDragEnd({
+                activeId: active.id,
+                overId: over?.id,
+                favoriteIds,
+                referenceY: getDragReferenceY({
+                    activatorEvent,
+                    deltaY: delta.y,
+                    activeRect: active.rect.current.translated,
+                }),
+                overRect: over?.rect,
+            });
+            if (nextOrderIds) {
+                const activeServiceId = parseServiceDragId(active.id);
+                if (favoriteIds.includes(activeServiceId)) {
+                    onFavoriteOrderChange?.(nextOrderIds);
+                }
+                else {
+                    onFavoriteChange?.(activeServiceId)(true, nextOrderIds.indexOf(activeServiceId));
+                }
+            }
+        }
+        if (isServiceSourceDragId(active.id)) {
+            setActiveServiceId(null);
+        }
+    }, [favoriteIds, onFavoriteChange, onFavoriteOrderChange]);
+    const handleDragCancel = useCallback(({ active }) => {
+        if (active && isServiceSourceDragId(active.id)) {
+            setActiveServiceId(null);
+        }
+    }, []);
+    const serviceDragOverlay = activeService ? (_jsx(ServiceCard, { service: activeService, showDescription: showDescription, dragPreview: true })) : null;
+    const dragOverlay = serviceDragOverlay ?? groupDragOverlay;
+    const overlayContextValue = useMemo(() => ({
+        setGroupDragOverlay,
+    }), []);
+    return {
+        sensors,
+        modifiers: [restrictGroupDragToVerticalAxis],
+        collisionDetection: favoriteListCollisionDetection,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        dragOverlay,
+        overlayContextValue,
+    };
+}
+export function MainMenuDndContext({ children, sensors, modifiers, collisionDetection, onDragStart, onDragEnd, onDragCancel, dragOverlay, overlayContextValue, }) {
+    return (_jsx(MainMenuDndOverlayContext.Provider, { value: overlayContextValue ?? null, children: _jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragCancel: onDragCancel, modifiers: modifiers, measuring: {
+                droppable: { strategy: MeasuringStrategy.Always },
+            }, children: [children, _jsx(DragOverlay, { dropAnimation: null, children: dragOverlay })] }) }));
+}

package/dist/esm/components/MainMenu/hooks/useMenuItems.d.ts

@@ -0,0 +1,8 @@
+import { LinksGroup, MainMenuProps } from '../types.js';
+type UseMenuItemsProps = Pick<MainMenuProps, 'segments' | 'search' | 'platformGroups'>;
+export declare function useMenuItems({ search, segments, platformGroups }: UseMenuItemsProps): {
+    resultItems: LinksGroup[];
+    searchRef: import("react").RefObject<HTMLInputElement>;
+    scrollRef: import("react").RefObject<HTMLDivElement>;
+};
+export {};

package/dist/esm/components/MainMenu/hooks/useMenuItems.js

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { dedupeSearchGroups, filterLinksGroupsFuzzy, getLinksGroupVisibleItemsCount, pinGroupToBottom } from '../utils/index.js';
+function getVisibleGroups(items) {
+    return items.filter(group => getLinksGroupVisibleItemsCount(group) > 0);
+}
+export function useMenuItems({ search, segments, platformGroups = [] }) {
+    const { value: searchValue = '', onSearchNoResult } = search || {};
+    const searchRef = useRef(null);
+    const scrollRef = useRef(null);
+    const regularSegments = useMemo(() => segments?.filter(segment => !segment.pinBottomOnSearch) ?? [], [segments]);
+    const pinnedSegments = useMemo(() => segments?.filter(segment => segment.pinBottomOnSearch) ?? [], [segments]);
+    const regularGroups = useMemo(() => regularSegments.flatMap(segment => getVisibleGroups(segment.items)), [regularSegments]);
+    const pinnedGroups = useMemo(() => pinnedSegments.flatMap(segment => getVisibleGroups(segment.items)), [pinnedSegments]);
+    const resultItems = useMemo(() => {
+        if (!searchValue) {
+            return regularGroups;
+        }
+        const searchIn = (groups) => filterLinksGroupsFuzzy(searchValue, groups);
+        const regularResults = regularSegments.flatMap(segment => searchIn(getVisibleGroups(segment.items)));
+        const platformResults = platformGroups.length > 0 ? searchIn(platformGroups) : [];
+        const pinnedResults = pinnedSegments.flatMap(segment => searchIn(getVisibleGroups(segment.items)));
+        const combined = dedupeSearchGroups([...regularResults, ...platformResults, ...pinnedResults]);
+        const pinnedGroupIds = pinnedGroups.map(({ id }) => id);
+        return pinnedGroupIds.length > 0 ? pinGroupToBottom(combined, pinnedGroupIds) : combined;
+    }, [searchValue, regularSegments, regularGroups, platformGroups, pinnedSegments, pinnedGroups]);
+    useEffect(() => {
+        if (searchValue && !resultItems.length) {
+            onSearchNoResult?.(searchValue);
+        }
+    }, [searchValue, resultItems.length, onSearchNoResult]);
+    return {
+        resultItems,
+        searchRef,
+        scrollRef,
+    };
+}

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

@@ -0,0 +1,5 @@
+export * from './MainMenu.js';
+export * from './helperComponents/Banners/index.js';
+export * from './helperComponents/Favorites/index.js';
+export * from './types.js';
+export * from './utils/mapInnerLinksToListItems.js';

package/dist/esm/components/MainMenu/index.js

@@ -0,0 +1,5 @@
+export * from './MainMenu.js';
+export * from './helperComponents/Banners/index.js';
+export * from './helperComponents/Favorites/index.js';
+export * from './types.js';
+export * from './utils/mapInnerLinksToListItems.js';

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

@@ -0,0 +1,284 @@
+import { BaseItemProps, ListProps } from '@cloud-ru/ds-list';
+import { SearchProps as SearchPropsSnack } from '@cloud-ru/ds-search';
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { JSXElementConstructor, MouseEvent, ReactNode } from 'react';
+import { FavoritesSegment } from './helperComponents/Favorites/constants.js';
+/**
+ * Карточка сервиса или ссылки внутри {@link LinksGroup}.
+ *
+ * Отображается в сетке MainMenu (`CardServiceSmall`) и может попадать в боковое меню (`mapInnerLinksToListItems`).
+ */
+export type InnerLink = {
+    /**
+     * Уникальный идентификатор карточки (также используется в избранном и при поиске).
+     *
+     * Один и тот же сервис может быть представлен в разных сегментах с разной
+     * детализацией (простая карточка в общем каталоге и раскрытая с вложенными
+     * сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся
+     * общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах
+     * остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments}).
+     */
+    id: string;
+    /**
+     * Иконка карточки.
+     *
+     * Если не задана, вместо иконки рендерится `Avatar` с двухбуквенным текстом по `label`
+     * (см. `getAvatarNameFromLabel`).
+     */
+    icon?: JSXElementConstructor<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Заголовок карточки. */
+    label: string;
+    /** Краткое описание сервиса — отображается при включённом переключателе «Описание». */
+    description?: string;
+    onClick(e?: MouseEvent<HTMLElement>): void;
+    href?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    badge?: CardServiceLightProps['promoTag'];
+    /**
+     * Вложенные сервисы подкатегории.
+     *
+     * При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка
+     * с кнопкой раскрытия, в развёрнутом — заголовок {@link TitleClickable} и сетка вложенных сервисов.
+     */
+    items?: InnerLink[];
+    /**
+     * Синонимы для fuzzy-поиска.
+     */
+    aliases: string[];
+};
+type TitleStatic = {
+    text: string;
+    onClick?: never;
+};
+type TitleClickable = {
+    text: string;
+    onClick?(e?: MouseEvent<HTMLElement>): void;
+};
+export type LinksGroupTitle = TitleStatic | TitleClickable;
+export type LinksGroupBlockColor = 'neutral' | 'primary' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet' | 'pink';
+/**
+ * Группа карточек MainMenu с общим заголовком.
+ *
+ * Используется в `segments[].items` и `platformGroups`.
+ * При активном поиске группа может отображаться целиком или с отфильтрованным списком `items`.
+ */
+export type LinksGroup = {
+    /** Уникальный идентификатор группы (якорь скролла, поиск по id). */
+    id: string;
+    /** Заголовок группы в сетке карточек и в боковой навигации. */
+    label: LinksGroupTitle;
+    /**
+     * Синонимы заголовка группы для fuzzy-поиска.
+     */
+    aliases?: string[];
+    onClick?(e?: MouseEvent<HTMLElement>): void;
+    hidden?: boolean;
+    /**
+     * Разрешено ли добавление карточек группы в избранное.
+     *
+     * @default true — избранное доступно, если не передано `false`.
+     */
+    favoritesEnabled?: boolean;
+    /** Карточки сервисов или ссылок внутри группы. */
+    items: InnerLink[];
+    /** Цвет блока группы. */
+    blockColor?: LinksGroupBlockColor;
+    /** Визуальное выделение группы */
+    highlight?: boolean;
+};
+/**
+ * Сегмент правой панели MainMenu (переключатель в тулбаре над сеткой карточек).
+ *
+ * Только каталог: порядок и раскрытие групп задаются через {@link MainMenuSegmentPrefs}
+ * и колбэки `onSegmentOrderChange` / `onSegmentExpandedChange` на {@link MainMenuProps}.
+ */
+export type MainMenuSegment = {
+    /** Уникальный идентификатор сегмента (значение SegmentControl). */
+    id: string;
+    /** Подпись сегмента в SegmentControl. */
+    label: string;
+    /** Иконка сегмента в SegmentControl; без неё — только `label`. */
+    icon?: ReactNode;
+    /** Группы карточек сегмента (каталог). */
+    items: LinksGroup[];
+    /**
+     * Группы сегмента в выдаче поиска — после совпадений из обычных сегментов и `platformGroups`.
+     *
+     * @default false
+     */
+    pinBottomOnSearch?: boolean;
+};
+/**
+ * Пользовательские prefs сегмента (порядок и раскрытие групп).
+ *
+ * Передаются отдельно от каталога {@link MainMenuSegment}, чтобы `segments` оставался стабильным.
+ */
+export type MainMenuSegmentPrefs = {
+    /** Id сегмента из {@link MainMenuSegment.id}. */
+    id: string;
+    /**
+     * Порядок id групп. Если не передан — uncontrolled для этого сегмента
+     * (дефолт = порядок `items`; новые группы добавляются в конец).
+     */
+    order?: string[];
+    /**
+     * Id раскрытых групп. Если не передан — uncontrolled (по умолчанию все раскрыты).
+     */
+    expanded?: string[];
+};
+export type SearchProps = Pick<SearchPropsSnack, 'onBlur' | 'onFocus'> & {
+    value: string;
+    onChange(value: string): void;
+    onSearchNoResult?(value: string): void;
+};
+export type FavoriteProps = {
+    /** Список id избранных сервисов */
+    value: string[];
+    /**
+     * Колбэк переключения избранного для карточки сервиса.
+     *
+     * `position` передаётся при добавлении через drag из сетки сервисов — индекс,
+     * на который должна встать карточка среди избранного (см. {@link FavoriteProps.onOrderChange}).
+     * При переключении избранного кликом не передаётся.
+     */
+    onChange(productId: string): (addingValue: boolean, position?: number) => void;
+    /**
+     * Колбэк вызывается после перетаскивания карточек внутри избранного с новым порядком id.
+     *
+     * Добавление новой карточки через drag из сетки сервисов идёт через
+     * {@link FavoriteProps.onChange} с `position` — этот колбэк для такого добавления не вызывается.
+     */
+    onOrderChange?(orderedIds: string[]): void;
+    /** Список id недавно открытых сервисов */
+    recentServices?: string[];
+    /** Колбэк клика по карточке сервиса в сегменте «Избранное» */
+    onFavoriteServiceClick?(serviceId: string, event?: MouseEvent<HTMLElement>): void;
+    /** Колбэк клика по карточке сервиса в сегменте «Недавнее» */
+    onRecentServiceClick?(serviceId: string, event?: MouseEvent<HTMLElement>): void;
+    /** Действия для списка сервисов */
+    actions?: {
+        items: BaseItemProps[];
+        onDroplistOpenChange?(open: boolean): void;
+    };
+    /**
+     * Активный сегмент («Избранное» / «Недавнее») в панели избранного.
+     *
+     * Не передано — неуправляемое состояние (дефолт `'favorites'`).
+     */
+    segment?: FavoritesSegment;
+    /** Колбэк смены сегмента панели избранного. */
+    onSegmentChange?(segment: FavoritesSegment): void;
+    /** Флаг загрузки данных */
+    loading?: boolean;
+};
+export type MainMenuToggleProps = {
+    value: boolean;
+    onChange(value: boolean): void;
+};
+/**
+ * Настройки меню, управляемые из модалки по кнопке в тулбаре сетки карточек.
+ *
+ * Проп опционален на уровне {@link MainMenuProps.preferences} целиком — без него кнопка
+ * настроек в тулбаре не отображается.
+ */
+export type MainMenuPreferencesProps = {
+    /**
+     * Открыта ли модалка настроек.
+     *
+     * Не передано — состояние открытия неуправляемое (модалка сама переключает себя по клику на кнопку).
+     */
+    open?: boolean;
+    /** Колбэк открытия/закрытия модалки. */
+    onOpenChange?(open: boolean): void;
+    /** Показывать описания сервисов в карточках. */
+    showDescription: MainMenuToggleProps;
+    /**
+     * Отображать цвета блоков групп ({@link LinksGroup.blockColor}).
+     * `value: false` скрывает цвета всех групп независимо от заданного `blockColor`.
+     */
+    showGroupsColors?: MainMenuToggleProps;
+};
+export type MainMenuProps = {
+    disabled?: boolean;
+    open?: boolean;
+    setOpen?(open: boolean): void;
+    logo?: ReactNode;
+    leftTop?: ReactNode;
+    rightTop?: ReactNode;
+    /**
+     * Сегменты правой панели (сетка карточек) — только каталог.
+     *
+     * При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`.
+     * Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только
+     * первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются.
+     * При `segments.length > 1` показывается SegmentControl (скрывается во время поиска).
+     * Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже.
+     */
+    segments?: MainMenuSegment[];
+    /**
+     * Пользовательские prefs сегментов (порядок / раскрытие групп).
+     *
+     * Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля.
+     */
+    segmentPrefs?: MainMenuSegmentPrefs[];
+    /**
+     * Активный сегмент правой панели (значение SegmentControl, см. {@link MainMenuSegment.id}).
+     *
+     * Не передано — неуправляемое состояние (дефолт — первый сегмент с видимыми карточками).
+     */
+    activeSegmentId?: string;
+    /** Колбэк смены активного сегмента правой панели. */
+    onActiveSegmentChange?(segmentId: string): void;
+    /**
+     * Колбэк после DnD групп в сегменте (без id синтетической группы избранного).
+     */
+    onSegmentOrderChange?(segmentId: string, orderedGroupIds: string[]): void;
+    /**
+     * Колбэк при изменении набора раскрытых групп сегмента
+     * (без id синтетической группы избранного).
+     */
+    onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+    /**
+     * Пункты левой колонки (desktop) / нижней части списка (mobile).
+     *
+     * Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей).
+     * Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.
+     */
+    settingItems?: ListProps['items'];
+    /**
+     * Платформенные группы (например «Облачные продукты», «Другие продукты»).
+     *
+     * Без поиска в сетке карточек **не отображаются**.
+     * С поиском: попадают в результаты при совпадении; порядок —
+     * после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`.
+     * Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`).
+     */
+    platformGroups?: LinksGroup[];
+    favorite?: FavoriteProps;
+    search?: SearchProps;
+    /**
+     * Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп.
+     *
+     * Не передано — кнопка настроек в тулбаре не отображается.
+     */
+    preferences?: MainMenuPreferencesProps;
+    /**
+     * Ширина дровера, с которой открывается меню (desktop only)
+     */
+    defaultWidth?: number;
+    /**
+     * Вызывается при окончании изменения ширины дровера (desktop only)
+     */
+    onWidthChangeEnd?: (width: number) => void;
+    /**
+     * Текст подсказки для драггера (desktop only)
+     */
+    draggerTooltip?: string;
+    /** Флаг загрузки данных */
+    loading?: boolean;
+};
+export {};

package/dist/esm/components/MainMenu/types.js

@@ -0,0 +1 @@
+export {};