Prepare 4.2.2 release

Author: bvaughn

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+- `useDefaultLayout` hook initializes `storage` param to `localStorage` if undefined.
+- Fix ambiguous type for `Panel` prop `onResize` that impacted certain TypeScript versions.
+
+## 4.2.1
+
 - [2a6b03f](https://github.com/bvaughn/react-resizable-panels/commit/2a6b03f67d7d8fea8483a6a69bcdaebbe1b18a7a): Add `displayName` property to `Group`, `Panel`, and `Separator` components for better debugging experience.
 - [577](https://github.com/bvaughn/react-resizable-panels/pull/577): `Group` handles newly registered `Panels` + `Separators` during mount so that user code can safely call imperative APIs earlier
 

integrations/vite/src/routes/Decoder.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { assert, Box } from "react-lib-tools";
 import {
+  useDefaultLayout,
   useGroupCallbackRef,
   useGroupRef,
   usePanelCallbackRef,
@@ -18,6 +19,18 @@ export function Decoder() {
 
   const [group, setGroup] = useGroupCallbackRef();
   const groupRef = useGroupRef();
+
+  const result = useDefaultLayout({
+    id: "group"
+  });
+
+  const defaultLayout = searchParams.has("useDefaultLayout")
+    ? result.defaultLayout
+    : undefined;
+  const onLayoutChange = searchParams.has("useDefaultLayout")
+    ? result.onLayoutChange
+    : undefined;
+
   const groupRefProp = searchParams.has("useGroupCallbackRef")
     ? setGroup
     : searchParams.has("useGroupRef")
@@ -82,8 +95,11 @@ export function Decoder() {
 
     const group = decode(encoded, {
       groupProps: {
+        defaultLayout,
         groupRef: groupRefProp,
         onLayoutChange: (layout) => {
+          onLayoutChange?.(layout);
+
           setTimeout(() => {
             stableCallbacksRef.current.readGroupLayout();
           }, 0);
@@ -120,7 +136,7 @@ export function Decoder() {
     });
 
     return group;
-  }, [encoded, groupRefProp, panelRefProp]);
+  }, [defaultLayout, encoded, groupRefProp, onLayoutChange, panelRefProp]);
 
   // Debugging
   // console.group("Decoder");

integrations/vite/tests/default-layout.spec.tsx

@@ -0,0 +1,42 @@
+import { expect, test } from "@playwright/test";
+import { Group, Panel } from "react-resizable-panels";
+import { goToUrl } from "./utils/goToUrl";
+import { resizeHelper } from "./utils/pointer-interactions/resizeHelper";
+
+// High level tests; more nuanced scenarios are covered by unit tests
+test.describe("default layout", () => {
+  for (const usePopUpWindow of [true, false]) {
+    test.describe(usePopUpWindow ? "in a popup" : "in the main window", () => {
+      test("remembers most recent layout", async ({ page: mainPage }) => {
+        const page = await goToUrl(
+          mainPage,
+          <Group>
+            <Panel defaultSize="30%" id="left" minSize={50} />
+            <Panel id="right" minSize={50} />
+          </Group>,
+          { useDefaultLayout: true, usePopUpWindow }
+        );
+
+        await expect(page.getByText("id: left")).toContainText("30%");
+        await expect(page.getByText("id: right")).toContainText("70%");
+
+        await resizeHelper(page, ["left", "right"], 100, 0);
+
+        await expect(page.getByText("id: left")).toContainText("40%");
+        await expect(page.getByText("id: right")).toContainText("60%");
+
+        const page2 = await goToUrl(
+          mainPage,
+          <Group>
+            <Panel defaultSize="30%" id="left" minSize={50} />
+            <Panel id="right" minSize={50} />
+          </Group>,
+          { useDefaultLayout: true, usePopUpWindow }
+        );
+
+        await expect(page2.getByText("id: left")).toContainText("40%");
+        await expect(page2.getByText("id: right")).toContainText("60%");
+      });
+    });
+  }
+});

integrations/vite/tests/utils/goToUrl.ts

@@ -7,6 +7,7 @@ export async function goToUrl(
   page: Page,
   elementProp: ReactElement<unknown>,
   config: {
+    useDefaultLayout?: boolean | undefined;
     useGroupCallbackRef?: boolean | undefined;
     useGroupRef?: boolean | undefined;
     usePanelCallbackRef?: boolean | undefined;
@@ -15,6 +16,7 @@ export async function goToUrl(
   } = {}
 ): Promise<Page> {
   const {
+    useDefaultLayout = false,
     useGroupCallbackRef = false,
     useGroupRef = false,
     usePanelCallbackRef = false,
@@ -36,6 +38,7 @@ export async function goToUrl(
   }
 
   const queryParams = [
+    useDefaultLayout ? "useDefaultLayout" : undefined,
     useGroupCallbackRef ? "useGroupCallbackRef" : undefined,
     useGroupRef ? "useGroupRef" : undefined,
     usePanelCallbackRef ? "usePanelCallbackRef" : undefined,

lib/components/group/useDefaultLayout.ts

@@ -6,7 +6,7 @@ import type { Layout, LayoutStorage, OnGroupLayoutChange } from "./types";
 export function useDefaultLayout({
   debounceSaveMs = 100,
   panelIds,
-  storage,
+  storage = localStorage,
   ...rest
 }: {
   /**
@@ -25,7 +25,7 @@ export function useDefaultLayout({
    * Storage implementation; supports localStorage, sessionStorage, and custom implementations
    * Refer to documentation site for example integrations.
    */
-  storage: LayoutStorage;
+  storage?: LayoutStorage;
 } & (
   | {
       /**

lib/components/panel/types.ts

@@ -88,7 +88,9 @@ export interface PanelImperativeHandle {
   resize: (size: number | string) => void;
 }
 
-export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+type BasePanelAttributes = Omit<HTMLAttributes<HTMLDivElement>, "onResize">;
+
+export type PanelProps = BasePanelAttributes & {
   /**
    * CSS class name.
    *

lib/components/separator/types.ts

@@ -5,9 +5,12 @@ export type RegisteredSeparator = {
   id: string;
 };
 
-type BaseAttributes = Omit<HTMLAttributes<HTMLDivElement>, "role" | "tabIndex">;
+type BaseSeparatorAttributes = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "role" | "tabIndex"
+>;
 
-export type SeparatorProps = BaseAttributes & {
+export type SeparatorProps = BaseSeparatorAttributes & {
   /**
    * CSS class name.
    *

src/App.tsx

@@ -157,6 +157,31 @@ const commonQuestions: CommonQuestion[] = [
         <Code html={VerticalGroupOverflowHTML} />
       </>
     )
+  },
+  {
+    id: "local-storage-undefined",
+    question: "ReferenceError: localStorage is not defined",
+    answer: (
+      <>
+        <p>
+          The <code>useDefaultLayout</code> hook saves layouts to{" "}
+          <code>localStorage</code> by default. This does not work for
+          server-rendered applications though, since <code>localStorage</code>{" "}
+          is only defined on the client.
+        </p>
+        <p>
+          Refer to the{" "}
+          <Link to="/examples/persistent-layout/server-rendering">
+            server rendering
+          </Link>{" "}
+          or{" "}
+          <Link to="/examples/persistent-layout/server-components">
+            server components
+          </Link>{" "}
+          docs for examples of how to save layouts on the server.
+        </p>
+      </>
+    )
   }
 ];