@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/web-component/renderReactInWebComponent.test.tsx

@@ -1,128 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { waitFor } from "@testing-library/dom";
-
-import {
-  ReactInWebComponentElement,
-  reactWebComponentElementName,
-  renderReactInWebComponent,
-} from "./renderReactInWebComponent.js";
-
-describe("renderReactInWebComponent", () => {
-  afterEach(() => {
-    // Remove any appended elements
-    document.body.innerHTML = "";
-  });
-
-  test("returns web component element", async () => {
-    const rootElement = document.createElement("div");
-    const testElementText = "I'm a test component!";
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const reactInWebComponentElement = renderReactInWebComponent({
-      getReactComponent: () => <div>{testElementText}</div>,
-      webComponentRootElement: rootElement,
-    });
-
-    await waitFor(() => {
-      expect(reactInWebComponentElement).toBeInstanceOf(
-        ReactInWebComponentElement,
-      );
-      expect(reactInWebComponentElement.shadowRoot).toBeInstanceOf(ShadowRoot);
-      expect(reactInWebComponentElement).toBeInTheDocument();
-    });
-  });
-
-  test("renders a React app into a web component", async () => {
-    const rootElement = document.createElement("div");
-    const testElementText = "I'm a test component!";
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    const reactInWebComponentElement = renderReactInWebComponent({
-      getReactComponent: () => <div>{testElementText}</div>,
-      webComponentRootElement: rootElement,
-    });
-
-    await waitFor(() => {
-      expect(reactInWebComponentElement.shadowRoot).toHaveTextContent(
-        testElementText,
-      );
-    });
-  });
-
-  test("renders 2 React apps without erroring", () => {
-    const rootElement = document.createElement("div");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    renderReactInWebComponent({
-      getReactComponent: () => <div />,
-      webComponentRootElement: rootElement,
-    });
-
-    renderReactInWebComponent({
-      getReactComponent: () => <div />,
-      webComponentRootElement: rootElement,
-    });
-
-    expect(
-      document.querySelectorAll(reactWebComponentElementName),
-    ).toHaveLength(2);
-  });
-
-  test("renders a single element as children of the web component", () => {
-    const rootElement = document.createElement("div");
-    const webComponentChildren = document.createElement("div");
-
-    webComponentChildren.setAttribute("slot", "app");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    renderReactInWebComponent({
-      getReactComponent: () => <div />,
-      webComponentRootElement: rootElement,
-      webComponentChildren,
-    });
-
-    expect(document.querySelector("[slot=app]")).toBe(webComponentChildren);
-  });
-
-  test("renders multiple elements as children of the web component", () => {
-    const rootElement = document.createElement("div");
-    const webComponentChild1 = document.createElement("div");
-    const webComponentChild2 = document.createElement("div");
-
-    const webComponentChildren = [webComponentChild1, webComponentChild2];
-
-    webComponentChild1.setAttribute("slot", "app");
-    webComponentChild2.setAttribute("slot", "footer");
-
-    // If this isn't appended to the DOM, the React app won't exist because of how Web Components run.
-    document.body.append(rootElement);
-
-    renderReactInWebComponent({
-      getReactComponent: () => <div />,
-      webComponentRootElement: rootElement,
-      webComponentChildren,
-    });
-
-    expect(document.querySelector("[slot=app]")).toBe(webComponentChild1);
-    expect(document.querySelector("[slot=footer]")).toBe(webComponentChild2);
-  });
-});

package/src/web-component/renderReactInWebComponent.ts

