next-helios-fe 1.8.117 → 1.8.119

package/package.json

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

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

@@ -1466,16 +1466,20 @@ 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");
   const [openDropdown, setOpenDropdown] = useState(false);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
@@ -1497,12 +1501,38 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
 
   useEffect(() => {
     if (rest.value) {
+      setTempValue(
+        (rest.value as string).replace(
+          new RegExp(
+            `^${
+              countryPhoneCode.find((item) =>
+                (rest.value as string).startsWith(item.dial_code)
+              )?.dial_code
+            }`
+          ),
+          ""
+        )
+      );
+
       setSelectedCountry(
         countryPhoneCode.find((item) =>
           (rest.value as string).startsWith(item.dial_code)
         )?.dial_code || ""
       );
     } else if (rest.defaultValue) {
+      setTempValue(
+        (rest.defaultValue as string).replace(
+          new RegExp(
+            `^${
+              countryPhoneCode.find((item) =>
+                (rest.value as string).startsWith(item.dial_code)
+              )?.dial_code
+            }`
+          ),
+          ""
+        )
+      );
+
       setSelectedCountry(
         countryPhoneCode.find((item) =>
           (rest.defaultValue as string).startsWith(item.dial_code)
@@ -1511,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}`}>
@@ -1536,25 +1580,30 @@ 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
-              type="number"
+              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"
               required={rest.required}
               disabled={rest.disabled}
-              value={((rest.value || "") as string).split(selectedCountry)[1]}
+              value={tempValue || ""}
               onChange={(e) => {
-                rest.onChange &&
-                  rest.onChange({
-                    target: {
-                      value: `${selectedCountry}${e.target.value}`,
-                    } as HTMLInputElement,
-                  } as any);
+                if (/^\d*$/.test(e.target.value)) {
+                  setTempValue(e.target.value);
+
+                  rest.onChange &&
+                    rest.onChange({
+                      target: {
+                        value: `${selectedCountry}${e.target.value}`,
+                      } as HTMLInputElement,
+                    } as any);
+                }
               }}
             />
           </div>
@@ -1583,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