@patternfly/react-data-view 6.1.0-prerelease.1 → 6.1.0

package/src/Hooks/pagination.ts

@@ -1,31 +1,88 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export interface UseDataViewPaginationProps {
   /** Initial page */
   page?: number;
   /** Items per page */
   perPage: number;
+  /** Current search parameters as a string */
+  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;
 }
 
+/** extends UseDataViewPaginationProps */
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
   /** Current page number */
     page: number;
 }
 
-export const useDataViewPagination = ({ page = 1, perPage }: UseDataViewPaginationProps) => { 
-  const [ state, setState ] = useState({ page, perPage });
-  
-  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => {
-    setState(prev => ({ ...prev, perPage: newPerPage }));
-  }
-  
-  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => {
+export enum PaginationParams {
+  PAGE = 'page',
+  PER_PAGE = 'perPage'
+}
+
+export const useDataViewPagination = ({
+  page = 1,
+  perPage,
+  searchParams,
+  setSearchParams,
+  pageParam = PaginationParams.PAGE,
+  perPageParam = PaginationParams.PER_PAGE,
+}: UseDataViewPaginationProps) => {
+  const [ state, setState ] = useState({
+    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(pageParam, `${page}`);
+      params.set(perPageParam, `${perPage}`);
+      setSearchParams(params);
+    }
+  };
+
+  useEffect(() => {
+    // Make sure search params are loaded or set if not present on mount
+    updateSearchParams(state.page, state.perPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Listen on URL params changes
+    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?.toString() ]);
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newPerPage: number
+  ) => {
+    updateSearchParams(1, newPerPage);
+    setState({ perPage: newPerPage, page: 1 });
+  };
+
+  const onSetPage = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newPage: number
+  ) => {
+    updateSearchParams(newPage, state.perPage);
     setState(prev => ({ ...prev, page: newPage }));
   }
   
   return {
     ...state,
     onPerPageSelect,
-    onSetPage
-  }
-}
+    onSetPage,
+  };
+};

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,18 @@
 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 = (props?: UseDataViewSelectionProps) => {
+  const [ selected, setSelected ] = useState<any[]>(props?.initialSelected ?? []);
+  const matchOption = props?.matchOption ? props.matchOption : (option, another) => (option === another);
 
   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 +22,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/Hooks/sort.test.tsx

@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewSort, UseDataViewSortProps, DataViewSortConfig, DataViewSortParams } from './sort';
+
+describe('useDataViewSort', () => {
+  const initialSort: DataViewSortConfig = { sortBy: 'name', direction: 'asc' };
+
+  it('should initialize with provided initial sort config', () => {
+    const { result } = renderHook(() => useDataViewSort({ initialSort }));
+    expect(result.current).toEqual(expect.objectContaining(initialSort));
+  });
+
+  it('should initialize with empty sort config if no initialSort is provided', () => {
+    const { result } = renderHook(() => useDataViewSort());
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: undefined, direction: 'asc' }));
+  });
+
+  it('should update sort state when onSort is called', () => {
+    const { result } = renderHook(() => useDataViewSort({ initialSort }));
+    act(() => {
+      result.current.onSort(undefined, 'age', 'desc');
+    });
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'age', direction: 'desc' }));
+  });
+
+  it('should sync with URL search params if isUrlSyncEnabled', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewSortProps = {
+      initialSort,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewSort(props));
+
+    expect(setSearchParams).toHaveBeenCalledTimes(1);
+    expect(result.current).toEqual(expect.objectContaining(initialSort));
+  });
+
+  it('should validate direction and fallback to default direction if invalid direction is provided', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set(DataViewSortParams.SORT_BY, 'name');
+    searchParams.set(DataViewSortParams.DIRECTION, 'invalid-direction');
+    const { result } = renderHook(() => useDataViewSort({ searchParams, defaultDirection: 'desc' }));
+
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'name', direction: 'desc' }));
+  });
+
+  it('should update search params when URL sync is enabled and sort changes', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewSortProps = {
+      initialSort,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewSort(props));
+    act(() => {
+      expect(setSearchParams).toHaveBeenCalledTimes(1);
+      result.current.onSort(undefined, 'priority', 'desc');
+    });
+
+    expect(setSearchParams).toHaveBeenCalledTimes(2);
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'priority', direction: 'desc' }));
+  });
+
+  it('should prioritize searchParams values', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set(DataViewSortParams.SORT_BY, 'category');
+    searchParams.set(DataViewSortParams.DIRECTION, 'desc');
+
+    const { result } = renderHook(
+      (props: UseDataViewSortProps) => useDataViewSort(props),
+      { initialProps: { initialSort, searchParams } }
+    );
+
+    expect(result.current).toEqual(expect.objectContaining({
+      sortBy: 'category',
+      direction: 'desc',
+    }));
+  });
+});

package/src/Hooks/sort.ts

