@wordpress/dataviews 4.2.0 → 4.3.0

package/src/components/dataviews-bulk-actions/index.tsx

@@ -2,47 +2,23 @@
  * WordPress dependencies
  */
 import {
-	privateApis as componentsPrivateApis,
 	Button,
-	Modal,
+	CheckboxControl,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
-import { unlock } from '../../lock-unlock';
-import type { Action, ActionModal } from '../../types';
-
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-} = unlock( componentsPrivateApis );
-
-interface ActionWithModalProps< Item > {
-	action: ActionModal< Item >;
-	selectedItems: Item[];
-	setActionWithModal: ( action?: ActionModal< Item > ) => void;
-	onMenuOpenChange: ( isOpen: boolean ) => void;
-}
-
-interface BulkActionsItemProps< Item > {
-	action: Action< Item >;
-	selectedItems: Item[];
-	setActionWithModal: ( action?: ActionModal< Item > ) => void;
-}
-
-interface ActionsMenuGroupProps< Item > {
-	actions: Action< Item >[];
-	selectedItems: Item[];
-	setActionWithModal: ( action?: ActionModal< Item > ) => void;
-}
+import { ActionWithModal } from '../dataviews-item-actions';
+import type { Action } from '../../types';
+import type { SetSelection } from '../../private-types';
+import type { ActionTriggerProps } from '../dataviews-item-actions';
 
 export function useHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
@@ -74,126 +50,231 @@ export function useSomeItemHasAPossibleBulkAction< Item >(
 	}, [ actions, data ] );
 }
 
-function ActionWithModal< Item >( {
-	action,
-	selectedItems,
-	setActionWithModal,
-	onMenuOpenChange,
-}: ActionWithModalProps< Item > ) {
-	const eligibleItems = useMemo( () => {
-		return selectedItems.filter(
-			( item ) => ! action.isEligible || action.isEligible( item )
-		);
-	}, [ action, selectedItems ] );
-	const { RenderModal, hideModalHeader } = action;
-	const onCloseModal = useCallback( () => {
-		setActionWithModal( undefined );
-	}, [ setActionWithModal ] );
+interface BulkSelectionCheckboxProps< Item > {
+	selection: string[];
+	onChangeSelection: SetSelection;
+	data: Item[];
+	actions: Action< Item >[];
+	getItemId: ( item: Item ) => string;
+}
 
-	if ( ! eligibleItems.length ) {
-		return null;
-	}
+export function BulkSelectionCheckbox< Item >( {
+	selection,
+	onChangeSelection,
+	data,
+	actions,
+	getItemId,
+}: BulkSelectionCheckboxProps< Item > ) {
+	const selectableItems = useMemo( () => {
+		return data.filter( ( item ) => {
+			return actions.some(
+				( action ) =>
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+			);
+		} );
+	}, [ data, actions ] );
+	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 && !! selectedItems.length }
+			onChange={ () => {
+				if ( areAllSelected ) {
+					onChangeSelection( [] );
+				} else {
+					onChangeSelection(
+						selectableItems.map( ( item ) => getItemId( item ) )
+					);
+				}
+			} }
+			aria-label={
+				areAllSelected ? __( 'Deselect all' ) : __( 'Select all' )
+			}
+		/>
+	);
+}
+
+interface ActionButtonProps< Item > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	actionInProgress: string | null;
+	setActionInProgress: ( actionId: string | null ) => void;
+}
+
+interface ToolbarContentProps< Item > {
+	selection: string[];
+	onChangeSelection: SetSelection;
+	data: Item[];
+	actions: Action< Item >[];
+	getItemId: ( item: Item ) => string;
+}
 
+function ActionTrigger< Item >( {
+	action,
+	onClick,
+	isBusy,
+	items,
+}: ActionTriggerProps< Item > ) {
 	const label =
-		typeof action.label === 'string'
-			? action.label
-			: action.label( selectedItems );
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<Modal
-			title={ ! hideModalHeader ? label : undefined }
-			__experimentalHideHeader={ !! hideModalHeader }
-			onRequestClose={ onCloseModal }
-			overlayClassName="dataviews-bulk-actions__modal"
-		>
-			<RenderModal
-				items={ eligibleItems }
-				closeModal={ onCloseModal }
-				onActionPerformed={ () => onMenuOpenChange( false ) }
-			/>
-		</Modal>
+		<Button
+			disabled={ isBusy }
+			accessibleWhenDisabled
+			label={ label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+			isBusy={ isBusy }
+			tooltipPosition="top"
+		/>
 	);
 }
 
