aural-ui 2.1.7 → 2.1.8

package/dist/components/input/Input.stories.tsx

@@ -37,6 +37,9 @@ const meta: Meta<typeof Input> = {
     fullWidth: {
       control: { type: "boolean" },
     },
+    transparentOnAutofill: {
+      control: { type: "boolean" },
+    },
   },
 }
 

package/dist/components/input/index.tsx

@@ -95,6 +95,7 @@ type InputProps = {
   min?: number
   max?: number
   unstyled?: boolean
+  transparentOnAutofill?: boolean
   classes?: {
     root?: string
     label?: string
@@ -237,6 +238,7 @@ const InputBase = forwardRef<
     maxLength?: number
     startIcon?: boolean // Indicates if start icon spacing should be applied
     endIcon?: boolean // Indicates if end icon spacing should be applied
+    transparentOnAutofill?: boolean
   } & Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
     "onChange" | "onBlur" | "onFocus" | "defaultValue"
@@ -263,6 +265,7 @@ const InputBase = forwardRef<
       startIcon = false,
       endIcon = false,
       ariaLabel,
+      transparentOnAutofill = false,
       ...props
     },
     ref
@@ -289,6 +292,16 @@ const InputBase = forwardRef<
     // Determine focus state
     const state = disabled ? "disabled" : isFocused ? "focused" : "default"
 
+    const autoFillStyle = transparentOnAutofill
+      ? {
+          WebkitTextFillColor: "#ffffff",
+          color: "#ffffff",
+          caretColor: "#ffffff",
+          transition: "background-color 999999s ease-in-out 0s",
+          backgroundColor: "transparent",
+        }
+      : {}
+
     // Apply styles only if not unstyled
     const inputClassName = unstyled
       ? className
@@ -322,6 +335,7 @@ const InputBase = forwardRef<
         onBlur={handleBlur}
         required={required}
         maxLength={maxLength}
+        style={autoFillStyle}
         {...props}
       />
     )
@@ -356,6 +370,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       decoration,
       unstyled = false,
       classes = {},
+      transparentOnAutofill = false,
       ...props
     },
     ref
@@ -436,6 +451,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             endIcon={!!(endIcon || type === "password")}
             unstyled={unstyled}
             className={unstyled ? className : classes.input}
+            transparentOnAutofill={transparentOnAutofill}
             {...props}
           />