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

package/dist/components/index.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
-import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade, List as List$2, ListSubheader as ListSubheader$1, ListItemButton, ListItem as ListItem$1 } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
-import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, j as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-CjUBRJVK.js";
-import { a } from "../css-utils-CjUBRJVK.js";
-import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BZPM5zpX.js";
-import { L } from "../Alert-BZPM5zpX.js";
+import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, j as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, i as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, k as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-BzztxQJk.js";
+import { a } from "../css-utils-BzztxQJk.js";
+import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BWe4a9zW.js";
+import { L } from "../Alert-BWe4a9zW.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { M as MenuItem$1 } from "../MenuItem-DRUK149i.js";
+import { M as MenuItem$1, a as getThemeColor } from "../MenuItem-zaH11xyj.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -223,7 +223,7 @@ function SplitButton({
     )
   ] });
 }
-const Root$5 = styled(Box)(({ theme }) => ({
+const Root$6 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -257,7 +257,7 @@ function _LabelWithIndicator({
   typographyProps
 }, ref) {
   return /* @__PURE__ */ jsxs(
-    Root$5,
+    Root$6,
     {
       ref,
       "data-testid": dataTestId,
@@ -776,7 +776,7 @@ function _MultipleSelectField({
 const MultipleSelectField = forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
   shouldForwardProp: (prop) => prop !== "backgroundColor"
-})();
+})(() => ({}));
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -890,7 +890,7 @@ function _Loader({
           secondLabel && /* @__PURE__ */ jsx(
             Typography,
             {
-              variant: "body2",
+              variant: "caption",
               color: "textSecondary",
               ...secondLabelProps,
               id: labelText ? void 0 : "loader-label",
@@ -1479,7 +1479,7 @@ function useMultipleAutocomplete({
     getCounterRenderTags
   };
 }
-const List = styled("ul")(
+const List$1 = styled("ul")(
   ({ theme, hasFilters }) => ({
     ...!hasFilters && {
       paddingTop: `${theme.spacing(1)} !important`
@@ -1606,7 +1606,7 @@ function _AutocompleteList({
     );
   };
   return /* @__PURE__ */ jsxs(
-    List,
+    List$1,
     {
       ref,
       ...otherProps,
@@ -1929,7 +1929,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = styled(AppBar$1)(({ theme }) => ({
+const Root$5 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   userSelect: "none",
   "& .MuiTypography-root": {
@@ -1964,7 +1964,7 @@ function _AppBar({
   onClickMenu,
   ...otherProps
 }, ref) {
-  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$5, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
@@ -2644,7 +2644,7 @@ function CodeAreaInput({
     }
   );
 }
-const Root$3 = styled(FormControl)(() => ({
+const Root$4 = styled(FormControl)(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1
@@ -2836,7 +2836,7 @@ function CodeAreaField({
   const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
   const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
   return /* @__PURE__ */ jsxs(
-    Root$3,
+    Root$4,
     {
       size,
       error,
@@ -3411,7 +3411,7 @@ function DialogAlert({
 }) {
   return /* @__PURE__ */ jsx(StyledAlert, { severity, ...otherProps, "data-name": "dialog-alert", children });
 }
-const Root$2 = styled(Box, {
+const Root$3 = styled(Box, {
   shouldForwardProp: (prop) => !["dark", "hasChildren"].includes(prop)
 })(({ dark, hasChildren, theme }) => ({
   flex: "0 0 auto",
@@ -3479,7 +3479,7 @@ function DialogFooter({
     topContent,
     !!alertContent && /* @__PURE__ */ jsx(DividerTop, {}),
     /* @__PURE__ */ jsxs(
-      Root$2,
+      Root$3,
       {
         ...otherProps,
         dark,
@@ -3575,7 +3575,7 @@ function DialogConfirmation({
     }
   );
 }
-const Root$1 = styled(Box)(({ theme }) => ({
+const Root$2 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3656,7 +3656,7 @@ function DialogStepper({
   stepsLabels,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root$1, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
+  return /* @__PURE__ */ jsx(Root$2, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
     const step = idx + 1;
     const isCurrent = step === currentStep;
     const isCompleted = step < currentStep;
@@ -3942,7 +3942,7 @@ function ClearButton({
     }
   ) });
 }
-const Root = styled(Box, {
+const Root$1 = styled(Box, {
   shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
 })(({ size, variant, readOnly, theme }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -3982,7 +3982,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsx(Root$1, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -4666,6 +4666,122 @@ function DateTimePicker({
     }
   );
 }
+const EMPTY_STATE_WIDTH = 592;
+const Root = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing" && prop !== "contentHeight"
+})(({ size = "medium", spacing, contentHeight, theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  height: contentHeight,
+  minHeight: contentHeight
+}));
+const IconWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
+})(({ size, iconSize, iconColor, theme }) => {
+  const finalIconSize = iconSize ?? (size === "small" ? theme.spacing(5) : theme.spacing(6));
+  const colorValue = iconColor === null || iconColor === void 0 ? void 0 : getThemeColor(iconColor, theme);
+  return {
+    display: "flex",
+    ".MuiSvgIcon-root": {
+      width: finalIconSize,
+      height: finalIconSize,
+      fontSize: finalIconSize,
+      ...colorValue && { color: colorValue }
+    }
+  };
+});
+const TextContent = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "contentWidth"
+})(({ contentWidth, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textAlign: "center",
+  maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+  margin: "0 auto"
+}));
+const Actions = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing"
+})(({ size = "medium", spacing, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  marginTop: theme.spacing(size === "small" ? 1 : 2),
+  ".MuiButton-root + .MuiButton-root": {
+    marginLeft: 0
+  }
+}));
+function _EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  children,
+  size = "medium",
+  spacing,
+  iconProps,
+  contentWidth = EMPTY_STATE_WIDTH,
+  contentHeight,
+  sx,
+  titleProps,
+  descriptionProps,
+  ...otherProps
+}, ref) {
+  const hasAnyTextContent = title || description;
+  const isSmall = size === "small";
+  const iconSize = (iconProps == null ? void 0 : iconProps.size) ?? (isSmall ? 32 : 48);
+  const iconColor = (iconProps == null ? void 0 : iconProps.color) === null ? null : (iconProps == null ? void 0 : iconProps.color) ?? "text.disabled";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ref,
+      alignItems: "center",
+      size,
+      spacing,
+      contentHeight,
+      sx,
+      ...otherProps,
+      "data-name": "empty-state",
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-content-height": contentHeight,
+      "data-content-width": contentWidth,
+      "data-icon-size": iconSize,
+      "data-icon-color": iconColor ?? "null",
+      children: [
+        icon && /* @__PURE__ */ jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
+        hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { contentWidth, children: [
+          title && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "body2" : "body1",
+              color: "textSecondary",
+              component: "div",
+              ...titleProps,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "caption" : "body2",
+              color: "textSecondary",
+              component: "div",
+              ...descriptionProps,
+              children: description
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsx(Actions, { size, spacing, children: actions }),
+        children
+      ]
+    }
+  );
+}
+const EmptyState = forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
 const Content$2 = styled("ul")(({ theme }) => ({
   listStyle: "none",
@@ -4812,7 +4928,7 @@ const StyledMenu = styled(Menu$2, {
     }
   }
 }));
-function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
+function _Menu({ extended, width, height, MenuListProps: MenuListProps2, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
     StyledMenu,
     {
@@ -4823,7 +4939,7 @@ function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
       height,
       extended,
       MenuListProps: {
-        ...MenuListProps,
+        ...MenuListProps2,
         "data-width": width,
         "data-height": height,
         "data-extended": extended
@@ -6147,6 +6263,87 @@ function _EllipsisWithTooltip({
   );
 }
 const EllipsisWithTooltip = forwardRef(_EllipsisWithTooltip);
+function _List({ variant = "standard", spacing, ...otherProps }, ref) {
+  const isOutlinedItems = variant === "outlined-items";
+  return /* @__PURE__ */ jsx(
+    List$2,
+    {
+      ...otherProps,
+      variant,
+      spacing: spacing || (isOutlinedItems ? 1 : 0),
+      ref,
+      "data-name": "list",
+      "data-variant": variant,
+      "data-spacing": spacing
+    }
+  );
+}
+const List = forwardRef(_List);
+function _ListSubheader({ backgroundColor = "default", ...otherProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    ListSubheader$1,
+    {
+      ...otherProps,
+      ref,
+      "data-name": "list-subheader",
+      "data-background-color": backgroundColor
+    }
+  );
+}
+const ListSubheader = forwardRef(_ListSubheader);
+function _ListItem({
+  variant = "standard",
+  disabled,
+  fixedHeight = true,
+  onClick,
+  ...otherProps
+}, ref) {
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      ListItemButton,
+      {
+        ...otherProps,
+        variant,
+        disabled,
+        onClick,
+        ref,
+        "data-name": "list-item-button",
+        "data-variant": variant,
+        "data-fixed-height": fixedHeight
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ListItem$1,
+    {
+      ...otherProps,
+      variant,
+      disabled,
+      ...disabled && { "aria-disabled": true },
+      ref,
+      "data-name": "list-item",
+      "data-variant": variant,
+      "data-fixed-height": fixedHeight
+    }
+  );
+}
+const ListItem = forwardRef(_ListItem);
+function ListItemRightContent({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      gap: 1.5,
+      ...props,
+      "data-name": "list-item-right-content",
+      children
+    }
+  );
+}
 export {
   AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
@@ -6183,11 +6380,16 @@ export {
   DialogPaper,
   DialogStepper,
   EllipsisWithTooltip,
+  EmptyState,
   FilterDropdown,
   FilterDropdownMenuItem,
   IconButton,
   LabelWithIndicator,
   L as Link,
+  List,
+  ListItem,
+  ListItemRightContent,
+  ListSubheader,
   Loader,
   Menu,
   MenuItem$1 as MenuItem,

package/dist/{css-utils-CjUBRJVK.js → css-utils-BzztxQJk.js}

@@ -781,6 +781,8 @@ const MENU_LIST_MAX_SIZE = 312;
 const MENU_ITEM_SIZE_DENSE = 24;
 const MENU_ITEM_SIZE_DEFAULT = 32;
 const MENU_ITEM_SIZE_EXTENDED = 48;
+const LIST_ITEM_SIZE_DENSE = 52;
+const LIST_ITEM_SIZE_DEFAULT = 68;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -5756,6 +5758,7 @@ export {
   APPBAR_SIZE as A,
   BREAKPOINTS as B,
   ICON_SIZE_LARGE as I,
+  LIST_ITEM_SIZE_DENSE as L,
   MENU_ITEM_SIZE_DEFAULT as M,
   NOTIFICATION_DURATION_IN_MS as N,
   SPACING as S,
@@ -5767,9 +5770,10 @@ export {
   ellipsisStyles as e,
   MENU_ITEM_SIZE_DENSE as f,
   getSpacing as g,
-  MENU_ITEM_SIZE_EXTENDED as h,
-  IconButton as i,
-  useImperativeIntl as j,
-  getDefaultExportFromCjs as k,
+  LIST_ITEM_SIZE_DEFAULT as h,
+  MENU_ITEM_SIZE_EXTENDED as i,
+  IconButton as j,
+  useImperativeIntl as k,
+  getDefaultExportFromCjs as l,
   useTranslationWithFallback as u
 };

package/dist/{css-utils-CH7es90t.cjs → css-utils-Do3X_yIr.cjs}

@@ -782,6 +782,8 @@ const MENU_LIST_MAX_SIZE = 312;
 const MENU_ITEM_SIZE_DENSE = 24;
 const MENU_ITEM_SIZE_DEFAULT = 32;
 const MENU_ITEM_SIZE_EXTENDED = 48;
+const LIST_ITEM_SIZE_DENSE = 52;
+const LIST_ITEM_SIZE_DEFAULT = 68;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -5759,6 +5761,8 @@ exports.ICON_SIZE_LARGE = ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = ICON_SIZE_SMALL;
 exports.IconButton = IconButton;
+exports.LIST_ITEM_SIZE_DEFAULT = LIST_ITEM_SIZE_DEFAULT;
+exports.LIST_ITEM_SIZE_DENSE = LIST_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_DEFAULT = MENU_ITEM_SIZE_DEFAULT;
 exports.MENU_ITEM_SIZE_DENSE = MENU_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_EXTENDED = MENU_ITEM_SIZE_EXTENDED;