Support updates to either Group or Panel ids (#548)

Resolves #545

Author: bvaughn

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - [#542](https://github.com/bvaughn/react-resizable-panels/pull/542): Clicks on higher `z-index` elements (e.g. modals) should not trigger separators behind them
 - [#547](https://github.com/bvaughn/react-resizable-panels/pull/547): Don't re-mount Group when `defaultLayout` or `disableCursor` props change
+- [#548](https://github.com/bvaughn/react-resizable-panels/pull/548): Bugfix: Gracefully handle `Panel` id changes
 
 ## 4.0.8
 

lib/components/group/Group.test.tsx

@@ -1,12 +1,12 @@
 import { render } from "@testing-library/react";
 import { beforeEach, describe, expect, test, vi } from "vitest";
+import { eventEmitter } from "../../global/mutableState";
 import { moveSeparator } from "../../global/test/moveSeparator";
+import { assert } from "../../utils/assert";
 import { setElementBoundsFunction } from "../../utils/test/mockBoundingClientRect";
 import { Panel } from "../panel/Panel";
 import { Separator } from "../separator/Separator";
 import { Group } from "./Group";
-import { assert } from "../../utils/assert";
-import { eventEmitter } from "../../global/mutableState";
 
 describe("Group", () => {
   test("changes to defaultProps or disableCursor should not cause Group to remount", () => {
@@ -47,6 +47,36 @@ describe("Group", () => {
     removeListener();
   });
 
+  test("should support updates to either Group or Panel ids", () => {
+    const { rerender } = render(
+      <Group id="a">
+        <Panel id="a-a" />
+        <Panel id="a-b" />
+      </Group>
+    );
+
+    rerender(
+      <Group id="a">
+        <Panel id="b-a" />
+        <Panel id="b-b" />
+      </Group>
+    );
+
+    rerender(
+      <Group id="b">
+        <Panel id="b-a" />
+        <Panel id="b-b" />
+      </Group>
+    );
+
+    rerender(
+      <Group id="c">
+        <Panel id="c-a" />
+        <Panel id="c-b" />
+      </Group>
+    );
+  });
+
   describe("onLayoutChange", () => {
     beforeEach(() => {
       setElementBoundsFunction((element) => {

lib/global/utils/layoutsEqual.test.ts

@@ -5,6 +5,7 @@ import type { Layout } from "../../components/group/types";
 const EMPTY: Layout = {};
 const A: Layout = { a: 25, b: 75 };
 const B: Layout = { a: 75, b: 25 };
+const C: Layout = { d: 25, e: 75 };
 
 describe("layoutsEqual", () => {
   test.each([
@@ -14,7 +15,9 @@ describe("layoutsEqual", () => {
     [EMPTY, A, false],
     [A, EMPTY, false],
     [A, B, false],
-    [B, A, false]
+    [B, A, false],
+    [A, C, false],
+    [C, A, false]
   ])("layoutsEqual: %o, %o -> %o", (a, b, expected) => {
     expect(layoutsEqual(a, b)).toBe(expected);
   });

lib/global/utils/layoutsEqual.ts

@@ -7,7 +7,8 @@ export function layoutsEqual(a: Layout, b: Layout): boolean {
   }
 
   for (const id in a) {
-    if (compareLayoutNumbers(a[id], b[id]) !== 0) {
+    // Edge case: Panel id has been changed
+    if (b[id] === undefined || compareLayoutNumbers(a[id], b[id]) !== 0) {
       return false;
     }
   }