@cloud-ru/ds-drawer 1.0.0

package/src/components/DrawerCustom/styles.module.scss

@@ -0,0 +1,330 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/drawer.module' as drawer;
+// Отступ close-кнопки — общий токен «window»-поверхности из коллекции popupPrivate
+// (она несёт и padding ×4, и min-size/border-radius кнопки).
+@use '@cloud-ru/ds-figma-variables/build/scss/components/popupPrivate.module' as popupPrivate;
+@use '@cloud-ru/ds-materials' as m;
+
+$widthSizes: 's', 'm', 'l';
+$draggerWidth: base.$sn-primitive-dimension-4;
+$draggerPosition: calc(drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight - $draggerWidth - base.$sn-primitive-dimension-6);
+$activeDraggerHeight: calc(base.$sn-primitive-dimension-32 + base.$sn-primitive-dimension-24);
+
+// placement → offscreen transform для panelMotion-*
+$panelMotions: (
+  'left': translateX(-100%),
+  'right': translateX(100%),
+  'top': translateY(-100%),
+  'bottom': translateY(100%),
+);
+
+.drawerRoot:global(.snack-rc-drawer) {
+  pointer-events: none;
+
+  position: fixed;
+  z-index: initial;
+  inset: 0;
+
+  overflow: hidden;
+
+  transition: width 0s ease 0.3s, height 0s ease 0.3s, transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+
+  &:global(> *) {
+    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  }
+
+  &:global(.snack-rc-drawer-open) {
+    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  }
+
+  :global {
+    .snack-rc-drawer-mask {
+      pointer-events: auto;
+
+      position: absolute;
+      z-index: initial;
+      inset: 0;
+
+      opacity: 1;
+      background-color: base.$sn-theme-color-blackout;
+
+      transition: opacity 0.2s;
+
+      &.maskMotion-enter,
+      &.maskMotion-appear {
+        opacity: 0;
+      }
+
+      &.maskMotion-enter-active,
+      &.maskMotion-appear-active {
+        opacity: 1;
+      }
+
+      &.maskMotion-leave {
+        opacity: 1;
+        transition: opacity 0.1s;
+      }
+
+      &.maskMotion-leave-active {
+        opacity: 0;
+      }
+    }
+
+    .snack-rc-drawer-section {
+      pointer-events: auto;
+
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+
+      box-sizing: border-box;
+      width: 100%;
+      // Тень панели из макета (`elevation-level5`). Раньше правило висело на `&:global(...)`,
+      // то есть требовало оба класса на одном узле, и не срабатывало никогда.
+      box-shadow: base.$sn-boxShadow-elevation-level5;
+    }
+
+    .snack-rc-drawer-content-wrapper {
+      pointer-events: none;
+      will-change: transform;
+
+      position: absolute;
+      z-index: initial;
+
+      overflow: unset;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      max-width: 100%;
+
+      background: none;
+      box-shadow: none;
+
+      transition: transform 0.2s ease-in-out;
+
+      &[data-position='top'] {
+        @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionTop');
+
+        .snack-rc-drawer-section {
+          @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionTop', 'container');
+        }
+      }
+
+      &[data-position='bottom'] {
+        bottom: 0;
+
+        @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionBottom');
+
+        .snack-rc-drawer-section {
+          @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionBottom', 'container');
+        }
+      }
+
+      &[data-position='left'] {
+        top: 0;
+        bottom: 0;
+        left: 0;
+
+        @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionLeft');
+
+        .snack-rc-drawer-section {
+          @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionLeft', 'container');
+        }
+      }
+
+      &[data-position='right'] {
+        top: 0;
+        right: 0;
+        bottom: 0;
+
+        @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionRight');
+
+        .snack-rc-drawer-section {
+          @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionRight', 'container');
+        }
+      }
+
+      &[data-position='left'],
+      &[data-position='right'] {
+        align-items: stretch;
+        // Ширина в макете — это ширина самой панели; горизонтальный паддинг обёртки
+        // (зона перетаскивания) лежит снаружи и не должен её сужать.
+        box-sizing: content-box;
+        height: 100%;
+
+        @each $width in $widthSizes {
+          &[data-width='#{$width}'] {
+            @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'width', 'container', $width);
+
+            width: min(100%, base.simple-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'width', 'container', $width, 'max-width'));
+          }
+        }
+      }
+
+      &[data-position='top'],
+      &[data-position='bottom'] {
+        width: 100%;
+        height: 100%;
+      }
+
+      &[data-position='top'][data-height-auto],
+      &[data-position='bottom'][data-height-auto] {
+        height: auto;
+        max-height: 100%;
+      }
+
+      &[data-position='top'][data-height-auto] {
+        inset: 0 0 auto;
+      }
+
+      &[data-position='bottom'][data-height-auto] {
+        inset: auto 0 0;
+      }
+
+      @each $placement, $offscreen in $panelMotions {
+        &.panelMotion-#{$placement}-enter,
+        &.panelMotion-#{$placement}-appear {
+          transform: $offscreen;
+        }
+
+        &.panelMotion-#{$placement}-enter-active,
+        &.panelMotion-#{$placement}-appear-active {
+          transform: translate(0);
+        }
+
+        &.panelMotion-#{$placement}-leave {
+          transform: translate(0);
+        }
+
+        &.panelMotion-#{$placement}-leave-active {
+          transform: $offscreen;
+          transition: transform 0.1s ease-out;
+        }
+      }
+    }
+
+    .snack-rc-drawer-content-wrapper-hidden {
+      display: none;
+    }
+
+    .snack-rc-drawer-resizable-dragger {
+      pointer-events: auto;
+      cursor: ew-resize;
+
+      position: absolute;
+      z-index: 2;
+      top: 50%;
+      transform: translateY(-50%);
+
+      width: $draggerWidth;
+      height: base.$sn-primitive-dimension-32;
+      border-radius: base.$sn-density-radius-2xs;
+
+      background-color: base.$sn-theme-color-neutral-decor;
+
+      transition: height ease-in-out 0.2s;
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        width: calc(100% + base.$sn-primitive-dimension-12);
+        height: 100vh;
+      }
+
+      &:hover {
+        height: $activeDraggerHeight;
+      }
+    }
+
+    .snack-rc-drawer-resizable-dragger-left {
+      right: $draggerPosition;
+    }
+
+    .snack-rc-drawer-resizable-dragger-right {
+      left: $draggerPosition;
+    }
+  }
+
+  &:global(.snack-rc-drawer-left),
+  &:global(.snack-rc-drawer-right) {
+    top: 0;
+    width: 0%;
+    height: 100%;
+  }
+
+  &:global(.snack-rc-drawer-left) {
+    left: 0;
+  }
+
+  &:global(.snack-rc-drawer-right) {
+    right: 0;
+  }
+
+  &:global(.snack-rc-drawer-top),
+  &:global(.snack-rc-drawer-bottom) {
+    left: 0;
+    width: 100%;
+    height: 0%;
+  }
+
+  &:global(.snack-rc-drawer-top) {
+    top: 0;
+  }
+
+  &:global(.snack-rc-drawer-bottom) {
+    bottom: 0;
+  }
+
+  &:has(:global(.snack-rc-drawer-resizable-dragger-dragging)) {
+    cursor: ew-resize;
+
+    :global(.snack-rc-drawer-resizable-dragger) {
+      height: $activeDraggerHeight;
+    }
+  }
+
+
+  &:global(.snack-rc-drawer-left.snack-rc-drawer-open),
+  &:global(.snack-rc-drawer-right.snack-rc-drawer-open) {
+    width: 100%;
+  }
+
+  &:global(.snack-rc-drawer-top.snack-rc-drawer-open),
+  &:global(.snack-rc-drawer-bottom.snack-rc-drawer-open) {
+    height: 100%;
+  }
+}
+
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper) {
+  @include m.with-material('acrylic', #{drawer});
+}
+
+.focusScope {
+  display: contents;
+}
+
+.showButtonClosed {
+  margin: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'badgeButtonClosed', 'padding-top') base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'badgeButtonClosed', 'padding-right') base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'badgeButtonClosed', 'padding-bottom') base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'badgeButtonClosed', 'padding-left');
+}
+
+.showButtonClosedWrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 0;
+  height: 0;
+}

