next-helios-fe 1.8.116 → 1.8.118

package/package.json

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

package/src/components/chart/index.tsx

@@ -28,7 +28,14 @@ interface ChartProps {
   labels?: string[];
   series: any;
   xaxis?: {
-    categories: string[];
+    categories?: string[];
+    datetime?: boolean;
+    min?: number;
+    max?: number;
+  };
+  yaxis?: {
+    min?: number;
+    max?: number;
   };
   options?: {
     theme?: "light" | "dark";
@@ -47,6 +54,7 @@ export const Chart: React.FC<ChartProps> = ({
   series,
   labels,
   xaxis,
+  yaxis,
   options,
 }) => {
   const areaOptions = type === "area" && {
@@ -75,11 +83,36 @@ export const Chart: React.FC<ChartProps> = ({
           align: "left",
         },
         xaxis: {
-          categories: xaxis?.categories ?? [],
+          ...(xaxis?.datetime
+            ? {
+                type: "datetime",
+              }
+            : {}),
+          ...(xaxis?.categories ? { categories: xaxis?.categories } : {}),
           labels: {
+            ...(xaxis?.datetime
+              ? {
+                  datetimeFormatter: {
+                    year: "yyyy",
+                    month: "MMM 'yy",
+                    day: "dd MMM",
+                    hour: "HH:mm",
+                  },
+                }
+              : {}),
             maxHeight: 40,
           },
+          ...(xaxis?.min ? { min: xaxis?.min } : {}),
+          ...(xaxis?.max ? { min: xaxis?.max } : {}),
         },
+        ...(yaxis?.min !== undefined || yaxis?.max !== undefined
+          ? {
+              yaxis: {
+                ...(yaxis?.min ? { min: yaxis?.min } : {}),
+                ...(yaxis?.max ? { min: yaxis?.max } : {}),
+              },
+            }
+          : {}),
         labels: labels ?? [],
         colors: options?.mainColor
           ? [
@@ -164,6 +197,11 @@ export const Chart: React.FC<ChartProps> = ({
         tooltip: {
           theme: options?.theme === "light" ? "light" : "dark",
           fillSeriesColor: false,
+          ...(xaxis?.datetime
+            ? {
+                x: { format: "dd MMM yyyy" },
+              }
+            : {}),
         },
         grid: {
           borderColor: options?.theme === "light" ? "#e5e6e8" : "#545869",

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

@@ -1476,6 +1476,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
 }) => {
   const inputRef = 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 +1498,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)
@@ -1542,19 +1569,31 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
               <span className="text-disabled">{`+${selectedCountry}`}</span>
             </div>
             <input
-              type="number"
+              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);
+
+                  if (e.target.value.startsWith(selectedCountry)) {
+                    e.target.setCustomValidity(
+                      "Please enter a valid phone number."
+                    );
+                  } else {
+                    e.target.setCustomValidity("");
+                  }
+                }
               }}
             />
           </div>