react-grid-layout 2.2.3 → 2.3.0

package/dist/{chunk-55DQUWLA.js → chunk-QAIA5KAO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
+var chunkVJJIA3HC_js = require('./chunk-VJJIA3HC.js');
 
 // src/core/constraints.ts
 function clamp(value, min, max) {
@@ -40,6 +40,15 @@ var containerBounds = {
       x: clamp(x, 0, Math.max(0, cols - item.w)),
       y: clamp(y, 0, Math.max(0, visibleRows - item.h))
     };
+  },
+  constrainSize(item, w, h, handle, { cols, maxRows, containerHeight, rowHeight, margin }) {
+    const visibleRows = containerHeight > 0 ? Math.floor((containerHeight + margin[1]) / (rowHeight + margin[1])) : maxRows;
+    const maxW = handle === "w" || handle === "nw" || handle === "sw" ? item.x + item.w : cols - item.x;
+    const maxH = handle === "n" || handle === "nw" || handle === "ne" ? item.y + item.h : visibleRows - item.y;
+    return {
+      w: clamp(w, 1, Math.max(1, maxW)),
+      h: clamp(h, 1, Math.max(1, maxH))
+    };
   }
 };
 var boundedX = {
@@ -343,7 +352,9 @@ var defaultResizeConfig = {
 };
 var defaultDropConfig = {
   enabled: false,
-  defaultItem: { w: 1, h: 1 }
+  defaultItem: { w: 1, h: 1 },
+  touchEnabled: true,
+  touchDragSource: "[data-rgl-draggable]"
 };
 
 // src/core/compactors.ts
@@ -351,13 +362,13 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis, hasStatics)
   const sizeProp = axis === "x" ? "w" : "h";
   item[axis] += 1;
   const itemIndex = layout.findIndex((l) => l.i === item.i);
