@m4l/components 0.2.34 → 0.2.36

package/components/GridLayout/{index.65470f01.js → index.b9c47a4c.js}

@@ -1,11 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
 import clsx from "clsx";
-import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.30016fc1.js";
+import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.69bc14e5.js";
 import { styled, alpha } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../react-resizable.c07d63fb.js";
+import { r as react_resizable_css } from "../../react-resizable.af1f31c1.js";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-import { jsx, jsxs } from "react/jsx-runtime";
 const COMPONENT_CLASS_NAME = "M4LGridLayout";
 const DEFAULT_COLS = 12;
 const DEFAULT_ROW_HEIGHT = 20;
@@ -183,10 +183,7 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
     isUserAction = false;
     const fakeItem = {
       x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: compactV ? Math.max(
-        collidesWith.y - getLayoutItemH(itemToMove, colapsedHeight, rowHeight),
-        0
-      ) : itemToMove.y,
+      y: compactV ? Math.max(collidesWith.y - getLayoutItemH(itemToMove, colapsedHeight, rowHeight), 0) : itemToMove.y,
       w: itemToMove.w,
       h: getLayoutItemH(itemToMove, colapsedHeight, rowHeight),
       i: "-1"
@@ -506,73 +503,73 @@ const gridLayoutClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "static"
 ]);
 const GridLayoutRoot = styled("div")`
-    overflow: auto;
-    position: relative;
-    transition: height 200ms ease;
+  overflow: auto;
+  position: relative;
+  transition: height 200ms ease;
 
-    .${gridLayoutClasses.gridItemRoot} {
-        transition: all 200ms ease;
-        transition-property: left, top;
-    }
-    .${gridLayoutClasses.gridItemRoot} img {
-        pointer-events: none;
-        user-select: none;
-    }
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.cssTransforms} {
-        transition-property: transform;
-        transition: left 0.1s ease, top 0.1s ease;
-    }
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeOther} {
-        display: none;
-    }
+  .${gridLayoutClasses.gridItemRoot} {
+    transition: all 200ms ease;
+    transition-property: left, top;
+  }
+  .${gridLayoutClasses.gridItemRoot} img {
+    pointer-events: none;
+    user-select: none;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.cssTransforms} {
+    transition-property: transform;
+    transition: left 0.1s ease, top 0.1s ease;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeOther} {
+    display: none;
+  }
 
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemFreeMove} {
-        z-index: 1;
-        will-change: width, height;
-    }
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizing} {
-        z-index: 2000;
-        will-change: width, height;
-    }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemFreeMove} {
+    z-index: 1;
+    will-change: width, height;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizing} {
+    z-index: 2000;
+    will-change: width, height;
+  }
 
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.dragging} {
-        transition: none;
-        z-index: 4000;
-        will-change: transform;
-    }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.dragging} {
+    transition: none;
+    z-index: 4000;
+    will-change: transform;
+  }
 
-    .${gridLayoutClasses.gridItemRoot}.dropping {
-        visibility: hidden;
-    }
+  .${gridLayoutClasses.gridItemRoot}.dropping {
+    visibility: hidden;
+  }
 
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
-        background: ${(props) => props.theme.palette.state.toneOp};
-        opacity: 0.5;
-        transition-duration: 100ms;
-        z-index: 3000;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        -o-user-select: none;
-        user-select: none;
-    }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
+    background: ${(props) => props.theme.palette.state.toneOp};
+    opacity: 0.5;
+    transition-duration: 100ms;
+    z-index: 3000;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
 
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle {
-        position: absolute;
-        width: 7px;
-        height: 7px;
-        background-image: unset;
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    background-image: unset;
 
-        & .M4LIcon-icon {
-            width: 10px;
-            height: 10px;
-            min-width: 10px;
-            min-height: 10px;
-            background-color: ${(props) => alpha(props.theme.palette.text.primary, 0.3)};
-        }
+    & .M4LIcon-icon {
+      width: 10px;
+      height: 10px;
+      min-width: 10px;
+      min-height: 10px;
+      background-color: ${(props) => alpha(props.theme.palette.text.primary, 0.3)};
     }
+  }
 
-    /*  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle::after {
+  /*  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle::after {
         content: '';
         position: absolute;
         right: 3px;
@@ -583,84 +580,84 @@ const GridLayoutRoot = styled("div")`
         border-bottom: 2px solid rgba(0, 0, 0, 0.4);
     } */
 
