x-ui-design 1.0.28 → 1.0.30

package/lib/components/Input/Input.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, {
+  ForwardedRef,
   KeyboardEvent,
   MouseEvent,
   useEffect,
@@ -17,7 +18,15 @@ import { ErrorIcon } from '../Icons/Icons';
 import { applyMask, MASK_CHAR, MASK_REGEX, stripMask } from '../../helpers/mask';
 import './style.css';
 
-const InputComponent = ({
+type InputHandle = {
+  focus: () => void;
+  input: HTMLInputElement | null;
+  blur: () => void;
+  nativeElement: HTMLInputElement | null;
+  setSelectionRange: (start: number, end: number) => void;
+}
+
+const InputComponent = React.forwardRef<InputHandle, InputProps>(({
   size = 'large',
   error,
   suffix,
@@ -45,9 +54,8 @@ const InputComponent = ({
   defaultValue,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   child,
-  ref,
   ...props
-}: InputProps) => {
+}, ref: ForwardedRef<InputHandle>) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const lastKeyPressed = useRef<string | null>(null);
   const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
@@ -56,18 +64,20 @@ const InputComponent = ({
   const animationRef = useRef<number | null>(null);
 
   useImperativeHandle(ref, () => ({
-    retry: () => ({
-      focus: () => inputRef.current?.focus(),
-      blur: () => inputRef.current?.blur(),
-      input: inputRef.current,
-      nativeElement: inputRef.current,
-      setSelectionRange: (start: number, end: number) => {
-        if (inputRef.current) {
-          inputRef.current.setSelectionRange(start, end);
-        }
+    focus: () => {
+      inputRef.current?.focus()
+    },
+    input: inputRef.current,
+    blur: () => {
+      inputRef.current?.blur()
+    },
+    nativeElement: inputRef.current,
+    setSelectionRange: (start: number, end: number) => {
+      if (inputRef.current) {
+        inputRef.current.setSelectionRange(start, end);
       }
-    })
-  }));
+    }
+  }), []);
 
   useEffect(() => {
     setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : (value ?? ''));
@@ -205,7 +215,7 @@ const InputComponent = ({
       ) : null}
     </div>
   );
-};
+});
 
 InputComponent.displayName = 'Input';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -10,7 +10,7 @@ export default function Home() {
         if (ref.current) {
             console.log(ref.current);
 
-            ref.current?.retry().focus();
+            ref.current?.focus();
         }
     }, [])