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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "1.0.6",
+  "version": "1.0.7-preview-0a01eea8.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-popup-private": "^1.0.4",
-    "@cloud-ru/ds-portal-context": "^1.0.1",
-    "@cloud-ru/ds-tooltip": "^1.0.4",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-materials": "^1.0.1",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-bottom-sheet": "^1.0.5"
+    "@cloud-ru/ds-materials": "1.0.1",
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-bottom-sheet": "1.0.6-preview-0a01eea8.0",
+    "@cloud-ru/ds-utils": "1.1.0",
+    "@cloud-ru/ds-tooltip": "1.0.4",
+    "@cloud-ru/ds-popup-private": "1.0.5-preview-0a01eea8.0",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-scroll": "1.0.2"
   }
 }

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