@wordpress/dataviews 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -29,16 +30,14 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/primitives": "^3.55.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"classnames": "^2.3.1",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/primitives": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
@@ -47,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Ref } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -12,6 +17,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { NormalizedFilter, View } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -19,7 +25,17 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {
+interface AddFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+}
+
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
 	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
 		return null;
 	}

package/src/bulk-actions-toolbar.tsx

@@ -0,0 +1,272 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	Toolbar,
+	ToolbarGroup,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useMemo, useState, useRef } from '@wordpress/element';
+import { _n, sprintf, __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import { useReducedMotion } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ActionWithModal } from './item-actions';
+import type { Action, AnyItem } from './types';
+import type { ActionTriggerProps } from './item-actions';
+
+interface ActionButtonProps< Item extends AnyItem > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	actionInProgress: string | null;
+	setActionInProgress: ( actionId: string | null ) => void;
+}
+
+interface ToolbarContentProps< Item extends AnyItem > {
+	selection: string[];
+	actionsToShow: Action< Item >[];
+	selectedItems: Item[];
+	onSelectionChange: ( selection: Item[] ) => void;
+}
+
+interface BulkActionsToolbarProps< Item extends AnyItem > {
+	data: Item[];
+	selection: string[];
+	actions: Action< Item >[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+}
+
+const SNACKBAR_VARIANTS = {
+	init: {
+		bottom: -48,
+	},
+	open: {
+		bottom: 24,
+		transition: {
+			bottom: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },
+		},
+	},
+	exit: {
+		opacity: 0,
+		bottom: 24,
+		transition: {
+			opacity: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },
+		},
+	},
+};
+
+function ActionTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+	isBusy,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<ToolbarButton
+			disabled={ isBusy }
+			label={ label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+			isBusy={ isBusy }
+			__experimentalIsFocusable
+			tooltipPosition="top"
+		/>
+	);
+}
+
+const EMPTY_ARRAY: [] = [];
+
+function ActionButton< Item extends AnyItem >( {
+	action,
+	selectedItems,
+	actionInProgress,
+	setActionInProgress,
+}: ActionButtonProps< Item > ) {
+	const selectedEligibleItems = useMemo( () => {
+		return selectedItems.filter( ( item ) => {
+			return ! action.isEligible || action.isEligible( item );
+		} );
+	}, [ action, selectedItems ] );
+	if ( 'RenderModal' in action ) {
+		return (
+			<ActionWithModal
+				key={ action.id }
+				action={ action }
+				items={ selectedEligibleItems }
+				ActionTrigger={ ActionTrigger }
+			/>
+		);
+	}
+	return (
+		<ActionTrigger
+			key={ action.id }
+			action={ action }
+			onClick={ () => {
+				setActionInProgress( action.id );
+				action.callback( selectedItems );
+			} }
+			items={ selectedEligibleItems }
+			isBusy={ actionInProgress === action.id }
+		/>
+	);
+}
+
+function renderToolbarContent< Item extends AnyItem >(
+	selection: string[],
+	actionsToShow: Action< Item >[],
+	selectedItems: Item[],
+	actionInProgress: string | null,
+	setActionInProgress: ( actionId: string | null ) => void,
+	onSelectionChange: ( selection: Item[] ) => void
+) {
+	return (
+		<>
+			<ToolbarGroup>
+				<div className="dataviews-bulk-actions__selection-count">
+					{ selection.length === 1
+						? __( '1 item selected' )
+						: sprintf(
+								// translators: %s: Total number of selected items.
+								_n(
+									'%s item selected',
+									'%s items selected',
+									selection.length
+								),
+								selection.length
+						  ) }
+				</div>
+			</ToolbarGroup>
+			<ToolbarGroup>
+				{ actionsToShow.map( ( action ) => {
+					return (
+						<ActionButton
+							key={ action.id }
+							action={ action }
+							selectedItems={ selectedItems }
+							actionInProgress={ actionInProgress }
+							setActionInProgress={ setActionInProgress }
+						/>
+					);
+				} ) }
+			</ToolbarGroup>
+			<ToolbarGroup>
+				<ToolbarButton
+					icon={ closeSmall }
+					showTooltip
+					tooltipPosition="top"
+					label={ __( 'Cancel' ) }
+					disabled={ !! actionInProgress }
+					onClick={ () => {
+						onSelectionChange( EMPTY_ARRAY );
+					} }
+				/>
+			</ToolbarGroup>
+		</>
+	);
+}
+
+function ToolbarContent< Item extends AnyItem >( {
+	selection,
+	actionsToShow,
+	selectedItems,
+	onSelectionChange,
+}: ToolbarContentProps< Item > ) {
+	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
+		null
+	);
+	const buttons = useRef< JSX.Element | null >( null );
+	if ( ! actionInProgress ) {
+		if ( buttons.current ) {
+			buttons.current = null;
+		}
+		return renderToolbarContent(
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onSelectionChange
+		);
+	} else if ( ! buttons.current ) {
+		buttons.current = renderToolbarContent(
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onSelectionChange
+		);
+	}
+	return buttons.current;
+}
+
+export default function BulkActionsToolbar< Item extends AnyItem >( {
+	data,
+	selection,
+	actions = EMPTY_ARRAY,
+	onSelectionChange,
+	getItemId,
+}: BulkActionsToolbarProps< Item > ) {
+	const isReducedMotion = useReducedMotion();
+	const selectedItems = useMemo( () => {
+		return data.filter( ( item ) =>
+			selection.includes( getItemId( item ) )
+		);
+	}, [ selection, data, getItemId ] );
+
+	const actionsToShow = useMemo(
+		() =>
+			actions.filter( ( action ) => {
+				return (
+					action.supportsBulk &&
+					action.icon &&
+					selectedItems.some(
+						( item ) =>
+							! action.isEligible || action.isEligible( item )
+					)
+				);
+			} ),
+		[ actions, selectedItems ]
+	);
+
+	if (
+		( selection && selection.length === 0 ) ||
+		actionsToShow.length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<AnimatePresence>
+			<motion.div
+				layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
+				initial="init"
+				animate="open"
+				exit="exit"
+				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
+				className="dataviews-bulk-actions"
+			>
+				<Toolbar label={ __( 'Bulk actions' ) }>
+					<div className="dataviews-bulk-actions-toolbar-wrapper">
+						<ToolbarContent
+							selection={ selection }
+							actionsToShow={ actionsToShow }
+							selectedItems={ selectedItems }
+							onSelectionChange={ onSelectionChange }
+						/>
+					</div>
+				</Toolbar>
+			</motion.div>
+		</AnimatePresence>
+	);
+}

