@patternfly/react-table 6.4.1-prerelease.8 → 6.4.1-prerelease.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.4.1-prerelease.8",
+  "version": "6.4.1-prerelease.9",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,7 +40,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.4.1-prerelease.8",
+    "@patternfly/react-core": "^6.4.1-prerelease.9",
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-styles": "^6.4.0",
     "@patternfly/react-tokens": "^6.4.0",
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "7d045b83d744f3b585b1a21216df2d1f5c63e16e"
+  "gitHead": "985efafb947f9159883ef65eacb2a9af85d45473"
 }

package/src/components/Table/SelectColumn.tsx

@@ -1,5 +1,7 @@
 import { createRef, Fragment } from 'react';
 import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
+import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
+import { Radio } from '@patternfly/react-core/dist/esm/components/Radio';
 
 export enum RowSelectVariant {
   radio = 'radio',
@@ -7,7 +9,6 @@ export enum RowSelectVariant {
 }
 
 export interface SelectColumnProps {
-  name?: string;
   children?: React.ReactNode;
   className?: string;
   onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
@@ -16,6 +17,10 @@ export interface SelectColumnProps {
   tooltip?: React.ReactNode;
   /** other props to pass to the tooltip */
   tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** id for the input element - required by Checkbox and Radio components */
+  id?: string;
+  /** name for the input element - required by Radio component */
+  name?: string;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
@@ -26,15 +31,30 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   selectVariant,
   tooltip,
   tooltipProps,
+  id,
+  name,
   ...props
 }: SelectColumnProps) => {
-  const inputRef = createRef<HTMLInputElement>();
+  const inputRef = createRef<any>();
+
+  const handleChange = (event: React.FormEvent<HTMLInputElement>, _checked: boolean) => {
+    onSelect && onSelect(event);
+  };
+
+  const commonProps = {
+    ...props,
+    id,
+    ref: inputRef,
+    onChange: handleChange
+  };
 
   const content = (
     <Fragment>
-      <label>
-        <input {...props} ref={inputRef} type={selectVariant} onChange={onSelect} />
-      </label>
+      {selectVariant === RowSelectVariant.checkbox ? (
+        <Checkbox {...commonProps} />
+      ) : (
+        <Radio {...commonProps} name={name} />
+      )}
       {children}
     </Fragment>
   );

package/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap

@@ -1,21 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Transformer functions selectable unselected 1`] = `
-{
-  "children": <SelectColumn
-    aria-label="Select row 0"
-    checked={false}
-    name="radioGroup"
-    onSelect={[Function]}
-  >
-    
-  </SelectColumn>,
-  "className": "pf-v6-c-table__check",
-  "component": "td",
-  "isVisible": true,
-}
-`;
-
 exports[`Transformer functions sortable asc 1`] = `
 {
   "aria-sort": "ascending",

package/src/components/Table/utils/decorators/selectable.tsx

@@ -30,26 +30,27 @@ export const selectable: ITransform = (
    * @param {React.FormEvent} event - React form event
    */
   function selectClick(event: React.FormEvent<HTMLInputElement>) {
-    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
+    const selected = rowIndex === undefined ? event.currentTarget.checked : !(rowData && rowData.selected);
     // tslint:disable-next-line:no-unused-expression
     onSelect && onSelect(event, selected, rowId, rowData, extraData);
   }
   const customProps = {
+    id: rowId !== -1 ? `select-${rowIndex}` : 'select-all',
     ...(rowId !== -1
       ? {
-          checked: rowData && !!rowData.selected,
+          isChecked: rowData && !!rowData.selected,
           'aria-label': `Select row ${rowIndex}`
         }
       : {
-          checked: allRowsSelected,
+          isChecked: allRowsSelected,
           'aria-label': 'Select all rows'
         }),
     ...(rowData &&
       (rowData.disableCheckbox || rowData.disableSelection) && {
-        disabled: true,
+        isDisabled: true,
         className: checkStyles.checkInput
       }),
-    ...(!rowData && isHeaderSelectDisabled && { disabled: true })
+    ...(!rowData && isHeaderSelectDisabled && { isDisabled: true })
   };
   let selectName = 'check-all';
   if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {

package/src/components/Table/utils/transformers.test.tsx

@@ -83,7 +83,7 @@ const testCellActions = async ({
 
 describe('Transformer functions', () => {
   describe('selectable', () => {
-    test('main select', async () => {
+    test('main select (header) - should toggle from unchecked to checked', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
         extraParams: { onSelect }
@@ -92,37 +92,80 @@ describe('Transformer functions', () => {
       expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
 
       const user = userEvent.setup();
-
       render(returnedData.children as React.ReactElement<any>);
 
-      await user.type(screen.getByRole('textbox'), 'a');
+      // Click the header radio button (should be unchecked initially)
+      await user.click(screen.getByRole('radio'));
+
       expect(onSelect).toHaveBeenCalledTimes(1);
-      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: -1, selected: false });
+      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: -1, selected: true });
     });
 
-    test('selected', async () => {
+    test('row select (checkbox) - should toggle from selected to unselected', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
-        extraParams: { onSelect }
+        extraParams: { onSelect, selectVariant: 'checkbox' }
       };
       const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: true } } as IExtra);
       expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
-      const user = userEvent.setup();
 
+      const user = userEvent.setup();
       render(returnedData.children as React.ReactElement<any>);
 
-      await user.type(screen.getByRole('textbox'), 'a');
+      // Click the row checkbox (should be checked initially, clicking should uncheck)
+      await user.click(screen.getByRole('checkbox'));
       expect(onSelect).toHaveBeenCalledTimes(1);
       expect(onSelect.mock.results[0].value).toMatchObject({ rowId: 0, selected: false });
     });
 
-    test('unselected', () => {
+    test('row select (checkbox) - should toggle from unselected to selected', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
-        extraParams: { onSelect }
+        extraParams: { onSelect, selectVariant: 'checkbox' }
       };
       const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: false } } as IExtra);
-      expect(returnedData).toMatchSnapshot();
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
+
+      const user = userEvent.setup();
+      render(returnedData.children as React.ReactElement<any>);
+
+      // Click the row checkbox (should be unchecked initially, clicking should check)
+      await user.click(screen.getByRole('checkbox'));
+      expect(onSelect).toHaveBeenCalledTimes(1);
+      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: 0, selected: true });
+    });
+
+    test('row select (radio) - clicking already selected radio should not trigger onSelect', async () => {
+      const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
+      const column = {
+        extraParams: { onSelect, selectVariant: 'radio' }
+      };
+      const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: true } } as IExtra);
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
+
+      const user = userEvent.setup();
+      render(returnedData.children as React.ReactElement<any>);
+
+      // Click the row radio button (should be checked initially, clicking should not trigger change)
+      await user.click(screen.getByRole('radio'));
+      expect(onSelect).toHaveBeenCalledTimes(0);
+    });
+
+    test('row select (radio) - should toggle from unselected to selected', async () => {
+      const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
+      const column = {
+        extraParams: { onSelect, selectVariant: 'radio' }
+      };
+      const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: false } } as IExtra);
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
+
+      const user = userEvent.setup();
+      render(returnedData.children as React.ReactElement<any>);
+
+      // Click the row radio button (should be unchecked initially, clicking should check)
+      await user.click(screen.getByRole('radio'));
+      expect(onSelect).toHaveBeenCalledTimes(1);
+      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: 0, selected: true });
     });
   });
 

