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

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 { 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-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 { 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";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
 import { useIntl } from "react-intl";
-import { M as MenuItem$1 } from "../MenuItem-MUmADf3e.js";
+import { M as MenuItem$1 } from "../MenuItem-COajCLkS.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -41,6 +41,7 @@ import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
+import { S as Search } from "../Search-C7wkXu3f.js";
 import DOMPurify from "dompurify";
 const IndicatorIcon = styled(Box)({
   position: "absolute",
@@ -69,7 +70,7 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -522,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,
     {
@@ -554,7 +558,7 @@ function _MenuItemFilter({
                 disabled: selectAllDisabled
               }
             ),
-            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+            selectAllLabel
           ]
         }
       )
@@ -601,6 +605,10 @@ function _MultipleSelectField({
   selectAllDisabled,
   tooltipPlacement,
   variant,
+  allSelectedText,
+  noneSelectedText,
+  selectedText,
+  selectAllText,
   ...props
 }, ref) {
   const {
@@ -617,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(
@@ -631,7 +647,7 @@ function _MultipleSelectField({
           variant: isSmall ? "body2" : "body1",
           color: "textPrimary",
           ml: paddingSize,
-          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+          children: allSelectedLabel
         }
       );
     }
@@ -654,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
@@ -704,7 +721,8 @@ function _MultipleSelectField({
                 areAllSelected,
                 areAnySelected,
                 selectAll,
-                selectAllDisabled
+                selectAllDisabled,
+                selectAllText
               }
             )
           }
@@ -871,10 +889,13 @@ const _CopiableComponent = ({
   copiedText,
   button,
   buttonLabel,
+  buttonIcon,
   buttonProps,
   ariaLabel,
   dataTestId,
   tooltipPlacement = "top",
+  tooltipProps,
+  snackbarProps,
   ...props
 }, ref) => {
   const [open, setOpen] = useState(false);
@@ -892,6 +913,7 @@ const _CopiableComponent = ({
       setOpen(true);
     }).catch(console.error);
   };
+  const copyIcon = buttonIcon ?? /* @__PURE__ */ jsx(ContentCopyOutlined, {});
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Tooltip,
@@ -899,6 +921,7 @@ const _CopiableComponent = ({
         title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
+        ...tooltipProps,
         children: /* @__PURE__ */ jsxs(
           Box,
           {
@@ -914,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: {
@@ -930,10 +953,11 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsx(
       Snackbar,
       {
-        open,
         autoWidth: true,
         closeable: false,
         autoHideDuration: 4e3,
+        ...snackbarProps,
+        open,
         onClose: () => setOpen(false),
         children: copySuccessMessage
       }
@@ -1273,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,
@@ -1290,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,
@@ -1338,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);
@@ -4852,6 +4880,9 @@ function _FilterDropdown({
   responsive,
   tooltipLabel,
   tooltipPlacement,
+  tooltipProps,
+  buttonProps,
+  iconButtonProps,
   slotProps,
   MenuListProps,
   ...props
@@ -4889,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,
       {
@@ -4946,6 +4993,240 @@ function _FilterDropdown({
 const FilterDropdown = forwardRef(
   _FilterDropdown
 );
+const SearchIcon = styled(Search, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
+})(
+  ({ theme, minimized, disabled }) => ({
+    cursor: !disabled && minimized ? "pointer" : "inherit",
+    width: ICON_SIZE_MEDIUM,
+    height: ICON_SIZE_MEDIUM,
+    path: {
+      fillOpacity: 1,
+      fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
+    }
+  })
+);
+const CancelSearchIcon = styled(Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
+}));
+const LoadingSearchIcon = styled(CircularProgress)(({ theme }) => ({
+  svg: {
+    color: theme.palette.primary.main
+  }
+}));
+const SearchInputAdornment = styled(InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
+})(
+  ({ 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": {
+      pointerEvents: isInputFocused ? "auto" : "none"
+      // Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
+    },
+    // 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"
+      },
+      "&.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"
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent"
+      }
+    }
+  },
+  ...emphasis === "floating" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+      boxShadow: theme.shadows[1],
+      "&:hover": {
+        backgroundColor: theme.palette.background.paper
+      },
+      "&.Mui-disabled": {
+        backgroundColor: theme.palette.background.paper
+      }
+    }
+  }
+}));
+function _SearchField({
+  value,
+  defaultValue,
+  placeholder,
+  onChange,
+  onClick,
+  onResetSearch,
+  disabled,
+  minimized = false,
+  loading = false,
+  variant = "filled",
+  size = "small",
+  InputProps,
+  inputProps,
+  startAdornment,
+  endAdornment,
+  onFocus,
+  onBlur,
+  clearButtonLabel,
+  ...otherProps
+}, ref) {
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const clearButtonLabelValue = useTranslationWithFallback(
+    "c4r.button.clear",
+    clearButtonLabel
+  );
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClearText = () => {
+    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,
+    {
+      value: minimized ? "" : value,
+      defaultValue,
+      placeholder: minimized ? "" : placeholder,
+      onChange,
+      onClick,
+      variant: "filled",
+      emphasis: variant,
+      size,
+      focused: false,
+      isInputFocused,
+      disabled,
+      minimized,
+      InputProps: {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        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
+    }
+  );
+}
+const SearchField = forwardRef(_SearchField);
 const MAX_WIDTH = 480;
 const SnackbarRoot = styled(Snackbar$1)(({ theme }) => ({
   bottom: theme.spacing(2),
@@ -5768,6 +6049,7 @@ export {
   MultipleSelectField,
   PasswordField,
   ScreenReaderOnly,
+  SearchField,
   SelectField,
   Snackbar,
   SplitButton,

package/dist/{css-utils-CCi3p7os.cjs → css-utils-CqIN_t7x.cjs}

@@ -818,6 +818,7 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
+      clear: "Clear",
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
@@ -967,6 +968,7 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
+      clear: "Borrar",
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
@@ -1114,6 +1116,7 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
+      clear: "Bersihkan",
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",

package/dist/{css-utils-WejOmkiI.js → css-utils-hxI-qUxK.js}

@@ -817,6 +817,7 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
+      clear: "Clear",
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
@@ -966,6 +967,7 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
+      clear: "Borrar",
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
@@ -1113,6 +1115,7 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
+      clear: "Bersihkan",
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",