package/src/{bulk-actions.js → bulk-actions.tsx}

@@ -13,6 +13,7 @@ import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Action, ActionModal, AnyItem } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -21,40 +22,85 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-export function useHasAPossibleBulkAction( actions, item ) {
+interface ActionWithModalProps< Item extends AnyItem > {
+	action: ActionModal< Item >;
+	selectedItems: Item[];
+	setActionWithModal: ( action?: ActionModal< Item > ) => void;
+	onMenuOpenChange: ( isOpen: boolean ) => void;
+}
+
+interface BulkActionsItemProps< Item extends AnyItem > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	setActionWithModal: ( action?: ActionModal< Item > ) => void;
+}
+
+interface ActionsMenuGroupProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	selectedItems: Item[];
+	setActionWithModal: ( action?: ActionModal< Item > ) => void;
+}
+
+interface BulkActionsProps< Item extends AnyItem > {
+	data: Item[];
+	actions: Action< Item >[];
+	selection: string[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+}
+
+export function useHasAPossibleBulkAction< Item extends AnyItem >(
+	actions: Action< Item >[],
+	item: Item
+) {
 	return useMemo( () => {
 		return actions.some( ( action ) => {
-			return action.supportsBulk && action.isEligible( item );
+			return (
+				action.supportsBulk &&
+				( ! action.isEligible || action.isEligible( item ) )
+			);
 		} );
 	}, [ actions, item ] );
 }
 
-export function useSomeItemHasAPossibleBulkAction( actions, data ) {
+export 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 ] );
 }
 
