@patternfly/react-data-view 5.3.0 → 5.4.1

package/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap

@@ -323,7 +323,7 @@ exports[`DataViewTable component should render correctly 1`] = `
 </div>
 `;
 
-exports[`DataViewTable component should render with an empty state 1`] = `
+exports[`DataViewTable component should render with a loading state 1`] = `
 <div>
   <div
     class="pf-v5-l-stack"
@@ -393,25 +393,84 @@ exports[`DataViewTable component should render with an empty state 1`] = `
             </th>
           </tr>
         </thead>
-        <tbody
-          class="pf-v5-c-table__tbody"
-          role="rowgroup"
+        Data is loading
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTable component should render with an empty state 1`] = `
+<div>
+  <div
+    class="pf-v5-l-stack"
+    data-ouia-component-id="DataView-stack"
+  >
+    <div
+      class="pf-v5-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
+    >
+      <table
+        aria-label="Repositories table"
+        class="pf-v5-c-table pf-m-grid-md"
+        data-ouia-component-id="TableExample"
+        data-ouia-component-type="PF5/Table"
+        data-ouia-safe="true"
+        role="grid"
+      >
+        <thead
+          class="pf-v5-c-table__thead"
+          data-ouia-component-id="TableExample-thead"
         >
           <tr
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="TableExample-tr-empty"
+            data-ouia-component-id="TableExample-tr-head"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
-            <td
-              class="pf-v5-c-table__td"
-              colspan="5"
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-0"
+              scope="col"
               tabindex="-1"
             >
-              No data found
-            </td>
+              Repositories
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
           </tr>
-        </tbody>
+        </thead>
+        No data found
       </table>
     </div>
   </div>
@@ -488,25 +547,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
             </th>
           </tr>
         </thead>
-        <tbody
-          class="pf-v5-c-table__tbody"
-          role="rowgroup"
-        >
-          <tr
-            class="pf-v5-c-table__tr"
-            data-ouia-component-id="TableExample-tr-error"
-            data-ouia-component-type="PF5/TableRow"
-            data-ouia-safe="true"
-          >
-            <td
-              class="pf-v5-c-table__td"
-              colspan="5"
-              tabindex="-1"
-            >
-              Some error
-            </td>
-          </tr>
-        </tbody>
+        Some error
       </table>
     </div>
   </div>

package/src/{DataViewTableHeader/DataViewTableHeader.test.tsx → DataViewTableHead/DataViewTableHead.test.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Table } from '@patternfly/react-table';
-import { DataViewTableHeader } from './DataViewTableHeader';
+import { DataViewTableHead } from './DataViewTableHead';
 import { DataViewSelection } from '../InternalContext';
 import { DataView } from '../DataView';
 
@@ -9,7 +9,7 @@ const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'La
 
 const ouiaId = 'HeaderExample';
 
-describe('DataViewTableHeader component', () => {
+describe('DataViewTableHead component', () => {
   const mockSelection: DataViewSelection = {
     onSelect: jest.fn(),
     isSelected: jest.fn(),
@@ -19,7 +19,7 @@ describe('DataViewTableHeader component', () => {
   test('should render correctly', () => {
     const { container } = render(
       <Table>
-        <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
+        <DataViewTableHead columns={columns} ouiaId={ouiaId} />
       </Table>
     );
     expect(container).toMatchSnapshot();
@@ -29,7 +29,7 @@ describe('DataViewTableHeader component', () => {
     const { container } = render(
       <DataView selection={mockSelection}>
         <Table>
-          <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
+          <DataViewTableHead isTreeTable columns={columns} ouiaId={ouiaId} />
         </Table>
       </DataView>
     );
@@ -40,7 +40,7 @@ describe('DataViewTableHeader component', () => {
     const { container } = render(
       <DataView selection={mockSelection}>
         <Table>
-          <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
+          <DataViewTableHead columns={columns} ouiaId={ouiaId} />
         </Table>
       </DataView>
     );
@@ -48,5 +48,3 @@ describe('DataViewTableHeader component', () => {
   });
 });
 
-
-

package/src/{DataViewTableHeader/DataViewTableHeader.tsx → DataViewTableHead/DataViewTableHead.tsx}

@@ -8,7 +8,7 @@ import {
 import { useInternalContext } from '../InternalContext';
 import { DataViewTh, isDataViewThObject } from '../DataViewTable';
 
-export interface DataViewTableHeaderProps extends TheadProps {
+export interface DataViewTableHeadProps extends TheadProps {
   /** Indicates whether table is a tree */
   isTreeTable?: boolean;
   /** Columns definition */
@@ -17,18 +17,18 @@ export interface DataViewTableHeaderProps extends TheadProps {
   ouiaId?: string;
 }
 
-export const DataViewTableHeader: React.FC<DataViewTableHeaderProps> = ({
+export const DataViewTableHead: React.FC<DataViewTableHeadProps> = ({
   isTreeTable = false,
   columns,
-  ouiaId = 'DataViewTableHeader',
+  ouiaId = 'DataViewTableHead',
   ...props
-}: DataViewTableHeaderProps) => {
+}: DataViewTableHeadProps) => {
   const { selection } = useInternalContext();
   const { onSelect, isSelected } = selection ?? {};
 
   const cells = useMemo(() => [
     onSelect && isSelected && !isTreeTable ? (
-      <Th key="row-select" screenReaderText='Data selection table header cell' />
+      <Th key="row-select" screenReaderText='Data selection table head cell' />
     ) : null,
     ...columns.map((column, index) => (
       <Th
@@ -50,4 +50,4 @@ export const DataViewTableHeader: React.FC<DataViewTableHeaderProps> = ({
   );
 };
 
-export default DataViewTableHeader;
+export default DataViewTableHead;

package/src/{DataViewTableHeader/__snapshots__/DataViewTableHeader.test.tsx.snap → DataViewTableHead/__snapshots__/DataViewTableHead.test.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DataViewTableHeader component should render correctly 1`] = `
+exports[`DataViewTableHead component should render correctly 1`] = `
 <div>
   <table
     class="pf-v5-c-table pf-m-grid-md"
