@cloud-ru/ds-drawer 2.0.1-preview-20b4671f.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "2.0.1-preview-20b4671f.0",
+  "version": "2.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-scroll": "1.0.5",
-    "@cloud-ru/ds-popup-private": "1.1.10-preview-20b4671f.0",
-    "@cloud-ru/ds-portal-context": "1.0.2",
-    "@cloud-ru/ds-tooltip": "1.0.12-preview-20b4671f.0",
-    "@cloud-ru/ds-adaptive": "1.0.2",
-    "@cloud-ru/ds-materials": "2.0.1",
-    "@cloud-ru/ds-utils": "1.2.0",
-    "@cloud-ru/ds-bottom-sheet": "2.0.1-preview-20b4671f.0"
+    "@cloud-ru/ds-adaptive": "^1.0.2",
+    "@cloud-ru/ds-materials": "^2.0.1",
+    "@cloud-ru/ds-popup-private": "^1.1.10",
+    "@cloud-ru/ds-portal-context": "^1.0.2",
+    "@cloud-ru/ds-bottom-sheet": "^2.0.1",
+    "@cloud-ru/ds-scroll": "^1.0.5",
+    "@cloud-ru/ds-tooltip": "^1.0.12",
+    "@cloud-ru/ds-utils": "^1.2.0"
   }
 }

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -54,6 +54,7 @@ function DrawerFrame(props: DrawerCustomProps) {
     checkElement,
     width: userWidth,
     resizable: drawerResizable,
+    isResizing,
   } = useDrawerResize({
     resizable,
     position,
@@ -112,6 +113,7 @@ function DrawerFrame(props: DrawerCustomProps) {
       }}
       size={isPredefinedWidth ? 'null' : width}
       {...extractSupportProps(rest)}
+      data-resizing={isResizing || undefined}
       data-content-wrapper
       data-position={position}
       data-width={isPredefinedWidth ? width : undefined}

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

@@ -3,6 +3,7 @@ import { isBrowser } from '@cloud-ru/ds-utils';
 import { DrawerProps } from '@rc-component/drawer';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
+import { RESIZABLE_MAX_FULL } from '../../../constants';
 import styles from '../styles.module.scss';
 import { DrawerCustomProps } from '../types';
 
@@ -19,8 +20,12 @@ type UseDrawerResizeResult = {
   resizable: DrawerProps['resizable'];
   /** Ширина ползунка в пикселях */
   width?: number;
+  /** Флаг, указывающий, что дровер в процессе ресайза */
+  isResizing: boolean;
 };
 
+const getFullMaxWidth = () => (isBrowser() ? Math.max(0, document.documentElement.clientWidth) : Infinity);
+
 export function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult {
   const targetRef = useRef<HTMLElement | null>(null);
   const targetRefCallbackRef = useRef<(node: HTMLElement) => void | undefined>();
@@ -56,31 +61,43 @@ export function useDrawerResize({ position, resizable: resizableProp }: UseDrawe
     </Tooltip>
   ) : null;
 
+  const { onResize, onResizeEnd, max, min } = resizableProp ?? {};
+  const resizeEnabled = Boolean(resizableProp);
+  // Сколько стартовой ширины, которую держит rc-drawer, не помещается в окно: оно могло сузиться, пока дровер
+  // был закрыт или открыт. CSS обрезает панель визуально, а rc-drawer считает ресайз от «виртуальной» ширины.
+  const excessRef = useRef(0);
+
   const resizable = useMemo(
     () =>
-      resizableProp
+      resizeEnabled
         ? ({
-            onResize: value => {
-              if (value < (resizableProp?.min || 0)) return;
-              if (value > (resizableProp?.max || Infinity)) return;
+            onResize: rawValue => {
+              // Смещение мыши rc-drawer прибавляет к устаревшей стартовой ширине: вычитаем лишнее.
+              const limit = max === RESIZABLE_MAX_FULL ? getFullMaxWidth() : max;
+              const value = Math.min(rawValue - excessRef.current, limit ?? Infinity);
+
+              if (value < (min || 0)) return;
 
               setWidth(value);
 
-              resizableProp?.onResize?.(value);
+              onResize?.(value);
             },
             onResizeEnd: () => {
               setOpen(false);
               setMuted(false);
 
-              resizableProp?.onResizeEnd?.(width ?? 0);
+              onResizeEnd?.(width ?? 0);
             },
-            onResizeStart: () => {
+            // rc-drawer передаёт во время выполнения реальную стартовую ширину (в типах аргумента нет).
+            onResizeStart: (startSize?: number) => {
+              excessRef.current =
+                max === RESIZABLE_MAX_FULL && startSize !== undefined ? Math.max(0, startSize - getFullMaxWidth()) : 0;
               setMuted(true);
             },
           } satisfies DrawerProps['resizable'])
         : undefined,
-    [resizableProp, width],
+    [width, max, min, onResize, onResizeEnd, resizeEnabled],
   );
 
-  return { tooltip, checkElement, resizable, width };
+  return { tooltip, checkElement, resizable, width, isResizing: muted };
 }

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

@@ -175,6 +175,12 @@ $panelMotions: (
         // Ширина в макете — это ширина самой панели; горизонтальный паддинг обёртки
         // (зона перетаскивания) лежит снаружи и не должен её сужать.
         box-sizing: content-box;
+
+        // `max-width: 100%` у обёртки считается по контенту, а паддинг (зона перетаскивания и отступ
+        // до края) лежит снаружи — вычитаем его, иначе панель упирается в край экрана.
+        max-width: calc(
+          100% - #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingLeft} - #{drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight}
+        );
         height: 100%;
 
         @each $width in $widthSizes {
@@ -206,6 +212,12 @@ $panelMotions: (
         inset: auto 0 0;
       }
 
+      &[data-resizing] {
+        * {
+          pointer-events: none;
+        }
+      }
+
       @each $placement, $offscreen in $panelMotions {
         &.#{$panelMotionName}-#{$placement}-enter,
         &.#{$panelMotionName}-#{$placement}-appear {

package/src/components/DrawerCustom/types.ts

@@ -3,7 +3,7 @@ import { WithSupportProps } from '@cloud-ru/ds-utils';
 import { DrawerProps as RcDrawerProps } from '@rc-component/drawer';
 import { PropsWithChildren, ReactElement } from 'react';
 
-import { Position, Width } from '../../types';
+import { Position, ResizableMax, Width } from '../../types';
 
 export type DrawerCustomProps = WithSupportProps<
   PropsWithChildren<{
@@ -60,8 +60,11 @@ export type DrawerCustomProps = WithSupportProps<
     resizable?: {
       /** Минимальная доступная ширина */
       min: number;
-      /** Максимальная доступная ширина */
-      max?: number;
+      /**
+       * Максимальная доступная ширина: число в px либо `'full'` — вся ширина окна за вычетом 48px
+       * (двойной отступ обёртки).
+       */
+      max?: ResizableMax;
       /** Ширина по умолчанию */
       default?: number;
       /** Колбэк на изменение размера */

package/src/constants.ts

@@ -29,3 +29,9 @@ export const POSITION = {
   Top: 'top',
   Bottom: 'bottom',
 } as const;
+
+/** Значение `resizable.max`: растягивать до ширины окна за вычетом двойного отступа обёртки. */
+export const RESIZABLE_MAX_FULL = 'full';
+
+/** Горизонтальный отступ `content-wrapper`. */
+export const FULL_WIDTH_OFFSET = 24;

package/src/types.ts

@@ -1,6 +1,7 @@
 import { ValueOf } from '@cloud-ru/ds-utils';
 
-import { POSITION, WIDTH } from './constants';
+import { POSITION, RESIZABLE_MAX_FULL, WIDTH } from './constants';
 
 export type Width = ValueOf<typeof WIDTH>;
 export type Position = ValueOf<typeof POSITION>;
+export type ResizableMax = number | typeof RESIZABLE_MAX_FULL;