react-grid-layout 2.2.4 → 2.3.0

package/dist/{chunk-7ZM5LVH2.mjs → chunk-Z6CWRR74.mjs}

@@ -1,13 +1,77 @@
-import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-KDANGDDL.mjs';
-import { calcXYRaw, calcGridItemWHPx, clamp, calcGridColWidth, calcWHRaw, calcGridItemPosition, bottom, getLayoutItem, cloneLayoutItem, moveElement, withLayoutItem, getAllCollisions, calcXY, cloneLayout, correctBounds } from './chunk-76RTO6EO.mjs';
-import React2, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, getCompactor, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig } from './chunk-VBU6B7II.mjs';
+import { calcXYRaw, calcGridItemWHPx, clamp, calcGridColWidth, calcWHRaw, calcGridItemPosition, cloneLayout, bottom, correctBounds, getLayoutItem, cloneLayoutItem, moveElement, withLayoutItem, getAllCollisions, calcXY } from './chunk-ZYNFVPDS.mjs';
+import React2, { useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
 import { DraggableCore } from 'react-draggable';
 import { Resizable } from 'react-resizable';
 import clsx from 'clsx';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { deepEqual } from 'fast-equals';
 
-function GridItem(props) {
+// src/react/components/edgeScroll.ts
+var EDGE_THRESHOLD = 50;
+var SCROLL_STEP = 12;
+function getNearestScrollable(node) {
+  let el = node;
+  while (el) {
+    const style = window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    const scrollable = (overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight;
+    if (scrollable) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
+function createEdgeScrollController(node) {
+  const scrollContainer = getNearestScrollable(node);
+  let rafId = null;
+  let lastX = 0;
+  let lastY = 0;
+  let running = false;
+  function step() {
+    const container = scrollContainer;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const { clientHeight, scrollTop, scrollHeight } = container;
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    let dy = 0;
+    let dx = 0;
+    if (lastY < rect.top + EDGE_THRESHOLD && scrollTop > 0) {
+      dy = -SCROLL_STEP;
+    } else if (lastY > rect.bottom - EDGE_THRESHOLD && scrollTop + clientHeight < scrollHeight) {
+      dy = SCROLL_STEP;
+    }
+    if (lastX < rect.left + EDGE_THRESHOLD && scrollLeft > 0) {
+      dx = -SCROLL_STEP;
+    } else if (lastX > rect.right - EDGE_THRESHOLD && scrollLeft + clientWidth < scrollWidth) {
+      dx = SCROLL_STEP;
+    }
+    if (dy !== 0 || dx !== 0) {
+      container.scrollTop += dy;
+      container.scrollLeft += dx;
+    }
+    if (running) {
+      rafId = requestAnimationFrame(step);
+    }
+  }
+  return {
+    feed(clientX, clientY) {
+      lastX = clientX;
+      lastY = clientY;
+      if (!running) {
+        running = true;
+        rafId = requestAnimationFrame(step);
+      }
+    },
+    stop() {
+      running = false;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    }
+  };
+}
+function GridItemInner(props) {
   const {
     children,
     cols,
@@ -19,6 +83,7 @@ function GridItem(props) {
     isDraggable,
     isResizable,
     isBounded,
+    allowMobileScroll,
     static: isStatic,
     useCSSTransforms = true,
     usePercentages = false,
@@ -71,6 +136,7 @@ function GridItem(props) {
   const dragPendingRef = useRef(false);
   const initialDragClientRef = useRef({ x: 0, y: 0 });
   const thresholdExceededRef = useRef(false);
+  const edgeScrollRef = useRef(null);
   const positionParams = useMemo(
     () => ({
       cols,
@@ -88,7 +154,7 @@ function GridItem(props) {
       maxRows,
       containerWidth,
       containerHeight: 0,
-      // Auto-height grids don't have a fixed container height
+      // Overridden per-interaction with the measured container height
       rowHeight,
       margin,
       // Use empty layout here - the actual layout will be accessed via layoutRef when needed
@@ -98,8 +164,9 @@ function GridItem(props) {
     [cols, maxRows, containerWidth, rowHeight, margin]
   );
   const getConstraintContext = useCallback(
-    () => ({
+    (containerHeight) => ({
       ...constraintContext,
+      containerHeight: containerHeight ?? constraintContext.containerHeight,
       layout: layoutRef.current
     }),
     [constraintContext]
@@ -165,6 +232,11 @@ function GridItem(props) {
         };
       }
       dragPositionRef.current = newPosition;
+      if (!edgeScrollRef.current) {
+        edgeScrollRef.current = createEdgeScrollController(
+          node instanceof HTMLElement ? node : null
+        );
+      }
       if (dragThreshold > 0) {
         const mouseEvent = e;
         initialDragClientRef.current = {
@@ -240,6 +312,7 @@ function GridItem(props) {
           });
         }
       }
+      edgeScrollRef.current?.feed(mouseEvent.clientX, mouseEvent.clientY);
       let top = dragPositionRef.current.top + deltaY;
       let left = dragPositionRef.current.left + deltaX;
       if (isBounded) {
@@ -289,6 +362,8 @@ function GridItem(props) {
   const onDragStop = useCallback(
     (e, { node }) => {
       if (!onDragStopProp || !dragging) return;
+      edgeScrollRef.current?.stop();
+      edgeScrollRef.current = null;
       const wasPending = dragPendingRef.current;
       dragPendingRef.current = false;
       thresholdExceededRef.current = false;
@@ -348,6 +423,7 @@ function GridItem(props) {
         };
       }
       resizePositionRef.current = updatedSize;
+      const containerHeight = node?.offsetParent?.clientHeight ?? 0;
       const rawSize = calcWHRaw(
         positionParams,
         updatedSize.width,
@@ -359,7 +435,7 @@ function GridItem(props) {
         rawSize.w,
         rawSize.h,
         resizeHandle2,
-        getConstraintContext()
+        getConstraintContext(containerHeight)
       );
       handler(i, newW, newH, {
         // react-resizable forwards react-draggable's callback event, which is
@@ -529,12 +605,104 @@ function GridItem(props) {
       handle,
       cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
       scale: transformScale,
+      allowMobileScroll,
       nodeRef: elementRef,
       children: newChild
     }
   );
   return newChild;
 }
+var GridItem = React2.memo(GridItemInner, (prev, next) => {
+  if (prev.x !== next.x || prev.y !== next.y) return false;
+  if (prev.w !== next.w || prev.h !== next.h) return false;
+  if (prev.minW !== next.minW || prev.maxW !== next.maxW) return false;
+  if (prev.minH !== next.minH || prev.maxH !== next.maxH) return false;
+  if (prev.cols !== next.cols) return false;
+  if (prev.containerWidth !== next.containerWidth) return false;
+  if (prev.rowHeight !== next.rowHeight) return false;
+  if (prev.maxRows !== next.maxRows) return false;
+  if (prev.margin !== next.margin) return false;
+  if (prev.containerPadding !== next.containerPadding) return false;
+  if (prev.transformScale !== next.transformScale) return false;
+  if (prev.isDraggable !== next.isDraggable) return false;
+  if (prev.isResizable !== next.isResizable) return false;
+  if (prev.isBounded !== next.isBounded) return false;
+  if (prev.allowMobileScroll !== next.allowMobileScroll) return false;
+  if (prev.useCSSTransforms !== next.useCSSTransforms) return false;
+  if (prev.usePercentages !== next.usePercentages) return false;
+  if (prev.children !== next.children) return false;
+  if (prev.onDrag !== next.onDrag) return false;
+  if (prev.onDragStop !== next.onDragStop) return false;
+  if (prev.onResize !== next.onResize) return false;
+  if (prev.onResizeStop !== next.onResizeStop) return false;
+  if (prev.droppingPosition !== next.droppingPosition) return false;
+  return true;
+});
+GridItem.displayName = "GridItem";
+
+// src/react/components/dropMath.ts
+function computeDropPosition(input) {
+  const {
+    clientX,
+    clientY,
+    gridElement,
+    droppingItem,
+    event,
+    dragOffsetX = 0,
+    dragOffsetY = 0,
+    transformScale,
+    cols,
+    margin,
+    maxRows,
+    rowHeight,
+    width,
+    containerPadding
+  } = input;
+  const gridRect = gridElement.getBoundingClientRect();
+  const positionParams = {
+    cols,
+    margin,
+    maxRows,
+    rowHeight,
+    containerWidth: width,
+    containerPadding
+  };
+  const actualColWidth = calcGridColWidth(positionParams);
+  const itemPixelWidth = calcGridItemWHPx(
+    droppingItem.w,
+    actualColWidth,
+    margin[0]
+  );
+  const itemPixelHeight = calcGridItemWHPx(
+    droppingItem.h,
+    rowHeight,
+    margin[1]
+  );
+  const itemCenterOffsetX = itemPixelWidth / 2;
+  const itemCenterOffsetY = itemPixelHeight / 2;
+  const scrollLeft = gridElement.scrollLeft ?? 0;
+  const scrollTop = gridElement.scrollTop ?? 0;
+  const rawGridX = clientX - gridRect.left + scrollLeft + dragOffsetX - itemCenterOffsetX;
+  const rawGridY = clientY - gridRect.top + scrollTop + dragOffsetY - itemCenterOffsetY;
+  const clampedGridX = Math.max(0, rawGridX);
+  const clampedGridY = Math.max(0, rawGridY);
+  const newDroppingPosition = {
+    left: clampedGridX / transformScale,
+    top: clampedGridY / transformScale,
+    e: event
+  };
+  const calculatedXY = calcXY(
+    positionParams,
+    clampedGridY,
+    clampedGridX,
+    droppingItem.w,
+    droppingItem.h
+  );
+  return {
+    newDroppingPosition,
+    calculatedXY
+  };
+}
 var noop = () => {
 };
 var layoutClassName = "react-grid-layout";
@@ -652,7 +820,8 @@ function GridLayout(props) {
     bounded: isBounded,
     handle: draggableHandle,
     cancel: draggableCancel,
-    threshold: dragThreshold
+    threshold: dragThreshold,
+    allowMobileScroll: dragAllowMobileScroll
   } = dragConfig;
   const {
     enabled: isResizable,
@@ -662,7 +831,9 @@ function GridLayout(props) {
   const {
     enabled: isDroppable,
     defaultItem: defaultDropItem,
-    onDragOver: dropConfigOnDragOver
+    onDragOver: dropConfigOnDragOver,
+    touchEnabled = true,
+    touchDragSource = "[data-rgl-draggable]"
   } = dropConfig;
   const compactor = compactorProp ?? getCompactor("vertical");
   const compactType = compactor.type;
@@ -688,6 +859,8 @@ function GridLayout(props) {
     null
   );
   const [droppingPosition, setDroppingPosition] = useState();
+  const droppingPositionRef = useRef(void 0);
+  droppingPositionRef.current = droppingPosition;
   const oldDragItemRef = useRef(null);
   const oldResizeItemRef = useRef(null);
   const oldLayoutRef = useRef(null);
@@ -696,6 +869,15 @@ function GridLayout(props) {
   const prevPropsLayoutRef = useRef(propsLayout);
   const prevChildrenRef = useRef(children);
   const prevCompactTypeRef = useRef(compactType);
+  const gridContainerRef = useRef(null);
+  const touchDragActiveRef = useRef(false);
+  const activeTouchIdRef = useRef(null);
+  const droppingDOMNodeRef = useRef(null);
+  droppingDOMNodeRef.current = droppingDOMNode;
+  const onDropPropRef = useRef(onDropProp);
+  useLayoutEffect(() => {
+    onDropPropRef.current = onDropProp;
+  });
   const layoutRef = useRef(layout);
   layoutRef.current = layout;
   useEffect(() => {
@@ -736,12 +918,12 @@ function GridLayout(props) {
     layout
   ]);
   useEffect(() => {
-    if (!activeDrag && !deepEqual(layout, prevLayoutRef.current)) {
+    if (!activeDrag && !droppingDOMNode && !deepEqual(layout, prevLayoutRef.current)) {
       prevLayoutRef.current = layout;
       const publicLayout = layout.filter((l) => l.i !== droppingItem.i);
       onLayoutChange(publicLayout);
     }
-  }, [layout, activeDrag, onLayoutChange, droppingItem.i]);
+  }, [layout, activeDrag, droppingDOMNode, onLayoutChange, droppingItem.i]);
   const containerHeight = useMemo(() => {
     if (!autoSize) return void 0;
     const nbRow = bottom(layout);
@@ -799,7 +981,7 @@ function GridLayout(props) {
   );
   const onDragStop = useCallback(
     (i, x, y, data) => {
-      if (!activeDrag) return;
+      if (!oldDragItemRef.current) return;
       const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
       const l = getLayoutItem(currentLayout, i);
@@ -827,7 +1009,6 @@ function GridLayout(props) {
       }
     },
     [
-      activeDrag,
       preventCollision,
       compactType,
       cols,
@@ -891,6 +1072,9 @@ function GridLayout(props) {
         }
         item.w = w;
         item.h = h;
+        if (handle === "n" || handle === "nw" || handle === "ne") {
+          item.y = newY ?? item.y;
+        }
         return item;
       });
       if (!l) return;
@@ -924,7 +1108,14 @@ function GridLayout(props) {
         data.e,
         data.node
       );
-      setLayout(compactor.compact(finalLayout, cols));
+      const compactedLayout = compactor.compact(finalLayout, cols);
+      if (handle === "n" || handle === "nw" || handle === "ne") {
+        const resized = compactedLayout.find((item) => item.i === i);
+        if (resized) {
+          resized.y = l.y;
+        }
+      }
+      setLayout(compactedLayout);
       setActiveDrag(placeholder);
     },
     [preventCollision, compactType, cols, allowOverlap, compactor, onResizeProp]
@@ -955,6 +1146,73 @@ function GridLayout(props) {
     },
     [cols, compactor, onResizeStopProp, onLayoutChange]
   );
+  const placeDroppingItem = useCallback(
+    (itemToPlace, newDroppingPosition, calculatedXY, hasPlaceholder) => {
+      if (!hasPlaceholder) {
+        setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, itemToPlace.i));
+        setDroppingPosition(newDroppingPosition);
+        const baseLayout = layoutRef.current.filter((l) => l.i !== itemToPlace.i);
+        setLayout([
+          ...baseLayout,
+          {
+            ...itemToPlace,
+            x: calculatedXY.x,
+            y: calculatedXY.y,
+            static: false,
+            isDraggable: true
+          }
+        ]);
+      } else if (droppingPositionRef.current) {
+        const shouldUpdate = droppingPositionRef.current.left !== newDroppingPosition.left || droppingPositionRef.current.top !== newDroppingPosition.top;
+        if (shouldUpdate) {
+          setDroppingPosition(newDroppingPosition);
+          setLayout(
+            (currentLayout) => currentLayout.map(
+              (item) => item.i === itemToPlace.i && (item.x !== calculatedXY.x || item.y !== calculatedXY.y) ? { ...item, x: calculatedXY.x, y: calculatedXY.y } : item
+            )
+          );
+        }
+      }
+    },
+    []
+  );
+  const applyTouchDropPosition = useCallback(
+    (clientX, clientY, nativeEvent) => {
+      const gridEl = gridContainerRef.current;
+      if (!gridEl) return;
+      const { newDroppingPosition, calculatedXY } = computeDropPosition({
+        clientX,
+        clientY,
+        gridElement: gridEl,
+        droppingItem,
+        event: nativeEvent,
+        transformScale,
+        cols,
+        margin,
+        maxRows,
+        rowHeight,
+        width,
+        containerPadding: effectiveContainerPadding
+      });
+      placeDroppingItem(
+        droppingItem,
+        newDroppingPosition,
+        calculatedXY,
+        !!droppingDOMNodeRef.current
+      );
+    },
+    [
+      droppingItem,
+      transformScale,
+      cols,
+      margin,
+      maxRows,
+      rowHeight,
+      width,
+      effectiveContainerPadding,
+      placeDroppingItem
+    ]
+  );
   const removeDroppingPlaceholder = useCallback(() => {
     const currentLayout = layoutRef.current;
     const hasDroppingItem = currentLayout.some((l) => l.i === droppingItem.i);
@@ -995,74 +1253,36 @@ function GridLayout(props) {
         ...onDragOverResult
       } = rawResult ?? {};
       const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
-      const gridRect = e.currentTarget.getBoundingClientRect();
-      const positionParams = {
+      const { newDroppingPosition, calculatedXY } = computeDropPosition({
+        clientX: e.clientX,
+        clientY: e.clientY,
+        gridElement: e.currentTarget,
+        droppingItem: finalDroppingItem,
+        event: e.nativeEvent,
+        dragOffsetX,
+        dragOffsetY,
+        transformScale,
         cols,
         margin,
         maxRows,
         rowHeight,
-        containerWidth: width,
+        width,
         containerPadding: effectiveContainerPadding
-      };
-      const actualColWidth = calcGridColWidth(positionParams);
-      const itemPixelWidth = calcGridItemWHPx(
-        finalDroppingItem.w,
-        actualColWidth,
-        margin[0]
-      );
-      const itemPixelHeight = calcGridItemWHPx(
-        finalDroppingItem.h,
-        rowHeight,
-        margin[1]
+      });
+      placeDroppingItem(
+        finalDroppingItem,
+        newDroppingPosition,
+        calculatedXY,
+        !!droppingDOMNode
       );
-      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: clampedGridX / transformScale,
-        top: clampedGridY / transformScale,
-        e: e.nativeEvent
-      };
-      if (!droppingDOMNode) {
-        const calculatedPosition = calcXY(
-          positionParams,
-          clampedGridY,
-          clampedGridX,
-          finalDroppingItem.w,
-          finalDroppingItem.h
-        );
-        setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, finalDroppingItem.i));
-        setDroppingPosition(newDroppingPosition);
-        const baseLayout = layoutRef.current.filter(
-          (l) => l.i !== finalDroppingItem.i
-        );
-        setLayout([
-          ...baseLayout,
-          {
-            ...finalDroppingItem,
-            x: calculatedPosition.x,
-            y: calculatedPosition.y,
-            static: false,
-            isDraggable: true
-          }
-        ]);
-      } else if (droppingPosition) {
-        const shouldUpdate = droppingPosition.left !== newDroppingPosition.left || droppingPosition.top !== newDroppingPosition.top;
-        if (shouldUpdate) {
-          setDroppingPosition(newDroppingPosition);
-        }
-      }
     },
     [
       droppingDOMNode,
-      droppingPosition,
       droppingItem,
       dropConfigOnDragOver,
       onDropDragOverProp,
       removeDroppingPlaceholder,
+      placeDroppingItem,
       transformScale,
       cols,
       margin,
@@ -1091,18 +1311,106 @@ function GridLayout(props) {
     e.stopPropagation();
     dragEnterCounterRef.current++;
   }, []);
+  const commitDrop = useCallback(
+    (nativeEvent) => {
+      const currentLayout = layoutRef.current;
+      const item = currentLayout.find((l) => l.i === droppingItem.i);
+      removeDroppingPlaceholder();
+      onDropPropRef.current(currentLayout, item, nativeEvent);
+    },
+    [droppingItem.i, removeDroppingPlaceholder]
+  );
   const handleDrop = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      const currentLayout = layoutRef.current;
-      const item = currentLayout.find((l) => l.i === droppingItem.i);
       dragEnterCounterRef.current = 0;
-      removeDroppingPlaceholder();
-      onDropProp(currentLayout, item, e.nativeEvent);
+      commitDrop(e.nativeEvent);
     },
-    [droppingItem.i, removeDroppingPlaceholder, onDropProp]
+    [commitDrop]
   );
+  useEffect(() => {
+    if (!isDroppable || !touchEnabled) return;
+    const gridEl = gridContainerRef.current;
+    if (!gridEl) return;
+    const isOverGrid = (clientX, clientY) => {
+      const el = document.elementFromPoint(clientX, clientY);
+      return el ? gridEl.contains(el) : false;
+    };
+    const isSourceElement = (target) => {
+      if (!(target instanceof HTMLElement)) return false;
+      return target.closest(touchDragSource) !== null;
+    };
+    const getTouch = (e) => {
+      const touches = e.changedTouches;
+      if (!touches || touches.length === 0) return void 0;
+      const id = activeTouchIdRef.current;
+      if (id === null) return touches[0];
+      for (let i = 0; i < touches.length; i++) {
+        const touch = touches[i];
+        if (touch && touch.identifier === id) return touch;
+      }
+      return void 0;
+    };
+    const handleTouchStart = (e) => {
+      if (!isSourceElement(e.target)) return;
+      if (activeTouchIdRef.current !== null) return;
+      e.preventDefault();
+      const touch = e.changedTouches?.[0];
+      if (!touch) return;
+      activeTouchIdRef.current = touch.identifier;
+      touchDragActiveRef.current = true;
+    };
+    const handleTouchMove = (e) => {
+      if (!touchDragActiveRef.current) return;
+      e.preventDefault();
+      const touch = getTouch(e);
+      if (!touch) return;
+      if (!isOverGrid(touch.clientX, touch.clientY)) {
+        if (droppingDOMNodeRef.current) removeDroppingPlaceholder();
+        return;
+      }
+      applyTouchDropPosition(touch.clientX, touch.clientY, e);
+    };
+    const handleTouchEnd = (e) => {
+      if (!touchDragActiveRef.current) return;
+      e.preventDefault();
+      const touch = getTouch(e);
+      touchDragActiveRef.current = false;
+      activeTouchIdRef.current = null;
+      if (!touch) return;
+      if (!isOverGrid(touch.clientX, touch.clientY)) {
+        removeDroppingPlaceholder();
+        return;
+      }
+      commitDrop(e);
+    };
+    const handleTouchCancel = () => {
+      if (!touchDragActiveRef.current) return;
+      touchDragActiveRef.current = false;
+      activeTouchIdRef.current = null;
+      removeDroppingPlaceholder();
+    };
+    const opts = { passive: false };
+    document.addEventListener("touchstart", handleTouchStart, opts);
+    document.addEventListener("touchmove", handleTouchMove, opts);
+    document.addEventListener("touchend", handleTouchEnd, opts);
+    document.addEventListener("touchcancel", handleTouchCancel, opts);
+    return () => {
+      document.removeEventListener("touchstart", handleTouchStart, opts);
+      document.removeEventListener("touchmove", handleTouchMove, opts);
+      document.removeEventListener("touchend", handleTouchEnd, opts);
+      document.removeEventListener("touchcancel", handleTouchCancel, opts);
+    };
+  }, [
+    isDroppable,
+    touchEnabled,
+    touchDragSource,
+    applyTouchDropPosition,
+    removeDroppingPlaceholder,
+    commitDrop,
+    droppingItem.i
+  ]);
   const processGridItem = useCallback(
     (child, isDroppingItem) => {
       if (!child || !child.key) return null;
@@ -1133,6 +1441,7 @@ function GridLayout(props) {
           isDraggable: draggable,
           isResizable: resizable,
           isBounded: bounded,
+          allowMobileScroll: dragAllowMobileScroll,
           useCSSTransforms: useCSSTransforms && mounted,
           usePercentages: !mounted,
           transformScale,
@@ -1217,6 +1526,17 @@ function GridLayout(props) {
       }
     );
   };
+  const setGridRef = useCallback(
+    (node) => {
+      gridContainerRef.current = node;
+      if (typeof innerRef === "function") {
+        innerRef(node);
+      } else if (innerRef && "current" in innerRef) {
+        innerRef.current = node;
+      }
+    },
+    [innerRef]
+  );
   const mergedClassName = clsx(layoutClassName, className);
   const mergedStyle = {
     height: containerHeight,
@@ -1225,7 +1545,7 @@ function GridLayout(props) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: innerRef,
+      ref: setGridRef,
       className: mergedClassName,
       style: mergedStyle,
       onDrop: isDroppable ? handleDrop : void 0,
@@ -1259,20 +1579,33 @@ var DEFAULT_COLS = {
 };
 var noop2 = () => {
 };
-function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor) {
+function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor, reSeedFromDataGrid = false) {
   const layout = [];
   React2.Children.forEach(children, (child) => {
     if (!React2.isValidElement(child) || child.key === null) return;
     const key = String(child.key);
+    const childProps = child.props;
+    const dataGrid = childProps["data-grid"];
     const existingItem = initialLayout.find((l) => l.i === key);
     if (existingItem) {
-      layout.push({
-        ...existingItem,
-        i: key
-      });
+      if (reSeedFromDataGrid && dataGrid) {
+        layout.push({
+          ...existingItem,
+          i: key,
+          w: dataGrid.w ?? existingItem.w,
+          h: dataGrid.h ?? existingItem.h,
+          minW: dataGrid.minW ?? existingItem.minW,
+          maxW: dataGrid.maxW ?? existingItem.maxW,
+          minH: dataGrid.minH ?? existingItem.minH,
+          maxH: dataGrid.maxH ?? existingItem.maxH
+        });
+      } else {
+        layout.push({
+          ...existingItem,
+          i: key
+        });
+      }
     } else {
-      const childProps = child.props;
-      const dataGrid = childProps["data-grid"];
       if (dataGrid) {
         layout.push({
           i: key,
@@ -1304,7 +1637,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor
   const corrected = correctBounds(layout, { cols });
   return compactor.compact(corrected, cols);
 }
-function ResponsiveGridLayout(props) {
+function ResponsiveGridLayoutInner(props) {
   const {
     children,
     width,
@@ -1424,11 +1757,13 @@ function ResponsiveGridLayout(props) {
           newCols,
           compactor
         );
+        const layoutWasGenerated = !newLayouts[newBreakpoint];
         newLayout = synchronizeLayoutWithChildren2(
           newLayout,
           children,
           newCols,
-          compactor
+          compactor,
+          layoutWasGenerated
         );
         newLayouts[newBreakpoint] = newLayout;
         setBreakpoint(newBreakpoint);
@@ -1521,5 +1856,11 @@ function ResponsiveGridLayout(props) {
     }
   );
 }
+var ResponsiveGridLayoutWithRef = React2.forwardRef(function ResponsiveGridLayoutForwardRef(props, ref) {
+  const { innerRef, ...rest } = props;
+  const effectiveInnerRef = innerRef ?? ref;
+  return /* @__PURE__ */ jsx(ResponsiveGridLayoutInner, { ...rest, innerRef: effectiveInnerRef });
+});
+ResponsiveGridLayoutWithRef.displayName = "ResponsiveGridLayout";
 
-export { GridItem, GridLayout, ResponsiveGridLayout };
+export { GridItem, GridLayout, ResponsiveGridLayoutWithRef };