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

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

@@ -0,0 +1,77 @@
+$slide-x: -12px;
+$slide-y: 4px;
+
+.wrapper {
+  will-change: transform, opacity;
+
+  // Лонгхенды, а не шорткат `animation`: шорткат без имени lightningcss сворачивает
+  // в `animation: none`, и на прод-сборке анимация не запускалась.
+  animation-duration: 0.24s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: forwards;
+
+  &[data-animation-type='fade-slide-up-right'] {
+    transform: translate($slide-x, $slide-y);
+    opacity: 0;
+    animation-name: fade-slide-up-right;
+  }
+
+  &[data-animation-type='fade-slide-up'] {
+    transform: translate(0, $slide-y);
+    opacity: 0;
+    animation-name: fade-slide-up;
+  }
+
+  &[data-animation-type='slide-right'] {
+    transform: translate($slide-x, 0);
+    animation-name: slide-right;
+  }
+
+  &[data-animation-type='fade-in'] {
+    animation-name: fade-in;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-slide-up {
+  0% {
+    transform: translate(0, $slide-y);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-slide-up-right {
+  0% {
+    transform: translate($slide-x, $slide-y);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-right {
+  0% {
+    transform: translate($slide-x, 0);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}

package/src/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/ScrollWithAnimatedStickyPanel.tsx

@@ -0,0 +1,54 @@
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { PropsWithChildren, useCallback, useRef, useState } from 'react';
+
+import styles from './styles.module.scss';
+
+type ScrollWithAnimatedStickyPanelProps = PropsWithChildren<{
+  panel: React.ReactNode;
+}>;
+
+export function ScrollWithAnimatedStickyPanel({ panel, children }: ScrollWithAnimatedStickyPanelProps) {
+  const [positions, setPositions] = useState({ panelTopShift: 0, containerScroll: 0 });
+  const [panelHeight, setPanelHeight] = useState(0);
+  const panelRef = useRef<HTMLDivElement>(undefined);
+
+  const handleScroll = useCallback((event?: Event) => {
+    if (!event || !event.target) return;
+
+    const target = event.target as HTMLDivElement;
+
+    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 (
+    <div className={styles.container} style={{ '--snack-autohide-panel-height': `${panelHeight}px` }}>
+      <Scroll barHideStrategy='never' overflow={{ x: 'hidden' }} onScroll={handleScroll}>
+        {children}
+      </Scroll>
+      <div
+        className={styles.panel}
+        ref={element => {
+          if (element) {
+            setPanelHeight(element.offsetHeight);
+            panelRef.current = element;
+          }
+        }}
+        style={{ top: positions.panelTopShift }}
+      >
+        {panel}
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+  height: 100%;
+
+  :global {
+    .os-scrollbar-vertical {
+      /* stylelint-disable-next-line declaration-no-important */
+      top: var(--snack-autohide-panel-height, 0)!important;
+    }
+  }
+}
+
+.panel {
+  position: absolute;
+  width: 100%;
+}

package/src/components/MainMenu/helperComponents/Search/Search.tsx

@@ -0,0 +1,34 @@
+import { Search as SearchSnack } from '@cloud-ru/ds-search';
+import { forwardRef } from 'react';
+
+import { headerLocale } from '../../../../locale';
+import { SearchProps } from '../../types';
+import styles from './styles.module.scss';
+
+type SearchComponentProps = SearchProps & {
+  isMobile?: boolean;
+};
+
+export const Search = forwardRef<HTMLInputElement, SearchComponentProps>(
+  ({ value, onChange, onBlur, onFocus, isMobile = false }, ref) => {
+    const { t } = headerLocale.useTranslations();
+
+    return (
+      <div className={styles.searchWrap} data-mobile={isMobile || undefined}>
+        <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}
+        />
+      </div>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,14 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.searchWrap {
+  &:not([data-mobile]) {
+    flex: 1 1 auto;
+
+    // NOTE: у Search уже есть свои паддинги внутри компонента, поэтому здесь паддинги на 2px меньше
+    padding: base.$sn-primitive-dimension-2 base.$sn-primitive-dimension-10;
+  }
+}
+
+.search {
+  width: 100%;
+}

package/src/components/MainMenu/helperComponents/ServiceCard/ServiceCard.tsx

@@ -0,0 +1,111 @@
+import { useDraggable } from '@dnd-kit/core';
+import { DRAG_MODE, DragGhost, DragPreview } from '@cloud-ru/ds-drag-and-drop';
+import {
+  CardServiceInfo,
+  CardServiceInfoProps,
+  CardServiceLight,
+  CardServiceLightProps,
+} from '@cloud-ru/ds-uikit-product-card-predefined';
+import cn from 'classnames';
+import { MouseEvent } from 'react';
+
+import { FavoriteProps, InnerLink } from '../../types';
+import { getLinkEmblem, getServiceSourceDragId } from '../../utils';
+import styles from './styles.module.scss';
+
+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 function ServiceCard({
+  service,
+  favorite,
+  isMobile,
+  onServiceClick,
+  showDescription,
+  className,
+  tabIndex,
+  dragPreview,
+  expandable,
+}: ServiceCardProps) {
+  const isInFavorites = favorite?.value.includes(service.id) ?? false;
+
+  const favoriteProps: CardServiceLightProps['favorite'] =
+    !dragPreview && favorite
+      ? {
+          checked: isInFavorites,
+          onChange: favorite.onChange(service.id),
+          enabled: !service.disabled,
+        }
+      : undefined;
+
+  const commonProps: CardServiceLightProps<'a'> | CardServiceInfoProps<'a'> = {
+    as: 'a',
+    title: service.label,
+    icon: getLinkEmblem(service),
+    'data-test-id': `header__drawer-menu__link-${service.id}`,
+    href: service.href,
+    onClick: (event: MouseEvent<HTMLElement>) => 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 ? (
+    <CardServiceInfo {...commonProps} description={service.description ?? ''} />
+  ) : (
+    <CardServiceLight
+      {...commonProps}
+      tooltip={
+        !dragPreview && service.description
+          ? {
+              tip: service.description,
+            }
+          : undefined
+      }
+    />
+  );
+
+  return dragPreview ? <DragPreview className={styles.dragCardPreview}>{card}</DragPreview> : card;
+}
+
+export type DraggableServiceCardProps = ServiceCardProps & { groupId: string; dragDisabled?: boolean };
+
+export function DraggableServiceCard({
+  groupId,
+  service,
+  favorite,
+  dragDisabled,
+  ...props
+}: DraggableServiceCardProps) {
+  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 (
+    <DragGhost
+      innerRef={setNodeRef}
+      className={styles.draggableCard}
+      dragging={isDragging}
+      mode={DRAG_MODE.Static}
+      {...listeners}
+      {...restAttributes}
+    >
+      <ServiceCard service={service} favorite={favorite} {...props} tabIndex={tabIndex} />
+    </DragGhost>
+  );
+}

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

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

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

@@ -0,0 +1,14 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.card {
+  min-width: 0;
+}
+
+.dragCardPreview {
+  cursor: grabbing;
+  border-radius: base.$sn-density-radius-3xs;
+}
+
+.draggableCard {
+  min-width: 0;
+}

package/src/components/MainMenu/hooks/useMainMenuDnd.tsx

@@ -0,0 +1,187 @@
+import {
+  DndContext,
+  DragCancelEvent,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  KeyboardSensor,
+  MeasuringStrategy,
+  Modifier,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+
+import { ServiceCard } from '../helperComponents/ServiceCard';
+import { FavoriteProps, LinksGroup } from '../types';
+import {
+  favoriteListCollisionDetection,
+  flatLinksGroups,
+  getDragReferenceY,
+  isServiceDragId,
+  isServiceFavoriteDragId,
+  isServiceSourceDragId,
+  parseServiceDragId,
+  resolveFavoriteOrderOnDragEnd,
+} from '../utils';
+
+const restrictGroupDragToVerticalAxis: Modifier = 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);
+};
+
+type MainMenuDndOverlayContextValue = {
+  setGroupDragOverlay(overlay: ReactNode): void;
+};
+
+const MainMenuDndOverlayContext = createContext<MainMenuDndOverlayContextValue | null>(null);
+
+export function useMainMenuDndOverlay() {
+  const context = useContext(MainMenuDndOverlayContext);
+
+  return (
+    context ?? {
+      setGroupDragOverlay: () => {},
+    }
+  );
+}
+
+type UseMainMenuDndProps = {
+  favorite?: FavoriteProps;
+
+  /** Все группы карточек из сегментов (для резолва сервисов при DnD в избранное). */
+  groups: LinksGroup[];
+
+  showDescription: boolean;
+};
+
+export function useMainMenuDnd({ favorite, groups, showDescription }: UseMainMenuDndProps) {
+  const [activeServiceId, setActiveServiceId] = useState<string | null>(null);
+  const [groupDragOverlay, setGroupDragOverlay] = useState<ReactNode>(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 }: DragStartEvent) => {
+    if (isServiceSourceDragId(active.id)) {
+      setActiveServiceId(parseServiceDragId(active.id));
+    }
+  }, []);
+
+  const { value: favoriteIds, onChange: onFavoriteChange, onOrderChange: onFavoriteOrderChange } = favorite ?? {};
+
+  const handleDragEnd = useCallback(
+    ({ active, over, delta, activatorEvent }: DragEndEvent) => {
+      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 }: DragCancelEvent) => {
+    if (active && isServiceSourceDragId(active.id)) {
+      setActiveServiceId(null);
+    }
+  }, []);
+
+  const serviceDragOverlay = activeService ? (
+    <ServiceCard service={activeService} showDescription={showDescription} dragPreview />
+  ) : null;
+
+  const dragOverlay = serviceDragOverlay ?? groupDragOverlay;
+
+  const overlayContextValue = useMemo(
+    () => ({
+      setGroupDragOverlay,
+    }),
+    [],
+  );
+
+  return {
+    sensors,
+    modifiers: [restrictGroupDragToVerticalAxis],
+    collisionDetection: favoriteListCollisionDetection,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+    dragOverlay,
+    overlayContextValue,
+  };
+}
+
+export type MainMenuDndContextProps = ReturnType<typeof useMainMenuDnd> & {
+  children: ReactNode;
+};
+
+export function MainMenuDndContext({
+  children,
+  sensors,
+  modifiers,
+  collisionDetection,
+  onDragStart,
+  onDragEnd,
+  onDragCancel,
+  dragOverlay,
+  overlayContextValue,
+}: Partial<MainMenuDndContextProps>) {
+  return (
+    <MainMenuDndOverlayContext.Provider value={overlayContextValue ?? null}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={collisionDetection}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDragCancel={onDragCancel}
+        modifiers={modifiers}
+        measuring={{
+          droppable: { strategy: MeasuringStrategy.Always },
+        }}
+      >
+        {children}
+
+        <DragOverlay dropAnimation={null}>{dragOverlay}</DragOverlay>
+      </DndContext>
+    </MainMenuDndOverlayContext.Provider>
+  );
+}

package/src/components/MainMenu/hooks/useMenuItems.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { LinksGroup, MainMenuProps } from '../types';
+import { dedupeSearchGroups, filterLinksGroupsFuzzy, getLinksGroupVisibleItemsCount, pinGroupToBottom } from '../utils';
+
+type UseMenuItemsProps = Pick<MainMenuProps, 'segments' | 'search' | 'platformGroups'>;
+
+function getVisibleGroups(items: LinksGroup[]) {
+  return items.filter(group => getLinksGroupVisibleItemsCount(group) > 0);
+}
+
+export function useMenuItems({ search, segments, platformGroups = [] }: UseMenuItemsProps) {
+  const { value: searchValue = '', onSearchNoResult } = search || {};
+
+  const searchRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(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: LinksGroup[]) => 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/src/components/MainMenu/index.ts

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