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

package/src/components/MainMenu/types.ts

@@ -0,0 +1,311 @@
+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';
+
+/**
+ * Карточка сервиса или ссылки внутри {@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;
+};

package/src/components/MainMenu/utils/dedupeSearchGroups.ts

@@ -0,0 +1,35 @@
+import { LinksGroup } from '../types';
+
+/**
+ * Один и тот же сервис может быть представлен в разных сегментах с разной
+ * детализацией — например, простой карточкой в общем каталоге и раскрытой
+ * аккордеоном карточкой с вложенными сервисами в «Центре управления». Обе
+ * версии используют общий {@link InnerLink.id}.
+ *
+ * При поиске результаты сегментов объединяются в один список (см.
+ * {@link MainMenuProps.segments}), поэтому такой сервис может совпасть сразу в
+ * нескольких сегментах. Функция оставляет только первое по порядку `groups`
+ * (то есть по приоритету сегментов) вхождение каждого id, а группы, опустевшие
+ * после удаления дублей, убирает целиком — иначе группа с тем же заголовком
+ * задублируется в выдаче.
+ */
+export function dedupeSearchGroups(groups: LinksGroup[]): LinksGroup[] {
+  const seenItemIds = new Set<string>();
+
+  return groups.reduce<LinksGroup[]>((acc, group) => {
+    const items = group.items.filter(item => {
+      if (seenItemIds.has(item.id)) {
+        return false;
+      }
+
+      seenItemIds.add(item.id);
+      return true;
+    });
+
+    if (items.length > 0) {
+      acc.push({ ...group, items });
+    }
+
+    return acc;
+  }, []);
+}

package/src/components/MainMenu/utils/dnd/favoriteListCollisionDetection.ts

@@ -0,0 +1,35 @@
+import { closestCenter, CollisionDetection, rectIntersection } from '@dnd-kit/core';
+
+import { FAVORITES_DROP_ID, isFavoritesDroppableId, isServiceDragId, isServiceFavoriteDragId } from './ids';
+
+export const favoriteListCollisionDetection: CollisionDetection = args => {
+  const collisions = closestCenter(args);
+
+  // Group reorder: ignore favorites droppables so they don't steal collisions from groups.
+  if (!isServiceDragId(args.active.id)) {
+    return collisions.filter(({ id }) => !isFavoritesDroppableId(id));
+  }
+
+  // Favorite reorder: stay among favorite cards.
+  if (isServiceFavoriteDragId(args.active.id)) {
+    return collisions.filter(({ id }) => isServiceFavoriteDragId(id));
+  }
+
+  // Source → favorites: only when pointer (or rect) actually hits the favorites panel.
+  // closestCenter always returns a nearest favorite even while still over the catalog —
+  // that would add the card on a pick-up-and-release without moving into favorites.
+  // const hits = args.pointerCoordinates ? pointerWithin(args) : rectIntersection(args);
+  const hits = rectIntersection(args);
+  const hasFavoriteCards = args.droppableContainers.some(({ id }) => id != null && isServiceFavoriteDragId(id));
+  // With cards in the list, ignore FAVORITES_DROP_ID — padding/gaps would otherwise
+  // oscillate between "append" and a card-based insert index.
+  const favoriteHits = hits.filter(({ id }) => {
+    if (isServiceFavoriteDragId(id)) {
+      return true;
+    }
+
+    return id === FAVORITES_DROP_ID && !hasFavoriteCards;
+  });
+
+  return favoriteHits;
+};

package/src/components/MainMenu/utils/dnd/getDragReferenceY.ts

