@patternfly/react-core 5.0.0-alpha.21 → 5.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.23",
   "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": "e0d37bc28421bc0a048bc062714391ba6cf82f54"
+  "gitHead": "47ec39c169e68ca9dee8ba1b550f4328d6fb705e"
 }

package/src/components/Card/Card.tsx

@@ -39,7 +39,7 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** Aria label to apply to the selectable input if one is rendered */
   selectableInputAriaLabel?: string;
   /** Callback that executes when the selectable input is changed */
-  onSelectableInputChange?: (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onSelectableInputChange?: (event: React.FormEvent<HTMLInputElement>, labelledBy: string) => void;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -146,7 +146,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
           {...ariaProps}
           type="checkbox"
           checked={isSelected}
-          onChange={event => onSelectableInputChange(id, event)}
+          onChange={event => onSelectableInputChange(event, id)}
           disabled={isDisabledRaised}
           tabIndex={-1}
         />

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -31,7 +31,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
-  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
     const newSelected = labelledById === selected ? null : labelledById;
     setSelected(newSelected);
   };

package/src/components/Card/examples/CardSelectable.tsx

@@ -31,7 +31,7 @@ export const CardSelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
-  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
     const newSelected = labelledById === selected ? null : labelledById;
     setSelected(newSelected);
   };

package/src/components/Card/examples/CardSelectableA11yHighlight.tsx

@@ -20,7 +20,7 @@ export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
-  const onChange = (labelledById: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
     const newSelected = labelledById === selected ? null : labelledById;
     setSelected(newSelected);
   };

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/demos/PrimaryDetail.md

@@ -1133,7 +1133,7 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onChange = (labelledById, _event) => {
+    this.onChange = (_event, labelledById) => {
       if (labelledById === this.state.activeCard) {
         return;
       }