@carto/meridian-ds 4.2.1-alpha.dd17e40.311 → 4.3.0

package/CHANGELOG.md

@@ -2,8 +2,13 @@
 
 ## Unreleased
 
+## 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)
@@ -11,8 +16,6 @@
 - 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): 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)
 - 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)
@@ -34,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-BLijipor.cjs → TablePaginationActions-BUlirVpH.cjs}

@@ -2,7 +2,7 @@
 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-v_ds_FH7.cjs");
@@ -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-DGKthtrC.js → TablePaginationActions-DZWE9NVG.js}

@@ -1,7 +1,7 @@
 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-DXeh_Eda.js";
@@ -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-BLijipor.cjs");
+const TablePaginationActions = require("../TablePaginationActions-BUlirVpH.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");
@@ -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() })
     }
   );
 }
@@ -332,7 +361,6 @@ function _PasswordField({
   disabled,
   showPasswordText,
   hidePasswordText,
-  slotProps,
   ...otherProps
 }, ref) {
   const showPasswordLabel = TablePaginationActions.useTranslationWithFallback(
@@ -346,14 +374,6 @@ function _PasswordField({
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const label = showPassword ? hidePasswordLabel : showPasswordLabel;
-  const inputSlotProps = typeof (slotProps == null ? void 0 : slotProps.input) === "function" ? void 0 : slotProps == null ? void 0 : slotProps.input;
-  const htmlInputSlotProps = typeof (slotProps == null ? void 0 : slotProps.htmlInput) === "function" ? void 0 : slotProps == null ? void 0 : slotProps.htmlInput;
-  const inputProps = {
-    ...InputProps == null ? void 0 : InputProps.inputProps,
-    ...htmlInputSlotProps,
-    ...inputSlotProps == null ? void 0 : inputSlotProps.inputProps,
-    role: "textbox"
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.TextField,
     {
@@ -362,26 +382,25 @@ function _PasswordField({
       type: showPassword ? "text" : "password",
       size,
       disabled,
-      "data-name": "password-field",
-      slotProps: {
-        ...slotProps,
-        input: {
-          ...InputProps,
-          ...inputSlotProps,
-          inputProps,
-          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"
     }
   );
 }
@@ -632,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"
@@ -643,6 +660,7 @@ const UnselectButton = material.styled(material.InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
+    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -1519,28 +1537,12 @@ const warnDeprecatedGroupBy = /* @__PURE__ */ (() => {
     }
   };
 })();
-function mergeSlotProps({
-  ownProps,
-  consumerProps
-}) {
-  if (typeof consumerProps === "function") {
-    const resolveConsumerProps = consumerProps;
-    return (ownerState) => ({
-      ...ownProps,
-      ...resolveConsumerProps(ownerState)
-    });
-  }
-  return { ...ownProps, ...consumerProps };
-}
 function _Autocomplete({
   disabled,
   loading,
-  ListboxComponent,
-  ListboxProps,
-  slotProps,
   ...props
 }, ref) {
-  if (props.groupBy && ListboxComponent === AutocompleteList) {
+  if (props.groupBy && props.ListboxComponent === AutocompleteList) {
     warnDeprecatedGroupBy("Autocomplete");
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1551,18 +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: {
-        ...slotProps,
-        listbox: mergeSlotProps({
-          ownProps: {
-            "aria-multiselectable": false,
-            // v7 ignores the deprecated ListboxComponent prop entirely, so the
-            // listbox slot is the only wiring that still virtualizes.
-            ...ListboxComponent && { component: ListboxComponent },
-            ...ListboxProps
-          },
-          consumerProps: slotProps == null ? void 0 : slotProps.listbox
-        })
+      ListboxProps: {
+        "aria-multiselectable": false,
+        ...props.ListboxProps
       }
     }
   );
@@ -1845,7 +1838,6 @@ function _CreatableAutocomplete({
   maxListHeight,
   extended,
   groupBy,
-  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1913,20 +1905,12 @@ function _CreatableAutocomplete({
       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: {
-        ...slotProps,
-        listbox: mergeSlotProps({
-          ownProps: {
-            component: AutocompleteList,
-            ...listboxProps
-          },
-          consumerProps: slotProps == null ? void 0 : slotProps.listbox
-        })
-      }
+      "data-name": "creatable-autocomplete"
     }
   );
 }
@@ -1952,7 +1936,6 @@ function _MultipleAutocomplete({
   maxListHeight,
   extended,
   groupBy,
-  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1999,22 +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: {
-        ...slotProps,
-        listbox: mergeSlotProps({
-          ownProps: {
-            component: AutocompleteList,
-            ...listboxProps
-          },
-          consumerProps: slotProps == null ? void 0 : slotProps.listbox
-        })
-      }
+      "data-name": "multiple-autocomplete"
     }
   );
 }
@@ -3347,15 +3322,6 @@ const DialogPaper = material.styled(material.Paper, {
     }
   })
 );
-function splitSurfaceAttributes({ props }) {
-  const surfaceAttributes = {};
-  const rootProps = {};
-  for (const [key, value] of Object.entries(props)) {
-    const target = key.startsWith("data-") ? surfaceAttributes : rootProps;
-    target[key] = value;
-  }
-  return { surfaceAttributes, rootProps };
-}
 function _Dialog({
   nonModal,
   children,
@@ -3367,7 +3333,6 @@ function _Dialog({
   hasForm,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
-  slotProps,
   ...props
 }, ref) {
   if (nonModal) {
@@ -3388,47 +3353,27 @@ function _Dialog({
       }
     );
   }
-  const { surfaceAttributes, rootProps } = splitSurfaceAttributes({ props });
-  const consumerPaperProps = typeof (slotProps == null ? void 0 : slotProps.paper) === "function" ? void 0 : slotProps == null ? void 0 : slotProps.paper;
-  const hasOwnLabelledby = Boolean(
-    props["aria-labelledby"] ?? (PaperProps == null ? void 0 : PaperProps["aria-labelledby"]) ?? (consumerPaperProps == null ? void 0 : consumerPaperProps["aria-labelledby"])
-  );
-  const suppressGeneratedLabelledby = Boolean(ariaLabel) && !hasOwnLabelledby;
-  const paperProps = {
-    "data-name": "dialog",
-    "data-size": size,
-    ...width && { "data-width": width },
-    ...height && { "data-height": height },
-    ...PaperProps,
-    size,
-    fullScreen,
-    height,
-    width,
-    hasForm,
-    ...dataTestId && { "data-testid": dataTestId },
-    ...ariaLabel && { "aria-label": ariaLabel },
-    // Typed as string|undefined so it stays compatible with a consumer's own
-    // aria-labelledby rather than narrowing the merged slot props to undefined.
-    ...suppressGeneratedLabelledby && {
-      "aria-labelledby": void 0
-    },
-    // Consumer-supplied data-* wins over the defaults above, as it did when
-    // they all spread onto the root.
-    ...surfaceAttributes
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Dialog,
     {
       PaperComponent: DialogPaper,
-      slotProps: {
-        ...slotProps,
-        paper: mergeSlotProps({
-          ownProps: paperProps,
-          consumerProps: slotProps == null ? void 0 : slotProps.paper
-        })
+      PaperProps: {
+        ...PaperProps,
+        size,
+        fullScreen,
+        height,
+        width,
+        hasForm
       },
       fullScreen,
-      ...rootProps,
+      role: "section",
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      "data-size": size,
+      "data-width": width,
+      "data-height": height,
+      "data-name": "dialog",
+      ...props,
       ref,
       children
     }
@@ -6216,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,
@@ -6363,6 +6311,7 @@ function _SearchField({
   loading = false,
   variant = "filled",
   size = "small",
+  dense = false,
   InputProps,
   inputProps,
   startAdornment,
@@ -6410,6 +6359,7 @@ function _SearchField({
       isInputFocused,
       disabled,
       minimized,
+      dense,
       InputProps: {
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -6443,6 +6393,7 @@ function _SearchField({
       },
       role: "search",
       "data-variant": variant,
+      "data-dense": dense || void 0,
       "data-name": "search-field",
       ref,
       ...otherProps
@@ -6573,7 +6524,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      slots: { transition: autoWidth ? material.Fade : material.Slide, ...rest.slots },
+      TransitionComponent: autoWidth ? material.Fade : material.Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         Content$1,