@clickpalm/react 1.3.6 → 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 })
@@ -2564,7 +2569,10 @@ var CharCounter2 = styled(Span5, {
 var TextArea = (0, import_react13.forwardRef)(
   ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-    const [charCount, setCharCount] = (0, import_react13.useState)(0);
+    const [charCount, setCharCount] = (0, import_react13.useState)(props.value?.toString().length || 0);
+    (0, import_react13.useEffect)(() => {
+      setCharCount(props.value?.toString().length || 0);
+    }, [props.value]);
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Wrapper4, { children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(

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 })
@@ -2384,7 +2389,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-import { forwardRef as forwardRef8, useState as useState7 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect6, useState as useState7 } from "react";
 import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2494,7 +2499,10 @@ var CharCounter2 = styled(Span5, {
 var TextArea = forwardRef8(
   ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-    const [charCount, setCharCount] = useState7(0);
+    const [charCount, setCharCount] = useState7(props.value?.toString().length || 0);
+    useEffect6(() => {
+      setCharCount(props.value?.toString().length || 0);
+    }, [props.value]);
     return /* @__PURE__ */ jsxs12(Wrapper4, { children: [
       label && /* @__PURE__ */ jsx30(StyledLabel2, { htmlFor: textAreaId, children: label }),
       /* @__PURE__ */ jsx30(
@@ -2578,7 +2586,7 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
-import { useState as useState8, useEffect as useEffect6 } from "react";
+import { useState as useState8, useEffect as useEffect7 } from "react";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tooltip = ({
   content,
@@ -2591,7 +2599,7 @@ var Tooltip = ({
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = useState8(false);
   const [isTouchDevice, setIsTouchDevice] = useState8(false);
-  useEffect6(() => {
+  useEffect7(() => {
     setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
   }, []);
   const open = controlledOpen ?? uncontrolledOpen;

package/package.json

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