@carto/meridian-ds 2.8.0 → 2.9.1-alpha-lists.2

package/dist/theme/index.cjs

@@ -3,12 +3,12 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const material = require("@mui/material");
 const paletteUtils = require("../palette-utils-B9ybmwiI.cjs");
+const MenuItem = require("../MenuItem-DrvPgr-r.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const cssUtils = require("../css-utils-CH7es90t.cjs");
+const cssUtils = require("../css-utils-Do3X_yIr.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
-const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
 const themeShadows = [
   "none",
   // 0
@@ -44,11 +44,6 @@ const themeShadows = [
   "0px 11px 15px -7px rgba(44, 48, 50, 0.12), 0px 24px 38px 3px rgba(44, 48, 50, 0.08), 0px 9px 46px 8px rgba(44, 48, 50, 0.04)"
   // 24
 ];
-function getPixelToRem(px) {
-  const fontBase = 16;
-  const rem = 1 / fontBase * px + "rem";
-  return rem;
-}
 const baseTypography = {
   htmlFontSize: 16,
   fontFamily: "Inter, sans-serif",
@@ -62,77 +57,77 @@ const baseTypography = {
   h1: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(96),
+    fontSize: MenuItem.getPixelToRem(96),
     lineHeight: 1.167,
     letterSpacing: "-1.5px"
   },
   h2: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(60),
+    fontSize: MenuItem.getPixelToRem(60),
     lineHeight: 1.2,
     letterSpacing: "-0.5px"
   },
   h3: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(48),
+    fontSize: MenuItem.getPixelToRem(48),
     lineHeight: 1.167,
     letterSpacing: 0
   },
   h4: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(32),
+    fontSize: MenuItem.getPixelToRem(32),
     lineHeight: 1.25,
     letterSpacing: 0
   },
   h5: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(24),
+    fontSize: MenuItem.getPixelToRem(24),
     lineHeight: 1.167,
     letterSpacing: 0
   },
   h6: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(18),
+    fontSize: MenuItem.getPixelToRem(18),
     lineHeight: 1.333,
     letterSpacing: 0
   },
   subtitle1: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(16),
+    fontSize: MenuItem.getPixelToRem(16),
     lineHeight: 1.5,
     letterSpacing: 0
   },
   subtitle2: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 600,
-    fontSize: getPixelToRem(13),
+    fontSize: MenuItem.getPixelToRem(13),
     lineHeight: 1.538,
     letterSpacing: 0
   },
   body1: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 400,
-    fontSize: getPixelToRem(16),
+    fontSize: MenuItem.getPixelToRem(16),
     lineHeight: 1.5,
     letterSpacing: 0
   },
   body2: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 400,
-    fontSize: getPixelToRem(13),
+    fontSize: MenuItem.getPixelToRem(13),
     lineHeight: 1.538,
     letterSpacing: 0
   },
   button: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(13),
+    fontSize: MenuItem.getPixelToRem(13),
     lineHeight: 1.538,
     letterSpacing: 0,
     textTransform: "inherit"
