@npm_leadtech/legal-lib-components 5.43.8 → 5.43.10

package/dist/css/styles.css

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

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

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

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

@@ -1,16 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* 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 React, { useCallback, 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);
     };
-    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: '' }))] }));
+    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: '' }) }))] }));
 });
 Input.displayName = 'Input';

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

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

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

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

package/package.json

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