@cloud-ru/ds-drawer 1.0.6 → 1.0.7-preview-0a01eea8.0

package/README.md

@@ -248,6 +248,7 @@ export function NestedDrawer() {
 | `closeOnPopstate` | `boolean` | — | Закрывать дровер при перемещении по истории браузера |
 | `container` | `string \| HTMLElement` | — | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
 | `content` | `ReactNode` | — | Содержимое body (альтернатива `children`). |
+| `contentRef` | `Ref<HTMLElement>` | — | Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). |
 | `data-test-id` | `string` | — |  |
 | `disableMotions` | `boolean` | `false` | Отключить анимации |
 | `footer` | `(ReactElement<any, string \| JSXElementConstructor<any>> & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<...> \| ReactPortal \| null))` | — | Футер <br/> Произвольный футер. Приоритетнее `approveButton` / `cancelButton` / `additionalButton`. |
@@ -265,12 +266,14 @@ export function NestedDrawer() {
 | `showBlackout` | `boolean` | `true` | Отображение темной подложки |
 | `showButtonClosed` | `boolean` | `true` | Отображение кнопки закрытия в шапке дровера |
 | `slotAfterTitle` | `ReactNode` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
+| `slotSecondTitle` | `ReactNode` | — | Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`. <br/> Рендерится на обеих поверхностях: `secondWrapper` в мастере `bottomSheet`, <br/> `subHeadlineWrapper` в мастере `window` (modal / drawer). |
 | `snapIndex` | `number` | — | Controlled-индекс активного snap'а. Если задан, sheet всегда находится на этом snap'е; <br/> swipe-up/down вызывают `onSnapIndexChange`, но не меняют позицию сами — consumer должен <br/> передать новое значение. |
 | `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/> фиксированных позиций его «контентная» высота не определена. |
 | `subtitle` | `ReactNode` | — | Текстовая строка-подзаголовок под title. |
 | `swipeEnabled` | `boolean` | `true` | Включает swipe-down для закрытия / swipe-up для раскрытия на следующий snap-point. <br/> При `swipeEnabled=false` snap-point по-прежнему можно переключить через controlled `snapIndex` prop'ом. |
 | `title` | `ReactNode` | — | Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). |
 | `width` | `Width` | `'s'` | Ширина (только при position: "left" \| "right") |
+| `withDividers` | `boolean` | `false` | Только mobile: разделители между шапкой/контентом/футером sheet'а. |
 
 ##### Related types
 
@@ -286,6 +289,7 @@ export function NestedDrawer() {
 | `closeOnPopstate` | `boolean \| undefined` | — | Закрывать дровер при перемещении по истории браузера |
 | `container` | `string \| HTMLElement \| undefined` | — | Контейнер в котором будет рендерится Drawer. По-умолчанию - body |
 | `content` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Содержимое body (альтернатива `children`). |
+| `contentRef` | `Ref<HTMLElement> \| undefined` | — | Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). |
 | `data-test-id` | `string \| undefined` | — |  |
 | `disableMotions` | `boolean \| undefined` | — | Отключить анимации |
 | `footer` | `(ReactElement<any, string \| JSXElementConstructor<any>> & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null)) \| undefined` | — | Футер <br/> Произвольный футер. Приоритетнее `approveButton` / `cancelButton` / `additionalButton`. |
@@ -303,12 +307,14 @@ export function NestedDrawer() {
 | `showBlackout` | `boolean \| undefined` | — | Отображение темной подложки |
 | `showButtonClosed` | `boolean \| undefined` | — | Отображение кнопки закрытия в шапке дровера |
 | `slotAfterTitle` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
+| `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). |
 | `snapIndex` | `number \| undefined` | — | Controlled-индекс активного snap'а. Если задан, sheet всегда находится на этом snap'е; <br/> swipe-up/down вызывают `onSnapIndexChange`, но не меняют позицию сами — consumer должен <br/> передать новое значение. |
 | `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/> фиксированных позиций его «контентная» высота не определена. |
 | `subtitle` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Текстовая строка-подзаголовок под title. |
 | `swipeEnabled` | `boolean \| undefined` | — | Включает swipe-down для закрытия / swipe-up для раскрытия на следующий snap-point. <br/> При `swipeEnabled=false` snap-point по-прежнему можно переключить через controlled `snapIndex` prop'ом. |
 | `title` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). |
 | `width` | `Width` | — | Ширина (только при position: "left" \| "right") |
