react-grid-layout 2.0.0 → 2.1.1

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

@@ -1,5 +1,5 @@
-import { setTransform, setTopLeft, perc, resizeItemInDirection, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, bottom, getLayoutItem, cloneLayoutItem, moveElement, compact, withLayoutItem, getAllCollisions, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, cloneLayout, getIndentationValue, correctBounds } from './chunk-4HNUMWQK.mjs';
-import { calcXY, calcGridItemWHPx, clamp, calcGridColWidth, calcWH, calcGridItemPosition } from './chunk-2KUHNJXF.mjs';
+import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, compact, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-FLITZMQC.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';
 import { Resizable } from 'react-resizable';
@@ -39,6 +39,9 @@ function GridItem(props) {
     i,
     resizeHandles,
     resizeHandle,
+    constraints = defaultConstraints,
+    layoutItem,
+    layout = [],
     onDragStart: onDragStartProp,
     onDrag: onDragProp,
     onDragStop: onDragStopProp,
@@ -70,6 +73,33 @@ function GridItem(props) {
     }),
     [cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
   );
+  const constraintContext = useMemo(
+    () => ({
+      cols,
+      maxRows,
+      containerWidth,
+      containerHeight: 0,
+      // Auto-height grids don't have a fixed container height
+      rowHeight,
+      margin,
+      layout
+    }),
+    [cols, maxRows, containerWidth, rowHeight, margin, layout]
+  );
+  const effectiveLayoutItem = useMemo(
+    () => layoutItem ?? {
+      i,
+      x,
+      y,
+      w,
+      h,
+      minW,
+      maxW,
+      minH,
+      maxH
+    },
+    [layoutItem, i, x, y, w, h, minW, maxW, minH, maxH]
+  );
   const createStyle = useCallback(
     (pos2) => {
       if (useCSSTransforms) {
@@ -104,12 +134,17 @@ function GridItem(props) {
       };
       dragPositionRef.current = newPosition;
       setDragging(true);
-      const { x: newX, y: newY } = calcXY(
+      const rawPos = calcXYRaw(
         positionParams,
         newPosition.top,
-        newPosition.left,
-        w,
-        h
+        newPosition.left
+      );
+      const { x: newX, y: newY } = applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        constraintContext
       );
       onDragStartProp(i, newX, newY, {
         e,
@@ -117,7 +152,15 @@ function GridItem(props) {
         newPosition
       });
     },
-    [onDragStartProp, transformScale, positionParams, w, h, i]
+    [
+      onDragStartProp,
+      transformScale,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext,
+      i
+    ]
   );
   const onDrag = useCallback(
     (e, { node, deltaX, deltaY }) => {
@@ -136,7 +179,14 @@ function GridItem(props) {
       }
       const newPosition = { top, left };
       dragPositionRef.current = newPosition;
-      const { x: newX, y: newY } = calcXY(positionParams, top, left, w, h);
+      const rawPos = calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        constraintContext
+      );
       onDragProp(i, newX, newY, {
         e,
         node,
@@ -153,7 +203,10 @@ function GridItem(props) {
       positionParams,
       containerWidth,
       w,
-      i
+      i,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext
     ]
   );
   const onDragStop = useCallback(
@@ -163,14 +216,29 @@ function GridItem(props) {
       const newPosition = { top, left };
       setDragging(false);
       dragPositionRef.current = { left: 0, top: 0 };
-      const { x: newX, y: newY } = calcXY(positionParams, top, left, w, h);
+      const rawPos = calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        constraintContext
+      );
       onDragStopProp(i, newX, newY, {
         e,
         node,
         newPosition
       });
     },
-    [onDragStopProp, dragging, positionParams, w, h, i]
+    [
+      onDragStopProp,
+      dragging,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext,
+      i
+    ]
   );
   const onResizeHandler = useCallback(
     (e, { node, size, handle: resizeHandle2 }, position, handlerName) => {
@@ -192,16 +260,19 @@ function GridItem(props) {
         };
       }
       resizePositionRef.current = updatedSize;
-      let { w: newW, h: newH } = calcWH(
+      const rawSize = calcWHRaw(
         positionParams,
         updatedSize.width,
-        updatedSize.height,
-        x,
-        y,
-        resizeHandle2
+        updatedSize.height
+      );
+      const { w: newW, h: newH } = applySizeConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawSize.w,
+        rawSize.h,
+        resizeHandle2,
+        constraintContext
       );
-      newW = clamp(newW, Math.max(minW, 1), maxW);
-      newH = clamp(newH, minH, maxH);
       handler(i, newW, newH, {
         e: e.nativeEvent,
         node,
@@ -217,11 +288,10 @@ function GridItem(props) {
       positionParams,
       x,
       y,
-      minW,
-      maxW,
-      minH,
-      maxH,
-      i
+      i,
+      constraints,
+      effectiveLayoutItem,
+      constraintContext
     ]
   );
   const handleResizeStart = useCallback(
@@ -306,14 +376,12 @@ function GridItem(props) {
     resizing ? resizePositionRef.current : null
   );
   const child = React2.Children.only(children);
-  const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols, 0).width;
-  const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH);
-  const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH);
-  const minConstraints = [mins.width, mins.height];
-  const maxConstraints = [
-    Math.min(maxes.width, maxWidth),
-    Math.min(maxes.height, Infinity)
+  const minGridUnit = calcGridItemPosition(positionParams, 0, 0, 1, 1);
+  const minConstraints = [
+    minGridUnit.width,
+    minGridUnit.height
   ];
+  const maxConstraints = [Infinity, Infinity];
   const childProps = child.props;
   const childClassName = childProps["className"];
   const childStyle = childProps["style"];
@@ -443,6 +511,7 @@ function GridLayout(props) {
     dropConfig: dropConfigProp,
     positionStrategy = defaultPositionStrategy,
     compactor: compactorProp,
+    constraints = defaultConstraints,
     // Layout data
     layout: propsLayout = [],
     droppingItem: droppingItemProp,
@@ -529,6 +598,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)) {
@@ -537,6 +608,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;
@@ -561,6 +633,7 @@ function GridLayout(props) {
     compactType,
     allowOverlap,
     activeDrag,
+    droppingDOMNode,
     layout
   ]);
   useEffect(() => {
@@ -577,7 +650,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,
@@ -587,16 +661,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,
@@ -606,7 +681,7 @@ function GridLayout(props) {
         i
       };
       const newLayout = moveElement(
-        layout,
+        currentLayout,
         l,
         x,
         y,
@@ -622,16 +697,17 @@ function GridLayout(props) {
       );
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, compactType, cols, allowOverlap, onDragProp]
+    [preventCollision, compactType, cols, allowOverlap, 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,
@@ -654,7 +730,6 @@ function GridLayout(props) {
     },
     [
       activeDrag,
-      layout,
       preventCollision,
       compactType,
       cols,
@@ -665,23 +740,25 @@ function GridLayout(props) {
   );
   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)) {
@@ -698,7 +775,7 @@ function GridLayout(props) {
           shouldMoveItem = true;
         }
         if (preventCollision && !allowOverlap) {
-          const collisions = getAllCollisions(layout, {
+          const collisions = getAllCollisions(currentLayout, {
             ...item,
             w,
             h,
@@ -753,13 +830,14 @@ function GridLayout(props) {
       );
       setActiveDrag(placeholder);
     },
-    [layout, preventCollision, allowOverlap, compactType, cols, onResizeProp]
+    [preventCollision, allowOverlap, compactType, cols, 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 = allowOverlap ? currentLayout : compact(currentLayout, compactType, cols);
       onResizeStopProp(
         finalLayout,
         oldResizeItem,
@@ -778,11 +856,12 @@ function GridLayout(props) {
         onLayoutChange(finalLayout);
       }
     },
-    [layout, allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
+    [allowOverlap, compactType, cols, onResizeStopProp, onLayoutChange]
   );
   const removeDroppingPlaceholder = useCallback(() => {
+    const currentLayout = layoutRef.current;
     const newLayout = compact(
-      layout.filter((l) => l.i !== droppingItem.i),
+      currentLayout.filter((l) => l.i !== droppingItem.i),
       compactType,
       cols,
       allowOverlap
@@ -791,7 +870,7 @@ function GridLayout(props) {
     setDroppingDOMNode(null);
     setActiveDrag(null);
     setDroppingPosition(void 0);
-  }, [layout, droppingItem.i, compactType, cols, allowOverlap]);
+  }, [droppingItem.i, compactType, cols, allowOverlap]);
   const handleDragOver = useCallback(
     (e) => {
       e.preventDefault();
@@ -801,42 +880,62 @@ function GridLayout(props) {
       )) {
         return false;
       }
-      const onDragOverResult = onDropDragOverProp(e);
-      if (onDragOverResult === false) {
+      const rawResult = onDropDragOverProp(e);
+      if (rawResult === false) {
         if (droppingDOMNode) {
           removeDroppingPlaceholder();
         }
         return false;
       }
+      const {
+        dragOffsetX = 0,
+        dragOffsetY = 0,
+        ...onDragOverResult
+      } = rawResult ?? {};
       const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
       const gridRect = e.currentTarget.getBoundingClientRect();
-      const layerX = e.clientX - gridRect.left;
-      const layerY = e.clientY - gridRect.top;
+      const positionParams = {
+        cols,
+        margin,
+        maxRows,
+        rowHeight,
+        containerWidth: width,
+        containerPadding: effectiveContainerPadding
+      };
+      const actualColWidth = calcGridColWidth(positionParams);
+      const itemPixelWidth = calcGridItemWHPx(
+        finalDroppingItem.w,
+        actualColWidth,
+        margin[0]
+      );
+      const itemPixelHeight = calcGridItemWHPx(
+        finalDroppingItem.h,
+        rowHeight,
+        margin[1]
+      );
+      const itemCenterOffsetX = itemPixelWidth / 2;
+      const itemCenterOffsetY = itemPixelHeight / 2;
+      const rawGridX = e.clientX - gridRect.left + dragOffsetX - itemCenterOffsetX;
+      const rawGridY = e.clientY - gridRect.top + dragOffsetY - itemCenterOffsetY;
+      const clampedGridX = Math.max(0, rawGridX);
+      const clampedGridY = Math.max(0, rawGridY);
       const newDroppingPosition = {
-        left: layerX / transformScale,
-        top: layerY / transformScale,
+        left: clampedGridX / transformScale,
+        top: clampedGridY / transformScale,
         e: e.nativeEvent
       };
       if (!droppingDOMNode) {
-        const positionParams = {
-          cols,
-          margin,
-          maxRows,
-          rowHeight,
-          containerWidth: width,
-          containerPadding: effectiveContainerPadding
-        };
         const calculatedPosition = calcXY(
           positionParams,
-          layerY,
-          layerX,
+          clampedGridY,
+          clampedGridX,
           finalDroppingItem.w,
           finalDroppingItem.h
         );
         setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, finalDroppingItem.i));
         setDroppingPosition(newDroppingPosition);
         setLayout([
-          ...layout,
+          ...layoutRef.current,
           {
             ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -846,7 +945,7 @@ function GridLayout(props) {
           }
         ]);
       } else if (droppingPosition) {
-        const shouldUpdate = droppingPosition.left !== layerX || droppingPosition.top !== layerY;
+        const shouldUpdate = droppingPosition.left !== newDroppingPosition.left || droppingPosition.top !== newDroppingPosition.top;
         if (shouldUpdate) {
           setDroppingPosition(newDroppingPosition);
         }
@@ -864,8 +963,7 @@ function GridLayout(props) {
       maxRows,
       rowHeight,
       width,
-      effectiveContainerPadding,
-      layout
+      effectiveContainerPadding
     ]
   );
   const handleDragLeave = useCallback(
@@ -888,12 +986,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) => {
@@ -941,6 +1040,9 @@ function GridLayout(props) {
           droppingPosition: isDroppingItem ? droppingPosition : void 0,
           resizeHandles: resizeHandlesOptions,
           resizeHandle: resizeHandleElement,
+          constraints,
+          layoutItem: l,
+          layout,
           children: child
         },
         l.i
@@ -970,7 +1072,8 @@ function GridLayout(props) {
       transformScale,
       droppingPosition,
       resizeHandles,
-      resizeHandle
+      resizeHandle,
+      constraints
     ]
   );
   const renderPlaceholder = () => {
@@ -995,6 +1098,8 @@ function GridLayout(props) {
         isBounded: false,
         useCSSTransforms,
         transformScale,
+        constraints,
+        layout,
         children: /* @__PURE__ */ jsx("div", {})
       }
     );
@@ -1133,9 +1238,13 @@ function ResponsiveGridLayout(props) {
   const prevColsRef = useRef(colsConfig);
   const prevLayoutsRef = useRef(propsLayouts);
   const prevCompactTypeRef = useRef(compactType);
+  const layoutsRef = useRef(layouts);
   useEffect(() => {
+    layoutsRef.current = layouts;
+  }, [layouts]);
+  const derivedLayout = useMemo(() => {
     if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {
-      const newLayout = findOrGenerateResponsiveLayout(
+      return findOrGenerateResponsiveLayout(
         propsLayouts,
         breakpoints,
         breakpoint,
@@ -1143,34 +1252,41 @@ function ResponsiveGridLayout(props) {
         cols,
         compactType
       );
-      setLayout(newLayout);
+    }
+    return null;
+  }, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
+  const effectiveLayout = derivedLayout ?? layout;
+  useEffect(() => {
+    if (derivedLayout !== null) {
+      setLayout(derivedLayout);
       setLayouts(propsLayouts);
+      layoutsRef.current = propsLayouts;
       prevLayoutsRef.current = propsLayouts;
     }
-  }, [propsLayouts, breakpoints, breakpoint, cols, compactType]);
+  }, [derivedLayout, propsLayouts]);
   useEffect(() => {
     if (compactType !== prevCompactTypeRef.current) {
       const newLayout = compact(
-        cloneLayout(layout),
+        cloneLayout(effectiveLayout),
         compactType,
         cols,
         allowOverlap
       );
       const newLayouts = {
-        ...layouts,
+        ...layoutsRef.current,
         [breakpoint]: newLayout
       };
       setLayout(newLayout);
       setLayouts(newLayouts);
+      layoutsRef.current = newLayouts;
       onLayoutChange(newLayout, newLayouts);
       prevCompactTypeRef.current = compactType;
     }
   }, [
     compactType,
-    layout,
+    effectiveLayout,
     cols,
     allowOverlap,
-    layouts,
     breakpoint,
     onLayoutChange
   ]);
@@ -1187,7 +1303,7 @@ function ResponsiveGridLayout(props) {
       const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);
       const lastBreakpoint = breakpoint;
       if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
-        const newLayouts = { ...layouts };
+        const newLayouts = { ...layoutsRef.current };
         if (!newLayouts[lastBreakpoint]) {
           newLayouts[lastBreakpoint] = cloneLayout(layout);
         }
@@ -1211,6 +1327,7 @@ function ResponsiveGridLayout(props) {
         setCols(newCols);
         setLayout(newLayout);
         setLayouts(newLayouts);
+        layoutsRef.current = newLayouts;
         onBreakpointChange(newBreakpoint, newCols);
         onLayoutChange(newLayout, newLayouts);
       }
@@ -1236,7 +1353,6 @@ function ResponsiveGridLayout(props) {
     breakpoint,
     cols,
     layout,
-    layouts,
     children,
     compactType,
     allowOverlap,
@@ -1248,15 +1364,17 @@ function ResponsiveGridLayout(props) {
   ]);
   const handleLayoutChange = useCallback(
     (newLayout) => {
+      const currentLayouts = layoutsRef.current;
       const newLayouts = {
-        ...layouts,
+        ...currentLayouts,
         [breakpoint]: newLayout
       };
       setLayout(newLayout);
       setLayouts(newLayouts);
+      layoutsRef.current = newLayouts;
       onLayoutChange(newLayout, newLayouts);
     },
-    [layouts, breakpoint, onLayoutChange]
+    [breakpoint, onLayoutChange]
   );
   const currentMargin = useMemo(() => {
     return getIndentationValue(
@@ -1289,12 +1407,12 @@ function ResponsiveGridLayout(props) {
       gridConfig,
       compactor,
       onLayoutChange: handleLayoutChange,
-      layout,
+      layout: effectiveLayout,
       children
     }
   );
 }
 
 export { GridItem, GridLayout, ResponsiveGridLayout };
-//# sourceMappingURL=chunk-R35HZZTA.mjs.map
-//# sourceMappingURL=chunk-R35HZZTA.mjs.map
+//# sourceMappingURL=chunk-PLWMASMX.mjs.map
+//# sourceMappingURL=chunk-PLWMASMX.mjs.map