@carto/meridian-ds 2.6.1-alpha-searchfield.6 → 2.6.2-alpha.0

package/CHANGELOG.md

@@ -2,7 +2,6 @@
 
 ## Unreleased
 
-- New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
 - Avatar: move size styles to the theme [#321](https://github.com/CartoDB/meridian-ds/pull/321)
 - Alert: move neutral styles to the theme [#320](https://github.com/CartoDB/meridian-ds/pull/320)
 - Handle empty buttonFooterLabelId in CodeAreaFooter [#323](https://github.com/CartoDB/meridian-ds/pull/323)
@@ -14,6 +13,7 @@
 - FilterDropdown: improve customization [#312](https://github.com/CartoDB/meridian-ds/pull/312)
 - CopiableComponent: improve customization [#311](https://github.com/CartoDB/meridian-ds/pull/311)
 - AppBar: disallow user selection of text [#324](https://github.com/CartoDB/meridian-ds/pull/324)
+- Custom Icons: ApiAccessToken, ApiBaseUrl, AppCredentials, M2mOauthClient,SpaOauthClient, WorkflowApiEndpoint [#325](https://github.com/CartoDB/meridian-ds/pull/325)
 
 ## 2.0
 

package/dist/{Alert-BfDnWlbD.js → Alert-1A6BG2aO.js}

@@ -3,7 +3,7 @@ import { forwardRef, useState } from "react";
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } 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 } from "./css-utils-BHYA7By_.js";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-lmkjeCdF.js";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{Alert-CPvYAHO_.cjs → Alert-eVzJvC47.cjs}

@@ -4,7 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const cssUtils = require("./css-utils-DjvM17Vb.cjs");
+const cssUtils = require("./css-utils-BNXxLCyb.cjs");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{MenuItem-BPvH70wa.cjs → MenuItem-6ZIV5V7a.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-DjvM17Vb.cjs");
+const cssUtils = require("./css-utils-BNXxLCyb.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{MenuItem-GpTpLidu.js → MenuItem-DgHhHW-j.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-BHYA7By_.js";
+import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-lmkjeCdF.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{Search-CMWbM9nD.cjs → SwatchSquare-B8PIY3Rd.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     fill: "currentColor",
@@ -11,10 +11,10 @@ const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon = material.createSvgIcon(Icon(), "Search");
+const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    BaseSvgIcon,
+    BaseSvgIcon$1,
     {
       ref,
       viewBox: "0 0 24 24",
@@ -28,4 +28,23 @@ function Search({ width, height, sx, ...props }, ref) {
   );
 }
 const Search$1 = React.forwardRef(Search);
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const SwatchSquare$1 = React.forwardRef(SwatchSquare);
 exports.Search = Search$1;
+exports.SwatchSquare = SwatchSquare$1;

package/dist/{Search-C7wkXu3f.js → SwatchSquare-CaaLsjAC.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
-const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
     fill: "currentColor",
@@ -10,10 +10,10 @@ const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/s
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon = createSvgIcon(Icon(), "Search");
+const BaseSvgIcon$1 = createSvgIcon(Icon$1(), "Search");
 function Search({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
-    BaseSvgIcon,
+    BaseSvgIcon$1,
     {
       ref,
       viewBox: "0 0 24 24",
@@ -27,6 +27,25 @@ function Search({ width, height, sx, ...props }, ref) {
   );
 }
 const Search$1 = forwardRef(Search);
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const SwatchSquare$1 = forwardRef(SwatchSquare);
 export {
-  Search$1 as S
+  Search$1 as S,
+  SwatchSquare$1 as a
 };

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-DjvM17Vb.cjs");
-const Alert$1 = require("../Alert-CPvYAHO_.cjs");
+const cssUtils = require("../css-utils-BNXxLCyb.cjs");
+const Alert$1 = require("../Alert-eVzJvC47.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-BPvH70wa.cjs");
+const MenuItem = require("../MenuItem-6ZIV5V7a.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -41,7 +41,6 @@ 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",
@@ -5040,279 +5039,6 @@ 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
-    "&.MuiInputAdornment-positionStart": {
-      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", {
-      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": {
-      // 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,
-    {
-      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(
-          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),
@@ -6137,7 +5863,6 @@ exports.MenuList = MenuList;
 exports.MultipleAutocomplete = MultipleAutocomplete;
 exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
-exports.SearchField = SearchField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
 exports.SplitButton = SplitButton;