@cloud-ru/ds-drawer 1.0.6-preview-5926424e.0 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +0 -6
  3. package/dist/cjs/components/Drawer/styles.module.css +16 -0
  4. package/dist/cjs/components/Drawer/types.d.ts +3 -7
  5. package/dist/cjs/components/DrawerCustom/DrawerCustom.d.ts +3 -3
  6. package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.d.ts +1 -1
  7. package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.js +12 -8
  8. package/dist/cjs/helperComponents/DialogSlots.d.ts +4 -25
  9. package/dist/cjs/helperComponents/DialogSlots.js +3 -32
  10. package/dist/cjs/helperComponents/DrawerBody/DrawerBody.d.ts +1 -1
  11. package/dist/cjs/helperComponents/DrawerBody/DrawerBody.js +2 -3
  12. package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.d.ts +1 -1
  13. package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.js +4 -4
  14. package/dist/cjs/style.css +16 -15
  15. package/dist/esm/components/Drawer/styles.module.css +16 -0
  16. package/dist/esm/components/Drawer/types.d.ts +3 -7
  17. package/dist/esm/components/DrawerCustom/DrawerCustom.d.ts +3 -3
  18. package/dist/esm/helperComponents/DesktopDrawer/DesktopDrawer.d.ts +1 -1
  19. package/dist/esm/helperComponents/DesktopDrawer/DesktopDrawer.js +12 -8
  20. package/dist/esm/helperComponents/DialogSlots.d.ts +4 -25
  21. package/dist/esm/helperComponents/DialogSlots.js +4 -29
  22. package/dist/esm/helperComponents/DrawerBody/DrawerBody.d.ts +1 -1
  23. package/dist/esm/helperComponents/DrawerBody/DrawerBody.js +3 -4
  24. package/dist/esm/helperComponents/MobileDrawer/MobileDrawer.d.ts +1 -1
  25. package/dist/esm/helperComponents/MobileDrawer/MobileDrawer.js +4 -4
  26. package/dist/esm/style.css +16 -15
  27. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  28. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  29. package/package.json +9 -9
  30. package/src/components/Drawer/styles.module.scss +19 -0
  31. package/src/components/Drawer/types.ts +3 -7
  32. package/src/helperComponents/DesktopDrawer/DesktopDrawer.tsx +27 -18
  33. package/src/helperComponents/DialogSlots.tsx +3 -74
  34. package/src/helperComponents/DrawerBody/DrawerBody.tsx +2 -5
  35. package/src/helperComponents/MobileDrawer/MobileDrawer.tsx +2 -5
  36. package/dist/cjs/helperComponents/styles.module.css +0 -15
  37. package/dist/esm/helperComponents/styles.module.css +0 -15
  38. package/src/helperComponents/styles.module.scss +0 -22
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.6 (2026-08-28)
7
+
8
+ **Note:** Version bump only for package @ds/drawer
9
+
6
10
  ## 1.0.5 (2026-08-28)
7
11
 
8
12
  ### Bug Fixes
package/README.md CHANGED
@@ -248,7 +248,6 @@ export function NestedDrawer() {
248
248
  | `closeOnPopstate` | `boolean` | — | Закрывать дровер при перемещении по истории браузера |
249
249
  | `container` | `string \| HTMLElement` | — | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
250
250
  | `content` | `ReactNode` | — | Содержимое body (альтернатива `children`). |
251
- | `contentRef` | `Ref<HTMLElement>` | — | Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). |
252
251
  | `data-test-id` | `string` | — | |
253
252
  | `disableMotions` | `boolean` | `false` | Отключить анимации |
254
253
  | `footer` | `(ReactElement<any, string \| JSXElementConstructor<any>> & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<...> \| ReactPortal \| null))` | — | Футер <br/> Произвольный футер. Приоритетнее `approveButton` / `cancelButton` / `additionalButton`. |
