@carto/meridian-ds 2.5.5 → 2.6.0

package/dist/components/index.js

@@ -1,15 +1,15 @@
 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 { useIntl } from "react-intl";
-import { styled, Box, Button as Button$1, CircularProgress, 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, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, 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 } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress, 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, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, 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 } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
-import { u as useImperativeIntl, T as Typography, c as ICON_SIZE_SMALL, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, N as NOTIFICATION_DURATION_IN_MS } from "../TablePaginationActions-C6TVGJM-.js";
-import { a } from "../TablePaginationActions-C6TVGJM-.js";
-import { S as ScreenReaderOnly, I as IconButton, A as Alert$1 } from "../Alert-lLA0z7fX.js";
-import { L } from "../Alert-lLA0z7fX.js";
+import { u as useTranslationFallback, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-DHd9hCGz.js";
+import { L } from "../Alert-DHd9hCGz.js";
+import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-WejOmkiI.js";
+import { a } from "../css-utils-WejOmkiI.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { M as MenuItem$1 } from "../MenuItem-ZNdBUBvt.js";
+import { useIntl } from "react-intl";
+import { M as MenuItem$1 } from "../MenuItem-MUmADf3e.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -65,11 +65,14 @@ function _Button({
   loadingPosition,
   external,
   showExternalIcon = true,
+  screenReaderText,
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const screenReaderTextValue = useTranslationFallback(
+    "c4r.button.opensInNewTab",
+    screenReaderText
+  );
   const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
   const isExternalLink = otherProps.href && external;
@@ -83,9 +86,7 @@ function _Button({
     if (isExternalLink) {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         children,
-        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})` })
+        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
       ] });
     }
     return children;
@@ -816,24 +817,36 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
     backgroundColor: "transparent"
   }
 }));
-function ToggleButtonGroup({
+function _ToggleButtonGroup({
   children,
   variant = "floating",
   backgroundColor,
+  orientation,
+  size,
   ...rest
-}) {
+}, ref) {
   const isUnbounded = variant === "unbounded";
   const defaultColor = isUnbounded ? "transparent" : "primary";
+  const resolvedBackgroundColor = backgroundColor ?? defaultColor;
   return /* @__PURE__ */ jsx(
     StyledToggleButtonGroup,
     {
       ...rest,
       variant,
-      backgroundColor: backgroundColor ?? defaultColor,
+      backgroundColor: resolvedBackgroundColor,
+      orientation,
+      size,
+      "data-orientation": orientation,
+      "data-variant": variant,
+      "data-size": size,
+      "data-background-color": resolvedBackgroundColor,
+      "data-name": "toggle-button-group",
+      ref,
       children
     }
   );
 }
+const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
 async function copyString(value) {
   return await navigator.clipboard.writeText(value);
 }
@@ -1856,14 +1869,14 @@ const BrandElements = styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$4 = styled("div")(({ theme }) => ({
+const Content$5 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   flex: 1,
   marginLeft: theme.spacing(1)
 }));
-function AppBar({
+function _AppBar({
   children,
   brandLogo,
   brandText,
@@ -1871,17 +1884,18 @@ function AppBar({
   showBurgerMenu = false,
   onClickMenu,
   ...otherProps
-}) {
-  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+}, ref) {
+  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
       brandText && /* @__PURE__ */ jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsx(Content$4, { children })
+    /* @__PURE__ */ jsx(Content$5, { children })
   ] }) });
 }
+const AppBar = forwardRef(_AppBar);
 const Footer = styled(Box, {
   shouldForwardProp: (prop) => !["withGutter", "disabled"].includes(prop)
 })(
@@ -3158,7 +3172,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsx(DividerBottom, {})
   ] });
 }
-const Content$3 = styled(DialogContent$1, {
+const Content$4 = styled(DialogContent$1, {
   shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
 })(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
   display: "flex",
@@ -3235,7 +3249,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsx(
-    Content$3,
+    Content$4,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -3534,7 +3548,7 @@ function DialogStepper({
     );
   }) }) });
 }
-const Content$2 = styled(DialogContent, {
+const Content$3 = styled(DialogContent, {
   shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
 })(
   ({ error, withBorder, theme }) => ({
@@ -3563,7 +3577,7 @@ function CodeAreaDialogContent({
   withGutter = false
 }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsx(Content$2, { withGutter, error, withBorder, children });
+  return /* @__PURE__ */ jsx(Content$3, { withGutter, error, withBorder, children });
 }
 function CodeAreaDialogConfirmation({
   onClose,
@@ -4503,7 +4517,7 @@ function DateTimePicker({
   );
 }
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$1 = styled("ul")(({ theme }) => ({
+const Content$2 = styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -4534,14 +4548,16 @@ function TooltipData({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsx(Content$1, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
+    /* @__PURE__ */ jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
       /* @__PURE__ */ jsx(
         Bullet,
         {
           style: {
             backgroundColor: `${item.outlinedBullet ? "transparent" : item.color}`,
             borderColor: item.color
-          }
+          },
+          role: "presentation",
+          "data-bullet": item.outlinedBullet ? "outlined" : "filled"
         }
       ),
       item.category && /* @__PURE__ */ jsx(Category, { color: "inherit", variant: "caption", children: item.category }),
@@ -4559,32 +4575,47 @@ const AccordionContainer = styled("div", {
     boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`
   }
 }));
