@wordpress/dataviews 7.0.1-next.0f6f9d12c.0 → 7.0.1-next.f34ab90e9.0

package/src/components/dataviews-item-actions/index.tsx

@@ -179,17 +179,6 @@ export default function ItemActions< Item >( {
 		);
 	}
 
-	// If all actions are primary, there is no need to render the dropdown.
-	if ( primaryActions.length === eligibleActions.length ) {
-		return (
-			<PrimaryActions
-				item={ item }
-				actions={ primaryActions }
-				registry={ registry }
-			/>
-		);
-	}
-
 	return (
 		<HStack
 			spacing={ 1 }
@@ -205,11 +194,13 @@ export default function ItemActions< Item >( {
 				actions={ primaryActions }
 				registry={ registry }
 			/>
-			<CompactItemActions
-				item={ item }
-				actions={ eligibleActions }
-				registry={ registry }
-			/>
+			{ primaryActions.length < eligibleActions.length && (
+				<CompactItemActions
+					item={ item }
+					actions={ eligibleActions }
+					registry={ registry }
+				/>
+			) }
 		</HStack>
 	);
 }

package/src/dataform-controls/boolean.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,23 +19,36 @@ export default function Boolean< Item >( {
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, getValue, label } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedToggleControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	return (
 		<ValidatedToggleControl
 			required={ !! field.isValid.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: newValue,
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }

package/src/dataform-controls/email.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,6 +20,12 @@ export default function Email< Item >( {
 }: 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 ) =>
@@ -32,19 +38,26 @@ export default function Email< Item >( {
 	return (
 		<ValidatedTextControl
 			required={ !! field.isValid?.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: newValue,
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			type="email"
 			label={ label }
 			placeholder={ placeholder }

package/src/dataform-controls/integer.tsx

@@ -7,7 +7,7 @@ import {
 	__experimentalNumberControl as NumberControl,
 	privateApis,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -84,6 +84,13 @@ export default function Integer< Item >( {
 }: DataFormControlProps< Item > ) {
 	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedNumberControl
+			>[ 'customValidity' ]
+		>( undefined );
+
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) => {
 			onChange( {
@@ -112,21 +119,28 @@ export default function Integer< Item >( {
 	return (
 		<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
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: [ undefined, '', null ].includes( newValue )
+							? undefined
+							: Number( newValue ),
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			label={ label }
 			help={ description }
 			value={ value }

package/src/dataform-controls/text.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,6 +20,12 @@ export default function Text< Item >( {
 }: 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 ) =>
@@ -32,19 +38,26 @@ export default function Text< Item >( {
 	return (
 		<ValidatedTextControl
 			required={ !! field.isValid?.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: newValue,
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }

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

@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { Form, FormField, NormalizedField } from '../../types';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+import { DEFAULT_LAYOUT } from '../../normalize-form-fields';
+
+function DropdownHeader( {
+	title,
+	onClose,
+}: {
+	title?: string;
+	onClose: () => void;
+} ) {
+	return (
+		<VStack
+			className="dataforms-layouts-panel__dropdown-header"
+			spacing={ 4 }
+		>
+			<HStack alignment="center">
+				{ title && (
+					<Heading level={ 2 } size={ 13 }>
+						{ title }
+					</Heading>
+				) }
+				<Spacer />
+				{ onClose && (
+					<Button
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+						size="small"
+					/>
+				) }
+			</HStack>
+		</VStack>
+	);
+}
+
+function PanelDropdown< Item >( {
+	fieldDefinition,
+	popoverAnchor,
+	labelPosition = 'side',
+	data,
+	onChange,
+	field,
+}: {
+	fieldDefinition: NormalizedField< Item >;
+	popoverAnchor: HTMLElement | null;
+	labelPosition: 'side' | 'top' | 'none';
+	data: Item;
+	onChange: ( value: any ) => void;
+	field: FormField;
+} ) {
+	const fieldLabel = isCombinedField( field )
+		? field.label
+		: fieldDefinition?.label;
+
+	const form: Form = useMemo(
+		(): Form => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: isCombinedField( field )
+				? field.children
+				: // If not explicit children return the field id itself.
+				  [ { id: field.id } ],
+		} ),
+		[ field ]
+	);
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<Dropdown
+			contentClassName="dataforms-layouts-panel__field-dropdown"
+			popoverProps={ popoverProps }
+			focusOnMount
+			toggleProps={ {
+				size: 'compact',
+				variant: 'tertiary',
+				tooltipPosition: 'middle left',
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					className="dataforms-layouts-panel__field-control"
+					size="compact"
+					variant={
+						[ 'none', 'top' ].includes( labelPosition )
+							? 'link'
+							: 'tertiary'
+					}
+					aria-expanded={ isOpen }
+					aria-label={ sprintf(
+						// translators: %s: Field name.
+						_x( 'Edit %s', 'field' ),
+						fieldLabel || ''
+					) }
+					onClick={ onToggle }
+					disabled={ fieldDefinition.readOnly === true }
+					accessibleWhenDisabled
+				>
+					<fieldDefinition.render
+						item={ data }
+						field={ fieldDefinition }
+					/>
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
+					<DataFormLayout
+						data={ data }
+						form={ form }
+						onChange={ onChange }
+					>
+						{ ( FieldLayout, nestedField ) => (
+							<FieldLayout
+								key={ nestedField.id }
+								data={ data }
+								field={ nestedField }
+								onChange={ onChange }
+								hideLabelFromVision={
+									( form?.fields ?? [] ).length < 2
+								}
+							/>
+						) }
+					</DataFormLayout>
+				</>
+			) }
+		/>
+	);
+}
+
+export default PanelDropdown;

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

@@ -9,166 +9,22 @@ import clsx from 'clsx';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
-	__experimentalSpacer as Spacer,
-	Dropdown,
-	Button,
 } from '@wordpress/components';
-import { sprintf, __, _x } from '@wordpress/i18n';
-import { useState, useMemo, useContext } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
+import { useState, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type {
-	Form,
-	FormField,
 	FieldLayoutProps,
 	NormalizedPanelLayout,
-	NormalizedField,
 	SimpleFormField,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
-import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT, normalizeLayout } from '../../normalize-form-fields';
-
-function DropdownHeader( {
-	title,
-	onClose,
-}: {
-	title?: string;
-	onClose: () => void;
-} ) {
-	return (
-		<VStack
-			className="dataforms-layouts-panel__dropdown-header"
-			spacing={ 4 }
-		>
-			<HStack alignment="center">
-				{ title && (
-					<Heading level={ 2 } size={ 13 }>
-						{ title }
-					</Heading>
-				) }
-				<Spacer />
-				{ onClose && (
-					<Button
-						label={ __( 'Close' ) }
-						icon={ closeSmall }
-						onClick={ onClose }
-						size="small"
-					/>
-				) }
-			</HStack>
-		</VStack>
-	);
-}
-
-function PanelDropdown< Item >( {
-	fieldDefinition,
-	popoverAnchor,
-	labelPosition = 'side',
-	data,
-	onChange,
-	field,
-}: {
-	fieldDefinition: NormalizedField< Item >;
-	popoverAnchor: HTMLElement | null;
-	labelPosition: 'side' | 'top' | 'none';
-	data: Item;
-	onChange: ( value: any ) => void;
-	field: FormField;
-} ) {
-	const fieldLabel = isCombinedField( field )
-		? field.label
-		: fieldDefinition?.label;
-
-	const form: Form = useMemo(
-		(): Form => ( {
-			layout: DEFAULT_LAYOUT,
-			fields: isCombinedField( field )
-				? field.children
-				: // If not explicit children return the field id itself.
-				  [ { id: field.id } ],
-		} ),
-		[ field ]
-	);
-
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Anchor the popover to the middle of the entire row so that it doesn't
-			// move around when the label changes.
-			anchor: popoverAnchor,
-			placement: 'left-start',
-			offset: 36,
-			shift: true,
-		} ),
-		[ popoverAnchor ]
-	);
-
-	return (
-		<Dropdown
-			contentClassName="dataforms-layouts-panel__field-dropdown"
-			popoverProps={ popoverProps }
-			focusOnMount
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				tooltipPosition: 'middle left',
-			} }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					className="dataforms-layouts-panel__field-control"
-					size="compact"
-					variant={
-						[ 'none', 'top' ].includes( labelPosition )
-							? 'link'
-							: 'tertiary'
-					}
-					aria-expanded={ isOpen }
-					aria-label={ sprintf(
-						// translators: %s: Field name.
-						_x( 'Edit %s', 'field' ),
-						fieldLabel || ''
-					) }
-					onClick={ onToggle }
-					disabled={ fieldDefinition.readOnly === true }
-					accessibleWhenDisabled
-				>
-					<fieldDefinition.render
-						item={ data }
-						field={ fieldDefinition }
-					/>
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
-					<DataFormLayout
-						data={ data }
-						form={ form }
-						onChange={ onChange }
-					>
-						{ ( FieldLayout, nestedField ) => (
-							<FieldLayout
-								key={ nestedField.id }
-								data={ data }
-								field={ nestedField }
-								onChange={ onChange }
-								hideLabelFromVision={
-									( form?.fields ?? [] ).length < 2
-								}
-							/>
-						) }
-					</DataFormLayout>
-				</>
-			) }
-		/>
-	);
-}
+import { normalizeLayout } from '../../normalize-form-fields';
+import PanelDropdown from './dropdown';
+import PanelModal from './modal';
 
 export default function FormPanelField< Item >( {
 	data,
@@ -192,6 +48,7 @@ export default function FormPanelField< Item >( {
 				typeof simpleChildren[ 0 ] === 'string'
 					? simpleChildren[ 0 ]
 					: simpleChildren[ 0 ].id;
+
 			return _field.id === firstChildFieldId;
 		}
 
@@ -222,6 +79,26 @@ export default function FormPanelField< Item >( {
 		? field.label
 		: fieldDefinition?.label;
 
+	const renderedControl =
+		layout.openAs === 'modal' ? (
+			<PanelModal
+				field={ field }
+				fieldDefinition={ fieldDefinition }
+				data={ data }
+				onChange={ onChange }
+				labelPosition={ labelPosition }
+			/>
+		) : (
+			<PanelDropdown
+				field={ field }
+				popoverAnchor={ popoverAnchor }
+				fieldDefinition={ fieldDefinition }
+				data={ data }
+				onChange={ onChange }
+				labelPosition={ labelPosition }
+			/>
+		);
+
 	if ( labelPosition === 'top' ) {
 		return (
 			<VStack className="dataforms-layouts-panel__field" spacing={ 0 }>
@@ -232,14 +109,7 @@ export default function FormPanelField< Item >( {
 					{ fieldLabel }
 				</div>
 				<div className="dataforms-layouts-panel__field-control">
-					<PanelDropdown
-						field={ field }
-						popoverAnchor={ popoverAnchor }
-						fieldDefinition={ fieldDefinition }
-						data={ data }
-						onChange={ onChange }
-						labelPosition={ labelPosition }
-					/>
+					{ renderedControl }
 				</div>
 			</VStack>
 		);
@@ -248,14 +118,7 @@ export default function FormPanelField< Item >( {
 	if ( labelPosition === 'none' ) {
 		return (
 			<div className="dataforms-layouts-panel__field">
-				<PanelDropdown
-					field={ field }
-					popoverAnchor={ popoverAnchor }
-					fieldDefinition={ fieldDefinition }
-					data={ data }
-					onChange={ onChange }
-					labelPosition={ labelPosition }
-				/>
+				{ renderedControl }
 			</div>
 		);
 	}
@@ -268,14 +131,7 @@ export default function FormPanelField< Item >( {
 		>
 			<div className={ labelClassName }>{ fieldLabel }</div>
 			<div className="dataforms-layouts-panel__field-control">
-				<PanelDropdown
-					field={ field }
-					popoverAnchor={ popoverAnchor }
-					fieldDefinition={ fieldDefinition }
-					data={ data }
-					onChange={ onChange }
-					labelPosition={ labelPosition }
-				/>
+				{ renderedControl }
 			</div>
 		</HStack>
 	);