package/src/components/DrawerCustom/types.ts

@@ -0,0 +1,77 @@
+import { BottomSheetCustomProps } from '@cloud-ru/ds-bottom-sheet';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { DrawerProps as RcDrawerProps } from '@rc-component/drawer';
+import { PropsWithChildren, ReactElement } from 'react';
+
+import { Position, Width } from '../../types';
+
+export type DrawerCustomProps = WithSupportProps<
+  PropsWithChildren<{
+    /** Управление состоянием показан/не показан. */
+    open: boolean;
+    /** Колбэк закрытия */
+    onClose(): void;
+    /**
+     * Отображение темной подложки
+     * @default true
+     */
+    showBlackout?: boolean;
+    /**
+     * Отображение кнопки закрытия в шапке дровера
+     * @default true
+     */
+    showButtonClosed?: boolean;
+    /**
+     * Расположение
+     */
+    position: Position;
+    /**
+     * Ширина (только при position: "left" | "right")
+     * @default 's'
+     */
+    width?: Width | string | number;
+    /**
+     * Высота панели по контенту (только при `position: "top" | "bottom"`).
+     * @default false
+     */
+    heightAuto?: boolean;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** CSS-класс для корневого элемента */
+    rootClassName?: string;
+    /** Смещение при открытии "вложенного" компонента */
+    push?: RcDrawerProps['push'];
+    /** Контейнер в котором будет рендерится Drawer. По-умолчанию - body */
+    container?: string | HTMLElement;
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<Omit<DrawerCustomProps, 'resizable'>>;
+    /** Закрывать дровер при перемещении по истории браузера */
+    closeOnPopstate?: boolean;
+    /** Футер */
+    footer?: ReactElement;
+    /** Отключить анимации
+     * @default false
+     */
+    disableMotions?: boolean;
+    /**
+     * Ширина (только при position: "left" | "right")
+     * @default 's'
+     */
+    resizable?: {
+      /** Минимальная доступная ширина */
+      min: number;
+      /** Максимальная доступная ширина */
+      max?: number;
+      /** Ширина по умолчанию */
+      default?: number;
+      /** Колбэк на изменение размера */
+      onResize?: (width: number) => void;
+      /** Колбэк на окончание изменения размера */
+      onResizeEnd?: (width: number) => void;
+      /** Tooltip для элемента dragger */
+      draggerTooltip?: string;
+    };
+  }>
+> &
+  // Только mobile: управляют sheet-поверхностью (на desktop игнорируются).
+  Pick<BottomSheetCustomProps, 'snapPoints' | 'swipeEnabled' | 'safeArea'>;

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+export * from './DrawerCustom';

