@wordpress/dataviews 4.22.0 → 5.0.0

package/src/dataform-controls/datetime.tsx

@@ -1,19 +1,110 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
+import {
+	BaseControl,
+	TimePicker,
+	VisuallyHidden,
+	SelectControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
+} 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>
+	);
+}
 
 export default function DateTime< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	operator,
 }: DataFormControlProps< Item > ) {
 	const { id, label } = field;
 	const value = field.getValue( { item: data } );
@@ -23,6 +114,19 @@ export default function DateTime< Item >( {
 		[ id, onChange ]
 	);
 
+	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
+		return (
+			<RelativeDateControls
+				id={ id }
+				value={ value && typeof value === 'object' ? value : {} }
+				onChange={ onChange }
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
+				options={ TIME_UNITS_OPTIONS[ operator ] }
+			/>
+		);
+	}
+
 	return (
 		<fieldset className="dataviews-controls__datetime">
 			{ ! hideLabelFromVision && (
@@ -34,7 +138,7 @@ export default function DateTime< Item >( {
 				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 			) }
 			<TimePicker
-				currentTime={ value }
+				currentTime={ typeof value === 'string' ? value : undefined }
 				onChange={ onChangeControl }
 				hideLabelFromVision
 			/>

package/src/dataform-controls/email.tsx

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Email< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			type="email"
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

package/src/dataform-controls/index.tsx

@@ -11,22 +11,30 @@ import type {
 	Field,
 	FieldTypeDefinition,
 } from '../types';
+import checkbox from './checkbox';
 import datetime from './datetime';
+import email from './email';
 import integer from './integer';
 import radio from './radio';
 import select from './select';
 import text from './text';
+import toggleGroup from './toggle-group';
+import boolean from './boolean';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
 }
 
 const FORM_CONTROLS: FormControls = {
+	boolean,
+	checkbox,
 	datetime,
+	email,
 	integer,
 	radio,
 	select,
 	text,
+	toggleGroup,
 };
 
 export function getControl< Item >(

package/src/dataform-controls/integer.tsx

@@ -1,19 +1,82 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import {
+	Flex,
+	BaseControl,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { OPERATOR_BETWEEN } from '../constants';
 import type { DataFormControlProps } from '../types';
 
+function BetweenControls< Item >( {
+	id,
+	value,
+	onChange,
+	hideLabelFromVision,
+}: {
+	id: string;
+	value: any;
+	onChange: DataFormControlProps< Item >[ 'onChange' ];
+	hideLabelFromVision?: boolean;
+} ) {
+	const [ min = '', max = '' ] = Array.isArray( value ) ? value : [];
+
+	const onChangeMin = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: [ Number( newValue ), max ],
+			} ),
+		[ id, onChange, max ]
+	);
+
+	const onChangeMax = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: [ min, Number( newValue ) ],
+			} ),
+		[ id, onChange, min ]
+	);
+
+	return (
+		<BaseControl
+			__nextHasNoMarginBottom
+			help={ __( 'The max. value must be greater than the min. value.' ) }
+		>
+			<Flex direction="row" gap={ 4 }>
+				<NumberControl
+					label={ __( 'Min.' ) }
+					value={ min }
+					max={ max ? Number( max ) - 1 : undefined }
+					onChange={ onChangeMin }
+					__next40pxDefaultSize
+					hideLabelFromVision={ hideLabelFromVision }
+				/>
+				<NumberControl
+					label={ __( 'Max.' ) }
+					value={ max }
+					min={ min ? Number( min ) + 1 : undefined }
+					onChange={ onChangeMax }
+					__next40pxDefaultSize
+					hideLabelFromVision={ hideLabelFromVision }
+				/>
+			</Flex>
+		</BaseControl>
+	);
+}
+
 export default function Integer< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	operator,
 }: DataFormControlProps< Item > ) {
 	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
@@ -25,6 +88,17 @@ export default function Integer< Item >( {
 		[ id, onChange ]
 	);
 
+	if ( operator === OPERATOR_BETWEEN ) {
+		return (
+			<BetweenControls
+				id={ id }
+				value={ value }
+				onChange={ onChange }
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
 	return (
 		<NumberControl
 			label={ label }

package/src/dataform-controls/select.tsx

@@ -42,6 +42,7 @@ export default function Select< Item >( {
 		<SelectControl
 			label={ label }
 			value={ value }
+			help={ field.description }
 			options={ elements }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize

package/src/dataform-controls/style.scss

@@ -2,3 +2,8 @@
 	border: none;
 	padding: 0;
 }
+
+.dataviews-controls__datetime-number,
+.dataviews-controls__datetime-unit {
+	flex: 1 1 50%;
+}

package/src/dataform-controls/text.tsx

@@ -15,7 +15,7 @@ export default function Text< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder } = field;
+	const { id, label, placeholder, description } = field;
 	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -31,6 +31,7 @@ export default function Text< Item >( {
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }
+			help={ description }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom

package/src/dataform-controls/toggle-group.tsx

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function ToggleGroup< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string | number | undefined ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		const selectedOption = field.elements.find(
+			( el ) => el.value === value
+		);
+		return (
+			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				isBlock
+				label={ field.label }
+				help={ selectedOption?.description || field.description }
+				onChange={ onChangeControl }
+				value={ value }
+				hideLabelFromVision={ hideLabelFromVision }
+			>
+				{ field.elements.map( ( el ) => (
+					<ToggleGroupControlOption
+						key={ el.value }
+						label={ el.label }
+						value={ el.value }
+					/>
+				) ) }
+			</ToggleGroupControl>
+		);
+	}
+
+	return null;
+}

package/src/dataforms-layouts/data-form-layout.tsx

@@ -48,7 +48,7 @@ export function DataFormLayout< Item >( {
 	);
 
 	return (
-		<VStack spacing={ 4 }>
+		<VStack spacing={ form?.type === 'panel' ? 2 : 4 }>
 			{ normalizedFormFields.map( ( formField ) => {
 				const FieldLayout = getFormFieldLayout( formField.layout )
 					?.component;

package/src/dataforms-layouts/panel/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -134,11 +139,16 @@ function PanelDropdown< Item >( {
 					aria-label={ sprintf(
 						// translators: %s: Field name.
 						_x( 'Edit %s', 'field' ),
-						fieldLabel
+						fieldLabel || ''
 					) }
 					onClick={ onToggle }
+					disabled={ fieldDefinition.readOnly === true }
+					accessibleWhenDisabled
 				>
-					<fieldDefinition.render item={ data } />
+					<fieldDefinition.render
+						item={ data }
+						field={ fieldDefinition }
+					/>
 				</Button>
 			) }
 			renderContent={ ( { onClose } ) => (
@@ -188,7 +198,6 @@ export default function FormPanelField< Item >( {
 		}
 		return fieldDef.id === field.id;
 	} );
-	const labelPosition = field.labelPosition ?? 'side';
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -200,6 +209,11 @@ export default function FormPanelField< Item >( {
 		return null;
 	}
 
+	const labelPosition = field.labelPosition ?? 'side';
+	const labelClassName = clsx(
+		'dataforms-layouts-panel__field-label',
+		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`
+	);
 	const fieldLabel = isCombinedField( field )
 		? field.label
 		: fieldDefinition?.label;
@@ -208,7 +222,7 @@ export default function FormPanelField< Item >( {
 		return (
 			<VStack className="dataforms-layouts-panel__field" spacing={ 0 }>
 				<div
-					className="dataforms-layouts-panel__field-label"
+					className={ labelClassName }
 					style={ { paddingBottom: 0 } }
 				>
 					{ fieldLabel }
@@ -248,9 +262,7 @@ export default function FormPanelField< Item >( {
 			ref={ setPopoverAnchor }
 			className="dataforms-layouts-panel__field"
 		>
-			<div className="dataforms-layouts-panel__field-label">
-				{ fieldLabel }
-			</div>
+			<div className={ labelClassName }>{ fieldLabel }</div>
 			<div className="dataforms-layouts-panel__field-control">
 				<PanelDropdown
 					field={ field }

package/src/dataforms-layouts/panel/style.scss

@@ -13,7 +13,10 @@
 	align-items: center;
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
-	align-self: center;
+
+	&--label-position-side {
+		align-self: center;
+	}
 }
 
 .dataforms-layouts-panel__field-control {
@@ -31,6 +34,10 @@
 		min-height: $button-size-compact;
 	}
 
+	&.components-button.is-link[aria-disabled="true"] {
+		text-decoration: none;
+	}
+
 	.components-dropdown {
 		max-width: 100%;
 	}

package/src/dataforms-layouts/regular/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -79,23 +84,35 @@ export default function FormRegularField< Item >( {
 		( fieldDef ) => fieldDef.id === field.id
 	);
 
-	if ( ! fieldDefinition ) {
+	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
 		return null;
 	}
 	if ( labelPosition === 'side' ) {
 		return (
 			<HStack className="dataforms-layouts-regular__field">
-				<div className="dataforms-layouts-regular__field-label">
+				<div
+					className={ clsx(
+						'dataforms-layouts-regular__field-label',
+						`dataforms-layouts-regular__field-label--label-position-${ labelPosition }`
+					) }
+				>
 					{ fieldDefinition.label }
 				</div>
 				<div className="dataforms-layouts-regular__field-control">
-					<fieldDefinition.Edit
-						key={ fieldDefinition.id }
-						data={ data }
-						field={ fieldDefinition }
-						onChange={ onChange }
-						hideLabelFromVision
-					/>
+					{ fieldDefinition.readOnly === true ? (
+						<fieldDefinition.render
+							item={ data }
+							field={ fieldDefinition }
+						/>
+					) : (
+						<fieldDefinition.Edit
+							key={ fieldDefinition.id }
+							data={ data }
+							field={ fieldDefinition }
+							onChange={ onChange }
+							hideLabelFromVision
+						/>
+					) }
 				</div>
 			</HStack>
 		);
@@ -103,14 +120,30 @@ export default function FormRegularField< Item >( {
 
 	return (
 		<div className="dataforms-layouts-regular__field">
-			<fieldDefinition.Edit
-				data={ data }
-				field={ fieldDefinition }
-				onChange={ onChange }
-				hideLabelFromVision={
-					labelPosition === 'none' ? true : hideLabelFromVision
-				}
-			/>
+			{ fieldDefinition.readOnly === true ? (
+				<>
+					{ ! hideLabelFromVision && labelPosition !== 'none' && (
+						<div className="dataforms-layouts-regular__field-label">
+							{ fieldDefinition.label }
+						</div>
+					) }
+					<div className="dataforms-layouts-regular__field-control">
+						<fieldDefinition.render
+							item={ data }
+							field={ fieldDefinition }
+						/>
+					</div>
+				</>
+			) : (
+				<fieldDefinition.Edit
+					data={ data }
+					field={ fieldDefinition }
+					onChange={ onChange }
+					hideLabelFromVision={
+						labelPosition === 'none' ? true : hideLabelFromVision
+					}
+				/>
+			) }
 		</div>
 	);
 }

package/src/dataforms-layouts/regular/style.scss

@@ -19,7 +19,10 @@
 	align-items: center;
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
-	align-self: center;
+
+	&--label-position-side {
+		align-self: center;
+	}
 }
 
 .dataforms-layouts-regular__field-control {