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

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

@@ -0,0 +1,75 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.closeButton {
+  position: absolute;
+  top: base.$sn-primitive-dimension-4;
+  right: base.$sn-primitive-dimension-4;
+
+  @media (hover: hover) {
+    visibility: hidden;
+  }
+}
+
+.root {
+  position: relative;
+
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: base.$sn-primitive-dimension-48;
+  padding: 0 base.$sn-primitive-dimension-12;
+  border-radius: base.$sn-density-radius-2xs;
+
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  text-decoration: none;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+
+  &:hover,
+  &:focus-visible,
+  &:focus-within {
+    .closeButton {
+      visibility: visible;
+    }
+  }
+
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+  }
+}
+
+.titleWrapper {
+  display: flex;
+  flex: 1 1 auto;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  min-width: 0;
+}
+
+.title {
+  overflow: hidden;
+  flex-shrink: 1;
+
+  min-width: 0;
+
+  color: base.$sn-theme-color-available-version-textMain;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.afterTitle {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,267 @@
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { SearchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { MouseEvent, ReactNode, useCallback, useDeferredValue, useEffect, useMemo } from 'react';
+
+import { headerLocale } from '../../../../locale';
+import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab';
+import {
+  FavoriteProps,
+  LinksGroup,
+  MainMenuPreferencesProps,
+  MainMenuSegment,
+  MainMenuSegmentPrefs,
+} from '../../types';
+import { getLinksGroupVisibleItemsCount, resolveGroupBlockColor } from '../../utils';
+import { ContentToolbar } from './helperComponents/ContentToolbar';
+import { SortableGroup, SortableGroupSkeleton } from './helperComponents/SortableGroup';
+import { useContentSegmentsSortable } from './hooks/useContentSegmentsSortable';
+import { useSegmentDnd } from './hooks/useSegmentDnd';
+import styles from './styles.module.scss';
+
+export type ContentProps = {
+  segments: MainMenuSegment[];
+
+  /** Результаты поиска (уже смерженные); в обычном режиме не используются. */
+  searchGroups?: LinksGroup[];
+
+  segmentPrefs?: MainMenuSegmentPrefs[];
+
+  /**
+   * Активный сегмент правой панели. Не передано — неуправляемое состояние
+   * (дефолт — первый сегмент с видимыми карточками).
+   */
+  activeSegmentId?: string;
+
+  /** Колбэк смены активного сегмента правой панели. */
+  onActiveSegmentChange?(segmentId: string): void;
+
+  onSegmentOrderChange?(segmentId: string, orderedGroupIds: string[]): void;
+
+  onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+
+  favorite?: FavoriteProps;
+
+  preferences?: MainMenuPreferencesProps;
+
+  searchValue?: string;
+
+  search?: ReactNode;
+
+  /** Слот над тулбаром правой колонки (например, баннеры) */
+  rightTop?: ReactNode;
+
+  footer?: ReactNode;
+
+  isMobile?: boolean;
+
+  onClose?(): void;
+
+  className?: string;
+  /** Флаг загрузки данных */
+  loading?: boolean;
+};
+
+export function Content({
+  searchValue,
+  search,
+  rightTop,
+  segments,
+  searchGroups = [],
+  segmentPrefs,
+  activeSegmentId,
+  onActiveSegmentChange,
+  onSegmentOrderChange,
+  onSegmentExpandedChange,
+  className,
+  footer,
+  favorite,
+  isMobile,
+  onClose,
+  preferences,
+  loading,
+}: ContentProps) {
+  const { t } = headerLocale.useTranslations();
+
+  const showDescription = useDeferredValue(preferences?.showDescription.value ?? false);
+
+  const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
+
+  const visibleSegments = useMemo(
+    () => segments.filter(segment => segment.items.some(group => getLinksGroupVisibleItemsCount(group) > 0)),
+    [segments],
+  );
+
+  const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
+
+  const [segmentId = defaultSegmentId, setSegmentId] = useValueControl<string>({
+    value: activeSegmentId,
+    defaultValue: defaultSegmentId,
+    onChange: onActiveSegmentChange,
+  });
+
+  const isSearching = Boolean(searchValue);
+  const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
+
+  useEffect(() => {
+    if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+      setSegmentId(defaultSegmentId);
+    }
+  }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
+
+  const handleLinkClick = useCallback(
+    (
+      { disabled, onClick }: { disabled?: boolean; onClick?(e?: MouseEvent<HTMLElement>): void },
+      e?: MouseEvent<HTMLElement>,
+    ) => {
+      if (disabled) {
+        e?.preventDefault();
+        return;
+      }
+
+      if (!shouldBeOpenedInNewTab(e)) {
+        e?.preventDefault();
+        onClose?.();
+      }
+
+      onClick?.(e);
+    },
+    [onClose],
+  );
+
+  const {
+    orderedGroups,
+    expandedIds,
+    onExpandedChange,
+    handleDragEnd: handleSortableDragEnd,
+  } = useContentSegmentsSortable({
+    segments,
+    activeSegmentId: segmentId,
+    isSearching,
+    searchGroups,
+    segmentPrefsById,
+    onSegmentOrderChange,
+    onSegmentExpandedChange,
+    disabled: isSearching,
+    isMobile,
+  });
+
+  const visibleGroups = useMemo(
+    () => orderedGroups.filter(group => getLinksGroupVisibleItemsCount(group) > 0),
+    [orderedGroups],
+  );
+
+  useSegmentDnd({
+    visibleGroups,
+    expandedIds,
+    onSortableDragEnd: handleSortableDragEnd,
+    showDescription,
+    showGroupsColors: preferences?.showGroupsColors?.value,
+    favorite,
+  });
+
+  const allGroupsExpanded = visibleGroups.length > 0 && visibleGroups.every(({ id }) => expandedIds.includes(id));
+
+  const handleToggleAllGroupsExpanded = useCallback(() => {
+    const visibleIds = visibleGroups.map(({ id }) => id);
+
+    if (allGroupsExpanded) {
+      onExpandedChange(expandedIds.filter(id => !visibleIds.includes(id)));
+      return;
+    }
+
+    onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
+  }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
+
+  const segmentItems = useMemo(
+    () =>
+      visibleSegments.map(segment => ({
+        value: segment.id,
+        label: segment.label,
+        icon: segment.icon,
+      })),
+    [visibleSegments],
+  );
+
+  const hasCards = visibleGroups.length > 0;
+
+  const cards = (() => {
+    if (loading) {
+      return Array.from({ length: 5 }).map((_, index) => <SortableGroupSkeleton key={index} isMobile={isMobile} />);
+    }
+
+    if (hasCards) {
+      return (
+        <SortableContext items={visibleGroups.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
+          <Accordion selectionMode='multiple' expanded={expandedIds} onExpandedChange={onExpandedChange}>
+            {visibleGroups.map(({ id, label, items, favoritesEnabled = true, blockColor, highlight }) => (
+              <SortableGroup
+                key={id}
+                id={id}
+                label={label}
+                items={items}
+                isExpanded={expandedIds.includes(id)}
+                blockColor={resolveGroupBlockColor(blockColor, preferences?.showGroupsColors?.value)}
+                showDescription={showDescription}
+                isMobile={isMobile}
+                enableServiceDrag={enableServiceDrag}
+                favorite={favoritesEnabled ? favorite : undefined}
+                onServiceClick={handleLinkClick}
+                highlight={highlight}
+              />
+            ))}
+          </Accordion>
+        </SortableContext>
+      );
+    }
+
+    return (
+      <InfoBlock
+        size='m'
+        icon={{
+          icon: SearchSVG,
+          appearance: 'neutral',
+        }}
+        content={isSearching ? t('noDataFound') : t('noData')}
+        data-test-id={isSearching ? 'header__drawer-menu__no-data-found' : 'header__drawer-menu__no-data'}
+      />
+    );
+  })();
+
+  return (
+    <>
+      {search}
+
+      <div
+        className={cn(styles.content, className)}
+        data-mobile={isMobile || undefined}
+        data-empty={!hasCards || undefined}
+      >
+        {!isSearching && (
+          <>
+            {isMobile && rightTop}
+
+            <ContentToolbar
+              segment={segmentId}
+              onSegmentChange={setSegmentId}
+              segmentItems={segmentItems}
+              allGroupsExpanded={allGroupsExpanded}
+              onToggleAllGroupsExpanded={handleToggleAllGroupsExpanded}
+              preferences={preferences}
+              isMobile={isMobile}
+            />
+
+            {!isMobile && rightTop}
+          </>
+        )}
+
+        {cards}
+
+        {footer}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,9 @@
+export const TEST_IDS = {
+  toolbar: 'header__drawer-menu__content-toolbar',
+  segmentControl: 'header__drawer-menu__content-segment',
+  toggleAllGroups: 'header__drawer-menu__content-toggle-all-groups',
+  settingsButton: 'header__drawer-menu__content-settings-button',
+  settingsModal: 'header__drawer-menu__content-settings-modal',
+  settingsShowGroupsColorsSwitch: 'header__drawer-menu__content-settings-show-groups-colors-switch',
+  settingsShowDescriptionSwitch: 'header__drawer-menu__content-settings-show-description-switch',
+} as const;

package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.tsx

@@ -0,0 +1,136 @@
+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 { ReactNode, startTransition } from 'react';
+
+import { headerLocale } from '../../../../../../locale';
+import { HeaderButton } from '../../../../../HeaderButton';
+import { MainMenuPreferencesProps } from '../../../../types';
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type ContentToolbarSegmentItem = {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+};
+
+export type ContentToolbarProps = {
+  segment: string;
+
+  onSegmentChange(segment: string): void;
+
+  segmentItems: ContentToolbarSegmentItem[];
+
+  allGroupsExpanded: boolean;
+
+  onToggleAllGroupsExpanded(): void;
+
+  /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
+  preferences?: MainMenuPreferencesProps;
+
+  isMobile?: boolean;
+};
+
+export function ContentToolbar({
+  segment,
+  onSegmentChange,
+  segmentItems,
+  allGroupsExpanded,
+  onToggleAllGroupsExpanded,
+  preferences,
+  isMobile,
+}: ContentToolbarProps) {
+  const { t } = headerLocale.useTranslations();
+  const [open = false, setOpen] = useValueControl<boolean>({
+    value: preferences?.open,
+    onChange: preferences?.onOpenChange,
+  });
+
+  const closeModal = () => setOpen(false);
+  const openModal = () => setOpen(true);
+
+  const handleShowDescriptionChange = (value: boolean) => {
+    startTransition(() => preferences?.showDescription?.onChange(value));
+  };
+
+  const hasSegmentItems = segmentItems.length > 0;
+
+  return (
+    <div className={styles.root} data-test-id={TEST_IDS.toolbar}>
+      {hasSegmentItems && (
+        <SegmentControl
+          size='m'
+          outline
+          value={segment}
+          onChange={onSegmentChange}
+          className={styles.segmentControl}
+          data-test-id={TEST_IDS.segmentControl}
+          items={segmentItems}
+          width={isMobile ? 'full' : 'auto'}
+        />
+      )}
+
+      {(preferences || !isMobile) && (
+        <div className={styles.actions}>
+          {preferences && (
+            <>
+              <Button
+                view='simple'
+                size='m'
+                appearance='neutral'
+                icon={<SettingsSVG />}
+                aria-label={t('menuSettingsTitle')}
+                data-test-id={TEST_IDS.settingsButton}
+                onClick={openModal}
+              />
+
+              <Modal
+                open={open}
+                onClose={closeModal}
+                title={t('menuSettingsTitle')}
+                data-test-id={TEST_IDS.settingsModal}
+                cancelButton={{
+                  label: t('close'),
+                  onClick: closeModal,
+                }}
+                content={
+                  <div className={styles.settingsContent}>
+                    {preferences.showGroupsColors && (
+                      <SwitchRow
+                        title={t('menuSettingsShowGroupsColors')}
+                        checked={preferences.showGroupsColors.value}
+                        onChange={preferences.showGroupsColors.onChange}
+                        data-test-id={TEST_IDS.settingsShowGroupsColorsSwitch}
+                      />
+                    )}
+
+                    <SwitchRow
+                      title={t('menuSettingsShowDescription')}
+                      checked={preferences.showDescription.value}
+                      onChange={handleShowDescriptionChange}
+                      data-test-id={TEST_IDS.settingsShowDescriptionSwitch}
+                    />
+                  </div>
+                }
+              />
+            </>
+          )}
+
+          {!isMobile && (
+            <HeaderButton
+              icon={allGroupsExpanded ? <CollapseVerticalSVG /> : <ExpandVerticalSVG />}
+              aria-label={allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups')}
+              data-test-id={TEST_IDS.toggleAllGroups}
+              onClick={onToggleAllGroupsExpanded}
+              tooltip={{ tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') }}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,31 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: space-between;
+
+  min-width: 0;
+  min-height: base.$sn-primitive-dimension-32;
+}
+
+.segmentControl {
+  flex-shrink: 0;
+}
+
+.actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  margin-left: auto;
+}
+
+.settingsContent {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+  width: 100%;
+}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.tsx

@@ -0,0 +1,131 @@
+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 { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types';
+import { SortableGroupCards, SortableGroupCardsProps, SortableGroupHeader } from './components';
+import styles from './styles.module.scss';
+
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & {
+  id: string;
+
+  label: LinksGroupTitle;
+
+  isExpanded?: boolean;
+
+  blockColor?: LinksGroupBlockColor;
+
+  highlight?: boolean;
+};
+
+export function SortableGroup({
+  id,
+  label,
+  items,
+  isExpanded,
+  showDescription,
+  isMobile,
+  enableServiceDrag,
+  favorite,
+  onServiceClick,
+  blockColor,
+  highlight,
+}: SortableGroupProps) {
+  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 (
+    <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}`}
+    >
+      <div className={styles.decoration} data-color-scheme={colorScheme} data-is-highlighted={highlight || undefined}>
+        <div className={styles.decorationBackground}>
+          <div className={styles.colorMarker} data-block-color={blockColor} />
+        </div>
+      </div>
+      <Accordion.CollapseBlockTertiary
+        id={id}
+        showChevron={false}
+        afterTitle={
+          <SortableGroupHeader
+            label={label}
+            isExpanded={isExpanded}
+            enableServiceDrag={enableServiceDrag}
+            attributes={attributes}
+            listeners={listeners}
+            isMobile={isMobile}
+          />
+        }
+      >
+        <SortableGroupCards
+          groupId={id}
+          items={items}
+          showDescription={showDescription}
+          isMobile={isMobile}
+          enableServiceDrag={enableServiceDrag}
+          favorite={favorite}
+          onServiceClick={onServiceClick}
+        />
+      </Accordion.CollapseBlockTertiary>
+    </DragGhost>
+  );
+}
+
+export function SortableGroupDragPreview({
+  id,
+  label,
+  items,
+  isExpanded,
+  showDescription,
+  isMobile,
+  favorite,
+  blockColor,
+  highlight,
+}: Omit<SortableGroupProps, 'enableServiceDrag'>) {
+  const { colorScheme } = useThemeAppearance().appearance;
+
+  return (
+    <DragPreview className={styles.groupDragPreview}>
+      <div className={styles.group} data-drag-preview={true} data-block-color={blockColor}>
+        <div className={styles.decoration} data-color-scheme={colorScheme} data-is-highlighted={highlight || undefined}>
+          <div className={styles.decorationBackground}>
+            <div className={styles.colorMarker} data-block-color={blockColor} />
+          </div>
+        </div>
+
+        <SortableGroupHeader label={label} isExpanded={isExpanded} isMobile={isMobile} enableServiceDrag />
+
+        {isExpanded && (
+          <SortableGroupCards
+            groupId={id}
+            items={items}
+            showDescription={showDescription}
+            isMobile={isMobile}
+            favorite={favorite}
+          />
+        )}
+      </div>
+    </DragPreview>
+  );
+}