@wordpress/dataviews 1.2.0 → 2.0.1

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -13,8 +18,9 @@ import { settings } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { SORTING_DIRECTIONS } from './constants';
+import { SORTING_DIRECTIONS, sortLabels } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
+import type { AnyItem, NormalizedField, View } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -25,7 +31,41 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
+interface ViewTypeMenuProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	supportedLayouts?: string[];
+}
+
+interface PageSizeMenuProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FieldsVisibilityMenuProps< Item extends AnyItem > {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+}
+
+interface SortMenuProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface ViewActionsProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	supportedLayouts?: string[];
+}
+
+function ViewTypeMenu( {
+	view,
+	onChangeView,
+	supportedLayouts,
+}: ViewTypeMenuProps ) {
 	let _availableViews = VIEW_LAYOUTS;
 	if ( supportedLayouts ) {
 		_availableViews = _availableViews.filter( ( _view ) =>
@@ -41,7 +81,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 			trigger={
 				<DropdownMenuItem
 					suffix={
-						<span aria-hidden="true">{ activeView.label }</span>
+						<span aria-hidden="true">{ activeView?.label }</span>
 					}
 				>
 					<DropdownMenuItemLabel>
@@ -58,11 +98,18 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						name="view-actions-available-view"
 						checked={ availableView.type === view.type }
 						hideOnClick
-						onChange={ ( e ) => {
-							onChangeView( {
-								...view,
-								type: e.target.value,
-							} );
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										layout: {},
+									} );
+							}
+							throw new Error( 'Invalid dataview' );
 						} }
 					>
 						<DropdownMenuItemLabel>
@@ -76,7 +123,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView } ) {
+function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -114,7 +161,11 @@ function PageSizeMenu( { view, onChangeView } ) {
 	);
 }
 
-function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
+function FieldsVisibilityMenu< Item extends AnyItem >( {
+	view,
+	onChangeView,
+	fields,
+}: FieldsVisibilityMenuProps< Item > ) {
 	const hidableFields = fields.filter(
 		( field ) =>
 			field.enableHiding !== false && field.id !== view.layout.mediaField
@@ -164,7 +215,11 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 	);
 }
 
-function SortMenu( { fields, view, onChangeView } ) {
+function SortMenu< Item extends AnyItem >( {
+	fields,
+	view,
+	onChangeView,
+}: SortMenuProps< Item > ) {
 	const sortableFields = fields.filter(
 		( field ) => field.enableSorting !== false
 	);
@@ -206,43 +261,41 @@ function SortMenu( { fields, view, onChangeView } ) {
 							minWidth: '220px',
 						} }
 					>
-						{ Object.entries( SORTING_DIRECTIONS ).map(
-							( [ direction, info ] ) => {
-								const isChecked =
-									currentSortedField !== undefined &&
-									sortedDirection === direction &&
-									field.id === currentSortedField.id;
+						{ SORTING_DIRECTIONS.map( ( direction ) => {
+							const isChecked =
+								currentSortedField !== undefined &&
+								sortedDirection === direction &&
+								field.id === currentSortedField.id;
 
-								const value = `${ field.id }-${ direction }`;
+							const value = `${ field.id }-${ direction }`;
 
-								return (
-									<DropdownMenuRadioItem
-										key={ value }
-										// All sorting radio items share the same name, so that
-										// selecting a sorting option automatically deselects the
-										// previously selected one, even if it is displayed in
-										// another submenu. The field and direction are passed via
-										// the `value` prop.
-										name="view-actions-sorting"
-										value={ value }
-										checked={ isChecked }
-										onChange={ () => {
-											onChangeView( {
-												...view,
-												sort: {
-													field: field.id,
-													direction,
-												},
-											} );
-										} }
-									>
-										<DropdownMenuItemLabel>
-											{ info.label }
-										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItem>
-								);
-							}
-						) }
+							return (
+								<DropdownMenuRadioItem
+									key={ value }
+									// All sorting radio items share the same name, so that
+									// selecting a sorting option automatically deselects the
+									// previously selected one, even if it is displayed in
+									// another submenu. The field and direction are passed via
+									// the `value` prop.
+									name="view-actions-sorting"
+									value={ value }
+									checked={ isChecked }
+									onChange={ () => {
+										onChangeView( {
+											...view,
+											sort: {
+												field: field.id,
+												direction,
+											},
+										} );
+									} }
+								>
+									<DropdownMenuItemLabel>
+										{ sortLabels[ direction ] }
+									</DropdownMenuItemLabel>
+								</DropdownMenuRadioItem>
+							);
+						} ) }
 					</DropdownMenu>
 				);
 			} ) }
