react-grid-layout 2.2.3 → 2.3.0

package/dist/index.js

@@ -2,151 +2,151 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunk7MZZ6T4J_js = require('./chunk-7MZZ6T4J.js');
+var chunkSL4EZ2NU_js = require('./chunk-SL4EZ2NU.js');
 require('./chunk-ZJHF4QM5.js');
-var chunkBPZQUJ7Y_js = require('./chunk-BPZQUJ7Y.js');
-var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
-var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
+var chunkCUP5Y2ZG_js = require('./chunk-CUP5Y2ZG.js');
+var chunkQAIA5KAO_js = require('./chunk-QAIA5KAO.js');
+var chunkVJJIA3HC_js = require('./chunk-VJJIA3HC.js');
 
 
 
 Object.defineProperty(exports, "DEFAULT_BREAKPOINTS", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.DEFAULT_BREAKPOINTS; }
+  get: function () { return chunkSL4EZ2NU_js.DEFAULT_BREAKPOINTS; }
 });
 Object.defineProperty(exports, "DEFAULT_COLS", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.DEFAULT_COLS; }
+  get: function () { return chunkSL4EZ2NU_js.DEFAULT_COLS; }
 });
 Object.defineProperty(exports, "useContainerWidth", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useContainerWidth; }
+  get: function () { return chunkSL4EZ2NU_js.useContainerWidth; }
 });
 Object.defineProperty(exports, "useGridLayout", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useGridLayout; }
+  get: function () { return chunkSL4EZ2NU_js.useGridLayout; }
 });
 Object.defineProperty(exports, "useResponsiveLayout", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useResponsiveLayout; }
+  get: function () { return chunkSL4EZ2NU_js.useResponsiveLayout; }
 });
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridItem; }
+  get: function () { return chunkCUP5Y2ZG_js.GridItem; }
 });
 Object.defineProperty(exports, "GridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkCUP5Y2ZG_js.GridLayout; }
 });
 Object.defineProperty(exports, "ReactGridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkCUP5Y2ZG_js.GridLayout; }
 });
 Object.defineProperty(exports, "Responsive", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.ResponsiveGridLayout; }
+  get: function () { return chunkCUP5Y2ZG_js.ResponsiveGridLayoutWithRef; }
 });
 Object.defineProperty(exports, "ResponsiveGridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.ResponsiveGridLayout; }
+  get: function () { return chunkCUP5Y2ZG_js.ResponsiveGridLayoutWithRef; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkCUP5Y2ZG_js.GridLayout; }
 });
 Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.findOrGenerateResponsiveLayout; }
+  get: function () { return chunkQAIA5KAO_js.findOrGenerateResponsiveLayout; }
 });
 Object.defineProperty(exports, "getBreakpointFromWidth", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.getBreakpointFromWidth; }
+  get: function () { return chunkQAIA5KAO_js.getBreakpointFromWidth; }
 });
 Object.defineProperty(exports, "getColsFromBreakpoint", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.getColsFromBreakpoint; }
+  get: function () { return chunkQAIA5KAO_js.getColsFromBreakpoint; }
 });
 Object.defineProperty(exports, "getCompactor", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.getCompactor; }
+  get: function () { return chunkQAIA5KAO_js.getCompactor; }
 });
 Object.defineProperty(exports, "horizontalCompactor", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.horizontalCompactor; }
+  get: function () { return chunkQAIA5KAO_js.horizontalCompactor; }
 });
 Object.defineProperty(exports, "noCompactor", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.noCompactor; }
+  get: function () { return chunkQAIA5KAO_js.noCompactor; }
 });
 Object.defineProperty(exports, "setTopLeft", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.setTopLeft; }
+  get: function () { return chunkQAIA5KAO_js.setTopLeft; }
 });
 Object.defineProperty(exports, "setTransform", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.setTransform; }
+  get: function () { return chunkQAIA5KAO_js.setTransform; }
 });
 Object.defineProperty(exports, "verticalCompactor", {
   enumerable: true,
-  get: function () { return chunk55DQUWLA_js.verticalCompactor; }
+  get: function () { return chunkQAIA5KAO_js.verticalCompactor; }
 });
 Object.defineProperty(exports, "bottom", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.bottom; }