@@ -65,7 +65,7 @@ exports[`DataViewTableHeader component should render correctly 1`] = `
 </div>
 `;
 
-exports[`DataViewTableHeader component should render selection column when selection is provided 1`] = `
+exports[`DataViewTableHead component should render selection column when selection is provided 1`] = `
 <div>
   <div
     class="pf-v5-l-stack"
@@ -100,7 +100,7 @@ exports[`DataViewTableHeader component should render selection column when selec
               <span
                 class="pf-v5-screen-reader"
               >
-                Data selection table header cell
+                Data selection table head cell
               </span>
             </th>
             <th
@@ -151,7 +151,7 @@ exports[`DataViewTableHeader component should render selection column when selec
 </div>
 `;
 
-exports[`DataViewTableHeader component should render the tree table correctly when isTreeTable is true 1`] = `
+exports[`DataViewTableHead component should render the tree table correctly when isTreeTable is true 1`] = `
 <div>
   <div
     class="pf-v5-l-stack"

package/src/DataViewTableHead/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTableHead';
+export * from './DataViewTableHead';

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -86,7 +86,7 @@ describe('DataViewTableTree component', () => {
   test('should render tree table with an empty state', () => {
     const { container } = render(
       <DataView activeState="empty">
-        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ empty: "No data found" }} rows={[]} />
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ empty: "No data found" }} rows={[]} />
 
       </DataView> 
     );
@@ -96,9 +96,18 @@ describe('DataViewTableTree component', () => {
   test('should render tree table with an error state', () => {
     const { container } = render(
       <DataView activeState="error">
-        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} states={{ error: "Some error" }} rows={[]} />
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ error: "Some error" }} rows={[]} />
       </DataView>
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render tree table with a loading state', () => {
+    const { container } = render(
+      <DataView activeState="loading">
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
+      </DataView> 
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -5,11 +5,10 @@ import {
   Tbody,
   Td,
   TdProps,
-  Tr,
   TreeRowWrapper,
 } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
-import { DataViewTableHeader } from '../DataViewTableHeader';
+import { DataViewTableHead } from '../DataViewTableHead';
 import { DataViewTh, DataViewTrTree, isDataViewTdObject } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
 
@@ -36,8 +35,10 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTrTree[];
-  /** States to be displayed when active */
-  states?: Partial<Record<DataViewState, React.ReactNode>>
+  /** Table head states to be displayed when active */
+  headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
+  /** Table body states to be displayed when active */
+  bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Optional icon for the leaf rows */
   leafIcon?: React.ReactNode;
   /** Optional icon for the expanded parent rows */
@@ -51,7 +52,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
 export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   columns,
   rows,
-  states = {},
+  headStates,
+  bodyStates,
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
@@ -63,6 +65,9 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
   const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
 
+  const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
+  const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
+
   const nodes = useMemo(() => {
 
     const renderRows = (
@@ -150,17 +155,8 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
 
   return (
     <Table isTreeTable aria-label="Data table" ouiaId={ouiaId} {...props}>
-      <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
-      <Tbody>{
-        activeState && Object.keys(states).includes(activeState) ? (
-          <Tr key={activeState} ouiaId={`${ouiaId}-tr-${activeState}`}>
-            <Td colSpan={columns.length}>
-              {states[activeState]}
-            </Td>
-          </Tr>
-        ) : nodes
-      }
-      </Tbody>
+      {activeHeadState || <DataViewTableHead isTreeTable columns={columns} ouiaId={ouiaId} />}
+      {activeBodyState || <Tbody>{nodes}</Tbody>}
     </Table>
   );
 };

package/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap

@@ -936,7 +936,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
 </div>
 `;
 
-exports[`DataViewTableTree component should render tree table with an empty state 1`] = `
+exports[`DataViewTableTree component should render tree table with a loading state 1`] = `
 <div>
   <div
     class="pf-v5-l-stack"
@@ -1006,25 +1006,84 @@ exports[`DataViewTableTree component should render tree table with an empty stat
             </th>
           </tr>
         </thead>
-        <tbody
-          class="pf-v5-c-table__tbody"
-          role="rowgroup"
+        Data is loading
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTableTree component should render tree table with an empty state 1`] = `
+<div>
+  <div
+    class="pf-v5-l-stack"
+    data-ouia-component-id="DataView-stack"
+  >
+    <div
+      class="pf-v5-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
+    >
+      <table
+        aria-label="Repositories table"
+        class="pf-v5-c-table pf-m-tree-view-grid-md pf-m-tree-view"
+        data-ouia-component-id="TreeTableExample"
+        data-ouia-component-type="PF5/Table"
+        data-ouia-safe="true"
+        role="treegrid"
+      >
+        <thead
+          class="pf-v5-c-table__thead"
+          data-ouia-component-id="TreeTableExample-thead"
         >
           <tr
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="TreeTableExample-tr-empty"
+            data-ouia-component-id="TreeTableExample-tr-head"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
-            <td
-              class="pf-v5-c-table__td"
-              colspan="5"
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-0"
+              scope="col"
               tabindex="-1"
             >
-              No data found
-            </td>
+              Repositories
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-1"
+              scope="col"
+              tabindex="-1"
+            >
+              Branches
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-2"
+              scope="col"
+              tabindex="-1"
+            >
+              Pull requests
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-3"
+              scope="col"
+              tabindex="-1"
+            >
+              Workspaces
+            </th>
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-4"
+              scope="col"
+              tabindex="-1"
+            >
+              Last commit
+            </th>
           </tr>
-        </tbody>
+        </thead>
+        No data found
       </table>
     </div>
   </div>
@@ -1101,25 +1160,7 @@ exports[`DataViewTableTree component should render tree table with an error stat
             </th>
           </tr>
         </thead>
-        <tbody
-          class="pf-v5-c-table__tbody"
-          role="rowgroup"
-        >
-          <tr
-            class="pf-v5-c-table__tr"
-            data-ouia-component-id="TreeTableExample-tr-error"
-            data-ouia-component-type="PF5/TableRow"
-            data-ouia-safe="true"
-          >
-            <td
-              class="pf-v5-c-table__td"
-              colspan="5"
-              tabindex="-1"
-            >
-              Some error
-            </td>
-          </tr>
-        </tbody>
+        Some error
       </table>
     </div>
   </div>

package/src/InternalContext/InternalContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useContext } from 'react';
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
 import { DataViewState } from '../DataView';
 
 export interface DataViewSelection {
@@ -10,29 +10,41 @@ export interface DataViewSelection {
   isSelectDisabled?: (item: any) => boolean;  // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
-export interface InternalContextValue {
+export interface InternalContextProps {
+  /** Data selection props */
   selection?: DataViewSelection;
-  activeState?: DataViewState; 
+  /** Currently active state */
+  activeState?: DataViewState | string;
+}
+
+export interface InternalContextValue extends InternalContextProps {
+  /** Flag indicating if data view is selectable (auto-calculated) */
+  isSelectable: boolean; 
 }
 
 export const InternalContext = createContext<InternalContextValue>({
   selection: undefined,
-  activeState: undefined
+  activeState: undefined,
+  isSelectable: false,
 });
 
-export type InternalProviderProps = PropsWithChildren<InternalContextValue>
+export type InternalProviderProps = PropsWithChildren<InternalContextProps>
 
 export const InternalContextProvider: React.FC<InternalProviderProps> = ({
   children,
   selection,
   activeState
-}) => (
-  <InternalContext.Provider
-    value={{ selection, activeState }}
-  >
-    {children}
-  </InternalContext.Provider>
-);
+}) => {
+  const isSelectable = useMemo(() => Boolean(selection?.onSelect && selection?.isSelected), [ selection?.onSelect, selection?.isSelected ]);
+  
+  return (
+    <InternalContext.Provider
+      value={{ selection, activeState, isSelectable }}
+    >
+      {children}
+    </InternalContext.Provider>
+  );
+}
 
 export const useInternalContext = () => useContext(InternalContext);
 

package/src/index.ts

@@ -10,8 +10,8 @@ export * from './DataViewToolbar';
 export { default as DataViewTableTree } from './DataViewTableTree';
 export * from './DataViewTableTree';
 
-export { default as DataViewTableHeader } from './DataViewTableHeader';
-export * from './DataViewTableHeader';
+export { default as DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
 
 export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';

package/dist/cjs/DataViewTableHeader/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './DataViewTableHeader';
-export * from './DataViewTableHeader';

package/dist/dynamic/DataViewTableHeader/package.json

@@ -1 +0,0 @@
-{"main":"../../cjs/DataViewTableHeader/index.js","module":"../../esm/DataViewTableHeader/index.js","typings":"../../esm/DataViewTableHeader/index.d.ts"}

package/dist/esm/DataViewTableHeader/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './DataViewTableHeader';
-export * from './DataViewTableHeader';

package/dist/esm/DataViewTableHeader/index.js

@@ -1,2 +0,0 @@
-export { default } from './DataViewTableHeader';
-export * from './DataViewTableHeader';

package/src/DataViewTableHeader/index.ts

@@ -1,2 +0,0 @@
-export { default } from './DataViewTableHeader';
-export * from './DataViewTableHeader';