@carto/meridian-ds 2.15.2-alpha.c8f0dfb.212 → 2.16.0

package/CHANGELOG.md

@@ -2,14 +2,17 @@
 
 ## Unreleased
 
+## 2.0
+
+### 2.16.0
+
+- 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)
-
-## 2.0
+- 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.15.1
 

package/dist/components/index.cjs

@@ -144,17 +144,6 @@ 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,
@@ -171,17 +160,9 @@ function SplitButton({
   size,
   color,
   defaultOpen,
-  toggleAriaLabel,
   ...otherProps
 }) {
   var _a;
-  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);
@@ -224,19 +205,7 @@ function SplitButton({
               children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
             }
           ),
-          /* @__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, {})
-            }
-          ) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ForwardedComponent, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}) })
         ]
       }
     ),
@@ -244,7 +213,7 @@ function SplitButton({
       material.Popper,
       {
         sx: { zIndex: 1 },
-        open: open && Boolean(anchorEl),
+        open,
         anchorEl,
         role: void 0,
         transition: true,
@@ -257,25 +226,16 @@ 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,
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 8, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(material.MenuList, { autoFocusItem: menuAutoFocus, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              material.MenuItem,
               {
-                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
-                ))
-              }
-            ) }) })
+                disabled: option.disabled,
+                selected: index === selectedIndex,
+                onClick: (event) => handleMenuItemClick(event, index),
+                children: option.label
+              },
+              option.label
+            )) }) }) })
           }
         )
       }
@@ -393,6 +353,17 @@ 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),

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, 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 { 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, 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,17 +128,6 @@ 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,
@@ -155,17 +144,9 @@ function SplitButton({
   size,
   color,
   defaultOpen,
-  toggleAriaLabel,
   ...otherProps
 }) {
   var _a;
-  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);
@@ -208,19 +189,7 @@ function SplitButton({
               children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
             }
           ),
-          /* @__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, {})
-            }
-          ) }) })
+          /* @__PURE__ */ jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsx(ForwardedComponent, {}) : /* @__PURE__ */ jsx(ForwardedComponent$1, {}) })
         ]
       }
     ),
@@ -228,7 +197,7 @@ function SplitButton({
       Popper,
       {
         sx: { zIndex: 1 },
-        open: open && Boolean(anchorEl),
+        open,
         anchorEl,
         role: void 0,
         transition: true,
@@ -241,25 +210,16 @@ 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,
+            children: /* @__PURE__ */ jsx(Paper, { elevation: 8, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx(MenuList$1, { autoFocusItem: menuAutoFocus, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsx(
+              MenuItem,
               {
-                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
-                ))
-              }
-            ) }) })
+                disabled: option.disabled,
+                selected: index === selectedIndex,
+                onClick: (event) => handleMenuItemClick(event, index),
+                children: option.label
+              },
+              option.label
+            )) }) }) })
           }
         )
       }
@@ -377,6 +337,17 @@ 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),