-  const layoutHasStatics = hasStatics ?? chunkA5WIFECI_js.getStatics(layout).length > 0;
+  const layoutHasStatics = hasStatics ?? chunkVJJIA3HC_js.getStatics(layout).length > 0;
   for (let i = itemIndex + 1; i < layout.length; i++) {
     const otherItem = layout[i];
     if (otherItem === void 0) continue;
     if (otherItem.static) continue;
     if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
-    if (chunkA5WIFECI_js.collides(item, otherItem)) {
+    if (chunkVJJIA3HC_js.collides(item, otherItem)) {
       resolveCompactionCollision(
         layout,
         otherItem,
@@ -373,11 +384,11 @@ function compactItemVertical(compareWith, l, fullLayout, maxY) {
   l.x = Math.max(l.x, 0);
   l.y = Math.max(l.y, 0);
   l.y = Math.min(maxY, l.y);
-  while (l.y > 0 && !chunkA5WIFECI_js.getFirstCollision(compareWith, l)) {
+  while (l.y > 0 && !chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) {
     l.y--;
   }
   let collision;
-  while ((collision = chunkA5WIFECI_js.getFirstCollision(compareWith, l)) !== void 0) {
+  while ((collision = chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) !== void 0) {
     resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
   }
   l.y = Math.max(l.y, 0);
@@ -386,16 +397,16 @@ function compactItemVertical(compareWith, l, fullLayout, maxY) {
 function compactItemHorizontal(compareWith, l, cols, fullLayout) {
   l.x = Math.max(l.x, 0);
   l.y = Math.max(l.y, 0);
-  while (l.x > 0 && !chunkA5WIFECI_js.getFirstCollision(compareWith, l)) {
+  while (l.x > 0 && !chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) {
     l.x--;
   }
   let collision;
-  while ((collision = chunkA5WIFECI_js.getFirstCollision(compareWith, l)) !== void 0) {
+  while ((collision = chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) !== void 0) {
     resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
     if (l.x + l.w > cols) {
       l.x = cols - l.w;
       l.y++;
-      while (l.x > 0 && !chunkA5WIFECI_js.getFirstCollision(compareWith, l)) {
+      while (l.x > 0 && !chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) {
         l.x--;
       }
     }
@@ -407,14 +418,14 @@ var verticalCompactor = {
   type: "vertical",
   allowOverlap: false,
   compact(layout, _cols) {
-    const compareWith = chunkA5WIFECI_js.getStatics(layout);
-    let maxY = chunkA5WIFECI_js.bottom(compareWith);
-    const sorted = chunkA5WIFECI_js.sortLayoutItemsByRowCol(layout);
+    const compareWith = chunkVJJIA3HC_js.getStatics(layout);
+    let maxY = chunkVJJIA3HC_js.bottom(compareWith);
+    const sorted = chunkVJJIA3HC_js.sortLayoutItemsByRowCol(layout);
     const out = new Array(layout.length);
     for (let i = 0; i < sorted.length; i++) {
       const sortedItem = sorted[i];
       if (sortedItem === void 0) continue;
-      let l = chunkA5WIFECI_js.cloneLayoutItem(sortedItem);
+      let l = chunkVJJIA3HC_js.cloneLayoutItem(sortedItem);
       if (!l.static) {
         l = compactItemVertical(compareWith, l, sorted, maxY);
         maxY = Math.max(maxY, l.y + l.h);
@@ -431,13 +442,13 @@ var horizontalCompactor = {
   type: "horizontal",
   allowOverlap: false,
   compact(layout, cols) {
-    const compareWith = chunkA5WIFECI_js.getStatics(layout);
-    const sorted = chunkA5WIFECI_js.sortLayoutItemsByColRow(layout);
+    const compareWith = chunkVJJIA3HC_js.getStatics(layout);
+    const sorted = chunkVJJIA3HC_js.sortLayoutItemsByColRow(layout);
     const out = new Array(layout.length);
     for (let i = 0; i < sorted.length; i++) {
       const sortedItem = sorted[i];
       if (sortedItem === void 0) continue;
-      let l = chunkA5WIFECI_js.cloneLayoutItem(sortedItem);
+      let l = chunkVJJIA3HC_js.cloneLayoutItem(sortedItem);
       if (!l.static) {
         l = compactItemHorizontal(compareWith, l, cols, sorted);
         compareWith.push(l);
@@ -453,21 +464,21 @@ var noCompactor = {
   type: null,
   allowOverlap: false,
   compact(layout, _cols) {
-    return chunkA5WIFECI_js.cloneLayout(layout);
+    return chunkVJJIA3HC_js.cloneLayout(layout);
   }
 };
 var verticalOverlapCompactor = {
   ...verticalCompactor,
   allowOverlap: true,
   compact(layout, _cols) {
-    return chunkA5WIFECI_js.cloneLayout(layout);
+    return chunkVJJIA3HC_js.cloneLayout(layout);
   }
 };
 var horizontalOverlapCompactor = {
   ...horizontalCompactor,
   allowOverlap: true,
   compact(layout, _cols) {
-    return chunkA5WIFECI_js.cloneLayout(layout);
+    return chunkVJJIA3HC_js.cloneLayout(layout);
   }
 };
 var noOverlapCompactor = {
@@ -525,7 +536,7 @@ function getColsFromBreakpoint(breakpoint, cols) {
 function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactTypeOrCompactor) {
   const existingLayout = layouts[breakpoint];
   if (existingLayout) {
-    return chunkA5WIFECI_js.cloneLayout(existingLayout);
+    return chunkVJJIA3HC_js.cloneLayout(existingLayout);
   }
   let layout = layouts[lastBreakpoint];
   const breakpointsSorted = sortBreakpoints(breakpoints);
@@ -541,8 +552,8 @@ function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBr
       break;
     }
   }
-  const clonedLayout = chunkA5WIFECI_js.cloneLayout(layout || []);
-  const corrected = chunkA5WIFECI_js.correctBounds(clonedLayout, { cols });
+  const clonedLayout = chunkVJJIA3HC_js.cloneLayout(layout || []);
+  const corrected = chunkVJJIA3HC_js.correctBounds(clonedLayout, { cols });
   const compactor = typeof compactTypeOrCompactor === "object" && compactTypeOrCompactor !== null ? compactTypeOrCompactor : getCompactor(compactTypeOrCompactor);
   return compactor.compact(corrected, cols);
 }

package/dist/{chunk-7MZZ6T4J.js → chunk-SL4EZ2NU.js}

@@ -1,12 +1,30 @@
 'use strict';
 
-var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
-var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
+var chunkQAIA5KAO_js = require('./chunk-QAIA5KAO.js');
+var chunkVJJIA3HC_js = require('./chunk-VJJIA3HC.js');
 var react = require('react');
 var fastEquals = require('fast-equals');
 
+function getContentWidth(node) {
+  const style = typeof globalThis.getComputedStyle === "function" ? globalThis.getComputedStyle(node) : null;
+  if (!style) return node.clientWidth;
+  const px = (value) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+  const computed = Number.parseFloat(style.width);
+  if (Number.isFinite(computed)) return Math.max(0, computed);
+  return Math.max(
+    0,
+    node.clientWidth - px(style.paddingLeft) - px(style.paddingRight)
+  );
+}
 function useContainerWidth(options = {}) {
-  const { measureBeforeMount = false, initialWidth = 1280 } = options;
+  const {
+    measureBeforeMount = false,
+    initialWidth = 1280,
+    debounceTimeout
+  } = options;
   const [width, setWidth] = react.useState(initialWidth);
   const [mounted, setMounted] = react.useState(!measureBeforeMount);
   const containerRef = react.useRef(null);
@@ -14,8 +32,8 @@ function useContainerWidth(options = {}) {
   const measureWidth = react.useCallback(() => {
     const node = containerRef.current;
     if (node) {
-      const newWidth = node.offsetWidth;
-      setWidth(newWidth);
+      const newWidth = Math.round(getContentWidth(node));
+      setWidth((prev) => prev === newWidth ? prev : newWidth);
       if (!mounted) {
         setMounted(true);
       }
@@ -27,15 +45,24 @@ function useContainerWidth(options = {}) {
     measureWidth();
     if (typeof ResizeObserver !== "undefined") {
       let rafId = null;
+      let debounceTimer;
       observerRef.current = new ResizeObserver((entries) => {
         const entry = entries[0];
         if (entry) {
-          const newWidth = entry.contentRect.width;
+          const newWidth = Math.round(entry.contentRect.width);
+          if (debounceTimeout && debounceTimeout > 0) {
+            window.clearTimeout(debounceTimer);
+            debounceTimer = window.setTimeout(() => {
+              setWidth((prev) => prev === newWidth ? prev : newWidth);
+              debounceTimer = void 0;
+            }, debounceTimeout);
+            return;
+          }
           if (rafId !== null) {
             cancelAnimationFrame(rafId);
           }
           rafId = requestAnimationFrame(() => {
-            setWidth(newWidth);
+            setWidth((prev) => prev === newWidth ? prev : newWidth);
             rafId = null;
           });
         }
@@ -45,6 +72,8 @@ function useContainerWidth(options = {}) {
         if (rafId !== null) {
           cancelAnimationFrame(rafId);
         }
+        window.clearTimeout(debounceTimer);
+        debounceTimer = void 0;
         if (observerRef.current) {
           observerRef.current.disconnect();
           observerRef.current = null;
@@ -57,7 +86,7 @@ function useContainerWidth(options = {}) {
         observerRef.current = null;
       }
     };
-  }, [measureWidth]);
+  }, [measureWidth, debounceTimeout]);
   return {
     width,
     mounted,
@@ -71,11 +100,11 @@ function useGridLayout(options) {
     cols,
     preventCollision = false,
     onLayoutChange,
-    compactor = chunk55DQUWLA_js.verticalCompactor
+    compactor = chunkQAIA5KAO_js.verticalCompactor
   } = options;
   const isDraggingRef = react.useRef(false);
   const [layout, setLayoutState] = react.useState(() => {
-    const corrected = chunkA5WIFECI_js.correctBounds(chunkA5WIFECI_js.cloneLayout(propsLayout), { cols });
+    const corrected = chunkVJJIA3HC_js.correctBounds(chunkVJJIA3HC_js.cloneLayout(propsLayout), { cols });
     return compactor.compact(corrected, cols);
   });
   const [dragState, setDragState] = react.useState({
@@ -95,7 +124,7 @@ function useGridLayout(options) {
   const prevLayoutRef = react.useRef(layout);
   const setLayout = react.useCallback(
     (newLayout) => {
-      const corrected = chunkA5WIFECI_js.correctBounds(chunkA5WIFECI_js.cloneLayout(newLayout), { cols });
+      const corrected = chunkVJJIA3HC_js.correctBounds(chunkVJJIA3HC_js.cloneLayout(newLayout), { cols });
       const compacted = compactor.compact(corrected, cols);
       setLayoutState(compacted);
     },
@@ -115,11 +144,11 @@ function useGridLayout(options) {
   }, [layout, onLayoutChange]);
   const onDragStart = react.useCallback(
     (itemId, x, y) => {
-      const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
+      const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
       if (!item) return null;
       isDraggingRef.current = true;
       const placeholder = {
-        ...chunkA5WIFECI_js.cloneLayoutItem(item),
+        ...chunkVJJIA3HC_js.cloneLayoutItem(item),
         x,
         y,
         static: false,
@@ -127,8 +156,8 @@ function useGridLayout(options) {
       };
       setDragState({
         activeDrag: placeholder,
-        oldDragItem: chunkA5WIFECI_js.cloneLayoutItem(item),
-        oldLayout: chunkA5WIFECI_js.cloneLayout(layout)
+        oldDragItem: chunkVJJIA3HC_js.cloneLayoutItem(item),
+        oldLayout: chunkVJJIA3HC_js.cloneLayout(layout)
       });
       return placeholder;
     },
@@ -136,13 +165,13 @@ function useGridLayout(options) {
   );
   const onDrag = react.useCallback(
     (itemId, x, y) => {
-      const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
+      const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
       if (!item) return;
       setDragState((prev) => ({
         ...prev,
         activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
       }));
-      const newLayout = chunkA5WIFECI_js.moveElement(
+      const newLayout = chunkVJJIA3HC_js.moveElement(
         layout,
         item,
         x,
@@ -161,9 +190,9 @@ function useGridLayout(options) {
   );
   const onDragStop = react.useCallback(
     (itemId, x, y) => {
-      const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
+      const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
       if (!item) return;
-      const newLayout = chunkA5WIFECI_js.moveElement(
+      const newLayout = chunkVJJIA3HC_js.moveElement(
         layout,
         item,
         x,
@@ -187,12 +216,12 @@ function useGridLayout(options) {
   );
   const onResizeStart = react.useCallback(
     (itemId) => {
-      const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
+      const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
       if (!item) return null;
       setResizeState({
         resizing: true,
-        oldResizeItem: chunkA5WIFECI_js.cloneLayoutItem(item),
-        oldLayout: chunkA5WIFECI_js.cloneLayout(layout)
+        oldResizeItem: chunkVJJIA3HC_js.cloneLayoutItem(item),
+        oldLayout: chunkVJJIA3HC_js.cloneLayout(layout)
       });
       return item;
     },
@@ -213,7 +242,7 @@ function useGridLayout(options) {
         }
         return item;
       });
-      const corrected = chunkA5WIFECI_js.correctBounds(newLayout, { cols });
+      const corrected = chunkVJJIA3HC_js.correctBounds(newLayout, { cols });
       const compacted = compactor.compact(corrected, cols);
       setLayoutState(compacted);
     },
@@ -232,10 +261,10 @@ function useGridLayout(options) {
   );
   const onDropDragOver = react.useCallback(
     (droppingItem, position) => {
-      const existingItem = chunkA5WIFECI_js.getLayoutItem(layout, droppingItem.i);
+      const existingItem = chunkVJJIA3HC_js.getLayoutItem(layout, droppingItem.i);
       if (!existingItem) {
         const newLayout = [...layout, droppingItem];
-        const corrected = chunkA5WIFECI_js.correctBounds(newLayout, { cols });
+        const corrected = chunkVJJIA3HC_js.correctBounds(newLayout, { cols });
         const compacted = compactor.compact(corrected, cols);
         setLayoutState(compacted);
       }
@@ -267,7 +296,7 @@ function useGridLayout(options) {
         }
         return item;
       });
-      const corrected = chunkA5WIFECI_js.correctBounds(newLayout, { cols });
+      const corrected = chunkVJJIA3HC_js.correctBounds(newLayout, { cols });
       const compacted = compactor.compact(corrected, cols);
       setLayoutState(compacted);
       setDropState({
@@ -277,7 +306,7 @@ function useGridLayout(options) {
     },
     [layout, cols, compactor]
   );
-  const containerHeight = react.useMemo(() => chunkA5WIFECI_js.bottom(layout), [layout]);
+  const containerHeight = react.useMemo(() => chunkVJJIA3HC_js.bottom(layout), [layout]);
   const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
   return {
     layout,
@@ -319,23 +348,23 @@ function useResponsiveLayout(options) {
     breakpoints = DEFAULT_BREAKPOINTS,
     cols: colsConfig = DEFAULT_COLS,
     layouts: propsLayouts = {},
-    compactor = chunk55DQUWLA_js.verticalCompactor,
+    compactor = chunkQAIA5KAO_js.verticalCompactor,
     onBreakpointChange,
     onLayoutChange,
     onWidthChange
   } = options;
   const sortedBreakpoints = react.useMemo(
-    () => chunk55DQUWLA_js.sortBreakpoints(breakpoints),
+    () => chunkQAIA5KAO_js.sortBreakpoints(breakpoints),
     [breakpoints]
   );
   const initialBreakpoint = react.useMemo(
-    () => chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width),
+    () => chunkQAIA5KAO_js.getBreakpointFromWidth(breakpoints, width),
     // Only calculate on mount, not on width changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const initialCols = react.useMemo(
-    () => chunk55DQUWLA_js.getColsFromBreakpoint(initialBreakpoint, colsConfig),
+    () => chunkQAIA5KAO_js.getColsFromBreakpoint(initialBreakpoint, colsConfig),
     [initialBreakpoint, colsConfig]
   );
   const [breakpoint, setBreakpoint] = react.useState(initialBreakpoint);
@@ -345,7 +374,7 @@ function useResponsiveLayout(options) {
     for (const bp of sortedBreakpoints) {
       const layout2 = propsLayouts[bp];
       if (layout2) {
-        cloned[bp] = chunkA5WIFECI_js.cloneLayout(layout2);
+        cloned[bp] = chunkVJJIA3HC_js.cloneLayout(layout2);
       }
     }
     return cloned;
@@ -355,7 +384,7 @@ function useResponsiveLayout(options) {
   const prevPropsLayoutsRef = react.useRef(propsLayouts);
   const prevLayoutsRef = react.useRef(layouts);
   const layout = react.useMemo(() => {
-    return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
+    return chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
       layouts,
       breakpoints,
       breakpoint,
@@ -367,7 +396,7 @@ function useResponsiveLayout(options) {
   const setLayoutForBreakpoint = react.useCallback((bp, newLayout) => {
     setLayoutsState((prev) => ({
       ...prev,
-      [bp]: chunkA5WIFECI_js.cloneLayout(newLayout)
+      [bp]: chunkVJJIA3HC_js.cloneLayout(newLayout)
     }));
   }, []);
   const setLayouts = react.useCallback((newLayouts) => {
@@ -375,7 +404,7 @@ function useResponsiveLayout(options) {
     for (const bp of Object.keys(newLayouts)) {
       const layoutForBp = newLayouts[bp];
       if (layoutForBp) {
-        cloned[bp] = chunkA5WIFECI_js.cloneLayout(layoutForBp);
+        cloned[bp] = chunkVJJIA3HC_js.cloneLayout(layoutForBp);
       }
     }
     setLayoutsState(cloned);
@@ -383,11 +412,11 @@ function useResponsiveLayout(options) {
   react.useEffect(() => {
     if (prevWidthRef.current === width) return;
     prevWidthRef.current = width;
-    const newBreakpoint = chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
-    const newCols = chunk55DQUWLA_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
+    const newBreakpoint = chunkQAIA5KAO_js.getBreakpointFromWidth(breakpoints, width);
+    const newCols = chunkQAIA5KAO_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
     onWidthChange?.(width, [10, 10], newCols, null);
     if (newBreakpoint !== breakpoint) {
-      const newLayout = chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
+      const newLayout = chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
         layouts,
         breakpoints,
         newBreakpoint,

package/dist/{chunk-PZLKKWSX.mjs → chunk-TW4BCTKD.mjs}

@@ -1,10 +1,28 @@
-import { verticalCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-KDANGDDL.mjs';
-import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-76RTO6EO.mjs';
+import { verticalCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-VBU6B7II.mjs';
+import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-ZYNFVPDS.mjs';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { deepEqual } from 'fast-equals';
 
+function getContentWidth(node) {
+  const style = typeof globalThis.getComputedStyle === "function" ? globalThis.getComputedStyle(node) : null;
+  if (!style) return node.clientWidth;
+  const px = (value) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+  const computed = Number.parseFloat(style.width);
+  if (Number.isFinite(computed)) return Math.max(0, computed);
+  return Math.max(
+    0,
+    node.clientWidth - px(style.paddingLeft) - px(style.paddingRight)
+  );
+}
 function useContainerWidth(options = {}) {
-  const { measureBeforeMount = false, initialWidth = 1280 } = options;
+  const {
+    measureBeforeMount = false,
+    initialWidth = 1280,
+    debounceTimeout
+  } = options;
   const [width, setWidth] = useState(initialWidth);
   const [mounted, setMounted] = useState(!measureBeforeMount);
   const containerRef = useRef(null);
@@ -12,8 +30,8 @@ function useContainerWidth(options = {}) {
   const measureWidth = useCallback(() => {
     const node = containerRef.current;
     if (node) {
-      const newWidth = node.offsetWidth;
-      setWidth(newWidth);
+      const newWidth = Math.round(getContentWidth(node));
+      setWidth((prev) => prev === newWidth ? prev : newWidth);
       if (!mounted) {
         setMounted(true);
       }
@@ -25,15 +43,24 @@ function useContainerWidth(options = {}) {
     measureWidth();
     if (typeof ResizeObserver !== "undefined") {
       let rafId = null;
+      let debounceTimer;
       observerRef.current = new ResizeObserver((entries) => {
         const entry = entries[0];
         if (entry) {
-          const newWidth = entry.contentRect.width;
+          const newWidth = Math.round(entry.contentRect.width);
+          if (debounceTimeout && debounceTimeout > 0) {
+            window.clearTimeout(debounceTimer);
+            debounceTimer = window.setTimeout(() => {
+              setWidth((prev) => prev === newWidth ? prev : newWidth);
+              debounceTimer = void 0;
+            }, debounceTimeout);
+            return;
+          }
           if (rafId !== null) {
             cancelAnimationFrame(rafId);
           }
           rafId = requestAnimationFrame(() => {
-            setWidth(newWidth);
+            setWidth((prev) => prev === newWidth ? prev : newWidth);
             rafId = null;
           });
         }
@@ -43,6 +70,8 @@ function useContainerWidth(options = {}) {
         if (rafId !== null) {
           cancelAnimationFrame(rafId);
         }
+        window.clearTimeout(debounceTimer);
+        debounceTimer = void 0;
         if (observerRef.current) {
           observerRef.current.disconnect();
           observerRef.current = null;
@@ -55,7 +84,7 @@ function useContainerWidth(options = {}) {
         observerRef.current = null;
       }
     };
-  }, [measureWidth]);
+  }, [measureWidth, debounceTimeout]);
   return {
     width,
     mounted,

package/dist/{chunk-KDANGDDL.mjs → chunk-VBU6B7II.mjs}

@@ -1,4 +1,4 @@
-import { getStatics, collides, getFirstCollision, bottom, sortLayoutItemsByRowCol, cloneLayoutItem, sortLayoutItemsByColRow, cloneLayout, correctBounds } from './chunk-76RTO6EO.mjs';
+import { getStatics, collides, getFirstCollision, bottom, sortLayoutItemsByRowCol, cloneLayoutItem, sortLayoutItemsByColRow, cloneLayout, correctBounds } from './chunk-ZYNFVPDS.mjs';
 
 // src/core/constraints.ts
 function clamp(value, min, max) {
@@ -38,6 +38,15 @@ var containerBounds = {
       x: clamp(x, 0, Math.max(0, cols - item.w)),
       y: clamp(y, 0, Math.max(0, visibleRows - item.h))
     };
+  },
+  constrainSize(item, w, h, handle, { cols, maxRows, containerHeight, rowHeight, margin }) {
+    const visibleRows = containerHeight > 0 ? Math.floor((containerHeight + margin[1]) / (rowHeight + margin[1])) : maxRows;
+    const maxW = handle === "w" || handle === "nw" || handle === "sw" ? item.x + item.w : cols - item.x;
+    const maxH = handle === "n" || handle === "nw" || handle === "ne" ? item.y + item.h : visibleRows - item.y;
+    return {
+      w: clamp(w, 1, Math.max(1, maxW)),
+      h: clamp(h, 1, Math.max(1, maxH))
+    };
   }
 };
 var boundedX = {
@@ -341,7 +350,9 @@ var defaultResizeConfig = {
 };
 var defaultDropConfig = {
   enabled: false,
-  defaultItem: { w: 1, h: 1 }
+  defaultItem: { w: 1, h: 1 },
+  touchEnabled: true,
+  touchDragSource: "[data-rgl-draggable]"
 };
 
 // src/core/compactors.ts

package/dist/{chunk-A5WIFECI.js → chunk-VJJIA3HC.js}

@@ -268,6 +268,9 @@ function correctBounds(layout, bounds) {
       l.x = 0;
       l.w = bounds.cols;
     }
+    if (l.y === Infinity) {
+      l.y = bottom(collidesWith);
+    }
     if (!l.static) {
       collidesWith.push(l);
     } else {
@@ -330,7 +333,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
   return resultLayout;
 }
 function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
-  const compactH = compactType === "horizontal";
+  const compactH = compactType === "horizontal" || compactType === "wrap";
   const compactV = compactType === "vertical";
   const preventCollision = collidesWith.static;
   if (isUserAction) {
@@ -366,8 +369,9 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
         compactType);
     }
     if (collisionNorth && compactType === null) {
-      collidesWith.y = itemToMove.y;
-      itemToMove.y = itemToMove.y + itemToMove.h;
+      const newCollidesY = itemToMove.y;
+      collidesWith.y = newCollidesY;
+      itemToMove.y = newCollidesY + collidesWith.h;
       return [...layout];
     }
     if (collisionWest && compactH) {