@npm_leadtech/legal-lib-components 5.43.7 → 5.43.8

package/dist/css/styles.css

@@ -2242,13 +2242,12 @@ h2.react-datepicker__current-month {
   right: 0;
   bottom: 0;
 }
-.e-text .input-icon-password-button {
+.e-text .input-icon-password {
   cursor: pointer;
   position: absolute;
-  right: 0px;
-  bottom: 6px;
-  background: none;
-  border: none;
+  transform: translate(-40%, -65%);
+  right: 0;
+  bottom: 0;
 }
 .e-text .formgroup--input__button {
   align-self: flex-start;

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.styled.js

@@ -9,7 +9,7 @@ export const MidBannerRatafiaSampleStyled = styled.div `
       img {
         border-radius: 8px 8px 0 0;
         box-shadow: var(--box-shadow-small);
-        width: 727px;
+        max-width: $sm;
       }
     }
     &__sumarized-tag {

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.styled.ts

@@ -10,7 +10,7 @@ export const MidBannerRatafiaSampleStyled = styled.div`
       img {
         border-radius: 8px 8px 0 0;
         box-shadow: var(--box-shadow-small);
-        width: 727px;
+        max-width: $sm;
       }
     }
     &__sumarized-tag {

package/dist/src/components/molecules/TextInput/Input.d.ts

@@ -3,7 +3,7 @@ interface InputProps {
     name: string;
     placeholder: string;
     maxLength: number;
-    value: string;
+    value: any;
     type: 'password' | 'text' | 'number' | 'tel';
     disabled: boolean;
     className: string;

package/dist/src/components/molecules/TextInput/Input.js

@@ -1,21 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useState } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
 import eyeIcon from '../../../../images/svg/eye-24-px.svg';
 export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength }, ref) => {
-    const [currentValue, setCurrentValue] = useState(value);
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
         if (value !== null)
             setHidden(!hidden);
     };
-    const handleChange = useCallback((event) => {
-        setCurrentValue(event.target.value);
-        onChange(event);
-    }, [currentValue]);
-    return (_jsxs(_Fragment, { children: [_jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: className, maxLength: maxLength, placeholder: placeholder, onChange: handleChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: currentValue, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
-                    if (e.key === 'Enter')
-                        showPassword();
-                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: className, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("img", { className: 'input-icon-password', src: hidden ? eyeIcon : eyeCloseIcon, onClick: showPassword, alt: '' }))] }));
 });
 Input.displayName = 'Input';

package/dist/src/components/molecules/TextInput/Input.tsx

@@ -1,4 +1,8 @@
-import React, { useCallback, useState } from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react'
 
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
 import eyeIcon from '../../../../images/svg/eye-24-px.svg'
@@ -7,7 +11,7 @@ interface InputProps {
   name: string
   placeholder: string
   maxLength: number
-  value: string
+  value: any
   type: 'password' | 'text' | 'number' | 'tel'
   disabled: boolean
   className: string
@@ -36,21 +40,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     }: InputProps,
     ref
   ) => {
-    const [currentValue, setCurrentValue] = useState(value)
     const [hidden, setHidden] = useState(true)
 
-    const showPassword = (): void => {
+    const showPassword = (): any => {
       if (value !== null) setHidden(!hidden)
     }
 
-    const handleChange = useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        setCurrentValue(event.target.value)
-        onChange(event)
-      },
-      [currentValue]
-    )
-
     return (
       <>
         <input
@@ -60,26 +55,18 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           className={className}
           maxLength={maxLength}
           placeholder={placeholder}
-          onChange={handleChange}
+          onChange={onChange}
           onClick={onClick}
           onKeyDown={onKeyDown}
           onKeyUp={onKeyUp}
           onBlur={onBlur}
-          value={currentValue}
+          value={value}
           data-qa={name}
           disabled={disabled}
           ref={ref}
         />
         {type === 'password' && (
-          <button
-            className='input-icon-password-button'
-            onClick={showPassword}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') showPassword()
-            }}
-          >
-            <img src={hidden ? eyeIcon : eyeCloseIcon} alt='' />
-          </button>
+          <img className='input-icon-password' src={hidden ? eyeIcon : eyeCloseIcon} onClick={showPassword} alt='' />
         )}
       </>
     )

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -155,13 +155,12 @@
     bottom: 0;
   }
 
-  .input-icon-password-button {
+  .input-icon-password {
     cursor: pointer;
     position: absolute;
-    right: 0px;
-    bottom: 6px;
-    background: none;
-    border: none;
+    transform: translate(-40%, -65%);
+    right: 0;
+    bottom: 0;
   }
 
   .formgroup--input__button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "5.43.7",
+  "version": "5.43.8",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",