@patternfly/react-table 6.3.0-prerelease.31 → 6.3.0-prerelease.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.3.0-prerelease.31",
+  "version": "6.3.0-prerelease.32",
   "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,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.3.0-prerelease.31",
-    "@patternfly/react-icons": "^6.3.0-prerelease.12",
-    "@patternfly/react-styles": "^6.3.0-prerelease.11",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.11",
+    "@patternfly/react-core": "^6.3.0-prerelease.32",
+    "@patternfly/react-icons": "^6.3.0-prerelease.13",
+    "@patternfly/react-styles": "^6.3.0-prerelease.12",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.12",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "f6f95a97ea6aa7e3fd45c66654eb3ae893ca16fb"
+  "gitHead": "e08195c635540c7f3cef9707f26407062e295b85"
 }

package/src/components/Table/Table.tsx

@@ -59,7 +59,7 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
   isStriped?: boolean;
   /** Flag indicating this table contains expandable rows. */
   isExpandable?: boolean;
-  /** Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
+  /** @beta Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
    * will be removed in the next breaking change, with the default behavior becoming animations always being enabled.
    */
   hasAnimations?: boolean;

package/src/components/Table/Tr.tsx

@@ -14,12 +14,14 @@ export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onR
   innerRef?: React.Ref<any>;
   /** Flag indicating the Tr is hidden */
   isHidden?: boolean;
-  /** Only applicable to Tr within the Tbody and determines if the expandable row content is expanded or not.
+  /** Flag indicating whether an "expandable" Tr is expanded or not. Only applicable to a Tr within a Tbody.
    * To prevent column widths from responding automatically when expandable rows are toggled, the width prop must also be passed into either the th or td component
    */
   isExpanded?: boolean;
-  /** Flag to indicate that a row is expandable. Only applicable to a tr that is intended to collapse or expand. */
-  isExpandable?: boolean;
+  /** Flag indicating that the "control row" Tr has an expandable sibling Tr that is expanded or not. Only applicable to
+   * a Tr within a Tbody, and should have the same value as an expandable Tr's isExpanded prop.
+   */
+  isContentExpanded?: boolean;
   /** Only applicable to Tr within the Tbody: Whether the row is editable */
   isEditable?: boolean;
   /** Flag which adds hover styles for the clickable table row */
@@ -48,7 +50,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   children,
   className,
   isExpanded,
-  isExpandable,
+  isContentExpanded,
   isEditable,
   isHidden = false,
   isClickable = false,
@@ -78,7 +80,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
     };
   }
 
-  const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable);
+  const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
 
   const { registerSelectableRow, hasAnimations } = useContext(TableContext);
 
@@ -99,10 +101,8 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         className={css(
           styles.tableTr,
           className,
-          // TODO: Revert this back to just isExpandable !== undefined and refine docs around expandable table structure --
-          // We should note where isExpanded and isExpandable props must be passed in
-          (isExpandable !== undefined || isExpanded !== undefined) && styles.tableExpandableRow,
-          isExpanded && styles.modifiers.expanded,
+          isExpanded !== undefined && styles.tableExpandableRow,
+          (isExpanded || isContentExpanded) && styles.modifiers.expanded,
           isEditable && inlineStyles.modifiers.inlineEditable,
           isClickable && styles.modifiers.clickable,
           isRowSelected && styles.modifiers.selected,

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

@@ -200,9 +200,10 @@ Using an `OverflowMenu` in the actions column, allowing the actions to condense
 
 To make a parent/child row pair expandable:
 
-1. Make the first cell in every row an expandable cell by passing `TdExpandType` object to the `expand` prop on the `Td`
-2. Wrap the content of each child row cell in `ExpandableRowContent`.
-3. Enclose each parent/child row pair in a `Tbody` component with an `isExpanded` prop.
+1. Pass `isExpandable` to `Table`.
+1. Make the first cell in every row an expandable cell by passing `TdExpandType` object to the `expand` prop on the `Td`.
+1. Wrap the content of each child row cell in `ExpandableRowContent`.
+1. Pass `isExpanded` to `Tbody` and the `Tr` containing expandable content, and pass `isContentExpanded` to the `Tr` that acts as the "control row".
 
 The `TdExpandType` expects an `OnCollapse` event handler that has the following signature:
 
@@ -226,9 +227,10 @@ Note: Table column widths will respond automatically when toggling expanded rows
 
 To make a parent/child row pair compound expandable:
 
-1. Pass a `TdCompoundExpandType` object to the `compoundExpand` prop on any `Td` that has an expandable child row
-2. Wrap the content of each child row cell in `ExpandableRowContent`.
-3. Each child `Tr` has an `isExpanded` prop.
+1. Pass `isExpandable` to `Table`.
+1. Pass a `TdCompoundExpandType` object to the `compoundExpand` prop on any `Td` that has an expandable child row.
+1. Wrap the content of each child row cell in `ExpandableRowContent`.
+1. Pass `isExpanded` to `Tbody` and the `Tr` containing expandable content, and pass `isContentExpanded` to the `Tr` that acts as the "control row".
 
 The `TdCompoundExpandType` expects an `OnExpand` event handler with the following signature
 

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

@@ -74,7 +74,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
         const isRowExpanded = !!expandedCellKey;
         return (
           <Tbody key={repo.name} isExpanded={isRowExpanded}>
-            <Tr isExpanded={isRowExpanded} isControlRow>
+            <Tr isContentExpanded={isRowExpanded} isControlRow>
               <Td width={25} dataLabel={columnNames.name} component="th">
                 <a href="#">{repo.name}</a>
               </Td>
@@ -106,21 +106,21 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
                 <a href="#">Open in GitHub</a>
               </Td>
             </Tr>
-            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches} isExpandable>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches}>
               <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
                 <ExpandableRowContent>
                   <div>Expanded content for {repo.name}: branches goes here!</div>
                 </ExpandableRowContent>
               </Td>
             </Tr>
-            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs} isExpandable>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs}>
               <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
                 <ExpandableRowContent>
                   <div>Expanded content for {repo.name}: prs goes here!</div>
                 </ExpandableRowContent>
               </Td>
             </Tr>
-            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces} isExpandable>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces}>
               <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
                 <ExpandableRowContent>
                   <div>Expanded content for {repo.name}: workspaces goes here!</div>

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

@@ -157,7 +157,7 @@ export const TableExpandable: React.FunctionComponent = () => {
           }
           return (
             <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-              <Tr isExpanded={isRepoExpanded(repo)}>
+              <Tr isContentExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details
@@ -177,7 +177,7 @@ export const TableExpandable: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
               </Tr>
               {repo.details ? (
-                <Tr isExpandable isExpanded={isRepoExpanded(repo)}>
+                <Tr isExpanded={isRepoExpanded(repo)}>
                   {!childIsFullWidth ? <Td /> : null}
                   {repo.details.detail1 ? (
                     <Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>

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

@@ -85,7 +85,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
         </Thead>
         {teams.map((team, rowIndex) => (
           <Tbody key={team.name} isExpanded={isTeamExpanded(team)}>
-            <Tr isExpanded={isTeamExpanded(team)}>
+            <Tr isContentExpanded={isTeamExpanded(team)}>
               <Td
                 expand={{
                   rowIndex,
@@ -104,7 +104,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
                 </Button>
               </Td>
             </Tr>
-            <Tr isExpanded={isTeamExpanded(team)} isExpandable>
+            <Tr isExpanded={isTeamExpanded(team)}>
               <Td dataLabel={`Team ${team.name} description`} colSpan={6}>
                 <ExpandableRowContent>{team.description}</ExpandableRowContent>
               </Td>

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

@@ -141,7 +141,7 @@ export const TableExpandable: React.FunctionComponent = () => {
       </Thead>
       {repositories.map((repo, rowIndex) => (
         <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-          <Tr isExpanded={isRepoExpanded(repo)}>
+          <Tr isContentExpanded={isRepoExpanded(repo)}>
             <Td
               expand={
                 repo.nestedComponent
@@ -163,7 +163,7 @@ export const TableExpandable: React.FunctionComponent = () => {
             </Td>
           </Tr>
           {repo.nestedComponent ? (
-            <Tr isExpandable isExpanded={isRepoExpanded(repo)}>
+            <Tr isExpanded={isRepoExpanded(repo)}>
               <Td
                 noPadding={repo.noPadding}
                 dataLabel={`${columnNames.name} expended`}

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

@@ -154,7 +154,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
           }
           return (
             <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-              <Tr isExpanded={isRepoExpanded(repo)}>
+              <Tr isContentExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details
@@ -173,7 +173,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
               </Tr>
               {repo.details ? (
-                <Tr isExpanded={isRepoExpanded(repo)} isExpandable>
+                <Tr isExpanded={isRepoExpanded(repo)}>
                   {!childIsFullWidth ? <Td /> : null}
                   {repo.details.detail1 ? (
                     <Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -216,7 +216,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             const isRowExpanded = !!expandedCellKey;
             return (
               <Tbody key={repo.name} isExpanded={isRowExpanded}>
-                <Tr isExpanded={isRowExpanded} isControlRow>
+                <Tr isContentExpanded={isRowExpanded} isControlRow>
                   <Td dataLabel={columnNames.name} component="th">
                     <a href="#">{repo.name}</a>
                   </Td>
@@ -259,21 +259,21 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                   </Td>
                 </Tr>
 
-                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.branches} isExpandable>
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.branches}>
                   <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={7}>
                     <ExpandableRowContent hasNoBackground>
                       <NestedItemsTable />
                     </ExpandableRowContent>
                   </Td>
                 </Tr>
-                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.prs} isExpandable>
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.prs}>
                   <Td dataLabel={columnNames[expandedCellKey]} colSpan={7}>
                     <ExpandableRowContent>
                       <div>Expanded content for {repo.name}: prs goes here!</div>
                     </ExpandableRowContent>
                   </Td>
                 </Tr>
-                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.workspaces} isExpandable>
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.workspaces}>
                   <Td dataLabel={columnNames[expandedCellKey]} colSpan={7}>
                     <ExpandableRowContent>
                       <div>Expanded content for {repo.name}: workspaces goes here!</div>

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -175,7 +175,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
 
               {serverData.map((server, serverIndex) => (
                 <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
-                  <Tr isExpanded={isServerExpanded(server)}>
+                  <Tr isContentExpanded={isServerExpanded(server)}>
                     <Td
                       expand={
                         server.details
@@ -195,7 +195,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
                     <Td>{server?.workspaces}</Td>
                     <Td>{server?.status?.title}</Td>
                   </Tr>
-                  <Tr isExpandable isExpanded={isServerExpanded(server)}>
+                  <Tr isExpanded={isServerExpanded(server)}>
                     <Td></Td>
                     <Td colSpan={expandableColumns.length}>
                       <ExpandableRowContent>{server?.details}</ExpandableRowContent>

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

@@ -1606,6 +1606,7 @@ exports[`Table Collapsible nested table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-182"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td pf-v6-c-table__toggle"
@@ -1701,6 +1702,7 @@ exports[`Table Collapsible nested table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-183"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -1857,6 +1859,7 @@ exports[`Table Collapsible nested table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-185"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -2581,6 +2584,7 @@ exports[`Table Collapsible table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-170"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -3045,6 +3049,7 @@ exports[`Table Compound Expandable table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-179"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td pf-v6-c-table__compound-expansion-toggle"
@@ -3187,6 +3192,7 @@ exports[`Table Control text table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-212"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <th
           class="pf-v6-c-table__td"
@@ -3238,6 +3244,7 @@ exports[`Table Control text table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-213"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <th
           class="pf-v6-c-table__td"
@@ -3345,6 +3352,7 @@ exports[`Table Control text table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-215"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <th
           class="pf-v6-c-table__td"
@@ -3746,6 +3754,7 @@ exports[`Table Header width table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-222"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <th
           class="pf-v6-c-table__td"
@@ -3797,6 +3806,7 @@ exports[`Table Header width table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-223"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <th
           class="pf-v6-c-table__td"
@@ -3904,6 +3914,7 @@ exports[`Table Header width table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-225"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <th
           class="pf-v6-c-table__td"
@@ -4363,6 +4374,7 @@ exports[`Table Selectable table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-192"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -4419,6 +4431,7 @@ exports[`Table Selectable table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-193"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -4544,6 +4557,7 @@ exports[`Table Selectable table 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-195"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -5052,6 +5066,7 @@ exports[`Table Selectable table with Radio 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-202"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -5108,6 +5123,7 @@ exports[`Table Selectable table with Radio 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-203"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"
@@ -5233,6 +5249,7 @@ exports[`Table Selectable table with Radio 1`] = `
         data-ouia-component-id="OUIA-Generated-TableRow-205"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
+        hidden=""
       >
         <td
           class="pf-v6-c-table__td"