@giro-ds/react 3.0.0 → 3.0.2

package/dist/components/TextField/TextField.types.d.ts

@@ -3,7 +3,7 @@ export type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | '
 export type TooltipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'> {
     /** Controlled value */
-    value?: string;
+    value?: string | number;
     /** Change handler - receives string value */
     onChange?: (value: string) => void;
     /** Label text */

package/dist/index.cjs

@@ -678,11 +678,17 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
 };
 
 const TextField$1 = React.forwardRef(({ className, value = '', label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText = '', side = 'bottom', align = 'start', errorMessage = '', id, icon, onBlur, onFocus, name, ...inputProps }, ref) => {
-    const [inputValue, setInputValue] = React.useState(value);
+    const normalizeValue = (val) => {
+        return val === undefined || val === null ? '' : String(val);
+    };
+    const [inputValue, setInputValue] = React.useState(normalizeValue(value));
     const [inputError, setInputError] = React.useState('');
     const [isFocused, setIsFocused] = React.useState(false);
     const generatedId = React.useId();
     const componentId = id || generatedId;
+    React.useEffect(() => {
+        setInputValue(normalizeValue(value));
+    }, [value]);
     const handleChange = React.useCallback((e) => {
         const newValue = e.target.value;
         if (!disabled && (!maxLength || newValue.length <= maxLength)) {
@@ -826,11 +832,13 @@ function parseDate(dateString, locale = 'pt-br') {
     return date;
 }
 
-var styles$e = {"zds-date-picker":"DatePicker-module__zds-date-picker___FjFTb","zds-date-picker__calendar-popup":"DatePicker-module__zds-date-picker__calendar-popup___hEkq7","zds-calendar--left":"DatePicker-module__zds-calendar--left___5z2UM","zds-calendar--right":"DatePicker-module__zds-calendar--right___NCJtd"};
+var styles$e = {"zds-date-picker":"DatePicker-module__zds-date-picker___FjFTb","zds-date-picker__calendar-popup":"DatePicker-module__zds-date-picker__calendar-popup___hEkq7","zds-calendar--left":"DatePicker-module__zds-calendar--left___5z2UM","zds-calendar--right":"DatePicker-module__zds-calendar--right___NCJtd","zds-date-picker__icon":"DatePicker-module__zds-date-picker__icon___nYEnv","zds-date-picker__icon--disabled":"DatePicker-module__zds-date-picker__icon--disabled___p4Rr2"};
 
 const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText = '', required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, className = '', 'data-testid': testId, }) => {
     // ✅ IDs únicos para acessibilidade
     const fieldId = React.useId();
+    const calendarId = `${fieldId}-calendar`;
+    const errorId = `${fieldId}-error`;
     const helperTextId = `${fieldId}-help`;
     // ✅ Suporte controlled/uncontrolled adequado
     const isControlled = value !== undefined;
@@ -1008,9 +1016,12 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
             setTempInputValue(formatDate(currentSelectedDate, locale));
         }
     }, [locale, currentSelectedDate, isEditing]);
-    return (jsxRuntime.jsx("div", { ref: wrapperRef, children: jsxRuntime.jsxs("div", { className: clsx(styles$e['zds-date-picker']), children: [jsxRuntime.jsx("div", { onClick: handleFieldClick, onFocus: handleFieldFocus, onKeyDown: handleKeyDown, style: { cursor: 'pointer' }, children: jsxRuntime.jsx(TextField, { type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: handleIconClick, style: { cursor: 'pointer' } }), onChange: (e) => {
-                            handleTextFieldChange(String(e));
-                        }, "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": "calendar-popup", placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', value: displayValue, errorMessage: undefined, "aria-invalid": !!currentError, "aria-describedby": combinedHelperText ? helperTextId : undefined, maxLength: 10, helperText: combinedHelperText, required: required, label: label }) }), jsxRuntime.jsx("div", { className: clsx(styles$e['zds-date-picker__calendar-popup'], calendarPosition === 'left' && styles$e['zds-calendar--left'], calendarPosition === 'right' && styles$e['zds-calendar--right']), children: showCalendar && (jsxRuntime.jsx(MemoizedCalendar, { selectedDate: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy' })) })] }) }));
+    return (jsxRuntime.jsx("div", { ref: wrapperRef, children: jsxRuntime.jsxs("div", { className: clsx(styles$e['zds-date-picker']), children: [jsxRuntime.jsx(TextField, { type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$e['zds-date-picker__icon'], disabled && styles$e['zds-date-picker__icon--disabled']) }), onChange: (e) => {
+                        handleTextFieldChange(String(e));
+                    }, onClick: !disabled ? handleFieldClick : undefined, onFocus: !disabled ? handleFieldFocus : undefined, onKeyDown: handleKeyDown, value: displayValue, helperText: combinedHelperText, maxLength: 10, required: required, label: label, disabled: disabled, id: fieldId, className: className, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": !!currentError, "aria-describedby": currentError ? errorId : (helperText ? helperTextId : undefined) }), jsxRuntime.jsx("div", { className: clsx(styles$e['zds-date-picker__calendar-popup'], calendarPosition === 'left' && styles$e['zds-calendar--left'], calendarPosition === 'right' && styles$e['zds-calendar--right']), children: showCalendar && (jsxRuntime.jsx(MemoizedCalendar, { selectedDate: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, id: calendarId, onClear: () => {
+                            handleDateChange(null);
+                            setCurrentDate(new Date());
+                        } })) })] }) }));
 };
 var DatePicker_default = React.memo(DatePicker);