From 9eed5ac4f3fa26b15c469cf6b6a0df15f6779f30 Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Fri, 26 Jan 2024 13:58:36 -0600
Subject: [PATCH 1/6] fix: jest memory leaking

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f7e25a5c20..1450ef8cb7 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,8 @@
     "clean:full": "tsx ./tools/build/clean-repo.ts && yarn nx run-many --target=clean && rm -rf node_modules/ && yarn",
     "clean:core": "yarn workspace @twilio-paste/core clean",
     "pre-test": "tsx ./tools/build/pre-test.ts",
-    "test": "jest",
-    "test:coverage": "jest --coverage",
+    "test": "node --expose-gc --no-compilation-cache ./node_modules/.bin/jest --logHeapUsage",
+    "test:coverage": "node --expose-gc --no-compilation-cache ./node_modules/.bin/jest --logHeapUsage --coverage",
     "test:website": "yarn cypress run --record",
     "test:website-percy": "percy exec -- yarn cypress run --record",
     "test:website-gui": "WAIT_ON_TIMEOUT=600000 start-server-and-test 'yarn start:website' http://localhost:3000 'yarn cypress open'",

From b159069e041f669b6b1c7b99d21a814b98260725 Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Fri, 26 Jan 2024 16:02:42 -0600
Subject: [PATCH 2/6] test: fix summary detail tests

---
 .../components/summary-detail/src/SummaryDetail.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/paste-core/components/summary-detail/src/SummaryDetail.tsx b/packages/paste-core/components/summary-detail/src/SummaryDetail.tsx
index 215ecdb736..ff93f9dd4e 100644
--- a/packages/paste-core/components/summary-detail/src/SummaryDetail.tsx
+++ b/packages/paste-core/components/summary-detail/src/SummaryDetail.tsx
@@ -5,6 +5,7 @@ import {
   type DisclosurePrimitveStateReturn,
   useDisclosurePrimitiveState,
 } from "@twilio-paste/disclosure-primitive";
+import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
 import { SummaryDetailContext } from "./SummaryDetailContext";
