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

package/dist/components/index.cjs

@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-DOeOwxOe.cjs");
-const cssUtils = require("../css-utils-CCi3p7os.cjs");
+const Alert$1 = require("../Alert-CL9Y3l7D.cjs");
+const cssUtils = require("../css-utils-CqIN_t7x.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 const reactIntl = require("react-intl");
-const MenuItem = require("../MenuItem-CYJN2OVU.cjs");
+const MenuItem = require("../MenuItem-Bssr5qGq.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -41,6 +41,7 @@ const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 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");
+const Search = require("../Search-CMWbM9nD.cjs");
 const DOMPurify = require("dompurify");
 const IndicatorIcon = material.styled(material.Box)({
   position: "absolute",
@@ -69,7 +70,7 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = Alert$1.useTranslationFallback(
+  const screenReaderTextValue = Alert$1.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -522,11 +523,14 @@ function _MenuItemFilter({
   areAnySelected,
   selectAll,
   selectAllDisabled,
+  selectAllText,
   "aria-label": ariaLabel,
   "data-testid": dataTestId
 }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const selectAllLabel = Alert$1.useTranslationWithFallback(
+    "c4r.form.selectAll",
+    selectAllText
+  );
   return /* @__PURE__ */ jsxRuntime.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 = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
-    id: "c4r.form.selected"
-  })}`;
+  const allSelectedLabel = Alert$1.useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
+  const noneSelectedLabel = Alert$1.useTranslationWithFallback(
+    "c4r.form.noneSelected",
+    noneSelectedText
+  );
+  const selectedLabel = Alert$1.useTranslationWithFallback(
+    "c4r.form.selected",
+    selectedText
+  );
+  const counterText = `${currentOptions.length} ${selectedLabel}`;
   const renderValue = React.useMemo(() => {
     if (areAllSelected) {
       return /* @__PURE__ */ jsxRuntime.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] = React.useState(false);
@@ -892,6 +913,7 @@ const _CopiableComponent = ({
       setOpen(true);
     }).catch(console.error);
   };
+  const copyIcon = buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Tooltip,
@@ -899,6 +921,7 @@ const _CopiableComponent = ({
         title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
+        ...tooltipProps,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           material.Box,
           {
@@ -914,7 +937,7 @@ const _CopiableComponent = ({
                 {
                   ...buttonProps,
                   disabled,
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.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__ */ jsxRuntime.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 = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
   const filter = material.createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const addLabel = Alert$1.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 = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
-  const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = React.useState(
     Array.isArray(value) ? value : value ? [value] : []
   );
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const defaultCounterText = Alert$1.useTranslationWithFallback(
+    "c4r.form.selected",
+    counterText
+  );
+  const defaultAllSelectedText = Alert$1.useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
   React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(cssUtils.IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Tooltip,
       {
-        ...commonButtonProps,
-        endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
-        children: menuLabel
+        title: tooltipLabel,
+        placement: tooltipPlacement,
+        ...tooltipProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          cssUtils.IconButton,
+          {
+            ...commonButtonProps,
+            icon,
+            ...iconButtonProps
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            ...commonButtonProps,
+            endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+            ...buttonProps,
+            children: menuLabel
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Menu,
       {
@@ -4946,6 +4993,240 @@ function _FilterDropdown({
 const FilterDropdown = React.forwardRef(
   _FilterDropdown
 );
+const SearchIcon = material.styled(Search.Search, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
+})(
+  ({ theme, minimized, disabled }) => ({
+    cursor: !disabled && minimized ? "pointer" : "inherit",
+    width: cssUtils.ICON_SIZE_MEDIUM,
+    height: cssUtils.ICON_SIZE_MEDIUM,
+    path: {
+      fillOpacity: 1,
+      fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
+    }
+  })
+);
+const CancelSearchIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
+}));
+const LoadingSearchIcon = material.styled(material.CircularProgress)(({ theme }) => ({
+  svg: {
+    color: theme.palette.primary.main
+  }
+}));
+const SearchInputAdornment = material.styled(material.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 = material.styled(material.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] = React.useState(false);
+  const clearButtonLabelValue = Alert$1.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__ */ jsxRuntime.jsx(
+      SearchInputAdornment,
+      {
+        position: "end",
+        expanded: Boolean(endAdornment && showClearButton),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Stack,
+          {
+            direction: "row",
+            spacing: 1,
+            sx: {
+              alignItems: "center"
+            },
+            children: [
+              loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : !disabled && showClearButton ? /* @__PURE__ */ jsxRuntime.jsx(
+                cssUtils.IconButton,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(CancelSearchIcon, {}),
+                  onClick: handleClearText,
+                  size,
+                  color: "default",
+                  disabled,
+                  tooltip: clearButtonLabelValue,
+                  "aria-label": clearButtonAriaLabel
+                }
+              ) : void 0,
+              endAdornment
+            ]
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SearchInputAdornment, { position: "start", minimized, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) }) }),
+        endAdornment: getEndAdornment(),
+        ...InputProps
+      },
+      inputProps: {
+        role: "searchbox",
+        ...inputProps
+      },
+      role: "search",
+      "data-variant": variant,
+      "data-name": "search-field",
+      ref,
+      ...otherProps
+    }
+  );
+}
+const SearchField = React.forwardRef(_SearchField);
 const MAX_WIDTH = 480;
 const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
   bottom: theme.spacing(2),
@@ -5769,6 +6050,7 @@ exports.MenuList = MenuList;
 exports.MultipleAutocomplete = MultipleAutocomplete;
 exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
+exports.SearchField = SearchField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
 exports.SplitButton = SplitButton;