@cloud-ru/ds-drawer 1.0.7-preview-5f569f3c.0 → 1.1.0

package/dist/cjs/constants.d.ts

@@ -11,8 +11,8 @@ export declare const TEST_IDS: {
     readonly footerCancel: "drawer__footer-cancel";
     readonly footerAdditional: "drawer__footer-additional";
     readonly nestedDrawer: "drawer__nested";
-    /** Зарезервирован: rc-drawer отдаёт для маски только `classNames`/`styles`, атрибут навесить нечем. */
     readonly overlay: "drawer__overlay";
+    readonly contentWrapper: "drawer__content-wrapper";
 };
 export declare const WIDTH: {
     readonly S: "s";

package/dist/cjs/constants.js

@@ -14,8 +14,8 @@ exports.TEST_IDS = {
     footerCancel: 'drawer__footer-cancel',
     footerAdditional: 'drawer__footer-additional',
     nestedDrawer: 'drawer__nested',
-    /** Зарезервирован: rc-drawer отдаёт для маски только `classNames`/`styles`, атрибут навесить нечем. */
     overlay: 'drawer__overlay',
+    contentWrapper: 'drawer__content-wrapper',
 };
 exports.WIDTH = {
     S: 's',

package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.d.ts

@@ -1,3 +1,3 @@
 import { DrawerProps } from '../../components/Drawer/types';
 /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
-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;
+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;

package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.js

@@ -5,28 +5,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesktopDrawer = DesktopDrawer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components/Drawer/constants");
 const styles_module_scss_1 = __importDefault(require('../../components/Drawer/styles.module.css'));
 const DrawerCustom_1 = require("../../components/DrawerCustom");
 const constants_2 = require("../../constants");
 /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
-function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }) {
-    const showHeader = Boolean(title || subtitle || slotAfterTitle);
-    // Футер: произвольный `footer` (приоритет) либо сборка из слотов через общий `FooterActions`.
-    const footerContent = footer ??
-        (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: {
-                approve: constants_2.TEST_IDS.footerApprove,
-                cancel: constants_2.TEST_IDS.footerCancel,
-                additional: constants_2.TEST_IDS.footerAdditional,
-            } })) : null);
-    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, 
+function DesktopDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, contentRef, 
+// `withDividers` — mobile-only (мастер bottomSheet): молча уходит в `rest` и отбрасывается фреймом.
+className, ...rest }) {
+    const showHeader = Boolean(title || subtitle || slotAfterTitle || slotSecondTitle);
+    // Произвольный `footer` приоритетнее кнопок-слотов; раскладку слотов делает сам `DrawerCustom.Footer`.
+    const hasFooter = Boolean(footer || approveButton || cancelButton || additionalButton);
+    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, 
                 // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
                 // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
                 testIds: {
                     header: constants_2.TEST_IDS.header,
                     title: constants_2.TEST_IDS.title,
                     subtitle: constants_2.TEST_IDS.subtitle,
-                } })), (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] }));
+                } })), (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] }));
 }

package/dist/cjs/helperComponents/DialogSlots.d.ts

