@carto/meridian-ds 2.1.1 → 2.2.0-alpha-filter-dropdown.4

package/CHANGELOG.md

@@ -2,15 +2,21 @@
 
 ## Unreleased
 
+- New FilterDropdown component [#235](https://github.com/CartoDB/meridian-ds/pull/235)
+
 ## 2.0
 
+### 2.2.0
+
+- New CopiableInputText component [#228](https://github.com/CartoDB/meridian-ds/pull/228)
+
 ### 2.1.1
 
 - MultipleSelectField: select all filter is not working from empty state [#231](https://github.com/CartoDB/meridian-ds/pull/231)
 
 ### 2.1.0
 
-- New Link components and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+- New Link component and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
 
 ### 2.0.2
 

package/dist/{Alert-yL5uEg4Z.js → Link-D5fKicEY.js}

@@ -1,10 +1,137 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { b as ICON_SIZE_MEDIUM, T as Typography, c as ICON_SIZE_SMALL, I as ICON_SIZE_LARGE, u as useImperativeIntl } from "./TablePaginationActions-CCDi-BO-.js";
+import { styled, Alert as Alert$1, Fade, AlertTitle, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1 } from "@mui/material";
 import { forwardRef, useState } from "react";
-import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { useIntl } from "react-intl";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, I as ICON_SIZE_LARGE, u as useImperativeIntl, T as Typography } from "./TablePaginationActions-BWer8cmX.js";
 import "cartocolor";
+const StyledAlert = styled(Alert$1, {
+  shouldForwardProp: (prop) => ![
+    "isNeutral",
+    "content",
+    "hasCloseButton",
+    "hasAction",
+    "hasTitle",
+    "isSticky"
+  ].includes(prop)
+})(
+  ({
+    isNeutral,
+    content,
+    hasCloseButton,
+    hasAction,
+    hasTitle,
+    isSticky,
+    theme
+  }) => ({
+    columnGap: theme.spacing(1),
+    minHeight: theme.spacing(6),
+    ...hasAction && {
+      display: "grid",
+      gridTemplateAreas: content === "inline" || hasCloseButton ? `"icon message actions"` : `
+    "icon message"
+    "icon actions"
+    `,
+      gridTemplateColumns: hasCloseButton ? `${ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${ICON_SIZE_MEDIUM}`
+    },
+    ...isNeutral && {
+      backgroundColor: theme.palette.default.background,
+      color: theme.palette.text.primary
+    },
+    ...isSticky && {
+      borderRadius: 0
+    },
+    ".MuiAlert-message": {
+      flex: 1,
+      paddingTop: hasTitle ? theme.spacing(0.25) : theme.spacing(0.5),
+      "& a": {
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      },
+      ...hasAction && {
+        gridArea: "message"
+      },
+      ...isNeutral && {
+        "& :not(.MuiAlertTitle-root)": {
+          color: theme.palette.text.secondary
+        },
+        a: {
+          color: `${theme.palette.primary.main} !important`
+        }
+      }
+    },
+    ".MuiAlert-icon": {
+      height: hasTitle ? theme.spacing(2.5) : theme.spacing(3),
+      marginRight: 0,
+      ...hasAction && {
+        gridArea: "icon"
+      },
+      ...isNeutral && {
+        color: theme.palette.text.primary
+      }
+    },
+    ".MuiAlert-action": {
+      alignItems: content === "inline" && !hasCloseButton ? "center" : "flex-start",
+      margin: content === "block" && !hasCloseButton ? theme.spacing(1.5, 0, 0.5) : 0,
+      marginLeft: content === "inline" || hasCloseButton ? "auto" : 0,
+      padding: 0,
+      ...hasAction && {
+        gridArea: "actions"
+      },
+      ".MuiIconButton-root svg path": {
+        fill: hasCloseButton ? theme.palette.text.secondary : void 0
+      }
+    }
+  })
+);
+function _Alert({
+  title,
+  action,
+  severity = "neutral",
+  content = "inline",
+  variant = "standard",
+  children,
+  onClose,
+  open: controlledOpen,
+  isSticky,
+  ...otherProps
+}, ref) {
+  const [open, setOpen] = useState(controlledOpen ?? true);
+  const handleClose = onClose ? (ev) => {
+    onClose(ev);
+    setOpen(false);
+  } : void 0;
+  const isNeutral = severity === "neutral";
+  const isOpen = controlledOpen ?? open;
+  return /* @__PURE__ */ jsx(Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxs(
+    StyledAlert,
+    {
+      ref,
+      severity: isNeutral ? "info" : severity,
+      isNeutral,
+      content,
+      action,
+      onClose: handleClose,
+      hasCloseButton: Boolean(onClose),
+      hasAction: Boolean(action),
+      hasTitle: Boolean(title),
+      isSticky,
+      variant,
+      "data-name": "alert",
+      "data-sticky": isSticky,
+      "data-content": content,
+      ...otherProps,
+      children: [
+        title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "inherit", component: "div", children })
+      ]
+    }
+  ) });
+}
+const Alert = forwardRef(_Alert);
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,
@@ -168,133 +295,6 @@ function _Link({
   );
 }
 const Link = forwardRef(_Link);
