@giro-ds/react 12.6.2 → 12.7.0

package/dist/index.cjs

@@ -3927,8 +3927,21 @@ function validatePartialDate(value, locale = 'pt-br') {
     }
     return 'incomplete';
 }
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function isDateInRange(date, minDate, maxDate) {
+    const day = startOfDay(date);
+    if (minDate && day < startOfDay(minDate)) {
+        return false;
+    }
+    if (maxDate && day > startOfDay(maxDate)) {
+        return false;
+    }
+    return true;
+}
 
-const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label, value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, id, className, style, ...rest }) => {
+const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label, value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, showCalendar = true, 'data-testid': testId, scale = 1, id, className, style, ...rest }) => {
     const fieldId = React.useId();
     const calendarId = `${fieldId}-calendar`;
     const containerStyle = { '--giro-scale': scale };
@@ -3937,31 +3950,40 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
     const [tempInputValue, setTempInputValue] = React.useState('');
     const [isEditing, setIsEditing] = React.useState(false);
     const [internalError, setInternalError] = React.useState('');
-    const [showCalendar, setShowCalendar] = React.useState(false);
+    const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
     const [currentDate, setCurrentDate] = React.useState(new Date());
     const wrapperRef = React.useRef(null);
     const currentSelectedDate = isControlled ? value : internalDate;
     const hasValidationError = !!(externalError || internalError);
     const displayValue = isEditing ? tempInputValue : (currentSelectedDate ? formatDate(currentSelectedDate, locale) : '');
-    const combinedHelperText = externalError && helperText
-        ? `${helperText} • ${externalError}`
-        : externalError || helperText || '';
+    const invalidDateMessage = locale === 'en-us' ? 'Invalid date' : 'Data inválida';
+    const outOfRangeMessage = locale === 'en-us' ? 'Date out of allowed range' : 'Data fora do intervalo permitido';
+    const internalErrorText = internalError === 'invalid'
+        ? invalidDateMessage
+        : internalError === 'range'
+            ? outOfRangeMessage
+            : '';
+    const combinedHelperText = internalErrorText
+        ? internalErrorText
+        : externalError && helperText
+            ? `${helperText} • ${externalError}`
+            : externalError || helperText || '';
     React.useEffect(() => {
         function handleClickOutside(event) {
             const target = event.target;
             const isInsideWrapper = wrapperRef.current?.contains(target);
             const isInsideCalendar = !!target.closest?.('[data-radix-popper-content-wrapper]');
             if (!isInsideWrapper && !isInsideCalendar) {
-                setShowCalendar(false);
+                setIsCalendarOpen(false);
             }
         }
-        if (showCalendar) {
+        if (isCalendarOpen) {
             document.addEventListener('mousedown', handleClickOutside);
         }
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [showCalendar]);
+    }, [isCalendarOpen]);
     const handleDateChange = React.useCallback((newDate) => {
         if (!isControlled) {
             setInternalDate(newDate);
@@ -3975,36 +3997,43 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
         }
     }, [isControlled, onChange]);
     const handleIconClick = () => {
-        setShowCalendar((prev) => !prev);
+        if (!showCalendar)
+            return;
+        setIsCalendarOpen((prev) => !prev);
     };
     const handleKeyDown = (event) => {
         const { key } = event;
         if (key === 'Enter') {
-            if (showCalendar) {
+            if (isCalendarOpen) {
                 if (currentSelectedDate) {
-                    setShowCalendar(false);
+                    setIsCalendarOpen(false);
                     event.preventDefault();
                     return;
                 }
                 if (tempInputValue.length === 10 && isValidDateFormat(tempInputValue, locale)) {
                     const parsedDate = parseDate(tempInputValue, locale);
                     if (parsedDate && !isNaN(parsedDate.getTime())) {
+                        if (!isDateInRange(parsedDate, minDate, maxDate)) {
+                            setInternalError('range');
+                            event.preventDefault();
+                            return;
+                        }
                         handleDateChange(parsedDate);
-                        setShowCalendar(false);
+                        setIsCalendarOpen(false);
                         event.preventDefault();
                         return;
                     }
                 }
             }
-            else {
-                setShowCalendar(true);
+            else if (showCalendar) {
+                setIsCalendarOpen(true);
                 event.preventDefault();
                 return;
             }
         }
         if (key === 'Escape') {
-            if (showCalendar) {
-                setShowCalendar(false);
+            if (isCalendarOpen) {
+                setIsCalendarOpen(false);
                 event.preventDefault();
                 return;
             }
@@ -4020,12 +4049,12 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
         }
     };
     const handleDaySelect = (newSelectedDate) => {
-        setShowCalendar(false);
+        setIsCalendarOpen(false);
         handleDateChange(newSelectedDate);
     };
     const handleFocus = () => {
-        if (!disabled) {
-            setShowCalendar(true);
+        if (!disabled && showCalendar) {
+            setIsCalendarOpen(true);
         }
     };
     const handleTextFieldChange = (value) => {
@@ -4052,15 +4081,25 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
             if (maskedValue.length === 10) {
                 const parsedDate = parseDate(maskedValue, locale);
                 if (parsedDate) {
+                    if (!isDateInRange(parsedDate, minDate, maxDate)) {
+                        setInternalError('range');
+                        if (!isControlled)
+                            setInternalDate(null);
+                        onChange?.(null);
+                        return;
+                    }
                     handleDateChange(parsedDate);
                     setCurrentDate(parsedDate);
                 }
             }
         }
     };
-    return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
+    return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar && isCalendarOpen, onOpenChange: (open) => {
+                if (showCalendar)
+                    setIsCalendarOpen(open);
+            }, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
                     handleTextFieldChange(String(e));
-                }, onKeyDown: handleKeyDown, onFocus: handleFocus, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "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": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
+                }, onKeyDown: handleKeyDown, onFocus: handleFocus, autoComplete: "off", value: displayValue, helperText: !hasValidationError ? (helperText || undefined) : undefined, errorMessage: hasValidationError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar && isCalendarOpen, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": hasValidationError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
                     handleDateChange(null);
                     setCurrentDate(new Date());
                 } }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
