react-grid-layout 2.1.0 → 2.1.1

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkFN6MIZ24_js = require('./chunk-FN6MIZ24.js');
+var chunkWWS3M5Y3_js = require('./chunk-WWS3M5Y3.js');
 var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
@@ -46,7 +46,7 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
-    constraints = chunkFN6MIZ24_js.defaultConstraints,
+    constraints = chunkWWS3M5Y3_js.defaultConstraints,
     layoutItem,
     layout = [],
     onDragStart: onDragStartProp,
@@ -110,14 +110,14 @@ function GridItem(props) {
   const createStyle = React2.useCallback(
     (pos2) => {
       if (useCSSTransforms) {
-        return chunkFN6MIZ24_js.setTransform(pos2);
+        return chunkWWS3M5Y3_js.setTransform(pos2);
       }
-      const styleObj = chunkFN6MIZ24_js.setTopLeft(pos2);
+      const styleObj = chunkWWS3M5Y3_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunkFN6MIZ24_js.perc(pos2.left / containerWidth),
-          width: chunkFN6MIZ24_js.perc(pos2.width / containerWidth)
+          left: chunkWWS3M5Y3_js.perc(pos2.left / containerWidth),
+          width: chunkWWS3M5Y3_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
@@ -146,7 +146,7 @@ function GridItem(props) {
         newPosition.top,
         newPosition.left
       );
-      const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -187,7 +187,7 @@ function GridItem(props) {
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -224,7 +224,7 @@ function GridItem(props) {
       setDragging(false);
       dragPositionRef.current = { left: 0, top: 0 };
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunkFN6MIZ24_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunkWWS3M5Y3_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -253,7 +253,7 @@ function GridItem(props) {
       if (!handler) return;
       let updatedSize;
       if (node) {
-        updatedSize = chunkFN6MIZ24_js.resizeItemInDirection(
+        updatedSize = chunkWWS3M5Y3_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -272,7 +272,7 @@ function GridItem(props) {
         updatedSize.width,
         updatedSize.height
       );
-      const { w: newW, h: newH } = chunkFN6MIZ24_js.applySizeConstraints(
+      const { w: newW, h: newH } = chunkWWS3M5Y3_js.applySizeConstraints(
         constraints,
         effectiveLayoutItem,
         rawSize.w,
@@ -504,7 +504,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
+  return chunkWWS3M5Y3_js.compact(corrected, compactType, cols, allowOverlap);
 }
 function GridLayout(props) {
   const {
@@ -516,9 +516,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunkFN6MIZ24_js.defaultPositionStrategy,
+    positionStrategy = chunkWWS3M5Y3_js.defaultPositionStrategy,
     compactor: compactorProp,
-    constraints = chunkFN6MIZ24_js.defaultConstraints,
+    constraints = chunkWWS3M5Y3_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -539,19 +539,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunkFN6MIZ24_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunkWWS3M5Y3_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -567,7 +567,7 @@ function GridLayout(props) {
     handleComponent: resizeHandle
   } = resizeConfig;
   const { enabled: isDroppable, defaultItem: defaultDropItem } = dropConfig;
-  const compactor = compactorProp ?? chunkFN6MIZ24_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunkWWS3M5Y3_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -605,6 +605,8 @@ function GridLayout(props) {
   const prevPropsLayoutRef = React2.useRef(propsLayout);
   const prevChildrenRef = React2.useRef(children);
   const prevCompactTypeRef = React2.useRef(compactType);
+  const layoutRef = React2.useRef(layout);
+  layoutRef.current = layout;
   React2.useEffect(() => {
     setMounted(true);
     if (!fastEquals.deepEqual(layout, propsLayout)) {
@@ -613,6 +615,7 @@ function GridLayout(props) {
   }, []);
   React2.useEffect(() => {
     if (activeDrag) return;
+    if (droppingDOMNode) return;
     const layoutChanged = !fastEquals.deepEqual(propsLayout, prevPropsLayoutRef.current);
     const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
     const compactTypeChanged = compactType !== prevCompactTypeRef.current;
@@ -637,6 +640,7 @@ function GridLayout(props) {
     compactType,
     allowOverlap,
     activeDrag,
+    droppingDOMNode,
     layout
   ]);
   React2.useEffect(() => {
@@ -653,7 +657,8 @@ function GridLayout(props) {
   }, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
   const onDragStart = React2.useCallback(
     (i, _x, _y, data) => {
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -663,16 +668,17 @@ function GridLayout(props) {
         i
       };
       oldDragItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
-      oldLayoutRef.current = layout;
+      oldLayoutRef.current = currentLayout;
       setActiveDrag(placeholder);
-      onDragStartProp(layout, l, l, null, data.e, data.node);
+      onDragStartProp(currentLayout, l, l, null, data.e, data.node);
     },
-    [layout, onDragStartProp]
+    [onDragStartProp]
   );
   const onDrag = React2.useCallback(
     (i, x, y, data) => {
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -682,7 +688,7 @@ function GridLayout(props) {
         i
       };
       const newLayout = chunkBJFPTW5Q_js.moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -694,20 +700,21 @@ function GridLayout(props) {
       );
       onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
       setLayout(
-        allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols)
+        allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols)
       );
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, onDragProp]
   );
   const onDragStop = React2.useCallback(
     (i, x, y, data) => {
       if (!activeDrag) return;
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       const newLayout = chunkBJFPTW5Q_js.moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -717,7 +724,7 @@ function GridLayout(props) {
         cols,
         allowOverlap
       );
-      const finalLayout = allowOverlap ? newLayout : chunkFN6MIZ24_js.compact(newLayout, compactType, cols);
+      const finalLayout = allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols);
       onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
       const oldLayout = oldLayoutRef.current;
       oldDragItemRef.current = null;
@@ -730,7 +737,6 @@ function GridLayout(props) {
     },
     [
       activeDrag,
-      layout,
       preventCollision,
       compactType,
       cols,
@@ -741,23 +747,25 @@ function GridLayout(props) {
   );
   const onResizeStart = React2.useCallback(
     (i, _w, _h, data) => {
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
       if (!l) return;
       oldResizeItemRef.current = chunkBJFPTW5Q_js.cloneLayoutItem(l);
-      oldLayoutRef.current = layout;
+      oldLayoutRef.current = currentLayout;
       setResizing(true);
-      onResizeStartProp(layout, l, l, null, data.e, data.node);
+      onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
     },
-    [layout, onResizeStartProp]
+    [onResizeStartProp]
   );
   const onResize = React2.useCallback(
     (i, w, h, data) => {
+      const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
       const { handle } = data;
       let shouldMoveItem = false;
       let newX;
       let newY;
-      const [newLayout, l] = chunkBJFPTW5Q_js.withLayoutItem(layout, i, (item) => {
+      const [newLayout, l] = chunkBJFPTW5Q_js.withLayoutItem(currentLayout, i, (item) => {
         newX = item.x;
         newY = item.y;
         if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
@@ -774,7 +782,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = chunkBJFPTW5Q_js.getAllCollisions(layout, {
+          const collisions = chunkBJFPTW5Q_js.getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -825,17 +833,18 @@ function GridLayout(props) {
         data.node
       );
       setLayout(
-        allowOverlap ? finalLayout : chunkFN6MIZ24_js.compact(finalLayout, compactType, cols)
+        allowOverlap ? finalLayout : chunkWWS3M5Y3_js.compact(finalLayout, compactType, cols)
       );
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
+    [preventCollision, allowOverlap, compactType, cols, onResizeProp]
   );
   const onResizeStop = React2.useCallback(
     (i, _w, _h, data) => {
+      const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
-      const l = chunkBJFPTW5Q_js.getLayoutItem(layout, i);
-      const finalLayout = allowOverlap ? layout : chunkFN6MIZ24_js.compact(layout, compactType, cols);
+      const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
+      const finalLayout = allowOverlap ? currentLayout : chunkWWS3M5Y3_js.compact(currentLayout, compactType, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -854,11 +863,12 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = React2.useCallback(() => {
-    const newLayout = chunkFN6MIZ24_js.compact(
-      layout.filter((l) => l.i !== droppingItem.i),
+    const currentLayout = layoutRef.current;
+    const newLayout = chunkWWS3M5Y3_js.compact(
+      currentLayout.filter((l) => l.i !== droppingItem.i),
       compactType,
       cols,
       allowOverlap
@@ -867,7 +877,7 @@ function GridLayout(props) {
     setDroppingDOMNode(null);
     setActiveDrag(null);
     setDroppingPosition(void 0);
-  }, [layout, droppingItem.i, compactType, cols, allowOverlap]);
+  }, [droppingItem.i, compactType, cols, allowOverlap]);
   const handleDragOver = React2.useCallback(
     (e) => {
       e.preventDefault();
@@ -932,7 +942,7 @@ function GridLayout(props) {
         setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
         setDroppingPosition(newDroppingPosition);
         setLayout([
-          ...layout,
+          ...layoutRef.current,
           {
             ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -960,8 +970,7 @@ function GridLayout(props) {
       maxRows,
       rowHeight,
       width,
-      effectiveContainerPadding,
-      layout
+      effectiveContainerPadding
     ]
   );
   const handleDragLeave = React2.useCallback(
@@ -984,12 +993,13 @@ function GridLayout(props) {
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      const item = layout.find((l) => l.i === droppingItem.i);
+      const currentLayout = layoutRef.current;
+      const item = currentLayout.find((l) => l.i === droppingItem.i);
       dragEnterCounterRef.current = 0;
       removeDroppingPlaceholder();
-      onDropProp(layout, item, e.nativeEvent);
+      onDropProp(currentLayout, item, e.nativeEvent);
     },
-    [layout, droppingItem.i, removeDroppingPlaceholder, onDropProp]
+    [droppingItem.i, removeDroppingPlaceholder, onDropProp]
   );
   const processGridItem = React2.useCallback(
     (child, isDroppingItem) => {
@@ -1186,7 +1196,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunkFN6MIZ24_js.compact(corrected, compactType, cols, allowOverlap);
+  return chunkWWS3M5Y3_js.compact(corrected, compactType, cols, allowOverlap);
 }
 function ResponsiveGridLayout(props) {
   const {
@@ -1206,17 +1216,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunkFN6MIZ24_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunkWWS3M5Y3_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunkFN6MIZ24_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunkWWS3M5Y3_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
+    return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1241,7 +1251,7 @@ function ResponsiveGridLayout(props) {
   }, [layouts]);
   const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      return chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
+      return chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
@@ -1263,7 +1273,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = chunkFN6MIZ24_js.compact(
+      const newLayout = chunkWWS3M5Y3_js.compact(
         chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
         compactType,
         cols,
@@ -1296,15 +1306,15 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunkFN6MIZ24_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunkFN6MIZ24_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+      const newBreakpoint = propBreakpoint ?? chunkWWS3M5Y3_js.getBreakpointFromWidth(breakpoints, width);
+      const newCols = chunkWWS3M5Y3_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
       const lastBreakpoint = breakpoint;
       if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
         const newLayouts = { ...layoutsRef.current };
         if (!newLayouts[lastBreakpoint]) {
           newLayouts[lastBreakpoint] = chunkBJFPTW5Q_js.cloneLayout(layout);
         }
-        let newLayout = chunkFN6MIZ24_js.findOrGenerateResponsiveLayout(
+        let newLayout = chunkWWS3M5Y3_js.findOrGenerateResponsiveLayout(
           newLayouts,
           breakpoints,
           newBreakpoint,
@@ -1328,11 +1338,11 @@ function ResponsiveGridLayout(props) {
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunkFN6MIZ24_js.getIndentationValue(
+      const currentMargin2 = chunkWWS3M5Y3_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunkFN6MIZ24_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunkWWS3M5Y3_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1374,14 +1384,14 @@ function ResponsiveGridLayout(props) {
     [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunkFN6MIZ24_js.getIndentationValue(
+    return chunkWWS3M5Y3_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunkFN6MIZ24_js.getIndentationValue(
+    return chunkWWS3M5Y3_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1413,5 +1423,5 @@ function ResponsiveGridLayout(props) {
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
-//# sourceMappingURL=chunk-QRW3ND4U.js.map
-//# sourceMappingURL=chunk-QRW3ND4U.js.map
+//# sourceMappingURL=chunk-RB2IKK5B.js.map
+//# sourceMappingURL=chunk-RB2IKK5B.js.map