@patternfly/react-data-view 7.0.0-prerelease.1 → 7.0.0-prerelease.3

package/src/Hooks/pagination.test.tsx

@@ -54,84 +54,4 @@ describe('useDataViewPagination', () => {
     })
   });
 
-  it('should read pagination state from URL', () => {
-    const mockSearchParams = new URLSearchParams('page=2&perPage=10');
-    const { result } = renderHook(() =>
-      useDataViewPagination({
-        searchParams: mockSearchParams,
-        setSearchParams: jest.fn(),
-        page: 1,
-        perPage: 5,
-      })
-    );
-
-    expect(result.current).toEqual({
-      onPerPageSelect: expect.any(Function),
-      onSetPage: expect.any(Function),
-      page: 2,
-      perPage: 10,
-    });
-  });
-
-  it('should set pagination state in URL when page changes', () => {
-    const mockSetSearchParams = jest.fn();
-    const { result } = renderHook(() =>
-      useDataViewPagination({
-        searchParams: new URLSearchParams(),
-        setSearchParams: mockSetSearchParams,
-        page: 1,
-        perPage: 5,
-      })
-    );
-
-    expect(mockSetSearchParams).toHaveBeenNthCalledWith(
-      1, 
-      new URLSearchParams('page=1&perPage=5')
-    );
-
-    act(() => {
-      result.current.onSetPage(undefined, 4);
-    });
-
-    expect(mockSetSearchParams).toHaveBeenNthCalledWith(
-      2,
-      new URLSearchParams('page=4&perPage=5')
-    );
-  });
-
-  it('should set pagination state in URL when perPage changes', () => {
-    const mockSetSearchParams = jest.fn();
-    const { result } = renderHook(() =>
-      useDataViewPagination({
-        searchParams: new URLSearchParams('page=2'),
-        setSearchParams: mockSetSearchParams,
-        page: 1,
-        perPage: 5,
-      })
-    );
-
-    act(() => {
-      result.current.onPerPageSelect(undefined, 20);
-    });
-
-    expect(mockSetSearchParams).toHaveBeenCalledWith(
-      new URLSearchParams('page=1&perPage=20')
-    );
-  });
-
-  it('should initialize URL with default values if not present', () => {
-    const mockSetSearchParams = jest.fn();
-    renderHook(() =>
-      useDataViewPagination({
-        searchParams: new URLSearchParams(),
-        setSearchParams: mockSetSearchParams,
-        page: 1,
-        perPage: 5,
-      })
-    );
-
-    expect(mockSetSearchParams).toHaveBeenCalledWith(
-      new URLSearchParams('page=1&perPage=5')
-    );
-  });
 });

package/src/Hooks/pagination.ts

@@ -1,9 +1,4 @@
-import { useState, useEffect } from "react";
-
-export enum PaginationParams {
-  PAGE = 'page',
-  PER_PAGE = 'perPage'
-}
+import { useEffect, useState } from "react";
 
 export interface UseDataViewPaginationProps {
   /** Initial page */
@@ -14,11 +9,20 @@ export interface UseDataViewPaginationProps {
   searchParams?: URLSearchParams;
   /** Function to set search parameters */
   setSearchParams?: (params: URLSearchParams) => void;
+  /** Custom URL parameter name for page */
+  pageParam?: string;
+  /** Custom URL parameter name for per page */
+  perPageParam?: string;
 }
 
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
   /** Current page number */
-  page: number;
+    page: number;
+}
+
+export enum PaginationParams {
+  PAGE = 'page',
+  PER_PAGE = 'perPage'
 }
 
 export const useDataViewPagination = ({
@@ -26,17 +30,19 @@ export const useDataViewPagination = ({
   perPage,
   searchParams,
   setSearchParams,
+  pageParam = PaginationParams.PAGE,
+  perPageParam = PaginationParams.PER_PAGE,
 }: UseDataViewPaginationProps) => {
   const [ state, setState ] = useState({
-    page: parseInt(searchParams?.get(PaginationParams.PAGE) || `${page}`),
-    perPage: parseInt(searchParams?.get(PaginationParams.PER_PAGE) || `${perPage}`),
+    page: parseInt(searchParams?.get(pageParam) || `${page}`),
+    perPage: parseInt(searchParams?.get(perPageParam) || `${perPage}`),
   });
 
   const updateSearchParams = (page: number, perPage: number) => {
     if (searchParams && setSearchParams) {
       const params = new URLSearchParams(searchParams);
-      params.set(PaginationParams.PAGE, `${page}`);
-      params.set(PaginationParams.PER_PAGE, `${perPage}`);
+      params.set(pageParam, `${page}`);
+      params.set(perPageParam, `${perPage}`);
       setSearchParams(params);
     }
   };
@@ -49,13 +55,13 @@ export const useDataViewPagination = ({
 
   useEffect(() => {
     // Listen on URL params changes
-    const currentPage = parseInt(searchParams?.get(PaginationParams.PAGE) || `${state.page}`);
-    const currentPerPage = parseInt(searchParams?.get(PaginationParams.PER_PAGE) || `${state.perPage}`);
+    const currentPage = parseInt(searchParams?.get(pageParam) || `${state.page}`);
+    const currentPerPage = parseInt(searchParams?.get(perPageParam) || `${state.perPage}`);
     if (currentPage !== state.page || currentPerPage !== state.perPage) {
       setState({ page: currentPage, perPage: currentPerPage });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ searchParams ]);
+  }, [ searchParams?.toString() ]);
 
   const onPerPageSelect = (
     _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
@@ -71,8 +77,8 @@ export const useDataViewPagination = ({
   ) => {
     updateSearchParams(newPage, state.perPage);
     setState(prev => ({ ...prev, page: newPage }));
-  };
-
+  }
+  
   return {
     ...state,
     onPerPageSelect,

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,89 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom'; 
+import { useInternalContext, DataViewSelection } from './InternalContext';
+import { DataView } from '../DataView';
+
+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(
+      <DataView selection={mockSelection}>
+        <TestComponent />
+      </DataView>
+    );
+
+    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(
+      <DataView selection={mockSelectionState}>
+        <TestComponent />
+      </DataView>
+    );
+
+    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(
+      <DataView selection={mockSelectionWithDisabled}>
+        <TestComponent />
+      </DataView>
+    );
+
+    expect(getByText('Item 3 is disabled')).toBeInTheDocument();
+    expect(getByText('Item 1 is enabled')).toBeInTheDocument();
+  });
+});

package/src/InternalContext/InternalContext.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
+import { DataViewState } from '../DataView';
+
+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 InternalContextProps {
+  /** Data selection props */
+  selection?: DataViewSelection;
+  /** 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,
+  isSelectable: false,
+});
+
+export type InternalProviderProps = PropsWithChildren<InternalContextProps>
+
+export const InternalContextProvider: React.FC<InternalProviderProps> = ({
+  children,
+  selection,
+  activeState
+}) => {
+  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);
+
+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,26 @@
 // 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 DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+
+export { default as DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
+
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
+
+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';