@carto/meridian-ds 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ## 2.0
 
+### 2.12.0
+
+- Added onBack button functionality to the DialogHeader component [#372](https://github.com/CartoDB/meridian-ds/pull/372)
+
 ### 2.11.0
 
 - Extend `AccordionGroup`, adding the `sx` property to each of the `items` [#369](https://github.com/CartoDB/meridian-ds/pull/369)

package/dist/{ListItem-BmsqkqsM.cjs → ListItem-2aFaE2cn.cjs}

@@ -3,8 +3,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const paletteUtils = require("./palette-utils-BsfMFfME.cjs");
 require("cartocolor");
+const paletteUtils = require("./palette-utils-Y3_zSjv2.cjs");
 const ReactWindow = require("react-window");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/{ListItem-k7Far5JT.js → ListItem-DA0KFtZW.js}

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { forwardRef, useState, createContext, useMemo, useContext } from "react";
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle, List as List$1, ListItemButton as ListItemButton$1, ListItem as ListItem$1 } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-BMEVUZ5G.js";
 import "cartocolor";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-vw-vTQjG.js";
 import * as ReactWindow from "react-window";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",

package/dist/{OpenDiagonallyRight-BUZBgnkY.cjs → OpenDiagonallyRight-CaNa6uRI.cjs}

@@ -2,6 +2,33 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
+const Icon$3 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "m11.835 11.995 3.17-3.17-1.41-1.41-4.59 4.58 4.59 4.59 1.41-1.42z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$3 = material.createSvgIcon(Icon$3(), "ArrowLeft");
+function ArrowLeft({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$3,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$3 = React.forwardRef(ArrowLeft);
+ForwardedComponent$3.displayName = "ArrowLeft";
 const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -83,6 +110,7 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
 }
 const ForwardedComponent = React.forwardRef(OpenDiagonallyRight);
 ForwardedComponent.displayName = "OpenDiagonallyRight";
-exports.ForwardedComponent = ForwardedComponent$2;
-exports.ForwardedComponent$1 = ForwardedComponent$1;
-exports.ForwardedComponent$2 = ForwardedComponent;
+exports.ForwardedComponent = ForwardedComponent$3;
+exports.ForwardedComponent$1 = ForwardedComponent$2;
+exports.ForwardedComponent$2 = ForwardedComponent$1;
+exports.ForwardedComponent$3 = ForwardedComponent;

package/dist/{OpenDiagonallyRight-DQEM4RAg.js → OpenDiagonallyRight-y1A_rQiz.js}

@@ -1,6 +1,33 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
+const Icon$3 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "m11.835 11.995 3.17-3.17-1.41-1.41-4.59 4.58 4.59 4.59 1.41-1.42z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$3 = createSvgIcon(Icon$3(), "ArrowLeft");
+function ArrowLeft({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon$3,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$3 = forwardRef(ArrowLeft);
+ForwardedComponent$3.displayName = "ArrowLeft";
 const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -83,7 +110,8 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
 const ForwardedComponent = forwardRef(OpenDiagonallyRight);
 ForwardedComponent.displayName = "OpenDiagonallyRight";
 export {
-  ForwardedComponent$2 as F,
-  ForwardedComponent$1 as a,
-  ForwardedComponent as b
+  ForwardedComponent$3 as F,
+  ForwardedComponent$2 as a,
+  ForwardedComponent$1 as b,
+  ForwardedComponent as c
 };

package/dist/components/index.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const paletteUtils = require("../palette-utils-BsfMFfME.cjs");
-const ListItem = require("../ListItem-BmsqkqsM.cjs");
+const paletteUtils = require("../palette-utils-Y3_zSjv2.cjs");
+const ListItem = require("../ListItem-2aFaE2cn.cjs");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
-const OpenDiagonallyRight = require("../OpenDiagonallyRight-BUZBgnkY.cjs");
-const utils = require("../utils-BndCEhGs.cjs");
+const OpenDiagonallyRight = require("../OpenDiagonallyRight-CaNa6uRI.cjs");
+const utils = require("../utils-BC7DF-VM.cjs");
 require("cartocolor");
 const ReactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -203,7 +203,7 @@ function SplitButton({
               children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}) })
         ]
       }
     ),
@@ -2162,7 +2162,7 @@ function CodeAreaHeader({
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: copyLabel })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(utils.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$2, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$3, {}) }),
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: expandLabel })
               ] })
             ]
@@ -2200,7 +2200,7 @@ function CodeAreaHeader({
         color: "default",
         size,
         onClick: onClickExpand,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$2, {}),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$3, {}),
         disabled,
         tooltip: expandLabel,
         tooltipPlacement: "top"
