@cloud-ru/ds-popup-private 1.0.0

package/src/components/PopupFooter/PopupFooter.tsx

@@ -0,0 +1,24 @@
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { TEST_IDS } from '../../constants';
+import { useSurfaceTokenSegment } from '../../context/overlaySurface';
+import { PopupFooterProps } from '../../types';
+import styles from './styles.module.scss';
+
+/** Нижняя action-зона overlay'я (рендерит `children` в `bottomBar`-секции). Раскладка по поверхности. */
+export function PopupFooter({ children, className, ...rest }: PopupFooterProps) {
+  const surface = useSurfaceTokenSegment();
+
+  return (
+    <div
+      className={cn(styles.root, className)}
+      data-surface={surface}
+      // Дефолтный id идёт до spread — потребитель-обёртка (drawer) может переопределить своим.
+      data-test-id={TEST_IDS.footer}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.contentWrapper}>{children}</div>
+    </div>
+  );
+}

package/src/components/PopupFooter/index.ts

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

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

@@ -0,0 +1,49 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/popupPrivate.module' as popupPrivate;
+
+// `bottomBar` overlay'я. Раскладка и паддинги зависят от поверхности (`data-surface`):
+// `bottomSheet` — sheet-мастер (drag-зона, растяжение row-ButtonGroup), `window` — modal/drawer.
+.root {
+  display: flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  // bottomSheet: flex column, justify-center. `align-items: stretch` (не items-start) —
+  // чтобы row-ButtonGroup растягивался на всю ширину и `break`/space-between прижимал кнопки к краям.
+  &[data-surface='bottomSheet'] {
+    // Drag-зона (footer). Гасим нативные жесты; tap'ы по кнопкам внутри работают как обычно.
+    touch-action: none;
+
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+
+    padding: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'footer', 'padding-top')
+      base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'footer', 'padding-right')
+      base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'footer', 'padding-bottom')
+      base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'footer', 'padding-left');
+  }
+
+  // window: modal / drawer(desktop). Композит window.footer (paddingTop у мастера нет — 0).
+  &[data-surface='window'] {
+    align-items: center;
+    align-self: stretch;
+
+    @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'footer');
+  }
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+
+  [data-surface='bottomSheet'] & {
+    gap: base.$sn-density-spacing-interval-m;
+  }
+
+  [data-surface='window'] & {
+    flex: 1 0 0;
+    align-items: flex-start;
+    justify-content: center;
+  }
+}

package/src/components/PopupHeader/PopupHeader.tsx

