react-grid-layout 2.2.3 → 2.2.4

package/dist/{chunk-WGL5FSZH.mjs → chunk-7ZM5LVH2.mjs}

@@ -362,7 +362,11 @@ function GridItem(props) {
         getConstraintContext()
       );
       handler(i, newW, newH, {
-        e: e.nativeEvent,
+        // react-resizable forwards react-draggable's callback event, which is
+        // already a native MouseEvent/TouchEvent and has no `nativeEvent`.
+        // Reading it unconditionally handed consumers `undefined` (#2264).
+        // The drag handlers above pass the raw event for the same reason.
+        e: e.nativeEvent ?? e,
         node,
         size: updatedSize,
         handle: resizeHandle2

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

@@ -5,6 +5,20 @@ var chunkA5WIFECI_js = require('./chunk-A5WIFECI.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 [width, setWidth] = react.useState(initialWidth);
@@ -14,8 +28,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);
       }
@@ -30,12 +44,12 @@ function useContainerWidth(options = {}) {
       observerRef.current = new ResizeObserver((entries) => {
         const entry = entries[0];
         if (entry) {
-          const newWidth = entry.contentRect.width;
+          const newWidth = Math.round(entry.contentRect.width);
           if (rafId !== null) {
             cancelAnimationFrame(rafId);
           }
           rafId = requestAnimationFrame(() => {
-            setWidth(newWidth);
+            setWidth((prev) => prev === newWidth ? prev : newWidth);
             rafId = null;
           });
         }

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

@@ -3,6 +3,20 @@ import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement
 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 [width, setWidth] = useState(initialWidth);
@@ -12,8 +26,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);
       }
@@ -28,12 +42,12 @@ function useContainerWidth(options = {}) {
       observerRef.current = new ResizeObserver((entries) => {
         const entry = entries[0];
         if (entry) {
-          const newWidth = entry.contentRect.width;
+          const newWidth = Math.round(entry.contentRect.width);
           if (rafId !== null) {
             cancelAnimationFrame(rafId);
           }
           rafId = requestAnimationFrame(() => {
-            setWidth(newWidth);
+            setWidth((prev) => prev === newWidth ? prev : newWidth);
             rafId = null;
           });
         }

package/dist/{chunk-BPZQUJ7Y.js → chunk-QAWP6PEK.js}

@@ -369,7 +369,11 @@ function GridItem(props) {
         getConstraintContext()
       );
       handler(i, newW, newH, {
-        e: e.nativeEvent,
+        // react-resizable forwards react-draggable's callback event, which is
+        // already a native MouseEvent/TouchEvent and has no `nativeEvent`.
+        // Reading it unconditionally handed consumers `undefined` (#2264).
+        // The drag handlers above pass the raw event for the same reason.
+        e: e.nativeEvent ?? e,
         node,
         size: updatedSize,
         handle: resizeHandle2

package/dist/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunk7MZZ6T4J_js = require('./chunk-7MZZ6T4J.js');
+var chunkBMN6M2VL_js = require('./chunk-BMN6M2VL.js');
 require('./chunk-ZJHF4QM5.js');
-var chunkBPZQUJ7Y_js = require('./chunk-BPZQUJ7Y.js');
+var chunkQAWP6PEK_js = require('./chunk-QAWP6PEK.js');
 var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
 var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
 
@@ -12,47 +12,47 @@ var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
 
 Object.defineProperty(exports, "DEFAULT_BREAKPOINTS", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.DEFAULT_BREAKPOINTS; }
+  get: function () { return chunkBMN6M2VL_js.DEFAULT_BREAKPOINTS; }
 });
 Object.defineProperty(exports, "DEFAULT_COLS", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.DEFAULT_COLS; }
+  get: function () { return chunkBMN6M2VL_js.DEFAULT_COLS; }
 });
 Object.defineProperty(exports, "useContainerWidth", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useContainerWidth; }
+  get: function () { return chunkBMN6M2VL_js.useContainerWidth; }
 });
 Object.defineProperty(exports, "useGridLayout", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useGridLayout; }
+  get: function () { return chunkBMN6M2VL_js.useGridLayout; }
 });
 Object.defineProperty(exports, "useResponsiveLayout", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useResponsiveLayout; }
+  get: function () { return chunkBMN6M2VL_js.useResponsiveLayout; }
 });
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridItem; }
+  get: function () { return chunkQAWP6PEK_js.GridItem; }
 });
 Object.defineProperty(exports, "GridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkQAWP6PEK_js.GridLayout; }
 });
 Object.defineProperty(exports, "ReactGridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkQAWP6PEK_js.GridLayout; }
 });
 Object.defineProperty(exports, "Responsive", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.ResponsiveGridLayout; }
+  get: function () { return chunkQAWP6PEK_js.ResponsiveGridLayout; }
 });
 Object.defineProperty(exports, "ResponsiveGridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.ResponsiveGridLayout; }
+  get: function () { return chunkQAWP6PEK_js.ResponsiveGridLayout; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkQAWP6PEK_js.GridLayout; }
 });
 Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
   enumerable: true,

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-LY5GT7Q2.mjs';
 import './chunk-O3KX3VYW.mjs';
