@giro-ds/react 3.0.1 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TextField/TextField.types.d.ts +1 -1
- package/dist/index.cjs +33 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +33 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ export type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | '
|
|
|
3
3
|
export type TooltipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
4
4
|
export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'> {
|
|
5
5
|
/** Controlled value */
|
|
6
|
-
value?: string;
|
|
6
|
+
value?: string | number;
|
|
7
7
|
/** Change handler - receives string value */
|
|
8
8
|
onChange?: (value: string) => void;
|
|
9
9
|
/** Label text */
|
package/dist/index.cjs
CHANGED
|
@@ -678,15 +678,28 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
678
678
|
};
|
|
679
679
|
|
|
680
680
|
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) => {
|
|
681
|
-
const
|
|
681
|
+
const normalizeValue = (val) => {
|
|
682
|
+
return val === undefined || val === null ? '' : String(val);
|
|
683
|
+
};
|
|
684
|
+
const [inputValue, setInputValue] = React.useState(normalizeValue(value));
|
|
682
685
|
const [inputError, setInputError] = React.useState('');
|
|
683
686
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
684
687
|
const generatedId = React.useId();
|
|
685
688
|
const componentId = id || generatedId;
|
|
686
|
-
// ✅ Sincronizar estado interno com prop value externa
|
|
687
689
|
React.useEffect(() => {
|
|
688
|
-
|
|
689
|
-
|
|
690
|
+
const newValue = normalizeValue(value);
|
|
691
|
+
setInputValue(newValue);
|
|
692
|
+
// Reavaliar erro quando valor muda externamente (ex: DatePicker atualiza o campo)
|
|
693
|
+
if (inputError) {
|
|
694
|
+
const error = validateInput({
|
|
695
|
+
value: newValue,
|
|
696
|
+
maxLength,
|
|
697
|
+
errorMessage,
|
|
698
|
+
required,
|
|
699
|
+
});
|
|
700
|
+
setInputError(error);
|
|
701
|
+
}
|
|
702
|
+
}, [value, inputError, type, maxLength, errorMessage, required]);
|
|
690
703
|
const handleChange = React.useCallback((e) => {
|
|
691
704
|
const newValue = e.target.value;
|
|
692
705
|
if (!disabled && (!maxLength || newValue.length <= maxLength)) {
|
|
@@ -2531,7 +2544,7 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
2531
2544
|
}
|
|
2532
2545
|
}, [state.isOpen, enableApiSearch, onApiSearch]);
|
|
2533
2546
|
React.useEffect(() => {
|
|
2534
|
-
if (enableApiSearch && state.
|
|
2547
|
+
if (enableApiSearch && state.isOpen) {
|
|
2535
2548
|
if (lastSearchTermRef.current !== state.searchTerm) {
|
|
2536
2549
|
debouncedApiSearch(state.searchTerm);
|
|
2537
2550
|
}
|
|
@@ -2722,25 +2735,28 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
2722
2735
|
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
2723
2736
|
}), [maxWidth]);
|
|
2724
2737
|
const handleSearchChange = (e) => {
|
|
2725
|
-
|
|
2738
|
+
const value = e.target.value;
|
|
2739
|
+
actions.setSearchInput(value);
|
|
2740
|
+
if (enableApiSearch) {
|
|
2741
|
+
actions.setSearchTerm(value);
|
|
2742
|
+
}
|
|
2726
2743
|
};
|
|
2727
2744
|
const handleSearchKeyDown = (e) => {
|
|
2745
|
+
const isNavigationKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'].includes(e.key);
|
|
2746
|
+
if (!isNavigationKey) {
|
|
2747
|
+
e.stopPropagation();
|
|
2748
|
+
return;
|
|
2749
|
+
}
|
|
2728
2750
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
if (!hasSelection) {
|
|
2732
|
-
e.preventDefault();
|
|
2733
|
-
return;
|
|
2734
|
-
}
|
|
2751
|
+
e.currentTarget.blur();
|
|
2752
|
+
return;
|
|
2735
2753
|
}
|
|
2736
2754
|
if (e.key === 'Enter') {
|
|
2737
|
-
e.
|
|
2738
|
-
|
|
2739
|
-
actions.setSearchTerm(state.searchInput);
|
|
2755
|
+
e.currentTarget.blur();
|
|
2756
|
+
return;
|
|
2740
2757
|
}
|
|
2741
|
-
if (e.key === 'Escape') {
|
|
2758
|
+
else if (e.key === 'Escape') {
|
|
2742
2759
|
e.preventDefault();
|
|
2743
|
-
e.stopPropagation();
|
|
2744
2760
|
actions.resetSearch();
|
|
2745
2761
|
}
|
|
2746
2762
|
};
|