@wordpress/dataviews 5.0.0 → 6.0.0

package/src/dataform-controls/datetime.tsx

@@ -1,103 +1,17 @@
 /**
  * WordPress dependencies
  */
-import {
-	BaseControl,
-	TimePicker,
-	VisuallyHidden,
-	SelectControl,
-	__experimentalNumberControl as NumberControl,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
-
-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' ) },
-	],
-};
-
-function RelativeDateControls( {
-	id,
-	value,
-	onChange,
-	label,
-	hideLabelFromVision,
-	options,
-}: {
-	id: string;
-	value: { value?: string | number; unit?: string };
-	onChange: ( value: any ) => void;
-	label: string;
-	hideLabelFromVision?: boolean;
-	options: { value: string; label: string }[];
-} ) {
-	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="dataviews-controls__datetime"
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-		>
-			<HStack spacing={ 2.5 }>
-				<NumberControl
-					__next40pxDefaultSize
-					className="dataviews-controls__datetime-number"
-					spinControls="none"
-					min={ 1 }
-					step={ 1 }
-					value={ relValue }
-					onChange={ onChangeValue }
-				/>
-				<SelectControl
-					className="dataviews-controls__datetime-unit"
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					label={ __( 'Unit' ) }
-					value={ unit }
-					options={ options }
-					onChange={ onChangeUnit }
-					hideLabelFromVision
-				/>
-			</HStack>
-		</BaseControl>
-	);
-}
+import RelativeDateControl, {
+	TIME_UNITS_OPTIONS,
+} from './relative-date-control';
 
 export default function DateTime< Item >( {
 	data,
@@ -116,7 +30,7 @@ export default function DateTime< Item >( {
 
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
-			<RelativeDateControls
+			<RelativeDateControl
 				id={ id }
 				value={ value && typeof value === 'object' ? value : {} }
 				onChange={ onChange }

package/src/dataform-controls/email.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 Email< Item >( {
 	data,
@@ -27,7 +30,21 @@ export default function Email< 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;
+			} }
 			type="email"
 			label={ label }
 			placeholder={ placeholder }

package/src/dataform-controls/index.tsx

@@ -13,6 +13,7 @@ import type {
 } from '../types';
 import checkbox from './checkbox';
 import datetime from './datetime';
+import date from './date';
 import email from './email';
 import integer from './integer';
 import radio from './radio';
@@ -29,6 +30,7 @@ const FORM_CONTROLS: FormControls = {
 	boolean,
 	checkbox,
 	datetime,
+	date,
 	email,
 	integer,
 	radio,

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,
@@ -18,6 +17,8 @@ import {
 } from '@wordpress/components';
 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,14 +296,15 @@ 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 )
@@ -327,16 +339,18 @@ function ViewGrid< Item >( {
 											groupName
 										) }
 									</h3>
-									<Grid
-										gap={ 8 }
-										columns={ 2 }
-										alignment="top"
+									<div
 										className={ clsx(
 											'dataviews-view-grid',
 											className
 										) }
-										style={ gridStyle }
+										style={ {
+											gridTemplateColumns:
+												usedPreviewSize &&
+												`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
+										} }
 										aria-busy={ isLoading }
+										ref={ resizeObserverRef }
 									>
 										{ groupItems.map( ( item ) => {
 											return (
@@ -369,10 +383,13 @@ function ViewGrid< Item >( {
 													hasBulkActions={
 														hasBulkActions
 													}
+													config={ {
+														sizes: size,
+													} }
 												/>
 											);
 										} ) }
-									</Grid>
+									</div>
 								</VStack>
 							)
 						) }
@@ -383,13 +400,15 @@ function ViewGrid< Item >( {
 			{
 				// Render a single grid with all data.
 				hasData && ! dataByGroup && (
-					<Grid
-						gap={ 8 }
-						columns={ 2 }
-						alignment="top"
+					<div
 						className={ clsx( 'dataviews-view-grid', className ) }
-						style={ gridStyle }
+						style={ {
+							gridTemplateColumns:
+								usedPreviewSize &&
+								`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
+						} }
 						aria-busy={ isLoading }
+						ref={ resizeObserverRef }
 					>
 						{ data.map( ( item ) => {
 							return (
@@ -410,10 +429,13 @@ function ViewGrid< Item >( {
 									regularFields={ regularFields }
 									badgeFields={ badgeFields }
 									hasBulkActions={ hasBulkActions }
+									config={ {
+										sizes: size,
+									} }
 								/>
 							);
 						} ) }
-					</Grid>
+					</div>
 				)
 			}
 			{
@@ -425,7 +447,7 @@ function ViewGrid< Item >( {
 							'dataviews-no-results': ! isLoading,
 						} ) }
 					>
-						<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+						<p>{ isLoading ? <Spinner /> : empty }</p>
 					</div>
 				)
 			}