@giro-ds/react 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -771,14 +771,17 @@ const TextField = ({ name = 'textfield', className = '', value = '', label = '',
         }
     }, [disabled, onChange]);
     const onBlur = useCallback(() => {
-        const error = validateInput({
-            value: inputValue,
-            type,
-            maxLength,
-            errorMessage,
-            required,
-        }) || '';
-        setInputError(error);
+        // Se já existe um errorMessage externo, não validar internamente
+        if (!errorMessage) {
+            const error = validateInput({
+                value: inputValue,
+                type,
+                maxLength,
+                errorMessage,
+                required,
+            }) || '';
+            setInputError(error);
+        }
         setFocus(false);
     }, [inputValue, type, maxLength, errorMessage, required]);
     useEffect(() => {
@@ -786,6 +789,15 @@ const TextField = ({ name = 'textfield', className = '', value = '', label = '',
             setValue(value);
         }
     }, [value]);
+    // Sincroniza errorMessage externo com estado interno
+    useEffect(() => {
+        if (errorMessage) {
+            setInputError(errorMessage);
+        }
+        else if (!errorMessage && inputError && !required) {
+            setInputError('');
+        }
+    }, [errorMessage]);
     const TextFieldClass = clsx(styles$j['zds-textfield__container'], {
         [styles$j['zds-textfield__error']]: inputError,
         [styles$j['zds-textfield__disabled']]: disabled,
@@ -799,7 +811,7 @@ const TextField = ({ name = 'textfield', className = '', value = '', label = '',
         : helper && helperText
             ? `${componentId}-helper`
             : undefined;
-    return (jsxs("div", { className: TextFieldClass, children: [label && (jsx("label", { htmlFor: componentId, className: styles$j['zds-textfield__wrapper-label'], children: tooltip ? (jsx(Tooltip, { text: tooltipText, position: positionTooltip, children: jsxs("div", { className: styles$j['zds-textfield__container-tooltip'], children: [label, required && jsx("span", { className: styles$j['zds-textfield__required'], children: "*" }), jsx(Info12Regular, { className: styles$j['zds-textfield__tooltip'] })] }) })) : (jsxs("div", { className: styles$j['zds-textfield__container-tooltip'], children: [label, required && jsx("span", { className: styles$j['zds-textfield__required'], children: "*" })] })) })), jsxs("div", { className: styles$j['zds-textfield__container__box'], children: [jsxs("div", { className: styles$j['zds-textfield__box__input'], children: [jsx("input", { id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: () => setFocus(true), onBlur: onBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": !!inputError, "aria-required": required, "aria-describedby": helperId }), shouldRenderCustomIcon && (jsx("span", { className: styles$j['zds-textfield__icon'], children: icon })), shouldRenderClearIcon && (jsx(Dismiss16Regular, { className: styles$j['zds-textfield__icon'], onClick: clearInput, "aria-label": "Limpar campo", onMouseDown: (e) => e.preventDefault() }))] }), jsx("span", { id: helperId, className: styles$j['zds-textfield__helper-text'], "aria-live": inputError ? 'polite' : undefined, children: helperContent })] })] }));
+    return (jsxs("div", { className: TextFieldClass, children: [label && (jsx("label", { htmlFor: componentId, className: styles$j['zds-textfield__wrapper-label'], children: tooltip ? (jsx(Tooltip, { text: tooltipText, position: positionTooltip, children: jsxs("div", { className: styles$j['zds-textfield__container-tooltip'], children: [label, required && jsx("span", { className: styles$j['zds-textfield__required'], children: "*" }), jsx(Info12Regular, { className: styles$j['zds-textfield__tooltip'] })] }) })) : (jsxs("div", { className: styles$j['zds-textfield__container-tooltip'], children: [label, required && jsx("span", { className: styles$j['zds-textfield__required'], children: "*" })] })) })), jsxs("div", { className: styles$j['zds-textfield__container__box'], children: [jsxs("div", { className: styles$j['zds-textfield__box__input'], children: [jsx("input", { id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: () => setFocus(true), onBlur: onBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": !!inputError, "aria-required": required, "aria-describedby": helperId }), shouldRenderCustomIcon && (jsx("span", { className: styles$j['zds-textfield__icon'], children: icon })), shouldRenderClearIcon && (jsx("span", { className: styles$j['zds-textfield__icon'], onClick: clearInput, onMouseDown: (e) => e.preventDefault(), role: "button", tabIndex: 0, "aria-label": "Limpar campo", children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$j['zds-textfield__helper-text'], "aria-live": inputError ? 'polite' : undefined, children: helperContent })] })] }));
 };
 const MemoizedTextField = React__default.memo(TextField);
 MemoizedTextField.displayName = 'TextField';