react-grid-layout 2.2.3 → 2.3.0

package/dist/react.d.ts

@@ -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.js';
-export { C as CompactType, E as EventCallback, P as Position } from './types-jd8MiKM1.js';
-export { G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BrhkSyZk.js';
-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-CSgQSjwQ.js';
-export { c as calcGridItemPosition, a as calcWH, b as calcXY } from './calculate-rP3DHexe.js';
+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.js';
+export { C as CompactType, E as EventCallback, P as Position } from './types-DlzNckle.js';
+export { G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-BSYEMZ9d.js';
+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-VdYnMJql.js';
+export { c as calcGridItemPosition, a as calcWH, b as calcXY } from './calculate-Tc1WkIxl.js';
 
 /**
  * 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 {
     /**

package/dist/react.js

@@ -1,94 +1,94 @@
 'use strict';
 
-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, "ResponsiveGridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.ResponsiveGridLayout; }
+  get: function () { return chunkCUP5Y2ZG_js.ResponsiveGridLayoutWithRef; }
 });
 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, "getLayoutItem", {
   enumerable: true,
-  get: function () { return chunkA5WIFECI_js.getLayoutItem; }
+  get: function () { return chunkVJJIA3HC_js.getLayoutItem; }
 });

package/dist/react.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, ResponsiveGridLayout } from './chunk-WGL5FSZH.mjs';
-export { getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-KDANGDDL.mjs';
-export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, getLayoutItem } from './chunk-76RTO6EO.mjs';
+export { GridItem, GridLayout, ResponsiveGridLayoutWithRef as ResponsiveGridLayout } from './chunk-Z6CWRR74.mjs';
+export { getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-VBU6B7II.mjs';
+export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, getLayoutItem } from './chunk-ZYNFVPDS.mjs';

package/dist/{responsive-BrTV_0tK.d.mts → responsive-BVtXrrTF.d.mts}

@@ -1,4 +1,4 @@
-import { d as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, e as ResponsiveLayouts, a as Breakpoints, b as Compactor } from './types-jd8MiKM1.mjs';
+import { d as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, e as ResponsiveLayouts, a as Breakpoints, b as Compactor } from './types-DlzNckle.mjs';
 
 /**
  * Collision detection utilities for grid layouts.

package/dist/{responsive-C_YtBQYq.d.ts → responsive-C6s9JAJU.d.ts}

@@ -1,4 +1,4 @@
-import { d as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, e as ResponsiveLayouts, a as Breakpoints, b as Compactor } from './types-jd8MiKM1.js';
+import { d as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, e as ResponsiveLayouts, a as Breakpoints, b as Compactor } from './types-DlzNckle.js';
 
 /**
  * Collision detection utilities for grid layouts.

package/dist/{types-jd8MiKM1.d.mts → types-DlzNckle.d.mts}

@@ -369,6 +369,14 @@ interface DragConfig {
      * @default 3
      */
     threshold: number;
+    /**
+     * Allow the browser's native scroll on touch devices while dragging.
+     * react-draggable calls preventDefault() on touchstart unless this is set,
+     * which suppresses child onClick and touch scroll. Set true when grid items
+     * contain interactive children or the page must scroll on touch.
+     * @default false
+     */
+    allowMobileScroll?: boolean;
 }
 /** Default drag configuration */
 declare const defaultDragConfig: DragConfig;
@@ -412,6 +420,20 @@ interface DropConfig {
         dragOffsetX?: number;
         dragOffsetY?: number;
     } | false | void;
+    /**
+     * Enable touch-to-drop for external drag sources on mobile.
+     * Touch events never fire HTML5 dragover/drop, so the grid translates
+     * touchmove/touchend into the drop pipeline when this is on.
+     * Only elements matching `touchDragSource` are captured (default: true).
+     */
+    touchEnabled?: boolean;
+    /**
+     * CSS selector for elements that can be touch-dragged onto the grid.
+     * The adapter only listens for touchstart on matching elements, so an
+     * explicit marker prevents surprise scroll-hijacking.
+     * Defaults to `[data-rgl-draggable]` - add that attribute to your source.
+     */
+    touchDragSource?: string;
 }
 /** Default drop configuration */
 declare const defaultDropConfig: DropConfig;

package/dist/{types-jd8MiKM1.d.ts → types-DlzNckle.d.ts}

@@ -369,6 +369,14 @@ interface DragConfig {
      * @default 3
      */
     threshold: number;
+    /**
+     * Allow the browser's native scroll on touch devices while dragging.
+     * react-draggable calls preventDefault() on touchstart unless this is set,
+     * which suppresses child onClick and touch scroll. Set true when grid items
+     * contain interactive children or the page must scroll on touch.
+     * @default false
+     */
+    allowMobileScroll?: boolean;
 }
 /** Default drag configuration */
 declare const defaultDragConfig: DragConfig;
@@ -412,6 +420,20 @@ interface DropConfig {
         dragOffsetX?: number;
         dragOffsetY?: number;
     } | false | void;
+    /**
+     * Enable touch-to-drop for external drag sources on mobile.
+     * Touch events never fire HTML5 dragover/drop, so the grid translates
+     * touchmove/touchend into the drop pipeline when this is on.
+     * Only elements matching `touchDragSource` are captured (default: true).
+     */
+    touchEnabled?: boolean;
+    /**
+     * CSS selector for elements that can be touch-dragged onto the grid.
+     * The adapter only listens for touchstart on matching elements, so an
+     * explicit marker prevents surprise scroll-hijacking.
+     * Defaults to `[data-rgl-draggable]` - add that attribute to your source.
+     */
+    touchDragSource?: string;
 }
 /** Default drop configuration */
 declare const defaultDropConfig: DropConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -109,7 +109,7 @@
     "fast-equals": "^4.0.3",
     "prop-types": "^15.8.1",
     "react-draggable": "^4.4.6",
-    "react-resizable": "^3.1.3",
+    "react-resizable": "^3.2.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "_dependencyNotes": {
@@ -126,6 +126,7 @@
     "@babel/register": "^7.28.6",
     "@eslint/compat": "^2.0.2",
     "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.62.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.2",