From 2429a103fa052240305286a315357b7ec08b16da Mon Sep 17 00:00:00 2001
From: Dana Brown <danabrow@redhat.com>
Date: Thu, 16 Mar 2023 11:54:04 -0400
Subject: [PATCH] fix(DataList):removed Selectable row object

---
 .../react-core/src/components/DataList/DataList.tsx | 13 ++++---------
 .../src/components/DataList/DataListItem.tsx        |  6 +++---
 .../components/DataList/__tests__/DataList.test.tsx | 12 ++++++------
 .../src/components/DataList/examples/DataList.md    |  1 -
 .../DataList/examples/DataListSelectableRows.tsx    |  2 +-
 5 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx
index 613536ab1f5..c54ec90b859 100644
--- a/packages/react-core/src/components/DataList/DataList.tsx
+++ b/packages/react-core/src/components/DataList/DataList.tsx
@@ -20,11 +20,6 @@ export enum DataListWrapModifier {
   breakWord = 'breakWord'
 }
 
-export interface SelectableRowObject {
-  /** Callback that executes when the screen reader accessible element receives a change event */
-  onChange: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
-}
-
 export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
@@ -43,14 +38,14 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   /** Determines which wrapping modifier to apply to the DataList */
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
-  selectableRow?: SelectableRowObject;
+  onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
   updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
-  selectableRow?: SelectableRowObject;
+  onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
 }
 
 export const DataListContext = React.createContext<Partial<DataListContextProps>>({
@@ -84,7 +79,7 @@ export class DataList extends React.Component<DataListProps> {
       isCompact,
       wrapModifier,
       gridBreakpoint,
-      selectableRow,
+      onSelectableRowChange,
       ...props
     } = this.props;
     const isSelectable = onSelectDataListItem !== undefined;
@@ -99,7 +94,7 @@ export class DataList extends React.Component<DataListProps> {
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
-          selectableRow
+          onSelectableRowChange
         }}
       >
         <ul
diff --git a/packages/react-core/src/components/DataList/DataListItem.tsx b/packages/react-core/src/components/DataList/DataListItem.tsx
index 7d64e827936..aba9e87eca8 100644
--- a/packages/react-core/src/components/DataList/DataListItem.tsx
+++ b/packages/react-core/src/components/DataList/DataListItem.tsx
@@ -45,7 +45,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
     } = this.props;
     return (
       <DataListContext.Consumer>
-        {({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, selectableRow }) => {
+        {({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, onSelectableRowChange }) => {
           const selectDataListItem = (event: React.MouseEvent) => {
             let target: any = event.target;
             while (event.currentTarget !== target) {
@@ -91,12 +91,12 @@ export class DataListItem extends React.Component<DataListItemProps> {
               {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
             >
-              {selectableRow && (
+              {onSelectableRowChange && (
                 <input
                   className="pf-screen-reader"
                   type="radio"
                   checked={isSelected}
-                  onChange={(event) => selectableRow.onChange(event, id)}
+                  onChange={(event) => onSelectableRowChange(event, id)}
                   tabIndex={-1}
                   {...selectableInputAriaProps}
                 />
diff --git a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
index 671ff6112e9..41838b00639 100644
--- a/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
+++ b/packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
@@ -50,7 +50,7 @@ describe('DataList', () => {
 
   test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
         <DataListItem>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -85,7 +85,7 @@ describe('DataList', () => {
     const user = userEvent.setup();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
         <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -104,7 +104,7 @@ describe('DataList', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
         <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -118,7 +118,7 @@ describe('DataList', () => {
 
   test('Item applies selectableInputAriaLabel to the hidden input', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
         <DataListItem selectableInputAriaLabel="Data list item label test">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -134,7 +134,7 @@ describe('DataList', () => {
 
   test('Item defaults to labelling its input using its aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
         <DataListItem aria-labelledby="test-id">
           <p id="test-id">Test cell content</p>
         </DataListItem>
@@ -148,7 +148,7 @@ describe('DataList', () => {
 
   test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
         <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
           <p id="test-id">Test cell content</p>
         </DataListItem>
diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md
index f5cce7548c0..ef6fd245db8 100644
--- a/packages/react-core/src/components/DataList/examples/DataList.md
+++ b/packages/react-core/src/components/DataList/examples/DataList.md
@@ -5,7 +5,6 @@ cssPrefix: pf-c-data-list
 propComponents:
   [
     'DataList',
-    'SelectableRowObject',
     'DataListAction',
     'DataListCell',
     'DataListCheck',
diff --git a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
index c4c6f6c2517..176d48ba7d4 100644
--- a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
+++ b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
@@ -47,7 +47,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
         aria-label="selectable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
-        selectableRow={{ onChange: handleInputChange }}
+        onSelectableRowChange={handleInputChange}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>