@patternfly/react-core 4.227.1 → 4.227.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.1",
+  "version": "4.227.4",
   "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.78.1",
-    "@patternfly/react-styles": "^4.77.1",
-    "@patternfly/react-tokens": "^4.79.1",
+    "@patternfly/react-icons": "^4.78.4",
+    "@patternfly/react-styles": "^4.77.4",
+    "@patternfly/react-tokens": "^4.79.4",
     "focus-trap": "6.9.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": "7bfaee093d3c85392a9d21a34ff661ffe29b0f47"
+  "gitHead": "bf9f5697021d8b85cd20ce4c5c8899dbcf922cdd"
 }

package/src/components/DataList/DataList.tsx

@@ -21,8 +21,6 @@ export enum DataListWrapModifier {
 }
 
 export interface SelectableRowObject {
-  /** Determines if only one of the selectable rows should be selectable at a time */
-  type: 'multiple' | 'single';
   /** Callback that executes when the screen reader accessible element receives a change event */
   onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
 }

package/src/components/DataList/DataListItem.tsx

@@ -115,8 +115,6 @@ export class DataListItem extends React.Component<DataListItemProps> {
             ? { 'aria-label': selectableInputAriaLabel }
             : { 'aria-labelledby': ariaLabelledBy };
 
-          const selectableInputType = selectableRow?.type === 'multiple' ? 'checkbox' : 'radio';
-
           return (
             <li
               id={id}
@@ -136,7 +134,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
               {selectableRow && (
                 <input
                   className="pf-screen-reader"
-                  type={selectableInputType}
+                  type="radio"
                   checked={isSelected}
                   onChange={event => selectableRow.onChange(id, event)}
                   tabIndex={-1}

package/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={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -59,7 +59,7 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toBeInTheDocument();
   });
@@ -75,35 +75,17 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+    const selectableInput = screen.queryByRole('radio', { hidden: true });
 
     expect(selectableInput).not.toBeInTheDocument();
   });
 
-  test('List hidden input renders as a radio when selectableRow.type is radio', () => {
-    render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'single', onChange: () => {} }}>
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableRadioInput = screen.getByRole('radio', { hidden: true });
-    const selectableCheckboxInput = screen.queryByRole('checkbox', { hidden: true });
-
-    expect(selectableRadioInput).toBeInTheDocument();
-    expect(selectableCheckboxInput).not.toBeInTheDocument();
-  });
-
   test('List calls selectableRow.onChange when the selectable input changes', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
-        <DataListItem>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+        <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -111,7 +93,7 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
     userEvent.click(selectableInput);
 
     expect(mock).toHaveBeenCalled();
@@ -121,8 +103,8 @@ describe('DataList', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
-        <DataListItem>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+        <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -135,7 +117,7 @@ describe('DataList', () => {
 
   test('Item applies selectableInputAriaLabel to the hidden input', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem selectableInputAriaLabel="Data list item label test">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -144,35 +126,35 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toHaveAccessibleName('Data list item label test');
   });
 
   test('Item defaults to labelling its input using its aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem aria-labelledby="test-id">
           <p id="test-id">Test cell content</p>
         </DataListItem>
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toHaveAccessibleName('Test cell content');
   });
 
   test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
           <p id="test-id">Test cell content</p>
         </DataListItem>
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toHaveAccessibleName('Data list item label test');
   });

package/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={{ type: 'single', onChange: handleInputChange }}
+        selectableRow={{ onChange: handleInputChange }}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>