@carto/meridian-ds 2.6.0-alpha-searchfield.1 → 2.6.1-alpha-searchfield.3

package/dist/components/index.js

@@ -1,9 +1,9 @@
 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 { 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 { 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, Stack, 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 useTranslationFallback, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-C1VgP3N1.js";
-import { L } from "../Alert-C1VgP3N1.js";
+import { u as useTranslationWithFallback, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BN993lHa.js";
+import { L } from "../Alert-BN993lHa.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, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-hxI-qUxK.js";
 import { a } from "../css-utils-hxI-qUxK.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
@@ -70,7 +70,7 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -523,11 +523,14 @@ function _MenuItemFilter({
   areAnySelected,
   selectAll,
   selectAllDisabled,
+  selectAllText,
   "aria-label": ariaLabel,
   "data-testid": dataTestId
 }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const selectAllLabel = useTranslationWithFallback(
+    "c4r.form.selectAll",
+    selectAllText
+  );
   return /* @__PURE__ */ jsx(
     StyledMenuItem$1,
     {
@@ -555,7 +558,7 @@ function _MenuItemFilter({
                 disabled: selectAllDisabled
               }
             ),
-            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+            selectAllLabel
           ]
         }
       )
@@ -602,6 +605,10 @@ function _MultipleSelectField({
   selectAllDisabled,
   tooltipPlacement,
   variant,
+  allSelectedText,
+  noneSelectedText,
+  selectedText,
+  selectAllText,
   ...props
 }, ref) {
   const {
@@ -618,11 +625,19 @@ function _MultipleSelectField({
   });
   const isSmall = size === "small";
   const paddingSize = isSmall || variant === "standard" ? 0 : 2;
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
-    id: "c4r.form.selected"
-  })}`;
+  const allSelectedLabel = useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
+  const noneSelectedLabel = useTranslationWithFallback(
+    "c4r.form.noneSelected",
+    noneSelectedText
+  );
+  const selectedLabel = useTranslationWithFallback(
+    "c4r.form.selected",
+    selectedText
+  );
+  const counterText = `${currentOptions.length} ${selectedLabel}`;
   const renderValue = useMemo(() => {
     if (areAllSelected) {
       return /* @__PURE__ */ jsx(
@@ -632,7 +647,7 @@ function _MultipleSelectField({
           variant: isSmall ? "body2" : "body1",
           color: "textPrimary",
           ml: paddingSize,
-          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+          children: allSelectedLabel
         }
       );
     }
@@ -655,16 +670,17 @@ function _MultipleSelectField({
         variant: isSmall ? "body2" : "body1",
         color: "text.hint",
         ml: paddingSize,
-        children: placeholder ?? intlConfig.formatMessage({ id: "c4r.form.noneSelected" })
+        children: placeholder ?? noneSelectedLabel
       }
     );
   }, [
     areAllSelected,
     areAnySelected,
+    allSelectedLabel,
     counterText,
     currentOptions,
-    intlConfig,
     isSmall,
+    noneSelectedLabel,
     paddingSize,
     placeholder,
     showCounter
@@ -705,7 +721,8 @@ function _MultipleSelectField({
                 areAllSelected,
                 areAnySelected,
                 selectAll,
-                selectAllDisabled
+                selectAllDisabled,
+                selectAllText
               }
             )
           }
@@ -872,10 +889,13 @@ const _CopiableComponent = ({
   copiedText,
   button,
   buttonLabel,
+  buttonIcon,
   buttonProps,
   ariaLabel,
   dataTestId,
   tooltipPlacement = "top",
+  tooltipProps,
+  snackbarProps,
   ...props
 }, ref) => {
   const [open, setOpen] = useState(false);
@@ -893,6 +913,7 @@ const _CopiableComponent = ({
       setOpen(true);
     }).catch(console.error);
   };
+  const copyIcon = buttonIcon ?? /* @__PURE__ */ jsx(ContentCopyOutlined, {});
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Tooltip,
@@ -900,6 +921,7 @@ const _CopiableComponent = ({
         title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
+        ...tooltipProps,
         children: /* @__PURE__ */ jsxs(
           Box,
           {
@@ -915,7 +937,7 @@ const _CopiableComponent = ({
                 {
                   ...buttonProps,
                   disabled,
-                  icon: /* @__PURE__ */ jsx(ContentCopyOutlined, {}),
+                  icon: copyIcon,
                   "data-testid": dataTestId,
                   "aria-label": ariaLabel || buttonLabel || copyTooltipText || intlConfig.formatMessage({ id: "c4r.button.copy" }),
                   sx: {
@@ -931,10 +953,11 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsx(
       Snackbar,
       {
-        open,
         autoWidth: true,
         closeable: false,
         autoHideDuration: 4e3,
+        ...snackbarProps,
+        open,
         onClose: () => setOpen(false),
         children: copySuccessMessage
       }
@@ -1274,10 +1297,12 @@ function useCreatableAutocomplete({
   newItemIcon,
   multiple
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
   const filter = createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const addLabel = useTranslationWithFallback(
+    "c4r.form.add",
+    typeof newItemLabel === "string" ? newItemLabel : void 0
+  );
   const creatableFilterOptions = (options, params) => {
     const filtered = filter(
       options,
@@ -1291,10 +1316,8 @@ function useCreatableAutocomplete({
       let newItemText;
       if (typeof newItemLabel === "function") {
         newItemText = newItemLabel(inputValue);
-      } else if (newItemLabel) {
-        newItemText = `${newItemLabel} "${inputValue}"`;
       } else {
-        newItemText = `${intlConfig.formatMessage({ id: "c4r.form.add" })} "${inputValue}"`;
+        newItemText = `${addLabel} "${inputValue}"`;
       }
       filtered.push({
         inputValue,
@@ -1339,14 +1362,18 @@ function useMultipleAutocomplete({
   counterText,
   allSelectedText
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
-  const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = useState(
     Array.isArray(value) ? value : value ? [value] : []
   );
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const defaultCounterText = useTranslationWithFallback(
+    "c4r.form.selected",
+    counterText
+  );
+  const defaultAllSelectedText = useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
   useEffect(() => {
     const newValue = Array.isArray(value) ? value : value ? [value] : [];
     setMultipleValue(newValue);
@@ -4853,6 +4880,9 @@ function _FilterDropdown({
   responsive,
   tooltipLabel,
   tooltipPlacement,
+  tooltipProps,
+  buttonProps,
+  iconButtonProps,
   slotProps,
   MenuListProps,
   ...props
@@ -4890,14 +4920,30 @@ function _FilterDropdown({
     "data-color": buttonColor
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ jsx(
+      Tooltip,
       {
-        ...commonButtonProps,
-        endIcon: isOpen ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}),
-        children: menuLabel
+        title: tooltipLabel,
+        placement: tooltipPlacement,
+        ...tooltipProps,
+        children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ...commonButtonProps,
+            icon,
+            ...iconButtonProps
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...commonButtonProps,
+            endIcon: isOpen ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}),
+            ...buttonProps,
+            children: menuLabel
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsxs(
       Menu,
       {
@@ -4960,64 +5006,115 @@ const SearchIcon = styled(Search, {
     }
   })
 );
-const CancelIcon = styled(Cancel)(({ theme }) => ({
-  fill: theme.palette.text.hint,
-  cursor: "pointer"
+const CancelSearchIcon = styled(Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
 }));
-const CircularProgressIcon = styled(CircularProgress)(({ theme }) => ({
+const LoadingSearchIcon = styled(CircularProgress)(({ theme }) => ({
   svg: {
     color: theme.palette.primary.main
   }
 }));
-const SearchFieldBase = styled(TextField, {
-  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused"
+const SearchInputAdornment = styled(InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
 })(
-  ({ theme, disabled, minimized, isInputFocused }) => ({
+  ({ theme, minimized, expanded }) => ({
+    "&.MuiInputAdornment-positionEnd": {
+      minWidth: theme.spacing(4),
+      "&.MuiInputAdornment-sizeSmall": {
+        minWidth: theme.spacing(3)
+      }
+    },
+    "&.MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(1.5) : void 0
+    },
+    ...expanded && !minimized && {
+      "&.MuiInputAdornment-root": {
+        minWidth: theme.spacing(8),
+        "&.MuiInputAdornment-sizeSmall": {
+          minWidth: theme.spacing(7)
+        }
+      }
+    }
+  })
+);
+const SearchFieldBase = styled(TextField, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused" && prop !== "emphasis"
+})(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
+  "&.MuiTextField-root .MuiInputBase-root": {
+    paddingRight: theme.spacing(1),
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.shortest
+    }),
+    "&.MuiInputBase-sizeSmall": {
+      paddingRight: theme.spacing(0.5)
+    },
+    "&:before": {
+      border: "none !important",
+      "&:hover": {
+        border: "none !important"
+      }
+    },
+    // Input
     "& .MuiInputBase-input": {
-      cursor: disabled ? "not-allowed" : "text",
       pointerEvents: isInputFocused ? "auto" : "none"
       // Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
     },
-    "&.MuiTextField-root .MuiInputBase-root": {
-      paddingRight: theme.spacing(1),
-      "&.MuiInputBase-sizeSmall": {
-        paddingRight: theme.spacing(0.5)
+    // Error state
+    "&.Mui-error": {
+      "&::after": {
+        borderColor: "transparent !important"
+      }
+    },
+    ...minimized && {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      width: theme.spacing(6),
+      cursor: "pointer",
+      "& .MuiInputBase-input": {
+        display: "none"
       },
-      "&:before": {
-        border: `none !important`,
-        "&:hover": {
-          border: `none !important`
-        }
+      "&.MuiInputBase-sizeSmall": {
+        width: theme.spacing(4)
+      }
+    }
+  },
+  // Variants
+  ...emphasis === "filled" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: minimized ? "inherit !important" : void 0,
+      // not disabled
+      "&:not(.Mui-disabled):hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      }
+    }
+  },
+  ...emphasis === "transparent" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: "transparent !important",
+      "&:hover": {
+        backgroundColor: "transparent"
       },
-      width: minimized ? theme.spacing(4) : "100%",
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.easeInOut,
-        duration: theme.transitions.duration.shortest
-      })
-    },
-    // Input Adornment
-    "& .MuiInputAdornment-positionStart": {
-      marginLeft: minimized ? theme.spacing(0.125) : void 0
-    },
-    "& .MuiInputAdornment-positionEnd": {
-      minWidth: theme.spacing(4),
-      "&.MuiInputAdornment-sizeSmall": {
-        minWidth: theme.spacing(3)
+      "&.Mui-disabled": {
+        backgroundColor: "transparent"
       }
-    },
-    // Variants
-    "& .MuiFilledInput-root": {
-      transition: theme.transitions.create("background-color", {
-        easing: theme.transitions.easing.easeInOut,
-        duration: theme.transitions.duration.shortest
-      }),
-      backgroundColor: `${minimized ? "inherit" : theme.palette.default.background} !important`,
+    }
+  },
+  ...emphasis === "floating" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+      boxShadow: theme.shadows[1],
       "&:hover": {
-        backgroundColor: `${disabled ? "inherit" : theme.palette.action.hover} !important`
+        backgroundColor: theme.palette.background.paper
+      },
+      "&.Mui-disabled": {
+        backgroundColor: theme.palette.background.paper
       }
     }
-  })
-);
+  }
+}));
 function _SearchField({
   value,
   defaultValue,
@@ -5031,17 +5128,18 @@ function _SearchField({
   variant = "filled",
   size = "small",
   InputProps,
+  inputProps,
   startAdornment,
   endAdornment,
   onFocus,
   onBlur,
-  clearTextLabel,
+  clearButtonLabel,
   ...otherProps
 }, ref) {
   const [isInputFocused, setIsInputFocused] = useState(false);
-  const clearTextLabelValue = useTranslationFallback(
+  const clearButtonLabelValue = useTranslationWithFallback(
     "c4r.button.clear",
-    clearTextLabel
+    clearButtonLabel
   );
   const handleFocus = (event) => {
     setIsInputFocused(true);
@@ -5055,6 +5153,45 @@ function _SearchField({
     onResetSearch == null ? void 0 : onResetSearch();
     onChange == null ? void 0 : onChange({ target: { value: "" } });
   };
+  const getEndAdornment = () => {
+    const showClearButton = !disabled && (value ?? defaultValue);
+    if (minimized) {
+      return void 0;
+    }
+    const clearButtonAriaLabel = typeof clearButtonLabelValue === "string" ? clearButtonLabelValue : String(clearButtonLabelValue);
+    return /* @__PURE__ */ jsx(
+      SearchInputAdornment,
+      {
+        position: "end",
+        expanded: Boolean(endAdornment && showClearButton),
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 1,
+            sx: {
+              alignItems: "center"
+            },
+            children: [
+              loading ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : !disabled && showClearButton ? /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: /* @__PURE__ */ jsx(CancelSearchIcon, {}),
+                  onClick: handleClearText,
+                  size,
+                  color: "default",
+                  disabled,
+                  tooltip: clearButtonLabelValue,
+                  "aria-label": clearButtonAriaLabel
+                }
+              ) : void 0,
+              endAdornment
+            ]
+          }
+        )
+      }
+    );
+  };
   return /* @__PURE__ */ jsx(
     SearchFieldBase,
     {
@@ -5063,7 +5200,8 @@ function _SearchField({
       placeholder: minimized ? "" : placeholder,
       onChange,
       onClick,
-      variant,
+      variant: "filled",
+      emphasis: variant,
       size,
       focused: false,
       isInputFocused,
@@ -5072,20 +5210,16 @@ function _SearchField({
       InputProps: {
         onFocus: handleFocus,
         onBlur: handleBlur,
-        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsx(CircularProgressIcon, { size: ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsx(SearchIcon, { disabled, minimized }) }) }),
-        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: loading ? /* @__PURE__ */ jsx(CircularProgressIcon, { size: ICON_SIZE_MEDIUM }) : !disabled && !minimized && (value ?? defaultValue) ? endAdornment || /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            icon: /* @__PURE__ */ jsx(CancelIcon, {}),
-            onClick: handleClearText,
-            size,
-            color: "default",
-            disabled,
-            tooltip: clearTextLabelValue
-          }
-        ) : void 0 }),
+        startAdornment: /* @__PURE__ */ jsx(SearchInputAdornment, { position: "start", minimized, children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsx(SearchIcon, { disabled, minimized }) }) }),
+        endAdornment: getEndAdornment(),
         ...InputProps
       },
+      inputProps: {
+        role: "searchbox",
+        ...inputProps
+      },
+      role: "search",
+      "data-variant": variant,
       "data-name": "search-field",
       ref,
       ...otherProps