@carto/meridian-ds 2.10.2 → 2.11.1-multipleselectfield-custom.0

package/CHANGELOG.md

@@ -2,8 +2,16 @@
 
 ## Unreleased
 
+- Allow customization of menu item label in MultipleSelectField [#359](https://github.com/CartoDB/meridian-ds/pull/359)
+
 ## 2.0
 
+### 2.11.0
+
+- Extend `AccordionGroup`, adding the `sx` property to each of the `items` [#369](https://github.com/CartoDB/meridian-ds/pull/369)
+- New MessageField and ChipGroup components [#362](https://github.com/CartoDB/meridian-ds/pull/362)
+- Fix flaky DateRangePicker test: auto-opens end date picker after selecting start date [#368](https://github.com/CartoDB/meridian-ds/pull/368)
+
 ### 2.10.2
 
 - FeatureSelectionWidgetUI: Fix ChipList horizontal layout after List component update [#365](https://github.com/CartoDB/meridian-ds/pull/365)

package/dist/{ListItem-BUH1WVMn.js → ListItem-Ce-ui7dI.js}

@@ -3,7 +3,7 @@ import React, { forwardRef, useState, createContext, useMemo, useContext } from
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle, List as List$1, ListItemButton as ListItemButton$1, ListItem as ListItem$1 } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import "cartocolor";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-MuFJ3gQ2.js";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-BMEVUZ5G.js";
 import * as ReactWindow from "react-window";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",

package/dist/{ListItem-CzAfw3KD.cjs → ListItem-DQ9_zkrB.cjs}

@@ -4,7 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const paletteUtils = require("./palette-utils-AE0NwrEo.cjs");
+const paletteUtils = require("./palette-utils-BsfMFfME.cjs");
 const ReactWindow = require("react-window");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/components/index.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const paletteUtils = require("../palette-utils-AE0NwrEo.cjs");
-const ListItem = require("../ListItem-CzAfw3KD.cjs");
+const paletteUtils = require("../palette-utils-BsfMFfME.cjs");
+const ListItem = require("../ListItem-DQ9_zkrB.cjs");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-BUZBgnkY.cjs");
-const utils = require("../utils-dwDSNbwq.cjs");
+const utils = require("../utils-BndCEhGs.cjs");
 require("cartocolor");
 const ReactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -638,6 +638,7 @@ function _MultipleSelectField({
   noneSelectedText,
   selectedText,
   selectAllText,
+  renderItemLabel,
   ...props
 }, ref) {
   const {
@@ -771,7 +772,7 @@ function _MultipleSelectField({
                     checked: currentOptions.includes(option.value)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { primary: option.label })
+                renderItemLabel ? renderItemLabel(option) : /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { primary: option.label })
               ]
             },
             option.value
@@ -1967,7 +1968,7 @@ const BrandElements = material.styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$5 = material.styled("div")(({ theme }) => ({
+const Content$6 = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -1990,7 +1991,7 @@ function _AppBar({
       brandText && /* @__PURE__ */ jsxRuntime.jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsxRuntime.jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$5, { children })
+    /* @__PURE__ */ jsxRuntime.jsx(Content$6, { children })
   ] }) });
 }
 const AppBar = React.forwardRef(_AppBar);
@@ -2069,7 +2070,7 @@ function CodeAreaFooter({
     }
   );
 }
-const Header = material.styled(material.Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
+const Header$1 = material.styled(material.Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
   position: "absolute",
   top: 0,
   right: theme.spacing(0.5),
@@ -2129,7 +2130,7 @@ function CodeAreaHeader({
   }
   if (showMenu) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Header$1, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           paletteUtils.IconButton,
           {
@@ -2182,7 +2183,7 @@ function CodeAreaHeader({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header$1, { size, "data-size": size, "data-name": "code-area-header", children: [
     showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(
       CopiableComponent,
       {
@@ -2803,7 +2804,7 @@ const CodeMirrorWrapper = material.styled(material.Box, {
     }
   })
 );
-const InputWrapper = material.styled(material.Box, {
+const InputWrapper$1 = material.styled(material.Box, {
   shouldForwardProp: (prop) => prop !== "hasActions"
 })(({ theme, hasActions }) => ({
   flex: "1 1 auto",
@@ -2909,7 +2910,7 @@ function CodeAreaField({
                   size: isExpanded ? "medium" : "small"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(InputWrapper$1, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
                 CodeAreaInput,
                 {
                   ...props,
@@ -3295,7 +3296,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
   ] });
 }
-const Content$4 = material.styled(material.DialogContent, {
+const Content$5 = material.styled(material.DialogContent, {
   shouldForwardProp: (prop) => ![
     "scrollableContent",
     "withGutter",
@@ -3386,7 +3387,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Content$4,
+    Content$5,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -3693,7 +3694,7 @@ function DialogStepper({
     );
   }) }) });
 }
-const Content$3 = material.styled(DialogContent, {
+const Content$4 = material.styled(DialogContent, {
   shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
 })(
   ({ error, withBorder, theme }) => ({
@@ -3722,7 +3723,7 @@ function CodeAreaDialogContent({
   withGutter = false
 }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Content$3, { withGutter, error, withBorder, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Content$4, { withGutter, error, withBorder, children });
 }
 function CodeAreaDialogConfirmation({
   onClose,
@@ -4802,7 +4803,7 @@ function _EmptyState({
 }
 const EmptyState = React.forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$2 = material.styled("ul")(({ theme }) => ({
+const Content$3 = material.styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -4833,7 +4834,7 @@ function TooltipData({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     title && /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Content$3, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Bullet,
         {
@@ -4883,6 +4884,7 @@ function _AccordionGroup({
           disabled: item.disabled,
           defaultExpanded: item.defaultExpanded,
           onChange: item.onChange,
+          sx: item.sx,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               material.AccordionSummary,
@@ -5219,6 +5221,296 @@ function _FilterDropdown({
 const FilterDropdown = React.forwardRef(
   _FilterDropdown
 );
+const Header = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(0.5)
+}));
+const Content$2 = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["hasToolbar"].includes(prop)
+})(({ hasToolbar }) => ({
+  display: "flex",
+  alignItems: "flex-end",
+  ...hasToolbar && {
+    display: "block"
+  }
+}));
+const TextFieldBase = material.styled(material.TextField)(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    minHeight: "auto !important",
+    "&:before": {
+      border: `none !important`,
+      "&:hover": {
+        border: `none !important`
+      }
+    },
+    "& textarea": {
+      maxHeight: theme.spacing(32),
+      // 256px, defined in the design specs
+      overflowY: "auto !important",
+      boxSizing: "border-box"
+    },
+    // Sizes
+    "&.MuiInputBase-multiline.MuiInputBase-sizeSmall textarea": {
+      padding: theme.spacing(0.75, 1.25)
+    }
+  },
+  // Variant's overrides
+  "& .MuiFilledInput-root": {
+    backgroundColor: "transparent !important"
+  },
+  "& .MuiOutlinedInput-root": {
+    backgroundColor: "transparent !important",
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none !important"
+    }
+  }
+}));
+const InputWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["variant", "disabled", "error"].includes(prop)
+})(({ theme, variant, disabled, error }) => ({
+  borderRadius: theme.spacing(0.5),
+  transition: theme.transitions.create(["background-color", "box-shadow"], {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shortest
+  }),
+  // States
+  ...error && {
+    boxShadow: `0 0 0 2px inset ${theme.palette.error.light}`
+  },
+  // Variants
+  ...variant === "filled" && {
+    backgroundColor: theme.palette.default.background,
+    "&:hover": {
+      backgroundColor: !disabled && theme.palette.action.hover
+    },
+    "&:focus-within": {
+      backgroundColor: theme.palette.default.background
+    }
+  },
+  ...variant === "outlined" && {
+    boxShadow: `0 0 0 1px inset ${theme.palette.default.outlinedBorder}`
+    // TBD when we need to support outlined variant
+  }
+}));
+const FooterWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})(({ theme, size }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(size === "small" ? 0.5 : 1)
+}));
+const Toolbar = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  // Reset margin
+  "& .MuiButtonBase-root, & .optionIconButton": {
+    marginLeft: 0
+  }
+}));
+const MessageFieldFooter = ({
+  size,
+  toolbar,
+  analyzing,
+  onStop,
+  stopLabel,
+  iconButton,
+  labelButton,
+  onClick,
+  buttonIsDisabled,
+  disabled,
+  typeToSendLabel,
+  sendLabel
+}) => {
+  const stopAriaLabel = typeof stopLabel === "string" ? stopLabel : void 0;
+  const sendButtonLabel = buttonIsDisabled ? typeToSendLabel : sendLabel;
+  const sendAriaLabel = typeof sendButtonLabel === "string" ? sendButtonLabel : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FooterWrapper, { size, children: [
+    toolbar && /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { children: toolbar }),
+    /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: analyzing ? /* @__PURE__ */ jsxRuntime.jsx(
+      paletteUtils.IconButton,
+      {
+        onClick: onStop,
+        color: "default",
+        size,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.StopCircleOutlined, {}),
+        tooltip: stopLabel,
+        "aria-label": stopAriaLabel,
+        tooltipPlacement: "top"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      iconButton && !labelButton && /* @__PURE__ */ jsxRuntime.jsx(
+        paletteUtils.IconButton,
+        {
+          onClick,
+          disabled: buttonIsDisabled,
+          color: "primary",
+          variant: "contained",
+          size,
+          icon: iconButton,
+          tooltip: !disabled ? sendButtonLabel : void 0,
+          "aria-label": sendAriaLabel,
+          tooltipPlacement: "top"
+        }
+      ),
+      labelButton && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Tooltip,
+        {
+          title: buttonIsDisabled && !disabled ? typeToSendLabel : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              onClick,
+              variant: "contained",
+              color: "primary",
+              disabled: buttonIsDisabled,
+              size,
+              children: labelButton
+            }
+          ) })
+        }
+      )
+    ] }) })
+  ] });
+};
+function _MessageField({
+  value,
+  defaultValue,
+  label,
+  onChange,
+  onClick,
+  onStop,
+  disabled,
+  variant = "filled",
+  size = "small",
+  analyzing,
+  iconButton = /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ArrowUpwardOutlined, {}),
+  labelButton,
+  disabledButton,
+  helperText,
+  error,
+  fullWidth = true,
+  validationType,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  focused: _focused,
+  onKeyDown,
+  textFieldProps,
+  toolbar,
+  header,
+  stopText,
+  typeToSendText,
+  sendText,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...otherProps
+}, ref) {
+  const stopLabel = paletteUtils.useTranslationWithFallback("c4r.button.stop", stopText);
+  const typeToSendLabel = paletteUtils.useTranslationWithFallback(
+    "c4r.button.typeToSend",
+    typeToSendText
+  );
+  const sendLabel = paletteUtils.useTranslationWithFallback("c4r.button.send", sendText);
+  const inputIsDisabled = disabled || analyzing;
+  const currentValue = value ?? defaultValue ?? "";
+  const buttonIsDisabled = currentValue === "" || disabledButton || disabled;
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (e.ctrlKey || e.shiftKey) {
+        e.preventDefault();
+        const textarea = e.target;
+        const cursorPosition = e.target.selectionStart;
+        const textValue = textarea.value;
+        const newValue = textValue.slice(0, cursorPosition) + "\n" + textValue.slice(cursorPosition);
+        const onChangeHandler = (textFieldProps == null ? void 0 : textFieldProps.onChange) || onChange;
+        if (onChangeHandler) {
+          const newEvent = {
+            ...e,
+            target: {
+              ...e.target,
+              value: newValue
+            }
+          };
+          onChangeHandler(newEvent);
+        } else {
+          textarea.value = newValue;
+        }
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
+        });
+      } else {
+        e.preventDefault();
+        onClick(e);
+      }
+    }
+    const onKeyDownHandler = (textFieldProps == null ? void 0 : textFieldProps.onKeyDown) || onKeyDown;
+    onKeyDownHandler == null ? void 0 : onKeyDownHandler(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.FormControl,
+    {
+      ref,
+      fullWidth,
+      size,
+      error,
+      disabled: inputIsDisabled,
+      role: "group",
+      "data-name": "message-field",
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { shrink: true, children: /* @__PURE__ */ jsxRuntime.jsx(LabelWithIndicator, { label, type: validationType }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { variant, disabled: inputIsDisabled, error, children: [
+          header && /* @__PURE__ */ jsxRuntime.jsx(Header, { children: header }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Content$2, { hasToolbar: !!toolbar, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TextFieldBase,
+              {
+                multiline: true,
+                ...value !== void 0 ? { value } : { defaultValue },
+                onChange,
+                focused: false,
+                disabled: inputIsDisabled,
+                variant,
+                size,
+                fullWidth,
+                required: validationType === "required",
+                inputProps: { "aria-invalid": !!error },
+                ...otherProps,
+                ...textFieldProps,
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MessageFieldFooter,
+              {
+                size,
+                toolbar,
+                analyzing,
+                onStop,
+                stopLabel,
+                iconButton,
+                labelButton,
+                onClick,
+                buttonIsDisabled,
+                disabled,
+                typeToSendLabel,
+                sendLabel
+              }
+            )
+          ] })
+        ] }),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
+      ]
+    }
+  );
+}
+const MessageField = React.forwardRef(_MessageField);
+MessageField.displayName = "MessageField";
 const SearchIcon = material.styled(Search.ForwardedComponent, {
   shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
 })(
@@ -6447,6 +6739,197 @@ function _ListItemIcon({ iconProps, sx, ...otherProps }, ref) {
 }
 const ListItemIcon = React.forwardRef(_ListItemIcon);
 ListItemIcon.displayName = "ListItemIcon";
+const Chip = material.styled(material.Chip)(() => ({
+  maxWidth: "100%"
+}));
+function _ChipGroupItem({
+  chipData,
+  index,
+  displayLabel,
+  showTooltip = false,
+  disabled,
+  onClick,
+  onDelete,
+  ...restProps
+}, ref) {
+  const uniqueId2 = `chip-${index}`;
+  const isDisabled = chipData.disabled ?? disabled;
+  const chipElement = /* @__PURE__ */ jsxRuntime.jsx(
+    Chip,
+    {
+      ...restProps,
+      ref,
+      label: /* @__PURE__ */ jsxRuntime.jsx(
+        paletteUtils.Typography,
+        {
+          component: "p",
+          variant: "inherit",
+          color: "inherit",
+          noWrap: true,
+          id: uniqueId2,
+          children: displayLabel
+        }
+      ),
+      variant: chipData.variant ?? "outlined",
+      color: chipData.color ?? "default",
+      size: chipData.size ?? "small",
+      disabled: isDisabled,
+      avatar: chipData.avatar,
+      icon: chipData.icon,
+      deleteIcon: chipData.deleteIcon,
+      onClick,
+      onDelete,
+      "aria-disabled": isDisabled,
+      "aria-labelledby": uniqueId2,
+      "data-truncated": showTooltip
+    }
+  );
+  if (!showTooltip && !chipData.tooltip) {
+    return chipElement;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: chipData.tooltip || chipData.label, children: chipElement });
+}
+const ChipGroupItem = React.forwardRef(_ChipGroupItem);
+ChipGroupItem.displayName = "ChipGroupItem";
+const PopoverMenu = material.styled(material.Popover)(({ theme }) => ({
+  ".MuiPaper-root": {
+    pointerEvents: "all",
+    padding: theme.spacing(1),
+    marginTop: 0,
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+function _ChipGroup({
+  chips,
+  disabled,
+  maxVisibleChips = 3,
+  maxLengthChip = 30,
+  onClickAllChips,
+  onDeleteAllChips,
+  ...rootProps
+}, ref) {
+  const [openedRef, setOpen] = React.useState(null);
+  const localRef = React.useRef(null);
+  const hasChips = Boolean(chips == null ? void 0 : chips.length);
+  const normalizedChips = (chips == null ? void 0 : chips.map((chip) => {
+    if (typeof chip === "string") {
+      return { label: chip };
+    }
+    return chip;
+  })) || [];
+  const chipsToShow = normalizedChips.slice(0, maxVisibleChips);
+  const additionalChips = Math.max(0, normalizedChips.length - maxVisibleChips);
+  const hiddenChips = normalizedChips.slice(maxVisibleChips);
+  const firstChip = normalizedChips[0];
+  const indicatorVariant = (firstChip == null ? void 0 : firstChip.variant) ?? "outlined";
+  const indicatorColor = (firstChip == null ? void 0 : firstChip.color) ?? "default";
+  const indicatorSize = (firstChip == null ? void 0 : firstChip.size) ?? "small";
+  const handleMouseOver = () => setOpen(localRef.current);
+  const handleMouseLeave = () => setOpen(null);
+  const truncateChipLabel = (label) => {
+    if (maxLengthChip !== void 0 && label.length > maxLengthChip) {
+      return label.slice(0, maxLengthChip) + "...";
+    }
+    return label;
+  };
+  const getClickHandler = (chipData) => {
+    return onClickAllChips ? (event) => onClickAllChips(chipData, event) : chipData.onClick;
+  };
+  const getDeleteHandler = (chipData) => {
+    return onDeleteAllChips ? (event) => onDeleteAllChips(chipData, event) : chipData.onDelete;
+  };
+  const getChipDisplayProps = (chipData) => {
+    const displayLabel = truncateChipLabel(chipData.label);
+    const showTooltip = displayLabel !== chipData.label || Boolean(chipData.tooltip);
+    return { displayLabel, showTooltip };
+  };
+  if (!hasChips) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Stack,
+      {
+        direction: "row",
+        spacing: 0.5,
+        ...rootProps,
+        ref,
+        "data-name": "chip-group",
+        children: [
+          chipsToShow.map((chipData, index) => {
+            const { displayLabel, showTooltip } = getChipDisplayProps(chipData);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              ChipGroupItem,
+              {
+                chipData,
+                index,
+                displayLabel,
+                showTooltip,
+                disabled,
+                onClick: getClickHandler(chipData),
+                onDelete: getDeleteHandler(chipData)
+              },
+              chipData.id ?? `${chipData.label}-${index}`
+            );
+          }),
+          Boolean(additionalChips) && /* @__PURE__ */ jsxRuntime.jsx(
+            ChipGroupItem,
+            {
+              ref: localRef,
+              chipData: {
+                label: `+${additionalChips}`,
+                variant: indicatorVariant,
+                color: indicatorColor,
+                size: indicatorSize
+              },
+              index: -1,
+              displayLabel: `+${additionalChips}`,
+              onMouseOver: handleMouseOver,
+              onMouseLeave: handleMouseLeave,
+              "aria-label": "Additional items",
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverMenu,
+      {
+        sx: { pointerEvents: "none", outline: "none" },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        anchorEl: openedRef,
+        open: Boolean(openedRef),
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        slotProps: {
+          paper: {
+            onMouseEnter: handleMouseOver,
+            onMouseLeave: handleMouseLeave
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { direction: "column", spacing: 1, children: hiddenChips.map((chipData, index) => {
+          const chipIndex = index + maxVisibleChips;
+          const { displayLabel, showTooltip } = getChipDisplayProps(chipData);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ChipGroupItem,
+            {
+              chipData,
+              index: chipIndex,
+              displayLabel,
+              showTooltip,
+              disabled,
+              onClick: getClickHandler(chipData),
+              onDelete: getDeleteHandler(chipData)
+            },
+            chipData.id ?? `${chipData.label}-hidden-${index}`
+          );
+        }) })
+      }
+    )
+  ] });
+}
+const ChipGroup = React.forwardRef(_ChipGroup);
+ChipGroup.displayName = "ChipGroup";
 Object.defineProperty(exports, "ListItemAvatar", {
   enumerable: true,
   get: () => material.ListItemAvatar
@@ -6474,6 +6957,7 @@ exports.Autocomplete = Autocomplete;
 exports.AutocompleteList = AutocompleteList;
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.ChipGroup = ChipGroup;
 exports.CircularProgress = CircularProgress;
 exports.CodeAreaDialog = CodeAreaDialog;
 exports.CodeAreaDialogConfirmation = CodeAreaDialogConfirmation;
@@ -6513,6 +6997,7 @@ exports.Loader = Loader;
 exports.Menu = Menu;
 exports.MenuItemFilter = MenuItemFilter;
 exports.MenuList = MenuList;
+exports.MessageField = MessageField;
 exports.MultipleAutocomplete = MultipleAutocomplete;
 exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;