Update dataviews package version to latest

client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/hooks/use-managed-sites-map.ts

@@ -14,10 +14,6 @@ export default function useManagedSitesMap( { size = 100 }: Props ) {
 		isPartnerOAuthTokenLoaded: false,
 		searchQuery: '',
 		currentPage: 1,
-		sort: {
-			field: '',
-			direction: '',
-		},
 		perPage: size,
 		agencyId,
 		filter: {

client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/table-content.tsx

@@ -1,19 +1,24 @@
-import { useState, useEffect } from 'react';
+import { filterSortAndPaginate } from '@wordpress/dataviews';
+import { useMemo, useState, useEffect } from 'react';
 import { initialDataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
 import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews';
 import { SiteItem } from './wpcom-sites-table';
-import type { DataViewsColumn } from '../../items-dashboard/items-dataviews/interfaces';
+import type { Field } from '@wordpress/dataviews';
 
 interface Props {
 	items: SiteItem[];
-	fields: DataViewsColumn[];
+	fields: Field< any >[];
 }
 
 export default function WPCOMSitesTableContent( { items, fields }: Props ) {
 	const [ dataViewsState, setDataViewsState ] = useState( initialDataViewsState );
 
+	const { data, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( items, dataViewsState, fields );
+	}, [ items, dataViewsState, fields ] );
+
 	useEffect( () => {
-		if ( items.length ) {
+		if ( data.length ) {
 			const handleRowClick = ( event: Event ) => {
 				const target = event.target as HTMLElement;
 
@@ -51,22 +56,20 @@ export default function WPCOMSitesTableContent( { items, fields }: Props ) {
 				}
 			};
 		}
-	}, [ dataViewsState, items ] );
+	}, [ dataViewsState, data ] );
 
 	return (
 		<ItemsDataViews
 			data={ {
-				items,
+				items: data,
 				fields,
 				getItemId: ( item ) => `${ item.id }`,
-				pagination: {
-					totalItems: 1,
-					totalPages: 1,
-				},
+				pagination: paginationInfo,
 				enableSearch: false,
 				actions: [],
 				dataViewsState: dataViewsState,
 				setDataViewsState: setDataViewsState,
+				defaultLayouts: { table: {} },
 			} }
 		/>
 	);

client/a8c-for-agencies/components/add-new-site-button/import-from-wpcom-modal/wpcom-sites-table.tsx

@@ -55,10 +55,6 @@ export default function WPCOMSitesTable( {
 		isPartnerOAuthTokenLoaded: false,
 		searchQuery: '',
 		currentPage: 1,
-		sort: {
-			field: '',
-			direction: '',
-		},
 		perPage: 1,
 		agencyId,
 		filter: {
@@ -120,7 +116,7 @@ export default function WPCOMSitesTable( {
 				? [
 						{
 							id: 'site',
-							header: (
+							label: (
 								<div>
 									<CheckboxControl
 										label={ translate( 'Site' ).toUpperCase() }
@@ -146,15 +142,14 @@ export default function WPCOMSitesTable( {
 									<span>{ item.site }</span>
 								</div>
 							),
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 				  ]
 				: [
 						{
 							id: 'site',
-							header: (
+							label: (
 								<div>
 									<CheckboxControl
 										label={ translate( 'Site' ).toUpperCase() }
@@ -175,26 +170,23 @@ export default function WPCOMSitesTable( {
 									disabled={ false }
 								/>
 							),
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 						{
 							id: 'date',
-							header: translate( 'Date' ).toUpperCase(),
+							label: translate( 'Date' ).toUpperCase(),
 							getValue: () => '-',
 							render: ( { item }: { item: SiteItem } ) =>
 								new Date( item.date ).toLocaleDateString(),
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
 						{
 							id: 'type',
-							header: translate( 'Type' ).toUpperCase(),
+							label: translate( 'Type' ).toUpperCase(),
 							getValue: () => '-',
 							render: ( { item }: { item: SiteItem } ) => <TypeIcon siteId={ item.id } />,
-							width: '100%',
 							enableHiding: false,
 							enableSorting: false,
 						},
@@ -207,6 +199,8 @@ export default function WPCOMSitesTable( {
 			{ isPending ? (
 				<WPCOMSitesTablePlaceholder />
 			) : (
+				// @ts-expect-error the error is because field.label types do not admit JSX.Elements.
+				// To remove when this is using [email protected]
 				<WPCOMSitesTableContent items={ items } fields={ fields } />
 			) }
 		</div>

client/a8c-for-agencies/components/items-dashboard/constants.ts

@@ -14,6 +14,5 @@ export const initialDataViewsState: DataViewsState = {
 	perPage: 50,
 	page: 1,
 	search: '',
-	hiddenFields: [],
 	layout: {},
 };

client/a8c-for-agencies/components/items-dashboard/items-dataviews/index.tsx

@@ -4,7 +4,8 @@ import { useTranslate } from 'i18n-calypso';
 import { ReactNode, useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { DataViews } from 'calypso/components/dataviews';
-import { ItemsDataViewsType, DataViewsColumn } from './interfaces';
+import { ItemsDataViewsType } from './interfaces';
+import type { Field } from '@wordpress/dataviews';
 
 import './style.scss';
 
@@ -23,26 +24,27 @@ const getIdByPath = ( item: object, path: string ) => {
 /**
  * Create an item column for the DataViews component
  * @param id
- * @param header
+ * @param label
  * @param displayField
  * @param getValue
  * @param isSortable
  * @param canHide
  */
 export const createItemColumn = (
 	id: string,
-	header: ReactNode,
+	label: ReactNode,
 	displayField: () => ReactNode,
 	getValue: () => undefined,
 	isSortable: boolean = false,
 	canHide: boolean = false
-): DataViewsColumn => {
+): Field< any > => {
 	return {
 		id,
 		enableSorting: isSortable,
 		enableHiding: canHide,
 		getValue,
-		header,
+		// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
+		label,
 		render: displayField,
 	};
 };
@@ -64,9 +66,7 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 			! scrollContainerRef.current ||
 			previousDataViewsState?.type !== data.dataViewsState.type
 		) {
-			scrollContainerRef.current = document.querySelector(
-				'.dataviews-view-list, .dataviews-view-table-wrapper'
-			) as HTMLElement;
+			scrollContainerRef.current = document.querySelector( '.dataviews-view-list' ) as HTMLElement;
 		}
 
 		if ( ! previousDataViewsState?.selectedItem && data.dataViewsState.selectedItem ) {
@@ -85,12 +85,13 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 	return (
 		<div className={ className }>
 			<DataViews
-				data={ data.items }
-				paginationInfo={ data.pagination }
-				fields={ data.fields }
+				data={ data.items ?? [] }
 				view={ data.dataViewsState }
+				onChangeView={ ( newView ) => data.setDataViewsState( () => newView ) }
+				fields={ data.fields }
 				search={ data?.enableSearch ?? true }
 				searchLabel={ data.searchLabel ?? translate( 'Search' ) }
+				actions={ data.actions }
 				getItemId={
 					data.getItemId ??
 					( ( item: any ) => {
@@ -99,11 +100,12 @@ const ItemsDataViews = ( { data, isLoading = false, className }: ItemsDataViewsP
 						return item.id;
 					} )
 				}
-				onSelectionChange={ data.onSelectionChange }
-				onChangeView={ data.setDataViewsState }
-				supportedLayouts={ [ 'table' ] }
-				actions={ data.actions }
 				isLoading={ isLoading }
+				paginationInfo={ data.pagination }
+				defaultLayouts={ data.defaultLayouts }
+				selection={ data.selection }
+				onChangeSelection={ data.onSelectionChange }
+				header={ data.header }
 			/>
 			{ dataviewsWrapper &&
 				ReactDOM.createPortal(