@@ -266,14 +265,12 @@ export function NestedDrawer() {
266
265
  | `showBlackout` | `boolean` | `true` | Отображение темной подложки |
267
266
  | `showButtonClosed` | `boolean` | `true` | Отображение кнопки закрытия в шапке дровера |
268
267
  | `slotAfterTitle` | `ReactNode` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
269
- | `slotSecondTitle` | `ReactNode` | — | Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`. <br/> Рендерится на обеих поверхностях: `secondWrapper` в мастере `bottomSheet`, <br/> `subHeadlineWrapper` в мастере `window` (modal / drawer). |
270
268
  | `snapIndex` | `number` | — | Controlled-индекс активного snap'а. Если задан, sheet всегда находится на этом snap'е; <br/> swipe-up/down вызывают `onSnapIndexChange`, но не меняют позицию сами — consumer должен <br/> передать новое значение. |
271
269
  | `snapPoints` | `SnapPoint` | — | Массив фиксированных позиций sheet'а от меньшей к большей. По дефолту `undefined` — <br/> sheet `height: auto` с одним snap'ом по высоте контента. <br/> Пример: `[0.5, 1]` — sheet открывается на половину экрана, drag вверх раскрывает <br/> до full-viewport; drag вниз ниже `0.5` ведёт к закрытию. <br/> Контракт массива (движок не сортирует и не дедуплицирует — порядок и различимость на <br/> стороне потребителя): <br/> - строго по возрастанию: индекс `0` — самая компактная позиция, последний — top / expanded; <br/> - значения должны резолвиться в различные высоты (`['50%', 0.5]` на типичном вьюпорте дадут <br/> одну высоту → дубль-индекс будет недостижим свайпом); <br/> - `'fit-content'` имеет смысл только как ЕДИНСТВЕННЫЙ snap (без `snapPoints`); внутри массива <br/> фиксированных позиций его «контентная» высота не определена. |
272
270
  | `subtitle` | `ReactNode` | — | Текстовая строка-подзаголовок под title. |
273
271
  | `swipeEnabled` | `boolean` | `true` | Включает swipe-down для закрытия / swipe-up для раскрытия на следующий snap-point. <br/> При `swipeEnabled=false` snap-point по-прежнему можно переключить через controlled `snapIndex` prop'ом. |
274
272
  | `title` | `ReactNode` | — | Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). |
275
273
  | `width` | `Width` | `'s'` | Ширина (только при position: "left" \| "right") |
276
- | `withDividers` | `boolean` | `false` | Только mobile: разделители между шапкой/контентом/футером sheet'а. |
277
274
 
278
275
  ##### Related types
279
276
 
@@ -289,7 +286,6 @@ export function NestedDrawer() {
289
286
  | `closeOnPopstate` | `boolean \| undefined` | — | Закрывать дровер при перемещении по истории браузера |
290
287
  | `container` | `string \| HTMLElement \| undefined` | — | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
291
288
  | `content` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Содержимое body (альтернатива `children`). |
292
- | `contentRef` | `Ref<HTMLElement> \| undefined` | — | Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). |
293
289
  | `data-test-id` | `string \| undefined` | — | |
294
290
  | `disableMotions` | `boolean \| undefined` | — | Отключить анимации |
295
291
  | `footer` | `(ReactElement<any, string \| JSXElementConstructor<any>> & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null)) \| undefined` | — | Футер <br/> Произвольный футер. Приоритетнее `approveButton` / `cancelButton` / `additionalButton`. |
@@ -307,14 +303,12 @@ export function NestedDrawer() {
307
303
  | `showBlackout` | `boolean \| undefined` | — | Отображение темной подложки |
308
304
  | `showButtonClosed` | `boolean \| undefined` | — | Отображение кнопки закрытия в шапке дровера |
309
305
  | `slotAfterTitle` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
310
- | `slotSecondTitle` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`. <br/> Рендерится на обеих поверхностях: `secondWrapper` в мастере `bottomSheet`, <br/> `subHeadlineWrapper` в мастере `window` (modal / drawer). |
311
306
  | `snapIndex` | `number \| undefined` | — | Controlled-индекс активного snap'а. Если задан, sheet всегда находится на этом snap'е; <br/> swipe-up/down вызывают `onSnapIndexChange`, но не меняют позицию сами — consumer должен <br/> передать новое значение. |
312
307
  | `snapPoints` | `SnapPoint` | — | Массив фиксированных позиций sheet'а от меньшей к большей. По дефолту `undefined` — <br/> sheet `height: auto` с одним snap'ом по высоте контента. <br/> Пример: `[0.5, 1]` — sheet открывается на половину экрана, drag вверх раскрывает <br/> до full-viewport; drag вниз ниже `0.5` ведёт к закрытию. <br/> Контракт массива (движок не сортирует и не дедуплицирует — порядок и различимость на <br/> стороне потребителя): <br/> - строго по возрастанию: индекс `0` — самая компактная позиция, последний — top / expanded; <br/> - значения должны резолвиться в различные высоты (`['50%', 0.5]` на типичном вьюпорте дадут <br/> одну высоту → дубль-индекс будет недостижим свайпом); <br/> - `'fit-content'` имеет смысл только как ЕДИНСТВЕННЫЙ snap (без `snapPoints`); внутри массива <br/> фиксированных позиций его «контентная» высота не определена. |
313
308
  | `subtitle` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Текстовая строка-подзаголовок под title. |
