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

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 {

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ComponentProps, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
@@ -35,7 +36,7 @@ import type {
 	ViewGridProps,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import { ItemClickWrapper } from '../utils/item-click-wrapper';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 const { Badge } = unlock( componentsPrivateApis );
 
@@ -45,6 +46,11 @@ interface GridItemProps< Item > {
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
@@ -62,6 +68,7 @@ function GridItem< Item >( {
 	onChangeSelection,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	getItemId,
 	item,
 	actions,
@@ -78,27 +85,13 @@ function GridItem< Item >( {
 	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
+		<mediaField.render item={ item } field={ mediaField } />
 	) : null;
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
-			<titleField.render item={ item } />
+			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
-	const clickableMediaItemProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className: 'dataviews-view-grid__media',
-	} );
-
-	const clickableTitleItemProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className: 'dataviews-view-grid__title-field dataviews-title-field',
-	} );
-
 	let mediaA11yProps;
 	let titleA11yProps;
 	if ( isItemClickable( item ) && onClickItem ) {
@@ -139,9 +132,16 @@ function GridItem< Item >( {
 			} }
 		>
 			{ showMedia && renderedMediaField && (
-				<div { ...clickableMediaItemProps } { ...mediaA11yProps }>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-grid__media"
+					{ ...mediaA11yProps }
+				>
 					{ renderedMediaField }
-				</div>
+				</ItemClickWrapper>
 			) }
 			{ hasBulkActions && showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
@@ -157,16 +157,26 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickableTitleItemProps } { ...titleA11yProps }>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-grid__title-field dataviews-title-field"
+					{ ...titleA11yProps }
+				>
 					{ renderedTitleField }
-				</div>
+				</ItemClickWrapper>
 				{ !! actions?.length && (
 					<ItemActions item={ item } actions={ actions } isCompact />
 				) }
 			</HStack>
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
-					<descriptionField.render item={ item } />
+					<descriptionField.render
+						item={ item }
+						field={ descriptionField }
+					/>
 				) }
 				{ !! badgeFields?.length && (
 					<HStack
@@ -182,7 +192,10 @@ function GridItem< Item >( {
 									key={ field.id }
 									className="dataviews-view-grid__field-value"
 								>
-									<field.render item={ item } />
+									<field.render
+										item={ item }
+										field={ field }
+									/>
 								</Badge>
 							);
 						} ) }
@@ -212,7 +225,10 @@ function GridItem< Item >( {
 											className="dataviews-view-grid__field-value"
 											style={ { maxHeight: 'none' } }
 										>
-											<field.render item={ item } />
+											<field.render
+												item={ item }
+												field={ field }
+											/>
 										</FlexItem>
 									</>
 								</Flex>
@@ -225,7 +241,7 @@ function GridItem< Item >( {
 	);
 }
 
-export default function ViewGrid< Item >( {
+function ViewGrid< Item >( {
 	actions,
 	data,
 	fields,
@@ -234,8 +250,10 @@ export default function ViewGrid< Item >( {
 	onChangeSelection,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	selection,
 	view,
+	className,
 }: ViewGridProps< Item > ) {
 	const titleField = fields.find(
 		( field ) => field.id === view?.titleField
@@ -282,7 +300,7 @@ export default function ViewGrid< Item >( {
 					gap={ 8 }
 					columns={ 2 }
 					alignment="top"
-					className="dataviews-view-grid"
+					className={ clsx( 'dataviews-view-grid', className ) }
 					style={ gridStyle }
 					aria-busy={ isLoading }
 				>
@@ -295,6 +313,7 @@ export default function ViewGrid< Item >( {
 								onChangeSelection={ onChangeSelection }
 								onClickItem={ onClickItem }
 								isItemClickable={ isItemClickable }
+								renderItemLink={ renderItemLink }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }
@@ -322,3 +341,5 @@ export default function ViewGrid< Item >( {
 		</>
 	);
 }
+
+export default ViewGrid;