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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.4.1-prerelease.9",
+  "version": "6.4.1",
   "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,16 +40,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.4.1-prerelease.9",
+    "@patternfly/react-core": "^6.4.1",
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-styles": "^6.4.0",
     "@patternfly/react-tokens": "^6.4.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "985efafb947f9159883ef65eacb2a9af85d45473"
+  "gitHead": "476782a298df81cb78de7f3cd804f3ff8f33993c"
 }

package/src/components/Table/SelectColumn.tsx

@@ -1,7 +1,5 @@
 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',
@@ -9,6 +7,7 @@ export enum RowSelectVariant {
 }
 
 export interface SelectColumnProps {
+  name?: string;
   children?: React.ReactNode;
   className?: string;
   onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
@@ -17,10 +16,6 @@ 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> = ({
@@ -31,30 +26,15 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   selectVariant,
   tooltip,
   tooltipProps,
-  id,
-  name,
   ...props
 }: SelectColumnProps) => {
-  const inputRef = createRef<any>();
-
-  const handleChange = (event: React.FormEvent<HTMLInputElement>, _checked: boolean) => {
-    onSelect && onSelect(event);
-  };
-
-  const commonProps = {
-    ...props,
-    id,
-    ref: inputRef,
-    onChange: handleChange
-  };
+  const inputRef = createRef<HTMLInputElement>();
 
   const content = (
     <Fragment>
-      {selectVariant === RowSelectVariant.checkbox ? (
-        <Checkbox {...commonProps} />
-      ) : (
-        <Radio {...commonProps} name={name} />
-      )}
+      <label>
+        <input {...props} ref={inputRef} type={selectVariant} onChange={onSelect} />
+      </label>
       {children}
     </Fragment>
   );

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

@@ -1,5 +1,21 @@
 // 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,27 +30,26 @@ 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
       ? {
-          isChecked: rowData && !!rowData.selected,
+          checked: rowData && !!rowData.selected,
           'aria-label': `Select row ${rowIndex}`
         }
       : {
-          isChecked: allRowsSelected,
+          checked: allRowsSelected,
           'aria-label': 'Select all rows'
         }),
     ...(rowData &&
       (rowData.disableCheckbox || rowData.disableSelection) && {
-        isDisabled: true,
+        disabled: true,
         className: checkStyles.checkInput
       }),
-    ...(!rowData && isHeaderSelectDisabled && { isDisabled: true })
+    ...(!rowData && isHeaderSelectDisabled && { disabled: 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 (header) - should toggle from unchecked to checked', async () => {
+    test('main select', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
         extraParams: { onSelect }
@@ -92,80 +92,37 @@ describe('Transformer functions', () => {
       expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
 
       const user = userEvent.setup();
-      render(returnedData.children as React.ReactElement<any>);
 
-      // Click the header radio button (should be unchecked initially)
-      await user.click(screen.getByRole('radio'));
+      render(returnedData.children as React.ReactElement<any>);
 
+      await user.type(screen.getByRole('textbox'), 'a');
       expect(onSelect).toHaveBeenCalledTimes(1);
-      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: -1, selected: true });
+      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: -1, selected: false });
     });
 
-    test('row select (checkbox) - should toggle from selected to unselected', async () => {
+    test('selected', async () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
-        extraParams: { onSelect, selectVariant: 'checkbox' }
+        extraParams: { onSelect }
       };
       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 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('row select (checkbox) - should toggle from unselected to selected', async () => {
-      const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
-      const column = {
-        extraParams: { onSelect, selectVariant: 'checkbox' }
-      };
-      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 checkbox (should be unchecked initially, clicking should check)
-      await user.click(screen.getByRole('checkbox'));
+      await user.type(screen.getByRole('textbox'), 'a');
       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);
+      expect(onSelect.mock.results[0].value).toMatchObject({ rowId: 0, selected: false });
     });
 
-    test('row select (radio) - should toggle from unselected to selected', async () => {
+    test('unselected', () => {
       const onSelect = jest.fn((_event, selected, rowId) => ({ selected, rowId }));
       const column = {
-        extraParams: { onSelect, selectVariant: 'radio' }
+        extraParams: { onSelect }
       };
       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 });
+      expect(returnedData).toMatchSnapshot();
     });
   });
 

package/src/demos/Table.md

@@ -77,49 +77,49 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ### Bulk select
 
-```ts isFullscreen file="examples/TableBulkSelect.tsx"
+```js isFullscreen file="./examples/TableBulkSelect.tsx"
 
 ```
 
 ### Expand/collapse all
 
-```ts isFullscreen file="examples/TableExpandCollapseAll.tsx"
+```js isFullscreen file="./examples/TableExpandCollapseAll.tsx"
 
 ```
 
 ### Compact
 
-```ts isFullscreen file="examples/TableCompact.tsx"
+```js isFullscreen file="./examples/TableCompact.tsx"
 
 ```
 
 ### Compound expansion
 
-```ts isFullscreen file="examples/TableCompoundExpansion.tsx"
+```js isFullscreen file="./examples/TableCompoundExpansion.tsx"
 
 ```
 
 ### Column management
 
-```ts isFullscreen file="examples/TableColumnManagement.tsx"
+```js isFullscreen file="./examples/TableColumnManagement.tsx"
 
 ```
 
 ### Column management with draggable
 
-```ts isFullscreen file="examples/TableColumnManagementWithDraggable.tsx"
+```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
 
 ```
 
 ### Filterable
 
-```ts isFullscreen file="examples/TableFilterable.tsx"
+```js isFullscreen file="./examples/TableFilterable.tsx"
 
 ```
 
 ### Sortable - responsive
 
-```ts isFullscreen file="examples/TableSortableResponsive.tsx"
+```js isFullscreen file="./examples/TableSortableResponsive.tsx"
 
 ```
 

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

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