-const StyledAlert = styled(Alert$1, {
-  shouldForwardProp: (prop) => ![
-    "isNeutral",
-    "content",
-    "hasCloseButton",
-    "hasAction",
-    "hasTitle",
-    "isSticky"
-  ].includes(prop)
-})(
-  ({
-    isNeutral,
-    content,
-    hasCloseButton,
-    hasAction,
-    hasTitle,
-    isSticky,
-    theme
-  }) => ({
-    columnGap: theme.spacing(1),
-    minHeight: theme.spacing(6),
-    ...hasAction && {
-      display: "grid",
-      gridTemplateAreas: content === "inline" || hasCloseButton ? `"icon message actions"` : `
-    "icon message"
-    "icon actions"
-    `,
-      gridTemplateColumns: hasCloseButton ? `${ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${ICON_SIZE_MEDIUM}`
-    },
-    ...isNeutral && {
-      backgroundColor: theme.palette.default.background,
-      color: theme.palette.text.primary
-    },
-    ...isSticky && {
-      borderRadius: 0
-    },
-    ".MuiAlert-message": {
-      flex: 1,
-      paddingTop: hasTitle ? theme.spacing(0.25) : theme.spacing(0.5),
-      "& a": {
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-        "&:hover": {
-          textDecoration: "underline"
-        }
-      },
-      ...hasAction && {
-        gridArea: "message"
-      },
-      ...isNeutral && {
-        "& :not(.MuiAlertTitle-root)": {
-          color: theme.palette.text.secondary
-        },
-        a: {
-          color: `${theme.palette.primary.main} !important`
-        }
-      }
-    },
-    ".MuiAlert-icon": {
-      height: hasTitle ? theme.spacing(2.5) : theme.spacing(3),
-      marginRight: 0,
-      ...hasAction && {
-        gridArea: "icon"
-      },
-      ...isNeutral && {
-        color: theme.palette.text.primary
-      }
-    },
-    ".MuiAlert-action": {
-      alignItems: content === "inline" && !hasCloseButton ? "center" : "flex-start",
-      margin: content === "block" && !hasCloseButton ? theme.spacing(1.5, 0, 0.5) : 0,
-      marginLeft: content === "inline" || hasCloseButton ? "auto" : 0,
-      padding: 0,
-      ...hasAction && {
-        gridArea: "actions"
-      },
-      ".MuiIconButton-root svg path": {
-        fill: hasCloseButton ? theme.palette.text.secondary : void 0
-      }
-    }
-  })
-);
-function _Alert({
-  title,
-  action,
-  severity = "neutral",
-  content = "inline",
-  variant = "standard",
-  children,
-  onClose,
-  open: controlledOpen,
-  isSticky,
-  ...otherProps
-}, ref) {
-  const [open, setOpen] = useState(controlledOpen ?? true);
-  const handleClose = onClose ? (ev) => {
-    onClose(ev);
-    setOpen(false);
-  } : void 0;
-  const isNeutral = severity === "neutral";
-  const isOpen = controlledOpen ?? open;
-  return /* @__PURE__ */ jsx(Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxs(
-    StyledAlert,
-    {
-      ref,
-      severity: isNeutral ? "info" : severity,
-      isNeutral,
-      content,
-      action,
-      onClose: handleClose,
-      hasCloseButton: Boolean(onClose),
-      hasAction: Boolean(action),
-      hasTitle: Boolean(title),
-      isSticky,
-      variant,
-      "data-name": "alert",
-      "data-sticky": isSticky,
-      "data-content": content,
-      ...otherProps,
-      children: [
-        title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
-        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "inherit", component: "div", children })
-      ]
-    }
-  ) });
-}
-const Alert = forwardRef(_Alert);
 export {
   Alert as A,
   IconButton as I,

package/dist/{Alert-oGAW_syG.cjs → Link-_lzRY1Ay.cjs}

@@ -1,11 +1,138 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const TablePaginationActions = require("./TablePaginationActions-D2K26kdR.cjs");
 const material = require("@mui/material");
+const React = require("react");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
-const TablePaginationActions = require("./TablePaginationActions-MwqZJoRm.cjs");
 require("cartocolor");
+const StyledAlert = material.styled(material.Alert, {
+  shouldForwardProp: (prop) => ![
+    "isNeutral",
+    "content",
+    "hasCloseButton",
+    "hasAction",
+    "hasTitle",
+    "isSticky"
+  ].includes(prop)
+})(
+  ({
+    isNeutral,
+    content,
+    hasCloseButton,
+    hasAction,
+    hasTitle,
+    isSticky,
+    theme
+  }) => ({
+    columnGap: theme.spacing(1),
+    minHeight: theme.spacing(6),
+    ...hasAction && {
+      display: "grid",
+      gridTemplateAreas: content === "inline" || hasCloseButton ? `"icon message actions"` : `
+    "icon message"
+    "icon actions"
+    `,
+      gridTemplateColumns: hasCloseButton ? `${TablePaginationActions.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${TablePaginationActions.ICON_SIZE_MEDIUM}`
+    },
+    ...isNeutral && {
+      backgroundColor: theme.palette.default.background,
+      color: theme.palette.text.primary
+    },
+    ...isSticky && {
+      borderRadius: 0
+    },
+    ".MuiAlert-message": {
+      flex: 1,
+      paddingTop: hasTitle ? theme.spacing(0.25) : theme.spacing(0.5),
+      "& a": {
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      },
+      ...hasAction && {
+        gridArea: "message"
+      },
+      ...isNeutral && {
+        "& :not(.MuiAlertTitle-root)": {
+          color: theme.palette.text.secondary
+        },
+        a: {
+          color: `${theme.palette.primary.main} !important`
+        }
+      }
+    },
+    ".MuiAlert-icon": {
+      height: hasTitle ? theme.spacing(2.5) : theme.spacing(3),
+      marginRight: 0,
+      ...hasAction && {
+        gridArea: "icon"
+      },
+      ...isNeutral && {
+        color: theme.palette.text.primary
+      }
+    },
+    ".MuiAlert-action": {
+      alignItems: content === "inline" && !hasCloseButton ? "center" : "flex-start",
+      margin: content === "block" && !hasCloseButton ? theme.spacing(1.5, 0, 0.5) : 0,
+      marginLeft: content === "inline" || hasCloseButton ? "auto" : 0,
+      padding: 0,
+      ...hasAction && {
+        gridArea: "actions"
+      },
+      ".MuiIconButton-root svg path": {
+        fill: hasCloseButton ? theme.palette.text.secondary : void 0
+      }
+    }
+  })
+);
+function _Alert({
+  title,
+  action,
+  severity = "neutral",
+  content = "inline",
+  variant = "standard",
+  children,
+  onClose,
+  open: controlledOpen,
+  isSticky,
+  ...otherProps
+}, ref) {
+  const [open, setOpen] = React.useState(controlledOpen ?? true);
+  const handleClose = onClose ? (ev) => {
+    onClose(ev);
+    setOpen(false);
+  } : void 0;
+  const isNeutral = severity === "neutral";
+  const isOpen = controlledOpen ?? open;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledAlert,
+    {
+      ref,
+      severity: isNeutral ? "info" : severity,
+      isNeutral,
+      content,
+      action,
+      onClose: handleClose,
+      hasCloseButton: Boolean(onClose),
+      hasAction: Boolean(action),
+      hasTitle: Boolean(title),
+      isSticky,
+      variant,
+      "data-name": "alert",
+      "data-sticky": isSticky,
+      "data-content": content,
+      ...otherProps,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(material.AlertTitle, { children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "inherit", component: "div", children })
+      ]
+    }
+  ) });
+}
+const Alert = React.forwardRef(_Alert);
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,
@@ -169,133 +296,6 @@ function _Link({
   );
 }
 const Link = React.forwardRef(_Link);
