x-ui-design 1.0.22 → 1.0.24

package/lib/components/Input/Input.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, {
+  forwardRef,
   KeyboardEvent,
   MouseEvent,
   useEffect,
@@ -17,15 +18,7 @@ import { ErrorIcon } from '../Icons/Icons';
 import { applyMask, MASK_CHAR, MASK_REGEX, stripMask } from '../../helpers/mask';
 import './style.css';
 
-export interface MyInputHandle {
-  focus: () => void;
-  blur: () => void;
-  input: HTMLInputElement | null;
-  nativeElement: HTMLInputElement | null;
-  setSelectionRange: (start: number, end: number) => void;
-}
-
-const InputComponent = ({
+const InputComponent = forwardRef(({
   size = 'large',
   error,
   suffix,
@@ -53,9 +46,8 @@ const InputComponent = ({
   defaultValue,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   child,
-  ref,
   ...props
-}: InputProps) => {
+}: InputProps, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const lastKeyPressed = useRef<string | null>(null);
   const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
@@ -63,25 +55,22 @@ const InputComponent = ({
   const [iconRenderVisible, setIconRenderVisible] = useState(false);
   const animationRef = useRef<number | null>(null);
 
-  useImperativeHandle<HTMLInputElement, HTMLInputElement>(ref, () => {
-    if (inputRef.current) {
-      const input = inputRef.current;
-      
-      (input as any).setSelectionRangeCustom = (start: number, end: number) => {
-        input.setSelectionRange(start, end);
-      };
-    
-      (input as any).nativeElement = input;
-      
-      return input;
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      console.info('focusing');
+      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);
+      }
     }
-
-    return {
-      focus: () => inputRef.current?.focus(),
-      blur: () => inputRef.current?.blur(),
-      setSelectionRange: () => {},
-    } as any;
-  }, [inputRef]);
+  }), [ref]);
 
   useEffect(() => {
     setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : (value ?? ''));
@@ -219,7 +208,7 @@ const InputComponent = ({
       ) : null}
     </div>
   );
-};
+});
 
 InputComponent.displayName = 'Input';
 

package/package.json

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

package/src/app/page.tsx

@@ -13,6 +13,8 @@ export default function Home() {
 
     useEffect(() => {
         if (ref.current) {
+            console.log(ref.current);
+                        
             ref.current.focus();
         }
     }, [])