react-grid-layout 2.2.0 → 2.2.2

package/dist/{chunk-NQUM7RXX.js → chunk-KEM2G3LX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2TEFHZC4_js = require('./chunk-2TEFHZC4.js');
+var chunk2DDROKB2_js = require('./chunk-2DDROKB2.js');
 var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
 var React2 = require('react');
 var reactDraggable = require('react-draggable');
@@ -48,7 +48,7 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
-    constraints = chunk2TEFHZC4_js.defaultConstraints,
+    constraints = chunk2DDROKB2_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 chunk2TEFHZC4_js.setTransform(pos2);
+        return chunk2DDROKB2_js.setTransform(pos2);
       }
-      const styleObj = chunk2TEFHZC4_js.setTopLeft(pos2);
+      const styleObj = chunk2DDROKB2_js.setTopLeft(pos2);
       if (usePercentages) {
         return {
           ...styleObj,
-          left: chunk2TEFHZC4_js.perc(pos2.left / containerWidth),
-          width: chunk2TEFHZC4_js.perc(pos2.width / containerWidth)
+          left: chunk2DDROKB2_js.perc(pos2.left / containerWidth),
+          width: chunk2DDROKB2_js.perc(pos2.width / containerWidth)
         };
       }
       return styleObj;
@@ -187,7 +189,7 @@ function GridItem(props) {
         newPosition.top,
         newPosition.left
       );
-      const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -231,7 +233,7 @@ function GridItem(props) {
             dragPositionRef.current.top,
             dragPositionRef.current.left
           );
