@carto/meridian-ds 2.15.1 → 2.15.2-alpha.2b8c1ea.214

package/CHANGELOG.md

@@ -2,7 +2,14 @@
 
 ## Unreleased
 
-- Fix: preserve compiled messages in flattenMessages — fixes `buttonFooterLabelId` and similar intl-key props showing raw keys [#402](https://github.com/CartoDB/meridian-ds/pull/402)
+- feat(design system): restyle Slider marks as a thin vertical break in the rail (replacing the default MUI dot), so passing `marks={[{ value }]}` on a range slider acts as a "stop indicator" for a reference value (e.g. a "base size") — visible across both filled and unfilled portions of the track. Applies to all marks; labels still position correctly underneath
+- Feat: add `markLine` prop to `TimeSeriesWidgetUI` for custom reference lines [#409](https://github.com/CartoDB/meridian-ds/pull/409)
+- Chore: remove redundant prepublish lifecycle hook [#404](https://github.com/CartoDB/meridian-ds/pull/404)
+- Test: fill unit testing gaps [#401](https://github.com/CartoDB/meridian-ds/pull/401)
+- Storybook: add pseudo-states addon for CSS state testing and extend `PseudoHover`/`PseudoFocusVisible` coverage across components [#406](https://github.com/CartoDB/meridian-ds/pull/406)
+- Fix: add missing padding on date picker calendar header `labelContainer` to match the design spec [#406](https://github.com/CartoDB/meridian-ds/pull/406)
+- Storybook: add interaction tests via `@storybook/addon-vitest`[#407](https://github.com/CartoDB/meridian-ds/pull/407)
+- Add new custom icons: LayerTypeCluster, LayerTypeH3, LayerTypeHeatmap, LayerTypeLine, LayerTypePoint, LayerTypePolygon, LayersGroup, ShortcutMap, ShortcutWorkflow, StarredLayer, StrokeDot, VisibilityOffByGroup, XLogo, and update SelectFeature [#413](https://github.com/CartoDB/meridian-ds/pull/413)
 
 ## 2.0
 

package/dist/components/index.cjs

@@ -144,6 +144,17 @@ function _Button({
   );
 }
 const Button = React.forwardRef(_Button);
+const idCounter = {};
+function uniqueId(prefix = "$lodash$") {
+  if (!idCounter[prefix]) {
+    idCounter[prefix] = 0;
+  }
+  const id = ++idCounter[prefix];
+  if (prefix === "$lodash$") {
+    return `${id}`;
+  }
+  return `${prefix}${id}`;
+}
 const ButtonGroup = material.styled(material.ButtonGroup)(({ theme, size }) => ({
   "& .MuiButton-root:last-child": {
     padding: 0,
@@ -159,12 +170,22 @@ function SplitButton({
   variant,
   size,
   color,
+  defaultOpen,
+  toggleAriaLabel,
   ...otherProps
 }) {
   var _a;
-  const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef(null);
+  const toggleLabel = paletteUtils.useTranslationWithFallback(
+    "c4r.button.showOptions",
+    toggleAriaLabel
+  );
+  const [baseId] = React.useState(() => uniqueId("split-button-"));
+  const toggleId = `${baseId}-toggle`;
+  const menuId = `${baseId}-menu`;
+  const [open, setOpen] = React.useState(defaultOpen ?? false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [menuAutoFocus, setMenuAutoFocus] = React.useState(!defaultOpen);
   const handleClick = () => {
     onClick(options[selectedIndex]);
   };
@@ -173,11 +194,11 @@ function SplitButton({
     setOpen(false);
   };
   const handleToggle = () => {
+    setMenuAutoFocus(true);
     setOpen((prevOpen) => !prevOpen);
   };
   const handleClose = (event) => {
-    var _a2;
-    if ((_a2 = anchorRef.current) == null ? void 0 : _a2.contains(event.target)) {
+    if (anchorEl == null ? void 0 : anchorEl.contains(event.target)) {
       return;
     }
     setOpen(false);
@@ -187,7 +208,7 @@ function SplitButton({
       ButtonGroup,
       {
         "data-name": "split-button",
-        ref: anchorRef,
+        ref: setAnchorEl,
         variant,
         size,
         color,
@@ -203,7 +224,19 @@ 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(material.Tooltip, { title: toggleLabel, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              id: toggleId,
+              disabled: loading || disabled,
+              onClick: handleToggle,
+              "aria-label": toggleLabel,
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              "aria-controls": open ? menuId : void 0,
+              children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {})
+            }
+          ) }) })
         ]
       }
     ),
@@ -211,8 +244,8 @@ function SplitButton({
       material.Popper,
       {
         sx: { zIndex: 1 },
-        open,
-        anchorEl: anchorRef.current,
+        open: open && Boolean(anchorEl),
+        anchorEl,
         role: void 0,
         transition: true,
         disablePortal: true,
@@ -224,16 +257,25 @@ function SplitButton({
             style: {
               transformOrigin: placement === "bottom" ? "center top" : "center bottom"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 8, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(material.MenuList, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              material.MenuItem,
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 8, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.MenuList,
               {
-                disabled: option.disabled,
-                selected: index === selectedIndex,
-                onClick: (event) => handleMenuItemClick(event, index),
-                children: option.label
-              },
-              option.label
-            )) }) }) })
+                id: menuId,
+                "aria-labelledby": toggleId,
+                autoFocusItem: menuAutoFocus,
+                sx: { paddingY: 1 },
+                children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  material.MenuItem,
+                  {
+                    disabled: option.disabled,
+                    selected: index === selectedIndex,
+                    onClick: (event) => handleMenuItemClick(event, index),
+                    children: option.label
+                  },
+                  option.label
+                ))
+              }
+            ) }) })
           }
         )
       }
