next-helios-fe 1.8.118 → 1.8.120

package/package.json

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

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

@@ -78,18 +78,18 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           )}
         </div>
       )}
-      <button
-        type="button"
-        className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark ${
-          options?.variant !== "switch" && "hidden"
-        }`}
-        disabled={rest.disabled}
-        onClick={() => {
-          inputRef.current?.click();
-        }}
-      >
-        <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
-      </button>
+      {options?.variant === "switch" && (
+        <button
+          type="button"
+          className="flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark"
+          disabled={rest.disabled}
+          onClick={() => {
+            inputRef.current?.click();
+          }}
+        >
+          <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
+        </button>
+      )}
     </label>
   );
 };

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

@@ -1466,15 +1466,18 @@ export interface PhoneNumberProps
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
+  selectedCountryDialCode?: (dialCode: any) => void;
 }
 
 export const PhoneNumber: React.FC<PhoneNumberProps> = ({
   options,
   label,
   description,
+  selectedCountryDialCode,
   ...rest
 }) => {
-  const inputRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const divInputRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const [tempValue, setTempValue] = useState("");
   const [selectedCountry, setSelectedCountry] = useState("62");
@@ -1538,6 +1541,20 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
     }
   }, [rest.value, rest.defaultValue]);
 
+  useEffect(() => {
+    if (tempValue.startsWith(selectedCountry)) {
+      inputRef.current?.setCustomValidity("Please enter a valid phone number.");
+    } else {
+      inputRef.current?.setCustomValidity("");
+    }
+  }, [tempValue, selectedCountry]);
+
+  useEffect(() => {
+    if (selectedCountryDialCode) {
+      selectedCountryDialCode(selectedCountry);
+    }
+  }, [selectedCountryDialCode, selectedCountry]);
+
   return (
     <div className="flex flex-row-reverse items-end">
       <label className={`flex flex-col gap-2 ${width}`}>
@@ -1563,12 +1580,13 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
             )}
           </div>
         )}
-        <div ref={inputRef} className="flex flex-row-reverse gap-4">
+        <div ref={divInputRef} className="flex flex-row-reverse gap-4">
           <div className="relative flex-1 flex items-center">
             <div className="absolute left-0 flex justify-center w-14 border-r">
               <span className="text-disabled">{`+${selectedCountry}`}</span>
             </div>
             <input
+              ref={inputRef}
               type="text"
               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}`}
               placeholder="Phone number"
@@ -1585,14 +1603,6 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
                         value: `${selectedCountry}${e.target.value}`,
                       } as HTMLInputElement,
                     } as any);
-
-                  if (e.target.value.startsWith(selectedCountry)) {
-                    e.target.setCustomValidity(
-                      "Please enter a valid phone number."
-                    );
-                  } else {
-                    e.target.setCustomValidity("");
-                  }
                 }
               }}
             />
@@ -1622,7 +1632,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
                 setOpenDropdown(true);
                 dropdownRef.current?.click();
                 setDropdownWidth(
-                  inputRef?.current?.getBoundingClientRect()?.width || 0
+                  divInputRef?.current?.getBoundingClientRect()?.width || 0
                 );
               }}
             />

package/src/components/table/index.tsx

@@ -636,14 +636,16 @@ export const Table: TableComponentProps = ({
               </Dropdown>
             )}
             {options?.toolbar?.search?.show !== false && (
-              <Form.Search
-                options={{ width: "fit" }}
-                placeholder="Search..."
-                value={search}
-                onChange={(e) => {
-                  setSearch(e.target.value);
-                }}
-              />
+              <div className="min-w-40">
+                <Form.Search
+                  options={{ width: "fit" }}
+                  placeholder="Search..."
+                  value={search}
+                  onChange={(e) => {
+                    setSearch(e.target.value);
+                  }}
+                />
+              </div>
             )}
             {options?.toolbar?.export?.show !== false && (
               <Button