react-resizable-panels 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,8 +1,16 @@
 # Changelog
 
+## 2.1.2
+- Suppress invalid layout warning for empty panel groups (#396)
+
+## 2.1.1
+
+- Fix `onDragging` regression (#391)
+- Fix cursor icon behavior in nested panels (#390)
+
 ## 2.1.0
 
-* Add opt-in support for setting the [`"nonce"` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) for the global cursor style (#386)
+- Add opt-in support for setting the [`"nonce"` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) for the global cursor style (#386)
 - Support disabling global cursor styles (#387)
 
 ## 2.0.23

package/dist/react-resizable-panels.browser.cjs.js

@@ -517,7 +517,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1542,7 +1542,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
       assert(unsafeSize != null, `No layout data found for index ${index}`);
@@ -1992,7 +1992,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -523,7 +523,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1601,7 +1601,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     {
@@ -2098,7 +2098,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.browser.development.esm.js

@@ -499,7 +499,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1577,7 +1577,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     {
@@ -2074,7 +2074,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.browser.esm.js

@@ -493,7 +493,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1518,7 +1518,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
       assert(unsafeSize != null, `No layout data found for index ${index}`);
@@ -1968,7 +1968,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.cjs.js

@@ -519,7 +519,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1544,7 +1544,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
       assert(unsafeSize != null, `No layout data found for index ${index}`);
@@ -1994,7 +1994,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.development.cjs.js

@@ -530,7 +530,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1608,7 +1608,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     {
@@ -2105,7 +2105,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.development.esm.js

@@ -506,7 +506,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1584,7 +1584,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     {
@@ -2081,7 +2081,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.development.node.cjs.js

@@ -492,7 +492,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1440,7 +1440,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     {
@@ -1873,7 +1873,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.development.node.esm.js

@@ -468,7 +468,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1416,7 +1416,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     {
@@ -1849,7 +1849,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.esm.js

@@ -495,7 +495,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1520,7 +1520,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
       assert(unsafeSize != null, `No layout data found for index ${index}`);
@@ -1970,7 +1970,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.node.cjs.js

@@ -481,7 +481,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1386,7 +1386,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
       assert(unsafeSize != null, `No layout data found for index ${index}`);
@@ -1772,7 +1772,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/dist/react-resizable-panels.node.esm.js

@@ -457,7 +457,7 @@ function handlePointerMove(event) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
     updateResizeHandlerStates("up", event);
   }
@@ -1362,7 +1362,7 @@ function validatePanelGroupLayout({
   // Validate layout expectations
   if (nextLayout.length !== panelConstraints.length) {
     throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
       assert(unsafeSize != null, `No layout data found for index ${index}`);
@@ -1748,7 +1748,7 @@ function PanelGroupWithForwardedRef({
         // but updating cursor in this scenario would cause a flicker.
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -61,6 +61,9 @@
   },
   "types": "dist/react-resizable-panels.cjs.d.ts",
   "scripts": {
+    "clear": "pnpm run clear:builds & pnpm run clear:node_modules",
+    "clear:builds": "rm -rf ./packages/*/dist",
+    "clear:node_modules": "rm -rf ./node_modules",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "test": "jest --config=jest.config.js",
     "test:watch": "jest --config=jest.config.js --watch",

package/src/PanelGroup.test.tsx

@@ -418,5 +418,26 @@ describe("PanelGroup", () => {
         ref.current?.setLayout([60, 80]);
       });
     });
+
+    it("should warn about an empty layout", () => {
+      act(() => {
+        root.render(
+          <PanelGroup direction="horizontal" id="group-without-handle">
+            <Panel />
+          </PanelGroup>
+        );
+      });
+
+      // Since the layout is empty, no warning is expected (even though the sizes won't total 100%)
+
+      act(() => {
+        root.render(
+          <PanelGroup
+            direction="horizontal"
+            id="group-without-handle"
+          ></PanelGroup>
+        );
+      });
+    });
   });
 });

package/src/PanelGroup.ts

@@ -676,7 +676,7 @@ function PanelGroupWithForwardedRef({
         if (prevDeltaRef.current != delta) {
           prevDeltaRef.current = delta;
 
-          if (!layoutChanged) {
+          if (!layoutChanged && delta !== 0) {
             // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
             // This mimics VS Code behavior.
             if (isHorizontal) {

package/src/PanelResizeHandle.test.tsx

@@ -336,13 +336,32 @@ describe("PanelResizeHandle", () => {
     expect(onDraggingLeft).toHaveBeenCalledWith(true);
 
     expect(cursorUtils.resetGlobalCursorStyle).not.toHaveBeenCalled();
-    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
+    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalled();
+
+    onDraggingLeft.mockReset();
+
+    act(() => {
+      dispatchPointerEvent("pointermove", leftElement);
+    });
+    expect(onDraggingLeft).not.toHaveBeenCalled();
+
+    act(() => {
+      dispatchPointerEvent("pointerup", leftElement);
+    });
+    expect(onDraggingLeft).toHaveBeenCalledTimes(1);
+    expect(onDraggingLeft).toHaveBeenCalledWith(false);
+
+    onDraggingLeft.mockReset();
+
+    act(() => {
+      dispatchPointerEvent("pointermove", leftElement);
+    });
+    expect(onDraggingLeft).not.toHaveBeenCalled();
 
     act(() => {
       root.unmount();
     });
 
     expect(cursorUtils.resetGlobalCursorStyle).toHaveBeenCalled();
-    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalledTimes(1);
   });
 });

package/src/PanelResizeHandleRegistry.ts

@@ -109,7 +109,7 @@ function handlePointerMove(event: PointerEvent) {
 
   // Edge case (see #340)
   // Detect when the pointer has been released outside an iframe on a different domain
-  if (event.buttons === 0) {
+  if (isPointerDown && event.buttons === 0) {
     isPointerDown = false;
 
     updateResizeHandlerStates("up", event);

package/src/utils/validatePanelGroupLayout.ts

@@ -25,7 +25,10 @@ export function validatePanelGroupLayout({
         .map((size) => `${size}%`)
         .join(", ")}`
     );
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+  } else if (
+    !fuzzyNumbersEqual(nextLayoutTotalSize, 100) &&
+    nextLayout.length > 0
+  ) {
     // This is not ideal so we should warn about it, but it may be recoverable in some cases
     // (especially if the amount is small)
     if (isDevelopment) {