-const StyledAlert = material.styled(material.Alert, {
-  shouldForwardProp: (prop) => ![
-    "isNeutral",
-    "content",
-    "hasCloseButton",
-    "hasAction",
-    "hasTitle",
-    "isSticky"
-  ].includes(prop)
-})(
-  ({
-    isNeutral,
-    content,
-    hasCloseButton,
-    hasAction,
-    hasTitle,
-    isSticky,
-    theme
-  }) => ({
-    columnGap: theme.spacing(1),
-    minHeight: theme.spacing(6),
-    ...hasAction && {
-      display: "grid",
-      gridTemplateAreas: content === "inline" || hasCloseButton ? `"icon message actions"` : `
-    "icon message"
-    "icon actions"
-    `,
-      gridTemplateColumns: hasCloseButton ? `${TablePaginationActions.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${TablePaginationActions.ICON_SIZE_MEDIUM}`
-    },
-    ...isNeutral && {
-      backgroundColor: theme.palette.default.background,
-      color: theme.palette.text.primary
-    },
-    ...isSticky && {
-      borderRadius: 0
-    },
-    ".MuiAlert-message": {
-      flex: 1,
-      paddingTop: hasTitle ? theme.spacing(0.25) : theme.spacing(0.5),
-      "& a": {
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-        "&:hover": {
-          textDecoration: "underline"
-        }
-      },
-      ...hasAction && {
-        gridArea: "message"
-      },
-      ...isNeutral && {
-        "& :not(.MuiAlertTitle-root)": {
-          color: theme.palette.text.secondary
-        },
-        a: {
-          color: `${theme.palette.primary.main} !important`
-        }
-      }
-    },
-    ".MuiAlert-icon": {
-      height: hasTitle ? theme.spacing(2.5) : theme.spacing(3),
-      marginRight: 0,
-      ...hasAction && {
-        gridArea: "icon"
-      },
-      ...isNeutral && {
-        color: theme.palette.text.primary
-      }
-    },
-    ".MuiAlert-action": {
-      alignItems: content === "inline" && !hasCloseButton ? "center" : "flex-start",
-      margin: content === "block" && !hasCloseButton ? theme.spacing(1.5, 0, 0.5) : 0,
-      marginLeft: content === "inline" || hasCloseButton ? "auto" : 0,
-      padding: 0,
-      ...hasAction && {
-        gridArea: "actions"
-      },
-      ".MuiIconButton-root svg path": {
-        fill: hasCloseButton ? theme.palette.text.secondary : void 0
-      }
-    }
-  })
-);
-function _Alert({
-  title,
-  action,
-  severity = "neutral",
-  content = "inline",
-  variant = "standard",
-  children,
-  onClose,
-  open: controlledOpen,
-  isSticky,
-  ...otherProps
-}, ref) {
-  const [open, setOpen] = React.useState(controlledOpen ?? true);
-  const handleClose = onClose ? (ev) => {
-    onClose(ev);
-    setOpen(false);
-  } : void 0;
-  const isNeutral = severity === "neutral";
-  const isOpen = controlledOpen ?? open;
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledAlert,
-    {
-      ref,
-      severity: isNeutral ? "info" : severity,
-      isNeutral,
-      content,
-      action,
-      onClose: handleClose,
-      hasCloseButton: Boolean(onClose),
-      hasAction: Boolean(action),
-      hasTitle: Boolean(title),
-      isSticky,
-      variant,
-      "data-name": "alert",
-      "data-sticky": isSticky,
-      "data-content": content,
-      ...otherProps,
-      children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(material.AlertTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "inherit", component: "div", children })
-      ]
-    }
-  ) });
-}
-const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
 exports.IconButton = IconButton;
 exports.Link = Link;

