@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.
- package/CHANGELOG.md +4 -0
- package/README.md +0 -6
- package/dist/cjs/components/Drawer/styles.module.css +16 -0
- package/dist/cjs/components/Drawer/types.d.ts +3 -7
- package/dist/cjs/components/DrawerCustom/DrawerCustom.d.ts +3 -3
- package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.d.ts +1 -1
- package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.js +12 -8
- package/dist/cjs/helperComponents/DialogSlots.d.ts +4 -25
- package/dist/cjs/helperComponents/DialogSlots.js +3 -32
- package/dist/cjs/helperComponents/DrawerBody/DrawerBody.d.ts +1 -1
- package/dist/cjs/helperComponents/DrawerBody/DrawerBody.js +2 -3
- package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.d.ts +1 -1
- package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.js +4 -4
- package/dist/cjs/style.css +16 -15
- package/dist/esm/components/Drawer/styles.module.css +16 -0
- package/dist/esm/components/Drawer/types.d.ts +3 -7
- package/dist/esm/components/DrawerCustom/DrawerCustom.d.ts +3 -3
- package/dist/esm/helperComponents/DesktopDrawer/DesktopDrawer.d.ts +1 -1
- package/dist/esm/helperComponents/DesktopDrawer/DesktopDrawer.js +12 -8
- package/dist/esm/helperComponents/DialogSlots.d.ts +4 -25
- package/dist/esm/helperComponents/DialogSlots.js +4 -29
- package/dist/esm/helperComponents/DrawerBody/DrawerBody.d.ts +1 -1
- package/dist/esm/helperComponents/DrawerBody/DrawerBody.js +3 -4
- package/dist/esm/helperComponents/MobileDrawer/MobileDrawer.d.ts +1 -1
- package/dist/esm/helperComponents/MobileDrawer/MobileDrawer.js +4 -4
- package/dist/esm/style.css +16 -15
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +9 -9
- package/src/components/Drawer/styles.module.scss +19 -0
- package/src/components/Drawer/types.ts +3 -7
- package/src/helperComponents/DesktopDrawer/DesktopDrawer.tsx +27 -18
- package/src/helperComponents/DialogSlots.tsx +3 -74
- package/src/helperComponents/DrawerBody/DrawerBody.tsx +2 -5
- package/src/helperComponents/MobileDrawer/MobileDrawer.tsx +2 -5
- package/dist/cjs/helperComponents/styles.module.css +0 -15
- package/dist/esm/helperComponents/styles.module.css +0 -15
- 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
|
|
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
|
|
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' | '
|
|
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,
|
|
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
|
|
12
|
+
const Header: typeof import("@cloud-ru/ds-bottom-sheet").SheetHeader;
|
|
13
13
|
const Body: typeof DialogBody;
|
|
14
|
-
const Footer: typeof
|
|
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,
|
|
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,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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,
|
|
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 {
|
|
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
|
-
|
|
7
|
-
|
|
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 =
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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, {
|
|
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,
|
|
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,
|
|
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`
|
|
16
|
+
// Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
|
|
17
17
|
, {
|
|
18
|
-
// Дефолт `withDividers`
|
|
19
|
-
withDividers:
|
|
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,
|
package/dist/cjs/style.css
CHANGED
|
@@ -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
|
|
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
|
|
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' | '
|
|
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,
|
|
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
|
|
12
|
+
const Header: typeof import("@cloud-ru/ds-popup-private").PopupHeader;
|
|
13
13
|
const Body: typeof DialogBody;
|
|
14
|
-
const Footer: typeof
|
|
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,
|
|
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,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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,
|
|
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 {
|
|
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
|
-
|
|
7
|
-
|
|
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
|
|
2
|
-
import {
|
|
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
|
-
|
|
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,
|
|
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
|
|
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,
|
|
8
|
+
export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
|
|
9
9
|
const heightAutoVertical = useOverlayBodyHeightAuto();
|
|
10
|
-
return (_jsx(Scroll, {
|
|
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,
|
|
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,
|
|
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`
|
|
13
|
+
// Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
|
|
14
14
|
, {
|
|
15
|
-
// Дефолт `withDividers`
|
|
16
|
-
withDividers:
|
|
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,
|