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

package/CHANGELOG.md

@@ -3,9 +3,17 @@
 ## Unreleased
 
 - New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
+- Improve translations handling in Meridian (part 1) [#304](https://github.com/CartoDB/meridian-ds/pull/304)
+- FilterDropdown: improve customization [#312](https://github.com/CartoDB/meridian-ds/pull/312)
+- CopiableComponent: improve customization [#311](https://github.com/CartoDB/meridian-ds/pull/311)
 
 ## 2.0
 
+### 2.6.1
+
+- Custom Icons: FoldersStackedOutlined,RedoAlt,UndoAlt [#317](https://github.com/CartoDB/meridian-ds/pull/317)
+- Tabs: remove box-shadow in vertical mode[#302](https://github.com/CartoDB/meridian-ds/pull/302)
+
 ### 2.6.0
 
 - New EllipsisWithTooltip component [#299](https://github.com/CartoDB/meridian-ds/pull/299)

package/dist/{Alert-C1VgP3N1.js → Alert-BN993lHa.js}

@@ -16,13 +16,16 @@ const ScreenReaderOnly = styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-function useTranslationFallback(translationKey, customText) {
+function useTranslationWithFallback(translationKey, customText, intlValues) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   if (customText !== void 0 && customText !== null) {
     return customText;
   }
-  return intlConfig.formatMessage({ id: translationKey });
+  return intlConfig.formatMessage(
+    { id: translationKey },
+    intlValues
+  );
 }
 const StyledLink = styled(Link$1)(() => ({
   display: "inline-block"
@@ -82,7 +85,7 @@ function _Link({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -242,5 +245,5 @@ export {
   Alert as A,
   Link as L,
   ScreenReaderOnly as S,
-  useTranslationFallback as u
+  useTranslationWithFallback as u
 };

package/dist/{Alert-F8G9P271.cjs → Alert-CL9Y3l7D.cjs}

@@ -17,13 +17,16 @@ const ScreenReaderOnly = material.styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-function useTranslationFallback(translationKey, customText) {
+function useTranslationWithFallback(translationKey, customText, intlValues) {
   const intl = reactIntl.useIntl();
   const intlConfig = cssUtils.useImperativeIntl(intl);
   if (customText !== void 0 && customText !== null) {
     return customText;
   }
-  return intlConfig.formatMessage({ id: translationKey });
+  return intlConfig.formatMessage(
+    { id: translationKey },
+    intlValues
+  );
 }
 const StyledLink = material.styled(material.Link)(() => ({
   display: "inline-block"
@@ -83,7 +86,7 @@ function _Link({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -242,4 +245,4 @@ const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
 exports.Link = Link;
 exports.ScreenReaderOnly = ScreenReaderOnly;
-exports.useTranslationFallback = useTranslationFallback;
+exports.useTranslationWithFallback = useTranslationWithFallback;

package/dist/components/index.cjs

@@ -4,7 +4,7 @@ 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-F8G9P271.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");
@@ -70,7 +70,7 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = Alert$1.useTranslationFallback(
+  const screenReaderTextValue = Alert$1.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -523,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,
     {
@@ -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 = 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(
@@ -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] = React.useState(false);
@@ -893,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,
@@ -900,6 +921,7 @@ const _CopiableComponent = ({
         title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
+        ...tooltipProps,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           material.Box,
           {
@@ -915,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: {
@@ -931,10 +953,11 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsxRuntime.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 = 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,
@@ -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 = 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);
@@ -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__ */ 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,
       {
@@ -4960,64 +5006,115 @@ const SearchIcon = material.styled(Search.Search, {
     }
   })
 );
-const CancelIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
-  fill: theme.palette.text.hint,
-  cursor: "pointer"
+const CancelSearchIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
 }));
-const CircularProgressIcon = material.styled(material.CircularProgress)(({ theme }) => ({
+const LoadingSearchIcon = material.styled(material.CircularProgress)(({ theme }) => ({
   svg: {
     color: theme.palette.primary.main
   }
 }));
-const SearchFieldBase = material.styled(material.TextField, {
-  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused"
+const SearchInputAdornment = material.styled(material.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 = 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": {
-      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] = React.useState(false);
-  const clearTextLabelValue = Alert$1.useTranslationFallback(
+  const clearButtonLabelValue = Alert$1.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__ */ 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,
     {
@@ -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__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) }) }),
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : !disabled && !minimized && (value ?? defaultValue) ? endAdornment || /* @__PURE__ */ jsxRuntime.jsx(
-          cssUtils.IconButton,
-          {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon, {}),
-            onClick: handleClearText,
-            size,
-            color: "default",
-            disabled,
-            tooltip: clearTextLabelValue
-          }
-        ) : void 0 }),
+        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