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

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss

@@ -0,0 +1,270 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/button.module' as button;
+
+$map-block-color-decor: (
+  'transparent': 'transparent',
+  'neutral': base.$sn-theme-color-neutral-decor,
+  'primary': base.$sn-theme-color-primary-decor,
+  'red': base.$sn-theme-color-red-decor,
+  'orange': base.$sn-theme-color-orange-decor,
+  'yellow': base.$sn-theme-color-yellow-decor,
+  'green': base.$sn-theme-color-green-decor,
+  'blue': base.$sn-theme-color-blue-decor,
+  'violet': base.$sn-theme-color-violet-decor,
+  'pink': base.$sn-theme-color-pink-decor,
+);
+
+.headerActions {
+  pointer-events: none;
+
+  display: flex;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  opacity: 0;
+  outline: none;
+
+  &[data-always-visible] {
+    opacity: 1;
+  }
+}
+
+.header {
+  display: flex;
+  flex: 1 0 0;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  min-width: 0;
+  min-height: base.$sn-primitive-dimension-40;
+  padding-inline: base.$sn-primitive-dimension-8;
+  border-radius: base.$sn-density-radius-2xs;
+
+  &:focus-visible,
+  &:has(:focus-visible) {
+    .headerActions {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: base.$sn-theme-color-neutral-decorTransparent;
+
+      .headerActions {
+        pointer-events: auto;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.headerTitle {
+  flex: 1 0 0;
+  min-width: 0;
+  color: base.$sn-theme-color-available-version-textMain;
+
+  &:hover,
+  &:focus-visible,
+  &:has(:focus-visible) {
+    .headerActions {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+}
+
+.group {
+  position: relative;
+
+  overflow-x: clip;
+  display: flex;
+  flex-direction: column;
+
+  min-width: 0;
+  padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-8
+    base.$sn-primitive-dimension-12;
+  border-radius: base.$sn-density-radius-2xs;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+
+
+  &[data-drag-preview] {
+    cursor: grabbing;
+
+    .header {
+      cursor: grabbing;
+      background-color: base.$sn-theme-color-neutral-decorTransparent;
+
+      .headerActions {
+        pointer-events: auto;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.groupDragPreview {
+  cursor: grabbing;
+  container-type: inline-size;
+  border-radius: base.$sn-density-radius-2xs;
+}
+
+.dragHandle {
+  all: unset;
+
+  touch-action: none;
+  cursor: grab;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: base.$sn-primitive-dimension-24;
+  height: base.$sn-primitive-dimension-24;
+  border: none;
+  border-radius: button.$sn-button-anatomy-size-s-container-borderRadius;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+
+  background-color: transparent;
+  outline: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+  }
+}
+
+.groupBody {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(auto, 1fr));
+  gap: base.$sn-primitive-dimension-4;
+
+  &:not([data-mobile]) {
+    // Drawer десктопного меню ресайзится пользователем (см. MenuDesktop.resizable),
+    // поэтому колонки реагируют на реальную ширину контейнера (container query
+    // от `.rightContent`), а не на ширину viewport.
+    // Перестраиваться должно при ширине дровера 1024px, поэтому width тут указан с вычетом
+    @container (width <= 728px) {
+      grid-template-columns: repeat(2, minmax(auto, 1fr));
+    }
+  }
+
+  &[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] & {
+    z-index: -1;
+  }
+
+  &[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%);
+  }
+
+  &[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%);
+  }
+
+  &[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] & {
+    inset: var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
+    border-radius: calc(base.$sn-primitive-dimension-4 - var(--highlight-border-width)); // TODO: переделать на переменную от контейнера
+    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: base.$sn-primitive-dimension-4;
+
+  visibility: hidden;
+
+  @each $color, $decor in $map-block-color-decor {
+    &[data-block-color='#{$color}'] {
+      visibility: visible;
+      background-color: $decor;
+    }
+  }
+}
+
+.skeletonTitle {
+  display: flex;
+  align-items: center;
+
+  height: base.$sn-primitive-dimension-40;
+  padding: 0 base.$sn-primitive-dimension-8;
+
+  font-size: base.$sn-primitive-dimension-16;
+  line-height: base.$sn-primitive-dimension-40;
+}
+
+.skeletonBody {
+  padding-bottom: base.$sn-primitive-dimension-4;
+}
+
+.skeletonService {
+  padding: base.$sn-primitive-dimension-4;
+}

package/src/components/MainMenu/helperComponents/Content/hooks/useContentSegmentsSortable.ts

@@ -0,0 +1,250 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { LinksGroup, MainMenuSegment, MainMenuSegmentPrefs } from '../../../types';
+
+function mergeIdsPreservingOrder(prevIds: string[], nextIds: string[]) {
+  const kept = prevIds.filter(id => nextIds.includes(id));
+  const added = nextIds.filter(id => !prevIds.includes(id));
+
+  if (added.length === 0 && kept.length === prevIds.length) {
+    return prevIds;
+  }
+
+  return [...kept, ...added];
+}
+
+function resolveOrder(orderProp: string[] | undefined, ids: string[]) {
+  if (!orderProp) {
+    return ids;
+  }
+
+  return mergeIdsPreservingOrder(orderProp, ids);
+}
+
+function mergeExpandedIds(prevExpanded: string[], prevKnownIds: string[], nextIds: string[]) {
+  const nextIdSet = new Set(nextIds);
+  const prevKnownIdSet = new Set(prevKnownIds);
+  const kept = prevExpanded.filter(id => nextIdSet.has(id));
+  const added = nextIds.filter(id => !prevKnownIdSet.has(id));
+
+  if (added.length === 0) {
+    return kept;
+  }
+
+  return [...kept, ...added];
+}
+
+function resolveInitialExpanded(seedExpanded: string[], ids: string[]) {
+  if (seedExpanded === ids) {
+    return ids;
+  }
+
+  return mergeExpandedIds(seedExpanded, seedExpanded, ids);
+}
+
+type InternalSegmentPrefs = {
+  order: string[];
+  expanded: string[];
+};
+
+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 function useContentSegmentsSortable({
+  segments,
+  activeSegmentId,
+  isSearching,
+  searchGroups,
+  segmentPrefsById,
+  onSegmentOrderChange,
+  onSegmentExpandedChange,
+  disabled,
+  isMobile,
+}: UseContentSegmentsSortableProps) {
+  const activeSegment = useMemo(
+    () => segments.find(segment => segment.id === activeSegmentId) ?? segments[0],
+    [activeSegmentId, segments],
+  );
+
+  const activePrefs = activeSegment ? segmentPrefsById.get(activeSegment.id) : undefined;
+
+  const groups = useMemo(
+    () => (isSearching ? searchGroups : (activeSegment?.items ?? [])),
+    [activeSegment?.items, isSearching, searchGroups],
+  );
+  const ids = useMemo(() => groups.map(({ id }) => id), [groups]);
+  const idsKey = ids.join('\u0000');
+  const cacheKey = isSearching ? '__search__' : (activeSegment?.id ?? '');
+
+  const orderControlled = !isSearching && activePrefs?.order !== undefined;
+  const expandedControlled = !isSearching && activePrefs?.expanded !== undefined;
+
+  const [cache, setCache] = useState<Record<string, InternalSegmentPrefs>>({});
+  const knownIdsByCacheKeyRef = useRef<Record<string, string[]>>({});
+
+  useEffect(() => {
+    const prevKnownIds = knownIdsByCacheKeyRef.current[cacheKey] ?? ids;
+
+    setCache(prev => {
+      const existing = prev[cacheKey];
+
+      let seedOrder = existing?.order ?? ids;
+      if (isSearching) {
+        seedOrder = ids;
+      } else if (orderControlled) {
+        seedOrder = activePrefs?.order ?? ids;
+      }
+
+      const seedExpanded = expandedControlled ? (activePrefs?.expanded ?? ids) : (existing?.expanded ?? ids);
+
+      const nextOrder = isSearching ? ids : resolveOrder(seedOrder, ids);
+      const nextExpanded = existing
+        ? mergeExpandedIds(seedExpanded, prevKnownIds, ids)
+        : resolveInitialExpanded(seedExpanded, ids);
+
+      if (
+        existing &&
+        existing.order.length === nextOrder.length &&
+        existing.order.every((id, index) => id === nextOrder[index]) &&
+        existing.expanded.length === nextExpanded.length &&
+        existing.expanded.every((id, index) => id === nextExpanded[index])
+      ) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        [cacheKey]: { order: nextOrder, expanded: nextExpanded },
+      };
+    });
+
+    knownIdsByCacheKeyRef.current[cacheKey] = ids;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cacheKey, idsKey, isSearching, orderControlled, expandedControlled, activePrefs?.order, activePrefs?.expanded]);
+
+  const cached = cache[cacheKey] ?? { order: resolveOrder(undefined, ids), expanded: ids };
+
+  // В поиске порядок задаёт useMenuItems (regular → platform → pinned).
+  // Кэш order иначе «залипает» между нажатиями и поднимает platform выше новых совпадений.
+  const order = useMemo(() => {
+    if (isSearching) {
+      return ids;
+    }
+
+    if (orderControlled) {
+      return resolveOrder(activePrefs?.order, ids);
+    }
+
+    return resolveOrder(cached.order, ids);
+  }, [activePrefs?.order, cached.order, ids, isSearching, orderControlled]);
+
+  // Controlled expanded: knownIds — из ref (уже виденные группы), не из самого expanded.
+  // Иначе collapse-all (`expanded: []`) трактует все id как «новые» и снова раскрывает их.
+  // Ссылку стабилизируем: новый массив на каждом рендере ломает анимацию sortable / DragOverlay.
+  const expandedIds = useMemo(() => {
+    if (!expandedControlled) {
+      return cached.expanded;
+    }
+
+    const knownIds = knownIdsByCacheKeyRef.current[cacheKey] ?? ids;
+
+    return mergeExpandedIds(activePrefs?.expanded ?? ids, knownIds, ids);
+  }, [activePrefs?.expanded, cacheKey, cached.expanded, expandedControlled, ids]);
+
+  const groupsById = useMemo(() => new Map(groups.map(group => [group.id, group])), [groups]);
+
+  const orderedGroups = useMemo(() => {
+    if (isSearching) {
+      return groups;
+    }
+
+    return order.map(id => groupsById.get(id)).filter((group): group is LinksGroup => Boolean(group));
+  }, [groups, groupsById, isSearching, order]);
+
+  const handleDragEnd = useCallback(
+    ({ active, over }: DragEndEvent) => {
+      if (disabled || !over || active.id === over.id) {
+        return;
+      }
+
+      const oldIndex = order.indexOf(String(active.id));
+      const newIndex = order.indexOf(String(over.id));
+
+      if (oldIndex === -1 || newIndex === -1) {
+        return;
+      }
+
+      const nextOrder = resolveOrder(arrayMove(order, oldIndex, newIndex), ids);
+
+      if (!orderControlled) {
+        setCache(prev => ({
+          ...prev,
+          [cacheKey]: {
+            order: nextOrder,
+            expanded: prev[cacheKey]?.expanded ?? expandedIds,
+          },
+        }));
+      }
+
+      if (!isSearching && activeSegment) {
+        onSegmentOrderChange?.(activeSegment.id, nextOrder);
+      }
+    },
+    [activeSegment, cacheKey, disabled, expandedIds, ids, isSearching, onSegmentOrderChange, order, orderControlled],
+  );
+
+  const onExpandedChange = useCallback(
+    (value?: string[]) => {
+      if (isMobile) {
+        return;
+      }
+
+      const nextExpanded = value ?? [];
+
+      if (!expandedControlled) {
+        setCache(prev => ({
+          ...prev,
+          [cacheKey]: {
+            order: prev[cacheKey]?.order ?? order,
+            expanded: nextExpanded,
+          },
+        }));
+      }
+
+      if (!isSearching && activeSegment) {
+        onSegmentExpandedChange?.(activeSegment.id, nextExpanded);
+      }
+    },
+    [activeSegment, cacheKey, expandedControlled, isSearching, isMobile, onSegmentExpandedChange, order],
+  );
+
+  return {
+    orderedGroups,
+    expandedIds,
+    onExpandedChange,
+    handleDragEnd,
+  };
+}

package/src/components/MainMenu/helperComponents/Content/hooks/useSegmentDnd.tsx

@@ -0,0 +1,104 @@
+import { DragEndEvent, DragStartEvent, useDndMonitor } from '@dnd-kit/core';
+import { useCallback } from 'react';
+
+import { useMainMenuDndOverlay } from '../../../hooks/useMainMenuDnd';
+import { FavoriteProps, LinksGroup } from '../../../types';
+import { isServiceDragId, resolveGroupBlockColor } from '../../../utils';
+import { SortableGroupDragPreview } from '../helperComponents/SortableGroup';
+
+type UseSegmentDndProps = {
+  visibleGroups: LinksGroup[];
+
+  expandedIds: string[];
+
+  onSortableDragEnd(event: DragEndEvent): void;
+
+  showDescription: boolean;
+
+  showGroupsColors?: boolean;
+
+  favorite?: FavoriteProps;
+};
+
+/**
+ * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
+ * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
+ */
+export function useSegmentDnd({
+  visibleGroups,
+  expandedIds,
+  onSortableDragEnd,
+  showDescription,
+  showGroupsColors,
+  favorite,
+}: UseSegmentDndProps) {
+  const { setGroupDragOverlay } = useMainMenuDndOverlay();
+
+  const handleDragStart = useCallback(
+    ({ active }: DragStartEvent) => {
+      if (!isServiceDragId(active.id)) {
+        const activeGroup = visibleGroups.find(({ id }) => id === String(active.id));
+
+        if (activeGroup) {
+          setGroupDragOverlay(
+            <SortableGroupDragPreview
+              id={activeGroup.id}
+              label={activeGroup.label}
+              items={activeGroup.items}
+              isExpanded={expandedIds.includes(activeGroup.id)}
+              blockColor={resolveGroupBlockColor(activeGroup.blockColor, showGroupsColors)}
+              showDescription={showDescription}
+              favorite={activeGroup.favoritesEnabled ? favorite : undefined}
+              highlight={activeGroup.highlight}
+            />,
+          );
+        }
+      }
+    },
+    [expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors, visibleGroups],
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setGroupDragOverlay(null);
+
+      if (isServiceDragId(event.active.id)) {
+        return;
+      }
+
+      onSortableDragEnd(event);
+    },
+    [onSortableDragEnd, setGroupDragOverlay],
+  );
+
+  const handleDragCancel = useCallback(() => {
+    setGroupDragOverlay(null);
+  }, [setGroupDragOverlay]);
+
+  useDndMonitor({
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+  });
+
+  /* useEffect(() => {
+    if (!activeGroup) {
+      setGroupDragOverlay(null);
+      return;
+    }
+
+    setGroupDragOverlay(
+      <SortableGroupDragPreview
+        id={activeGroup.id}
+        label={activeGroup.label}
+        items={activeGroup.items}
+        isExpanded={expandedIds.includes(activeGroup.id)}
+        blockColor={resolveGroupBlockColor(activeGroup.blockColor, showGroupsColors)}
+        showDescription={showDescription}
+        favorite={activeGroup.favoritesEnabled ? favorite : undefined}
+      />,
+    );
+
+    return () => setGroupDragOverlay(null);
+  }, [activeGroup, expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors]); */
+}

package/src/components/MainMenu/helperComponents/Content/index.ts

@@ -0,0 +1,2 @@
+export * from './Content';
+export * from './constants';

package/src/components/MainMenu/helperComponents/Content/styles.module.scss

@@ -0,0 +1,11 @@
+.content {
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    &[data-mobile] {
+      flex: 1 1 auto;
+    }
+  }
+}