314
309
  | `swipeEnabled` | `boolean \| undefined` | — | Включает swipe-down для закрытия / swipe-up для раскрытия на следующий snap-point. <br/> При `swipeEnabled=false` snap-point по-прежнему можно переключить через controlled `snapIndex` prop'ом. |
315
310
  | `title` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). |
316
311
  | `width` | `Width` | — | Ширина (только при position: "left" \| "right") |
317
- | `withDividers` | `boolean \| undefined` | — | Только mobile: разделители между шапкой/контентом/футером sheet'а. |
318
312
 
319
313
  - `Position` = `"bottom"` \| `"left"` \| `"right"` \| `"top"`
320
314
 
@@ -1,3 +1,19 @@
1
1
  .drawer{
2
2
  box-sizing:border-box;
3
+ }
4
+
5
+ .safeAreaTop{
6
+ display:flex;
7
+ flex-direction:column;
8
+ align-items:flex-start;
9
+ align-self:stretch;
10
+ padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
11
+ }
12
+
13
+ .safeAreaBottom{
14
+ display:flex;
15
+ flex-direction:column;
16
+ align-items:flex-start;
17
+ align-self:stretch;
18
+ padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
3
19
  }
@@ -1,20 +1,16 @@
1
1
  import { BottomSheetActionButton, BottomSheetProps, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
2
2
  import { WithSupportProps } from '@cloud-ru/ds-utils';
3
- import { ReactElement, ReactNode, Ref } from 'react';
3
+ import { ReactElement, ReactNode } from 'react';
4
4
  import { DialogBodyProps, DialogHeaderProps } from '../../helperComponents';
5
5
  import { DrawerCustomProps } from '../DrawerCustom';
6
6
  /**
7
7
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
8
8
  *
9
9
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer` (на mobile игнорируются).
10
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
10
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`
11
11
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
12
12
  */
13
- export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
14
- /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
15
- contentRef?: Ref<HTMLElement>;
16
- /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */
17
- withDividers?: boolean;
13
+ export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
18
14
  /** Текстовая строка-подзаголовок под title. */
19
15
  subtitle?: ReactNode;
20
16
  /** CSS-класс */
@@ -1,4 +1,4 @@
1
- import { DialogBody, DialogBodyProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps } from '../../helperComponents';
1
+ import { DialogBody, DialogBodyProps, DialogFooterProps, DialogHeaderProps } from '../../helperComponents';
2
2
  import { DrawerCustomProps } from './types';
3
3
  /**
4
4
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
@@ -9,7 +9,7 @@ export declare namespace DrawerCustom {
9
9
  type HeaderProps = DialogHeaderProps;
10
10
  type BodyProps = DialogBodyProps;
11
11
  type FooterProps = DialogFooterProps;
12
- const Header: typeof DialogHeader;
12
+ const Header: typeof import("@cloud-ru/ds-bottom-sheet").SheetHeader;
13
13
  const Body: typeof DialogBody;
14
- const Footer: typeof DialogFooter;
14
+ const Footer: typeof import("@cloud-ru/ds-bottom-sheet").SheetFooter;
15
15
  }
@@ -1,3 +1,3 @@
1
1
  import { DrawerProps } from '../../components/Drawer/types';
2
2
  /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
3
- export declare function DesktopDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, contentRef, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -5,24 +5,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.DesktopDrawer = DesktopDrawer;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
8
9
  const classnames_1 = __importDefault(require("classnames"));
9
10
  const constants_1 = require("../../components/Drawer/constants");
10
11
  const styles_module_scss_1 = __importDefault(require('../../components/Drawer/styles.module.css'));
11
12
  const DrawerCustom_1 = require("../../components/DrawerCustom");
12
13
  const constants_2 = require("../../constants");
13
14
  /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
14
- function DesktopDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, contentRef,
15
- // `withDividers` mobile-only (мастер bottomSheet): молча уходит в `rest` и отбрасывается фреймом.
16
- className, ...rest }) {
17
- const showHeader = Boolean(title || subtitle || slotAfterTitle || slotSecondTitle);
18
- // Произвольный `footer` приоритетнее кнопок-слотов; раскладку слотов делает сам `DrawerCustom.Footer`.
19
- const hasFooter = Boolean(footer || approveButton || cancelButton || additionalButton);
20
- return ((0, jsx_runtime_1.jsxs)(DrawerCustom_1.DrawerCustom, { ...rest, resizable: undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className), push: Boolean(nestedDrawer) && { distance: constants_1.NESTED_DRAWER_PUSH_DISTANCE }, children: [media, showHeader && ((0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Header, { title: title, slotAfterTitle: slotAfterTitle, slotSecondTitle: slotSecondTitle, subtitle: subtitle, onBackButtonClick: onBackButtonClick,
15
+ function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }) {
16
+ const showHeader = Boolean(title || subtitle || slotAfterTitle);
17
+ // Футер: произвольный `footer` (приоритет) либо сборка из слотов через общий `FooterActions`.
18
+ const footerContent = footer ??
19
+ (approveButton || cancelButton || additionalButton ? ((0, jsx_runtime_1.jsx)(bottom_sheet_1.FooterActions, { surface: 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
20
+ approve: constants_2.TEST_IDS.footerApprove,
21
+ cancel: constants_2.TEST_IDS.footerCancel,
22
+ additional: constants_2.TEST_IDS.footerAdditional,
23
+ } })) : null);
24
+ return ((0, jsx_runtime_1.jsxs)(DrawerCustom_1.DrawerCustom, { ...rest, resizable: undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className), push: Boolean(nestedDrawer) && { distance: constants_1.NESTED_DRAWER_PUSH_DISTANCE }, children: [media, (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaTop }), showHeader && ((0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Header, { title: title, slotAfterTitle: slotAfterTitle, subtitle: subtitle, onBackButtonClick: onBackButtonClick,
21
25
  // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
22
26
  // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
23
27
  testIds: {
24
28
  header: constants_2.TEST_IDS.header,
25
29
  title: constants_2.TEST_IDS.title,
26
30
  subtitle: constants_2.TEST_IDS.subtitle,
27
- } })), (0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Body, { "data-test-id": constants_2.TEST_IDS.body, innerRef: contentRef, content: content }), hasFooter && ((0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Footer, { "data-test-id": constants_2.TEST_IDS.footer, approveButton: footer ? undefined : approveButton, cancelButton: footer ? undefined : cancelButton, additionalButton: footer ? undefined : additionalButton, footerActionsOrientation: footerActionsOrientation, children: footer })), nestedDrawer] }));
31
+ } })), (0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Body, { "data-test-id": constants_2.TEST_IDS.body, content: content }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaBottom }), footerContent != null && ((0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Footer, { "data-test-id": constants_2.TEST_IDS.footer, children: footerContent })), nestedDrawer] }));
28
32
  }
@@ -1,29 +1,8 @@
1
- import { BottomSheetActionButton, FooterActionsOrientation, SheetFooterProps, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
1
+ import { SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
2
2
  import { DrawerBodyProps } from './DrawerBody';
3
3
  export type DialogHeaderProps = SheetHeaderProps;
4
4
  export type DialogBodyProps = DrawerBodyProps;
5
- export type DialogFooterProps = SheetFooterProps & {
6
- /** Основная кнопка. Задаёт штатную раскладку футера — вместо `children`. */
7
- approveButton?: BottomSheetActionButton;
8
- /** Кнопка отмены. */
9
- cancelButton?: BottomSheetActionButton;
10
- /** Дополнительная (третья) кнопка. */
11
- additionalButton?: BottomSheetActionButton;
12
- /** Ориентация кнопок при ровно двух действиях. */
13
- footerActionsOrientation?: FooterActionsOrientation;
14
- };
15
- /**
16
- * Шапка панели вместе с верхней safe-area.
17
- *
18
- * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
19
- * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
20
- */
21
- export declare function DialogHeader(props: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
22
- /**
23
- * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
24
- *
25
- * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
26
- * раскладку в этом случае обеспечивает потребитель.
27
- */
28
- export declare function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
5
+ export type DialogFooterProps = SheetFooterProps;
6
+ export declare const DialogHeader: typeof SheetHeader;
7
+ export declare const DialogFooter: typeof SheetFooter;
29
8
  export declare function DialogBody(props: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
@@ -1,41 +1,12 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DialogHeader = DialogHeader;
7
- exports.DialogFooter = DialogFooter;
3
+ exports.DialogFooter = exports.DialogHeader = void 0;
8
4
  exports.DialogBody = DialogBody;
9
5
  const jsx_runtime_1 = require("react/jsx-runtime");
10
6
  const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
11
- const constants_1 = require("../constants");
12
7
  const DrawerBody_1 = require("./DrawerBody");
13
- const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
14
- /**
15
- * Шапка панели вместе с верхней safe-area.
16
- *
17
- * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
18
- * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
19
- */
20
- function DialogHeader(props) {
21
- const isSheet = (0, bottom_sheet_1.useOverlaySurface)() === bottom_sheet_1.OVERLAY_SURFACE.Sheet;
22
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSheet && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaTop }), (0, jsx_runtime_1.jsx)(bottom_sheet_1.SheetHeader, { ...props })] }));
23
- }
24
- /**
25
- * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
26
- *
27
- * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
28
- * раскладку в этом случае обеспечивает потребитель.
29
- */
30
- function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }) {
31
- const isSheet = (0, bottom_sheet_1.useOverlaySurface)() === bottom_sheet_1.OVERLAY_SURFACE.Sheet;
32
- const hasActions = Boolean(approveButton || cancelButton || additionalButton);
33
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSheet && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaBottom }), (0, jsx_runtime_1.jsx)(bottom_sheet_1.SheetFooter, { ...rest, children: hasActions ? ((0, jsx_runtime_1.jsx)(bottom_sheet_1.FooterActions, { surface: isSheet ? 'bottomSheet' : 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
34
- approve: constants_1.TEST_IDS.footerApprove,
35
- cancel: constants_1.TEST_IDS.footerCancel,
36
- additional: constants_1.TEST_IDS.footerAdditional,
37
- } })) : (children) })] }));
38
- }
8
+ exports.DialogHeader = bottom_sheet_1.SheetHeader;
9
+ exports.DialogFooter = bottom_sheet_1.SheetFooter;
39
10
  function DialogBody(props) {
40
11
  return (0, bottom_sheet_1.useOverlaySurface)() === bottom_sheet_1.OVERLAY_SURFACE.Sheet ? (0, jsx_runtime_1.jsx)(bottom_sheet_1.SheetBody, { ...props }) : (0, jsx_runtime_1.jsx)(DrawerBody_1.DrawerBody, { ...props });
41
12
  }
