@wordpress/dataviews 1.1.0 → 2.0.0

package/src/{view-table.js → view-table.tsx}

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import type { ReactNode, Ref, PropsWithoutRef, RefAttributes } from 'react';
 
 /**
  * WordPress dependencies
@@ -33,11 +34,24 @@ import SingleSelectionCheckbox from './single-selection-checkbox';
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
 import { sanitizeOperators } from './utils';
-import { SORTING_DIRECTIONS } from './constants';
+import {
+	SORTING_DIRECTIONS,
+	sortArrows,
+	sortLabels,
+	sortValues,
+} from './constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
 } from './bulk-actions';
+import type {
+	Action,
+	AnyItem,
+	NormalizedField,
+	SortDirection,
+	ViewTable as ViewTableType,
+	ViewTableProps,
+} from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -48,7 +62,35 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-function WithDropDownMenuSeparators( { children } ) {
+interface HeaderMenuProps< Item extends AnyItem > {
+	field: NormalizedField< Item >;
+	view: ViewTableType;
+	onChangeView: ( view: ViewTableType ) => void;
+	onHide: ( field: NormalizedField< Item > ) => void;
+	setOpenedFilter: ( fieldId: string ) => void;
+}
+
+interface BulkSelectionCheckboxProps< Item extends AnyItem > {
+	selection: string[];
+	onSelectionChange: ( items: Item[] ) => void;
+	data: Item[];
+	actions: Action< Item >[];
+}
+
+interface TableRowProps< Item extends AnyItem > {
+	hasBulkActions: boolean;
+	item: Item;
+	actions: Action< Item >[];
+	id: string;
+	visibleFields: NormalizedField< Item >[];
+	primaryField?: NormalizedField< Item >;
+	selection: string[];
+	getItemId: ( item: Item ) => string;
+	onSelectionChange: ( items: Item[] ) => void;
+	data: Item[];
+}
+
+function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
 	return Children.toArray( children )
 		.filter( Boolean )
 		.map( ( child, i ) => (
@@ -59,11 +101,15 @@ function WithDropDownMenuSeparators( { children } ) {
 		) );
 }
 
-const sortArrows = { asc: '↑', desc: '↓' };
-
-const HeaderMenu = forwardRef( function HeaderMenu(
-	{ field, view, onChangeView, onHide, setOpenedFilter },
-	ref
+const _HeaderMenu = forwardRef( function HeaderMenu< Item extends AnyItem >(
+	{
+		field,
+		view,
+		onChangeView,
+		onHide,
+		setOpenedFilter,
+	}: HeaderMenuProps< Item >,
+	ref: Ref< HTMLButtonElement >
 ) {
 	const isHidable = field.enableHiding !== false;
 	const isSortable = field.enableSorting !== false;
@@ -92,9 +138,9 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 					variant="tertiary"
 				>
 					{ field.header }
-					{ isSorted && (
+					{ view.sort && isSorted && (
 						<span aria-hidden="true">
-							{ isSorted && sortArrows[ view.sort.direction ] }
+							{ sortArrows[ view.sort.direction ] }
 						</span>
 					) }
 				</Button>
@@ -104,9 +150,10 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 			<WithDropDownMenuSeparators>
 				{ isSortable && (
 					<DropdownMenuGroup>
-						{ Object.entries( SORTING_DIRECTIONS ).map(
-							( [ direction, info ] ) => {
+						{ SORTING_DIRECTIONS.map(
+							( direction: SortDirection ) => {
 								const isChecked =
+									view.sort &&
 									isSorted &&
 									view.sort.direction === direction;
 
@@ -134,7 +181,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 										} }
 									>
 										<DropdownMenuItemLabel>
-											{ info.label }
+											{ sortLabels[ direction ] }
 										</DropdownMenuItemLabel>
 									</DropdownMenuRadioItem>
 								);
@@ -191,16 +238,24 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 	);
 } );
 
-function BulkSelectionCheckbox( {
+// @ts-expect-error Lift the `Item` type argument through the forwardRef.
+const HeaderMenu: < Item extends AnyItem >(
+	props: PropsWithoutRef< HeaderMenuProps< Item > > &
+		RefAttributes< HTMLButtonElement >
+) => ReturnType< typeof _HeaderMenu > = _HeaderMenu;
+
+function BulkSelectionCheckbox< Item extends AnyItem >( {
 	selection,
 	onSelectionChange,
 	data,
 	actions,
-} ) {
+}: BulkSelectionCheckboxProps< Item > ) {
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
 			return actions.some(
-				( action ) => action.supportsBulk && action.isEligible( item )
+				( action ) =>
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
 			);
 		} );
 	}, [ data, actions ] );
@@ -210,7 +265,7 @@ function BulkSelectionCheckbox( {
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
 			checked={ areAllSelected }
-			indeterminate={ ! areAllSelected && selection.length }
+			indeterminate={ ! areAllSelected && !! selection.length }
 			onChange={ () => {
 				if ( areAllSelected ) {
 					onSelectionChange( [] );
@@ -225,7 +280,7 @@ function BulkSelectionCheckbox( {
 	);
 }
 
-function TableRow( {
+function TableRow< Item extends AnyItem >( {
 	hasBulkActions,
 	item,
 	actions,
@@ -236,7 +291,7 @@ function TableRow( {
 	getItemId,
 	onSelectionChange,
 	data,
-} ) {
+}: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
 	const isSelected = selection.includes( id );
 
@@ -257,7 +312,7 @@ function TableRow( {
 
 	return (
 		<tr
-			className={ classnames( 'dataviews-view-table__row', {
+			className={ clsx( 'dataviews-view-table__row', {
 				'is-selected': hasPossibleBulkAction && isSelected,
 				'is-hovered': isHovered,
 				'has-bulk-actions': hasPossibleBulkAction,
@@ -270,7 +325,7 @@ function TableRow( {
 			onClick={ () => {
 				if (
 					! isTouchDevice.current &&
-					document.getSelection().type !== 'Range'
+					document.getSelection()?.type !== 'Range'
 				) {
 					if ( ! isSelected ) {
 						onSelectionChange(
@@ -305,7 +360,6 @@ function TableRow( {
 				>
 					<div className="dataviews-view-table__cell-content-wrapper">
 						<SingleSelectionCheckbox
-							id={ id }
 							item={ item }
 							selection={ selection }
 							onSelectionChange={ onSelectionChange }
@@ -327,7 +381,7 @@ function TableRow( {
 					} }
 				>
 					<div
-						className={ classnames(
+						className={ clsx(
 							'dataviews-view-table__cell-content-wrapper',
 							{
 								'dataviews-view-table__primary-field':
@@ -361,21 +415,24 @@ function TableRow( {
 	);
 }
 
-function ViewTable( {
-	view,
-	onChangeView,
-	fields,
+function ViewTable< Item extends AnyItem >( {
 	actions,
 	data,
+	fields,
 	getItemId,
 	isLoading = false,
-	selection,
+	onChangeView,
 	onSelectionChange,
+	selection,
 	setOpenedFilter,
-} ) {
-	const headerMenuRefs = useRef( new Map() );
-	const headerMenuToFocusRef = useRef();
-	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState();
+	view,
+}: ViewTableProps< Item > ) {
+	const headerMenuRefs = useRef<
+		Map< string, { node: HTMLButtonElement; fallback: string } >
+	>( new Map() );
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
+		useState< HTMLButtonElement >();
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
 
 	useEffect( () => {
@@ -393,13 +450,15 @@ function ViewTable( {
 		// Clearing out the focus directive is necessary to make sure
 		// future renders don't cause unexpected focus jumps.
 		headerMenuToFocusRef.current = nextHeaderMenuToFocus;
-		setNextHeaderMenuToFocus();
+		setNextHeaderMenuToFocus( undefined );
 		return;
 	}
 
-	const onHide = ( field ) => {
+	const onHide = ( field: NormalizedField< Item > ) => {
 		const hidden = headerMenuRefs.current.get( field.id );
-		const fallback = headerMenuRefs.current.get( hidden.fallback );
+		const fallback = hidden
+			? headerMenuRefs.current.get( hidden.fallback )
+			: undefined;
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 	const visibleFields = fields.filter(
@@ -408,7 +467,6 @@ function ViewTable( {
 			! [ view.layout.mediaField ].includes( field.id )
 	);
 	const hasData = !! data?.length;
-	const sortValues = { asc: 'ascending', desc: 'descending' };
 
 	const primaryField = fields.find(
 		( field ) => field.id === view.layout.primaryField
@@ -450,8 +508,9 @@ function ViewTable( {
 								} }
 								data-field-id={ field.id }
 								aria-sort={
-									view.sort?.field === field.id &&
-									sortValues[ view.sort.direction ]
+									view.sort?.field === field.id
+										? sortValues[ view.sort.direction ]
+										: undefined
 								}
 								scope="col"
 							>
@@ -504,7 +563,7 @@ function ViewTable( {
 								item={ item }
 								hasBulkActions={ hasBulkActions }
 								actions={ actions }
-								id={ getItemId( item ) || index }
+								id={ getItemId( item ) || index.toString() }
 								visibleFields={ visibleFields }
 								primaryField={ primaryField }
 								selection={ selection }
@@ -516,7 +575,7 @@ function ViewTable( {
 				</tbody>
 			</table>
 			<div
-				className={ classnames( {
+				className={ clsx( {
 					'dataviews-loading': isLoading,
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }

package/tsconfig.json

@@ -3,18 +3,17 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types"
+		"declarationDir": "build-types",
+		"checkJs": false
 	},
 	"references": [
-		{ "path": "../a11y" },
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
-		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" }
 	],
-	"include": [ "src/**/*.ts", "src/**/*.tsx" ]
+	"include": [ "src" ]
 }