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

package/dist/esm/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/esm/constants.js

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

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

@@ -1,3 +1,3 @@
 import { DrawerProps } from '../../components/Drawer/types.js';
 /** 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/esm/helperComponents/DesktopDrawer/DesktopDrawer.js

@@ -1,26 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
 import cn from 'classnames';
 import { NESTED_DRAWER_PUSH_DISTANCE } from '../../components/Drawer/constants.js';
 import styles from '../../components/Drawer/styles.module.css';
 import { DrawerCustom } from '../../components/DrawerCustom/index.js';
 import { TEST_IDS } from '../../constants.js';
 /** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
-export 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 ? (_jsx(FooterActions, { surface: 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
-                approve: TEST_IDS.footerApprove,
-                cancel: TEST_IDS.footerCancel,
-                additional: TEST_IDS.footerAdditional,
-            } })) : null);
-    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, 
+export 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 (_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, 
                 // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
                 // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
                 testIds: {
                     header: TEST_IDS.header,
                     title: TEST_IDS.title,
                     subtitle: TEST_IDS.subtitle,
-                } })), _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] }));
+                } })), _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] }));
 }

package/dist/esm/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/index.js';
 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/esm/helperComponents/DialogSlots.js

@@ -1,8 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { OVERLAY_SURFACE, SheetBody, SheetFooter, SheetHeader, useOverlaySurface, } from '@cloud-ru/ds-bottom-sheet';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FooterActions, OVERLAY_SURFACE, SheetBody, SheetFooter, SheetHeader, useOverlaySurface, } from '@cloud-ru/ds-bottom-sheet';
+import { TEST_IDS } from '../constants.js';
 import { DrawerBody } from './DrawerBody/index.js';
-export const DialogHeader = SheetHeader;
-export const DialogFooter = SheetFooter;
+import styles from './styles.module.css';
+/**
+ * Шапка панели вместе с верхней safe-area.
+ *
+ * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
+ * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
+ */
+export function DialogHeader(props) {
+    const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
+    return (_jsxs(_Fragment, { children: [!isSheet && _jsx("div", { className: styles.safeAreaTop }), _jsx(SheetHeader, { ...props })] }));
+}
+/**
+ * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
+ *
+ * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
+ * раскладку в этом случае обеспечивает потребитель.
+ */
+export function DialogFooter({ approveButton, cancelButton, additionalButton, footerActionsOrientation, children, ...rest }) {
+    const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
+    const hasActions = Boolean(approveButton || cancelButton || additionalButton);
+    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: {
+                        approve: TEST_IDS.footerApprove,
+                        cancel: TEST_IDS.footerCancel,
+                        additional: TEST_IDS.footerAdditional,
+                    } })) : (children) })] }));
+}
 export function DialogBody(props) {
     return useOverlaySurface() === OVERLAY_SURFACE.Sheet ? _jsx(SheetBody, { ...props }) : _jsx(DrawerBody, { ...props });
 }

package/dist/esm/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/esm/helperComponents/DrawerBody/DrawerBody.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useOverlayBodyHeightAuto } from '@cloud-ru/ds-bottom-sheet';
 import { Scroll } from '@cloud-ru/ds-scroll';
-import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { extractSupportProps, withInnerRefSupport } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import styles from './styles.module.css';
 /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
-export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
+export function DrawerBody({ content, children, bodyPadding = true, innerRef, className, ...rest }) {
     const heightAutoVertical = useOverlayBodyHeightAuto();
-    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 }));
+    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 }));
 }
+withInnerRefSupport(DrawerBody);

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

@@ -4,4 +4,4 @@ import { DrawerProps } from '../../components/Drawer/types.js';
  * (`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/esm/helperComponents/MobileDrawer/MobileDrawer.js

@@ -7,13 +7,13 @@ import { TEST_IDS } from '../../constants.js';
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-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 }) {
+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 }) {
     // Футер собирает сам `BottomSheet`.
     return (_jsx(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: TEST_IDS.footerApprove,

package/dist/esm/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)));
+}