@cloud-ru/ds-drawer 2.0.1-preview-baf8f3bd.0 → 2.0.1-preview-e8fab9b7.0

package/package.json

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

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

@@ -3,7 +3,7 @@ import { isBrowser } from '@cloud-ru/ds-utils';
 import { DrawerProps } from '@rc-component/drawer';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { FULL_WIDTH_OFFSET, RESIZABLE_MAX_FULL } from '../../../constants';
+import { RESIZABLE_MAX_FULL } from '../../../constants';
 import styles from '../styles.module.scss';
 import { DrawerCustomProps } from '../types';
 
@@ -22,8 +22,7 @@ type UseDrawerResizeResult = {
   width?: number;
 };
 
-const getFullMaxWidth = () =>
-  isBrowser() ? Math.max(0, document.documentElement.clientWidth - FULL_WIDTH_OFFSET) : Infinity;
+const getFullMaxWidth = () => (isBrowser() ? Math.max(0, document.documentElement.clientWidth) : Infinity);
 
 export function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult {
   const targetRef = useRef<HTMLElement | null>(null);
@@ -60,41 +59,48 @@ export function useDrawerResize({ position, resizable: resizableProp }: UseDrawe
     </Tooltip>
   ) : null;
 
+  const { onResize, onResizeEnd, max, min } = resizableProp ?? {};
+  const resizeEnabled = Boolean(resizableProp);
+
+  // Ширина окна могла измениться, пока дровер был закрыт: хранимое значение режем по текущей ширине на каждом
+  // рендере. Иначе rc-drawer начинает ресайз от «виртуальной» ширины, которая больше видимой панели.
+  const effectiveWidth = width !== undefined && max === RESIZABLE_MAX_FULL ? Math.min(width, getFullMaxWidth()) : width;
+
   const resizable = useMemo(
     () =>
-      resizableProp
+      resizeEnabled
         ? ({
             onResize: value => {
-              if (value < (resizableProp?.min || 0)) return;
+              if (value < (min || 0)) return;
 
-              if (resizableProp?.max === RESIZABLE_MAX_FULL) {
+              if (max === RESIZABLE_MAX_FULL) {
                 const next = Math.min(value, getFullMaxWidth());
 
                 setWidth(next);
-                resizableProp?.onResize?.(next);
+                onResize?.(next);
 
                 return;
               }
 
-              if (value > (resizableProp?.max || Infinity)) return;
+              if (value > (max || Infinity)) return;
 
               setWidth(value);
 
-              resizableProp?.onResize?.(value);
+              onResize?.(value);
             },
             onResizeEnd: () => {
               setOpen(false);
               setMuted(false);
 
-              resizableProp?.onResizeEnd?.(width ?? 0);
+              onResizeEnd?.(effectiveWidth ?? 0);
             },
             onResizeStart: () => {
               setMuted(true);
             },
           } satisfies DrawerProps['resizable'])
         : undefined,
-    [resizableProp, width],
+    [effectiveWidth, max, min, onResize, onResizeEnd, resizeEnabled],
   );
 
-  return { tooltip, checkElement, resizable, width };
+  return { tooltip, checkElement, resizable, width: effectiveWidth };
 }

package/src/constants.ts

@@ -30,8 +30,5 @@ export const POSITION = {
   Bottom: 'bottom',
 } as const;
 
-/** Значение `resizable.max`: растягивать до ширины окна за вычетом двойного отступа обёртки. */
+/** Значение `resizable.max`: растягивать до ширины окна. */
 export const RESIZABLE_MAX_FULL = 'full';
-
-/** Суммарный горизонтальный отступ `content-wrapper` (по 24px с каждой стороны). */
-export const FULL_WIDTH_OFFSET = 48;