next-helios-fe 1.8.10 → 1.8.12

package/package.json

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

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

@@ -11,7 +11,7 @@ export interface FileProps extends React.InputHTMLAttributes<HTMLInputElement> {
     maxSizeInMb?: number;
     buttonOnly?: boolean;
     width?: "full" | "fit";
-    height?: "short" | "medium" | "high";
+    height?: "short" | "medium" | "high" | "full";
     hideInputDetail?: boolean;
   };
   defaultValue?: any[];
@@ -56,7 +56,11 @@ export const File: React.FC<FileProps> = ({
   }, [value, defaultValue]);
 
   return (
-    <label className={`grid gap-2 ${width}`}>
+    <label
+      className={`grid gap-2 ${width} ${
+        options?.height === "full" && "h-full"
+      }`}
+    >
       {!options?.buttonOnly &&
         (label ||
           (!options?.hideInputDetail &&
@@ -93,8 +97,8 @@ export const File: React.FC<FileProps> = ({
         )}
       <div
         className={`flex items-center gap-4 ${
-          !options?.buttonOnly && "flex-row-reverse"
-        }`}
+          options?.height === "full" && "h-full"
+        } ${!options?.buttonOnly && "flex-row-reverse"}`}
       >
         {options?.variant !== "drag&drop" ? (
           <div
@@ -127,10 +131,12 @@ export const File: React.FC<FileProps> = ({
             </span>
           </div>
         ) : (
-          <div className="relative flex-1 flex items-center">
+          <div className="relative flex-1 flex items-center h-full">
             <input
               type="file"
-              className={`w-full h-60 px-4 border-default border border-dashed rounded-md bg-secondary-bg text-transparent cursor-pointer file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light`}
+              className={`w-full px-4 border-default border border-dashed rounded-md bg-secondary-bg text-transparent cursor-pointer file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light ${
+                options?.height === "full" ? "min-h-60 h-full" : "h-60"
+              }`}
               onChange={(e) => {
                 if (rest.onChange) {
                   rest.onChange({
@@ -189,14 +195,16 @@ export const File: React.FC<FileProps> = ({
               {...rest}
             />
             <div className="absolute flex flex-col gap-8 justify-center items-center w-full h-full px-4 pointer-events-none">
-              <Icon
-                icon={
-                  tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
-                }
-                className={`text-5xl ${
-                  tempFile.length !== 0 ? "" : "text-disabled"
-                }`}
-              />
+              <div>
+                <Icon
+                  icon={
+                    tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
+                  }
+                  className={`text-5xl ${
+                    tempFile.length !== 0 ? "" : "text-disabled"
+                  }`}
+                />
+              </div>
               <div className="flex flex-col gap-2 items-center">
                 {tempFile.length !== 0 ? (
                   <span>{tempFile[0]?.name}</span>

package/src/components/form/other/multipleSelect.tsx

@@ -76,12 +76,14 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   }, [value]);
 
   useEffect(() => {
-    if (tempValue.length === 0) {
-      inputRef.current?.setCustomValidity(
-        "Please select some items in the list."
-      );
-    } else {
-      inputRef.current?.setCustomValidity("");
+    if (required) {
+      if (tempValue.length === 0) {
+        inputRef.current?.setCustomValidity(
+          "Please select some items in the list."
+        );
+      } else {
+        inputRef.current?.setCustomValidity("");
+      }
     }
   }, [tempValue]);
 

package/src/components/form/other/phoneNumber.tsx

@@ -1605,6 +1605,8 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
             type="number"
             className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             value={tempValue[1]}
+            required={rest.required}
+            disabled={rest.disabled}
             onChange={(e) => {
               setTempValue((prev) => [prev[0], e.target.value]);
             }}

package/src/components/form/other/select.tsx

@@ -62,10 +62,14 @@ export const Select: React.FC<SelectProps> = ({
   }, [rest.value, rest.defaultValue]);
 
   useEffect(() => {
-    if (!tempValue) {
-      inputRef.current?.setCustomValidity("Please select an item in the list.");
-    } else {
-      inputRef.current?.setCustomValidity("");
+    if (rest.required) {
+      if (!tempValue) {
+        inputRef.current?.setCustomValidity(
+          "Please select an item in the list."
+        );
+      } else {
+        inputRef.current?.setCustomValidity("");
+      }
     }
   }, [tempValue]);