@@ -1,4 +1,4 @@
1
1
  import { SheetBodyProps } from '@cloud-ru/ds-bottom-sheet';
2
2
  export type DrawerBodyProps = SheetBodyProps;
3
3
  /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
4
- export declare function DrawerBody({ content, children, bodyPadding, innerRef, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
4
+ export declare function DrawerBody({ content, children, bodyPadding, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
@@ -11,8 +11,7 @@ const utils_1 = require("@cloud-ru/ds-utils");
11
11
  const classnames_1 = __importDefault(require("classnames"));
12
12
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
13
13
  /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
14
- function DrawerBody({ content, children, bodyPadding = true, innerRef, className, ...rest }) {
14
+ function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
15
15
  const heightAutoVertical = (0, bottom_sheet_1.useOverlayBodyHeightAuto)();
16
- return ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, { ref: innerRef, size: 'm', barHideStrategy: 'never', className: (0, classnames_1.default)(styles_module_scss_1.default.body, heightAutoVertical && styles_module_scss_1.default.bodyHeightAuto, className), "data-no-padding": bodyPadding === false || undefined, ...(0, utils_1.extractSupportProps)(rest), children: children ?? content }));
16
+ return ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 'm', barHideStrategy: 'never', className: (0, classnames_1.default)(styles_module_scss_1.default.body, heightAutoVertical && styles_module_scss_1.default.bodyHeightAuto, className), "data-no-padding": bodyPadding === false || undefined, ...(0, utils_1.extractSupportProps)(rest), children: children ?? content }));
17
17
  }