+  get: function () { return chunkVJJIA3HC_js.bottom; }
 });
 Object.defineProperty(exports, "calcGridItemPosition", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.calcGridItemPosition; }
+  get: function () { return chunkVJJIA3HC_js.calcGridItemPosition; }
 });
 Object.defineProperty(exports, "calcWH", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.calcWH; }
+  get: function () { return chunkVJJIA3HC_js.calcWH; }
 });
 Object.defineProperty(exports, "calcXY", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.calcXY; }
+  get: function () { return chunkVJJIA3HC_js.calcXY; }
 });
 Object.defineProperty(exports, "cloneLayout", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.cloneLayout; }
+  get: function () { return chunkVJJIA3HC_js.cloneLayout; }
 });
 Object.defineProperty(exports, "cloneLayoutItem", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.cloneLayoutItem; }
+  get: function () { return chunkVJJIA3HC_js.cloneLayoutItem; }
 });
 Object.defineProperty(exports, "collides", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.collides; }
+  get: function () { return chunkVJJIA3HC_js.collides; }
 });
 Object.defineProperty(exports, "getAllCollisions", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.getAllCollisions; }
+  get: function () { return chunkVJJIA3HC_js.getAllCollisions; }
 });
 Object.defineProperty(exports, "getFirstCollision", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.getFirstCollision; }
+  get: function () { return chunkVJJIA3HC_js.getFirstCollision; }
 });
 Object.defineProperty(exports, "getLayoutItem", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.getLayoutItem; }
+  get: function () { return chunkVJJIA3HC_js.getLayoutItem; }
 });
 Object.defineProperty(exports, "moveElement", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.moveElement; }
+  get: function () { return chunkVJJIA3HC_js.moveElement; }
 });
 Object.defineProperty(exports, "sortLayoutItems", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.sortLayoutItems; }
+  get: function () { return chunkVJJIA3HC_js.sortLayoutItems; }
 });
 Object.defineProperty(exports, "sortLayoutItemsByColRow", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.sortLayoutItemsByColRow; }
+  get: function () { return chunkVJJIA3HC_js.sortLayoutItemsByColRow; }
 });
 Object.defineProperty(exports, "sortLayoutItemsByRowCol", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.sortLayoutItemsByRowCol; }
+  get: function () { return chunkVJJIA3HC_js.sortLayoutItemsByRowCol; }
 });
 Object.defineProperty(exports, "validateLayout", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.validateLayout; }
+  get: function () { return chunkVJJIA3HC_js.validateLayout; }
 });

package/dist/index.mjs

@@ -1,5 +1,5 @@
-export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-PZLKKWSX.mjs';
+export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout } from './chunk-TW4BCTKD.mjs';
 import './chunk-O3KX3VYW.mjs';
-export { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayout as Responsive, ResponsiveGridLayout, GridLayout as default } from './chunk-WGL5FSZH.mjs';
-export { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-KDANGDDL.mjs';
-export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, collides, getAllCollisions, getFirstCollision, getLayoutItem, moveElement, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout } from './chunk-76RTO6EO.mjs';
+export { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayoutWithRef as Responsive, ResponsiveGridLayoutWithRef as ResponsiveGridLayout, GridLayout as default } from './chunk-Z6CWRR74.mjs';
+export { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-VBU6B7II.mjs';
+export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, collides, getAllCollisions, getFirstCollision, getLayoutItem, moveElement, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout } from './chunk-ZYNFVPDS.mjs';

