@wordpress/dataviews 0.4.0 → 0.5.0

package/src/search.js

@@ -24,7 +24,7 @@ const Search = memo( function Search( { label, view, onChangeView } ) {
 			search: debouncedSearch,
 		} );
 	}, [ debouncedSearch ] );
-	const searchLabel = label || __( 'Filter list' );
+	const searchLabel = label || __( 'Search' );
 	return (
 		<SearchControl
 			__nextHasNoMarginBottom

package/src/single-selection-checkbox.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+
+export default function SingleSelectionCheckbox( {
+	selection,
+	onSelectionChange,
+	item,
+	data,
+	getItemId,
+	primaryField,
+} ) {
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	let selectionLabel;
+	if ( primaryField?.getValue && item ) {
+		// eslint-disable-next-line @wordpress/valid-sprintf
+		selectionLabel = sprintf(
+			/* translators: %s: item title. */
+			isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			primaryField.getValue( { item } )
+		);
+	} else {
+		selectionLabel = isSelected
+			? __( 'Select a new item' )
+			: __( 'Deselect item' );
+	}
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ isSelected }
+			label={ selectionLabel }
+			onChange={ () => {
+				if ( ! isSelected ) {
+					onSelectionChange(
+						data.filter( ( _item ) => {
+							const itemId = getItemId?.( _item );
+							return (
+								itemId === id || selection.includes( itemId )
+							);
+						} )
+					);
+				} else {
+					onSelectionChange(
+						data.filter( ( _item ) => {
+							const itemId = getItemId?.( _item );
+							return (
+								itemId !== id && selection.includes( itemId )
+							);
+						} )
+					);
+				}
+			} }
+		/>
+	);
+}

package/src/style.scss

@@ -11,13 +11,20 @@
 }
 
 .dataviews-filters__view-actions {
-	padding: $grid-unit-15 $grid-unit-40;
+	padding: $grid-unit-15 $grid-unit-40 0;
 	.components-search-control {
 		flex-grow: 1;
-		max-width: 240px;
+
+		.components-base-control__field {
+			max-width: 240px;
+		}
 	}
 }
 
+.dataviews-filters__container {
+	padding: 0 $grid-unit-40;
+}
+
 .dataviews-filters__view-actions.components-h-stack {
 	align-items: center;
 }
@@ -26,24 +33,6 @@
 	position: relative;
 }
 
