react-resizable-panels 0.0.48 → 0.0.49

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 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
@@ -958,10 +951,10 @@ function PanelGroupWithForwardedRef({
           totalDefaultSize += panel.current.defaultSize;
         }
       });
-      if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+      if (totalDefaultSize > 100 || 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(`Invalid minimum sizes specified for panels`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -995,9 +988,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

@@ -958,10 +958,10 @@ function PanelGroupWithForwardedRef({
           totalDefaultSize += panel.current.defaultSize;
         }
       });
-      if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+      if (totalDefaultSize > 100 || 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(`Invalid minimum sizes specified for panels`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -995,8 +995,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

@@ -934,10 +934,10 @@ function PanelGroupWithForwardedRef({
           totalDefaultSize += panel.current.defaultSize;
         }
       });
-      if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+      if (totalDefaultSize > 100 || 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(`Invalid minimum sizes specified for panels`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -971,8 +971,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
@@ -934,10 +927,10 @@ function PanelGroupWithForwardedRef({
           totalDefaultSize += panel.current.defaultSize;
         }
       });
-      if (totalDefaultSize > 100) {
-        throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
+      if (totalDefaultSize > 100 || 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(`Invalid minimum sizes specified for panels`);
       }
       setSizes(panelsArray.map(panel => {
         if (panel.current.defaultSize === null) {
@@ -971,9 +964,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.49",
   "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,
@@ -291,14 +292,13 @@ function PanelGroupWithForwardedRef({
         }
       });
 
-      if (totalDefaultSize > 100) {
-        throw new Error(
-          `The sum of the defaultSize of all panels in a group cannot exceed 100.`
-        );
+      if (
+        totalDefaultSize > 100 ||
+        (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(`Invalid minimum sizes specified for panels`);
       }
 
       setSizes(
@@ -338,10 +338,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 {