-    .react-resizable-hide > .react-resizable-handle {
-        display: none;
-        border-color: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-    }
+  .react-resizable-hide > .react-resizable-handle {
+    display: none;
+    border-color: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+  }
 
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-sw {
-        bottom: 3px;
-        left: 3px;
-        cursor: sw-resize;
-        transform: rotate(90deg);
-        border-right:  ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom:  ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom-right-radius: 15%;
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-se {
-        bottom: 3px;
-        right: 3px;
-        cursor: se-resize;
-        border-right:  ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom:  ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom-right-radius: 15%;
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-nw {
-        top: 3px;
-        left: 3px;
-        cursor: nw-resize;
-        transform: rotate(180deg);
-        border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom-right-radius: 15%;
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-ne {
-        top: 3px;
-        right: 3px;
-        cursor: ne-resize;
-        transform: rotate(270deg);
-        border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-        border-bottom-right-radius: 15%;
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w,
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
-        top: 50%;
-        margin-top: -10px;
-        cursor: ew-resize;
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w {
-        left: 0;
-        transform: rotate(135deg);
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
-        right: 0;
-        transform: rotate(315deg);
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n,
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
-        left: 50%;
-        margin-left: -10px;
-        cursor: ns-resize;
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n {
-        top: 0;
-        transform: rotate(225deg);
-    }
-    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
-        bottom: 0;
-        transform: rotate(45deg);
-    }
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeMe} > .react-resizable-handle,
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizeHide} > .react-resizable-handle {
-        display: none;
-    }
-    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.invisible} {
-        display: none;
-    }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-sw {
+    bottom: 3px;
+    left: 3px;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-se {
+    bottom: 3px;
+    right: 3px;
+    cursor: se-resize;
+    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-nw {
+    top: 3px;
+    left: 3px;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-ne {
+    top: 3px;
+    right: 3px;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-bottom-right-radius: 15%;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w,
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n,
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+  .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeMe} > .react-resizable-handle,
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizeHide} > .react-resizable-handle {
+    display: none;
+  }
+  .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.invisible} {
+    display: none;
+  }
 
-    ${react_resizable_css}
-    ${(props) => props.theme.components?.M4LGridLayout?.styleOverrides}
+  ${react_resizable_css}
+  ${(props) => props.theme.components?.M4LGridLayout?.styleOverrides}
 `;
 function GridLayout(props) {
   const {
@@ -719,9 +716,7 @@ function GridLayout(props) {
   refState.current.colapsedHeight = colapsedHeight;
   refState.current.rowHeight = rowHeight;
   useEffect(() => {
-    setCurrentState({
-      mounted: true
-    });
+    setCurrentState({ mounted: true });
   }, []);
   useEffect(() => {
     if (nrOnlayoutChanges > 0) {
@@ -754,260 +749,280 @@ function GridLayout(props) {
       setNrOnlayoutChanges((prev) => prev + 1);
     }
   }, []);
-  const localOnDragStart = useCallback((i, _x, _y, gridDragEvent) => {
-    const {
-      layout: layout2
-    } = refState.current;
-    const {
-      e,
-      node
-    } = gridDragEvent;
-    const li = getLayoutItem(layout2, i);
-    if (!li)
-      return;
-    refState.current = {
-      ...refState.current,
-      oldDragItem: cloneLayoutItem(li),
-      oldLayout: layout2
-    };
-    if (li && li.freeMove) {
-      onClickSetOnTopFreeMove(li.i, "onDragStart");
-    }
-    if (gridDragEvent.e.type !== "touchmove") {
-      gridDragEvent.e.preventDefault();
-    }
-    gridDragEvent.e.stopPropagation();
-    return onDragStart(layout2, li, li, void 0, e, node);
-  }, []);
-  const localOnDrag = useCallback((i, x, y, gridDragEvent) => {
-    const {
-      oldDragItem,
-      layout: layout2
-    } = refState.current;
-    const {
-      e,
-      node
-    } = gridDragEvent;
-    const li = getLayoutItem(layout2, i);
-    if (!li)
-      return;
-    const newPlaceholder = {
-      w: li.w,
-      h: getLayoutItemH(li, refState.current.colapsedHeight, refState.current.rowHeight),
-      x: li.x,
-      y: li.y,
-      placeholder: true,
-      i
-    };
-    const isUserAction = true;
-    try {
+  const localOnDragStart = useCallback(
+    (i, _x, _y, gridDragEvent) => {
+      const { layout: layout2 } = refState.current;
+      const { e, node } = gridDragEvent;
+      const li = getLayoutItem(layout2, i);
+      if (!li)
+        return;
+      refState.current = {
+        ...refState.current,
+        oldDragItem: cloneLayoutItem(li),
+        oldLayout: layout2
+      };
+      if (li && li.freeMove) {
+        onClickSetOnTopFreeMove(li.i, "onDragStart");
+      }
+      if (gridDragEvent.e.type !== "touchmove") {
+        gridDragEvent.e.preventDefault();
+      }
+      gridDragEvent.e.stopPropagation();
+      return onDragStart(layout2, li, li, void 0, e, node);
+    },
+    []
+  );
+  const localOnDrag = useCallback(
+    (i, x, y, gridDragEvent) => {
+      const { oldDragItem, layout: layout2 } = refState.current;
+      const { e, node } = gridDragEvent;
+      const li = getLayoutItem(layout2, i);
+      if (!li)
+        return;
+      const newPlaceholder = {
+        w: li.w,
+        h: getLayoutItemH(li, refState.current.colapsedHeight, refState.current.rowHeight),
+        x: li.x,
+        y: li.y,
+        placeholder: true,
+        i
+      };
+      const isUserAction = true;
+      try {
+        let newLayout;
+        if (!li.freeMove) {
+          newLayout = moveElement(
+            layout2,
+            li,
+            x,
+            y,
+            isUserAction,
+            preventCollision,
+            compactType,
+            cols,
+            refState.current.colapsedHeight,
+            refState.current.rowHeight,
+            allowOverlap
+          );
+        } else {
+          li.x = x;
+          li.y = y;
+          newPlaceholder.x = x;
+          newPlaceholder.y = y;
+          newLayout = cloneLayout(layout2);
+        }
+        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
+          newLayout,
+          compactType,
+          cols,
+          refState.current.colapsedHeight,
+          refState.current.rowHeight,
+          allowOverlap
+        );
+        refState.current = {
+          ...refState.current,
+          layout: finalLayout,
+          activeDrag: newPlaceholder
+        };
+        setCurrentState((prev) => ({
+          ...prev,
+          activeDrag: newPlaceholder
+        }));
+        setFinalLayoutRender(finalLayout);
+        if (gridDragEvent.e.type !== "touchmove") {
+          gridDragEvent.e.preventDefault();
+        }
+        gridDragEvent.e.stopPropagation();
+        onDrag(newLayout, oldDragItem, li, newPlaceholder, e, node);
+      } catch (error) {
+        console.warn("GridLayout error capturado");
+      }
+    },
+    []
+  );
+  const localOnDragStop = useCallback(
+    (i, x, y, { e, node }) => {
+      if (!refState.current.activeDrag) {
+        return;
+      }
+      const { oldDragItem, layout: layout2, oldLayout } = refState.current;
+      const li = getLayoutItem(layout2, i);
+      if (!li)
+        return;
       let newLayout;
+      const isUserAction = true;
       if (!li.freeMove) {
-        newLayout = moveElement(layout2, li, x, y, isUserAction, preventCollision, compactType, cols, refState.current.colapsedHeight, refState.current.rowHeight, allowOverlap);
+        newLayout = moveElement(
+          layout2,
+          li,
+          x,
+          y,
+          isUserAction,
+          preventCollision,
+          compactType,
+          cols,
+          refState.current.colapsedHeight,
+          refState.current.rowHeight,
+          allowOverlap
+        );
       } else {
         li.x = x;
         li.y = y;
-        newPlaceholder.x = x;
-        newPlaceholder.y = y;
         newLayout = cloneLayout(layout2);
       }
-      const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(newLayout, compactType, cols, refState.current.colapsedHeight, refState.current.rowHeight, allowOverlap);
-      refState.current = {
-        ...refState.current,
-        layout: finalLayout,
-        activeDrag: newPlaceholder
-      };
+      const finalLayout = allowOverlap ? newLayout || li.freeMove : compact(
+        newLayout,
+        compactType,
+        cols,
+        refState.current.colapsedHeight,
+        refState.current.rowHeight,
+        allowOverlap
+      );
       setCurrentState((prev) => ({
         ...prev,
-        activeDrag: newPlaceholder
+        activeDrag: void 0
       }));
       setFinalLayoutRender(finalLayout);
-      if (gridDragEvent.e.type !== "touchmove") {
-        gridDragEvent.e.preventDefault();
+      refState.current = {
+        ...refState.current,
+        layout: finalLayout,
+        oldDragItem: void 0,
+        oldLayout: void 0,
+        activeDrag: void 0
+      };
+      if (e.type !== "touchmove") {
+        e.preventDefault();
       }
-      gridDragEvent.e.stopPropagation();
-      onDrag(newLayout, oldDragItem, li, newPlaceholder, e, node);
-    } catch (error) {
-      console.warn("GridLayout error capturado");
-    }
-  }, []);
-  const localOnDragStop = useCallback((i, x, y, {
-    e,
-    node
-  }) => {
-    if (!refState.current.activeDrag) {
-      return;
-    }
-    const {
-      oldDragItem,
-      layout: layout2,
-      oldLayout
-    } = refState.current;
-    const li = getLayoutItem(layout2, i);
-    if (!li)
-      return;
-    let newLayout;
-    const isUserAction = true;
-    if (!li.freeMove) {
-      newLayout = moveElement(layout2, li, x, y, isUserAction, preventCollision, compactType, cols, refState.current.colapsedHeight, refState.current.rowHeight, allowOverlap);
-    } else {
-      li.x = x;
-      li.y = y;
-      newLayout = cloneLayout(layout2);
-    }
-    const finalLayout = allowOverlap ? newLayout || li.freeMove : compact(newLayout, compactType, cols, refState.current.colapsedHeight, refState.current.rowHeight, allowOverlap);
-    setCurrentState((prev) => ({
-      ...prev,
-      activeDrag: void 0
-    }));
-    setFinalLayoutRender(finalLayout);
-    refState.current = {
-      ...refState.current,
-      layout: finalLayout,
-      oldDragItem: void 0,
-      oldLayout: void 0,
-      activeDrag: void 0
-    };
-    if (e.type !== "touchmove") {
-      e.preventDefault();
-    }
-    e.stopPropagation();
-    onLayoutMaybeChanged(finalLayout, oldLayout);
-    onDragStop(layout2, oldDragItem, li, void 0, e, node);
-  }, []);
-  const localOnResizeStart = useCallback((i, _w, _h, {
-    e,
-    node
-  }) => {
-    const {
-      layout: layout2
-    } = refState.current;
-    const li = getLayoutItem(layout2, i);
-    if (!li)
-      return;
-    refState.current = {
-      ...refState.current,
-      oldResizeItem: cloneLayoutItem(li),
-      oldLayout: refState.current.layout
-    };
-    onResizeStart(layout2, li, li, void 0, e, node);
-    if (li && li.freeMove) {
-      onClickSetOnTopFreeMove(li.i, "onResizeStart");
-    }
-  }, []);
-  const localOnResize = useCallback((i, w, h, {
-    e,
-    node
-  }) => {
-    const {
-      layout: layout2,
-      oldResizeItem
-    } = refState.current;
-    let newLayout;
-    let li;
-    if (!oldResizeItem?.freeMove) {
-      const cb = (cbLi) => {
-        let hasCollisions;
-        if (preventCollision && !allowOverlap) {
-          const collisions = getAllCollisions(layout2, {
-            ...cbLi,
-            w,
-            h
-          }, refState.current.colapsedHeight, refState.current.rowHeight).filter((layoutItem) => layoutItem.i !== cbLi.i);
-          hasCollisions = collisions.length > 0;
-          if (hasCollisions) {
-            let leastX = Infinity, leastY = Infinity;
-            collisions.forEach((layoutItem) => {
-              if (layoutItem.x > cbLi.x)
-                leastX = Math.min(leastX, layoutItem.x);
-              if (layoutItem.y > cbLi.y)
-                leastY = Math.min(leastY, layoutItem.y);
-            });
-            if (Number.isFinite(leastX))
-              cbLi.w = leastX - cbLi.x;
-            if (Number.isFinite(leastY))
-              cbLi.h = leastY - cbLi.y;
+      e.stopPropagation();
+      onLayoutMaybeChanged(finalLayout, oldLayout);
+      onDragStop(layout2, oldDragItem, li, void 0, e, node);
+    },
+    []
+  );
+  const localOnResizeStart = useCallback(
+    (i, _w, _h, { e, node }) => {
+      const { layout: layout2 } = refState.current;
+      const li = getLayoutItem(layout2, i);
+      if (!li)
+        return;
+      refState.current = {
+        ...refState.current,
+        oldResizeItem: cloneLayoutItem(li),
+        oldLayout: refState.current.layout
+      };
+      onResizeStart(layout2, li, li, void 0, e, node);
+      if (li && li.freeMove) {
+        onClickSetOnTopFreeMove(li.i, "onResizeStart");
+      }
+    },
+    []
+  );
+  const localOnResize = useCallback(
+    (i, w, h, { e, node }) => {
+      const { layout: layout2, oldResizeItem } = refState.current;
+      let newLayout;
+      let li;
+      if (!oldResizeItem?.freeMove) {
+        const cb = (cbLi) => {
+          let hasCollisions;
+          if (preventCollision && !allowOverlap) {
+            const collisions = getAllCollisions(
+              layout2,
+              { ...cbLi, w, h },
+              refState.current.colapsedHeight,
+              refState.current.rowHeight
+            ).filter((layoutItem) => layoutItem.i !== cbLi.i);
+            hasCollisions = collisions.length > 0;
+            if (hasCollisions) {
+              let leastX = Infinity, leastY = Infinity;
+              collisions.forEach((layoutItem) => {
+                if (layoutItem.x > cbLi.x)
+                  leastX = Math.min(leastX, layoutItem.x);
+                if (layoutItem.y > cbLi.y)
+                  leastY = Math.min(leastY, layoutItem.y);
+              });
+              if (Number.isFinite(leastX))
+                cbLi.w = leastX - cbLi.x;
+              if (Number.isFinite(leastY))
+                cbLi.h = leastY - cbLi.y;
+            }
           }
+          if (!hasCollisions) {
+            cbLi.w = w;
+            cbLi.h = h;
+          }
+          return cbLi;
+        };
+        const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layout2), i, cb);
+        newLayout = tempLayout;
+        li = tempLi;
+      } else {
+        newLayout = cloneLayout(layout2);
+        li = getLayoutItem(newLayout, i);
+        if (li) {
+          li.w = w;
+          li.h = h;
         }
-        if (!hasCollisions) {
-          cbLi.w = w;
-          cbLi.h = h;
-        }
-        return cbLi;
+      }
+      if (!li)
+        return;
+      const newPlaceholder = {
+        w: li.w,
+        h: li.h,
+        x: li.x,
+        y: li.y,
+        static: true,
+        i
       };
-      const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layout2), i, cb);
-      newLayout = tempLayout;
-      li = tempLi;
-    } else {
-      newLayout = cloneLayout(layout2);
-      li = getLayoutItem(newLayout, i);
-      if (li) {
-        li.w = w;
-        li.h = h;
+      try {
+        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
+          newLayout,
+          compactType,
+          cols,
+          refState.current.colapsedHeight,
+          refState.current.rowHeight,
+          allowOverlap
+        );
+        refState.current = {
+          ...refState.current,
+          layout: finalLayout,
+          activeDrag: newPlaceholder
+        };
+        setFinalLayoutRender(finalLayout);
+        setCurrentState((prev) => ({ ...prev, activeDrag: newPlaceholder }));
+        onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
+      } catch (error) {
       }
-    }
-    if (!li)
-      return;
-    const newPlaceholder = {
-      w: li.w,
-      h: li.h,
-      x: li.x,
-      y: li.y,
-      static: true,
-      i
-    };
-    try {
-      const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(newLayout, compactType, cols, refState.current.colapsedHeight, refState.current.rowHeight, allowOverlap);
+      if (e.type !== "touchmove") {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+    },
+    []
+  );
+  const localOnResizeStop = useCallback(
+    (i, _w, _h, { e, node }) => {
+      if (!refState.current.activeDrag) {
+        return;
+      }
+      const { layout: layout2, oldResizeItem, oldLayout } = refState.current;
+      const l = getLayoutItem(layout2, i);
       refState.current = {
         ...refState.current,
-        layout: finalLayout,
-        activeDrag: newPlaceholder
+        oldResizeItem: void 0,
+        oldLayout: void 0,
+        activeDrag: void 0
       };
-      setFinalLayoutRender(finalLayout);
-      setCurrentState((prev) => ({
-        ...prev,
-        activeDrag: newPlaceholder
-      }));
-      onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
-    } catch (error) {
-    }
-    if (e.type !== "touchmove") {
-      e.preventDefault();
-    }
-    e.stopPropagation();
-  }, []);
-  const localOnResizeStop = useCallback((i, _w, _h, {
-    e,
-    node
-  }) => {
-    if (!refState.current.activeDrag) {
-      return;
-    }
-    const {
-      layout: layout2,
-      oldResizeItem,
-      oldLayout
-    } = refState.current;
-    const l = getLayoutItem(layout2, i);
-    refState.current = {
-      ...refState.current,
-      oldResizeItem: void 0,
-      oldLayout: void 0,
-      activeDrag: void 0
-    };
-    setCurrentState((prev) => ({
-      ...prev,
-      activeDrag: void 0
-    }));
-    onLayoutMaybeChanged(layout2, oldLayout);
-    if (l) {
-      onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
-    }
-  }, []);
+      setCurrentState((prev) => ({ ...prev, activeDrag: void 0 }));
+      onLayoutMaybeChanged(layout2, oldLayout);
+      if (l) {
+        onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
+      }
+    },
+    []
+  );
   const onClickSetOnTopFreeMove = useCallback((i, _source) => {
-    const {
-      layout: layout2
-    } = refState.current;
+    const { layout: layout2 } = refState.current;
     const index = refState.current.zIndexes.indexOf(i);
     const l = getLayoutItem(layout2, i);
     if (l && l?.freeMove) {
@@ -1023,105 +1038,132 @@ function GridLayout(props) {
     }
   }, []);
   const placeholder = () => {
-    const {
-      activeDrag
-    } = currentState;
+    const { activeDrag } = currentState;
     if (!activeDrag)
       return null;
-    return /* @__PURE__ */ jsx(MemonizedGridItem, {
-      type: "placeholder",
-      layoutItemRender,
-      w: activeDrag.w,
-      h: activeDrag.h,
-      x: activeDrag.x,
-      y: activeDrag.y,
-      i: activeDrag.i,
-      className: gridLayoutClasses.gridItemPlaceholder,
-      containerWidth,
-      containerHeight,
-      cols,
-      margin,
-      containerPadding,
-      maxRows,
-      rowHeight,
-      isDraggable: false,
-      isResizable: false,
-      isBounded: false,
-      useCSSTransforms,
-      transformScale,
-      draggableCancel: "",
-      draggableHandle: "",
-      minW: 0,
-      maxW: 0,
-      minH: 0,
-      maxH: 0,
-      maximize: "none",
-      colapsed: activeDrag.colapsed,
-      colapsedHeight
-    });
+    return /* @__PURE__ */ jsx(
+      MemonizedGridItem,
+      {
+        type: "placeholder",
+        layoutItemRender,
+        w: activeDrag.w,
+        h: activeDrag.h,
+        x: activeDrag.x,
+        y: activeDrag.y,
+        i: activeDrag.i,
+        className: gridLayoutClasses.gridItemPlaceholder,
+        containerWidth,
+        containerHeight,
+        cols,
+        margin,
+        containerPadding,
+        maxRows,
+        rowHeight,
+        isDraggable: false,
+        isResizable: false,
+        isBounded: false,
+        useCSSTransforms,
+        transformScale,
+        draggableCancel: "",
+        draggableHandle: "",
+        minW: 0,
+        maxW: 0,
+        minH: 0,
+        maxH: 0,
+        maximize: "none",
+        colapsed: activeDrag.colapsed,
+        colapsedHeight
+      }
+    );
   };
-  const processGridItem = useCallback((l, isMounted) => {
-    const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
-    const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
-    const resizeHandlesOptions = l.resizeHandles || resizeHandles;
-    const bounded = draggable && isBounded && l.isBounded !== false;
-    const mximize = maximizeId ? maximizeId === l.i ? "maximize_me" : "maximize_other" : "none";
-    let zIndex = void 0;
-    let style2;
-    if (l.freeMove) {
-      zIndex = zIndexes.indexOf(l.i);
-      if (zIndex !== -1) {
-        zIndex = zIndex + 1;
-        style2 = {
-          zIndex
-        };
+  const processGridItem = useCallback(
+    (l, isMounted) => {
+      const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
+      const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
+      const resizeHandlesOptions = l.resizeHandles || resizeHandles;
+      const bounded = draggable && isBounded && l.isBounded !== false;
+      const mximize = maximizeId ? maximizeId === l.i ? "maximize_me" : "maximize_other" : "none";
+      let zIndex = void 0;
+      let style2;
+      if (l.freeMove) {
+        zIndex = zIndexes.indexOf(l.i);
+        if (zIndex !== -1) {
+          zIndex = zIndex + 1;
+          style2 = { zIndex };
+        }
       }
-    }
-    return /* @__PURE__ */ jsx(MemonizedGridItem, {
-      type: "layoutItem",
-      layoutItemRender,
+      return /* @__PURE__ */ jsx(
+        MemonizedGridItem,
+        {
+          type: "layoutItem",
+          layoutItemRender,
+          containerWidth,
+          containerHeight,
+          cols,
+          margin,
+          containerPadding: containerPadding || margin,
+          maxRows,
+          rowHeight,
+          draggableCancel,
+          draggableHandle,
+          onDragStart: localOnDragStart,
+          onDrag: localOnDrag,
+          onDragStop: localOnDragStop,
+          onResizeStart: localOnResizeStart,
+          onResize: localOnResize,
+          onResizeStop: localOnResizeStop,
+          onFreeMoveClick: l.freeMove ? onClickSetOnTopFreeMove : void 0,
+          isDraggable: draggable,
+          isResizable: resizable,
+          isBounded: bounded,
+          useCSSTransforms: useCSSTransforms && isMounted,
+          usePercentages: !isMounted,
+          transformScale,
+          w: l.w,
+          h: l.h,
+          x: l.x,
+          y: l.y,
+          i: l.i,
+          minH: l.minH,
+          minW: l.minW,
+          maxH: l.maxH,
+          maxW: l.maxW,
+          static: l.static,
+          resizeHandles: resizeHandlesOptions,
+          resizeHandle,
+          maximize: mximize,
+          freeMove: l.freeMove,
+          colapsed: l.colapsed,
+          visible: l.visible,
+          colapsedHeight,
+          style: style2
+        },
+        l.i
+      );
+    },
+    [
       containerWidth,
       containerHeight,
       cols,
       margin,
-      containerPadding: containerPadding || margin,
+      containerPadding,
       maxRows,
       rowHeight,
       draggableCancel,
       draggableHandle,
-      onDragStart: localOnDragStart,
-      onDrag: localOnDrag,
-      onDragStop: localOnDragStop,
-      onResizeStart: localOnResizeStart,
-      onResize: localOnResize,
-      onResizeStop: localOnResizeStop,
-      onFreeMoveClick: l.freeMove ? onClickSetOnTopFreeMove : void 0,
-      isDraggable: draggable,
-      isResizable: resizable,
-      isBounded: bounded,
-      useCSSTransforms: useCSSTransforms && isMounted,
-      usePercentages: !isMounted,
+      isDraggable,
+      isResizable,
+      isBounded,
+      useCSSTransforms,
       transformScale,
-      w: l.w,
-      h: l.h,
-      x: l.x,
-      y: l.y,
-      i: l.i,
-      minH: l.minH,
-      minW: l.minW,
-      maxH: l.maxH,
-      maxW: l.maxW,
-      static: l.static,
-      resizeHandles: resizeHandlesOptions,
+      resizeHandles,
       resizeHandle,
-      maximize: mximize,
-      freeMove: l.freeMove,
-      colapsed: l.colapsed,
-      visible: l.visible,
+      maximizeId,
+      zIndexes,
       colapsedHeight,
-      style: style2
-    }, l.i);
-  }, [containerWidth, containerHeight, cols, margin, containerPadding, maxRows, rowHeight, draggableCancel, draggableHandle, isDraggable, isResizable, isBounded, useCSSTransforms, transformScale, resizeHandles, resizeHandle, maximizeId, zIndexes, colapsedHeight, rowHeight]);
+      rowHeight
+    ]
+  );
   const containerAutoSizeHeight = useCallback(() => {
     if (!autoSize)
       return;
@@ -1133,12 +1175,18 @@ function GridLayout(props) {
     height: containerAutoSizeHeight(),
     ...style
   };
-  return /* @__PURE__ */ jsxs(GridLayoutRoot, {
-    className: clsx(gridLayoutClasses.root, className),
-    style: mergedStyle,
-    ref: innerRef,
-    children: [finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)), placeholder()]
-  });
+  return /* @__PURE__ */ jsxs(
+    GridLayoutRoot,
+    {
+      className: clsx(gridLayoutClasses.root, className),
+      style: mergedStyle,
+      ref: innerRef,
+      children: [
+        finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)),
+        placeholder()
+      ]
+    }
+  );
 }
 export {
   isEqualLayouts as A,