-          const { x: startX, y: startY } = chunk2TEFHZC4_js.applyPositionConstraints(
+          const { x: startX, y: startY } = chunk2DDROKB2_js.applyPositionConstraints(
             constraints,
             effectiveLayoutItem,
             rawPos2.x,
@@ -260,7 +262,7 @@ function GridItem(props) {
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
       const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
-      const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2DDROKB2_js.applyPositionConstraints(
         constraints,
         effectiveLayoutItem,
         rawPos.x,
@@ -308,7 +310,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 } = chunk2TEFHZC4_js.applyPositionConstraints(
+      const { x: newX, y: newY } = chunk2DDROKB2_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 = chunk2TEFHZC4_js.resizeItemInDirection(
+        updatedSize = chunk2DDROKB2_js.resizeItemInDirection(
           resizeHandle2,
           position,
           size,
@@ -356,7 +360,7 @@ function GridItem(props) {
         updatedSize.width,
         updatedSize.height
       );
-      const { w: newW, h: newH } = chunk2TEFHZC4_js.applySizeConstraints(
+      const { w: newW, h: newH } = chunk2DDROKB2_js.applySizeConstraints(
         constraints,
         effectiveLayoutItem,
         rawSize.w,
@@ -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,10 +458,13 @@ 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]);
+  }, [droppingPosition, dragging, i]);
   const pos = chunkBJFPTW5Q_js.calcGridItemPosition(
     positionParams,
     x,
@@ -598,9 +608,9 @@ function GridLayout(props) {
     dragConfig: dragConfigProp,
     resizeConfig: resizeConfigProp,
     dropConfig: dropConfigProp,
-    positionStrategy = chunk2TEFHZC4_js.defaultPositionStrategy,
+    positionStrategy = chunk2DDROKB2_js.defaultPositionStrategy,
     compactor: compactorProp,
-    constraints = chunk2TEFHZC4_js.defaultConstraints,
+    constraints = chunk2DDROKB2_js.defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -621,19 +631,19 @@ function GridLayout(props) {
     onDropDragOver: onDropDragOverProp = noop
   } = props;
   const gridConfig = React2.useMemo(
-    () => ({ ...chunk2TEFHZC4_js.defaultGridConfig, ...gridConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultGridConfig, ...gridConfigProp }),
     [gridConfigProp]
   );
   const dragConfig = React2.useMemo(
-    () => ({ ...chunk2TEFHZC4_js.defaultDragConfig, ...dragConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultDragConfig, ...dragConfigProp }),
     [dragConfigProp]
   );
   const resizeConfig = React2.useMemo(
-    () => ({ ...chunk2TEFHZC4_js.defaultResizeConfig, ...resizeConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultResizeConfig, ...resizeConfigProp }),
     [resizeConfigProp]
   );
   const dropConfig = React2.useMemo(
-    () => ({ ...chunk2TEFHZC4_js.defaultDropConfig, ...dropConfigProp }),
+    () => ({ ...chunk2DDROKB2_js.defaultDropConfig, ...dropConfigProp }),
     [dropConfigProp]
   );
   const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
@@ -654,7 +664,7 @@ function GridLayout(props) {
     defaultItem: defaultDropItem,
     onDragOver: dropConfigOnDragOver
   } = dropConfig;
-  const compactor = compactorProp ?? chunk2TEFHZC4_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunk2DDROKB2_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const preventCollision = compactor.preventCollision ?? false;
@@ -708,7 +718,9 @@ function GridLayout(props) {
         cols,
         compactor
       );
-      setLayout(newLayout);
+      if (!fastEquals.deepEqual(newLayout, layout)) {
+        setLayout(newLayout);
+      }
     }
     prevPropsLayoutRef.current = propsLayout;
     prevChildrenRef.current = children;
@@ -726,9 +738,10 @@ 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);
@@ -944,6 +957,13 @@ function GridLayout(props) {
   );
   const removeDroppingPlaceholder = React2.useCallback(() => {
     const currentLayout = layoutRef.current;
+    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),
       cols
@@ -1054,6 +1074,9 @@ function GridLayout(props) {
       e.preventDefault();
       e.stopPropagation();
       dragEnterCounterRef.current--;
+      if (dragEnterCounterRef.current < 0) {
+        dragEnterCounterRef.current = 0;
+      }
       if (dragEnterCounterRef.current === 0) {
         removeDroppingPlaceholder();
       }
@@ -1233,7 +1256,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;
@@ -1276,7 +1299,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
     }
   });
   const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
-  return chunk2TEFHZC4_js.compact(corrected, compactType, cols, allowOverlap);
+  return compactor.compact(corrected, cols);
 }
 function ResponsiveGridLayout(props) {
   const {
@@ -1296,17 +1319,17 @@ function ResponsiveGridLayout(props) {
     onWidthChange = noop2,
     ...restProps
   } = props;
-  const compactor = compactorProp ?? chunk2TEFHZC4_js.getCompactor("vertical");
+  const compactor = compactorProp ?? chunk2DDROKB2_js.getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
   const initialBreakpoint = React2.useMemo(() => {
-    return propBreakpoint ?? chunk2TEFHZC4_js.getBreakpointFromWidth(breakpoints, width);
+    return propBreakpoint ?? chunk2DDROKB2_js.getBreakpointFromWidth(breakpoints, width);
   }, []);
   const initialCols = React2.useMemo(() => {
-    return chunk2TEFHZC4_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
+    return chunk2DDROKB2_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
   }, [initialBreakpoint, colsConfig]);
   const initialLayout = React2.useMemo(() => {
-    return chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
+    return chunk2DDROKB2_js.findOrGenerateResponsiveLayout(
       propsLayouts,
       breakpoints,
       initialBreakpoint,
@@ -1331,17 +1354,17 @@ function ResponsiveGridLayout(props) {
   }, [layouts]);
   const derivedLayout = React2.useMemo(() => {
     if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      return chunk2TEFHZC4_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) {
@@ -1353,12 +1376,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   React2.useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = chunk2TEFHZC4_js.compact(
-        chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
-        compactType,
-        cols,
-        allowOverlap
-      );
+      const newLayout = compactor.compact(chunkBJFPTW5Q_js.cloneLayout(effectiveLayout), cols);
       const newLayouts = {
         ...layoutsRef.current,
         [breakpoint]: newLayout
@@ -1371,6 +1389,7 @@ function ResponsiveGridLayout(props) {
     }
   }, [
     compactType,
+    compactor,
     effectiveLayout,
     cols,
     allowOverlap,
@@ -1386,28 +1405,27 @@ function ResponsiveGridLayout(props) {
     );
     const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
     if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
-      const newBreakpoint = propBreakpoint ?? chunk2TEFHZC4_js.getBreakpointFromWidth(breakpoints, width);
-      const newCols = chunk2TEFHZC4_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 = chunk2TEFHZC4_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);
@@ -1418,11 +1436,11 @@ function ResponsiveGridLayout(props) {
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
-      const currentMargin2 = chunk2TEFHZC4_js.getIndentationValue(
+      const currentMargin2 = chunk2DDROKB2_js.getIndentationValue(
         propMargin,
         newBreakpoint
       );
-      const currentPadding = propContainerPadding ? chunk2TEFHZC4_js.getIndentationValue(
+      const currentPadding = propContainerPadding ? chunk2DDROKB2_js.getIndentationValue(
         propContainerPadding,
         newBreakpoint
       ) : null;
@@ -1441,6 +1459,7 @@ function ResponsiveGridLayout(props) {
     cols,
     layout,
     children,
+    compactor,
     compactType,
     allowOverlap,
     propMargin,
@@ -1464,14 +1483,14 @@ function ResponsiveGridLayout(props) {
     [breakpoint, onLayoutChange]
   );
   const currentMargin = React2.useMemo(() => {
-    return chunk2TEFHZC4_js.getIndentationValue(
+    return chunk2DDROKB2_js.getIndentationValue(
       propMargin,
       breakpoint
     );
   }, [propMargin, breakpoint]);
   const currentContainerPadding = React2.useMemo(() => {
     if (propContainerPadding === null) return null;
-    return chunk2TEFHZC4_js.getIndentationValue(
+    return chunk2DDROKB2_js.getIndentationValue(
       propContainerPadding,
       breakpoint
     );
@@ -1503,5 +1522,5 @@ function ResponsiveGridLayout(props) {
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
-//# sourceMappingURL=chunk-NQUM7RXX.js.map
-//# sourceMappingURL=chunk-NQUM7RXX.js.map
+//# sourceMappingURL=chunk-KEM2G3LX.js.map
+//# sourceMappingURL=chunk-KEM2G3LX.js.map