@m4l/components 0.1.80 → 0.1.82

package/components/GridLayout/{index.a792aacb.js → index.76bccc4f.js}

@@ -1,19 +1,31 @@
-import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { d as deepEqual } from "../../node_modules.d73a220d.js";
+import { useState, useRef, useEffect, useCallback } from "react";
 import clsx from "clsx";
-import { i as isEqualLayout } from "./Responsive/index.1671380a.js";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { D as DraggableCore_1 } from "../../react-draggable.7abb5d0a.js";
-import { R as Resizable, r as react_resizable_css } from "../../react-resizable.ba08699a.js";
+import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.01fc14c3.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
+import { r as react_resizable_css } from "../../react-resizable.ba08699a.js";
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
 import "@m4l/graphics";
 import "lodash";
+const COMPONENT_CLASS_NAME = "M4LGridLayout";
+const DEFAULT_COLS = 12;
+const DEFAULT_ROW_HEIGHT = 150;
+const DEFAULT_CONTAINER_WIDTH = 1280;
+const DEFAULT_CONTAINER_HEIGHT = 480;
+const DEFAULT_RESPONSIVE_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 };
+const DEFAULT_RESPONSIVE_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
+const DEFAULT_CONTAINER_PADDING = [10, 10];
+const DEFAULT_MARGIN = [10, 10];
+const DEFAULT_TRANSFORM_SCALE = 1;
+const DEFAULT_COLAPSED_HEIGHT = 35;
+const THROTTLE_RESIZE_TIME = 200;
 const noop = () => {
 };
-function bottom(layout, colapsedHeight) {
+function bottom(layout, colapsedHeight, rowHeight) {
   let max = 0, bottomY;
   for (let i = 0, len = layout.length; i < len; i++) {
-    bottomY = layout[i].y + getLayoutItemH(layout[i], colapsedHeight);
+    bottomY = layout[i].y + getLayoutItemH(layout[i], colapsedHeight, rowHeight);
     if (bottomY > max)
       max = bottomY;
   }
@@ -49,55 +61,57 @@ function cloneLayout(layout, layoutItemReplaceProps) {
   }
   return newLayout;
 }
-function collides(l1, l2, colapsedHeight) {
+function collides(l1, l2, colapsedHeight, rowHeight) {
   if (l1.i === l2.i)
     return false;
   if (l1.x + l1.w <= l2.x)
     return false;
   if (l1.x >= l2.x + l2.w)
     return false;
-  if (l1.y + getLayoutItemH(l1, colapsedHeight) <= l2.y)
+  if (l1.y + getLayoutItemH(l1, colapsedHeight, rowHeight) <= l2.y)
     return false;
-  if (l1.y >= l2.y + getLayoutItemH(l2, colapsedHeight))
+  if (l1.y >= l2.y + getLayoutItemH(l2, colapsedHeight, rowHeight))
     return false;
   return true;
 }
-function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeight, allowOverlap) {
+function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeight, rowHeight, allowOverlap) {
   const compactV = compactType === "vertical";
   const compactH = compactType === "horizontal";
   if (compactV) {
-    l.y = Math.min(bottom(compareWith, colapsedHeight), l.y);
-    while (l.y > 0 && !getFirstCollision(compareWith, l, colapsedHeight)) {
+    l.y = Math.min(bottom(compareWith, colapsedHeight, rowHeight), l.y);
+    while (l.y > 0 && !getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) {
       l.y--;
     }
   } else if (compactH) {
-    while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight)) {
+    while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) {
       l.x--;
     }
   }
   let collidesItem;
-  while ((collidesItem = getFirstCollision(compareWith, l, colapsedHeight)) && !(compactType === null && allowOverlap)) {
+  while ((collidesItem = getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) && !(compactType === null && allowOverlap)) {
     if (compactH) {
       resolveCompactionCollision(
         fullLayout,
         l,
         collidesItem.x + collidesItem.w,
         "x",
-        colapsedHeight
+        colapsedHeight,
+        rowHeight
       );
     } else {
       resolveCompactionCollision(
         fullLayout,
         l,
-        collidesItem.y + getLayoutItemH(collidesItem, colapsedHeight),
+        collidesItem.y + getLayoutItemH(collidesItem, colapsedHeight, rowHeight),
         "y",
-        colapsedHeight
+        colapsedHeight,
+        rowHeight
       );
     }
     if (compactH && l.x + l.w > cols) {
       l.x = cols - l.w;
       l.y++;
-      while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight)) {
+      while (l.x > 0 && !getFirstCollision(compareWith, l, colapsedHeight, rowHeight)) {
         l.x--;
       }
     }
@@ -106,7 +120,7 @@ function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeig
   l.x = Math.max(l.x, 0);
   return l;
 }
-function compact(layout, compactType, cols, colapsedHeight, allowOverlap) {
+function compact(layout, compactType, cols, colapsedHeight, rowHeight, allowOverlap) {
   const layoutToCompact = layout.filter((l) => !l.freeMove);
   const layoutFreeMov = layout.filter((l) => l?.freeMove);
   const compareWith = getStatics(layoutToCompact);
@@ -122,6 +136,7 @@ function compact(layout, compactType, cols, colapsedHeight, allowOverlap) {
         cols,
         sorted,
         colapsedHeight,
+        rowHeight,
         allowOverlap
       );
       compareWith.push(l);
@@ -141,12 +156,12 @@ function getLayoutItem(layout, id) {
 function getStatics(layout) {
   return layout.filter((l) => l.static);
 }
-function getAllCollisions(layout, layoutItem, colapsedHeight) {
-  return layout.filter((l) => collides(l, layoutItem, colapsedHeight));
+function getAllCollisions(layout, layoutItem, colapsedHeight, rowHeight) {
+  return layout.filter((l) => collides(l, layoutItem, colapsedHeight, rowHeight));
 }
-function getFirstCollision(layout, layoutItem, colapsedHeight) {
+function getFirstCollision(layout, layoutItem, colapsedHeight, rowHeight) {
   for (let i = 0, len = layout.length; i < len; i++) {
-    if (collides(layout[i], layoutItem, colapsedHeight))
+    if (collides(layout[i], layoutItem, colapsedHeight, rowHeight))
       return layout[i];
   }
   return void 0;
@@ -162,7 +177,7 @@ function modifyLayout(layout, layoutItem) {
   }
   return newLayout;
 }
-function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols, colapsedHeight) {
+function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols, colapsedHeight, rowHeight) {
   const compactH = compactType === "horizontal";
   const compactV = compactType !== "horizontal";
   const preventCollision = collidesWith.static;
@@ -170,12 +185,15 @@ 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), 0) : itemToMove.y,
+      y: compactV ? Math.max(
+        collidesWith.y - getLayoutItemH(itemToMove, colapsedHeight, rowHeight),
+        0
+      ) : itemToMove.y,
       w: itemToMove.w,
-      h: getLayoutItemH(itemToMove, colapsedHeight),
+      h: getLayoutItemH(itemToMove, colapsedHeight, rowHeight),
       i: "-1"
     };
-    if (!getFirstCollision(layout, fakeItem, colapsedHeight)) {
+    if (!getFirstCollision(layout, fakeItem, colapsedHeight, rowHeight)) {
       return moveElement(
         layout,
         itemToMove,
@@ -186,6 +204,7 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
         compactType,
         cols,
         colapsedHeight,
+        rowHeight,
         false
       );
     }
@@ -200,10 +219,11 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
     compactType,
     cols,
     colapsedHeight,
+    rowHeight,
     false
   );
 }
-function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap) {
+function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, rowHeight, allowOverlap) {
   if (l.static && l.isDraggable !== true)
     return layout;
   if (l.y === y && l.x === x)
@@ -219,7 +239,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
   const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
   if (movingUp)
     sorted = sorted.reverse();
-  const collisions = getAllCollisions(sorted, l, colapsedHeight);
+  const collisions = getAllCollisions(sorted, l, colapsedHeight, rowHeight);
   const hasCollisions = collisions.length > 0;
   if (hasCollisions && allowOverlap) {
     return cloneLayout(layout);
@@ -241,7 +261,8 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
         isUserAction,
         compactType,
         cols,
-        colapsedHeight
+        colapsedHeight,
+        rowHeight
       );
     } else {
       layout = moveElementAwayFromCollision(
@@ -251,7 +272,8 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
         isUserAction,
         compactType,
         cols,
-        colapsedHeight
+        colapsedHeight,
+        rowHeight
       );
     }
   }
