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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "2.0.1-preview-e8fab9b7.0",
+  "version": "2.0.1-preview-20b4671f.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-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-portal-context": "1.0.2",
-    "@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"
+    "@cloud-ru/ds-utils": "1.2.0",
+    "@cloud-ru/ds-bottom-sheet": "2.0.1-preview-20b4671f.0"
   }
 }

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

@@ -3,7 +3,6 @@ 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';
 
@@ -22,8 +21,6 @@ type UseDrawerResizeResult = {
   width?: number;
 };
 
-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>();
@@ -59,48 +56,31 @@ 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(
     () =>
-      resizeEnabled
+      resizableProp
         ? ({
             onResize: value => {
-              if (value < (min || 0)) return;
-
-              if (max === RESIZABLE_MAX_FULL) {
-                const next = Math.min(value, getFullMaxWidth());
-
-                setWidth(next);
-                onResize?.(next);
-
-                return;
-              }
-
-              if (value > (max || Infinity)) return;
+              if (value < (resizableProp?.min || 0)) return;
+              if (value > (resizableProp?.max || Infinity)) return;
 
               setWidth(value);
 
-              onResize?.(value);
+              resizableProp?.onResize?.(value);
             },
             onResizeEnd: () => {
               setOpen(false);
               setMuted(false);
 
-              onResizeEnd?.(effectiveWidth ?? 0);
+              resizableProp?.onResizeEnd?.(width ?? 0);
             },
             onResizeStart: () => {
               setMuted(true);
             },
           } satisfies DrawerProps['resizable'])
         : undefined,
-    [effectiveWidth, max, min, onResize, onResizeEnd, resizeEnabled],
+    [resizableProp, width],
   );
 
-  return { tooltip, checkElement, resizable, width: effectiveWidth };
+  return { tooltip, checkElement, resizable, width };
 }

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

@@ -175,12 +175,6 @@ $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 {

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, ResizableMax, Width } from '../../types';
+import { Position, Width } from '../../types';
 
 export type DrawerCustomProps = WithSupportProps<
   PropsWithChildren<{
@@ -60,11 +60,8 @@ export type DrawerCustomProps = WithSupportProps<
     resizable?: {
       /** Минимальная доступная ширина */
       min: number;
-      /**
-       * Максимальная доступная ширина: число в px либо `'full'` — вся ширина окна за вычетом 48px
-       * (двойной отступ обёртки).
-       */
-      max?: ResizableMax;
+      /** Максимальная доступная ширина */
+      max?: number;
       /** Ширина по умолчанию */
       default?: number;
       /** Колбэк на изменение размера */

package/src/constants.ts

@@ -29,6 +29,3 @@ export const POSITION = {
   Top: 'top',
   Bottom: 'bottom',
 } as const;
-
-/** Значение `resizable.max`: растягивать до ширины окна. */
-export const RESIZABLE_MAX_FULL = 'full';

package/src/types.ts

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