react-resizable-panels 2.0.9 → 2.0.11

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

@@ -246,15 +246,15 @@ function isTouchEvent(event) {
 function getResizeEventCoordinates(event) {
   if (isMouseEvent(event)) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.clientX,
+      y: event.clientY
     };
   } else if (isTouchEvent(event)) {
     const touch = event.touches[0];
-    if (touch && touch.pageX && touch.pageY) {
+    if (touch && touch.clientX && touch.clientY) {
       return {
-        x: touch.pageX,
-        y: touch.pageY
+        x: touch.clientX,
+        y: touch.clientY
       };
     }
   }
@@ -300,7 +300,7 @@ function compare(a, b) {
     b = ancestors.b.pop();
     common_ancestor = a;
   }
-  assert(common_ancestor);
+  assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
   const z_indexes = {
     a: get_z_index(find_stacking_context(ancestors.a)),
     b: get_z_index(find_stacking_context(ancestors.b))
@@ -358,7 +358,7 @@ function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
     const node = nodes[i];
-    assert(node);
+    assert(node, "Missing node");
     if (creates_stacking_context(node)) return node;
   }
   return null;
@@ -645,7 +645,7 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
-function assert(expectedCondition, message = "Assertion failed!") {
+function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
     throw Error(message);
@@ -676,7 +676,7 @@ function resizePanel({
   size
 }) {
   const panelConstraints = panelConstraintsArray[panelIndex];
-  assert(panelConstraints != null);
+  assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
   let {
     collapsedSize = 0,
     collapsible,
@@ -714,8 +714,8 @@ function adjustLayoutByDelta({
   }
   const nextLayout = [...prevLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
-  assert(firstPivotIndex != null);
-  assert(secondPivotIndex != null);
+  assert(firstPivotIndex != null, "Invalid first pivot index");
+  assert(secondPivotIndex != null, "Invalid second pivot index");
   let deltaApplied = 0;
 
   //const DEBUG = [];
@@ -741,19 +741,18 @@ function adjustLayoutByDelta({
         // Check if we should expand a collapsed panel
         const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(panelConstraints, `Panel constraints not found for index ${index}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
 
         //DEBUG.push(`edge case check 1: ${index}`);
         //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (panelConstraints.collapsible) {
+        if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const {
-            collapsedSize = 0,
-            minSize = 0
-          } = panelConstraints;
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
@@ -770,22 +769,18 @@ function adjustLayoutByDelta({
         // Check if we should collapse a panel at its minimum size
         const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(panelConstraints, `No panel constraints found for index ${index}`);
         const {
-          collapsible
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
         } = panelConstraints;
 
         //DEBUG.push(`edge case check 2: ${index}`);
         //DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const {
-            collapsedSize = 0,
-            minSize = 0
-          } = panelConstraints;
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
@@ -815,7 +810,7 @@ function adjustLayoutByDelta({
     //DEBUG.push("pre calc...");
     while (true) {
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
         panelIndex: index,
@@ -846,7 +841,7 @@ function adjustLayoutByDelta({
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -883,7 +878,7 @@ function adjustLayoutByDelta({
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
     const prevSize = prevLayout[pivotIndex];
-    assert(prevSize != null);
+    assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
       panelConstraints: panelConstraintsArray,
@@ -901,7 +896,7 @@ function adjustLayoutByDelta({
       let index = pivotIndex;
       while (index >= 0 && index < panelConstraintsArray.length) {
         const prevSize = nextLayout[index];
-        assert(prevSize != null);
+        assert(prevSize != null, `Previous layout not found for panel index ${index}`);
         const unsafeSize = prevSize + deltaRemaining;
         const safeSize = resizePanel({
           panelConstraints: panelConstraintsArray,
@@ -1004,17 +999,17 @@ function useWindowSplitterPanelGroupBehavior({
       return;
     }
     const eagerValues = eagerValuesRef.current;
-    assert(eagerValues);
+    assert(eagerValues, `Eager values not found`);
     const {
       panelDataArray
     } = eagerValues;
     const groupElement = getPanelGroupElement(groupId, panelGroupElement);
     assert(groupElement != null, `No group found for id "${groupId}"`);
     const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    assert(handles);
+    assert(handles, `No resize handles found for group id "${groupId}"`);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      assert(handleId);
+      assert(handleId, `Resize handle element has no handle id attribute`);
       const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
       if (idBefore == null || idAfter == null) {
         return () => {};
@@ -1030,7 +1025,7 @@ function useWindowSplitterPanelGroupBehavior({
               const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
               if (index >= 0) {
                 const panelData = panelDataArray[index];
-                assert(panelData);
+                assert(panelData, `No panel data found for index ${index}`);
                 const size = layout[index];
                 const {
                   collapsedSize = 0,
@@ -1089,15 +1084,15 @@ function getResizeEventCursorPosition(direction, event) {
 function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
   const isHorizontal = direction === "horizontal";
   const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
-  assert(handleElement);
+  assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
   const groupId = handleElement.getAttribute("data-panel-group-id");
-  assert(groupId);
+  assert(groupId, `Resize handle element has no group id attribute`);
   let {
     initialCursorPosition
   } = initialDragState;
   const cursorPosition = getResizeEventCursorPosition(direction, event);
   const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-  assert(groupElement);
+  assert(groupElement, `No group element found for id "${groupId}"`);
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
   const offsetPixels = cursorPosition - initialCursorPosition;
@@ -1151,7 +1146,7 @@ function calculateDeltaPercentage(event, dragHandleId, direction, initialDragSta
 function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
   layout.forEach((size, index) => {
     const panelData = panelsArray[index];
-    assert(panelData);
+    assert(panelData, `Panel data not found for index ${index}`);
     const {
       callbacks,
       constraints,
@@ -1329,7 +1324,7 @@ function validatePanelConstraints({
   {
     const warnings = [];
     const panelConstraints = panelConstraintsArray[panelIndex];
-    assert(panelConstraints);
+    assert(panelConstraints, `No panel constraints found for index ${panelIndex}`);
     const {
       collapsedSize = 0,
       collapsible = false,
@@ -1383,7 +1378,7 @@ function validatePanelGroupLayout({
     }
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
-      assert(unsafeSize != null);
+      assert(unsafeSize != null, `No layout data found for index ${index}`);
       const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
       nextLayout[index] = safeSize;
     }
@@ -1393,7 +1388,7 @@ function validatePanelGroupLayout({
   // First pass: Validate the proposed layout given each panel's constraints
   for (let index = 0; index < panelConstraints.length; index++) {
     const unsafeSize = nextLayout[index];
-    assert(unsafeSize != null);
+    assert(unsafeSize != null, `No layout data found for index ${index}`);
     const safeSize = resizePanel({
       panelConstraints,
       panelIndex: index,
@@ -1410,7 +1405,7 @@ function validatePanelGroupLayout({
   if (!fuzzyNumbersEqual(remainingSize, 0)) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const prevSize = nextLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `No layout data found for index ${index}`);
       const unsafeSize = prevSize + remainingSize;
       const safeSize = resizePanel({
         panelConstraints,
@@ -1579,7 +1574,7 @@ function PanelGroupWithForwardedRef({
         const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
         for (let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++) {
           const panelData = panelDataArray[panelIndex];
-          assert(panelData);
+          assert(panelData, `Panel data not found for index ${panelIndex}`);
           const isValid = validatePanelConstraints({
             panelConstraints,
             panelId: panelData.id,
@@ -1610,7 +1605,7 @@ function PanelGroupWithForwardedRef({
         panelSize,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
-      assert(panelSize != null);
+      assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
       if (panelSize !== collapsedSize) {
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
@@ -1687,7 +1682,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return panelSize;
   }, []);
 
@@ -1731,7 +1726,7 @@ function PanelGroupWithForwardedRef({
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return !collapsible || panelSize > collapsedSize;
   }, []);
   const registerPanel = useCallback(panelData => {
@@ -1842,7 +1837,7 @@ function PanelGroupWithForwardedRef({
       panelSize,
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
@@ -1879,7 +1874,10 @@ function PanelGroupWithForwardedRef({
     const {
       panelSize: prevPanelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(prevPanelSize != null);
+    if (prevPanelSize == null) {
+      // It's possible that the panels in this group have changed since the last render
+      return;
+    }
     if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
       if (prevCollapsedSize !== nextCollapsedSize) {
         resizePanel(panelData, nextCollapsedSize);
@@ -1901,7 +1899,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
-    assert(handleElement);
+    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
     const initialCursorPosition = getResizeEventCursorPosition(direction, event);
     setDragState({
       dragHandleId,
@@ -2030,10 +2028,10 @@ function useWindowSplitterResizeHandlerBehavior({
           {
             event.preventDefault();
             const groupId = handleElement.getAttribute("data-panel-group-id");
-            assert(groupId);
+            assert(groupId, `No group element found for id "${groupId}"`);
             const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
             const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
-            assert(index !== null);
+            assert(index !== null, `No resize element found for id "${handleId}"`);
             const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
             const nextHandle = handles[nextIndex];
             nextHandle.focus();
@@ -2102,7 +2100,7 @@ function PanelResizeHandle({
       return;
     }
     const element = elementRef.current;
-    assert(element);
+    assert(element, "Element ref not attached");
     const setResizeHandlerState = (action, isActive, event) => {
       if (isActive) {
         switch (action) {

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

@@ -222,15 +222,15 @@ function isTouchEvent(event) {
 function getResizeEventCoordinates(event) {
   if (isMouseEvent(event)) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.clientX,
+      y: event.clientY
     };
   } else if (isTouchEvent(event)) {
     const touch = event.touches[0];
-    if (touch && touch.pageX && touch.pageY) {
+    if (touch && touch.clientX && touch.clientY) {
       return {
-        x: touch.pageX,
-        y: touch.pageY
+        x: touch.clientX,
+        y: touch.clientY
       };
     }
   }
@@ -276,7 +276,7 @@ function compare(a, b) {
     b = ancestors.b.pop();
     common_ancestor = a;
   }
-  assert(common_ancestor);
+  assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
   const z_indexes = {
     a: get_z_index(find_stacking_context(ancestors.a)),
     b: get_z_index(find_stacking_context(ancestors.b))
@@ -334,7 +334,7 @@ function find_stacking_context(nodes) {
   let i = nodes.length;
   while (i--) {
     const node = nodes[i];
-    assert(node);
+    assert(node, "Missing node");
     if (creates_stacking_context(node)) return node;
   }
   return null;
@@ -621,7 +621,7 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
-function assert(expectedCondition, message = "Assertion failed!") {
+function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
     throw Error(message);
@@ -652,7 +652,7 @@ function resizePanel({
   size
 }) {
   const panelConstraints = panelConstraintsArray[panelIndex];
-  assert(panelConstraints != null);
+  assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
   let {
     collapsedSize = 0,
     collapsible,
@@ -690,8 +690,8 @@ function adjustLayoutByDelta({
   }
   const nextLayout = [...prevLayout];
   const [firstPivotIndex, secondPivotIndex] = pivotIndices;
-  assert(firstPivotIndex != null);
-  assert(secondPivotIndex != null);
+  assert(firstPivotIndex != null, "Invalid first pivot index");
+  assert(secondPivotIndex != null, "Invalid second pivot index");
   let deltaApplied = 0;
 
   //const DEBUG = [];
@@ -717,19 +717,18 @@ function adjustLayoutByDelta({
         // Check if we should expand a collapsed panel
         const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(panelConstraints, `Panel constraints not found for index ${index}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
 
         //DEBUG.push(`edge case check 1: ${index}`);
         //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-        if (panelConstraints.collapsible) {
+        if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const {
-            collapsedSize = 0,
-            minSize = 0
-          } = panelConstraints;
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
             const localDelta = minSize - prevSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
@@ -746,22 +745,18 @@ function adjustLayoutByDelta({
         // Check if we should collapse a panel at its minimum size
         const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
         const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints);
+        assert(panelConstraints, `No panel constraints found for index ${index}`);
         const {
-          collapsible
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
         } = panelConstraints;
 
         //DEBUG.push(`edge case check 2: ${index}`);
         //DEBUG.push(`  -> collapsible? ${collapsible}`);
         if (collapsible) {
           const prevSize = prevLayout[index];
-          assert(prevSize != null);
-          const panelConstraints = panelConstraintsArray[index];
-          assert(panelConstraints);
-          const {
-            collapsedSize = 0,
-            minSize = 0
-          } = panelConstraints;
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
           if (fuzzyNumbersEqual(prevSize, minSize)) {
             const localDelta = prevSize - collapsedSize;
             //DEBUG.push(`  -> expand delta: ${localDelta}`);
@@ -791,7 +786,7 @@ function adjustLayoutByDelta({
     //DEBUG.push("pre calc...");
     while (true) {
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const maxSafeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
         panelIndex: index,
@@ -822,7 +817,7 @@ function adjustLayoutByDelta({
     while (index >= 0 && index < panelConstraintsArray.length) {
       const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
       const prevSize = prevLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
       const unsafeSize = prevSize - deltaRemaining;
       const safeSize = resizePanel({
         panelConstraints: panelConstraintsArray,
@@ -859,7 +854,7 @@ function adjustLayoutByDelta({
     // Now distribute the applied delta to the panels in the other direction
     const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
     const prevSize = prevLayout[pivotIndex];
-    assert(prevSize != null);
+    assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
     const unsafeSize = prevSize + deltaApplied;
     const safeSize = resizePanel({
       panelConstraints: panelConstraintsArray,
@@ -877,7 +872,7 @@ function adjustLayoutByDelta({
       let index = pivotIndex;
       while (index >= 0 && index < panelConstraintsArray.length) {
         const prevSize = nextLayout[index];
-        assert(prevSize != null);
+        assert(prevSize != null, `Previous layout not found for panel index ${index}`);
         const unsafeSize = prevSize + deltaRemaining;
         const safeSize = resizePanel({
           panelConstraints: panelConstraintsArray,
@@ -980,17 +975,17 @@ function useWindowSplitterPanelGroupBehavior({
       return;
     }
     const eagerValues = eagerValuesRef.current;
-    assert(eagerValues);
+    assert(eagerValues, `Eager values not found`);
     const {
       panelDataArray
     } = eagerValues;
     const groupElement = getPanelGroupElement(groupId, panelGroupElement);
     assert(groupElement != null, `No group found for id "${groupId}"`);
     const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    assert(handles);
+    assert(handles, `No resize handles found for group id "${groupId}"`);
     const cleanupFunctions = handles.map(handle => {
       const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      assert(handleId);
+      assert(handleId, `Resize handle element has no handle id attribute`);
       const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
       if (idBefore == null || idAfter == null) {
         return () => {};
@@ -1006,7 +1001,7 @@ function useWindowSplitterPanelGroupBehavior({
               const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
               if (index >= 0) {
                 const panelData = panelDataArray[index];
-                assert(panelData);
+                assert(panelData, `No panel data found for index ${index}`);
                 const size = layout[index];
                 const {
                   collapsedSize = 0,
@@ -1065,15 +1060,15 @@ function getResizeEventCursorPosition(direction, event) {
 function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
   const isHorizontal = direction === "horizontal";
   const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
-  assert(handleElement);
+  assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
   const groupId = handleElement.getAttribute("data-panel-group-id");
-  assert(groupId);
+  assert(groupId, `Resize handle element has no group id attribute`);
   let {
     initialCursorPosition
   } = initialDragState;
   const cursorPosition = getResizeEventCursorPosition(direction, event);
   const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-  assert(groupElement);
+  assert(groupElement, `No group element found for id "${groupId}"`);
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
   const offsetPixels = cursorPosition - initialCursorPosition;
@@ -1127,7 +1122,7 @@ function calculateDeltaPercentage(event, dragHandleId, direction, initialDragSta
 function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
   layout.forEach((size, index) => {
     const panelData = panelsArray[index];
-    assert(panelData);
+    assert(panelData, `Panel data not found for index ${index}`);
     const {
       callbacks,
       constraints,
@@ -1305,7 +1300,7 @@ function validatePanelConstraints({
   {
     const warnings = [];
     const panelConstraints = panelConstraintsArray[panelIndex];
-    assert(panelConstraints);
+    assert(panelConstraints, `No panel constraints found for index ${panelIndex}`);
     const {
       collapsedSize = 0,
       collapsible = false,
@@ -1359,7 +1354,7 @@ function validatePanelGroupLayout({
     }
     for (let index = 0; index < panelConstraints.length; index++) {
       const unsafeSize = nextLayout[index];
-      assert(unsafeSize != null);
+      assert(unsafeSize != null, `No layout data found for index ${index}`);
       const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
       nextLayout[index] = safeSize;
     }
@@ -1369,7 +1364,7 @@ function validatePanelGroupLayout({
   // First pass: Validate the proposed layout given each panel's constraints
   for (let index = 0; index < panelConstraints.length; index++) {
     const unsafeSize = nextLayout[index];
-    assert(unsafeSize != null);
+    assert(unsafeSize != null, `No layout data found for index ${index}`);
     const safeSize = resizePanel({
       panelConstraints,
       panelIndex: index,
@@ -1386,7 +1381,7 @@ function validatePanelGroupLayout({
   if (!fuzzyNumbersEqual(remainingSize, 0)) {
     for (let index = 0; index < panelConstraints.length; index++) {
       const prevSize = nextLayout[index];
-      assert(prevSize != null);
+      assert(prevSize != null, `No layout data found for index ${index}`);
       const unsafeSize = prevSize + remainingSize;
       const safeSize = resizePanel({
         panelConstraints,
@@ -1555,7 +1550,7 @@ function PanelGroupWithForwardedRef({
         const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
         for (let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++) {
           const panelData = panelDataArray[panelIndex];
-          assert(panelData);
+          assert(panelData, `Panel data not found for index ${panelIndex}`);
           const isValid = validatePanelConstraints({
             panelConstraints,
             panelId: panelData.id,
@@ -1586,7 +1581,7 @@ function PanelGroupWithForwardedRef({
         panelSize,
         pivotIndices
       } = panelDataHelper(panelDataArray, panelData, prevLayout);
-      assert(panelSize != null);
+      assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
       if (panelSize !== collapsedSize) {
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
@@ -1663,7 +1658,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return panelSize;
   }, []);
 
@@ -1707,7 +1702,7 @@ function PanelGroupWithForwardedRef({
       collapsible,
       panelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     return !collapsible || panelSize > collapsedSize;
   }, []);
   const registerPanel = useCallback(panelData => {
@@ -1818,7 +1813,7 @@ function PanelGroupWithForwardedRef({
       panelSize,
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
-    assert(panelSize != null);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
     const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
@@ -1855,7 +1850,10 @@ function PanelGroupWithForwardedRef({
     const {
       panelSize: prevPanelSize
     } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(prevPanelSize != null);
+    if (prevPanelSize == null) {
+      // It's possible that the panels in this group have changed since the last render
+      return;
+    }
     if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
       if (prevCollapsedSize !== nextCollapsedSize) {
         resizePanel(panelData, nextCollapsedSize);
@@ -1877,7 +1875,7 @@ function PanelGroupWithForwardedRef({
       return;
     }
     const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
-    assert(handleElement);
+    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
     const initialCursorPosition = getResizeEventCursorPosition(direction, event);
     setDragState({
       dragHandleId,
@@ -2006,10 +2004,10 @@ function useWindowSplitterResizeHandlerBehavior({
           {
             event.preventDefault();
             const groupId = handleElement.getAttribute("data-panel-group-id");
-            assert(groupId);
+            assert(groupId, `No group element found for id "${groupId}"`);
             const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
             const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
-            assert(index !== null);
+            assert(index !== null, `No resize element found for id "${handleId}"`);
             const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
             const nextHandle = handles[nextIndex];
             nextHandle.focus();
@@ -2078,7 +2076,7 @@ function PanelResizeHandle({
       return;
     }
     const element = elementRef.current;
-    assert(element);
+    assert(element, "Element ref not attached");
     const setResizeHandlerState = (action, isActive, event) => {
       if (isActive) {
         switch (action) {