Support updates to either Group or Panel ids

Author: bvaughn

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.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;
     }
   }