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

package/README.md

@@ -448,7 +448,7 @@ export function CustomComposition() {
 | `open` | `boolean` | — | Управление состоянием показан/не показан. |
 | `position` | `"bottom"` \| `"left"` \| `"right"` \| `"top"` | — | Расположение |
 | `push` | `boolean \| PushConfig` | — | Смещение при открытии "вложенного" компонента |
-| `resizable` | `{ min: number; max?: number; default?: number; onResize?: ((width: number) => void) \| undefined; onResizeEnd?: ((width: number) => void) \| undefined; draggerTooltip?: string \| undefined; } \| undefined` | `'s'` | Ширина (только при position: "left" \| "right") |
+| `resizable` | `ResizableMax` | `'s'` | Ширина (только при position: "left" \| "right") |
 | `rootClassName` | `string` | — | CSS-класс для корневого элемента |
 | `safeAreaBottom` | `boolean` | `true` | Нижний safe-area отступ под iOS home-indicator и Android nav-bar. Размер — токен <br/> `safeArea.bottom.minHeight`, на устройстве с большим `env(safe-area-inset-bottom)` — значение inset. |
 | `safeAreaTop` | `boolean` | `true` | Верхний safe-area отступ под iOS notch / status-bar. Размер — токен `safeArea.top.minHeight`, <br/> на устройстве с большим `env(safe-area-inset-top)` — значение inset. Применяется, только когда <br/> sheet раскрыт на полный вьюпорт: у неполного sheet'а верх и так не заходит под notch. |
@@ -477,7 +477,7 @@ export function CustomComposition() {
 | `open` | `boolean` | — | Управление состоянием показан/не показан. |
 | `position` | `"bottom"` \| `"left"` \| `"right"` \| `"top"` | — | Расположение |
 | `push` | `boolean \| PushConfig \| undefined` | — | Смещение при открытии "вложенного" компонента |
-| `resizable` | `{ min: number; max?: number; default?: number; onResize?: (width: number) => void; onResizeEnd?: (width: number) => void; draggerTooltip?: string; } \| undefined` | — | Ширина (только при position: "left" \| "right") |
+| `resizable` | `ResizableMax` | — | Ширина (только при position: "left" \| "right") |
 | `rootClassName` | `string \| undefined` | — | CSS-класс для корневого элемента |
 | `safeAreaBottom` | `boolean \| undefined` | — | Нижний safe-area отступ под iOS home-indicator и Android nav-bar. Размер — токен <br/> `safeArea.bottom.minHeight`, на устройстве с большим `env(safe-area-inset-bottom)` — значение inset. |
 | `safeAreaTop` | `boolean \| undefined` | — | Верхний safe-area отступ под iOS notch / status-bar. Размер — токен `safeArea.top.minHeight`, <br/> на устройстве с большим `env(safe-area-inset-top)` — значение inset. Применяется, только когда <br/> sheet раскрыт на полный вьюпорт: у неполного sheet'а верх и так не заходит под notch. |
@@ -489,4 +489,6 @@ export function CustomComposition() {
 
 - `Position` = `"bottom"` \| `"left"` \| `"right"` \| `"top"`
 
+- `ResizableMax` = `number | "full"`
+
 - `Width` = `"l"` \| `"m"` \| `"s"`

package/dist/cjs/components/DrawerCustom/DrawerCustom.js

@@ -27,7 +27,7 @@ function DrawerFrame(props) {
     const { showBlackout = true, showButtonClosed = true, open, onClose, rootClassName, className, push, container, children, nestedDrawer, closeOnPopstate, position, heightAuto, width: widthProp, resizable: resizableProp, disableMotions = false, ...rest } = props;
     const heightAutoVertical = Boolean(heightAuto && (position === 'top' || position === 'bottom'));
     const resizable = heightAutoVertical ? undefined : resizableProp;
-    const { tooltip, checkElement, width: userWidth, resizable: drawerResizable, } = (0, useDrawerResize_1.useDrawerResize)({
+    const { tooltip, checkElement, width: userWidth, resizable: drawerResizable, isResizing, } = (0, useDrawerResize_1.useDrawerResize)({
         resizable,
         position,
     });
@@ -59,7 +59,7 @@ function DrawerFrame(props) {
     const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
     return ((0, jsx_runtime_1.jsx)(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
             section: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className),
-        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: styles_module_scss_1.default.prefixCls, ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.scrollLock, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-resizing": isResizing || undefined, "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: styles_module_scss_1.default.prefixCls, ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.scrollLock, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
 }
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.

package/dist/cjs/components/DrawerCustom/hooks/useDrawerResize.d.ts

@@ -10,6 +10,8 @@ type UseDrawerResizeResult = {
     resizable: DrawerProps['resizable'];
     /** Ширина ползунка в пикселях */
     width?: number;
+    /** Флаг, указывающий, что дровер в процессе ресайза */
+    isResizing: boolean;
 };
 export declare function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult;
 export {};

package/dist/cjs/components/DrawerCustom/hooks/useDrawerResize.js

@@ -8,8 +8,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
+const constants_1 = require("../../../constants");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const DRAGGER_SELECTOR = `.${styles_module_scss_1.default.prefixCls}-resizable-dragger`;
+const getFullMaxWidth = () => ((0, utils_1.isBrowser)() ? Math.max(0, document.documentElement.clientWidth) : Infinity);
 function useDrawerResize({ position, resizable: resizableProp }) {
     const targetRef = (0, react_1.useRef)(null);
     const targetRefCallbackRef = (0, react_1.useRef)();
@@ -30,25 +32,34 @@ function useDrawerResize({ position, resizable: resizableProp }) {
                 return null;
             targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
         } })) : null;
-    const resizable = (0, react_1.useMemo)(() => resizableProp
+    const { onResize, onResizeEnd, max, min } = resizableProp ?? {};
+    const resizeEnabled = Boolean(resizableProp);
+    // Сколько стартовой ширины, которую держит rc-drawer, не помещается в окно: оно могло сузиться, пока дровер
+    // был закрыт или открыт. CSS обрезает панель визуально, а rc-drawer считает ресайз от «виртуальной» ширины.
+    const excessRef = (0, react_1.useRef)(0);
+    const resizable = (0, react_1.useMemo)(() => resizeEnabled
         ? {
-            onResize: value => {
-                if (value < (resizableProp?.min || 0))
-                    return;
-                if (value > (resizableProp?.max || Infinity))
+            onResize: rawValue => {
+                // Смещение мыши rc-drawer прибавляет к устаревшей стартовой ширине: вычитаем лишнее.
+                const limit = max === constants_1.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) => {
+                excessRef.current =
+                    max === constants_1.RESIZABLE_MAX_FULL && startSize !== undefined ? Math.max(0, startSize - getFullMaxWidth()) : 0;
                 setMuted(true);
             },
         }
-        : undefined, [resizableProp, width]);
-    return { tooltip, checkElement, resizable, width };
+        : undefined, [width, max, min, onResize, onResizeEnd, resizeEnabled]);
+    return { tooltip, checkElement, resizable, width, isResizing: muted };
 }

package/dist/cjs/components/DrawerCustom/styles.module.css

@@ -126,6 +126,7 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right]{
   align-items:stretch;
   box-sizing:content-box;
+  max-width:calc(100% - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingLeft, var(--sn-primitive-dimension-0, 0px)) - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
   height:100%;
 }
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left][data-width=s], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right][data-width=s]{
@@ -154,6 +155,9 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=bottom][data-height-auto]{
   inset:auto 0 0;
 }
+.drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-resizing] *{
+  pointer-events:none;
+}
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-enter, .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-appear{
   transform:translateX(-100%);
 }

package/dist/cjs/components/DrawerCustom/types.d.ts

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

package/dist/cjs/constants.d.ts

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

package/dist/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POSITION = exports.WIDTH_AS_VALUES = exports.WIDTH = exports.TEST_IDS = void 0;
+exports.FULL_WIDTH_OFFSET = exports.RESIZABLE_MAX_FULL = exports.POSITION = exports.WIDTH_AS_VALUES = exports.WIDTH = exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
     closeButton: 'drawer__close-button',
     header: 'drawer__header',
@@ -29,3 +29,7 @@ exports.POSITION = {
     Top: 'top',
     Bottom: 'bottom',
 };
+/** Значение `resizable.max`: растягивать до ширины окна за вычетом двойного отступа обёртки. */
+exports.RESIZABLE_MAX_FULL = 'full';
+/** Горизонтальный отступ `content-wrapper`. */
+exports.FULL_WIDTH_OFFSET = 24;

package/dist/cjs/style.css

@@ -129,6 +129,7 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right]{
   align-items:stretch;
   box-sizing:content-box;
+  max-width:calc(100% - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingLeft, var(--sn-primitive-dimension-0, 0px)) - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
   height:100%;
 }
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left][data-width=s], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right][data-width=s]{
@@ -157,6 +158,9 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=bottom][data-height-auto]{
   inset:auto 0 0;
 }
