@carto/meridian-ds 2.6.1-alpha-searchfield.7 → 2.6.1-alpha-searchfield.9

package/dist/components/index.cjs

@@ -5066,6 +5066,10 @@ const SearchInputAdornment = material.styled(material.InputAdornment, {
 })(
   ({ 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(1) : void 0
     },
@@ -5091,9 +5095,9 @@ const SearchFieldBase = material.styled(material.TextField, {
 })(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
   "&.MuiTextField-root .MuiInputBase-root": {
     paddingRight: theme.spacing(1),
-    transition: theme.transitions.create("width", {
+    transition: theme.transitions.create(["width", "padding"], {
       easing: theme.transitions.easing.easeInOut,
-      duration: theme.transitions.duration.shortest
+      duration: theme.transitions.duration.standard
     }),
     "&.MuiInputBase-sizeSmall": {
       paddingRight: theme.spacing(0.5)
@@ -5106,8 +5110,12 @@ const SearchFieldBase = material.styled(material.TextField, {
     },
     // Input
     "& .MuiInputBase-input": {
-      pointerEvents: isInputFocused ? "auto" : "none"
+      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": {
@@ -5118,14 +5126,14 @@ const SearchFieldBase = material.styled(material.TextField, {
     ...minimized && {
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
       padding: 0,
       width: theme.spacing(6),
       cursor: "pointer",
       "& .MuiInputBase-input": {
-        display: "none"
+        width: 0
       },
       "&.MuiInputBase-sizeSmall": {
+        padding: 0,
         width: theme.spacing(4)
       }
     }
@@ -5133,6 +5141,10 @@ const SearchFieldBase = material.styled(material.TextField, {
   // 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`
@@ -5261,8 +5273,8 @@ function _SearchField({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SearchFieldBase,
     {
-      value: minimized ? "" : value,
       defaultValue,
+      value: minimized ? "" : value,
       placeholder: minimized ? "" : placeholder,
       onChange,
       onClick,

package/dist/components/index.js

@@ -5066,6 +5066,10 @@ const SearchInputAdornment = styled(InputAdornment, {
 })(
   ({ 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(1) : void 0
     },
@@ -5091,9 +5095,9 @@ const SearchFieldBase = styled(TextField, {
 })(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
   "&.MuiTextField-root .MuiInputBase-root": {
     paddingRight: theme.spacing(1),
-    transition: theme.transitions.create("width", {
+    transition: theme.transitions.create(["width", "padding"], {
       easing: theme.transitions.easing.easeInOut,
-      duration: theme.transitions.duration.shortest
+      duration: theme.transitions.duration.standard
     }),
     "&.MuiInputBase-sizeSmall": {
       paddingRight: theme.spacing(0.5)
@@ -5106,8 +5110,12 @@ const SearchFieldBase = styled(TextField, {
     },
     // Input
     "& .MuiInputBase-input": {
-      pointerEvents: isInputFocused ? "auto" : "none"
+      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": {
@@ -5118,14 +5126,14 @@ const SearchFieldBase = styled(TextField, {
     ...minimized && {
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
       padding: 0,
       width: theme.spacing(6),
       cursor: "pointer",
       "& .MuiInputBase-input": {
-        display: "none"
+        width: 0
       },
       "&.MuiInputBase-sizeSmall": {
+        padding: 0,
         width: theme.spacing(4)
       }
     }
@@ -5133,6 +5141,10 @@ const SearchFieldBase = styled(TextField, {
   // 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`
@@ -5261,8 +5273,8 @@ function _SearchField({
   return /* @__PURE__ */ jsx(
     SearchFieldBase,
     {
-      value: minimized ? "" : value,
       defaultValue,
+      value: minimized ? "" : value,
       placeholder: minimized ? "" : placeholder,
       onChange,
       onClick,

package/dist/types/components/SearchField/SearchField.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchField/SearchField.stories.tsx"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CuB,CAAA;AAEpC,eAAe,OAAO,CAAA;AAkXtB,eAAO,MAAM,UAAU;0BAhXkB,kBAAkB;;;;;;CAqX1D,CAAA;AAED,eAAO,MAAM,QAAQ;uCA7W+B,kBAAkB;CA+WrE,CAAA;AAED,eAAO,MAAM,MAAM;qDAhVhB,kBAAkB;;;;;;;;;;;;;;;;;CAoVpB,CAAA;AAED,eAAO,MAAM,KAAK;qDAtVf,kBAAkB;;;;;;;;;;;;;;;;;CA0VpB,CAAA;AAED,eAAO,MAAM,QAAQ;uCAvG+B,kBAAkB;CAyGrE,CAAA"}
+{"version":3,"file":"SearchField.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchField/SearchField.stories.tsx"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CuB,CAAA;AAEpC,eAAe,OAAO,CAAA;AAyYtB,eAAO,MAAM,UAAU;0BAvYkB,kBAAkB;;;;;;CA4Y1D,CAAA;AAED,eAAO,MAAM,QAAQ;uCApY+B,kBAAkB;CAsYrE,CAAA;AAED,eAAO,MAAM,MAAM;qDAvWhB,kBAAkB;;;;;;;;;;;;;;;;;CA2WpB,CAAA;AAED,eAAO,MAAM,KAAK;qDA7Wf,kBAAkB;;;;;;;;;;;;;;;;;CAiXpB,CAAA;AAED,eAAO,MAAM,QAAQ;uCA9H+B,kBAAkB;CAgIrE,CAAA"}

package/dist/types/components/SearchField/SearchField.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchField/SearchField.styled.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,UAAU;gBAEN,OAAO;eAAa,OAAO;UAY3C,CAAA;AAED,eAAO,MAAM,eAAe;;qPAEzB,CAAA;AAEH,eAAO,MAAM,iBAAiB,8KAI3B,CAAA;AAEH,eAAO,MAAM,oBAAoB;;;gBAEhB,OAAO;eAAa,OAAO;UA2B3C,CAAA;AAED,eAAO,MAAM,eAAe;;;eAIf,OAAO;qBACD,OAAO;eACb,gBAAgB,CAAC,SAAS,CAAC;UA6FrC,CAAA"}
+{"version":3,"file":"SearchField.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchField/SearchField.styled.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,UAAU;gBAEN,OAAO;eAAa,OAAO;UAY3C,CAAA;AAED,eAAO,MAAM,eAAe;;qPAEzB,CAAA;AAEH,eAAO,MAAM,iBAAiB,8KAI3B,CAAA;AAEH,eAAO,MAAM,oBAAoB;;;gBAEhB,OAAO;eAAa,OAAO;UAgC3C,CAAA;AAED,eAAO,MAAM,eAAe;;;eAIf,OAAO;qBACD,OAAO;eACb,gBAAgB,CAAC,SAAS,CAAC;UAuGrC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.6.1-alpha-searchfield.7",
+  "version": "2.6.1-alpha-searchfield.9",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {