@okta/odyssey-react-mui 1.36.0 → 1.37.0

package/dist/esm/web-component/renderReactInWebComponent.js

@@ -10,29 +10,46 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import version from "./odysseyWebComponentVersion.generated.js";
 import { createReactRootElements } from "./createReactRootElements.js";
-export const reactWebComponentElementName = "odyssey-react-web-component";
+export const webComponentDataAttributeName = "data-odyssey-react-web-component";
+export const versionedWebComponentName = `odyssey-react-web-component-${version}`.toLowerCase();
 const SsrFriendlyHtmlElementClass = "HTMLElement" in globalThis ? HTMLElement : class {};
-export class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {
+export class WebComponentClass extends SsrFriendlyHtmlElementClass {
+  #getReactComponent = null;
+  #reactRootElements;
+  elementName = this.localName;
   reactRootPromise = Promise.resolve(null);
-  constructor(getReactComponent) {
+  constructor() {
     super();
-    this.getReactComponent = getReactComponent;
-    this.reactRootElements = createReactRootElements();
-    const styleElement = document.createElement("style");
+    this.#reactRootElements = createReactRootElements();
+    const {
+      appRootElement,
+      stylesRootElement
+    } = this.#reactRootElements;
     const shadowRoot = this.attachShadow({
       mode: "open"
     });
-    styleElement.innerHTML = `
+    shadowRoot.appendChild(stylesRootElement);
+    shadowRoot.appendChild(appRootElement);
+    const styleHostElement = document.createElement("style");
+    styleHostElement.setAttribute("nonce", window.cspNonce);
+    styleHostElement.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);
+    stylesRootElement.appendChild(styleHostElement);
+  }
+  setGetReactComponent(getReactComponent) {
+    this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
+      this.#getReactComponent = getReactComponent;
+      if (reactRoot) {
+        reactRoot.render(this.#getReactComponent(this.#reactRootElements));
+      } else {}
+      return reactRoot;
+    });
   }
   connectedCallback() {
     this.reactRootPromise = this.reactRootPromise.then(reactRoot => {
@@ -41,9 +58,11 @@ export class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {
       }
       return import("react-dom/client").then(({
         createRoot
-      }) => createRoot(this.reactRootElements.appRootElement));
+      }) => createRoot(this.#reactRootElements.appRootElement));
     }).then(reactRoot => {
-      reactRoot.render(this.getReactComponent(this.reactRootElements));
+      if (!this.#getReactComponent) {} else {
+        reactRoot.render(this.#getReactComponent(this.#reactRootElements));
+      }
       return reactRoot;
     });
   }
@@ -57,16 +76,29 @@ export class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {
     });
   }
 }
-if ("customElements" in globalThis && !customElements.get(reactWebComponentElementName)) {
-  customElements.define(reactWebComponentElementName, ReactInWebComponentElement);
-}
+export const getReactWebComponent = ({
+  webComponentName = versionedWebComponentName,
+  getReactComponent
+}) => {
+  if (!customElements.get(webComponentName)) {
+    customElements.define(webComponentName, WebComponentClass);
+  }
+  const element = document.createElement(webComponentName);
+  element.setAttribute(webComponentDataAttributeName, "");
+  element.setGetReactComponent(getReactComponent);
+  return element;
+};
 export const renderReactInWebComponent = ({
+  webComponentName,
   getReactComponent,
   webComponentChildren,
   webComponentParentElement,
   webComponentRootElement
 }) => {
-  const reactElement = new ReactInWebComponentElement(getReactComponent);
+  const reactElement = getReactWebComponent({
+    getReactComponent,
+    webComponentName
+  });
   if (webComponentChildren) {
     (Array.isArray(webComponentChildren) ? webComponentChildren : [webComponentChildren]).forEach(webComponentChild => {
       reactElement.appendChild(webComponentChild);

package/dist/esm/web-component/renderReactInWebComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderReactInWebComponent.js","names":["createReactRootElements","reactWebComponentElementName","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","ReactInWebComponentElement","reactRootPromise","Promise","resolve","constructor","getReactComponent","reactRootElements","styleElement","document","createElement","shadowRoot","attachShadow","mode","innerHTML","setAttribute","window","cspNonce","stylesRootElement","appendChild","appRootElement","connectedCallback","then","reactRoot","Error","createRoot","render","disconnectedCallback","unmount","customElements","get","define","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\n\nexport const reactWebComponentElementName = \"odyssey-react-web-component\";\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class ReactInWebComponentElement extends SsrFriendlyHtmlElementClass {\n  getReactComponent: GetReactComponentInWebComponent;\n  reactRootElements: ReactRootElements;\n  reactRootPromise: Promise<Root | null> = Promise.resolve(null);\n\n  constructor(getReactComponent: GetReactComponentInWebComponent) {\n    super();\n\n    this.getReactComponent = getReactComponent;\n    this.reactRootElements = createReactRootElements();\n\n    const styleElement = document.createElement(\"style\");\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n    styleElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n\n    styleElement.setAttribute(\"nonce\", window.cspNonce);\n\n    this.reactRootElements.stylesRootElement.appendChild(styleElement);\n    shadowRoot.appendChild(this.reactRootElements.stylesRootElement);\n    shadowRoot.appendChild(this.reactRootElements.appRootElement);\n  }\n\n  connectedCallback() {\n    this.reactRootPromise = this.reactRootPromise\n      .then((reactRoot) => {\n        if (reactRoot) {\n          // Shouldn't ever happen\n          throw new Error(\n            `connectedCallback fired when reactRoot is already mounted.`,\n          );\n        }\n\n        // Ensure react root is available before mounting\n        // 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\n        return import(\"react-dom/client\").then(({ createRoot }) =>\n          createRoot(this.reactRootElements.appRootElement),\n        );\n      })\n      .then((reactRoot) => {\n        reactRoot.render(this.getReactComponent(this.reactRootElements));\n        return reactRoot;\n      });\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      if (!reactRoot) {\n        // Shouldn't ever happen\n        throw new Error(\n          `disconnectedCallback fired when reactRoot is already unmounted.`,\n        );\n      }\n\n      reactRoot.unmount();\n      // Set root to null. We don't want to attempt to render to a root that's already been unmounted.\n      return null;\n    });\n  }\n}\n\nif (\n  \"customElements\" in globalThis &&\n  !customElements.get(reactWebComponentElementName)\n) {\n  customElements.define(\n    reactWebComponentElementName,\n    ReactInWebComponentElement,\n  );\n}\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n} & (\n  | {\n      /**\n       * The React app renders in the web component, but the web component needs to be rendered in the document.\n       *\n       * This is the element the web component is rendered into.\n       */\n      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: HTMLElement;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\n);\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = new ReactInWebComponentElement(getReactComponent);\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"renderReactInWebComponent.js","names":["version","createReactRootElements","webComponentDataAttributeName","versionedWebComponentName","toLowerCase","SsrFriendlyHtmlElementClass","globalThis","HTMLElement","WebComponentClass","getReactComponent","reactRootElements","elementName","localName","reactRootPromise","Promise","resolve","constructor","appRootElement","stylesRootElement","shadowRoot","attachShadow","mode","appendChild","styleHostElement","document","createElement","setAttribute","window","cspNonce","innerHTML","setGetReactComponent","then","reactRoot","render","connectedCallback","Error","createRoot","disconnectedCallback","unmount","getReactWebComponent","webComponentName","customElements","get","define","element","renderReactInWebComponent","webComponentChildren","webComponentParentElement","webComponentRootElement","reactElement","Array","isArray","forEach","webComponentChild"],"sources":["../../../src/web-component/renderReactInWebComponent.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { type ReactNode } from \"react\";\nimport type { Root } from \"react-dom/client\";\nimport version from \"./odysseyWebComponentVersion.generated.js\";\n\nimport {\n  createReactRootElements,\n  type ReactRootElements,\n} from \"./createReactRootElements.js\";\n\ninterface GetReactWebComponentOptions {\n  webComponentName?: string;\n  getReactComponent: (reactRootElements: ReactRootElements) => ReactNode;\n}\n\n// Used by selenium when selecting for odyssey web components regardless of their name.\nexport const webComponentDataAttributeName = \"data-odyssey-react-web-component\";\n\n// Unique name to avoid multiple versions of odyssey overwriting each other's implementations\nexport const versionedWebComponentName =\n  `odyssey-react-web-component-${version}`.toLowerCase();\n\nconst SsrFriendlyHtmlElementClass =\n  \"HTMLElement\" in globalThis\n    ? HTMLElement\n    : (class {} as unknown as typeof globalThis.HTMLElement);\n\nexport class WebComponentClass extends SsrFriendlyHtmlElementClass {\n  #getReactComponent: GetReactComponentInWebComponent | null = null;\n  readonly #reactRootElements: ReactRootElements;\n  public readonly elementName: string = this.localName;\n  // public for testing\n  public reactRootPromise: Promise<Root | null> = Promise.resolve(null);\n\n  constructor() {\n    super();\n\n    this.#reactRootElements = createReactRootElements();\n    const { appRootElement, stylesRootElement } = this.#reactRootElements;\n\n    const shadowRoot = this.attachShadow({ mode: \"open\" });\n    shadowRoot.appendChild(stylesRootElement);\n    shadowRoot.appendChild(appRootElement);\n\n    const styleHostElement = document.createElement(\"style\");\n    styleHostElement.setAttribute(\"nonce\", window.cspNonce);\n    styleHostElement.innerHTML = `\n      :host {\n        all: initial;\n        contain: content;\n      }\n    `;\n    stylesRootElement.appendChild(styleHostElement);\n  }\n\n  /**\n   * Provides the function used to initialize react content that is specific to this instance\n   * of the web component, which is used later in the connectedCallback.\n   *\n   * Always set immediately after creation via document.createElement\n   */\n  setGetReactComponent(getReactComponent: GetReactComponentInWebComponent) {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      this.#getReactComponent = getReactComponent;\n      if (reactRoot) {\n        // connectedCallback has already been fired. Need to mount this content to the existing root\n        reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n      } else {\n        // Nothing to do. Content will be mounted when connectedCallback is called\n      }\n\n      return reactRoot;\n    });\n  }\n\n  connectedCallback() {\n    this.reactRootPromise = this.reactRootPromise\n      .then((reactRoot) => {\n        if (reactRoot) {\n          // Shouldn't ever happen. connected and disconnected should never be called out of order\n          throw new Error(\n            `connectedCallback fired when reactRoot is already mounted.`,\n          );\n        }\n\n        // Ensure react root is available before mounting\n        // 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\n        return import(\"react-dom/client\").then(({ createRoot }) =>\n          createRoot(this.#reactRootElements.appRootElement),\n        );\n      })\n      .then((reactRoot) => {\n        if (!this.#getReactComponent) {\n          // getReactComponent hasn't been set yet. Content will be mounted once it's set.\n        } else {\n          reactRoot.render(this.#getReactComponent(this.#reactRootElements));\n        }\n        return reactRoot;\n      });\n  }\n\n  disconnectedCallback() {\n    this.reactRootPromise = this.reactRootPromise.then((reactRoot) => {\n      if (!reactRoot) {\n        // Shouldn't ever happen\n        throw new Error(\n          `disconnectedCallback fired when reactRoot is already unmounted.`,\n        );\n      }\n\n      reactRoot.unmount();\n      // Set root to null. We don't want to attempt to render to a root that's already been unmounted.\n      return null;\n    });\n  }\n}\n\n/**\n * Returns a constructed web component which manages it's own shadow dom and react dom roots\n * A custom name can be specified, otherwise a default is provided\n */\nexport const getReactWebComponent = ({\n  webComponentName = versionedWebComponentName,\n  getReactComponent,\n}: GetReactWebComponentOptions) => {\n  // This name hasn't been defined yet. Add a definition for it before constructing one.\n  if (!customElements.get(webComponentName)) {\n    customElements.define(webComponentName, WebComponentClass);\n  }\n\n  const element = document.createElement(webComponentName) as InstanceType<\n    typeof WebComponentClass\n  >;\n  // Set selenium attribute so this can be selected\n  element.setAttribute(webComponentDataAttributeName, \"\");\n  // function used for creating react content\n  element.setGetReactComponent(getReactComponent);\n  return element;\n};\n\nexport type GetReactComponentInWebComponent = (\n  reactRootElements: ReactRootElements,\n) => ReactNode;\n\nexport type RenderReactInWebComponentProps = {\n  /**\n   * Optional name given to this web component.\n   * Defaults to a 'odyssey-react-wc-' plus the current odyssey version\n   */\n  webComponentName?: string;\n  /**\n   * This is a callback function for rendering your React component or app in the Web Component.\n   * It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI.\n   *\n   * You will need to add `<slot>` elements if you want to pass child elements or components or React apps.\n   * You can have multiple slots in your app if you add a `name` attribute to your `<slot>` elements.\n   */\n  getReactComponent: GetReactComponentInWebComponent;\n  /**\n   * One or more HTML elements that are going to render as `children` of the web component.\n   * If your React component doesn't take children, this is unnecessary.\n   *\n   * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children.\n   *\n   * You will need to have rendered `<slot>` elements in your React component or `children` won't show up.\n   */\n  webComponentChildren?: HTMLElement | HTMLElement[];\n} & (\n  | {\n      /**\n       * The React app renders in the web component, but the web component needs to be rendered in the document.\n       *\n       * This is the element the web component is rendered into.\n       */\n      webComponentParentElement: HTMLElement;\n      webComponentRootElement?: never;\n    }\n  | {\n      webComponentParentElement?: HTMLElement;\n      /**\n       * @deprecated Use `webComponentParentElement` instead.\n       */\n      webComponentRootElement: HTMLElement;\n    }\n);\n\n/**\n * Lets you render React apps or components in a Web Component.\n *\n * This is useful when global styles are causing conflicts with your React components.\n */\nexport const renderReactInWebComponent = ({\n  webComponentName,\n  getReactComponent,\n  webComponentChildren,\n  webComponentParentElement,\n  webComponentRootElement,\n}: RenderReactInWebComponentProps) => {\n  const reactElement = getReactWebComponent({\n    getReactComponent,\n    webComponentName,\n  });\n\n  if (webComponentChildren) {\n    (Array.isArray(webComponentChildren)\n      ? webComponentChildren\n      : [webComponentChildren]\n    ).forEach((webComponentChild) => {\n      reactElement.appendChild(webComponentChild);\n    });\n  }\n\n  if (webComponentParentElement) {\n    webComponentParentElement.appendChild(reactElement);\n  }\n  // Remove this condition when `webComponentRootElement` is no longer a prop.\n  else if (webComponentRootElement) {\n    webComponentRootElement.appendChild(reactElement);\n  }\n\n  return reactElement;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Apr 2025 19:05:52 GMT
+ * Generated on Thu, 15 May 2025 19:38:54 GMT
  */
 
 module.exports = {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Apr 2025 19:05:52 GMT
+ * Generated on Thu, 15 May 2025 19:38:54 GMT
  */
 
 export const BorderColorControl = "#8d8d8d";

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 24 Apr 2025 19:05:52 GMT
+ * Generated on Thu, 15 May 2025 19:38:54 GMT
  */
 
 $border-color-control: #8d8d8d !default;