react-resizable-panels 0.0.48 → 0.0.50

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.0.50
+* Improved panel size validation in `PanelGroup`.
+
+## 0.0.49
+* Improved development warnings and props validation checks in `PanelGroup`.
+
 ## 0.0.48
 * [148](https://github.com/bvaughn/react-resizable-panels/pull/148): Build release bundle with Preconstruct
 

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

@@ -762,13 +762,6 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
-function isServerRendering() {
-  try {
-    return typeof window === undefined;
-  } catch (error) {}
-  return true;
-}
-
 const debounceMap = {};
 
 // PanelGroup might be rendering in a server-side environment where localStorage is not available
@@ -959,9 +952,11 @@ function PanelGroupWithForwardedRef({
         }
       });
       if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Default panel sizes cannot exceed 100%`);
+      } else if (panelsArray.length > 1 && panelsWithNullDefaultSize === 0 && totalDefaultSize !== 100) {
+        throw new Error(`Invalid default sizes specified for panels`);
       } else if (totalMinSize > 100) {
-        throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Minimum panel sizes cannot exceed 100%`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -995,9 +990,6 @@ function PanelGroupWithForwardedRef({
     // This includes server rendering.
     // At this point the best we can do is render everything with the same size.
     if (panels.size === 0) {
-      if (isServerRendering() && defaultSize == null) {
-        console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
-      }
       return {
         flexBasis: 0,
         flexGrow: defaultSize != null ? defaultSize : undefined,

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

@@ -959,9 +959,11 @@ function PanelGroupWithForwardedRef({
         }
       });
       if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Default panel sizes cannot exceed 100%`);
+      } else if (panelsArray.length > 1 && panelsWithNullDefaultSize === 0 && totalDefaultSize !== 100) {
+        throw new Error(`Invalid default sizes specified for panels`);
       } else if (totalMinSize > 100) {
-        throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Minimum panel sizes cannot exceed 100%`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -995,8 +997,10 @@ function PanelGroupWithForwardedRef({
     // This includes server rendering.
     // At this point the best we can do is render everything with the same size.
     if (panels.size === 0) {
-      if (isServerRendering() && defaultSize == null) {
-        console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+      {
+        if (isServerRendering() && defaultSize == null) {
+          console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+        }
       }
       return {
         flexBasis: 0,

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

@@ -935,9 +935,11 @@ function PanelGroupWithForwardedRef({
         }
       });
       if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Default panel sizes cannot exceed 100%`);
+      } else if (panelsArray.length > 1 && panelsWithNullDefaultSize === 0 && totalDefaultSize !== 100) {
+        throw new Error(`Invalid default sizes specified for panels`);
       } else if (totalMinSize > 100) {
-        throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Minimum panel sizes cannot exceed 100%`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -971,8 +973,10 @@ function PanelGroupWithForwardedRef({
     // This includes server rendering.
     // At this point the best we can do is render everything with the same size.
     if (panels.size === 0) {
-      if (isServerRendering() && defaultSize == null) {
-        console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+      {
+        if (isServerRendering() && defaultSize == null) {
+          console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+        }
       }
       return {
         flexBasis: 0,

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

@@ -738,13 +738,6 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
-function isServerRendering() {
-  try {
-    return typeof window === undefined;
-  } catch (error) {}
-  return true;
-}
-
 const debounceMap = {};
 
 // PanelGroup might be rendering in a server-side environment where localStorage is not available
@@ -935,9 +928,11 @@ function PanelGroupWithForwardedRef({
         }
       });
       if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Default panel sizes cannot exceed 100%`);
+      } else if (panelsArray.length > 1 && panelsWithNullDefaultSize === 0 && totalDefaultSize !== 100) {
+        throw new Error(`Invalid default sizes specified for panels`);
       } else if (totalMinSize > 100) {
-        throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
+        throw new Error(`Minimum panel sizes cannot exceed 100%`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -971,9 +966,6 @@ function PanelGroupWithForwardedRef({
     // This includes server rendering.
     // At this point the best we can do is render everything with the same size.
     if (panels.size === 0) {
-      if (isServerRendering() && defaultSize == null) {
-        console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
-      }
       return {
         flexBasis: 0,
         flexGrow: defaultSize != null ? defaultSize : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/PanelGroup.ts

@@ -1,3 +1,4 @@
+import { isDevelopment } from "#is-development";
 import {
   createElement,
   CSSProperties,
@@ -292,13 +293,15 @@ function PanelGroupWithForwardedRef({
       });
 
       if (totalDefaultSize > 100) {
-        throw new Error(
-          `The sum of the defaultSize of all panels in a group cannot exceed 100.`
-        );
+        throw new Error(`Default panel sizes cannot exceed 100%`);
+      } else if (
+        panelsArray.length > 1 &&
+        panelsWithNullDefaultSize === 0 &&
+        totalDefaultSize !== 100
+      ) {
+        throw new Error(`Invalid default sizes specified for panels`);
       } else if (totalMinSize > 100) {
-        throw new Error(
-          `The sum of the minSize of all panels in a group cannot exceed 100.`
-        );
+        throw new Error(`Minimum panel sizes cannot exceed 100%`);
       }
 
       setSizes(
@@ -338,10 +341,12 @@ function PanelGroupWithForwardedRef({
       // This includes server rendering.
       // At this point the best we can do is render everything with the same size.
       if (panels.size === 0) {
-        if (isServerRendering() && defaultSize == null) {
-          console.warn(
-            `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
-          );
+        if (isDevelopment) {
+          if (isServerRendering() && defaultSize == null) {
+            console.warn(
+              `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
+            );
+          }
         }
 
         return {