@@ -0,0 +1,125 @@
+import { Button } from '@cloud-ru/ds-button';
+import { ArrowLeftSVG } from '@cloud-ru/ds-icons/interface/system';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { Typography } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { TEST_IDS } from '../../constants';
+import { OVERLAY_SURFACE, useOverlaySurface, useSurfaceTokenSegment } from '../../context/overlaySurface';
+import { PopupHeaderProps } from '../../types';
+import styles from './styles.module.scss';
+
+/** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
+export function PopupHeader({
+  title,
+  titleId,
+  slotAfterTitle,
+  subtitle,
+  slotSecondTitle,
+  onBackButtonClick,
+  actionButton,
+  truncate,
+  testIds,
+  className,
+  ...rest
+}: PopupHeaderProps) {
+  const surface = useSurfaceTokenSegment();
+  // `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
+  const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
+  const hasHeadline = Boolean(title || onBackButtonClick || actionButton || slotAfterTitle);
+
+  // Мобильный sheet — крупный `title-l`; desktop window (modal/drawer) — `headline-s`.
+  const titleContent =
+    truncate?.title !== undefined && typeof title === 'string' ? (
+      <TruncateString maxLines={truncate.title} text={title} />
+    ) : (
+      title
+    );
+  const subtitleContent =
+    truncate?.subtitle !== undefined && typeof subtitle === 'string' ? (
+      <TruncateString maxLines={truncate.subtitle} text={subtitle} />
+    ) : (
+      subtitle
+    );
+
+  // Потребитель-обёртка может переопределить id слотов; пропущенные берём из `TEST_IDS`.
+  const ids = {
+    header: testIds?.header ?? TEST_IDS.header,
+    title: testIds?.title ?? TEST_IDS.title,
+    slotAfterTitle: testIds?.slotAfterTitle ?? TEST_IDS.slotAfterTitle,
+    subtitle: testIds?.subtitle ?? TEST_IDS.subtitle,
+    slotSecondTitle: testIds?.slotSecondTitle ?? TEST_IDS.slotSecondTitle,
+    backButton: testIds?.backButton ?? TEST_IDS.backButton,
+    actionButton: testIds?.actionButton ?? TEST_IDS.actionButton,
+  };
+
+  return (
+    <div
+      className={cn(styles.root, className)}
+      data-surface={surface}
+      data-with-before={Boolean(onBackButtonClick) || undefined}
+      {...extractSupportProps(rest)}
+      data-test-id={ids.header}
+    >
+      {hasHeadline && (
+        <div
+          className={styles.headlineWrapper}
+          data-with-before={Boolean(onBackButtonClick) || undefined}
+          data-with-after={Boolean(actionButton) || undefined}
+        >
+          {onBackButtonClick && (
+            <Button
+              view='function'
+              appearance='neutral'
+              size='m'
+              icon={<ArrowLeftSVG />}
+              aria-label='Назад'
+              onClick={onBackButtonClick}
+              data-test-id={ids.backButton}
+            />
+          )}
+
+          <div className={styles.headline}>
+            {title && (
+              <Typography
+                variant={isSheet ? 'title' : 'headline'}
+                size={isSheet ? 'l' : 's'}
+                id={titleId}
+                className={styles.title}
+                data-test-id={ids.title}
+              >
+                {titleContent}
+              </Typography>
+            )}
+            {slotAfterTitle && (
+              <span className={styles.slotAfterTitle} data-test-id={ids.slotAfterTitle}>
+                {slotAfterTitle}
+              </span>
+            )}
+          </div>
+
+          {actionButton && (
+            <span className={styles.actionButton} data-test-id={ids.actionButton}>
+              {actionButton}
+            </span>
+          )}
+        </div>
+      )}
+
+      {subtitle && (
+        <div className={styles.subtitleWrapper} data-test-id={ids.subtitle}>
+          <Typography variant='body' size='m' className={styles.subtitle}>
+            {subtitleContent}
+          </Typography>
+        </div>
+      )}
+
+      {isSheet && slotSecondTitle && (
+        <div className={styles.secondWrapper} data-test-id={ids.slotSecondTitle}>
+          {slotSecondTitle}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/PopupHeader/index.ts

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

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

@@ -0,0 +1,158 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/popupPrivate.module' as popupPrivate;
+
+// Header overlay'я. Раскладка и токены зависят от поверхности (`data-surface` на `.root`):
+// `bottomSheet` — sheet-мастер (drag-зона, before/after-кнопки, secondWrapper/search),
+// `window` — modal / drawer(desktop).
+
+.root {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &[data-surface='bottomSheet'] {
+    gap: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'gap');
+    padding-top: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'padding-top');
+    padding-bottom: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'padding-bottom');
+  }
+
+  &[data-surface='window'] {
+    align-items: flex-start;
+    align-self: stretch;
+    justify-content: center;
+
+    @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'header');
+
+    // Зазор шапки в макете есть только с кнопкой «назад»: 80 против 76 без неё.
+    // Через `:not(...)`, а не голым `gap: 0`: stylelint поднимает свойство выше миксина.
+    &:not([data-with-before]) {
+      gap: 0;
+    }
+  }
+}
+
+.headlineWrapper {
+  display: flex;
+  // `.headline` (py + lineHeight) ниже кнопки (48) — центрируем, чтобы заголовок был на одной
+  // линии с back/action-кнопкой.
+  align-items: center;
+
+  [data-surface='bottomSheet'] & {
+    // `touch-action: none` гасит нативные жесты; tap'ы по кнопкам внутри продолжают работать.
+    touch-action: none;
+    // gap между wrapper-слотами появляется только при наличии кнопок (control=no → gap 0).
+    gap: 0;
+
+    &[data-with-before],
+    &[data-with-after] {
+      gap: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'gap');
+    }
+
+    &[data-with-before] {
+      padding-left: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'padding-left');
+    }
+
+    &[data-with-after] {
+      padding-right: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'padding-right');
+    }
+  }
+
+  // window: modal/drawer. Токен `headline-paddingHorizontal` симметричный, но в макете правый
+  // отступ нулевой — headline упирается в правый край окна, отступ текста даёт inner-wrapper.
+  [data-surface='window'] & {
+    align-self: stretch;
+
+    @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'header', 'headline');
+
+    padding-right: 0;
+
+    &:not([data-with-before]) {
+      padding-left: 0;
+    }
+  }
+}
+
+.headline {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+
+  [data-surface='bottomSheet'] & {
+    flex: 1 1 auto;
+    gap: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'headlineWrapper', 'gap');
+    padding-top: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'headlineWrapper', 'padding-top');
+    padding-bottom: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'headlineWrapper', 'padding-bottom');
+  }
+
+  [data-surface='window'] & {
+    flex: 1 0 0;
+
+    @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'header', 'headline', 'headlineWrapper');
+  }
+}
+
+[data-surface='bottomSheet'] .headlineWrapper:not([data-with-before]) .headline {
+  padding-left: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'headlineWrapper', 'padding-left');
+}
+
+[data-surface='bottomSheet'] .headlineWrapper:not([data-with-after]) .headline {
+  padding-right: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'headline', 'headlineWrapper', 'padding-right');
+}
+
+// window: на стороне С кнопкой inner-wrapper не добавляет левый отступ (его даёт headline).
+[data-surface='window'] .headlineWrapper[data-with-before] .headline {
+  padding-left: 0;
+}
+
+.title {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+// Слот занимает остаток строки заголовка: потребитель кладёт сюда и компактный тултип,
+// и полноширинный контент (счётчик выделения тулбара), который выравнивается по правому краю.
+.slotAfterTitle {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+
+.actionButton {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.subtitleWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+
+  [data-surface='bottomSheet'] & {
+    padding-right: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'subHeadlineWrapper', 'padding-right');
+    padding-left: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'subHeadlineWrapper', 'padding-left');
+  }
+
+  [data-surface='window'] & {
+    align-self: stretch;
+
+    @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'header', 'subHeadlineWrapper');
+  }
+}
+
+.subtitle {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.secondWrapper {
+  box-sizing: border-box;
+
+  [data-surface='bottomSheet'] & {
+    @include base.composite-var(popupPrivate.$popupPrivate, 'anatomy', 'bottomSheet', 'header', 'secondWrapper');
+  }
+}

package/src/components/PopupMedia/PopupMedia.tsx

@@ -0,0 +1,18 @@
+import cn from 'classnames';
+
+import { MEDIA_KIND, TEST_IDS } from '../../constants';
+import { PopupMediaProps } from '../../types';
+import styles from './styles.module.scss';
+
+type MediaProps = PopupMediaProps & {
+  className?: string;
+};
+
+/** Media-блок над headline: `kind='image'` — во всю ширину, `kind='icon'` — иконка. */
+export function PopupMedia({ src, alt, kind = MEDIA_KIND.Image, className }: MediaProps) {
+  return (
+    <div className={cn(styles.wrapper, className)} data-media-kind={kind} data-test-id={TEST_IDS.media}>
+      <img src={src} alt={alt} className={kind === MEDIA_KIND.Image ? styles.image : styles.icon} />
+    </div>
+  );
+}