@@ -3252,18 +3252,36 @@ function DialogHeader({
   "aria-label": ariaLabel,
   closeIcon,
   closeTooltipText,
-  tooltipProps,
   iconButtonProps,
+  onBack,
+  backIcon,
+  backTooltipText,
+  backIconButtonProps,
   ...otherProps
 }) {
   const closeTooltipLabel = paletteUtils.useTranslationWithFallback(
     "c4r.button.close",
     closeTooltipText
   );
+  const backTooltipLabel = paletteUtils.useTranslationWithFallback(
+    "c4r.button.back",
+    backTooltipText
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Main$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
+          onBack && /* @__PURE__ */ jsxRuntime.jsx(
+            paletteUtils.IconButton,
+            {
+              "aria-label": backTooltipLabel,
+              onClick: onBack,
+              tooltip: backTooltipLabel,
+              tooltipPlacement: "bottom",
+              icon: backIcon || /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent, {}),
+              ...backIconButtonProps
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             paletteUtils.Typography,
             {
@@ -3280,12 +3298,14 @@ function DialogHeader({
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
           onClose && /* @__PURE__ */ jsxRuntime.jsx(
-            material.Tooltip,
+            paletteUtils.IconButton,
             {
-              title: closeTooltipLabel,
-              placement: "left",
-              ...tooltipProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, ...iconButtonProps, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+              "aria-label": closeTooltipLabel,
+              onClick: onClose,
+              tooltip: closeTooltipLabel,
+              tooltipPlacement: "bottom",
+              icon: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }),
+              ...iconButtonProps
             }
           )
         ] })
@@ -3808,7 +3828,7 @@ function CodeAreaDialog({
           {
             title,
             onClose,
-            closeIcon: !onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$1, {})
+            closeIcon: !onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$2, {})
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogContent, { error, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5164,7 +5184,7 @@ function _FilterDropdown({
           Button,
           {
             ...commonButtonProps,
-            endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
+            endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
             ...buttonProps,
             children: menuLabel
           }

package/dist/components/index.js

@@ -3,13 +3,13 @@ import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement,
 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 as ListItemText$1, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip as Chip$1, 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, ListSubheader as ListSubheader$1, Typography as Typography$1, Popover } from "@mui/material";
 import { ListItemAvatar, ListItemSecondaryAction } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
-import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, o as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, l as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, p as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles, r as resolvePalettePath } from "../palette-utils-BMEVUZ5G.js";
-import { a } from "../palette-utils-BMEVUZ5G.js";
-import { S as ScreenReaderOnly, A as Alert$1, u as useListContextProps } from "../ListItem-k7Far5JT.js";
-import { L, a as a2, b, c, d } from "../ListItem-k7Far5JT.js";
+import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, o as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, l as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, p as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles, r as resolvePalettePath } from "../palette-utils-vw-vTQjG.js";
+import { a } from "../palette-utils-vw-vTQjG.js";
+import { S as ScreenReaderOnly, A as Alert$1, u as useListContextProps } from "../ListItem-DA0KFtZW.js";
+import { L, a as a2, b, c, d } from "../ListItem-DA0KFtZW.js";
 import { F as ForwardedComponent$1 } from "../ArrowDown-Bho9Ssnw.js";
-import { F as ForwardedComponent, b as ForwardedComponent$2, a as ForwardedComponent$3 } from "../OpenDiagonallyRight-DQEM4RAg.js";
-import { M as MenuItem$1, b as getThemeColor, S as SVG_SELECTOR } from "../utils-DYO_K3Z4.js";
+import { a as ForwardedComponent, c as ForwardedComponent$2, F as ForwardedComponent$3, b as ForwardedComponent$4 } from "../OpenDiagonallyRight-y1A_rQiz.js";
+import { M as MenuItem$1, b as getThemeColor, S as SVG_SELECTOR } from "../utils-COdo3b_v.js";
 import "cartocolor";
 import * as ReactWindow from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -42,7 +42,7 @@ import { useIntl } from "react-intl";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
-import { F as ForwardedComponent$4 } from "../Search-Bx9LZ_VF.js";
+import { F as ForwardedComponent$5 } from "../Search-Bx9LZ_VF.js";
 import DOMPurify from "dompurify";
 const IndicatorIcon = styled(Box)({
   position: "absolute",
@@ -3236,18 +3236,36 @@ function DialogHeader({
   "aria-label": ariaLabel,
   closeIcon,
   closeTooltipText,
-  tooltipProps,
   iconButtonProps,
+  onBack,
+  backIcon,
+  backTooltipText,
+  backIconButtonProps,
   ...otherProps
 }) {
   const closeTooltipLabel = useTranslationWithFallback(
     "c4r.button.close",
     closeTooltipText
   );
+  const backTooltipLabel = useTranslationWithFallback(
+    "c4r.button.back",
+    backTooltipText
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxs(Main$1, { children: [
         /* @__PURE__ */ jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
+          onBack && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": backTooltipLabel,
+              onClick: onBack,
+              tooltip: backTooltipLabel,
+              tooltipPlacement: "bottom",
+              icon: backIcon || /* @__PURE__ */ jsx(ForwardedComponent$3, {}),
+              ...backIconButtonProps
+            }
+          ),
           /* @__PURE__ */ jsx(
             Typography,
             {
@@ -3264,12 +3282,14 @@ function DialogHeader({
         /* @__PURE__ */ jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
           onClose && /* @__PURE__ */ jsx(
-            Tooltip,
+            IconButton,
             {
-              title: closeTooltipLabel,
-              placement: "left",
-              ...tooltipProps,
-              children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, ...iconButtonProps, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+              "aria-label": closeTooltipLabel,
+              onClick: onClose,
+              tooltip: closeTooltipLabel,
+              tooltipPlacement: "bottom",
+              icon: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }),
+              ...iconButtonProps
             }
           )
         ] })
@@ -3792,7 +3812,7 @@ function CodeAreaDialog({
           {
             title,
             onClose,
-            closeIcon: !onClickFooter && /* @__PURE__ */ jsx(ForwardedComponent$3, {})
+            closeIcon: !onClickFooter && /* @__PURE__ */ jsx(ForwardedComponent$4, {})
           }
         ),
         /* @__PURE__ */ jsx(CodeAreaDialogContent, { error, children: /* @__PURE__ */ jsx(
@@ -5494,7 +5514,7 @@ function _MessageField({
 }
 const MessageField = forwardRef(_MessageField);
 MessageField.displayName = "MessageField";
-const SearchIcon = styled(ForwardedComponent$4, {
+const SearchIcon = styled(ForwardedComponent$5, {
   shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
 })(
   ({ theme, minimized, disabled }) => ({