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

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

@@ -11,7 +11,7 @@ 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 - constants_1.FULL_WIDTH_OFFSET) : Infinity;
+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)();
@@ -32,31 +32,33 @@ 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);
+    const resizable = (0, react_1.useMemo)(() => resizeEnabled
         ? {
             onResize: value => {
-                if (value < (resizableProp?.min || 0))
+                if (value < (min || 0))
                     return;
-                if (resizableProp?.max === constants_1.RESIZABLE_MAX_FULL) {
+                if (max === constants_1.RESIZABLE_MAX_FULL) {
                     const next = Math.min(value, getFullMaxWidth());
                     setWidth(next);
-                    resizableProp?.onResize?.(next);
+                    onResize?.(next);
                     return;
                 }
-                if (value > (resizableProp?.max || Infinity))
+                if (value > (max || Infinity))
                     return;
                 setWidth(value);
-                resizableProp?.onResize?.(value);
+                onResize?.(value);
             },
             onResizeEnd: () => {
                 setOpen(false);
                 setMuted(false);
-                resizableProp?.onResizeEnd?.(width ?? 0);
+                onResizeEnd?.(width ?? 0);
             },
             onResizeStart: () => {
                 setMuted(true);
             },
         }
-        : undefined, [resizableProp, width]);
+        : undefined, [width, max, min, onResize, onResizeEnd, resizeEnabled]);
     return { tooltip, checkElement, resizable, width };
 }

package/dist/cjs/constants.d.ts

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

package/dist/cjs/constants.js

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

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

@@ -2,10 +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 { FULL_WIDTH_OFFSET, RESIZABLE_MAX_FULL } from '../../../constants.js';
+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 - FULL_WIDTH_OFFSET) : Infinity;
+const getFullMaxWidth = () => (isBrowser() ? Math.max(0, document.documentElement.clientWidth) : Infinity);
 export function useDrawerResize({ position, resizable: resizableProp }) {
     const targetRef = useRef(null);
     const targetRefCallbackRef = useRef();
@@ -26,31 +26,33 @@ 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);
+    const resizable = useMemo(() => resizeEnabled
         ? {
             onResize: value => {
-                if (value < (resizableProp?.min || 0))
+                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))
+                if (value > (max || Infinity))
                     return;
                 setWidth(value);
-                resizableProp?.onResize?.(value);
+                onResize?.(value);
             },
             onResizeEnd: () => {
                 setOpen(false);
                 setMuted(false);
-                resizableProp?.onResizeEnd?.(width ?? 0);
+                onResizeEnd?.(width ?? 0);
             },
             onResizeStart: () => {
                 setMuted(true);
             },
         }
-        : undefined, [resizableProp, width]);
+        : undefined, [width, max, min, onResize, onResizeEnd, resizeEnabled]);
     return { tooltip, checkElement, resizable, width };
 }

package/dist/esm/constants.d.ts

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

package/dist/esm/constants.js

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