@okta/odyssey-react-mui 1.0.2 → 1.2.0

package/dist/theme/components.js

@@ -11,6 +11,7 @@
  */
 
 import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
@@ -35,7 +36,11 @@ import { typographyClasses } from "@mui/material/Typography";
 import { ArrowDownIcon, CheckCircleFilledIcon, CheckIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, DangerDiamondFilledIcon, InformationCircleFilledIcon, SubtractIcon, WarningFilledIcon } from "../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-export const components = odysseyTokens => {
+export const components = _ref => {
+  let {
+    odysseyTokens,
+    shadowRootElement
+  } = _ref;
   return {
     MuiAlert: {
       defaultProps: {
@@ -47,10 +52,10 @@ export const components = odysseyTokens => {
         }
       },
       styleOverrides: {
-        root: _ref => {
+        root: _ref2 => {
           let {
             ownerState
-          } = _ref;
+          } = _ref2;
           return {
             padding: odysseyTokens.Spacing4,
             gap: odysseyTokens.Spacing4,
@@ -121,10 +126,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        action: _ref2 => {
+        action: _ref3 => {
           let {
             ownerState
-          } = _ref2;
+          } = _ref3;
           return {
             ...(ownerState.variant === "banner" && {
               padding: 0,
@@ -141,10 +146,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        icon: _ref3 => {
+        icon: _ref4 => {
           let {
             ownerState
-          } = _ref3;
+          } = _ref4;
           return {
             marginInlineEnd: 0,
             padding: 0,
@@ -168,10 +173,10 @@ export const components = odysseyTokens => {
             }
           };
         },
-        message: _ref4 => {
+        message: _ref5 => {
           let {
             ownerState
-          } = _ref4;
+          } = _ref5;
           return {
             padding: 0,
             overflow: "visible",
@@ -227,10 +232,10 @@ export const components = odysseyTokens => {
           marginRight: "unset",
           padding: odysseyTokens.Spacing1
         },
-        endAdornment: _ref5 => {
+        endAdornment: _ref6 => {
           let {
             ownerState
-          } = _ref5;
+          } = _ref6;
           return {
             display: "flex",
             gap: odysseyTokens.Spacing1,
@@ -253,24 +258,42 @@ export const components = odysseyTokens => {
         listbox: {
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
-          borderRadius: odysseyTokens.BorderRadiusMain
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            [`&:hover`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
+            [`&[aria-selected="true"]`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              },
+              [`&.${autocompleteClasses.focused}`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              }
+            }
+          }
         },
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4
         },
-        option: {
-          paddingBlock: odysseyTokens.Spacing3,
-          borderRadius: odysseyTokens.BorderRadiusTight
-        },
         popupIndicator: {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset"
         },
-        inputRoot: _ref6 => {
+        inputRoot: _ref7 => {
           let {
             ownerState
-          } = _ref6;
+          } = _ref7;
           return {
             ...(ownerState.readOnly === true && {
               backgroundColor: odysseyTokens.HueNeutral50,
@@ -284,10 +307,10 @@ export const components = odysseyTokens => {
     },
     MuiBackdrop: {
       styleOverrides: {
-        root: _ref7 => {
+        root: _ref8 => {
           let {
             ownerState
-          } = _ref7;
+          } = _ref8;
           return {
             backgroundColor: "rgba(29,29,33,0.75)",
             ...(ownerState.invisible === true && {
@@ -303,10 +326,10 @@ export const components = odysseyTokens => {
         disableElevation: true
       },
       styleOverrides: {
-        root: _ref8 => {
+        root: _ref9 => {
           let {
             ownerState
-          } = _ref8;
+          } = _ref9;
           return {
             minWidth: "unset",
             paddingBlock: odysseyTokens.Spacing3,
@@ -450,10 +473,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        endIcon: _ref9 => {
+        endIcon: _ref10 => {
           let {
             ownerState
-          } = _ref9;
+          } = _ref10;
           return {
             display: "inline-flex",
             margin: 0,
@@ -463,10 +486,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        startIcon: _ref10 => {
+        startIcon: _ref11 => {
           let {
             ownerState
-          } = _ref10;
+          } = _ref11;
           return {
             display: "inline-flex",
             margin: 0,
@@ -491,10 +514,10 @@ export const components = odysseyTokens => {
         indeterminateIcon: _jsx(SubtractIcon, {})
       },
       styleOverrides: {
-        root: _ref11 => {
+        root: _ref12 => {
           let {
             theme
-          } = _ref11;
+          } = _ref12;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -568,10 +591,10 @@ export const components = odysseyTokens => {
         deleteIcon: _jsx(CloseCircleFilledIcon, {})
       },
       styleOverrides: {
-        root: _ref12 => {
+        root: _ref13 => {
           let {
             ownerState
-          } = _ref12;
+          } = _ref13;
           return {
             height: "auto",
             paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
@@ -723,20 +746,20 @@ export const components = odysseyTokens => {
         variant: "indeterminate"
       },
       styleOverrides: {
-        root: _ref13 => {
+        root: _ref14 => {
           let {
             ownerState
-          } = _ref13;
+          } = _ref14;
           return {
             ...(ownerState.color !== "inherit" && {
               color: odysseyTokens.PalettePrimaryDark
             })
           };
         },
-        circle: _ref14 => {
+        circle: _ref15 => {
           let {
             ownerState
-          } = _ref14;
+          } = _ref15;
           return {
             ...(ownerState.variant === "indeterminate" && {
               strokeDasharray: "160%, 360%"
@@ -1053,8 +1076,8 @@ export const components = odysseyTokens => {
         root: {
           flexWrap: "wrap",
           gap: odysseyTokens.Spacing2,
-          paddingBlockStart: odysseyTokens.Spacing6,
-          paddingBlockEnd: odysseyTokens.Spacing6,
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing5,
           paddingInline: odysseyTokens.Spacing6,
           "& > .${ buttonClasses.root }": {
             margin: "0 !important"
@@ -1064,10 +1087,10 @@ export const components = odysseyTokens => {
     },
     MuiDialogContent: {
       styleOverrides: {
-        root: _ref15 => {
+        root: _ref16 => {
           let {
             ownerState
-          } = _ref15;
+          } = _ref16;
           return {
             paddingBlock: 0,
             paddingInline: odysseyTokens.Spacing6,
@@ -1120,10 +1143,10 @@ export const components = odysseyTokens => {
         margin: "normal"
       },
       styleOverrides: {
-        root: _ref16 => {
+        root: _ref17 => {
           let {
             ownerState
-          } = _ref16;
+          } = _ref17;
           return {
             width: "100%",
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -1150,10 +1173,10 @@ export const components = odysseyTokens => {
     },
     MuiFormControlLabel: {
       styleOverrides: {
-        root: _ref17 => {
+        root: _ref18 => {
           let {
             ownerState
-          } = _ref17;
+          } = _ref18;
           return {
             gap: odysseyTokens.Spacing2,
             marginInlineStart: 0,
@@ -1237,6 +1260,13 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: odysseyTokens.Spacing1
+        }
+      }
+    },
     MuiInput: {
       defaultProps: {
         disableUnderline: true
@@ -1251,10 +1281,10 @@ export const components = odysseyTokens => {
     },
     MuiInputAdornment: {
       styleOverrides: {
-        root: _ref18 => {
+        root: _ref19 => {
           let {
             ownerState
-          } = _ref18;
+          } = _ref19;
           return {
             display: "flex",
             minWidth: "1.25em",
@@ -1278,15 +1308,14 @@ export const components = odysseyTokens => {
     },
     MuiInputBase: {
       defaultProps: {
-        minRows: 3,
-        required: true
+        minRows: 3
       },
       styleOverrides: {
-        root: _ref19 => {
+        root: _ref20 => {
           let {
             ownerState,
             theme
-          } = _ref19;
+          } = _ref20;
           return {
             ...theme.typography.body1,
             flex: "1",
@@ -1377,10 +1406,10 @@ export const components = odysseyTokens => {
         shrink: false
       },
       styleOverrides: {
-        root: _ref20 => {
+        root: _ref21 => {
           let {
             ownerState
-          } = _ref20;
+          } = _ref21;
           return {
             display: "flex",
             justifyContent: "space-between",
@@ -1470,6 +1499,14 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: "unset",
+          color: "inherit"
+        }
+      }
+    },
     MuiListSubheader: {
       styleOverrides: {
         root: {
@@ -1494,14 +1531,15 @@ export const components = odysseyTokens => {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: _ref21 => {
+        root: _ref22 => {
           let {
             ownerState
-          } = _ref21;
+          } = _ref22;
           return {
             gap: odysseyTokens.Spacing2,
             minHeight: "unset",
             paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
             borderRadius: odysseyTokens.BorderRadiusTight,
             [`& .${formControlLabelClasses.root}`]: {
               gap: "unset"
@@ -1513,6 +1551,9 @@ export const components = odysseyTokens => {
                 backgroundColor: "transparent"
               }
             },
+            [`:focus-visible`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
             [`&.${menuItemClasses.root}-destructive`]: {
               color: odysseyTokens.TypographyColorDanger
             },
@@ -1549,12 +1590,9 @@ export const components = odysseyTokens => {
         }
       }
     },
-    MuiListItemIcon: {
-      styleOverrides: {
-        root: {
-          minWidth: "unset",
-          color: "inherit"
-        }
+    MuiModal: {
+      defaultProps: {
+        container: shadowRootElement
       }
     },
     MuiNativeSelect: {
@@ -1575,6 +1613,9 @@ export const components = odysseyTokens => {
       }
     },
     MuiPopover: {
+      defaultProps: {
+        container: shadowRootElement
+      },
       styleOverrides: {
         paper: {
           marginBlockStart: odysseyTokens.Spacing1,
@@ -1584,6 +1625,11 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiPopper: {
+      defaultProps: {
+        container: shadowRootElement
+      }
+    },
     MuiRadio: {
       defaultProps: {
         size: "small",
@@ -1591,10 +1637,10 @@ export const components = odysseyTokens => {
         checkedIcon: _jsx(_Fragment, {})
       },
       styleOverrides: {
-        root: _ref22 => {
+        root: _ref23 => {
           let {
             theme
-          } = _ref22;
+          } = _ref23;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -1709,10 +1755,10 @@ export const components = odysseyTokens => {
         color: "inherit"
       },
       styleOverrides: {
-        root: _ref23 => {
+        root: _ref24 => {
           let {
             ownerState
-          } = _ref23;
+          } = _ref24;
           return {
             fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
             ...(ownerState.fontSize === "small" && {
@@ -1730,10 +1776,10 @@ export const components = odysseyTokens => {
         iconPosition: "start"
       },
       styleOverrides: {
-        root: _ref24 => {
+        root: _ref25 => {
           let {
             ownerState
-          } = _ref24;
+          } = _ref25;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             minWidth: "unset",
@@ -1788,10 +1834,10 @@ export const components = odysseyTokens => {
     },
     MuiTable: {
       styleOverrides: {
-        root: _ref25 => {
+        root: _ref26 => {
           let {
             ownerState
-          } = _ref25;
+          } = _ref26;
           return {
             display: "table",
             width: "auto",
@@ -1823,11 +1869,11 @@ export const components = odysseyTokens => {
     },
     MuiTableCell: {
       styleOverrides: {
-        root: _ref26 => {
+        root: _ref27 => {
           let {
             theme,
             ownerState
-          } = _ref26;
+          } = _ref27;
           return {
             ...theme.typography.body1,
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -1968,11 +2014,11 @@ export const components = odysseyTokens => {
             }
           }
         },
-        icon: _ref27 => {
+        icon: _ref28 => {
           let {
             theme,
             ownerState
-          } = _ref27;
+          } = _ref28;
           return {
             fontSize: "inherit",
             marginInlineEnd: 0,
@@ -2022,10 +2068,10 @@ export const components = odysseyTokens => {
         placement: "top"
       },
       styleOverrides: {
-        tooltip: _ref28 => {
+        tooltip: _ref29 => {
           let {
             ownerState
-          } = _ref28;
+          } = _ref29;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             paddingBlock: odysseyTokens.Spacing2,
@@ -2107,7 +2153,6 @@ export const components = odysseyTokens => {
     },
     MuiTypography: {
       defaultProps: {
-        fontFamily: "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
         variantMapping: {
           h1: "h1",
           h2: "h2",