@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/src/test-selectors/testSelector.ts

@@ -0,0 +1,143 @@
+/*!
+ * 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 ByRoleOptions,
+  type SelectorMatcherOptions,
+} from "@testing-library/dom";
+
+import {
+  type RoleSelectorMethod,
+  type TextSelectorMethod,
+} from "./getByQuerySelector";
+
+/**
+ * We can't use React's `AriaRole` because it allows any string value. We want to be very specific. This is otherwise copied straight from React's code.
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2815
+ */
+export type AriaRole =
+  | "alert"
+  | "alertdialog"
+  | "application"
+  | "article"
+  | "banner"
+  | "button"
+  | "cell"
+  | "checkbox"
+  | "columnheader"
+  | "combobox"
+  | "complementary"
+  | "contentinfo"
+  | "definition"
+  | "dialog"
+  | "directory"
+  | "document"
+  | "feed"
+  | "figure"
+  | "form"
+  | "grid"
+  | "gridcell"
+  | "group"
+  | "heading"
+  | "img"
+  | "link"
+  | "list"
+  | "listbox"
+  | "listitem"
+  | "log"
+  | "main"
+  | "marquee"
+  | "math"
+  | "menu"
+  | "menubar"
+  | "menuitem"
+  | "menuitemcheckbox"
+  | "menuitemradio"
+  | "navigation"
+  | "none"
+  | "note"
+  | "option"
+  | "presentation"
+  | "progressbar"
+  | "radio"
+  | "radiogroup"
+  | "region"
+  | "row"
+  | "rowgroup"
+  | "rowheader"
+  | "scrollbar"
+  | "search"
+  | "searchbox"
+  | "separator"
+  | "slider"
+  | "spinbutton"
+  | "status"
+  | "switch"
+  | "tab"
+  | "table"
+  | "tablist"
+  | "tabpanel"
+  | "term"
+  | "textbox"
+  | "timer"
+  | "toolbar"
+  | "tooltip"
+  | "tree"
+  | "treegrid"
+  | "treeitem";
+
+export type ControlledElementSelector = { isControlledElement?: true };
+
+export type RoleSelectorOptions = {
+  method: RoleSelectorMethod;
+  options: Record<string, keyof ByRoleOptions>;
+  role: AriaRole | AriaRole[];
+  // | "UNKNOWN" // This should be a `Symbol`, but it can't because this is ultimately going to be JSON stringified. This type will allow passing a custom role if the component allows it: `Box`.
+};
+
+export type TextSelectorOptions = {
+  method: TextSelectorMethod;
+  options: Record<string, keyof SelectorMatcherOptions>;
+  text: string;
+};
+
+export type ElementSelectorValue = RoleSelectorOptions | TextSelectorOptions;
+
+export type ElementSelector = {
+  elementSelector: ElementSelectorValue;
+};
+
+export type ElementChildSelectorValue = Record<
+  string,
+  TestSelector & ControlledElementSelector
+>;
+
+export type ElementChildSelector = {
+  children: ElementChildSelectorValue;
+};
+
+export type AccessibleTextSelectorValue =
+  | "description"
+  | "errorMessage"
+  | "label";
+
+export type AccessibleTextSelector = {
+  /** An "accessible -> semantic" name mapping such as "`description` -> `hint`" where "description" equates to `"aria-description"`. */
+  accessibleText: Record<string, AccessibleTextSelectorValue>;
+};
+
+export type TestSelector =
+  | ElementChildSelector
+  | ElementSelector
+  | (ElementChildSelector & ElementSelector)
+  | (AccessibleTextSelector & ElementSelector)
+  | (ElementChildSelector & AccessibleTextSelector & ElementSelector);

package/src/theme/components.tsx