@@ -0,0 +1,26 @@
+import { getEventCoordinates } from '@dnd-kit/utilities';
+
+import { ClientRectLike } from './getFavoriteInsertIndex';
+
+type GetDragReferenceYParams = {
+  activatorEvent?: Event | null;
+  deltaY?: number;
+  activeRect?: ClientRectLike | null;
+};
+
+/** Pointer Y (activator + delta), or active rect center as fallback (keyboard). */
+export function getDragReferenceY({ activatorEvent, deltaY = 0, activeRect }: GetDragReferenceYParams): number | null {
+  if (activatorEvent) {
+    const coordinates = getEventCoordinates(activatorEvent);
+
+    if (coordinates) {
+      return coordinates.y + deltaY;
+    }
+  }
+
+  if (!activeRect) {
+    return null;
+  }
+
+  return activeRect.top + activeRect.height / 2;
+}

package/src/components/MainMenu/utils/dnd/getFavoriteInsertIndex.ts

@@ -0,0 +1,63 @@
+import { FAVORITES_DROP_ID, isServiceFavoriteDragId, isServiceSourceDragId, parseServiceDragId } from './ids';
+
+export type ClientRectLike = Pick<ClientRect, 'top' | 'height'>;
+
+/** Before `overIndex` if referenceY is above the over item center, otherwise after. */
+export function getInsertIndexByRects(
+  overIndex: number,
+  referenceY?: number | null,
+  overRect?: ClientRectLike | null,
+): number {
+  if (referenceY == null || !overRect) {
+    return overIndex;
+  }
+
+  const overCenterY = overRect.top + overRect.height / 2;
+
+  return referenceY > overCenterY ? overIndex + 1 : overIndex;
+}
+
+export type GetFavoriteInsertIndexParams = {
+  activeId: string | number;
+  overId?: string | number;
+  favoriteIds: string[];
+  referenceY?: number | null;
+  overRect?: ClientRectLike | null;
+};
+
+/** Insert index for a new source card; shared by indicator and drag-end. */
+export function getFavoriteInsertIndex({
+  activeId,
+  overId,
+  favoriteIds,
+  referenceY,
+  overRect,
+}: GetFavoriteInsertIndexParams): number | null {
+  if (!isServiceSourceDragId(activeId) || overId == null) {
+    return null;
+  }
+
+  const activeServiceId = parseServiceDragId(activeId);
+
+  if (favoriteIds.includes(activeServiceId)) {
+    return null;
+  }
+
+  // Empty list only: drop zone is the sole target. With cards, ignore it — padding/gaps
+  // would make the indicator jump between "append" and card before/after.
+  if (String(overId) === FAVORITES_DROP_ID) {
+    return favoriteIds.length === 0 ? 0 : null;
+  }
+
+  if (!isServiceFavoriteDragId(overId)) {
+    return null;
+  }
+
+  const overIndex = favoriteIds.indexOf(parseServiceDragId(overId));
+
+  if (overIndex === -1) {
+    return null;
+  }
+
+  return getInsertIndexByRects(overIndex, referenceY, overRect);
+}

package/src/components/MainMenu/utils/dnd/ids.ts

@@ -0,0 +1,53 @@
+const SERVICE_DRAG_SOURCE_PREFIX = 'service-drag:source:';
+
+const SERVICE_DRAG_FAVORITE_PREFIX = 'service-drag:favorite:';
+
+// Символьный сепаратор для исключения пересечения с символами, которые могут быть в groupId или serviceId
+const SERVICE_DRAG_SOURCE_GROUP_SEPARATOR = '\u0000';
+
+export const FAVORITES_DROP_ID = 'favorites-drop-zone';
+
+export function getServiceSourceDragId(groupId: string, serviceId: string): string {
+  return `${SERVICE_DRAG_SOURCE_PREFIX}${groupId}${SERVICE_DRAG_SOURCE_GROUP_SEPARATOR}${serviceId}`;
+}
+
+export function getServiceFavoriteDragId(serviceId: string): string {
+  return `${SERVICE_DRAG_FAVORITE_PREFIX}${serviceId}`;
+}
+
+export function isServiceSourceDragId(id: string | number | symbol): boolean {
+  return String(id).startsWith(SERVICE_DRAG_SOURCE_PREFIX);
+}
+
+export function isServiceFavoriteDragId(id: string | number | symbol): boolean {
+  return String(id).startsWith(SERVICE_DRAG_FAVORITE_PREFIX);
+}
+
+export function isServiceDragId(id: string | number | symbol): boolean {
+  return isServiceSourceDragId(id) || isServiceFavoriteDragId(id);
+}
+
+export function isFavoritesDroppableId(id: string | number | symbol) {
+  return id === FAVORITES_DROP_ID || isServiceFavoriteDragId(id);
+}
+
+export function parseServiceDragId(id: string | number | symbol): string {
+  const value = String(id);
+
+  if (value.startsWith(SERVICE_DRAG_SOURCE_PREFIX)) {
+    const rest = value.slice(SERVICE_DRAG_SOURCE_PREFIX.length);
+    const separatorIndex = rest.lastIndexOf(SERVICE_DRAG_SOURCE_GROUP_SEPARATOR);
+
+    if (separatorIndex >= 0) {
+      return rest.slice(separatorIndex + 1);
+    }
+
+    return rest;
+  }
+
+  if (value.startsWith(SERVICE_DRAG_FAVORITE_PREFIX)) {
+    return value.slice(SERVICE_DRAG_FAVORITE_PREFIX.length);
+  }
+
+  return value;
+}

