@giro-ds/react 12.6.2 → 12.7.0

package/dist/index.d.ts

@@ -497,6 +497,8 @@ interface DatePickerProps extends ScalableProps {
     minDate?: Date;
     /** Data máxima selecionável */
     maxDate?: Date;
+    /** Define se o calendário pode ser aberto ao clicar/focar no campo */
+    showCalendar?: boolean;
     /** ID para testes automatizados */
     'data-testid'?: string;
 }
@@ -1001,6 +1003,8 @@ interface QuantityProps extends ScalableProps, Omit<React$1.HTMLAttributes<HTMLD
     size?: Size;
     /** Número de casas decimais permitidas */
     decimalPlaces?: number;
+    /** Caractere usado como separador decimal. Padrão: ',' */
+    decimalSeparator?: ',' | '.';
     /** Incremento/decremento ao clicar nos botões */
     valueIncrement?: number;
     /**

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import React__default, { useId, version, forwardRef as forwardRef$1, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, memo, useReducer } from 'react';
 import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Spacebar20Regular, ArrowImport20Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, DocumentAdd24Regular, Warning24Regular, Document24Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
 import { DayPicker } from 'react-day-picker';
-import { format, addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
+import { format, addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay as startOfDay$1, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
 import { createPortal } from 'react-dom';
 import Keyboard from 'react-simple-keyboard';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -2513,7 +2513,7 @@ class DateLib {
         this.startOfDay = (date) => {
             return this.overrides?.startOfDay
                 ? this.overrides.startOfDay(date)
-                : startOfDay(date);
+                : startOfDay$1(date);
         };
         /**
          * Returns the start of the ISO week for the given date.
@@ -3908,8 +3908,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 = useId();
     const calendarId = `${fieldId}-calendar`;
     const containerStyle = { '--giro-scale': scale };
@@ -3918,31 +3931,40 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
     const [tempInputValue, setTempInputValue] = useState('');
     const [isEditing, setIsEditing] = useState(false);
     const [internalError, setInternalError] = useState('');
-    const [showCalendar, setShowCalendar] = useState(false);
+    const [isCalendarOpen, setIsCalendarOpen] = useState(false);
     const [currentDate, setCurrentDate] = useState(new Date());
     const wrapperRef = 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 || '';
     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 = useCallback((newDate) => {
         if (!isControlled) {
             setInternalDate(newDate);
@@ -3956,36 +3978,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;
             }
@@ -4001,12 +4030,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) => {
@@ -4033,15 +4062,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 (jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
+    return (jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar && isCalendarOpen, onOpenChange: (open) => {
+                if (showCalendar)
+                    setIsCalendarOpen(open);
+            }, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(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: 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: 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 }) }));
@@ -4967,11 +5006,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] = useState(initialValue);
-    const [inputValue, setInputValue] = useState(decimal ? initialValue.toFixed(decimalPlaces) : String(initialValue));
+    const [inputValue, setInputValue] = useState(decimal ? initialValue.toFixed(decimalPlaces).replace('.', decimalSeparator) : String(initialValue));
     const inputRef = useRef(null);
+    const formatDecimalValue = useCallback((num) => num.toFixed(decimalPlaces).replace('.', decimalSeparator), [decimalPlaces, decimalSeparator]);
     const stepValue = valueIncrement !== undefined ? valueIncrement : decimal ? Math.pow(10, -decimalPlaces) : 1;
     const isMinValue = useMemo(() => internalValue <= minValue, [internalValue, minValue]);
     const isMaxValue = useMemo(() => internalValue >= maxValue, [internalValue, maxValue]);
@@ -4989,32 +5029,34 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
     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 = 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 = 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 = 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;
@@ -5026,22 +5068,22 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
             }
             return filtered || '0'; // Se ficar vazio, retorna '0'
         }
-    }, [decimal]);
+    }, [decimal, decimalSeparator]);
     const handleInputChange = 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);
             }
@@ -5053,36 +5095,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 = 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 {
@@ -5101,7 +5143,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 = useCallback((e) => {
         if (disabled)
             return;
@@ -5123,14 +5165,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':
@@ -5142,7 +5184,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 = useId();
     const inputId = id || uniqueId;