+| `withDividers` | `boolean \| undefined` | — | Только mobile: разделители между шапкой/контентом/футером sheet'а. |
 
 - `Position` = `"bottom"` \| `"left"` \| `"right"` \| `"top"`
 

package/dist/cjs/components/Drawer/styles.module.css

@@ -1,19 +1,3 @@
 .drawer{
   box-sizing:border-box;
-}
-
-.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)));
 }

package/dist/cjs/components/Drawer/types.d.ts

@@ -1,16 +1,20 @@
 import { BottomSheetActionButton, BottomSheetProps, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
 import { WithSupportProps } from '@cloud-ru/ds-utils';
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { DialogBodyProps, DialogHeaderProps } from '../../helperComponents';
 import { DrawerCustomProps } from '../DrawerCustom';
 /**
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
  *
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer` (на mobile игнорируются).
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
  */
-export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
+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'> & {
+    /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
+    contentRef?: Ref<HTMLElement>;
+    /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */
+    withDividers?: boolean;
     /** Текстовая строка-подзаголовок под title. */
     subtitle?: ReactNode;
     /** CSS-класс */

package/dist/cjs/components/DrawerCustom/DrawerCustom.d.ts

@@ -1,4 +1,4 @@
-import { DialogBody, DialogBodyProps, DialogFooterProps, DialogHeaderProps } from '../../helperComponents';
+import { DialogBody, DialogBodyProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps } from '../../helperComponents';
 import { DrawerCustomProps } from './types';
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
@@ -9,7 +9,7 @@ export declare namespace DrawerCustom {
     type HeaderProps = DialogHeaderProps;
     type BodyProps = DialogBodyProps;
     type FooterProps = DialogFooterProps;
-    const Header: typeof import("@cloud-ru/ds-bottom-sheet").SheetHeader;
+    const Header: typeof DialogHeader;
     const Body: typeof DialogBody;
-    const Footer: typeof import("@cloud-ru/ds-bottom-sheet").SheetFooter;
+    const Footer: typeof DialogFooter;
 }

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)));
+}

package/dist/cjs/style.css

@@ -1,22 +1,6 @@
 .drawer{
   box-sizing:border-box;
 }
-
-.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)));
-}
 @charset "UTF-8";
 .drawerRoot:global(.snack-rc-drawer){
   pointer-events:none;
@@ -548,4 +532,19 @@
   height:auto !important;
   min-height:0;
   max-height:100%;
+}
+.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)));
 }

package/dist/esm/components/Drawer/styles.module.css

@@ -1,19 +1,3 @@
 .drawer{
   box-sizing:border-box;
-}
-
-.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)));
 }

package/dist/esm/components/Drawer/types.d.ts

@@ -1,16 +1,20 @@
 import { BottomSheetActionButton, BottomSheetProps, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
 import { WithSupportProps } from '@cloud-ru/ds-utils';
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { DialogBodyProps, DialogHeaderProps } from '../../helperComponents/index.js';
 import { DrawerCustomProps } from '../DrawerCustom/index.js';
 /**
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
  *
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer` (на mobile игнорируются).
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
  */
-export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
+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'> & {
+    /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
+    contentRef?: Ref<HTMLElement>;
+    /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */
+    withDividers?: boolean;
     /** Текстовая строка-подзаголовок под title. */
     subtitle?: ReactNode;
     /** CSS-класс */

package/dist/esm/components/DrawerCustom/DrawerCustom.d.ts

@@ -1,4 +1,4 @@
-import { DialogBody, DialogBodyProps, DialogFooterProps, DialogHeaderProps } from '../../helperComponents/index.js';
+import { DialogBody, DialogBodyProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps } from '../../helperComponents/index.js';
 import { DrawerCustomProps } from './types.js';
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
@@ -9,7 +9,7 @@ export declare namespace DrawerCustom {
     type HeaderProps = DialogHeaderProps;
     type BodyProps = DialogBodyProps;
     type FooterProps = DialogFooterProps;
-    const Header: typeof import("@cloud-ru/ds-popup-private").PopupHeader;
+    const Header: typeof DialogHeader;
     const Body: typeof DialogBody;
-    const Footer: typeof import("@cloud-ru/ds-popup-private").PopupFooter;
+    const Footer: typeof DialogFooter;
 }

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,