@@ -1,135 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { type ReactNode } from "react";
-import type { Root } from "react-dom/client";
-
-import { createReactRootElements } from "./createReactRootElements.js";
-
-export type ReactRootElements = ReturnType<typeof createReactRootElements>;
-
-export const reactWebComponentElementName = "odyssey-react-web-component";
-
-export type GetReactComponentInWebComponent = (
-  reactRootElements: ReactRootElements,
-) => ReactNode;
-
-const SsrFriendlyHtmlElementClass =
-  "HTMLElement" in globalThis
-    ? HTMLElement
-    : (class {} as unknown as typeof globalThis.HTMLElement);
-
-export class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {
-  getReactComponent: GetReactComponentInWebComponent;
-  reactRootElements: ReactRootElements;
-  reactRootPromise: Promise<Root>;
-
-  constructor(getReactComponent: GetReactComponentInWebComponent) {
-    super();
-
-    this.getReactComponent = getReactComponent;
-    this.reactRootElements = createReactRootElements();
-
-    const styleElement = document.createElement("style");
-    const shadowRoot = this.attachShadow({ mode: "open" });
-
-    styleElement.innerHTML = `
-      :host {
-        all: initial;
-        contain: content;
-      }
-    `;
-
-    styleElement.setAttribute("nonce", window.cspNonce);
-
-    this.reactRootElements.stylesRootElement.appendChild(styleElement);
-    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
-    shadowRoot.appendChild(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.reactRootPromise.then((reactRoot) =>
-      reactRoot.render(this.getReactComponent(this.reactRootElements)),
-    );
-  }
-
-  disconnectedCallback() {
-    this.reactRootPromise.then((reactRoot) => reactRoot.unmount());
-  }
-}
-
-if (
-  "customElements" in globalThis &&
-  !customElements.get(reactWebComponentElementName)
-) {
-  customElements.define(
-    reactWebComponentElementName,
-    ReactInWebComponentElement,
-  );
-}
-
-export type RenderReactInWebComponentProps = {
-  /**
-   * This is a callback function for rendering your React component or app in the Web Component.
-   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.
-   *
-   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.
-   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.
-   */
-  getReactComponent: GetReactComponentInWebComponent;
-  /**
-   * One or more HTML elements that are going to render as `children` of the web component.
-   * If your React component doesn't take children, this is unnecessary.
-   *
-   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.
-   *
-   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.
-   */
-  webComponentChildren?: HTMLElement | HTMLElement[];
-  /**
-   * You React app renders in the web component, but the web component needs to be rendered in the document.
-   *
-   * This is the element the web component is rendered into.
-   */
-  webComponentRootElement: HTMLElement;
-};
-
-/**
- * Lets you render React apps or components in a Web Component.
- *
- * This is useful when global styles are causing conflicts with your React components.
- */
-export const renderReactInWebComponent = ({
-  getReactComponent,
-  webComponentChildren,
-  webComponentRootElement,
-}: RenderReactInWebComponentProps) => {
-  const reactElement = new ReactInWebComponentElement(getReactComponent);
-
-  if (webComponentChildren) {
-    (Array.isArray(webComponentChildren)
-      ? webComponentChildren
-      : [webComponentChildren]
-    ).forEach((webComponentChild) => {
-      reactElement.appendChild(webComponentChild);
-    });
-  }
-
-  webComponentRootElement.appendChild(reactElement);
-
-  return reactElement;
-};

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@okta/odyssey-typescript/tsconfig.react.json",
-  "compilerOptions": {
-    "composite": true,
-    "emitDeclarationOnly": false,
-    "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
-    "noEmit": false,
-    "rootDir": "src",
-    "outDir": "dist/types",
-    "sourceMap": true,
-    "types": ["vitest/globals"]
-  },
-  "include": ["*", "**/src/**/*", "**/properties/**/*", "**/scripts/**/*"],
-  "exclude": ["**/dist/**/*"]
-}

package/tsconfig.production.json

@@ -1,13 +0,0 @@
-{
-  "extends": "@okta/odyssey-typescript/tsconfig.react.production.json",
-  "compilerOptions": {
-    "composite": true,
-    "emitDeclarationOnly": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
-    "rootDir": "src",
-    "outDir": "dist/types"
-  },
-  "include": ["./src/**/*"],
-  "exclude": ["./test", "**/*.test.**", "**/dist/**/*"]
-}

package/vitest.config.ts

@@ -1,36 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  test: {
-    // browser: {
-    //   enabled: true,
-    //   name: 'chromium',
-    //   provider: 'playwright',
-    // },
-    coverage: {
-      reporter:
-        process.env.NODE_ENV === "test" ? ["text-summary"] : ["text", "html"],
-      thresholds: {
-        branches: 76,
-        functions: 44,
-        lines: 36,
-        statements: 36,
-      },
-    },
-    environment: "happy-dom",
-    globals: true,
-    setupFiles: ["./vitest.setup.ts"],
-  },
-});

package/vitest.setup.ts

@@ -1,32 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { PropertySymbol } from "happy-dom";
-import "@testing-library/jest-dom/vitest";
-import "jest-axe/extend-expect";
-import "regenerator-runtime/runtime";
-
-/* eslint-disable */
-const browserWindow =
-  // @ts-expect-error
-  global.document[PropertySymbol.ownerWindow] ||
-  // @ts-expect-error
-  global.document[PropertySymbol.window];
-
-global.setTimeout = browserWindow.setTimeout;
-global.clearTimeout = browserWindow.clearTimeout;
-global.setInterval = browserWindow.setInterval;
-global.clearInterval = browserWindow.clearInterval;
-global.requestAnimationFrame = browserWindow.requestAnimationFrame;
-global.cancelAnimationFrame = browserWindow.cancelAnimationFrame;
-global.queueMicrotask = browserWindow.queueMicrotask;
-/* eslint-enable @typescript-eslint/no-unsafe-assignment */