@carto/meridian-ds 2.5.5 → 2.6.0-alpha-searchfield.1

package/dist/{TablePaginationActions-DAMGtIub.cjs → css-utils-CqIN_t7x.cjs}

@@ -782,6 +782,31 @@ 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 FontWeight = {
+  regular: 400,
+  medium: 500,
+  strong: 600
+};
+function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
+  const fontConfiguration = {
+    fontWeight: FontWeight[weight],
+    fontStyle: italic ? "italic" : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Typography,
+    {
+      ...otherProps,
+      ref,
+      style: {
+        ...fontConfiguration,
+        ...style
+      },
+      "data-name": "typography",
+      children
+    }
+  );
+}
+const Typography = React.forwardRef(_Typography);
 const en = {
   c4r: {
     button: {
@@ -793,10 +818,11 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
+      clear: "Clear",
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
-      opensInNewTab: "Opens in new tab"
+      opensInNewTab: "(Opens in new tab)"
     },
     form: {
       selectAll: "Select all",
@@ -942,10 +968,11 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
+      clear: "Borrar",
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
-      opensInNewTab: "Abre en una nueva pestaña"
+      opensInNewTab: "(Abre en una nueva pestaña)"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1089,10 +1116,11 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
+      clear: "Bersihkan",
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",
-      opensInNewTab: "Buka di tab baru"
+      opensInNewTab: "(Buka di tab baru)"
     },
     form: {
       selectAll: "Select all",
@@ -5566,48 +5594,78 @@ const getGloballyCachedIntl = (intlConfig) => {
 function useImperativeIntl(intlConfig) {
   return getGloballyCachedIntl(intlConfig);
 }
-const FontWeight = {
-  regular: 400,
-  medium: 500,
-  strong: 600
-};
-function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
-  const fontConfiguration = {
-    fontWeight: FontWeight[weight],
-    fontStyle: italic ? "italic" : void 0
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Typography,
+const Option = material.styled("div")(({ theme }) => ({
+  position: "relative",
+  display: "inline-flex",
+  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
+  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
+  "& + &, & + .optionIconButton": {
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const StyledIconButton = material.styled(material.IconButton, {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})(({ active, theme }) => ({
+  ...active && {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.background,
+    "& svg:not(.doNotFillIcon) path": {
+      fill: theme.palette.primary.main
+    }
+  }
+}));
+function _IconButton({
+  tooltip,
+  tooltipPlacement = "top",
+  icon,
+  size = "medium",
+  variant = "icon",
+  color = "default",
+  sx,
+  className,
+  loading,
+  disabled,
+  active,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Option,
     {
-      ...otherProps,
-      ref,
-      style: {
-        ...fontConfiguration,
-        ...style
-      },
-      "data-name": "typography",
-      children
+      className: `optionIconButton ${className ?? ""}`,
+      sx,
+      "data-testid": "icon-button",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        StyledIconButton,
+        {
+          ...props,
+          ref,
+          size,
+          variant,
+          color,
+          active,
+          disabled: disabled || loading,
+          role: "button",
+          children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
+        }
+      )
     }
-  );
+  ) });
 }
-const Typography = React.forwardRef(_Typography);
+const IconButton = React.forwardRef(_IconButton);
 const Root = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   gap: theme.spacing(0.5),
   marginLeft: theme.spacing(1)
 }));
-const Button = material.styled("div")(({ theme }) => ({
-  "& .MuiIconButton-root:not(.Mui-disabled)": {
-    color: theme.palette.text.secondary
-  }
-}));
-function TablePaginationActions({
+function _TablePaginationActions({
   count,
   page,
   rowsPerPage = 10,
   onPageChange,
-  lastPageTooltip
-}) {
+  lastPageTooltip,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}, ref) {
   const intl = reactIntl.useIntl();
   const intlConfig = useImperativeIntl(intl);
   const handleBackButtonClick = (event) => {
@@ -5627,38 +5685,50 @@ function TablePaginationActions({
   const noMorePagesText = intlConfig.formatMessage({
     id: "c4r.form.pagination.noMorePages"
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: isFirstPage ? noMorePagesText : prevLabel, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      material.IconButton,
-      {
-        onClick: handleBackButtonClick,
-        disabled: page === 0,
-        "aria-label": prevLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowLeftOutlined, {})
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      material.Tooltip,
-      {
-        title: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Button, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          material.IconButton,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "table-pagination-actions",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            onClick: handleBackButtonClick,
+            disabled: page === 0,
+            "aria-label": prevLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowLeftOutlined, {}),
+            tooltip: isFirstPage ? noMorePagesText : prevLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
           {
             onClick: handleNextButtonClick,
             disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-            "aria-label": nextLabel.toLocaleLowerCase(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowRightOutlined, {})
+            "aria-label": nextLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowRightOutlined, {}),
+            tooltip: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel
           }
-        ) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
+const TablePaginationActions = React.forwardRef(_TablePaginationActions);
+const ellipsisStyles = {
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
+};
 exports.APPBAR_SIZE = APPBAR_SIZE;
 exports.BREAKPOINTS = BREAKPOINTS;
 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.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;
@@ -5667,6 +5737,7 @@ exports.NOTIFICATION_DURATION_IN_MS = NOTIFICATION_DURATION_IN_MS;
 exports.SPACING = SPACING;
 exports.TablePaginationActions = TablePaginationActions;
 exports.Typography = Typography;
+exports.ellipsisStyles = ellipsisStyles;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.getSpacing = getSpacing;
 exports.useImperativeIntl = useImperativeIntl;

package/dist/{TablePaginationActions-C6TVGJM-.js → css-utils-hxI-qUxK.js}

@@ -1,6 +1,6 @@
 import require$$0 from "react-is";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Typography as Typography$1, Tooltip, IconButton, styled, Box } from "@mui/material";
+import { Typography as Typography$1, styled, IconButton as IconButton$1, Tooltip, CircularProgress, Box } from "@mui/material";
 import { forwardRef } from "react";
 import { KeyboardArrowLeftOutlined, KeyboardArrowRightOutlined } from "@mui/icons-material";
 import { createIntlCache, createIntl, useIntl } from "react-intl";
@@ -781,6 +781,31 @@ 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 FontWeight = {
+  regular: 400,
+  medium: 500,
+  strong: 600
+};
+function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
+  const fontConfiguration = {
+    fontWeight: FontWeight[weight],
+    fontStyle: italic ? "italic" : void 0
+  };
+  return /* @__PURE__ */ jsx(
+    Typography$1,
+    {
+      ...otherProps,
+      ref,
+      style: {
+        ...fontConfiguration,
+        ...style
+      },
+      "data-name": "typography",
+      children
+    }
+  );
+}
+const Typography = forwardRef(_Typography);
 const en = {
   c4r: {
     button: {
@@ -792,10 +817,11 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
+      clear: "Clear",
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
-      opensInNewTab: "Opens in new tab"
+      opensInNewTab: "(Opens in new tab)"
     },
     form: {
       selectAll: "Select all",
@@ -941,10 +967,11 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
+      clear: "Borrar",
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
-      opensInNewTab: "Abre en una nueva pestaña"
+      opensInNewTab: "(Abre en una nueva pestaña)"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1088,10 +1115,11 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
+      clear: "Bersihkan",
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",
-      opensInNewTab: "Buka di tab baru"
+      opensInNewTab: "(Buka di tab baru)"
     },
     form: {
       selectAll: "Select all",
@@ -5565,48 +5593,78 @@ const getGloballyCachedIntl = (intlConfig) => {
 function useImperativeIntl(intlConfig) {
   return getGloballyCachedIntl(intlConfig);
 }
-const FontWeight = {
-  regular: 400,
-  medium: 500,
-  strong: 600
-};
-function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
-  const fontConfiguration = {
-    fontWeight: FontWeight[weight],
-    fontStyle: italic ? "italic" : void 0
-  };
-  return /* @__PURE__ */ jsx(
-    Typography$1,
+const Option = styled("div")(({ theme }) => ({
+  position: "relative",
+  display: "inline-flex",
+  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
+  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
+  "& + &, & + .optionIconButton": {
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const StyledIconButton = styled(IconButton$1, {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})(({ active, theme }) => ({
+  ...active && {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.background,
+    "& svg:not(.doNotFillIcon) path": {
+      fill: theme.palette.primary.main
+    }
+  }
+}));
+function _IconButton({
+  tooltip,
+  tooltipPlacement = "top",
+  icon,
+  size = "medium",
+  variant = "icon",
+  color = "default",
+  sx,
+  className,
+  loading,
+  disabled,
+  active,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsx(
+    Option,
     {
-      ...otherProps,
-      ref,
-      style: {
-        ...fontConfiguration,
-        ...style
-      },
-      "data-name": "typography",
-      children
+      className: `optionIconButton ${className ?? ""}`,
+      sx,
+      "data-testid": "icon-button",
+      children: /* @__PURE__ */ jsx(
+        StyledIconButton,
+        {
+          ...props,
+          ref,
+          size,
+          variant,
+          color,
+          active,
+          disabled: disabled || loading,
+          role: "button",
+          children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
+        }
+      )
     }
-  );
+  ) });
 }
-const Typography = forwardRef(_Typography);
+const IconButton = forwardRef(_IconButton);
 const Root = styled(Box)(({ theme }) => ({
   display: "flex",
   gap: theme.spacing(0.5),
   marginLeft: theme.spacing(1)
 }));
-const Button = styled("div")(({ theme }) => ({
-  "& .MuiIconButton-root:not(.Mui-disabled)": {
-    color: theme.palette.text.secondary
-  }
-}));
-function TablePaginationActions({
+function _TablePaginationActions({
   count,
   page,
   rowsPerPage = 10,
   onPageChange,
-  lastPageTooltip
-}) {
+  lastPageTooltip,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}, ref) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   const handleBackButtonClick = (event) => {
@@ -5626,33 +5684,44 @@ function TablePaginationActions({
   const noMorePagesText = intlConfig.formatMessage({
     id: "c4r.form.pagination.noMorePages"
   });
-  return /* @__PURE__ */ jsxs(Root, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: isFirstPage ? noMorePagesText : prevLabel, children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: handleBackButtonClick,
-        disabled: page === 0,
-        "aria-label": prevLabel,
-        children: /* @__PURE__ */ jsx(KeyboardArrowLeftOutlined, {})
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        title: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel,
-        children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "table-pagination-actions",
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: handleBackButtonClick,
+            disabled: page === 0,
+            "aria-label": prevLabel,
+            icon: /* @__PURE__ */ jsx(KeyboardArrowLeftOutlined, {}),
+            tooltip: isFirstPage ? noMorePagesText : prevLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
           IconButton,
           {
             onClick: handleNextButtonClick,
             disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-            "aria-label": nextLabel.toLocaleLowerCase(),
-            children: /* @__PURE__ */ jsx(KeyboardArrowRightOutlined, {})
+            "aria-label": nextLabel,
+            icon: /* @__PURE__ */ jsx(KeyboardArrowRightOutlined, {}),
+            tooltip: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel
           }
-        ) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
+const TablePaginationActions = forwardRef(_TablePaginationActions);
+const ellipsisStyles = {
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
+};
 export {
   APPBAR_SIZE as A,
   BREAKPOINTS as B,
@@ -5665,9 +5734,11 @@ export {
   ICON_SIZE_MEDIUM as b,
   ICON_SIZE_SMALL as c,
   MENU_LIST_MAX_SIZE as d,
-  MENU_ITEM_SIZE_DENSE as e,
-  MENU_ITEM_SIZE_EXTENDED as f,
+  ellipsisStyles as e,
+  MENU_ITEM_SIZE_DENSE as f,
   getSpacing as g,
-  getDefaultExportFromCjs as h,
+  MENU_ITEM_SIZE_EXTENDED as h,
+  IconButton as i,
+  getDefaultExportFromCjs as j,
   useImperativeIntl as u
 };

package/dist/custom-icons/index.cjs

@@ -5,7 +5,8 @@ const React = require("react");
 const material = require("@mui/material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const SwatchSquare = require("../SwatchSquare-B8PIY3Rd.cjs");
+const Search = require("../Search-CMWbM9nD.cjs");
+const SwatchSquare = require("../SwatchSquare-DuXPIL7t.cjs");
 const Icon$38 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -6108,7 +6109,7 @@ exports.ArrowDown = ArrowDown.ArrowDown;
 exports.ArrowUp = OpenDiagonallyRight.ArrowUp;
 exports.CloseDiagonallyRight = OpenDiagonallyRight.CloseDiagonallyRight;
 exports.OpenDiagonallyRight = OpenDiagonallyRight.OpenDiagonallyRight;
-exports.Search = SwatchSquare.Search;
+exports.Search = Search.Search;
 exports.SwatchSquare = SwatchSquare.SwatchSquare;
 exports.AccessIn = AccessIn$1;
 exports.AddApp = AddApp$1;

package/dist/custom-icons/index.js

@@ -3,7 +3,8 @@ import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
 import { A } from "../ArrowDown-d6bxUL0F.js";
 import { A as A2, C, O } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { S, a } from "../SwatchSquare-CaaLsjAC.js";
+import { S } from "../Search-C7wkXu3f.js";
+import { S as S2 } from "../SwatchSquare-B6KYVoqV.js";
 const Icon$38 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -6277,7 +6278,7 @@ export {
   SupplyChain$1 as SupplyChain,
   SwatchCircle$1 as SwatchCircle,
   SwatchCircleNone$1 as SwatchCircleNone,
-  a as SwatchSquare,
+  S2 as SwatchSquare,
   TableColumn$1 as TableColumn,
   TableColumnLimited$1 as TableColumnLimited,
   TempTable$1 as TempTable,