@carto/meridian-ds 4.2.1-alpha.f6cae08.304 → 4.3.0

package/CHANGELOG.md

@@ -2,8 +2,20 @@
 
 ## Unreleased
 
-- chore(deps): MUI v5 → v9 upgrade (integration branch) [sc-557186] [#485](https://github.com/CartoDB/meridian-ds/pull/485)
-- chore(deps): upgrade MUI core to v6 + prep peers/react-is [sc-563129] [#484](https://github.com/CartoDB/meridian-ds/pull/484)
+## 4.0
+
+### 4.3.0
+
+- chore(deps): bump js-yaml from 4.3.0 to 4.3.1 [#516](https://github.com/CartoDB/meridian-ds/pull/516)
+- chore(deps): bump nanoid from 3.3.16 to 3.3.18 [#515](https://github.com/CartoDB/meridian-ds/pull/515)
+- feat(SearchField): dense prop for compact 32px control height [#517](https://github.com/CartoDB/meridian-ds/pull/517)
+- chore(deps-dev): bump dompurify from 3.4.12 to 3.4.13 [#512](https://github.com/CartoDB/meridian-ds/pull/512)
+- test(visual): stop DateRangeCalendar snapshot date drift, document story determinism + review triage [sc-565483] [sc-565508] [#509](https://github.com/CartoDB/meridian-ds/pull/509)
+- fix(ci): re-sync the auto-logged CHANGELOG line when a PR title changes [sc-565536] [#510](https://github.com/CartoDB/meridian-ds/pull/510)
+- chore(deps): bump brace-expansion from 1.1.16 to 1.1.18 [#503](https://github.com/CartoDB/meridian-ds/pull/503)
+- chore(deps): bump fast-uri from 3.1.4 to 3.1.5 [#508](https://github.com/CartoDB/meridian-ds/pull/508)
+- chore(deps): bump undici from 7.28.0 to 7.29.0 [#507](https://github.com/CartoDB/meridian-ds/pull/507)
+- fix(CreatableAutocomplete): show a no-options row instead of an empty popup [#504](https://github.com/CartoDB/meridian-ds/pull/504)
 - chore(deps): bump yaml from 1.10.2 to 1.10.3 [#501](https://github.com/CartoDB/meridian-ds/pull/501)
 - chore(deps): bump postcss from 8.5.16 to 8.5.23 [#498](https://github.com/CartoDB/meridian-ds/pull/498)
 - chore(deps): bump picomatch from 2.3.1 to 2.3.2 [#500](https://github.com/CartoDB/meridian-ds/pull/500)
@@ -25,8 +37,6 @@
 - chore(deps): bump undici from 7.25.0 to 7.28.0 [#456](https://github.com/CartoDB/meridian-ds/pull/456)
 - chore(deps-dev): bump dompurify from 3.2.6 to 3.4.11 [#455](https://github.com/CartoDB/meridian-ds/pull/455)
 
-## 4.0
-
 ### 4.2.0
 
 - feat(ai-metadata): serve custom-icon and theme-token knowledge to AI agents — new `meridian_list_icons`, `meridian_get_tokens`, and `meridian_get_screenshot` MCP tools (icons searchable by curated keywords + a labeled all-icons reference image an agent can Read to match a design by sight; tokens projected straight from the composed theme: palette / typography / spacing / shape / breakpoints / shadows), plus surfaced List `direction`/`spacing` props [#463](https://github.com/CartoDB/meridian-ds/pull/463) [sc-559510] [sc-559550] [sc-561408]

package/dist/{TablePaginationActions-B3Vtruj_.cjs → TablePaginationActions-BUlirVpH.cjs}

@@ -2,10 +2,10 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("./palette-utils-Dt4yj7Pv.cjs");
+const paletteUtils = require("./palette-utils-DX1R_i9N.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const reactIntl = require("react-intl");
-const useImperativeIntl = require("./useImperativeIntl-lvkv1UNL.cjs");
+const useImperativeIntl = require("./useImperativeIntl-v_ds_FH7.cjs");
 function useTranslationWithFallback(translationKey, customText, intlValues) {
   const intl = reactIntl.useIntl();
   const intlConfig = useImperativeIntl.useImperativeIntl(intl);
@@ -249,12 +249,10 @@ function _IconButton({
               variant,
               color,
               active,
-              loading,
-              loadingIndicator: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }),
-              disabled,
+              disabled: disabled || loading,
               role: "button",
               "aria-label": ariaLabel,
-              children: loading ? null : icon
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
             }
           )
         }

package/dist/{TablePaginationActions-CpCi2L7U.js → TablePaginationActions-DZWE9NVG.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1, Tooltip, CircularProgress, IconButton as IconButton$1, Box } from "@mui/material";
-import { d as MENU_ITEM_SIZE_DENSE, M as MENU_ITEM_SIZE_EXTENDED, e as ICON_SIZE_LARGE, a as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL } from "./palette-utils-Ccd-r_Nr.js";
+import { d as MENU_ITEM_SIZE_DENSE, M as MENU_ITEM_SIZE_EXTENDED, e as ICON_SIZE_LARGE, a as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL } from "./palette-utils-d-9NY8qw.js";
 import { KeyboardArrowLeftOutlined, KeyboardArrowRightOutlined } from "@mui/icons-material";
 import { useIntl } from "react-intl";
-import { u as useImperativeIntl } from "./useImperativeIntl-BUw_LXAO.js";
+import { u as useImperativeIntl } from "./useImperativeIntl-DXeh_Eda.js";
 function useTranslationWithFallback(translationKey, customText, intlValues) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
@@ -248,12 +248,10 @@ function _IconButton({
               variant,
               color,
               active,
-              loading,
-              loadingIndicator: /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }),
-              disabled,
+              disabled: disabled || loading,
               role: "button",
               "aria-label": ariaLabel,
-              children: loading ? null : icon
+              children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
             }
           )
         }

package/dist/components/index.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("../palette-utils-Dt4yj7Pv.cjs");
+const paletteUtils = require("../palette-utils-DX1R_i9N.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const TablePaginationActions = require("../TablePaginationActions-B3Vtruj_.cjs");
+const TablePaginationActions = require("../TablePaginationActions-BUlirVpH.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");
@@ -38,7 +38,7 @@ require("codemirror/addon/fold/comment-fold.js");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const reactIntl = require("react-intl");
-const useImperativeIntl = require("../useImperativeIntl-lvkv1UNL.cjs");
+const useImperativeIntl = require("../useImperativeIntl-v_ds_FH7.cjs");
 const DateCalendar = require("@mui/x-date-pickers/DateCalendar");
 const xDatePickers = require("@mui/x-date-pickers");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
@@ -72,7 +72,20 @@ const ScreenReaderOnly = material.styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-const loadingIndicator = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
+const IndicatorIcon = material.styled(material.Box)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const HiddenText = material.styled(material.Box)({
+  visibility: "hidden",
+  pointerEvents: "none"
+});
 function _Button({
   children,
   loading,
@@ -90,17 +103,46 @@ function _Button({
     "c4r.button.opensInNewTab",
     screenReaderText
   );
+  const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
+  const isDefaultLoading = loading && loadingPosition === void 0;
   const isExternalLink = otherProps.href && external;
-  const isCenterLoading = loading && loadingPosition === void 0;
+  const renderContent = () => {
+    if (isDefaultLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { children: defaultIconLoader }),
+        /* @__PURE__ */ jsxRuntime.jsx(HiddenText, { children })
+      ] });
+    }
+    if (isExternalLink) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
+      ] });
+    }
+    return children;
+  };
+  const getIconForPosition = (position) => {
+    if (isDefaultLoading) {
+      return void 0;
+    }
+    if (loading && loadingPosition !== void 0) {
+      if (loadingPosition === position) {
+        return defaultIconLoader;
+      }
+      return void 0;
+    }
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
     {
-      loading,
-      loadingPosition,
-      loadingIndicator,
-      disabled,
-      startIcon: loading ? void 0 : startIcon,
-      endIcon: loading ? void 0 : endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0),
+      disabled: loading || disabled,
+      startIcon: getIconForPosition("start"),
+      endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
       ...isExternalLink && {
@@ -109,20 +151,7 @@ function _Button({
       },
       ref,
       "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        paletteUtils.Typography,
-        {
-          variant: "inherit",
-          color: "inherit",
-          noWrap: true,
-          component: "span",
-          sx: isCenterLoading ? { visibility: "hidden" } : void 0,
-          children: [
-            children,
-            isExternalLink && /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
 }
@@ -353,27 +382,25 @@ function _PasswordField({
       type: showPassword ? "text" : "password",
       size,
       disabled,
-      "data-name": "password-field",
-      slotProps: {
-        input: {
-          ...InputProps,
-          inputProps: {
-            ...InputProps == null ? void 0 : InputProps.inputProps,
-            role: "textbox"
-          },
-          endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-            TablePaginationActions.IconButton,
-            {
-              size,
-              disabled,
-              onClick: handleClickShowPassword,
-              icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}),
-              tooltip: label,
-              "aria-label": label
-            }
-          ) })
-        }
-      }
+      InputProps: {
+        ...InputProps,
+        inputProps: {
+          ...InputProps == null ? void 0 : InputProps.inputProps,
+          role: "textbox"
+        },
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          TablePaginationActions.IconButton,
+          {
+            size,
+            disabled,
+            onClick: handleClickShowPassword,
+            icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}),
+            tooltip: label,
+            "aria-label": label
+          }
+        ) })
+      },
+      "data-name": "password-field"
     }
   );
 }
@@ -624,9 +651,7 @@ const UnselectButton = material.styled(material.InputAdornment, {
 })(({ theme, size }) => ({
   display: "none",
   position: "absolute",
-  // Center vertically regardless of the input's height.
-  top: "50%",
-  transform: "translateY(-50%)",
+  top: theme.spacing(2),
   right: theme.spacing(3.5),
   ".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &": {
     display: "flex"
@@ -635,6 +660,7 @@ const UnselectButton = material.styled(material.InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
+    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -1527,11 +1553,9 @@ function _Autocomplete({
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
       "data-name": "autocomplete",
-      slotProps: {
-        listbox: {
-          "aria-multiselectable": false,
-          ...props.ListboxProps
-        }
+      ListboxProps: {
+        "aria-multiselectable": false,
+        ...props.ListboxProps
       }
     }
   );
@@ -1628,11 +1652,16 @@ function useAutocompleteRenderOption() {
   };
   return { renderOption };
 }
+const NO_OPTIONS_ROW_PROPERTY = "__creatableNoOptions";
+function isCreatableNoOptionsRow(option) {
+  return typeof option === "object" && option !== null && NO_OPTIONS_ROW_PROPERTY in option;
+}
 function useCreatableAutocomplete({
   getOptionLabel,
   newItemLabel,
   newItemIcon,
-  multiple
+  multiple,
+  noOptionsText
 }) {
   const filter = material.createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
@@ -1640,6 +1669,10 @@ function useCreatableAutocomplete({
     "c4r.form.add",
     typeof newItemLabel === "string" ? newItemLabel : void 0
   );
+  const noOptionsLabel = TablePaginationActions.useTranslationWithFallback(
+    "c4r.form.noOptions",
+    noOptionsText
+  );
   const creatableFilterOptions = (options, params) => {
     const filtered = filter(
       options,
@@ -1661,12 +1694,22 @@ function useCreatableAutocomplete({
         title: newItemText
       });
     }
+    if (filtered.length === 0) {
+      filtered.push({
+        [NO_OPTIONS_ROW_PROPERTY]: true,
+        subtitle: true,
+        title: noOptionsLabel
+      });
+    }
     return filtered;
   };
   const creatableOptionLabel = (option) => {
     if (typeof option === "string") {
       return option;
     }
+    if (isCreatableNoOptionsRow(option)) {
+      return "";
+    }
     if (option.inputValue) {
       return option.inputValue;
     }
@@ -1826,8 +1869,13 @@ function _CreatableAutocomplete({
     getOptionLabel,
     newItemLabel,
     newItemIcon,
-    multiple
+    multiple,
+    noOptionsText: props.noOptionsText
   });
+  const isOptionDisabled = (option) => {
+    var _a;
+    return isCreatableNoOptionsRow(option) || (((_a = props.getOptionDisabled) == null ? void 0 : _a.call(props, option)) ?? false);
+  };
   const listboxProps = {
     showFilters,
     allSelected,
@@ -1851,21 +1899,18 @@ function _CreatableAutocomplete({
       filterOptions: creatableFilterOptions,
       getOptionLabel: creatableOptionLabel,
       renderOption: creatableRenderOption,
+      getOptionDisabled: isOptionDisabled,
       renderTags: finalRenderTags,
       freeSolo,
       forcePopupIcon: true,
       multiple,
       disableCloseOnSelect: disableCloseOnSelect ?? multiple,
+      ListboxComponent: AutocompleteList,
+      ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
-      "data-name": "creatable-autocomplete",
-      slotProps: {
-        listbox: {
-          component: AutocompleteList,
-          ...listboxProps
-        }
-      }
+      "data-name": "creatable-autocomplete"
     }
   );
 }
@@ -1937,18 +1982,14 @@ function _MultipleAutocomplete({
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
       renderTags: finalRenderTags,
+      ListboxComponent: AutocompleteList,
+      ListboxProps: listboxProps,
       multiple: true,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
-      "data-name": "multiple-autocomplete",
-      slotProps: {
-        listbox: {
-          component: AutocompleteList,
-          ...listboxProps
-        }
-      }
+      "data-name": "multiple-autocomplete"
     }
   );
 }
@@ -3325,6 +3366,7 @@ function _Dialog({
         hasForm
       },
       fullScreen,
+      role: "section",
       "aria-label": ariaLabel,
       "data-testid": dataTestId,
       "data-size": size,
@@ -6119,9 +6161,12 @@ const SearchInputAdornment = material.styled(material.InputAdornment, {
   })
 );
 const SearchFieldBase = material.styled(material.TextField, {
-  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused" && prop !== "emphasis"
-})(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused" && prop !== "emphasis" && prop !== "dense"
+})(({ theme, emphasis = "filled", minimized, isInputFocused, dense }) => ({
   "&.MuiTextField-root .MuiInputBase-root": {
+    // The theme locks every input to a 48px control; dense surfaces
+    // (table headers, toolbars) opt into the compact 32px height.
+    ...dense && { height: theme.spacing(4) },
     paddingRight: theme.spacing(1),
     transition: theme.transitions.create(["width", "padding"], {
       easing: theme.transitions.easing.easeInOut,
@@ -6266,6 +6311,7 @@ function _SearchField({
   loading = false,
   variant = "filled",
   size = "small",
+  dense = false,
   InputProps,
   inputProps,
   startAdornment,
@@ -6313,6 +6359,7 @@ function _SearchField({
       isInputFocused,
       disabled,
       minimized,
+      dense,
       InputProps: {
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -6346,6 +6393,7 @@ function _SearchField({
       },
       role: "search",
       "data-variant": variant,
+      "data-dense": dense || void 0,
       "data-name": "search-field",
       ref,
       ...otherProps
@@ -6476,7 +6524,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      slots: { transition: autoWidth ? material.Fade : material.Slide },
+      TransitionComponent: autoWidth ? material.Fade : material.Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         Content$1,