@@ -62,9 +62,12 @@ const drawerSizes = {
 export const components = ({
   odysseyTokens,
   shadowDomElement,
+  shadowRootElement,
 }: {
   odysseyTokens: DesignTokens;
+  /** @deprecated use `shadowRootElement` */
   shadowDomElement?: HTMLElement;
+  shadowRootElement?: HTMLElement;
 }): ThemeOptions["components"] => {
   return {
     MuiAccordion: {
@@ -177,41 +180,45 @@ export const components = ({
           padding: odysseyTokens.Spacing4,
           gap: odysseyTokens.Spacing4,
           color: odysseyTokens.TypographyColorBody,
-          border: 0,
+          border: "1px solid",
 
           // Severity color variation
           ...(ownerState.severity === "success" && {
-            backgroundColor: odysseyTokens.HueGreen100,
+            backgroundColor: odysseyTokens.HueGreen50,
+            borderColor: odysseyTokens.HueGreen200,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueGreen100.concat(
+              backgroundColor: odysseyTokens.HueGreen50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
           }),
           ...(ownerState.severity === "info" && {
-            backgroundColor: odysseyTokens.HueBlue100,
+            backgroundColor: odysseyTokens.HueBlue50,
+            borderColor: odysseyTokens.HueBlue200,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueBlue100.concat(
+              backgroundColor: odysseyTokens.HueBlue50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
           }),
           ...(ownerState.severity === "error" && {
-            backgroundColor: odysseyTokens.HueRed100,
+            backgroundColor: odysseyTokens.HueRed50,
+            borderColor: odysseyTokens.HueRed200,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueRed100.concat(
+              backgroundColor: odysseyTokens.HueRed50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
           }),
           ...(ownerState.severity === "warning" && {
-            backgroundColor: odysseyTokens.HueYellow100,
+            backgroundColor: odysseyTokens.HueYellow50,
+            borderColor: odysseyTokens.HueYellow500,
 
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueYellow100.concat(
+              backgroundColor: odysseyTokens.HueYellow50.concat(
                 odysseyTokens.PaletteAlphaSemi,
               ),
             }),
@@ -481,7 +488,6 @@ export const components = ({
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1,
           ...(ownerState.ListboxComponent !== undefined && {
-            height: "100%",
             maxHeight: "40vh",
           }),
         }),
@@ -873,84 +879,113 @@ export const components = ({
         indeterminateIcon: <SubtractIcon />,
       },
       styleOverrides: {
-        root: ({ theme }) => ({
-          width: `${odysseyTokens.TypographyLineHeightUi}em`,
-          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-          height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: odysseyTokens.BorderRadiusTight,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderColor: odysseyTokens.HueNeutral500,
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(
-            ["border-color", "background-color", "box-shadow"],
-            {
-              duration: odysseyTokens.TransitionDurationMain,
+        root: ({ ownerState, theme }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+
+          return {
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            border: `1px solid ${odysseyTokens.HueNeutral500}`,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(
+              ["border-color", "background-color", "box-shadow"],
+              {
+                duration: odysseyTokens.TransitionDurationMain,
+              },
+            ),
+
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutralWhite,
+              transition: theme.transitions.create(["color"], {
+                duration: odysseyTokens.TransitionDurationMain,
+              }),
             },
-          ),
 
-          [`.${svgIconClasses.root}`]: {
-            color: odysseyTokens.HueNeutralWhite,
-            transition: theme.transitions.create(["color"], {
-              duration: odysseyTokens.TransitionDurationMain,
-            }),
-          },
+            "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              borderColor: odysseyTokens.PalettePrimaryMain,
 
-          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
-            backgroundColor: odysseyTokens.PalettePrimaryMain,
-            borderColor: odysseyTokens.PalettePrimaryMain,
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryDark,
+                borderColor: odysseyTokens.PalettePrimaryDark,
+              },
+            },
 
             [`.${formControlLabelClasses.root}:hover > &`]: {
-              backgroundColor: odysseyTokens.PalettePrimaryDark,
-              borderColor: odysseyTokens.PalettePrimaryDark,
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900,
             },
-          },
 
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900,
-          },
-          ".Mui-error:not(.Mui-valid):hover > &": {
-            borderColor: odysseyTokens.BorderColorDangerDark,
-
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
+            ".Mui-error:not(.Mui-valid):hover > &": {
               borderColor: odysseyTokens.BorderColorDangerDark,
-            },
-          },
-          ".Mui-error:not(.Mui-valid) > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
 
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerMain,
-              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+                borderColor: odysseyTokens.BorderColorDangerDark,
+              },
             },
+            ".Mui-error:not(.Mui-valid) > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+                borderColor: odysseyTokens.BorderColorDangerControl,
+              },
 
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              },
+            },
             "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px",
             },
-          },
-          "&.Mui-focusVisible": {
-            borderColor: odysseyTokens.HueNeutral900,
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px",
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.HueNeutral300,
-
-            ".Mui-error:not(.Mui-valid) > &": {
+            "&.Mui-disabled": {
               backgroundColor: odysseyTokens.HueNeutral50,
               borderColor: odysseyTokens.HueNeutral300,
-            },
 
-            [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutral300,
+              ".Mui-error:not(.Mui-valid) > &": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                borderColor: odysseyTokens.HueNeutral300,
+              },
+
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral300,
+              },
             },
-          },
-        }),
+
+            ...(isReadOnly && {
+              // Override default styles
+              backgroundColor: odysseyTokens.HueNeutral100,
+              border: `1px solid ${odysseyTokens.HueNeutral300}`,
+              cursor: "default",
+
+              // Override checked/indeterminate styles
+              "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+
+                [`.${formControlLabelClasses.root}:hover > &`]: {
+                  backgroundColor: odysseyTokens.HueNeutral100,
+                  borderColor: odysseyTokens.HueNeutral300,
+                },
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+              },
+              // ReadOnly styles for SVG check icon
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral700,
+              },
+            }),
+          };
+        },
       },
     },
     MuiChip: {
@@ -2141,6 +2176,13 @@ export const components = ({
             },
           },
 
+          "&[data-empty='true']": {
+            "&:after": {
+              content: "'&nbsp;'",
+              visibility: "hidden",
+            },
+          },
+
           ...(!ownerState.disableGutters && {
             paddingInline: odysseyTokens.Spacing4,
           }),
@@ -2181,7 +2223,7 @@ export const components = ({
     },
     MuiModal: {
       defaultProps: {
-        container: shadowDomElement,
+        container: shadowRootElement || shadowDomElement,
       },
     },
     MuiNativeSelect: {
@@ -2221,7 +2263,7 @@ export const components = ({
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowDomElement,
+        container: shadowRootElement || shadowDomElement,
       },
       styleOverrides: {
         paper: {
@@ -2234,7 +2276,7 @@ export const components = ({
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowDomElement,
+        container: shadowRootElement || shadowDomElement,
       },
     },
     MuiRadio: {
@@ -2244,83 +2286,105 @@ export const components = ({
         checkedIcon: <></>,
       },
       styleOverrides: {
-        root: ({ theme }) => ({
-          position: "relative",
-          // to visually align input with label
-          insetBlockStart: `${2 / theme.typography.fontSize}rem`,
-          width: `${odysseyTokens.TypographyLineHeightUi}em`,
-          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-          height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderColor: odysseyTokens.HueNeutral500,
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(
-            ["border-color", "background-color", "box-shadow"],
-            {
-              duration: odysseyTokens.TransitionDurationMain,
-            },
-          ),
-
-          "&::before": {
-            content: "''",
-            position: "absolute",
-            width: odysseyTokens.Spacing2,
-            height: odysseyTokens.Spacing2,
-            borderRadius: "50%",
-            backgroundColor: "transparent",
-            transition: theme.transitions.create(["background-color"], {
-              duration: odysseyTokens.TransitionDurationMain,
-            }),
-          },
+        root: ({ ownerState, theme }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
 
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900,
-          },
-          ".Mui-error:hover > &": {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.BorderColorDangerDark,
+          return {
+            position: "relative",
+            insetBlockStart: `${2 / theme.typography.fontSize}rem`,
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral500,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(
+              ["border-color", "background-color", "box-shadow"],
+              {
+                duration: odysseyTokens.TransitionDurationMain,
+              },
+            ),
             "&::before": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
+              content: "''",
+              position: "absolute",
+              width: odysseyTokens.Spacing2,
+              height: odysseyTokens.Spacing2,
+              borderRadius: "50%",
+              backgroundColor: "transparent",
+              transition: theme.transitions.create(["background-color"], {
+                duration: odysseyTokens.TransitionDurationMain,
+              }),
+            },
+            [`.${formControlLabelClasses.root}:hover > &`]: {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900,
+            },
+            ".Mui-error:hover > &": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+              },
+            },
+            ".Mui-error > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              },
             },
-          },
-          ".Mui-error > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
-
             "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px",
             },
-          },
-          "&.Mui-focusVisible": {
-            borderColor: odysseyTokens.HueNeutral900,
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px",
-          },
-          "&.Mui-checked": {
-            position: "relative",
-
-            "&::before": {
-              backgroundColor: odysseyTokens.PalettePrimaryMain,
+            "&.Mui-checked": {
+              position: "relative",
+              "&::before": {
+                backgroundColor: odysseyTokens.PalettePrimaryMain,
+              },
             },
-          },
-          ".Mui-error > &.Mui-checked::before": {
-            backgroundColor: odysseyTokens.PaletteDangerMain,
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.BorderColorDisabled,
-
-            "&.Mui-checked::before": {
-              backgroundColor: odysseyTokens.BorderColorDisabled,
+            ".Mui-error > &.Mui-checked::before": {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
             },
-          },
-        }),
+            "&.Mui-disabled": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.BorderColorDisabled,
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.BorderColorDisabled,
+              },
+            },
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              borderColor: odysseyTokens.HueNeutral300,
+              cursor: "default",
+              "&::before": {
+                content: "''",
+                position: "absolute",
+                width: odysseyTokens.Spacing2,
+                height: odysseyTokens.Spacing2,
+                borderRadius: "50%",
+                backgroundColor: "transparent",
+                transition: theme.transitions.create(["background-color"], {
+                  duration: odysseyTokens.TransitionDurationMain,
+                }),
+              },
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.HueNeutral700,
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+              },
+            }),
+          };
+        },
       },
     },
