@useblu/ocean-react 1.50.0 → 1.52.1

package/index.js

@@ -33982,7 +33982,8 @@ function useDatePickerSingle(_a) {
     var input2Ref = e__default["default"].useRef(null);
     var _b = e__default["default"].useState(false), showDayPicker = _b[0], setShowDayPicker = _b[1];
     var _c = e__default["default"].useState(''), currentField = _c[0], setCurrentField = _c[1];
-    var _d = e__default["default"].useState(''), datePickerCache = _d[0], setDatePickerCache = _d[1];
+    var _d = e__default["default"].useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
+    var _e = e__default["default"].useState(''), datePickerCache = _e[0], setDatePickerCache = _e[1];
     var fromDate = parse$1(value || '', localeDateFormat, new Date());
     e__default["default"].useEffect(function () {
         if (value === '')
@@ -33995,6 +33996,7 @@ function useDatePickerSingle(_a) {
     var handleDayClick = function (day) {
         if (!(startsToday && handleValidateStartsToday(startsToday, day))) {
             var formattedDay = format(day, localeDateFormat);
+            updateCurrentMonth(formattedDay);
             updateState(formattedDay, true);
             setCurrentField('');
             setShowDayPicker(false);
@@ -34028,6 +34030,10 @@ function useDatePickerSingle(_a) {
                 updateState(datePickerCache);
         }
     };
+    var updateCurrentMonth = function (date) {
+        var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
+        setCurrentMonthToDisplay(parsedDate);
+    };
     var CustomStyles = {
         root: 'ods-date__calendar ods-date_calendar_m1',
         caption: 'ods-date__caption',
@@ -34062,30 +34068,44 @@ function useDatePickerSingle(_a) {
         createHandleToggleClick: createHandleToggleClick,
         disabledDays: disabledDays,
         formatDay: formatDay,
-        handleCloseByOutside: handleCloseByOutside
+        handleCloseByOutside: handleCloseByOutside,
+        currentMonthToDisplay: currentMonthToDisplay
     };
 }
 
 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;
+    var _d = e.useState(displayMonth), selectedMonth = _d[0], setSelectedMonth = _d[1];
+    var handlePreviousMonthClick = function () {
+        if (previousMonth) {
+            goToMonth(previousMonth);
+            setSelectedMonth(previousMonth);
+        }
+    };
+    var handleNextMonthClick = function () {
+        if (nextMonth) {
+            goToMonth(nextMonth);
+            setSelectedMonth(nextMonth);
+        }
+    };
     return (e__default["default"].createElement("div", { className: "ods-date__caption" },
         e__default["default"].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); } },
+            }), disabled: !previousMonth, onClick: handlePreviousMonthClick },
             e__default["default"].createElement($, { size: 20 })),
-        e__default["default"].createElement("h2", { "data-testid": "calendar-caption-month" }, format(displayMonth, 'MMMM yyyy', { locale: locale })),
+        e__default["default"].createElement("h2", { "data-testid": "calendar-caption-month" }, format(selectedMonth, 'MMMM yyyy', { locale: locale })),
         e__default["default"].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); } },
