next-helios-fe 1.8.6 → 1.8.7

package/package.json

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

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

@@ -4,7 +4,10 @@ import { Dropdown } from "../../../components";
 import { Icon } from "@iconify/react";
 
 export interface MultipleSelectProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "defaultvalue" | "value" | "onChange"
+  > {
   menus: {
     label: string;
     value: string;
@@ -45,7 +48,9 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   const [openDropdown, setOpenDropdown] = useState(false);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
   const [dropdownHeight, setDropdownHeight] = useState<number>(0);
-  const inputRef = useRef<HTMLDivElement>(null);
+  const fakeInputRef = useRef<HTMLDivElement>(null);
+  const itemContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
@@ -77,6 +82,22 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
       });
   }, [tempValue]);
 
+  useEffect(() => {
+    if (tempValue.length === 0) {
+      fakeInputRef.current;
+    }
+  }, [tempValue]);
+
+  useEffect(() => {
+    if (tempValue.length === 0) {
+      inputRef.current?.setCustomValidity(
+        "Please select some items in the list."
+      );
+    } else {
+      inputRef.current?.setCustomValidity("");
+    }
+  }, [tempValue]);
+
   return (
     <div className="flex flex-row-reverse items-end">
       <label className={`grid gap-2 ${width}`}>
@@ -103,7 +124,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
         )}
         <div className="relative flex items-center">
           <div
-            ref={inputRef}
+            ref={fakeInputRef}
             className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
               disabled
                 ? "bg-secondary-light cursor-default pointer-events-none"
@@ -119,10 +140,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               setOpenDropdown(true);
               dropdownRef.current?.click();
               setDropdownWidth(
-                inputRef?.current?.getBoundingClientRect()?.width || 0
+                fakeInputRef?.current?.getBoundingClientRect()?.width || 0
               );
               setDropdownHeight(
-                inputRef?.current?.getBoundingClientRect()?.height || 0
+                fakeInputRef?.current?.getBoundingClientRect()?.height || 0
               );
             }}
             {...rest}
@@ -136,7 +157,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 {placeholder}
               </span>
             ) : (
-              <div className="flex flex-wrap gap-2 h-min pointer-events-none invisible">
+              <div
+                ref={itemContainerRef}
+                className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
+              >
                 {tempValue?.map((item) => {
                   return (
                     <div
@@ -163,9 +187,14 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               />
             </div>
           </div>
+          <input
+            ref={inputRef}
+            type="text"
+            className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
+          />
           <div
-            className="absolute flex flex-wrap gap-2 h-min ps-4 pe-14 pointer-events-none"
-            style={{ width: dropdownWidth - 52 }}
+            className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
+            style={{ width: itemContainerRef.current?.clientWidth }}
           >
             {tempValue?.map((item) => {
               return (

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

@@ -61,6 +61,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("");
+    }
+  }, [tempValue]);
+
   return (
     <div className="flex flex-row-reverse items-end">
       <label className={`grid gap-2 ${width}`}>
@@ -98,12 +106,12 @@ export const Select: React.FC<SelectProps> = ({
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
-            readOnly
             value={
               tempValue
                 ? menus.find((item) => item.value === tempValue)?.label
                 : ""
             }
+            onChange={(e) => {}}
             onClick={(e) => {
               e.preventDefault();
               setOpenDropdown(true);