react-grid-layout 2.2.1 → 2.2.3

package/dist/{chunk-3CEWSUXL.js → chunk-BPZQUJ7Y.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk2DDROKB2_js = require('./chunk-2DDROKB2.js');
-var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
+var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
+var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
 var reactResizable = require('react-resizable');
@@ -48,7 +48,7 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
-    constraints = chunk2DDROKB2_js.defaultConstraints,
+    constraints = chunk55DQUWLA_js.defaultConstraints,
     layoutItem,
     layout = [],
     onDragStart: onDragStartProp,
@@ -73,6 +73,8 @@ function GridItem(props) {
   );
   const layoutRef = React2.useRef(layout);
   layoutRef.current = layout;
+  const onDragStartRef = React2.useRef(null);
+  const onDragRef = React2.useRef(null);
   const dragPendingRef = React2.useRef(false);
   const initialDragClientRef = React2.useRef({ x: 0, y: 0 });
   const thresholdExceededRef = React2.useRef(false);
@@ -129,14 +131,14 @@ function GridItem(props) {
         return positionStrategy.calcStyle(pos2);
       }
       if (useCSSTransforms) {
-        return chunk2DDROKB2_js.setTransform(pos2);
+        return chunk55DQUWLA_js.setTransform(pos2);
       }
-      const styleObj = chunk2DDROKB2_js.setTopLeft(pos2);
+      const styleObj = chunk55DQUWLA_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunk2DDROKB2_js.perc(pos2.left / containerWidth),
-          width: chunk2DDROKB2_js.perc(pos2.width / containerWidth)
+          left: chunk55DQUWLA_js.perc(pos2.left / containerWidth),
+          width: chunk55DQUWLA_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
@@ -182,12 +184,12 @@ function GridItem(props) {
         return;
       }
       setDragging(true);
-      const rawPos = chunkBJFPTW5Q_js.calcXYRaw(
+      const rawPos = chunkA5WIFECI_js.calcXYRaw(
         positionParams,
         newPosition.top,
         newPosition.left
       );
-      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -226,12 +228,12 @@ function GridItem(props) {
         thresholdExceededRef.current = true;
         dragPendingRef.current = false;
         if (onDragStartProp) {
-          const rawPos2 = chunkBJFPTW5Q_js.calcXYRaw(
+          const rawPos2 = chunkA5WIFECI_js.calcXYRaw(
             positionParams,
             dragPositionRef.current.top,
             dragPositionRef.current.left
           );
-          const { x: startX, y: startY } = chunk2DDROKB2_js.applyPositionConstraints(
+          const { x: startX, y: startY } = chunk55DQUWLA_js.applyPositionConstraints(
             constraints,
             effectiveLayoutItem,
             rawPos2.x,
@@ -250,17 +252,17 @@ function GridItem(props) {
       if (isBounded) {
         const { offsetParent } = node;
         if (offsetParent) {
-          const bottomBoundary = offsetParent.clientHeight - chunkBJFPTW5Q_js.calcGridItemWHPx(h, rowHeight, margin[1]);
-          top = chunkBJFPTW5Q_js.clamp(top, 0, bottomBoundary);
-          const colWidth = chunkBJFPTW5Q_js.calcGridColWidth(positionParams);
-          const rightBoundary = containerWidth - chunkBJFPTW5Q_js.calcGridItemWHPx(w, colWidth, margin[0]);
-          left = chunkBJFPTW5Q_js.clamp(left, 0, rightBoundary);
+          const 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 newPosition = { top, left };
       dragPositionRef.current = newPosition;
-      const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
+      const rawPos = chunkA5WIFECI_js.calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -307,8 +309,8 @@ function GridItem(props) {
       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 } = chunk2DDROKB2_js.applyPositionConstraints(
+      const rawPos = chunkA5WIFECI_js.calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -331,13 +333,15 @@ function GridItem(props) {
       i
     ]
   );
+  onDragStartRef.current = onDragStart;
+  onDragRef.current = onDrag;
   const onResizeHandler = React2.useCallback(
     (e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
       const handler = handlerName === "onResizeStart" ? onResizeStartProp : handlerName === "onResize" ? onResizeProp : onResizeStopProp;
       if (!handler) return;
       let updatedSize;
       if (node) {
-        updatedSize = chunk2DDROKB2_js.resizeItemInDirection(
+        updatedSize = chunk55DQUWLA_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -351,12 +355,12 @@ function GridItem(props) {
         };
       }
       resizePositionRef.current = updatedSize;
-      const rawSize = chunkBJFPTW5Q_js.calcWHRaw(
+      const rawSize = chunkA5WIFECI_js.calcWHRaw(
         positionParams,
         updatedSize.width,
         updatedSize.height
       );
-      const { w: newW, h: newH } = chunk2DDROKB2_js.applySizeConstraints(
+      const { w: newW, h: newH } = chunk55DQUWLA_js.applySizeConstraints(
         constraints,
         effectiveLayoutItem,
         rawSize.w,
@@ -386,7 +390,7 @@ function GridItem(props) {
   const handleResizeStart = React2.useCallback(
     (e, data) => {
       setResizing(true);
-      const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -397,7 +401,7 @@ function GridItem(props) {
   );
   const handleResize = React2.useCallback(
     (e, data) => {
-      const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -410,7 +414,7 @@ function GridItem(props) {
     (e, data) => {
       setResizing(false);
       resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
-      const pos2 = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, x, y, w, h);
+      const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
       const typedData = {
         ...data,
         handle: data.handle
@@ -438,7 +442,10 @@ function GridItem(props) {
         x: droppingPosition.left,
         y: droppingPosition.top
       };
-      onDragStart(droppingPosition.e, fakeData);
+      onDragStartRef.current?.(
+        droppingPosition.e,
+        fakeData
+      );
     } else if (shouldDrag) {
       const deltaX = droppingPosition.left - dragPositionRef.current.left;
       const deltaY = droppingPosition.top - dragPositionRef.current.top;
@@ -451,11 +458,14 @@ function GridItem(props) {
         x: droppingPosition.left,
         y: droppingPosition.top
       };
-      onDrag(droppingPosition.e, fakeData);
+      onDragRef.current?.(
+        droppingPosition.e,
+        fakeData
+      );
     }
     prevDroppingPositionRef.current = droppingPosition;
-  }, [droppingPosition, dragging, onDragStart, onDrag]);
-  const pos = chunkBJFPTW5Q_js.calcGridItemPosition(
+  }, [droppingPosition, dragging, i]);
+  const pos = chunkA5WIFECI_js.calcGridItemPosition(
     positionParams,
     x,
     y,
@@ -465,12 +475,15 @@ function GridItem(props) {
     resizing ? resizePositionRef.current : null
   );
   const child = React2__default.default.Children.only(children);
-  const minGridUnit = chunkBJFPTW5Q_js.calcGridItemPosition(positionParams, 0, 0, 1, 1);
+  const colWidth = chunkA5WIFECI_js.calcGridColWidth(positionParams);
   const minConstraints = [
-    minGridUnit.width,
-    minGridUnit.height
+    chunkA5WIFECI_js.calcGridItemWHPx(minW, colWidth, margin[0]),
+    chunkA5WIFECI_js.calcGridItemWHPx(minH, rowHeight, margin[1])
+  ];
+  const maxConstraints = [
+    chunkA5WIFECI_js.calcGridItemWHPx(maxW, colWidth, margin[0]),
+    chunkA5WIFECI_js.calcGridItemWHPx(maxH, rowHeight, margin[1])
   ];
-  const maxConstraints = [Infinity, Infinity];
   const childProps = child.props;
   const childClassName = childProps["className"];
   const childStyle = childProps["style"];
@@ -553,7 +566,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor)
     childKeys.add(key);
     const existingItem = initialLayout.find((l) => l.i === key);
     if (existingItem) {
-      layout.push(chunkBJFPTW5Q_js.cloneLayoutItem(existingItem));
+      layout.push(chunkA5WIFECI_js.cloneLayoutItem(existingItem));
     } else {
       const childProps = child.props;
       const dataGrid = childProps["data-grid"];
@@ -578,14 +591,14 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor)
         layout.push({
           i: key,
           x: 0,
-          y: chunkBJFPTW5Q_js.bottom(layout),
+          y: chunkA5WIFECI_js.bottom(layout),
           w: 1,
           h: 1
         });
       }
     }
   });
-  const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
+  const corrected = chunkA5WIFECI_js.correctBounds(layout, { cols });
   return compactor.compact(corrected, cols);
 }
 function GridLayout(props) {
@@ -598,9 +611,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunk2DDROKB2_js.defaultPositionStrategy,
+    positionStrategy = chunk55DQUWLA_js.defaultPositionStrategy,
     compactor: compactorProp,
-    constraints = chunk2DDROKB2_js.defaultConstraints,
+    constraints = chunk55DQUWLA_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -621,19 +634,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunk2DDROKB2_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunk55DQUWLA_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunk2DDROKB2_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunk55DQUWLA_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunk2DDROKB2_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunk55DQUWLA_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunk2DDROKB2_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunk55DQUWLA_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -654,7 +667,7 @@ function GridLayout(props) {
     defaultItem: defaultDropItem,
     onDragOver: dropConfigOnDragOver
   } = dropConfig;
-  const compactor = compactorProp ?? chunk2DDROKB2_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunk55DQUWLA_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -708,7 +721,9 @@ function GridLayout(props) {
         cols,
         compactor
       );
-      setLayout(newLayout);
+      if (!fastEquals.deepEqual(newLayout, layout)) {
+        setLayout(newLayout);
+      }
     }
     prevPropsLayoutRef.current = propsLayout;
     prevChildrenRef.current = children;
@@ -726,19 +741,20 @@ function GridLayout(props) {
   React2.useEffect(() => {
     if (!activeDrag && !fastEquals.deepEqual(layout, prevLayoutRef.current)) {
       prevLayoutRef.current = layout;
-      onLayoutChange(layout);
+      const publicLayout = layout.filter((l) => l.i !== droppingItem.i);
+      onLayoutChange(publicLayout);
     }
-  }, [layout, activeDrag, onLayoutChange]);
+  }, [layout, activeDrag, onLayoutChange, droppingItem.i]);
   const containerHeight = React2.useMemo(() => {
     if (!autoSize) return void 0;
-    const nbRow = chunkBJFPTW5Q_js.bottom(layout);
+    const nbRow = chunkA5WIFECI_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 = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -747,7 +763,7 @@ function GridLayout(props) {
         y: l.y,
         i
       };
-      oldDragItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
+      oldDragItemRef.current = chunkA5WIFECI_js.cloneLayoutItem(l);
       oldLayoutRef.current = currentLayout;
       setActiveDrag(placeholder);
       onDragStartProp(currentLayout, l, l, null, data.e, data.node);
@@ -758,7 +774,7 @@ function GridLayout(props) {
     (i, x, y, data) => {
       const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -767,7 +783,7 @@ function GridLayout(props) {
         y: l.y,
         i
       };
-      const newLayout = chunkBJFPTW5Q_js.moveElement(
+      const newLayout = chunkA5WIFECI_js.moveElement(
         currentLayout,
         l,
         x,
@@ -789,9 +805,9 @@ function GridLayout(props) {
       if (!activeDrag) return;
       const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
       if (!l) return;
-      const newLayout = chunkBJFPTW5Q_js.moveElement(
+      const newLayout = chunkA5WIFECI_js.moveElement(
         currentLayout,
         l,
         x,
@@ -827,9 +843,9 @@ function GridLayout(props) {
   const onResizeStart = React2.useCallback(
     (i, _w, _h, data) => {
       const currentLayout = layoutRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
       if (!l) return;
-      oldResizeItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
+      oldResizeItemRef.current = chunkA5WIFECI_js.cloneLayoutItem(l);
       oldLayoutRef.current = currentLayout;
       setResizing(true);
       onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
@@ -844,7 +860,7 @@ function GridLayout(props) {
       let shouldMoveItem = false;
       let newX;
       let newY;
-      const [newLayout, l] = chunkBJFPTW5Q_js.withLayoutItem(currentLayout, i, (item) => {
+      const [newLayout, l] = chunkA5WIFECI_js.withLayoutItem(currentLayout, i, (item) => {
         newX = item.x;
         newY = item.y;
         if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
@@ -861,7 +877,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = chunkBJFPTW5Q_js.getAllCollisions(currentLayout, {
+          const collisions = chunkA5WIFECI_js.getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -883,7 +899,7 @@ function GridLayout(props) {
       if (!l) return;
       let finalLayout = newLayout;
       if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
-        finalLayout = chunkBJFPTW5Q_js.moveElement(
+        finalLayout = chunkA5WIFECI_js.moveElement(
           newLayout,
           l,
           newX,
@@ -920,7 +936,7 @@ function GridLayout(props) {
     (i, _w, _h, data) => {
       const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
       const finalLayout = compactor.compact(currentLayout, cols);
       onResizeStopProp(
         finalLayout,
@@ -991,13 +1007,13 @@ function GridLayout(props) {
         containerWidth: width,
         containerPadding: effectiveContainerPadding
       };
-      const actualColWidth = chunkBJFPTW5Q_js.calcGridColWidth(positionParams);
-      const itemPixelWidth = chunkBJFPTW5Q_js.calcGridItemWHPx(
+      const actualColWidth = chunkA5WIFECI_js.calcGridColWidth(positionParams);
+      const itemPixelWidth = chunkA5WIFECI_js.calcGridItemWHPx(
         finalDroppingItem.w,
         actualColWidth,
         margin[0]
       );
-      const itemPixelHeight = chunkBJFPTW5Q_js.calcGridItemWHPx(
+      const itemPixelHeight = chunkA5WIFECI_js.calcGridItemWHPx(
         finalDroppingItem.h,
         rowHeight,
         margin[1]
@@ -1014,7 +1030,7 @@ function GridLayout(props) {
         e: e.nativeEvent
       };
       if (!droppingDOMNode) {
-        const calculatedPosition = chunkBJFPTW5Q_js.calcXY(
+        const calculatedPosition = chunkA5WIFECI_js.calcXY(
           positionParams,
           clampedGridY,
           clampedGridX,
@@ -1023,8 +1039,11 @@ function GridLayout(props) {
         );
         setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
         setDroppingPosition(newDroppingPosition);
+        const baseLayout = layoutRef.current.filter(
+          (l) => l.i !== finalDroppingItem.i
+        );
         setLayout([
-          ...layoutRef.current,
+          ...baseLayout,
           {
             ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -1090,7 +1109,7 @@ function GridLayout(props) {
   const processGridItem = React2.useCallback(
     (child, isDroppingItem) => {
       if (!child || !child.key) return null;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, String(child.key));
+      const l = chunkA5WIFECI_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;
@@ -1278,14 +1297,14 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor
         layout.push({
           i: key,
           x: 0,
-          y: chunkBJFPTW5Q_js.bottom(layout),
+          y: chunkA5WIFECI_js.bottom(layout),
           w: 1,
           h: 1
         });
       }
     }
   });
-  const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
+  const corrected = chunkA5WIFECI_js.correctBounds(layout, { cols });
   return compactor.compact(corrected, cols);
 }
 function ResponsiveGridLayout(props) {
@@ -1306,17 +1325,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunk2DDROKB2_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunk55DQUWLA_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunk2DDROKB2_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunk2DDROKB2_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunk55DQUWLA_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
+    return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1341,7 +1360,7 @@ function ResponsiveGridLayout(props) {
   }, [layouts]);
   const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      return chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
+      return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
@@ -1363,7 +1382,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = compactor.compact(chunkBJFPTW5Q_js.cloneLayout(effectiveLayout), cols);
+      const newLayout = compactor.compact(chunkA5WIFECI_js.cloneLayout(effectiveLayout), cols);
       const newLayouts = {
         ...layoutsRef.current,
         [breakpoint]: newLayout
@@ -1392,15 +1411,15 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunk2DDROKB2_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunk2DDROKB2_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+      const newBreakpoint = propBreakpoint ?? chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
+      const newCols = chunk55DQUWLA_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);
+          newLayouts[lastBreakpoint] = chunkA5WIFECI_js.cloneLayout(layout);
         }
-        let newLayout = chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
+        let newLayout = chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
           newLayouts,
           breakpoints,
           newBreakpoint,
@@ -1423,11 +1442,11 @@ function ResponsiveGridLayout(props) {
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunk2DDROKB2_js.getIndentationValue(
+      const currentMargin2 = chunk55DQUWLA_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunk2DDROKB2_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunk55DQUWLA_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1470,14 +1489,14 @@ function ResponsiveGridLayout(props) {
     [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunk2DDROKB2_js.getIndentationValue(
+    return chunk55DQUWLA_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunk2DDROKB2_js.getIndentationValue(
+    return chunk55DQUWLA_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1509,5 +1528,3 @@ function ResponsiveGridLayout(props) {
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
-//# sourceMappingURL=chunk-3CEWSUXL.js.map
-//# sourceMappingURL=chunk-3CEWSUXL.js.map

package/dist/{chunk-XYPIYYYQ.mjs → chunk-KDANGDDL.mjs}

@@ -1,4 +1,4 @@
-import { getStatics, collides, getFirstCollision, bottom, sortLayoutItemsByRowCol, cloneLayoutItem, sortLayoutItemsByColRow, cloneLayout, correctBounds } from './chunk-AWM66AWF.mjs';
+import { getStatics, collides, getFirstCollision, bottom, sortLayoutItemsByRowCol, cloneLayoutItem, sortLayoutItemsByColRow, cloneLayout, correctBounds } from './chunk-76RTO6EO.mjs';
 
 // src/core/constraints.ts
 function clamp(value, min, max) {
@@ -564,5 +564,3 @@ function getIndentationValue(value, breakpoint) {
 }
 
 export { absoluteStrategy, applyPositionConstraints, applySizeConstraints, aspectRatio, boundedX, boundedY, compactItemHorizontal, compactItemVertical, containerBounds, createScaledStrategy, defaultConstraints, defaultDragConfig, defaultDropConfig, defaultGridConfig, defaultPositionStrategy, defaultResizeConfig, findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getIndentationValue, gridBounds, horizontalCompactor, horizontalOverlapCompactor, maxSize, minMaxSize, minSize, noCompactor, noOverlapCompactor, perc, resizeItemInDirection, resolveCompactionCollision, setTopLeft, setTransform, snapToGrid, sortBreakpoints, transformStrategy, verticalCompactor, verticalOverlapCompactor };
-//# sourceMappingURL=chunk-XYPIYYYQ.mjs.map
-//# sourceMappingURL=chunk-XYPIYYYQ.mjs.map

package/dist/chunk-O3KX3VYW.mjs

@@ -0,0 +1 @@
+

package/dist/{chunk-YFVX5RDK.mjs → chunk-PZLKKWSX.mjs}

@@ -1,5 +1,5 @@
-import { verticalCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-XYPIYYYQ.mjs';
-import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-AWM66AWF.mjs';
+import { verticalCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-KDANGDDL.mjs';
+import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-76RTO6EO.mjs';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { deepEqual } from 'fast-equals';
 
@@ -24,14 +24,30 @@ function useContainerWidth(options = {}) {
     if (!node) return;
     measureWidth();
     if (typeof ResizeObserver !== "undefined") {
+      let rafId = null;
       observerRef.current = new ResizeObserver((entries) => {
         const entry = entries[0];
         if (entry) {
           const newWidth = entry.contentRect.width;
-          setWidth(newWidth);
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+          }
+          rafId = requestAnimationFrame(() => {
+            setWidth(newWidth);
+            rafId = null;
+          });
         }
       });
       observerRef.current.observe(node);
+      return () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+      };
     }
     return () => {
       if (observerRef.current) {
@@ -421,5 +437,3 @@ function useResponsiveLayout(options) {
 }
 
 export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout };
-//# sourceMappingURL=chunk-YFVX5RDK.mjs.map
-//# sourceMappingURL=chunk-YFVX5RDK.mjs.map