-function BulkActionItem< Item >( {
+const EMPTY_ARRAY: [] = [];
+
+function ActionButton< Item >( {
 	action,
 	selectedItems,
-	setActionWithModal,
-}: BulkActionsItemProps< Item > ) {
+	actionInProgress,
+	setActionInProgress,
+}: ActionButtonProps< Item > ) {
 	const registry = useRegistry();
-	const eligibleItems = useMemo( () => {
-		return selectedItems.filter(
-			( item ) => ! action.isEligible || action.isEligible( item )
-		);
+	const selectedEligibleItems = useMemo( () => {
+		return selectedItems.filter( ( item ) => {
+			return ! action.isEligible || action.isEligible( item );
+		} );
 	}, [ action, selectedItems ] );
-
-	const shouldShowModal = 'RenderModal' in action;
-
+	if ( 'RenderModal' in action ) {
+		return (
+			<ActionWithModal
+				key={ action.id }
+				action={ action }
+				items={ selectedEligibleItems }
+				ActionTrigger={ ActionTrigger }
+			/>
+		);
+	}
 	return (
-		<DropdownMenuItem
+		<ActionTrigger
 			key={ action.id }
-			hideOnClick={ ! shouldShowModal }
+			action={ action }
 			onClick={ async () => {
-				if ( shouldShowModal ) {
-					setActionWithModal( action );
-				} else {
-					action.callback( eligibleItems, { registry } );
-				}
+				setActionInProgress( action.id );
+				await action.callback( selectedItems, {
+					registry,
+				} );
+				setActionInProgress( null );
 			} }
-			suffix={ eligibleItems.length }
-		>
-			{ action.label }
-		</DropdownMenuItem>
+			items={ selectedEligibleItems }
+			isBusy={ actionInProgress === action.id }
+		/>
 	);
 }
 
-function ActionsMenuGroup< Item >( {
-	actions,
-	selectedItems,
-	setActionWithModal,
-}: ActionsMenuGroupProps< Item > ) {
-	const elligibleActions = useMemo( () => {
-		return actions.filter( ( action ) => {
-			return selectedItems.some(
-				( item ) => ! action.isEligible || action.isEligible( item )
-			);
-		} );
-	}, [ actions, selectedItems ] );
-	if ( ! elligibleActions.length ) {
-		return null;
-	}
+function renderFooterContent< Item >(
+	data: Item[],
+	actions: Action< Item >[],
+	getItemId: ( item: Item ) => string,
+	selection: string[],
+	actionsToShow: Action< Item >[],
+	selectedItems: Item[],
+	actionInProgress: string | null,
+	setActionInProgress: ( actionId: string | null ) => void,
+	onChangeSelection: SetSelection
+) {
+	const message =
+		selectedItems.length > 0
+			? sprintf(
+					/* translators: %d: number of items. */
+					_n(
+						'%d Item selected',
+						'%d Items selected',
+						selectedItems.length
+					),
+					selectedItems.length
+			  )
+			: sprintf(
+					/* translators: %d: number of items. */
+					_n( '%d Item', '%d Items', data.length ),
+					data.length
+			  );
 	return (
-		<>
-			<DropdownMenuGroup>
-				{ elligibleActions.map( ( action ) => (
-					<BulkActionItem
-						key={ action.id }
-						action={ action }
-						selectedItems={ selectedItems }
-						setActionWithModal={ setActionWithModal }
+		<HStack
+			expanded={ false }
+			className="dataviews-bulk-actions-footer__container"
+			spacing={ 3 }
+		>
+			<BulkSelectionCheckbox
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				data={ data }
+				actions={ actions }
+				getItemId={ getItemId }
+			/>
+			<span className="dataviews-bulk-actions-footer__item-count">
+				{ message }
+			</span>
+			<HStack
+				className="dataviews-bulk-actions-footer__action-buttons"
+				expanded={ false }
+				spacing={ 1 }
+			>
+				{ actionsToShow.map( ( action ) => {
+					return (
+						<ActionButton
+							key={ action.id }
+							action={ action }
+							selectedItems={ selectedItems }
+							actionInProgress={ actionInProgress }
+							setActionInProgress={ setActionInProgress }
+						/>
+					);
+				} ) }
+				{ selectedItems.length > 0 && (
+					<Button
+						icon={ closeSmall }
+						showTooltip
+						tooltipPosition="top"
+						size="compact"
+						label={ __( 'Cancel' ) }
+						disabled={ !! actionInProgress }
+						accessibleWhenDisabled={ false }
+						onClick={ () => {
+							onChangeSelection( EMPTY_ARRAY );
+						} }
 					/>
-				) ) }
-			</DropdownMenuGroup>
-			<DropdownMenuSeparator />
-		</>
+				) }
+			</HStack>
+		</HStack>
 	);
 }
 
-function _BulkActions() {
-	const {
-		data,
-		actions = [],
-		selection,
-		onChangeSelection,
-		getItemId,
-	} = useContext( DataViewsContext );
+function FooterContent< Item >( {
+	selection,
+	actions,
+	onChangeSelection,
+	data,
+	getItemId,
+}: ToolbarContentProps< Item > ) {
+	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
+		null
+	);
+	const footerContent = useRef< JSX.Element | null >( null );
+
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
-	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
-	const [ actionWithModal, setActionWithModal ] = useState<
-		ActionModal< any > | undefined
-	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
 			return bulkActions.some(
@@ -202,8 +283,6 @@ function _BulkActions() {
 		} );
 	}, [ data, bulkActions ] );
 
-	const numberSelectableItems = selectableItems.length;
-
 	const selectedItems = useMemo( () => {
 		return data.filter(
 			( item ) =>
@@ -212,94 +291,66 @@ function _BulkActions() {
 		);
 	}, [ selection, data, getItemId, selectableItems ] );
 
-	const areAllSelected = selectedItems.length === numberSelectableItems;
-
-	if ( bulkActions.length === 0 ) {
-		return null;
-	}
-	return (
-		<>
-			<DropdownMenu
-				open={ isMenuOpen }
-				onOpenChange={ onMenuOpenChange }
-				label={ __( 'Bulk actions' ) }
-				style={ { minWidth: '240px' } }
-				trigger={
-					<Button
-						className="dataviews-bulk-actions__edit-button"
-						__next40pxDefaultSize
-						variant="tertiary"
-						size="compact"
-					>
-						{ selectedItems.length
-							? sprintf(
-									/* translators: %d: Number of items. */
-									_n(
-										'Edit %d item',
-										'Edit %d items',
-										selectedItems.length
-									),
-									selectedItems.length
-							  )
-							: __( 'Bulk edit' ) }
-					</Button>
-				}
-			>
-				<ActionsMenuGroup
-					actions={ bulkActions }
-					setActionWithModal={ setActionWithModal }
-					selectedItems={ selectedItems }
-				/>
-				<DropdownMenuGroup>
-					<DropdownMenuItem
-						disabled={ areAllSelected }
-						hideOnClick={ false }
-						onClick={ () => {
-							onChangeSelection(
-								selectableItems.map( ( item ) =>
-									getItemId( item )
-								)
-							);
-						} }
-						suffix={ numberSelectableItems }
-					>
-						{ __( 'Select all' ) }
-					</DropdownMenuItem>
-					<DropdownMenuItem
-						disabled={ selection.length === 0 }
-						hideOnClick={ false }
-						onClick={ () => {
-							onChangeSelection( [] );
-						} }
-					>
-						{ __( 'Deselect' ) }
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-			</DropdownMenu>
-			{ actionWithModal && (
-				<ActionWithModal
-					action={ actionWithModal }
-					selectedItems={ selectedItems }
-					setActionWithModal={ setActionWithModal }
-					onMenuOpenChange={ onMenuOpenChange }
-				/>
-			) }
-		</>
+	const actionsToShow = useMemo(
+		() =>
+			actions.filter( ( action ) => {
+				return (
+					action.supportsBulk &&
+					action.icon &&
+					selectedItems.some(
+						( item ) =>
+							! action.isEligible || action.isEligible( item )
+					)
+				);
+			} ),
+		[ actions, selectedItems ]
 	);
+	if ( ! actionInProgress ) {
+		if ( footerContent.current ) {
+			footerContent.current = null;
+		}
+		return renderFooterContent(
+			data,
+			actions,
+			getItemId,
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onChangeSelection
+		);
+	} else if ( ! footerContent.current ) {
+		footerContent.current = renderFooterContent(
+			data,
+			actions,
+			getItemId,
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onChangeSelection
+		);
+	}
+	return footerContent.current;
 }
 
-export default function BulkActions() {
-	const { data, actions = [], view } = useContext( DataViewsContext );
-	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
-		actions,
-		data
+export function BulkActionsFooter() {
+	const {
+		data,
+		selection,
+		actions = EMPTY_ARRAY,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
+	return (
+		<FooterContent
+			selection={ selection }
+			onChangeSelection={ onChangeSelection }
+			data={ data }
+			actions={ actions }
+			getItemId={ getItemId }
+		/>
 	);
-	if (
-		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
-		! hasPossibleBulkAction
-	) {
-		return null;
-	}
-
-	return <_BulkActions />;
 }

package/src/components/dataviews-bulk-actions/style.scss

@@ -1,7 +1,12 @@
-.dataviews-bulk-actions__modal {
-	z-index: z-index(".dataviews-bulk-actions__modal");
+
+.dataviews-bulk-actions-footer__item-count {
+	color: $gray-900;
+	font-weight: 500;
+	font-size: 11px;
+	text-transform: uppercase;
 }
 
-.dataviews-bulk-actions__edit-button.components-button {
-	flex-shrink: 0;
+.dataviews-bulk-actions-footer__container {
+	margin-right: auto;
+	min-height: $grid-unit-40;
 }

package/src/components/dataviews-filters/add-filter.tsx

@@ -19,11 +19,7 @@ import { forwardRef } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import type { NormalizedFilter, View } from '../../types';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 interface AddFilterProps {
 	filters: NormalizedFilter[];
@@ -43,10 +39,10 @@ export function AddFilterDropdownMenu( {
 } ) {
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
-		<DropdownMenu trigger={ trigger }>
+		<DropdownMenuV2 trigger={ trigger }>
 			{ inactiveFilters.map( ( filter ) => {
 				return (
-					<DropdownMenuItem
+					<DropdownMenuV2.Item
 						key={ filter.field }
 						onClick={ () => {
 							setOpenedFilter( filter.field );
@@ -64,13 +60,13 @@ export function AddFilterDropdownMenu( {
 							} );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ filter.name }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
 				);
 			} ) }
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }