next-helios-fe 1.9.7 → 1.9.8

package/package.json

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

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

@@ -27,6 +27,7 @@ export const File: React.FC<FileProps> = ({
   defaultValue,
   value,
   required,
+  onChange,
   ...rest
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -44,10 +45,18 @@ export const File: React.FC<FileProps> = ({
       .querySelector("input[type=file]")
       ?.addEventListener("cancel", (e) => {
         setTempFile([]);
-        rest.onChange && rest.onChange({ target: { files: [] } } as any);
+        onChange && onChange({ target: { files: [] } } as any);
       });
   }, []);
 
+  useEffect(() => {
+    if (tempFile.length === 0) {
+      inputRef.current?.setCustomValidity("Please select a file.");
+    } else {
+      inputRef.current?.setCustomValidity("");
+    }
+  }, [tempFile]);
+
   useEffect(() => {
     if (value) {
       setTempFile(value);
@@ -136,12 +145,31 @@ export const File: React.FC<FileProps> = ({
               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 ${height}`}
               onChange={(e) => {
-                if (rest.onChange) {
-                  rest.onChange({
-                    target: { files: e.target.files } as HTMLInputElement,
-                  } as any);
+                if (
+                  !e.target.files?.[0]?.type.includes("svg") &&
+                  !e.target.files?.[0]?.name.includes(".svg")
+                ) {
+                  if (onChange) {
+                    onChange({
+                      target: { files: e.target.files } as HTMLInputElement,
+                    } as any);
+                  } else {
+                    setTempFile(e.target.files);
+                  }
                 } else {
-                  setTempFile(e.target.files);
+                  if (typeof window !== "undefined") {
+                    alert(
+                      "SVG files are not allowed due to security concerns."
+                    );
+                  }
+
+                  if (onChange) {
+                    onChange({
+                      target: { files: [] } as any,
+                    } as any);
+                  } else {
+                    setTempFile([]);
+                  }
                 }
               }}
               required={required && value?.length === 0}
@@ -165,12 +193,31 @@ export const File: React.FC<FileProps> = ({
                 options?.height === "full" ? "min-h-60 h-full" : "h-60"
               }`}
               onChange={(e) => {
-                if (rest.onChange) {
-                  rest.onChange({
-                    target: { files: e.target.files } as HTMLInputElement,
-                  } as any);
+                if (
+                  !e.target.files?.[0]?.type.includes("svg") &&
+                  !e.target.files?.[0]?.name.includes(".svg")
+                ) {
+                  if (onChange) {
+                    onChange({
+                      target: { files: e.target.files } as HTMLInputElement,
+                    } as any);
+                  } else {
+                    setTempFile(e.target.files);
+                  }
                 } else {
-                  setTempFile(e.target.files);
+                  if (typeof window !== "undefined") {
+                    alert(
+                      "SVG files are not allowed due to security concerns."
+                    );
+                  }
+
+                  if (onChange) {
+                    onChange({
+                      target: { files: [] } as any,
+                    } as any);
+                  } else {
+                    setTempFile([]);
+                  }
                 }
               }}
               onDragEnter={(e) => {

package/src/components/media/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { AudioPlayer, type AudioPlayerProps } from "./audio-player";
+import { AudioPlayer, type AudioPlayerProps } from "./audioPlayer";
 
 interface MediaProps extends React.FormHTMLAttributes<HTMLFormElement> {
   children: React.ReactNode;