@patternfly/react-core 5.0.0-alpha.20 → 5.0.0-alpha.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.20",
+  "version": "5.0.0-alpha.22",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "1686e14afb758f8ce45881ca0cdab6bc0ea1c403"
+  "gitHead": "4ce5d3887ed6061107702090244b680ca006f3f1"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -70,11 +70,11 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   /** Flag to set browser focus on the passed date. **/
   isDateFocused?: boolean;
   /** Callback when date is selected. */
-  onChange?: (date: Date) => void;
+  onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void;
   /** Callback when month or year is changed. */
   onMonthChange?: (
-    newDate?: Date,
-    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
+    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>,
+    newDate?: Date
   ) => void;
   /** @hide Internal prop to allow pressing escape in select menu to not close popover. */
   onSelectToggle?: (open: boolean) => void;
@@ -187,11 +187,11 @@ export const CalendarMonth = ({
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
-  const onMonthClick = (newDate: Date, ev: React.MouseEvent) => {
+  const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
     setHoveredDate(newDate);
     setShouldFocus(false);
-    onMonthChange(newDate, ev);
+    onMonthChange(ev, newDate);
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -252,7 +252,7 @@ export const CalendarMonth = ({
           <Button
             variant="plain"
             aria-label={prevMonthAriaLabel}
-            onClick={(ev: React.MouseEvent) => onMonthClick(prevMonth, ev)}
+            onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
           >
             <AngleLeftIcon aria-hidden={true} />
           </Button>
@@ -282,7 +282,7 @@ export const CalendarMonth = ({
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
-                  onMonthChange(newDate, ev);
+                  onMonthChange(ev, newDate);
                 }, 0);
               }}
               variant="single"
@@ -306,7 +306,7 @@ export const CalendarMonth = ({
                 setFocusedDate(newDate);
                 setHoveredDate(newDate);
                 setShouldFocus(false);
-                onMonthChange(newDate, ev);
+                onMonthChange(ev, newDate);
               }}
             />
           </div>
@@ -315,7 +315,7 @@ export const CalendarMonth = ({
           <Button
             variant="plain"
             aria-label={nextMonthAriaLabel}
-            onClick={(ev: React.MouseEvent) => onMonthClick(nextMonth, ev)}
+            onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
           >
             <AngleRightIcon aria-hidden={true} />
           </Button>
@@ -377,7 +377,7 @@ export const CalendarMonth = ({
                         !isValid && styles.modifiers.disabled
                       )}
                       type="button"
-                      onClick={() => onChange(date)}
+                      onClick={(event) => onChange(event, date)}
                       onMouseOver={() => setHoveredDate(date)}
                       tabIndex={isFocused ? 0 : -1}
                       disabled={!isValid}

package/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx

@@ -4,7 +4,10 @@ import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/reac
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
 
-  const onMonthChange = (newDate: Date) => {
+  const onMonthChange = (
+    _event: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement> | undefined,
+    newDate: Date
+  ) => {
     // eslint-disable-next-line no-console
     console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
   };
@@ -21,7 +24,12 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
 
   return (
     <>
-      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} inlineProps={inlineProps} />
+      <CalendarMonth
+        date={date}
+        onChange={(_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => setDate(date)}
+        onMonthChange={onMonthChange}
+        inlineProps={inlineProps}
+      />
       <pre>Selected date: {date.toString()}</pre>
     </>
   );

package/src/components/DataList/DataListCheck.tsx

@@ -24,7 +24,7 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
    */
   defaultChecked?: boolean;
   /** A callback for when the DataList checkbox selection changes */
-  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Aria-labelledby of the DataList checkbox */
   'aria-labelledby': string;
   /** Flag to indicate if other controls are used in the DataListItem */
@@ -34,7 +34,7 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
 export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
   className = '',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {},
+  onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {},
   isValid = true,
   isDisabled = false,
   isChecked = false,
@@ -48,7 +48,7 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
       <input
         {...props}
         type="checkbox"
-        onChange={event => onChange(event.currentTarget.checked, event)}
+        onChange={(event) => onChange(event, event.currentTarget.checked)}
         aria-invalid={!isValid}
         disabled={isDisabled}
         {...([true, false].includes(defaultChecked) && { defaultChecked })}

package/src/components/DataList/__tests__/Generated/DataListCheck.test.tsx

@@ -15,7 +15,7 @@ it('DataListCheck should match snapshot (auto-generated)', () => {
       isDisabled={false}
       isChecked={null}
       checked={null}
-      onChange={(checked: boolean, event: React.FormEvent<HTMLInputElement>) => {}}
+      onChange={(event: React.FormEvent<HTMLInputElement>, checked: boolean) => {}}
       aria-labelledby={'string'}
     />
   );

package/src/components/DatePicker/DatePicker.tsx

@@ -165,7 +165,7 @@ const DatePickerBase = (
     }
   };
 
-  const onDateClick = (newValueDate: Date) => {
+  const onDateClick = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
     const newValue = dateFormat(newValueDate);
     setValue(newValue);
     setValueDate(newValueDate);

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -32,7 +32,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsCalendarOpen(false);
   };
 
-  const onSelectCalendar = (newValueDate: Date) => {
+  const onSelectCalendar = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
     const newValue = dateFormat(newValueDate);
     setValueDate(newValue);
     setIsCalendarOpen(!isCalendarOpen);