@patternfly/react-core 4.200.0 → 4.201.0

package/dist/umd/react-core.js

@@ -7716,8 +7716,8 @@
     // Must be numeric given current header design
     const yearFormat = (date) => date.getFullYear();
     const buildCalendar = (year, month, weekStart, validators) => {
-        const selectedDate = new Date(year, month);
-        const firstDayOfWeek = new Date(selectedDate);
+        const defaultDate = new Date(year, month);
+        const firstDayOfWeek = new Date(defaultDate);
         firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart);
         // We will always show 6 weeks like google calendar
         // Assume we just want the numbers for now...
@@ -7740,10 +7740,11 @@
     const isValidDate = (date) => Boolean(date && !isNaN(date));
     const today = new Date();
     const CalendarMonth = (_a) => {
-        var { date: dateProp = today, locale = undefined, monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }), weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }), longWeekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'long' }), dayFormat = date => date.getDate(), weekStart = 0, // Use the American Sunday as a default
+        var { date: dateProp, locale = undefined, monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }), weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }), longWeekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'long' }), dayFormat = date => date.getDate(), weekStart = 0, // Use the American Sunday as a default
         onChange = () => { }, validators = [() => true], className, onSelectToggle = () => { }, rangeStart, prevMonthAriaLabel = 'Previous month', nextMonthAriaLabel = 'Next month', yearInputAriaLabel = 'Select year', cellAriaLabel } = _a, props = __rest$1(_a, ["date", "locale", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "onChange", "validators", "className", "onSelectToggle", "rangeStart", "prevMonthAriaLabel", "nextMonthAriaLabel", "yearInputAriaLabel", "cellAriaLabel"]);
         const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
         const [isSelectOpen, setIsSelectOpen] = React__default["default"].useState(false);
+        const [selectedDate, setSelectedDate] = React__default["default"].useState(new Date(dateProp));
         // eslint-disable-next-line prefer-const
         let [focusedDate, setFocusedDate] = React__default["default"].useState(new Date(dateProp));
         if (!isValidDate(focusedDate)) {
@@ -7752,14 +7753,14 @@
         const [hoveredDate, setHoveredDate] = React__default["default"].useState(new Date(focusedDate));
         const focusRef = React__default["default"].useRef();
         const [hiddenMonthId] = React__default["default"].useState(getUniqueId('hidden-month-span'));
-        const [shouldFocus, setShouldFocus] = React__default["default"].useState(true);
+        const [shouldFocus, setShouldFocus] = React__default["default"].useState(false);
         const isValidated = (date) => validators.every(validator => validator(date));
         const focusedDateValidated = isValidated(focusedDate);
         React.useEffect(() => {
             if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
                 setFocusedDate(dateProp);
             }
-        }, [dateProp, focusedDate]);
+        }, [dateProp]);
         React.useEffect(() => {
             // When using header controls don't move focus
             if (shouldFocus) {
@@ -7770,7 +7771,7 @@
             else {
                 setShouldFocus(true);
             }
-        }, [focusedDate, focusedDateValidated, shouldFocus]);
+        }, [focusedDate]);
         const onMonthClick = (newDate) => {
             setFocusedDate(newDate);
             setHoveredDate(newDate);
@@ -7873,7 +7874,7 @@
                 React__default["default"].createElement("tbody", { onKeyDown: onKeyDown }, calendar.map((week, index) => (React__default["default"].createElement("tr", { key: index, className: _default$_.calendarMonthDatesRow }, week.map(({ date, isValid }, index) => {
                     const dayFormatted = dayFormat(date);
                     const isToday = isSameDate(date, today);
-                    const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
+                    const isSelected = isValidDate(selectedDate) && isSameDate(date, selectedDate);
                     const isFocused = isSameDate(date, focusedDate);
                     const isAdjacentMonth = date.getMonth() !== focusedDate.getMonth();
                     let isInRange = false;
@@ -7889,7 +7890,11 @@
                         // Core would likely need new styles
                     }
                     return (React__default["default"].createElement("td", { key: index, className: css(_default$_.calendarMonthDatesCell, isAdjacentMonth && _default$_.modifiers.adjacentMonth, isToday && _default$_.modifiers.current, (isSelected || isRangeStart) && _default$_.modifiers.selected, !isValid && _default$_.modifiers.disabled, (isInRange || isRangeStart || isRangeEnd) && _default$_.modifiers.inRange, isRangeStart && _default$_.modifiers.startRange, isRangeEnd && _default$_.modifiers.endRange) },
-                        React__default["default"].createElement("button", Object.assign({ className: css(_default$_.calendarMonthDate, isRangeEnd && _default$_.modifiers.hover, !isValid && _default$_.modifiers.disabled), type: "button", onClick: () => onChange(date), onMouseOver: () => setHoveredDate(date), tabIndex: isFocused ? 0 : -1, disabled: !isValid, "aria-label": cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` }, (isFocused && { ref: focusRef })), dayFormatted)));
+                        React__default["default"].createElement("button", Object.assign({ className: css(_default$_.calendarMonthDate, isRangeEnd && _default$_.modifiers.hover, !isValid && _default$_.modifiers.disabled), type: "button", onClick: () => {
+                                setSelectedDate(date);
+                                setFocusedDate(date);
+                                onChange(date);
+                            }, onMouseOver: () => setHoveredDate(date), tabIndex: isFocused ? 0 : -1, disabled: !isValid, "aria-label": cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` }, (isFocused && { ref: focusRef })), dayFormatted)));
                 }))))))));
     };