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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "1.0.7-preview-5f569f3c.0",
+  "version": "1.1.0",
   "description": "Пакет выезжающих панелей — компоненты Drawer и DrawerCustom с едиными токенами позиции и ширины.",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     "classnames": "^2.5.1",
     "react-remove-scroll": "^2.7.2",
     "tabbable": "^6.5.0",
-    "@cloud-ru/ds-adaptive": "1.0.1",
-    "@cloud-ru/ds-bottom-sheet": "1.0.6-preview-5f569f3c.0",
-    "@cloud-ru/ds-materials": "1.0.1",
-    "@cloud-ru/ds-popup-private": "1.0.5-preview-5f569f3c.0",
-    "@cloud-ru/ds-portal-context": "1.0.1",
-    "@cloud-ru/ds-scroll": "1.0.2",
-    "@cloud-ru/ds-tooltip": "1.0.4",
-    "@cloud-ru/ds-utils": "1.1.0"
+    "@cloud-ru/ds-adaptive": "^1.0.1",
+    "@cloud-ru/ds-bottom-sheet": "^1.1.0",
+    "@cloud-ru/ds-materials": "^1.0.1",
+    "@cloud-ru/ds-popup-private": "^1.1.0",
+    "@cloud-ru/ds-portal-context": "^1.0.1",
+    "@cloud-ru/ds-scroll": "^1.0.2",
+    "@cloud-ru/ds-tooltip": "^1.0.4",
+    "@cloud-ru/ds-utils": "^1.1.0"
   }
 }

package/src/components/Drawer/styles.module.scss

@@ -1,26 +1,7 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
-@use '@cloud-ru/ds-figma-variables/build/scss/components/drawer.module' as drawer;
 
 .drawer {
   box-sizing: border-box;
 }
 
-.safeAreaTop {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-
-  padding-top: base.simple-var(drawer.$drawer, 'anatomy', 'container', 'safeArea', 'padding-top');
-}
-
-.safeAreaBottom {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-
-  padding-bottom: base.simple-var(drawer.$drawer, 'anatomy', 'container', 'safeArea', 'padding-bottom');
-}
-
 // Desktop-футер: ряд кнопок прижат вправо.

package/src/components/Drawer/types.ts

@@ -1,6 +1,6 @@
 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';
