@m4l/components 9.2.0 → 9.2.2

package/components/DragResizeWindow/DragResizeWindow.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef, useState, useRef, useCallback, useMemo } from "react";
+import React, { forwardRef, useState, useMemo, useRef, useImperativeHandle, useCallback } from "react";
 import { DraggableCore } from "react-draggable";
 import clsx from "clsx";
 import { d as dragResizeWindowClasses } from "./classes/index.js";
 import { D as DEFAULT_TRANSFORM_SCALE } from "./constants.js";
 import { s as setTransform } from "./utils.js";
 import { useForkRef } from "@mui/material";
-import { g as getInitialSize } from "./helpers/index.js";
 import { u as useDragOptions } from "./hooks/useDragOptions.js";
 import { u as useResizeOptions } from "./hooks/useResizeOptions.js";
 import { u as useDimensionEffects } from "./hooks/useDimensionEffects.js";
 import { R as RootStyled } from "./slots/DragResizeWindowSlots.js";
+import { g as getInitialSize } from "./helpers/getInitialSize.js";
 import { R as Resizable } from "../extended/React-Resizable/Resizable/Resizable.js";
 const DragResizeWindow = forwardRef((props, ref) => {
   const {
@@ -20,7 +20,7 @@ const DragResizeWindow = forwardRef((props, ref) => {
     children,
     defaultPosition = { vertical: { top: 0, height: 100 }, horizontal: { left: 0, width: 100 } },
     containerElement,
-    containerSize,
+    containerSize = { containerWidth: 200, containerHeight: 200 },
     transformScale = DEFAULT_TRANSFORM_SCALE,
     bounds = { left: 5, top: 5, right: -5, bottom: -5 },
     minWindowWidth = 200,
@@ -41,12 +41,16 @@ const DragResizeWindow = forwardRef((props, ref) => {
     onResize,
     onResizeStop,
     hidden,
+    allowHeightResizeContainer = false,
+    allowWidthResizeContainer = false,
+    windowRef,
     //Otras
     ...others
   } = props;
   const [currentState, setCurrentState] = useState(
-    getInitialSize(containerSize, defaultPosition)
+    () => getInitialSize(containerSize, defaultPosition, containerElement)
   );
+  const minConstraints = useMemo(() => [minWindowWidth, minWindowHeight], [minWindowWidth, minWindowHeight]);
   const stateRef = useRef({
     bounds,
     data: void 0,
@@ -55,11 +59,60 @@ const DragResizeWindow = forwardRef((props, ref) => {
     left: currentState.left,
     top: currentState.top,
     width: currentState.width,
-    height: currentState.height
+    height: currentState.height,
+    minConstraints
   });
   const wrapperRef = useRef(null);
-  const handleAllRefs = useForkRef(wrapperRef, ref);
+  useImperativeHandle(ref, () => ({
+    /**
+     * "ensureVisible" enfoca la ventana para que esté visible, cuando se requiere desde afuera ubicarla en el contenedor padre
+     */
+    ensureVisible: () => {
+      if (!wrapperRef.current || !containerElement) {
+        return;
+      }
+      const containerRect = containerElement.getBoundingClientRect();
+      const elementRect = wrapperRef.current.getBoundingClientRect();
+      const elementHeight = elementRect.height;
+      const elementWidth = elementRect.width;
+      const relativeTop = elementRect.top - containerRect.top + containerElement.scrollTop;
+      const relativeLeft = elementRect.left - containerRect.left + containerElement.scrollLeft;
+      const relativeBottom = relativeTop + elementHeight;
+      const relativeRight = relativeLeft + elementWidth;
+      const containerViewportHeight = containerElement.clientHeight;
+      const containerViewportWidth = containerElement.clientWidth;
+      const containerRelativeBottom = containerElement.scrollTop + containerViewportHeight;
+      const tolerance = 0.5;
+      const isInViewportVertically = relativeTop >= containerElement.scrollTop - tolerance && relativeBottom <= containerRelativeBottom + tolerance;
+      const isInViewportHorizontally = relativeLeft >= containerElement.scrollLeft - tolerance && relativeRight <= containerElement.scrollLeft + containerViewportWidth + tolerance;
+      if (!isInViewportVertically || !isInViewportHorizontally) {
+        let newScrollTop, newScrollLeft;
+        if (elementHeight > containerViewportHeight) {
+          newScrollTop = relativeTop;
+        } else {
+          newScrollTop = relativeTop - containerViewportHeight / 2 + elementHeight / 2;
+        }
+        if (elementWidth > containerViewportWidth) {
+          newScrollLeft = relativeLeft;
+        } else {
+          newScrollLeft = relativeLeft - containerViewportWidth / 2 + elementWidth / 2;
+        }
+        containerElement.scrollTo({
+          top: Math.max(0, newScrollTop),
+          left: Math.max(0, newScrollLeft),
+          behavior: "smooth"
+        });
+      }
+    },
+    /**
+     * "current" devuelve el elemento DOM de la ventana
+     */
+    current: wrapperRef.current
+  }), [containerElement]);
+  const handleAllRefs = useForkRef(wrapperRef, windowRef);
   const { localOnDragStart, localOnDrag, localOnDragStop } = useDragOptions({
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
     containerElement,
     transformScale,
     onDragStart,
@@ -69,6 +122,9 @@ const DragResizeWindow = forwardRef((props, ref) => {
     setCurrentState
   });
   const { localOnResize, localOnResizeStart, localOnResizeStop } = useResizeOptions({
+    allowHeightResizeContainer,
+    allowWidthResizeContainer,
+    containerElement,
     onResizeStart,
     onResize,
     onResizeStop,
@@ -84,11 +140,12 @@ const DragResizeWindow = forwardRef((props, ref) => {
     minWindowWidth,
     minWindowHeight,
     wrapperRef,
-    currentState
+    currentState,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer
   });
   const mixinResizable = useCallback(
     (child, position) => {
-      const minConstraints = [minWindowWidth, minWindowHeight];
       return /* @__PURE__ */ jsx(
         Resizable,
         {
@@ -109,8 +166,7 @@ const DragResizeWindow = forwardRef((props, ref) => {
         }
       );
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [resizable, transformScale]
+    [resizable, minConstraints, localOnResizeStop, localOnResizeStart, localOnResize, transformScale, resizeHandles, resizeHandle]
   );
   const mixinDraggable = useCallback(
     (child) => {
@@ -136,7 +192,9 @@ const DragResizeWindow = forwardRef((props, ref) => {
   const classNameFinal = clsx(className, {
     "react-draggable": draggable,
     //Requerido para el componente Draggable
-    [dragResizeWindowClasses.hidden]: hidden
+    [dragResizeWindowClasses.hidden]: hidden,
+    [dragResizeWindowClasses.dragging]: currentState.dragging,
+    [dragResizeWindowClasses.resizing]: currentState.resizing
     // dropping: Boolean(droppingPosition),
   });
   const styleFinal = {

package/components/DragResizeWindow/DragResizeWindow.styles.js

@@ -17,7 +17,6 @@ const dragResizeWindowStyles = {
     width: "0px",
     height: "0px",
     backgroundColor: theme.vars.palette.background.default,
-    prop2: 1,
     ...ownerState?.hidden ? {
       visibility: "hidden",
       pointerEvents: "none"
@@ -40,7 +39,6 @@ const dragResizeWindowStyles = {
     width: "0px",
     height: "0px",
     backgroundColor: "gray",
-    prop2: 1,
     cursor: "default"
   })
 };

package/components/DragResizeWindow/classes/index.js

@@ -8,6 +8,7 @@ const dragResizeWindowClasses = generateUtilityClasses(
     "draggableCancel",
     // state
     "dragging",
+    "resizing",
     "hidden"
   ]
 );

package/components/DragResizeWindow/classes/types.d.ts

@@ -2,6 +2,7 @@ export interface DraggableWindowClasses {
     draggableHandle: string;
     draggableCancel: string;
     dragging: string;
+    resizing: string;
     hidden: string;
 }
 export type DraggableWindowClassesKey = keyof DraggableWindowClasses;

package/components/DragResizeWindow/helpers/draggingOrResizingWindow.d.ts

@@ -0,0 +1,7 @@
+import { CurrentState, DraggableWindowBounds, StateRef } from '../types';
+/**
+ * "draggingOrResizingWindow": Encargada de garantizar las medidas cuando se hace dragging o cuando se hace resizig
+ * no desborden en el contenedor padre.
+ * @deprecated NO USAR ESTA FUNCION, ya que los controles se estan haciendo directamente en los handlers onResize y onDrag
+ */
+export declare const draggingOrResizingWindow: (stateRef: React.MutableRefObject<StateRef>, newState: CurrentState, _currentState: CurrentState, containerDimension: number, _divRoot: HTMLDivElement, dimension: "Width" | "Height", allowResizeContainer?: boolean, bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindow/helpers/draggingOrResizingWindow.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindow/helpers/expandingParentContainer.d.ts

@@ -0,0 +1,12 @@
+import { CurrentState, DraggableWindowBounds } from '../types';
+/**
+ * "expandingParentContainer": Encargada de manejar la expansión de la ventana padre
+ * 1. Si el ancho y alto fue compactado, los recupera si es el contenedor padre volvió a crecer
+ * 2. Si el left o top fue desplazado, recupera de nuevo las posiciones donde estaban.
+ *
+ * Consideraciones:
+ *    Si por alguna razón el cliente mueve o redimensiona la ventana,
+ *    se borran los flags que indican que hay que recuperar el ancho y alto, o el left y top.
+ *    (shrinkLeftTopAt, overflowDimensionAt)
+ */
+export declare const expandingParentContainer: (newState: CurrentState, _currentState: CurrentState, containerDimension: number, _divRoot: HTMLDivElement, dimension: "Width" | "Height", bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindow/helpers/expandingParentContainer.js

@@ -0,0 +1,31 @@
+const expandingParentContainer = (newState, _currentState, containerDimension, _divRoot, dimension, bounds) => {
+  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" ? 0 : 0;
+  const initialPosition = dimension === "Width" ? 0 : 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;
+    }
+  }
+};
+export {
+  expandingParentContainer as e
+};

package/components/DragResizeWindow/helpers/getInitialSize.d.ts

@@ -0,0 +1,15 @@
+import { ContainerSize } from '../../../utils/types';
+import { CurrentState, DefaultPosition } from '../types';
+/**
+ * Calculates the initial size and position of an element based on the provided container size
+ * and default position values.
+ *
+ * This function returns an object with `top`, `left`, `width`, and `height` properties,
+ * which specify the initial position and size of the element. If values for `right` or `bottom`
+ * are provided instead of `top` and `left`, the function calculates the starting position based
+ * on the container dimensions, ensuring that the element is correctly positioned.
+ * @param {ContainerSize | undefined} containerSize - Object containing `containerHeight` and `containerWidth`. Defaults to 200 for both if not provided.
+ * @param {DefaultPosition} defaultPosition - Object defining the default vertical and horizontal positions (`top`, `bottom`, `height`, `left`, `right`, `width`).
+ * @returns {CurrentState} - The initial size and position of the element with `top`, `left`, `width`, and `height` properties.
+ */
+export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition, containerElement: HTMLElement | undefined) => CurrentState;

package/components/DragResizeWindow/helpers/getInitialSize.js

@@ -0,0 +1,56 @@
+const getInitialSize = (containerSize, defaultPosition, containerElement) => {
+  let top;
+  let bottom;
+  let height;
+  let left;
+  let right;
+  let width;
+  const containerHeight = containerSize?.containerHeight || 200;
+  const containerWidth = containerSize?.containerWidth || 200;
+  const scrollTop = containerElement?.scrollTop || 0;
+  const scrollLeft = containerElement?.scrollLeft || 0;
+  if ("top" in defaultPosition.vertical) {
+    top = defaultPosition.vertical.top;
+  }
+  if ("bottom" in defaultPosition.vertical) {
+    bottom = defaultPosition.vertical.bottom;
+  }
+  if ("height" in defaultPosition.vertical) {
+    height = defaultPosition.vertical.height;
+  }
+  if ("left" in defaultPosition.horizontal) {
+    left = defaultPosition.horizontal.left;
+  }
+  if ("right" in defaultPosition.horizontal) {
+    right = defaultPosition.horizontal.right;
+  }
+  if ("width" in defaultPosition.horizontal) {
+    width = defaultPosition.horizontal.width;
+    if (!("left" in defaultPosition.horizontal)) {
+      left = scrollLeft + (containerWidth - width) / 2;
+    }
+  }
+  if ("height" in defaultPosition.vertical) {
+    height = defaultPosition.vertical.height;
+    if (!("top" in defaultPosition.vertical)) {
+      top = scrollTop + (containerHeight - height) / 2;
+    }
+  }
+  if ("percent" in defaultPosition.vertical) {
+    height = containerHeight * defaultPosition.vertical.percent;
+    top = (containerHeight - height) / 2;
+  }
+  if ("percent" in defaultPosition.horizontal) {
+    width = containerWidth * defaultPosition.horizontal.percent;
+    left = (containerWidth - width) / 2;
+  }
+  return {
+    top: top ?? (bottom ? containerHeight - bottom - (height || 0) : 0),
+    height: height ?? containerHeight - (top || 0) - (bottom || 0),
+    left: left ?? (right ? containerWidth - right - (width || 0) : 0),
+    width: width ?? containerWidth - (left || 0) - (right || 0)
+  };
+};
+export {
+  getInitialSize as g
+};

package/components/DragResizeWindow/helpers/index.d.ts

@@ -1,15 +1,6 @@
-import { ContainerSize } from '../../../utils/types';
-import { CurrentState, DefaultPosition } from '../types';
-/**
- * Calculates the initial size and position of an element based on the provided container size
- * and default position values.
- *
- * This function returns an object with `top`, `left`, `width`, and `height` properties,
- * which specify the initial position and size of the element. If values for `right` or `bottom`
- * are provided instead of `top` and `left`, the function calculates the starting position based
- * on the container dimensions, ensuring that the element is correctly positioned.
- * @param {ContainerSize | undefined} containerSize - Object containing `containerHeight` and `containerWidth`. Defaults to 200 for both if not provided.
- * @param {DefaultPosition} defaultPosition - Object defining the default vertical and horizontal positions (`top`, `bottom`, `height`, `left`, `right`, `width`).
- * @returns {CurrentState} - The initial size and position of the element with `top`, `left`, `width`, and `height` properties.
- */
-export declare const getInitialSize: (containerSize: ContainerSize | undefined, defaultPosition: DefaultPosition) => CurrentState;
+export * from './draggingOrResizingWindow';
+export * from './expandingParentContainer';
+export * from './isElmentInViewport';
+export * from './pointPosition';
+export * from './shrinkingParentContainer';
+export * from './getInitialSize';

package/components/DragResizeWindow/helpers/index.js

@@ -1,37 +1 @@
-const getInitialSize = (containerSize, defaultPosition) => {
-  let top;
-  let bottom;
-  let height;
-  let left;
-  let right;
-  let width;
-  if ("top" in defaultPosition.vertical) {
-    top = defaultPosition.vertical.top;
-  }
-  if ("bottom" in defaultPosition.vertical) {
-    bottom = defaultPosition.vertical.bottom;
-  }
-  if ("height" in defaultPosition.vertical) {
-    height = defaultPosition.vertical.height;
-  }
-  if ("left" in defaultPosition.horizontal) {
-    left = defaultPosition.horizontal.left;
-  }
-  if ("right" in defaultPosition.horizontal) {
-    right = defaultPosition.horizontal.right;
-  }
-  if ("width" in defaultPosition.horizontal) {
-    width = defaultPosition.horizontal.width;
-  }
-  const containerHeight = containerSize?.containerHeight || 200;
-  const containerWidth = containerSize?.containerWidth || 200;
-  return {
-    top: top ?? (bottom ? containerHeight - bottom - (height || 0) : 0),
-    height: height ?? containerHeight - (top || 0) - (bottom || 0),
-    left: left ?? (right ? containerWidth - right - (width || 0) : 0),
-    width: width ?? containerWidth - (left || 0) - (right || 0)
-  };
-};
-export {
-  getInitialSize as g
-};
+

package/components/DragResizeWindow/helpers/isElmentInViewport.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Determina si un elemento está visible dentro del viewport de un contenedor
+ * @param element - El elemento a verificar
+ * @param container - El contenedor que define el viewport
+ * @param options - Opciones adicionales
+ * @returns Un objeto con información sobre la visibilidad horizontal y vertical
+ */
+export declare const isElementInViewport: (element: HTMLElement, container: HTMLElement, options?: {
+    tolerance: number;
+}) => {
+    isVisibleVertically: boolean;
+    isVisibleHorizontally: boolean;
+    isFullyVisible: boolean;
+    visiblePercentage: number;
+};

package/components/DragResizeWindow/helpers/isElmentInViewport.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindow/helpers/pointPosition.d.ts

@@ -0,0 +1,36 @@
+import { DraggableWindowBounds } from '../types';
+/**
+ * Verifica si el punto está dentro del rectángulo del contenedor
+ */
+export declare function isPointInsideContainer(e: React.MouseEvent<HTMLElement, MouseEvent>, container?: HTMLElement, bounds?: DraggableWindowBounds): boolean[];
+/**
+ * Resultado extendido que indica la posición del punto respecto al contenedor.
+ */
+export interface PointPosition {
+    isInside: boolean;
+    isLeft: boolean;
+    isRight: boolean;
+    isAbove: boolean;
+    isBelow: boolean;
+}
+/**
+ * Versión extendida que proporciona información detallada sobre la posición.
+ * Esta función se puede usar junto con la original cuando se necesite información adicional.
+ */
+export declare function getDetailedPointPosition(e: React.MouseEvent<HTMLElement, MouseEvent> | React.TouchEvent<HTMLElement>, element?: HTMLElement, bounds?: DraggableWindowBounds): [PointPosition, PointPosition];
+/**
+ * Resultado que indica si el punto está en la franja de arrastre en cada eje
+ */
+export interface DragStripPosition {
+    isInside: boolean;
+    isInStrip: boolean;
+}
+/**
+ * Verifica si un punto está dentro de las franjas de arrastre de un elemento
+ * y devuelve información detallada para los ejes X e Y
+ * @param e - Evento del mouse o touch
+ * @param element - Elemento a verificar
+ * @param stripWidth - Ancho de las franjas de arrastre (en píxeles)
+ * @returns - Tupla con información para el eje X y el eje Y
+ */
+export declare function isPointInDragStrip(e: React.MouseEvent<HTMLElement, MouseEvent> | React.TouchEvent<HTMLElement>, element?: HTMLElement, stripWidth?: number): [DragStripPosition, DragStripPosition];

package/components/DragResizeWindow/helpers/pointPosition.js

@@ -0,0 +1,82 @@
+function getDetailedPointPosition(e, element, bounds = { left: 0, top: 0, right: 0, bottom: 0 }) {
+  if (!element) {
+    return [
+      { isInside: false, isLeft: false, isRight: false, isAbove: false, isBelow: false },
+      { isInside: false, isLeft: false, isRight: false, isAbove: false, isBelow: false }
+    ];
+  }
+  let clientX, clientY;
+  if ("touches" in e) {
+    if (e.touches.length === 0) {
+      return [
+        { isInside: false, isLeft: false, isRight: false, isAbove: false, isBelow: false },
+        { isInside: false, isLeft: false, isRight: false, isAbove: false, isBelow: false }
+      ];
+    }
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  } else {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  }
+  const rect = element.getBoundingClientRect();
+  const leftBound = rect.left + (bounds.left || 0);
+  const rightBound = rect.left + element.clientWidth + (bounds.right || 0);
+  const topBound = rect.top + (bounds.top || 0);
+  const bottomBound = rect.top + element.clientHeight + (bounds.bottom || 0);
+  const xPosition = {
+    isInside: clientX >= leftBound && clientX <= rightBound,
+    isLeft: clientX < leftBound,
+    isRight: clientX > rightBound,
+    isAbove: false,
+    isBelow: false
+  };
+  const yPosition = {
+    isInside: clientY >= topBound && clientY <= bottomBound,
+    isLeft: false,
+    isRight: false,
+    isAbove: clientY < topBound,
+    isBelow: clientY > bottomBound
+  };
+  return [xPosition, yPosition];
+}
+function isPointInDragStrip(e, element, stripWidth = 1) {
+  const defaultResult = {
+    isInside: false,
+    isInStrip: false
+  };
+  if (!element) {
+    return [{ ...defaultResult }, { ...defaultResult }];
+  }
+  let clientX, clientY;
+  if ("touches" in e) {
+    if (e.touches.length === 0) {
+      return [{ ...defaultResult }, { ...defaultResult }];
+    }
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  } else {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  }
+  const rect = element.getBoundingClientRect();
+  const isInsideX = clientX >= rect.left && clientX <= rect.right;
+  const isInsideY = clientY >= rect.top && clientY <= rect.bottom;
+  const stripBoundLeft = rect.left - stripWidth;
+  const stripBoundRight = rect.right + stripWidth;
+  const stripBoundTop = rect.top - stripWidth;
+  const stripBoundBottom = rect.bottom + stripWidth;
+  const xPosition = {
+    isInside: isInsideX,
+    isInStrip: clientX >= stripBoundLeft && clientX <= stripBoundRight
+  };
+  const yPosition = {
+    isInside: isInsideY,
+    isInStrip: clientY >= stripBoundTop && clientY <= stripBoundBottom
+  };
+  return [xPosition, yPosition];
+}
+export {
+  getDetailedPointPosition as g,
+  isPointInDragStrip as i
+};

package/components/DragResizeWindow/helpers/shrinkingParentContainer.d.ts

@@ -0,0 +1,6 @@
+import { CurrentState, DraggableWindowBounds } from '../types';
+/**
+ * "shrinkingParentContainer": Encargada de manejar la contracción de la ventana padre
+ * 1. Si el ancho o alto de la ventana cuando se va compactando toca
+ */
+export declare const shrinkingParentContainer: (newState: CurrentState, cState: CurrentState, containerDimension: number, divRoot: HTMLDivElement, dimension: "Width" | "Height", allowResizeContainer: boolean | undefined, minWindowWidth: number, minWindowHeight: number, bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindow/helpers/shrinkingParentContainer.js

@@ -0,0 +1,34 @@
+const shrinkingParentContainer = (newState, cState, containerDimension, divRoot, dimension, allowResizeContainer = false, minWindowWidth, minWindowHeight, bounds) => {
+  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 && !allowResizeContainer) {
+    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;
+  }
+};
+export {
+  shrinkingParentContainer as s
+};

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

@@ -11,6 +11,8 @@ type useOnDragStartProps = {
     wrapperRef: React.RefObject<HTMLDivElement>;
     currentState: CurrentState;
     setCurrentState: React.Dispatch<React.SetStateAction<CurrentState>>;
+    allowHeightResizeContainer?: boolean;
+    allowWidthResizeContainer?: boolean;
 };
 /**
  * "useDimensionEffects" Redimensiona la ventana si el contenedor padre es desbordado por ella.