@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/src/{labs/Switch.tsx → Switch.tsx}

@@ -23,19 +23,19 @@ import { SwitchProps as MuiSwitchProps, FormLabel } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 
-import { Box } from "../Box";
-import { FieldComponentProps } from "../FieldComponentProps";
-import { FieldHint } from "../FieldHint";
-import { CheckedFieldProps } from "../FormCheckedProps";
-import type { HtmlProps } from "../HtmlProps";
-import { CheckIcon } from "../icons.generated";
-import { ComponentControlledState, getControlState } from "../inputUtils";
+import { Box } from "./Box";
+import { FieldComponentProps } from "./FieldComponentProps";
+import { FieldHint } from "./FieldHint";
+import { CheckedFieldProps } from "./FormCheckedProps";
+import type { HtmlProps } from "./HtmlProps";
+import { CheckIcon } from "./icons.generated";
+import { ComponentControlledState, getControlState } from "./inputUtils";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { stripRem, toRem } from "../remUtils";
-import { useUniqueId } from "../useUniqueId";
+} from "./OdysseyDesignTokensContext";
+import { stripRem, toRem } from "./remUtils";
+import { useUniqueId } from "./useUniqueId";
 
 const { CONTROLLED } = ComponentControlledState;
 
@@ -43,13 +43,14 @@ const nonForwardedProps = [
   "isChecked",
   "isDisabled",
   "isFullWidth",
+  "isReadOnly",
   "odysseyDesignTokens",
 ];
 
 const SwitchAndLabelContainer = styled("div", {
   shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),
 })<
