next-helios-fe 1.8.15 → 1.8.17

package/package.json

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

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

@@ -1463,7 +1463,6 @@ export interface PhoneNumberProps
   label?: string;
   description?: string;
   options?: {
-    variant?: "default" | "split";
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
   };
@@ -1477,7 +1476,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
 }) => {
   const inputRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLButtonElement>(null);
-  const [tempValue, setTempValue] = useState(["62", ""]);
+  const [selectedCountry, setSelectedCountry] = useState("62");
   const [openDropdown, setOpenDropdown] = useState(false);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
@@ -1497,26 +1496,20 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
   }, []);
 
   useEffect(() => {
-    if (options?.variant !== "split") {
-      if (rest.value) {
-        setTempValue((prev) => [prev[0], rest.value as string]);
-        return;
-      } else if (rest.defaultValue) {
-        setTempValue((prev) => [prev[0], rest.defaultValue as string]);
-        return;
-      }
+    if (rest.value) {
+      setSelectedCountry(
+        countryPhoneCode.find((item) =>
+          (rest.value as string).startsWith(item.dial_code)
+        )?.dial_code || ""
+      );
+    } else if (rest.defaultValue) {
+      setSelectedCountry(
+        countryPhoneCode.find((item) =>
+          (rest.defaultValue as string).startsWith(item.dial_code)
+        )?.dial_code || ""
+      );
     }
-  }, [options?.variant, rest.value, rest.defaultValue]);
-
-  useEffect(() => {
-    rest.onChange &&
-      rest.onChange({
-        target: {
-          value:
-            options?.variant === "split" ? tempValue.join("") : tempValue[1],
-        } as HTMLInputElement,
-      } as React.ChangeEvent<HTMLInputElement>);
-  }, [tempValue]);
+  }, [rest.value, rest.defaultValue]);
 
   return (
     <div className="flex flex-row-reverse items-end">
@@ -1545,60 +1538,60 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
         )}
         <div ref={inputRef} className="flex flex-row-reverse gap-4">
           <div className="relative flex-1 flex items-center">
-            {options?.variant === "split" && (
-              <div className="absolute left-0 flex justify-center w-14 border-r">
-                <span className="text-disabled">{`+${tempValue[0]}`}</span>
-              </div>
-            )}
+            <div className="absolute left-0 flex justify-center w-14 border-r">
+              <span className="text-disabled">{`+${selectedCountry}`}</span>
+            </div>
             <input
               type="number"
-              className={`w-full 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} ${
-                options?.variant === "split" ? "ps-16 pe-4" : "px-4"
-              }`}
-              placeholder={rest.placeholder}
-              value={tempValue[1]}
+              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]}
               onChange={(e) => {
-                setTempValue((prev) => [prev[0], e.target.value]);
+                rest.onChange &&
+                  rest.onChange({
+                    target: {
+                      value: `${selectedCountry}${e.target.value}`,
+                    } as HTMLInputElement,
+                  } as any);
               }}
             />
           </div>
-          {options?.variant === "split" && (
-            <div className="relative flex items-center cursor-pointer">
-              <input
-                type="text"
-                className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg 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 disabled:cursor-default ${height} ${
-                  openDropdown
-                    ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
-                    : "border-default placeholder:translate-x-0"
-                }`}
-                disabled={rest.disabled}
-                value={`${
-                  countryPhoneCode.find(
-                    (item) => item.dial_code === tempValue[0]
-                  )?.emoji
-                } ${
-                  countryPhoneCode.find(
-                    (item) => item.dial_code === tempValue[0]
-                  )?.code
-                }`}
-                onClick={(e) => {
-                  e.preventDefault();
-                  setOpenDropdown(true);
-                  dropdownRef.current?.click();
-                  setDropdownWidth(
-                    inputRef?.current?.getBoundingClientRect()?.width || 0
-                  );
-                }}
+          <div className="relative flex items-center cursor-pointer">
+            <input
+              type="text"
+              className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg 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 disabled:cursor-default ${height} ${
+                openDropdown
+                  ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
+                  : "border-default placeholder:translate-x-0"
+              }`}
+              readOnly
+              disabled={rest.disabled}
+              value={`${
+                countryPhoneCode.find(
+                  (item) => selectedCountry === item.dial_code
+                )?.emoji
+              } ${
+                countryPhoneCode.find(
+                  (item) => selectedCountry === item.dial_code
+                )?.code
+              }`}
+              onClick={(e) => {
+                e.preventDefault();
+                setOpenDropdown(true);
+                dropdownRef.current?.click();
+                setDropdownWidth(
+                  inputRef?.current?.getBoundingClientRect()?.width || 0
+                );
+              }}
+            />
+            <div className="absolute right-4 text-xl text-disabled pointer-events-none">
+              <Icon
+                icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
               />
-              <div className="absolute right-4 text-xl text-disabled pointer-events-none">
-                <Icon
-                  icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
-                />
-              </div>
             </div>
-          )}
+          </div>
         </div>
       </label>
       <div className="w-0 overflow-hidden">
@@ -1630,9 +1623,16 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
                     key={index}
                     type="button"
                     className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
-                    disabled={tempValue[0] === item.dial_code}
+                    disabled={selectedCountry === item.dial_code}
                     onClick={() => {
-                      setTempValue((prev) => [item.dial_code, prev[1]]);
+                      rest.onChange &&
+                        rest.onChange({
+                          target: {
+                            value: `${item.dial_code}${
+                              (rest.value as string).split(selectedCountry)[1]
+                            }`,
+                          } as HTMLInputElement,
+                        } as any);
                       setOpenDropdown(false);
                     }}
                   >
@@ -1644,6 +1644,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
           </div>
         </Dropdown>
       </div>
+      <input type="text" className="hidden" {...rest} />
     </div>
   );
 };