-function AccordionGroup({
+function _AccordionGroup({
   variant = "standard",
   items,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
   ...otherProps
-}) {
-  return /* @__PURE__ */ jsx(AccordionContainer, { ...otherProps, variant, children: items.map((item, index) => /* @__PURE__ */ jsxs(
-    Accordion,
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionContainer,
     {
-      disabled: item.disabled,
-      defaultExpanded: item.defaultExpanded,
-      onChange: item.onChange,
-      children: [
-        /* @__PURE__ */ jsx(
-          AccordionSummary,
-          {
-            "aria-controls": `${index}-content`,
-            id: `${index}-header`,
-            children: item.summary
-          }
-        ),
-        /* @__PURE__ */ jsx(AccordionDetails, { children: item.content })
-      ]
-    },
-    index
-  )) });
+      ...otherProps,
+      variant,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      "data-variant": variant,
+      "data-name": "accordion-group",
+      ref,
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        Accordion,
+        {
+          disabled: item.disabled,
+          defaultExpanded: item.defaultExpanded,
+          onChange: item.onChange,
+          children: [
+            /* @__PURE__ */ jsx(
+              AccordionSummary,
+              {
+                "aria-controls": `${index}-content`,
+                id: `${index}-header`,
+                children: item.summary
+              }
+            ),
+            /* @__PURE__ */ jsx(AccordionDetails, { children: item.content })
+          ]
+        },
+        index
+      ))
+    }
+  );
 }
+const AccordionGroup = forwardRef(_AccordionGroup);
 const sizes = {
   large: 5,
   medium: 4,
@@ -4616,9 +4647,29 @@ const StyledAvatar = styled(Avatar$1, {
     opacity: 0.6
   }
 }));
