react-grid-layout 2.0.0 → 2.1.1

package/dist/{chunk-BFTKGAP3.js → chunk-RB2IKK5B.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
-var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
+var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
+var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
 var reactResizable = require('react-resizable');
@@ -46,6 +46,9 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
+    constraints = chunkWWS3M5Y3_js.defaultConstraints,
+    layoutItem,
+    layout = [],
     onDragStart: onDragStartProp,
     onDrag: onDragProp,
     onDragStop: onDragStopProp,
@@ -77,17 +80,44 @@ function GridItem(props) {
     }),
     [cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
   );
+  const constraintContext = React2.useMemo(
+    () => ({
+      cols,
+      maxRows,
+      containerWidth,
+      containerHeight: 0,
+      // Auto-height grids don't have a fixed container height
+      rowHeight,
+      margin,
+      layout
+    }),
+    [cols, maxRows, containerWidth, rowHeight, margin, layout]
+  );
+  const effectiveLayoutItem = React2.useMemo(
+    () => layoutItem ?? {
+      i,
+      x,
+      y,
+      w,
+      h,
+      minW,
+      maxW,
+      minH,
+      maxH
+    },
+    [layoutItem, i, x, y, w, h, minW, maxW, minH, maxH]
+  );
   const createStyle = React2.useCallback(
     (pos2) => {
       if (useCSSTransforms) {
-        return chunk3WO4SAYB_js.setTransform(pos2);
+        return chunkWWS3M5Y3_js.setTransform(pos2);
       }
-      const styleObj = chunk3WO4SAYB_js.setTopLeft(pos2);
+      const styleObj = chunkWWS3M5Y3_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunk3WO4SAYB_js.perc(pos2.left / containerWidth),
-          width: chunk3WO4SAYB_js.perc(pos2.width / containerWidth)
+          left: chunkWWS3M5Y3_js.perc(pos2.left / containerWidth),
+          width: chunkWWS3M5Y3_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
@@ -111,12 +141,17 @@ function GridItem(props) {
       };
       dragPositionRef.current = newPosition;
       setDragging(true);
-      const { x: newX, y: newY } = chunkF6NQPYKT_js.calcXY(
+      const rawPos = chunkBJFPTW5Q_js.calcXYRaw(
         positionParams,
         newPosition.top,
-        newPosition.left,
-        w,
-        h
+        newPosition.left
+      );
+      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        constraintContext
       );
       onDragStartProp(i, newX, newY, {
         e,
@@ -124,7 +159,15 @@ function GridItem(props) {
         newPosition
       });
     },
-    [onDragStartProp, transformScale, positionParams, w, h, i]
+    [
+      onDragStartProp,
+      transformScale,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext,
+      i
+    ]
   );
   const onDrag = React2.useCallback(
     (e, { node, deltaX, deltaY }) => {
@@ -134,16 +177,23 @@ function GridItem(props) {
       if (isBounded) {
         const { offsetParent } = node;
         if (offsetParent) {
-          const bottomBoundary = offsetParent.clientHeight - chunkF6NQPYKT_js.calcGridItemWHPx(h, rowHeight, margin[1]);
-          top = chunkF6NQPYKT_js.clamp(top, 0, bottomBoundary);
-          const colWidth = chunkF6NQPYKT_js.calcGridColWidth(positionParams);
-          const rightBoundary = containerWidth - chunkF6NQPYKT_js.calcGridItemWHPx(w, colWidth, margin[0]);
-          left = chunkF6NQPYKT_js.clamp(left, 0, rightBoundary);
+          const bottomBoundary = offsetParent.clientHeight - chunkBJFPTW5Q_js.calcGridItemWHPx(h, rowHeight, margin[1]);
+          top = chunkBJFPTW5Q_js.clamp(top, 0, bottomBoundary);
+          const colWidth = chunkBJFPTW5Q_js.calcGridColWidth(positionParams);
+          const rightBoundary = containerWidth - chunkBJFPTW5Q_js.calcGridItemWHPx(w, colWidth, margin[0]);
+          left = chunkBJFPTW5Q_js.clamp(left, 0, rightBoundary);
         }
       }
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
-      const { x: newX, y: newY } = chunkF6NQPYKT_js.calcXY(positionParams, top, left, w, h);
+      const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        constraintContext
+      );
       onDragProp(i, newX, newY, {
         e,
         node,
@@ -160,7 +210,10 @@ function GridItem(props) {
       positionParams,
       containerWidth,
       w,
-      i
+      i,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext
     ]
   );
   const onDragStop = React2.useCallback(
@@ -170,14 +223,29 @@ function GridItem(props) {
       const newPosition = { top, left };
       setDragging(false);
       dragPositionRef.current = { left: 0, top: 0 };
-      const { x: newX, y: newY } = chunkF6NQPYKT_js.calcXY(positionParams, top, left, w, h);
+      const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        constraintContext
+      );
       onDragStopProp(i, newX, newY, {
         e,
         node,
         newPosition
       });
     },
-    [onDragStopProp, dragging, positionParams, w, h, i]
+    [
+      onDragStopProp,
+      dragging,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext,
+      i
+    ]
   );
   const onResizeHandler = React2.useCallback(
     (e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
@@ -185,7 +253,7 @@ function GridItem(props) {
       if (!handler) return;
       let updatedSize;
       if (node) {
-        updatedSize = chunk3WO4SAYB_js.resizeItemInDirection(
+        updatedSize = chunkWWS3M5Y3_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -199,16 +267,19 @@ function GridItem(props) {
         };
       }
       resizePositionRef.current = updatedSize;
-      let { w: newW, h: newH } = chunkF6NQPYKT_js.calcWH(
+      const rawSize = chunkBJFPTW5Q_js.calcWHRaw(
         positionParams,
         updatedSize.width,
-        updatedSize.height,
-        x,
-        y,
-        resizeHandle2
+        updatedSize.height
+      );
+      const { w: newW, h: newH } = chunkWWS3M5Y3_js.applySizeConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawSize.w,
+        rawSize.h,
+        resizeHandle2,
+        constraintContext
       );
-      newW = chunkF6NQPYKT_js.clamp(newW, Math.max(minW, 1), maxW);
-      newH = chunkF6NQPYKT_js.clamp(newH, minH, maxH);
       handler(i, newW, newH, {
         e: e.nativeEvent,
         node,
@@ -224,17 +295,16 @@ function GridItem(props) {
       positionParams,
       x,
       y,
-      minW,
-      maxW,
-      minH,
-      maxH,
-      i
+      i,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext
     ]
   );
   const handleResizeStart = React2.useCallback(
     (e, data) => {
       setResizing(true);
-      const pos2 = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -245,7 +315,7 @@ function GridItem(props) {
   );
   const handleResize = React2.useCallback(
     (e, data) => {
-      const pos2 = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -258,7 +328,7 @@ function GridItem(props) {
     (e, data) => {
       setResizing(false);
       resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
-      const pos2 = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -303,7 +373,7 @@ function GridItem(props) {
     }
     prevDroppingPositionRef.current = droppingPosition;
   }, [droppingPosition, dragging, onDragStart, onDrag]);
-  const pos = chunkF6NQPYKT_js.calcGridItemPosition(
+  const pos = chunkBJFPTW5Q_js.calcGridItemPosition(
     positionParams,
     x,
     y,
@@ -313,14 +383,12 @@ function GridItem(props) {
     resizing ? resizePositionRef.current : null
   );
   const child = React2__default.default.Children.only(children);
-  const maxWidth = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, 0, 0, cols, 0).width;
-  const mins = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, 0, 0, minW, minH);
-  const maxes = chunkF6NQPYKT_js.calcGridItemPosition(positionParams, 0, 0, maxW, maxH);
-  const minConstraints = [mins.width, mins.height];
-  const maxConstraints = [
-    Math.min(maxes.width, maxWidth),
-    Math.min(maxes.height, Infinity)
+  const minGridUnit = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, 0, 0, 1, 1);
+  const minConstraints = [
+    minGridUnit.width,
+    minGridUnit.height
   ];
+  const maxConstraints = [Infinity, Infinity];
   const childProps = child.props;
   const childClassName = childProps["className"];
   const childStyle = childProps["style"];
@@ -403,7 +471,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
     childKeys.add(key);
     const existingItem = initialLayout.find((l) => l.i === key);
     if (existingItem) {
-      layout.push(chunk3WO4SAYB_js.cloneLayoutItem(existingItem));
+      layout.push(chunkBJFPTW5Q_js.cloneLayoutItem(existingItem));
     } else {
       const childProps = child.props;
       const dataGrid = childProps["data-grid"];
@@ -428,15 +496,15 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
         layout.push({
           i: key,
           x: 0,
-          y: chunk3WO4SAYB_js.bottom(layout),
+          y: chunkBJFPTW5Q_js.bottom(layout),
           w: 1,
           h: 1
         });
       }
     }
   });
-  const corrected = chunk3WO4SAYB_js.correctBounds(layout, { cols });
-  return chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
+  const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
+  return chunkWWS3M5Y3_js.compact(corrected, compactType, cols, allowOverlap);
 }
 function GridLayout(props) {
   const {
@@ -448,8 +516,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunk3WO4SAYB_js.defaultPositionStrategy,
+    positionStrategy = chunkWWS3M5Y3_js.defaultPositionStrategy,
     compactor: compactorProp,
+    constraints = chunkWWS3M5Y3_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -470,19 +539,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunk3WO4SAYB_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunk3WO4SAYB_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunk3WO4SAYB_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunk3WO4SAYB_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -498,7 +567,7 @@ function GridLayout(props) {
     handleComponent: resizeHandle
   } = resizeConfig;
   const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
-  const compactor = compactorProp ?? chunk3WO4SAYB_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunkWWS3M5Y3_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -536,6 +605,8 @@ function GridLayout(props) {
   const prevPropsLayoutRef = React2.useRef(propsLayout);
   const prevChildrenRef = React2.useRef(children);
   const prevCompactTypeRef = React2.useRef(compactType);
+  const layoutRef = React2.useRef(layout);
+  layoutRef.current = layout;
   React2.useEffect(() => {
     setMounted(true);
     if (!fastEquals.deepEqual(layout, propsLayout)) {
@@ -544,6 +615,7 @@ function GridLayout(props) {
   }, []);
   React2.useEffect(() => {
     if (activeDrag) return;
+    if (droppingDOMNode) return;
     const layoutChanged = !fastEquals.deepEqual(propsLayout, prevPropsLayoutRef.current);
     const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
     const compactTypeChanged = compactType !== prevCompactTypeRef.current;
@@ -568,6 +640,7 @@ function GridLayout(props) {
     compactType,
     allowOverlap,
     activeDrag,
+    droppingDOMNode,
     layout
   ]);
   React2.useEffect(() => {
@@ -578,13 +651,14 @@ function GridLayout(props) {
   }, [layout, activeDrag, onLayoutChange]);
   const containerHeight = React2.useMemo(() => {
     if (!autoSize) return void 0;
-    const nbRow = chunk3WO4SAYB_js.bottom(layout);
+    const nbRow = chunkBJFPTW5Q_js.bottom(layout);
     const containerPaddingY = effectiveContainerPadding[1];
     return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
   }, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
   const onDragStart = React2.useCallback(
     (i, _x, _y, data) => {
-      const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -593,17 +667,18 @@ function GridLayout(props) {
         y: l.y,
         i
       };
-      oldDragItemRef.current = chunk3WO4SAYB_js.cloneLayoutItem(l);
-      oldLayoutRef.current = layout;
+      oldDragItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
+      oldLayoutRef.current = currentLayout;
       setActiveDrag(placeholder);
-      onDragStartProp(layout, l, l, null, data.e, data.node);
+      onDragStartProp(currentLayout, l, l, null, data.e, data.node);
     },
-    [layout, onDragStartProp]
+    [onDragStartProp]
   );
   const onDrag = React2.useCallback(
     (i, x, y, data) => {
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -612,8 +687,8 @@ function GridLayout(props) {
         y: l.y,
         i
       };
-      const newLayout = chunk3WO4SAYB_js.moveElement(
-        layout,
+      const newLayout = chunkBJFPTW5Q_js.moveElement(
+        currentLayout,
         l,
         x,
         y,
@@ -625,20 +700,21 @@ function GridLayout(props) {
       );
       onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
       setLayout(
-        allowOverlap ? newLayout : chunk3WO4SAYB_js.compact(newLayout, compactType, cols)
+        allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols)
       );
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, onDragProp]
   );
   const onDragStop = React2.useCallback(
     (i, x, y, data) => {
       if (!activeDrag) return;
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
-      const newLayout = chunk3WO4SAYB_js.moveElement(
-        layout,
+      const newLayout = chunkBJFPTW5Q_js.moveElement(
+        currentLayout,
         l,
         x,
         y,
@@ -648,7 +724,7 @@ function GridLayout(props) {
         cols,
         allowOverlap
       );
-      const finalLayout = allowOverlap ? newLayout : chunk3WO4SAYB_js.compact(newLayout, compactType, cols);
+      const finalLayout = allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols);
       onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
       const oldLayout = oldLayoutRef.current;
       oldDragItemRef.current = null;
@@ -661,7 +737,6 @@ function GridLayout(props) {
     },
     [
       activeDrag,
-      layout,
       preventCollision,
       compactType,
       cols,
@@ -672,23 +747,25 @@ function GridLayout(props) {
   );
   const onResizeStart = React2.useCallback(
     (i, _w, _h, data) => {
-      const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
-      oldResizeItemRef.current = chunk3WO4SAYB_js.cloneLayoutItem(l);
-      oldLayoutRef.current = layout;
+      oldResizeItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
+      oldLayoutRef.current = currentLayout;
       setResizing(true);
-      onResizeStartProp(layout, l, l, null, data.e, data.node);
+      onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
     },
-    [layout, onResizeStartProp]
+    [onResizeStartProp]
   );
   const onResize = React2.useCallback(
     (i, w, h, data) => {
+      const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
       const { handle } = data;
       let shouldMoveItem = false;
       let newX;
       let newY;
-      const [newLayout, l] = chunk3WO4SAYB_js.withLayoutItem(layout, i, (item) => {
+      const [newLayout, l] = chunkBJFPTW5Q_js.withLayoutItem(currentLayout, i, (item) => {
         newX = item.x;
         newY = item.y;
         if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
@@ -705,7 +782,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = chunk3WO4SAYB_js.getAllCollisions(layout, {
+          const collisions = chunkBJFPTW5Q_js.getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -727,7 +804,7 @@ function GridLayout(props) {
       if (!l) return;
       let finalLayout = newLayout;
       if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
-        finalLayout = chunk3WO4SAYB_js.moveElement(
+        finalLayout = chunkBJFPTW5Q_js.moveElement(
           newLayout,
           l,
           newX,
@@ -756,17 +833,18 @@ function GridLayout(props) {
         data.node
       );
       setLayout(
-        allowOverlap ? finalLayout : chunk3WO4SAYB_js.compact(finalLayout, compactType, cols)
+        allowOverlap ? finalLayout : chunkWWS3M5Y3_js.compact(finalLayout, compactType, cols)
       );
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
+    [preventCollision, allowOverlap, compactType, cols, onResizeProp]
   );
   const onResizeStop = React2.useCallback(
     (i, _w, _h, data) => {
+      const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
-      const l = chunk3WO4SAYB_js.getLayoutItem(layout, i);
-      const finalLayout = allowOverlap ? layout : chunk3WO4SAYB_js.compact(layout, compactType, cols);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const finalLayout = allowOverlap ? currentLayout : chunkWWS3M5Y3_js.compact(currentLayout, compactType, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -785,11 +863,12 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = React2.useCallback(() => {
-    const newLayout = chunk3WO4SAYB_js.compact(
-      layout.filter((l) => l.i !== droppingItem.i),
+    const currentLayout = layoutRef.current;
+    const newLayout = chunkWWS3M5Y3_js.compact(
+      currentLayout.filter((l) => l.i !== droppingItem.i),
       compactType,
       cols,
       allowOverlap
@@ -798,7 +877,7 @@ function GridLayout(props) {
     setDroppingDOMNode(null);
     setActiveDrag(null);
     setDroppingPosition(void 0);
-  }, [layout, droppingItem.i, compactType, cols, allowOverlap]);
+  }, [droppingItem.i, compactType, cols, allowOverlap]);
   const handleDragOver = React2.useCallback(
     (e) => {
       e.preventDefault();
@@ -808,42 +887,62 @@ function GridLayout(props) {
       )) {
         return false;
       }
-      const onDragOverResult = onDropDragOverProp(e);
-      if (onDragOverResult === false) {
+      const rawResult = onDropDragOverProp(e);
+      if (rawResult === false) {
         if (droppingDOMNode) {
           removeDroppingPlaceholder();
         }
         return false;
       }
+      const {
+        dragOffsetX = 0,
+        dragOffsetY = 0,
+        ...onDragOverResult
+      } = rawResult ?? {};
       const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
       const gridRect = e.currentTarget.getBoundingClientRect();
-      const layerX = e.clientX - gridRect.left;
-      const layerY = e.clientY - gridRect.top;
+      const positionParams = {
+        cols,
+        margin,
+        maxRows,
+        rowHeight,
+        containerWidth: width,
+        containerPadding: effectiveContainerPadding
+      };
+      const actualColWidth = chunkBJFPTW5Q_js.calcGridColWidth(positionParams);
+      const itemPixelWidth = chunkBJFPTW5Q_js.calcGridItemWHPx(
+        finalDroppingItem.w,
+        actualColWidth,
+        margin[0]
+      );
+      const itemPixelHeight = chunkBJFPTW5Q_js.calcGridItemWHPx(
+        finalDroppingItem.h,
+        rowHeight,
+        margin[1]
+      );
+      const itemCenterOffsetX = itemPixelWidth / 2;
+      const itemCenterOffsetY = itemPixelHeight / 2;
+      const rawGridX = e.clientX - gridRect.left + dragOffsetX - itemCenterOffsetX;
+      const rawGridY = e.clientY - gridRect.top + dragOffsetY - itemCenterOffsetY;
+      const clampedGridX = Math.max(0, rawGridX);
+      const clampedGridY = Math.max(0, rawGridY);
       const newDroppingPosition = {
-        left: layerX / transformScale,
-        top: layerY / transformScale,
+        left: clampedGridX / transformScale,
+        top: clampedGridY / transformScale,
         e: e.nativeEvent
       };
       if (!droppingDOMNode) {
-        const positionParams = {
-          cols,
-          margin,
-          maxRows,
-          rowHeight,
-          containerWidth: width,
-          containerPadding: effectiveContainerPadding
-        };
-        const calculatedPosition = chunkF6NQPYKT_js.calcXY(
+        const calculatedPosition = chunkBJFPTW5Q_js.calcXY(
           positionParams,
-          layerY,
-          layerX,
+          clampedGridY,
+          clampedGridX,
           finalDroppingItem.w,
           finalDroppingItem.h
         );
         setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
         setDroppingPosition(newDroppingPosition);
         setLayout([
-          ...layout,
+          ...layoutRef.current,
           {
             ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -853,7 +952,7 @@ function GridLayout(props) {
           }
         ]);
       } else if (droppingPosition) {
-        const shouldUpdate = droppingPosition.left !== layerX || droppingPosition.top !== layerY;
+        const shouldUpdate = droppingPosition.left !== newDroppingPosition.left || droppingPosition.top !== newDroppingPosition.top;
         if (shouldUpdate) {
           setDroppingPosition(newDroppingPosition);
         }
@@ -871,8 +970,7 @@ function GridLayout(props) {
       maxRows,
       rowHeight,
       width,
-      effectiveContainerPadding,
-      layout
+      effectiveContainerPadding
     ]
   );
   const handleDragLeave = React2.useCallback(
@@ -895,17 +993,18 @@ function GridLayout(props) {
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      const item = layout.find((l) => l.i === droppingItem.i);
+      const currentLayout = layoutRef.current;
+      const item = currentLayout.find((l) => l.i === droppingItem.i);
       dragEnterCounterRef.current = 0;
       removeDroppingPlaceholder();
-      onDropProp(layout, item, e.nativeEvent);
+      onDropProp(currentLayout, item, e.nativeEvent);
     },
-    [layout, droppingItem.i, removeDroppingPlaceholder, onDropProp]
+    [droppingItem.i, removeDroppingPlaceholder, onDropProp]
   );
   const processGridItem = React2.useCallback(
     (child, isDroppingItem) => {
       if (!child || !child.key) return null;
-      const l = chunk3WO4SAYB_js.getLayoutItem(layout, String(child.key));
+      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, String(child.key));
       if (!l) return null;
       const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
       const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
@@ -948,6 +1047,9 @@ function GridLayout(props) {
           droppingPosition: isDroppingItem ? droppingPosition : void 0,
           resizeHandles: resizeHandlesOptions,
           resizeHandle: resizeHandleElement,
+          constraints,
+          layoutItem: l,
+          layout,
           children: child
         },
         l.i
@@ -977,7 +1079,8 @@ function GridLayout(props) {
       transformScale,
       droppingPosition,
       resizeHandles,
-      resizeHandle
+      resizeHandle,
+      constraints
     ]
   );
   const renderPlaceholder = () => {
@@ -1002,6 +1105,8 @@ function GridLayout(props) {
         isBounded: false,
         useCSSTransforms,
         transformScale,
+        constraints,
+        layout,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
       }
     );
@@ -1083,15 +1188,15 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
         layout.push({
           i: key,
           x: 0,
-          y: chunk3WO4SAYB_js.bottom(layout),
+          y: chunkBJFPTW5Q_js.bottom(layout),
           w: 1,
           h: 1
         });
       }
     }
   });
-  const corrected = chunk3WO4SAYB_js.correctBounds(layout, { cols });
-  return chunk3WO4SAYB_js.compact(corrected, compactType, cols, allowOverlap);
+  const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
+  return chunkWWS3M5Y3_js.compact(corrected, compactType, cols, allowOverlap);
 }
 function ResponsiveGridLayout(props) {
   const {
@@ -1111,17 +1216,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunk3WO4SAYB_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunkWWS3M5Y3_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunk3WO4SAYB_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunk3WO4SAYB_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunkWWS3M5Y3_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
+    return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1140,9 +1245,13 @@ function ResponsiveGridLayout(props) {
   const prevColsRef = React2.useRef(colsConfig);
   const prevLayoutsRef = React2.useRef(propsLayouts);
   const prevCompactTypeRef = React2.useRef(compactType);
+  const layoutsRef = React2.useRef(layouts);
   React2.useEffect(() => {
+    layoutsRef.current = layouts;
+  }, [layouts]);
+  const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      const newLayout = chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
+      return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
@@ -1150,34 +1259,41 @@ function ResponsiveGridLayout(props) {
         cols,
         compactType
       );
-      setLayout(newLayout);
+    }
+    return null;
+  }, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
+  const effectiveLayout = derivedLayout ?? layout;
+  React2.useEffect(() => {
+    if (derivedLayout !== null) {
+      setLayout(derivedLayout);
       setLayouts(propsLayouts);
+      layoutsRef.current = propsLayouts;
       prevLayoutsRef.current = propsLayouts;
     }
-  }, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
+  }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = chunk3WO4SAYB_js.compact(
-        chunk3WO4SAYB_js.cloneLayout(layout),
+      const newLayout = chunkWWS3M5Y3_js.compact(
+        chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
         compactType,
         cols,
         allowOverlap
       );
       const newLayouts = {
-        ...layouts,
+        ...layoutsRef.current,
         [breakpoint]: newLayout
       };
       setLayout(newLayout);
       setLayouts(newLayouts);
+      layoutsRef.current = newLayouts;
       onLayoutChange(newLayout, newLayouts);
       prevCompactTypeRef.current = compactType;
     }
   }, [
     compactType,
-    layout,
+    effectiveLayout,
     cols,
     allowOverlap,
-    layouts,
     breakpoint,
     onLayoutChange
   ]);
@@ -1190,15 +1306,15 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunk3WO4SAYB_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunk3WO4SAYB_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+      const newBreakpoint = propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
+      const newCols = chunkWWS3M5Y3_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
       const lastBreakpoint = breakpoint;
       if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
-        const newLayouts = { ...layouts };
+        const newLayouts = { ...layoutsRef.current };
         if (!newLayouts[lastBreakpoint]) {
-          newLayouts[lastBreakpoint] = chunk3WO4SAYB_js.cloneLayout(layout);
+          newLayouts[lastBreakpoint] = chunkBJFPTW5Q_js.cloneLayout(layout);
         }
-        let newLayout = chunk3WO4SAYB_js.findOrGenerateResponsiveLayout(
+        let newLayout = chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
           newLayouts,
           breakpoints,
           newBreakpoint,
@@ -1218,14 +1334,15 @@ function ResponsiveGridLayout(props) {
         setCols(newCols);
         setLayout(newLayout);
         setLayouts(newLayouts);
+        layoutsRef.current = newLayouts;
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunk3WO4SAYB_js.getIndentationValue(
+      const currentMargin2 = chunkWWS3M5Y3_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunk3WO4SAYB_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunkWWS3M5Y3_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1243,7 +1360,6 @@ function ResponsiveGridLayout(props) {
     breakpoint,
     cols,
     layout,
-    layouts,
     children,
     compactType,
     allowOverlap,
@@ -1255,25 +1371,27 @@ function ResponsiveGridLayout(props) {
   ]);
   const handleLayoutChange = React2.useCallback(
     (newLayout) => {
+      const currentLayouts = layoutsRef.current;
       const newLayouts = {
-        ...layouts,
+        ...currentLayouts,
         [breakpoint]: newLayout
       };
       setLayout(newLayout);
       setLayouts(newLayouts);
+      layoutsRef.current = newLayouts;
       onLayoutChange(newLayout, newLayouts);
     },
-    [layouts, breakpoint, onLayoutChange]
+    [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunk3WO4SAYB_js.getIndentationValue(
+    return chunkWWS3M5Y3_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunk3WO4SAYB_js.getIndentationValue(
+    return chunkWWS3M5Y3_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1296,7 +1414,7 @@ function ResponsiveGridLayout(props) {
       gridConfig,
       compactor,
       onLayoutChange: handleLayoutChange,
-      layout,
+      layout: effectiveLayout,
       children
     }
   );
@@ -1305,5 +1423,5 @@ function ResponsiveGridLayout(props) {
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
-//# sourceMappingURL=chunk-BFTKGAP3.js.map
-//# sourceMappingURL=chunk-BFTKGAP3.js.map
+//# sourceMappingURL=chunk-RB2IKK5B.js.map
+//# sourceMappingURL=chunk-RB2IKK5B.js.map