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

package/dist/theme/index.cjs

@@ -3,9 +3,9 @@ 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 MenuItem = require("../MenuItem-DoBJsRR_.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const cssUtils = require("../css-utils-Do3X_yIr.cjs");
+const cssUtils = require("../css-utils-CH7es90t.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -655,19 +655,8 @@ 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": {
@@ -703,27 +692,13 @@ const dataDisplayOverrides = {
           }
         },
         // Disabled styles
-        ...ownerState.disabled && {
-          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: ({ ownerState }) => ({
         ...ownerState.disabled && {
           opacity: 0.6
         }
       }),
+      img: ({ theme: theme2 }) => ({
+        boxShadow: `0 0 0 1px ${theme2.palette.default.outlinedBorder}`
+      }),
       circular: () => ({
         borderRadius: avatarCircularRadius,
         "& img": {
@@ -2345,72 +2320,6 @@ 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: {
@@ -2530,15 +2439,9 @@ const navigationOverrides = {
   },
   // List
   MuiList: {
-    defaultProps: {
-      variant: "standard"
-    },
     styleOverrides: {
-      root: ({ theme: theme2, ownerState }) => ({
-        display: "flex",
-        flexDirection: "column",
-        gap: theme2.spacing(ownerState.spacing ?? 0),
-        padding: 0,
+      root: ({ theme: theme2 }) => ({
+        paddingTop: 0,
         ".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
           minWidth: theme2.spacing(8),
           // 64px, defined by design
@@ -2553,30 +2456,13 @@ 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)
@@ -2602,105 +2488,32 @@ 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: "button",
+        variant: "body2",
         noWrap: true,
         component: "span"
       },
-      secondaryTypographyProps: {
-        variant: "caption",
-        color: "text.secondary"
-      }
+      secondaryTypographyProps: { variant: "caption" }
     },
     styleOverrides: {
-      root: () => ({
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        flex: 1,
-        minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
-        margin: 0
+      root: ({ theme: theme2 }) => ({
+        paddingRight: theme2.spacing(2),
+        "& + .MuiBox-root": {
+          marginRight: theme2.spacing(1)
+        }
       })
     }
   },
   MuiListItemIcon: {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
-        ...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
+        display: "flex",
+        alignItems: "center",
+        gap: theme2.spacing(2),
+        "& .MuiSvgIcon-root": {
+          fontSize: cssUtils.ICON_SIZE_LARGE
         },
         ".MuiMenuItem-root.MuiButtonBase-root &": {
           minWidth: cssUtils.ICON_SIZE_MEDIUM
@@ -2711,10 +2524,9 @@ const navigationOverrides = {
   MuiListItemAvatar: {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
-        ...getListItemAdornmentStyles(theme2),
         "& .MuiAvatar-root": {
-          height: cssUtils.MENU_ITEM_SIZE_DEFAULT,
-          width: cssUtils.MENU_ITEM_SIZE_DEFAULT
+          height: theme2.spacing(4),
+          width: theme2.spacing(4)
         },
         "& .MuiSvgIcon-root": {
           fontSize: cssUtils.ICON_SIZE_MEDIUM
@@ -2722,41 +2534,6 @@ 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: {
@@ -3486,8 +3263,6 @@ 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;