react-resizable-panels 0.0.44 → 0.0.46

package/src/PanelGroup.ts

@@ -45,6 +45,7 @@ import {
   panelsMapToSortedArray,
 } from "./utils/group";
 import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
+import { isServerRendering } from "./utils/ssr";
 
 const debounceMap: {
   [key: string]: (
@@ -55,19 +56,40 @@ const debounceMap: {
   ) => void;
 } = {};
 
-function throwServerError() {
-  throw new Error('PanelGroup "storage" prop required for server rendering.');
+// PanelGroup might be rendering in a server-side environment where localStorage is not available
+// or on a browser with cookies/storage disabled.
+// In either case, this function avoids accessing localStorage until needed,
+// and avoids throwing user-visible errors.
+function initializeDefaultStorage(storageObject: PanelGroupStorage) {
+  try {
+    if (typeof localStorage !== "undefined") {
+      // Bypass this check for future calls
+      storageObject.getItem = (name: string) => {
+        return localStorage.getItem(name);
+      };
+      storageObject.setItem = (name: string, value: string) => {
+        localStorage.setItem(name, value);
+      };
+    } else {
+      throw new Error("localStorage not supported in this environment");
+    }
+  } catch (error) {
+    console.error(error);
+
+    storageObject.getItem = () => null;
+    storageObject.setItem = () => {};
+  }
 }
 
 const defaultStorage: PanelGroupStorage = {
-  getItem:
-    typeof localStorage !== "undefined"
-      ? (name: string) => localStorage.getItem(name)
-      : (throwServerError as any),
-  setItem:
-    typeof localStorage !== "undefined"
-      ? (name: string, value: string) => localStorage.setItem(name, value)
-      : (throwServerError as any),
+  getItem: (name: string) => {
+    initializeDefaultStorage(defaultStorage);
+    return defaultStorage.getItem(name);
+  },
+  setItem: (name: string, value: string) => {
+    initializeDefaultStorage(defaultStorage);
+    defaultStorage.setItem(name, value);
+  },
 };
 
 export type CommittedValues = {
@@ -309,16 +331,22 @@ function PanelGroupWithForwardedRef({
   }, [autoSaveId, panels, sizes, storage]);
 
   const getPanelStyle = useCallback(
-    (id: string): CSSProperties => {
+    (id: string, defaultSize: number | null): CSSProperties => {
       const { panels } = committedValuesRef.current;
 
       // Before mounting, Panels will not yet have registered themselves.
       // 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: "auto",
-          flexGrow: 1,
+          flexBasis: 0,
+          flexGrow: defaultSize != null ? defaultSize : undefined,
           flexShrink: 1,
 
           // Without this, Panel sizes may be unintentionally overridden by their content.
@@ -382,7 +410,7 @@ function PanelGroupWithForwardedRef({
           return;
         }
 
-        const movement = getMovement(
+        let movement = getMovement(
           event,
           groupId,
           handleId,
@@ -398,6 +426,12 @@ function PanelGroupWithForwardedRef({
         const groupElement = getPanelGroup(groupId)!;
         const rect = groupElement.getBoundingClientRect();
         const isHorizontal = direction === "horizontal";
+
+        // Support RTL layouts
+        if (document.dir === "rtl" && isHorizontal) {
+          movement = -movement;
+        }
+
         const size = isHorizontal ? rect.width : rect.height;
         const delta = (movement / size) * 100;
 

package/src/utils/ssr.ts

@@ -0,0 +1,7 @@
+export function isServerRendering(): boolean {
+  try {
+    return typeof window === undefined;
+  } catch (error) {}
+
+  return true;
+}