@@ -0,0 +1,87 @@
+import { ISortBy } from "@patternfly/react-table";
+import { useState, useEffect, useMemo } from "react";
+
+export enum DataViewSortParams {
+  SORT_BY = 'sortBy',
+  DIRECTION = 'direction'
+};
+
+const validateDirection = (direction: string | null | undefined, defaultDirection: ISortBy['direction']): ISortBy['direction'] => (
+  direction === 'asc' || direction === 'desc' ? direction : defaultDirection
+);
+
+export interface DataViewSortConfig {
+  /** Attribute to sort the entries by */
+  sortBy: string | undefined;
+  /** Sort direction */
+  direction: ISortBy['direction'];
+};
+
+export interface UseDataViewSortProps {
+  /** Initial sort config */
+  initialSort?: DataViewSortConfig;
+  /** Current search parameters as a string */
+  searchParams?: URLSearchParams;
+  /** Function to set search parameters */
+  setSearchParams?: (params: URLSearchParams) => void;
+  /** Default direction */
+  defaultDirection?: ISortBy['direction'];
+  /** Sort by URL param name */
+  sortByParam?: string;
+  /** Direction URL param name */
+  directionParam?: string;
+};
+
+export const useDataViewSort = (props?: UseDataViewSortProps) => {
+  const {
+    initialSort,
+    searchParams,
+    setSearchParams,
+    defaultDirection = 'asc',
+    sortByParam = DataViewSortParams.SORT_BY,
+    directionParam = DataViewSortParams.DIRECTION
+  } = props ?? {};
+
+  const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
+
+  const [ state, setState ] = useState<DataViewSortConfig>({
+    sortBy: searchParams?.get(sortByParam) ?? initialSort?.sortBy,
+    direction: validateDirection(searchParams?.get(directionParam) as ISortBy['direction'], initialSort?.direction),
+  });
+
+  const updateSearchParams = (sortBy: string, direction: ISortBy['direction']) => {
+    if (isUrlSyncEnabled && sortBy) {
+      const params = new URLSearchParams(searchParams);
+      params.set(sortByParam, `${sortBy}`);
+      params.set(directionParam, `${direction}`);
+      setSearchParams?.(params);
+    }
+  };
+
+  useEffect(() => {
+    state.sortBy && state.direction && updateSearchParams(state.sortBy, state.direction);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const currentSortBy = searchParams?.get(sortByParam) || state.sortBy;
+    const currentDirection = searchParams?.get(directionParam) as ISortBy['direction'] || state.direction;
+    const validDirection = validateDirection(currentDirection, defaultDirection);
+    currentSortBy !== state.sortBy || validDirection !== state.direction && setState({ sortBy: currentSortBy, direction: validDirection });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ searchParams?.toString() ]);
+
+  const onSort = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newSortBy: string,
+    newSortDirection: ISortBy['direction']
+  ) => {
+    setState({ sortBy: newSortBy, direction: newSortDirection });
+    updateSearchParams(newSortBy, newSortDirection);
+  };
+
+  return {
+    ...state,
+    onSort
+  };
+};

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,52 @@
+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;
+}
+
+/** extends InternalContextProps */
+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,32 @@
 // 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 DataViewTextFilter } from './DataViewTextFilter';
+export * from './DataViewTextFilter';
+
+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 DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
+
 export { default as DataView } from './DataView';
 export * from './DataView';

package/patternfly-docs/content/extensions/data-view/about-data-view.md

@@ -1,14 +0,0 @@
----
-section: extensions
-subsection: Data view
-id: About data view
-sortValue: 1
---- 
-
-Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view) 
-
-# Data view
-
-The data view extension contains implementation of the data view component allowing to display record data in a configured layout.
-
-If you notice a bug or have a suggestion for the data view, feel free to file an issue in our [GitHub repository](https://github.com/patternfly/react-data-view/issues)! Please make sure to check if there is already a pre-existing issue before creating a new issue. 

package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md

@@ -1,31 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Data view
-# Sidenav secondary level section
-# should be the same for all markdown files
-id: Components
-# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
-source: react
-# If you use typescript, the name of the interface to display props for
-# These are found through the sourceProps function provided in patternfly-docs.source.js
-sortValue: 4
-propComponents: ['DataViewToolbar']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
----
-import { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-## Data view toolbar
-
-The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
-
-Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
-
-### Basic example
-
-```js file="./DataViewToolbarExample.tsx"
-
-```
-

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-import { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-
-export const BasicExample: React.FunctionComponent = () => (
-  <DataViewToolbar 
-    pagination={
-      <Pagination page={1} perPage={10} />
-    }
-    bulkSelect={
-      <BulkSelect
-        selectedCount={0}
-        pageCount={5}
-        onSelect={() => null}
-      />  
-    } 
-  />
-)

package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

@@ -1,77 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Data view
-# Sidenav secondary level section
-# should be the same for all markdown files
-id: Functionality
-# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
-source: react
-# If you use typescript, the name of the interface to display props for
-# These are found through the sourceProps function provided in patternfly-docs.source.js
-sortValue: 3
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
----
-import { useMemo } from 'react';
-import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
-import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
-import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
-import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-
-This is a list of functionality you can use to manage data displayed in the **data view**.
-
-# Pagination
-Allows to display data records on multiple pages and display the pagination state.
-
-### Toolbar usage
-Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
-
-### Pagination state
-
-The `useDataViewPagination` hook manages the pagination state of the data view. 
-
-**Initial values:**
-- `perPage` initial value
-- (optional) `page` initial value
-
-The retrieved values are named to match the PatternFly [pagination](/components/pagination) component props, so you can easily spread them.
-
-**Return values:**
-- current `page` number
-- `onSetPage` to modify current page
-- items `perPage` value
-- `onPerPageSelect` to modify per page value
-
-### Pagination example
-```js file="./PaginationExample.tsx"
-
-```
-
-# Selection
-Allows to select data records inside the data view and show the selection state.
-
-### Toolbar usage
-Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
-
-### Selection state
-
-The `useDataViewSelection` hook manages the selection state of the data view. 
-
-**Initial values:**
-- (optional) `initialSelected` array of record's identifiers selected by default 
-- (optional) `matchOption` function to check if given record is selected
-
-*When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.*
-
-**Return values:**
-- `selected` array of currently selected records
-- `isSelected` function returning the selection state for given record
-- `onSelect` callback to modify the selection state and accepting `isSelecting` flag indicating if records are changing to selected or deselected and `items` containing affected records 
-
-### Selection example
-
-```js file="./SelectionExample.tsx"
-
-```
-