@wordpress/dataviews 1.0.0 → 1.2.0

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,7 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Action, ActionModal as ActionModalType, AnyItem } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -24,7 +30,50 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-function ButtonTrigger( { action, onClick } ) {
+interface ButtonTriggerProps< Item extends AnyItem > {
+	action: Action< Item >;
+	onClick: MouseEventHandler;
+}
+
+interface DropdownMenuItemTriggerProps< Item extends AnyItem > {
+	action: Action< Item >;
+	onClick: MouseEventHandler;
+}
+
+interface ActionModalProps< Item extends AnyItem > {
+	action: ActionModalType< Item >;
+	items: Item[];
+	closeModal?: () => void;
+}
+
+interface ActionWithModalProps< Item extends AnyItem >
+	extends ActionModalProps< Item > {
+	ActionTrigger: (
+		props: ButtonTriggerProps< Item > | DropdownMenuItemTriggerProps< Item >
+	) => ReactElement;
+	isBusy?: boolean;
+}
+
+interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	item: Item;
+}
+
+interface ItemActionsProps< Item extends AnyItem > {
+	item: Item;
+	actions: Action< Item >[];
+	isCompact: boolean;
+}
+
+interface CompactItemActionsProps< Item extends AnyItem > {
+	item: Item;
+	actions: Action< Item >[];
+}
+
+function ButtonTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+}: ButtonTriggerProps< Item > ) {
 	return (
 		<Button
 			label={ action.label }
@@ -36,58 +85,86 @@ function ButtonTrigger( { action, onClick } ) {
 	);
 }
 
-function DropdownMenuItemTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+}: DropdownMenuItemTriggerProps< Item > ) {
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
+			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
 			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
 }
 
-function ActionWithModal( { action, item, ActionTrigger } ) {
+export function ActionModal< Item extends AnyItem >( {
+	action,
+	items,
+	closeModal,
+}: ActionModalProps< Item > ) {
+	return (
+		<Modal
+			title={ action.modalHeader || action.label }
+			__experimentalHideHeader={ !! action.hideModalHeader }
+			onRequestClose={ closeModal ?? ( () => {} ) }
+			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
+				action.id
+			) }` }
+		>
+			<action.RenderModal
+				items={ items }
+				closeModal={ closeModal }
+				onActionStart={ action.onActionStart }
+				onActionPerformed={ action.onActionPerformed }
+			/>
+		</Modal>
+	);
+}
+
+export function ActionWithModal< Item extends AnyItem >( {
+	action,
+	items,
+	ActionTrigger,
+	isBusy,
+}: ActionWithModalProps< Item > ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const actionTriggerProps = {
 		action,
-		onClick: () => setIsModalOpen( true ),
+		onClick: () => {
+			setIsModalOpen( true );
+		},
+		items,
+		isBusy,
 	};
-	const { RenderModal, hideModalHeader } = action;
 	return (
 		<>
 			<ActionTrigger { ...actionTriggerProps } />
 			{ isModalOpen && (
-				<Modal
-					title={ action.modalHeader || action.label }
-					__experimentalHideHeader={ !! hideModalHeader }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
-						action.id
-					) }` }
-				>
-					<RenderModal
-						items={ [ item ] }
-						closeModal={ () => setIsModalOpen( false ) }
-					/>
-				</Modal>
+				<ActionModal
+					action={ action }
+					items={ items }
+					closeModal={ () => setIsModalOpen( false ) }
+				/>
 			) }
 		</>
 	);
 }
 
