@patternfly/react-table 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.5.0-prerelease.4",
+  "version": "6.5.0-prerelease.41",
   "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.5.0-prerelease.4",
-    "@patternfly/react-icons": "^6.5.0-prerelease.2",
-    "@patternfly/react-styles": "^6.5.0-prerelease.2",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.2",
-    "lodash": "^4.17.21",
+    "@patternfly/react-core": "^6.5.0-prerelease.40",
+    "@patternfly/react-icons": "^6.5.0-prerelease.17",
+    "@patternfly/react-styles": "^6.5.0-prerelease.14",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.13",
+    "lodash": "^4.17.23",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "912729437db337b5e576adbe8d06bdf2bc04b189"
+  "gitHead": "550ad935f3c0bb7a084922fd276e21e06b60d043"
 }

package/src/components/Table/EditableSelectInputCell.tsx

@@ -6,8 +6,10 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
 
-export interface IEditableSelectInputCell
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'> {
+export interface IEditableSelectInputCell extends Omit<
+  React.HTMLProps<HTMLElement | HTMLDivElement>,
+  'onSelect' | 'onToggle'
+> {
   /** Row index of this select input cell */
   rowIndex: number;
   /** Cell index of this select input cell */

package/src/components/Table/Table.tsx

@@ -48,6 +48,8 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
   /** A valid WAI-ARIA role to be applied to the table element */
   role?: string;
+  /** @beta Flag indicating if the table should have plain styling with a transparent background */
+  isPlain?: boolean;
   /** If set to true, the table header sticks to the top of its container */
   isStickyHeader?: boolean;
   /** @hide Forwarded ref */
@@ -94,6 +96,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   variant,
   borders = true,
   isStickyHeader = false,
+  isPlain = false,
   gridBreakPoint = TableGridBreakpoint.gridMd,
   'aria-label': ariaLabel,
   role = 'grid',
@@ -222,6 +225,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
           isTreeTable && stylesTreeView.modifiers.treeView,
           isStriped && styles.modifiers.striped,
           isExpandable && styles.modifiers.expandable,
+          isPlain && styles.modifiers.plain,
           hasNoInset && stylesTreeView.modifiers.noInset,
           isNested && 'pf-m-nested',
           hasAnimations && styles.modifiers.animateExpand

package/src/components/Table/Th.tsx

@@ -15,8 +15,7 @@ import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table_
 import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface ThProps
-  extends BaseCellProps,
-    Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
+  extends BaseCellProps, Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to. Applicable when this component is used as a direct child to <Tr>.
    * This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.

package/src/components/Table/__tests__/Table.test.tsx

@@ -150,3 +150,9 @@ test('Renders expandable toggle button in Th with pf-m-small class when variant
     expect(button).toHaveClass('pf-m-small');
   });
 });
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<Table isPlain aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.plain);
+});

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

@@ -6,7 +6,7 @@ exports[`RowWrapper renders correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-1"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r0:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
@@ -21,7 +21,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-TableRow-2"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r1:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />

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

@@ -4,7 +4,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-12"
+    data-ouia-component-id="OUIA-Generated-Table-:rb:"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"

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

@@ -6,7 +6,7 @@ exports[`Matches snapshot with children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-6"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r5:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       >
@@ -25,7 +25,7 @@ exports[`Matches snapshot without children 1`] = `
     <tbody>
       <tr
         class="pf-v6-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-5"
+        data-ouia-component-id="OUIA-Generated-TableRow-:r4:"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />

package/src/components/Table/examples/Table.md

@@ -79,6 +79,12 @@ Some general notes:
 
 ```
 
+### Plain
+
+```ts file="TablePlain.tsx"
+
+```
+
 ### Custom row wrapper, header tooltips & popovers
 
 - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space

package/src/components/Table/examples/TableActions.tsx

@@ -23,7 +23,7 @@ interface Repository {
   singleAction: string;
 }
 
-type ExampleType = 'defaultToggle' | 'customToggle';
+type ExampleType = 'customToggle';
 
 export const TableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -45,10 +45,11 @@ export const TableActions: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('defaultToggle');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   const customActionsToggle = (props: CustomActionsToggleProps) => (
@@ -95,12 +96,6 @@ export const TableActions: React.FunctionComponent = () => {
   return (
     <Fragment>
       <ToggleGroup aria-label="Default uses kebab toggle">
-        <ToggleGroupItem
-          text="Default actions toggle"
-          buttonId="defaultToggle"
-          isSelected={exampleChoice === 'defaultToggle'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Custom actions toggle"
           buttonId="customToggle"

package/src/components/Table/examples/TableBasic.tsx

@@ -10,7 +10,7 @@ interface Repository {
   lastCommit: string;
 }
 
-type ExampleType = 'default' | 'compact' | 'compactBorderless';
+type ExampleType = 'compact' | 'compactBorderless';
 
 export const TableBasic: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -29,21 +29,16 @@ export const TableBasic: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   return (
     <Fragment>
       <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem
-          text="Default"
-          buttonId="default"
-          isSelected={exampleChoice === 'default'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Compact"
           buttonId="compact"
@@ -59,7 +54,7 @@ export const TableBasic: React.FunctionComponent = () => {
       </ToggleGroup>
       <Table
         aria-label="Simple table"
-        variant={exampleChoice !== 'default' ? 'compact' : undefined}
+        variant={exampleChoice === 'compact' || exampleChoice === 'compactBorderless' ? 'compact' : undefined}
         borders={exampleChoice !== 'compactBorderless'}
       >
         <Caption>Simple table using composable components</Caption>

package/src/components/Table/examples/TablePlain.tsx

@@ -0,0 +1,52 @@
+import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const TablePlain: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  return (
+    <Table aria-label="Plain table" isPlain={true}>
+      <Caption>Simple table with plain styling using composable components</Caption>
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {repositories.map((repo) => (
+          <Tr key={repo.name}>
+            <Td dataLabel={columnNames.name}>{repo.name}</Td>
+            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
+            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};