@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/src/useContrastMode.tsx

@@ -0,0 +1,149 @@
+/*!
+ * Copyright (c) 2023-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 {
+  createContext,
+  useContext,
+  useRef,
+  useLayoutEffect,
+  useState,
+  useCallback,
+} from "react";
+import * as Tokens from "@okta/odyssey-design-tokens";
+
+export type ContrastMode = "lowContrast" | "highContrast";
+export type ContrastModeContextType = {
+  contrastMode: ContrastMode;
+};
+
+export const ContrastModeContext = createContext<ContrastModeContextType>({
+  contrastMode: "lowContrast",
+});
+
+export const defaultContrast = "lowContrast";
+
+export const useContrastModeContext = () => useContext(ContrastModeContext);
+
+export const hexToRgb = (hexString: string) => {
+  const hexNumber = parseInt(hexString.slice(1), 16);
+  const red = (hexNumber >> 16) & 255;
+  const green = (hexNumber >> 8) & 255;
+  const blue = hexNumber & 255;
+  return `rgb(${red}, ${green}, ${blue})`;
+};
+
+export const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50);
+
+export const isTransparentColor = (color: string) =>
+  color === "rgba(0, 0, 0, 0)" || color === "transparent";
+
+export const normalizeRgbaToRgb = (rgba: string) =>
+  rgba.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, "rgb($1, $2, $3)");
+
+export const getElementComputedBackgroundColor = (
+  element: HTMLElement,
+): string => window.getComputedStyle(element).backgroundColor;
+
+export const normalizeBackgroundColor = (bgColor: string): string => {
+  if (/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/.test(bgColor)) {
+    const normalizedColor = normalizeRgbaToRgb(bgColor);
+    return normalizedColor === hueNeutral50Rgb
+      ? Tokens.HueNeutral50
+      : normalizedColor;
+  }
+
+  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;
+};
+
+export const defaultParentBackgroundColor = "#ffffff";
+
+/**
+ * Determines the effective background color of an element.
+ *
+ * @param element - The HTML element to check.
+ * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.
+ *
+ * Note:
+ * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).
+ * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).
+ */
+export const getBackgroundColor = (element: HTMLElement | null): string => {
+  while (element) {
+    const bgColor = getElementComputedBackgroundColor(element);
+    if (!isTransparentColor(bgColor)) {
+      return normalizeBackgroundColor(bgColor);
+    }
+    element = element.parentElement;
+  }
+  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found
+};
+
+type UseContrastModeProps = {
+  contrastMode?: ContrastMode;
+};
+
+export const useContrastMode = ({
+  contrastMode: explicitContrastMode,
+}: UseContrastModeProps) => {
+  const contrastContainerRef = useRef<HTMLDivElement>(null);
+  const { contrastMode: existingContrastMode } = useContrastModeContext();
+
+  const [parentBackgroundColor, setParentBackgroundColor] = useState(
+    defaultParentBackgroundColor,
+  );
+  const [contrastMode, setContrastMode] = useState<ContrastMode>(
+    () => explicitContrastMode || existingContrastMode,
+  );
+
+  const updateBackgroundColor = useCallback(() => {
+    const newBgColor = getBackgroundColor(contrastContainerRef.current);
+    setParentBackgroundColor(newBgColor);
+
+    if (!explicitContrastMode) {
+      setContrastMode(
+        newBgColor === Tokens.HueNeutral50 ? "highContrast" : "lowContrast",
+      );
+    }
+  }, [explicitContrastMode]);
+
+  useLayoutEffect(() => {
+    const observer = new MutationObserver(updateBackgroundColor);
+    observer.observe(document.querySelector("html") as HTMLHtmlElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"],
+    });
+    observer.observe(document.head, {
+      childList: true,
+      subtree: true,
+    });
+
+    const onTransitionEnd = (event: TransitionEvent) => {
+      if (event.propertyName === "background-color") {
+        updateBackgroundColor();
+      }
+    };
+
+    document.addEventListener("transitionend", onTransitionEnd);
+    updateBackgroundColor();
+
+    return () => {
+      document.removeEventListener("transitionend", onTransitionEnd);
+      observer.disconnect();
+    };
+  }, [updateBackgroundColor]);
+
+  return {
+    contrastContainerRef,
+    contrastMode,
+    parentBackgroundColor,
+  };
+};

