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

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

@@ -0,0 +1,101 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  // gap специально не по макету, компенсируется margin-top у .list
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  padding: base.$sn-primitive-dimension-8 0 0;
+  border-radius: base.$sn-density-radius-2xs;
+
+  background: base.$sn-theme-color-neutral-background1Level;
+}
+
+.header {
+  display: flex;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  width: 100%;
+  padding-inline: base.$sn-primitive-dimension-8;
+}
+
+.segmentControl {
+  flex: 1;
+  min-width: 0;
+}
+
+.listScroll {
+  position: relative;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+
+  &[data-insert-new] {
+    [data-favorite] {
+      fill: base.$sn-theme-color-primary-accent;
+      stroke: base.$sn-theme-color-primary-text;
+    }
+  }
+}
+
+.dropTarget {
+  pointer-events: none;
+  position: absolute;
+  inset: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-8;
+}
+
+.listScrollInner {
+  height: 100%;
+  // 12 карточек + gap + padding-top
+  max-height: calc(
+    ((#{base.$sn-primitive-dimension-32} + #{base.$sn-primitive-dimension-4}) * 12) + #{base.$sn-primitive-dimension-4}
+  );
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  width: 100%;
+  padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-8;
+}
+
+.listEnd {
+  flex-shrink: 0;
+  width: 100%;
+  height: 0;
+}
+
+.card {
+  width: 100%;
+  min-width: 0;
+}
+
+.sortableCard {
+  cursor: grab;
+  min-width: 0;
+}
+
+.skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: stretch;
+
+  width: 100%;
+  padding: base.$sn-primitive-dimension-8;
+}
+
+.skeletonItem {
+  width: 100%;
+  height: base.$sn-primitive-dimension-24;
+  border-radius: base.$sn-density-radius-3xs;
+}

package/src/components/MainMenu/helperComponents/Favorites/utils.ts

@@ -0,0 +1,22 @@
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { MouseEventHandler } from 'react';
+
+import { InnerLink } from '../../types';
+import { getLinkEmblem } from '../../utils';
+
+type FavoriteCardData = Pick<
+  CardServiceLightProps<'a'>,
+  'title' | 'icon' | 'href' | 'onClick' | 'promoTag' | 'tooltip' | 'data-test-id'
+>;
+
+export function getCommonCardProps(service: InnerLink, onClick: MouseEventHandler<HTMLElement>): FavoriteCardData {
+  return {
+    title: service.label,
+    icon: getLinkEmblem(service),
+    href: service.href,
+    onClick,
+    promoTag: service.badge,
+    'data-test-id': `header__drawer-menu__favorite-${service.id}`,
+    tooltip: service.description ? { tip: service.description } : undefined,
+  };
+}

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

@@ -0,0 +1,172 @@
+import { Divider } from '@cloud-ru/ds-divider';
+import { DrawerCustom } from '@cloud-ru/ds-drawer';
+import { List } from '@cloud-ru/ds-list';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { MainMenuDndContext, useMainMenuDnd } from '../../hooks/useMainMenuDnd';
+import { useMenuItems } from '../../hooks/useMenuItems';
+import { MainMenuProps } from '../../types';
+import { Content } from '../Content';
+import { Favorites } from '../Favorites';
+import { MenuHeaderBrand } from '../MenuHeaderBrand';
+import { MountAnimation } from '../MountAnimation';
+import { Search } from '../Search';
+import { MENU_WIDTH_MAX, MENU_WIDTH_MIN } from './constants';
+import styles from './styles.module.scss';
+
+export function MenuDesktop({
+  open: openProp,
+  setOpen: setOpenProp,
+  settingItems,
+  platformGroups,
+  segments,
+  segmentPrefs,
+  activeSegmentId,
+  onActiveSegmentChange,
+  onSegmentOrderChange,
+  onSegmentExpandedChange,
+  favorite,
+  search,
+  preferences,
+  logo,
+  rightTop,
+  leftTop,
+  defaultWidth = MENU_WIDTH_MAX,
+  onWidthChangeEnd,
+  draggerTooltip,
+  loading,
+}: MainMenuProps) {
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  const { scrollRef, resultItems } = useMenuItems({
+    segments,
+    search,
+    platformGroups,
+  });
+
+  const searchRef = useRef<HTMLInputElement>(null);
+  const hasSearch = Boolean(search);
+
+  useEffect(() => {
+    if (!open || !hasSearch) {
+      return;
+    }
+
+    // Панель Drawer'а фокусирует себя сама при открытии (см. useDrawerFocusTrap) —
+    // rAF нужен, чтобы наш фокус на поле поиска применился уже после этого.
+    const frameId = requestAnimationFrame(() => {
+      searchRef.current?.focus();
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [open, hasSearch]);
+
+  const isNeedRightBlock = segments && segments.some(segment => segment.items.length > 0);
+
+  const allServiceGroups = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+
+  const mainMenuDnd = useMainMenuDnd({
+    favorite,
+    groups: allServiceGroups,
+    showDescription: preferences?.showDescription.value ?? false,
+  });
+
+  const handleCloseDrawer = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const menu = (
+    <div className={styles.menu}>
+      <div className={styles.menuHeader}>
+        <MenuHeaderBrand logo={logo} onClose={handleCloseDrawer} className={styles.menuHeaderBrand} />
+
+        {isNeedRightBlock && search && (
+          <>
+            <Divider orientation='vertical' />
+            <Search {...search} ref={searchRef} />
+          </>
+        )}
+      </div>
+      <Divider />
+
+      <div className={styles.menuBody}>
+        <MountAnimation className={styles.left} data-test-id='header__drawer-menu__left' type='slide-right'>
+          {leftTop && <div className={styles.leftTop}>{leftTop}</div>}
+          {isNeedRightBlock && favorite && <Favorites favorite={favorite} allServiceGroups={allServiceGroups} />}
+
+          {Boolean(settingItems?.length) && (
+            <List items={settingItems ?? []} size='m' barHideStrategy='never' className={styles.settingItems} />
+          )}
+        </MountAnimation>
+
+        {isNeedRightBlock && (
+          <>
+            <MountAnimation type='fade-in'>
+              <Divider orientation='vertical' />
+            </MountAnimation>
+
+            <MountAnimation
+              type='fade-slide-up-right'
+              className={styles.right}
+              data-test-id='header__drawer-menu__right'
+            >
+              <Scroll
+                paddingAbsolute
+                className={styles.scroll}
+                ref={scrollRef}
+                barHideStrategy='never'
+                overflow={{ x: 'hidden' }}
+              >
+                <Content
+                  onClose={handleCloseDrawer}
+                  className={styles.rightContent}
+                  searchValue={search?.value}
+                  rightTop={rightTop}
+                  favorite={favorite}
+                  segments={segments}
+                  searchGroups={resultItems}
+                  segmentPrefs={segmentPrefs}
+                  activeSegmentId={activeSegmentId}
+                  onActiveSegmentChange={onActiveSegmentChange}
+                  onSegmentOrderChange={onSegmentOrderChange}
+                  onSegmentExpandedChange={onSegmentExpandedChange}
+                  preferences={preferences}
+                  loading={loading}
+                />
+              </Scroll>
+            </MountAnimation>
+          </>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <DrawerCustom
+      open={open}
+      onClose={handleCloseDrawer}
+      width={isNeedRightBlock ? 'm' : 's'}
+      position='left'
+      className={styles.drawer}
+      rootClassName={styles.drawerRoot}
+      data-test-id='header__drawer-menu'
+      data-small={!isNeedRightBlock || undefined}
+      disableMotions
+      resizable={
+        isNeedRightBlock
+          ? {
+              min: MENU_WIDTH_MIN,
+              max: MENU_WIDTH_MAX,
+              default: Math.min(Math.max(defaultWidth, MENU_WIDTH_MIN), MENU_WIDTH_MAX),
+              onResizeEnd: onWidthChangeEnd,
+              draggerTooltip,
+            }
+          : undefined
+      }
+    >
+      {isNeedRightBlock ? <MainMenuDndContext {...mainMenuDnd}>{menu}</MainMenuDndContext> : menu}
+    </DrawerCustom>
+  );
+}

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

@@ -0,0 +1,6 @@
+export const MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
+
+// паддинг справа 24px у дровера нужно компенсировать
+export const MENU_WIDTH_MIN = 960 + 24;
+
+export const MENU_WIDTH_MAX = 1208 + 24;

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

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

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

@@ -0,0 +1,118 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/divider.module' as divider;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/drawer.module' as drawer;
+
+.drawer {
+  border-radius: drawer.$sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius
+    drawer.$sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius
+    drawer.$sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius
+    drawer.$sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius;
+
+  & [data-test-id='drawer__close-button'] {
+    display: none;
+  }
+
+  svg {
+    fill: currentcolor;
+  }
+}
+
+.scroll {
+  box-sizing: border-box;
+}
+
+.left {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-16;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  width: var(--snack-menu-left-width);
+  min-height: 0;
+  padding: base.$sn-primitive-dimension-16;
+
+  &:has(> :only-child) {
+    justify-content: flex-end;
+  }
+}
+
+.drawerRoot {
+  width: 100%;
+
+  // NOTE: cелектор такой потому, что не получается достучаться до нужной дивки и переопределить стили без !important
+  [data-test-id='header__drawer-menu'][data-small][data-position][data-width] {
+    width: 100%;
+    // NOTE: ширина по макету 264px, но у дровера еще зашит паддинг. Не стал его обнулять
+    max-width: calc(264px + #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight});
+
+    .left {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}
+
+.leftTop {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.settingItems {
+  flex-shrink: 0;
+  height: auto;
+}
+
+.right {
+  position: relative;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  min-width: 0;
+  height: 100%;
+}
+
+.rightContent {
+  container-type: inline-size;
+  overflow-x: clip;
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-4;
+
+  min-width: 0;
+  padding: base.$sn-primitive-dimension-16;
+}
+
+.menu {
+  --snack-menu-header-height: 40px;
+  --snack-menu-left-width: 263px;
+
+  position: relative;
+  height: 100vh;
+  background-color: base.$sn-theme-color-neutral-background;
+}
+
+.menuBody {
+  display: flex;
+  box-sizing: border-box;
+  height: calc(100% - var(--snack-menu-header-height));
+}
+
+.menuHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: var(--snack-menu-header-height);
+}
+
+.menuHeaderBrand {
+  width: var(--snack-menu-left-width);
+  height: var(--snack-menu-header-height);
+  padding: 0 base.$sn-primitive-dimension-4;
+}

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

@@ -0,0 +1,27 @@
+import { Divider } from '@cloud-ru/ds-divider';
+import { ChevronLeftSVG } from '@cloud-ru/ds-icons/interface/system';
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { headerLocale } from '../../../../locale';
+import { HeaderButton } from '../../../HeaderButton';
+import styles from './styles.module.scss';
+
+export type MenuHeaderBrandProps = {
+  logo?: ReactNode;
+  onClose(): void;
+  className?: string;
+};
+
+export function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps) {
+  const { t } = headerLocale.useTranslations();
+
+  return (
+    <div className={cn(styles.container, className)}>
+      {logo}
+      <Divider orientation='vertical' />
+
+      <HeaderButton className={styles.closeButton} onClick={onClose} icon={<ChevronLeftSVG />} label={t('close')} />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,17 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.container {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  background-color: base.$sn-theme-color-neutral-background;
+}
+
+.closeButton {
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: flex-start;
+}

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

@@ -0,0 +1,101 @@
+import { List } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo } from 'react';
+
+import { MobileDrawerCustom } from '../../../../mobileOverlays';
+import { MainMenuDndContext } from '../../hooks/useMainMenuDnd';
+import { useMenuItems } from '../../hooks/useMenuItems';
+import { MainMenuProps } from '../../types';
+import { Content } from '../Content';
+import { Favorites } from '../Favorites';
+import { MenuHeaderBrand } from '../MenuHeaderBrand';
+import { MountAnimation } from '../MountAnimation';
+import { ScrollWithAnimatedStickyPanel } from '../ScrollWithAnimatedStickyPanel';
+import { Search } from '../Search';
+import styles from './styles.module.scss';
+
+const SNAP_POINTS = [1];
+
+export function MenuMobile({
+  open: openProp,
+  setOpen: setOpenProp,
+  settingItems,
+  platformGroups,
+  segments,
+  segmentPrefs,
+  activeSegmentId,
+  onActiveSegmentChange,
+  onSegmentOrderChange,
+  onSegmentExpandedChange,
+  favorite,
+  search,
+  logo,
+  rightTop,
+  leftTop,
+  loading,
+}: MainMenuProps) {
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  const hasSegments = segments && segments.some(segment => segment.items.length > 0);
+
+  const isSearching = Boolean(search?.value);
+
+  const { searchRef, resultItems } = useMenuItems({
+    segments,
+    search,
+    platformGroups,
+  });
+
+  const allServiceGroups = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <MobileDrawerCustom
+      open={open}
+      onClose={handleClose}
+      position='bottom'
+      className={styles.drawerMobile}
+      swipeEnabled={false}
+      data-test-id='header__drawer-menu-mobile'
+      closeOnPopstate
+      snapPoints={SNAP_POINTS}
+      disableMotions={true}
+    >
+      <ScrollWithAnimatedStickyPanel
+        panel={<MenuHeaderBrand logo={logo} onClose={handleClose} className={styles.menuHeader} />}
+      >
+        <MountAnimation className={styles.scrollMobile} type='fade-slide-up'>
+          {search && <Search {...search} ref={searchRef} isMobile />}
+          {favorite && <Favorites favorite={favorite} allServiceGroups={allServiceGroups} isMobile />}
+          {leftTop && <div className={styles.rightContent}>{leftTop}</div>}
+
+          {hasSegments && (
+            <MainMenuDndContext>
+              <Content
+                isMobile
+                onClose={handleClose}
+                className={styles.rightContent}
+                searchValue={search && search.value}
+                rightTop={rightTop}
+                favorite={favorite}
+                segments={segments}
+                searchGroups={resultItems}
+                segmentPrefs={segmentPrefs}
+                activeSegmentId={activeSegmentId}
+                onActiveSegmentChange={onActiveSegmentChange}
+                onSegmentOrderChange={onSegmentOrderChange}
+                onSegmentExpandedChange={onSegmentExpandedChange}
+                loading={loading}
+              />
+            </MainMenuDndContext>
+          )}
+
+          {!isSearching && settingItems && <List items={settingItems} size='m' barHideStrategy='never' />}
+        </MountAnimation>
+      </ScrollWithAnimatedStickyPanel>
+    </MobileDrawerCustom>
+  );
+}

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

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

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

@@ -0,0 +1,32 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$menuHeaderHeight: base.$sn-primitive-dimension-40;
+
+.menuHeader {
+  height: $menuHeaderHeight;
+  padding: 0 base.$sn-primitive-dimension-4;
+  border-bottom: 1px solid base.$sn-theme-color-neutral-decor;
+}
+
+.rightContent {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+  min-width: 0;
+}
+
+.drawerMobile {
+  // NOTE: по умолчанию у BottomSheet другой цвет бэкграунда
+  /* stylelint-disable-next-line declaration-no-important */
+  background-color: base.$sn-theme-color-neutral-background !important;
+}
+
+.scrollMobile {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+
+  min-height: 100%;
+  margin-top: $menuHeaderHeight;
+  padding: base.$sn-primitive-dimension-16;
+}

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

@@ -0,0 +1,20 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import styles from './styles.module.scss';
+
+export type MountAnimationProps = PropsWithChildren<
+  WithSupportProps<{
+    type?: 'fade-slide-up' | 'fade-slide-up-right' | 'slide-right' | 'fade-in';
+    className?: string;
+  }>
+>;
+
+export function MountAnimation({ children, type = 'slide-right', className, ...props }: MountAnimationProps) {
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(props)} data-animation-type={type}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { MountAnimation } from './MountAnimation';