-  Pick<SwitchProps, "isFullWidth" | "isDisabled"> & {
+  Pick<SwitchProps, "isFullWidth" | "isDisabled" | "isReadOnly"> & {
     odysseyDesignTokens: DesignTokens;
   }
 >(({ isFullWidth, odysseyDesignTokens }) => ({
@@ -66,17 +67,16 @@ const SwitchContainer = styled.div({
 const StyledSwitchLabel = styled(FormLabel, {
   shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),
 })<
-  Pick<SwitchLabelComponentProps, "isDisabled"> & {
+  Pick<SwitchLabelComponentProps, "isDisabled" | "isReadOnly"> & {
     odysseyDesignTokens: DesignTokens;
   }
->(({ isDisabled, odysseyDesignTokens }) => ({
+>(({ isDisabled, isReadOnly, odysseyDesignTokens }) => ({
   display: "block",
   margin: 0,
-  color: isDisabled
-    ? odysseyDesignTokens.TypographyColorDisabled
-    : odysseyDesignTokens.PaletteNeutralDark,
+  color: odysseyDesignTokens.PaletteNeutralDark,
 
   ...(isDisabled && {
+    color: odysseyDesignTokens.TypographyColorDisabled,
     p: {
       color: odysseyDesignTokens.TypographyColorDisabled,
     },
@@ -84,38 +84,57 @@ const StyledSwitchLabel = styled(FormLabel, {
       color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
     },
   }),
+
+  ...(isReadOnly && {
+    color: odysseyDesignTokens.HueNeutral700,
+    p: {
+      color: odysseyDesignTokens.HueNeutral700,
+    },
+    a: {
+      color: `${odysseyDesignTokens.HueNeutral700} !important`,
+    },
+  }),
 }));
 
 const SwitchTrack = styled("div", {
   shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),
 })<
-  Pick<SwitchProps, "isChecked" | "isDisabled"> & {
+  Pick<SwitchProps, "isChecked" | "isDisabled" | "isReadOnly"> & {
     odysseyDesignTokens: DesignTokens;
   }
->(({ isChecked, isDisabled, odysseyDesignTokens }) => ({
+>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => ({
   position: "relative",
   width: odysseyDesignTokens.Spacing7,
   height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
   borderRadius: odysseyDesignTokens.BorderRadiusOuter,
-  backgroundColor: isDisabled
-    ? odysseyDesignTokens.HueNeutral200
-    : isChecked
-      ? odysseyDesignTokens.PaletteSuccessLight
-      : odysseyDesignTokens.HueNeutral300,
+  backgroundColor: odysseyDesignTokens.HueNeutral300,
   transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+  ...(isDisabled && {
+    backgroundColor: odysseyDesignTokens.HueNeutral200,
+  }),
+
+  ...(isReadOnly && {
+    backgroundColor: odysseyDesignTokens.HueNeutral600,
+  }),
+
+  ...(isChecked &&
+    !isDisabled &&
+    !isReadOnly && {
+      backgroundColor: odysseyDesignTokens.PaletteSuccessLight,
+    }),
 }));
 
 const SwitchThumb = styled("span", {
   shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),
 })<
-  Pick<SwitchProps, "isChecked" | "isDisabled"> & {
+  Pick<SwitchProps, "isChecked" | "isDisabled" | "isReadOnly"> & {
     odysseyDesignTokens: DesignTokens;
   }
->(({ isChecked, isDisabled, odysseyDesignTokens }) => {
+>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => {
   const thumbOffset = toRem(3);
   const trackWidth = stripRem(odysseyDesignTokens.Spacing7);
   const thumbWidth = stripRem(odysseyDesignTokens.Spacing4) - toRem(2);
-
   const transformDistance = trackWidth - thumbWidth - thumbOffset * 2;
 
   return {
@@ -125,40 +144,57 @@ const SwitchThumb = styled("span", {
     width: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,
     height: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,
     borderRadius: odysseyDesignTokens.BorderRadiusRound,
-    backgroundColor: isDisabled
-      ? odysseyDesignTokens.HueNeutral50
-      : odysseyDesignTokens.HueNeutralWhite,
-    transform: isChecked
-      ? `translate3d(${transformDistance}rem, -50%, 0)`
-      : "translate3d(0, -50%, 0)",
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+    transform: "translate3d(0, -50%, 0)",
     transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+
+    ...(isDisabled && {
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+    }),
+
+    ...(isReadOnly && {
+      backgroundColor: odysseyDesignTokens.HueNeutral400,
+    }),
+
+    ...(isChecked && {
+      transform: `translate3d(${transformDistance}rem, -50%, 0)`,
+    }),
   };
 });
 
 const SwitchCheckMark = styled(CheckIcon, {
   shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),
 })<
-  Pick<SwitchProps, "isChecked" | "isDisabled"> & {
+  Pick<SwitchProps, "isChecked" | "isDisabled" | "isReadOnly"> & {
     odysseyDesignTokens: DesignTokens;
   }
->(({ isChecked, isDisabled, odysseyDesignTokens }) => ({
+>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => ({
   position: "absolute",
   top: "50%",
   left: 3,
   width: odysseyDesignTokens.Spacing4,
   transform: "translateY(-50%)",
   transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
-  opacity: isChecked ? 1 : 0,
+  opacity: 0,
   path: {
-    fill: isDisabled
-      ? odysseyDesignTokens.HueNeutral50
-      : odysseyDesignTokens.HueNeutralWhite,
+    fill: odysseyDesignTokens.HueNeutralWhite,
   },
+
+  ...(isChecked && {
+    opacity: 1,
+  }),
+
+  ...((isDisabled || isReadOnly) && {
+    path: {
+      fill: odysseyDesignTokens.HueNeutral50,
+    },
+  }),
 }));
 
 const HiddenCheckbox = styled.input<{
   odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
+  isReadOnly?: boolean;
+}>(({ odysseyDesignTokens, isReadOnly }) => ({
   position: "absolute",
   top: 0,
   left: 0,
@@ -166,7 +202,7 @@ const HiddenCheckbox = styled.input<{
   height: "100%",
   margin: 0,
   opacity: 0,
-  cursor: "pointer",
+  cursor: isReadOnly ? "default" : "pointer",
   zIndex: 2,
 
   "&:focus-visible": {
@@ -194,6 +230,10 @@ export type SwitchProps = {
    * The value attribute of the Switch
    */
   value: string;
+  /**
+   * Determines whether the Switch is read-only
+   */
+  isReadOnly?: boolean;
 } & Pick<
   FieldComponentProps,
   "hint" | "HintLinkComponent" | "id" | "isFullWidth" | "isDisabled" | "name"
@@ -209,6 +249,7 @@ type SwitchLabelComponentProps = {
   isDisabled: SwitchProps["isDisabled"];
   isFullWidth: SwitchProps["isFullWidth"];
   label: SwitchProps["label"];
+  isReadOnly: SwitchProps["isReadOnly"];
 };
 
 const SwitchLabel = ({
@@ -218,6 +259,7 @@ const SwitchLabel = ({
   inputId,
   isDisabled,
   label,
+  isReadOnly,
 }: SwitchLabelComponentProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
@@ -226,6 +268,7 @@ const SwitchLabel = ({
       <StyledSwitchLabel
         htmlFor={inputId}
         isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
         odysseyDesignTokens={odysseyDesignTokens}
       >
         {label}
@@ -252,6 +295,7 @@ const Switch = ({
   isDefaultChecked,
   isDisabled,
   isFullWidth = false,
+  isReadOnly = false,
   label,
   name,
   onChange,
@@ -292,12 +336,16 @@ const Switch = ({
 
   const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
     (event) => {
+      if (isReadOnly) {
+        event.preventDefault();
+        return;
+      }
       const target = event.target;
       const { checked, value } = target;
       setInternalSwitchChecked(checked);
       onChange?.({ checked, value });
     },
-    [onChange, setInternalSwitchChecked],
+    [onChange, setInternalSwitchChecked, isReadOnly],
   );
 
   return (
@@ -321,6 +369,7 @@ const Switch = ({
           isDisabled={isDisabled}
           isFullWidth={isFullWidth}
           label={label}
+          isReadOnly={isReadOnly}
         />
         <SwitchContainer>
           <HiddenCheckbox
@@ -341,21 +390,26 @@ const Switch = ({
             odysseyDesignTokens={odysseyDesignTokens}
             type="checkbox"
             value={value}
+            readOnly={isReadOnly}
+            isReadOnly={isReadOnly}
           />
           <SwitchTrack
             data-switch-track
             isChecked={internalSwitchChecked}
             isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
             odysseyDesignTokens={odysseyDesignTokens}
           >
             <SwitchThumb
               isChecked={internalSwitchChecked}
               isDisabled={isDisabled}
+              isReadOnly={isReadOnly}
               odysseyDesignTokens={odysseyDesignTokens}
             />
             <SwitchCheckMark
               isChecked={internalSwitchChecked}
               isDisabled={isDisabled}
+              isReadOnly={isReadOnly}
               odysseyDesignTokens={odysseyDesignTokens}
             />
           </SwitchTrack>

package/src/Tabs.tsx

@@ -30,30 +30,28 @@ import { Badge, BadgeProps } from "./Badge";
 import { Box } from "./Box";
 import { HtmlProps } from "./HtmlProps";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TabsTestSelectors = {
-  feature: {
+export const TabsTestSelector = {
+  children: {
     tabItem: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "tab",
       },
     },
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${ariaLabel}",
+      label: "name",
     },
     role: "tablist",
-    templateVariableNames: ["ariaLabel"],
   },
-} as const satisfies FeatureTestSelector;
+} as const satisfies TestSelector;
 
 export type TabItemProps = {
   /**

package/src/Tag.tsx

@@ -12,9 +12,26 @@
 
 import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
+import styled from "@emotion/styled";
 import { TagListContext } from "./TagListContext";
 import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
 import { HtmlProps } from "./HtmlProps";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "./OdysseyDesignTokensContext";
+import { CloseCircleFilledIcon } from "./icons.generated";
+
+export const tagColorVariants = [
+  "default",
+  "info",
+  "accentOne",
+  "accentTwo",
+  "accentThree",
+  "accentFour",
+] as const;
+
+type TagColorVariant = (typeof tagColorVariants)[number];
 
 export type TagProps = {
   icon?: ReactElement;
@@ -31,9 +48,117 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
+  /**
+   * Color variant of the Tag, affecting its appearance
+   */
+  colorVariant?: TagColorVariant;
 } & Pick<HtmlProps, "testId" | "translate">;
 
+const getChipColors = (
+  colorVariant: TagColorVariant,
+  odysseyDesignTokens: DesignTokens,
+) => {
+  const colors = {
+    default: {
+      background: odysseyDesignTokens.HueNeutral100,
+      hover: odysseyDesignTokens.HueNeutral200,
+      active: odysseyDesignTokens.HueNeutral300,
+      text: odysseyDesignTokens.HueNeutral700,
+      border: odysseyDesignTokens.HueNeutral200,
+      deleteIcon: odysseyDesignTokens.HueNeutral500,
+      deleteIconHover: odysseyDesignTokens.HueNeutral600,
+    },
+    info: {
+      background: odysseyDesignTokens.HueBlue100,
+      hover: odysseyDesignTokens.HueBlue200,
+      active: odysseyDesignTokens.HueBlue300,
+      text: odysseyDesignTokens.HueBlue700,
+      border: odysseyDesignTokens.HueBlue200,
+      deleteIcon: odysseyDesignTokens.HueBlue500,
+      deleteIconHover: odysseyDesignTokens.HueBlue600,
+    },
+    accentOne: {
+      background: odysseyDesignTokens.HueAccentOne100,
+      hover: odysseyDesignTokens.HueAccentOne200,
+      active: odysseyDesignTokens.HueAccentOne300,
+      text: odysseyDesignTokens.HueAccentOne700,
+      border: odysseyDesignTokens.HueAccentOne200,
+      deleteIcon: odysseyDesignTokens.HueAccentOne500,
+      deleteIconHover: odysseyDesignTokens.HueAccentOne600,
+    },
+    accentTwo: {
+      background: odysseyDesignTokens.HueAccentTwo100,
+      hover: odysseyDesignTokens.HueAccentTwo200,
+      active: odysseyDesignTokens.HueAccentTwo300,
+      text: odysseyDesignTokens.HueAccentTwo700,
+      border: odysseyDesignTokens.HueAccentTwo200,
+      deleteIcon: odysseyDesignTokens.HueAccentTwo500,
+      deleteIconHover: odysseyDesignTokens.HueAccentTwo600,
+    },
+    accentThree: {
+      background: odysseyDesignTokens.HueAccentThree100,
+      hover: odysseyDesignTokens.HueAccentThree200,
+      active: odysseyDesignTokens.HueAccentThree300,
+      text: odysseyDesignTokens.HueAccentThree700,
+      border: odysseyDesignTokens.HueAccentThree200,
+      deleteIcon: odysseyDesignTokens.HueAccentThree500,
+      deleteIconHover: odysseyDesignTokens.HueAccentThree600,
+    },
+    accentFour: {
+      background: odysseyDesignTokens.HueAccentFour100,
+      hover: odysseyDesignTokens.HueAccentFour200,
+      active: odysseyDesignTokens.HueAccentFour300,
+      text: odysseyDesignTokens.HueAccentFour700,
+      border: odysseyDesignTokens.HueAccentFour200,
+      deleteIcon: odysseyDesignTokens.HueAccentFour500,
+      deleteIconHover: odysseyDesignTokens.HueAccentFour600,
+    },
+  };
+
+  return colors[colorVariant] || colors.default;
+};
+
+const StyledTag = styled(MuiChip, {
+  shouldForwardProp: (prop) =>
+    !["colorVariant", "odysseyDesignTokens"].includes(prop as string),
+})<{
+  colorVariant: TagColorVariant;
+  odysseyDesignTokens: DesignTokens;
+  as?: React.ElementType; // Allow the 'as' prop to be forwarded
+}>(({ colorVariant, odysseyDesignTokens }) => {
+  const colors = getChipColors(colorVariant, odysseyDesignTokens);
+
+  return {
+    backgroundColor: colors.background,
+    color: colors.text,
+    borderColor: colors.border,
+
+    "&.MuiChip-clickable:hover": {
+      backgroundColor: colors.hover,
+    },
+
+    "&.MuiChip-clickable:active": {
+      backgroundColor: colors.active,
+    },
+
+    "&.Mui-disabled": {
+      "& .MuiChip-deleteIcon": {
+        color: odysseyDesignTokens.HueNeutral300,
+      },
+    },
+
+    "& .MuiChip-deleteIcon": {
+      color: colors.deleteIcon,
+
+      "&:hover": {
+        color: colors.deleteIconHover,
+      },
+    },
+  };
+});
+
 const Tag = ({
+  colorVariant = "default",
   icon,
   isDisabled,
   label,
@@ -42,21 +167,25 @@ const Tag = ({
   testId,
   translate,
 }: TagProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const { chipElementType } = useContext(TagListContext);
 
   const renderTag = useCallback(
     (muiProps: MuiPropsContextType) => (
-      <MuiChip
+      <StyledTag
         {...muiProps}
+        as={chipElementType}
         aria-disabled={isDisabled}
-        clickable={onClick ? true : false}
-        component={chipElementType}
+        clickable={Boolean(onClick)}
         data-se={testId}
+        colorVariant={colorVariant}
+        odysseyDesignTokens={odysseyDesignTokens}
         disabled={isDisabled}
         icon={icon}
         label={label}
         onClick={onClick}
         onDelete={onRemove}
+        deleteIcon={<CloseCircleFilledIcon />}
         translate={translate}
       />
     ),
@@ -69,6 +198,8 @@ const Tag = ({
       onRemove,
       testId,
       translate,
+      colorVariant,
+      odysseyDesignTokens,
     ],
   );
 

package/src/TextField.tsx

@@ -30,56 +30,33 @@ import {
 import { Field } from "./Field";
 import { HtmlProps } from "./HtmlProps";
 import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TextFieldTestSelectors = {
-  feature: {
-    description: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["hint"],
-        text: "${hint}",
-      },
-    },
-    errorMessage: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["errorMessage"],
-        text: "${errorMessage}",
-      },
-    },
-    input: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "textbox",
-        templateVariableNames: ["label"],
-      },
-    },
-    label: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "LabelText",
-        templateVariableNames: ["label"],
-      },
-    },
+export const TextFieldTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "link",
       },
     },
   },
-} as const satisfies FeatureTestSelector;
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "textbox",
+  },
+} as const satisfies TestSelector;
 
 export const textFieldTypeValues = [
   "email",

package/src/Toast.tsx

@@ -130,7 +130,7 @@ const Toast = ({
         >
           <AlertTitle translate={translate}>
             <ScreenReaderText translate={translate}>
-              {t(`severity.${severity}:`)}
+              {t(`severity.${severity}`)}:
             </ScreenReaderText>
             {text}
           </AlertTitle>

package/src/ToastStack.tsx

@@ -14,14 +14,14 @@ import { memo, ReactElement } from "react";
 import { Box, Snackbar } from "@mui/material";
 import { Toast } from "./Toast";
 
-export type ToastStackProps = {
+export type ToastListProps = {
   /**
    * The Toast or array of Toasts within the ToastStack
    */
   children: ReactElement<typeof Toast> | Array<ReactElement<typeof Toast>>;
 };
 
-const ToastStack = ({ children }: ToastStackProps) => {
+const ToastStack = ({ children }: ToastListProps) => {
   return (
     <Snackbar open={true}>
       <Box

package/src/createShadowDomElements.ts

@@ -0,0 +1,53 @@
+/*!
+ * 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.
+ */
+
+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);
+
+  // 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);
+
+  return { emotionRootElement, shadowRootElement };
+};
+
+/** @deprecated Use `createShadowDomElements` instead. */
+export const createShadowRootElement = (
+  containerElement: HTMLElement,
+): [HTMLStyleElement, HTMLDivElement] => {
+  const shadowRoot = containerElement.attachShadow({ mode: "open" });
+
+  // the element that styles will be cached into
+  const emotionRootElement = document.createElement("style");
+  emotionRootElement.setAttribute("id", "style-root");
+  emotionRootElement.setAttribute("nonce", window.cspNonce);
+
+  // the element that emotion renders html into
+  const shadowRootElement = document.createElement("div");
+  shadowRootElement.setAttribute("id", "shadow-root");
+
+  shadowRoot.appendChild(emotionRootElement);
+  shadowRoot.appendChild(shadowRootElement);
+
+  return [emotionRootElement, shadowRootElement];
+};