@carto/meridian-ds 2.6.2-alpha.0 → 2.7.0-alpha-loader.2

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 cssUtils = require("../css-utils-BNXxLCyb.cjs");
-const Alert$1 = require("../Alert-eVzJvC47.cjs");
+const cssUtils = require("../css-utils-CH7es90t.cjs");
+const Alert$1 = require("../Alert-C4W0H_uN.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-6ZIV5V7a.cjs");
+const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -41,6 +41,7 @@ const reactIntl = require("react-intl");
 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",
@@ -875,6 +876,78 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
+const StyledGrid = material.styled(material.Grid, {
+  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
+})(({ fullHeight, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1.5),
+  ...fullHeight && {
+    flex: 1,
+    height: "100%",
+    width: "100%"
+  }
+}));
+function _Loader({
+  label,
+  secondLabel,
+  color = "primary",
+  size = 40,
+  fullHeight,
+  labelTypographyProps,
+  secondLabelTypographyProps,
+  ...otherProps
+}, ref) {
+  const labelText = cssUtils.useTranslationWithFallback("c4r.utils.loader.label", label);
+  const hasAnyLabel = labelText || secondLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledGrid,
+    {
+      container: true,
+      fullHeight,
+      ...otherProps,
+      ref,
+      "aria-busy": true,
+      "data-name": "loader",
+      "data-full-height": fullHeight,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.CircularProgress,
+          {
+            color,
+            size,
+            "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
+          }
+        ),
+        hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "column", alignItems: "center", children: [
+          labelText && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelTypographyProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
+          secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...secondLabelTypographyProps,
+              id: labelText ? void 0 : "loader-label",
+              children: secondLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Loader = React.forwardRef(_Loader);
 async function copyString(value) {
   return await navigator.clipboard.writeText(value);
 }
@@ -5039,6 +5112,294 @@ 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 ClearSearchIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
+}));
+const LoadingSearchIcon = material.styled(material.CircularProgress)(({ theme }) => ({
+  svg: {
+    color: `${theme.palette.primary.main} !important`
+  }
+}));
+const SearchInputAdornment = material.styled(material.InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
+})(
+  ({ theme, minimized, expanded }) => ({
+    // Start adornment
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.short
+    }),
+    "&.MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(2) : void 0,
+      "&.MuiInputAdornment-sizeSmall": {
+        marginLeft: minimized ? theme.spacing(1) : void 0
+      }
+    },
+    // End adornment
+    "&.MuiInputAdornment-positionEnd": {
+      minWidth: theme.spacing(4),
+      "&.MuiInputAdornment-sizeSmall": {
+        minWidth: theme.spacing(3)
+      }
+    },
+    ...expanded && !minimized && {
+      "&.MuiInputAdornment-root": {
+        minWidth: theme.spacing(9),
+        "&.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", "padding"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.standard
+    }),
+    "&.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
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.standard
+      })
+    },
+    // Error state
+    "&.Mui-error": {
+      "&::after": {
+        borderColor: "transparent !important"
+      }
+    },
+    ...minimized && {
+      display: "flex",
+      alignItems: "center",
+      padding: 0,
+      width: theme.spacing(6),
+      cursor: "pointer",
+      "& .MuiInputBase-input": {
+        width: 0
+      },
+      "&.MuiInputBase-sizeSmall": {
+        padding: 0,
+        width: theme.spacing(4)
+      }
+    }
+  },
+  // Variants
+  ...emphasis === "filled" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: minimized ? "transparent !important" : void 0,
+      "&:hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      },
+      // not disabled
+      "&:not(.Mui-disabled):hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      }
+    }
+  },
+  ...emphasis === "transparent" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: "transparent !important",
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : "transparent !important"
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent !important"
+      }
+    }
+  },
+  ...emphasis === "floating" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+      boxShadow: theme.shadows[1],
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : `${theme.palette.background.paper} !important`
+      },
+      "&.Mui-disabled": {
+        backgroundColor: `${theme.palette.background.paper} !important`
+      }
+    }
+  }
+}));
+const SearchFieldEndAdornment = ({
+  disabled,
+  showClearButton = true,
+  loading,
+  size,
+  endAdornment,
+  clearButton,
+  clearButtonLabel,
+  onClear
+}) => {
+  if (!showClearButton && !endAdornment && !loading) {
+    return null;
+  }
+  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 }) : showClearButton ? clearButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+              cssUtils.IconButton,
+              {
+                onClick: onClear,
+                size,
+                color: "default",
+                disabled,
+                tooltip: clearButtonLabel,
+                "aria-label": clearButtonLabel,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ClearSearchIcon, {})
+              }
+            ) : null,
+            endAdornment
+          ]
+        }
+      )
+    }
+  );
+};
+const SearchFieldStartAdornment = ({
+  minimized,
+  loading,
+  startAdornment,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SearchInputAdornment, { position: "start", minimized, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) });
+};
+function _SearchField({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  minimized = false,
+  loading = false,
+  variant = "filled",
+  size = "small",
+  InputProps,
+  inputProps,
+  startAdornment,
+  endAdornment,
+  onFocus,
+  onBlur,
+  onChange,
+  onClick,
+  onResetSearch,
+  showClearButton = true,
+  clearButtonLabel,
+  clearButton,
+  ...otherProps
+}, ref) {
+  const [isInputFocused, setIsInputFocused] = React.useState(false);
+  const clearButtonVisibility = !disabled && Boolean(value ?? defaultValue) && showClearButton;
+  const clearButtonLabelValue = cssUtils.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 handleClear = () => {
+    onResetSearch == null ? void 0 : onResetSearch();
+    onChange == null ? void 0 : onChange({ target: { value: "" } });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchFieldBase,
+    {
+      defaultValue,
+      value: minimized ? "" : value,
+      placeholder: minimized ? "" : placeholder,
+      onChange,
+      onClick,
+      variant: "filled",
+      emphasis: variant,
+      size,
+      focused: false,
+      isInputFocused,
+      disabled,
+      minimized,
+      InputProps: {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(
+          SearchFieldStartAdornment,
+          {
+            minimized,
+            loading,
+            disabled,
+            startAdornment
+          }
+        ),
+        endAdornment: !minimized && /* @__PURE__ */ jsxRuntime.jsx(
+          SearchFieldEndAdornment,
+          {
+            disabled,
+            loading,
+            showClearButton: clearButtonVisibility,
+            clearButton,
+            clearButtonLabel: clearButtonLabelValue,
+            onClear: handleClear,
+            size,
+            endAdornment
+          }
+        ),
+        ...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),
@@ -5857,12 +6218,14 @@ exports.EllipsisWithTooltip = EllipsisWithTooltip;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;
+exports.Loader = Loader;
 exports.Menu = Menu;
 exports.MenuItemFilter = MenuItemFilter;
 exports.MenuList = MenuList;
 exports.MultipleAutocomplete = MultipleAutocomplete;
 exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
+exports.SearchField = SearchField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
 exports.SplitButton = SplitButton;