package/src/web-component/index.ts

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+export * from "./renderReactInWebComponent";
+export * from "./shadow-dom";

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

@@ -0,0 +1,156 @@
+/*!
+ * 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 {
+  createReactRootElements,
+  ReactInWebComponentElement,
+  reactWebComponentElementName,
+  renderReactInWebComponent,
+} from "./renderReactInWebComponent";
+
+describe("createReactRootElements", () => {
+  test("returns two elements at attach to a Shadow DOM", () => {
+    const { appRootElement, stylesRootElement } = createReactRootElements();
+
+    expect(appRootElement).toBeInstanceOf(HTMLDivElement);
+    expect(stylesRootElement).toBeInstanceOf(HTMLDivElement);
+  });
+
+  test("App root element has the correct attributes", () => {
+    const { appRootElement } = createReactRootElements();
+
+    expect(appRootElement).toHaveAttribute("id", "app-root");
+    expect(appRootElement).toHaveAttribute("style", "height: inherit;");
+  });
+
+  test("Emotion root element has the correct attributes", () => {
+    const nonce = "hello-world";
+
+    window.cspNonce = nonce;
+
+    const { stylesRootElement } = createReactRootElements();
+
+    expect(stylesRootElement).toHaveAttribute("id", "style-root");
+    expect(stylesRootElement).toHaveAttribute("nonce", nonce);
+  });
+});
+
+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

@@ -0,0 +1,153 @@
+/*!
+ * 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 { createRoot, type Root } from "react-dom/client";
+
+/**
+ * Creates elements for a Shadow DOM that Odyssey will render into.
+ * The Emotion root is for `<style>` tags and the app root is for an app to render into.
+ * These are bare elements that
+ */
+export const createReactRootElements = () => {
+  const appRootElement = document.createElement("div");
+  const stylesRootElement = document.createElement("div");
+
+  // This `div` may cause layout issues unless it inherits the parent's height.
+  appRootElement.style.setProperty("height", "inherit");
+
+  appRootElement.setAttribute("id", "app-root");
+  stylesRootElement.setAttribute("id", "style-root");
+  stylesRootElement.setAttribute("nonce", window.cspNonce);
+
+  return {
+    /**
+     * The element your React root component renders into.
+     * React has to render or portal somewhere, and this element can be used for that root element.
+     *
+     * In the case of a web component, there is no defined root element, so you have to define it yourself.
+     */
+    appRootElement,
+    /**
+     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.
+     *
+     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.
+     */
+    stylesRootElement,
+  };
+};
+
+export type ReactRootElements = ReturnType<typeof createReactRootElements>;
+
+export const reactWebComponentElementName = "odyssey-react-web-component";
+
+export type GetReactComponentInWebComponent = (
+  reactRootElements: ReactRootElements,
+) => ReactNode;
+
+export class ReactInWebComponentElement extends HTMLElement {
+  getReactComponent: GetReactComponentInWebComponent;
+  reactRoot: Root;
+  reactRootElements: ReactRootElements;
+
+  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);
+
+    this.reactRoot = createRoot(this.reactRootElements.appRootElement);
+  }
+
+  connectedCallback() {
+    this.reactRoot.render(this.getReactComponent(this.reactRootElements));
+  }
+
+  disconnectedCallback() {
+    this.reactRoot.unmount();
+  }
+}
+
+if (!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/src/web-component/shadow-dom.test.ts

@@ -0,0 +1,24 @@
+/*!
+ * 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 { createShadowDomElements } from "./shadow-dom";
+
+describe("createShadowDomElements", () => {
+  test("returns two elements attached to a Shadow DOM", () => {
+    const { emotionRootElement, shadowRootElement } = createShadowDomElements(
+      document.createElement("div"),
+    );
+
+    expect(emotionRootElement.parentNode).toBeInstanceOf(ShadowRoot);
+    expect(shadowRootElement.parentNode).toBeInstanceOf(ShadowRoot);
+  });
+});

package/src/{createShadowDomElements.ts → web-component/shadow-dom.ts}

@@ -10,28 +10,29 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { createReactRootElements } from "./renderReactInWebComponent";
+
+/**
+ * @deprecated Use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.
+ */
 export const createShadowDomElements = (containerElement: HTMLElement) => {
   const shadowRoot = containerElement.attachShadow({ mode: "open" });
 
   // Container for Emotion `<style>` elements.
-  const emotionRootElement = document.createElement("div");
-  emotionRootElement.setAttribute("id", "style-root");
-  emotionRootElement.setAttribute("nonce", window.cspNonce);
+  const { appRootElement, stylesRootElement } = createReactRootElements();
 
-  // React app root component.
-  const shadowRootElement = document.createElement("div");
-  shadowRootElement.setAttribute("id", "shadow-root");
-  // This div could cause issues with layout of children.
-  // For flexibility, make it inherit its parent's height
-  shadowRootElement.style.setProperty("height", "inherit");
-
-  shadowRoot.appendChild(emotionRootElement);
-  shadowRoot.appendChild(shadowRootElement);
+  shadowRoot.appendChild(appRootElement);
+  shadowRoot.appendChild(stylesRootElement);
 
-  return { emotionRootElement, shadowRootElement };
+  return {
+    emotionRootElement: stylesRootElement,
+    shadowRootElement: appRootElement,
+  };
 };
 
-/** @deprecated Use `createShadowDomElements` instead. */
+/**
+ * @deprecated Use `createShadowDomElements` instead which returns an object instead of an array. It's otherwise the same.
+ * @deprecated Ideally, use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */
 export const createShadowRootElement = (
   containerElement: HTMLElement,
 ): [HTMLStyleElement, HTMLDivElement] => {

package/dist/ContrastModeProvider.js

@@ -1,86 +0,0 @@
-/*!
- * Copyright (c) 2023-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 React, { createContext, useContext, useRef, useLayoutEffect, useState, useMemo } from "react";
-import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
-import * as Tokens from "@okta/odyssey-design-tokens";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ContrastModeContext = createContext({
-  contrastMode: "highContrast",
-  parentBackgroundColor: ""
-});
-export const useContrastContext = () => useContext(ContrastModeContext);
-const hexToRgb = hex => {
-  const bigint = parseInt(hex.slice(1), 16);
-  const r = bigint >> 16 & 255;
-  const g = bigint >> 8 & 255;
-  const b = bigint & 255;
-  return `rgb(${r}, ${g}, ${b})`;
-};
-export const useParentBackgroundColor = ref => {
-  const [backgroundColor, setBackgroundColor] = useState("");
-  const hueNeutral50Rgb = useMemo(() => hexToRgb(Tokens.HueNeutral50), []);
-  useLayoutEffect(() => {
-    if (ref.current) {
-      let element = ref.current;
-      while (element) {
-        const bgColor = window.getComputedStyle(element).backgroundColor;
-        if (bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent") {
-          if (bgColor === hueNeutral50Rgb) {
-            setBackgroundColor(Tokens.HueNeutral50);
-          } else {
-            setBackgroundColor(bgColor);
-          }
-          break;
-        }
-        element = element.parentElement;
-      }
-    }
-  }, [ref, hueNeutral50Rgb]);
-  return backgroundColor;
-};
-export const ContrastModeProvider = ({
-  children,
-  contrastMode: explicitContrastMode
-}) => {
-  const ref = useRef(null);
-  const parentBackgroundColor = useParentBackgroundColor(ref);
-  const [contrastMode, setContrastMode] = useState("highContrast");
-  useLayoutEffect(() => {
-    if (explicitContrastMode) {
-      setContrastMode(explicitContrastMode);
-    } else {
-      const isLowContrast = parentBackgroundColor === Tokens.HueNeutral50;
-      setContrastMode(isLowContrast ? "lowContrast" : "highContrast");
-    }
-  }, [parentBackgroundColor, explicitContrastMode]);
-  const contextValue = useMemo(() => ({
-    contrastMode,
-    parentBackgroundColor
-  }), [contrastMode, parentBackgroundColor]);
-  const existingTheme = useTheme();
-  const theme = useMemo(() => createTheme({
-    ...existingTheme,
-    odysseyContrastMode: contrastMode
-  }), [existingTheme, contrastMode]);
-  return _jsx("div", {
-    ref: ref,
-    children: _jsx(ContrastModeContext.Provider, {
-      value: contextValue,
-      children: _jsx(ThemeProvider, {
-        theme: theme,
-        children: children
-      })
-    })
-  });
-};
-//# sourceMappingURL=ContrastModeProvider.js.map

package/dist/ContrastModeProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContrastModeProvider.js","names":["React","createContext","useContext","useRef","useLayoutEffect","useState","useMemo","createTheme","ThemeProvider","useTheme","Tokens","jsx","_jsx","ContrastModeContext","contrastMode","parentBackgroundColor","useContrastContext","hexToRgb","hex","bigint","parseInt","slice","r","g","b","useParentBackgroundColor","ref","backgroundColor","setBackgroundColor","hueNeutral50Rgb","HueNeutral50","current","element","bgColor","window","getComputedStyle","parentElement","ContrastModeProvider","children","explicitContrastMode","setContrastMode","isLowContrast","contextValue","existingTheme","theme","odysseyContrastMode","Provider","value"],"sources":["../src/ContrastModeProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 React, {\n  createContext,\n  useContext,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useMemo,\n  ReactNode,\n} from \"react\";\nimport { createTheme, ThemeProvider, useTheme } from \"@mui/material/styles\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\n\ndeclare module \"@mui/material/styles\" {\n  interface Theme {\n    odysseyContrastMode: ContrastMode;\n  }\n  interface ThemeOptions {\n    odysseyContrastMode?: ContrastMode;\n  }\n}\n\nexport type ContrastMode = \"lowContrast\" | \"highContrast\";\n\nexport type ContrastModeContextType = {\n  contrastMode: ContrastMode;\n  parentBackgroundColor: string;\n};\n\nconst ContrastModeContext = createContext<ContrastModeContextType>({\n  contrastMode: \"highContrast\",\n  parentBackgroundColor: \"\",\n});\n\nexport const useContrastContext = () => useContext(ContrastModeContext);\n\nconst hexToRgb = (hex: string): string => {\n  const bigint = parseInt(hex.slice(1), 16);\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n  return `rgb(${r}, ${g}, ${b})`;\n};\n\nexport const useParentBackgroundColor = (ref: React.RefObject<HTMLElement>) => {\n  const [backgroundColor, setBackgroundColor] = useState(\"\");\n\n  const hueNeutral50Rgb = useMemo(() => hexToRgb(Tokens.HueNeutral50), []);\n\n  useLayoutEffect(() => {\n    if (ref.current) {\n      let element: HTMLElement | null = ref.current;\n      while (element) {\n        const bgColor = window.getComputedStyle(element).backgroundColor;\n\n        if (bgColor !== \"rgba(0, 0, 0, 0)\" && bgColor !== \"transparent\") {\n          if (bgColor === hueNeutral50Rgb) {\n            setBackgroundColor(Tokens.HueNeutral50);\n          } else {\n            setBackgroundColor(bgColor);\n          }\n          break;\n        }\n        element = element.parentElement;\n      }\n    }\n  }, [ref, hueNeutral50Rgb]);\n\n  return backgroundColor;\n};\n\ntype ContrastModeProviderProps = {\n  children: ReactNode;\n  contrastMode?: ContrastMode;\n};\n\nexport const ContrastModeProvider = ({\n  children,\n  contrastMode: explicitContrastMode,\n}: ContrastModeProviderProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const parentBackgroundColor = useParentBackgroundColor(ref);\n  const [contrastMode, setContrastMode] =\n    useState<ContrastMode>(\"highContrast\");\n\n  useLayoutEffect(() => {\n    if (explicitContrastMode) {\n      setContrastMode(explicitContrastMode);\n    } else {\n      const isLowContrast = parentBackgroundColor === Tokens.HueNeutral50;\n      setContrastMode(isLowContrast ? \"lowContrast\" : \"highContrast\");\n    }\n  }, [parentBackgroundColor, explicitContrastMode]);\n\n  const contextValue = useMemo<ContrastModeContextType>(\n    () => ({\n      contrastMode,\n      parentBackgroundColor,\n    }),\n    [contrastMode, parentBackgroundColor],\n  );\n\n  const existingTheme = useTheme();\n  const theme = useMemo(\n    () =>\n      createTheme({\n        ...existingTheme,\n        odysseyContrastMode: contrastMode,\n      }),\n    [existingTheme, contrastMode],\n  );\n\n  return (\n    <div ref={ref}>\n      <ContrastModeContext.Provider value={contextValue}>\n        <ThemeProvider theme={theme}>{children}</ThemeProvider>\n      </ContrastModeContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/createShadowDomElements.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createShadowDomElements.js","names":["createShadowDomElements","containerElement","shadowRoot","attachShadow","mode","emotionRootElement","document","createElement","setAttribute","window","cspNonce","shadowRootElement","style","setProperty","appendChild","createShadowRootElement"],"sources":["../src/createShadowDomElements.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-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\nexport const createShadowDomElements = (containerElement: HTMLElement) => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // Container for Emotion `<style>` elements.\n  const emotionRootElement = document.createElement(\"div\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // React app root component.\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n  // This div could cause issues with layout of children.\n  // For flexibility, make it inherit its parent's height\n  shadowRootElement.style.setProperty(\"height\", \"inherit\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return { emotionRootElement, shadowRootElement };\n};\n\n/** @deprecated Use `createShadowDomElements` instead. */\nexport const createShadowRootElement = (\n  containerElement: HTMLElement,\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRootElement = document.createElement(\"style\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRootElement, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,uBAAuB,GAAIC,gBAA6B,IAAK;EACxE,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACxDF,kBAAkB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDH,kBAAkB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMC,iBAAiB,GAAGL,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDI,iBAAiB,CAACH,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAGnDG,iBAAiB,CAACC,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;EAExDX,UAAU,CAACY,WAAW,CAACT,kBAAkB,CAAC;EAC1CH,UAAU,CAACY,WAAW,CAACH,iBAAiB,CAAC;EAEzC,OAAO;IAAEN,kBAAkB;IAAEM;EAAkB,CAAC;AAClD,CAAC;AAGD,OAAO,MAAMI,uBAAuB,GAClCd,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1DF,kBAAkB,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDH,kBAAkB,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMC,iBAAiB,GAAGL,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDI,iBAAiB,CAACH,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDN,UAAU,CAACY,WAAW,CAACT,kBAAkB,CAAC;EAC1CH,UAAU,CAACY,WAAW,CAACH,iBAAiB,CAAC;EAEzC,OAAO,CAACN,kBAAkB,EAAEM,iBAAiB,CAAC;AAChD,CAAC"}