-export { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayout as Responsive, ResponsiveGridLayout, GridLayout as default } from './chunk-WGL5FSZH.mjs';
+export { GridItem, GridLayout, GridLayout as ReactGridLayout, ResponsiveGridLayout as Responsive, ResponsiveGridLayout, GridLayout as default } from './chunk-7ZM5LVH2.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';

package/dist/legacy.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkBPZQUJ7Y_js = require('./chunk-BPZQUJ7Y.js');
+var chunkQAWP6PEK_js = require('./chunk-QAWP6PEK.js');
 var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
 require('./chunk-A5WIFECI.js');
 var react = require('react');
@@ -106,7 +106,7 @@ function ReactGridLayout(props) {
   const compactor = chunk55DQUWLA_js.getCompactor(compactType, allowOverlap, preventCollision);
   const constraints = isBounded ? [...chunk55DQUWLA_js.defaultConstraints, chunk55DQUWLA_js.containerBounds] : chunk55DQUWLA_js.defaultConstraints;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBPZQUJ7Y_js.GridLayout,
+    chunkQAWP6PEK_js.GridLayout,
     {
       width,
       gridConfig,
@@ -224,7 +224,7 @@ function ResponsiveReactGridLayout(props) {
   }
   const compactor = chunk55DQUWLA_js.getCompactor(compactType, allowOverlap, preventCollision);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBPZQUJ7Y_js.ResponsiveGridLayout,
+    chunkQAWP6PEK_js.ResponsiveGridLayout,
     {
       width,
       breakpoint,
@@ -279,12 +279,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/legacy.mjs

@@ -1,4 +1,4 @@
-import { GridLayout, ResponsiveGridLayout } from './chunk-WGL5FSZH.mjs';
+import { GridLayout, ResponsiveGridLayout } from './chunk-7ZM5LVH2.mjs';
 import { createScaledStrategy, getCompactor, defaultConstraints, containerBounds, absoluteStrategy, transformStrategy } from './chunk-KDANGDDL.mjs';
 import './chunk-76RTO6EO.mjs';
 import { useState, useRef, useEffect } from 'react';
@@ -271,12 +271,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/react.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk7MZZ6T4J_js = require('./chunk-7MZZ6T4J.js');
+var chunkBMN6M2VL_js = require('./chunk-BMN6M2VL.js');
 require('./chunk-ZJHF4QM5.js');
-var chunkBPZQUJ7Y_js = require('./chunk-BPZQUJ7Y.js');
+var chunkQAWP6PEK_js = require('./chunk-QAWP6PEK.js');
 var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
 var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
 
@@ -10,35 +10,35 @@ var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
 
 Object.defineProperty(exports, "DEFAULT_BREAKPOINTS", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.DEFAULT_BREAKPOINTS; }
+  get: function () { return chunkBMN6M2VL_js.DEFAULT_BREAKPOINTS; }
 });
 Object.defineProperty(exports, "DEFAULT_COLS", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.DEFAULT_COLS; }
+  get: function () { return chunkBMN6M2VL_js.DEFAULT_COLS; }
 });
 Object.defineProperty(exports, "useContainerWidth", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useContainerWidth; }
+  get: function () { return chunkBMN6M2VL_js.useContainerWidth; }
 });
 Object.defineProperty(exports, "useGridLayout", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useGridLayout; }
+  get: function () { return chunkBMN6M2VL_js.useGridLayout; }
 });
 Object.defineProperty(exports, "useResponsiveLayout", {
   enumerable: true,
-  get: function () { return chunk7MZZ6T4J_js.useResponsiveLayout; }
+  get: function () { return chunkBMN6M2VL_js.useResponsiveLayout; }
 });
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridItem; }
+  get: function () { return chunkQAWP6PEK_js.GridItem; }
 });
 Object.defineProperty(exports, "GridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.GridLayout; }
+  get: function () { return chunkQAWP6PEK_js.GridLayout; }
 });
 Object.defineProperty(exports, "ResponsiveGridLayout", {
   enumerable: true,
-  get: function () { return chunkBPZQUJ7Y_js.ResponsiveGridLayout; }
+  get: function () { return chunkQAWP6PEK_js.ResponsiveGridLayout; }
 });
 Object.defineProperty(exports, "getCompactor", {
   enumerable: true,

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-LY5GT7Q2.mjs';
 import './chunk-O3KX3VYW.mjs';
-export { GridItem, GridLayout, ResponsiveGridLayout } from './chunk-WGL5FSZH.mjs';
+export { GridItem, GridLayout, ResponsiveGridLayout } from './chunk-7ZM5LVH2.mjs';
 export { getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-KDANGDDL.mjs';
 export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, getLayoutItem } from './chunk-76RTO6EO.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",