@@ -1,8 +1,29 @@
-import { SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
+import { BottomSheetActionButton, FooterActionsOrientation, SheetFooterProps, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
 import { DrawerBodyProps } from './DrawerBody';
 export type DialogHeaderProps = SheetHeaderProps;
 export type DialogBodyProps = DrawerBodyProps;
-export type DialogFooterProps = SheetFooterProps;
-export declare const DialogHeader: typeof SheetHeader;
-export declare const DialogFooter: typeof SheetFooter;
+export type DialogFooterProps = SheetFooterProps & {
+    /** Основная кнопка. Задаёт штатную раскладку футера — вместо `children`. */
+    approveButton?: BottomSheetActionButton;
+    /** Кнопка отмены. */
+    cancelButton?: BottomSheetActionButton;
+    /** Дополнительная (третья) кнопка. */
+    additionalButton?: BottomSheetActionButton;
+    /** Ориентация кнопок при ровно двух действиях. */
+    footerActionsOrientation?: FooterActionsOrientation;
+};
+/**
+ * Шапка панели вместе с верхней safe-area.
+ *
+ * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
+ * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
+ */
+export declare function DialogHeader(props: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
+ *
+ * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
+ * раскладку в этом случае обеспечивает потребитель.
+ */
+export declare function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogBody(props: DialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/DialogSlots.js

@@ -1,12 +1,41 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogFooter = exports.DialogHeader = void 0;
+exports.DialogHeader = DialogHeader;
+exports.DialogFooter = DialogFooter;
 exports.DialogBody = DialogBody;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const constants_1 = require("../constants");
 const DrawerBody_1 = require("./DrawerBody");
-exports.DialogHeader = bottom_sheet_1.SheetHeader;
-exports.DialogFooter = bottom_sheet_1.SheetFooter;
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Шапка панели вместе с верхней safe-area.
+ *
+ * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
+ * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
+ */
+function DialogHeader(props) {
+    const isSheet = (0, bottom_sheet_1.useOverlaySurface)() === bottom_sheet_1.OVERLAY_SURFACE.Sheet;
+    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 })] }));
+}
+/**
+ * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
+ *
+ * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
+ * раскладку в этом случае обеспечивает потребитель.
+ */
+function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }) {
+    const isSheet = (0, bottom_sheet_1.useOverlaySurface)() === bottom_sheet_1.OVERLAY_SURFACE.Sheet;
+    const hasActions = Boolean(approveButton || cancelButton || additionalButton);
+    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: {
+                        approve: constants_1.TEST_IDS.footerApprove,
+                        cancel: constants_1.TEST_IDS.footerCancel,
+                        additional: constants_1.TEST_IDS.footerAdditional,
+                    } })) : (children) })] }));
+}
 function DialogBody(props) {
     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 });
 }

package/dist/cjs/helperComponents/DrawerBody/DrawerBody.d.ts

@@ -1,4 +1,4 @@
 import { SheetBodyProps } from '@cloud-ru/ds-bottom-sheet';
 export type DrawerBodyProps = SheetBodyProps;
 /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
-export declare function DrawerBody({ content, children, bodyPadding, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerBody({ content, children, bodyPadding, innerRef, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/DrawerBody/DrawerBody.js

@@ -11,7 +11,8 @@ const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
-function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
+function DrawerBody({ content, children, bodyPadding = true, innerRef, className, ...rest }) {
     const heightAutoVertical = (0, bottom_sheet_1.useOverlayBodyHeightAuto)();
-    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 }));
+    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 }));
 }
+(0, utils_1.withInnerRefSupport)(DrawerBody);

package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.d.ts

@@ -4,4 +4,4 @@ import { DrawerProps } from '../../components/Drawer/types';
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-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;
+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;

package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.js

@@ -10,13 +10,13 @@ const constants_1 = require("../../constants");
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-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 }) {
+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 }) {
     // Футер собирает сам `BottomSheet`.
     return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet
-    // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+    // Дефолт `withDividers` в sheet'е — `true`; у Drawer'а вид исторически без разделителей.
     , { 
-        // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
-        withDividers: false, open: open, onClose: onClose, showBackdrop: showBlackout, title: title, subtitle: subtitle, slotAfterTitle: slotAfterTitle, onBackButtonClick: onBackButtonClick, media: media, content: content, approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, footer: footer, 
+        // Дефолт `withDividers` в sheet'е — `true`; у Drawer'а вид исторически без разделителей.
+        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, 
         // Те же id футера, что у desktop-поверхности — стабильный селектор при свапе surface.
         footerTestIds: {
             approve: constants_1.TEST_IDS.footerApprove,

package/dist/cjs/helperComponents/styles.module.css

@@ -0,0 +1,15 @@
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}