@patternfly/react-table 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.3.0-prerelease.2",
+  "version": "6.3.0-prerelease.21",
   "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.2",
-    "@patternfly/react-icons": "^6.3.0-prerelease.1",
-    "@patternfly/react-styles": "^6.3.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.1",
+    "@patternfly/react-core": "^6.3.0-prerelease.21",
+    "@patternfly/react-icons": "^6.3.0-prerelease.6",
+    "@patternfly/react-styles": "^6.3.0-prerelease.6",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.6",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "b9a84887122c428ff6d9d6dd8246a5f2b34e18a7"
+  "gitHead": "c40f2f81ebe65b6bd785bc38da66330532ac7a30"
 }

package/src/components/Table/Tr.tsx

@@ -14,10 +14,12 @@ 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: Makes the row expandable and determines if it's expanded or not.
+  /** Only applicable to Tr within the Tbody and determines if the expandable row content is expanded or not.
    * 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;
   /** Only applicable to Tr within the Tbody: Whether the row is editable */
   isEditable?: boolean;
   /** Flag which adds hover styles for the clickable table row */
@@ -46,6 +48,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   children,
   className,
   isExpanded,
+  isExpandable,
   isEditable,
   isHidden = false,
   isClickable = false,
@@ -75,7 +78,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
     };
   }
 
-  const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
+  const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable);
 
   const { registerSelectableRow } = useContext(TableContext);
 
@@ -96,7 +99,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         className={css(
           styles.tableTr,
           className,
-          isExpanded !== undefined && styles.tableExpandableRow,
+          isExpandable !== undefined && styles.tableExpandableRow,
           isExpanded && styles.modifiers.expanded,
           isEditable && inlineStyles.modifiers.inlineEditable,
           isClickable && styles.modifiers.clickable,

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

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

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

@@ -116,7 +116,7 @@ export const TableExpandable: React.FunctionComponent = () => {
         id="toggle-compact"
         name="toggle-compact"
       />
-      <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
+      <Table isExpandable aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
         <Thead>
           <Tr>
             <Th screenReaderText="Row expansion" />
@@ -152,7 +152,7 @@ export const TableExpandable: React.FunctionComponent = () => {
           }
           return (
             <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-              <Tr>
+              <Tr isExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details
@@ -172,7 +172,7 @@ export const TableExpandable: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
               </Tr>
               {repo.details ? (
-                <Tr isExpanded={isRepoExpanded(repo)}>
+                <Tr isExpandable isExpanded={isRepoExpanded(repo)}>
                   {!childIsFullWidth ? <Td /> : null}
                   {repo.details.detail1 ? (
                     <Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>

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

@@ -1,5 +1,4 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-/* eslint-disable camelcase */
 import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
 
 interface Repository {

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

@@ -128,7 +128,7 @@ export const TableExpandable: React.FunctionComponent = () => {
   ];
 
   return (
-    <Table aria-label="Simple table">
+    <Table isExpandable aria-label="Simple table">
       <Thead>
         <Tr>
           <Th screenReaderText="Row expansion" />
@@ -141,7 +141,7 @@ export const TableExpandable: React.FunctionComponent = () => {
       </Thead>
       {repositories.map((repo, rowIndex) => (
         <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-          <Tr>
+          <Tr isExpanded={isRepoExpanded(repo)}>
             <Td
               expand={
                 repo.nestedComponent
@@ -163,7 +163,7 @@ export const TableExpandable: React.FunctionComponent = () => {
             </Td>
           </Tr>
           {repo.nestedComponent ? (
-            <Tr isExpanded={isRepoExpanded(repo)}>
+            <Tr isExpandable isExpanded={isRepoExpanded(repo)}>
               <Td
                 noPadding={repo.noPadding}
                 dataLabel={`${columnNames.name} expended`}

package/src/demos/DashboardHeader.tsx

@@ -23,7 +23,6 @@ import {
   ToolbarItem,
   PageToggleButton
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -132,9 +131,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>{patternflyLogo}</MastheadLogo>
@@ -159,7 +156,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
               )}
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                  <Button aria-label="Settings" isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -156,7 +156,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
           aria-label="Collapsible table data"
         >
           <Card component="div">
-            <Table aria-label="Collapsible table">
+            <Table isExpandable aria-label="Collapsible table">
               <Thead>
                 <Tr>
                   <Th
@@ -175,7 +175,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
 
               {serverData.map((server, serverIndex) => (
                 <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
-                  <Tr>
+                  <Tr isExpanded={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 isExpanded={isServerExpanded(server)}>
+                  <Tr isExpandable isExpanded={isServerExpanded(server)}>
                     <Td></Td>
                     <Td colSpan={expandableColumns.length}>
                       <ExpandableRowContent>{server?.details}</ExpandableRowContent>