+
     MuiSnackbar: {
       defaultProps: {
         anchorOrigin: {
@@ -2347,12 +2411,32 @@ export const components = ({
         },
       },
       styleOverrides: {
-        select: {
+        root: ({ ownerState }) => ({
+          ...(ownerState?.inputProps?.readOnly && {
+            "&.MuiInputBase-root": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral200,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+              },
+              "&.Mui-focused": {
+                borderColor: odysseyTokens.PalettePrimaryMain,
+              },
+            },
+          }),
+          "& .MuiSelect-icon": {
+            right: "unset",
+            insetInlineEnd: odysseyTokens.Spacing3,
+            color: odysseyTokens.TypographyColorSubordinate,
+          },
+        }),
+        select: ({ ownerState }) => ({
           height: "auto",
           // We're subtracting a pixel so the total height, including borders, is 40px
           paddingBlock: `calc(${odysseyTokens.Spacing3} - ${odysseyTokens.BorderWidthMain})`,
           paddingInline: odysseyTokens.Spacing3,
-          minHeight: 0,
+          // Setting min-height to the line-height here to avoid the select shrinking in size when the value is an empty string
+          minHeight: `${odysseyTokens.TypographyLineHeightUi}em`,
 
           "&:focus": {
             backgroundColor: "transparent",
@@ -2369,12 +2453,16 @@ export const components = ({
           ["& .MuiListItemSecondaryAction-root"]: {
             display: "none",
           },
-        },
-        icon: {
-          right: "unset",
-          insetInlineEnd: odysseyTokens.Spacing3,
-          color: odysseyTokens.TypographyColorSubordinate,
-        },
+
+          ...(ownerState?.inputProps?.readOnly && {
+            color: odysseyTokens.HueNeutral700,
+            cursor: "default",
+            "&:focus": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.PalettePrimaryMain,
+            },
+          }),
+        }),
       },
     },
     MuiSvgIcon: {

package/src/theme/createOdysseyMuiTheme.ts

@@ -30,14 +30,17 @@ export type DesignTokensOverride = Partial<typeof Tokens>;
 export const createOdysseyMuiTheme = ({
   odysseyTokens,
   shadowDomElement,
+  shadowRootElement,
 }: {
   odysseyTokens: DesignTokens;
+  /** @deprecated Use `shadowRootElement` */
   shadowDomElement?: HTMLElement;
+  shadowRootElement?: HTMLElement;
 }) =>
   createTheme({
     components: components({
       odysseyTokens,
-      shadowDomElement,
+      shadowRootElement: shadowRootElement || shadowDomElement,
     }),
     mixins: mixins({ odysseyTokens }),
     palette: palette({ odysseyTokens }),