react-grid-layout 2.1.1 → 2.2.1

package/dist/{chunk-PLWMASMX.mjs → chunk-AZ6K3JIJ.mjs}

@@ -1,4 +1,4 @@
-import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, compact, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-FLITZMQC.mjs';
+import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-XYPIYYYQ.mjs';
 import { calcXYRaw, calcGridItemWHPx, clamp, calcGridColWidth, calcWHRaw, calcGridItemPosition, bottom, getLayoutItem, cloneLayoutItem, moveElement, withLayoutItem, getAllCollisions, calcXY, cloneLayout, correctBounds } from './chunk-AWM66AWF.mjs';
 import React2, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { DraggableCore } from 'react-draggable';
@@ -23,6 +23,8 @@ function GridItem(props) {
     useCSSTransforms = true,
     usePercentages = false,
     transformScale = 1,
+    positionStrategy,
+    dragThreshold = 0,
     droppingPosition,
     className = "",
     style,
@@ -62,6 +64,11 @@ function GridItem(props) {
   const prevDroppingPositionRef = useRef(
     void 0
   );
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const dragPendingRef = useRef(false);
+  const initialDragClientRef = useRef({ x: 0, y: 0 });
+  const thresholdExceededRef = useRef(false);
   const positionParams = useMemo(
     () => ({
       cols,
@@ -82,9 +89,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 = useCallback(
+    () => ({
+      ...constraintContext,
+      layout: layoutRef.current
     }),
-    [cols, maxRows, containerWidth, rowHeight, margin, layout]
+    [constraintContext]
   );
   const effectiveLayoutItem = useMemo(
     () => layoutItem ?? {
@@ -102,6 +118,9 @@ function GridItem(props) {
   );
   const createStyle = useCallback(
     (pos2) => {
+      if (positionStrategy?.calcStyle) {
+        return positionStrategy.calcStyle(pos2);
+      }
       if (useCSSTransforms) {
         return setTransform(pos2);
       }
@@ -115,7 +134,7 @@ function GridItem(props) {
       }
       return styleObj;
     },
-    [useCSSTransforms, usePercentages, containerWidth]
+    [positionStrategy, useCSSTransforms, usePercentages, containerWidth]
   );
   const onDragStart = useCallback(
     (e, { node }) => {
@@ -128,11 +147,33 @@ 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 = calcXYRaw(
         positionParams,
@@ -144,7 +185,7 @@ function GridItem(props) {
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragStartProp(i, newX, newY, {
         e,
@@ -156,15 +197,47 @@ function GridItem(props) {
       onDragStartProp,
       transformScale,
       positionParams,
+      positionStrategy,
+      dragThreshold,
       constraints,
       effectiveLayoutItem,
-      constraintContext,
+      getConstraintContext,
       i
     ]
   );
   const onDrag = 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 = calcXYRaw(
+            positionParams,
+            dragPositionRef.current.top,
+            dragPositionRef.current.left
+          );
+          const { x: startX, y: startY } = 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) {
@@ -185,7 +258,7 @@ function GridItem(props) {
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragProp(i, newX, newY, {
         e,
@@ -195,7 +268,9 @@ function GridItem(props) {
     },
     [
       onDragProp,
+      onDragStartProp,
       dragging,
+      dragThreshold,
       isBounded,
       h,
       rowHeight,
@@ -206,12 +281,21 @@ function GridItem(props) {
       i,
       constraints,
       effectiveLayoutItem,
-      constraintContext
+      getConstraintContext
     ]
   );
   const onDragStop = 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);
@@ -222,7 +306,7 @@ function GridItem(props) {
         effectiveLayoutItem,
         rawPos.x,
         rawPos.y,
-        constraintContext
+        getConstraintContext()
       );
       onDragStopProp(i, newX, newY, {
         e,
@@ -236,7 +320,7 @@ function GridItem(props) {
       positionParams,
       constraints,
       effectiveLayoutItem,
-      constraintContext,
+      getConstraintContext,
       i
     ]
   );
@@ -271,7 +355,7 @@ function GridItem(props) {
         rawSize.w,
         rawSize.h,
         resizeHandle2,
-        constraintContext
+        getConstraintContext()
       );
       handler(i, newW, newH, {
         e: e.nativeEvent,
@@ -286,12 +370,10 @@ function GridItem(props) {
       onResizeStopProp,
       containerWidth,
       positionParams,
-      x,
-      y,
       i,
       constraints,
       effectiveLayoutItem,
-      constraintContext
+      getConstraintContext
     ]
   );
   const handleResizeStart = useCallback(
@@ -455,7 +537,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.Children.forEach(children, (child) => {
@@ -497,7 +579,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
     }
   });
   const corrected = correctBounds(layout, { cols });
-  return compact(corrected, compactType, cols, allowOverlap);
+  return compactor.compact(corrected, cols);
 }
 function GridLayout(props) {
   const {
@@ -552,14 +634,19 @@ 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 {
+    enabled: isDroppable,
+    defaultItem: defaultDropItem,
+    onDragOver: dropConfigOnDragOver
+  } = dropConfig;
   const compactor = compactorProp ?? getCompactor("vertical");
   const compactType = compactor.type;
   const allowOverlap = compactor.allowOverlap;
@@ -576,13 +663,7 @@ function GridLayout(props) {
   const effectiveContainerPadding = containerPadding ?? margin;
   const [mounted, setMounted] = useState(false);
   const [layout, setLayout] = useState(
-    () => synchronizeLayoutWithChildren(
-      propsLayout,
-      children,
-      cols,
-      compactType,
-      allowOverlap
-    )
+    () => synchronizeLayoutWithChildren(propsLayout, children, cols, compactor)
   );
   const [activeDrag, setActiveDrag] = useState(null);
   const [resizing, setResizing] = useState(false);
@@ -618,8 +699,7 @@ function GridLayout(props) {
         baseLayout,
         children,
         cols,
-        compactType,
-        allowOverlap
+        compactor
       );
       setLayout(newLayout);
     }
@@ -631,7 +711,7 @@ function GridLayout(props) {
     children,
     cols,
     compactType,
-    allowOverlap,
+    compactor,
     activeDrag,
     droppingDOMNode,
     layout
@@ -692,12 +772,10 @@ function GridLayout(props) {
         allowOverlap
       );
       onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
-      setLayout(
-        allowOverlap ? newLayout : compact(newLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(newLayout, cols));
       setActiveDrag(placeholder);
     },
-    [preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onDragProp]
   );
   const onDragStop = useCallback(
     (i, x, y, data) => {
@@ -717,7 +795,7 @@ function GridLayout(props) {
         cols,
         allowOverlap
       );
-      const finalLayout = allowOverlap ? newLayout : 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;
@@ -734,6 +812,7 @@ function GridLayout(props) {
       compactType,
       cols,
       allowOverlap,
+      compactor,
       onDragStopProp,
       onLayoutChange
     ]
@@ -825,19 +904,17 @@ function GridLayout(props) {
         data.e,
         data.node
       );
-      setLayout(
-        allowOverlap ? finalLayout : compact(finalLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(finalLayout, cols));
       setActiveDrag(placeholder);
     },
-    [preventCollision, allowOverlap, compactType, cols, onResizeProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onResizeProp]
   );
   const onResizeStop = useCallback(
     (i, _w, _h, data) => {
       const currentLayout = layoutRef.current;
       const oldResizeItem = oldResizeItemRef.current;
       const l = getLayoutItem(currentLayout, i);
-      const finalLayout = allowOverlap ? currentLayout : compact(currentLayout, compactType, cols);
+      const finalLayout = compactor.compact(currentLayout, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -856,21 +933,26 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [cols, compactor, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = useCallback(() => {
     const currentLayout = layoutRef.current;
-    const newLayout = 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 = useCallback(
     (e) => {
       e.preventDefault();
@@ -880,7 +962,7 @@ function GridLayout(props) {
       )) {
         return false;
       }
-      const rawResult = onDropDragOverProp(e);
+      const rawResult = dropConfigOnDragOver ? dropConfigOnDragOver(e.nativeEvent) : onDropDragOverProp(e);
       if (rawResult === false) {
         if (droppingDOMNode) {
           removeDroppingPlaceholder();
@@ -955,6 +1037,7 @@ function GridLayout(props) {
       droppingDOMNode,
       droppingPosition,
       droppingItem,
+      dropConfigOnDragOver,
       onDropDragOverProp,
       removeDroppingPlaceholder,
       transformScale,
@@ -971,6 +1054,9 @@ function GridLayout(props) {
       e.preventDefault();
       e.stopPropagation();
       dragEnterCounterRef.current--;
+      if (dragEnterCounterRef.current < 0) {
+        dragEnterCounterRef.current = 0;
+      }
       if (dragEnterCounterRef.current === 0) {
         removeDroppingPlaceholder();
       }
@@ -1027,6 +1113,8 @@ function GridLayout(props) {
           useCSSTransforms: useCSSTransforms && mounted,
           usePercentages: !mounted,
           transformScale,
+          positionStrategy,
+          dragThreshold,
           w: l.w,
           h: l.h,
           x: l.x,
@@ -1070,6 +1158,8 @@ function GridLayout(props) {
       useCSSTransforms,
       mounted,
       transformScale,
+      positionStrategy,
+      dragThreshold,
       droppingPosition,
       resizeHandles,
       resizeHandle,
@@ -1146,7 +1236,7 @@ var DEFAULT_COLS = {
 };
 var noop2 = () => {
 };
-function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactType, allowOverlap) {
+function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor) {
   const layout = [];
   React2.Children.forEach(children, (child) => {
     if (!React2.isValidElement(child) || child.key === null) return;
@@ -1189,7 +1279,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
     }
   });
   const corrected = correctBounds(layout, { cols });
-  return compact(corrected, compactType, cols, allowOverlap);
+  return compactor.compact(corrected, cols);
 }
 function ResponsiveGridLayout(props) {
   const {
@@ -1250,11 +1340,11 @@ function ResponsiveGridLayout(props) {
         breakpoint,
         breakpoint,
         cols,
-        compactType
+        compactor
       );
     }
     return null;
-  }, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
+  }, [propsLayouts, breakpoints, breakpoint, cols, compactor]);
   const effectiveLayout = derivedLayout ?? layout;
   useEffect(() => {
     if (derivedLayout !== null) {
@@ -1266,12 +1356,7 @@ function ResponsiveGridLayout(props) {
   }, [derivedLayout, propsLayouts]);
   useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
-      const newLayout = compact(
-        cloneLayout(effectiveLayout),
-        compactType,
-        cols,
-        allowOverlap
-      );
+      const newLayout = compactor.compact(cloneLayout(effectiveLayout), cols);
       const newLayouts = {
         ...layoutsRef.current,
         [breakpoint]: newLayout
@@ -1284,6 +1369,7 @@ function ResponsiveGridLayout(props) {
     }
   }, [
     compactType,
+    compactor,
     effectiveLayout,
     cols,
     allowOverlap,
@@ -1313,14 +1399,13 @@ function ResponsiveGridLayout(props) {
           newBreakpoint,
           lastBreakpoint,
           newCols,
-          compactType
+          compactor
         );
         newLayout = synchronizeLayoutWithChildren2(
           newLayout,
           children,
           newCols,
-          compactType,
-          allowOverlap
+          compactor
         );
         newLayouts[newBreakpoint] = newLayout;
         setBreakpoint(newBreakpoint);
@@ -1354,6 +1439,7 @@ function ResponsiveGridLayout(props) {
     cols,
     layout,
     children,
+    compactor,
     compactType,
     allowOverlap,
     propMargin,
@@ -1414,5 +1500,5 @@ function ResponsiveGridLayout(props) {
 }
 
 export { GridItem, GridLayout, ResponsiveGridLayout };
-//# sourceMappingURL=chunk-PLWMASMX.mjs.map
-//# sourceMappingURL=chunk-PLWMASMX.mjs.map
+//# sourceMappingURL=chunk-AZ6K3JIJ.mjs.map
+//# sourceMappingURL=chunk-AZ6K3JIJ.mjs.map