@@ -4986,11 +5025,12 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
 
 var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
 
-const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, valueIncrement = 1, scale = 1, className, style, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
+const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, decimalSeparator = ',', size = 'lg', id, valueIncrement = 1, scale = 1, className, style, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
     const initialValue = Math.min(Math.max(value, minValue), maxValue);
     const [internalValue, setInternalValue] = React.useState(initialValue);
-    const [inputValue, setInputValue] = React.useState(decimal ? initialValue.toFixed(decimalPlaces) : String(initialValue));
+    const [inputValue, setInputValue] = React.useState(decimal ? initialValue.toFixed(decimalPlaces).replace('.', decimalSeparator) : String(initialValue));
     const inputRef = React.useRef(null);
+    const formatDecimalValue = React.useCallback((num) => num.toFixed(decimalPlaces).replace('.', decimalSeparator), [decimalPlaces, decimalSeparator]);
     const stepValue = valueIncrement !== undefined ? valueIncrement : decimal ? Math.pow(10, -decimalPlaces) : 1;
     const isMinValue = React.useMemo(() => internalValue <= minValue, [internalValue, minValue]);
     const isMaxValue = React.useMemo(() => internalValue >= maxValue, [internalValue, maxValue]);
@@ -5008,32 +5048,34 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
     React.useEffect(() => {
         const clamped = Math.min(Math.max(value, minValue), maxValue);
         setInternalValue(clamped);
-        setInputValue(decimal ? clamped.toFixed(decimalPlaces) : String(clamped));
-    }, [value, minValue, maxValue, decimal, decimalPlaces]);
+        setInputValue(decimal ? formatDecimalValue(clamped) : String(clamped));
+    }, [value, minValue, maxValue, decimal, formatDecimalValue]);
     const increment = React.useCallback(() => {
         if (disabled)
             return;
         const newValue = Math.min(maxValue, internalValue + stepValue);
         setInternalValue(newValue);
-        setInputValue(decimal ? newValue.toFixed(decimalPlaces) : String(newValue));
+        setInputValue(decimal ? formatDecimalValue(newValue) : String(newValue));
         onChange?.(newValue);
-    }, [disabled, internalValue, stepValue, decimal, decimalPlaces, onChange, maxValue]);
+    }, [disabled, internalValue, stepValue, decimal, formatDecimalValue, onChange, maxValue]);
     const decrement = React.useCallback(() => {
         if (disabled)
             return;
         const newValue = Math.max(minValue, internalValue - stepValue);
         setInternalValue(newValue);
-        setInputValue(decimal ? newValue.toFixed(decimalPlaces) : String(newValue));
+        setInputValue(decimal ? formatDecimalValue(newValue) : String(newValue));
         onChange?.(newValue);
-    }, [disabled, internalValue, stepValue, decimal, decimalPlaces, onChange, minValue]);
+    }, [disabled, internalValue, stepValue, decimal, formatDecimalValue, onChange, minValue]);
     const filterInput = React.useCallback((inputValue) => {
         if (decimal) {
-            let filtered = inputValue.replace(/[^\d.]/g, '');
-            const parts = filtered.split('.');
+            const escapedSeparator = decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const allowedCharsRegex = new RegExp(`[^\\d${escapedSeparator}]`, 'g');
+            let filtered = inputValue.replace(allowedCharsRegex, '');
+            const parts = filtered.split(decimalSeparator);
             if (parts.length > 2) {
-                filtered = parts[0] + '.' + parts.slice(1).join('');
+                filtered = parts[0] + decimalSeparator + parts.slice(1).join('');
             }
-            if (filtered.length > 1 && filtered.startsWith('0') && !filtered.startsWith('0.')) {
+            if (filtered.length > 1 && filtered.startsWith('0') && !filtered.startsWith(`0${decimalSeparator}`)) {
                 filtered = filtered.replace(/^0+/, '');
             }
             return filtered;
@@ -5045,22 +5087,22 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
             }
             return filtered || '0'; // Se ficar vazio, retorna '0'
         }
-    }, [decimal]);
+    }, [decimal, decimalSeparator]);
     const handleInputChange = React.useCallback((event) => {
         if (disabled)
             return;
         const rawValue = event.target.value;
         const filteredValue = filterInput(rawValue);
         setInputValue(filteredValue);
-        if (filteredValue === '' || filteredValue === '.') {
+        if (filteredValue === '' || filteredValue === decimalSeparator) {
             onChange?.(0);
             return;
         }
         if (decimal) {
-            if (filteredValue.endsWith('.')) {
+            if (filteredValue.endsWith(decimalSeparator)) {
                 return;
             }
-            const parsedValue = parseFloat(filteredValue);
+            const parsedValue = parseFloat(filteredValue.replace(decimalSeparator, '.'));
             if (!isNaN(parsedValue)) {
                 onChange?.(parsedValue);
             }
@@ -5072,36 +5114,36 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
                 onChange?.(validValue);
             }
         }
-    }, [disabled, decimal, filterInput, onChange, minValue, maxValue]);
+    }, [disabled, decimal, decimalSeparator, filterInput, onChange, minValue, maxValue]);
     const handleBlur = React.useCallback(() => {
         if (disabled)
             return;
         const currentValue = inputValue.trim();
         if (decimal) {
-            if (currentValue === '' || currentValue === '.') {
-                setInputValue(internalValue.toFixed(decimalPlaces));
+            if (currentValue === '' || currentValue === decimalSeparator) {
+                setInputValue(formatDecimalValue(internalValue));
                 return;
             }
-            if (currentValue.endsWith('.')) {
-                const baseValue = parseFloat(currentValue.slice(0, -1));
+            if (currentValue.endsWith(decimalSeparator)) {
+                const baseValue = parseFloat(currentValue.slice(0, -1).replace(decimalSeparator, '.'));
                 if (!isNaN(baseValue)) {
-                    const formattedValue = baseValue.toFixed(decimalPlaces);
+                    const formattedValue = formatDecimalValue(baseValue);
                     setInputValue(formattedValue);
                     setInternalValue(baseValue);
                     onChange?.(baseValue);
                 }
                 return;
             }
-            const parsedValue = parseFloat(currentValue);
+            const parsedValue = parseFloat(currentValue.replace(decimalSeparator, '.'));
             if (!isNaN(parsedValue)) {
                 const normalizedValue = Math.min(Math.max(parsedValue, minValue), maxValue);
-                const formattedValue = normalizedValue.toFixed(decimalPlaces);
+                const formattedValue = formatDecimalValue(normalizedValue);
                 setInputValue(formattedValue);
                 setInternalValue(normalizedValue);
                 onChange?.(normalizedValue);
             }
             else {
-                setInputValue(internalValue.toFixed(decimalPlaces));
+                setInputValue(formatDecimalValue(internalValue));
             }
         }
         else {
@@ -5120,7 +5162,7 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
                 onChange?.(normalizedValue);
             }
         }
-    }, [disabled, decimal, inputValue, decimalPlaces, internalValue, onChange, minValue, maxValue]);
+    }, [disabled, decimal, decimalSeparator, inputValue, formatDecimalValue, internalValue, onChange, minValue, maxValue]);
     const handleInputKeyDown = React.useCallback((e) => {
         if (disabled)
             return;
@@ -5142,14 +5184,14 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
             case 'Escape':
                 e.preventDefault();
                 if (inputRef.current) {
-                    setInputValue(decimal ? internalValue.toFixed(decimalPlaces) : String(internalValue));
+                    setInputValue(decimal ? formatDecimalValue(internalValue) : String(internalValue));
                     inputRef.current.blur();
                 }
                 break;
             case 'Home':
                 e.preventDefault();
                 setInternalValue(minValue);
-                setInputValue(decimal ? minValue.toFixed(decimalPlaces) : String(minValue));
+                setInputValue(decimal ? formatDecimalValue(minValue) : String(minValue));
                 onChange?.(minValue);
                 break;
             case 'End':
@@ -5161,7 +5203,7 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
                 }
                 break;
         }
-    }, [disabled, increment, decrement, decimal, decimalPlaces, onChange, internalValue, minValue, maxValue]);
+    }, [disabled, increment, decrement, decimal, formatDecimalValue, onChange, internalValue, minValue, maxValue]);
     const inputSizeValue = inputSize !== undefined ? inputSize : Math.max(1, inputValue.length);
     const uniqueId = React.useId();
     const inputId = id || uniqueId;