@carto/meridian-ds 4.3.0 → 4.3.1-alpha.39d32aa.313

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## 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

package/dist/{TablePaginationActions-BUlirVpH.cjs → TablePaginationActions-BLijipor.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-DX1R_i9N.cjs");
+const paletteUtils = require("./palette-utils-Dt4yj7Pv.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const reactIntl = require("react-intl");
 const useImperativeIntl = require("./useImperativeIntl-v_ds_FH7.cjs");
@@ -249,10 +249,12 @@ function _IconButton({
               variant,
               color,
               active,
-              disabled: disabled || loading,
+              loading,
+              loadingIndicator: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }),
+              disabled,
               role: "button",
               "aria-label": ariaLabel,
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
+              children: loading ? null : icon
             }
           )
         }

package/dist/{TablePaginationActions-DZWE9NVG.js → TablePaginationActions-DGKthtrC.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-d-9NY8qw.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-Ccd-r_Nr.js";
 import { KeyboardArrowLeftOutlined, KeyboardArrowRightOutlined } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import { u as useImperativeIntl } from "./useImperativeIntl-DXeh_Eda.js";
@@ -248,10 +248,12 @@ function _IconButton({
               variant,
               color,
               active,
-              disabled: disabled || loading,
+              loading,
+              loadingIndicator: /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }),
+              disabled,
               role: "button",
               "aria-label": ariaLabel,
-              children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
+              children: loading ? null : 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-DX1R_i9N.cjs");
+const paletteUtils = require("../palette-utils-Dt4yj7Pv.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const TablePaginationActions = require("../TablePaginationActions-BUlirVpH.cjs");
+const TablePaginationActions = require("../TablePaginationActions-BLijipor.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");
@@ -72,20 +72,7 @@ const ScreenReaderOnly = material.styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-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"
-});
+const loadingIndicator = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
 function _Button({
   children,
   loading,
@@ -103,46 +90,17 @@ 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 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);
-    }
-  };
+  const isCenterLoading = loading && loadingPosition === void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
     {
-      disabled: loading || disabled,
-      startIcon: getIconForPosition("start"),
-      endIcon: getIconForPosition("end"),
+      loading,
+      loadingPosition,
+      loadingIndicator,
+      disabled,
+      startIcon: loading ? void 0 : startIcon,
+      endIcon: loading ? void 0 : endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
       ...isExternalLink && {
@@ -151,7 +109,20 @@ function _Button({
       },
       ref,
       "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
-      children: /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
+      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 })
+          ]
+        }
+      )
     }
   );
 }
@@ -361,6 +332,7 @@ function _PasswordField({
   disabled,
   showPasswordText,
   hidePasswordText,
+  slotProps,
   ...otherProps
 }, ref) {
   const showPasswordLabel = TablePaginationActions.useTranslationWithFallback(
@@ -374,6 +346,36 @@ function _PasswordField({
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const label = showPassword ? hidePasswordLabel : showPasswordLabel;
+  const htmlInputSlotProps = typeof (slotProps == null ? void 0 : slotProps.htmlInput) === "function" ? void 0 : slotProps == null ? void 0 : slotProps.htmlInput;
+  const buildInputSlotProps = (consumerProps) => ({
+    ...InputProps,
+    ...consumerProps,
+    inputProps: {
+      ...InputProps == null ? void 0 : InputProps.inputProps,
+      ...htmlInputSlotProps,
+      ...consumerProps == null ? void 0 : consumerProps.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
+      }
+    ) })
+  });
+  const consumerInputSlotProps = slotProps == null ? void 0 : slotProps.input;
+  const inputSlotProps = typeof consumerInputSlotProps === "function" ? (ownerState) => buildInputSlotProps(
+    consumerInputSlotProps(
+      ownerState
+    )
+  ) : buildInputSlotProps(
+    consumerInputSlotProps
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.TextField,
     {
@@ -382,25 +384,11 @@ function _PasswordField({
       type: showPassword ? "text" : "password",
       size,
       disabled,
-      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"
+      "data-name": "password-field",
+      slotProps: {
+        ...slotProps,
+        input: inputSlotProps
+      }
     }
   );
 }
@@ -651,7 +639,9 @@ const UnselectButton = material.styled(material.InputAdornment, {
 })(({ theme, size }) => ({
   display: "none",
   position: "absolute",
-  top: theme.spacing(2),
+  // Center vertically regardless of the input's height.
+  top: "50%",
+  transform: "translateY(-50%)",
   right: theme.spacing(3.5),
   ".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &": {
     display: "flex"
@@ -660,7 +650,6 @@ const UnselectButton = material.styled(material.InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
-    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -1537,12 +1526,28 @@ 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 && props.ListboxComponent === AutocompleteList) {
+  if (props.groupBy && ListboxComponent === AutocompleteList) {
     warnDeprecatedGroupBy("Autocomplete");
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1553,9 +1558,18 @@ function _Autocomplete({
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
       "data-name": "autocomplete",
-      ListboxProps: {
-        "aria-multiselectable": false,
-        ...props.ListboxProps
+      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
+        })
       }
     }
   );
@@ -1838,6 +1852,7 @@ function _CreatableAutocomplete({
   maxListHeight,
   extended,
   groupBy,
+  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1905,12 +1920,20 @@ 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"
+      "data-name": "creatable-autocomplete",
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            component: AutocompleteList,
+            ...listboxProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
+      }
     }
   );
 }
@@ -1936,6 +1959,7 @@ function _MultipleAutocomplete({
   maxListHeight,
   extended,
   groupBy,
+  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1982,14 +2006,22 @@ 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"
+      "data-name": "multiple-autocomplete",
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            component: AutocompleteList,
+            ...listboxProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
+      }
     }
   );
 }
@@ -3322,6 +3354,15 @@ 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,
@@ -3333,6 +3374,7 @@ function _Dialog({
   hasForm,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  slotProps,
   ...props
 }, ref) {
   if (nonModal) {
@@ -3353,27 +3395,47 @@ 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,
-      PaperProps: {
-        ...PaperProps,
-        size,
-        fullScreen,
-        height,
-        width,
-        hasForm
+      slotProps: {
+        ...slotProps,
+        paper: mergeSlotProps({
+          ownProps: paperProps,
+          consumerProps: slotProps == null ? void 0 : slotProps.paper
+        })
       },
       fullScreen,
-      role: "section",
-      "aria-label": ariaLabel,
-      "data-testid": dataTestId,
-      "data-size": size,
-      "data-width": width,
-      "data-height": height,
-      "data-name": "dialog",
-      ...props,
+      ...rootProps,
       ref,
       children
     }
@@ -6524,7 +6586,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      TransitionComponent: autoWidth ? material.Fade : material.Slide,
+      slots: { transition: autoWidth ? material.Fade : material.Slide, ...rest.slots },
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         Content$1,