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

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.1.0 (2026-09-01)
+
+### Features
+
+- **FF-8873:** align drawer slots with window master and forward second title, content ref and dividers ([2c7dadf](https://github.com/cloud-ru-tech/snack-v2/commit/2c7dadfdb29988c1fa1dc42b4c22bea2419d6e67))
+- **FF-8873:** render popup second-title slot on window surface and add body innerRef ([60771ea](https://github.com/cloud-ru-tech/snack-v2/commit/60771ea6d3ba7fa12deae4a19aba922846383835))
+
 ## 1.0.6 (2026-08-28)
 
 **Note:** Version bump only for package @ds/drawer

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/components/DrawerCustom/DrawerCustom.js

@@ -59,7 +59,7 @@ function DrawerFrame(props) {
     const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
     return ((0, jsx_runtime_1.jsx)(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
             section: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className),
-        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: styles_module_scss_1.default.prefixCls, ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.scrollLock, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.scrollLock, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
 }
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.

package/dist/cjs/components/DrawerCustom/constants.js

@@ -1,18 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.motionProps = exports.motion = exports.maskMotion = void 0;
-const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.maskMotion = {
     motionAppear: true,
-    motionName: styles_module_scss_1.default.maskMotionName,
+    motionName: 'maskMotion',
 };
 const motion = placement => ({
     motionAppear: true,
     motionDeadline: 300,
-    motionName: `${styles_module_scss_1.default.panelMotionName}-${placement}`,
+    motionName: `panelMotion-${placement}`,
 });
 exports.motion = motion;
 exports.motionProps = {

package/dist/cjs/components/DrawerCustom/hooks/useDrawerResize.js

@@ -1,15 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDrawerResize = useDrawerResize;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
-const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
-const DRAGGER_SELECTOR = `.${styles_module_scss_1.default.prefixCls}-resizable-dragger`;
+const DRAGGER_SELECTOR = '.snack-rc-drawer-resizable-dragger';
 function useDrawerResize({ position, resizable: resizableProp }) {
     const targetRef = (0, react_1.useRef)(null);
     const targetRefCallbackRef = (0, react_1.useRef)();