@m4l/components 9.2.0 → 9.2.2

package/components/DragResizeWindow/hooks/useDimensionEffects.js

@@ -1,4 +1,6 @@
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
+import { e as expandingParentContainer } from "../helpers/expandingParentContainer.js";
+import { s as shrinkingParentContainer } from "../helpers/shrinkingParentContainer.js";
 const useDimensionEffects = (props) => {
   const {
     containerElement,
@@ -9,221 +11,17 @@ const useDimensionEffects = (props) => {
     stateRef,
     wrapperRef,
     currentState,
-    setCurrentState
+    setCurrentState,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer
   } = props;
-  const shrinkingParentContainer = useCallback(
-    (newState, cState, containerDimension, divRoot, dimension) => {
-      const lDimension = dimension === "Width" ? "width" : "height";
-      const leftTop = dimension === "Width" ? "left" : "top";
-      const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
-      const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
-      const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
-      const boundsRightBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
-      const minWindowDimension = dimension === "Width" ? minWindowWidth : minWindowHeight;
-      const minDimension = containerDimension - boundsLefTop + boundsRightBottom > minWindowDimension ? containerDimension - boundsLefTop + boundsRightBottom : minWindowDimension;
-      let maxDimensionElement = containerDimension - cState[leftTop] + boundsRightBottom;
-      if (divRoot[`client${dimension}`] > maxDimensionElement) {
-        const shrunkenPixels = divRoot[`client${dimension}`] - maxDimensionElement;
-        if (shrunkenPixels < cState[leftTop] - boundsLefTop) {
-          newState[leftTop] = newState[leftTop] - shrunkenPixels;
-          newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
-        } else if (shrunkenPixels > cState[leftTop] - boundsLefTop) {
-          newState[leftTop] = boundsLefTop;
-          newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
-          maxDimensionElement = containerDimension - boundsLefTop + boundsRightBottom;
-          if (divRoot[`client${dimension}`] > maxDimensionElement) {
-            newState[lDimension] = maxDimensionElement;
-            newState[overflowDimensionAt] = newState[overflowDimensionAt] || cState[lDimension];
-            if (newState[lDimension] < minDimension) {
-              newState[lDimension] = minDimension;
-            }
-          }
-        }
-      } else {
-        return;
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const expandingParentContainer = useCallback(
-    (newState, _currentState, containerDimension, _divRoot, dimension) => {
-      const lDimension = dimension === "Width" ? "width" : "height";
-      const leftTop = dimension === "Width" ? "left" : "top";
-      const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
-      const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
-      const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
-      const initialPosition = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
-      const maxDimensionElement = containerDimension - boundsLefTop + initialPosition;
-      const valOverflowDimensionAt = newState[overflowDimensionAt];
-      if (valOverflowDimensionAt) {
-        if (valOverflowDimensionAt > maxDimensionElement) {
-          newState[lDimension] = maxDimensionElement;
-        } else {
-          newState[lDimension] = valOverflowDimensionAt;
-          newState[overflowDimensionAt] = void 0;
-        }
-      }
-      const valShrinkLeftTopAt = newState[shrinkLeftTopAt];
-      if (valShrinkLeftTopAt && !newState[overflowDimensionAt]) {
-        const dimensionAvailable = containerDimension - boundsLefTop - newState[lDimension] + initialPosition;
-        if (valShrinkLeftTopAt <= dimensionAvailable) {
-          newState[leftTop] = valShrinkLeftTopAt;
-          newState[shrinkLeftTopAt] = void 0;
-        } else {
-          newState[leftTop] = dimensionAvailable;
-        }
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const draggingOrResizingWindow = useCallback(
-    (newState, _currentState, containerDimension, _divRoot, dimension) => {
-      const lDimension = dimension === "Width" ? "width" : "height";
-      const leftTop = dimension === "Width" ? "left" : "top";
-      const boundsRightBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
-      const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
-      const boundsTop = dimension === "Height" ? bounds?.top || 0 : bounds?.top || 0;
-      const maxDimensionWithoutBounds = containerDimension - boundsLefTop + boundsRightBottom;
-      const rightBottomBoundary = containerDimension - newState[lDimension] + boundsRightBottom;
-      const adjustDimension = () => {
-        if (newState[lDimension] > maxDimensionWithoutBounds) {
-          newState[lDimension] = maxDimensionWithoutBounds;
-        }
-      };
-      const adjustLeftTop = () => {
-        if (newState[leftTop] < boundsLefTop) {
-          newState[leftTop] = boundsLefTop;
-        }
-        if (newState[leftTop] > rightBottomBoundary) {
-          newState[leftTop] = rightBottomBoundary;
-        }
-      };
-      if (newState.resizing && stateRef.current.initialPosition) {
-        if (newState.resizing.handle !== "w") {
-          if (newState[leftTop] + newState[lDimension] > containerDimension + boundsRightBottom) {
-            newState[lDimension] = containerDimension - newState[leftTop] + boundsRightBottom;
-          }
-        } else {
-          const dimensionDiff = newState[lDimension] - stateRef.current.initialPosition[lDimension];
-          if (dimensionDiff > 0) {
-            if (newState[leftTop] - dimensionDiff >= boundsLefTop) {
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + dimensionDiff;
-              newState[leftTop] -= dimensionDiff;
-            } else {
-              newState[leftTop] = boundsLefTop;
-              newState[lDimension] = stateRef.current.initialPosition[lDimension];
-            }
-          } else if (dimensionDiff < 0) {
-            newState[leftTop] -= dimensionDiff;
-            newState[lDimension] = stateRef.current.initialPosition[lDimension] + dimensionDiff;
-          }
-        }
-        if (newState.resizing.handle === "sw") {
-          const difWidth = newState[lDimension] - stateRef.current.initialPosition[lDimension];
-          if (dimension === "Width") {
-            if (difWidth > 0) {
-              if (newState[leftTop] - difWidth >= boundsLefTop) {
-                newState[leftTop] = stateRef.current.initialPosition[leftTop] - difWidth;
-                newState[lDimension] = stateRef.current.initialPosition[lDimension] + difWidth;
-              } else {
-                newState[leftTop] = boundsLefTop;
-                newState[lDimension] = stateRef.current.initialPosition[lDimension] + (stateRef.current.initialPosition[leftTop] - boundsLefTop);
-              }
-            } else if (difWidth < 0) {
-              newState[leftTop] -= difWidth;
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difWidth;
-            }
-          }
-          if (dimension === "Height") {
-            if (difWidth > 0) {
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difWidth;
-              newState[leftTop] = stateRef.current.initialPosition[leftTop];
-            } else if (difWidth < 0) {
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difWidth;
-              newState[leftTop] = stateRef.current.initialPosition[leftTop];
-            }
-          }
-        }
-        if (newState.resizing.handle === "nw") {
-          const difWidth = newState[lDimension] - stateRef.current.initialPosition[lDimension];
-          const difHeight = newState[lDimension] - stateRef.current.initialPosition[lDimension];
-          if (dimension === "Width") {
-            if (difWidth > 0) {
-              if (newState[leftTop] - difWidth >= boundsLefTop) {
-                newState[leftTop] = stateRef.current.initialPosition[leftTop] - difWidth;
-                newState[lDimension] = stateRef.current.initialPosition[lDimension] + difWidth;
-              } else {
-                newState[leftTop] = boundsLefTop;
-                newState[lDimension] = stateRef.current.initialPosition[lDimension] + (stateRef.current.initialPosition[leftTop] - boundsLefTop);
-              }
-            } else if (difWidth < 0) {
-              newState[leftTop] -= difWidth;
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difWidth;
-            }
-          }
-          if (dimension === "Height") {
-            if (difHeight < 0) {
-              if (newState[leftTop] - difHeight >= boundsTop) {
-                newState[leftTop] = stateRef.current.initialPosition[leftTop] - difHeight;
-                newState[lDimension] = stateRef.current.initialPosition[lDimension] + difHeight;
-              } else {
-                newState[leftTop] = boundsTop;
-                newState[lDimension] = stateRef.current.initialPosition[lDimension] + (stateRef.current.initialPosition[leftTop] - boundsTop);
-              }
-            } else if (difHeight > 0) {
-              newState[leftTop] -= difHeight;
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difHeight;
-            }
-          }
-        }
-        if (newState.resizing.handle === "ne") {
-          const difHeight = newState[lDimension] - stateRef.current.initialPosition[lDimension];
-          if (dimension === "Height") {
-            if (difHeight > 0) {
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difHeight;
-              newState[leftTop] = stateRef.current.initialPosition[leftTop] - difHeight;
-            }
-            if (difHeight < 0) {
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difHeight;
-              newState[leftTop] = stateRef.current.initialPosition[leftTop] - difHeight;
-            }
-          }
-        }
-        if (newState.resizing.handle === "n") {
-          const difHeight = newState[lDimension] - stateRef.current.initialPosition[lDimension];
-          if (dimension === "Height") {
-            if (newState[leftTop] - difHeight < boundsTop) {
-              newState[leftTop] = boundsTop;
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + (stateRef.current.initialPosition[leftTop] - boundsTop);
-            } else {
-              newState[lDimension] = stateRef.current.initialPosition[lDimension] + difHeight;
-              newState[leftTop] = stateRef.current.initialPosition[leftTop] - difHeight;
-            }
-          }
-        }
-      }
-      adjustDimension();
-      adjustLeftTop();
-      if (!newState.resizing && newState[leftTop] + newState[lDimension] > containerDimension + boundsRightBottom) {
-        const outWidthHeight = newState[leftTop] + newState[lDimension] - (containerDimension + boundsRightBottom);
-        if (newState[leftTop] - boundsLefTop > outWidthHeight) {
-          newState[leftTop] = newState[leftTop] - outWidthHeight;
-        }
-      }
-      if (newState.resizing && stateRef.current.initialPosition) {
-        stateRef.current.initialPosition[lDimension] = newState[lDimension];
-        stateRef.current.initialPosition[leftTop] = newState[leftTop];
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
   useEffect(() => {
     if (!containerElement) {
       return;
     }
+    if (containerSize?.containerHeight === 0 && containerSize?.containerWidth === 0) {
+      return;
+    }
     if (stateRef.current.containerSize === void 0 && containerSize) {
       stateRef.current.containerSize = containerSize;
     }
@@ -233,8 +31,11 @@ const useDimensionEffects = (props) => {
     if (currentState?.dragging) {
       return;
     }
+    if (currentState?.resizing) {
+      return;
+    }
     const newState = { ...currentState };
-    const handleDimension = (dimension) => {
+    const handleDimension = (dimension, allowResizeContainer = false) => {
       if (stateRef.current?.containerSize && wrapperRef.current) {
         const containerSizeKey = `container${dimension}`;
         const containerSizeValue = containerSize[containerSizeKey];
@@ -253,21 +54,17 @@ const useDimensionEffects = (props) => {
             currentState,
             containerSizeValue,
             wrapperRef.current,
-            dimension
-          );
-        } else {
-          draggingOrResizingWindow(
-            newState,
-            currentState,
-            containerSizeValue,
-            wrapperRef.current,
-            dimension
+            dimension,
+            allowResizeContainer,
+            minWindowWidth,
+            minWindowHeight,
+            bounds
           );
         }
       }
     };
-    handleDimension("Width");
-    handleDimension("Height");
+    handleDimension("Width", allowWidthResizeContainer);
+    handleDimension("Height", allowHeightResizeContainer);
     stateRef.current.containerSize = { ...containerSize };
     if (newState.left !== currentState.left || newState.top !== currentState.top || newState.width !== currentState.width || newState.height !== currentState.height || newState.shrinkLeftAt !== currentState.shrinkLeftAt || newState.shrinkTopAt !== currentState.shrinkTopAt || newState.overflowWidthAt !== currentState.overflowWidthAt || newState.overflowHeightAt !== currentState.overflowHeightAt) {
       setCurrentState(newState);

package/components/DragResizeWindow/hooks/useDragOptions.d.ts

@@ -2,13 +2,20 @@ import { default as React } from 'react';
 import { DraggableData, DraggableEvent } from 'react-draggable';
 import { CurrentState, StateRef } from '../types';
 type useDragOptionsProps = {
-    containerElement?: HTMLElement | null;
+    allowHeightResizeContainer?: boolean;
+    allowWidthResizeContainer?: boolean;
+    containerElement?: HTMLElement;
     onDragStart?: (e: DraggableEvent, draggableData: DraggableData) => boolean | void;
     onDrag?: (e: DraggableEvent, draggableData: DraggableData) => boolean | void;
     onDragStop?: (e: DraggableEvent, draggableData: DraggableData) => boolean | void;
     transformScale: number;
     stateRef: React.MutableRefObject<StateRef>;
     setCurrentState: React.Dispatch<React.SetStateAction<CurrentState>>;
+    autoScroll?: {
+        enabled?: boolean;
+        speed?: number;
+        threshold?: number;
+    };
 };
 /**
  * "useDragOptions" hook que maneja las opciones de dragging

package/components/DragResizeWindow/hooks/useDragOptions.js

@@ -1,4 +1,5 @@
-import { useCallback } from "react";
+import { useRef, useCallback } from "react";
+import { g as getDetailedPointPosition } from "../helpers/pointPosition.js";
 const useDragOptions = (props) => {
   const {
     containerElement,
@@ -7,8 +8,11 @@ const useDragOptions = (props) => {
     onDragStop,
     transformScale,
     stateRef,
-    setCurrentState
+    setCurrentState,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer
   } = props;
+  const dragPointRef = useRef({ x: 0, y: 0 });
   const localOnDragStart = useCallback(
     (e, draggableData) => {
       const { node } = draggableData;
@@ -16,6 +20,13 @@ const useDragOptions = (props) => {
       if (!containerElement) {
         return;
       }
+      if (e.type === "mousedown" || e.type === "touchstart") {
+        const mouseEvent = e;
+        dragPointRef.current = {
+          x: mouseEvent.clientX,
+          y: mouseEvent.clientY
+        };
+      }
       const parentRect = containerElement.getBoundingClientRect();
       const clientRect = node.getBoundingClientRect();
       const cLeft = clientRect.left / transformScale;
@@ -49,20 +60,82 @@ const useDragOptions = (props) => {
   );
   const localOnDrag = useCallback((e, draggableData) => {
     const { deltaX, deltaY } = draggableData;
+    const finalDeltaY = deltaY;
+    const finalDeltaX = deltaX;
     if (!stateRef.current.dragging) {
       return;
     }
+    if (!containerElement) {
+      return;
+    }
     if (onDrag) {
       if (onDrag(e, draggableData) === false) {
         return false;
       }
     }
-    const top = stateRef.current.dragging.top + deltaY;
-    const left = stateRef.current.dragging.left + deltaX;
+    const [isInsideElementX, isInsideElementY] = getDetailedPointPosition(e, draggableData.node);
+    if (!isInsideElementX.isInside && isInsideElementX.isLeft && deltaX > 0) {
+      return;
+    }
+    if (!isInsideElementX.isInside && isInsideElementX.isRight && deltaX < 0) {
+      return;
+    }
+    if (!isInsideElementY.isInside && isInsideElementY.isAbove && deltaY > 0) {
+      return;
+    }
+    if (!isInsideElementY.isInside && isInsideElementY.isBelow && deltaY !== 0) {
+      return;
+    }
+    let left = stateRef.current.dragging.left + finalDeltaX;
+    let top = stateRef.current.dragging.top + finalDeltaY;
+    if (left < (stateRef.current.bounds?.left || 0)) {
+      left = stateRef.current.bounds?.left || 0;
+    }
+    if (!allowWidthResizeContainer) {
+      const totalWidth = containerElement.clientWidth;
+      if (left + stateRef.current.width > totalWidth + (stateRef.current.bounds?.right || 0)) {
+        left = totalWidth - stateRef.current.width + (stateRef.current.bounds?.right || 0);
+      }
+    }
+    if (top < (stateRef.current.bounds?.top || 0)) {
+      top = stateRef.current.bounds?.top || 0;
+    }
+    if (!allowHeightResizeContainer) {
+      const totalHeight = containerElement.clientHeight;
+      if (top + stateRef.current.height > totalHeight + (stateRef.current.bounds?.bottom || 0)) {
+        top = totalHeight - stateRef.current.height + (stateRef.current.bounds?.bottom || 0);
+      }
+    }
+    const elementHeight = stateRef.current.height;
+    const elementBottom = top + elementHeight;
+    const containerScrollTop = containerElement.scrollTop;
+    const containerHeight = containerElement.clientHeight;
+    const containerScrollLeft = containerElement.scrollLeft;
+    const containerVisibleTop = containerScrollTop;
+    const containerVisibleBottom = containerVisibleTop + containerHeight;
+    const containerVisibleLeft = containerElement.scrollLeft;
+    const containerVisibleRight = containerVisibleLeft + containerElement.clientWidth;
+    const scrollThreshold = 50;
+    if (deltaY < 0 && top < containerVisibleTop + scrollThreshold && containerScrollTop > 0) {
+      const scrollNeeded = Math.min(15, Math.min(scrollThreshold, containerScrollTop));
+      containerElement.scrollTop -= scrollNeeded;
+    }
+    if (deltaY > 0 && elementBottom > containerVisibleBottom - scrollThreshold) {
+      const scrollNeeded = Math.min(15, elementBottom - (containerVisibleBottom - scrollThreshold));
+      containerElement.scrollTop += scrollNeeded;
+    }
+    if (deltaX < 0 && left < containerVisibleLeft + scrollThreshold && containerScrollLeft > 0) {
+      const scrollNeeded = Math.min(15, Math.min(scrollThreshold, containerScrollLeft));
+      containerElement.scrollLeft -= scrollNeeded;
+    }
+    if (deltaX > 0 && left > containerVisibleRight - scrollThreshold) {
+      const scrollNeeded = Math.min(15, left - (containerVisibleRight - scrollThreshold));
+      containerElement.scrollLeft += scrollNeeded;
+    }
     const newPosition = { top, left };
     stateRef.current.dragging = newPosition;
     setCurrentState((prev) => ({ ...prev, ...newPosition, dragging: newPosition }));
-  }, []);
+  }, [allowHeightResizeContainer, allowWidthResizeContainer, containerElement, onDrag, setCurrentState, stateRef]);
   const localOnDragStop = useCallback(
     (e, draggableData) => {
       if (!stateRef.current.dragging) {
@@ -85,7 +158,7 @@ const useDragOptions = (props) => {
         onDragStop(e, draggableData);
       }
     },
-    [onDragStop, stateRef, setCurrentState]
+    [stateRef, setCurrentState, onDragStop]
   );
   return { localOnDragStart, localOnDrag, localOnDragStop };
 };

package/components/DragResizeWindow/hooks/useResizeOptions.d.ts

@@ -2,12 +2,23 @@ import { default as React, SyntheticEvent } from 'react';
 import { CurrentState, StateRef, ResizeCallback } from '../types';
 import { ResizeCallbackData } from 'react-resizable';
 type useResizeOptionsProps = {
+    allowHeightResizeContainer?: boolean;
+    allowWidthResizeContainer?: boolean;
+    containerElement?: HTMLElement;
     onResizeStart?: ResizeCallback;
     onResize?: ResizeCallback;
     onResizeStop?: ResizeCallback;
     stateRef: React.MutableRefObject<StateRef>;
     setCurrentState: React.Dispatch<React.SetStateAction<CurrentState>>;
 };
+/**
+ * QUe solo se mueva si esta sobre el elemento de drag (Ok)
+ * Cuadra el resize  que no esta funcionando bien con los bounds (Ok)
+ * QUe solo haga resize si el mouse esta sobre el elemento
+ * Que cuaando se este arrando o resize no gener eventos en los layouts (Ok)
+ * Enfocar cuando es replaceMeId
+ *
+ */
 /**
  * `useResizeOptions` provides a set of handler functions for managing
  * resizing events (start, resize, and stop) on a component. This hook

package/components/DragResizeWindow/hooks/useResizeOptions.js

@@ -1,35 +1,178 @@
-import { useRef, useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
+import { g as getDetailedPointPosition, i as isPointInDragStrip } from "../helpers/pointPosition.js";
 const useResizeOptions = (props) => {
-  const { onResizeStart: _onResizeStart, onResize: _onResize, stateRef, setCurrentState } = props;
-  const memoizedStateRef = useRef(stateRef.current);
+  const { onResizeStart: _onResizeStart, onResize: _onResize, stateRef, setCurrentState, containerElement, allowHeightResizeContainer, allowWidthResizeContainer } = props;
   useEffect(() => {
-    memoizedStateRef.current = { ...stateRef.current };
-  }, [stateRef.current]);
+    if (!containerElement) {
+      return;
+    }
+    const handleScroll = (e) => {
+      const scrollTop = e.target.scrollTop;
+      const scrollLeft = e.target.scrollLeft;
+      if (stateRef.current.resizing) {
+        let change = false;
+        const lastScrollTop = stateRef.current.scrollTop || 0;
+        const lastScrollLeft = stateRef.current.scrollLeft || 0;
+        const newState = { top: stateRef.current.top, height: stateRef.current.height, left: stateRef.current.left, width: stateRef.current.width, scrollTop: lastScrollTop, scrollLeft: lastScrollLeft, resizeByScroll: stateRef.current.resizeByScroll };
+        const deltaTop = lastScrollTop - scrollTop;
+        const deltaLeft = lastScrollLeft - scrollLeft;
+        if (stateRef.current.resizing?.handle.includes("n")) {
+          if (deltaTop !== 0) {
+            if (newState.top - deltaTop > (stateRef.current.bounds?.top || 0)) {
+              newState.top = newState.top - deltaTop;
+              newState.height = newState.height + deltaTop;
+              newState.scrollTop = scrollTop;
+              newState.resizeByScroll = true;
+              change = true;
+            }
+          }
+        }
+        if (stateRef.current.resizing?.handle.includes("w")) {
+          if (newState.left - deltaLeft > (stateRef.current.bounds?.left || 0)) {
+            newState.left = newState.left - deltaLeft;
+            newState.width = newState.width + deltaLeft;
+            newState.scrollLeft = scrollLeft;
+            newState.resizeByScroll = true;
+            change = true;
+          }
+        }
+        if (change) {
+          setCurrentState({
+            ...newState
+          });
+          stateRef.current = {
+            ...stateRef.current,
+            ...newState
+          };
+        }
+      }
+    };
+    containerElement.addEventListener("scroll", handleScroll);
+    return () => {
+      containerElement?.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerElement, setCurrentState, stateRef]);
   const onResizeHandler = useCallback(
     (e, data, handlerName) => {
-      const { size, handle } = data;
+      const { size, handle, node: nodeElement } = data;
       const handler = props[handlerName];
       if (handler) {
         handler(e, data);
       }
-      const newState = { ...memoizedStateRef.current };
-      if (handle.includes("w")) {
-        const diff = memoizedStateRef.current.width - size.width;
-        newState.left += diff;
-        newState.width = size.width;
+      e.stopPropagation();
+      if (!containerElement) {
+        return;
       }
-      if (handle.includes("e")) {
-        newState.width = size.width;
+      const [xContainerPosition, yContainerPosition] = getDetailedPointPosition(e, containerElement, stateRef.current.bounds);
+      const [xNodePosition, yNodePosition] = isPointInDragStrip(e, nodeElement);
+      const { containerSize = { containerWidth: 0, containerHeight: 0 } } = stateRef.current;
+      if (handlerName === "onResizeStart") {
+        stateRef.current.resizing = {
+          ...size,
+          handle,
+          startClientX: e.clientX,
+          startClientY: e.clientY,
+          startHeight: size.height,
+          startWidth: size.width
+        };
+      }
+      const newState = { left: stateRef.current.left, width: stateRef.current.width, top: stateRef.current.top, height: stateRef.current.height, resizeByScroll: stateRef.current.resizeByScroll };
+      const widthDelta = size.width - stateRef.current.width;
+      const heightDelta = size.height - stateRef.current.height;
+      if (handle.includes("w")) {
+        stateRef.current.scrollLeft = containerElement.scrollLeft;
+        const deltaLeft = stateRef.current.left - widthDelta;
+        if (xContainerPosition.isInside) {
+          if (deltaLeft > (stateRef.current.bounds?.left || 0)) {
+            newState.left = deltaLeft;
+            newState.width = size.width;
+          } else {
+            newState.left = stateRef.current.bounds?.left || 0;
+          }
+        } else {
+          if (xNodePosition.isInStrip) {
+            if (deltaLeft > (stateRef.current.bounds?.left || 0)) {
+              newState.left = deltaLeft;
+              newState.width = size.width + widthDelta;
+              containerElement.scrollLeft = newState.left;
+            } else {
+              newState.left = stateRef.current.bounds?.left || 0;
+            }
+          }
+        }
+        newState.resizeByScroll = false;
       }
       if (handle.includes("n")) {
-        const diff = memoizedStateRef.current.height - size.height;
-        newState.top += diff;
-        newState.height = size.height;
+        stateRef.current.scrollTop = containerElement.scrollTop;
+        const deltaTop = stateRef.current.top - heightDelta;
+        if (yContainerPosition.isInside) {
+          if (deltaTop > (stateRef.current.bounds?.top || 0)) {
+            newState.top = deltaTop;
+            newState.height = size.height;
+            containerElement.scrollTop = newState.top;
+          } else {
+            newState.top = stateRef.current.bounds?.top || 0;
+          }
+        } else {
+          if (yNodePosition.isInStrip) {
+            if (deltaTop > (stateRef.current.bounds?.top || 0)) {
+              newState.top = deltaTop;
+              newState.height = size.height + heightDelta;
+              containerElement.scrollTop = newState.top;
+            } else {
+              newState.top = stateRef.current.bounds?.top || 0;
+            }
+          }
+        }
+        newState.resizeByScroll = false;
+      }
+      let newScrollLeft;
+      let newScrollTop;
+      if (handle.includes("e")) {
+        if (xContainerPosition.isInside || allowWidthResizeContainer) {
+          newState.width = size.width;
+          const right = newState.left + newState.width;
+          const containerViewportRight = containerElement.scrollLeft + containerElement.clientWidth;
+          if (right > containerViewportRight) {
+            newScrollLeft = right - containerElement.clientWidth;
+          }
+        } else {
+          if (xContainerPosition.isRight) {
+            newState.width = containerSize.containerWidth - newState.left + (stateRef.current.bounds?.right || 0);
+          }
+        }
       }
       if (handle.includes("s")) {
-        newState.height = size.height;
+        if (yContainerPosition.isInside || allowHeightResizeContainer) {
+          newState.height = size.height;
+          const bottom = newState.top + newState.height;
+          const containerViewportBottom = containerElement.scrollTop + containerElement.clientHeight;
+          if (bottom > containerViewportBottom) {
+            newScrollTop = bottom - containerElement.clientHeight + (handlerName !== "onResizeStop" ? 0 : 10);
+          }
+        } else {
+          if (yContainerPosition.isBelow) {
+            newState.height = containerSize.containerHeight - newState.top + (stateRef.current.bounds?.bottom || 0);
+          }
+        }
+      }
+      if (newScrollLeft !== void 0 || newScrollTop !== void 0) {
+        setTimeout(() => {
+          containerElement.scrollTo({
+            left: newScrollLeft,
+            top: newScrollTop,
+            behavior: "instant"
+          });
+        }, 5);
       }
-      const resizing = handlerName === "onResizeStop" ? void 0 : { ...size, handle };
+      const resizing = handlerName === "onResizeStop" ? void 0 : {
+        ...size,
+        startClientX: stateRef.current.resizing?.startClientX,
+        startClientY: stateRef.current.resizing?.startClientY,
+        startHeight: stateRef.current.resizing?.startHeight,
+        startWidth: stateRef.current.resizing?.startWidth,
+        handle
+      };
       setCurrentState({
         ...newState,
         resizing
@@ -40,7 +183,9 @@ const useResizeOptions = (props) => {
         resizing
       };
     },
-    [props, memoizedStateRef, setCurrentState, stateRef]
+    //OJO NO se puede poner a depender solo de props, porque en cada movimiento se regeneraria el useCallback
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props["onResize"], props["onResizeStart"], props["onResizeStop"], containerElement, stateRef, setCurrentState, allowHeightResizeContainer, allowWidthResizeContainer]
   );
   const localOnResizeStart = useCallback(
     (e, callbackData) => {

package/components/DragResizeWindow/slots/DragResizeWindowSlots.d.ts

@@ -1,6 +1,6 @@
-export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DragResizeWindowOwnerState> & Record<string, unknown> & {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DragResizeWindowOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const IconResizeFormatterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').DragResizeWindowOwnerState> & Record<string, unknown> & {
+export declare const IconResizeFormatterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('../types').DragResizeWindowOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;