@patternfly/react-data-view 5.1.4 → 5.3.0

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -11,6 +11,7 @@ import {
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { DataViewTh, DataViewTrTree, isDataViewTdObject } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 
 const getDescendants = (node: DataViewTrTree): DataViewTrTree[] => (!node.children || !node.children.length) ? [ node ] : node.children.flatMap(getDescendants);
 
@@ -35,8 +36,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTrTree[];
-  /** Empty state to be displayed */
-  emptyState?: React.ReactNode;
+  /** States to be displayed when active */
+  states?: Partial<Record<DataViewState, React.ReactNode>>
   /** Optional icon for the leaf rows */
   leafIcon?: React.ReactNode;
   /** Optional icon for the expanded parent rows */
@@ -50,20 +51,20 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
 export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   columns,
   rows,
-  emptyState = null,
+  states = {},
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
   ouiaId = 'DataViewTableTree',
   ...props
 }: DataViewTableTreeProps) => {
-  const { selection } = useInternalContext();
+  const { selection, activeState } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
   const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
   const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
 
   const nodes = useMemo(() => {
-    
+
     const renderRows = (
       [ node, ...remainingNodes ]: DataViewTrTree[],
       level = 1,
@@ -134,19 +135,31 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
     };
 
     return renderRows(rows);
-  }, [ rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId ]);
+  }, [
+    rows,
+    expandedNodeIds,
+    expandedDetailsNodeNames,
+    leafIcon,
+    expandedIcon,
+    collapsedIcon,
+    isSelected,
+    onSelect,
+    isSelectDisabled,
+    ouiaId
+  ]);
 
   return (
     <Table isTreeTable aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
-      <Tbody>
-        {nodes.length > 0 ? nodes : (
-          <Tr key="empty" ouiaId={`${ouiaId}-tr-empty`}>
+      <Tbody>{
+        activeState && Object.keys(states).includes(activeState) ? (
+          <Tr key={activeState} ouiaId={`${ouiaId}-tr-${activeState}`}>
             <Td colSpan={columns.length}>
-              {emptyState}
+              {states[activeState]}
             </Td>
           </Tr>
-        )}
+        ) : nodes
+      }
       </Tbody>
     </Table>
   );

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

@@ -4,7 +4,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
 <div>
   <div
     class="pf-v5-l-stack"
-    data-ouia-component-id="DataView-stack}"
+    data-ouia-component-id="DataView-stack"
   >
     <div
       class="pf-v5-l-stack__item"
@@ -938,85 +938,190 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
 
 exports[`DataViewTableTree component should render tree table with an empty state 1`] = `
 <div>
-  <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"
+  <div
+    class="pf-v5-l-stack"
+    data-ouia-component-id="DataView-stack"
   >
-    <thead
-      class="pf-v5-c-table__thead"
-      data-ouia-component-id="TreeTableExample-thead"
+    <div
+      class="pf-v5-l-stack__item"
+      data-ouia-component-id="DataView-stack-item-0"
     >
-      <tr
-        class="pf-v5-c-table__tr"
-        data-ouia-component-id="TreeTableExample-tr-head"
-        data-ouia-component-type="PF5/TableRow"
+      <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"
       >
-        <th
-          class="pf-v5-c-table__th"
-          data-ouia-component-id="TreeTableExample-th-0"
-          scope="col"
-          tabindex="-1"
-        >
-          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"
+        <thead
+          class="pf-v5-c-table__thead"
+          data-ouia-component-id="TreeTableExample-thead"
         >
-          Workspaces
-        </th>
-        <th
-          class="pf-v5-c-table__th"
-          data-ouia-component-id="TreeTableExample-th-4"
-          scope="col"
-          tabindex="-1"
+          <tr
+            class="pf-v5-c-table__tr"
+            data-ouia-component-id="TreeTableExample-tr-head"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              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>
+        </thead>
+        <tbody
+          class="pf-v5-c-table__tbody"
+          role="rowgroup"
         >
-          Last commit
-        </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-empty"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <td
+              class="pf-v5-c-table__td"
+              colspan="5"
+              tabindex="-1"
+            >
+              No data found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DataViewTableTree component should render tree table with an error 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"
     >
-      <tr
-        class="pf-v5-c-table__tr"
-        data-ouia-component-id="TreeTableExample-tr-empty"
-        data-ouia-component-type="PF5/TableRow"
+      <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"
       >
-        <td
-          class="pf-v5-c-table__td"
-          colspan="5"
-          tabindex="-1"
+        <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-head"
+            data-ouia-component-type="PF5/TableRow"
+            data-ouia-safe="true"
+          >
+            <th
+              class="pf-v5-c-table__th"
+              data-ouia-component-id="TreeTableExample-th-0"
+              scope="col"
+              tabindex="-1"
+            >
+              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>
+        </thead>
+        <tbody
+          class="pf-v5-c-table__tbody"
+          role="rowgroup"
         >
-          No data found
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          <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>
+      </table>
+    </div>
+  </div>
 </div>
 `;

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -14,7 +14,7 @@ export interface DataViewToolbarProps extends PropsWithChildren {
   actions?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children, ...props }: DataViewToolbarProps) => (
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children, ...props }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className} {...props}>
     <ToolbarContent>
       {bulkSelect && (
@@ -22,7 +22,11 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
           {bulkSelect}
         </ToolbarItem>
       )}