@@ -9,14 +9,18 @@ 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<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick'> &
     Pick<DialogBodyProps, 'content'> & {
+      /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
+      contentRef?: Ref<HTMLElement>;
+      /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */
+      withDividers?: boolean;
       /** Текстовая строка-подзаголовок под title. */
       subtitle?: ReactNode;
       /** CSS-класс */

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -118,7 +118,7 @@ function DrawerFrame(props: DrawerCustomProps) {
       data-height-auto={heightAutoVertical ? true : undefined}
       data-acrylic-appearance='neutral'
       data-acrylic-level='1Level'
-      prefixCls={styles.prefixCls}
+      prefixCls='snack-rc-drawer'
       {...(disableMotions ? {} : motionProps)}
     >
       {/*

package/src/components/DrawerCustom/constants.ts

@@ -1,16 +1,14 @@
 import { DrawerProps } from '@rc-component/drawer';
 
-import styles from './styles.module.scss';
-
 export const maskMotion: DrawerProps['maskMotion'] = {
   motionAppear: true,
-  motionName: styles.maskMotionName,
+  motionName: 'maskMotion',
 };
 
 export const motion: DrawerProps['motion'] = placement => ({
   motionAppear: true,
   motionDeadline: 300,
-  motionName: `${styles.panelMotionName}-${placement}`,
+  motionName: `panelMotion-${placement}`,
 });
 
 export const motionProps: Partial<DrawerProps> = {

package/src/components/DrawerCustom/hooks/useDrawerResize.tsx

@@ -3,10 +3,9 @@ import { isBrowser } from '@cloud-ru/ds-utils';
 import { DrawerProps } from '@rc-component/drawer';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import styles from '../styles.module.scss';
 import { DrawerCustomProps } from '../types';
 
-const DRAGGER_SELECTOR = `.${styles.prefixCls}-resizable-dragger`;
+const DRAGGER_SELECTOR = '.snack-rc-drawer-resizable-dragger';
 
 type UseDrawerResizeParams = Pick<DrawerCustomProps, 'position' | 'resizable'>;
 

package/src/components/DrawerCustom/styles.module.scss

@@ -10,20 +10,6 @@ $draggerWidth: base.$sn-primitive-dimension-4;
 $draggerPosition: calc(drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight - $draggerWidth - base.$sn-primitive-dimension-6);
 $activeDraggerHeight: calc(base.$sn-primitive-dimension-32 + base.$sn-primitive-dimension-24);
 
-// Классы rc-drawer/rc-motion глобальные (css-модуль их не хеширует), поэтому свои — с namespace и
-// версией: оболочка консоли на snack v1 объявляет те же `.maskMotion-*`/`.panelMotion-*` и смещает
-// панель своими правилами. В JS имена отдаёт `:export`. Версию повышать при несовместимом изменении.
-$classVersion: 'v1';
-$prefixCls: 'cloud-ru-ds-drawer-#{$classVersion}';
-$maskMotionName: '#{$prefixCls}-mask-motion';
-$panelMotionName: '#{$prefixCls}-panel-motion';
-
-:export {
-  maskMotionName: #{$maskMotionName};
-  panelMotionName: #{$panelMotionName};
-  prefixCls: #{$prefixCls};
-}
-
 // placement → offscreen transform для panelMotion-*
 $panelMotions: (
   'left': translateX(-100%),
@@ -32,18 +18,14 @@ $panelMotions: (
   'bottom': translateY(100%),
 );
 
-.drawerRoot:global(.#{$prefixCls}) {
+.drawerRoot:global(.snack-rc-drawer) {
   pointer-events: none;
 
   position: fixed;
   z-index: initial;
   inset: 0;
 
-  // 🔴 Не обрезаем панель корнем: пока панель едет трансформом, обрезка заставляет браузер
-  // пересчитывать её в главном потоке каждый кадр — на тяжёлом кадре движение дёргается.
-  // Корень — `position: fixed`, а фиксированные элементы не участвуют в прокрутке документа,
-  // поэтому выехавшая за экран панель полос прокрутки не создаёт.
-  overflow: visible;
+  overflow: hidden;
 
   transition: width 0s ease 0.3s, height 0s ease 0.3s, transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 
@@ -51,12 +33,12 @@ $panelMotions: (
     transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   }
 
-  &:global(.#{$prefixCls}-open) {
+  &:global(.snack-rc-drawer-open) {
     transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   }
 
   :global {
-    .#{$prefixCls}-mask {
+    .snack-rc-drawer-mask {
       pointer-events: auto;
 
       position: absolute;
@@ -70,27 +52,27 @@ $panelMotions: (
 
       transition: opacity 0.2s;
 
-      &.#{$maskMotionName}-enter,
-      &.#{$maskMotionName}-appear {
+      &.maskMotion-enter,
+      &.maskMotion-appear {
         opacity: 0;
       }
 
-      &.#{$maskMotionName}-enter-active,
-      &.#{$maskMotionName}-appear-active {
+      &.maskMotion-enter-active,
+      &.maskMotion-appear-active {
         opacity: 1;
       }
 
-      &.#{$maskMotionName}-leave {
+      &.maskMotion-leave {
         opacity: 1;
         transition: opacity 0.1s;
       }
 
-      &.#{$maskMotionName}-leave-active {
+      &.maskMotion-leave-active {
         opacity: 0;
       }
     }
 
-    .#{$prefixCls}-section {
+    .snack-rc-drawer-section {
       pointer-events: auto;
 
       position: relative;
@@ -108,10 +90,10 @@ $panelMotions: (
       box-shadow: base.$sn-boxShadow-elevation-level5;
     }
 
-    .#{$prefixCls}-content-wrapper {
+    .snack-rc-drawer-content-wrapper {
       pointer-events: none;
       will-change: transform;
-      
+
       position: absolute;
       z-index: initial;
 
@@ -130,7 +112,7 @@ $panelMotions: (
       &[data-position='top'] {
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionTop');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionTop', 'container');
         }
       }
@@ -140,7 +122,7 @@ $panelMotions: (
 
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionBottom');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionBottom', 'container');
         }
       }
@@ -152,7 +134,7 @@ $panelMotions: (
 
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionLeft');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionLeft', 'container');
         }
       }
@@ -164,7 +146,7 @@ $panelMotions: (
 
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionRight');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionRight', 'container');
         }
       }
@@ -207,32 +189,32 @@ $panelMotions: (
       }
 
       @each $placement, $offscreen in $panelMotions {
-        &.#{$panelMotionName}-#{$placement}-enter,
-        &.#{$panelMotionName}-#{$placement}-appear {
+        &.panelMotion-#{$placement}-enter,
+        &.panelMotion-#{$placement}-appear {
           transform: $offscreen;
         }
 
-        &.#{$panelMotionName}-#{$placement}-enter-active,
-        &.#{$panelMotionName}-#{$placement}-appear-active {
+        &.panelMotion-#{$placement}-enter-active,
+        &.panelMotion-#{$placement}-appear-active {
           transform: translate(0);
         }
 
-        &.#{$panelMotionName}-#{$placement}-leave {
+        &.panelMotion-#{$placement}-leave {
           transform: translate(0);
         }
 
-        &.#{$panelMotionName}-#{$placement}-leave-active {
+        &.panelMotion-#{$placement}-leave-active {
           transform: $offscreen;
           transition: transform 0.1s ease-out;
         }
       }
     }
 
-    .#{$prefixCls}-content-wrapper-hidden {
+    .snack-rc-drawer-content-wrapper-hidden {
       display: none;
     }
 
-    .#{$prefixCls}-resizable-dragger {
+    .snack-rc-drawer-resizable-dragger {
       pointer-events: auto;
       cursor: ew-resize;
 
@@ -266,66 +248,66 @@ $panelMotions: (
       }
     }
 
-    .#{$prefixCls}-resizable-dragger-left {
+    .snack-rc-drawer-resizable-dragger-left {
       right: $draggerPosition;
     }
 
-    .#{$prefixCls}-resizable-dragger-right {
+    .snack-rc-drawer-resizable-dragger-right {
       left: $draggerPosition;
     }
   }
 
-  &:global(.#{$prefixCls}-left),
-  &:global(.#{$prefixCls}-right) {
+  &:global(.snack-rc-drawer-left),
+  &:global(.snack-rc-drawer-right) {
     top: 0;
     width: 0%;
     height: 100%;
   }
 
-  &:global(.#{$prefixCls}-left) {
+  &:global(.snack-rc-drawer-left) {
     left: 0;
   }
 
-  &:global(.#{$prefixCls}-right) {
+  &:global(.snack-rc-drawer-right) {
     right: 0;
   }
 
-  &:global(.#{$prefixCls}-top),
-  &:global(.#{$prefixCls}-bottom) {
+  &:global(.snack-rc-drawer-top),
+  &:global(.snack-rc-drawer-bottom) {
     left: 0;
     width: 100%;
     height: 0%;
   }
 
-  &:global(.#{$prefixCls}-top) {
+  &:global(.snack-rc-drawer-top) {
     top: 0;
   }
 
-  &:global(.#{$prefixCls}-bottom) {
+  &:global(.snack-rc-drawer-bottom) {
     bottom: 0;
   }
 
-  &:has(:global(.#{$prefixCls}-resizable-dragger-dragging)) {
+  &:has(:global(.snack-rc-drawer-resizable-dragger-dragging)) {
     cursor: ew-resize;
 
-    :global(.#{$prefixCls}-resizable-dragger) {
+    :global(.snack-rc-drawer-resizable-dragger) {
       height: $activeDraggerHeight;
     }
   }
 
 
-  &:global(.#{$prefixCls}-left.#{$prefixCls}-open),
-  &:global(.#{$prefixCls}-right.#{$prefixCls}-open) {
+  &:global(.snack-rc-drawer-left.snack-rc-drawer-open),
+  &:global(.snack-rc-drawer-right.snack-rc-drawer-open) {
     width: 100%;
   }
 
-  &:global(.#{$prefixCls}-top.#{$prefixCls}-open),
-  &:global(.#{$prefixCls}-bottom.#{$prefixCls}-open) {
+  &:global(.snack-rc-drawer-top.snack-rc-drawer-open),
+  &:global(.snack-rc-drawer-bottom.snack-rc-drawer-open) {
     height: 100%;
   }
 }
 
-.drawerRoot:global(.#{$prefixCls} .#{$prefixCls}-content-wrapper) {
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper) {
   @include m.with-material('acrylic', #{drawer});
 }
 

package/src/constants.ts

@@ -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',
 } as const;
 
 export const WIDTH = {

package/src/helperComponents/DesktopDrawer/DesktopDrawer.tsx

@@ -1,4 +1,3 @@
-import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
 import cn from 'classnames';
 
 import { NESTED_DRAWER_PUSH_DISTANCE } from '../../components/Drawer/constants';
@@ -13,6 +12,7 @@ export function DesktopDrawer({
   media,
   title,
   slotAfterTitle,
+  slotSecondTitle,
   subtitle,
   onBackButtonClick,
   approveButton,
@@ -21,28 +21,14 @@ export function DesktopDrawer({
   footerActionsOrientation,
   footer,
   nestedDrawer,
+  contentRef,
+  // `withDividers` — mobile-only (мастер bottomSheet): молча уходит в `rest` и отбрасывается фреймом.
   className,
   ...rest
 }: DrawerProps) {
-  const showHeader = Boolean(title || subtitle || slotAfterTitle);
-  // Футер: произвольный `footer` (приоритет) либо сборка из слотов через общий `FooterActions`.
-  const footerContent =
-    footer ??
-    (approveButton || cancelButton || additionalButton ? (
-      <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);
+  const showHeader = Boolean(title || subtitle || slotAfterTitle || slotSecondTitle);
+  // Произвольный `footer` приоритетнее кнопок-слотов; раскладку слотов делает сам `DrawerCustom.Footer`.
+  const hasFooter = Boolean(footer || approveButton || cancelButton || additionalButton);
 
   return (
     <DrawerCustom
@@ -53,12 +39,11 @@ export function DesktopDrawer({
     >
       {media}
 
-      <div className={styles.safeAreaTop} />
-
       {showHeader && (
         <DrawerCustom.Header
           title={title}
           slotAfterTitle={slotAfterTitle}
+          slotSecondTitle={slotSecondTitle}
           subtitle={subtitle}
           onBackButtonClick={onBackButtonClick}
           // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
@@ -71,12 +56,18 @@ export function DesktopDrawer({
         />
       )}
 
-      <DrawerCustom.Body data-test-id={TEST_IDS.body} content={content} />
-
-      <div className={styles.safeAreaBottom} />
+      <DrawerCustom.Body data-test-id={TEST_IDS.body} innerRef={contentRef} content={content} />
 
-      {footerContent != null && (
-        <DrawerCustom.Footer data-test-id={TEST_IDS.footer}>{footerContent}</DrawerCustom.Footer>
+      {hasFooter && (
+        <DrawerCustom.Footer
+          data-test-id={TEST_IDS.footer}
+          approveButton={footer ? undefined : approveButton}
+          cancelButton={footer ? undefined : cancelButton}
+          additionalButton={footer ? undefined : additionalButton}
+          footerActionsOrientation={footerActionsOrientation}
+        >
+          {footer}
+        </DrawerCustom.Footer>
       )}
 
       {nestedDrawer}

package/src/helperComponents/DialogSlots.tsx

@@ -1,4 +1,7 @@
 import {
+  BottomSheetActionButton,
+  FooterActions,
+  FooterActionsOrientation,
   OVERLAY_SURFACE,
   SheetBody,
   SheetFooter,
@@ -8,17 +11,85 @@ import {
   useOverlaySurface,
 } from '@cloud-ru/ds-bottom-sheet';
 
+import { TEST_IDS } from '../constants';
 import { DrawerBody, DrawerBodyProps } from './DrawerBody';
+import styles from './styles.module.scss';
 
 // Header и Footer surface-aware реализует сам `PopupHeader`/`PopupFooter` (`SheetHeader`/`SheetFooter`):
 // он читает `OverlaySurfaceProvider` и рисует window-раскладку на drawer, bottomSheet — на sheet.
 // Свап остаётся только для Body (desktop-frame vs sheet).
 export type DialogHeaderProps = SheetHeaderProps;
 export type DialogBodyProps = DrawerBodyProps;
-export type DialogFooterProps = SheetFooterProps;
+export type DialogFooterProps = SheetFooterProps & {
+  /** Основная кнопка. Задаёт штатную раскладку футера — вместо `children`. */
+  approveButton?: BottomSheetActionButton;
+  /** Кнопка отмены. */
+  cancelButton?: BottomSheetActionButton;
+  /** Дополнительная (третья) кнопка. */
+  additionalButton?: BottomSheetActionButton;
+  /** Ориентация кнопок при ровно двух действиях. */
+  footerActionsOrientation?: FooterActionsOrientation;
+};
 
-export const DialogHeader = SheetHeader;
-export const DialogFooter = SheetFooter;
+/**
+ * Шапка панели вместе с верхней safe-area.
+ *
+ * Отступ лежит здесь, а не во фрейме: иначе его теряет ручная композиция из
+ * `DrawerCustom.Header/Body/Footer`. На `sheet` не нужен — там свой `padding-top` в токенах.
+ */
+export function DialogHeader(props: DialogHeaderProps) {
+  const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
+
+  return (
+    <>
+      {!isSheet && <div className={styles.safeAreaTop} />}
+      <SheetHeader {...props} />
+    </>
+  );
+}
+
+/**
+ * Футер панели вместе с зазором от `Body` (нижняя safe-area; на `sheet` его даёт сам мастер).
+ *
+ * Кнопки-слоты раскладывает `FooterActions`. `children` — для нестандартного содержимого:
+ * раскладку в этом случае обеспечивает потребитель.
+ */
+export function DialogFooter({
+  approveButton,
+  cancelButton,
+  additionalButton,
+  footerActionsOrientation,
+  children,
+  ...rest
+}: DialogFooterProps) {
+  const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
+  const hasActions = Boolean(approveButton || cancelButton || additionalButton);
+
+  return (
+    <>
+      {!isSheet && <div className={styles.safeAreaBottom} />}
+      <SheetFooter {...rest}>
+        {hasActions ? (
+          <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
+        )}
+      </SheetFooter>
+    </>
+  );
+}
 
 export function DialogBody(props: DialogBodyProps) {
   return useOverlaySurface() === OVERLAY_SURFACE.Sheet ? <SheetBody {...props} /> : <DrawerBody {...props} />;

package/src/helperComponents/DrawerBody/DrawerBody.tsx

@@ -1,6 +1,6 @@
 import { SheetBodyProps, 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.scss';
@@ -8,11 +8,12 @@ import styles from './styles.module.scss';
 export type DrawerBodyProps = SheetBodyProps;
 
 /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
-export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }: DrawerBodyProps) {
+export function DrawerBody({ content, children, bodyPadding = true, innerRef, className, ...rest }: DrawerBodyProps) {
   const heightAutoVertical = useOverlayBodyHeightAuto();
 
   return (
     <Scroll
+      ref={innerRef}
       size='m'
       barHideStrategy='never'
       className={cn(styles.body, heightAutoVertical && styles.bodyHeightAuto, className)}
@@ -23,3 +24,5 @@ export function DrawerBody({ content, children, bodyPadding = true, className, .
     </Scroll>
   );
 }
+
+withInnerRefSupport(DrawerBody);

package/src/helperComponents/MobileDrawer/MobileDrawer.tsx

@@ -14,6 +14,7 @@ export function MobileDrawer({
   media,
   title,
   slotAfterTitle,
+  slotSecondTitle,
   subtitle,
   onBackButtonClick,
   approveButton,
@@ -33,19 +34,21 @@ export function MobileDrawer({
   snapIndex,
   onSnapIndexChange,
   safeArea,
+  withDividers = false,
   ...rest
 }: DrawerProps) {
   // Футер собирает сам `BottomSheet`.
   return (
     <BottomSheet
-      // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
-      withDividers={false}
+      // Дефолт `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}

package/src/helperComponents/styles.module.scss

@@ -0,0 +1,22 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/drawer.module' as drawer;
+
+// Safe-area окна описана в слотах, а не во фрейме: иначе её теряет ручная композиция из
+// `DrawerCustom.Header/Body/Footer`, и заголовок прилипает к верхней кромке панели.
+.safeAreaTop {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-top: base.simple-var(drawer.$drawer, 'anatomy', 'container', 'safeArea', 'padding-top');
+}
+
+.safeAreaBottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-bottom: base.simple-var(drawer.$drawer, 'anatomy', 'container', 'safeArea', 'padding-bottom');
+}