@@ -351,17 +393,6 @@ function _PasswordField({
   );
 }
 const PasswordField = React.forwardRef(_PasswordField);
-const idCounter = {};
-function uniqueId(prefix = "$lodash$") {
-  if (!idCounter[prefix]) {
-    idCounter[prefix] = 0;
-  }
-  const id = ++idCounter[prefix];
-  if (prefix === "$lodash$") {
-    return `${id}`;
-  }
-  return `${prefix}${id}`;
-}
 const StyledSelect = material.styled(material.Select)(({ theme }) => ({
   "& .MuiInputAdornment-positionStart": {
     paddingLeft: theme.spacing(2),
@@ -2903,6 +2934,7 @@ function CodeAreaField({
             lineNumbers,
             className: variant === "filled" ? "codeArea-filled" : "",
             fullScreen,
+            "aria-readonly": readOnly || void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 CodeAreaHeader,
@@ -3319,6 +3351,14 @@ function DialogHeader({
     children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
   ] });
 }
+function computeScrollBorders(node, hasFooterAlert) {
+  const atBottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
+  const atTop = node.scrollTop === 0;
+  return {
+    showTop: !atTop,
+    showBottom: !atBottom || Boolean(hasFooterAlert)
+  };
+}
 const Content$5 = material.styled(material.DialogContent, {
   shouldForwardProp: (prop) => ![
     "scrollableContent",
@@ -3382,11 +3422,10 @@ function _DialogContent({
   );
   const updateBorders = React.useCallback(
     (node) => {
-      const bottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
-      const top = node.scrollTop === 0;
+      const { showTop, showBottom } = computeScrollBorders(node, hasFooterAlert);
       const borderStyle = `1px solid ${theme.palette.divider}`;
-      node.style.borderTop = top ? "none" : borderStyle;
-      node.style.borderBottom = bottom && !hasFooterAlert ? "none" : borderStyle;
+      node.style.borderTop = showTop ? borderStyle : "none";
+      node.style.borderBottom = showBottom ? borderStyle : "none";
     },
     [theme.palette.divider, hasFooterAlert]
   );
@@ -5931,6 +5970,7 @@ function Snackbar({
   autoWidth,
   icon,
   closeTooltipText,
+  disablePortal,
   ...rest
 }) {
   const closeTooltipLabel = paletteUtils.useTranslationWithFallback(
@@ -5941,7 +5981,7 @@ function Snackbar({
   const disabledIcon = icon === false || isNeutral && !icon;
   const disabledAutoHide = autoHideDuration === null;
   const duration = disabledAutoHide ? null : autoHideDuration || paletteUtils.NOTIFICATION_DURATION_IN_MS;
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Portal, { disablePortal, children: /* @__PURE__ */ jsxRuntime.jsx(
     SnackbarRoot,
     {
       ...rest,

package/dist/components/index.js

@@ -1,6 +1,6 @@
 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 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 { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Tooltip, 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, 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, ArrowBackOutlined, 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-gZwK5wCD.js";
@@ -128,6 +128,17 @@ function _Button({
   );
 }
 const Button = forwardRef(_Button);
+const idCounter = {};
+function uniqueId(prefix = "$lodash$") {
+  if (!idCounter[prefix]) {
+    idCounter[prefix] = 0;
+  }
+  const id = ++idCounter[prefix];
+  if (prefix === "$lodash$") {
+    return `${id}`;
+  }
+  return `${prefix}${id}`;
+}
 const ButtonGroup = styled(ButtonGroup$1)(({ theme, size }) => ({
   "& .MuiButton-root:last-child": {
     padding: 0,
@@ -143,12 +154,22 @@ function SplitButton({
   variant,
   size,
   color,
+  defaultOpen,
+  toggleAriaLabel,
   ...otherProps
 }) {
   var _a;
-  const [open, setOpen] = useState(false);
-  const anchorRef = useRef(null);
+  const toggleLabel = useTranslationWithFallback(
+    "c4r.button.showOptions",
+    toggleAriaLabel
+  );
+  const [baseId] = useState(() => uniqueId("split-button-"));
+  const toggleId = `${baseId}-toggle`;
+  const menuId = `${baseId}-menu`;
+  const [open, setOpen] = useState(defaultOpen ?? false);
+  const [anchorEl, setAnchorEl] = useState(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [menuAutoFocus, setMenuAutoFocus] = useState(!defaultOpen);
   const handleClick = () => {
     onClick(options[selectedIndex]);
   };
@@ -157,11 +178,11 @@ function SplitButton({
     setOpen(false);
   };
   const handleToggle = () => {
+    setMenuAutoFocus(true);
     setOpen((prevOpen) => !prevOpen);
   };
   const handleClose = (event) => {
-    var _a2;
-    if ((_a2 = anchorRef.current) == null ? void 0 : _a2.contains(event.target)) {
+    if (anchorEl == null ? void 0 : anchorEl.contains(event.target)) {
       return;
     }
     setOpen(false);
@@ -171,7 +192,7 @@ function SplitButton({
       ButtonGroup,
       {
         "data-name": "split-button",
-        ref: anchorRef,
+        ref: setAnchorEl,
         variant,
         size,
         color,
@@ -187,7 +208,19 @@ function SplitButton({
               children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
             }
           ),
-          /* @__PURE__ */ jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsx(ForwardedComponent, {}) : /* @__PURE__ */ jsx(ForwardedComponent$1, {}) })
+          /* @__PURE__ */ jsx(Tooltip, { title: toggleLabel, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: toggleId,
+              disabled: loading || disabled,
+              onClick: handleToggle,
+              "aria-label": toggleLabel,
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              "aria-controls": open ? menuId : void 0,
+              children: open ? /* @__PURE__ */ jsx(ForwardedComponent, {}) : /* @__PURE__ */ jsx(ForwardedComponent$1, {})
+            }
+          ) }) })
         ]
       }
     ),
@@ -195,8 +228,8 @@ function SplitButton({
       Popper,
       {
         sx: { zIndex: 1 },
-        open,
-        anchorEl: anchorRef.current,
+        open: open && Boolean(anchorEl),
+        anchorEl,
         role: void 0,
         transition: true,
         disablePortal: true,
@@ -208,16 +241,25 @@ function SplitButton({
             style: {
               transformOrigin: placement === "bottom" ? "center top" : "center bottom"
             },
-            children: /* @__PURE__ */ jsx(Paper, { elevation: 8, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx(MenuList$1, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsx(
-              MenuItem,
+            children: /* @__PURE__ */ jsx(Paper, { elevation: 8, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx(
+              MenuList$1,
               {
-                disabled: option.disabled,
-                selected: index === selectedIndex,
-                onClick: (event) => handleMenuItemClick(event, index),
-                children: option.label
-              },
-              option.label
-            )) }) }) })
+                id: menuId,
+                "aria-labelledby": toggleId,
+                autoFocusItem: menuAutoFocus,
+                sx: { paddingY: 1 },
+                children: options.map((option, index) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    disabled: option.disabled,
+                    selected: index === selectedIndex,
+                    onClick: (event) => handleMenuItemClick(event, index),
+                    children: option.label
+                  },
+                  option.label
+                ))
+              }
+            ) }) })
           }
         )
       }
@@ -335,17 +377,6 @@ function _PasswordField({
   );
 }
 const PasswordField = forwardRef(_PasswordField);
-const idCounter = {};
-function uniqueId(prefix = "$lodash$") {
-  if (!idCounter[prefix]) {
-    idCounter[prefix] = 0;
-  }
-  const id = ++idCounter[prefix];
-  if (prefix === "$lodash$") {
-    return `${id}`;
-  }
-  return `${prefix}${id}`;
-}
 const StyledSelect = styled(Select)(({ theme }) => ({
   "& .MuiInputAdornment-positionStart": {
     paddingLeft: theme.spacing(2),
@@ -2887,6 +2918,7 @@ function CodeAreaField({
             lineNumbers,
             className: variant === "filled" ? "codeArea-filled" : "",
             fullScreen,
+            "aria-readonly": readOnly || void 0,
             children: [
               /* @__PURE__ */ jsx(
                 CodeAreaHeader,
@@ -3303,6 +3335,14 @@ function DialogHeader({
     children && /* @__PURE__ */ jsx(DividerBottom, {})
   ] });
 }
+function computeScrollBorders(node, hasFooterAlert) {
+  const atBottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
+  const atTop = node.scrollTop === 0;
+  return {
+    showTop: !atTop,
+    showBottom: !atBottom || Boolean(hasFooterAlert)
+  };
+}
 const Content$5 = styled(DialogContent$1, {
   shouldForwardProp: (prop) => ![
     "scrollableContent",
@@ -3366,11 +3406,10 @@ function _DialogContent({
   );
   const updateBorders = useCallback(
     (node) => {
-      const bottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
-      const top = node.scrollTop === 0;
+      const { showTop, showBottom } = computeScrollBorders(node, hasFooterAlert);
       const borderStyle = `1px solid ${theme.palette.divider}`;
-      node.style.borderTop = top ? "none" : borderStyle;
-      node.style.borderBottom = bottom && !hasFooterAlert ? "none" : borderStyle;
+      node.style.borderTop = showTop ? borderStyle : "none";
+      node.style.borderBottom = showBottom ? borderStyle : "none";
     },
     [theme.palette.divider, hasFooterAlert]
   );
@@ -5915,6 +5954,7 @@ function Snackbar({
   autoWidth,
   icon,
   closeTooltipText,
+  disablePortal,
   ...rest
 }) {
   const closeTooltipLabel = useTranslationWithFallback(
@@ -5925,7 +5965,7 @@ function Snackbar({
   const disabledIcon = icon === false || isNeutral && !icon;
   const disabledAutoHide = autoHideDuration === null;
   const duration = disabledAutoHide ? null : autoHideDuration || NOTIFICATION_DURATION_IN_MS;
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Portal, { disablePortal, children: /* @__PURE__ */ jsx(
     SnackbarRoot,
     {
       ...rest,