@wordpress/dataviews 1.2.0 → 2.0.1

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -16,21 +21,46 @@ import { VIEW_LAYOUTS } from './layouts';
 import BulkActions from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
+import type { Action, AnyItem, Field, View, ViewBaseProps } from './types';
+
+interface DataViewsProps< Item extends AnyItem > {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	getItemId?: ( item: Item ) => string;
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	supportedLayouts: string[];
+	onSelectionChange?: ( items: Item[] ) => void;
+}
 
-const defaultGetItemId = ( item ) => item.id;
+const defaultGetItemId = ( item: AnyItem ) => item.id;
 const defaultOnSelectionChange = () => {};
 
-function useSomeItemHasAPossibleBulkAction( actions, data ) {
+function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
+	actions: Action< Item >[],
+	data: Item[]
+) {
 	return useMemo( () => {
 		return data.some( ( item ) => {
 			return actions.some( ( action ) => {
-				return action.supportsBulk && action.isEligible( item );
+				return (
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+				);
 			} );
 		} );
 	}, [ actions, data ] );
 }
 
-export default function DataViews( {
+export default function DataViews< Item extends AnyItem >( {
 	view,
 	onChangeView,
 	fields,
@@ -43,9 +73,9 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-} ) {
-	const [ selection, setSelection ] = useState( [] );
-	const [ openedFilter, setOpenedFilter ] = useState( null );
+}: DataViewsProps< Item > ) {
+	const [ selection, setSelection ] = useState< string[] >( [] );
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
 	useEffect( () => {
 		if (
@@ -67,16 +97,15 @@ export default function DataViews( {
 	}, [ selection, data, getItemId, onSelectionChange ] );
 
 	const onSetSelection = useCallback(
-		( items ) => {
+		( items: Item[] ) => {
 			setSelection( items.map( ( item ) => getItemId( item ) ) );
 			onSelectionChange( items );
 		},
 		[ setSelection, getItemId, onSelectionChange ]
 	);
 
-	const ViewComponent = VIEW_LAYOUTS.find(
-		( v ) => v.type === view.type
-	).component;
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< Item > >;
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
@@ -150,7 +179,7 @@ export default function DataViews( {
 						data={ data }
 						actions={ actions }
 						selection={ selection }
-						setSelection={ setSelection }
+						onSelectionChange={ onSetSelection }
 						getItemId={ getItemId }
 					/>
 				) }

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 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 ) => {

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.tsx

@@ -30,14 +30,11 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-interface ButtonTriggerProps< Item extends AnyItem > {
-	action: Action< Item >;
-	onClick: MouseEventHandler;
-}
-
-interface DropdownMenuItemTriggerProps< Item extends AnyItem > {
+export interface ActionTriggerProps< Item extends AnyItem > {
 	action: Action< Item >;
 	onClick: MouseEventHandler;
+	isBusy?: boolean;
+	items: Item[];
 }
 
 interface ActionModalProps< Item extends AnyItem > {
@@ -48,9 +45,7 @@ interface ActionModalProps< Item extends AnyItem > {
 
 interface ActionWithModalProps< Item extends AnyItem >
 	extends ActionModalProps< Item > {
-	ActionTrigger: (
-		props: ButtonTriggerProps< Item > | DropdownMenuItemTriggerProps< Item >
-	) => ReactElement;
+	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
 	isBusy?: boolean;
 }
 
@@ -62,7 +57,7 @@ interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
 interface ItemActionsProps< Item extends AnyItem > {
 	item: Item;
 	actions: Action< Item >[];
-	isCompact: boolean;
+	isCompact?: boolean;
 }
 
 interface CompactItemActionsProps< Item extends AnyItem > {
@@ -73,10 +68,13 @@ interface CompactItemActionsProps< Item extends AnyItem > {
 function ButtonTrigger< Item extends AnyItem >( {
 	action,
 	onClick,
-}: ButtonTriggerProps< Item > ) {
+	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"
@@ -88,13 +86,16 @@ function ButtonTrigger< Item extends AnyItem >( {
 function DropdownMenuItemTrigger< Item extends AnyItem >( {
 	action,
 	onClick,
-}: DropdownMenuItemTriggerProps< Item > ) {
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
 			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
-			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
 }
@@ -104,9 +105,11 @@ export function ActionModal< Item extends AnyItem >( {
 	items,
 	closeModal,
 }: ActionModalProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<Modal
-			title={ action.modalHeader || action.label }
+			title={ action.modalHeader || label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal ?? ( () => {} ) }
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
@@ -174,6 +177,7 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
 						key={ action.id }
 						action={ action }
 						onClick={ () => action.callback( [ item ] ) }
+						items={ [ item ] }
 					/>
 				);
 			} ) }
@@ -230,6 +234,7 @@ export default function ItemActions< Item extends AnyItem >( {
 							key={ action.id }
 							action={ action }
 							onClick={ () => action.callback( [ item ] ) }
+							items={ [ item ] }
 						/>
 					);
 				} ) }
@@ -249,6 +254,7 @@ function CompactItemActions< Item extends AnyItem >( {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
+					__experimentalIsFocusable
 					disabled={ ! actions.length }
 					className="dataviews-all-actions-button"
 				/>

package/src/pagination.tsx

@@ -74,7 +74,7 @@ const Pagination = memo( function Pagination( {
 											page: +newValue,
 										} );
 									} }
-									size={ 'compact' }
+									size="compact"
 									__nextHasNoMarginBottom
 								/>
 							),

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 } />;
 }

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

@@ -6,20 +6,37 @@ import { useEffect, useRef, memo } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
-const Search = memo( function Search( { label, view, onChangeView } ) {
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+interface SearchProps {
+	label?: string;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+const Search = memo( function Search( {
+	label,
+	view,
+	onChangeView,
+}: SearchProps ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
 	useEffect( () => {
-		setSearch( view.search );
-	}, [ view ] );
+		setSearch( view.search ?? '' );
+	}, [ view.search, setSearch ] );
 	const onChangeViewRef = useRef( onChangeView );
+	const viewRef = useRef( view );
 	useEffect( () => {
 		onChangeViewRef.current = onChangeView;
-	}, [ onChangeView ] );
+		viewRef.current = view;
+	}, [ onChangeView, view ] );
 	useEffect( () => {
 		onChangeViewRef.current( {
-			...view,
+			...viewRef.current,
 			page: 1,
 			search: debouncedSearch,
 		} );