package/dist/legacy.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default, { ComponentType } from 'react';
-import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BjVraYMQ.mjs';
-import { L as Layout, d as LayoutItem, C as CompactType, R as ResizeHandleAxis, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-jd8MiKM1.mjs';
+import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-RNuyRTPe.mjs';
+import { L as Layout, d as LayoutItem, C as CompactType, R as ResizeHandleAxis, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-DlzNckle.mjs';
 
 /**
  * Legacy props interface for backwards compatibility with v1 API.
@@ -26,6 +26,8 @@ interface LegacyReactGridLayoutProps {
     isBounded?: boolean;
     draggableHandle?: string;
     draggableCancel?: string;
+    /** Allow native touch scroll while dragging (#1793) */
+    allowMobileScroll?: boolean;
     isResizable?: boolean;
     resizeHandles?: ResizeHandleAxis[];
     resizeHandle?: React__default.ReactElement | ((axis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => React__default.ReactElement);
@@ -59,6 +61,14 @@ declare namespace ReactGridLayout {
     var displayName: string;
 }
 
+/**
+ * Legacy ResponsiveReactGridLayout wrapper
+ *
+ * This component wraps the new TypeScript ResponsiveGridLayout to provide
+ * backwards compatibility with the v1 API by converting flat props
+ * to the new composable interface format.
+ */
+
 /**
  * Legacy props interface for backwards compatibility with v1 API.
  * These flat props are converted to composable interfaces internally.
@@ -87,6 +97,8 @@ interface LegacyResponsiveReactGridLayoutProps<B extends Breakpoint = string> {
     isBounded?: boolean;
     draggableHandle?: string;
     draggableCancel?: string;
+    /** Allow native touch scroll while dragging (#1793) */
+    allowMobileScroll?: boolean;
     isResizable?: boolean;
     resizeHandles?: ResizeHandleAxis[];
     resizeHandle?: React__default.ReactElement | ((axis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => React__default.ReactElement);
@@ -110,14 +122,11 @@ interface LegacyResponsiveReactGridLayoutProps<B extends Breakpoint = string> {
     } | false | void;
 }
 /**
- * ResponsiveReactGridLayout - Legacy wrapper component
- *
- * Converts v1 flat props to v2 composable interfaces for backwards compatibility.
+ * v1's Responsive was a class component and accepted a React `ref`. v2 is a
+ * function component, so we forward the ref into `innerRef` to preserve that
+ * contract (#2244).
  */
-declare function ResponsiveReactGridLayout<B extends Breakpoint = string>(props: LegacyResponsiveReactGridLayoutProps<B>): react_jsx_runtime.JSX.Element;
-declare namespace ResponsiveReactGridLayout {
-    var displayName: string;
-}
+declare const ResponsiveReactGridLayout: React__default.ForwardRefExoticComponent<LegacyResponsiveReactGridLayoutProps<string> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * WidthProvider HOC

package/dist/legacy.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default, { ComponentType } from 'react';
-import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BrhkSyZk.js';
-import { L as Layout, d as LayoutItem, C as CompactType, R as ResizeHandleAxis, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-jd8MiKM1.js';
+import { a as GridLayoutProps, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BSYEMZ9d.js';
+import { L as Layout, d as LayoutItem, C as CompactType, R as ResizeHandleAxis, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-DlzNckle.js';
 
 /**
  * Legacy props interface for backwards compatibility with v1 API.
@@ -26,6 +26,8 @@ interface LegacyReactGridLayoutProps {
     isBounded?: boolean;
     draggableHandle?: string;
     draggableCancel?: string;
+    /** Allow native touch scroll while dragging (#1793) */
+    allowMobileScroll?: boolean;
     isResizable?: boolean;
     resizeHandles?: ResizeHandleAxis[];
     resizeHandle?: React__default.ReactElement | ((axis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => React__default.ReactElement);
@@ -59,6 +61,14 @@ declare namespace ReactGridLayout {
     var displayName: string;
 }
 
+/**
+ * Legacy ResponsiveReactGridLayout wrapper
+ *
+ * This component wraps the new TypeScript ResponsiveGridLayout to provide
+ * backwards compatibility with the v1 API by converting flat props
+ * to the new composable interface format.
+ */
+
 /**
  * Legacy props interface for backwards compatibility with v1 API.
  * These flat props are converted to composable interfaces internally.
@@ -87,6 +97,8 @@ interface LegacyResponsiveReactGridLayoutProps<B extends Breakpoint = string> {
     isBounded?: boolean;
     draggableHandle?: string;
     draggableCancel?: string;
+    /** Allow native touch scroll while dragging (#1793) */
+    allowMobileScroll?: boolean;
     isResizable?: boolean;
     resizeHandles?: ResizeHandleAxis[];
     resizeHandle?: React__default.ReactElement | ((axis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => React__default.ReactElement);
@@ -110,14 +122,11 @@ interface LegacyResponsiveReactGridLayoutProps<B extends Breakpoint = string> {
     } | false | void;
 }
 /**
- * ResponsiveReactGridLayout - Legacy wrapper component
- *
- * Converts v1 flat props to v2 composable interfaces for backwards compatibility.
+ * v1's Responsive was a class component and accepted a React `ref`. v2 is a
+ * function component, so we forward the ref into `innerRef` to preserve that
+ * contract (#2244).
  */
-declare function ResponsiveReactGridLayout<B extends Breakpoint = string>(props: LegacyResponsiveReactGridLayoutProps<B>): react_jsx_runtime.JSX.Element;
-declare namespace ResponsiveReactGridLayout {
-    var displayName: string;
-}
+declare const ResponsiveReactGridLayout: React__default.ForwardRefExoticComponent<LegacyResponsiveReactGridLayoutProps<string> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * WidthProvider HOC

package/dist/legacy.js

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkBPZQUJ7Y_js = require('./chunk-BPZQUJ7Y.js');
-var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
-require('./chunk-A5WIFECI.js');
-var react = require('react');
+var chunkCUP5Y2ZG_js = require('./chunk-CUP5Y2ZG.js');
+var chunkQAIA5KAO_js = require('./chunk-QAIA5KAO.js');
+require('./chunk-VJJIA3HC.js');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function ReactGridLayout(props) {
@@ -37,6 +38,7 @@ function ReactGridLayout(props) {
     isBounded = false,
     draggableHandle,
     draggableCancel,
+    allowMobileScroll,
     // Resize behavior
     isResizable = true,
     resizeHandles = ["se"],
@@ -83,6 +85,7 @@ function ReactGridLayout(props) {
     bounded: isBounded,
     handle: draggableHandle,
     cancel: draggableCancel,
+    allowMobileScroll,
     // Set threshold to 0 for backwards compatibility with v1 API
     // v2 API defaults to 3px threshold (fixes #1341, #1401)
     threshold: 0
@@ -97,16 +100,16 @@ function ReactGridLayout(props) {
   };
   let positionStrategy;
   if (!useCSSTransforms) {
-    positionStrategy = chunk55DQUWLA_js.absoluteStrategy;
+    positionStrategy = chunkQAIA5KAO_js.absoluteStrategy;
   } else if (transformScale !== 1) {
-    positionStrategy = chunk55DQUWLA_js.createScaledStrategy(transformScale);
+    positionStrategy = chunkQAIA5KAO_js.createScaledStrategy(transformScale);
   } else {
-    positionStrategy = chunk55DQUWLA_js.transformStrategy;
+    positionStrategy = chunkQAIA5KAO_js.transformStrategy;
   }
-  const compactor = chunk55DQUWLA_js.getCompactor(compactType, allowOverlap, preventCollision);
-  const constraints = isBounded ? [...chunk55DQUWLA_js.defaultConstraints, chunk55DQUWLA_js.containerBounds] : chunk55DQUWLA_js.defaultConstraints;
+  const compactor = chunkQAIA5KAO_js.getCompactor(compactType, allowOverlap, preventCollision);
+  const constraints = isBounded ? [...chunkQAIA5KAO_js.defaultConstraints, chunkQAIA5KAO_js.containerBounds] : chunkQAIA5KAO_js.defaultConstraints;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBPZQUJ7Y_js.GridLayout,
+    chunkCUP5Y2ZG_js.GridLayout,
     {
       width,
       gridConfig,
@@ -137,7 +140,7 @@ function ReactGridLayout(props) {
 }
 ReactGridLayout.displayName = "ReactGridLayout";
 var ReactGridLayout_default = ReactGridLayout;
-function ResponsiveReactGridLayout(props) {
+function ResponsiveReactGridLayoutInner(props) {
   const {
     // Required
     children,
@@ -167,6 +170,7 @@ function ResponsiveReactGridLayout(props) {
     isBounded = false,
     draggableHandle,
     draggableCancel,
+    allowMobileScroll,
     // Resize behavior
     isResizable = true,
     resizeHandles = ["se"],
@@ -204,7 +208,8 @@ function ResponsiveReactGridLayout(props) {
     enabled: isDraggable,
     bounded: isBounded,
     handle: draggableHandle,
-    cancel: draggableCancel
+    cancel: draggableCancel,
+    allowMobileScroll
   };
   const resizeConfig = {
     enabled: isResizable,
@@ -216,15 +221,15 @@ function ResponsiveReactGridLayout(props) {
   };
   let positionStrategy;
   if (!useCSSTransforms) {
-    positionStrategy = chunk55DQUWLA_js.absoluteStrategy;
+    positionStrategy = chunkQAIA5KAO_js.absoluteStrategy;
   } else if (transformScale !== 1) {
-    positionStrategy = chunk55DQUWLA_js.createScaledStrategy(transformScale);
+    positionStrategy = chunkQAIA5KAO_js.createScaledStrategy(transformScale);
   } else {
-    positionStrategy = chunk55DQUWLA_js.transformStrategy;
+    positionStrategy = chunkQAIA5KAO_js.transformStrategy;
   }
-  const compactor = chunk55DQUWLA_js.getCompactor(compactType, allowOverlap, preventCollision);
+  const compactor = chunkQAIA5KAO_js.getCompactor(compactType, allowOverlap, preventCollision);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBPZQUJ7Y_js.ResponsiveGridLayout,
+    chunkCUP5Y2ZG_js.ResponsiveGridLayoutWithRef,
     {
       width,
       breakpoint,
@@ -260,31 +265,36 @@ function ResponsiveReactGridLayout(props) {
     }
   );
 }
+var ResponsiveReactGridLayout = React2__default.default.forwardRef(function ResponsiveReactGridLayoutForward(props, ref) {
+  const { innerRef, ...rest } = props;
+  const effectiveInnerRef = innerRef ?? ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveReactGridLayoutInner, { ...rest, innerRef: effectiveInnerRef });
+});
 ResponsiveReactGridLayout.displayName = "ResponsiveReactGridLayout";
 var ResponsiveReactGridLayout_default = ResponsiveReactGridLayout;
 var layoutClassName = "react-grid-layout";
 function WidthProvider(ComposedComponent) {
   function WidthProviderWrapper(props) {
     const { measureBeforeMount = false, className, style, ...rest } = props;
-    const [width, setWidth] = react.useState(1280);
-    const [mounted, setMounted] = react.useState(false);
-    const elementRef = react.useRef(null);
-    const resizeObserverRef = react.useRef(null);
-    react.useEffect(() => {
+    const [width, setWidth] = React2.useState(1280);
+    const [mounted, setMounted] = React2.useState(false);
+    const elementRef = React2.useRef(null);
+    const resizeObserverRef = React2.useRef(null);
+    React2.useEffect(() => {
       setMounted(true);
     }, []);
-    react.useEffect(() => {
+    React2.useEffect(() => {
       const node = elementRef.current;
       if (!(node instanceof HTMLElement)) return;
       let rafId = null;
       const observer = new ResizeObserver((entries) => {
         if (entries[0]) {
-          const newWidth = entries[0].contentRect.width;
+          const newWidth = Math.round(entries[0].contentRect.width);
           if (rafId !== null) {
             cancelAnimationFrame(rafId);
           }
           rafId = requestAnimationFrame(() => {
-            setWidth(newWidth);
+            setWidth((prev) => prev === newWidth ? prev : newWidth);
             rafId = null;
           });
         }

package/dist/legacy.mjs

@@ -1,7 +1,7 @@
-import { GridLayout, ResponsiveGridLayout } from './chunk-WGL5FSZH.mjs';
-import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-KDANGDDL.mjs';
-import './chunk-76RTO6EO.mjs';
-import { useState, useRef, useEffect } from 'react';
+import { ResponsiveGridLayoutWithRef, GridLayout } from './chunk-Z6CWRR74.mjs';
+import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-VBU6B7II.mjs';
+import './chunk-ZYNFVPDS.mjs';
+import React2, { useState, useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
@@ -29,6 +29,7 @@ function ReactGridLayout(props) {
     isBounded = false,
     draggableHandle,
     draggableCancel,
+    allowMobileScroll,
     // Resize behavior
     isResizable = true,
     resizeHandles = ["se"],
@@ -75,6 +76,7 @@ function ReactGridLayout(props) {
     bounded: isBounded,
     handle: draggableHandle,
     cancel: draggableCancel,
+    allowMobileScroll,
     // Set threshold to 0 for backwards compatibility with v1 API
     // v2 API defaults to 3px threshold (fixes #1341, #1401)
     threshold: 0
@@ -129,7 +131,7 @@ function ReactGridLayout(props) {
 }
 ReactGridLayout.displayName = "ReactGridLayout";
 var ReactGridLayout_default = ReactGridLayout;
-function ResponsiveReactGridLayout(props) {
+function ResponsiveReactGridLayoutInner(props) {
   const {
     // Required
     children,
@@ -159,6 +161,7 @@ function ResponsiveReactGridLayout(props) {
     isBounded = false,
     draggableHandle,
     draggableCancel,
+    allowMobileScroll,
     // Resize behavior
     isResizable = true,
     resizeHandles = ["se"],
@@ -196,7 +199,8 @@ function ResponsiveReactGridLayout(props) {
     enabled: isDraggable,
     bounded: isBounded,
     handle: draggableHandle,
-    cancel: draggableCancel
+    cancel: draggableCancel,
+    allowMobileScroll
   };
   const resizeConfig = {
     enabled: isResizable,
@@ -216,7 +220,7 @@ function ResponsiveReactGridLayout(props) {
   }
   const compactor = getCompactor(compactType, allowOverlap, preventCollision);
   return /* @__PURE__ */ jsx(
-    ResponsiveGridLayout,
+    ResponsiveGridLayoutWithRef,
     {
       width,
       breakpoint,
@@ -252,6 +256,11 @@ function ResponsiveReactGridLayout(props) {
     }
   );
 }
+var ResponsiveReactGridLayout = React2.forwardRef(function ResponsiveReactGridLayoutForward(props, ref) {
+  const { innerRef, ...rest } = props;
+  const effectiveInnerRef = innerRef ?? ref;
+  return /* @__PURE__ */ jsx(ResponsiveReactGridLayoutInner, { ...rest, innerRef: effectiveInnerRef });
+});
 ResponsiveReactGridLayout.displayName = "ResponsiveReactGridLayout";
 var ResponsiveReactGridLayout_default = ResponsiveReactGridLayout;
 var layoutClassName = "react-grid-layout";
@@ -271,12 +280,12 @@ function WidthProvider(ComposedComponent) {
       let rafId = null;
       const observer = new ResizeObserver((entries) => {
         if (entries[0]) {
-          const newWidth = entries[0].contentRect.width;
+          const newWidth = Math.round(entries[0].contentRect.width);
           if (rafId !== null) {
             cancelAnimationFrame(rafId);
           }
           rafId = requestAnimationFrame(() => {
-            setWidth(newWidth);
+            setWidth((prev) => prev === newWidth ? prev : newWidth);
             rafId = null;
           });
         }

package/dist/{position-CSgQSjwQ.d.ts → position-VdYnMJql.d.ts}

@@ -1,4 +1,4 @@
-import { L as Layout, d as LayoutItem, C as CompactType, M as Mutable, b as Compactor, P as Position, p as PositionStrategy, R as ResizeHandleAxis } from './types-jd8MiKM1.js';
+import { L as Layout, d as LayoutItem, C as CompactType, M as Mutable, b as Compactor, P as Position, p as PositionStrategy, R as ResizeHandleAxis } from './types-DlzNckle.js';
 
 /**
  * Core layout manipulation utilities.

package/dist/{position-BV-g3Ezg.d.mts → position-iPly-ecb.d.mts}

@@ -1,4 +1,4 @@
-import { L as Layout, d as LayoutItem, C as CompactType, M as Mutable, b as Compactor, P as Position, p as PositionStrategy, R as ResizeHandleAxis } from './types-jd8MiKM1.mjs';
+import { L as Layout, d as LayoutItem, C as CompactType, M as Mutable, b as Compactor, P as Position, p as PositionStrategy, R as ResizeHandleAxis } from './types-DlzNckle.mjs';
 
 /**
  * Core layout manipulation utilities.

package/dist/react.d.mts

@@ -1,9 +1,9 @@
 import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
-import { p as PositionStrategy, D as DroppingPosition, R as ResizeHandleAxis, f as LayoutConstraint, d as LayoutItem, L as Layout, G as GridDragEvent, c as GridResizeEvent, b as Compactor, a as Breakpoints, B as Breakpoint, e as ResponsiveLayouts } from './types-jd8MiKM1.mjs';
-export { C as CompactType, E as EventCallback, P as Position } from './types-jd8MiKM1.mjs';
-export { G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BjVraYMQ.mjs';
-export { b as bottom, c as cloneLayout, a as cloneLayoutItem, g as getCompactor, d as getLayoutItem, h as horizontalCompactor, n as noCompactor, s as setTopLeft, e as setTransform, f as verticalCompactor } from './position-BV-g3Ezg.mjs';
-export { c as calcGridItemPosition, a as calcWH, b as calcXY } from './calculate-DH4EVtn1.mjs';
+import { p as PositionStrategy, D as DroppingPosition, R as ResizeHandleAxis, f as LayoutConstraint, d as LayoutItem, L as Layout, G as GridDragEvent, c as GridResizeEvent, b as Compactor, a as Breakpoints, B as Breakpoint, e as ResponsiveLayouts } from './types-DlzNckle.mjs';
+export { C as CompactType, E as EventCallback, P as Position } from './types-DlzNckle.mjs';
+export { G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-RNuyRTPe.mjs';
+export { b as bottom, c as cloneLayout, a as cloneLayoutItem, g as getCompactor, d as getLayoutItem, h as horizontalCompactor, n as noCompactor, s as setTopLeft, e as setTransform, f as verticalCompactor } from './position-iPly-ecb.mjs';
+export { c as calcGridItemPosition, a as calcWH, b as calcXY } from './calculate-BXoe3Mfz.mjs';
 
 /**
  * GridItem component
@@ -34,6 +34,8 @@ interface GridItemProps {
     isResizable: boolean;
     /** Whether the item is bounded within the container */
     isBounded: boolean;
+    /** Allow native touch scroll while dragging (react-draggable allowMobileScroll) */
+    allowMobileScroll?: boolean;
     /** Whether the item is static (can't be moved/resized) */
     static?: boolean;
     /** Use CSS transforms instead of top/left */
@@ -102,7 +104,15 @@ interface GridItemProps {
  *
  * Wraps a child element with drag and resize functionality.
  */
-declare function GridItem(props: GridItemProps): ReactElement;
+declare function GridItemInner(props: GridItemProps): ReactElement;
+/**
+ * Memoized GridItem (#2240). v1 had shouldComponentUpdate gating on
+ * position/size; v2's function component re-rendered every item on every
+ * drag/resize move. A shallow compare on the geometry and grid-config props
+ * skips unchanged items. Children are memoized by the consumer (the
+ * documented perf contract), so identity-compare them here.
+ */
+declare const GridItem: React__default.MemoExoticComponent<typeof GridItemInner>;
 
 /**
  * useContainerWidth hook
@@ -122,6 +132,14 @@ interface UseContainerWidthOptions {
      * Defaults to 1280.
      */
     initialWidth?: number;
+    /**
+     * Trailing debounce in milliseconds for width updates from the
+     * ResizeObserver (#2254). While the container is resizing, the rendered
+     * width freezes; once it holds steady for this long, the latest measured
+     * width commits, exactly once per burst of notifications. Absent or 0
+     * keeps immediate updates on every notification.
+     */
+    debounceTimeout?: number;
 }
 interface UseContainerWidthResult {
     /**