package/src/components/PopupMedia/index.ts

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

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

@@ -0,0 +1,33 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/popupPrivate.module' as popupPrivate;
+
+.wrapper {
+  // Drag-зона (media над шапкой). Гасим нативные жесты на стороне браузера.
+  touch-action: none;
+
+  overflow: hidden;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  &[data-media-kind='icon'] {
+    padding-top: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'media', 'icon', 'padding-top');
+  }
+}
+
+.image {
+  display: block;
+  width: 100%;
+  min-height: base.simple-var(popupPrivate.$popupPrivate, 'anatomy', 'window', 'media', 'image', 'min-height');
+  object-fit: cover;
+}
+
+.icon {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './PopupHeader';
+export * from './PopupBody';
+export * from './PopupFooter';
+export * from './PopupMedia';
+export * from './PopupCloseButton';
+export * from './FooterActions';

package/src/constants.ts

@@ -0,0 +1,72 @@
+/**
+ * Тип media-блока в overlay-шапке.
+ *
+ * - `Image` — изображение во всю ширину (высота 184px), прижато к шапке (убирается
+ *   верхний отступ контент-блока). Горизонтальные паддинги body этим не меняются — они отдельно через `bodyPadding`.
+ * - `Icon`  — иконка с `padding-top: 24px`.
+ *
+ * Соответствие Figma: `bottomSheetMediaImage` (360×184) и `bottomSheetMediaIcon` (360×104).
+ */
+export const MEDIA_KIND = {
+  Image: 'image',
+  Icon: 'icon',
+} as const;
+
+/**
+ * Ориентация кнопок футера, собранных из `approveButton` / `cancelButton` / `additionalButton`.
+ * Применяется только при ровно двух кнопках (см. `footerActionsOrientation`).
+ *
+ * - `Horizontal` — кнопки в ряд через space-between: secondary слева, primary справа, ширина по
+ *   контенту. Дефолт — точное соответствие Figma `bottomBar.buttonGroup` (cancel/confirm).
+ * - `Vertical`   — кнопки в столбик, full-width (primary сверху).
+ */
+export const FOOTER_ACTIONS_ORIENTATION = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal',
+} as const;
+
+/**
+ * Стабильные `data-test-id` для слотов overlay-chrome (header / body / footer / media / close).
+ *
+ * Используются для e2e-локаторов в Playwright и Storybook play-функциях. Реэкспортируется из
+ * `@cloud-ru/ds-bottom-sheet`, чтобы потребитель (приложение) ссылался на те же id, что и наши тесты.
+ *
+ * Значения намеренно сохраняют префикс `bottom-sheet__` — на фазе выноса слоя из `@cloud-ru/ds-bottom-sheet`
+ * они переносятся 1:1 без смены поведения; переименование в `popup-private__*` — отдельная фаза.
+ *
+ * Figma-typo-мост (см. `.claude/rules/figma-integration.md`):
+ *   Figma `badgeHandle`          → код `handle` (показывается при `swipeEnabled`)
+ *   Figma `blackout`             → код `backdrop` / `showBackdrop`
+ *   Figma `topBar`               → код `header` / `onBackButtonClick`
+ *   Figma `bottomBar`            → код `footer`
+ *   Figma `+ slotMedia`          → код `media`
+ *   Figma `+ slotSubtitle`      → код `subtitle` (текст под title)
+ *   Figma `+ slotSecondTitle`    → код `slotSecondTitle` (search/segment, только sheet)
+ *   Figma `+ slotAfterHeadline`  → код `slotAfterTitle`
+ *   Figma `+ slotBottomBar`      → код `footer` (ReactNode)
+ *   Figma `buttonBefore` (48×48) → код auto-back-button по `onBackButtonClick`
+ *   Figma `buttonAfter`  (48×48) → код `actionButton` (ReactNode)
+ */
+export const TEST_IDS = {
+  root: 'bottom-sheet',
+  backdrop: 'bottom-sheet__backdrop',
+  handle: 'bottom-sheet__handle',
+  header: 'bottom-sheet__header',
+  title: 'bottom-sheet__title',
+  slotAfterTitle: 'bottom-sheet__slot-after-title',
+  subtitle: 'bottom-sheet__subtitle',
+  slotSecondTitle: 'bottom-sheet__slot-second-title',
+  backButton: 'bottom-sheet__back-button',
+  actionButton: 'bottom-sheet__action-button',
+  media: 'bottom-sheet__media',
+  closeButton: 'popup__close-button',
+  body: 'bottom-sheet__body',
+  footer: 'bottom-sheet__footer',
+  footerApprove: 'bottom-sheet__footer-approve',
+  footerCancel: 'bottom-sheet__footer-cancel',
+  footerAdditional: 'bottom-sheet__footer-additional',
+  // Два разных разделителя (topBar↔body и body↔footer) — разные id, чтобы каждый адресовался
+  // однозначно (без strict-mode-коллизии `getByTestId`).
+  dividerTop: 'bottom-sheet__divider-top',
+  dividerBottom: 'bottom-sheet__divider-bottom',
+} as const;