-function Avatar(props) {
-  return /* @__PURE__ */ jsx(StyledAvatar, { ...props });
+function _Avatar({
+  size,
+  disabled,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
+  ...otherProps
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    StyledAvatar,
+    {
+      ...otherProps,
+      ref,
+      size,
+      "aria-disabled": disabled,
+      disabled,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      "data-size": size,
+      "data-name": "avatar"
+    }
+  );
 }
+const Avatar = forwardRef(_Avatar);
 const StyledMenu = styled(Menu$2, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ extended, width, height }) => ({
@@ -4908,7 +4959,7 @@ const SnackbarRoot = styled(Snackbar$1)(({ theme }) => ({
     maxWidth: `${MAX_WIDTH}px`
   }
 }));
-const Content = styled(Box, {
+const Content$1 = styled(Box, {
   shouldForwardProp: (prop) => prop !== "autoWidth"
 })(({ autoWidth, theme }) => ({
   minWidth: "100%",
@@ -5017,7 +5068,7 @@ function Snackbar({
       TransitionComponent: autoWidth ? Fade : Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxs(
-        Content,
+        Content$1,
         {
           sx: {
             position: "relative"
@@ -5166,6 +5217,7 @@ const TagRoot = styled("div", {
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.25),
     gap: theme.spacing(0.5),
+    maxWidth: "100%",
     height: theme.spacing(2),
     borderWidth: "1px",
     borderStyle: "solid",
@@ -5196,6 +5248,7 @@ const TagLabel = styled("div", {
 })(({ type, theme }) => ({
   display: "flex",
   alignItems: "center",
+  ...ellipsisStyles,
   paddingTop: type === "code" ? theme.spacing(0.25) : void 0
 }));
 function _Tag({
@@ -5524,6 +5577,149 @@ function _UploadField({
   ] });
 }
 const UploadField = forwardRef(_UploadField);
+const TooltipRoot = styled(Tooltip)(() => ({
+  whiteSpace: "nowrap",
+  maxWidth: 999,
+  pointerEvents: "auto"
+}));
+const Content = styled("span", {
+  shouldForwardProp: (prop) => !["ellipsisTarget", "lines", "content"].includes(prop)
+})(({ ellipsisTarget = "all", lines = 1, content = "block" }) => {
+  if (lines > 1) {
+    return {
+      display: "-webkit-box",
+      ...ellipsisStyles,
+      whiteSpace: "initial !important",
+      WebkitLineClamp: lines,
+      WebkitBoxOrient: "vertical",
+      "& > *": { display: "block" }
+    };
+  }
+  if (ellipsisTarget === "first-child") {
+    return {
+      display: "flex",
+      flex: "1",
+      overflow: "hidden",
+      "& > *:nth-of-type(1)": {
+        display: "block",
+        ...ellipsisStyles,
+        marginRight: "-0.15em"
+        // Prevent ellipsis separation
+      }
+    };
+  }
+  if (content === "flex") {
+    return {
+      display: "flex",
+      flex: "1",
+      "& > *": {
+        display: "block",
+        ...ellipsisStyles
+      }
+    };
+  }
+  return {
+    display: "block",
+    ...ellipsisStyles,
+    fontWeight: "inherit",
+    "& > *": { display: "inline" }
+  };
+});
+function _EllipsisWithTooltip({
+  children,
+  tooltipText,
+  alwaysShowTooltip,
+  content = "block",
+  textRef: inputTextRef,
+  ellipsisTarget = "all",
+  lines = 1,
+  "aria-label": ariaLabel,
+  contentProps,
+  ...otherProps
+}, ref) {
+  var _a;
+  const textElementRef = useRef(null);
+  const [overflowing, setOverflowing] = useState(false);
+  const textRef = useMemo(
+    () => inputTextRef || textElementRef,
+    [inputTextRef, textElementRef]
+  );
+  const getTextContent = (node) => {
+    if (typeof node === "string") return node;
+    if (typeof node === "number") return String(node);
+    if (React.isValidElement(node)) {
+      const props = node.props;
+      if (props.children) {
+        return getTextContent(props.children);
+      }
+    }
+    return "";
+  };
+  const elementTitle = tooltipText || ((_a = textElementRef.current) == null ? void 0 : _a.innerText) || (alwaysShowTooltip || overflowing ? getTextContent(children) : "");
+  useEffect(() => {
+    const container = textRef.current;
+    if (!container || !children) return;
+    if (alwaysShowTooltip) {
+      setOverflowing(true);
+      return;
+    }
+    let isOverflowing = false;
+    if (lines > 1) {
+      isOverflowing = container.scrollHeight > container.clientHeight;
+    } else if (ellipsisTarget === "first-child") {
+      const children2 = Array.from(container.children);
+      const totalWidth = children2.reduce(
+        (sum, child) => sum + ((child == null ? void 0 : child.scrollWidth) || 0),
+        0
+      );
+      isOverflowing = totalWidth > container.clientWidth;
+    } else {
+      const hasContainerOverflow = container.scrollWidth > container.clientWidth;
+      const children2 = Array.from(container.children);
+      const hasChildOverflow = children2.some(
+        (child) => child.scrollWidth > child.clientWidth
+      );
+      isOverflowing = hasContainerOverflow || hasChildOverflow;
+    }
+    setOverflowing(isOverflowing);
+  }, [textRef, alwaysShowTooltip, children, ellipsisTarget, lines, content]);
+  useEffect(() => {
+    if (typeof ref === "function") {
+      ref(textElementRef.current);
+    } else if (ref) {
+      ref.current = textElementRef.current;
+    }
+  }, [ref]);
+  return /* @__PURE__ */ jsx(
+    TooltipRoot,
+    {
+      disableFocusListener: !overflowing && !alwaysShowTooltip,
+      disableHoverListener: !overflowing && !alwaysShowTooltip,
+      disableTouchListener: !overflowing && !alwaysShowTooltip,
+      title: elementTitle,
+      describeChild: true,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(
+        Content,
+        {
+          "aria-label": ariaLabel ?? elementTitle,
+          ref: textElementRef,
+          ellipsisTarget,
+          lines,
+          content,
+          "data-name": "ellipsis-with-tooltip",
+          "data-overflowing": overflowing,
+          "data-lines": lines,
+          "data-content": content,
+          "data-ellipsis-target": ellipsisTarget,
+          ...contentProps,
+          children
+        }
+      )
+    }
+  );
+}
+const EllipsisWithTooltip = forwardRef(_EllipsisWithTooltip);
 export {
   AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
@@ -5558,6 +5754,7 @@ export {
   DialogHeader,
   DialogPaper,
   DialogStepper,
+  EllipsisWithTooltip,
   FilterDropdown,
   FilterDropdownMenuItem,
   IconButton,