react-grid-layout 2.1.1 → 2.2.1

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
+var chunk2DDROKB2_js = require('./chunk-2DDROKB2.js');
 var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
@@ -30,6 +30,8 @@ function GridItem(props) {
     useCSSTransforms = true,
     usePercentages = false,
     transformScale = 1,
+    positionStrategy,
+    dragThreshold = 0,
     droppingPosition,
     className = "",
     style,
@@ -46,7 +48,7 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
-    constraints = chunkWWS3M5Y3_js.defaultConstraints,
+    constraints = chunk2DDROKB2_js.defaultConstraints,
     layoutItem,
     layout = [],
     onDragStart: onDragStartProp,
@@ -69,6 +71,11 @@ function GridItem(props) {
   const prevDroppingPositionRef = React2.useRef(
     void 0
   );
+  const layoutRef = React2.useRef(layout);
+  layoutRef.current = layout;
+  const dragPendingRef = React2.useRef(false);
+  const initialDragClientRef = React2.useRef({ x: 0, y: 0 });
+  const thresholdExceededRef = React2.useRef(false);
   const positionParams = React2.useMemo(
     () => ({
       cols,
@@ -89,9 +96,18 @@ function GridItem(props) {
       // Auto-height grids don't have a fixed container height
       rowHeight,
       margin,
-      layout
+      // Use empty layout here - the actual layout will be accessed via layoutRef when needed
+      // This prevents the context from changing when layout changes, avoiding callback recreation
+      layout: []
+    }),
+    [cols, maxRows, containerWidth, rowHeight, margin]
+  );
+  const getConstraintContext = React2.useCallback(
+    () => ({
+      ...constraintContext,
+      layout: layoutRef.current
     }),
-    [cols, maxRows, containerWidth, rowHeight, margin, layout]
+    [constraintContext]
   );
   const effectiveLayoutItem = React2.useMemo(
     () => layoutItem ?? {
@@ -109,20 +125,23 @@ function GridItem(props) {
   );
   const createStyle = React2.useCallback(
     (pos2) => {
+      if (positionStrategy?.calcStyle) {
+        return positionStrategy.calcStyle(pos2);
+      }
       if (useCSSTransforms) {
-        return chunkWWS3M5Y3_js.setTransform(pos2);
+        return chunk2DDROKB2_js.setTransform(pos2);
       }
-      const styleObj = chunkWWS3M5Y3_js.setTopLeft(pos2);
+      const styleObj = chunk2DDROKB2_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunkWWS3M5Y3_js.perc(pos2.left / containerWidth),
-          width: chunkWWS3M5Y3_js.perc(pos2.width / containerWidth)
+          left: chunk2DDROKB2_js.perc(pos2.left / containerWidth),
+          width: chunk2DDROKB2_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
     },
-    [useCSSTransforms, usePercentages, containerWidth]
+    [positionStrategy, useCSSTransforms, usePercentages, containerWidth]
   );
   const onDragStart = React2.useCallback(
     (e, { node }) => {
@@ -135,23 +154,45 @@ function GridItem(props) {
       const pLeft = parentRect.left / transformScale;
       const cTop = clientRect.top / transformScale;
       const pTop = parentRect.top / transformScale;
-      const newPosition = {
-        left: cLeft - pLeft + offsetParent.scrollLeft,
-        top: cTop - pTop + offsetParent.scrollTop
-      };
+      let newPosition;
+      if (positionStrategy?.calcDragPosition) {
+        const mouseEvent = e;
+        newPosition = positionStrategy.calcDragPosition(
+          mouseEvent.clientX,
+          mouseEvent.clientY,
+          mouseEvent.clientX - clientRect.left,
+          mouseEvent.clientY - clientRect.top
+        );
+      } else {
+        newPosition = {
+          left: cLeft - pLeft + offsetParent.scrollLeft,
+          top: cTop - pTop + offsetParent.scrollTop
+        };
+      }
       dragPositionRef.current = newPosition;
+      if (dragThreshold > 0) {
+        const mouseEvent = e;
+        initialDragClientRef.current = {
+          x: mouseEvent.clientX,
+          y: mouseEvent.clientY
+        };
+        dragPendingRef.current = true;
+        thresholdExceededRef.current = false;
+        setDragging(true);
+        return;
+      }
       setDragging(true);
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(
         positionParams,
         newPosition.top,
         newPosition.left
       );
-      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragStartProp(i, newX, newY, {
         e,
@@ -163,15 +204,47 @@ function GridItem(props) {
       onDragStartProp,
       transformScale,
       positionParams,
+      positionStrategy,
+      dragThreshold,
       constraints,
       effectiveLayoutItem,
-      constraintContext,
+      getConstraintContext,
       i
     ]
   );
   const onDrag = React2.useCallback(
     (e, { node, deltaX, deltaY }) => {
       if (!onDragProp || !dragging) return;
+      const mouseEvent = e;
+      if (dragPendingRef.current && !thresholdExceededRef.current) {
+        const dx = mouseEvent.clientX - initialDragClientRef.current.x;
+        const dy = mouseEvent.clientY - initialDragClientRef.current.y;
+        const distance = Math.hypot(dx, dy);
+        if (distance < dragThreshold) {
+          return;
+        }
+        thresholdExceededRef.current = true;
+        dragPendingRef.current = false;
+        if (onDragStartProp) {
+          const rawPos2 = chunkBJFPTW5Q_js.calcXYRaw(
+            positionParams,
+            dragPositionRef.current.top,
+            dragPositionRef.current.left
+          );
+          const { x: startX, y: startY } = chunk2DDROKB2_js.applyPositionConstraints(
+            constraints,
+            effectiveLayoutItem,
+            rawPos2.x,
+            rawPos2.y,
+            getConstraintContext()
+          );
+          onDragStartProp(i, startX, startY, {
+            e,
+            node,
+            newPosition: dragPositionRef.current
+          });
+        }
+      }
       let top = dragPositionRef.current.top + deltaY;
       let left = dragPositionRef.current.left + deltaX;
       if (isBounded) {
@@ -187,12 +260,12 @@ function GridItem(props) {
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragProp(i, newX, newY, {
         e,
@@ -202,7 +275,9 @@ function GridItem(props) {
     },
     [
       onDragProp,
+      onDragStartProp,
       dragging,
+      dragThreshold,
       isBounded,
       h,
       rowHeight,
@@ -213,23 +288,32 @@ function GridItem(props) {
       i,
       constraints,
       effectiveLayoutItem,
-      constraintContext
+      getConstraintContext
     ]
   );
   const onDragStop = React2.useCallback(
     (e, { node }) => {
       if (!onDragStopProp || !dragging) return;
+      const wasPending = dragPendingRef.current;
+      dragPendingRef.current = false;
+      thresholdExceededRef.current = false;
+      initialDragClientRef.current = { x: 0, y: 0 };
+      if (wasPending) {
+        setDragging(false);
+        dragPositionRef.current = { left: 0, top: 0 };
+        return;
+      }
       const { left, top } = dragPositionRef.current;
       const newPosition = { top, left };
       setDragging(false);
       dragPositionRef.current = { left: 0, top: 0 };
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragStopProp(i, newX, newY, {
         e,
@@ -243,7 +327,7 @@ function GridItem(props) {
       positionParams,
       constraints,
       effectiveLayoutItem,
-      constraintContext,
+      getConstraintContext,
       i
     ]
   );
@@ -253,7 +337,7 @@ function GridItem(props) {
       if (!handler) return;
       let updatedSize;
       if (node) {
-        updatedSize = chunkWWS3M5Y3_js.resizeItemInDirection(
+        updatedSize = chunk2DDROKB2_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -272,13 +356,13 @@ function GridItem(props) {
         updatedSize.width,
         updatedSize.height
       );
-      const { w: newW, h: newH } = chunkWWS3M5Y3_js.applySizeConstraints(
+      const { w: newW, h: newH } = chunk2DDROKB2_js.applySizeConstraints(
         constraints,
         effectiveLayoutItem,
         rawSize.w,
         rawSize.h,
         resizeHandle2,
-        constraintContext
+        getConstraintContext()
       );
       handler(i, newW, newH, {
         e: e.nativeEvent,
@@ -293,12 +377,10 @@ function GridItem(props) {
       onResizeStopProp,
       containerWidth,
       positionParams,
-      x,
-      y,
       i,
       constraints,
       effectiveLayoutItem,
-      constraintContext
+      getConstraintContext
     ]
   );
   const handleResizeStart = React2.useCallback(
@@ -462,7 +544,7 @@ function childrenEqual(a, b) {
   }
   return true;
 }
-function synchronizeLayoutWithChildren(initialLayout, children, cols, compactType, allowOverlap) {
+function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor) {
   const layout = [];
   const childKeys = /* @__PURE__ */ new Set();
   React2__default.default.Children.forEach(children, (child) => {
@@ -504,7 +586,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunkWWS3M5Y3_js.compact(corrected, compactType, cols, allowOverlap);
+  return compactor.compact(corrected, cols);
 }
 function GridLayout(props) {
   const {
@@ -516,9 +598,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunkWWS3M5Y3_js.defaultPositionStrategy,
+    positionStrategy = chunk2DDROKB2_js.defaultPositionStrategy,
     compactor: compactorProp,
-    constraints = chunkWWS3M5Y3_js.defaultConstraints,
+    constraints = chunk2DDROKB2_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -539,19 +621,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunkWWS3M5Y3_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunkWWS3M5Y3_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunkWWS3M5Y3_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunkWWS3M5Y3_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -559,15 +641,20 @@ function GridLayout(props) {
     enabled: isDraggable,
     bounded: isBounded,
     handle: draggableHandle,
-    cancel: draggableCancel
+    cancel: draggableCancel,
+    threshold: dragThreshold
   } = dragConfig;
   const {
     enabled: isResizable,
     handles: resizeHandles,
     handleComponent: resizeHandle
   } = resizeConfig;
-  const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
-  const compactor = compactorProp ?? chunkWWS3M5Y3_js.getCompactor("vertical");
+  const {
+    enabled: isDroppable,
+    defaultItem: defaultDropItem,
+    onDragOver: dropConfigOnDragOver
+  } = dropConfig;
+  const compactor = compactorProp ?? chunk2DDROKB2_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -583,13 +670,7 @@ function GridLayout(props) {
   const effectiveContainerPadding = containerPadding ?? margin;
   const [mounted, setMounted] = React2.useState(false);
   const [layout, setLayout] = React2.useState(
-    () => synchronizeLayoutWithChildren(
-      propsLayout,
-      children,
-      cols,
-      compactType,
-      allowOverlap
-    )
+    () => synchronizeLayoutWithChildren(propsLayout, children, cols, compactor)
   );
   const [activeDrag, setActiveDrag] = React2.useState(null);
   const [resizing, setResizing] = React2.useState(false);
@@ -625,8 +706,7 @@ function GridLayout(props) {
         baseLayout,
         children,
         cols,
-        compactType,
-        allowOverlap
+        compactor
       );
       setLayout(newLayout);
     }
@@ -638,7 +718,7 @@ function GridLayout(props) {
     children,
     cols,
     compactType,
-    allowOverlap,
+    compactor,
     activeDrag,
     droppingDOMNode,
     layout
@@ -699,12 +779,10 @@ function GridLayout(props) {
         allowOverlap
       );
       onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
-      setLayout(
-        allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(newLayout, cols));
       setActiveDrag(placeholder);
     },
-    [preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onDragProp]
   );
   const onDragStop = React2.useCallback(
     (i, x, y, data) => {
@@ -724,7 +802,7 @@ function GridLayout(props) {
         cols,
         allowOverlap
       );
-      const finalLayout = allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols);
+      const finalLayout = compactor.compact(newLayout, cols);
       onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
       const oldLayout = oldLayoutRef.current;
       oldDragItemRef.current = null;
@@ -741,6 +819,7 @@ function GridLayout(props) {
       compactType,
       cols,
       allowOverlap,
+      compactor,
       onDragStopProp,
       onLayoutChange
     ]
@@ -832,19 +911,17 @@ function GridLayout(props) {
         data.e,
         data.node
       );
-      setLayout(
-        allowOverlap ? finalLayout : chunkWWS3M5Y3_js.compact(finalLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(finalLayout, cols));
       setActiveDrag(placeholder);
     },
-    [preventCollision, allowOverlap, compactType, cols, onResizeProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onResizeProp]
   );
   const onResizeStop = React2.useCallback(
     (i, _w, _h, data) => {
       const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
       const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
-      const finalLayout = allowOverlap ? currentLayout : chunkWWS3M5Y3_js.compact(currentLayout, compactType, cols);
+      const finalLayout = compactor.compact(currentLayout, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -863,21 +940,26 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [cols, compactor, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = React2.useCallback(() => {
     const currentLayout = layoutRef.current;
-    const newLayout = chunkWWS3M5Y3_js.compact(
+    const hasDroppingItem = currentLayout.some((l) => l.i === droppingItem.i);
+    if (!hasDroppingItem) {
+      setDroppingDOMNode(null);
+      setActiveDrag(null);
+      setDroppingPosition(void 0);
+      return;
+    }
+    const newLayout = compactor.compact(
       currentLayout.filter((l) => l.i !== droppingItem.i),
-      compactType,
-      cols,
-      allowOverlap
+      cols
     );
     setLayout(newLayout);
     setDroppingDOMNode(null);
     setActiveDrag(null);
     setDroppingPosition(void 0);
-  }, [droppingItem.i, compactType, cols, allowOverlap]);
+  }, [droppingItem.i, cols, compactor]);
   const handleDragOver = React2.useCallback(
     (e) => {
       e.preventDefault();
@@ -887,7 +969,7 @@ function GridLayout(props) {
       )) {
         return false;
       }
-      const rawResult = onDropDragOverProp(e);
+      const rawResult = dropConfigOnDragOver ? dropConfigOnDragOver(e.nativeEvent) : onDropDragOverProp(e);
       if (rawResult === false) {
         if (droppingDOMNode) {
           removeDroppingPlaceholder();
@@ -962,6 +1044,7 @@ function GridLayout(props) {
       droppingDOMNode,
       droppingPosition,
       droppingItem,
+      dropConfigOnDragOver,
       onDropDragOverProp,
       removeDroppingPlaceholder,
       transformScale,
@@ -978,6 +1061,9 @@ function GridLayout(props) {
       e.preventDefault();
       e.stopPropagation();
       dragEnterCounterRef.current--;
+      if (dragEnterCounterRef.current < 0) {
+        dragEnterCounterRef.current = 0;
+      }
       if (dragEnterCounterRef.current === 0) {
         removeDroppingPlaceholder();
       }
@@ -1034,6 +1120,8 @@ function GridLayout(props) {
           useCSSTransforms: useCSSTransforms && mounted,
           usePercentages: !mounted,
           transformScale,
+          positionStrategy,
+          dragThreshold,
           w: l.w,
           h: l.h,
           x: l.x,
@@ -1077,6 +1165,8 @@ function GridLayout(props) {
       useCSSTransforms,
       mounted,
       transformScale,
+      positionStrategy,
+      dragThreshold,
       droppingPosition,
       resizeHandles,
       resizeHandle,
@@ -1153,7 +1243,7 @@ var DEFAULT_COLS = {
 };
 var noop2 = () => {
 };
-function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactType, allowOverlap) {
+function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor) {
   const layout = [];
   React2__default.default.Children.forEach(children, (child) => {
     if (!React2__default.default.isValidElement(child) || child.key === null) return;
@@ -1196,7 +1286,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunkWWS3M5Y3_js.compact(corrected, compactType, cols, allowOverlap);
+  return compactor.compact(corrected, cols);
 }
 function ResponsiveGridLayout(props) {
   const {
@@ -1216,17 +1306,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunkWWS3M5Y3_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunk2DDROKB2_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunk2DDROKB2_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunkWWS3M5Y3_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunk2DDROKB2_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
+    return chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1251,17 +1341,17 @@ function ResponsiveGridLayout(props) {
   }, [layouts]);
   const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
+      return chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
         breakpoint,
         cols,
-        compactType
+        compactor
       );
     }
     return null;
-  }, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
+  }, [propsLayouts, breakpoints, breakpoint, cols, compactor]);
   const effectiveLayout = derivedLayout ?? layout;
   React2.useEffect(() => {
     if (derivedLayout !== null) {
@@ -1273,12 +1363,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = chunkWWS3M5Y3_js.compact(
-        chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
-        compactType,
-        cols,
-        allowOverlap
-      );
+      const newLayout = compactor.compact(chunkBJFPTW5Q_js.cloneLayout(effectiveLayout), cols);
       const newLayouts = {
         ...layoutsRef.current,
         [breakpoint]: newLayout
@@ -1291,6 +1376,7 @@ function ResponsiveGridLayout(props) {
     }
   }, [
     compactType,
+    compactor,
     effectiveLayout,
     cols,
     allowOverlap,
@@ -1306,28 +1392,27 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunkWWS3M5Y3_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+      const newBreakpoint = propBreakpoint ?? chunk2DDROKB2_js.getBreakpointFromWidth(breakpoints, width);
+      const newCols = chunk2DDROKB2_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
       const lastBreakpoint = breakpoint;
       if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
         const newLayouts = { ...layoutsRef.current };
         if (!newLayouts[lastBreakpoint]) {
           newLayouts[lastBreakpoint] = chunkBJFPTW5Q_js.cloneLayout(layout);
         }
-        let newLayout = chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
+        let newLayout = chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
           newLayouts,
           breakpoints,
           newBreakpoint,
           lastBreakpoint,
           newCols,
-          compactType
+          compactor
         );
         newLayout = synchronizeLayoutWithChildren2(
           newLayout,
           children,
           newCols,
-          compactType,
-          allowOverlap
+          compactor
         );
         newLayouts[newBreakpoint] = newLayout;
         setBreakpoint(newBreakpoint);
@@ -1338,11 +1423,11 @@ function ResponsiveGridLayout(props) {
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunkWWS3M5Y3_js.getIndentationValue(
+      const currentMargin2 = chunk2DDROKB2_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunkWWS3M5Y3_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunk2DDROKB2_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1361,6 +1446,7 @@ function ResponsiveGridLayout(props) {
     cols,
     layout,
     children,
+    compactor,
     compactType,
     allowOverlap,
     propMargin,
@@ -1384,14 +1470,14 @@ function ResponsiveGridLayout(props) {
     [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunkWWS3M5Y3_js.getIndentationValue(
+    return chunk2DDROKB2_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunkWWS3M5Y3_js.getIndentationValue(
+    return chunk2DDROKB2_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1423,5 +1509,5 @@ function ResponsiveGridLayout(props) {
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
-//# sourceMappingURL=chunk-RB2IKK5B.js.map
-//# sourceMappingURL=chunk-RB2IKK5B.js.map
+//# sourceMappingURL=chunk-3CEWSUXL.js.map
+//# sourceMappingURL=chunk-3CEWSUXL.js.map