-function ActionsDropdownMenuGroup( { actions, item } ) {
+export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
+	actions,
+	item,
+}: ActionsDropdownMenuGroupProps< Item > ) {
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {
-				if ( !! action.RenderModal ) {
+				if ( 'RenderModal' in action ) {
 					return (
 						<ActionWithModal
 							key={ action.id }
 							action={ action }
-							item={ item }
+							items={ [ item ] }
 							ActionTrigger={ DropdownMenuItemTrigger }
 						/>
 					);
@@ -104,7 +181,11 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 	);
 }
 
-export default function ItemActions( { item, actions, isCompact } ) {
+export default function ItemActions< Item extends AnyItem >( {
+	item,
+	actions,
+	isCompact,
+}: ItemActionsProps< Item > ) {
 	const { primaryActions, eligibleActions } = useMemo( () => {
 		// If an action is eligible for all items, doesn't need
 		// to provide the `isEligible` function.
@@ -134,12 +215,12 @@ export default function ItemActions( { item, actions, isCompact } ) {
 		>
 			{ !! primaryActions.length &&
 				primaryActions.map( ( action ) => {
-					if ( !! action.RenderModal ) {
+					if ( 'RenderModal' in action ) {
 						return (
 							<ActionWithModal
 								key={ action.id }
 								action={ action }
-								item={ item }
+								items={ [ item ] }
 								ActionTrigger={ ButtonTrigger }
 							/>
 						);
@@ -157,7 +238,10 @@ export default function ItemActions( { item, actions, isCompact } ) {
 	);
 }
 
-function CompactItemActions( { item, actions } ) {
+function CompactItemActions< Item extends AnyItem >( {
+	item,
+	actions,
+}: CompactItemActionsProps< Item > ) {
 	return (
 		<DropdownMenu
 			trigger={

package/src/layouts.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './view-table';
+import ViewGrid from './view-grid';
+import ViewList from './view-list';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from './constants';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];

package/src/normalize-fields.ts

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

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

@@ -10,14 +10,29 @@ import { createInterpolateElement, memo } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+interface PaginationProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+}
+
 const Pagination = memo( function Pagination( {
 	view,
 	onChangeView,
 	paginationInfo: { totalItems = 0, totalPages },
-} ) {
+}: PaginationProps ) {
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+	const currentPage = view.page ?? 1;
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
@@ -43,12 +58,15 @@ const Pagination = memo( function Pagination( {
 							CurrentPageControl: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page }
+									value={ view.page?.toString() }
 									options={ Array.from(
 										Array( totalPages )
 									).map( ( _, i ) => {
 										const page = i + 1;
-										return { value: page, label: page };
+										return {
+											value: page.toString(),
+											label: page.toString(),
+										};
 									} ) }
 									onChange={ ( newValue ) => {
 										onChangeView( {
@@ -66,9 +84,12 @@ const Pagination = memo( function Pagination( {
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
 						onClick={ () =>
-							onChangeView( { ...view, page: view.page - 1 } )
+							onChangeView( {
+								...view,
+								page: currentPage - 1,
+							} )
 						}
-						disabled={ view.page === 1 }
+						disabled={ currentPage === 1 }
 						__experimentalIsFocusable
 						label={ __( 'Previous page' ) }
 						icon={ chevronLeft }
@@ -78,9 +99,9 @@ const Pagination = memo( function Pagination( {
 					/>
 					<Button
 						onClick={ () =>
-							onChangeView( { ...view, page: view.page + 1 } )
+							onChangeView( { ...view, page: currentPage + 1 } )
 						}
-						disabled={ view.page >= totalPages }
+						disabled={ currentPage >= totalPages }
 						__experimentalIsFocusable
 						label={ __( 'Next page' ) }
 						icon={ chevronRight }

package/src/{single-selection-checkbox.js → single-selection-checkbox.tsx}

@@ -4,7 +4,22 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
 
-export default function SingleSelectionCheckbox( {
+/**
+ * Internal dependencies
+ */
+import type { Field, AnyItem } from './types';
+
+interface SingleSelectionCheckboxProps< Item extends AnyItem > {
+	selection: string[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	item: Item;
+	data: Item[];
+	getItemId: ( item: Item ) => string;
+	primaryField?: Field< Item >;
+	disabled: boolean;
+}
+
+export default function SingleSelectionCheckbox< Item extends AnyItem >( {
 	selection,
 	onSelectionChange,
 	item,
@@ -12,7 +27,7 @@ export default function SingleSelectionCheckbox( {
 	getItemId,
 	primaryField,
 	disabled,
-} ) {
+}: SingleSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	let selectionLabel;

package/src/stories/fixtures.js

@@ -171,7 +171,6 @@ export const fields = [
 		id: 'type',
 		maxWidth: 400,
 		enableHiding: false,
-		type: 'enumeration',
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
 			{ value: 'Ice giant', label: 'Ice giant' },
@@ -189,7 +188,6 @@ export const fields = [
 	{
 		header: 'Categories',
 		id: 'categories',
-		type: 'enumeration',
 		elements: [
 			{ value: 'Space', label: 'Space' },
 			{ value: 'NASA', label: 'NASA' },

package/src/style.scss

@@ -292,25 +292,26 @@
 	}
 
 	.dataviews-view-grid__card {
-		border-radius: $radius-block-ui * 2;
-		border: 1px solid $gray-200;
 		height: 100%;
 		justify-content: flex-start;
 
 		.dataviews-view-grid__title-actions {
-			padding: $grid-unit-05 $grid-unit $grid-unit-05 $grid-unit-05;
+			padding: $grid-unit-10 0 $grid-unit-05;
 		}
 
 		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-50;
+			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
 		}
-		&.is-selected {
-			border-color: var(--wp-admin-theme-color);
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
+		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.page-pages-preview-field__button::after {
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			}
 		}
 	}
 
@@ -318,15 +319,28 @@
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		border-bottom: 1px solid $gray-200;
 		background-color: $gray-100;
-		border-radius: 3px 3px 0 0;
+		border-radius: $grid-unit-05;
+		overflow: hidden;
+		position: relative;
 
 		img {
 			object-fit: cover;
 			width: 100%;
 			height: 100%;
 		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+			pointer-events: none;
+		}
 	}
 
 	.dataviews-view-grid__fields {
@@ -337,7 +351,6 @@
 		&:not(:empty) {
 			padding: $grid-unit-15 0;
 			padding-top: 0;
-			margin: 0 $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field {
@@ -366,8 +379,7 @@
 
 	.dataviews-view-grid__badge-fields {
 		&:not(:empty) {
-			padding: $grid-unit-15;
-			padding-top: 0;
+			padding-bottom: $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field-value {
@@ -385,32 +397,33 @@
 
 .dataviews-view-list {
 	margin: 0;
-	padding: $grid-unit-10;
 
 	li {
 		margin: 0;
 		cursor: pointer;
+		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			padding-right: $grid-unit-30;
 			border-radius: $grid-unit-05;
 
-			&::after {
-				position: absolute;
-				content: "";
-				top: 100%;
-				left: $grid-unit-30;
-				right: $grid-unit-30;
-				background: $gray-100;
-				height: 1px;
-			}
-
 			> * {
 				width: 100%;
 			}
 		}
 
+		.dataviews-view-list__item-actions .components-button {
+			opacity: 0;
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions .components-button {
+				opacity: 1;
+			}
+		}
+
 		&:not(.is-selected) {
 			.dataviews-view-list__primary-field {
 				color: $gray-900;
@@ -418,6 +431,7 @@
 			&:hover,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
 
 				.dataviews-view-list__primary-field,
 				.dataviews-view-list__fields {
@@ -425,28 +439,25 @@
 				}
 			}
 		}
+
 	}
 
 	li.is-selected,
 	li.is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: var(--wp-admin-theme-color);
-			color: $white;
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
 
 			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields,
 			.components-button {
-				color: $white;
-			}
-
-			&::after {
-				background: transparent;
+				color: var(--wp-admin-theme-color);
 			}
 		}
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-30;
+		padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-40;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
 
@@ -454,13 +465,12 @@
 			&::before {
 				position: absolute;
 				content: "";
-				top: -1px;
-				right: -1px;
-				bottom: -1px;
-				left: -1px;
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				z-index: -1;
-				border-radius: $grid-unit-05;
+				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				right: var(--wp-admin-border-width-focus);
+				bottom: var(--wp-admin-border-width-focus);
+				left: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui;
 			}
 		}
 		.dataviews-view-list__primary-field {
@@ -472,11 +482,11 @@
 	.dataviews-view-list__media-wrapper {
 		width: $grid-unit-50;
 		height: $grid-unit-50;
-		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
 		background-color: $gray-100;
+		border-radius: $grid-unit-05;
 
 		img {
 			width: 100%;
@@ -517,6 +527,11 @@
 		}
 	}
 
+	.dataviews-view-list__item-actions {
+		padding-top: $grid-unit-20;
+		padding-right: $grid-unit-40;
+	}
+
 	& + .dataviews-pagination {
 		justify-content: space-between;
 	}
@@ -555,10 +570,6 @@
 	flex-shrink: 0;
 }
 
-.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
-	margin-left: $grid-unit-10;
-}
-
 .dataviews-filter-summary__popover {
 	.components-popover__content {
 		width: 230px;
@@ -790,3 +801,48 @@
 		}
 	}
 }
+
+
+.dataviews-bulk-actions-toolbar-wrapper {
+	display: flex;
+	flex-grow: 1;
+	width: 100%;
+
+	.components-toolbar-group {
+		align-items: center;
+	}
+
+	.components-button.is-busy {
+		max-height: $button-size;
+	}
+}
+
+.dataviews-bulk-actions {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	flex-wrap: wrap;
+	width: 100%;
+	bottom: $grid-unit-30;
+	z-index: z-index(".dataviews-bulk-actions");
+
+	.components-accessible-toolbar {
+		border-color: $gray-300;
+		box-shadow: $shadow-popover;
+
+		.components-toolbar-group {
+			border-color: $gray-200;
+
+			&:last-child {
+				border: 0;
+			}
+		}
+	}
+
+	.dataviews-bulk-actions__selection-count {
+		display: flex;
+		align-items: center;
+		margin: 0 $grid-unit-10 0 $grid-unit-10;
+	}
+}