@okta/odyssey-react-mui 1.21.1 → 1.22.0

package/dist/theme/components.js

@@ -44,7 +44,8 @@ const drawerSizes = {
 };
 export const components = ({
   odysseyTokens,
-  shadowDomElement
+  shadowDomElement,
+  shadowRootElement
 }) => {
   return {
     MuiAccordion: {
@@ -152,29 +153,33 @@ export const components = ({
           padding: odysseyTokens.Spacing4,
           gap: odysseyTokens.Spacing4,
           color: odysseyTokens.TypographyColorBody,
-          border: 0,
+          border: "1px solid",
           ...(ownerState.severity === "success" && {
-            backgroundColor: odysseyTokens.HueGreen100,
+            backgroundColor: odysseyTokens.HueGreen50,
+            borderColor: odysseyTokens.HueGreen200,
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueGreen100.concat(odysseyTokens.PaletteAlphaSemi)
+              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(odysseyTokens.PaletteAlphaSemi)
+              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(odysseyTokens.PaletteAlphaSemi)
+              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(odysseyTokens.PaletteAlphaSemi)
+              backgroundColor: odysseyTokens.HueYellow50.concat(odysseyTokens.PaletteAlphaSemi)
             })
           }),
           [`& .${alertTitleClasses.root}`]: {
@@ -203,6 +208,7 @@ export const components = ({
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 0,
+            border: 0,
             ...(ownerState.onClose !== undefined && {
               paddingInline: odysseyTokens.Spacing6
             })
@@ -431,7 +437,6 @@ export const components = ({
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1,
           ...(ownerState.ListboxComponent !== undefined && {
-            height: "100%",
             maxHeight: "40vh"
           })
         }),
@@ -781,73 +786,95 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
+          ownerState,
           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
-          }),
-          [`.${svgIconClasses.root}`]: {
-            color: odysseyTokens.HueNeutralWhite,
-            transition: theme.transitions.create(["color"], {
+        }) => {
+          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
-            })
-          },
-          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
-            backgroundColor: odysseyTokens.PalettePrimaryMain,
-            borderColor: odysseyTokens.PalettePrimaryMain,
+            }),
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutralWhite,
+              transition: theme.transitions.create(["color"], {
+                duration: odysseyTokens.TransitionDurationMain
+              })
+            },
+            "&.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
-            }
-          },
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900
-          },
-          ".Mui-error:not(.Mui-valid):hover > &": {
-            borderColor: odysseyTokens.BorderColorDangerDark,
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
-              borderColor: odysseyTokens.BorderColorDangerDark
-            }
-          },
-          ".Mui-error:not(.Mui-valid) > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerMain,
-              borderColor: odysseyTokens.BorderColorDangerControl
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900
+            },
+            ".Mui-error:not(.Mui-valid):hover > &": {
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+                borderColor: odysseyTokens.BorderColorDangerDark
+              }
             },
-            "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-            }
-          },
-          "&.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) > &": {
+              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": {
+              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
+              borderColor: odysseyTokens.HueNeutral300,
+              ".Mui-error:not(.Mui-valid) > &": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                borderColor: odysseyTokens.HueNeutral300
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral300
+              }
             },
-            [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutral300
-            }
-          }
-        })
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              border: `1px solid ${odysseyTokens.HueNeutral300}`,
+              cursor: "default",
+              "&.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
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral700
+              }
+            })
+          };
+        }
       }
     },
     MuiChip: {
@@ -1919,6 +1946,12 @@ export const components = ({
               }
             }
           },
+          "&[data-empty='true']": {
+            "&:after": {
+              content: "' '",
+              visibility: "hidden"
+            }
+          },
           ...(!ownerState.disableGutters && {
             paddingInline: odysseyTokens.Spacing4
           }),
@@ -1953,7 +1986,7 @@ export const components = ({
     },
     MuiModal: {
       defaultProps: {
-        container: shadowDomElement
+        container: shadowRootElement || shadowDomElement
       }
     },
     MuiNativeSelect: {
@@ -1988,7 +2021,7 @@ export const components = ({
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowDomElement
+        container: shadowRootElement || shadowDomElement
       },
       styleOverrides: {
         paper: {
@@ -2001,7 +2034,7 @@ export const components = ({
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowDomElement
+        container: shadowRootElement || shadowDomElement
       }
     },
     MuiRadio: {
@@ -2012,73 +2045,100 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
+          ownerState,
           theme
-        }) => ({
-          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": {
-            content: "''",
-            position: "absolute",
-            width: odysseyTokens.Spacing2,
-            height: odysseyTokens.Spacing2,
-            borderRadius: "50%",
-            backgroundColor: "transparent",
-            transition: theme.transitions.create(["background-color"], {
+        }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+          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
-            })
-          },
-          [`.${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,
+              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-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-            }
-          },
-          "&.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-error > &.Mui-checked::before": {
-            backgroundColor: odysseyTokens.PaletteDangerMain
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.BorderColorDisabled,
-            "&.Mui-checked::before": {
-              backgroundColor: odysseyTokens.BorderColorDisabled
-            }
-          }
-        })
+              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-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: {
@@ -2107,11 +2167,34 @@ 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",
           paddingBlock: `calc(${odysseyTokens.Spacing3} - ${odysseyTokens.BorderWidthMain})`,
           paddingInline: odysseyTokens.Spacing3,
-          minHeight: 0,
+          minHeight: `${odysseyTokens.TypographyLineHeightUi}em`,
           "&:focus": {
             backgroundColor: "transparent"
           },
@@ -2124,13 +2207,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: {
@@ -2305,6 +2391,9 @@ export const components = ({
             borderBottom: `none !important`,
             borderLeft: `none !important`
           },
+          ["&::after"]: {
+            background: "transparent !important"
+          },
           [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
             borderRight: `none !important`
           },
@@ -2368,9 +2457,6 @@ export const components = ({
               display: "none"
             }
           },
-          [`&::after`]: {
-            display: "none"
-          },
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"'
@@ -2402,8 +2488,7 @@ export const components = ({
           [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
             marginInlineEnd: `-${odysseyTokens.Spacing3}`,
             [`&:active .${dividerClasses.vertical}`]: {
-              borderColor: odysseyTokens.HueNeutral400,
-              opacity: 1
+              display: "none"
             }
           },
           [`& .Mui-TableHeadCell-Content-Wrapper`]: {