-.dataviews-filters-count {
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: $grid-unit-20;
-	color: var(--wp-components-color-accent-inverted, $white);
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	border-radius: $grid-unit-10;
-	min-width: $grid-unit-20;
-	padding: 0 $grid-unit-05;
-	transform: translateX(40%) translateY(-40%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	font-weight: 300;
-}
-
 .dataviews-pagination {
 	margin-top: auto;
 	position: sticky;
@@ -87,10 +76,6 @@
 		padding: $grid-unit-15;
 		white-space: nowrap;
 
-		@include break-huge() {
-			min-width: 200px;
-		}
-
 		&[data-field-id="actions"] {
 			text-align: right;
 		}
@@ -185,6 +170,10 @@
 			min-height: $grid-unit-40;
 			display: flex;
 			align-items: center;
+
+			> * {
+				flex-grow: 1;
+			}
 		}
 	}
 	.dataviews-view-table-header-button {
@@ -256,6 +245,7 @@
 .dataviews-view-grid {
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+	grid-template-rows: max-content;
 	padding: 0 $grid-unit-40;
 
 	@include break-xlarge() {
@@ -273,12 +263,20 @@
 		justify-content: flex-start;
 
 		.dataviews-view-grid__title-actions {
-			padding: 0 $grid-unit-05;
+			padding: $grid-unit-05 $grid-unit $grid-unit-05 $grid-unit-05;
 		}
 
 		.dataviews-view-grid__primary-field {
 			min-height: $grid-unit-50;
 		}
+		&.is-selected {
+			border-color: var(--wp-admin-theme-color);
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
 	}
 
 	.dataviews-view-grid__media {
@@ -296,10 +294,6 @@
 		}
 	}
 
-	.dataviews-view-grid__primary-field {
-		padding: $grid-unit-10;
-	}
-
 	.dataviews-view-grid__fields {
 		position: relative;
 		font-size: 12px;
@@ -386,16 +380,14 @@
 				border-radius: $grid-unit-05;
 			}
 		}
-		h3 {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+		.dataviews-view-list__primary-field {
+			min-height: $grid-unit-05 * 5;
 		}
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: $grid-unit-50;
+		height: $grid-unit-50;
 		border-radius: $grid-unit-05;
 		overflow: hidden;
 		position: relative;
@@ -428,17 +420,13 @@
 
 	.dataviews-view-list__fields {
 		color: $gray-700;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		display: flex;
+		gap: $grid-unit-10;
+		flex-wrap: wrap;
+		font-size: 12px;
+		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			margin-right: $grid-unit-15;
-
-			&:last-child {
-				margin-right: 0;
-			}
-
 			&:empty {
 				display: none;
 			}
@@ -500,3 +488,235 @@
 .dataviews-bulk-edit-button.components-button {
 	flex-shrink: 0;
 }
+
+.dataviews-view-grid__title-actions .dataviews-view-table-selection-checkbox {
+	margin-left: $grid-unit-10;
+}
+
+.dataviews-view-grid__card.has-no-pointer-events * {
+	pointer-events: none;
+}
+.dataviews-filter-summary__popover {
+	.components-popover__content {
+		width: 230px;
+		padding: 0;
+		border-radius: $grid-unit-05;
+	}
+}
+
+.dataviews-search-widget-filter-combobox-list {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+	border-top: 1px solid $gray-200;
+
+	.dataviews-search-widget-filter-combobox-item {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+		border-radius: $radius-block-ui;
+		box-sizing: border-box;
+		padding: $grid-unit-10 $grid-unit-15;
+		cursor: default;
+		margin-block-end: 2px;
+
+		&:last-child {
+			margin-block-end: 0;
+		}
+
+		&:hover,
+		&[data-active-item],
+		&:focus {
+			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+			color: $white;
+
+			.dataviews-search-widget-filter-combobox-item-check {
+				fill: $white;
+			}
+
+			.dataviews-search-widget-filter-combobox-item-description {
+				color: $white;
+			}
+		}
+
+		.dataviews-search-widget-filter-combobox-item-check {
+			width: 24px;
+			height: 24px;
+			flex-shrink: 0;
+		}
+
+		.dataviews-search-widget-filter-combobox-item-value {
+			[data-user-value] {
+				font-weight: 600;
+			}
+		}
+
+		.dataviews-search-widget-filter-combobox-item-description {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			font-size: $helptext-font-size;
+			line-height: 16px;
+			color: $gray-700;
+		}
+	}
+}
+
+.dataviews-search-widget-filter-combobox__wrapper {
+	position: relative;
+	padding: $grid-unit-10;
+
+	.dataviews-search-widget-filter-combobox__input {
+		@include input-control;
+		display: block;
+		padding: 0 $grid-unit-40 0 $grid-unit-10;
+		background: $gray-100;
+		border: none;
+		width: 100%;
+		height: $grid-unit-40;
+
+		// Unset inherited values.
+		margin-left: 0;
+		margin-right: 0;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			background: $white;
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	.dataviews-search-widget-filter-combobox__icon {
+		position: absolute;
+		right: $grid-unit-15;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: $icon-size;
+	}
+}
+
+.dataviews-filter-summary__operators-container {
+	padding: $grid-unit-10 $grid-unit-10 $grid-unit-05;
+	padding-bottom: 0;
+
+	&:empty {
+		display: none;
+	}
+
+	.dataviews-filter-summary__operators-filter-name {
+		color: $gray-700;
+	}
+}
+
+.dataviews-filter-summary__reset {
+	padding: $grid-unit-05;
+	border-top: 1px solid $gray-200;
+}
+
+.dataviews-filter-summary__chip-container {
+	position: relative;
+	white-space: pre-wrap;
+
+	.dataviews-filter-summary__chip {
+		border-radius: $grid-unit-20;
+		border: 1px solid transparent;
+		cursor: pointer;
+		padding: 0 $grid-unit-15;
+		height: $grid-unit-40;
+		background: $gray-100;
+		color: $gray-700;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		&.has-reset {
+			padding-inline-end: $button-size-small + $grid-unit-05;
+		}
+
+		&:hover,
+		&:focus-visible {
+			background: $gray-200;
+			color: $gray-900;
+		}
+
+		&.has-values {
+			color: var(--wp-admin-theme-color);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+
+		.dataviews-filter-summary__filter-text-name {
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-filter-summary__chip-remove {
+		width: $icon-size;
+		height: $icon-size;
+		border-radius: 50%;
+		border: 0;
+		padding: 0;
+		position: absolute;
+		right: $grid-unit-05;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		cursor: pointer;
+
+		svg {
+			fill: $gray-700;
+		}
+
+		&:hover,
+		&:focus {
+			background: $gray-200;
+			svg {
+				fill: $gray-900;
+			}
+		}
+
+		&.has-values {
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+}

package/src/utils.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { OPERATORS } from './constants';
+
 /**
  * Helper util to sort data by text fields, when sorting is done client side.
  *
@@ -49,3 +54,13 @@ export function getPaginationResults( { data, view } ) {
 		},
 	};
 }
+
+export const sanitizeOperators = ( field ) => {
+	let operators = field.filterBy?.operators;
+	if ( ! operators || ! Array.isArray( operators ) ) {
+		operators = Object.keys( OPERATORS );
+	}
+	return operators.filter( ( operator ) =>
+		Object.keys( OPERATORS ).includes( operator )
+	);
+};

package/src/view-actions.js

@@ -83,8 +83,7 @@ function PageSizeMenu( { view, onChangeView } ) {
 					suffix={ <span aria-hidden="true">{ view.perPage }</span> }
 				>
 					<DropdownMenuItemLabel>
-						{ /* TODO: probably label per view type. */ }
-						{ __( 'Rows per page' ) }
+						{ __( 'Items per page' ) }
 					</DropdownMenuItemLabel>
 				</DropdownMenuItem>
 			}

package/src/view-grid.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -8,11 +13,115 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ItemActions from './item-actions';
+import SingleSelectionCheckbox from './single-selection-checkbox';
+
+function GridItem( {
+	selection,
+	data,
+	onSelectionChange,
+	getItemId,
+	item,
+	actions,
+	mediaField,
+	primaryField,
+	visibleFields,
+} ) {
+	const [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	return (
+		<VStack
+			spacing={ 0 }
+			key={ id }
+			className={ classnames( 'dataviews-view-grid__card', {
+				'is-selected': isSelected,
+				'has-no-pointer-events': hasNoPointerEvents,
+			} ) }
+			onMouseDown={ ( event ) => {
+				if ( event.ctrlKey || event.metaKey ) {
+					setHasNoPointerEvents( true );
+					if ( ! isSelected ) {
+						onSelectionChange(
+							data.filter( ( _item ) => {
+								const itemId = getItemId?.( _item );
+								return (
+									itemId === id ||
+									selection.includes( itemId )
+								);
+							} )
+						);
+					} else {
+						onSelectionChange(
+							data.filter( ( _item ) => {
+								const itemId = getItemId?.( _item );
+								return (
+									itemId !== id &&
+									selection.includes( itemId )
+								);
+							} )
+						);
+					}
+				}
+			} }
+			onClick={ () => {
+				if ( hasNoPointerEvents ) {
+					setHasNoPointerEvents( false );
+				}
+			} }
+		>
+			<div className="dataviews-view-grid__media">
+				{ mediaField?.render( { item } ) }
+			</div>
+			<HStack
+				justify="space-between"
+				className="dataviews-view-grid__title-actions"
+			>
+				<SingleSelectionCheckbox
+					id={ id }
+					item={ item }
+					selection={ selection }
+					onSelectionChange={ onSelectionChange }
+					getItemId={ getItemId }
+					data={ data }
+					primaryField={ primaryField }
+				/>
+				<HStack className="dataviews-view-grid__primary-field">
+					{ primaryField?.render( { item } ) }
+				</HStack>
+				<ItemActions item={ item } actions={ actions } isCompact />
+			</HStack>
+			<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
+				{ visibleFields.map( ( field ) => {
+					const renderedValue = field.render( {
+						item,
+					} );
+					if ( ! renderedValue ) {
+						return null;
+					}
+					return (
+						<VStack
+							className="dataviews-view-grid__field"
+							key={ field.id }
+							spacing={ 1 }
+						>
+							<Tooltip text={ field.header } placement="left">
+								<div className="dataviews-view-grid__field-value">
+									{ renderedValue }
+								</div>
+							</Tooltip>
+						</VStack>
+					);
+				} ) }
+			</VStack>
+		</VStack>
+	);
+}
 
 export default function ViewGrid( {
 	data,
@@ -21,6 +130,8 @@ export default function ViewGrid( {
 	actions,
 	getItemId,
 	deferredRendering,
+	selection,
+	onSelectionChange,
 } ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
@@ -44,59 +155,22 @@ export default function ViewGrid( {
 			alignment="top"
 			className="dataviews-view-grid"
 		>
-			{ usedData.map( ( item ) => (
-				<VStack
-					spacing={ 0 }
-					key={ getItemId( item ) }
-					className="dataviews-view-grid__card"
-				>
-					<div className="dataviews-view-grid__media">
-						{ mediaField?.render( { item } ) }
-					</div>
-					<HStack
-						justify="space-between"
-						className="dataviews-view-grid__title-actions"
-					>
-						<HStack className="dataviews-view-grid__primary-field">
-							{ primaryField?.render( { item } ) }
-						</HStack>
-						<ItemActions
-							item={ item }
-							actions={ actions }
-							isCompact
-						/>
-					</HStack>
-					<VStack
-						className="dataviews-view-grid__fields"
-						spacing={ 3 }
-					>
-						{ visibleFields.map( ( field ) => {
-							const renderedValue = field.render( {
-								item,
-							} );
-							if ( ! renderedValue ) {
-								return null;
-							}
-							return (
-								<VStack
-									className="dataviews-view-grid__field"
-									key={ field.id }
-									spacing={ 1 }
-								>
-									<Tooltip
-										text={ field.header }
-										placement="left"
-									>
-										<div className="dataviews-view-grid__field-value">
-											{ renderedValue }
-										</div>
-									</Tooltip>
-								</VStack>
-							);
-						} ) }
-					</VStack>
-				</VStack>
-			) ) }
+			{ usedData.map( ( item ) => {
+				return (
+					<GridItem
+						key={ getItemId( item ) }
+						selection={ selection }
+						data={ data }
+						onSelectionChange={ onSelectionChange }
+						getItemId={ getItemId }
+						item={ item }
+						actions={ actions }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						visibleFields={ visibleFields }
+					/>
+				);
+			} ) }
 		</Grid>
 	);
 }

package/src/view-list.js

@@ -85,7 +85,11 @@ export default function ViewList( {
 								className="dataviews-view-list__item"
 								onClick={ () => onSelectionChange( [ item ] ) }
 							>
-								<HStack spacing={ 3 } justify="start">
+								<HStack
+									spacing={ 3 }
+									justify="start"
+									alignment="flex-start"
+								>
 									<div className="dataviews-view-list__media-wrapper">
 										{ mediaField?.render( { item } ) || (
 											<div className="dataviews-view-list__media-placeholder"></div>