package/src/constants.ts

@@ -0,0 +1,31 @@
+export const TEST_IDS = {
+  closeButton: 'drawer__close-button',
+  header: 'drawer__header',
+  title: 'drawer__title',
+  image: 'drawer__image',
+  tooltip: 'drawer__title-tooltip',
+  subtitle: 'drawer__subtitle',
+  body: 'drawer__body',
+  footer: 'drawer__footer',
+  footerApprove: 'drawer__footer-approve',
+  footerCancel: 'drawer__footer-cancel',
+  footerAdditional: 'drawer__footer-additional',
+  nestedDrawer: 'drawer__nested',
+  overlay: 'drawer__overlay',
+  contentWrapper: 'drawer__content-wrapper',
+} as const;
+
+export const WIDTH = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const WIDTH_AS_VALUES: string[] = Object.values(WIDTH);
+
+export const POSITION = {
+  Left: 'left',
+  Right: 'right',
+  Top: 'top',
+  Bottom: 'bottom',
+} as const;

package/src/helperComponents/DesktopDrawer/DesktopDrawer.tsx

@@ -0,0 +1,85 @@
+import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
+import cn from 'classnames';
+
+import { NESTED_DRAWER_PUSH_DISTANCE } from '../../components/Drawer/constants';
+import styles from '../../components/Drawer/styles.module.scss';
+import { DrawerProps } from '../../components/Drawer/types';
+import { DrawerCustom } from '../../components/DrawerCustom';
+import { TEST_IDS } from '../../constants';
+
+/** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
+export function DesktopDrawer({
+  content,
+  media,
+  title,
+  slotAfterTitle,
+  subtitle,
+  onBackButtonClick,
+  approveButton,
+  cancelButton,
+  additionalButton,
+  footerActionsOrientation,
+  footer,
+  nestedDrawer,
+  className,
+  ...rest
+}: DrawerProps) {
+  const showHeader = Boolean(title || subtitle || slotAfterTitle);
+  // Футер: произвольный `footer` (приоритет) либо сборка из слотов через общий `FooterActions`.
+  const footerContent =
+    footer ??
+    (approveButton || cancelButton || additionalButton ? (
+      <FooterActions
+        surface='window'
+        size='l'
+        approveButton={approveButton}
+        cancelButton={cancelButton}
+        additionalButton={additionalButton}
+        footerActionsOrientation={footerActionsOrientation}
+        testIds={{
+          approve: TEST_IDS.footerApprove,
+          cancel: TEST_IDS.footerCancel,
+          additional: TEST_IDS.footerAdditional,
+        }}
+      />
+    ) : null);
+
+  return (
+    <DrawerCustom
+      {...rest}
+      resizable={undefined}
+      className={cn(styles.drawer, className)}
+      push={Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }}
+    >
+      {media}
+
+      <div className={styles.safeAreaTop} />
+
+      {showHeader && (
+        <DrawerCustom.Header
+          title={title}
+          slotAfterTitle={slotAfterTitle}
+          subtitle={subtitle}
+          onBackButtonClick={onBackButtonClick}
+          // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
+          // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
+          testIds={{
+            header: TEST_IDS.header,
+            title: TEST_IDS.title,
+            subtitle: TEST_IDS.subtitle,
+          }}
+        />
+      )}
+
+      <DrawerCustom.Body data-test-id={TEST_IDS.body} content={content} />
+
+      <div className={styles.safeAreaBottom} />
+
+      {footerContent != null && (
+        <DrawerCustom.Footer data-test-id={TEST_IDS.footer}>{footerContent}</DrawerCustom.Footer>
+      )}
+
+      {nestedDrawer}
+    </DrawerCustom>
+  );
+}

package/src/helperComponents/DesktopDrawer/index.ts

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

package/src/helperComponents/DialogSlots.tsx

@@ -0,0 +1,25 @@
+import {
+  OVERLAY_SURFACE,
+  SheetBody,
+  SheetFooter,
+  SheetFooterProps,
+  SheetHeader,
+  SheetHeaderProps,
+  useOverlaySurface,
+} from '@cloud-ru/ds-bottom-sheet';
+
+import { DrawerBody, DrawerBodyProps } from './DrawerBody';
+
+// Header и Footer surface-aware реализует сам `PopupHeader`/`PopupFooter` (`SheetHeader`/`SheetFooter`):
+// он читает `OverlaySurfaceProvider` и рисует window-раскладку на drawer, bottomSheet — на sheet.
+// Свап остаётся только для Body (desktop-frame vs sheet).
+export type DialogHeaderProps = SheetHeaderProps;
+export type DialogBodyProps = DrawerBodyProps;
+export type DialogFooterProps = SheetFooterProps;
+
+export const DialogHeader = SheetHeader;
+export const DialogFooter = SheetFooter;
+
+export function DialogBody(props: DialogBodyProps) {
+  return useOverlaySurface() === OVERLAY_SURFACE.Sheet ? <SheetBody {...props} /> : <DrawerBody {...props} />;
+}

package/src/helperComponents/DrawerBody/DrawerBody.tsx

@@ -0,0 +1,25 @@
+import { SheetBodyProps, useOverlayBodyHeightAuto } from '@cloud-ru/ds-bottom-sheet';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import styles from './styles.module.scss';
+
+export type DrawerBodyProps = SheetBodyProps;
+
+/** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
+export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }: DrawerBodyProps) {
+  const heightAutoVertical = useOverlayBodyHeightAuto();
+
+  return (
+    <Scroll
+      size='m'
+      barHideStrategy='never'
+      className={cn(styles.body, heightAutoVertical && styles.bodyHeightAuto, className)}
+      data-no-padding={bodyPadding === false || undefined}
+      {...extractSupportProps(rest)}
+    >
+      {children ?? content}
+    </Scroll>
+  );
+}

package/src/helperComponents/DrawerBody/index.ts

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

package/src/helperComponents/DrawerBody/styles.module.scss

@@ -0,0 +1,32 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/drawer.module' as drawer;
+
+// Ветка surface='drawer' (1:1 из `@cloud-ru/ds-drawer` Body).
+.body {
+  @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'bodyWrapper');
+
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  box-sizing: border-box;
+
+  color: base.$sn-theme-color-available-version-textMain;
+
+  @include base.composite-var(base.$sn-regular-body-m);
+}
+
+.body[data-no-padding] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+/* heightAuto + top/bottom: высота по контенту, при переполнении — flex-скролл. */
+.bodyHeightAuto {
+  flex: 0 1 auto;
+  height: auto !important; /* stylelint-disable-line declaration-no-important */
+  min-height: 0;
+  max-height: 100%;
+}

