@wordpress/dataviews 0.3.0 → 0.4.0

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -122,6 +122,10 @@
   max-width: 240px;
 }
 
+.dataviews-filters__view-actions.components-h-stack {
+  align-items: center;
+}
+
 .dataviews-filters-button {
   position: relative;
 }
@@ -160,6 +164,10 @@
   margin: 32px 0 16px;
 }
 
+.dataviews-view-table-wrapper {
+  overflow-x: auto;
+}
+
 .dataviews-view-table {
   width: 100%;
   text-indent: 0;
@@ -182,12 +190,26 @@
 .dataviews-view-table td,
 .dataviews-view-table th {
   padding: 12px;
-  min-width: 160px;
+  white-space: nowrap;
+}
+@media (min-width: 1440px) {
+  .dataviews-view-table td,
+.dataviews-view-table th {
+    min-width: 200px;
+  }
 }
 .dataviews-view-table td[data-field-id=actions],
 .dataviews-view-table th[data-field-id=actions] {
   text-align: right;
 }
+.dataviews-view-table td.dataviews-view-table__checkbox-column,
+.dataviews-view-table th.dataviews-view-table__checkbox-column {
+  padding-right: 0;
+}
+.dataviews-view-table td .components-checkbox-control__input-container,
+.dataviews-view-table th .components-checkbox-control__input-container {
+  margin: 4px;
+}
 .dataviews-view-table tr {
   border-bottom: 1px solid #f0f0f0;
 }
@@ -211,9 +233,25 @@
 .dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-view-table tr:hover td {
+.dataviews-view-table tr:hover {
   background-color: #f8f8f8;
 }
+.dataviews-view-table tr .components-checkbox-control__input {
+  opacity: 0;
+}
+.dataviews-view-table tr .components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input:focus {
+  opacity: 1;
+}
+.dataviews-view-table tr:focus-within .components-checkbox-control__input, .dataviews-view-table tr:hover .components-checkbox-control__input {
+  opacity: 1;
+}
+.dataviews-view-table tr.is-selected {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  color: #757575;
+}
+.dataviews-view-table tr.is-selected:hover {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
 .dataviews-view-table thead tr {
   border: 0;
 }
@@ -230,6 +268,14 @@
   font-weight: 500;
   padding-left: 4px;
 }
+.dataviews-view-table tbody td {
+  vertical-align: top;
+}
+.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
 .dataviews-view-table .dataviews-view-table-header-button {
   padding: 4px 8px;
   font-size: 11px;
@@ -248,6 +294,50 @@
 .dataviews-view-table .dataviews-view-table-header {
   padding-left: 4px;
 }
+.dataviews-view-table .dataviews-view-table__actions-column {
+  width: 1%;
+}
+
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e1e1e;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+}
+.dataviews-view-list__primary-field a,
+.dataviews-view-grid__primary-field a,
+.dataviews-view-table__primary-field a {
+  text-decoration: none;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+}
+.dataviews-view-list__primary-field a:hover,
+.dataviews-view-grid__primary-field a:hover,
+.dataviews-view-table__primary-field a:hover {
+  color: #1e1e1e;
+}
+.dataviews-view-list__primary-field button.components-button.is-link,
+.dataviews-view-grid__primary-field button.components-button.is-link,
+.dataviews-view-table__primary-field button.components-button.is-link {
+  text-decoration: none;
+  color: inherit;
+  font-weight: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+}
 
 .dataviews-view-grid {
   margin-bottom: 24px;
@@ -264,47 +354,45 @@
     grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   }
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field .dataviews-view-grid__title-field {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  font-size: 13px;
-  width: 100%;
+.dataviews-view-grid .dataviews-view-grid__card {
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+  height: 100%;
+  justify-content: flex-start;
 }
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field .dataviews-view-grid__title-field a,
-.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field button.dataviews-view-grid__title-field {
-  font-weight: 500;
-  color: #1e1e1e;
-  text-decoration: none;
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
+  padding: 0 4px;
+}
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
+  min-height: 40px;
 }
 .dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
   aspect-ratio: 1/1;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  overflow: hidden;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f0f0f0;
+  border-radius: 3px 3px 0 0;
 }
-.dataviews-view-grid .dataviews-view-grid__media > * {
-  -o-object-fit: cover;
-     object-fit: cover;
+.dataviews-view-grid .dataviews-view-grid__media img {
+  object-fit: cover;
   width: 100%;
   height: 100%;
 }
 .dataviews-view-grid .dataviews-view-grid__primary-field {
-  min-height: 24px;
+  padding: 8px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields {
   position: relative;
   font-size: 12px;
   line-height: 16px;
 }
-.dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-header {
-  color: #757575;
+.dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
+  padding: 12px;
+  padding-top: 0;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
-  color: #1e1e1e;
+  color: #757575;
 }
 
 .dataviews-view-list {
@@ -331,6 +419,7 @@
 .dataviews-view-list li:not(.is-selected):hover {
   color: var(--wp-admin-theme-color);
 }
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
 .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
@@ -339,8 +428,10 @@
   background-color: var(--wp-admin-theme-color);
   color: #fff;
 }
+.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
 .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
 .dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .components-button,
+.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__primary-field,
 .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
 .dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .components-button {
   color: #fff;
@@ -371,11 +462,18 @@
   white-space: nowrap;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper {
-  min-width: 32px;
+  width: 32px;
   height: 32px;
   border-radius: 4px;
   overflow: hidden;
   position: relative;
+  flex-shrink: 0;
+  background-color: #f0f0f0;
+}
+.dataviews-view-list .dataviews-view-list__media-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
   content: "";
@@ -404,6 +502,9 @@
 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:last-child {
   margin-right: 0;
 }
+.dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:empty {
+  display: none;
+}
 .dataviews-view-list + .dataviews-pagination {
   justify-content: space-between;
 }
@@ -429,7 +530,23 @@
   padding: 0 32px;
 }
 
+.dataviews-view-table-selection-checkbox label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .dataviews-filters__custom-menu-radio-item-prefix {
   display: block;
   width: 24px;
+}
+
+.dataviews-bulk-edit-button.components-button {
+  flex-shrink: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "0.3.0",
+	"version": "0.4.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",
@@ -28,15 +28,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.49.0",
-		"@wordpress/components": "^25.15.0",
-		"@wordpress/compose": "^6.26.0",
-		"@wordpress/element": "^5.26.0",
-		"@wordpress/i18n": "^4.49.0",
-		"@wordpress/icons": "^9.40.0",
-		"@wordpress/keycodes": "^3.49.0",
-		"@wordpress/primitives": "^3.47.0",
-		"@wordpress/private-apis": "^0.31.0",
+		"@wordpress/a11y": "^3.50.0",
+		"@wordpress/components": "^25.16.0",
+		"@wordpress/compose": "^6.27.0",
+		"@wordpress/element": "^5.27.0",
+		"@wordpress/i18n": "^4.50.0",
+		"@wordpress/icons": "^9.41.0",
+		"@wordpress/keycodes": "^3.50.0",
+		"@wordpress/primitives": "^3.48.0",
+		"@wordpress/private-apis": "^0.32.0",
 		"classnames": "^2.3.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
+	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
 }

package/src/bulk-actions.js

@@ -0,0 +1,187 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { useMemo, useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+} = unlock( componentsPrivateApis );
+
+function ActionWithModal( {
+	action,
+	selectedItems,
+	setActionWithModal,
+	onMenuOpenChange,
+} ) {
+	const eligibleItems = useMemo( () => {
+		return selectedItems.filter( ( item ) => action.isEligible( item ) );
+	}, [ action, selectedItems ] );
+	const { RenderModal, hideModalHeader } = action;
+	const onCloseModal = useCallback( () => {
+		setActionWithModal( undefined );
+	}, [ setActionWithModal ] );
+	return (
+		<Modal
+			title={ ! hideModalHeader && action.label }
+			__experimentalHideHeader={ !! hideModalHeader }
+			onRequestClose={ onCloseModal }
+			overlayClassName="dataviews-action-modal"
+		>
+			<RenderModal
+				items={ eligibleItems }
+				closeModal={ onCloseModal }
+				onPerform={ () => onMenuOpenChange( false ) }
+			/>
+		</Modal>
+	);
+}
+
+function BulkActionItem( { action, selectedItems, setActionWithModal } ) {
+	const eligibleItems = useMemo( () => {
+		return selectedItems.filter( ( item ) => action.isEligible( item ) );
+	}, [ action, selectedItems ] );
+
+	const shouldShowModal = !! action.RenderModal;
+
+	return (
+		<DropdownMenuItem
+			key={ action.id }
+			disabled={ eligibleItems.length === 0 }
+			hideOnClick={ ! shouldShowModal }
+			onClick={ async () => {
+				if ( shouldShowModal ) {
+					setActionWithModal( action );
+				} else {
+					await action.callback( eligibleItems );
+				}
+			} }
+			suffix={
+				eligibleItems.length > 0 ? eligibleItems.length : undefined
+			}
+		>
+			{ action.label }
+		</DropdownMenuItem>
+	);
+}
+
+function ActionsMenuGroup( { actions, selectedItems, setActionWithModal } ) {
+	return (
+		<>
+			<DropdownMenuGroup>
+				{ actions.map( ( action ) => (
+					<BulkActionItem
+						key={ action.id }
+						action={ action }
+						selectedItems={ selectedItems }
+						setActionWithModal={ setActionWithModal }
+					/>
+				) ) }
+			</DropdownMenuGroup>
+			<DropdownMenuSeparator />
+		</>
+	);
+}
+
+export default function BulkActions( {
+	data,
+	actions,
+	selection,
+	onSelectionChange,
+	getItemId,
+} ) {
+	const bulkActions = useMemo(
+		() => actions.filter( ( action ) => action.supportsBulk ),
+		[ actions ]
+	);
+	const areAllSelected = selection && selection.length === data.length;
+	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
+	const [ actionWithModal, setActionWithModal ] = useState();
+	const selectedItems = useMemo( () => {
+		return data.filter( ( item ) =>
+			selection.includes( getItemId( item ) )
+		);
+	}, [ selection, data, getItemId ] );
+
+	if ( bulkActions.length === 0 ) {
+		return null;
+	}
+	return (
+		<>
+			<DropdownMenu
+				open={ isMenuOpen }
+				onOpenChange={ onMenuOpenChange }
+				label={ __( 'Bulk actions' ) }
+				style={ { minWidth: '240px' } }
+				trigger={
+					<Button
+						className="dataviews-bulk-edit-button"
+						__next40pxDefaultSize
+						variant="tertiary"
+						size="compact"
+					>
+						{ selection.length
+							? sprintf(
+									/* translators: %d: Number of items. */
+									_n(
+										'Edit %d item',
+										'Edit %d items',
+										selection.length
+									),
+									selection.length
+							  )
+							: __( 'Bulk edit' ) }
+					</Button>
+				}
+			>
+				<ActionsMenuGroup
+					actions={ bulkActions }
+					setActionWithModal={ setActionWithModal }
+					selectedItems={ selectedItems }
+				/>
+				<DropdownMenuGroup>
+					<DropdownMenuItem
+						disabled={ areAllSelected }
+						hideOnClick={ false }
+						onClick={ () => {
+							onSelectionChange( data );
+						} }
+						suffix={ data.length }
+					>
+						{ __( 'Select all' ) }
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						disabled={ selection.length === 0 }
+						hideOnClick={ false }
+						onClick={ () => {
+							onSelectionChange( [] );
+						} }
+					>
+						{ __( 'Deselect' ) }
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+			</DropdownMenu>
+			{ actionWithModal && (
+				<ActionWithModal
+					action={ actionWithModal }
+					selectedItems={ selectedItems }
+					setActionWithModal={ setActionWithModal }
+					onMenuOpenChange={ onMenuOpenChange }
+				/>
+			) }
+		</>
+	);
+}

package/src/dataviews.js

@@ -5,7 +5,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,7 +14,8 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import { VIEW_LAYOUTS } from './constants';
+import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
+import BulkActions from './bulk-actions';
 
 const defaultGetItemId = ( item ) => item.id;
 const defaultOnSelectionChange = () => {};
@@ -37,6 +38,23 @@ export default function DataViews( {
 } ) {
 	const [ selection, setSelection ] = useState( [] );
 
+	useEffect( () => {
+		if (
+			selection.length > 0 &&
+			selection.some(
+				( id ) => ! data.some( ( item ) => item.id === id )
+			)
+		) {
+			const newSelection = selection.filter( ( id ) =>
+				data.some( ( item ) => item.id === id )
+			);
+			setSelection( newSelection );
+			onSelectionChange(
+				data.filter( ( item ) => newSelection.includes( item.id ) )
+			);
+		}
+	}, [ selection, data, onSelectionChange ] );
+
 	const onSetSelection = useCallback(
 		( items ) => {
 			setSelection( items.map( ( item ) => item.id ) );
@@ -75,6 +93,15 @@ export default function DataViews( {
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
+					{ view.type === LAYOUT_TABLE && (
+						<BulkActions
+							actions={ actions }
+							data={ data }
+							onSelectionChange={ onSetSelection }
+							selection={ selection }
+							getItemId={ getItemId }
+						/>
+					) }
 					<ViewActions
 						fields={ _fields }
 						view={ view }

package/src/item-actions.js

@@ -59,10 +59,7 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 			<ActionTrigger { ...actionTriggerProps } />
 			{ isModalOpen && (
 				<Modal
-					title={
-						( ! hideModalHeader && action.modalHeader ) ||
-						action.label
-					}
+					title={ action.modalHeader || action.label }
 					__experimentalHideHeader={ !! hideModalHeader }
 					onRequestClose={ () => {
 						setIsModalOpen( false );
@@ -72,7 +69,7 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 					) }` }
 				>
 					<RenderModal
-						item={ item }
+						items={ [ item ] }
 						closeModal={ () => setIsModalOpen( false ) }
 					/>
 				</Modal>
@@ -99,7 +96,7 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 					<DropdownMenuItemTrigger
 						key={ action.id }
 						action={ action }
-						onClick={ () => action.callback( item ) }
+						onClick={ () => action.callback( [ item ] ) }
 					/>
 				);
 			} ) }
@@ -160,7 +157,7 @@ export default function ItemActions( { item, actions, isCompact } ) {
 						<ButtonTrigger
 							key={ action.id }
 							action={ action }
-							onClick={ () => action.callback( item ) }
+							onClick={ () => action.callback( [ item ] ) }
 						/>
 					);
 				} ) }

package/src/pagination.js

@@ -30,12 +30,8 @@ const Pagination = memo( function Pagination( {
 				<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
 					{ createInterpolateElement(
 						sprintf(
-							// translators: %1$s: Current page number, %2$s: Total number of pages.
-							_x(
-								'Page <CurrenPageControl /> of %2$s',
-								'paging'
-							),
-							view.page,
+							// translators: %s: Total number of pages.
+							_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
 							totalPages
 						),
 						{