@clickpalm/react 1.3.7 → 1.3.8

package/dist/index.js

@@ -1341,14 +1341,32 @@ var Input2 = (0, import_react5.forwardRef)(
       return stringValue;
     };
     const [displayValue, setDisplayValue] = (0, import_react5.useState)(getDisplayValue(props.value));
-    const [charCount, setCharCount] = (0, import_react5.useState)((prefix?.length || 0) + getDisplayValue(props.value).length);
+    const [charCount, setCharCount] = (0, import_react5.useState)(getDisplayValue(props.value).length);
     const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
     (0, import_react5.useEffect)(() => {
       const newDisplayValue = getDisplayValue(props.value);
-      setDisplayValue(newDisplayValue);
-      setCharCount((prefix?.length || 0) + newDisplayValue.length);
-    }, [props.value, prefix]);
+      if (newDisplayValue !== displayValue) {
+        setDisplayValue(newDisplayValue);
+        setCharCount(newDisplayValue.length);
+      }
+    }, [props.value, prefix, displayValue]);
+    const handleChange = (e) => {
+      let currentDisplayValue = getDisplayValue(e.target.value);
+      if (props.type === "number") {
+        currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
+      }
+      if (props.onChange) {
+        const newEvent = {
+          ...e,
+          target: {
+            ...e.target,
+            value: currentDisplayValue
+          }
+        };
+        props.onChange(newEvent);
+      }
+    };
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1376,24 +1394,11 @@ var Input2 = (0, import_react5.forwardRef)(
               {
                 ref: inputRef,
                 ...props,
+                type: props.type === "number" ? "text" : props.type,
+                inputMode: props.type === "number" ? "numeric" : props.inputMode,
                 value: displayValue,
-                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
-                onChange: (e) => {
-                  const currentDisplayValue = e.target.value;
-                  setDisplayValue(currentDisplayValue);
-                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
-                  if (props.onChange) {
-                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
-                    const newEvent = {
-                      ...e,
-                      target: {
-                        ...e.target,
-                        value: valueWithPrefix
-                      }
-                    };
-                    props.onChange(newEvent);
-                  }
-                }
+                maxLength,
+                onChange: handleChange
               }
             ),
             !!suffix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Suffix, { children: suffix })

package/dist/index.mjs

@@ -1271,14 +1271,32 @@ var Input2 = forwardRef3(
       return stringValue;
     };
     const [displayValue, setDisplayValue] = useState2(getDisplayValue(props.value));
-    const [charCount, setCharCount] = useState2((prefix?.length || 0) + getDisplayValue(props.value).length);
+    const [charCount, setCharCount] = useState2(getDisplayValue(props.value).length);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
     useEffect2(() => {
       const newDisplayValue = getDisplayValue(props.value);
-      setDisplayValue(newDisplayValue);
-      setCharCount((prefix?.length || 0) + newDisplayValue.length);
-    }, [props.value, prefix]);
+      if (newDisplayValue !== displayValue) {
+        setDisplayValue(newDisplayValue);
+        setCharCount(newDisplayValue.length);
+      }
+    }, [props.value, prefix, displayValue]);
+    const handleChange = (e) => {
+      let currentDisplayValue = getDisplayValue(e.target.value);
+      if (props.type === "number") {
+        currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
+      }
+      if (props.onChange) {
+        const newEvent = {
+          ...e,
+          target: {
+            ...e.target,
+            value: currentDisplayValue
+          }
+        };
+        props.onChange(newEvent);
+      }
+    };
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1306,24 +1324,11 @@ var Input2 = forwardRef3(
               {
                 ref: inputRef,
                 ...props,
+                type: props.type === "number" ? "text" : props.type,
+                inputMode: props.type === "number" ? "numeric" : props.inputMode,
                 value: displayValue,
-                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
-                onChange: (e) => {
-                  const currentDisplayValue = e.target.value;
-                  setDisplayValue(currentDisplayValue);
-                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
-                  if (props.onChange) {
-                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
-                    const newEvent = {
-                      ...e,
-                      target: {
-                        ...e.target,
-                        value: valueWithPrefix
-                      }
-                    };
-                    props.onChange(newEvent);
-                  }
-                }
+                maxLength,
+                onChange: handleChange
               }
             ),
             !!suffix && /* @__PURE__ */ jsx19(Suffix, { children: suffix })

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.3.7",
+	"version": "1.3.8",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"