package/src/helperComponents/MobileDrawer/MobileDrawer.tsx

@@ -0,0 +1,75 @@
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+
+import { DrawerProps } from '../../components/Drawer/types';
+import { TEST_IDS } from '../../constants';
+
+/**
+ * Mobile-поверхность Drawer'а: контент в `BottomSheet`, слоты маппятся на API sheet'а
+ * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
+ * уходят в `...rest`.
+ */
+export function MobileDrawer({
+  content,
+  media,
+  title,
+  slotAfterTitle,
+  subtitle,
+  onBackButtonClick,
+  approveButton,
+  cancelButton,
+  additionalButton,
+  footerActionsOrientation,
+  footer,
+  className,
+  rootClassName,
+  open,
+  onClose,
+  showBlackout,
+  container,
+  closeOnPopstate,
+  swipeEnabled,
+  snapPoints,
+  snapIndex,
+  onSnapIndexChange,
+  safeArea,
+  ...rest
+}: DrawerProps) {
+  // Футер собирает сам `BottomSheet`.
+  return (
+    <BottomSheet
+      // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+      withDividers={false}
+      open={open}
+      onClose={onClose}
+      showBackdrop={showBlackout}
+      title={title}
+      subtitle={subtitle}
+      slotAfterTitle={slotAfterTitle}
+      onBackButtonClick={onBackButtonClick}
+      media={media}
+      content={content}
+      approveButton={approveButton}
+      cancelButton={cancelButton}
+      additionalButton={additionalButton}
+      footerActionsOrientation={footerActionsOrientation}
+      footer={footer}
+      // Те же id футера, что у desktop-поверхности — стабильный селектор при свапе surface.
+      footerTestIds={{
+        approve: TEST_IDS.footerApprove,
+        cancel: TEST_IDS.footerCancel,
+        additional: TEST_IDS.footerAdditional,
+      }}
+      className={className}
+      rootClassName={rootClassName}
+      container={container}
+      closeOnPopstate={closeOnPopstate}
+      swipeEnabled={swipeEnabled}
+      snapPoints={snapPoints}
+      snapIndex={snapIndex}
+      onSnapIndexChange={onSnapIndexChange}
+      safeArea={safeArea}
+      {...extractSupportProps(rest)}
+    />
+  );
+}

package/src/helperComponents/MobileDrawer/index.ts

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