@@ -140,14 +135,14 @@ const baseTypography = {
   caption: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 400,
-    fontSize: getPixelToRem(11),
+    fontSize: MenuItem.getPixelToRem(11),
     lineHeight: 1.454,
     letterSpacing: 0
   },
   overline: {
     fontFamily: "Inter, sans-serif",
     fontWeight: 500,
-    fontSize: getPixelToRem(10),
+    fontSize: MenuItem.getPixelToRem(10),
     lineHeight: 1.2,
     letterSpacing: "1.2px",
     textTransform: "uppercase"
@@ -167,7 +162,7 @@ const customTypography = {
   code1: {
     fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: getPixelToRem(16),
+    fontSize: MenuItem.getPixelToRem(16),
     lineHeight: 1.5,
     letterSpacing: 0,
     fontVariantLigatures: "no-common-ligatures"
@@ -175,7 +170,7 @@ const customTypography = {
   code2: {
     fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: getPixelToRem(14),
+    fontSize: MenuItem.getPixelToRem(14),
     lineHeight: 1.428,
     letterSpacing: 0,
     fontVariantLigatures: "no-common-ligatures"
@@ -183,7 +178,7 @@ const customTypography = {
   code3: {
     fontFamily: '"Overpass Mono", monospace',
     fontWeight: 400,
-    fontSize: getPixelToRem(12),
+    fontSize: MenuItem.getPixelToRem(12),
     lineHeight: 1.333,
     letterSpacing: 0,
     fontVariantLigatures: "no-common-ligatures"
@@ -660,8 +655,19 @@ const dataDisplayOverrides = {
     styleOverrides: {
       root: ({ theme: theme2, ownerState }) => ({
         overflow: "initial",
+        position: "relative",
         color: theme2.palette.secondary.contrastText,
         backgroundColor: theme2.palette.secondary.main,
+        // Overlay border on top of all content using ::after pseudo-element
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          boxShadow: `inset 0 0 0 1px ${theme2.palette.default.outlinedBorder}`,
+          pointerEvents: "none",
+          borderRadius: "inherit",
+          zIndex: 1
+        },
         //  Default fallback image override
         // https://github.com/mui/material-ui/issues/33229
         "& .MuiAvatar-fallback": {
@@ -698,11 +704,25 @@ const dataDisplayOverrides = {
         },
         // Disabled styles
         ...ownerState.disabled && {
-          opacity: 0.6
+          opacity: 1,
+          color: theme2.palette.text.disabled,
+          backgroundColor: theme2.palette.action.disabledBackground,
+          // Overlay border on top of all content using ::after pseudo-element
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
+            pointerEvents: "none",
+            borderRadius: "inherit",
+            zIndex: 1
+          }
         }
       }),
-      img: ({ theme: theme2 }) => ({
-        boxShadow: `0 0 0 1px ${theme2.palette.default.outlinedBorder}`
+      img: ({ ownerState }) => ({
+        ...ownerState.disabled && {
+          opacity: 0.6
+        }
       }),
       circular: () => ({
         borderRadius: avatarCircularRadius,
@@ -2325,6 +2345,72 @@ const formsOverrides = {
     }
   }
 };
+const getListItemAdornmentStyles = (theme2) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme2.spacing(1.5),
+  minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+  minWidth: cssUtils.MENU_ITEM_SIZE_DEFAULT
+});
+const getListItemStyles = (ownerState, theme2) => ({
+  gap: theme2.spacing(1.5),
+  minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+  padding: theme2.spacing(1, 2),
+  // Checkbox and radio button styles
+  "& .MuiCheckbox-root, & .MuiRadio-root": {
+    ...getListItemAdornmentStyles(theme2),
+    // Override the default icon size coming from MUI definition
+    "& .MuiSvgIcon-fontSizeMedium": {
+      fontSize: cssUtils.ICON_SIZE_LARGE,
+      width: cssUtils.ICON_SIZE_LARGE,
+      minWidth: cssUtils.ICON_SIZE_LARGE,
+      height: cssUtils.ICON_SIZE_LARGE
+    }
+  },
+  // Height: fixedHeight true (or undefined, which defaults to true) + dense true: 52px, dense false: 68px
+  // fixedHeight false: adapts to content
+  // Use data attribute selector since fixedHeight is not passed to MUI component to avoid DOM warning
+  height: ownerState.dense ? cssUtils.LIST_ITEM_SIZE_DENSE : cssUtils.LIST_ITEM_SIZE_DEFAULT,
+  '&[data-fixed-height="false"]': {
+    height: "auto"
+  },
+  // Outlined variant styles
+  ...ownerState.variant === "outlined" && {
+    backgroundColor: theme2.palette.background.paper,
+    boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
+    borderRadius: theme2.spacing(1),
+    "&.MuiListItemButton-root:hover": {
+      backgroundColor: theme2.palette.background.paper,
+      boxShadow: `inset 0 0 0 1px ${theme2.palette.text.hint}`
+    }
+  },
+  // Disable gutters styles
+  ...ownerState.disableGutters && {
+    paddingLeft: 0,
+    paddingRight: 0
+  },
+  // Disable padding styles
+  ...ownerState.disablePadding && {
+    padding: 0
+  },
+  // Disabled styles
+  ...ownerState.disabled && {
+    opacity: "1 !important",
+    color: theme2.palette.text.disabled,
+    backgroundColor: ownerState.variant === "outlined" ? theme2.palette.background.paper : "transparent",
+    borderColor: ownerState.variant === "outlined" ? theme2.palette.divider : "transparent",
+    ".MuiTypography-root": {
+      color: theme2.palette.text.disabled
+    },
+    svg: {
+      color: theme2.palette.text.disabled,
+      path: {
+        fill: theme2.palette.text.disabled
+      }
+    }
+  }
+});
 const navigationOverrides = {
   // Menu
   MuiMenu: {
@@ -2444,9 +2530,15 @@ const navigationOverrides = {
   },
   // List
   MuiList: {
+    defaultProps: {
+      variant: "standard"
+    },
     styleOverrides: {
-      root: ({ theme: theme2 }) => ({
-        paddingTop: 0,
+      root: ({ theme: theme2, ownerState }) => ({
+        display: "flex",
+        flexDirection: "column",
+        gap: theme2.spacing(ownerState.spacing ?? 0),
+        padding: 0,
         ".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
           minWidth: theme2.spacing(8),
           // 64px, defined by design
@@ -2461,13 +2553,30 @@ const navigationOverrides = {
         ".MuiDivider-root": {
           margin: theme2.spacing(1, 0)
         },
+        ".MuiListSubheader-root": {
+          // We need to offset the margin to avoid double spacing between subheaders and regular list items when using spacing prop.
+          marginBottom: theme2.spacing(-(ownerState.spacing ?? 0))
+        },
+        // Outlined-list variant: border on the list container and in the list items
+        ...ownerState.variant === "outlined-list" && {
+          "& .MuiListItem-root, & .MuiListItemButton-root": {
+            border: `1px solid ${theme2.palette.divider}`
+          },
+          // First list item has rounded top corners
+          "& .MuiListItem-root:first-of-type, & .MuiListItemButton-root:first-of-type": {
+            borderRadius: theme2.spacing(1, 1, 0, 0)
+          },
+          // Last list item has rounded bottom corners
+          "& .MuiListItem-root:last-of-type, & .MuiListItemButton-root:last-of-type": {
+            borderRadius: theme2.spacing(0, 0, 1, 1)
+          },
+          "& .MuiListItem-root + .MuiListItem-root, & .MuiListItemButton-root + .MuiListItemButton-root": {
+            borderTop: "none"
+          }
+        },
+        // TODO: old code, to be reviewed once we support sublevels in Figma specs.
         // Indent sublevels, ugly but needed to avoid issues with hover
         "& .MuiList-root": {
-          paddingTop: 0,
-          paddingBottom: 0,
-          "& .MuiListItem-root": {
-            paddingLeft: theme2.spacing(4)
-          },
           "& .MuiList-root": {
             "& .MuiListItem-root": {
               paddingLeft: theme2.spacing(6)
@@ -2493,32 +2602,105 @@ const navigationOverrides = {
     }
   },
   // List Item
+  MuiListItem: {
+    defaultProps: {
+      dense: true,
+      variant: "standard",
+      disablePadding: false
+    },
+    styleOverrides: {
+      root: ({ theme: theme2, ownerState }) => ({
+        ...getListItemStyles(ownerState, theme2),
+        // Add padding right when contains SecondaryAction to simulate spacing between the action and the content
+        "&:has(.MuiListItemSecondaryAction-root)": {
+          paddingRight: theme2.spacing(7.5)
+        },
+        // Reset padding when contains ListItemButton
+        "&:has(.MuiListItemButton-root)": {
+          padding: 0,
+          '&.MuiListItem-root[data-variant="outlined"]': {
+            boxShadow: "none",
+            "&:hover": {
+              backgroundColor: theme2.palette.background.paper,
+              boxShadow: "none"
+            }
+          }
+        }
+      })
+    }
+  },
+  // List Item Button
+  MuiListItemButton: {
+    defaultProps: {
+      dense: true,
+      variant: "standard",
+      component: "button"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2, ownerState }) => ({
+        ...getListItemStyles(ownerState, theme2),
+        // Add padding right when contains SecondaryAction to simulate spacing between the action and the content
+        "&:has(.MuiListItemSecondaryAction-root)": {
+          paddingRight: theme2.spacing(7.5)
+        },
+        // Reset padding when inside ListItem, but keep padding left
+        ".MuiListItem-root > &.MuiListItemButton-root": {
+          padding: 0,
+          paddingLeft: theme2.spacing(2),
+          "&:hover": {
+            backgroundColor: theme2.palette.action.hover
+          }
+        },
+        // Outlined variant hover when inside ListItem
+        '.MuiListItem-root[data-variant="outlined"] > &.MuiListItemButton-root': {
+          boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
+          borderRadius: theme2.spacing(1),
+          "&:hover": {
+            backgroundColor: theme2.palette.background.paper,
+            boxShadow: `inset 0 0 0 1px ${theme2.palette.text.hint}`
+          }
+        },
+        // Add padding right when inside ListItem that has SecondaryAction to simulate spacing between the action and the content
+        ".MuiListItem-root:has(.MuiListItemSecondaryAction-root) > &.MuiListItemButton-root": {
+          paddingRight: theme2.spacing(7.5)
+        }
+      })
+    }
+  },
   MuiListItemText: {
     defaultProps: {
       primaryTypographyProps: {
-        variant: "body2",
+        variant: "button",
         noWrap: true,
         component: "span"
       },
-      secondaryTypographyProps: { variant: "caption" }
+      secondaryTypographyProps: {
+        variant: "caption",
+        color: "text.secondary"
+      }
     },
     styleOverrides: {
-      root: ({ theme: theme2 }) => ({
-        paddingRight: theme2.spacing(2),
-        "& + .MuiBox-root": {
-          marginRight: theme2.spacing(1)
-        }
+      root: () => ({
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        flex: 1,
+        minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+        margin: 0
       })
     }
   },
   MuiListItemIcon: {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
-        display: "flex",
-        alignItems: "center",
-        gap: theme2.spacing(2),
-        "& .MuiSvgIcon-root": {
-          fontSize: cssUtils.ICON_SIZE_LARGE
+        ...getListItemAdornmentStyles(theme2),
+        // Apply styles to SVGs, but exclude those inside Radio or Checkbox components
+        "&:not(:has(.MuiRadio-root)):not(:has(.MuiCheckbox-root)) svg": {
+          color: theme2.palette.text.secondary,
+          fontSize: cssUtils.ICON_SIZE_LARGE,
+          width: cssUtils.ICON_SIZE_LARGE,
+          minWidth: cssUtils.ICON_SIZE_LARGE,
+          height: cssUtils.ICON_SIZE_LARGE
         },
         ".MuiMenuItem-root.MuiButtonBase-root &": {
           minWidth: cssUtils.ICON_SIZE_MEDIUM
@@ -2529,9 +2711,10 @@ const navigationOverrides = {
   MuiListItemAvatar: {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
+        ...getListItemAdornmentStyles(theme2),
         "& .MuiAvatar-root": {
-          height: theme2.spacing(4),
-          width: theme2.spacing(4)
+          height: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+          width: cssUtils.MENU_ITEM_SIZE_DEFAULT
         },
         "& .MuiSvgIcon-root": {
           fontSize: cssUtils.ICON_SIZE_MEDIUM
@@ -2539,6 +2722,41 @@ const navigationOverrides = {
       })
     }
   },
+  MuiListItemSecondaryAction: {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        ...getListItemAdornmentStyles(theme2)
+      })
+    }
+  },
+  MuiListSubheader: {
+    defaultProps: {
+      disableGutters: true,
+      color: "default",
+      component: "div"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        height: theme2.spacing(3),
+        ...theme2.typography.caption,
+        // Use data attribute selector since backgroundColor is not passed to MUI component to avoid DOM warning
+        backgroundColor: theme2.palette.background.default,
+        '&[data-background-color="paper"]': {
+          backgroundColor: theme2.palette.background.paper
+        },
+        '&[data-background-color="inherit"]': {
+          backgroundColor: "inherit"
+        },
+        // Padding for ListSubHeader when List is variant="standard"
+        '[data-variant="standard"] &': {
+          padding: theme2.spacing(0, 2)
+        }
+      })
+    }
+  },
   // Tabs
   MuiTabs: {
     styleOverrides: {
@@ -3268,6 +3486,8 @@ exports.BREAKPOINTS = cssUtils.BREAKPOINTS;
 exports.ICON_SIZE_LARGE = cssUtils.ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = cssUtils.ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = cssUtils.ICON_SIZE_SMALL;
+exports.LIST_ITEM_SIZE_DEFAULT = cssUtils.LIST_ITEM_SIZE_DEFAULT;
+exports.LIST_ITEM_SIZE_DENSE = cssUtils.LIST_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_DEFAULT = cssUtils.MENU_ITEM_SIZE_DEFAULT;
 exports.MENU_ITEM_SIZE_DENSE = cssUtils.MENU_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_EXTENDED = cssUtils.MENU_ITEM_SIZE_EXTENDED;