-      {actions}
+      {actions && (
+        <ToolbarItem variant={ToolbarItemVariant['overflow-menu']}>
+          {actions}
+        </ToolbarItem>
+      )}
       {pagination && (
         <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
           {pagination}
@@ -31,7 +35,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
       {children}
     </ToolbarContent>
   </Toolbar>
-);
+)
 
 export default DataViewToolbar;
 

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

@@ -46,53 +46,54 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                   </b>
                    
                 </div>
-                <div>
-                  <button
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-                    id="options-menu-top-toggle"
-                    type="button"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+                  data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+                  data-ouia-component-type="PF5/MenuToggle"
+                  data-ouia-safe="true"
+                  id="options-menu-top-toggle"
+                  type="button"
+                >
+                  <span
+                    class="pf-v5-c-menu-toggle__text"
+                  >
+                    <b>
+                      1
+                       - 
+                      10
+                    </b>
+                     
+                    of
+                     
+                    <b>
+                      0
+                    </b>
+                     
+                  </span>
+                  <span
+                    class="pf-v5-c-menu-toggle__controls"
                   >
                     <span
-                      class="pf-v5-c-menu-toggle__text"
-                    >
-                      <b>
-                        1
-                         - 
-                        10
-                      </b>
-                       
-                      of
-                       
-                      <b>
-                        0
-                      </b>
-                       
-                    </span>
-                    <span
-                      class="pf-v5-c-menu-toggle__controls"
+                      class="pf-v5-c-menu-toggle__toggle-icon"
                     >
-                      <span
-                        class="pf-v5-c-menu-toggle__toggle-icon"
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 320 512"
+                        width="1em"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-v5-svg"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          viewBox="0 0 320 512"
-                          width="1em"
-                        >
-                          <path
-                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        />
+                      </svg>
                     </span>
-                  </button>
-                </div>
+                  </span>
+                </button>
                 <nav
                   aria-label="Pagination"
                   class="pf-v5-c-pagination__nav"
@@ -288,53 +289,54 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                 </b>
                  
               </div>
-              <div>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-                  id="options-menu-top-toggle"
-                  type="button"
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+                data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+                data-ouia-component-type="PF5/MenuToggle"
+                data-ouia-safe="true"
+                id="options-menu-top-toggle"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-menu-toggle__text"
+                >
+                  <b>
+                    1
+                     - 
+                    10
+                  </b>
+                   
+                  of
+                   
+                  <b>
+                    0
+                  </b>
+                   
+                </span>
+                <span
+                  class="pf-v5-c-menu-toggle__controls"
                 >
                   <span
-                    class="pf-v5-c-menu-toggle__text"
-                  >
-                    <b>
-                      1
-                       - 
-                      10
-                    </b>
-                     
-                    of
-                     
-                    <b>
-                      0
-                    </b>
-                     
-                  </span>
-                  <span
-                    class="pf-v5-c-menu-toggle__controls"
+                    class="pf-v5-c-menu-toggle__toggle-icon"
                   >
-                    <span
-                      class="pf-v5-c-menu-toggle__toggle-icon"
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v5-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 320 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        />
-                      </svg>
-                    </span>
+                      <path
+                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                      />
+                    </svg>
                   </span>
-                </button>
-              </div>
+                </span>
+              </button>
               <nav
                 aria-label="Pagination"
                 class="pf-v5-c-pagination__nav"

package/src/InternalContext/InternalContext.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
+import { DataViewState } from '../DataView';
 
 export interface DataViewSelection {
   /** Called when the selection of items changes */
@@ -11,20 +12,23 @@ export interface DataViewSelection {
 
 export interface InternalContextValue {
   selection?: DataViewSelection;
+  activeState?: DataViewState; 
 }
 
 export const InternalContext = createContext<InternalContextValue>({
-  selection: undefined
+  selection: undefined,
+  activeState: undefined
 });
 
 export type InternalProviderProps = PropsWithChildren<InternalContextValue>
 
 export const InternalContextProvider: React.FC<InternalProviderProps> = ({
   children,
-  selection
+  selection,
+  activeState
 }) => (
   <InternalContext.Provider
-    value={{ selection }}
+    value={{ selection, activeState }}
   >
     {children}
   </InternalContext.Provider>