@carto/meridian-ds 2.6.1-alpha-searchfield.5 → 2.6.1-alpha-searchfield.7

package/CHANGELOG.md

@@ -3,12 +3,17 @@
 ## Unreleased
 
 - New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
+- Avatar: move size styles to the theme [#321](https://github.com/CartoDB/meridian-ds/pull/321)
+- Alert: move neutral styles to the theme [#320](https://github.com/CartoDB/meridian-ds/pull/320)
+- Handle empty buttonFooterLabelId in CodeAreaFooter [#323](https://github.com/CartoDB/meridian-ds/pull/323)
 - Dialog: add a property to override content gap [#322](https://github.com/CartoDB/meridian-ds/pull/322)
 - Improve translations handling in Meridian (part 4) [#309](https://github.com/CartoDB/meridian-ds/pull/309)
+- Improve translations handling in Meridian (part 3) [#306](https://github.com/CartoDB/meridian-ds/pull/306)
 - Improve translations handling in Meridian (part 2) [#305](https://github.com/CartoDB/meridian-ds/pull/305)
 - Improve translations handling in Meridian (part 1) [#304](https://github.com/CartoDB/meridian-ds/pull/304)
 - FilterDropdown: improve customization [#312](https://github.com/CartoDB/meridian-ds/pull/312)
 - CopiableComponent: improve customization [#311](https://github.com/CartoDB/meridian-ds/pull/311)
+- AppBar: disallow user selection of text [#324](https://github.com/CartoDB/meridian-ds/pull/324)
 
 ## 2.0
 

package/dist/{Alert-1-pacqlp.js → Alert-BfDnWlbD.js}

@@ -104,7 +104,6 @@ function _Link({
 const Link = forwardRef(_Link);
 const StyledAlert = styled(Alert$1, {
   shouldForwardProp: (prop) => ![
-    "isNeutral",
     "content",
     "hasCloseButton",
     "hasAction",
@@ -112,15 +111,7 @@ const StyledAlert = styled(Alert$1, {
     "isSticky"
   ].includes(prop)
 })(
-  ({
-    isNeutral,
-    content,
-    hasCloseButton,
-    hasAction,
-    hasTitle,
-    isSticky,
-    theme
-  }) => ({
+  ({ content, hasCloseButton, hasAction, hasTitle, isSticky, theme }) => ({
     columnGap: theme.spacing(1),
     minHeight: theme.spacing(6),
     ...hasAction && {
@@ -131,10 +122,6 @@ const StyledAlert = styled(Alert$1, {
     `,
       gridTemplateColumns: hasCloseButton ? `${ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${ICON_SIZE_MEDIUM}`
     },
-    ...isNeutral && {
-      backgroundColor: theme.palette.default.background,
-      color: theme.palette.text.primary
-    },
     ...isSticky && {
       borderRadius: 0
     },
@@ -150,14 +137,6 @@ const StyledAlert = styled(Alert$1, {
       },
       ...hasAction && {
         gridArea: "message"
-      },
-      ...isNeutral && {
-        "& :not(.MuiAlertTitle-root)": {
-          color: theme.palette.text.secondary
-        },
-        a: {
-          color: `${theme.palette.primary.main} !important`
-        }
       }
     },
     ".MuiAlert-icon": {
@@ -165,9 +144,6 @@ const StyledAlert = styled(Alert$1, {
       marginRight: 0,
       ...hasAction && {
         gridArea: "icon"
-      },
-      ...isNeutral && {
-        color: theme.palette.text.primary
       }
     },
     ".MuiAlert-action": {
@@ -201,14 +177,12 @@ function _Alert({
     onClose(ev);
     setOpen(false);
   } : void 0;
-  const isNeutral = severity === "neutral";
   const isOpen = controlledOpen ?? open;
   return /* @__PURE__ */ jsx(Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxs(
     StyledAlert,
     {
       ref,
-      severity: isNeutral ? "info" : severity,
-      isNeutral,
+      severity,
       content,
       action,
       onClose: handleClose,

package/dist/{Alert-N-6EugaP.cjs → Alert-CPvYAHO_.cjs}

@@ -105,7 +105,6 @@ function _Link({
 const Link = React.forwardRef(_Link);
 const StyledAlert = material.styled(material.Alert, {
   shouldForwardProp: (prop) => ![
-    "isNeutral",
     "content",
     "hasCloseButton",
     "hasAction",
@@ -113,15 +112,7 @@ const StyledAlert = material.styled(material.Alert, {
     "isSticky"
   ].includes(prop)
 })(
-  ({
-    isNeutral,
-    content,
-    hasCloseButton,
-    hasAction,
-    hasTitle,
-    isSticky,
-    theme
-  }) => ({
+  ({ content, hasCloseButton, hasAction, hasTitle, isSticky, theme }) => ({
     columnGap: theme.spacing(1),
     minHeight: theme.spacing(6),
     ...hasAction && {
@@ -132,10 +123,6 @@ const StyledAlert = material.styled(material.Alert, {
     `,
       gridTemplateColumns: hasCloseButton ? `${cssUtils.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${cssUtils.ICON_SIZE_MEDIUM}`
     },
-    ...isNeutral && {
-      backgroundColor: theme.palette.default.background,
-      color: theme.palette.text.primary
-    },
     ...isSticky && {
       borderRadius: 0
     },
@@ -151,14 +138,6 @@ const StyledAlert = material.styled(material.Alert, {
       },
       ...hasAction && {
         gridArea: "message"
-      },
-      ...isNeutral && {
-        "& :not(.MuiAlertTitle-root)": {
-          color: theme.palette.text.secondary
-        },
-        a: {
-          color: `${theme.palette.primary.main} !important`
-        }
       }
     },
     ".MuiAlert-icon": {
@@ -166,9 +145,6 @@ const StyledAlert = material.styled(material.Alert, {
       marginRight: 0,
       ...hasAction && {
         gridArea: "icon"
-      },
-      ...isNeutral && {
-        color: theme.palette.text.primary
       }
     },
     ".MuiAlert-action": {
@@ -202,14 +178,12 @@ function _Alert({
     onClose(ev);
     setOpen(false);
   } : void 0;
-  const isNeutral = severity === "neutral";
   const isOpen = controlledOpen ?? open;
   return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
     StyledAlert,
     {
       ref,
-      severity: isNeutral ? "info" : severity,
-      isNeutral,
+      severity,
       content,
       action,
       onClose: handleClose,

package/dist/{MenuItem-GpTpLidu.js → MenuItem-D90EfuGS.js}

@@ -108,10 +108,13 @@ const StyledMenuItem = styled(MenuItem$1, {
         zIndex: 2,
         minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
-        padding: theme.spacing(0.5, 1.5),
+        padding: theme.spacing(0.5, 0),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
         minHeight: MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
@@ -128,6 +131,9 @@ const StyledMenuItem = styled(MenuItem$1, {
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
         minHeight: MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -141,6 +147,7 @@ function _MenuItem({
   fixed,
   iconColor = "primary",
   dense,
+  disableGutters,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -156,11 +163,13 @@ function _MenuItem({
       dense,
       fixed,
       iconColor,
+      disableGutters,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
       "data-fixed": fixed,
-      "data-icon-color": iconColor
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
     }
   );
 }

package/dist/{MenuItem-BPvH70wa.cjs → MenuItem-ZSYcQBtg.cjs}

@@ -109,10 +109,13 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         zIndex: 2,
         minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
-        padding: theme.spacing(0.5, 1.5),
+        padding: theme.spacing(0.5, 0),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
         minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
@@ -129,6 +132,9 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
         minHeight: cssUtils.MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
         padding: theme.spacing(0.25, 1.5)
       }
     }
@@ -142,6 +148,7 @@ function _MenuItem({
   fixed,
   iconColor = "primary",
   dense,
+  disableGutters,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -157,11 +164,13 @@ function _MenuItem({
       dense,
       fixed,
       iconColor,
+      disableGutters,
       "data-destructive": destructive,
       "data-extended": extended,
       "data-dense": dense,
       "data-fixed": fixed,
-      "data-icon-color": iconColor
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
     }
   );
 }

package/dist/components/index.cjs

@@ -5,10 +5,10 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 const cssUtils = require("../css-utils-DjvM17Vb.cjs");
-const Alert$1 = require("../Alert-N-6EugaP.cjs");
+const Alert$1 = require("../Alert-CPvYAHO_.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-BPvH70wa.cjs");
+const MenuItem = require("../MenuItem-ZSYcQBtg.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -36,8 +36,8 @@ require("codemirror/addon/fold/indent-fold.js");
 require("codemirror/addon/fold/markdown-fold.js");
 require("codemirror/addon/fold/comment-fold.js");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
-const reactIntl = require("react-intl");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
+const reactIntl = require("react-intl");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
@@ -1904,6 +1904,7 @@ function SecondaryText({ text }) {
 }
 const Root$4 = material.styled(material.AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
+  userSelect: "none",
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
   },
@@ -1980,7 +1981,7 @@ function CodeAreaFooter({
   ...props
 }) {
   const buttonFooterLabel = cssUtils.useTranslationWithFallback(
-    buttonFooterLabelId ?? "c4r.button.save",
+    buttonFooterLabelId || "c4r.button.save",
     buttonFooterText
   );
   const changesSavedLabel = cssUtils.useTranslationWithFallback(
@@ -3955,10 +3956,13 @@ function DatePicker({
   readOnly,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  chooseDateAriaLabel,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const chooseDateText = cssUtils.useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    chooseDateAriaLabel
+  );
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4003,16 +4007,7 @@ function DatePicker({
             },
             slots: {
               clearButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...props2, size, variant }),
-              openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
-                material.IconButton,
-                {
-                  ...props2,
-                  size,
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.chooseDate"
-                  })
-                }
-              ),
+              openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { ...props2, size, "aria-label": chooseDateText }),
               ...slots
             },
             disableOpenPicker: !showCalendar,
@@ -4241,12 +4236,14 @@ function DateRangePicker({
   variant = "outlined",
   startProps,
   endProps,
+  startDateLabel,
+  endDateLabel,
+  startDateCalendarAriaLabel,
+  endDateCalendarAriaLabel,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
   const [isEndDateOpen, setIsEndDateOpen] = React.useState(false);
   const [isStartDateOpen, setIsStartDateOpen] = React.useState(false);
   const [startDate, setStartDate] = React.useState(
@@ -4257,6 +4254,22 @@ function DateRangePicker({
     (endProps == null ? void 0 : endProps.value) ?? (startProps == null ? void 0 : startProps.value) ?? /* @__PURE__ */ new Date()
   );
   const hasError = error ?? (startProps == null ? void 0 : startProps.error) ?? (endProps == null ? void 0 : endProps.error);
+  const _startDateLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.startDate",
+    startDateLabel
+  );
+  const _endDateLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.endDate",
+    endDateLabel
+  );
+  const startCalendarAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.startDateCalendar",
+    startDateCalendarAriaLabel
+  );
+  const endCalendarAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.endDateCalendar",
+    endDateCalendarAriaLabel
+  );
   const handleStartDateChange = (value, context) => {
     setStartDate(value);
     if (startProps == null ? void 0 : startProps.onChange) {
@@ -4310,13 +4323,11 @@ function DateRangePicker({
               ...startProps,
               value: (startProps == null ? void 0 : startProps.value) ?? startDate,
               maxDate: endDate ?? void 0,
-              label: (startProps == null ? void 0 : startProps.label) ?? intlConfig.formatMessage({ id: "c4r.form.startDate" }),
+              label: (startProps == null ? void 0 : startProps.label) ?? _startDateLabel,
               slotProps: {
                 popper: {
                   placement: "bottom-start",
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.startDateCalendar"
-                  })
+                  "aria-label": startCalendarAriaLabel
                 },
                 ...startProps == null ? void 0 : startProps.slotProps
               },
@@ -4351,9 +4362,7 @@ function DateRangePicker({
               minDate: startDate ?? void 0,
               slotProps: {
                 popper: {
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.endDateCalendar"
-                  })
+                  "aria-label": endCalendarAriaLabel
                 },
                 ...endProps == null ? void 0 : endProps.slotProps
               },
@@ -4369,7 +4378,7 @@ function DateRangePicker({
                 ),
                 ...endProps == null ? void 0 : endProps.slots
               },
-              label: (endProps == null ? void 0 : endProps.label) ?? intlConfig.formatMessage({ id: "c4r.form.endDate" }),
+              label: (endProps == null ? void 0 : endProps.label) ?? _endDateLabel,
               error: (endProps == null ? void 0 : endProps.error) ?? error,
               open: isEndDateOpen,
               onOpen: handleEndDateOpen,
@@ -4429,12 +4438,16 @@ function TimePicker({
   ampm = true,
   views = ["hours", "minutes"],
   format,
+  openPickerAriaLabel,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const fieldLabel = cssUtils.useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    openPickerAriaLabel
+  );
   const inputRef = React.useRef(null);
   const [inputWidth, setInputWidth] = React.useState(0);
   React.useEffect(() => {
@@ -4468,7 +4481,7 @@ function TimePicker({
           label: /* @__PURE__ */ jsxRuntime.jsx(
             LabelWithIndicator,
             {
-              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              label: fieldLabel,
               type,
               icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
             }
@@ -4508,9 +4521,7 @@ function TimePicker({
               {
                 ...props2,
                 size,
-                "aria-label": intlConfig.formatMessage({
-                  id: "c4r.form.chooseDate"
-                })
+                "aria-label": chooseDateAriaLabel
               }
             ),
             ...slots
@@ -4540,12 +4551,16 @@ function DateTimePicker({
   ampm = true,
   views = ["hours", "minutes"],
   format,
+  openPickerAriaLabel,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const fieldLabel = cssUtils.useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    openPickerAriaLabel
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateFieldContainer,
     {
@@ -4562,7 +4577,7 @@ function DateTimePicker({
           label: /* @__PURE__ */ jsxRuntime.jsx(
             LabelWithIndicator,
             {
-              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              label: fieldLabel,
               type,
               icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
             }
@@ -4594,9 +4609,7 @@ function DateTimePicker({
               {
                 ...props2,
                 size,
-                "aria-label": intlConfig.formatMessage({
-                  id: "c4r.form.chooseDate"
-                })
+                "aria-label": chooseDateAriaLabel
               }
             ),
             ...slots
@@ -4709,37 +4722,6 @@ function _AccordionGroup({
   );
 }
 const AccordionGroup = React.forwardRef(_AccordionGroup);
-const sizes = {
-  large: 5,
-  medium: 4,
-  small: 3,
-  xsmall: 2.25
-};
-const StyledAvatar = material.styled(material.Avatar, {
-  shouldForwardProp: (prop) => prop !== "size" && prop !== "disabled"
-})(({ theme, size = "medium", disabled = false }) => ({
-  width: theme.spacing(sizes[size]),
-  height: theme.spacing(sizes[size]),
-  ...theme.typography.subtitle1,
-  ...size === "large" && {
-    ...theme.typography.h6
-  },
-  ...size === "small" && {
-    ...theme.typography.caption,
-    fontWeight: 500
-  },
-  ...size === "xsmall" && {
-    ...theme.typography.caption,
-    fontWeight: 500,
-    svg: {
-      width: cssUtils.ICON_SIZE_SMALL,
-      height: cssUtils.ICON_SIZE_SMALL
-    }
-  },
-  ...disabled && {
-    opacity: 0.6
-  }
-}));
 function _Avatar({
   size,
   disabled,
@@ -4748,7 +4730,7 @@ function _Avatar({
   ...otherProps
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledAvatar,
+    material.Avatar,
     {
       ...otherProps,
       ref,
@@ -5216,7 +5198,7 @@ const SearchFieldEndAdornment = ({
                 color: "default",
                 disabled,
                 tooltip: clearButtonLabel,
-                "aria-label": String(clearButtonLabel),
+                "aria-label": clearButtonLabel,
                 icon: /* @__PURE__ */ jsxRuntime.jsx(ClearSearchIcon, {})
               }
             ) : null,