@fctc/sme-widget-ui 2.3.1 → 2.3.3

package/dist/index.js

@@ -31996,6 +31996,8 @@ var FloatField = (props) => {
         const [inputValue, setInputValue] = (0, import_react58.useState)(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
+        const isDirtyRef = (0, import_react58.useRef)(false);
+        const lastCommittedValueRef = (0, import_react58.useRef)(null);
         (0, import_react58.useEffect)(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
@@ -32009,42 +32011,33 @@ var FloatField = (props) => {
             setInputValue("");
           }
         }, [value, name2, clearErrors, propValue]);
-        const isDirtyRef = (0, import_react58.useRef)(false);
-        const inputRef = (0, import_react58.useRef)(null);
-        const lastCommittedValueRef = (0, import_react58.useRef)(null);
         const handleInputChange = (e3) => {
-          const newValue = e3.target.value;
-          const valueWithoutCommas = newValue.replace(/,/g, "");
-          if (/^[0-9]*[.,]?[0-9]*$/.test(valueWithoutCommas) || newValue === "") {
-            const parts = valueWithoutCommas.split(".");
-            let integerPart = parts[0] || "";
-            const decimalPart = parts[1] || "";
-            if (decimalPart.length > 100) return;
-            if (integerPart) {
-              integerPart = Number(integerPart).toLocaleString("en-US");
-            }
-            const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-            setInputValue(formattedValue);
-            const parsedValue = parseFloat(valueWithoutCommas.replace(",", "."));
-            if (!isNaN(parsedValue)) {
-              if (parsedValue < 0) {
-                setError(name2, {
-                  type: "validate",
-                  message: t3("invalid_number")
-                });
-              } else {
-                onChange2(parsedValue);
-                clearErrors(name2);
-                isDirtyRef.current = true;
-              }
-            } else {
-              onChange2(null);
-              clearErrors(name2);
-            }
+          let newValue = e3.target.value;
+          if (!/^[0-9.,]*$/.test(newValue)) return;
+          if (newValue === ".") {
+            newValue = "0.";
+          }
+          if (inputValue.startsWith("0") && !inputValue?.includes(".")) {
+            newValue = newValue.replace(/^0+/, "");
+            console.log("newValue", newValue);
+          }
+          if (inputValue === "0" && newValue === "0.") {
+            newValue = "0.";
+          }
+          setInputValue(newValue);
+          const parsedValue = parseFloat(
+            newValue.replace(/,/g, "").replace(",", ".")
+          );
+          if (!isNaN(parsedValue)) {
+            onChange2(parsedValue);
+            clearErrors(name2);
+            isDirtyRef.current = true;
+          } else {
+            onChange2(null);
           }
         };
         const handleInputMouseLeave = () => {
-          if (isDirtyRef?.current === false) return;
+          if (!isDirtyRef.current) return;
           const rawValue = inputValue.replace(/,/g, "");
           const parsedValue = parseFloat(rawValue);
           if (rawValue === "" || rawValue === ".") {
@@ -32066,18 +32059,12 @@ var FloatField = (props) => {
               setInputValue("");
               lastCommittedValueRef.current = null;
             } else {
-              if (lastCommittedValueRef.current !== parsedValue) {
-                const parts = rawValue.split(".");
-                let integerPart = parts[0];
-                const decimalPart = parts[1] || "";
-                integerPart = Number(integerPart).toLocaleString("en-US");
-                const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-                onChange2(parsedValue);
-                setInputValue(formattedValue);
-                handleOnchange?.(name2 ?? "", parsedValue);
-                clearErrors(name2);
-                lastCommittedValueRef.current = parsedValue;
-              }
+              const formattedValue = formatFloatNumber(parsedValue);
+              setInputValue(formattedValue);
+              onChange2(parsedValue);
+              handleOnchange?.(name2 ?? "", parsedValue);
+              clearErrors(name2);
+              lastCommittedValueRef.current = parsedValue;
             }
           } else {
             setError(name2, {
@@ -32093,7 +32080,6 @@ var FloatField = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "input",
             {
-              ref: inputRef,
               value: inputValue,
               onChange: !readonly ? handleInputChange : void 0,
               onMouseLeave: !readonly ? handleInputMouseLeave : void 0,
@@ -32106,7 +32092,7 @@ var FloatField = (props) => {
               className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
                  ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
                   ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747] hover:border-b-[1px] hover:border-[#de4747]"}
                 `
             }
           ),
@@ -32606,7 +32592,8 @@ var MonetaryField = (props) => {
     formValues,
     widget,
     placeholder,
-    isEditTable
+    isEditTable,
+    symbol = "VND"
   } = props;
   if (isForm && name2 === "amount_residual") {
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
@@ -32614,15 +32601,15 @@ var MonetaryField = (props) => {
         string,
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
     ] });
   }
   if (!isForm) {
-    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : "VND";
+    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : symbol;
     if (widget === "monetary" && !formValues?.currency_id) {
       return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
-      )} VND` });
+      )} ${symbol}` });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)

package/dist/index.mjs

@@ -31870,6 +31870,8 @@ var FloatField = (props) => {
         const [inputValue, setInputValue] = useState18(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
+        const isDirtyRef = useRef15(false);
+        const lastCommittedValueRef = useRef15(null);
         useEffect19(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
@@ -31883,42 +31885,33 @@ var FloatField = (props) => {
             setInputValue("");
           }
         }, [value, name2, clearErrors, propValue]);
-        const isDirtyRef = useRef15(false);
-        const inputRef = useRef15(null);
-        const lastCommittedValueRef = useRef15(null);
         const handleInputChange = (e3) => {
-          const newValue = e3.target.value;
-          const valueWithoutCommas = newValue.replace(/,/g, "");
-          if (/^[0-9]*[.,]?[0-9]*$/.test(valueWithoutCommas) || newValue === "") {
-            const parts = valueWithoutCommas.split(".");
-            let integerPart = parts[0] || "";
-            const decimalPart = parts[1] || "";
-            if (decimalPart.length > 100) return;
-            if (integerPart) {
-              integerPart = Number(integerPart).toLocaleString("en-US");
-            }
-            const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-            setInputValue(formattedValue);
-            const parsedValue = parseFloat(valueWithoutCommas.replace(",", "."));
-            if (!isNaN(parsedValue)) {
-              if (parsedValue < 0) {
-                setError(name2, {
-                  type: "validate",
-                  message: t3("invalid_number")
-                });
-              } else {
-                onChange2(parsedValue);
-                clearErrors(name2);
-                isDirtyRef.current = true;
-              }
-            } else {
-              onChange2(null);
-              clearErrors(name2);
-            }
+          let newValue = e3.target.value;
+          if (!/^[0-9.,]*$/.test(newValue)) return;
+          if (newValue === ".") {
+            newValue = "0.";
+          }
+          if (inputValue.startsWith("0") && !inputValue?.includes(".")) {
+            newValue = newValue.replace(/^0+/, "");
+            console.log("newValue", newValue);
+          }
+          if (inputValue === "0" && newValue === "0.") {
+            newValue = "0.";
+          }
+          setInputValue(newValue);
+          const parsedValue = parseFloat(
+            newValue.replace(/,/g, "").replace(",", ".")
+          );
+          if (!isNaN(parsedValue)) {
+            onChange2(parsedValue);
+            clearErrors(name2);
+            isDirtyRef.current = true;
+          } else {
+            onChange2(null);
           }
         };
         const handleInputMouseLeave = () => {
-          if (isDirtyRef?.current === false) return;
+          if (!isDirtyRef.current) return;
           const rawValue = inputValue.replace(/,/g, "");
           const parsedValue = parseFloat(rawValue);
           if (rawValue === "" || rawValue === ".") {
@@ -31940,18 +31933,12 @@ var FloatField = (props) => {
               setInputValue("");
               lastCommittedValueRef.current = null;
             } else {
-              if (lastCommittedValueRef.current !== parsedValue) {
-                const parts = rawValue.split(".");
-                let integerPart = parts[0];
-                const decimalPart = parts[1] || "";
-                integerPart = Number(integerPart).toLocaleString("en-US");
-                const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-                onChange2(parsedValue);
-                setInputValue(formattedValue);
-                handleOnchange?.(name2 ?? "", parsedValue);
-                clearErrors(name2);
-                lastCommittedValueRef.current = parsedValue;
-              }
+              const formattedValue = formatFloatNumber(parsedValue);
+              setInputValue(formattedValue);
+              onChange2(parsedValue);
+              handleOnchange?.(name2 ?? "", parsedValue);
+              clearErrors(name2);
+              lastCommittedValueRef.current = parsedValue;
             }
           } else {
             setError(name2, {
@@ -31967,7 +31954,6 @@ var FloatField = (props) => {
           /* @__PURE__ */ jsx92(
             "input",
             {
-              ref: inputRef,
               value: inputValue,
               onChange: !readonly ? handleInputChange : void 0,
               onMouseLeave: !readonly ? handleInputMouseLeave : void 0,
@@ -31980,7 +31966,7 @@ var FloatField = (props) => {
               className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
                  ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
                   ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747] hover:border-b-[1px] hover:border-[#de4747]"}
                 `
             }
           ),
@@ -32480,7 +32466,8 @@ var MonetaryField = (props) => {
     formValues,
     widget,
     placeholder,
-    isEditTable
+    isEditTable,
+    symbol = "VND"
   } = props;
   if (isForm && name2 === "amount_residual") {
     return /* @__PURE__ */ jsxs65("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
@@ -32488,15 +32475,15 @@ var MonetaryField = (props) => {
         string,
         ":"
       ] }),
-      /* @__PURE__ */ jsx98("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
+      /* @__PURE__ */ jsx98("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
     ] });
   }
   if (!isForm) {
-    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : "VND";
+    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : symbol;
     if (widget === "monetary" && !formValues?.currency_id) {
       return /* @__PURE__ */ jsx98("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
-      )} VND` });
+      )} ${symbol}` });
     }
     return /* @__PURE__ */ jsx98("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)

package/dist/widgets.d.mts

@@ -318,6 +318,7 @@ declare const Many2ManyTagField: (props: IMany2ManyTagsProps) => JSX.Element;
 
 interface IMonetaryProps extends IInputFieldProps {
     placeholder?: string;
+    symbol?: string;
 }
 
 declare const MonetaryField: (props: IMonetaryProps) => JSX.Element;

package/dist/widgets.d.ts

@@ -318,6 +318,7 @@ declare const Many2ManyTagField: (props: IMany2ManyTagsProps) => JSX.Element;
 
 interface IMonetaryProps extends IInputFieldProps {
     placeholder?: string;
+    symbol?: string;
 }
 
 declare const MonetaryField: (props: IMonetaryProps) => JSX.Element;

package/dist/widgets.js

@@ -31245,6 +31245,8 @@ var FloatField = (props) => {
         const [inputValue, setInputValue] = (0, import_react58.useState)(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
+        const isDirtyRef = (0, import_react58.useRef)(false);
+        const lastCommittedValueRef = (0, import_react58.useRef)(null);
         (0, import_react58.useEffect)(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
@@ -31258,42 +31260,33 @@ var FloatField = (props) => {
             setInputValue("");
           }
         }, [value, name2, clearErrors, propValue]);
-        const isDirtyRef = (0, import_react58.useRef)(false);
-        const inputRef = (0, import_react58.useRef)(null);
-        const lastCommittedValueRef = (0, import_react58.useRef)(null);
         const handleInputChange = (e3) => {
-          const newValue = e3.target.value;
-          const valueWithoutCommas = newValue.replace(/,/g, "");
-          if (/^[0-9]*[.,]?[0-9]*$/.test(valueWithoutCommas) || newValue === "") {
-            const parts = valueWithoutCommas.split(".");
-            let integerPart = parts[0] || "";
-            const decimalPart = parts[1] || "";
-            if (decimalPart.length > 100) return;
-            if (integerPart) {
-              integerPart = Number(integerPart).toLocaleString("en-US");
-            }
-            const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-            setInputValue(formattedValue);
-            const parsedValue = parseFloat(valueWithoutCommas.replace(",", "."));
-            if (!isNaN(parsedValue)) {
-              if (parsedValue < 0) {
-                setError(name2, {
-                  type: "validate",
-                  message: t3("invalid_number")
-                });
-              } else {
-                onChange2(parsedValue);
-                clearErrors(name2);
-                isDirtyRef.current = true;
-              }
-            } else {
-              onChange2(null);
-              clearErrors(name2);
-            }
+          let newValue = e3.target.value;
+          if (!/^[0-9.,]*$/.test(newValue)) return;
+          if (newValue === ".") {
+            newValue = "0.";
+          }
+          if (inputValue.startsWith("0") && !inputValue?.includes(".")) {
+            newValue = newValue.replace(/^0+/, "");
+            console.log("newValue", newValue);
+          }
+          if (inputValue === "0" && newValue === "0.") {
+            newValue = "0.";
+          }
+          setInputValue(newValue);
+          const parsedValue = parseFloat(
+            newValue.replace(/,/g, "").replace(",", ".")
+          );
+          if (!isNaN(parsedValue)) {
+            onChange2(parsedValue);
+            clearErrors(name2);
+            isDirtyRef.current = true;
+          } else {
+            onChange2(null);
           }
         };
         const handleInputMouseLeave = () => {
-          if (isDirtyRef?.current === false) return;
+          if (!isDirtyRef.current) return;
           const rawValue = inputValue.replace(/,/g, "");
           const parsedValue = parseFloat(rawValue);
           if (rawValue === "" || rawValue === ".") {
@@ -31315,18 +31308,12 @@ var FloatField = (props) => {
               setInputValue("");
               lastCommittedValueRef.current = null;
             } else {
-              if (lastCommittedValueRef.current !== parsedValue) {
-                const parts = rawValue.split(".");
-                let integerPart = parts[0];
-                const decimalPart = parts[1] || "";
-                integerPart = Number(integerPart).toLocaleString("en-US");
-                const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-                onChange2(parsedValue);
-                setInputValue(formattedValue);
-                handleOnchange?.(name2 ?? "", parsedValue);
-                clearErrors(name2);
-                lastCommittedValueRef.current = parsedValue;
-              }
+              const formattedValue = formatFloatNumber(parsedValue);
+              setInputValue(formattedValue);
+              onChange2(parsedValue);
+              handleOnchange?.(name2 ?? "", parsedValue);
+              clearErrors(name2);
+              lastCommittedValueRef.current = parsedValue;
             }
           } else {
             setError(name2, {
@@ -31342,7 +31329,6 @@ var FloatField = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "input",
             {
-              ref: inputRef,
               value: inputValue,
               onChange: !readonly ? handleInputChange : void 0,
               onMouseLeave: !readonly ? handleInputMouseLeave : void 0,
@@ -31355,7 +31341,7 @@ var FloatField = (props) => {
               className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
                  ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
                   ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747] hover:border-b-[1px] hover:border-[#de4747]"}
                 `
             }
           ),
@@ -31855,7 +31841,8 @@ var MonetaryField = (props) => {
     formValues,
     widget,
     placeholder,
-    isEditTable
+    isEditTable,
+    symbol = "VND"
   } = props;
   if (isForm && name2 === "amount_residual") {
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
@@ -31863,15 +31850,15 @@ var MonetaryField = (props) => {
         string,
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
     ] });
   }
   if (!isForm) {
-    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : "VND";
+    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : symbol;
     if (widget === "monetary" && !formValues?.currency_id) {
       return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
-      )} VND` });
+      )} ${symbol}` });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)

package/dist/widgets.mjs

@@ -31183,6 +31183,8 @@ var FloatField = (props) => {
         const [inputValue, setInputValue] = useState18(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
+        const isDirtyRef = useRef15(false);
+        const lastCommittedValueRef = useRef15(null);
         useEffect19(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
@@ -31196,42 +31198,33 @@ var FloatField = (props) => {
             setInputValue("");
           }
         }, [value, name2, clearErrors, propValue]);
-        const isDirtyRef = useRef15(false);
-        const inputRef = useRef15(null);
-        const lastCommittedValueRef = useRef15(null);
         const handleInputChange = (e3) => {
-          const newValue = e3.target.value;
-          const valueWithoutCommas = newValue.replace(/,/g, "");
-          if (/^[0-9]*[.,]?[0-9]*$/.test(valueWithoutCommas) || newValue === "") {
-            const parts = valueWithoutCommas.split(".");
-            let integerPart = parts[0] || "";
-            const decimalPart = parts[1] || "";
-            if (decimalPart.length > 100) return;
-            if (integerPart) {
-              integerPart = Number(integerPart).toLocaleString("en-US");
-            }
-            const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-            setInputValue(formattedValue);
-            const parsedValue = parseFloat(valueWithoutCommas.replace(",", "."));
-            if (!isNaN(parsedValue)) {
-              if (parsedValue < 0) {
-                setError(name2, {
-                  type: "validate",
-                  message: t3("invalid_number")
-                });
-              } else {
-                onChange2(parsedValue);
-                clearErrors(name2);
-                isDirtyRef.current = true;
-              }
-            } else {
-              onChange2(null);
-              clearErrors(name2);
-            }
+          let newValue = e3.target.value;
+          if (!/^[0-9.,]*$/.test(newValue)) return;
+          if (newValue === ".") {
+            newValue = "0.";
+          }
+          if (inputValue.startsWith("0") && !inputValue?.includes(".")) {
+            newValue = newValue.replace(/^0+/, "");
+            console.log("newValue", newValue);
+          }
+          if (inputValue === "0" && newValue === "0.") {
+            newValue = "0.";
+          }
+          setInputValue(newValue);
+          const parsedValue = parseFloat(
+            newValue.replace(/,/g, "").replace(",", ".")
+          );
+          if (!isNaN(parsedValue)) {
+            onChange2(parsedValue);
+            clearErrors(name2);
+            isDirtyRef.current = true;
+          } else {
+            onChange2(null);
           }
         };
         const handleInputMouseLeave = () => {
-          if (isDirtyRef?.current === false) return;
+          if (!isDirtyRef.current) return;
           const rawValue = inputValue.replace(/,/g, "");
           const parsedValue = parseFloat(rawValue);
           if (rawValue === "" || rawValue === ".") {
@@ -31253,18 +31246,12 @@ var FloatField = (props) => {
               setInputValue("");
               lastCommittedValueRef.current = null;
             } else {
-              if (lastCommittedValueRef.current !== parsedValue) {
-                const parts = rawValue.split(".");
-                let integerPart = parts[0];
-                const decimalPart = parts[1] || "";
-                integerPart = Number(integerPart).toLocaleString("en-US");
-                const formattedValue = decimalPart ? `${integerPart}.${decimalPart}` : integerPart;
-                onChange2(parsedValue);
-                setInputValue(formattedValue);
-                handleOnchange?.(name2 ?? "", parsedValue);
-                clearErrors(name2);
-                lastCommittedValueRef.current = parsedValue;
-              }
+              const formattedValue = formatFloatNumber(parsedValue);
+              setInputValue(formattedValue);
+              onChange2(parsedValue);
+              handleOnchange?.(name2 ?? "", parsedValue);
+              clearErrors(name2);
+              lastCommittedValueRef.current = parsedValue;
             }
           } else {
             setError(name2, {
@@ -31280,7 +31267,6 @@ var FloatField = (props) => {
           /* @__PURE__ */ jsx92(
             "input",
             {
-              ref: inputRef,
               value: inputValue,
               onChange: !readonly ? handleInputChange : void 0,
               onMouseLeave: !readonly ? handleInputMouseLeave : void 0,
@@ -31293,7 +31279,7 @@ var FloatField = (props) => {
               className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
                  ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
                   ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747] hover:border-b-[1px] hover:border-[#de4747]"}
                 `
             }
           ),
@@ -31793,7 +31779,8 @@ var MonetaryField = (props) => {
     formValues,
     widget,
     placeholder,
-    isEditTable
+    isEditTable,
+    symbol = "VND"
   } = props;
   if (isForm && name2 === "amount_residual") {
     return /* @__PURE__ */ jsxs65("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
@@ -31801,15 +31788,15 @@ var MonetaryField = (props) => {
         string,
         ":"
       ] }),
-      /* @__PURE__ */ jsx98("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} VND` })
+      /* @__PURE__ */ jsx98("span", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right", children: `${formatNumberOnly(parseFloat(value ?? defaultValue))} ${symbol}` })
     ] });
   }
   if (!isForm) {
-    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : "VND";
+    const currencySymbol = widget === "monetary" ? formValues?.currency_id?.symbol : symbol;
     if (widget === "monetary" && !formValues?.currency_id) {
       return /* @__PURE__ */ jsx98("span", { children: `${formatNumberOnly(
         parseFloat(String(value ?? defaultValue))
-      )} VND` });
+      )} ${symbol}` });
     }
     return /* @__PURE__ */ jsx98("span", { children: `${formatNumberOnly(
       parseFloat(value ?? defaultValue)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",