@ceed/ads 0.0.86 → 0.0.87

package/dist/index.js

@@ -1199,9 +1199,16 @@ function getCurrencySymbol(currencyCode) {
   }).format(0);
   return formatted.replace(/[\d\s.,]/g, "");
 }
+function formatValueString(amount, currency = "usd") {
+  const formatter = new IntlMessageFormat(
+    `{amount, number, ::currency/${currency} unit-width-narrow}`
+  );
+  return formatter.format({ amount }).toString();
+}
 var TextMaskAdapter = React13.forwardRef(
   function TextMaskAdapter2(props, ref) {
     const { onChange, currency, ...innerProps } = props;
+    const [value, setValue] = useState3(props.value || 0);
     const currencySymbol = getCurrencySymbol(currency);
     return /* @__PURE__ */ React13.createElement(
       IMaskInput,
@@ -1209,15 +1216,18 @@ var TextMaskAdapter = React13.forwardRef(
         ...innerProps,
         inputRef: ref,
         mask: `${currencySymbol}num`,
-        onAccept: (value) => {
+        lazy: false,
+        overwrite: true,
+        onAccept: (value2) => {
+          setValue(Number(value2));
           onChange({
             target: {
               name: props.name,
-              value
+              value: value2
             }
           });
         },
-        value: props.value?.toString(),
+        value: formatValueString(value, currency),
         unmask: true,
         blocks: {
           num: {
@@ -1229,7 +1239,6 @@ var TextMaskAdapter = React13.forwardRef(
             padFractionalZeros: currency !== "krw"
           }
         },
-        placeholderChar: currencySymbol,
         placeholder: `${currencySymbol}0.00`
       }
     );
@@ -1243,28 +1252,23 @@ var CurrencyInput = React13.forwardRef(
       name,
       onChange,
       label,
+      error,
+      helperText,
       required,
       disabled,
       ...innerProps
     } = props;
-    const [value, setValue] = useState3(props.value);
-    const [error, setError] = useState3(props.error);
-    const [helperText, setHelperText] = useState3(props.helperText);
+    const [isOverLimit, setIsOverLimit] = useState3(
+      !!props.value && props.value > max
+    );
     const handleChange = useCallback3(
       (event) => {
         const amount = Number(event.target.value);
-        setValue(amount);
         onChange?.({ ...event, target: { name, value: amount } });
         if (amount > max) {
-          setError(true);
-          setHelperText(
-            /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(InfoOutlined, null), new IntlMessageFormat(
-              `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
-            ).format({ amount: max }))
-          );
+          setIsOverLimit(true);
         } else {
-          setError(props.error);
-          setHelperText(props.helperText);
+          setIsOverLimit(false);
         }
       },
       []
@@ -1274,7 +1278,6 @@ var CurrencyInput = React13.forwardRef(
       {
         size: "sm",
         ref,
-        value: String(value),
         onChange: handleChange,
         disabled,
         required,
@@ -1292,17 +1295,18 @@ var CurrencyInput = React13.forwardRef(
           size: "sm",
           disabled,
           required,
-          error
+          error: error || isOverLimit
         },
         /* @__PURE__ */ React13.createElement(FormLabel_default, null, label),
         currencyFormatter,
-        helperText && /* @__PURE__ */ React13.createElement(FormHelperText_default, null, helperText)
+        isOverLimit ? /* @__PURE__ */ React13.createElement(FormHelperText_default, null, /* @__PURE__ */ React13.createElement(InfoOutlined, null), new IntlMessageFormat(
+          `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
+        ).format({ amount: max })) : helperText && /* @__PURE__ */ React13.createElement(FormHelperText_default, null, helperText)
       );
     }
     return currencyFormatter;
   }
 );
-CurrencyInput.displayName = "CurrencyInput";
 
 // src/components/DataTable/DataTable.tsx
 import React15, {
@@ -1883,7 +1887,7 @@ var CalendarSheet = styled6(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var formatValueString = (date) => {
+var formatValueString2 = (date) => {
   let day = `${date.getDate()}`;
   let month = `${date.getMonth() + 1}`;
   const year = date.getFullYear();
@@ -1923,7 +1927,7 @@ var TextMaskAdapter3 = React16.forwardRef(
             to: 9999
           }
         },
-        format: formatValueString,
+        format: formatValueString2,
         parse: (str) => {
           const yearMonthDay = str.split("/");
           return new Date(
@@ -2007,7 +2011,7 @@ var DatePicker = forwardRef4(
         {
           value: !Number.isNaN(new Date(value).getTime()) ? [new Date(value), void 0] : void 0,
           onChange: ([date]) => {
-            setValue(formatValueString(date));
+            setValue(formatValueString2(date));
             setAnchorEl(null);
           },
           minDate: minDate ? new Date(minDate) : void 0,
@@ -2078,7 +2082,7 @@ var CalendarSheet2 = styled7(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var formatValueString2 = ([date1, date2]) => {
+var formatValueString3 = ([date1, date2]) => {
   const getStr = (date) => {
     let day = `${date.getDate()}`;
     let month = `${date.getMonth() + 1}`;
@@ -2139,7 +2143,7 @@ var TextMaskAdapter5 = React17.forwardRef(
             to: 9999
           }
         },
-        format: formatValueString2,
+        format: formatValueString3,
         parse: parseDate,
         autofix: "pad",
         overwrite: true,
@@ -2186,7 +2190,7 @@ var DateRangePicker = forwardRef5(
       ([date1, date2]) => {
         if (!date1 || !date2)
           return;
-        setValue(formatValueString2([date1, date2]));
+        setValue(formatValueString3([date1, date2]));
         setAnchorEl(null);
       },
       [setValue, setAnchorEl]
@@ -2403,7 +2407,7 @@ var CalendarSheet3 = styled12(Sheet_default, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var formatValueString3 = ([date1, date2]) => {
+var formatValueString4 = ([date1, date2]) => {
   const getStr = (date) => {
     let month = `${date.getMonth() + 1}`;
     const year = date.getFullYear();
@@ -2447,7 +2451,7 @@ var TextMaskAdapter7 = React22.forwardRef(
             to: 9999
           }
         },
-        format: formatValueString3,
+        format: formatValueString4,
         parse: parseDate2,
         autofix: "pad",
         overwrite: true,
@@ -2494,7 +2498,7 @@ var MonthRangePicker = forwardRef6(
       ([date1, date2]) => {
         if (!date1 || !date2)
           return;
-        setValue(formatValueString3([date1, date2]));
+        setValue(formatValueString4([date1, date2]));
         setAnchorEl(null);
       },
       [setValue, setAnchorEl]

package/framer/index.js

@@ -43595,25 +43595,34 @@ function getCurrencySymbol(currencyCode) {
   }).format(0);
   return formatted.replace(/[\d\s.,]/g, "");
 }
+function formatValueString(amount, currency = "usd") {
+  const formatter = new IntlMessageFormat(
+    `{amount, number, ::currency/${currency} unit-width-narrow}`
+  );
+  return formatter.format({ amount }).toString();
+}
 var TextMaskAdapter = React178.forwardRef(
   function TextMaskAdapter2(props, ref) {
-    var _b;
     const _a2 = props, { onChange, currency } = _a2, innerProps = __objRest(_a2, ["onChange", "currency"]);
+    const [value, setValue] = useState26(props.value || 0);
     const currencySymbol = getCurrencySymbol(currency);
     return /* @__PURE__ */ jsx2(
       IMaskInput,
       __spreadProps(__spreadValues({}, innerProps), {
         inputRef: ref,
         mask: `${currencySymbol}num`,
-        onAccept: (value) => {
+        lazy: false,
+        overwrite: true,
+        onAccept: (value2) => {
+          setValue(Number(value2));
           onChange({
             target: {
               name: props.name,
-              value
+              value: value2
             }
           });
         },
-        value: (_b = props.value) == null ? void 0 : _b.toString(),
+        value: formatValueString(value, currency),
         unmask: true,
         blocks: {
           num: {
@@ -43625,7 +43634,6 @@ var TextMaskAdapter = React178.forwardRef(
             padFractionalZeros: currency !== "krw"
           }
         },
-        placeholderChar: currencySymbol,
         placeholder: `${currencySymbol}0.00`
       })
     );
@@ -43639,6 +43647,8 @@ var CurrencyInput = React178.forwardRef(
       name,
       onChange,
       label,
+      error,
+      helperText,
       required,
       disabled
     } = _a2, innerProps = __objRest(_a2, [
@@ -43647,30 +43657,22 @@ var CurrencyInput = React178.forwardRef(
       "name",
       "onChange",
       "label",
+      "error",
+      "helperText",
       "required",
       "disabled"
     ]);
-    const [value, setValue] = useState26(props.value);
-    const [error, setError] = useState26(props.error);
-    const [helperText, setHelperText] = useState26(props.helperText);
+    const [isOverLimit, setIsOverLimit] = useState26(
+      !!props.value && props.value > max2
+    );
     const handleChange = useCallback27(
       (event) => {
         const amount = Number(event.target.value);
-        setValue(amount);
         onChange == null ? void 0 : onChange(__spreadProps(__spreadValues({}, event), { target: { name, value: amount } }));
         if (amount > max2) {
-          setError(true);
-          setHelperText(
-            /* @__PURE__ */ jsxs2(Fragment16, { children: [
-              /* @__PURE__ */ jsx2(InfoOutlined_default, {}),
-              new IntlMessageFormat(
-                `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
-              ).format({ amount: max2 })
-            ] })
-          );
+          setIsOverLimit(true);
         } else {
-          setError(props.error);
-          setHelperText(props.helperText);
+          setIsOverLimit(false);
         }
       },
       []
@@ -43680,7 +43682,6 @@ var CurrencyInput = React178.forwardRef(
       __spreadValues({
         size: "sm",
         ref,
-        value: String(value),
         onChange: handleChange,
         disabled,
         required,
@@ -43697,11 +43698,16 @@ var CurrencyInput = React178.forwardRef(
           size: "sm",
           disabled,
           required,
-          error,
+          error: error || isOverLimit,
           children: [
             /* @__PURE__ */ jsx2(FormLabel_default2, { children: label }),
             currencyFormatter,
-            helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
+            isOverLimit ? /* @__PURE__ */ jsxs2(FormHelperText_default2, { children: [
+              /* @__PURE__ */ jsx2(InfoOutlined_default, {}),
+              new IntlMessageFormat(
+                `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
+              ).format({ amount: max2 })
+            ] }) : helperText && /* @__PURE__ */ jsx2(FormHelperText_default2, { children: helperText })
           ]
         }
       );
@@ -43709,7 +43715,6 @@ var CurrencyInput = React178.forwardRef(
     return currencyFormatter;
   }
 );
-CurrencyInput.displayName = "CurrencyInput";
 
 // src/components/DataTable/DataTable.tsx
 import {
@@ -44366,7 +44371,7 @@ var CalendarSheet = styled_default2(Sheet_default2, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var formatValueString = (date) => {
+var formatValueString2 = (date) => {
   let day = `${date.getDate()}`;
   let month = `${date.getMonth() + 1}`;
   const year = date.getFullYear();
@@ -44405,7 +44410,7 @@ var TextMaskAdapter3 = React180.forwardRef(
             to: 9999
           }
         },
-        format: formatValueString,
+        format: formatValueString2,
         parse: (str) => {
           const yearMonthDay = str.split("/");
           return new Date(
@@ -44491,7 +44496,7 @@ var DatePicker = forwardRef84(
               {
                 value: !Number.isNaN(new Date(value).getTime()) ? [new Date(value), void 0] : void 0,
                 onChange: ([date]) => {
-                  setValue(formatValueString(date));
+                  setValue(formatValueString2(date));
                   setAnchorEl(null);
                 },
                 minDate: minDate ? new Date(minDate) : void 0,
@@ -44564,7 +44569,7 @@ var CalendarSheet2 = styled_default2(Sheet_default2, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var formatValueString2 = ([date1, date2]) => {
+var formatValueString3 = ([date1, date2]) => {
   const getStr = (date) => {
     let day = `${date.getDate()}`;
     let month = `${date.getMonth() + 1}`;
@@ -44624,7 +44629,7 @@ var TextMaskAdapter5 = React181.forwardRef(
             to: 9999
           }
         },
-        format: formatValueString2,
+        format: formatValueString3,
         parse: parseDate,
         autofix: "pad",
         overwrite: true,
@@ -44671,7 +44676,7 @@ var DateRangePicker = forwardRef85(
       ([date1, date2]) => {
         if (!date1 || !date2)
           return;
-        setValue(formatValueString2([date1, date2]));
+        setValue(formatValueString3([date1, date2]));
         setAnchorEl(null);
       },
       [setValue, setAnchorEl]
@@ -44881,7 +44886,7 @@ var CalendarSheet3 = styled_default2(Sheet_default2, {
   boxShadow: theme.shadow.md,
   borderRadius: theme.radius.md
 }));
-var formatValueString3 = ([date1, date2]) => {
+var formatValueString4 = ([date1, date2]) => {
   const getStr = (date) => {
     let month = `${date.getMonth() + 1}`;
     const year = date.getFullYear();
@@ -44924,7 +44929,7 @@ var TextMaskAdapter7 = React182.forwardRef(
             to: 9999
           }
         },
-        format: formatValueString3,
+        format: formatValueString4,
         parse: parseDate2,
         autofix: "pad",
         overwrite: true,
@@ -44971,7 +44976,7 @@ var MonthRangePicker = forwardRef86(
       ([date1, date2]) => {
         if (!date1 || !date2)
           return;
-        setValue(formatValueString3([date1, date2]));
+        setValue(formatValueString4([date1, date2]));
         setAnchorEl(null);
       },
       [setValue, setAnchorEl]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",