DataViews: Type the ViewList component

packages/dataviews/src/types.ts

@@ -3,8 +3,6 @@
  */
 import type { ReactNode } from 'react';
 
-type Item = Record< string, any >;
-
 interface Option {
 	value: any;
 	label: string;
@@ -17,6 +15,8 @@ interface filterByConfig {
 
 type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll';
 
+export type Item = Record< string, any >;
+
 export interface Field {
 	/**
 	 * The unique identifier of the field.
@@ -101,7 +101,7 @@ export interface Filter {
 	value: any;
 }
 
-export interface View {
+interface ViewBase {
 	/**
 	 * The layout of the view.
 	 */
@@ -141,4 +141,26 @@ export interface View {
 	 * The number of items per page
 	 */
 	perPage?: number;
+
+	/**
+	 * The hidden fields.
+	 */
+	hiddenFields: string[];
+}
+export interface ViewList extends ViewBase {
+	type: 'list';
+
+	layout: {
+		/**
+		 * The field to use as the primary field.
+		 */
+		primaryField: string;
+
+		/**
+		 * The field to use as the media field.
+		 */
+		mediaField: string;
+	};
 }
+
+export type View = ViewList | ViewBase;

packages/dataviews/src/view-list.js → packages/dataviews/src/view-list.tsx

@@ -21,6 +21,33 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type {
+	Data,
+	Item,
+	NormalizedField,
+	ViewList as ViewListType,
+} from './types';
+
+interface ListViewProps {
+	view: ViewListType;
+	fields: NormalizedField[];
+	data: Data;
+	isLoading: boolean;
+	getItemId: ( item: Item ) => string;
+	onSelectionChange: ( selection: Item[] ) => void;
+	selection: Item[];
+	id: string;
+}
+
+interface ListViewItemProps {
+	id: string;
+	item: Item;
+	isSelected: boolean;
+	onSelect: ( item: Item ) => void;
+	mediaField?: NormalizedField;
+	primaryField?: NormalizedField;
+	visibleFields: NormalizedField[];
+}
 
 const {
 	useCompositeStoreV2: useCompositeStore,
@@ -37,8 +64,8 @@ function ListItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
-} ) {
-	const itemRef = useRef( null );
+}: ListViewItemProps ) {
+	const itemRef = useRef< HTMLElement >( null );
 	const labelId = `${ id }-label`;
 	const descriptionId = `${ id }-description`;
 
@@ -120,16 +147,17 @@ function ListItem( {
 	);
 }
 
-export default function ViewList( {
-	view,
-	fields,
-	data,
-	isLoading,
-	getItemId,
-	onSelectionChange,
-	selection,
-	id: preferredId,
-} ) {
+export default function ViewList( props: ListViewProps ) {
+	const {
+		view,
+		fields,
+		data,
+		isLoading,
+		getItemId,
+		onSelectionChange,
+		selection,
+		id: preferredId,
+	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list', preferredId );
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( item.id )
@@ -150,12 +178,12 @@ export default function ViewList( {
 	);
 
 	const onSelect = useCallback(
-		( item ) => onSelectionChange( [ item ] ),
+		( item: Item ) => onSelectionChange( [ item ] ),
 		[ onSelectionChange ]
 	);
 
 	const getItemDomId = useCallback(
-		( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),
+		( item?: Item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : '' ),
 		[ baseId, getItemId ]
 	);
 

packages/dataviews/tsconfig.json

@@ -3,7 +3,9 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types"
+		"declarationDir": "build-types",
+		"skipLibCheck": true,
+		"checkJs": false
 	},
 	"references": [
 		{ "path": "../a11y" },
@@ -16,5 +18,5 @@
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" }
 	],
-	"include": [ "src/**/*.ts", "src/**/*.tsx" ]
+	"include": [ "src" ]
 }