@wordpress/dataviews 2.2.0 → 3.0.0

package/src/bulk-actions.tsx

@@ -14,7 +14,8 @@ 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,
@@ -23,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
 ) {
@@ -64,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[]
 ) {
@@ -80,7 +81,7 @@ export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
 	}, [ actions, data ] );
 }
 
-function ActionWithModal< Item extends AnyItem >( {
+function ActionWithModal< Item >( {
 	action,
 	selectedItems,
 	setActionWithModal,
@@ -115,7 +116,7 @@ function ActionWithModal< Item extends AnyItem >( {
 	);
 }
 
-function BulkActionItem< Item extends AnyItem >( {
+function BulkActionItem< Item >( {
 	action,
 	selectedItems,
 	setActionWithModal,
@@ -150,7 +151,7 @@ function BulkActionItem< Item extends AnyItem >( {
 	);
 }
 
-function ActionsMenuGroup< Item extends AnyItem >( {
+function ActionsMenuGroup< Item >( {
 	actions,
 	selectedItems,
 	setActionWithModal,
@@ -172,7 +173,7 @@ function ActionsMenuGroup< Item extends AnyItem >( {
 	);
 }
 
-export default function BulkActions< Item extends AnyItem >( {
+export default function BulkActions< Item >( {
 	data,
 	actions,
 	selection,
@@ -248,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 } 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,38 +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?: ( selection: string[] ) => void;
+	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,
@@ -73,32 +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 [ selectionState, setSelectionState ] = useState< string[] >( [] );
-	let selection, setSelection;
-	if (
-		selectionProperty !== undefined &&
-		setSelectionProperty !== undefined
-	) {
-		selection = selectionProperty;
-		setSelection = setSelectionProperty;
-	} else {
-		selection = selectionState;
-		setSelection = setSelectionState;
-	}
+	const isUncontrolled =
+		selectionProperty === undefined || setSelectionProperty === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const setSelection = isUncontrolled
+		? setSelectionState
+		: setSelectionProperty;
 	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
-	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 > >;
@@ -145,7 +139,7 @@ export default function DataViews< Item extends AnyItem >( {
 						<BulkActions
 							actions={ actions }
 							data={ data }
-							onSelectionChange={ onSetSelection }
+							onSelectionChange={ setSelectionWithChange }
 							selection={ _selection }
 							getItemId={ getItemId }
 						/>
@@ -154,7 +148,7 @@ export default function DataViews< Item extends AnyItem >( {
 					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
-					supportedLayouts={ supportedLayouts }
+					defaultLayouts={ defaultLayouts }
 				/>
 			</HStack>
 			<ViewComponent
@@ -164,7 +158,7 @@ export default function DataViews< Item extends AnyItem >( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onChangeView={ onChangeView }
-				onSelectionChange={ onSetSelection }
+				onSelectionChange={ setSelectionWithChange }
 				selection={ _selection }
 				setOpenedFilter={ setOpenedFilter }
 				view={ view }
@@ -180,7 +174,7 @@ export default function DataViews< Item extends AnyItem >( {
 						data={ data }
 						actions={ actions }
 						selection={ _selection }
-						onSelectionChange={ onSetSelection }
+						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';

package/src/item-actions.tsx

@@ -21,7 +21,7 @@ import { useRegistry } from '@wordpress/data';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import type { Action, ActionModal as ActionModalType, AnyItem } from './types';
+import type { Action, ActionModal as ActionModalType } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -31,42 +31,41 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-export interface ActionTriggerProps< Item extends AnyItem > {
+export interface ActionTriggerProps< Item > {
 	action: Action< Item >;
 	onClick: MouseEventHandler;
 	isBusy?: boolean;
 	items: Item[];
 }
 
-interface ActionModalProps< Item extends AnyItem > {
+interface ActionModalProps< Item > {
 	action: ActionModalType< Item >;
 	items: Item[];
 	closeModal?: () => void;
 }
 
-interface ActionWithModalProps< Item extends AnyItem >
-	extends ActionModalProps< Item > {
+interface ActionWithModalProps< Item > extends ActionModalProps< Item > {
 	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
 	isBusy?: boolean;
 }
 
-interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
+interface ActionsDropdownMenuGroupProps< Item > {
 	actions: Action< Item >[];
 	item: Item;
 }
 
-interface ItemActionsProps< Item extends AnyItem > {
+interface ItemActionsProps< Item > {
 	item: Item;
 	actions: Action< Item >[];
 	isCompact?: boolean;
 }
 
-interface CompactItemActionsProps< Item extends AnyItem > {
+interface CompactItemActionsProps< Item > {
 	item: Item;
 	actions: Action< Item >[];
 }
 
-function ButtonTrigger< Item extends AnyItem >( {
+function ButtonTrigger< Item >( {
 	action,
 	onClick,
 	items,
@@ -84,7 +83,7 @@ function ButtonTrigger< Item extends AnyItem >( {
 	);
 }
 
-function DropdownMenuItemTrigger< Item extends AnyItem >( {
+function DropdownMenuItemTrigger< Item >( {
 	action,
 	onClick,
 	items,
@@ -101,7 +100,7 @@ function DropdownMenuItemTrigger< Item extends AnyItem >( {
 	);
 }
 
-export function ActionModal< Item extends AnyItem >( {
+export function ActionModal< Item >( {
 	action,
 	items,
 	closeModal,
@@ -124,7 +123,7 @@ export function ActionModal< Item extends AnyItem >( {
 	);
 }
 
-export function ActionWithModal< Item extends AnyItem >( {
+export function ActionWithModal< Item >( {
 	action,
 	items,
 	ActionTrigger,
@@ -153,7 +152,7 @@ export function ActionWithModal< Item extends AnyItem >( {
 	);
 }
 
-export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
+export function ActionsDropdownMenuGroup< Item >( {
 	actions,
 	item,
 }: ActionsDropdownMenuGroupProps< Item > ) {
@@ -186,7 +185,7 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
 	);
 }
 
-export default function ItemActions< Item extends AnyItem >( {
+export default function ItemActions< Item >( {
 	item,
 	actions,
 	isCompact,
@@ -247,7 +246,7 @@ export default function ItemActions< Item extends AnyItem >( {
 	);
 }
 
-function CompactItemActions< Item extends AnyItem >( {
+function CompactItemActions< Item >( {
 	item,
 	actions,
 }: CompactItemActionsProps< Item > ) {
@@ -258,7 +257,7 @@ function CompactItemActions< Item extends AnyItem >( {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ ! actions.length }
 					className="dataviews-all-actions-button"
 				/>

package/src/normalize-fields.ts

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

package/src/pagination.tsx

@@ -90,7 +90,7 @@ const Pagination = memo( function Pagination( {
 							} )
 						}
 						disabled={ currentPage === 1 }
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
 						icon={ chevronLeft }
 						showTooltip
@@ -102,7 +102,7 @@ const Pagination = memo( function Pagination( {
 							onChangeView( { ...view, page: currentPage + 1 } )
 						}
 						disabled={ currentPage >= totalPages }
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
 						icon={ chevronRight }
 						showTooltip

package/src/private-types.tsx

@@ -0,0 +1,2 @@
+export type SelectionOrUpdater = string[] | ( ( prev: string[] ) => string[] );
+export type SetSelection = ( selection: SelectionOrUpdater ) => void;