@@ -250,12 +303,12 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-const ViewActions = memo( function ViewActions( {
+function _ViewActions< Item extends AnyItem >( {
 	fields,
 	view,
 	onChangeView,
 	supportedLayouts,
-} ) {
+}: ViewActionsProps< Item > ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -286,6 +339,9 @@ const ViewActions = memo( function ViewActions( {
 			</DropdownMenuGroup>
 		</DropdownMenu>
 	);
-} );
+}
+
+// A type assertion is used here to keep the type argument.
+const ViewActions = memo( _ViewActions ) as typeof _ViewActions;
 
 export default ViewActions;

package/src/view-grid.tsx

@@ -22,12 +22,7 @@ import { __ } from '@wordpress/i18n';
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
 import { useHasAPossibleBulkAction } from './bulk-actions';
-import type {
-	Action,
-	AnyItem,
-	NormalizedField,
-	ViewGrid as ViewGridType,
-} from './types';
+import type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';
 
 interface GridItemProps< Item extends AnyItem > {
 	selection: string[];
@@ -40,18 +35,7 @@ interface GridItemProps< Item extends AnyItem > {
 	primaryField?: NormalizedField< Item >;
 	visibleFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
-	columnFields: string[];
-}
-
-interface ViewGridProps< Item extends AnyItem > {
-	actions: Action< Item >[];
-	data: Item[];
-	fields: NormalizedField< Item >[];
-	getItemId: ( item: Item ) => string;
-	isLoading: boolean;
-	onSelectionChange: ( items: Item[] ) => void;
-	selection: string[];
-	view: ViewGridType;
+	columnFields?: string[];
 }
 
 function GridItem< Item extends AnyItem >( {
@@ -147,7 +131,7 @@ function GridItem< Item extends AnyItem >( {
 						return (
 							<FlexItem
 								key={ field.id }
-								className={ 'dataviews-view-grid__field-value' }
+								className="dataviews-view-grid__field-value"
 							>
 								{ renderedValue }
 							</FlexItem>
@@ -244,7 +228,7 @@ export default function ViewGrid< Item extends AnyItem >( {
 		<>
 			{ hasData && (
 				<Grid
-					gap={ 6 }
+					gap={ 8 }
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"

package/src/view-list.tsx

@@ -32,27 +32,10 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import type {
-	Action,
-	AnyItem,
-	NormalizedField,
-	ViewList as ViewListType,
-} from './types';
+import type { Action, AnyItem, NormalizedField, ViewListProps } from './types';
 
 import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
 
-interface ListViewProps< Item extends AnyItem > {
-	actions: Action< Item >[];
-	data: Item[];
-	fields: NormalizedField< Item >[];
-	getItemId: ( item: Item ) => string;
-	id: string;
-	isLoading: boolean;
-	onSelectionChange: ( selection: Item[] ) => void;
-	selection: string[];
-	view: ViewListType;
-}
-
 interface ListViewItemProps< Item extends AnyItem > {
 	actions: Action< Item >[];
 	id?: string;
@@ -122,6 +105,11 @@ function ListItem< Item extends AnyItem >( {
 	}, [ actions, item ] );
 
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const primaryActionLabel =
+		primaryAction &&
+		( typeof primaryAction.label === 'string'
+			? primaryAction.label
+			: primaryAction.label( [ item ] ) );
 
 	return (
 		<CompositeRow
@@ -137,7 +125,8 @@ function ListItem< Item extends AnyItem >( {
 		>
 			<HStack
 				className="dataviews-view-list__item-wrapper"
-				alignment="top"
+				alignment="center"
+				spacing={ 0 }
 			>
 				<div role="gridcell">
 					<CompositeItem
@@ -161,7 +150,7 @@ function ListItem< Item extends AnyItem >( {
 									<div className="dataviews-view-list__media-placeholder"></div>
 								) }
 							</div>
-							<VStack spacing={ 1 }>
+							<VStack spacing={ 0 }>
 								<span
 									className="dataviews-view-list__primary-field"
 									id={ labelId }
@@ -209,7 +198,7 @@ function ListItem< Item extends AnyItem >( {
 									store={ store }
 									render={
 										<Button
-											label={ primaryAction.label }
+											label={ primaryActionLabel }
 											icon={ primaryAction.icon }
 											isDestructive={
 												primaryAction.isDestructive
@@ -240,7 +229,7 @@ function ListItem< Item extends AnyItem >( {
 										store={ store }
 										render={
 											<Button
-												label={ primaryAction.label }
+												label={ primaryActionLabel }
 												icon={ primaryAction.icon }
 												isDestructive={
 													primaryAction.isDestructive
@@ -266,6 +255,7 @@ function ListItem< Item extends AnyItem >( {
 												size="compact"
 												icon={ moreVertical }
 												label={ __( 'Actions' ) }
+												__experimentalIsFocusable
 												disabled={ ! actions.length }
 												onKeyDown={ ( event: {
 													key: string;
@@ -311,7 +301,7 @@ function ListItem< Item extends AnyItem >( {
 }
 
 export default function ViewList< Item extends AnyItem >(
-	props: ListViewProps< Item >
+	props: ViewListProps< Item >
 ) {
 	const {
 		actions,

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 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 );
 
@@ -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 }
@@ -361,7 +415,7 @@ function TableRow( {
 	);
 }
 
-function ViewTable( {
+function ViewTable< Item extends AnyItem >( {
 	actions,
 	data,
 	fields,
@@ -372,10 +426,13 @@ function ViewTable( {
 	selection,
 	setOpenedFilter,
 	view,
-} ) {
-	const headerMenuRefs = useRef( new Map() );
-	const headerMenuToFocusRef = useRef();
-	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState();
+}: 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 }

package/tsconfig.json

@@ -4,17 +4,14 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"skipLibCheck": true,
 		"checkJs": false
 	},
 	"references": [
-		{ "path": "../a11y" },
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
-		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" }
 	],