@cloud-ru/ds-drawer 2.0.0 → 2.0.1-preview-97040951.0

package/package.json

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

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 { FULL_WIDTH_OFFSET, RESIZABLE_MAX_FULL } from '../../../constants';
 import styles from '../styles.module.scss';
 import { DrawerCustomProps } from '../types';
 
@@ -21,6 +22,9 @@ type UseDrawerResizeResult = {
   width?: number;
 };
 
+const getFullMaxWidth = () =>
+  isBrowser() ? Math.max(0, document.documentElement.clientWidth - FULL_WIDTH_OFFSET) : Infinity;
+
 export function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult {
   const targetRef = useRef<HTMLElement | null>(null);
   const targetRefCallbackRef = useRef<(node: HTMLElement) => void | undefined>();
@@ -62,6 +66,16 @@ export function useDrawerResize({ position, resizable: resizableProp }: UseDrawe
         ? ({
             onResize: value => {
               if (value < (resizableProp?.min || 0)) return;
+
+              if (resizableProp?.max === RESIZABLE_MAX_FULL) {
+                const next = Math.min(value, getFullMaxWidth());
+
+                setWidth(next);
+                resizableProp?.onResize?.(next);
+
+                return;
+              }
+
               if (value > (resizableProp?.max || Infinity)) return;
 
               setWidth(value);

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` (по 24px с каждой стороны). */
+export const FULL_WIDTH_OFFSET = 48;

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;