让开源，少一点语言距离。
npm包中文文档

@cloud-ru/ds-popup-private

中文文档
1.1.20发布于 2026/11/11Apache-2.0TypeScriptESM + CJS近 30 天下载 1.7万

@cloud-ru/ds-popup-private —

原始使用文档
中文原文
文档目录24 节
  1. FooterActions
  2. Props FooterActionsProps
  3. OVERLAY_SURFACE
  4. Props
  5. OverlaySurfaceProvider
  6. Props OverlaySurfaceProviderProps
  7. PopupBody
  8. Props PopupBodyProps
  9. PopupCloseButton
  10. Props PopupCloseButtonProps
  11. PopupFooter
  12. Props PopupFooterProps
  13. PopupHeader
  14. Props PopupHeaderProps
  15. PopupMedia
  16. Props MediaProps
  17. SURFACE_TOKEN_SEGMENT
  18. Props
  19. useOverlayBodyHeightAuto
  20. Props
  21. useOverlaySurface
  22. Props
  23. useSurfaceTokenSegment
  24. Props

popup-private

@cloud-ru/ds-popup-private —

FooterActions

Props FooterActionsProps

PropTypeDefaultDescription
actionsClassNamestring—Доп. CSS-класс на ButtonGroup (поверх встроенной раскладки по числу действий).
additionalButtonBottomSheetActionButton—Дополнительная (третья) кнопка (по умолчанию view='simple', appearance='neutral').
approveButtonBottomSheetActionButton—Основная кнопка (по умолчанию view='filled', appearance='primary').
cancelButtonBottomSheetActionButton—Кнопка отмены (по умолчанию view='outline', appearance='neutral').
footerActionsOrientation"horizontal" | "vertical"horizontalОриентация кнопок в футере.
size"l" | "m" | "s"—Размер кнопок футера. Задаётся на уровне группы (как в ButtonGroup), не по кнопке —
в макетах все действия футера одного размера. Нужен потребителям с собственной осью
размера (календарные дропдауны: 24 / 32 / 40 при s / m / l). У modal, drawer и
bottom-sheet своей оси нет, но кит рисует их футеры на l — эти поверхности
передают size='l' явно.
surface"bottomSheet" | "window"windowПоверхность overlay'я — определяет раскладку кнопок:
- window (desktop, дефолт): 3 кнопки вряд.
- bottomSheet (mobile): 1 → вправо, 2 → space-between, 3 → стопка с инверсией (primary внизу).
testIdsFooterActionsTestIds—Идентификаторы слотов конкретного компонента (bottom-sheet / modal / drawer).

  • BottomSheetActionButton = Omit<ButtonProps<"button">, "size" | "fullWidth"> | Omit<ButtonProps<"a">, "size" | "fullWidth">

  • FooterActionsOrientation = "horizontal" | "vertical"

FooterActionsTestIds

PropTypeDefaultDescription
additionalstring—
approvestring—
cancelstring—
  • SurfaceTokenSegment = "bottomSheet" | "window"

OVERLAY_SURFACE

Props

PropTypeDefaultDescription

OverlaySurfaceProvider

Props OverlaySurfaceProviderProps

PropTypeDefaultDescription
bodyHeightAutobooleanfalseТолько drawer: высота панели по контенту → Body (drawer-ветка) добавляет соответствующий класс.
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—
surface"drawer" | "modal" | "sheet"—Поверхность, в которой рендерятся дочерние слоты.
  • OverlaySurface = "drawer" | "modal" | "sheet"

PopupBody

Props PopupBodyProps

PropTypeDefaultDescription
bodyPaddingbooleantrueГоризонтальные паддинги body. При false контент идёт во всю ширину sheet'а (edge-to-edge) —
для карт, изображений, списков без отступов. Соответствует Figma-оси padding=false.
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—
classNamestring—CSS-класс контейнера body.
contentReactNode—Содержимое body (альтернатива children).
data-test-idstring—
innerRefRef<HTMLElement>—Ссылка на скроллируемый контейнер body.

PopupCloseButton

Props PopupCloseButtonProps

PropTypeDefaultDescription
aria-labelstring | undefined—Defines a string value that labels the current element.
Доступное имя кнопки. По умолчанию close popup.
classNamestring—CSS-класс.
data-test-idstring—
onClick() => void—Действие при клике.

PopupFooter

Props PopupFooterProps

PropTypeDefaultDescription
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—
classNamestring—CSS-класс контейнера footer'а.
data-test-idstring—

