@wordpress/dataviews 5.0.1-next.719a03cbe.0 → 6.0.0

package/src/dataform-controls/integer.tsx

@@ -5,6 +5,7 @@ import {
 	Flex,
 	BaseControl,
 	__experimentalNumberControl as NumberControl,
+	privateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -14,6 +15,9 @@ import { __ } from '@wordpress/i18n';
  */
 import { OPERATOR_BETWEEN } from '../constants';
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedNumberControl } = unlock( privateApis );
 
 function BetweenControls< Item >( {
 	id,
@@ -81,10 +85,16 @@ export default function Integer< Item >( {
 	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
 	const onChangeControl = useCallback(
-		( newValue: string | undefined ) =>
+		( newValue: string | undefined ) => {
 			onChange( {
-				[ id ]: Number( newValue ),
-			} ),
+				// Do not convert an empty string or undefined to a number,
+				// otherwise there's a mismatch between the UI control (empty)
+				// and the data relied by onChange (0).
+				[ id ]: [ '', undefined ].includes( newValue )
+					? undefined
+					: Number( newValue ),
+			} );
+		},
 		[ id, onChange ]
 	);
 
@@ -100,7 +110,23 @@ export default function Integer< Item >( {
 	}
 
 	return (
-		<NumberControl
+		<ValidatedNumberControl
+			required={ !! field.isValid?.required }
+			customValidator={ ( newValue: any ) => {
+				if ( field.isValid?.custom ) {
+					return field.isValid.custom(
+						{
+							...data,
+							[ id ]: [ undefined, '', null ].includes( newValue )
+								? undefined
+								: Number( newValue ),
+						},
+						field
+					);
+				}
+
+				return null;
+			} }
 			label={ label }
 			help={ description }
 			value={ value }

package/src/dataform-controls/relative-date-control.tsx

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BaseControl,
+	SelectControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
+
+interface RelativeDateControlProps {
+	id: string;
+	value: { value?: string | number; unit?: string };
+	onChange: ( value: any ) => void;
+	label: string;
+	hideLabelFromVision?: boolean;
+	options: { value: string; label: string }[];
+	className?: string;
+}
+
+export const TIME_UNITS_OPTIONS = {
+	[ OPERATOR_IN_THE_PAST ]: [
+		{ value: 'days', label: __( 'Days' ) },
+		{ value: 'weeks', label: __( 'Weeks' ) },
+		{ value: 'months', label: __( 'Months' ) },
+		{ value: 'years', label: __( 'Years' ) },
+	],
+	[ OPERATOR_OVER ]: [
+		{ value: 'days', label: __( 'Days ago' ) },
+		{ value: 'weeks', label: __( 'Weeks ago' ) },
+		{ value: 'months', label: __( 'Months ago' ) },
+		{ value: 'years', label: __( 'Years ago' ) },
+	],
+};
+
+export default function RelativeDateControl( {
+	id,
+	value,
+	onChange,
+	label,
+	hideLabelFromVision,
+	options,
+	className,
+}: RelativeDateControlProps ) {
+	const { value: relValue = '', unit = options[ 0 ].value } = value;
+
+	const onChangeValue = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: { value: Number( newValue ), unit },
+			} ),
+		[ id, onChange, unit ]
+	);
+
+	const onChangeUnit = useCallback(
+		( newUnit: string | undefined ) =>
+			onChange( {
+				[ id ]: { value: relValue, unit: newUnit },
+			} ),
+		[ id, onChange, relValue ]
+	);
+
+	return (
+		<BaseControl
+			id={ id }
+			__nextHasNoMarginBottom
+			className={ clsx( className, 'dataviews-controls__relative-date' ) }
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+		>
+			<HStack spacing={ 2.5 }>
+				<NumberControl
+					__next40pxDefaultSize
+					className="dataviews-controls__relative-date-number"
+					spinControls="none"
+					min={ 1 }
+					step={ 1 }
+					value={ relValue }
+					onChange={ onChangeValue }
+				/>
+				<SelectControl
+					className="dataviews-controls__relative-date-unit"
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Unit' ) }
+					value={ unit }
+					options={ options }
+					onChange={ onChangeUnit }
+					hideLabelFromVision
+				/>
+			</HStack>
+		</BaseControl>
+	);
+}

package/src/dataform-controls/select.tsx

@@ -16,8 +16,9 @@ export default function Select< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } ) ?? '';
+	const { id, label, type } = field;
+	const isMultiple = type === 'array';
+	const value = field.getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
 	const onChangeControl = useCallback(
 		( newValue: any ) =>
 			onChange( {
@@ -26,17 +27,25 @@ export default function Select< Item >( {
 		[ id, onChange ]
 	);
 
-	const elements = [
-		/*
-		 * Value can be undefined when:
-		 *
-		 * - the field is not required
-		 * - in bulk editing
-		 *
-		 */
-		{ label: __( 'Select item' ), value: '' },
-		...( field?.elements ?? [] ),
-	];
+	const fieldElements = field?.elements ?? [];
+	const hasEmptyValue = fieldElements.some(
+		( { value: elementValue } ) => elementValue === ''
+	);
+
+	const elements =
+		hasEmptyValue || isMultiple
+			? fieldElements
+			: [
+					/*
+					 * Value can be undefined when:
+					 *
+					 * - the field is not required
+					 * - in bulk editing
+					 *
+					 */
+					{ label: __( 'Select item' ), value: '' },
+					...fieldElements,
+			  ];
 
 	return (
 		<SelectControl
@@ -48,6 +57,7 @@ export default function Select< Item >( {
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			hideLabelFromVision={ hideLabelFromVision }
+			multiple={ isMultiple }
 		/>
 	);
 }

package/src/dataform-controls/style.scss

@@ -3,7 +3,24 @@
 	padding: 0;
 }
 
-.dataviews-controls__datetime-number,
-.dataviews-controls__datetime-unit {
+.dataviews-controls__relative-date-number,
+.dataviews-controls__relative-date-unit {
 	flex: 1 1 50%;
 }
+
+.dataviews-controls__date {
+	// Hide the native date picker icon since we're using our own calendar.
+	input[type="date"]::-webkit-inner-spin-button,
+	input[type="date"]::-webkit-calendar-picker-indicator {
+		display: none;
+		-webkit-appearance: none;
+	}
+}
+
+.dataviews-controls__date-preset {
+	border: 1px solid #ddd;
+
+	&:active {
+		background-color: $black;
+	}
+}

package/src/dataform-controls/text.tsx

@@ -1,13 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
+import { privateApis } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedTextControl } = unlock( privateApis );
 
 export default function Text< Item >( {
 	data,
@@ -27,7 +30,21 @@ export default function Text< Item >( {
 	);
 
 	return (
-		<TextControl
+		<ValidatedTextControl
+			required={ !! field.isValid?.required }
+			customValidator={ ( newValue: any ) => {
+				if ( field.isValid?.custom ) {
+					return field.isValid.custom(
+						{
+							...data,
+							[ id ]: newValue,
+						},
+						field
+					);
+				}
+
+				return null;
+			} }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }

package/src/dataviews-layouts/grid/index.tsx

@@ -8,7 +8,6 @@ import type { ComponentProps, ReactElement } from 'react';
  * WordPress dependencies
  */
 import {
-	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Spinner,
@@ -16,8 +15,10 @@ import {
 	FlexItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
+import { isAppleOS } from '@wordpress/keycodes';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,6 +26,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { unlock } from '../../lock-unlock';
 import ItemActions from '../../components/dataviews-item-actions';
 import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsContext from '../../components/dataviews-context';
 import {
 	useHasAPossibleBulkAction,
 	useSomeItemHasAPossibleBulkAction,
@@ -37,7 +39,6 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
-import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
@@ -60,6 +61,9 @@ interface GridItemProps< Item > {
 	regularFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
 	hasBulkActions: boolean;
+	config: {
+		sizes: string;
+	};
 }
 
 function GridItem< Item >( {
@@ -78,6 +82,7 @@ function GridItem< Item >( {
 	regularFields,
 	badgeFields,
 	hasBulkActions,
+	config,
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
@@ -85,7 +90,11 @@ function GridItem< Item >( {
 	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } field={ mediaField } />
+		<mediaField.render
+			item={ item }
+			field={ mediaField }
+			config={ config }
+		/>
 	) : null;
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
@@ -117,7 +126,7 @@ function GridItem< Item >( {
 				'is-selected': hasBulkAction && isSelected,
 			} ) }
 			onClickCapture={ ( event ) => {
-				if ( event.ctrlKey || event.metaKey ) {
+				if ( isAppleOS() ? event.metaKey : event.ctrlKey ) {
 					event.stopPropagation();
 					event.preventDefault();
 					if ( ! hasBulkAction ) {
@@ -254,7 +263,9 @@ function ViewGrid< Item >( {
 	selection,
 	view,
 	className,
+	empty,
 }: ViewGridProps< Item > ) {
+	const { resizeObserverRef } = useContext( DataViewsContext );
 	const titleField = fields.find(
 		( field ) => field.id === view?.titleField
 	);
@@ -285,59 +296,161 @@ function ViewGrid< Item >( {
 		{ regularFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
-	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
-	const gridStyle = usedPreviewSize
-		? {
-				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
-		  }
-		: {};
+	const usedPreviewSize = view.layout?.previewSize;
+	/*
+	 * This is the maximum width that an image can achieve in the grid. The reasoning is:
+	 * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).
+	 * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.
+	 * So each image will never grow past 2*430px plus a little more to account for the gaps.
+	 */
+	const size = '900px';
+
+	const groupField = view.groupByField
+		? fields.find( ( f ) => f.id === view.groupByField )
+		: null;
+
+	// Group data by groupByField if specified
+	const dataByGroup = groupField
+		? data.reduce( ( groups: Map< string, typeof data >, item ) => {
+				const groupName = groupField.getValue( { item } );
+				if ( ! groups.has( groupName ) ) {
+					groups.set( groupName, [] );
+				}
+				groups.get( groupName )?.push( item );
+				return groups;
+		  }, new Map< string, typeof data >() )
+		: null;
+
 	return (
 		<>
-			{ hasData && (
-				<Grid
-					gap={ 8 }
-					columns={ 2 }
-					alignment="top"
-					className={ clsx( 'dataviews-view-grid', className ) }
-					style={ gridStyle }
-					aria-busy={ isLoading }
-				>
-					{ data.map( ( item ) => {
-						return (
-							<GridItem
-								key={ getItemId( item ) }
-								view={ view }
-								selection={ selection }
-								onChangeSelection={ onChangeSelection }
-								onClickItem={ onClickItem }
-								isItemClickable={ isItemClickable }
-								renderItemLink={ renderItemLink }
-								getItemId={ getItemId }
-								item={ item }
-								actions={ actions }
-								mediaField={ mediaField }
-								titleField={ titleField }
-								descriptionField={ descriptionField }
-								regularFields={ regularFields }
-								badgeFields={ badgeFields }
-								hasBulkActions={ hasBulkActions }
-							/>
-						);
-					} ) }
-				</Grid>
-			) }
-			{ ! hasData && (
-				<div
-					className={ clsx( {
-						'dataviews-loading': isLoading,
-						'dataviews-no-results': ! isLoading,
-					} ) }
-				>
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				</div>
-			) }
+			{
+				// Render multiple groups.
+				hasData && groupField && dataByGroup && (
+					<VStack spacing={ 4 }>
+						{ Array.from( dataByGroup.entries() ).map(
+							( [ groupName, groupItems ] ) => (
+								<VStack key={ groupName } spacing={ 2 }>
+									<h3 className="dataviews-view-grid__group-header">
+										{ sprintf(
+											// translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+											__( '%1$s: %2$s' ),
+											groupField.label,
+											groupName
+										) }
+									</h3>
+									<div
+										className={ clsx(
+											'dataviews-view-grid',
+											className
+										) }
+										style={ {
+											gridTemplateColumns:
+												usedPreviewSize &&
+												`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
+										} }
+										aria-busy={ isLoading }
+										ref={ resizeObserverRef }
+									>
+										{ groupItems.map( ( item ) => {
+											return (
+												<GridItem
+													key={ getItemId( item ) }
+													view={ view }
+													selection={ selection }
+													onChangeSelection={
+														onChangeSelection
+													}
+													onClickItem={ onClickItem }
+													isItemClickable={
+														isItemClickable
+													}
+													renderItemLink={
+														renderItemLink
+													}
+													getItemId={ getItemId }
+													item={ item }
+													actions={ actions }
+													mediaField={ mediaField }
+													titleField={ titleField }
+													descriptionField={
+														descriptionField
+													}
+													regularFields={
+														regularFields
+													}
+													badgeFields={ badgeFields }
+													hasBulkActions={
+														hasBulkActions
+													}
+													config={ {
+														sizes: size,
+													} }
+												/>
+											);
+										} ) }
+									</div>
+								</VStack>
+							)
+						) }
+					</VStack>
+				)
+			}
+
+			{
+				// Render a single grid with all data.
+				hasData && ! dataByGroup && (
+					<div
+						className={ clsx( 'dataviews-view-grid', className ) }
+						style={ {
+							gridTemplateColumns:
+								usedPreviewSize &&
+								`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
+						} }
+						aria-busy={ isLoading }
+						ref={ resizeObserverRef }
+					>
+						{ data.map( ( item ) => {
+							return (
+								<GridItem
+									key={ getItemId( item ) }
+									view={ view }
+									selection={ selection }
+									onChangeSelection={ onChangeSelection }
+									onClickItem={ onClickItem }
+									isItemClickable={ isItemClickable }
+									renderItemLink={ renderItemLink }
+									getItemId={ getItemId }
+									item={ item }
+									actions={ actions }
+									mediaField={ mediaField }
+									titleField={ titleField }
+									descriptionField={ descriptionField }
+									regularFields={ regularFields }
+									badgeFields={ badgeFields }
+									hasBulkActions={ hasBulkActions }
+									config={ {
+										sizes: size,
+									} }
+								/>
+							);
+						} ) }
+					</div>
+				)
+			}
+			{
+				// Render empty state.
+				! hasData && (
+					<div
+						className={ clsx( {
+							'dataviews-loading': isLoading,
+							'dataviews-no-results': ! isLoading,
+						} ) }
+					>
+						<p>{ isLoading ? <Spinner /> : empty }</p>
+					</div>
+				)
+			}
 		</>
 	);
 }