x-ui-design 1.0.31 → 1.0.33

package/lib/components/Input/Input.tsx

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

package/lib/components/Select/Select.tsx

@@ -749,7 +749,7 @@ const Select = ({
                   className={`${prefixCls}-tag-input`}
                 />
                 {!hasMode && !searchQuery.length ? (selected === ''
-                  ? placeholder
+                  ? <div style={{ display: 'contents' }}>{placeholder}</div>
                   : selectedOption) : null}
               </div>
             ) : !hasMode ? (
@@ -758,7 +758,7 @@ const Select = ({
                 style={{ opacity: isOpen || selected === '' ? '0.6' : '1' }}
               >
                 {selected === ''
-                  ? placeholder
+                  ? <div style={{ display: 'contents' }}>{placeholder}</div>
                   : selectedOption}
               </div>
             ) : null}
@@ -770,7 +770,7 @@ const Select = ({
             style={{ opacity: isOpen || selected === '' ? '0.6' : '1' }}
           >
             {selected === ''
-              ? placeholder
+              ? <div style={{ display: 'contents' }}>{placeholder}</div>
               : selectedOption}
           </div>
         ) : null}

package/lib/components/Switch/Switch.tsx

@@ -48,12 +48,12 @@ const Switch = ({
 
   return (
     <div
+      tabIndex={0}
+      role="button"
       className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper ${className} ${disabled ? `${prefixCls}__disabled ${prefixClsV3}__disabled` : ''}`}
       style={style}
     >
       <div
-        tabIndex={0}
-        role="button"
         className={`${prefixCls} ${prefixClsV3} ${internalChecked ? `${prefixCls}__checked ${prefixClsV3}__checked` : ''}`}
         onClick={handleClick}
       >

package/lib/types/input.ts

@@ -9,7 +9,7 @@ import {
     ReactNode,
     TextareaHTMLAttributes
 } from 'react';
-import { DefaultProps, RuleType, SizeType, SyntheticBaseEvent } from '.';
+import { DefaultProps, SizeType, SyntheticBaseEvent } from '.';
 
 export type InputProps = Omit<
     InputHTMLAttributes<HTMLInputElement>,
@@ -38,7 +38,7 @@ export type InputProps = Omit<
         mask?: string;
         maskChar?: string;
         maskRegex?: RegExp;
-        ref?: RuleType;
+        ref?: ForwardedRef<HTMLInputElement>,
     };
 
 export type TextareaProps = Omit<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",
@@ -29,8 +29,8 @@
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.2.0",
     "postcss": "^8.5.3",
@@ -41,7 +41,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }

package/src/app/page.tsx

@@ -1,21 +1,22 @@
 'use client'
 
-import Input from "../../lib/components/Input/Input";
-import { useEffect, useRef } from "react";
+import { Result } from "../../lib/components/Result";
+import { Button } from '../../lib/components/Button';
+import { Popover } from '../../lib/components/Popover';
+import { Select } from "../../lib/components/Select";
+import Option from "../../lib/components/Select/Option/Option";
+import Tag from "../../lib/components/Select/Tag/Tag";
 
 export default function Home() {
-    const ref = useRef<any>(null);
-
-    useEffect(() => {
-        if (ref.current) {
-            console.log(ref.current);
-
-            ref.current?.focus();
-        }
-    }, [])
-
     return (
-        <Input ref={ref} />
+        <Select mode="tags"
+            tagRender={(tagProps) => {
+                return <Tag {...tagProps}>{tagProps.value}</Tag>
+            }}
+            options={[{ value: 'tag_1', label: 'Tag 1' }]}
+        />
+        // {/* <Option value={'tag_1'}>tag 1</Option> */}
+        // </Select>
     )
 }