PopupHeader

Props PopupHeaderProps

PropTypeDefaultDescription
actionButtonReactNode—Slot справа от headline-строки (любой ReactNode, обычно Button с иконкой).
classNamestring—CSS-класс контейнера header'а.
data-test-idstring—
onBackButtonClick(() => void)—Callback клика на back-кнопку (слева в шапке).
Наличие callback'а авто-рендерит Button view='function' icon={<ArrowLeftSVG />}.
slotAfterTitleReactNode—Slot справа от title (например, QuestionTooltip из @cloud-ru/ds-tooltip).
slotSecondTitleReactNode—Slot под подзаголовком — типично SearchBar, SegmentControl или Filter.
Рендерится на обеих поверхностях: secondWrapper в мастере bottomSheet,
subHeadlineWrapper в мастере window (modal / drawer).
subtitleReactNode—Текстовая строка-подзаголовок под title (Figma subtitleWrapper). Рендерится на всех поверхностях.
testIdsPopupHeaderTestIds—Переопределение data-test-id слотов шапки. Каждый пропущенный ключ берётся из TEST_IDS.
Потребитель-обёртка (drawer/modal) прокидывает сюда свои id, чтобы сохранить публичный контракт.
titleReactNode—Заголовок. Типографика зависит от поверхности: title-l на sheet, headline-s на window (modal/drawer).
titleIdstring—id заголовка — для связи с aria-labelledby dialog'а (accessible name).
truncate{ title?: number; subtitle?: number; } | undefined—Усечение строковых title/subtitle через TruncateString (число строк). Применяется только
когда задано — по умолчанию текст не усекается. Актуально для window-поверхности (modal/drawer),
где длинный заголовок иначе переносится на несколько строк.

PopupHeaderTestIds

PropTypeDefaultDescription
actionButtonstring | undefined—
backButtonstring | undefined—
headerstring | undefined—
slotAfterTitlestring | undefined—
slotSecondTitlestring | undefined—
subtitlestring | undefined—
titlestring | undefined—

PopupMedia

Props MediaProps

PropTypeDefaultDescription
altstring—Альтернативный текст (a11y).
classNamestring—
kind"icon" | "image"imageРежим:
- 'image' — изображение во всю ширину (высота 184px), прижато к шапке (убирается
верхний отступ контент-блока). Горизонтальные паддинги body не затрагивает — для edge-to-edge body
используйте bodyPadding={false} отдельно.
- 'icon' — иконка с padding-top: 24px.
srcstring—URL изображения / иконки.
  • MediaKind = "icon" | "image"

SURFACE_TOKEN_SEGMENT

Props

PropTypeDefaultDescription

useOverlayBodyHeightAuto

Props

PropTypeDefaultDescription

useOverlaySurface

Props

PropTypeDefaultDescription

useSurfaceTokenSegment

Props

PropTypeDefaultDescription

版本与发布记录

@cloud-ru/ds-popup-private 共发布 107 个版本，首次发布于 2026/08/18；过去 12 个月发布了 107 个版本。

版本发布日期距今
1.1.20latest2026/11/11今天
1.1.20-preview-e8fe6b56.0preview2026/11/11今天
1.1.20-preview-c0e895ed.02026/11/11今天
1.1.20-preview-90b10112.02026/11/11今天
1.1.20-preview-fd7dd437.02026/11/101 天前
1.1.20-preview-9a75a2a9.02026/11/101 天前

关于 @cloud-ru/ds-popup-private 的常见问题

@cloud-ru/ds-popup-private 是什么？

@cloud-ru/ds-popup-private —

如何安装 @cloud-ru/ds-popup-private？

在项目目录运行 npm install @cloud-ru/ds-popup-private，或使用 pnpm add / yarn add / bun add。

@cloud-ru/ds-popup-private 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@cloud-ru/ds-popup-private 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@cloud-ru/ds-popup-private 可以商用吗？

@cloud-ru/ds-popup-private 使用 Apache-2.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

@cloud-ru/ds-popup-private 的下载量有多少？

根据 npm 官方下载统计，@cloud-ru/ds-popup-private 在 2026/10/10 – 2026/11/08 这 30 天内被下载 17,194 次，日均约 573 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@cloud-ru/ds-popup-private 还在维护吗？

最新版本 1.1.20 发布于 2026/11/11（今天）；至今共发布 107 个版本，其中过去 12 个月发布了 107 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。