@cloud-ru/ds-drawer 1.0.6-preview-5926424e.0 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "1.0.6-preview-5926424e.0",
+  "version": "1.0.6",
   "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.5-preview-5926424e.0",
-    "@cloud-ru/ds-materials": "1.0.1",
-    "@cloud-ru/ds-popup-private": "1.0.4-preview-5926424e.0",
-    "@cloud-ru/ds-portal-context": "1.0.1",
-    "@cloud-ru/ds-scroll": "1.0.2",
-    "@cloud-ru/ds-tooltip": "1.0.3",
-    "@cloud-ru/ds-utils": "1.1.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"
   }
 }

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

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

package/src/helperComponents/DesktopDrawer/DesktopDrawer.tsx

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

package/src/helperComponents/DialogSlots.tsx

@@ -1,7 +1,4 @@
 import {
-  BottomSheetActionButton,
-  FooterActions,
-  FooterActionsOrientation,
   OVERLAY_SURFACE,
   SheetBody,
   SheetFooter,
@@ -11,85 +8,17 @@ 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 & {
-  /** Основная кнопка. Задаёт штатную раскладку футера — вместо `children`. */
-  approveButton?: BottomSheetActionButton;
-  /** Кнопка отмены. */
-  cancelButton?: BottomSheetActionButton;
-  /** Дополнительная (третья) кнопка. */
-  additionalButton?: BottomSheetActionButton;
-  /** Ориентация кнопок при ровно двух действиях. */
-  footerActionsOrientation?: FooterActionsOrientation;
-};
+export type DialogFooterProps = SheetFooterProps;
 
-/**
- * Шапка панели вместе с верхней 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 const DialogHeader = SheetHeader;
+export const DialogFooter = 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, withInnerRefSupport } from '@cloud-ru/ds-utils';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 
 import styles from './styles.module.scss';
@@ -8,12 +8,11 @@ import styles from './styles.module.scss';
 export type DrawerBodyProps = SheetBodyProps;
 
 /** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
-export function DrawerBody({ content, children, bodyPadding = true, innerRef, className, ...rest }: DrawerBodyProps) {
+export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }: DrawerBodyProps) {
   const heightAutoVertical = useOverlayBodyHeightAuto();
 
   return (
     <Scroll
-      ref={innerRef}
       size='m'
       barHideStrategy='never'
       className={cn(styles.body, heightAutoVertical && styles.bodyHeightAuto, className)}
@@ -24,5 +23,3 @@ export function DrawerBody({ content, children, bodyPadding = true, innerRef, cl
     </Scroll>
   );
 }
-
-withInnerRefSupport(DrawerBody);

package/src/helperComponents/MobileDrawer/MobileDrawer.tsx

@@ -14,7 +14,6 @@ export function MobileDrawer({
   media,
   title,
   slotAfterTitle,
-  slotSecondTitle,
   subtitle,
   onBackButtonClick,
   approveButton,
@@ -34,21 +33,19 @@ export function MobileDrawer({
   snapIndex,
   onSnapIndexChange,
   safeArea,
-  withDividers = false,
   ...rest
 }: DrawerProps) {
   // Футер собирает сам `BottomSheet`.
   return (
     <BottomSheet
-      // Дефолт `withDividers` в sheet'е — `true`; у Drawer'а вид исторически без разделителей.
-      withDividers={withDividers}
+      // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+      withDividers={false}
       open={open}
       onClose={onClose}
       showBackdrop={showBlackout}
       title={title}
       subtitle={subtitle}
       slotAfterTitle={slotAfterTitle}
-      slotSecondTitle={slotSecondTitle}
       onBackButtonClick={onBackButtonClick}
       media={media}
       content={content}

package/dist/cjs/helperComponents/styles.module.css

@@ -1,15 +0,0 @@
-.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/helperComponents/styles.module.css

@@ -1,15 +0,0 @@
-.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/src/helperComponents/styles.module.scss

@@ -1,22 +0,0 @@
-@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');
-}