package/src/components/MainMenu/utils/dnd/index.ts

@@ -0,0 +1,5 @@
+export * from './ids';
+export * from './getDragReferenceY';
+export * from './getFavoriteInsertIndex';
+export * from './resolveFavoriteOrderOnDragEnd';
+export * from './favoriteListCollisionDetection';

package/src/components/MainMenu/utils/dnd/resolveFavoriteOrderOnDragEnd.ts

@@ -0,0 +1,74 @@
+import { arrayMove } from '@dnd-kit/sortable';
+
+import { ClientRectLike, getFavoriteInsertIndex } from './getFavoriteInsertIndex';
+import { FAVORITES_DROP_ID, isServiceDragId, isServiceFavoriteDragId, parseServiceDragId } from './ids';
+
+type ResolveFavoriteOrderOnDragEndParams = {
+  activeId: string | number;
+
+  overId?: string | number;
+
+  favoriteIds: string[];
+
+  referenceY?: number | null;
+
+  overRect?: ClientRectLike | null;
+};
+
+export function resolveFavoriteOrderOnDragEnd({
+  activeId,
+  overId,
+  favoriteIds,
+  referenceY,
+  overRect,
+}: ResolveFavoriteOrderOnDragEndParams): string[] | null {
+  if (!isServiceDragId(activeId) || overId == null) {
+    return null;
+  }
+
+  const activeServiceId = parseServiceDragId(activeId);
+  const activeFavoriteIndex = isServiceFavoriteDragId(activeId) ? favoriteIds.indexOf(activeServiceId) : -1;
+
+  // Reorder an existing favorite.
+  if (activeFavoriteIndex !== -1) {
+    if (String(overId) === FAVORITES_DROP_ID) {
+      const lastIndex = favoriteIds.length - 1;
+
+      if (activeFavoriteIndex === lastIndex) {
+        return null;
+      }
+
+      return arrayMove(favoriteIds, activeFavoriteIndex, lastIndex);
+    }
+
+    if (!isServiceFavoriteDragId(overId)) {
+      return null;
+    }
+
+    const overFavoriteIndex = favoriteIds.indexOf(parseServiceDragId(overId));
+
+    if (overFavoriteIndex === -1 || activeFavoriteIndex === overFavoriteIndex) {
+      return null;
+    }
+
+    return arrayMove(favoriteIds, activeFavoriteIndex, overFavoriteIndex);
+  }
+
+  // Insert from catalog — same index as the insert indicator.
+  const insertIndex = getFavoriteInsertIndex({
+    activeId,
+    overId,
+    favoriteIds,
+    referenceY,
+    overRect,
+  });
+
+  if (insertIndex == null) {
+    return null;
+  }
+
+  const nextOrder = [...favoriteIds];
+  nextOrder.splice(insertIndex, 0, activeServiceId);
+
+  return nextOrder;
+}