18
- (0, utils_1.withInnerRefSupport)(DrawerBody);
@@ -4,4 +4,4 @@ import { DrawerProps } from '../../components/Drawer/types';
4
4
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
5
5
  * уходят в `...rest`.
6
6
  */
7
- export declare function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare 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): import("react/jsx-runtime").JSX.Element;
@@ -10,13 +10,13 @@ const constants_1 = require("../../constants");
10
10
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
11
11
  * уходят в `...rest`.
12
12
  */
13
- function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers = false, ...rest }) {
13
+ 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 }) {
14
14
  // Футер собирает сам `BottomSheet`.
15
15
  return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet
16
- // Дефолт `withDividers` в sheet'е `true`; у Drawer'а вид исторически без разделителей.
16
+ // Дефолт `withDividers` сменился на `true` здесь вид сохраняем прежним.
17
17
  , {
18
- // Дефолт `withDividers` в sheet'е `true`; у Drawer'а вид исторически без разделителей.
19
- withDividers: withDividers, open: open, onClose: onClose, showBackdrop: showBlackout, title: title, subtitle: subtitle, slotAfterTitle: slotAfterTitle, slotSecondTitle: slotSecondTitle, onBackButtonClick: onBackButtonClick, media: media, content: content, approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, footer: footer,
18
+ // Дефолт `withDividers` сменился на `true` здесь вид сохраняем прежним.
19
+ 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,
20
20
  // Те же id футера, что у desktop-поверхности — стабильный селектор при свапе surface.
21
21
  footerTestIds: {
22
22
  approve: constants_1.TEST_IDS.footerApprove,
@@ -1,6 +1,22 @@
1
1
  .drawer{
2
2
  box-sizing:border-box;
3
3
  }
4
+
5
+ .safeAreaTop{
6
+ display:flex;
7
+ flex-direction:column;
8
+ align-items:flex-start;
9
+ align-self:stretch;
10
+ padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
11
+ }
12
+
13
+ .safeAreaBottom{
14
+ display:flex;
15
+ flex-direction:column;
16
+ align-items:flex-start;
17
+ align-self:stretch;
18
+ padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
19
+ }
4
20
  @charset "UTF-8";
5
21
  .drawerRoot:global(.snack-rc-drawer){
6
22
  pointer-events:none;
@@ -532,19 +548,4 @@
532
548
  height:auto !important;
533
549
  min-height:0;
534
550
  max-height:100%;
535
- }
536
- .safeAreaTop{
537
- display:flex;
538
- flex-direction:column;
539
- align-items:flex-start;
540
- align-self:stretch;
541
- padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
542
- }
543
-
544
- .safeAreaBottom{
545
- display:flex;
546
- flex-direction:column;
547
- align-items:flex-start;
548
- align-self:stretch;
549
- padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
550
551
  }
@@ -1,3 +1,19 @@
1
1
  .drawer{
2
2
  box-sizing:border-box;
3
+ }
4
+
5
+ .safeAreaTop{
6
+ display:flex;
7
+ flex-direction:column;
8
+ align-items:flex-start;
9
+ align-self:stretch;
10
+ padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
11
+ }
12
+
13
+ .safeAreaBottom{
14
+ display:flex;
15
+ flex-direction:column;
16
+ align-items:flex-start;
17
+ align-self:stretch;
18
+ padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
3
19
  }
@@ -1,20 +1,16 @@
1
1
  import { BottomSheetActionButton, BottomSheetProps, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
2
2
  import { WithSupportProps } from '@cloud-ru/ds-utils';
3
- import { ReactElement, ReactNode, Ref } from 'react';
3
+ import { ReactElement, ReactNode } from 'react';
4
4
  import { DialogBodyProps, DialogHeaderProps } from '../../helperComponents/index.js';
5
5
  import { DrawerCustomProps } from '../DrawerCustom/index.js';
6
6
  /**
7
7
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
8
8
  *
9
9
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer` (на mobile игнорируются).
10
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
10
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`
11
11
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
12
12
  */
13
- export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
14
- /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
15
- contentRef?: Ref<HTMLElement>;
16
- /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */
17
- withDividers?: boolean;
13
+ export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
18
14
  /** Текстовая строка-подзаголовок под title. */
19
15
  subtitle?: ReactNode;
20
16
  /** CSS-класс */
@@ -1,4 +1,4 @@
1
- import { DialogBody, DialogBodyProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps } from '../../helperComponents/index.js';
1
+ import { DialogBody, DialogBodyProps, DialogFooterProps, DialogHeaderProps } from '../../helperComponents/index.js';
2
2
  import { DrawerCustomProps } from './types.js';
3
3
  /**
4
4
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
@@ -9,7 +9,7 @@ export declare namespace DrawerCustom {
9
9
  type HeaderProps = DialogHeaderProps;
10
10
  type BodyProps = DialogBodyProps;
11
11
  type FooterProps = DialogFooterProps;
12
- const Header: typeof DialogHeader;
12
+ const Header: typeof import("@cloud-ru/ds-popup-private").PopupHeader;
13
13
  const Body: typeof DialogBody;
14
- const Footer: typeof DialogFooter;
14
+ const Footer: typeof import("@cloud-ru/ds-popup-private").PopupFooter;
15
15
  }
@@ -1,3 +1,3 @@
1
1
  import { DrawerProps } from '../../components/Drawer/types.js';
2
2
  /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
3
- export declare function DesktopDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, contentRef, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -1,22 +1,26 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
2
3
  import cn from 'classnames';
3
4
  import { NESTED_DRAWER_PUSH_DISTANCE } from '../../components/Drawer/constants.js';
4
5
  import styles from '../../components/Drawer/styles.module.css';
5
6
  import { DrawerCustom } from '../../components/DrawerCustom/index.js';
6
7
  import { TEST_IDS } from '../../constants.js';
7
8
  /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
8
- export function DesktopDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, contentRef,
9
- // `withDividers` mobile-only (мастер bottomSheet): молча уходит в `rest` и отбрасывается фреймом.
10
- className, ...rest }) {
11
- const showHeader = Boolean(title || subtitle || slotAfterTitle || slotSecondTitle);
12
- // Произвольный `footer` приоритетнее кнопок-слотов; раскладку слотов делает сам `DrawerCustom.Footer`.
13
- const hasFooter = Boolean(footer || approveButton || cancelButton || additionalButton);
14
- return (_jsxs(DrawerCustom, { ...rest, resizable: undefined, className: cn(styles.drawer, className), push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [media, showHeader && (_jsx(DrawerCustom.Header, { title: title, slotAfterTitle: slotAfterTitle, slotSecondTitle: slotSecondTitle, subtitle: subtitle, onBackButtonClick: onBackButtonClick,
9
+ export function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }) {
10
+ const showHeader = Boolean(title || subtitle || slotAfterTitle);
11
+ // Футер: произвольный `footer` (приоритет) либо сборка из слотов через общий `FooterActions`.
12
+ const footerContent = footer ??
13
+ (approveButton || cancelButton || additionalButton ? (_jsx(FooterActions, { surface: 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
14
+ approve: TEST_IDS.footerApprove,
15
+ cancel: TEST_IDS.footerCancel,
16
+ additional: TEST_IDS.footerAdditional,
17
+ } })) : null);
18
+ return (_jsxs(DrawerCustom, { ...rest, resizable: undefined, className: cn(styles.drawer, className), push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [media, _jsx("div", { className: styles.safeAreaTop }), showHeader && (_jsx(DrawerCustom.Header, { title: title, slotAfterTitle: slotAfterTitle, subtitle: subtitle, onBackButtonClick: onBackButtonClick,
15
19
  // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
16
20
  // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
17
21
  testIds: {
18
22
  header: TEST_IDS.header,
19
23
  title: TEST_IDS.title,
20
24
  subtitle: TEST_IDS.subtitle,
21
- } })), _jsx(DrawerCustom.Body, { "data-test-id": TEST_IDS.body, innerRef: contentRef, content: content }), hasFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, approveButton: footer ? undefined : approveButton, cancelButton: footer ? undefined : cancelButton, additionalButton: footer ? undefined : additionalButton, footerActionsOrientation: footerActionsOrientation, children: footer })), nestedDrawer] }));
25
+ } })), _jsx(DrawerCustom.Body, { "data-test-id": TEST_IDS.body, content: content }), _jsx("div", { className: styles.safeAreaBottom }), footerContent != null && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, children: footerContent })), nestedDrawer] }));
22
26
  }
@@ -1,29 +1,8 @@
1
- import { BottomSheetActionButton, FooterActionsOrientation, SheetFooterProps, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
1
+ import { SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
2
2
  import { DrawerBodyProps } from './DrawerBody/index.js';
3
3
  export type DialogHeaderProps = SheetHeaderProps;
4
4
  export type DialogBodyProps = DrawerBodyProps;
5
- export type DialogFooterProps = SheetFooterProps & {
6
- /** Основная кнопка. Задаёт штатную раскладку футера — вместо `children`. */
7
- approveButton?: BottomSheetActionButton;
8
- /** Кнопка отмены. */
9
- cancelButton?: BottomSheetActionButton;
10
- /** Дополнительная (третья) кнопка. */
11
- additionalButton?: BottomSheetActionButton;
12
- /** Ориентация кнопок при ровно двух действиях. */
13
- footerActionsOrientation?: FooterActionsOrientation;
14
- };
15
- /**
16
- * Шапка панели вместе с верхней safe-area.
17
- *
18
- * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
19
- * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
20
- */
21
- export declare function DialogHeader(props: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
22
- /**
23
- * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
24
- *
25
- * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
26
- * раскладку в этом случае обеспечивает потребитель.
27
- */
28
- export declare function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
5
+ export type DialogFooterProps = SheetFooterProps;
6
+ export declare const DialogHeader: typeof SheetHeader;
7
+ export declare const DialogFooter: typeof SheetFooter;
29
8
  export declare function DialogBody(props: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
@@ -1,33 +1,8 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { FooterActions, OVERLAY_SURFACE, SheetBody, SheetFooter, SheetHeader, useOverlaySurface, } from '@cloud-ru/ds-bottom-sheet';
3
- import { TEST_IDS } from '../constants.js';
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { OVERLAY_SURFACE, SheetBody, SheetFooter, SheetHeader, useOverlaySurface, } from '@cloud-ru/ds-bottom-sheet';
4
3
  import { DrawerBody } from './DrawerBody/index.js';
5
- import styles from './styles.module.css';
6
- /**
7
- * Шапка панели вместе с верхней safe-area.
8
- *
9
- * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
10
- * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
11
- */
12
- export function DialogHeader(props) {
13
- const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
14
- return (_jsxs(_Fragment, { children: [!isSheet && _jsx("div", { className: styles.safeAreaTop }), _jsx(SheetHeader, { ...props })] }));
15
- }
16
- /**
17
- * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
18
- *
19
- * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
20
- * раскладку в этом случае обеспечивает потребитель.
21
- */
22
- export function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }) {
23
- const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
24
- const hasActions = Boolean(approveButton || cancelButton || additionalButton);
25
- return (_jsxs(_Fragment, { children: [!isSheet && _jsx("div", { className: styles.safeAreaBottom }), _jsx(SheetFooter, { ...rest, children: hasActions ? (_jsx(FooterActions, { surface: isSheet ? 'bottomSheet' : 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
26
- approve: TEST_IDS.footerApprove,
27
- cancel: TEST_IDS.footerCancel,
28
- additional: TEST_IDS.footerAdditional,
29
- } })) : (children) })] }));
30
- }
4
+ export const DialogHeader = SheetHeader;
5
+ export const DialogFooter = SheetFooter;
31
6
  export function DialogBody(props) {
32
7
  return useOverlaySurface() === OVERLAY_SURFACE.Sheet ? _jsx(SheetBody, { ...props }) : _jsx(DrawerBody, { ...props });
33
8
  }
@@ -1,4 +1,4 @@
1
1
  import { SheetBodyProps } from '@cloud-ru/ds-bottom-sheet';
2
2
  export type DrawerBodyProps = SheetBodyProps;
3
3
  /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
4
- export declare function DrawerBody({ content, children, bodyPadding, innerRef, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
4
+ export declare function DrawerBody({ content, children, bodyPadding, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,11 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useOverlayBodyHeightAuto } from '@cloud-ru/ds-bottom-sheet';
3
3
  import { Scroll } from '@cloud-ru/ds-scroll';
4
- import { extractSupportProps, withInnerRefSupport } from '@cloud-ru/ds-utils';
4
+ import { extractSupportProps } from '@cloud-ru/ds-utils';
5
5
  import cn from 'classnames';
6
6
  import styles from './styles.module.css';
7
7
  /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
8
- export function DrawerBody({ content, children, bodyPadding = true, innerRef, className, ...rest }) {
8
+ export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
9
9
  const heightAutoVertical = useOverlayBodyHeightAuto();
10
- return (_jsx(Scroll, { ref: innerRef, size: 'm', barHideStrategy: 'never', className: cn(styles.body, heightAutoVertical && styles.bodyHeightAuto, className), "data-no-padding": bodyPadding === false || undefined, ...extractSupportProps(rest), children: children ?? content }));
10
+ return (_jsx(Scroll, { size: 'm', barHideStrategy: 'never', className: cn(styles.body, heightAutoVertical && styles.bodyHeightAuto, className), "data-no-padding": bodyPadding === false || undefined, ...extractSupportProps(rest), children: children ?? content }));
11
11
  }
12
- withInnerRefSupport(DrawerBody);
@@ -4,4 +4,4 @@ import { DrawerProps } from '../../components/Drawer/types.js';
4
4
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
5
5
  * уходят в `...rest`.
6
6
  */
7
- export declare function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare 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): import("react/jsx-runtime").JSX.Element;
@@ -7,13 +7,13 @@ import { TEST_IDS } from '../../constants.js';
7
7
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
8
8
  * уходят в `...rest`.
9
9
  */
10
- export function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers = false, ...rest }) {
10
+ 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 }) {
11
11
  // Футер собирает сам `BottomSheet`.
12
12
  return (_jsx(BottomSheet
13
- // Дефолт `withDividers` в sheet'е `true`; у Drawer'а вид исторически без разделителей.
13
+ // Дефолт `withDividers` сменился на `true` здесь вид сохраняем прежним.
14
14
  , {
15
- // Дефолт `withDividers` в sheet'е `true`; у Drawer'а вид исторически без разделителей.
16
- withDividers: withDividers, open: open, onClose: onClose, showBackdrop: showBlackout, title: title, subtitle: subtitle, slotAfterTitle: slotAfterTitle, slotSecondTitle: slotSecondTitle, onBackButtonClick: onBackButtonClick, media: media, content: content, approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, footer: footer,
15
+ // Дефолт `withDividers` сменился на `true` здесь вид сохраняем прежним.
16
+ 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,
17
17
  // Те же id футера, что у desktop-поверхности — стабильный селектор при свапе surface.
18
18
  footerTestIds: {
19
19
  approve: TEST_IDS.footerApprove,