From 3b0787be8b069a606032512748f1582948998ab5 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 14 May 2024 13:18:05 +0100
Subject: [PATCH] DataViews: Expand typing more components

---
 .../src/{pagination.js => pagination.tsx}     | 35 +++++++++++++++----
 ...ckbox.js => single-selection-checkbox.tsx} | 17 ++++++++-
 packages/dataviews/src/view-list.tsx          |  2 +-
 3 files changed, 45 insertions(+), 9 deletions(-)
 rename packages/dataviews/src/{pagination.js => pagination.tsx} (75%)
 rename packages/dataviews/src/{single-selection-checkbox.js => single-selection-checkbox.tsx} (81%)

diff --git a/packages/dataviews/src/pagination.js b/packages/dataviews/src/pagination.tsx
similarity index 75%
rename from packages/dataviews/src/pagination.js
rename to packages/dataviews/src/pagination.tsx
index a1e3c644cb5ba3..da37eb99313799 100644
--- a/packages/dataviews/src/pagination.js
+++ b/packages/dataviews/src/pagination.tsx
@@ -10,14 +10,29 @@ import { createInterpolateElement, memo } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+interface PaginationProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+}
+
 const Pagination = memo( function Pagination( {
 	view,
 	onChangeView,
 	paginationInfo: { totalItems = 0, totalPages },
-} ) {
+}: PaginationProps ) {
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+	const currentPage = view.page ?? 1;
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
@@ -43,12 +58,15 @@ const Pagination = memo( function Pagination( {
 							CurrentPageControl: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page }
+									value={ view.page?.toString() }
 									options={ Array.from(
 										Array( totalPages )
 									).map( ( _, i ) => {
 										const page = i + 1;
-										return { value: page, label: page };
+										return {
+											value: page.toString(),
+											label: page.toString(),
+										};
 									} ) }
 									onChange={ ( newValue ) => {
 										onChangeView( {
@@ -66,9 +84,12 @@ const Pagination = memo( function Pagination( {
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
 						onClick={ () =>
-							onChangeView( { ...view, page: view.page - 1 } )
+							onChangeView( {
+								...view,
+								page: currentPage - 1,
+							} )
 						}
-						disabled={ view.page === 1 }
+						disabled={ currentPage === 1 }
 						__experimentalIsFocusable
 						label={ __( 'Previous page' ) }
 						icon={ chevronLeft }
@@ -78,9 +99,9 @@ const Pagination = memo( function Pagination( {
 					/>
 					<Button
 						onClick={ () =>
-							onChangeView( { ...view, page: view.page + 1 } )
+							onChangeView( { ...view, page: currentPage + 1 } )
 						}
-						disabled={ view.page >= totalPages }
+						disabled={ currentPage >= totalPages }
 						__experimentalIsFocusable
 						label={ __( 'Next page' ) }
 						icon={ chevronRight }
diff --git a/packages/dataviews/src/single-selection-checkbox.js b/packages/dataviews/src/single-selection-checkbox.tsx
similarity index 81%
rename from packages/dataviews/src/single-selection-checkbox.js
rename to packages/dataviews/src/single-selection-checkbox.tsx
index 482b5014b2e3f8..aad77161359efb 100644
--- a/packages/dataviews/src/single-selection-checkbox.js
+++ b/packages/dataviews/src/single-selection-checkbox.tsx
@@ -4,6 +4,21 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import type { Data, Field, Item } from './types';
+
+interface SingleSelectionCheckboxProps {
+	selection: string[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	item: Item;
+	data: Data;
+	getItemId: ( item: Item ) => string;
+	primaryField?: Field;
+	disabled: boolean;
+}
+
 export default function SingleSelectionCheckbox( {
 	selection,
 	onSelectionChange,
@@ -12,7 +27,7 @@ export default function SingleSelectionCheckbox( {
 	getItemId,
 	primaryField,
 	disabled,
-} ) {
+}: SingleSelectionCheckboxProps ) {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	let selectionLabel;
diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
index 203707e0c3ccf1..c61960d88c4169 100644
--- a/packages/dataviews/src/view-list.tsx
+++ b/packages/dataviews/src/view-list.tsx
@@ -50,7 +50,7 @@ interface ListViewProps {
 	id: string;
 	isLoading: boolean;
 	onSelectionChange: ( selection: Item[] ) => void;
-	selection: Item[];
+	selection: string[];
 	view: ViewListType;
 }