next-helios-fe 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/input/file.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Icon } from "@iconify/react";
 
 export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -22,6 +22,7 @@ export const File: React.FC<FileProps> = ({
   value,
   ...rest
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const [tempFile, setTempFile] = useState<any>([]);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
@@ -78,6 +79,7 @@ export const File: React.FC<FileProps> = ({
             }`}
           >
             <input
+              ref={inputRef}
               type="file"
               className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
               onChange={(e) => {
@@ -184,6 +186,9 @@ export const File: React.FC<FileProps> = ({
             type="button"
             className="p-2 rounded-full hover:bg-secondary-light"
             disabled={rest.disabled}
+            onClick={() => {
+              inputRef.current?.click();
+            }}
           >
             <Icon icon="mi:attachment" className="text-xl" />
           </button>