+.drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-resizing] *{
+  pointer-events:none;
+}
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-enter, .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-appear{
   transform:translateX(-100%);
 }

package/dist/cjs/types.d.ts

@@ -1,4 +1,5 @@
 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;

package/dist/esm/components/DrawerCustom/DrawerCustom.js

@@ -21,7 +21,7 @@ function DrawerFrame(props) {
     const { showBlackout = true, showButtonClosed = true, open, onClose, rootClassName, className, push, container, children, nestedDrawer, closeOnPopstate, position, heightAuto, width: widthProp, resizable: resizableProp, disableMotions = false, ...rest } = props;
     const heightAutoVertical = Boolean(heightAuto && (position === 'top' || position === 'bottom'));
     const resizable = heightAutoVertical ? undefined : resizableProp;
-    const { tooltip, checkElement, width: userWidth, resizable: drawerResizable, } = useDrawerResize({
+    const { tooltip, checkElement, width: userWidth, resizable: drawerResizable, isResizing, } = useDrawerResize({
         resizable,
         position,
     });
@@ -53,7 +53,7 @@ function DrawerFrame(props) {
     const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
     return (_jsx(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: cn(styles.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
             section: cn(styles.drawer, className),
-        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: styles.prefixCls, ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.scrollLock, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-resizing": isResizing || undefined, "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: styles.prefixCls, ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.scrollLock, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
 }
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.

package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.d.ts

@@ -10,6 +10,8 @@ type UseDrawerResizeResult = {
     resizable: DrawerProps['resizable'];
     /** Ширина ползунка в пикселях */
     width?: number;
+    /** Флаг, указывающий, что дровер в процессе ресайза */
+    isResizing: boolean;
 };
 export declare function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult;
 export {};

package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.js

@@ -2,8 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@cloud-ru/ds-tooltip';
 import { isBrowser } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo, useRef, useState } from 'react';
+import { RESIZABLE_MAX_FULL } from '../../../constants.js';
 import styles from '../styles.module.css';
 const DRAGGER_SELECTOR = `.${styles.prefixCls}-resizable-dragger`;
+const getFullMaxWidth = () => (isBrowser() ? Math.max(0, document.documentElement.clientWidth) : Infinity);
 export function useDrawerResize({ position, resizable: resizableProp }) {
     const targetRef = useRef(null);
     const targetRefCallbackRef = useRef();
@@ -24,25 +26,34 @@ export function useDrawerResize({ position, resizable: resizableProp }) {
                 return null;
             targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
         } })) : null;
-    const resizable = useMemo(() => resizableProp
+    const { onResize, onResizeEnd, max, min } = resizableProp ?? {};
+    const resizeEnabled = Boolean(resizableProp);
+    // Сколько стартовой ширины, которую держит rc-drawer, не помещается в окно: оно могло сузиться, пока дровер
+    // был закрыт или открыт. CSS обрезает панель визуально, а rc-drawer считает ресайз от «виртуальной» ширины.
+    const excessRef = useRef(0);
+    const resizable = useMemo(() => resizeEnabled
         ? {
-            onResize: value => {
-                if (value < (resizableProp?.min || 0))
-                    return;
-                if (value > (resizableProp?.max || Infinity))
+            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) => {
+                excessRef.current =
+                    max === RESIZABLE_MAX_FULL && startSize !== undefined ? Math.max(0, startSize - getFullMaxWidth()) : 0;
                 setMuted(true);
             },
         }
-        : undefined, [resizableProp, width]);
-    return { tooltip, checkElement, resizable, width };
+        : undefined, [width, max, min, onResize, onResizeEnd, resizeEnabled]);
+    return { tooltip, checkElement, resizable, width, isResizing: muted };
 }

package/dist/esm/components/DrawerCustom/styles.module.css

@@ -126,6 +126,7 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right]{
   align-items:stretch;
   box-sizing:content-box;
+  max-width:calc(100% - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingLeft, var(--sn-primitive-dimension-0, 0px)) - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
   height:100%;
 }
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left][data-width=s], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right][data-width=s]{
@@ -154,6 +155,9 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=bottom][data-height-auto]{
   inset:auto 0 0;
 }
+.drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-resizing] *{
+  pointer-events:none;
+}
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-enter, .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-appear{
   transform:translateX(-100%);
 }

package/dist/esm/components/DrawerCustom/types.d.ts

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

package/dist/esm/constants.d.ts

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

package/dist/esm/constants.js

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

package/dist/esm/style.css

@@ -129,6 +129,7 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right]{
   align-items:stretch;
   box-sizing:content-box;
+  max-width:calc(100% - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingLeft, var(--sn-primitive-dimension-0, 0px)) - var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
   height:100%;
 }
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=left][data-width=s], .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=right][data-width=s]{
@@ -157,6 +158,9 @@
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-position=bottom][data-height-auto]{
   inset:auto 0 0;
 }
+.drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper[data-resizing] *{
+  pointer-events:none;
+}
 .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-enter, .drawerRoot:global(.cloud-ru-ds-drawer-v1) :global .cloud-ru-ds-drawer-v1-content-wrapper.cloud-ru-ds-drawer-v1-panel-motion-left-appear{
   transform:translateX(-100%);
 }

package/dist/esm/types.d.ts

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