@wordpress/dataviews 2.1.0 → 3.0.0

package/src/bulk-actions.tsx

@@ -7,13 +7,15 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
+import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import type { Action, ActionModal, AnyItem } from './types';
+import type { Action, ActionModal } from './types';
+import type { SetSelection } from './private-types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -22,34 +24,34 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-interface ActionWithModalProps< Item extends AnyItem > {
+interface ActionWithModalProps< Item > {
 	action: ActionModal< Item >;
 	selectedItems: Item[];
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 	onMenuOpenChange: ( isOpen: boolean ) => void;
 }
 
-interface BulkActionsItemProps< Item extends AnyItem > {
+interface BulkActionsItemProps< Item > {
 	action: Action< Item >;
 	selectedItems: Item[];
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface ActionsMenuGroupProps< Item extends AnyItem > {
+interface ActionsMenuGroupProps< Item > {
 	actions: Action< Item >[];
 	selectedItems: Item[];
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface BulkActionsProps< Item extends AnyItem > {
+interface BulkActionsProps< Item > {
 	data: Item[];
 	actions: Action< Item >[];
 	selection: string[];
-	onSelectionChange: ( selection: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	getItemId: ( item: Item ) => string;
 }
 
-export function useHasAPossibleBulkAction< Item extends AnyItem >(
+export function useHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	item: Item
 ) {
@@ -63,7 +65,7 @@ export function useHasAPossibleBulkAction< Item extends AnyItem >(
 	}, [ actions, item ] );
 }
 
-export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
+export function useSomeItemHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	data: Item[]
 ) {
@@ -79,7 +81,7 @@ export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
 	}, [ actions, data ] );
 }
 
-function ActionWithModal< Item extends AnyItem >( {
+function ActionWithModal< Item >( {
 	action,
 	selectedItems,
 	setActionWithModal,
@@ -114,11 +116,12 @@ function ActionWithModal< Item extends AnyItem >( {
 	);
 }
 
-function BulkActionItem< Item extends AnyItem >( {
+function BulkActionItem< Item >( {
 	action,
 	selectedItems,
 	setActionWithModal,
 }: BulkActionsItemProps< Item > ) {
+	const registry = useRegistry();
 	const eligibleItems = useMemo( () => {
 		return selectedItems.filter(
 			( item ) => ! action.isEligible || action.isEligible( item )
@@ -136,7 +139,7 @@ function BulkActionItem< Item extends AnyItem >( {
 				if ( shouldShowModal ) {
 					setActionWithModal( action );
 				} else {
-					await action.callback( eligibleItems );
+					action.callback( eligibleItems, { registry } );
 				}
 			} }
 			suffix={
@@ -148,7 +151,7 @@ function BulkActionItem< Item extends AnyItem >( {
 	);
 }
 
-function ActionsMenuGroup< Item extends AnyItem >( {
+function ActionsMenuGroup< Item >( {
 	actions,
 	selectedItems,
 	setActionWithModal,
@@ -170,7 +173,7 @@ function ActionsMenuGroup< Item extends AnyItem >( {
 	);
 }
 
-export default function BulkActions< Item extends AnyItem >( {
+export default function BulkActions< Item >( {
 	data,
 	actions,
 	selection,
@@ -194,37 +197,16 @@ export default function BulkActions< Item extends AnyItem >( {
 	}, [ data, bulkActions ] );
 
 	const numberSelectableItems = selectableItems.length;
-	const areAllSelected =
-		selection && selection.length === numberSelectableItems;
 
 	const selectedItems = useMemo( () => {
-		return data.filter( ( item ) =>
-			selection.includes( getItemId( item ) )
+		return data.filter(
+			( item ) =>
+				selection.includes( getItemId( item ) ) &&
+				selectableItems.includes( item )
 		);
-	}, [ selection, data, getItemId ] );
+	}, [ selection, data, getItemId, selectableItems ] );
 
-	const hasNonSelectableItemSelected = useMemo( () => {
-		return selectedItems.some( ( item ) => {
-			return ! selectableItems.includes( item );
-		} );
-	}, [ selectedItems, selectableItems ] );
-	useEffect( () => {
-		if ( hasNonSelectableItemSelected ) {
-			onSelectionChange(
-				selectedItems.filter( ( selectedItem ) => {
-					return selectableItems.some( ( item ) => {
-						return getItemId( selectedItem ) === getItemId( item );
-					} );
-				} )
-			);
-		}
-	}, [
-		hasNonSelectableItemSelected,
-		selectedItems,
-		selectableItems,
-		getItemId,
-		onSelectionChange,
-	] );
+	const areAllSelected = selectedItems.length === numberSelectableItems;
 
 	if ( bulkActions.length === 0 ) {
 		return null;
@@ -243,15 +225,15 @@ export default function BulkActions< Item extends AnyItem >( {
 						variant="tertiary"
 						size="compact"
 					>
-						{ selection.length
+						{ selectedItems.length
 							? sprintf(
 									/* translators: %d: Number of items. */
 									_n(
 										'Edit %d item',
 										'Edit %d items',
-										selection.length
+										selectedItems.length
 									),
-									selection.length
+									selectedItems.length
 							  )
 							: __( 'Bulk edit' ) }
 					</Button>
@@ -267,7 +249,11 @@ export default function BulkActions< Item extends AnyItem >( {
 						disabled={ areAllSelected }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( selectableItems );
+							onSelectionChange(
+								selectableItems.map( ( item ) =>
+									getItemId( item )
+								)
+							);
 						} }
 						suffix={ numberSelectableItems }
 					>

package/src/dataform.tsx

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import type { Dispatch, SetStateAction } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { Form, Field, NormalizedField } from './types';
+import { normalizeFields } from './normalize-fields';
+
+type DataFormProps< Item > = {
+	data: Item;
+	fields: Field< Item >[];
+	form: Form;
+	onChange: Dispatch< SetStateAction< Item > >;
+};
+
+type DataFormControlProps< Item > = {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: Dispatch< SetStateAction< Item > >;
+};
+
+function DataFormTextControl< Item >( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< Item > ) {
+	const { id, header, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( ( prevItem: Item ) => ( {
+				...prevItem,
+				[ id ]: newValue,
+			} ) ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			label={ header }
+			placeholder={ placeholder }
+			value={ value }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+		/>
+	);
+}
+
+const controls: {
+	[ key: string ]: < Item >(
+		props: DataFormControlProps< Item >
+	) => JSX.Element;
+} = {
+	text: DataFormTextControl,
+};
+
+function getControlForField< Item >( field: NormalizedField< Item > ) {
+	if ( ! field.type ) {
+		return null;
+	}
+
+	if ( ! Object.keys( controls ).includes( field.type ) ) {
+		return null;
+	}
+
+	return controls[ field.type ];
+}
+
+export default function DataForm< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				fields.filter(
+					( { id } ) => !! form.visibleFields?.includes( id )
+				)
+			),
+		[ fields, form.visibleFields ]
+	);
+
+	return visibleFields.map( ( field ) => {
+		const DataFormControl = getControlForField( field );
+		return DataFormControl ? (
+			<DataFormControl
+				key={ field.id }
+				data={ data }
+				field={ field }
+				onChange={ onChange }
+			/>
+		) : null;
+	} );
+}

package/src/dataviews.tsx

@@ -7,7 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,12 +18,24 @@ import Filters from './filters';
 import Search from './search';
 import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
-import BulkActions from './bulk-actions';
+import {
+	default as BulkActions,
+	useSomeItemHasAPossibleBulkAction,
+} from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
-import type { Action, AnyItem, Field, View, ViewBaseProps } from './types';
+import type {
+	Action,
+	Field,
+	View,
+	ViewBaseProps,
+	SupportedLayouts,
+} from './types';
+import type { SetSelection, SelectionOrUpdater } from './private-types';
 
-interface DataViewsProps< Item extends AnyItem > {
+type ItemWithId = { id: string };
+
+type DataViewsProps< Item > = {
 	view: View;
 	onChangeView: ( view: View ) => void;
 	fields: Field< Item >[];
@@ -31,36 +43,24 @@ interface DataViewsProps< Item extends AnyItem > {
 	searchLabel?: string;
 	actions?: Action< Item >[];
 	data: Item[];
-	getItemId?: ( item: Item ) => string;
 	isLoading?: boolean;
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
 	};
-	supportedLayouts: string[];
+	defaultLayouts: SupportedLayouts;
+	selection?: string[];
+	setSelection?: SetSelection;
 	onSelectionChange?: ( items: Item[] ) => void;
-}
+} & ( Item extends ItemWithId
+	? { getItemId?: ( item: Item ) => string }
+	: { getItemId: ( item: Item ) => string } );
 
-const defaultGetItemId = ( item: AnyItem ) => item.id;
-const defaultOnSelectionChange = () => {};
+const defaultGetItemId = ( item: ItemWithId ) => item.id;
 
-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 || action.isEligible( item ) )
-				);
-			} );
-		} );
-	}, [ actions, data ] );
-}
+const defaultOnSelectionChange = () => {};
 
-export default function DataViews< Item extends AnyItem >( {
+export default function DataViews< Item >( {
 	view,
 	onChangeView,
 	fields,
@@ -71,38 +71,28 @@ export default function DataViews< Item extends AnyItem >( {
 	getItemId = defaultGetItemId,
 	isLoading = false,
 	paginationInfo,
-	supportedLayouts,
+	defaultLayouts,
+	selection: selectionProperty,
+	setSelection: setSelectionProperty,
 	onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
-	const [ selection, setSelection ] = useState< string[] >( [] );
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const isUncontrolled =
+		selectionProperty === undefined || setSelectionProperty === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const setSelection = isUncontrolled
+		? setSelectionState
+		: setSelectionProperty;
 	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
-	useEffect( () => {
-		if (
-			selection.length > 0 &&
-			selection.some(
-				( id ) => ! data.some( ( item ) => getItemId( item ) === id )
-			)
-		) {
-			const newSelection = selection.filter( ( id ) =>
-				data.some( ( item ) => getItemId( item ) === id )
-			);
-			setSelection( newSelection );
-			onSelectionChange(
-				data.filter( ( item ) =>
-					newSelection.includes( getItemId( item ) )
-				)
-			);
-		}
-	}, [ selection, data, getItemId, onSelectionChange ] );
-
-	const onSetSelection = useCallback(
-		( items: Item[] ) => {
-			setSelection( items.map( ( item ) => getItemId( item ) ) );
-			onSelectionChange( items );
-		},
-		[ setSelection, getItemId, onSelectionChange ]
-	);
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		onSelectionChange(
+			data.filter( ( item ) => newValue.includes( getItemId( item ) ) )
+		);
+		return setSelection( value );
+	}
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
 		?.component as ComponentType< ViewBaseProps< Item > >;
@@ -112,6 +102,11 @@ export default function DataViews< Item extends AnyItem >( {
 		actions,
 		data
 	);
+	const _selection = useMemo( () => {
+		return selection.filter( ( id ) =>
+			data.some( ( item ) => getItemId( item ) === id )
+		);
+	}, [ selection, data, getItemId ] );
 	return (
 		<div className="dataviews-wrapper">
 			<HStack
@@ -144,8 +139,8 @@ export default function DataViews< Item extends AnyItem >( {
 						<BulkActions
 							actions={ actions }
 							data={ data }
-							onSelectionChange={ onSetSelection }
-							selection={ selection }
+							onSelectionChange={ setSelectionWithChange }
+							selection={ _selection }
 							getItemId={ getItemId }
 						/>
 					) }
@@ -153,7 +148,7 @@ export default function DataViews< Item extends AnyItem >( {
 					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
+					defaultLayouts={ defaultLayouts }
 				/>
 			</HStack>
 			<ViewComponent
@@ -163,8 +158,8 @@ export default function DataViews< Item extends AnyItem >( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onChangeView={ onChangeView }
-				onSelectionChange={ onSetSelection }
-				selection={ selection }
+				onSelectionChange={ setSelectionWithChange }
+				selection={ _selection }
 				setOpenedFilter={ setOpenedFilter }
 				view={ view }
 			/>
@@ -178,8 +173,8 @@ export default function DataViews< Item extends AnyItem >( {
 					<BulkActionsToolbar
 						data={ data }
 						actions={ actions }
-						selection={ selection }
-						onSelectionChange={ onSetSelection }
+						selection={ _selection }
+						onSelectionChange={ setSelectionWithChange }
 						getItemId={ getItemId }
 					/>
 				) }

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

@@ -15,7 +15,7 @@ import {
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
 import { normalizeFields } from './normalize-fields';
-import type { Field, AnyItem, View } from './types';
+import type { Field, View } from './types';
 
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
@@ -32,7 +32,7 @@ const EMPTY_ARRAY: [] = [];
  *
  * @return Filtered, sorted and paginated data.
  */
-export function filterSortAndPaginate< Item extends AnyItem >(
+export function filterSortAndPaginate< Item >(
 	data: Item[],
 	view: View,
 	fields: Field< Item >[]
@@ -61,7 +61,7 @@ export function filterSortAndPaginate< Item extends AnyItem >(
 		} );
 	}
 
-	if ( view.filters.length > 0 ) {
+	if ( view.filters && view.filters?.length > 0 ) {
 		view.filters.forEach( ( filter ) => {
 			const field = _fields.find(
 				( _field ) => _field.id === filter.field
@@ -142,6 +142,16 @@ export function filterSortAndPaginate< Item extends AnyItem >(
 			filteredData.sort( ( a, b ) => {
 				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
 				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+
+				if (
+					typeof valueA === 'number' &&
+					typeof valueB === 'number'
+				) {
+					return view.sort?.direction === 'asc'
+						? valueA - valueB
+						: valueB - valueA;
+				}
+
 				return view.sort?.direction === 'asc'
 					? valueA.localeCompare( valueB )
 					: valueB.localeCompare( valueA );

package/src/filter-summary.tsx

@@ -157,7 +157,7 @@ function OperatorSelector( {
 		value: operator,
 		label: OPERATORS[ operator ]?.label,
 	} ) );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
 	);
 	const value = currentFilter?.operator || filter.operators[ 0 ];
@@ -180,18 +180,22 @@ function OperatorSelector( {
 						const operator = newValue as Operator;
 						const newFilters = currentFilter
 							? [
-									...view.filters.map( ( _filter ) => {
-										if ( _filter.field === filter.field ) {
-											return {
-												..._filter,
-												operator,
-											};
+									...( view.filters ?? [] ).map(
+										( _filter ) => {
+											if (
+												_filter.field === filter.field
+											) {
+												return {
+													..._filter,
+													operator,
+												};
+											}
+											return _filter;
 										}
-										return _filter;
-									} ),
+									),
 							  ]
 							: [
-									...view.filters,
+									...( view.filters ?? [] ),
 									{
 										field: filter.field,
 										operator,
@@ -220,7 +224,9 @@ export default function FilterSummary( {
 }: FilterSummaryProps ) {
 	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
-	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const filterInView = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
 	const activeElements = filter.elements.filter( ( element ) => {
 		if ( filter.singleSelection ) {
 			return element.value === filterInView?.value;
@@ -290,7 +296,7 @@ export default function FilterSummary( {
 									onChangeView( {
 										...view,
 										page: 1,
-										filters: view.filters.filter(
+										filters: view.filters?.filter(
 											( _filter ) =>
 												_filter.field !== filter.field
 										),

package/src/filters.tsx

@@ -12,9 +12,9 @@ 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 type { AnyItem, NormalizedField, NormalizedFilter, View } from './types';
+import type { NormalizedField, NormalizedFilter, View } from './types';
 
-interface FiltersProps< Item extends AnyItem > {
+interface FiltersProps< Item > {
 	fields: NormalizedField< Item >[];
 	view: View;
 	onChangeView: ( view: View ) => void;
@@ -22,7 +22,7 @@ interface FiltersProps< Item extends AnyItem > {
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 }
 
-function _Filters< Item extends AnyItem >( {
+function _Filters< Item >( {
 	fields,
 	view,
 	onChangeView,
@@ -52,7 +52,7 @@ function _Filters< Item extends AnyItem >( {
 			operators,
 			isVisible:
 				isPrimary ||
-				view.filters.some(
+				!! view.filters?.some(
 					( f ) =>
 						f.field === field.id &&
 						ALL_OPERATORS.includes( f.operator )

package/src/index.ts

@@ -2,3 +2,4 @@ export { default as DataViews } from './dataviews';
 export { VIEW_LAYOUTS } from './layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
+export { default as DataForm } from './dataform';