Backport 1.28.1 => main (#2432)

DES-6853 React 17 compatibility (as patch to 1.28) (#2431) * fix: fixes import in renderReactInWebComponent * test: fixes unit tests for renderReactInWebComponent --------- Co-authored-by: Kevin Ghadyani <kevin.ghadyani@okta.com> build: bump versions for 1.28.1 docs: update CHANGELOG for 1.28.1 chore(odyssey-react-mui): trigger build
okta · Dec 3, 2024 · 00d13c9 · 00d13c9
1 parent bd42ac7
commit 00d13c9
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package odyssey
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 ### Features

diff --git a/lerna.json b/lerna.json
@@ -4,5 +4,5 @@
   "npmClient": "yarn",
   "packages": ["packages/*"],
   "useNx": false,
-  "version": "1.28.0"
+  "version": "1.28.1"
 }
diff --git a/packages/browserslist-config-odyssey/CHANGELOG.md b/packages/browserslist-config-odyssey/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/browserslist-config-odyssey
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 **Note:** Version bump only for package @okta/browserslist-config-odyssey

diff --git a/packages/browserslist-config-odyssey/package.json b/packages/browserslist-config-odyssey/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/browserslist-config-odyssey",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "Browserslist config for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

diff --git a/packages/odyssey-babel-preset/CHANGELOG.md b/packages/odyssey-babel-preset/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/odyssey-babel-preset
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 **Note:** Version bump only for package @okta/odyssey-babel-preset

diff --git a/packages/odyssey-babel-preset/package.json b/packages/odyssey-babel-preset/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-babel-preset",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "Babel preset for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

diff --git a/packages/odyssey-design-tokens/CHANGELOG.md b/packages/odyssey-design-tokens/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/odyssey-design-tokens
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 **Note:** Version bump only for package @okta/odyssey-design-tokens

diff --git a/packages/odyssey-design-tokens/package.json b/packages/odyssey-design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-design-tokens",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "Design tokens for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

diff --git a/packages/odyssey-react-mui/CHANGELOG.md b/packages/odyssey-react-mui/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 ### Features

diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

diff --git a/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.test.tsx b/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.test.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { act } from "@testing-library/react";
+import { act, waitFor } from "@testing-library/react";
 
 import { renderUiShell } from "./renderUiShell";
 import {
@@ -126,9 +126,11 @@ describe("renderUiShell", () => {
       });
     });
 
-    expect(
-      rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
-    ).toHaveTextContent(appName);
+    await waitFor(() => {
+      expect(
+        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
+      ).toHaveTextContent(appName);
+    });
   });
 
   test("renders `UiShell` with immediately updated props", async () => {
@@ -153,9 +155,11 @@ describe("renderUiShell", () => {
       });
     });
 
-    expect(
-      rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
-    ).toHaveTextContent(appName);
+    await waitFor(() => {
+      expect(
+        rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
+      ).toHaveTextContent(appName);
+    });
   });
 
   test("renders `<slot>` in the event of an error", async () => {
@@ -184,14 +188,16 @@ describe("renderUiShell", () => {
       );
     });
 
-    consoleErrorSpy.mockRestore();
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledTimes(1);
+      expect(consoleError).toHaveBeenCalledTimes(1);
+      expect(
+        rootElement
+          .querySelector(reactWebComponentElementName)!
+          .shadowRoot?.querySelector("slot"),
+      ).toBeInstanceOf(HTMLSlotElement);
+    });
 
-    expect(onError).toHaveBeenCalledTimes(1);
-    expect(consoleError).toHaveBeenCalledTimes(1);
-    expect(
-      rootElement
-        .querySelector(reactWebComponentElementName)!
-        .shadowRoot?.querySelector("slot"),
-    ).toBeInstanceOf(HTMLSlotElement);
+    consoleErrorSpy.mockRestore();
   });
 });
diff --git a/packages/odyssey-react-mui/src/web-component/renderReactInWebComponent.ts b/packages/odyssey-react-mui/src/web-component/renderReactInWebComponent.ts
@@ -11,7 +11,7 @@
  */
 
 import { type ReactNode } from "react";
-import { createRoot, type Root } from "react-dom/client";
+import type { Root } from "react-dom/client";
 
 /**
  * Creates elements for a Shadow DOM that Odyssey will render into.
@@ -56,8 +56,8 @@ export type GetReactComponentInWebComponent = (
 
 export class ReactInWebComponentElement extends HTMLElement {
   getReactComponent: GetReactComponentInWebComponent;
-  reactRoot: Root;
   reactRootElements: ReactRootElements;
+  reactRootPromise: Promise<Root>;
 
   constructor(getReactComponent: GetReactComponentInWebComponent) {
     super();
@@ -81,15 +81,20 @@ export class ReactInWebComponentElement extends HTMLElement {
     shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
     shadowRoot.appendChild(this.reactRootElements.appRootElement);
 
-    this.reactRoot = createRoot(this.reactRootElements.appRootElement);
+    // If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani
+    this.reactRootPromise = import("react-dom/client").then(({ createRoot }) =>
+      createRoot(this.reactRootElements.appRootElement),
+    );
   }
 
   connectedCallback() {
-    this.reactRoot.render(this.getReactComponent(this.reactRootElements));
+    this.reactRootPromise.then((reactRoot) =>
+      reactRoot.render(this.getReactComponent(this.reactRootElements)),
+    );
   }
 
   disconnectedCallback() {
-    this.reactRoot.unmount();
+    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());
   }
 }
 

diff --git a/packages/odyssey-storybook/CHANGELOG.md b/packages/odyssey-storybook/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/odyssey-storybook
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 ### Features

diff --git a/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-storybook",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "Documentation for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

diff --git a/packages/odyssey-svgr/CHANGELOG.md b/packages/odyssey-svgr/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
+
+**Note:** Version bump only for package @okta/odyssey-svgr
+
 ## [1.28.0](https://github.com/okta/odyssey/compare/v1.27.1...v1.28.0) (2024-11-25)
 
 **Note:** Version bump only for package @okta/odyssey-svgr

diff --git a/packages/odyssey-svgr/package.json b/packages/odyssey-svgr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-svgr",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "Configuration files for svgr icon conversion",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",