react-grid-layout 2.1.0 → 2.2.0

package/dist/{chunk-MXXN7GUE.mjs → chunk-OWK47QTG.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-2O3ZME4Q.mjs';
+import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, compact, getIndentationValue } from './chunk-OH26KG7Y.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, layout]
+    [cols, maxRows, containerWidth, rowHeight, margin]
+  );
+  const getConstraintContext = useCallback(
+    () => ({
+      ...constraintContext,
+      layout: layoutRef.current
+    }),
+    [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);
@@ -598,6 +679,8 @@ function GridLayout(props) {
   const prevPropsLayoutRef = useRef(propsLayout);
   const prevChildrenRef = useRef(children);
   const prevCompactTypeRef = useRef(compactType);
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
   useEffect(() => {
     setMounted(true);
     if (!deepEqual(layout, propsLayout)) {
@@ -606,6 +689,7 @@ function GridLayout(props) {
   }, []);
   useEffect(() => {
     if (activeDrag) return;
+    if (droppingDOMNode) return;
     const layoutChanged = !deepEqual(propsLayout, prevPropsLayoutRef.current);
     const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
     const compactTypeChanged = compactType !== prevCompactTypeRef.current;
@@ -615,8 +699,7 @@ function GridLayout(props) {
         baseLayout,
         children,
         cols,
-        compactType,
-        allowOverlap
+        compactor
       );
       setLayout(newLayout);
     }
@@ -628,8 +711,9 @@ function GridLayout(props) {
     children,
     cols,
     compactType,
-    allowOverlap,
+    compactor,
     activeDrag,
+    droppingDOMNode,
     layout
   ]);
   useEffect(() => {
@@ -646,7 +730,8 @@ function GridLayout(props) {
   }, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
   const onDragStart = useCallback(
     (i, _x, _y, data) => {
-      const l = getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -656,16 +741,17 @@ function GridLayout(props) {
         i
       };
       oldDragItemRef.current = 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 = useCallback(
     (i, x, y, data) => {
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = getLayoutItem(layout, i);
+      const l = getLayoutItem(currentLayout, i);
       if (!l) return;
       const placeholder = {
         w: l.w,
@@ -675,7 +761,7 @@ function GridLayout(props) {
         i
       };
       const newLayout = moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -686,21 +772,20 @@ 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);
     },
-    [layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, compactor, onDragProp]
   );
   const onDragStop = useCallback(
     (i, x, y, data) => {
       if (!activeDrag) return;
+      const currentLayout = layoutRef.current;
       const oldDragItem = oldDragItemRef.current;
-      const l = getLayoutItem(layout, i);
+      const l = getLayoutItem(currentLayout, i);
       if (!l) return;
       const newLayout = moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -710,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;
@@ -723,34 +808,36 @@ function GridLayout(props) {
     },
     [
       activeDrag,
-      layout,
       preventCollision,
       compactType,
       cols,
       allowOverlap,
+      compactor,
       onDragStopProp,
       onLayoutChange
     ]
   );
   const onResizeStart = useCallback(
     (i, _w, _h, data) => {
-      const l = getLayoutItem(layout, i);
+      const currentLayout = layoutRef.current;
+      const l = getLayoutItem(currentLayout, i);
       if (!l) return;
       oldResizeItemRef.current = 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 = 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] = withLayoutItem(layout, i, (item) => {
+      const [newLayout, l] = withLayoutItem(currentLayout, i, (item) => {
         newX = item.x;
         newY = item.y;
         if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
@@ -767,7 +854,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = getAllCollisions(layout, {
+          const collisions = getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -817,18 +904,17 @@ function GridLayout(props) {
         data.e,
         data.node
       );
-      setLayout(
-        allowOverlap ? finalLayout : compact(finalLayout, compactType, cols)
-      );
+      setLayout(compactor.compact(finalLayout, cols));
       setActiveDrag(placeholder);
     },
-    [layout, 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(layout, i);
-      const finalLayout = allowOverlap ? layout : compact(layout, compactType, cols);
+      const l = getLayoutItem(currentLayout, i);
+      const finalLayout = compactor.compact(currentLayout, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -847,20 +933,19 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [cols, compactor, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = useCallback(() => {
-    const newLayout = compact(
-      layout.filter((l) => l.i !== droppingItem.i),
-      compactType,
-      cols,
-      allowOverlap
+    const currentLayout = layoutRef.current;
+    const newLayout = compactor.compact(
+      currentLayout.filter((l) => l.i !== droppingItem.i),
+      cols
     );
     setLayout(newLayout);
     setDroppingDOMNode(null);
     setActiveDrag(null);
     setDroppingPosition(void 0);
-  }, [layout, droppingItem.i, compactType, cols, allowOverlap]);
+  }, [droppingItem.i, cols, compactor]);
   const handleDragOver = useCallback(
     (e) => {
       e.preventDefault();
@@ -870,7 +955,7 @@ function GridLayout(props) {
       )) {
         return false;
       }
-      const rawResult = onDropDragOverProp(e);
+      const rawResult = dropConfigOnDragOver ? dropConfigOnDragOver(e.nativeEvent) : onDropDragOverProp(e);
       if (rawResult === false) {
         if (droppingDOMNode) {
           removeDroppingPlaceholder();
@@ -925,7 +1010,7 @@ function GridLayout(props) {
         setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, finalDroppingItem.i));
         setDroppingPosition(newDroppingPosition);
         setLayout([
-          ...layout,
+          ...layoutRef.current,
           {
             ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -945,6 +1030,7 @@ function GridLayout(props) {
       droppingDOMNode,
       droppingPosition,
       droppingItem,
+      dropConfigOnDragOver,
       onDropDragOverProp,
       removeDroppingPlaceholder,
       transformScale,
@@ -953,8 +1039,7 @@ function GridLayout(props) {
       maxRows,
       rowHeight,
       width,
-      effectiveContainerPadding,
-      layout
+      effectiveContainerPadding
     ]
   );
   const handleDragLeave = useCallback(
@@ -977,12 +1062,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 = useCallback(
     (child, isDroppingItem) => {
@@ -1017,6 +1103,8 @@ function GridLayout(props) {
           useCSSTransforms: useCSSTransforms && mounted,
           usePercentages: !mounted,
           transformScale,
+          positionStrategy,
+          dragThreshold,
           w: l.w,
           h: l.h,
           x: l.x,
@@ -1060,6 +1148,8 @@ function GridLayout(props) {
       useCSSTransforms,
       mounted,
       transformScale,
+      positionStrategy,
+      dragThreshold,
       droppingPosition,
       resizeHandles,
       resizeHandle,
@@ -1404,5 +1494,5 @@ function ResponsiveGridLayout(props) {
 }
 
 export { GridItem, GridLayout, ResponsiveGridLayout };
-//# sourceMappingURL=chunk-MXXN7GUE.mjs.map
-//# sourceMappingURL=chunk-MXXN7GUE.mjs.map
+//# sourceMappingURL=chunk-OWK47QTG.mjs.map
+//# sourceMappingURL=chunk-OWK47QTG.mjs.map