package/dist/{MenuItem-CyIdh2wX.cjs → MenuItem-YpFpuljU.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-MwqZJoRm.cjs");
+const TablePaginationActions = require("./TablePaginationActions-D2K26kdR.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -156,11 +156,12 @@ function _MenuItem({
       extended,
       dense,
       fixed,
-      color: iconColor,
+      iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
-      "data-fixed": fixed
+      "data-fixed": fixed,
+      "data-icon-color": iconColor
     }
   );
 }

package/dist/{MenuItem-C8x-GasJ.js → MenuItem-badiQq9A.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-BWer8cmX.js";
+import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-CCDi-BO-.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -155,11 +155,12 @@ function _MenuItem({
       extended,
       dense,
       fixed,
-      color: iconColor,
+      iconColor,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
-      "data-fixed": fixed
+      "data-fixed": fixed,
+      "data-icon-color": iconColor
     }
   );
 }

package/dist/{TablePaginationActions-BWer8cmX.js → TablePaginationActions-CCDi-BO-.js}

@@ -818,6 +818,8 @@ const en = {
       save: "Save",
       add: "Add",
       showOptions: "Show options",
+      hide: "Hide",
+      show: "Show",
       opensInNewTab: "Opens in new tab"
     },
     form: {
@@ -881,8 +883,6 @@ const en = {
       },
       legend: {
         layerOptions: "Layer options",
-        hide: "Hide",
-        show: "Show",
         layer: "layer",
         opacity: "Opacity",
         hideLayer: "Hide layer",
@@ -967,6 +967,8 @@ const es = {
       save: "Guardar",
       add: "Añadir",
       showOptions: "Mostrar opciones",
+      hide: "Ocultar",
+      show: "Mostrar",
       opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
@@ -1030,8 +1032,6 @@ const es = {
       },
       legend: {
         layerOptions: "Opciones de capa",
-        hide: "Ocultar",
-        show: "Mostrar",
         layer: "capa",
         opacity: "Opacidad",
         hideLayer: "Ocultar capa",
@@ -1114,6 +1114,8 @@ const id = {
       save: "Simpan",
       add: "Tambah",
       showOptions: "Tampilkan opsi",
+      hide: "Sembunyikan",
+      show: "Tampilkan",
       opensInNewTab: "Buka di tab baru"
     },
     form: {
@@ -1177,8 +1179,6 @@ const id = {
       },
       legend: {
         layerOptions: "Opsi Layer",
-        hide: "Sembunyikan",
-        show: "Tampilkan",
         layer: "layer",
         opacity: "Opasitas",
         hideLayer: "Sembunyikan layer",