@@ -260,7 +282,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
 function perc(num) {
   return num * 100 + "%";
 }
-function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHeight) {
+function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHeight, rowHeight) {
   item[axis] += 1;
   const itemIndex = layout.map((layoutItem) => {
     return layoutItem.i;
@@ -269,15 +291,16 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHei
     const otherItem = layout[i];
     if (otherItem.static)
       continue;
-    if (otherItem.y > item.y + getLayoutItemH(item, colapsedHeight))
+    if (otherItem.y > item.y + getLayoutItemH(item, colapsedHeight, rowHeight))
       break;
-    if (collides(item, otherItem, colapsedHeight)) {
+    if (collides(item, otherItem, colapsedHeight, rowHeight)) {
       resolveCompactionCollision(
         layout,
         otherItem,
-        moveToCoord + (axis === "x" ? item.w : getLayoutItemH(item, colapsedHeight)),
+        moveToCoord + (axis === "x" ? item.w : getLayoutItemH(item, colapsedHeight, rowHeight)),
         axis,
-        colapsedHeight
+        colapsedHeight,
+        rowHeight
       );
     }
   }
@@ -339,7 +362,7 @@ function withLayoutItem(layout, itemKey, cb) {
   layout = modifyLayout(layout, item);
   return [layout, item];
 }
-function correctBounds(layout, bounds, colapsedHeight) {
+function correctBounds(layout, bounds, colapsedHeight, rowHeight) {
   const collidesWith = getStatics(layout);
   for (let i = 0, len = layout.length; i < len; i++) {
     const l = layout[i];
@@ -352,21 +375,61 @@ function correctBounds(layout, bounds, colapsedHeight) {
     if (!l.static)
       collidesWith.push(l);
     else {
-      while (getFirstCollision(collidesWith, l, colapsedHeight)) {
+      while (getFirstCollision(collidesWith, l, colapsedHeight, rowHeight)) {
         l.y++;
       }
     }
   }
   return layout;
 }
-function getH(h, colapsedHeight, colapsed) {
+function getH(h, colapsedHeight, rowHeight, colapsed) {
   if (colapsed) {
-    return colapsedHeight;
+    let ret;
+    if (rowHeight && rowHeight > 0) {
+      ret = colapsedHeight / rowHeight;
+    } else {
+      ret = colapsedHeight / DEFAULT_ROW_HEIGHT;
+    }
+    return ret;
   }
   return h;
 }
-function getLayoutItemH(layoutItem, colapsedHeight) {
-  return getH(layoutItem.h, colapsedHeight, layoutItem.colapsed);
+function getLayoutItemH(layoutItem, colapsedHeight, rowHeight) {
+  return getH(layoutItem.h, colapsedHeight, rowHeight, layoutItem.colapsed);
+}
+function isEqualLayoutItem(layoutA, layoutB) {
+  if (layoutA.i !== layoutB.i) {
+    return false;
+  } else if (layoutA.x !== layoutB.x || layoutA.y !== layoutB.y || layoutA.w !== layoutB.w || layoutA.h !== layoutB.h || layoutA.colapsed !== layoutB.colapsed || layoutA.visible !== layoutB.visible || layoutA.freeMove !== layoutB.freeMove) {
+    return false;
+  }
+  return true;
+}
+function isEqualLayout(layoutA, layoutB) {
+  if (layoutA.length !== layoutB.length) {
+    return false;
+  }
+  for (let index = 0; index < layoutA.length; index++) {
+    if (!isEqualLayoutItem(layoutA[index], layoutB[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function isEqualLayouts(layoutsA, layoutsB) {
+  if (Object.keys(layoutsA).length !== Object.keys(layoutsB).length) {
+    return false;
+  }
+  for (const breakPoint in layoutsA) {
+    if (layoutsB[breakPoint]) {
+      if (!isEqualLayout(layoutsA[breakPoint], layoutsB[breakPoint])) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  return true;
 }
 function calcGridColWidth(positionParams) {
   const { containerMargin: margin, containerPadding, containerWidth, cols } = positionParams;
@@ -432,367 +495,22 @@ function calcWH(positionParams, width, height, x, y) {
 function clamp(num, lowerBound, upperBound) {
   return Math.max(Math.min(num, upperBound), lowerBound);
 }
-function GridItem(props) {
-  const {
-    type,
-    i,
-    x,
-    y,
-    w,
-    h,
-    cols,
-    isBounded,
-    margin,
-    maxRows,
-    rowHeight,
-    containerWidth,
-    containerHeight,
-    containerPadding,
-    className = "",
-    cancel = "",
-    handle = "",
-    minH = 1,
-    minW = 1,
-    maxH = Infinity,
-    maxW = Infinity,
-    isResizable,
-    isDraggable,
-    onDragStart,
-    onDrag,
-    onDragStop,
-    onFreeMoveClick,
-    layoutItemRender: ComponentItemRender,
-    resizeHandles,
-    resizeHandle,
-    transformScale = 1,
-    useCSSTransforms = true,
-    usePercentages,
-    style,
-    freeMove,
-    maximize = "none",
-    colapsed,
-    colapsedHeight = 1.5,
-    visible = true
-  } = props;
-  const refProps = useRef({
-    cols,
-    x,
-    y,
-    w,
-    h: getH(h, colapsedHeight, colapsed),
-    minW,
-    maxW,
-    minH,
-    maxH,
-    containerWidth,
-    containerHeight,
-    margin,
-    containerPadding,
-    rowHeight,
-    maxRows,
-    colapsed
-  });
-  useEffect(() => {
-    refProps.current = {
-      cols,
-      x,
-      y,
-      w,
-      h: getH(h, colapsedHeight, colapsed),
-      minW,
-      maxW,
-      minH,
-      maxH,
-      containerWidth,
-      containerHeight,
-      margin,
-      containerPadding,
-      rowHeight,
-      maxRows,
-      colapsed
-    };
-  }, [cols, x, y, w, h, minW, maxW, minH, maxH, containerWidth, containerHeight, margin, containerPadding, rowHeight, maxRows, colapsed, colapsedHeight]);
-  const [currentState, setCurrentState] = useState({
-    resizing: void 0,
-    dragging: void 0,
-    className: ""
-  });
-  const refState = useRef({
-    resizing: void 0,
-    dragging: void 0,
-    className: ""
-  });
-  const elementRef = useRef(null);
-  const getPositionParams = useCallback((preferContainerWidth, preferContainerHeight) => {
-    return {
-      cols: refProps.current.cols,
-      containerPadding: refProps.current.containerPadding,
-      containerWidth: preferContainerWidth || refProps.current.containerWidth,
-      containerHeight: preferContainerHeight || refProps.current.containerHeight,
-      containerMargin: refProps.current.margin,
-      maxRows: refProps.current.maxRows,
-      rowHeight: refProps.current.rowHeight
-    };
-  }, []);
-  useEffect(() => {
-    return () => {
-    };
-  }, []);
-  const createStyle = (pos2) => {
-    let newStyle;
-    if (useCSSTransforms) {
-      newStyle = setTransform(pos2);
-    } else {
-      newStyle = setTopLeft(pos2);
-      if (usePercentages) {
-        newStyle.left = perc(pos2.left / containerWidth);
-        newStyle.width = perc(pos2.width / containerWidth);
-      }
-    }
-    return newStyle;
-  };
-  const gridItemOnDragStart = useCallback((e, {
-    node
-  }) => {
-    if (!onDragStart)
-      return;
-    const newPosition = {
-      top: 0,
-      left: 0
-    };
-    const {
-      offsetParent
-    } = node;
-    if (!offsetParent)
-      return;
-    const parentRect = offsetParent.getBoundingClientRect();
-    const clientRect = node.getBoundingClientRect();
-    const cLeft = clientRect.left / transformScale;
-    const pLeft = parentRect.left / transformScale;
-    const cTop = clientRect.top / transformScale;
-    const pTop = parentRect.top / transformScale;
-    newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
-    newPosition.top = cTop - pTop + offsetParent.scrollTop;
-    setCurrentState((prev) => ({
-      ...prev,
-      dragging: newPosition
-    }));
-    refState.current.dragging = newPosition;
-    const {
-      x: newX,
-      y: newY
-    } = calcXY(getPositionParams(), newPosition.top, newPosition.left, refProps.current.w, refProps.current.h);
-    onDragStart(i, newX, newY, {
-      e,
-      node,
-      newPosition
-    });
-  }, []);
-  const gridItemOnDrag = useCallback((e, {
-    node,
-    deltaX,
-    deltaY
-  }) => {
-    if (!onDrag)
-      return;
-    if (!refState.current.dragging) {
-      console.warn("gridItemOnDrag onDrag called before onDragStart");
-      return;
-    }
-    let top = refState.current.dragging.top + deltaY;
-    let left = refState.current.dragging.left + deltaX;
-    const positionParams = getPositionParams();
-    if (isBounded) {
-      const {
-        offsetParent
-      } = node;
-      if (offsetParent) {
-        const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(refProps.current.h, refProps.current.rowHeight, refProps.current.margin[1]);
-        top = clamp(top, 0, bottomBoundary);
-        const colWidth = calcGridColWidth(positionParams);
-        const rightBoundary = containerWidth - calcGridItemWHPx(refProps.current.w, colWidth, refProps.current.margin[0]);
-        left = clamp(left, 0, rightBoundary);
-      }
-    }
-    const newPosition = {
-      top,
-      left
-    };
-    refState.current.dragging = newPosition;
-    const {
-      x: newX,
-      y: newY
-    } = calcXY(positionParams, top, left, refProps.current.w, refProps.current.h);
-    onDrag(i, newX, newY, {
-      e,
-      node,
-      newPosition
-    });
-    setCurrentState((prev) => ({
-      ...prev,
-      dragging: newPosition
-    }));
-  }, []);
-  const gridItemOnDragStop = useCallback((e, {
-    node
-  }) => {
-    if (!onDragStop)
-      return;
-    if (!refState.current.dragging) {
-      console.warn("onDragEnd called before onDragStart");
-      return;
-    }
-    const {
-      left,
-      top
-    } = refState.current.dragging;
-    const newPosition = {
-      top,
-      left
-    };
-    setCurrentState((prev) => ({
-      ...prev,
-      dragging: void 0
-    }));
-    refState.current.dragging = void 0;
-    const {
-      x: newX,
-      y: newY
-    } = calcXY(getPositionParams(), top, left, refProps.current.w, refProps.current.h);
-    return onDragStop(i, newX, newY, {
-      e,
-      node,
-      newPosition
-    });
-  }, []);
-  const onResizeHandler = useCallback((e, {
-    node,
-    size
-  }, handlerName) => {
-    const handler = props[handlerName];
-    if (!handler) {
-      console.error("no puede irse por aca");
-      return;
-    }
-    if (colapsed) {
-      console.error("no puede tener resize");
-      return;
-    }
-    let {
-      w: newW,
-      h: newH
-    } = calcWH(getPositionParams(), size.width, size.height, refProps.current.x, refProps.current.y);
-    const newMinW = Math.max(refProps.current.minW, 1);
-    const newMaxW = Math.min(refProps.current.maxW, refProps.current.cols - refProps.current.x);
-    newW = clamp(newW, newMinW, newMaxW);
-    newH = clamp(newH, refProps.current.minH, refProps.current.maxH);
-    setCurrentState((prev) => ({
-      ...prev,
-      resizing: handlerName === "onResizeStop" ? void 0 : size
-    }));
-    handler(i, newW, newH, {
-      e,
-      node,
-      size
-    });
-  }, []);
-  const localOnResizeStop = useCallback((e, callbackData) => {
-    onResizeHandler(e, callbackData, "onResizeStop");
-  }, []);
-  const localOnResizeStart = useCallback((e, callbackData) => {
-    onResizeHandler(e, callbackData, "onResizeStart");
-  }, []);
-  const localFreeMoveOnClick = useCallback(() => {
-    if (!onFreeMoveClick)
-      return;
-    onFreeMoveClick(i);
-  }, []);
-  const mixinResizable = useCallback((child, position, positionParams) => {
-    const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0, maximize).width;
-    const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH, maximize);
-    const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH, maximize);
-    const minConstraints = [mins.width, mins.height];
-    const maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
-    return /* @__PURE__ */ jsx(
-      Resizable,
-      {
-        draggableOpts: {
-          disabled: !isResizable || maximize !== "none" || colapsed
-        },
-        className: isResizable ? void 0 : "react-resizable-hide",
-        width: position.width,
-        height: position.height,
-        minConstraints,
-        maxConstraints,
-        onResizeStop: localOnResizeStop,
-        onResizeStart: localOnResizeStart,
-        onResize: localOnResize,
-        transformScale,
-        resizeHandles,
-        handle: resizeHandle,
-        children: child
-      }
-    );
-  }, [cols, x, minW, minH, maxW, maxH, isResizable, transformScale, resizeHandles, resizeHandle, maximize, colapsed]);
-  const mixinDraggable = useCallback((child) => {
-    return /* @__PURE__ */ jsx(DraggableCore_1, {
-      disabled: !isDraggable || maximize !== "none",
-      onStart: gridItemOnDragStart,
-      onDrag: gridItemOnDrag,
-      onStop: gridItemOnDragStop,
-      handle,
-      cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
-      scale: transformScale,
-      nodeRef: elementRef,
-      children: child
-    });
-  }, [isDraggable, handle, transformScale, cancel, maximize]);
-  const localOnResize = useCallback((e, callbackData) => {
-    onResizeHandler(e, callbackData, "onResize");
-  }, []);
-  const positionParms = getPositionParams(containerWidth, containerHeight);
-  const pos = calcGridItemPosition(positionParms, x, y, w, getH(h, colapsedHeight, colapsed), maximize, currentState);
-  const classNameFinal = clsx("M4LGridItem", className, {
-    type,
-    static: props.static,
-    resizing: Boolean(currentState.resizing),
-    "react-draggable": isDraggable,
-    "react-maximize-me": maximize === "maximize_me",
-    "react-maximize-other": maximize === "maximize_other",
-    "react-colapsed": colapsed,
-    M4LGridItemPopup: freeMove,
-    "react-draggable-dragging": Boolean(currentState.dragging),
-    M4LColapsed: colapsed,
-    M4LResizeHide: colapsed,
-    M4LInvisible: !visible,
-    cssTransforms: useCSSTransforms
-  });
-  const styleFinal = {
-    ...style,
-    ...createStyle(pos)
-  };
-  const memoLayouItemRender = useMemo(() => {
-    return /* @__PURE__ */ jsx(ComponentItemRender, {
-      type,
-      i
-    });
-  }, [type, i]);
-  const baseGridItem = /* @__PURE__ */ jsx("div", {
-    className: classNameFinal,
-    ref: elementRef,
-    style: styleFinal,
-    role: "presentation",
-    onClick: localFreeMoveOnClick,
-    children: memoLayouItemRender
-  });
-  const gridItem = mixinDraggable(mixinResizable(baseGridItem, pos, getPositionParams()));
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: gridItem
-  });
-}
-const MemonizedGridItem = React__default.memo(GridItem, (prevProps, nextProps) => {
-  return deepEqual(prevProps, nextProps);
-});
+const gridLayoutClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "gridItemRoot",
+  "gridItemType",
+  "gridItemPlaceholder",
+  "gridItemFreeMove",
+  "maximizeMe",
+  "maximizeOther",
+  "colapsed",
+  "resizeHide",
+  "invisible",
+  "cssTransforms",
+  "resizing",
+  "dragging",
+  "static"
+]);
 const GridLayoutRoot = styled("div")`
     /* height: 100%; */
     overflow: auto;
@@ -801,45 +519,45 @@ const GridLayoutRoot = styled("div")`
     transition: height 200ms ease;
     /* border: 1px dashed gray; //TODO:Para borrar */
 
-    .M4LGridItem {
+    .${gridLayoutClasses.gridItemRoot} {
         transition: all 200ms ease;
         transition-property: left, top;
     }
-    .M4LGridItem img {
+    .${gridLayoutClasses.gridItemRoot} img {
         pointer-events: none;
         user-select: none;
     }
-    .M4LGridItem.cssTransforms {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.cssTransforms} {
         transition-property: transform;
     }
-    .M4LGridItem.react-maximize-other {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeOther} {
         display: none;
     }
 
-    .M4LGridItem.M4LGridItemPopup {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemFreeMove} {
         z-index: 1;
         will-change: width, height;
     }
-    .M4LGridItem.resizing {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizing} {
         z-index: 2000;
         will-change: width, height;
     }
 
-    .M4LGridItem.react-draggable-dragging {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.dragging} {
         transition: none;
         z-index: 4000;
         will-change: transform;
     }
 
-    .M4LGridItem.dropping {
+    .${gridLayoutClasses.gridItemRoot}.dropping {
         visibility: hidden;
     }
 
-    .M4LGridItem.react-grid-placeholder {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
         background: green;
         opacity: 0.2;
         transition-duration: 100ms;
-        z-index: 300000;
+        z-index: 3000;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
@@ -847,13 +565,13 @@ const GridLayoutRoot = styled("div")`
         user-select: none;
     }
 
-    .M4LGridItem > .react-resizable-handle {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle {
         position: absolute;
         width: 20px;
         height: 20px;
     }
 
-    .M4LGridItem > .react-resizable-handle::after {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle::after {
         content: '';
         position: absolute;
         right: 3px;
@@ -868,128 +586,133 @@ const GridLayoutRoot = styled("div")`
         display: none;
     }
 
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-sw {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-sw {
         bottom: 0;
         left: 0;
         cursor: sw-resize;
         transform: rotate(90deg);
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-se {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-se {
         bottom: 0;
         right: 0;
         cursor: se-resize;
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-nw {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-nw {
         top: 0;
         left: 0;
         cursor: nw-resize;
         transform: rotate(180deg);
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-ne {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-ne {
         top: 0;
         right: 0;
         cursor: ne-resize;
         transform: rotate(270deg);
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-w,
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-e {
+    .${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;
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-w {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w {
         left: 0;
         transform: rotate(135deg);
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-e {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-e {
         right: 0;
         transform: rotate(315deg);
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-n,
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-s {
+    .${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;
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-n {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-n {
         top: 0;
         transform: rotate(225deg);
     }
-    .M4LGridItem > .react-resizable-handle.react-resizable-handle-s {
+    .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-s {
         bottom: 0;
         transform: rotate(45deg);
     }
-    .M4LGridItem.react-maximize-me > .react-resizable-handle,
-    .M4LGridItem.M4LResizeHide > .react-resizable-handle {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.maximizeMe} > .react-resizable-handle,
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.resizeHide} > .react-resizable-handle {
         display: none;
     }
-    .M4LGridItem.M4LInvisible {
+    .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.invisible} {
         display: none;
     }
 
     ${react_resizable_css}
+    ${(props) => props.theme.components?.M4LGridLayout?.styleOverrides}
 `;
-const layoutClassName = "M4LGridLayout";
 function GridLayout(props) {
   const {
+    layoutItemRender,
     innerRef,
     autoSize = true,
-    cols = 12,
+    cols = DEFAULT_COLS,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    margin = DEFAULT_MARGIN,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    containerWidth = DEFAULT_CONTAINER_WIDTH,
+    containerHeight = DEFAULT_CONTAINER_HEIGHT,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
     className = "",
     style = {},
     draggableHandle = "",
     draggableCancel = "",
-    containerPadding = null,
-    rowHeight = 150,
     maxRows = Infinity,
     layout = [],
-    containerMargin = [10, 10],
     isBounded = false,
     isDraggable = true,
     isResizable = true,
     allowOverlap = false,
     useCSSTransforms = true,
-    transformScale = 1,
     compactType = null,
     preventCollision = false,
     resizeHandles = ["se"],
     resizeHandle,
-    layoutItemRender: LayoutItemRender,
-    width = 1280,
-    height = 720,
+    maximizeId,
     onLayoutChange = noop,
     onDragStart = noop,
     onDrag = noop,
     onDragStop = noop,
     onResizeStart = noop,
     onResize = noop,
-    onResizeStop = noop,
-    maximizeId,
-    colapsedHeight = 2
+    onResizeStop = noop
   } = props;
   const [currentState, setCurrentState] = useState({
     mounted: false
   });
+  const [nrOnlayoutChanges, setNrOnlayoutChanges] = useState(0);
   const [finalLayoutRender, setFinalLayoutRender] = useState(layout);
   const [zIndexes, setzIndexes] = useState(() => {
     return layout.filter((li) => li.freeMove).map((lmap) => lmap.i);
   });
-  const refZindexes = useRef(zIndexes);
   const refState = useRef({
     layout,
-    mounted: false,
     oldDragItem: void 0,
     oldLayout: void 0,
-    oldResizeItem: void 0
+    oldResizeItem: void 0,
+    zIndexes
   });
   useEffect(() => {
     setCurrentState({
       mounted: true
     });
   }, []);
+  useEffect(() => {
+    if (nrOnlayoutChanges > 0) {
+      console.log("nrOnlayoutChanges fired", nrOnlayoutChanges, finalLayoutRender, refState.current.layout);
+      onLayoutChange(refState.current.layout);
+    }
+  }, [nrOnlayoutChanges]);
   useEffect(() => {
     if (!isEqualLayout(finalLayoutRender, layout)) {
-      console.debug("****useEffect GridLayout cambio de layout****", layout);
       const newLayout = cloneLayout(layout);
       const newzIndexes = [...zIndexes];
       for (let index = 0; index < newLayout.length; index++) {
@@ -1002,19 +725,18 @@ function GridLayout(props) {
       setFinalLayoutRender(newLayout);
       if (newzIndexes.length !== zIndexes.length) {
         setzIndexes(newzIndexes);
-        refZindexes.current = newzIndexes;
+        refState.current.zIndexes = newzIndexes;
       }
-    } else {
-      console.debug("****useEffect cambio de layout sin cambios****");
     }
   }, [layout]);
-  const containerHeight = () => {
-    if (!autoSize)
-      return;
-    const nbRow = bottom(finalLayoutRender, colapsedHeight);
-    const containerPaddingY = containerPadding ? containerPadding[1] : containerMargin[1];
-    return nbRow * rowHeight + (nbRow - 1) * containerMargin[1] + containerPaddingY * 2 + "px";
-  };
+  const onLayoutMaybeChanged = useCallback((newLayout, oldLayout) => {
+    if (!oldLayout) {
+      oldLayout = refState.current.layout;
+    }
+    if (!isEqualLayout(oldLayout, newLayout)) {
+      setNrOnlayoutChanges((prev) => prev + 1);
+    }
+  }, []);
   const localOnDragStart = useCallback((i, _x, _y, gridDragEvent) => {
     const {
       layout: layout2
@@ -1023,26 +745,22 @@ function GridLayout(props) {
       e,
       node
     } = gridDragEvent;
-    const l = getLayoutItem(layout2, i);
-    if (!l)
+    const li = getLayoutItem(layout2, i);
+    if (!li)
       return;
     refState.current = {
       ...refState.current,
-      oldDragItem: cloneLayoutItem(l),
-      oldLayout: [...layout2]
+      oldDragItem: cloneLayoutItem(li),
+      oldLayout: layout2
     };
-    console.log("localOnDragStart");
-    return onDragStart(layout2, l, l, void 0, e, node);
-  }, []);
-  const onLayoutMaybeChanged = useCallback((newLayout, oldLayout) => {
-    console.log("onLayoutMaybeChanged", deepEqual(oldLayout, newLayout));
-    if (!oldLayout) {
-      oldLayout = refState.current.layout;
+    if (li && li.freeMove) {
+      onClickSetOnTopFreeMove(li.i, "onDragStart");
     }
-    setFinalLayoutRender(newLayout);
-    if (!isEqualLayout(oldLayout, newLayout)) {
-      onLayoutChange(newLayout);
+    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 {
@@ -1053,31 +771,30 @@ function GridLayout(props) {
       e,
       node
     } = gridDragEvent;
-    const l = getLayoutItem(layout2, i);
-    if (!l)
+    const li = getLayoutItem(layout2, i);
+    if (!li)
       return;
     const newPlaceholder = {
-      w: l.w,
-      h: getLayoutItemH(l, colapsedHeight),
-      x: l.x,
-      y: l.y,
+      w: li.w,
+      h: getLayoutItemH(li, colapsedHeight, rowHeight),
+      x: li.x,
+      y: li.y,
       placeholder: true,
       i
     };
     const isUserAction = true;
     try {
       let newLayout;
-      if (!l.freeMove) {
-        newLayout = moveElement(layout2, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap);
+      if (!li.freeMove) {
+        newLayout = moveElement(layout2, li, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, rowHeight, allowOverlap);
       } else {
-        l.x = x;
-        l.y = y;
+        li.x = x;
+        li.y = y;
         newPlaceholder.x = x;
         newPlaceholder.y = y;
         newLayout = cloneLayout(layout2);
       }
-      onDrag(newLayout, oldDragItem, l, newPlaceholder, e, node);
-      const finalLayout = allowOverlap || l.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
+      const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, rowHeight, allowOverlap);
       refState.current = {
         ...refState.current,
         layout: finalLayout,
@@ -1087,11 +804,12 @@ function GridLayout(props) {
         ...prev,
         activeDrag: newPlaceholder
       }));
-      setFinalLayoutRender([...finalLayout]);
+      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");
     }
@@ -1100,37 +818,33 @@ function GridLayout(props) {
     e,
     node
   }) => {
-    if (!refState.current.activeDrag)
+    if (!refState.current.activeDrag) {
+      console.log("GridLayout localOnDragStop sin movimiento");
       return;
+    }
     const {
       oldDragItem,
       layout: layout2,
       oldLayout
     } = refState.current;
-    const l = getLayoutItem(layout2, i);
-    if (!l)
+    const li = getLayoutItem(layout2, i);
+    if (!li)
       return;
     let newLayout;
     const isUserAction = true;
-    if (!l.freeMove) {
-      newLayout = moveElement(layout2, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap);
+    if (!li.freeMove) {
+      newLayout = moveElement(layout2, li, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, rowHeight, allowOverlap);
     } else {
-      l.x = x;
-      l.y = y;
+      li.x = x;
+      li.y = y;
       newLayout = cloneLayout(layout2);
-      const nl = getLayoutItem(newLayout, i);
-      if (nl) {
-        nl.x = x;
-        nl.y = y;
-      }
     }
-    onDragStop(layout2, oldDragItem, l, void 0, e, node);
-    const finalLayout = allowOverlap ? newLayout || l.freeMove : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
+    const finalLayout = allowOverlap ? newLayout || li.freeMove : compact(newLayout, compactType, cols, colapsedHeight, rowHeight, allowOverlap);
     setCurrentState((prev) => ({
       ...prev,
       activeDrag: void 0
     }));
-    onLayoutMaybeChanged(finalLayout, oldLayout);
+    setFinalLayoutRender(finalLayout);
     refState.current = {
       ...refState.current,
       layout: finalLayout,
@@ -1138,9 +852,13 @@ function GridLayout(props) {
       oldLayout: void 0,
       activeDrag: void 0
     };
-    console.log("localOnDragStop");
-    e.preventDefault();
+    console.log("localOnDragStop", finalLayout);
+    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,
@@ -1149,15 +867,18 @@ function GridLayout(props) {
     const {
       layout: layout2
     } = refState.current;
-    const l = getLayoutItem(layout2, i);
-    if (!l)
+    const li = getLayoutItem(layout2, i);
+    if (!li)
       return;
     refState.current = {
       ...refState.current,
-      oldResizeItem: cloneLayoutItem(l),
-      oldLayout: [...refState.current.layout]
+      oldResizeItem: cloneLayoutItem(li),
+      oldLayout: refState.current.layout
     };
-    onResizeStart(layout2, l, l, void 0, e, node);
+    onResizeStart(layout2, li, li, void 0, e, node);
+    if (li && li.freeMove) {
+      onClickSetOnTopFreeMove(li.i, "onResizeStart");
+    }
   }, []);
   const localOnResize = useCallback((i, w, h, {
     e,
@@ -1168,59 +889,60 @@ function GridLayout(props) {
       oldResizeItem
     } = refState.current;
     let newLayout;
-    let l;
+    let li;
     if (!oldResizeItem?.freeMove) {
-      const [tempLayout, templ] = withLayoutItem(cloneLayout(layout2), i, (l2) => {
+      const cb = (cbLi) => {
         let hasCollisions;
         if (preventCollision && !allowOverlap) {
           const collisions = getAllCollisions(layout2, {
-            ...l2,
+            ...cbLi,
             w,
             h
-          }, colapsedHeight).filter((layoutItem) => layoutItem.i !== l2.i);
+          }, colapsedHeight, rowHeight).filter((layoutItem) => layoutItem.i !== cbLi.i);
           hasCollisions = collisions.length > 0;
           if (hasCollisions) {
             let leastX = Infinity, leastY = Infinity;
             collisions.forEach((layoutItem) => {
-              if (layoutItem.x > l2.x)
+              if (layoutItem.x > cbLi.x)
                 leastX = Math.min(leastX, layoutItem.x);
-              if (layoutItem.y > l2.y)
+              if (layoutItem.y > cbLi.y)
                 leastY = Math.min(leastY, layoutItem.y);
             });
             if (Number.isFinite(leastX))
-              l2.w = leastX - l2.x;
+              cbLi.w = leastX - cbLi.x;
             if (Number.isFinite(leastY))
-              l2.h = leastY - l2.y;
+              cbLi.h = leastY - cbLi.y;
           }
         }
         if (!hasCollisions) {
-          l2.w = w;
-          l2.h = h;
+          cbLi.w = w;
+          cbLi.h = h;
         }
-        return l2;
-      });
+        return cbLi;
+      };
+      const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layout2), i, cb);
       newLayout = tempLayout;
-      l = templ;
+      li = tempLi;
     } else {
       newLayout = cloneLayout(layout2);
-      l = getLayoutItem(newLayout, i);
-      if (l) {
-        l.w = w;
-        l.h = h;
+      li = getLayoutItem(newLayout, i);
+      if (li) {
+        li.w = w;
+        li.h = h;
       }
     }
-    if (!l)
+    if (!li)
       return;
     const newPlaceholder = {
-      w: l.w,
-      h: l.h,
-      x: l.x,
-      y: l.y,
+      w: li.w,
+      h: li.h,
+      x: li.x,
+      y: li.y,
       static: true,
       i
     };
     try {
-      const finalLayout = allowOverlap || l.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
+      const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, rowHeight, allowOverlap);
       refState.current = {
         ...refState.current,
         layout: finalLayout,
@@ -1231,7 +953,7 @@ function GridLayout(props) {
         ...prev,
         activeDrag: newPlaceholder
       }));
-      onResize(newLayout, oldResizeItem, l, newPlaceholder, e, node);
+      onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
     } catch (error) {
     }
   }, []);
@@ -1239,26 +961,18 @@ function GridLayout(props) {
     e,
     node
   }) => {
+    if (!refState.current.activeDrag) {
+      console.log("GridLayout localOnResizeStop sin cambio");
+      return;
+    }
     const {
       layout: layout2,
       oldResizeItem,
       oldLayout
     } = refState.current;
     const l = getLayoutItem(layout2, i);
-    if (l) {
-      onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
-    }
-    const finalLayout = allowOverlap || l?.freeMove ? layout2 : compact(layout2, compactType, cols, colapsedHeight, allowOverlap);
-    if (l && l?.freeMove) {
-      const index = finalLayout.indexOf(l);
-      if (index !== -1 && index !== finalLayout.length - 1) {
-        finalLayout.splice(index, 1);
-        finalLayout.push(l);
-      }
-    }
     refState.current = {
       ...refState.current,
-      layout: [...finalLayout],
       oldResizeItem: void 0,
       oldLayout: void 0,
       activeDrag: void 0
@@ -1267,24 +981,26 @@ function GridLayout(props) {
       ...prev,
       activeDrag: void 0
     }));
-    onLayoutMaybeChanged(finalLayout, oldLayout);
+    onLayoutMaybeChanged(layout2, oldLayout);
+    if (l) {
+      onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
+    }
   }, []);
-  const localFreeMoveOnClick = useCallback((i) => {
+  const onClickSetOnTopFreeMove = useCallback((i, source) => {
     const {
       layout: layout2
     } = refState.current;
-    const index = refZindexes.current.indexOf(i);
+    const index = refState.current.zIndexes.indexOf(i);
     const l = getLayoutItem(layout2, i);
-    console.log("localFreeMoveOnClick", index, l?.freeMove);
+    console.log("onClickSetOnTopFreeMove", index, refState.current.zIndexes.length, source);
     if (l && l?.freeMove) {
-      console.log("localFreeMoveOnClick", index, refZindexes.current.length);
-      if (index !== refZindexes.current.length - 1 || index === -1) {
-        const newIndexes = [...refZindexes.current];
+      if (index !== refState.current.zIndexes.length - 1 || index === -1) {
+        const newIndexes = [...refState.current.zIndexes];
         if (index !== -1) {
           newIndexes.splice(index, 1);
         }
         newIndexes.push(i);
-        refZindexes.current = newIndexes;
+        refState.current.zIndexes = newIndexes;
         setzIndexes(newIndexes);
       }
     }
@@ -1297,18 +1013,18 @@ function GridLayout(props) {
       return null;
     return /* @__PURE__ */ jsx(MemonizedGridItem, {
       type: "placeholder",
-      layoutItemRender: LayoutItemRender,
+      layoutItemRender,
       w: activeDrag.w,
       h: activeDrag.h,
       x: activeDrag.x,
       y: activeDrag.y,
       i: activeDrag.i,
-      className: "react-grid-placeholder",
-      containerWidth: width,
-      containerHeight: height,
+      className: gridLayoutClasses.gridItemPlaceholder,
+      containerWidth,
+      containerHeight,
       cols,
-      margin: containerMargin,
-      containerPadding: containerPadding || containerMargin,
+      margin,
+      containerPadding,
       maxRows,
       rowHeight,
       isDraggable: false,
@@ -1316,8 +1032,8 @@ function GridLayout(props) {
       isBounded: false,
       useCSSTransforms,
       transformScale,
-      cancel: "",
-      handle: "",
+      draggableCancel: "",
+      draggableHandle: "",
       minW: 0,
       maxW: 0,
       minH: 0,
@@ -1346,23 +1062,23 @@ function GridLayout(props) {
     }
     return /* @__PURE__ */ jsx(MemonizedGridItem, {
       type: "layoutItem",
-      layoutItemRender: LayoutItemRender,
-      containerWidth: width,
-      containerHeight: height,
+      layoutItemRender,
+      containerWidth,
+      containerHeight,
       cols,
-      margin: containerMargin,
-      containerPadding: containerPadding || containerMargin,
+      margin,
+      containerPadding: containerPadding || margin,
       maxRows,
       rowHeight,
-      cancel: draggableCancel,
-      handle: draggableHandle,
+      draggableCancel,
+      draggableHandle,
       onDragStart: localOnDragStart,
       onDrag: localOnDrag,
       onDragStop: localOnDragStop,
       onResizeStart: localOnResizeStart,
       onResize: localOnResize,
       onResizeStop: localOnResizeStop,
-      onFreeMoveClick: localFreeMoveOnClick,
+      onFreeMoveClick: l.freeMove ? onClickSetOnTopFreeMove : void 0,
       isDraggable: draggable,
       isResizable: resizable,
       isBounded: bounded,
@@ -1388,23 +1104,54 @@ function GridLayout(props) {
       colapsedHeight,
       style: style2
     }, l.i);
-  }, [width, height, cols, containerMargin, containerPadding, maxRows, rowHeight, draggableCancel, draggableHandle, isDraggable, isResizable, isBounded, useCSSTransforms, transformScale, resizeHandles, resizeHandle, maximizeId, zIndexes]);
+  }, [containerWidth, containerHeight, cols, margin, containerPadding, maxRows, rowHeight, draggableCancel, draggableHandle, isDraggable, isResizable, isBounded, useCSSTransforms, transformScale, resizeHandles, resizeHandle, maximizeId, zIndexes]);
+  const containerAutoSizeHeight = useCallback(() => {
+    if (!autoSize)
+      return;
+    const nbRow = bottom(finalLayoutRender, colapsedHeight, rowHeight);
+    const containerPaddingY = containerPadding ? containerPadding[1] : margin[1];
+    return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
+  }, [autoSize, containerPadding, margin, finalLayoutRender, colapsedHeight]);
   const mergedStyle = {
-    height: containerHeight(),
+    height: containerAutoSizeHeight(),
     ...style
   };
   return /* @__PURE__ */ jsxs(GridLayoutRoot, {
-    className: clsx(layoutClassName, className),
+    className: clsx(gridLayoutClasses.root, className),
     style: mergedStyle,
     ref: innerRef,
     children: [finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)), placeholder()]
   });
 }
 export {
+  noop as A,
+  DEFAULT_COLS as D,
   GridLayout as G,
-  cloneLayout as a,
-  compact as b,
-  cloneLayoutItem as c,
-  correctBounds as d,
-  noop as n
+  THROTTLE_RESIZE_TIME as T,
+  calcGridItemWHPx as a,
+  calcGridColWidth as b,
+  calcXY as c,
+  calcWH as d,
+  clamp as e,
+  calcGridItemPosition as f,
+  getH as g,
+  gridLayoutClasses as h,
+  DEFAULT_ROW_HEIGHT as i,
+  DEFAULT_CONTAINER_WIDTH as j,
+  DEFAULT_CONTAINER_HEIGHT as k,
+  DEFAULT_MARGIN as l,
+  DEFAULT_CONTAINER_PADDING as m,
+  DEFAULT_TRANSFORM_SCALE as n,
+  DEFAULT_COLAPSED_HEIGHT as o,
+  perc as p,
+  setTopLeft as q,
+  cloneLayoutItem as r,
+  setTransform as s,
+  cloneLayout as t,
+  compact as u,
+  correctBounds as v,
+  isEqualLayout as w,
+  DEFAULT_RESPONSIVE_BREAKPOINTS as x,
+  DEFAULT_RESPONSIVE_COLS as y,
+  isEqualLayouts as z
 };