@patternfly/react-core 4.200.2 → 4.201.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.200.2",
+  "version": "4.201.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.51.2",
-    "@patternfly/react-styles": "^4.50.2",
-    "@patternfly/react-tokens": "^4.52.2",
+    "@patternfly/react-icons": "^4.52.0",
+    "@patternfly/react-styles": "^4.51.0",
+    "@patternfly/react-tokens": "^4.53.0",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "78e64c6891ebd263e6c35a9d70d95759aba3c7ad"
+  "gitHead": "0d60b35858f995deab44e2ede3e013114e495b5e"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -45,7 +45,7 @@ export interface CalendarFormat {
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Month/year to base other dates around */
-  date: Date;
+  date?: Date;
   /** Callback when date is selected */
   onChange?: (date: Date) => void;
   /** Functions that returns if a date is valid and selectable */
@@ -60,8 +60,8 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
 const yearFormat = (date: Date) => date.getFullYear();
 
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
-  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...
@@ -90,7 +90,7 @@ export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
 const today = new Date();
 
 export const CalendarMonth = ({
-  date: dateProp = today,
+  date: dateProp,
   locale = undefined,
   monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }),
   weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }),
@@ -110,6 +110,7 @@ export const CalendarMonth = ({
 }: CalendarProps) => {
   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.useState(false);
+  const [selectedDate, setSelectedDate] = React.useState(new Date(dateProp));
   // eslint-disable-next-line prefer-const
   let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
   if (!isValidDate(focusedDate)) {
@@ -118,7 +119,7 @@ export const CalendarMonth = ({
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
-  const [shouldFocus, setShouldFocus] = React.useState(true);
+  const [shouldFocus, setShouldFocus] = React.useState(false);
 
   const isValidated = (date: Date) => validators.every(validator => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
@@ -126,7 +127,8 @@ export const CalendarMonth = ({
     if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
       setFocusedDate(dateProp);
     }
-  }, [dateProp, focusedDate]);
+  }, [dateProp]);
+
   useEffect(() => {
     // When using header controls don't move focus
     if (shouldFocus) {
@@ -136,7 +138,7 @@ export const CalendarMonth = ({
     } else {
       setShouldFocus(true);
     }
-  }, [focusedDate, focusedDateValidated, shouldFocus]);
+  }, [focusedDate]);
 
   const onMonthClick = (newDate: Date) => {
     setFocusedDate(newDate);
@@ -275,7 +277,7 @@ export const CalendarMonth = ({
               {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;
@@ -312,7 +314,11 @@ export const CalendarMonth = ({
                         !isValid && styles.modifiers.disabled
                       )}
                       type="button"
-                      onClick={() => onChange(date)}
+                      onClick={() => {
+                        setSelectedDate(date);
+                        setFocusedDate(date);
+                        onChange(date);
+                      }}
                       onMouseOver={() => setHoveredDate(date)}
                       tabIndex={isFocused ? 0 : -1}
                       disabled={!isValid}