@patternfly/react-data-view 5.1.0 → 5.1.1

package/src/DataViewTable/DataViewTable.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable } from './DataViewTable';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+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' },
+  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+const rows = repositories.map(repo => ({
+  row: Object.values(repo),
+}));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+describe('DataViewTable component', () => {
+  test('should render correctly', () => {
+    const { container } = render(
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTable/DataViewTable.tsx

@@ -0,0 +1,96 @@
+import React, { ReactNode } from 'react';
+import {
+  Table,
+  TableProps,
+  Tbody,
+  Td,
+  TdProps,
+  Th,
+  Thead,
+  ThProps,
+  Tr,
+  TrProps
+} from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+
+export type DataViewTh = ReactNode | { cell: ReactNode; props?: ThProps };
+export type DataViewTd = ReactNode | { cell: ReactNode; props?: TdProps };
+export type DataViewTr = DataViewTd[] | { row: DataViewTd[], id?: string, props?: TrProps };
+
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+
+
+export interface DataViewTableProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+  /** Columns definition */
+  columns: DataViewTh[];
+  /** Current page rows */
+  rows: DataViewTr[];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTable: React.FC<DataViewTableProps> = ({
+  columns,
+  rows,
+  ouiaId = 'DataViewTable',
+  ...props
+}: DataViewTableProps) => {
+  const { selection } = useInternalContext();
+  const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+
+  return (
+    <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
+      <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+        <Tr ouiaId={`${ouiaId}-tr-head`}>
+          {onSelect && isSelected && <Th key="row-select" />}
+          {columns.map((column, index) => (
+            <Th
+              key={index}
+              {...(isDataViewThObject(column) && (column?.props ?? {}))}
+              data-ouia-component-id={`${ouiaId}-th-${index}`}
+            >
+              {isDataViewThObject(column) ? column.cell : column}
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, rowIndex) => { 
+          const rowIsObject = isDataViewTrObject(row);
+          return (
+            <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && (row?.props ?? {}))}>
+              {onSelect && isSelected && (
+                <Td
+                  key={`select-${rowIndex}`}
+                  select={{
+                    rowIndex,
+                    onSelect: (_event, isSelecting) => {
+                      onSelect?.(isSelecting, rowIsObject ? row : [ row ])
+                    },
+                    isSelected: isSelected?.(row) || false,
+                    isDisabled: isSelectDisabled?.(row) || false,
+                  }}
+                />
+              )}
+              {(rowIsObject ? row.row : row).map((cell, colIndex) => {
+                const cellIsObject = isDataViewTdObject(cell);
+                return (
+                  <Td
+                    key={colIndex}
+                    {...(cellIsObject && (cell?.props ?? {}))}
+                    data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
+                  >
+                    {cellIsObject ? cell.cell : cell}
+                  </Td>
+                )
+              })}
+            </Tr>
+          )})}
+      </Tbody>
+    </Table>
+  );
+};
+
+export default DataViewTable;

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

@@ -0,0 +1,320 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTable component should render correctly 1`] = `
+<div>
+  <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-head"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          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>
+    </thead>
+    <tbody
+      class="pf-v5-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-0"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-0"
+          tabindex="-1"
+        >
+          one
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-1"
+          tabindex="-1"
+        >
+          two
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-2"
+          tabindex="-1"
+        >
+          three
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-3"
+          tabindex="-1"
+        >
+          four
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-0-4"
+          tabindex="-1"
+        >
+          five
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-1"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-0"
+          tabindex="-1"
+        >
+          one - 2
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-1"
+          tabindex="-1"
+        />
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-2"
+          tabindex="-1"
+        />
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-3"
+          tabindex="-1"
+        >
+          four - 2
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-1-4"
+          tabindex="-1"
+        >
+          five - 2
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-2"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-0"
+          tabindex="-1"
+        >
+          one - 3
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-1"
+          tabindex="-1"
+        >
+          two - 3
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-2"
+          tabindex="-1"
+        >
+          three - 3
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-3"
+          tabindex="-1"
+        >
+          four - 3
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-2-4"
+          tabindex="-1"
+        >
+          five - 3
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-3"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-0"
+          tabindex="-1"
+        >
+          one - 4
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-1"
+          tabindex="-1"
+        >
+          two - 4
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-2"
+          tabindex="-1"
+        >
+          null
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-3"
+          tabindex="-1"
+        >
+          four - 4
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-3-4"
+          tabindex="-1"
+        >
+          five - 4
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-4"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-0"
+          tabindex="-1"
+        >
+          one - 5
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-1"
+          tabindex="-1"
+        >
+          two - 5
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-2"
+          tabindex="-1"
+        >
+          three - 5
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-3"
+          tabindex="-1"
+        >
+          four - 5
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-4-4"
+          tabindex="-1"
+        >
+          five - 5
+        </td>
+      </tr>
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-5"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-0"
+          tabindex="-1"
+        >
+          one - 6
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-1"
+          tabindex="-1"
+        >
+          two - 6
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-2"
+          tabindex="-1"
+        >
+          three - 6
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-3"
+          tabindex="-1"
+        >
+          four - 6
+        </td>
+        <td
+          class="pf-v5-c-table__td"
+          data-ouia-component-id="TableExample-td-5-4"
+          tabindex="-1"
+        >
+          five - 6
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/DataViewTable/index.ts

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

package/src/Hooks/selection.test.tsx

@@ -4,7 +4,7 @@ import { useDataViewSelection } from './selection';
 
 describe('useDataViewSelection', () => {
   it('should get initial state correctly - no initialSelected', () => {
-    const { result } = renderHook(() => useDataViewSelection({}))
+    const { result } = renderHook(() => useDataViewSelection({ matchOption: (a, b) => a.id === b.id }))
     expect(result.current).toEqual({ 
       selected: [],
       onSelect: expect.any(Function),
@@ -14,7 +14,7 @@ describe('useDataViewSelection', () => {
 
   it('should get initial state correctly - with initialSelected', () => {
     const initialSelected = [ { id: 1, name: 'test1' } ];
-    const { result } = renderHook(() => useDataViewSelection({ initialSelected }))
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }))
     expect(result.current).toEqual({ 
       selected: initialSelected,
       onSelect: expect.any(Function),
@@ -24,7 +24,7 @@ describe('useDataViewSelection', () => {
 
   it('should select items correctly - objects', async () => {
     const initialSelected = [ { id: 1, name: 'test1' } ];
-    const { result } = renderHook(() => useDataViewSelection({ initialSelected }))
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }))
     
     await act(async () => {
       result.current.onSelect(true, { id: 2, name: 'test2' });
@@ -34,7 +34,7 @@ describe('useDataViewSelection', () => {
 
   it('should deselect items correctly - strings', async () => {
     const initialSelected = [ 'test1', 'test2' ];
-    const { result } = renderHook(() => useDataViewSelection({ initialSelected }))
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a === b }))
     
     await act(async () => {
       result.current.onSelect(false, 'test2');
@@ -44,7 +44,7 @@ describe('useDataViewSelection', () => {
 
   it('should check if item is selected correctly - objects', () => {
     const initialSelected = [ { id: 1, name: 'test1' }, { id: 2, name: 'test2' } ];
-    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a,b) => a.id === b.id }))
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }))
     
     expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
     expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);

package/src/Hooks/selection.ts

@@ -2,18 +2,17 @@
 import { useState } from "react";
 
 export interface UseDataViewSelectionProps {
+  /** Function to compare items when checking if item is selected */
+  matchOption: (item: any, another: any) => boolean;
   /** Array of initially selected entries */
   initialSelected?: (any)[];
-  /** Function to compare items when checking if entry is selected */
-  matchOption?: (item: any, another: any) => boolean;
 }
 
-export const useDataViewSelection = (props: UseDataViewSelectionProps) => {
-  const [ selected, setSelected ] = useState<any[]>(props.initialSelected ?? []);
-  const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+export const useDataViewSelection = ({ matchOption, initialSelected = [] }: UseDataViewSelectionProps) => {
+  const [ selected, setSelected ] = useState<any[]>(initialSelected);
 
   const onSelect = (isSelecting: boolean, items?: any[] | any) => {
-    isSelecting ?
+    isSelecting && items ?
       setSelected(prev => {
         const newSelectedItems = [ ...prev ];
         (Array.isArray(items) ? items : [ items ]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
@@ -22,7 +21,7 @@ export const useDataViewSelection = (props: UseDataViewSelectionProps) => {
       : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [ items ]).some(item => matchOption(item, prevSelected))) : []);
   };
   
-  const isSelected = (item: any): boolean => props?.matchOption ? Boolean(selected.find(selected => matchOption(selected, item))) : selected.includes(item);
+  const isSelected = (item: any): boolean => Boolean(selected.find(selected => matchOption(selected, item)));
 
   return {
     selected,

package/src/InternalContext/InternalContext.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom'; 
+import { InternalContextProvider, useInternalContext, DataViewSelection } from './InternalContext';
+
+describe('InternalContext', () => {
+  const mockSelection: DataViewSelection = {
+    onSelect: jest.fn(),
+    isSelected: jest.fn(),
+    isSelectDisabled: jest.fn(),
+  };
+
+  test('should provide context value and allow consuming it', () => {
+    const TestComponent = () => {
+      const { selection } = useInternalContext();
+      
+      return (
+        <div>
+          <button onClick={() => selection?.onSelect(true, [ 'item1' ])}>Select item</button>
+          <span>{selection?.isSelected('item1') ? 'Selected' : 'Not selected'}</span>
+        </div>
+      );
+    };
+
+    const { getByText } = render(
+      <InternalContextProvider selection={mockSelection}>
+        <TestComponent />
+      </InternalContextProvider>
+    );
+
+    fireEvent.click(getByText('Select item'));
+    expect(mockSelection.onSelect).toHaveBeenCalledWith(true, [ 'item1' ]);
+  });
+
+  test('should handle selection state correctly', () => {
+    const mockSelectionState = {
+      ...mockSelection,
+      isSelected: jest.fn((item) => item === 'item1'),
+    };
+
+    const TestComponent = () => {
+      const { selection } = useInternalContext();
+
+      return (
+        <div>
+          <span>{selection?.isSelected('item1') ? 'Item 1 is selected' : 'Item 1 is not selected'}</span>
+          <span>{selection?.isSelected('item2') ? 'Item 2 is selected' : 'Item 2 is not selected'}</span>
+        </div>
+      );
+    };
+
+    const { getByText } = render(
+      <InternalContextProvider selection={mockSelectionState}>
+        <TestComponent />
+      </InternalContextProvider>
+    );
+
+    expect(getByText('Item 1 is selected')).toBeInTheDocument();
+    expect(getByText('Item 2 is not selected')).toBeInTheDocument();
+  });
+
+  test('should handle selection disabled correctly', () => {
+    const mockSelectionWithDisabled = {
+      ...mockSelection,
+      isSelectDisabled: jest.fn((item) => item === 'item3'),
+    };
+
+    const TestComponent = () => {
+      const { selection } = useInternalContext();
+
+      return (
+        <div>
+          <span>{selection?.isSelectDisabled?.('item3') ? 'Item 3 is disabled' : 'Item 3 is enabled'}</span>
+          <span>{selection?.isSelectDisabled?.('item1') ? 'Item 1 is disabled' : 'Item 1 is enabled'}</span>
+        </div>
+      );
+    };
+
+    const { getByText } = render(
+      <InternalContextProvider selection={mockSelectionWithDisabled}>
+        <TestComponent />
+      </InternalContextProvider>
+    );
+
+    expect(getByText('Item 3 is disabled')).toBeInTheDocument();
+    expect(getByText('Item 1 is enabled')).toBeInTheDocument();
+  });
+});

package/src/InternalContext/InternalContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+
+export interface DataViewSelection {
+  /** Called when the selection of items changes */
+  onSelect: (isSelecting: boolean, items?: any[] | any) => void;  // eslint-disable-line @typescript-eslint/no-explicit-any
+  /** Checks if a specific item is currently selected */
+  isSelected: (item: any) => boolean;  // eslint-disable-line @typescript-eslint/no-explicit-any
+  /** Determines if selection is disabled for a given item */
+  isSelectDisabled?: (item: any) => boolean;  // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export interface InternalContextValue {
+  selection?: DataViewSelection;
+}
+
+export const InternalContext = createContext<InternalContextValue>({
+  selection: undefined
+});
+
+export type InternalProviderProps = PropsWithChildren<InternalContextValue>
+
+export const InternalContextProvider: React.FC<InternalProviderProps> = ({
+  children,
+  selection
+}) => (
+  <InternalContext.Provider
+    value={{ selection }}
+  >
+    {children}
+  </InternalContext.Provider>
+);
+
+export const useInternalContext = () => useContext(InternalContext);
+
+export default InternalContext;

package/src/InternalContext/index.ts

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

package/src/index.ts

@@ -1,8 +1,17 @@
 // this file is autogenerated by generate-index.js, modifying it manually will have no effect
+
+export { default as InternalContext } from './InternalContext';
+export * from './InternalContext';
 export * from './Hooks';
 
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
+
 export { default as DataView } from './DataView';
 export * from './DataView';