+            }), disabled: !nextMonth, onClick: handleNextMonthClick },
             e__default["default"].createElement(ee, { size: 20 }))));
 };
 
 var DatePickerSingle = e__default["default"].forwardRef(function (_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;
+    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, currentMonthToDisplay = _b.currentMonthToDisplay;
     return (e__default["default"].createElement("div", null,
         showDayPicker && (e__default["default"].createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
         e__default["default"].createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
@@ -34097,7 +34117,7 @@ var DatePickerSingle = e__default["default"].forwardRef(function (_a, ref) {
                         }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].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__default["default"].createElement("div", { "data-testid": "datepicker-calendar" },
-                    e__default["default"].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: {
+                    e__default["default"].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, defaultMonth: currentMonthToDisplay, components: {
                             Caption: function (_a) {
                                 var displayMonth = _a.displayMonth;
                                 return DatePickerHeader({
@@ -34120,7 +34140,9 @@ function useDatePicker(_a) {
     var input2Ref = e__default["default"].useRef(null);
     var _b = e__default["default"].useState(false), showDayPicker = _b[0], setShowDayPicker = _b[1];
     var _c = e__default["default"].useState(''), currentField = _c[0], setCurrentField = _c[1];
-    var _d = e__default["default"].useState({ from: '', to: '' }), datePickerCache = _d[0], setDatePickerCache = _d[1];
+    var _d = e__default["default"].useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
+    var _e = e__default["default"].useState({ from: '', to: '' }), datePickerCache = _e[0], setDatePickerCache = _e[1];
+    var _f = e__default["default"].useState(false), firstInputClicked = _f[0], setFirstInputClicked = _f[1];
     var fromDate = parse$1(values.from, localeDateFormat, new Date());
     var toDate = parse$1(values.to, localeDateFormat, new Date());
     e__default["default"].useEffect(function () {
@@ -34142,6 +34164,7 @@ function useDatePicker(_a) {
         if (!(startsToday && handleValidateStartsToday(startsToday, day))) {
             var formattedDay = format(day, localeDateFormat);
             if (currentField === 'start-date') {
+                updateCurrentMonth(formattedDay);
                 if (day > toDate) {
                     updateState({ from: formattedDay, to: '' }, true);
                 }
@@ -34163,7 +34186,36 @@ function useDatePicker(_a) {
             }
         }
     };
+    var updateCurrentMonth = function (date) {
+        var parsedDate = parse$1(date, 'dd/MM/yyyy', new Date());
+        setCurrentMonthToDisplay(parsedDate);
+    };
+    var isValidDate = function (date) {
+        return date instanceof Date && !Number.isNaN(date.getTime());
+    };
+    var getSelectedDate = function () {
+        return firstInputClicked ? selectedDays.from : selectedDays.to;
+    };
+    var handleDisplayMonth = function (displayMonth) {
+        var selectedDate = getSelectedDate();
+        var monthToShowOnHeader = isValidDate(selectedDate)
+            ? selectedDate
+            : undefined;
+        return monthToShowOnHeader || displayMonth;
+    };
     var createHandleToggleClick = function (fieldId) {
+        var isValidStartDate = fieldId === 'start-date' && isValidDate(selectedDays.from);
+        var isValidEndDate = fieldId === 'end-date' && isValidDate(selectedDays.to);
+        var updateValuesAndInputClicked = function (date, isFirstInputClicked) {
+            updateCurrentMonth(date);
+            setFirstInputClicked(isFirstInputClicked);
+        };
+        if (isValidStartDate) {
+            updateValuesAndInputClicked(values.from, true);
+        }
+        else if (isValidEndDate) {
+            updateValuesAndInputClicked(values.to, false);
+        }
         setShowDayPicker(!showDayPicker);
         setCurrentField(fieldId);
     };
@@ -34248,13 +34300,15 @@ function useDatePicker(_a) {
         createHandleToggleClick: createHandleToggleClick,
         disabledDays: disabledDays,
         formatDay: formatDay,
-        handleCloseByOutside: handleCloseByOutside
+        handleCloseByOutside: handleCloseByOutside,
+        handleDisplayMonth: handleDisplayMonth,
+        currentMonthToDisplay: currentMonthToDisplay
     };
 }
 
 var DatePickerRange = e__default["default"].forwardRef(function (_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;
+    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, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, disabledDays = _b.disabledDays, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
     return (e__default["default"].createElement("div", null,
         showDayPicker && (e__default["default"].createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
         e__default["default"].createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
@@ -34272,10 +34326,10 @@ var DatePickerRange = e__default["default"].forwardRef(function (_a, ref) {
                         }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e__default["default"].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__default["default"].createElement("div", { "data-testid": "datepicker-calendar" },
-                    e__default["default"].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: {
+                    e__default["default"].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, defaultMonth: currentMonthToDisplay, components: {
                             Caption: function (_a) {
                                 var displayMonth = _a.displayMonth;
-                                return DatePickerHeader({ displayMonth: displayMonth, locale: localeOption });
+                                return (e__default["default"].createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
                             }
                         } })))))));
 });