package/src/context/overlaySurface.tsx

@@ -0,0 +1,65 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { createContext, ReactNode, useContext } from 'react';
+
+/** Поверхность overlay'я, в которой рендерятся общие слоты (`Header` / `Body` / `Footer` / `Media`). */
+export const OVERLAY_SURFACE = {
+  Modal: 'modal',
+  Drawer: 'drawer',
+  Sheet: 'sheet',
+} as const;
+
+export type OverlaySurface = ValueOf<typeof OVERLAY_SURFACE>;
+
+/**
+ * Сегмент коллекции `popupPrivate.anatomy.*`, из которого слоты берут токены раскладки.
+ * Modal и Drawer(desktop) рисуются мастером `window`; Sheet — `bottomSheet`.
+ */
+export const SURFACE_TOKEN_SEGMENT = {
+  [OVERLAY_SURFACE.Modal]: 'window',
+  [OVERLAY_SURFACE.Drawer]: 'window',
+  [OVERLAY_SURFACE.Sheet]: 'bottomSheet',
+} as const;
+
+export type SurfaceTokenSegment = ValueOf<typeof SURFACE_TOKEN_SEGMENT>;
+
+type OverlaySurfaceContextValue = {
+  surface: OverlaySurface;
+  /** Только drawer: высота панели по контенту (`position: top|bottom`) — прокидывается во `Body`. */
+  bodyHeightAuto: boolean;
+};
+
+// Дефолт `'sheet'`: слоты без провайдера ведут себя как bottom-sheet.
+const OverlaySurfaceContext = createContext<OverlaySurfaceContextValue>({
+  surface: OVERLAY_SURFACE.Sheet,
+  bodyHeightAuto: false,
+});
+
+type OverlaySurfaceProviderProps = {
+  /** Поверхность, в которой рендерятся дочерние слоты. */
+  surface: OverlaySurface;
+  /** Только drawer: высота панели по контенту → `Body` (drawer-ветка) добавляет соответствующий класс. */
+  bodyHeightAuto?: boolean;
+  children: ReactNode;
+};
+
+/** Провайдер поверхности overlay'я. Frame (sheet / modal / drawer) оборачивает в него свои слоты. */
+export function OverlaySurfaceProvider({ surface, bodyHeightAuto = false, children }: OverlaySurfaceProviderProps) {
+  return (
+    <OverlaySurfaceContext.Provider value={{ surface, bodyHeightAuto }}>{children}</OverlaySurfaceContext.Provider>
+  );
+}
+
+/** Текущая поверхность overlay'я. Без провайдера возвращает `'sheet'`. */
+export function useOverlaySurface(): OverlaySurface {
+  return useContext(OverlaySurfaceContext).surface;
+}
+
+/** Только drawer-ветка `Body`: высота панели по контенту (из `DrawerFrame`). */
+export function useOverlayBodyHeightAuto(): boolean {
+  return useContext(OverlaySurfaceContext).bodyHeightAuto;
+}
+
+/** Токен-сегмент текущей поверхности (`window` / `bottomSheet`). Без провайдера — `bottomSheet`. */
+export function useSurfaceTokenSegment(): SurfaceTokenSegment {
+  return SURFACE_TOKEN_SEGMENT[useOverlaySurface()];
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './context/overlaySurface';
+export * from './types';