package/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -4216,13 +4216,20 @@ exports[`Table Selectable table 1`] = `
           scope=""
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select all rows"
-              name="check-all"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-1"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-all"
               type="checkbox"
             />
-          </label>
+          </div>
         </th>
         <th
           class="pf-v6-c-table__th pf-v6-c-table__sort"
@@ -4316,13 +4323,20 @@ exports[`Table Selectable table 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 0"
-              name="checkrow0"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-2"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-0"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -4499,13 +4513,20 @@ exports[`Table Selectable table 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 3"
-              name="checkrow3"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-3"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-3"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -4625,13 +4646,20 @@ exports[`Table Selectable table 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 5"
-              name="checkrow5"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-4"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-5"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -4694,13 +4722,20 @@ exports[`Table Selectable table 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 6"
-              name="checkrow6"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-5"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-6"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -4763,13 +4798,20 @@ exports[`Table Selectable table 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 7"
-              name="checkrow7"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-6"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-7"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -4832,13 +4874,20 @@ exports[`Table Selectable table 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 8"
-              name="checkrow8"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-7"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-8"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5008,13 +5057,21 @@ exports[`Table Selectable table with Radio 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-radio pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 0"
+              class="pf-v6-c-radio__input"
+              data-ouia-component-id="OUIA-Generated-Radio-1"
+              data-ouia-component-type="PF6/Radio"
+              data-ouia-safe="true"
+              id="select-0"
               name="radioGroup"
               type="radio"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5191,13 +5248,21 @@ exports[`Table Selectable table with Radio 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-radio pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 3"
+              class="pf-v6-c-radio__input"
+              data-ouia-component-id="OUIA-Generated-Radio-2"
+              data-ouia-component-type="PF6/Radio"
+              data-ouia-safe="true"
+              id="select-3"
               name="radioGroup"
               type="radio"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5317,13 +5382,21 @@ exports[`Table Selectable table with Radio 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-radio pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 5"
+              class="pf-v6-c-radio__input"
+              data-ouia-component-id="OUIA-Generated-Radio-3"
+              data-ouia-component-type="PF6/Radio"
+              data-ouia-safe="true"
+              id="select-5"
               name="radioGroup"
               type="radio"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5386,13 +5459,21 @@ exports[`Table Selectable table with Radio 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-radio pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 6"
+              class="pf-v6-c-radio__input"
+              data-ouia-component-id="OUIA-Generated-Radio-4"
+              data-ouia-component-type="PF6/Radio"
+              data-ouia-safe="true"
+              id="select-6"
               name="radioGroup"
               type="radio"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5455,13 +5536,21 @@ exports[`Table Selectable table with Radio 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-radio pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 7"
+              class="pf-v6-c-radio__input"
+              data-ouia-component-id="OUIA-Generated-Radio-5"
+              data-ouia-component-type="PF6/Radio"
+              data-ouia-safe="true"
+              id="select-7"
               name="radioGroup"
               type="radio"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5524,13 +5613,21 @@ exports[`Table Selectable table with Radio 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-radio pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 8"
+              class="pf-v6-c-radio__input"
+              data-ouia-component-id="OUIA-Generated-Radio-6"
+              data-ouia-component-type="PF6/Radio"
+              data-ouia-safe="true"
+              id="select-8"
               name="radioGroup"
               type="radio"
             />
-          </label>
+          </div>
         </td>
         <th
           class="pf-v6-c-table__td"
@@ -5608,14 +5705,21 @@ exports[`Table Selectable table with selected expandable row 1`] = `
           scope=""
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select all rows"
               checked=""
-              name="check-all"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-8"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-all"
               type="checkbox"
             />
-          </label>
+          </div>
         </th>
         <th
           class="pf-v6-c-table__th"
@@ -5643,14 +5747,21 @@ exports[`Table Selectable table with selected expandable row 1`] = `
           data-key="0"
           tabindex="-1"
         >
-          <label>
+          <div
+            class="pf-v6-c-check pf-m-standalone"
+          >
             <input
+              aria-invalid="false"
               aria-label="Select row 0"
               checked=""
-              name="checkrow0"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-9"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="select-0"
               type="checkbox"
             />
-          </label>
+          </div>
         </td>
         <td
           class="pf-v6-c-table__td"