@wordpress/dataviews 2.1.0 → 2.2.0

package/src/item-actions.tsx

@@ -15,6 +15,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
+import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -112,16 +113,13 @@ export function ActionModal< Item extends AnyItem >( {
 			title={ action.modalHeader || label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal ?? ( () => {} ) }
+			focusOnMount="firstContentElement"
+			size="small"
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
 				action.id
 			) }` }
 		>
-			<action.RenderModal
-				items={ items }
-				closeModal={ closeModal }
-				onActionStart={ action.onActionStart }
-				onActionPerformed={ action.onActionPerformed }
-			/>
+			<action.RenderModal items={ items } closeModal={ closeModal } />
 		</Modal>
 	);
 }
@@ -159,6 +157,7 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
 	actions,
 	item,
 }: ActionsDropdownMenuGroupProps< Item > ) {
+	const registry = useRegistry();
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {
@@ -176,7 +175,9 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
 					<DropdownMenuItemTrigger
 						key={ action.id }
 						action={ action }
-						onClick={ () => action.callback( [ item ] ) }
+						onClick={ () => {
+							action.callback( [ item ], { registry } );
+						} }
 						items={ [ item ] }
 					/>
 				);
@@ -190,6 +191,7 @@ export default function ItemActions< Item extends AnyItem >( {
 	actions,
 	isCompact,
 }: ItemActionsProps< Item > ) {
+	const registry = useRegistry();
 	const { primaryActions, eligibleActions } = useMemo( () => {
 		// If an action is eligible for all items, doesn't need
 		// to provide the `isEligible` function.
@@ -233,7 +235,9 @@ export default function ItemActions< Item extends AnyItem >( {
 						<ButtonTrigger
 							key={ action.id }
 							action={ action }
-							onClick={ () => action.callback( [ item ] ) }
+							onClick={ () => {
+								action.callback( [ item ], { registry } );
+							} }
 							items={ [ item ] }
 						/>
 					);

package/src/lock-unlock.ts

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/dataviews'
 	);

package/src/single-selection-checkbox.tsx

@@ -29,7 +29,7 @@ export default function SingleSelectionCheckbox< Item extends AnyItem >( {
 	disabled,
 }: SingleSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
-	const isSelected = selection.includes( id );
+	const isSelected = ! disabled && selection.includes( id );
 	let selectionLabel;
 	if ( primaryField?.getValue && item ) {
 		// eslint-disable-next-line @wordpress/valid-sprintf

package/src/types.ts

@@ -327,28 +327,16 @@ interface ActionBase< Item extends AnyItem > {
 
 export interface ActionModal< Item extends AnyItem >
 	extends ActionBase< Item > {
-	/**
-	 * The callback to execute when the action has finished.
-	 */
-	onActionPerformed: ( ( items: Item[] ) => void ) | undefined;
-
-	/**
-	 * The callback to execute when the action is triggered.
-	 */
-	onActionStart: ( ( items: Item[] ) => void ) | undefined;
-
 	/**
 	 * Modal to render when the action is triggered.
 	 */
 	RenderModal: ( {
 		items,
 		closeModal,
-		onActionStart,
 		onActionPerformed,
 	}: {
 		items: Item[];
 		closeModal?: () => void;
-		onActionStart?: ( items: Item[] ) => void;
 		onActionPerformed?: ( items: Item[] ) => void;
 	} ) => ReactElement;
 
@@ -368,7 +356,13 @@ export interface ActionButton< Item extends AnyItem >
 	/**
 	 * The callback to execute when the action is triggered.
 	 */
-	callback: ( items: Item[] ) => void;
+	callback: (
+		items: Item[],
+		context: {
+			registry: any;
+			onActionPerformed?: ( items: Item[] ) => void;
+		}
+	) => void;
 }
 
 export type Action< Item extends AnyItem > =

package/src/view-list.tsx

@@ -27,6 +27,7 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
+import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -67,6 +68,7 @@ function ListItem< Item extends AnyItem >( {
 	store,
 	visibleFields,
 }: ListViewItemProps< Item > ) {
+	const registry = useRegistry();
 	const itemRef = useRef< HTMLElement >( null );
 	const labelId = `${ id }-label`;
 	const descriptionId = `${ id }-description`;
@@ -182,7 +184,7 @@ function ListItem< Item extends AnyItem >( {
 						</HStack>
 					</CompositeItem>
 				</div>
-				{ actions?.length > 0 && (
+				{ eligibleActions?.length > 0 && (
 					<HStack
 						spacing={ 1 }
 						justify="flex-end"
@@ -235,11 +237,12 @@ function ListItem< Item extends AnyItem >( {
 													primaryAction.isDestructive
 												}
 												size="compact"
-												onClick={ () =>
-													primaryAction.callback( [
-														item,
-													] )
-												}
+												onClick={ () => {
+													primaryAction.callback(
+														[ item ],
+														{ registry }
+													);
+												} }
 											/>
 										}
 									/>
@@ -315,7 +318,7 @@ export default function ViewList< Item extends AnyItem >(
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
 	const selectedItem = data?.findLast( ( item ) =>
-		selection.includes( item.id )
+		selection.includes( getItemId( item ) )
 	);
 
 	const mediaField = fields.find(

package/src/view-table.tsx

@@ -75,6 +75,7 @@ interface BulkSelectionCheckboxProps< Item extends AnyItem > {
 	onSelectionChange: ( items: Item[] ) => void;
 	data: Item[];
 	actions: Action< Item >[];
+	getItemId: ( item: Item ) => string;
 }
 
 interface TableRowProps< Item extends AnyItem > {
@@ -249,6 +250,7 @@ function BulkSelectionCheckbox< Item extends AnyItem >( {
 	onSelectionChange,
 	data,
 	actions,
+	getItemId,
 }: BulkSelectionCheckboxProps< Item > ) {
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
@@ -259,13 +261,18 @@ function BulkSelectionCheckbox< Item extends AnyItem >( {
 			);
 		} );
 	}, [ data, actions ] );
-	const areAllSelected = selection.length === selectableItems.length;
+	const selectedItems = data.filter(
+		( item ) =>
+			selection.includes( getItemId( item ) ) &&
+			selectableItems.includes( item )
+	);
+	const areAllSelected = selectedItems.length === selectableItems.length;
 	return (
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
 			checked={ areAllSelected }
-			indeterminate={ ! areAllSelected && !! selection.length }
+			indeterminate={ ! areAllSelected && !! selectedItems.length }
 			onChange={ () => {
 				if ( areAllSelected ) {
 					onSelectionChange( [] );
@@ -293,7 +300,7 @@ function TableRow< Item extends AnyItem >( {
 	data,
 }: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
-	const isSelected = selection.includes( id );
+	const isSelected = hasPossibleBulkAction && selection.includes( id );
 
 	const [ isHovered, setIsHovered ] = useState( false );
 
@@ -323,6 +330,9 @@ function TableRow< Item extends AnyItem >( {
 				isTouchDevice.current = true;
 			} }
 			onClick={ () => {
+				if ( ! hasPossibleBulkAction ) {
+					return;
+				}
 				if (
 					! isTouchDevice.current &&
 					document.getSelection()?.type !== 'Range'
@@ -495,6 +505,7 @@ function ViewTable< Item extends AnyItem >( {
 									onSelectionChange={ onSelectionChange }
 									data={ data }
 									actions={ actions }
+									getItemId={ getItemId }
 								/>
 							</th>
 						) }

package/tsconfig.json

@@ -9,6 +9,7 @@
 	"references": [
 		{ "path": "../components" },
 		{ "path": "../compose" },
+		{ "path": "../data" },
 		{ "path": "../element" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },