@useblu/ocean-react 1.36.3 → 1.37.2

package/index.es.js

@@ -4960,10 +4960,12 @@ var Carousel = function (_a) {
 function useInputFilled(_a) {
     var value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange;
     var _b = useState(Boolean(value || defaultValue)), filled = _b[0], setFilled = _b[1];
+    var _c = useState(value || defaultValue), inputValue = _c[0], setInputValue = _c[1];
     var handleChange = useCallback(function (event) {
         if (onChange)
             return onChange(event);
         setFilled(Boolean(event.target.value));
+        setInputValue(event.target.value);
     }, [onChange]);
     useEffect(function () {
         setFilled(Boolean(value));
@@ -4971,7 +4973,7 @@ function useInputFilled(_a) {
     useEffect(function () {
         setFilled(Boolean(defaultValue));
     }, [defaultValue]);
-    return { filled: filled, handleChange: handleChange };
+    return { inputValue: inputValue, filled: filled, handleChange: handleChange };
 }
 
 function FormLabelBase(_a, ref) {
@@ -4998,7 +5000,7 @@ var FormControl = function (_a) {
 };
 
 var Input = e.forwardRef(function Input(_a, ref) {
-    var type = _a.type, label = _a.label, helperText = _a.helperText, error = _a.error, disabled = _a.disabled, defaultValue = _a.defaultValue, tooltipMessage = _a.tooltipMessage, position = _a.position, adornment = _a.adornment, className = _a.className, id = _a.id, onChange = _a.onChange, value = _a.value, rest = __rest$1(_a, ["type", "label", "helperText", "error", "disabled", "defaultValue", "tooltipMessage", "position", "adornment", "className", "id", "onChange", "value"]);
+    var type = _a.type, label = _a.label, helperText = _a.helperText, error = _a.error, disabled = _a.disabled, defaultValue = _a.defaultValue, placeholder = _a.placeholder, tooltipMessage = _a.tooltipMessage, position = _a.position, adornment = _a.adornment, className = _a.className, id = _a.id, onChange = _a.onChange, value = _a.value, rest = __rest$1(_a, ["type", "label", "helperText", "error", "disabled", "defaultValue", "placeholder", "tooltipMessage", "position", "adornment", "className", "id", "onChange", "value"]);
     var _b = useInputFilled({
         defaultValue: defaultValue,
         value: value,
@@ -5006,7 +5008,7 @@ var Input = e.forwardRef(function Input(_a, ref) {
     }), filled = _b.filled, handleChange = _b.handleChange;
     return (e.createElement(FormControl, { label: label, tooltipMessage: tooltipMessage, htmlFor: id, helperText: helperText, error: error, disabled: disabled },
         e.createElement("div", { className: classNames('ods-input', filled && 'ods-input--filled', disabled && 'ods-input--disabled', error && 'ods-input--error', position === 'left' && 'ods-input--left', adornment && !filled ? 'ods-input--disabled--text' : '', className) },
-            e.createElement("input", __assign$1({ ref: ref, type: type || 'text', id: id, disabled: disabled, onChange: handleChange, defaultValue: defaultValue, value: value }, rest)),
+            e.createElement("input", __assign$1({ ref: ref, type: type || 'text', id: id, disabled: disabled, onChange: handleChange, defaultValue: defaultValue, placeholder: placeholder, value: value }, rest)),
             adornment && (e.createElement("div", { className: classNames('ods-input__adornment', {
                     'ods-input__adornment--placeholder': !filled
                 }) }, adornment)))));
@@ -5049,14 +5051,14 @@ var Link = forwardRef(function Link(_a, ref) {
 });
 
 var TextArea = e.forwardRef(function TextArea(_a, ref) {
-    var className = _a.className, label = _a.label, helperText = _a.helperText, error = _a.error, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, rest = __rest$1(_a, ["className", "label", "helperText", "error", "id", "disabled", "onChange", "value", "defaultValue"]);
+    var className = _a.className, label = _a.label, placeholder = _a.placeholder, helperText = _a.helperText, error = _a.error, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, rest = __rest$1(_a, ["className", "label", "placeholder", "helperText", "error", "id", "disabled", "onChange", "value", "defaultValue"]);
     var _b = useInputFilled({
         defaultValue: defaultValue,
         value: value,
         onChange: onChange
     }), filled = _b.filled, handleChange = _b.handleChange;
     return (e.createElement(FormControl, { label: label, htmlFor: id, helperText: helperText, error: error, disabled: disabled },
-        e.createElement("textarea", __assign$1({ ref: ref, id: id, className: classNames('ods-textarea', filled && 'ods-textarea--filled', error && 'ods-textarea--error', className), disabled: disabled, onChange: handleChange, defaultValue: defaultValue, value: value }, rest))));
+        e.createElement("textarea", __assign$1({ ref: ref, id: id, className: classNames('ods-textarea', filled && 'ods-textarea--filled', error && 'ods-textarea--error', className), disabled: disabled, onChange: handleChange, placeholder: placeholder, defaultValue: defaultValue, value: value }, rest))));
 });
 
 var Context = e.createContext({});
@@ -8241,24 +8243,22 @@ function IconButtonBase(_a, ref) {
 var IconButton = e.forwardRef(IconButtonBase);
 
 var Search = e.forwardRef(function Input(_a, ref) {
-    var className = _a.className, id = _a.id, disabled = _a.disabled, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, rest = __rest$1(_a, ["className", "id", "disabled", "value", "defaultValue", "onChange"]);
-    var _b = useState(defaultValue || value), inputValue = _b[0], setInputValue = _b[1];
+    var className = _a.className, id = _a.id, disabled = _a.disabled, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, onChange = _a.onChange, rest = __rest$1(_a, ["className", "id", "disabled", "value", "defaultValue", "placeholder", "onChange"]);
+    var _b = useInputFilled({
+        defaultValue: defaultValue,
+        value: value,
+        onChange: onChange
+    }), inputValue = _b.inputValue, filled = _b.filled, handleChange = _b.handleChange;
     return (e.createElement(FormControl, { htmlFor: id, disabled: disabled },
-        e.createElement("div", { className: classNames('ods-search', inputValue && 'ods-search--filled', disabled && 'ods-search--disabled', className) },
+        e.createElement("div", { className: classNames('ods-search', filled && 'ods-search--filled', disabled && 'ods-search--disabled', className) },
             e.createElement("div", { className: "ods-search__adornment" },
                 e.createElement(jt, null)),
-            e.createElement("input", __assign$1({ ref: ref, type: "text", id: id, disabled: disabled, onChange: function (e) {
-                    setInputValue(e.target.value);
-                    if (onChange)
-                        onChange(e);
-                }, value: inputValue }, rest)),
-            inputValue && (e.createElement(IconButton, { "data-testid": "close", onClick: function () {
-                    setInputValue('');
+            e.createElement("input", __assign$1({ ref: ref, type: "text", id: id, disabled: disabled, onChange: handleChange, placeholder: placeholder, defaultValue: defaultValue, value: inputValue || '' }, rest)),
+            filled && (e.createElement(IconButton, { "data-testid": "close", onClick: function () {
                     var e = {
                         target: { value: '' }
                     };
-                    if (onChange)
-                        onChange(e);
+                    handleChange(e);
                 }, className: "ods-search__clean", size: "sm" },
                 e.createElement(Ma, null))))));
 });
@@ -31859,8 +31859,24 @@ var locale = {
   }
 };
 
-function useDatePicker(_a) {
-    var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale$1 = _a.locale;
+var handleValidateStartsToday = function (startsToday, day) {
+    return Boolean(startsToday && day < new Date(new Date().setDate(new Date().getDate() - 1)));
+};
+var dateMask = function (value) {
+    var v = value.replace(/\D/g, '').slice(0, 10);
+    if (v.length >= 5)
+        return "".concat(v.slice(0, 2), "/").concat(v.slice(2, 4), "/").concat(v.slice(4));
+    if (v.length >= 3)
+        return "".concat(v.slice(0, 2), "/").concat(v.slice(2));
+    return v;
+};
+var formatDay$1 = function (day) { return format(day, 'd'); };
+var getInputPlaceholder = function (localeOption) {
+    return localeOption.code === 'pt-BR' ? 'dd/mm/aaaa' : 'mm/dd/yyyy';
+};
+
+function useDatePickerSingle(_a) {
+    var value = _a.value, onSelect = _a.onSelect, startsToday = _a.startsToday, locale$1 = _a.locale;
     var localeOption = locale$1 || locale;
     var localeDateFormat = localeOption &&
         localeOption.formatLong &&
@@ -31869,51 +31885,22 @@ function useDatePicker(_a) {
     var input2Ref = e.useRef(null);
     var _b = e.useState(false), showDayPicker = _b[0], setShowDayPicker = _b[1];
     var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
-    var _d = e.useState({ from: '', to: '' }), datePickerCache = _d[0], setDatePickerCache = _d[1];
-    var fromDate = parse(values.from, localeDateFormat, new Date());
-    var toDate = parse(values.to, localeDateFormat, new Date());
+    var _d = e.useState(''), datePickerCache = _d[0], setDatePickerCache = _d[1];
+    var fromDate = parse(value || '', localeDateFormat, new Date());
     e.useEffect(function () {
-        if (values.from === '')
+        if (value === '')
             setCurrentField('');
-    }, [values.from]);
+    }, [value]);
     var updateState = function (updateData, updateCache) {
         onSelect(updateData);
         updateCache && setDatePickerCache(updateData);
     };
-    var handleValidateStartsToday = function (day) {
-        return Boolean(startsToday &&
-            day < new Date(new Date().setDate(new Date().getDate() - 1)));
-    };
-    var handleDayMouseEnter = function (day) {
-        var formattedDay = format(day, localeDateFormat);
-        if (currentField === 'end-date' && !(values.from && day < fromDate)) {
-            setCurrentField('end-date');
-            updateState({ from: values.from, to: formattedDay });
-        }
-    };
     var handleDayClick = function (day) {
-        if (!(startsToday && handleValidateStartsToday(day))) {
+        if (!(startsToday && handleValidateStartsToday(startsToday, day))) {
             var formattedDay = format(day, localeDateFormat);
-            if (currentField === 'start-date') {
-                if (day > toDate) {
-                    updateState({ from: formattedDay, to: '' }, true);
-                }
-                else {
-                    updateState({ from: formattedDay, to: values.to });
-                    setDatePickerCache({ from: formattedDay, to: values.to });
-                }
-                setCurrentField('end-date');
-            }
-            if (currentField === 'end-date') {
-                if (day < fromDate) {
-                    updateState({ from: formattedDay, to: '' }, true);
-                }
-                else {
-                    updateState({ from: values.from, to: formattedDay }, true);
-                    setShowDayPicker(false);
-                    setCurrentField('');
-                }
-            }
+            updateState(formattedDay, true);
+            setCurrentField('');
+            setShowDayPicker(false);
         }
     };
     var createHandleToggleClick = function (fieldId) {
@@ -31921,16 +31908,8 @@ function useDatePicker(_a) {
         setCurrentField(fieldId);
     };
     var disabledDays = function (day) {
-        var startToday = handleValidateStartsToday(day);
-        return startToday || (currentField === 'end-date' && day < fromDate);
-    };
-    var dateMask = function (value) {
-        var v = value.replace(/\D/g, '').slice(0, 10);
-        if (v.length >= 5)
-            return "".concat(v.slice(0, 2), "/").concat(v.slice(2, 4), "/").concat(v.slice(4));
-        if (v.length >= 3)
-            return "".concat(v.slice(0, 2), "/").concat(v.slice(2));
-        return v;
+        var startToday = handleValidateStartsToday(startsToday, day);
+        return startToday;
     };
     var closeCalendarDelay = function () {
         setTimeout(function () { return setShowDayPicker(false); }, 500);
@@ -31938,80 +31917,54 @@ function useDatePicker(_a) {
     var inputChange = function (_a) {
         var target = _a.target;
         var dataFormatted = dateMask(target.value);
-        if (target.id === 'start-date') {
-            setCurrentField('start-date');
-            updateState({ from: dataFormatted, to: '' }, true);
-            if (dataFormatted.length === localeDateFormat.length) {
-                setCurrentField('end-date');
-                if (input2Ref && input2Ref.current)
-                    input2Ref.current.focus();
-            }
-        }
-        else {
-            setCurrentField('end-date');
-            updateState({ from: values.from, to: dataFormatted }, true);
-            if (dataFormatted.length === localeDateFormat.length) {
-                setCurrentField('');
-                closeCalendarDelay();
-            }
+        updateState(dataFormatted, true);
+        if (dataFormatted.length === localeDateFormat.length) {
+            setCurrentField('');
+            closeCalendarDelay();
         }
     };
     var handleCloseByOutside = function () {
         if (showDayPicker) {
             setShowDayPicker(false);
             setCurrentField('');
-            if (datePickerCache.from !== '' && datePickerCache.to !== '')
+            if (datePickerCache)
                 updateState(datePickerCache);
         }
     };
     var CustomStyles = {
-        root: "ods-datepicker__calendar ".concat(currentField === 'start-date'
-            ? 'ods-datepicker_calendar_m1'
-            : 'ods-datepicker_calendar_m2'),
-        caption: 'ods-datepicker__caption',
-        nav_button: 'ods-datepicker__navButtons',
-        nav_button_previous: 'ods-datepicker__navButtonPrev',
-        nav_button_next: 'ods-datepicker__navButtonNext',
-        nav_icon: 'ods-datepicker__navIcon',
-        table: 'ods-datepicker__table',
-        head: 'ods-datepicker__head',
-        head_row: 'ods-datepicker__headRow',
-        tbody: 'ods-datepicker__body',
-        row: 'ods-datepicker__row',
-        cell: 'ods-datepicker__cell',
-        day: 'ods-datepicker__day',
-        day_today: 'ods-datepicker__today',
-        day_selected: 'ods-datepicker__selected',
-        day_disabled: 'ods-datepicker__disabled',
-        day_range_start: 'ods-datepicker__selectedStart',
-        day_range_end: 'ods-datepicker__selectedEnd',
-        day_range_middle: 'ods-datepicker__selectedMiddle'
-    };
-    var selectedDays = {
-        from: fromDate,
-        to: toDate
-    };
-    var formatDay = function (day) { return format(day, 'd'); };
-    var getInputPlaceholder = function () {
-        return localeOption.code === 'pt-BR' ? 'dd/mm/aaaa' : 'mm/dd/yyyy';
+        root: 'ods-date__calendar ods-date_calendar_m1',
+        caption: 'ods-date__caption',
+        nav_button: 'ods-date__navButtons',
+        nav_button_previous: 'ods-date__navButtonPrev-datepicker',
+        nav_button_next: 'ods-date__navButtonNext-datepicker',
+        nav_icon: 'ods-date__navIcon',
+        table: 'ods-date__table',
+        head: 'ods-date__head',
+        head_row: 'ods-date__headRow',
+        tbody: 'ods-date__body',
+        row: 'ods-date__row',
+        cell: 'ods-date__cell',
+        day: 'ods-date__day',
+        day_today: 'ods-date__today',
+        day_selected: 'ods-date__selected-datepicker',
+        day_disabled: 'ods-date__disabled'
     };
+    var selectedDay = fromDate;
+    var inputPlaceholder = getInputPlaceholder(localeOption);
     return {
         input1Ref: input1Ref,
         input2Ref: input2Ref,
         showDayPicker: showDayPicker,
-        fromDate: fromDate,
-        toDate: toDate,
-        selectedDays: selectedDays,
+        selectedDay: selectedDay,
         CustomStyles: CustomStyles,
         localeOption: localeOption,
         currentField: currentField,
-        handleDayMouseEnter: handleDayMouseEnter,
+        inputPlaceholder: inputPlaceholder,
         handleDayClick: handleDayClick,
         inputChange: inputChange,
         createHandleToggleClick: createHandleToggleClick,
         disabledDays: disabledDays,
-        formatDay: formatDay,
-        getInputPlaceholder: getInputPlaceholder,
+        formatDay: formatDay$1,
         handleCloseByOutside: handleCloseByOutside
     };
 }
@@ -34079,39 +34032,218 @@ function DayPicker(props) {
         e.createElement(Root, null)));
 }
 
-var DatePicker = e.forwardRef(function DatePicker(_a, ref) {
-    var labels = _a.labels, values = _a.values, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["labels", "values", "onSelect", "editable", "disabled", "error", "helperText", "startsToday", "className", "locale"]);
-    var _b = useDatePicker({ values: values, onSelect: onSelect, startsToday: startsToday, locale: locale }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClick = _b.handleDayClick, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, getInputPlaceholder = _b.getInputPlaceholder, handleCloseByOutside = _b.handleCloseByOutside;
-    var DatePickerHeader = function (props) {
-        var _a = useNavigation(), goToMonth = _a.goToMonth, nextMonth = _a.nextMonth, previousMonth = _a.previousMonth;
-        return (e.createElement("div", { className: "ods-datepicker__caption" },
-            e.createElement(IconButton, { type: "button", "data-testid": "calendar-left-arrow", size: "sm", className: classNames('ods-datepicker__navButtons', 'ods-datepicker__navButtonPrev'), disabled: !previousMonth, onClick: function () { return previousMonth && goToMonth(previousMonth); } },
-                e.createElement($, { size: 20 })),
-            e.createElement("h2", { "data-testid": "calendar-caption-month" }, format(props.displayMonth, 'MMMM yyyy', { locale: localeOption })),
-            e.createElement(IconButton, { type: "button", "data-testid": "calendar-right-arrow", size: "sm", className: classNames('ods-datepicker__navButtons', 'ods-datepicker__navButtonNext'), disabled: !nextMonth, onClick: function () { return nextMonth && goToMonth(nextMonth); } },
-                e.createElement(ee, { size: 20 }))));
+var DatePickerHeader = function (_a) {
+    var displayMonth = _a.displayMonth, locale = _a.locale, _b = _a.mode, mode = _b === void 0 ? 'range' : _b;
+    var _c = useNavigation(), goToMonth = _c.goToMonth, nextMonth = _c.nextMonth, previousMonth = _c.previousMonth;
+    return (e.createElement("div", { className: "ods-date__caption" },
+        e.createElement(IconButton, { type: "button", "data-testid": "calendar-left-arrow", size: "sm", className: classNames('ods-date__navButtons', {
+                'ods-date__navButtonPrev': mode === 'range',
+                'ods-date__navButtonPrev-datepicker': mode === 'single'
+            }), disabled: !previousMonth, onClick: function () { return previousMonth && goToMonth(previousMonth); } },
+            e.createElement($, { size: 20 })),
+        e.createElement("h2", { "data-testid": "calendar-caption-month" }, format(displayMonth, 'MMMM yyyy', { locale: locale })),
+        e.createElement(IconButton, { type: "button", "data-testid": "calendar-right-arrow", size: "sm", className: classNames('ods-date__navButtons', {
+                'ods-date__navButtonNext': mode === 'range',
+                'ods-date__navButtonNext-datepicker': mode === 'single'
+            }), disabled: !nextMonth, onClick: function () { return nextMonth && goToMonth(nextMonth); } },
+            e.createElement(ee, { size: 20 }))));
+};
+
+var DatePickerSingle = e.forwardRef(function DatePickerSingle(_a, ref) {
+    var label = _a.label, value = _a.value, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["label", "value", "onSelect", "editable", "disabled", "error", "helperText", "startsToday", "className", "locale"]);
+    var _b = useDatePickerSingle({ value: value, onSelect: onSelect, startsToday: startsToday, locale: locale }), input1Ref = _b.input1Ref, showDayPicker = _b.showDayPicker, selectedDay = _b.selectedDay, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayClick = _b.handleDayClick, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside;
+    return (e.createElement("div", null,
+        showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
+        e.createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
+            e.createElement("div", { className: "ods-date__form-row-datepicker" },
+                e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
+                    label && e.createElement("label", { htmlFor: "start-date" }, label),
+                    e.createElement(Input, { ref: input1Ref, "data-testid": "datepicker-input-1", id: "start-date", type: "text", className: classNames({
+                            'date-field-focussed': currentField === 'start-date'
+                        }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
+                            undefined, maxLength: 10 })),
+                !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
+                    e.createElement(DayPicker, { mode: "single", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: function (day) { return handleDayClick(day); }, formatters: { formatDay: formatDay }, selected: selectedDay, disabled: disabledDays, components: {
+                            Caption: function (_a) {
+                                var displayMonth = _a.displayMonth;
+                                return DatePickerHeader({
+                                    displayMonth: displayMonth,
+                                    locale: localeOption,
+                                    mode: 'single'
+                                });
+                            }
+                        } })))))));
+});
+
+function useDatePicker(_a) {
+    var values = _a.values, onSelect = _a.onSelect, startsToday = _a.startsToday, locale$1 = _a.locale;
+    var localeOption = locale$1 || locale;
+    var localeDateFormat = localeOption &&
+        localeOption.formatLong &&
+        localeOption.formatLong.date({ width: 'short' });
+    var input1Ref = e.useRef(null);
+    var input2Ref = e.useRef(null);
+    var _b = e.useState(false), showDayPicker = _b[0], setShowDayPicker = _b[1];
+    var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
+    var _d = e.useState({ from: '', to: '' }), datePickerCache = _d[0], setDatePickerCache = _d[1];
+    var fromDate = parse(values.from, localeDateFormat, new Date());
+    var toDate = parse(values.to, localeDateFormat, new Date());
+    e.useEffect(function () {
+        if (values.from === '')
+            setCurrentField('');
+    }, [values.from]);
+    var updateState = function (updateData, updateCache) {
+        onSelect(updateData);
+        updateCache && setDatePickerCache(updateData);
     };
+    var handleDayMouseEnter = function (day) {
+        var formattedDay = format(day, localeDateFormat);
+        if (currentField === 'end-date' && !(values.from && day < fromDate)) {
+            setCurrentField('end-date');
+            updateState({ from: values.from, to: formattedDay });
+        }
+    };
+    var handleDayClick = function (day) {
+        if (!(startsToday && handleValidateStartsToday(startsToday, day))) {
+            var formattedDay = format(day, localeDateFormat);
+            if (currentField === 'start-date') {
+                if (day > toDate) {
+                    updateState({ from: formattedDay, to: '' }, true);
+                }
+                else {
+                    updateState({ from: formattedDay, to: values.to });
+                    setDatePickerCache({ from: formattedDay, to: values.to });
+                }
+                setCurrentField('end-date');
+            }
+            if (currentField === 'end-date') {
+                if (day < fromDate) {
+                    updateState({ from: formattedDay, to: '' }, true);
+                }
+                else {
+                    updateState({ from: values.from, to: formattedDay }, true);
+                    setShowDayPicker(false);
+                    setCurrentField('');
+                }
+            }
+        }
+    };
+    var createHandleToggleClick = function (fieldId) {
+        setShowDayPicker(!showDayPicker);
+        setCurrentField(fieldId);
+    };
+    var disabledDays = function (day) {
+        var startToday = handleValidateStartsToday(startsToday, day);
+        return startToday || (currentField === 'end-date' && day < fromDate);
+    };
+    var closeCalendarDelay = function () {
+        setTimeout(function () { return setShowDayPicker(false); }, 500);
+    };
+    var inputChange = function (_a) {
+        var target = _a.target;
+        var dataFormatted = dateMask(target.value);
+        if (target.id === 'start-date') {
+            setCurrentField('start-date');
+            updateState({ from: dataFormatted, to: '' }, true);
+            if (dataFormatted.length === localeDateFormat.length) {
+                setCurrentField('end-date');
+                if (input2Ref && input2Ref.current)
+                    input2Ref.current.focus();
+            }
+        }
+        else {
+            setCurrentField('end-date');
+            updateState({ from: values.from, to: dataFormatted }, true);
+            if (dataFormatted.length === localeDateFormat.length) {
+                setCurrentField('');
+                closeCalendarDelay();
+            }
+        }
+    };
+    var handleCloseByOutside = function () {
+        if (showDayPicker) {
+            setShowDayPicker(false);
+            setCurrentField('');
+            if (datePickerCache.from !== '' && datePickerCache.to !== '')
+                updateState(datePickerCache);
+        }
+    };
+    var CustomStyles = {
+        root: "ods-date__calendar ".concat(currentField === 'start-date'
+            ? 'ods-date_calendar_m1'
+            : 'ods-date_calendar_m2'),
+        caption: 'ods-date__caption',
+        nav_button: 'ods-date__navButtons',
+        nav_button_previous: 'ods-date__navButtonPrev',
+        nav_button_next: 'ods-date__navButtonNext',
+        nav_icon: 'ods-date__navIcon',
+        table: 'ods-date__table',
+        head: 'ods-date__head',
+        head_row: 'ods-date__headRow',
+        tbody: 'ods-date__body',
+        row: 'ods-date__row',
+        cell: 'ods-date__cell',
+        day: 'ods-date__day',
+        day_today: 'ods-date__today',
+        day_selected: 'ods-date__selected',
+        day_disabled: 'ods-date__disabled',
+        day_range_start: 'ods-date__selectedStart',
+        day_range_end: 'ods-date__selectedEnd',
+        day_range_middle: 'ods-date__selectedMiddle'
+    };
+    var selectedDays = {
+        from: fromDate,
+        to: toDate
+    };
+    var inputPlaceholder = getInputPlaceholder(localeOption);
+    return {
+        input1Ref: input1Ref,
+        input2Ref: input2Ref,
+        showDayPicker: showDayPicker,
+        fromDate: fromDate,
+        toDate: toDate,
+        selectedDays: selectedDays,
+        CustomStyles: CustomStyles,
+        localeOption: localeOption,
+        currentField: currentField,
+        inputPlaceholder: inputPlaceholder,
+        handleDayMouseEnter: handleDayMouseEnter,
+        handleDayClick: handleDayClick,
+        inputChange: inputChange,
+        createHandleToggleClick: createHandleToggleClick,
+        disabledDays: disabledDays,
+        formatDay: formatDay$1,
+        handleCloseByOutside: handleCloseByOutside
+    };
+}
+
+var DatePickerRange = e.forwardRef(function DatePickerRange(_a, ref) {
+    var labels = _a.labels, values = _a.values, onSelect = _a.onSelect, editable = _a.editable, disabled = _a.disabled, error = _a.error, helperText = _a.helperText, startsToday = _a.startsToday, className = _a.className, locale = _a.locale, rest = __rest$1(_a, ["labels", "values", "onSelect", "editable", "disabled", "error", "helperText", "startsToday", "className", "locale"]);
+    var _b = useDatePicker({ values: values, onSelect: onSelect, startsToday: startsToday, locale: locale }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClick = _b.handleDayClick, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside;
     return (e.createElement("div", null,
-        showDayPicker && (e.createElement("div", { className: "ods-datepicker-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
-        e.createElement("div", __assign$1({ className: classNames('ods-datepicker', className), ref: ref }, rest),
-            e.createElement("div", { className: "ods-datepicker__form-row" },
-                e.createElement("div", { className: "ods-datepicker__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
+        showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
+        e.createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
+            e.createElement("div", { className: "ods-date__form-row" },
+                e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-first-field-wrapper", onClick: function () { return createHandleToggleClick('start-date'); } },
                     labels && labels.from && (e.createElement("label", { htmlFor: "start-date" }, labels.from)),
                     e.createElement(Input, { ref: input1Ref, "data-testid": "datepicker-input-1", id: "start-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'start-date'
-                        }), name: "start-date", value: values.from, onChange: (editable && inputChange) || undefined, placeholder: getInputPlaceholder(), adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
+                        }), name: "start-date", value: values.from, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
                             undefined, maxLength: 10 })),
-                e.createElement("div", { className: "ods-datepicker__form-controls", "data-testid": "date-picker-second-field-wrapper", onClick: function () { return createHandleToggleClick('end-date'); } },
+                e.createElement("div", { className: "ods-date__form-controls", "data-testid": "date-picker-second-field-wrapper", onClick: function () { return createHandleToggleClick('end-date'); } },
                     labels && labels.to && (e.createElement("label", { htmlFor: "end-date" }, labels.to)),
                     e.createElement(Input, { ref: input2Ref, "data-testid": "datepicker-input-2", id: "end-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'end-date'
-                        }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: getInputPlaceholder(), adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
+                        }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(wn, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && error && helperText) ||
                             undefined, maxLength: 10 })),
                 !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
                     e.createElement(DayPicker, { mode: "range", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: function (day) { return handleDayClick(day); }, onDayMouseEnter: function (day) { return handleDayMouseEnter(day); }, formatters: { formatDay: formatDay }, selected: selectedDays, disabled: disabledDays, components: {
-                            Caption: DatePickerHeader
+                            Caption: function (_a) {
+                                var displayMonth = _a.displayMonth;
+                                return DatePickerHeader({ displayMonth: displayMonth, locale: localeOption });
+                            }
                         } })))))));
 });
 
-export { Alert, Badge, Button$1 as Button, Carousel, Checkbox, Col, Container, CrossSellCard, DatePicker, Divider, index$1 as Grid, IconButton, Input, Link, List, Modal, Progress, Radio, Row$1 as Row, Search, Select, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TopBar, TransactionListItem, Typography };
+export { Alert, Badge, Button$1 as Button, Carousel, Checkbox, Col, Container, CrossSellCard, DatePickerSingle as DatePicker, DatePickerRange as DateRange, Divider, index$1 as Grid, IconButton, Input, Link, List, Modal, Progress, Radio, Row$1 as Row, Search, Select, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TopBar, TransactionListItem, Typography };
 //# sourceMappingURL=index.es.js.map