@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/src/dataform-controls/text.tsx

@@ -1,16 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { privateApis } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedTextControl } = unlock( privateApis );
+import ValidatedText from './utils/validated-text';
 
 export default function Text< Item >( {
 	data,
@@ -18,54 +10,7 @@ export default function Text< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder, description } = field;
-	const value = field.getValue( { item: data } );
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedTextControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
 	return (
-		<ValidatedTextControl
-			required={ !! field.isValid?.required }
-			onValidate={ ( newValue: any ) => {
-				const message = field.isValid?.custom?.(
-					{
-						...data,
-						[ id ]: newValue,
-					},
-					field
-				);
-
-				if ( message ) {
-					setCustomValidity( {
-						type: 'invalid',
-						message,
-					} );
-					return;
-				}
-
-				setCustomValidity( undefined );
-			} }
-			customValidity={ customValidity }
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			help={ description }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
+		<ValidatedText { ...{ data, field, onChange, hideLabelFromVision } } />
 	);
 }

package/src/dataform-controls/{boolean.tsx → toggle.tsx}

@@ -12,13 +12,13 @@ import { unlock } from '../lock-unlock';
 
 const { ValidatedToggleControl } = unlock( privateApis );
 
-export default function Boolean< Item >( {
+export default function Toggle< Item >( {
 	field,
 	onChange,
 	data,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, getValue, label } = field;
+	const { id, getValue, label, description } = field;
 	const [ customValidity, setCustomValidity ] =
 		useState<
 			React.ComponentProps<
@@ -52,6 +52,7 @@ export default function Boolean< Item >( {
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }
+			help={ description }
 			checked={ getValue( { item: data } ) }
 			onChange={ () =>
 				onChange( { [ id ]: ! getValue( { item: data } ) } )

package/src/dataform-controls/url.tsx

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { link } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedText from './utils/validated-text';
+
+export default function Url< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	return (
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'url',
+				icon: link,
+			} }
+		/>
+	);
+}

package/src/dataform-controls/utils/validated-text.tsx

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	privateApis,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+import { unlock } from '../../lock-unlock';
+
+const { ValidatedInputControl } = unlock( privateApis );
+
+export type DataFormValidatedTextControlProps< Item > =
+	DataFormControlProps< Item > & {
+		/**
+		 * The input type of the control.
+		 */
+		type?: 'text' | 'email' | 'tel' | 'url';
+		/**
+		 * Optional icon to display as prefix.
+		 */
+		icon?: React.ComponentType | React.ReactElement;
+	};
+
+export default function ValidatedText< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+	type,
+	icon,
+}: DataFormValidatedTextControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedInputControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<ValidatedInputControl
+			required={ !! field.isValid?.required }
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
+				}
+
+				setCustomValidity( undefined );
+			} }
+			customValidity={ customValidity }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			hideLabelFromVision={ hideLabelFromVision }
+			type={ type }
+			prefix={
+				icon ? (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ icon } />
+					</InputControlPrefixWrapper>
+				) : undefined
+			}
+			__next40pxDefaultSize
+		/>
+	);
+}

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -104,6 +100,11 @@ export default function FormCardField< Item >( {
 					// If it doesn't have a header, keep it open.
 					// Otherwise, the card will not be visible.
 					<CardBody className="dataforms-layouts-card__field-control">
+						{ field.description && (
+							<div className="dataforms-layouts-card__field-description">
+								{ field.description }
+							</div>
+						) }
 						<DataFormLayout
 							data={ data }
 							form={ form }

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

@@ -1,3 +1,10 @@
 .dataforms-layouts-card__field {
 	width: 100%;
 }
+
+.dataforms-layouts-card__field-description {
+	color: $gray-700;
+	display: block;
+	font-size: $font-size-medium;
+	margin-bottom: $grid-unit-20;
+}

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

@@ -11,13 +11,18 @@ import type { Form, FormField, SimpleFormField } from '../types';
 import { getFormFieldLayout } from './index';
 import DataFormContext from '../components/dataform-context';
 import { isCombinedField } from './is-combined-field';
-import normalizeFormFields from '../normalize-form-fields';
+import normalizeFormFields, { normalizeLayout } from '../normalize-form-fields';
+
+const DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (
+	<VStack spacing={ 4 }>{ children }</VStack>
+);
 
 export function DataFormLayout< Item >( {
 	data,
 	form,
 	onChange,
 	children,
+	as,
 }: {
 	data: Item;
 	form: Form;
@@ -31,6 +36,7 @@ export function DataFormLayout< Item >( {
 		} ) => React.JSX.Element | null,
 		field: FormField
 	) => React.JSX.Element;
+	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
 	const { fields: fieldDefinitions } = useContext( DataFormContext );
 
@@ -47,8 +53,14 @@ export function DataFormLayout< Item >( {
 		[ form ]
 	);
 
+	const normalizedFormLayout = normalizeLayout( form.layout );
+	const Wrapper =
+		as ??
+		getFormFieldLayout( normalizedFormLayout.type )?.wrapper ??
+		DEFAULT_WRAPPER;
+
 	return (
-		<VStack spacing={ form.layout?.type === 'panel' ? 2 : 4 }>
+		<Wrapper layout={ normalizedFormLayout }>
 			{ normalizedFormFields.map( ( formField ) => {
 				const FieldLayout = getFormFieldLayout( formField.layout.type )
 					?.component;
@@ -82,6 +94,6 @@ export function DataFormLayout< Item >( {
 					/>
 				);
 			} ) }
-		</VStack>
+		</Wrapper>
 	);
 }

package/src/dataforms-layouts/index.tsx

@@ -1,9 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
+import type { Layout, RowLayout } from '../types';
 import FormRegularField from './regular';
 import FormPanelField from './panel';
 import FormCardField from './card';
+import FormRowField from './row';
 
 const FORM_FIELD_LAYOUTS = [
 	{
@@ -13,11 +23,36 @@ const FORM_FIELD_LAYOUTS = [
 	{
 		type: 'panel',
 		component: FormPanelField,
+		wrapper: ( { children }: { children: React.ReactNode } ) => (
+			<VStack spacing={ 2 }>{ children }</VStack>
+		),
 	},
 	{
 		type: 'card',
 		component: FormCardField,
 	},
+	{
+		type: 'row',
+		component: FormRowField,
+		wrapper: ( {
+			children,
+			layout,
+		}: {
+			children: React.ReactNode;
+			layout: Layout;
+		} ) => (
+			<VStack spacing={ 4 }>
+				<div className="dataforms-layouts-row__field">
+					<HStack
+						spacing={ 4 }
+						alignment={ ( layout as RowLayout ).alignment }
+					>
+						{ children }
+					</HStack>
+				</div>
+			</VStack>
+		),
+	},
 ];
 
 export function getFormFieldLayout( type: string ) {

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

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { FieldLayoutProps, Form, NormalizedRowLayout } from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+import { normalizeLayout } from '../../normalize-form-fields';
+import { getFormFieldLayout } from '..';
+
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts-row__header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
+}
+
+const EMPTY_WRAPPER = ( { children }: { children: React.ReactNode } ) => (
+	<>{ children }</>
+);
+
+export default function FormRowField< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const layout = normalizeLayout( {
+		...field.layout,
+		type: 'row',
+	} ) as NormalizedRowLayout;
+
+	if ( isCombinedField( field ) ) {
+		const form: Form = {
+			fields: field.children.map( ( child ) => {
+				if ( typeof child === 'string' ) {
+					return { id: child };
+				}
+				return child;
+			} ),
+		};
+
+		return (
+			<div className="dataforms-layouts-row__field">
+				{ ! hideLabelFromVision && field.label && (
+					<Header title={ field.label } />
+				) }
+				<HStack alignment={ layout.alignment } spacing={ 4 }>
+					<DataFormLayout
+						data={ data }
+						form={ form }
+						onChange={ onChange }
+						as={ EMPTY_WRAPPER }
+					>
+						{ ( FieldLayout, nestedField ) => (
+							<div
+								key={ nestedField.id }
+								className="dataforms-layouts-row__field-control"
+							>
+								<FieldLayout
+									data={ data }
+									field={ nestedField }
+									onChange={ onChange }
+									hideLabelFromVision={ hideLabelFromVision }
+								/>
+							</div>
+						) }
+					</DataFormLayout>
+				</HStack>
+			</div>
+		);
+	}
+
+	const fieldDefinition = fields.find( ( f ) => f.id === field.id );
+
+	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
+		return null;
+	}
+
+	const RegularLayout = getFormFieldLayout( 'regular' )?.component;
+	if ( ! RegularLayout ) {
+		return null;
+	}
+
+	return (
+		<>
+			<div className="dataforms-layouts-row__field-control">
+				<RegularLayout
+					data={ data }
+					field={ fieldDefinition }
+					onChange={ onChange }
+				/>
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,3 @@
+.dataforms-layouts-row__field-control {
+	width: 100%;
+}

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

@@ -40,6 +40,7 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
+import { GridItems } from '../utils/grid-items';
 const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
@@ -108,6 +109,7 @@ function GridItem< Item >( {
 		showTitle && titleField?.render ? (
 			<titleField.render item={ item } field={ titleField } />
 		) : null;
+	const shouldRenderMedia = showMedia && renderedMediaField;
 
 	let mediaA11yProps;
 	let titleA11yProps;
@@ -154,7 +156,7 @@ function GridItem< Item >( {
 			}
 			aria-posinset={ posinset }
 		>
-			{ showMedia && renderedMediaField && (
+			{ shouldRenderMedia && (
 				<ItemClickWrapper
 					item={ item }
 					isItemClickable={ isItemClickable }
@@ -166,7 +168,7 @@ function GridItem< Item >( {
 					{ renderedMediaField }
 				</ItemClickWrapper>
 			) }
-			{ hasBulkActions && showMedia && renderedMediaField && (
+			{ hasBulkActions && shouldRenderMedia && (
 				<DataViewsSelectionCheckbox
 					item={ item }
 					selection={ selection }
@@ -176,24 +178,35 @@ function GridItem< Item >( {
 					disabled={ ! hasBulkAction }
 				/>
 			) }
-			<HStack
-				justify="space-between"
-				className="dataviews-view-grid__title-actions"
-			>
-				<ItemClickWrapper
-					item={ item }
-					isItemClickable={ isItemClickable }
-					onClickItem={ onClickItem }
-					renderItemLink={ renderItemLink }
-					className="dataviews-view-grid__title-field dataviews-title-field"
-					{ ...titleA11yProps }
-				>
-					{ renderedTitleField }
-				</ItemClickWrapper>
-				{ !! actions?.length && (
+			{ ! showTitle && shouldRenderMedia && !! actions?.length && (
+				<div className="dataviews-view-grid__media-actions">
 					<ItemActions item={ item } actions={ actions } isCompact />
-				) }
-			</HStack>
+				</div>
+			) }
+			{ showTitle && (
+				<HStack
+					justify="space-between"
+					className="dataviews-view-grid__title-actions"
+				>
+					<ItemClickWrapper
+						item={ item }
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+						renderItemLink={ renderItemLink }
+						className="dataviews-view-grid__title-field dataviews-title-field"
+						{ ...titleA11yProps }
+					>
+						{ renderedTitleField }
+					</ItemClickWrapper>
+					{ !! actions?.length && (
+						<ItemActions
+							item={ item }
+							actions={ actions }
+							isCompact
+						/>
+					) }
+				</HStack>
+			) }
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
 					<descriptionField.render
@@ -357,16 +370,12 @@ function ViewGrid< Item >( {
 											groupName
 										) }
 									</h3>
-									<div
+									<GridItems
 										className={ clsx(
 											'dataviews-view-grid',
 											className
 										) }
-										style={ {
-											gridTemplateColumns:
-												usedPreviewSize &&
-												`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
-										} }
+										previewSize={ usedPreviewSize }
 										aria-busy={ isLoading }
 										ref={ resizeObserverRef }
 									>
@@ -407,7 +416,7 @@ function ViewGrid< Item >( {
 												/>
 											);
 										} ) }
-									</div>
+									</GridItems>
 								</VStack>
 							)
 						) }
@@ -418,13 +427,9 @@ function ViewGrid< Item >( {
 			{
 				// Render a single grid with all data.
 				hasData && ! dataByGroup && (
-					<div
+					<GridItems
 						className={ clsx( 'dataviews-view-grid', className ) }
-						style={ {
-							gridTemplateColumns:
-								usedPreviewSize &&
-								`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
-						} }
+						previewSize={ usedPreviewSize }
 						aria-busy={ isLoading }
 						ref={ resizeObserverRef }
 						role={ isInfiniteScroll ? 'feed' : undefined }
@@ -457,7 +462,7 @@ function ViewGrid< Item >( {
 								/>
 							);
 						} ) }
-					</div>
+					</GridItems>
 				)
 			}
 			{