react-grid-layout 2.1.0 → 2.2.0

package/dist/{chunk-QRW3ND4U.js → chunk-NQUM7RXX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
+var chunk2TEFHZC4_js = require('./chunk-2TEFHZC4.js');
 var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
@@ -30,6 +30,8 @@ function GridItem(props) {
     useCSSTransforms = true,
     usePercentages = false,
     transformScale = 1,
+    positionStrategy,
+    dragThreshold = 0,
     droppingPosition,
     className = "",
     style,
@@ -46,7 +48,7 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
-    constraints = chunkFN6MIZ24_js.defaultConstraints,
+    constraints = chunk2TEFHZC4_js.defaultConstraints,
     layoutItem,
     layout = [],
     onDragStart: onDragStartProp,
@@ -69,6 +71,11 @@ function GridItem(props) {
   const prevDroppingPositionRef = React2.useRef(
     void 0
   );
+  const layoutRef = React2.useRef(layout);
+  layoutRef.current = layout;
+  const dragPendingRef = React2.useRef(false);
+  const initialDragClientRef = React2.useRef({ x: 0, y: 0 });
+  const thresholdExceededRef = React2.useRef(false);
   const positionParams = React2.useMemo(
     () => ({
       cols,
@@ -89,9 +96,18 @@ function GridItem(props) {
       // Auto-height grids don't have a fixed container height
       rowHeight,
       margin,
-      layout
+      // Use empty layout here - the actual layout will be accessed via layoutRef when needed
+      // This prevents the context from changing when layout changes, avoiding callback recreation
+      layout: []
     }),
-    [cols, maxRows, containerWidth, rowHeight, margin, layout]
+    [cols, maxRows, containerWidth, rowHeight, margin]
+  );
+  const getConstraintContext = React2.useCallback(
+    () => ({
+      ...constraintContext,
+      layout: layoutRef.current
+    }),
+    [constraintContext]
   );
   const effectiveLayoutItem = React2.useMemo(
     () => layoutItem ?? {
@@ -109,20 +125,23 @@ function GridItem(props) {
   );
   const createStyle = React2.useCallback(
     (pos2) => {
+      if (positionStrategy?.calcStyle) {
+        return positionStrategy.calcStyle(pos2);
+      }
       if (useCSSTransforms) {
-        return chunkFN6MIZ24_js.setTransform(pos2);
+        return chunk2TEFHZC4_js.setTransform(pos2);
       }
-      const styleObj = chunkFN6MIZ24_js.setTopLeft(pos2);
+      const styleObj = chunk2TEFHZC4_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunkFN6MIZ24_js.perc(pos2.left / containerWidth),
-          width: chunkFN6MIZ24_js.perc(pos2.width / containerWidth)
+          left: chunk2TEFHZC4_js.perc(pos2.left / containerWidth),
+          width: chunk2TEFHZC4_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
     },
-    [useCSSTransforms, usePercentages, containerWidth]
+    [positionStrategy, useCSSTransforms, usePercentages, containerWidth]
   );
   const onDragStart = React2.useCallback(
     (e, { node }) => {
@@ -135,23 +154,45 @@ function GridItem(props) {
       const pLeft = parentRect.left / transformScale;
       const cTop = clientRect.top / transformScale;
       const pTop = parentRect.top / transformScale;
-      const newPosition = {
-        left: cLeft - pLeft + offsetParent.scrollLeft,
-        top: cTop - pTop + offsetParent.scrollTop
-      };
+      let newPosition;
+      if (positionStrategy?.calcDragPosition) {
+        const mouseEvent = e;
+        newPosition = positionStrategy.calcDragPosition(
+          mouseEvent.clientX,
+          mouseEvent.clientY,
+          mouseEvent.clientX - clientRect.left,
+          mouseEvent.clientY - clientRect.top
+        );
+      } else {
+        newPosition = {
+          left: cLeft - pLeft + offsetParent.scrollLeft,
+          top: cTop - pTop + offsetParent.scrollTop
+        };
+      }
       dragPositionRef.current = newPosition;
+      if (dragThreshold > 0) {
+        const mouseEvent = e;
+        initialDragClientRef.current = {
+          x: mouseEvent.clientX,
+          y: mouseEvent.clientY
+        };
+        dragPendingRef.current = true;
+        thresholdExceededRef.current = false;
+        setDragging(true);
+        return;
+      }
       setDragging(true);
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(
         positionParams,
         newPosition.top,
         newPosition.left
       );
-      const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragStartProp(i, newX, newY, {
         e,
@@ -163,15 +204,47 @@ function GridItem(props) {
       onDragStartProp,
       transformScale,
       positionParams,
+      positionStrategy,
+      dragThreshold,
       constraints,
       effectiveLayoutItem,
-      constraintContext,
+      getConstraintContext,
       i
     ]
   );
   const onDrag = React2.useCallback(
     (e, { node, deltaX, deltaY }) => {
       if (!onDragProp || !dragging) return;
+      const mouseEvent = e;
+      if (dragPendingRef.current && !thresholdExceededRef.current) {
+        const dx = mouseEvent.clientX - initialDragClientRef.current.x;
+        const dy = mouseEvent.clientY - initialDragClientRef.current.y;
+        const distance = Math.hypot(dx, dy);
+        if (distance < dragThreshold) {
+          return;
+        }
+        thresholdExceededRef.current = true;
+        dragPendingRef.current = false;
+        if (onDragStartProp) {
+          const rawPos2 = chunkBJFPTW5Q_js.calcXYRaw(
+            positionParams,
+            dragPositionRef.current.top,
+            dragPositionRef.current.left
+          );
+          const { x: startX, y: startY } = chunk2TEFHZC4_js.applyPositionConstraints(
+            constraints,
+            effectiveLayoutItem,
+            rawPos2.x,
+            rawPos2.y,
+            getConstraintContext()
+          );
+          onDragStartProp(i, startX, startY, {
+            e,
+            node,
+            newPosition: dragPositionRef.current
+          });
+        }
+      }
       let top = dragPositionRef.current.top + deltaY;
       let left = dragPositionRef.current.left + deltaX;
       if (isBounded) {
@@ -187,12 +260,12 @@ function GridItem(props) {
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragProp(i, newX, newY, {
         e,
@@ -202,7 +275,9 @@ function GridItem(props) {
     },
     [
       onDragProp,
+      onDragStartProp,
       dragging,
+      dragThreshold,
       isBounded,
       h,
       rowHeight,
@@ -213,23 +288,32 @@ function GridItem(props) {
       i,
       constraints,
       effectiveLayoutItem,
-      constraintContext
+      getConstraintContext
     ]
   );
   const onDragStop = React2.useCallback(
     (e, { node }) => {
       if (!onDragStopProp || !dragging) return;
+      const wasPending = dragPendingRef.current;
+      dragPendingRef.current = false;
+      thresholdExceededRef.current = false;
+      initialDragClientRef.current = { x: 0, y: 0 };
+      if (wasPending) {
+        setDragging(false);
+        dragPositionRef.current = { left: 0, top: 0 };
+        return;
+      }
       const { left, top } = dragPositionRef.current;
       const newPosition = { top, left };
       setDragging(false);
       dragPositionRef.current = { left: 0, top: 0 };
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragStopProp(i, newX, newY, {
         e,
@@ -243,7 +327,7 @@ function GridItem(props) {
       positionParams,
       constraints,
       effectiveLayoutItem,
-      constraintContext,
+      getConstraintContext,
       i
     ]
   );
@@ -253,7 +337,7 @@ function GridItem(props) {
       if (!handler) return;
       let updatedSize;
       if (node) {
-        updatedSize = chunkFN6MIZ24_js.resizeItemInDirection(
+        updatedSize = chunk2TEFHZC4_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -272,13 +356,13 @@ function GridItem(props) {
         updatedSize.width,
         updatedSize.height
       );
-      const { w: newW, h: newH } = chunkFN6MIZ24_js.applySizeConstraints(
+      const { w: newW, h: newH } = chunk2TEFHZC4_js.applySizeConstraints(
         constraints,
         effectiveLayoutItem,
         rawSize.w,
         rawSize.h,
         resizeHandle2,
-        constraintContext
+        getConstraintContext()
       );
       handler(i, newW, newH, {
         e: e.nativeEvent,
@@ -293,12 +377,10 @@ function GridItem(props) {
       onResizeStopProp,
       containerWidth,
       positionParams,
-      x,
-      y,
       i,
       constraints,
       effectiveLayoutItem,
-      constraintContext
+      getConstraintContext
     ]
   );
   const handleResizeStart = React2.useCallback(
@@ -462,7 +544,7 @@ function childrenEqual(a, b) {
   }
   return true;
 }
-function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
+function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor) {
   const layout = [];
   const childKeys = /* @__PURE__ */ new Set();
   React2__default.default.Children.forEach(children, (child) => {
@@ -504,7 +586,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
+  return compactor.compact(corrected, cols);
 }
 function GridLayout(props) {
   const {
@@ -516,9 +598,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunkFN6MIZ24_js.defaultPositionStrategy,
+    positionStrategy = chunk2TEFHZC4_js.defaultPositionStrategy,
     compactor: compactorProp,
-    constraints = chunkFN6MIZ24_js.defaultConstraints,
+    constraints = chunk2TEFHZC4_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -539,19 +621,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunk2TEFHZC4_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunk2TEFHZC4_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunk2TEFHZC4_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunk2TEFHZC4_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -559,15 +641,20 @@ function GridLayout(props) {
     enabled: isDraggable,
     bounded: isBounded,
     handle: draggableHandle,
-    cancel: draggableCancel
+    cancel: draggableCancel,
+    threshold: dragThreshold
   } = dragConfig;
   const {
     enabled: isResizable,
     handles: resizeHandles,
     handleComponent: resizeHandle
   } = resizeConfig;
-  const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
-  const compactor = compactorProp ?? chunkFN6MIZ24_js.getCompactor("vertical");
+  const {
+    enabled: isDroppable,
+    defaultItem: defaultDropItem,
+    onDragOver: dropConfigOnDragOver
+  } = dropConfig;
+  const compactor = compactorProp ?? chunk2TEFHZC4_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -583,13 +670,7 @@ function GridLayout(props) {
   const effectiveContainerPadding = containerPadding ?? margin;
   const [mounted, setMounted] = React2.useState(false);
   const [layout, setLayout] = React2.useState(
-    () => synchronizeLayoutWithChildren(
-      propsLayout,
-      children,
-      cols,
-      compactType,
-      allowOverlap
-    )
+    () => synchronizeLayoutWithChildren(propsLayout, children, cols, compactor)
   );
   const [activeDrag, setActiveDrag] = React2.useState(null);
   const [resizing, setResizing] = React2.useState(false);
@@ -605,6 +686,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)) {
@@ -613,6 +696,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;
@@ -622,8 +706,7 @@ function GridLayout(props) {
         baseLayout,
         children,
         cols,
-        compactType,
-        allowOverlap
+        compactor
       );
       setLayout(newLayout);
     }
@@ -635,8 +718,9 @@ function GridLayout(props) {
     children,
     cols,
     compactType,
-    allowOverlap,
+    compactor,
     activeDrag,
+    droppingDOMNode,
     layout
   ]);
   React2.useEffect(() => {
@@ -653,7 +737,8 @@ function GridLayout(props) {
   }, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
   const onDragStart = React2.useCallback(
     (i, _x, _y, data) => {
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -663,16 +748,17 @@ function GridLayout(props) {
         i
       };
       oldDragItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
-      oldLayoutRef.current = layout;
+      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 = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -682,7 +768,7 @@ function GridLayout(props) {
         i
       };
       const newLayout = chunkBJFPTW5Q_js.moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -693,21 +779,20 @@ function GridLayout(props) {
         allowOverlap
       );
       onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
-      setLayout(
-        allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(newLayout, cols));
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onDragProp]
   );
   const onDragStop = React2.useCallback(
     (i, x, y, data) => {
       if (!activeDrag) return;
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const newLayout = chunkBJFPTW5Q_js.moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -717,7 +802,7 @@ function GridLayout(props) {
         cols,
         allowOverlap
       );
-      const finalLayout = allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols);
+      const finalLayout = compactor.compact(newLayout, cols);
       onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
       const oldLayout = oldLayoutRef.current;
       oldDragItemRef.current = null;
@@ -730,34 +815,36 @@ function GridLayout(props) {
     },
     [
       activeDrag,
-      layout,
       preventCollision,
       compactType,
       cols,
       allowOverlap,
+      compactor,
       onDragStopProp,
       onLayoutChange
     ]
   );
   const onResizeStart = React2.useCallback(
     (i, _w, _h, data) => {
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       oldResizeItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
-      oldLayoutRef.current = layout;
+      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] = chunkBJFPTW5Q_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)) {
@@ -774,7 +861,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = chunkBJFPTW5Q_js.getAllCollisions(layout, {
+          const collisions = chunkBJFPTW5Q_js.getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -824,18 +911,17 @@ function GridLayout(props) {
         data.e,
         data.node
       );
-      setLayout(
-        allowOverlap ? finalLayout : chunkFN6MIZ24_js.compact(finalLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(finalLayout, cols));
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onResizeProp]
   );
   const onResizeStop = React2.useCallback(
     (i, _w, _h, data) => {
+      const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
-      const finalLayout = allowOverlap ? layout : chunkFN6MIZ24_js.compact(layout, compactType, cols);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const finalLayout = compactor.compact(currentLayout, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -854,20 +940,19 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [cols, compactor, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = React2.useCallback(() => {
-    const newLayout = chunkFN6MIZ24_js.compact(
-      layout.filter((l) => l.i !== droppingItem.i),
-      compactType,
-      cols,
-      allowOverlap
+    const currentLayout = layoutRef.current;
+    const newLayout = compactor.compact(
+      currentLayout.filter((l) => l.i !== droppingItem.i),
+      cols
     );
     setLayout(newLayout);
     setDroppingDOMNode(null);
     setActiveDrag(null);
     setDroppingPosition(void 0);
-  }, [layout, droppingItem.i, compactType, cols, allowOverlap]);
+  }, [droppingItem.i, cols, compactor]);
   const handleDragOver = React2.useCallback(
     (e) => {
       e.preventDefault();
@@ -877,7 +962,7 @@ function GridLayout(props) {
       )) {
         return false;
       }
-      const rawResult = onDropDragOverProp(e);
+      const rawResult = dropConfigOnDragOver ? dropConfigOnDragOver(e.nativeEvent) : onDropDragOverProp(e);
       if (rawResult === false) {
         if (droppingDOMNode) {
           removeDroppingPlaceholder();
@@ -932,7 +1017,7 @@ function GridLayout(props) {
         setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
         setDroppingPosition(newDroppingPosition);
         setLayout([
-          ...layout,
+          ...layoutRef.current,
           {
             ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -952,6 +1037,7 @@ function GridLayout(props) {
       droppingDOMNode,
       droppingPosition,
       droppingItem,
+      dropConfigOnDragOver,
       onDropDragOverProp,
       removeDroppingPlaceholder,
       transformScale,
@@ -960,8 +1046,7 @@ function GridLayout(props) {
       maxRows,
       rowHeight,
       width,
-      effectiveContainerPadding,
-      layout
+      effectiveContainerPadding
     ]
   );
   const handleDragLeave = React2.useCallback(
@@ -984,12 +1069,13 @@ 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) => {
@@ -1024,6 +1110,8 @@ function GridLayout(props) {
           useCSSTransforms: useCSSTransforms && mounted,
           usePercentages: !mounted,
           transformScale,
+          positionStrategy,
+          dragThreshold,
           w: l.w,
           h: l.h,
           x: l.x,
@@ -1067,6 +1155,8 @@ function GridLayout(props) {
       useCSSTransforms,
       mounted,
       transformScale,
+      positionStrategy,
+      dragThreshold,
       droppingPosition,
       resizeHandles,
       resizeHandle,
@@ -1186,7 +1276,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
+  return chunk2TEFHZC4_js.compact(corrected, compactType, cols, allowOverlap);
 }
 function ResponsiveGridLayout(props) {
   const {
@@ -1206,17 +1296,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunkFN6MIZ24_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunk2TEFHZC4_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunk2TEFHZC4_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunkFN6MIZ24_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunk2TEFHZC4_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
+    return chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1241,7 +1331,7 @@ function ResponsiveGridLayout(props) {
   }, [layouts]);
   const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
+      return chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
@@ -1263,7 +1353,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = chunkFN6MIZ24_js.compact(
+      const newLayout = chunk2TEFHZC4_js.compact(
         chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
         compactType,
         cols,
@@ -1296,15 +1386,15 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunkFN6MIZ24_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+      const newBreakpoint = propBreakpoint ?? chunk2TEFHZC4_js.getBreakpointFromWidth(breakpoints, width);
+      const newCols = chunk2TEFHZC4_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
       const lastBreakpoint = breakpoint;
       if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
         const newLayouts = { ...layoutsRef.current };
         if (!newLayouts[lastBreakpoint]) {
           newLayouts[lastBreakpoint] = chunkBJFPTW5Q_js.cloneLayout(layout);
         }
-        let newLayout = chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
+        let newLayout = chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
           newLayouts,
           breakpoints,
           newBreakpoint,
@@ -1328,11 +1418,11 @@ function ResponsiveGridLayout(props) {
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunkFN6MIZ24_js.getIndentationValue(
+      const currentMargin2 = chunk2TEFHZC4_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunkFN6MIZ24_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunk2TEFHZC4_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1374,14 +1464,14 @@ function ResponsiveGridLayout(props) {
     [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunkFN6MIZ24_js.getIndentationValue(
+    return chunk2TEFHZC4_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunkFN6MIZ24_js.getIndentationValue(
+    return chunk2TEFHZC4_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1413,5 +1503,5 @@ function ResponsiveGridLayout(props) {
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
-//# sourceMappingURL=chunk-QRW3ND4U.js.map
-//# sourceMappingURL=chunk-QRW3ND4U.js.map
+//# sourceMappingURL=chunk-NQUM7RXX.js.map
+//# sourceMappingURL=chunk-NQUM7RXX.js.map