@wordpress/dataviews 1.1.0 → 2.0.0

package/src/filter-and-sort-data-view.ts

@@ -15,13 +15,13 @@ import {
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
 import { normalizeFields } from './normalize-fields';
-import type { Data, Field, View } from './types';
+import type { Field, AnyItem, View } from './types';
 
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-const EMPTY_ARRAY: Data = [];
+const EMPTY_ARRAY: [] = [];
 
 /**
  * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
@@ -32,11 +32,14 @@ const EMPTY_ARRAY: Data = [];
  *
  * @return Filtered, sorted and paginated data.
  */
-export function filterSortAndPaginate(
-	data: Data,
+export function filterSortAndPaginate< Item extends AnyItem >(
+	data: Item[],
 	view: View,
-	fields: Field[]
-): { data: Data; paginationInfo: { totalItems: number; totalPages: number } } {
+	fields: Field< Item >[]
+): {
+	data: Item[];
+	paginationInfo: { totalItems: number; totalPages: number };
+} {
 	if ( ! data ) {
 		return {
 			data: EMPTY_ARRAY,
@@ -100,7 +103,9 @@ export function filterSortAndPaginate(
 				) {
 					filteredData = filteredData.filter( ( item ) => {
 						return filter.value.every( ( value: any ) => {
-							return field.getValue( { item } ).includes( value );
+							return field
+								.getValue( { item } )
+								?.includes( value );
 						} );
 					} );
 				} else if (
@@ -111,7 +116,7 @@ export function filterSortAndPaginate(
 						return filter.value.every( ( value: any ) => {
 							return ! field
 								.getValue( { item } )
-								.includes( value );
+								?.includes( value );
 						} );
 					} );
 				} else if ( filter.operator === OPERATOR_IS ) {

package/src/{filter-summary.js → filter-summary.tsx}

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import type { RefObject } from 'react';
 
 /**
  * WordPress dependencies
@@ -35,8 +36,30 @@ import {
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
+import type { Filter, NormalizedFilter, Operator, Option, View } from './types';
 
-const FilterText = ( { activeElements, filterInView, filter } ) => {
+interface FilterTextProps {
+	activeElements: Option[];
+	filterInView?: Filter;
+	filter: NormalizedFilter;
+}
+
+interface OperatorSelectorProps {
+	filter: NormalizedFilter;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FilterSummaryProps extends OperatorSelectorProps {
+	addFilterRef: RefObject< HTMLButtonElement >;
+	openedFilter: string | null;
+}
+
+const FilterText = ( {
+	activeElements,
+	filterInView,
+	filter,
+}: FilterTextProps ) => {
 	if ( activeElements === undefined || activeElements.length === 0 ) {
 		return filter.name;
 	}
@@ -125,7 +148,11 @@ const FilterText = ( { activeElements, filterInView, filter } ) => {
 	);
 };
 
-function OperatorSelector( { filter, view, onChangeView } ) {
+function OperatorSelector( {
+	filter,
+	view,
+	onChangeView,
+}: OperatorSelectorProps ) {
 	const operatorOptions = filter.operators?.map( ( operator ) => ( {
 		value: operator,
 		label: OPERATORS[ operator ]?.label,
@@ -150,13 +177,14 @@ function OperatorSelector( { filter, view, onChangeView } ) {
 					value={ value }
 					options={ operatorOptions }
 					onChange={ ( newValue ) => {
+						const operator = newValue as Operator;
 						const newFilters = currentFilter
 							? [
 									...view.filters.map( ( _filter ) => {
 										if ( _filter.field === filter.field ) {
 											return {
 												..._filter,
-												operator: newValue,
+												operator,
 											};
 										}
 										return _filter;
@@ -166,7 +194,8 @@ function OperatorSelector( { filter, view, onChangeView } ) {
 									...view.filters,
 									{
 										field: filter.field,
-										operator: newValue,
+										operator,
+										value: undefined,
 									},
 							  ];
 						onChangeView( {
@@ -188,8 +217,8 @@ export default function FilterSummary( {
 	addFilterRef,
 	openedFilter,
 	...commonProps
-} ) {
-	const toggleRef = useRef();
+}: FilterSummaryProps ) {
+	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
 	const activeElements = filter.elements.filter( ( element ) => {
@@ -220,7 +249,7 @@ export default function FilterSummary( {
 						placement="top"
 					>
 						<div
-							className={ classnames(
+							className={ clsx(
 								'dataviews-filter-summary__chip',
 								{
 									'has-reset': canResetOrRemove,
@@ -253,7 +282,7 @@ export default function FilterSummary( {
 							placement="top"
 						>
 							<button
-								className={ classnames(
+								className={ clsx(
 									'dataviews-filter-summary__chip-remove',
 									{ 'has-values': hasValues }
 								) }

package/src/{filters.js → filters.tsx}

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,17 +12,25 @@ import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import type { AnyItem, NormalizedField, NormalizedFilter, View } from './types';
 
-const Filters = memo( function Filters( {
+interface FiltersProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+}
+
+function _Filters< Item extends AnyItem >( {
 	fields,
 	view,
 	onChangeView,
 	openedFilter,
 	setOpenedFilter,
-} ) {
-	const addFilterRef = useRef();
-	const filters = [];
+}: FiltersProps< Item > ) {
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters: NormalizedFilter[] = [];
 	fields.forEach( ( field ) => {
 		if ( ! field.elements?.length ) {
 			return;
@@ -108,6 +117,9 @@ const Filters = memo( function Filters( {
 			{ filterComponents }
 		</HStack>
 	);
-} );
+}
+
+// A type assertion is used here to keep the type argument.
+const Filters = memo( _Filters ) as typeof _Filters;
 
 export default Filters;

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,7 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Action, ActionModal as ActionModalType, AnyItem } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -24,10 +30,51 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-function ButtonTrigger( { action, onClick } ) {
+export interface ActionTriggerProps< Item extends AnyItem > {
+	action: Action< Item >;
+	onClick: MouseEventHandler;
+	isBusy?: boolean;
+	items: Item[];
+}
+
+interface ActionModalProps< Item extends AnyItem > {
+	action: ActionModalType< Item >;
+	items: Item[];
+	closeModal?: () => void;
+}
+
+interface ActionWithModalProps< Item extends AnyItem >
+	extends ActionModalProps< Item > {
+	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
+	isBusy?: boolean;
+}
+
+interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	item: Item;
+}
+
+interface ItemActionsProps< Item extends AnyItem > {
+	item: Item;
+	actions: Action< Item >[];
+	isCompact?: boolean;
+}
+
+interface CompactItemActionsProps< Item extends AnyItem > {
+	item: Item;
+	actions: Action< Item >[];
+}
+
+function ButtonTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<Button
-			label={ action.label }
+			label={ label }
 			icon={ action.icon }
 			isDestructive={ action.isDestructive }
 			size="compact"
@@ -36,58 +83,91 @@ function ButtonTrigger( { action, onClick } ) {
 	);
 }
 
-function DropdownMenuItemTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
+			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
-			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
 }
 
-function ActionWithModal( { action, item, ActionTrigger } ) {
+export function ActionModal< Item extends AnyItem >( {
+	action,
+	items,
+	closeModal,
+}: ActionModalProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Modal
+			title={ action.modalHeader || label }
+			__experimentalHideHeader={ !! action.hideModalHeader }
+			onRequestClose={ closeModal ?? ( () => {} ) }
+			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
+				action.id
+			) }` }
+		>
+			<action.RenderModal
+				items={ items }
+				closeModal={ closeModal }
+				onActionStart={ action.onActionStart }
+				onActionPerformed={ action.onActionPerformed }
+			/>
+		</Modal>
+	);
+}
+
+export function ActionWithModal< Item extends AnyItem >( {
+	action,
+	items,
+	ActionTrigger,
+	isBusy,
+}: ActionWithModalProps< Item > ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const actionTriggerProps = {
 		action,
-		onClick: () => setIsModalOpen( true ),
+		onClick: () => {
+			setIsModalOpen( true );
+		},
+		items,
+		isBusy,
 	};
-	const { RenderModal, hideModalHeader } = action;
 	return (
 		<>
 			<ActionTrigger { ...actionTriggerProps } />
 			{ isModalOpen && (
-				<Modal
-					title={ action.modalHeader || action.label }
-					__experimentalHideHeader={ !! hideModalHeader }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
-						action.id
-					) }` }
-				>
-					<RenderModal
-						items={ [ item ] }
-						closeModal={ () => setIsModalOpen( false ) }
-					/>
-				</Modal>
+				<ActionModal
+					action={ action }
+					items={ items }
+					closeModal={ () => setIsModalOpen( false ) }
+				/>
 			) }
 		</>
 	);
 }
 
-function ActionsDropdownMenuGroup( { actions, item } ) {
+export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
+	actions,
+	item,
+}: ActionsDropdownMenuGroupProps< Item > ) {
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {
-				if ( !! action.RenderModal ) {
+				if ( 'RenderModal' in action ) {
 					return (
 						<ActionWithModal
 							key={ action.id }
 							action={ action }
-							item={ item }
+							items={ [ item ] }
 							ActionTrigger={ DropdownMenuItemTrigger }
 						/>
 					);
@@ -97,6 +177,7 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 						key={ action.id }
 						action={ action }
 						onClick={ () => action.callback( [ item ] ) }
+						items={ [ item ] }
 					/>
 				);
 			} ) }
@@ -104,7 +185,11 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 	);
 }
 
-export default function ItemActions( { item, actions, isCompact } ) {
+export default function ItemActions< Item extends AnyItem >( {
+	item,
+	actions,
+	isCompact,
+}: ItemActionsProps< Item > ) {
 	const { primaryActions, eligibleActions } = useMemo( () => {
 		// If an action is eligible for all items, doesn't need
 		// to provide the `isEligible` function.
@@ -134,12 +219,12 @@ export default function ItemActions( { item, actions, isCompact } ) {
 		>
 			{ !! primaryActions.length &&
 				primaryActions.map( ( action ) => {
-					if ( !! action.RenderModal ) {
+					if ( 'RenderModal' in action ) {
 						return (
 							<ActionWithModal
 								key={ action.id }
 								action={ action }
-								item={ item }
+								items={ [ item ] }
 								ActionTrigger={ ButtonTrigger }
 							/>
 						);
@@ -149,6 +234,7 @@ export default function ItemActions( { item, actions, isCompact } ) {
 							key={ action.id }
 							action={ action }
 							onClick={ () => action.callback( [ item ] ) }
+							items={ [ item ] }
 						/>
 					);
 				} ) }
@@ -157,7 +243,10 @@ export default function ItemActions( { item, actions, isCompact } ) {
 	);
 }
 
-function CompactItemActions( { item, actions } ) {
+function CompactItemActions< Item extends AnyItem >( {
+	item,
+	actions,
+}: CompactItemActionsProps< Item > ) {
 	return (
 		<DropdownMenu
 			trigger={

package/src/normalize-fields.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { Field, NormalizedField } from './types';
+import type { Field, AnyItem, NormalizedField } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -9,7 +9,9 @@ import type { Field, NormalizedField } from './types';
  * @param fields Fields config.
  * @return Normalized fields config.
  */
-export function normalizeFields( fields: Field[] ): NormalizedField[] {
+export function normalizeFields< Item extends AnyItem >(
+	fields: Field< Item >[]
+): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
 		const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
 

package/src/{pagination.js → 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( {
@@ -56,7 +74,7 @@ const Pagination = memo( function Pagination( {
 											page: +newValue,
 										} );
 									} }
-									size={ 'compact' }
+									size="compact"
 									__nextHasNoMarginBottom
 								/>
 							),
@@ -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 }

package/src/{reset-filters.js → reset-filters.tsx}

@@ -4,8 +4,23 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function ResetFilter( { filters, view, onChangeView } ) {
-	const isPrimary = ( field ) =>
+/**
+ * Internal dependencies
+ */
+import type { NormalizedFilter, View } from './types';
+
+interface ResetFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+export default function ResetFilter( {
+	filters,
+	view,
+	onChangeView,
+}: ResetFilterProps ) {
+	const isPrimary = ( field: string ) =>
 		filters.some(
 			( _filter ) => _filter.field === field && _filter.isPrimary
 		);

package/src/{search-widget.js → search-widget.tsx}

@@ -22,6 +22,7 @@ import { SVG, Circle } from '@wordpress/primitives';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Filter, NormalizedFilter, View } from './types';
 
 const {
 	CompositeV2: Composite,
@@ -29,6 +30,12 @@ const {
 	useCompositeStoreV2: useCompositeStore,
 } = unlock( componentsPrivateApis );
 
+interface SearchWidgetProps {
+	view: View;
+	filter: NormalizedFilter;
+	onChangeView: ( view: View ) => void;
+}
+
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
@@ -39,8 +46,11 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-const EMPTY_ARRAY = [];
-const getCurrentValue = ( filterDefinition, currentFilter ) => {
+const EMPTY_ARRAY: [] = [];
+const getCurrentValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter?: Filter
+) => {
 	if ( filterDefinition.singleSelection ) {
 		return currentFilter?.value;
 	}
@@ -56,7 +66,11 @@ const getCurrentValue = ( filterDefinition, currentFilter ) => {
 	return EMPTY_ARRAY;
 };
 
-const getNewValue = ( filterDefinition, currentFilter, value ) => {
+const getNewValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter: Filter | undefined,
+	value: any
+) => {
 	if ( filterDefinition.singleSelection ) {
 		return value;
 	}
@@ -70,7 +84,7 @@ const getNewValue = ( filterDefinition, currentFilter, value ) => {
 	return [ value ];
 };
 
-function ListBox( { view, filter, onChangeView } ) {
+function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const compositeStore = useCompositeStore( {
 		virtualFocus: true,
 		focusLoop: true,
@@ -184,7 +198,7 @@ function ListBox( { view, filter, onChangeView } ) {
 	);
 }
 
-function ComboboxList( { view, filter, onChangeView } ) {
+function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
 	const currentFilter = view.filters.find(
@@ -234,7 +248,13 @@ function ComboboxList( { view, filter, onChangeView } ) {
 			setValue={ setSearchValue }
 		>
 			<div className="dataviews-search-widget-filter-combobox__wrapper">
-				<Ariakit.ComboboxLabel render={ <VisuallyHidden /> }>
+				<Ariakit.ComboboxLabel
+					render={
+						<VisuallyHidden>
+							{ __( 'Search items' ) }
+						</VisuallyHidden>
+					}
+				>
 					{ __( 'Search items' ) }
 				</Ariakit.ComboboxLabel>
 				<Ariakit.Combobox
@@ -290,7 +310,7 @@ function ComboboxList( { view, filter, onChangeView } ) {
 	);
 }
 
-export default function SearchWidget( props ) {
+export default function SearchWidget( props: SearchWidgetProps ) {
 	const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
 	return <Widget { ...props } />;
 }