@@ -34,10 +35,11 @@ export interface SummaryDetailProps extends DisclosurePrimitiveInitialState {
 
 export const SummaryDetail = React.forwardRef<HTMLDivElement, SummaryDetailProps>(
   ({ children, element = "SUMMARY_DETAIL", state, ...props }, ref) => {
+    const headerId = useUID();
     const stateForContext = state || useDisclosurePrimitiveState(props);
 
     return (
-      <SummaryDetailContext.Provider value={{ ...stateForContext, headerId: React.useId() }}>
+      <SummaryDetailContext.Provider value={{ ...stateForContext, headerId }}>
         <Box
           {...safelySpreadBoxProps(props)}
           ref={ref}

From 344a494578c9ba44e5babc487fbd7188abe9ec4a Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Fri, 26 Jan 2024 16:10:10 -0600
Subject: [PATCH 3/6] test: simplify tests

---
 .../summary-detail/__tests__/index.spec.tsx   | 41 +++++++------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx b/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
index 30b3cc7fb7..c39854fc48 100644
--- a/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
@@ -1,7 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { CustomizationProvider } from "@twilio-paste/customization";
-import { Theme } from "@twilio-paste/theme";
 import * as React from "react";
 
 import {
@@ -18,17 +17,15 @@ const MockSummaryDetail: React.FC<{
   visible?: SummaryDetailProps["visible"];
 }> = ({ visible }) => {
   return (
-    <Theme.Provider theme="default">
-      <SummaryDetail baseId="summary-detail" visible={visible} data-testid="summary-detail">
-        <SummaryDetailHeading data-testid="summary-detail-heading">
-          <SummaryDetailToggleButton data-testid="summary-detail-toggle-button" />
-          <SummaryDetailHeadingContent data-testid="summary-detail-heading-content">
-            Inbound Call
-          </SummaryDetailHeadingContent>
-        </SummaryDetailHeading>
-        <SummaryDetailContent data-testid="summary-detail-content">Agent: John Doe</SummaryDetailContent>
-      </SummaryDetail>
-    </Theme.Provider>
+    <SummaryDetail baseId="summary-detail" visible={visible} data-testid="summary-detail">
+      <SummaryDetailHeading data-testid="summary-detail-heading">
+        <SummaryDetailToggleButton data-testid="summary-detail-toggle-button" />
+        <SummaryDetailHeadingContent data-testid="summary-detail-heading-content">
+          Inbound Call
+        </SummaryDetailHeadingContent>
+      </SummaryDetailHeading>
+      <SummaryDetailContent data-testid="summary-detail-content">Agent: John Doe</SummaryDetailContent>
+    </SummaryDetail>
   );
 };
 
@@ -72,7 +69,7 @@ const MockCustomElementSummaryDetail = (): JSX.Element => {
 const StateHookMock = (): JSX.Element => {
   const summaryDetail = useSummaryDetailState();
   return (
-    <Theme.Provider theme="default">
+    <>
       <button
         onClick={() => {
           summaryDetail.toggle();
@@ -97,7 +94,7 @@ const StateHookMock = (): JSX.Element => {
           Agent: John Doe
         </SummaryDetailContent>
       </SummaryDetail>
-    </Theme.Provider>
+    </>
   );
 };
 
@@ -119,9 +116,7 @@ describe("SummaryDetail", () => {
     });
 
     it("should render a summary-detail open", async () => {
-      await waitFor(() => {
-        render(<MockSummaryDetail visible />);
-      });
+      render(<MockSummaryDetail visible />);
       const renderedSummaryDetailButton = screen.getByRole("button");
       const summaryDetailContent = screen.getByTestId("summary-detail-content");
       expect(renderedSummaryDetailButton.getAttribute("aria-expanded")).toEqual("true");
@@ -158,11 +153,7 @@ describe("SummaryDetail", () => {
 
   describe("Customization", () => {
     it("should set an element data attribute for SummaryDetail components", () => {
-      render(
-        <Theme.Provider theme="default">
-          <MockDefaultElementSummaryDetail />
-        </Theme.Provider>,
-      );
+      render(<MockDefaultElementSummaryDetail />);
 
       const renderedSummaryDetailHeading = screen.getByTestId("summary-detail-heading");
       const renderedSummaryDetail = screen.getByTestId("summary-detail");
@@ -182,11 +173,7 @@ describe("SummaryDetail", () => {
     });
 
     it("should set a custom element data attribute for custom named SummaryDetail components", () => {
-      render(
-        <Theme.Provider theme="default">
-          <MockCustomElementSummaryDetail />
-        </Theme.Provider>,
-      );
+      render(<MockCustomElementSummaryDetail />);
 
       const renderedSummaryDetailHeading = screen.getByTestId("summary-detail-heading");
       const renderedSummaryDetail = screen.getByTestId("summary-detail");

From 15714b493c1f6bcd95214c93cf92e657bced4937 Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Fri, 26 Jan 2024 16:21:03 -0600
Subject: [PATCH 4/6] test: log more visibly the error

---
 package.json                                                  | 2 +-
 .../components/summary-detail/__tests__/index.spec.tsx        | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 1450ef8cb7..6b00d7391b 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "clean:full": "tsx ./tools/build/clean-repo.ts && yarn nx run-many --target=clean && rm -rf node_modules/ && yarn",
     "clean:core": "yarn workspace @twilio-paste/core clean",
     "pre-test": "tsx ./tools/build/pre-test.ts",
-    "test": "node --expose-gc --no-compilation-cache ./node_modules/.bin/jest --logHeapUsage",
+    "test": "node --expose-gc --no-compilation-cache ./node_modules/.bin/jest --runInBand --logHeapUsage",
     "test:coverage": "node --expose-gc --no-compilation-cache ./node_modules/.bin/jest --logHeapUsage --coverage",
     "test:website": "yarn cypress run --record",
     "test:website-percy": "percy exec -- yarn cypress run --record",
diff --git a/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx b/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
index c39854fc48..7624ca03e1 100644
--- a/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
@@ -116,7 +116,9 @@ describe("SummaryDetail", () => {
     });
 
     it("should render a summary-detail open", async () => {
-      render(<MockSummaryDetail visible />);
+      await waitFor(() => {
+        render(<MockSummaryDetail visible />);
+      });
       const renderedSummaryDetailButton = screen.getByRole("button");
       const summaryDetailContent = screen.getByTestId("summary-detail-content");
       expect(renderedSummaryDetailButton.getAttribute("aria-expanded")).toEqual("true");

From a5170c2623baf6f18dadf9f2d51761bc5541dd1e Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Mon, 29 Jan 2024 11:44:19 -0600
Subject: [PATCH 5/6] test: fix react 17

---
 .../components/summary-detail/__tests__/index.spec.tsx    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx b/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
index 7624ca03e1..2b574400b9 100644
--- a/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/summary-detail/__tests__/index.spec.tsx
@@ -133,9 +133,7 @@ describe("SummaryDetail", () => {
       expect(summaryDetailContent).not.toBeVisible();
       userEvent.click(summaryDetailButton);
       expect(summaryDetailButton.getAttribute("aria-expanded")).toEqual("true");
-      waitFor(() => {
-        expect(summaryDetailContent).toBeVisible();
-      });
+      expect(summaryDetailContent).toBeVisible();
     });
 
     it("should toggle open state correctly when using a state hook", async () => {
@@ -147,9 +145,7 @@ describe("SummaryDetail", () => {
       expect(summaryDetailContent).not.toBeVisible();
       userEvent.click(toggleButton);
       expect(summaryDetailButton.getAttribute("aria-expanded")).toEqual("true");
-      waitFor(() => {
-        expect(summaryDetailContent).toBeVisible();
-      });
+      expect(summaryDetailContent).toBeVisible();
     });
   });
 

From 9d6a21416227f62abf9d0a407e3f6cc601592543 Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Mon, 29 Jan 2024 12:30:25 -0600
Subject: [PATCH 6/6] chore: add changeset

---
 .changeset/warm-ads-notice.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/warm-ads-notice.md

diff --git a/.changeset/warm-ads-notice.md b/.changeset/warm-ads-notice.md
new file mode 100644
index 0000000000..03d4cc6f5d
--- /dev/null
+++ b/.changeset/warm-ads-notice.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/summary-detail": patch
+"@twilio-paste/core": patch
+---
+
+[SummaryDetail] Fixed an issue with React versions below 18.