react-grid-layout 2.2.4 → 2.3.0

package/dist/{chunk-QAWP6PEK.js → chunk-CUP5Y2ZG.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
-var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
+var chunkQAIA5KAO_js = require('./chunk-QAIA5KAO.js');
+var chunkVJJIA3HC_js = require('./chunk-VJJIA3HC.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
 var reactResizable = require('react-resizable');
@@ -14,7 +14,71 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React2__default = /*#__PURE__*/_interopDefault(React2);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-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,
@@ -26,6 +90,7 @@ function GridItem(props) {
     isDraggable,
     isResizable,
     isBounded,
+    allowMobileScroll,
     static: isStatic,
     useCSSTransforms = true,
     usePercentages = false,
@@ -48,7 +113,7 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
-    constraints = chunk55DQUWLA_js.defaultConstraints,
+    constraints = chunkQAIA5KAO_js.defaultConstraints,
     layoutItem,
     layout = [],
     onDragStart: onDragStartProp,
@@ -78,6 +143,7 @@ function GridItem(props) {
   const dragPendingRef = React2.useRef(false);
   const initialDragClientRef = React2.useRef({ x: 0, y: 0 });
   const thresholdExceededRef = React2.useRef(false);
+  const edgeScrollRef = React2.useRef(null);
   const positionParams = React2.useMemo(
     () => ({
       cols,
@@ -95,7 +161,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
@@ -105,8 +171,9 @@ function GridItem(props) {
     [cols, maxRows, containerWidth, rowHeight, margin]
   );
   const getConstraintContext = React2.useCallback(
-    () => ({
+    (containerHeight) => ({
       ...constraintContext,
+      containerHeight: containerHeight ?? constraintContext.containerHeight,
       layout: layoutRef.current
     }),
     [constraintContext]
@@ -131,14 +198,14 @@ function GridItem(props) {
         return positionStrategy.calcStyle(pos2);
       }
       if (useCSSTransforms) {
-        return chunk55DQUWLA_js.setTransform(pos2);
+        return chunkQAIA5KAO_js.setTransform(pos2);
       }
-      const styleObj = chunk55DQUWLA_js.setTopLeft(pos2);
+      const styleObj = chunkQAIA5KAO_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunk55DQUWLA_js.perc(pos2.left / containerWidth),
-          width: chunk55DQUWLA_js.perc(pos2.width / containerWidth)
+          left: chunkQAIA5KAO_js.perc(pos2.left / containerWidth),
+          width: chunkQAIA5KAO_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
@@ -172,6 +239,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 = {
@@ -184,12 +256,12 @@ function GridItem(props) {
         return;
       }
       setDragging(true);
-      const rawPos = chunkA5WIFECI_js.calcXYRaw(
+      const rawPos = chunkVJJIA3HC_js.calcXYRaw(
         positionParams,
         newPosition.top,
         newPosition.left
       );
-      const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunkQAIA5KAO_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -228,12 +300,12 @@ function GridItem(props) {
         thresholdExceededRef.current = true;
         dragPendingRef.current = false;
         if (onDragStartProp) {
-          const rawPos2 = chunkA5WIFECI_js.calcXYRaw(
+          const rawPos2 = chunkVJJIA3HC_js.calcXYRaw(
             positionParams,
             dragPositionRef.current.top,
             dragPositionRef.current.left
           );
-          const { x: startX, y: startY } = chunk55DQUWLA_js.applyPositionConstraints(
+          const { x: startX, y: startY } = chunkQAIA5KAO_js.applyPositionConstraints(
             constraints,
             effectiveLayoutItem,
             rawPos2.x,
@@ -247,22 +319,23 @@ function GridItem(props) {
           });
         }
       }
+      edgeScrollRef.current?.feed(mouseEvent.clientX, mouseEvent.clientY);
       let top = dragPositionRef.current.top + deltaY;
       let left = dragPositionRef.current.left + deltaX;
       if (isBounded) {
         const { offsetParent } = node;
         if (offsetParent) {
-          const bottomBoundary = offsetParent.clientHeight - chunkA5WIFECI_js.calcGridItemWHPx(h, rowHeight, margin[1]);
-          top = chunkA5WIFECI_js.clamp(top, 0, bottomBoundary);
-          const colWidth2 = chunkA5WIFECI_js.calcGridColWidth(positionParams);
-          const rightBoundary = containerWidth - chunkA5WIFECI_js.calcGridItemWHPx(w, colWidth2, margin[0]);
-          left = chunkA5WIFECI_js.clamp(left, 0, rightBoundary);
+          const bottomBoundary = offsetParent.clientHeight - chunkVJJIA3HC_js.calcGridItemWHPx(h, rowHeight, margin[1]);
+          top = chunkVJJIA3HC_js.clamp(top, 0, bottomBoundary);
+          const colWidth2 = chunkVJJIA3HC_js.calcGridColWidth(positionParams);
+          const rightBoundary = containerWidth - chunkVJJIA3HC_js.calcGridItemWHPx(w, colWidth2, margin[0]);
+          left = chunkVJJIA3HC_js.clamp(left, 0, rightBoundary);
         }
       }
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
-      const rawPos = chunkA5WIFECI_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
+      const rawPos = chunkVJJIA3HC_js.calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = chunkQAIA5KAO_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -296,6 +369,8 @@ function GridItem(props) {
   const onDragStop = React2.useCallback(
     (e, { node }) => {
       if (!onDragStopProp || !dragging) return;
+      edgeScrollRef.current?.stop();
+      edgeScrollRef.current = null;
       const wasPending = dragPendingRef.current;
       dragPendingRef.current = false;
       thresholdExceededRef.current = false;
@@ -309,8 +384,8 @@ function GridItem(props) {
       const newPosition = { top, left };
       setDragging(false);
       dragPositionRef.current = { left: 0, top: 0 };
-      const rawPos = chunkA5WIFECI_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
+      const rawPos = chunkVJJIA3HC_js.calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = chunkQAIA5KAO_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -341,7 +416,7 @@ function GridItem(props) {
       if (!handler) return;
       let updatedSize;
       if (node) {
-        updatedSize = chunk55DQUWLA_js.resizeItemInDirection(
+        updatedSize = chunkQAIA5KAO_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -355,18 +430,19 @@ function GridItem(props) {
         };
       }
       resizePositionRef.current = updatedSize;
-      const rawSize = chunkA5WIFECI_js.calcWHRaw(
+      const containerHeight = node?.offsetParent?.clientHeight ?? 0;
+      const rawSize = chunkVJJIA3HC_js.calcWHRaw(
         positionParams,
         updatedSize.width,
         updatedSize.height
       );
-      const { w: newW, h: newH } = chunk55DQUWLA_js.applySizeConstraints(
+      const { w: newW, h: newH } = chunkQAIA5KAO_js.applySizeConstraints(
         constraints,
         effectiveLayoutItem,
         rawSize.w,
         rawSize.h,
         resizeHandle2,
-        getConstraintContext()
+        getConstraintContext(containerHeight)
       );
       handler(i, newW, newH, {
         // react-resizable forwards react-draggable's callback event, which is
@@ -394,7 +470,7 @@ function GridItem(props) {
   const handleResizeStart = React2.useCallback(
     (e, data) => {
       setResizing(true);
-      const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkVJJIA3HC_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -405,7 +481,7 @@ function GridItem(props) {
   );
   const handleResize = React2.useCallback(
     (e, data) => {
-      const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkVJJIA3HC_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -418,7 +494,7 @@ function GridItem(props) {
     (e, data) => {
       setResizing(false);
       resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
-      const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkVJJIA3HC_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -469,7 +545,7 @@ function GridItem(props) {
     }
     prevDroppingPositionRef.current = droppingPosition;
   }, [droppingPosition, dragging, i]);
-  const pos = chunkA5WIFECI_js.calcGridItemPosition(
+  const pos = chunkVJJIA3HC_js.calcGridItemPosition(
     positionParams,
     x,
     y,
@@ -479,14 +555,14 @@ function GridItem(props) {
     resizing ? resizePositionRef.current : null
   );
   const child = React2__default.default.Children.only(children);
-  const colWidth = chunkA5WIFECI_js.calcGridColWidth(positionParams);
+  const colWidth = chunkVJJIA3HC_js.calcGridColWidth(positionParams);
   const minConstraints = [
-    chunkA5WIFECI_js.calcGridItemWHPx(minW, colWidth, margin[0]),
-    chunkA5WIFECI_js.calcGridItemWHPx(minH, rowHeight, margin[1])
+    chunkVJJIA3HC_js.calcGridItemWHPx(minW, colWidth, margin[0]),
+    chunkVJJIA3HC_js.calcGridItemWHPx(minH, rowHeight, margin[1])
   ];
   const maxConstraints = [
-    chunkA5WIFECI_js.calcGridItemWHPx(maxW, colWidth, margin[0]),
-    chunkA5WIFECI_js.calcGridItemWHPx(maxH, rowHeight, margin[1])
+    chunkVJJIA3HC_js.calcGridItemWHPx(maxW, colWidth, margin[0]),
+    chunkVJJIA3HC_js.calcGridItemWHPx(maxH, rowHeight, margin[1])
   ];
   const childProps = child.props;
   const childClassName = childProps["className"];
@@ -536,12 +612,104 @@ function GridItem(props) {
       handle,
       cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""),
       scale: transformScale,
+      allowMobileScroll,
       nodeRef: elementRef,
       children: newChild
     }
   );
   return newChild;
 }
+var GridItem = React2__default.default.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 = chunkVJJIA3HC_js.calcGridColWidth(positionParams);
+  const itemPixelWidth = chunkVJJIA3HC_js.calcGridItemWHPx(
+    droppingItem.w,
+    actualColWidth,
+    margin[0]
+  );
+  const itemPixelHeight = chunkVJJIA3HC_js.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 = chunkVJJIA3HC_js.calcXY(
+    positionParams,
+    clampedGridY,
+    clampedGridX,
+    droppingItem.w,
+    droppingItem.h
+  );
+  return {
+    newDroppingPosition,
+    calculatedXY
+  };
+}
 var noop = () => {
 };
 var layoutClassName = "react-grid-layout";
@@ -570,7 +738,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor)
     childKeys.add(key);
     const existingItem = initialLayout.find((l) => l.i === key);
     if (existingItem) {
-      layout.push(chunkA5WIFECI_js.cloneLayoutItem(existingItem));
+      layout.push(chunkVJJIA3HC_js.cloneLayoutItem(existingItem));
     } else {
       const childProps = child.props;
       const dataGrid = childProps["data-grid"];
@@ -595,14 +763,14 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor)
         layout.push({
           i: key,
           x: 0,
-          y: chunkA5WIFECI_js.bottom(layout),
+          y: chunkVJJIA3HC_js.bottom(layout),
           w: 1,
           h: 1
         });
       }
     }
   });
-  const corrected = chunkA5WIFECI_js.correctBounds(layout, { cols });
+  const corrected = chunkVJJIA3HC_js.correctBounds(layout, { cols });
   return compactor.compact(corrected, cols);
 }
 function GridLayout(props) {
@@ -615,9 +783,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunk55DQUWLA_js.defaultPositionStrategy,
+    positionStrategy = chunkQAIA5KAO_js.defaultPositionStrategy,
     compactor: compactorProp,
-    constraints = chunk55DQUWLA_js.defaultConstraints,
+    constraints = chunkQAIA5KAO_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -638,19 +806,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunk55DQUWLA_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunkQAIA5KAO_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunk55DQUWLA_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunkQAIA5KAO_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunk55DQUWLA_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunkQAIA5KAO_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunk55DQUWLA_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunkQAIA5KAO_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -659,7 +827,8 @@ function GridLayout(props) {
     bounded: isBounded,
     handle: draggableHandle,
     cancel: draggableCancel,
-    threshold: dragThreshold
+    threshold: dragThreshold,
+    allowMobileScroll: dragAllowMobileScroll
   } = dragConfig;
   const {
     enabled: isResizable,
@@ -669,9 +838,11 @@ function GridLayout(props) {
   const {
     enabled: isDroppable,
     defaultItem: defaultDropItem,
-    onDragOver: dropConfigOnDragOver
+    onDragOver: dropConfigOnDragOver,
+    touchEnabled = true,
+    touchDragSource = "[data-rgl-draggable]"
   } = dropConfig;
-  const compactor = compactorProp ?? chunk55DQUWLA_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunkQAIA5KAO_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -695,6 +866,8 @@ function GridLayout(props) {
     null
   );
   const [droppingPosition, setDroppingPosition] = React2.useState();
+  const droppingPositionRef = React2.useRef(void 0);
+  droppingPositionRef.current = droppingPosition;
   const oldDragItemRef = React2.useRef(null);
   const oldResizeItemRef = React2.useRef(null);
   const oldLayoutRef = React2.useRef(null);
@@ -703,6 +876,15 @@ function GridLayout(props) {
   const prevPropsLayoutRef = React2.useRef(propsLayout);
   const prevChildrenRef = React2.useRef(children);
   const prevCompactTypeRef = React2.useRef(compactType);
+  const gridContainerRef = React2.useRef(null);
+  const touchDragActiveRef = React2.useRef(false);
+  const activeTouchIdRef = React2.useRef(null);
+  const droppingDOMNodeRef = React2.useRef(null);
+  droppingDOMNodeRef.current = droppingDOMNode;
+  const onDropPropRef = React2.useRef(onDropProp);
+  React2.useLayoutEffect(() => {
+    onDropPropRef.current = onDropProp;
+  });
   const layoutRef = React2.useRef(layout);
   layoutRef.current = layout;
   React2.useEffect(() => {
@@ -743,22 +925,22 @@ function GridLayout(props) {
     layout
   ]);
   React2.useEffect(() => {
-    if (!activeDrag && !fastEquals.deepEqual(layout, prevLayoutRef.current)) {
+    if (!activeDrag && !droppingDOMNode && !fastEquals.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 = React2.useMemo(() => {
     if (!autoSize) return void 0;
-    const nbRow = chunkA5WIFECI_js.bottom(layout);
+    const nbRow = chunkVJJIA3HC_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 currentLayout = layoutRef.current;
-      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
+      const l = chunkVJJIA3HC_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -767,7 +949,7 @@ function GridLayout(props) {
         y: l.y,
         i
       };
-      oldDragItemRef.current = chunkA5WIFECI_js.cloneLayoutItem(l);
+      oldDragItemRef.current = chunkVJJIA3HC_js.cloneLayoutItem(l);
       oldLayoutRef.current = currentLayout;
       setActiveDrag(placeholder);
       onDragStartProp(currentLayout, l, l, null, data.e, data.node);
@@ -778,7 +960,7 @@ function GridLayout(props) {
     (i, x, y, data) => {
       const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
+      const l = chunkVJJIA3HC_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -787,7 +969,7 @@ function GridLayout(props) {
         y: l.y,
         i
       };
-      const newLayout = chunkA5WIFECI_js.moveElement(
+      const newLayout = chunkVJJIA3HC_js.moveElement(
         currentLayout,
         l,
         x,
@@ -806,12 +988,12 @@ function GridLayout(props) {
   );
   const onDragStop = React2.useCallback(
     (i, x, y, data) => {
-      if (!activeDrag) return;
+      if (!oldDragItemRef.current) return;
       const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
+      const l = chunkVJJIA3HC_js.getLayoutItem(currentLayout, i);
       if (!l) return;
-      const newLayout = chunkA5WIFECI_js.moveElement(
+      const newLayout = chunkVJJIA3HC_js.moveElement(
         currentLayout,
         l,
         x,
@@ -834,7 +1016,6 @@ function GridLayout(props) {
       }
     },
     [
-      activeDrag,
       preventCollision,
       compactType,
       cols,
@@ -847,9 +1028,9 @@ function GridLayout(props) {
   const onResizeStart = React2.useCallback(
     (i, _w, _h, data) => {
       const currentLayout = layoutRef.current;
-      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
+      const l = chunkVJJIA3HC_js.getLayoutItem(currentLayout, i);
       if (!l) return;
-      oldResizeItemRef.current = chunkA5WIFECI_js.cloneLayoutItem(l);
+      oldResizeItemRef.current = chunkVJJIA3HC_js.cloneLayoutItem(l);
       oldLayoutRef.current = currentLayout;
       setResizing(true);
       onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
@@ -864,7 +1045,7 @@ function GridLayout(props) {
       let shouldMoveItem = false;
       let newX;
       let newY;
-      const [newLayout, l] = chunkA5WIFECI_js.withLayoutItem(currentLayout, i, (item) => {
+      const [newLayout, l] = chunkVJJIA3HC_js.withLayoutItem(currentLayout, i, (item) => {
         newX = item.x;
         newY = item.y;
         if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
@@ -881,7 +1062,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = chunkA5WIFECI_js.getAllCollisions(currentLayout, {
+          const collisions = chunkVJJIA3HC_js.getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -898,12 +1079,15 @@ 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;
       let finalLayout = newLayout;
       if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
-        finalLayout = chunkA5WIFECI_js.moveElement(
+        finalLayout = chunkVJJIA3HC_js.moveElement(
           newLayout,
           l,
           newX,
@@ -931,7 +1115,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]
@@ -940,7 +1131,7 @@ function GridLayout(props) {
     (i, _w, _h, data) => {
       const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
-      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
+      const l = chunkVJJIA3HC_js.getLayoutItem(currentLayout, i);
       const finalLayout = compactor.compact(currentLayout, cols);
       onResizeStopProp(
         finalLayout,
@@ -962,6 +1153,73 @@ function GridLayout(props) {
     },
     [cols, compactor, onResizeStopProp, onLayoutChange]
   );
+  const placeDroppingItem = React2.useCallback(
+    (itemToPlace, newDroppingPosition, calculatedXY, hasPlaceholder) => {
+      if (!hasPlaceholder) {
+        setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.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 = React2.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 = React2.useCallback(() => {
     const currentLayout = layoutRef.current;
     const hasDroppingItem = currentLayout.some((l) => l.i === droppingItem.i);
@@ -1002,74 +1260,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 = chunkA5WIFECI_js.calcGridColWidth(positionParams);
-      const itemPixelWidth = chunkA5WIFECI_js.calcGridItemWHPx(
-        finalDroppingItem.w,
-        actualColWidth,
-        margin[0]
-      );
-      const itemPixelHeight = chunkA5WIFECI_js.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 = chunkA5WIFECI_js.calcXY(
-          positionParams,
-          clampedGridY,
-          clampedGridX,
-          finalDroppingItem.w,
-          finalDroppingItem.h
-        );
-        setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.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,
@@ -1098,22 +1318,110 @@ function GridLayout(props) {
     e.stopPropagation();
     dragEnterCounterRef.current++;
   }, []);
+  const commitDrop = React2.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 = React2.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]
   );
+  React2.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 = React2.useCallback(
     (child, isDroppingItem) => {
       if (!child || !child.key) return null;
-      const l = chunkA5WIFECI_js.getLayoutItem(layout, String(child.key));
+      const l = chunkVJJIA3HC_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;
@@ -1140,6 +1448,7 @@ function GridLayout(props) {
           isDraggable: draggable,
           isResizable: resizable,
           isBounded: bounded,
+          allowMobileScroll: dragAllowMobileScroll,
           useCSSTransforms: useCSSTransforms && mounted,
           usePercentages: !mounted,
           transformScale,
@@ -1224,6 +1533,17 @@ function GridLayout(props) {
       }
     );
   };
+  const setGridRef = React2.useCallback(
+    (node) => {
+      gridContainerRef.current = node;
+      if (typeof innerRef === "function") {
+        innerRef(node);
+      } else if (innerRef && "current" in innerRef) {
+        innerRef.current = node;
+      }
+    },
+    [innerRef]
+  );
   const mergedClassName = clsx__default.default(layoutClassName, className);
   const mergedStyle = {
     height: containerHeight,
@@ -1232,7 +1552,7 @@ function GridLayout(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: innerRef,
+      ref: setGridRef,
       className: mergedClassName,
       style: mergedStyle,
       onDrop: isDroppable ? handleDrop : void 0,
@@ -1266,20 +1586,33 @@ var DEFAULT_COLS = {
 };
 var noop2 = () => {
 };
-function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor) {
+function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor, reSeedFromDataGrid = false) {
   const layout = [];
   React2__default.default.Children.forEach(children, (child) => {
     if (!React2__default.default.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,
@@ -1301,17 +1634,17 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor
         layout.push({
           i: key,
           x: 0,
-          y: chunkA5WIFECI_js.bottom(layout),
+          y: chunkVJJIA3HC_js.bottom(layout),
           w: 1,
           h: 1
         });
       }
     }
   });
-  const corrected = chunkA5WIFECI_js.correctBounds(layout, { cols });
+  const corrected = chunkVJJIA3HC_js.correctBounds(layout, { cols });
   return compactor.compact(corrected, cols);
 }
-function ResponsiveGridLayout(props) {
+function ResponsiveGridLayoutInner(props) {
   const {
     children,
     width,
@@ -1329,17 +1662,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunk55DQUWLA_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunkQAIA5KAO_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunkQAIA5KAO_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunk55DQUWLA_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunkQAIA5KAO_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
+    return chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1364,7 +1697,7 @@ function ResponsiveGridLayout(props) {
   }, [layouts]);
   const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
+      return chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
@@ -1386,7 +1719,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = compactor.compact(chunkA5WIFECI_js.cloneLayout(effectiveLayout), cols);
+      const newLayout = compactor.compact(chunkVJJIA3HC_js.cloneLayout(effectiveLayout), cols);
       const newLayouts = {
         ...layoutsRef.current,
         [breakpoint]: newLayout
@@ -1415,15 +1748,15 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunk55DQUWLA_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+      const newBreakpoint = propBreakpoint ?? chunkQAIA5KAO_js.getBreakpointFromWidth(breakpoints, width);
+      const newCols = chunkQAIA5KAO_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
       const lastBreakpoint = breakpoint;
       if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
         const newLayouts = { ...layoutsRef.current };
         if (!newLayouts[lastBreakpoint]) {
-          newLayouts[lastBreakpoint] = chunkA5WIFECI_js.cloneLayout(layout);
+          newLayouts[lastBreakpoint] = chunkVJJIA3HC_js.cloneLayout(layout);
         }
-        let newLayout = chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
+        let newLayout = chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
           newLayouts,
           breakpoints,
           newBreakpoint,
@@ -1431,11 +1764,13 @@ function ResponsiveGridLayout(props) {
           newCols,
           compactor
         );
+        const layoutWasGenerated = !newLayouts[newBreakpoint];
         newLayout = synchronizeLayoutWithChildren2(
           newLayout,
           children,
           newCols,
-          compactor
+          compactor,
+          layoutWasGenerated
         );
         newLayouts[newBreakpoint] = newLayout;
         setBreakpoint(newBreakpoint);
@@ -1446,11 +1781,11 @@ function ResponsiveGridLayout(props) {
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunk55DQUWLA_js.getIndentationValue(
+      const currentMargin2 = chunkQAIA5KAO_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunk55DQUWLA_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunkQAIA5KAO_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1493,14 +1828,14 @@ function ResponsiveGridLayout(props) {
     [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunk55DQUWLA_js.getIndentationValue(
+    return chunkQAIA5KAO_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunk55DQUWLA_js.getIndentationValue(
+    return chunkQAIA5KAO_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1528,7 +1863,13 @@ function ResponsiveGridLayout(props) {
     }
   );
 }
+var ResponsiveGridLayoutWithRef = React2__default.default.forwardRef(function ResponsiveGridLayoutForwardRef(props, ref) {
+  const { innerRef, ...rest } = props;
+  const effectiveInnerRef = innerRef ?? ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridLayoutInner, { ...rest, innerRef: effectiveInnerRef });
+});
+ResponsiveGridLayoutWithRef.displayName = "ResponsiveGridLayout";
 
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
-exports.ResponsiveGridLayout = ResponsiveGridLayout;
+exports.ResponsiveGridLayoutWithRef = ResponsiveGridLayoutWithRef;