react-resizable-panels 2.1.1 → 2.1.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.1.3
+
+- Edge case bug fix for a resize handle unmounting while being dragged (#402)
+
+## 2.1.2
+
+- Suppress invalid layout warning for empty panel groups (#396)
+
 ## 2.1.1
 
 - Fix `onDragging` regression (#391)

package/dist/declarations/src/PanelResizeHandleRegistry.d.ts

@@ -1,6 +1,6 @@
 import { Direction, ResizeEvent } from "./types.js";
 export type ResizeHandlerAction = "down" | "move" | "up";
-export type SetResizeHandlerState = (action: ResizeHandlerAction, isActive: boolean, event: ResizeEvent) => void;
+export type SetResizeHandlerState = (action: ResizeHandlerAction, isActive: boolean, event: ResizeEvent | null) => void;
 export type PointerHitAreaMargins = {
     coarse: number;
     fine: number;

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

@@ -485,6 +485,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1542,7 +1546,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}`);
@@ -2082,6 +2086,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2312,6 +2318,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2329,6 +2336,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -491,6 +491,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1601,7 +1605,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)
     {
@@ -2188,6 +2192,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2418,6 +2424,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2435,6 +2442,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -467,6 +467,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1577,7 +1581,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)
     {
@@ -2164,6 +2168,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2394,6 +2400,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2411,6 +2418,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -461,6 +461,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1518,7 +1522,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}`);
@@ -2058,6 +2062,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2288,6 +2294,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2305,6 +2312,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -487,6 +487,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1544,7 +1548,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}`);
@@ -2084,6 +2088,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2314,6 +2320,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2331,6 +2338,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -498,6 +498,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1608,7 +1612,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)
     {
@@ -2195,6 +2199,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2425,6 +2431,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2442,6 +2449,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -474,6 +474,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1584,7 +1588,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)
     {
@@ -2171,6 +2175,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2401,6 +2407,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2418,6 +2425,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -460,6 +460,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1440,7 +1444,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)
     {
@@ -1963,6 +1967,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2190,6 +2196,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2207,6 +2214,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -436,6 +436,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1416,7 +1420,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)
     {
@@ -1939,6 +1943,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2166,6 +2172,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2183,6 +2190,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -463,6 +463,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1520,7 +1524,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}`);
@@ -2060,6 +2064,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2290,6 +2296,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2307,6 +2314,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -449,6 +449,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1386,7 +1390,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}`);
@@ -1862,6 +1866,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2089,6 +2095,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2106,6 +2113,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

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

@@ -425,6 +425,10 @@ function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins
         intersectingHandles.splice(index, 1);
       }
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }
@@ -1362,7 +1366,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}`);
@@ -1838,6 +1842,8 @@ function PanelGroupWithForwardedRef({
       resizePanel(panelData, nextMaxSize);
     }
   }, [resizePanel]);
+
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback((dragHandleId, event) => {
     const {
       direction
@@ -2065,6 +2071,7 @@ function PanelResizeHandle({
           case "down":
             {
               setState("drag");
+              assert(event, 'Expected event to be defined for "down" action');
               startDragging(resizeHandleId, event);
               const {
                 onDragging
@@ -2082,6 +2089,7 @@ function PanelResizeHandle({
               if (state !== "drag") {
                 setState("hover");
               }
+              assert(event, 'Expected event to be defined for "move" action');
               resizeHandler(event);
               break;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "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

@@ -816,6 +816,7 @@ function PanelGroupWithForwardedRef({
     [resizePanel]
   );
 
+  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
   const startDragging = useCallback(
     (dragHandleId: string, event: ResizeEvent) => {
       const { direction } = committedValuesRef.current;

package/src/PanelResizeHandle.ts

@@ -129,13 +129,15 @@ export function PanelResizeHandle({
     const setResizeHandlerState = (
       action: ResizeHandlerAction,
       isActive: boolean,
-      event: ResizeEvent
+      event: ResizeEvent | null
     ) => {
       if (isActive) {
         switch (action) {
           case "down": {
             setState("drag");
 
+            assert(event, 'Expected event to be defined for "down" action');
+
             startDragging(resizeHandleId, event);
 
             const { onDragging } = callbacksRef.current;
@@ -151,6 +153,8 @@ export function PanelResizeHandle({
               setState("hover");
             }
 
+            assert(event, 'Expected event to be defined for "move" action');
+
             resizeHandler(event);
             break;
           }

package/src/PanelResizeHandleRegistry.ts

@@ -9,7 +9,7 @@ export type ResizeHandlerAction = "down" | "move" | "up";
 export type SetResizeHandlerState = (
   action: ResizeHandlerAction,
   isActive: boolean,
-  event: ResizeEvent
+  event: ResizeEvent | null
 ) => void;
 
 export type PointerHitAreaMargins = {
@@ -83,6 +83,10 @@ export function registerResizeHandle(
       }
 
       updateCursor();
+
+      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
+      // See github.com/bvaughn/react-resizable-panels/issues/402
+      setResizeHandlerState("up", true, null);
     }
   };
 }

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) {