-function ActionWithModal( {
+function ActionWithModal< Item extends AnyItem >( {
 	action,
 	selectedItems,
 	setActionWithModal,
 	onMenuOpenChange,
-} ) {
+}: ActionWithModalProps< Item > ) {
 	const eligibleItems = useMemo( () => {
-		return selectedItems.filter( ( item ) => action.isEligible( item ) );
+		return selectedItems.filter(
+			( item ) => ! action.isEligible || action.isEligible( item )
+		);
 	}, [ action, selectedItems ] );
 	const { RenderModal, hideModalHeader } = action;
 	const onCloseModal = useCallback( () => {
 		setActionWithModal( undefined );
 	}, [ setActionWithModal ] );
+	const label =
+		typeof action.label === 'string'
+			? action.label
+			: action.label( selectedItems );
 	return (
 		<Modal
-			title={ ! hideModalHeader && action.label }
+			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
 			overlayClassName="dataviews-action-modal"
@@ -62,18 +108,24 @@ function ActionWithModal( {
 			<RenderModal
 				items={ eligibleItems }
 				closeModal={ onCloseModal }
-				onPerform={ () => onMenuOpenChange( false ) }
+				onActionPerformed={ () => onMenuOpenChange( false ) }
 			/>
 		</Modal>
 	);
 }
 
-function BulkActionItem( { action, selectedItems, setActionWithModal } ) {
+function BulkActionItem< Item extends AnyItem >( {
+	action,
+	selectedItems,
+	setActionWithModal,
+}: BulkActionsItemProps< Item > ) {
 	const eligibleItems = useMemo( () => {
-		return selectedItems.filter( ( item ) => action.isEligible( item ) );
+		return selectedItems.filter(
+			( item ) => ! action.isEligible || action.isEligible( item )
+		);
 	}, [ action, selectedItems ] );
 
-	const shouldShowModal = !! action.RenderModal;
+	const shouldShowModal = 'RenderModal' in action;
 
 	return (
 		<DropdownMenuItem
@@ -96,7 +148,11 @@ function BulkActionItem( { action, selectedItems, setActionWithModal } ) {
 	);
 }
 
-function ActionsMenuGroup( { actions, selectedItems, setActionWithModal } ) {
+function ActionsMenuGroup< Item extends AnyItem >( {
+	actions,
+	selectedItems,
+	setActionWithModal,
+}: ActionsMenuGroupProps< Item > ) {
 	return (
 		<>
 			<DropdownMenuGroup>
@@ -114,22 +170,26 @@ function ActionsMenuGroup( { actions, selectedItems, setActionWithModal } ) {
 	);
 }
 
-export default function BulkActions( {
+export default function BulkActions< Item extends AnyItem >( {
 	data,
 	actions,
 	selection,
 	onSelectionChange,
 	getItemId,
-} ) {
+}: BulkActionsProps< Item > ) {
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
-	const [ actionWithModal, setActionWithModal ] = useState();
+	const [ actionWithModal, setActionWithModal ] = useState<
+		ActionModal< Item > | undefined
+	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
-			return bulkActions.some( ( action ) => action.isEligible( item ) );
+			return bulkActions.some(
+				( action ) => ! action.isEligible || action.isEligible( item )
+			);
 		} );
 	}, [ data, bulkActions ] );
 

package/src/constants.ts

@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { Operator } from './types';
+
 // Filter operators.
 export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';
@@ -19,7 +24,7 @@ export const ALL_OPERATORS = [
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
 ];
-export const OPERATORS = {
+export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 	[ OPERATOR_IS ]: {
 		key: 'is-filter',
 		label: __( 'Is' ),
@@ -46,10 +51,12 @@ export const OPERATORS = {
 	},
 };
 
-// Sorting
-export const SORTING_DIRECTIONS = {
-	asc: { label: __( 'Sort ascending' ) },
-	desc: { label: __( 'Sort descending' ) },
+export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;
+export const sortArrows = { asc: '↑', desc: '↓' };
+export const sortValues = { asc: 'ascending', desc: 'descending' } as const;
+export const sortLabels = {
+	asc: __( 'Sort ascending' ),
+	desc: __( 'Sort descending' ),
 };
 
 // View layouts.

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,21 +20,47 @@ import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 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';
 
-const defaultGetItemId = ( item ) => item.id;
+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: 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,
@@ -42,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 (
@@ -66,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(
@@ -127,22 +157,32 @@ export default function DataViews( {
 				/>
 			</HStack>
 			<ViewComponent
-				fields={ _fields }
-				view={ view }
-				onChangeView={ onChangeView }
 				actions={ actions }
 				data={ data }
+				fields={ _fields }
 				getItemId={ getItemId }
 				isLoading={ isLoading }
+				onChangeView={ onChangeView }
 				onSelectionChange={ onSetSelection }
 				selection={ selection }
 				setOpenedFilter={ setOpenedFilter }
+				view={ view }
 			/>
 			<Pagination
 				view={ view }
 				onChangeView={ onChangeView }
 				paginationInfo={ paginationInfo }
 			/>
+			{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+				hasPossibleBulkAction && (
+					<BulkActionsToolbar
+						data={ data }
+						actions={ actions }
+						selection={ selection }
+						onSelectionChange={ onSetSelection }
+						getItemId={ getItemId }
+					/>
+				) }
 		</div>
 	);
 }