feat(DataList): added event param to callback

packages/react-core/src/components/DataList/DataList.tsx

@@ -22,7 +22,7 @@ export enum DataListWrapModifier {
 
 export interface SelectableRowObject {
   /** Callback that executes when the screen reader accessible element receives a change event */
-  onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
@@ -33,7 +33,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   /** Adds accessible text to the DataList list */
   'aria-label': string;
   /** Optional callback to make DataList selectable, fired when DataListItem selected */
-  onSelectDataListItem?: (id: string) => void;
+  onSelectDataListItem?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
   /** Id of DataList item currently selected */
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
@@ -49,7 +49,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
 interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
-  updateSelectedDataListItem: (id: string) => void;
+  updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
   selectableRow?: SelectableRowObject;
 }
 
@@ -73,7 +73,7 @@ export class DataList extends React.Component<DataListProps> {
     super(props);
   }
 
-  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex(item => item.id === id);
+  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex((item) => item.id === id);
 
   render() {
     const {
@@ -89,8 +89,8 @@ export class DataList extends React.Component<DataListProps> {
     } = this.props;
     const isSelectable = onSelectDataListItem !== undefined;
 
-    const updateSelectedDataListItem = (id: string) => {
-      onSelectDataListItem(id);
+    const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
+      onSelectDataListItem(event, id);
     };
 
     return (

packages/react-core/src/components/DataList/DataListItem.tsx

@@ -60,13 +60,13 @@ export class DataListItem extends React.Component<DataListItemProps> {
                 target = target.parentNode;
               }
             }
-            updateSelectedDataListItem(id);
+            updateSelectedDataListItem(event, id);
           };
 
           const onKeyDown = (event: React.KeyboardEvent) => {
             if ([KeyTypes.Enter, KeyTypes.Space].includes(event.key)) {
               event.preventDefault();
-              updateSelectedDataListItem(id);
+              updateSelectedDataListItem(event, id);
             }
           };
 
@@ -96,7 +96,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
                   className="pf-screen-reader"
                   type="radio"
                   checked={isSelected}
-                  onChange={(event) => selectableRow.onChange(id, event)}
+                  onChange={(event) => selectableRow.onChange(event, id)}
                   tabIndex={-1}
                   {...selectableInputAriaProps}
                 />

packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -33,11 +33,11 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onSelectDataListItem = id => {
+  const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
     setSelectedDataListItemId(id);
   };
 
-  const handleInputChange = (id: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, id: string) => {
     setSelectedDataListItemId(id);
   };
 

packages/react-integration/demo-app-ts/package.json

@@ -9,7 +9,7 @@
     "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0-alpha.13",
+    "@patternfly/react-core": "^5.0.0-alpha.14",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^5.3.3",

packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListCompactDemo.tsx

@@ -21,7 +21,7 @@ export class DataListCompactDemo extends React.Component<DataListProps, DataList
     };
   }
 
-  onSelectDataListItem = (id: string) => {
+  onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
     this.setState({ selectedDataListItemId: id });
   };
 

packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx

@@ -29,7 +29,7 @@ export class DataListDemo extends React.Component<DataListProps, DataListState>
     };
   }
 
-  onSelectDataListItem = (id: string) => {
+  onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
     this.setState({ selectedDataListItemId: id });
   };
 
@@ -38,7 +38,7 @@ export class DataListDemo extends React.Component<DataListProps, DataListState>
   };
 
   onSelect = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isOpen: !prevState.isOpen
     }));
   };