@wordpress/dataviews 6.0.0 → 7.0.0

package/src/dataform-controls/array.tsx

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function ArrayControl< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, elements } = field;
+	const value = field.getValue( { item: data } );
+
+	const findElementByValue = useCallback(
+		( suggestionValue: string ) => {
+			return elements?.find(
+				( suggestion ) => suggestion.value === suggestionValue
+			);
+		},
+		[ elements ]
+	);
+
+	const findElementByLabel = useCallback(
+		( suggestionLabel: string ) => {
+			return elements?.find(
+				( suggestion ) => suggestion.label === suggestionLabel
+			);
+		},
+		[ elements ]
+	);
+
+	// Ensure value is an array
+	const arrayValue = useMemo(
+		() =>
+			Array.isArray( value )
+				? value.map( ( token ) => {
+						const tokenLabel = findElementByValue( token )?.label;
+						return tokenLabel || token;
+				  } )
+				: [],
+		[ value, findElementByValue ]
+	);
+
+	const onChangeControl = useCallback(
+		( tokens: ( string | { value: string } )[] ) => {
+			// Convert TokenItem objects to strings
+			const stringTokens = tokens.map( ( token ) => {
+				if ( typeof token !== 'string' ) {
+					return token.value;
+				}
+
+				const tokenByLabel = findElementByLabel( token );
+
+				return tokenByLabel?.value || token;
+			} );
+
+			onChange( {
+				[ id ]: stringTokens,
+			} );
+		},
+		[ id, onChange, findElementByLabel ]
+	);
+
+	return (
+		<FormTokenField
+			label={ hideLabelFromVision ? undefined : label }
+			value={ arrayValue }
+			onChange={ onChangeControl }
+			placeholder={ placeholder }
+			suggestions={
+				elements?.map( ( suggestion ) => suggestion.label ) ?? []
+			}
+			__experimentalExpandOnFocus={ elements && elements.length > 0 }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+}

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/index.tsx

@@ -21,12 +21,14 @@ import select from './select';
 import text from './text';
 import toggleGroup from './toggle-group';
 import boolean from './boolean';
+import array from './array';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
 }
 
 const FORM_CONTROLS: FormControls = {
+	array,
 	boolean,
 	checkbox,
 	datetime,
@@ -51,7 +53,7 @@ export function getControl< Item >(
 		return getControlByType( field.Edit );
 	}
 
-	if ( field.elements ) {
+	if ( field.elements && field.type !== 'array' ) {
 		return getControlByType( 'select' );
 	}
 

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/card/index.tsx

@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
+import { useCallback, useContext, useMemo, useState } from '@wordpress/element';
+import { chevronDown, chevronUp } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { getFormFieldLayout } from '..';
+import DataFormContext from '../../components/dataform-context';
+import type { NormalizedCardLayout, FieldLayoutProps, Form } from '../../types';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+import { DEFAULT_LAYOUT, normalizeLayout } from '../../normalize-form-fields';
+
+export function useCollapsibleCard( initialIsOpen: boolean = true ) {
+	const [ isOpen, setIsOpen ] = useState( initialIsOpen );
+
+	const toggle = useCallback( () => {
+		setIsOpen( ( prev ) => ! prev );
+	}, [] );
+
+	const CollapsibleCardHeader = useCallback(
+		( {
+			children,
+			...props
+		}: {
+			children: React.ReactNode;
+			[ key: string ]: any;
+		} ) => (
+			<CardHeader
+				{ ...props }
+				onClick={ toggle }
+				style={ {
+					cursor: 'pointer',
+					...props.style,
+				} }
+			>
+				<div
+					style={ {
+						width: '100%',
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+					} }
+				>
+					{ children }
+				</div>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					icon={ isOpen ? chevronUp : chevronDown }
+					aria-expanded={ isOpen }
+					aria-label={ isOpen ? 'Collapse' : 'Expand' }
+				/>
+			</CardHeader>
+		),
+		[ toggle, isOpen ]
+	);
+
+	return { isOpen, CollapsibleCardHeader };
+}
+
+export default function FormCardField< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const layout: NormalizedCardLayout = normalizeLayout( {
+		...field.layout,
+		type: 'card',
+	} ) as NormalizedCardLayout;
+
+	const form: Form = useMemo(
+		(): Form => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: isCombinedField( field ) ? field.children : [],
+		} ),
+		[ field ]
+	);
+
+	const { isOpen, CollapsibleCardHeader } = useCollapsibleCard(
+		layout.isOpened
+	);
+	if ( isCombinedField( field ) ) {
+		const withHeader = !! field.label && layout.withHeader;
+		return (
+			<Card className="dataforms-layouts-card__field">
+				{ withHeader && (
+					<CollapsibleCardHeader className="dataforms-layouts-card__field-label">
+						{ field.label }
+					</CollapsibleCardHeader>
+				) }
+				{ ( isOpen || ! withHeader ) && (
+					// If it doesn't have a header, keep it open.
+					// Otherwise, the card will not be visible.
+					<CardBody className="dataforms-layouts-card__field-control">
+						<DataFormLayout
+							data={ data }
+							form={ form }
+							onChange={ onChange }
+						/>
+					</CardBody>
+				) }
+			</Card>
+		);
+	}
+
+	const fieldDefinition = fields.find(
+		( fieldDef ) => fieldDef.id === field.id
+	);
+
+	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
+		return null;
+	}
+
+	const RegularLayout = getFormFieldLayout( 'regular' )?.component;
+	if ( ! RegularLayout ) {
+		return null;
+	}
+	const withHeader = !! fieldDefinition.label && layout.withHeader;
+	return (
+		<Card className="dataforms-layouts-card__field">
+			{ withHeader && (
+				<CollapsibleCardHeader className="dataforms-layouts-card__field-label">
+					{ fieldDefinition.label }
+				</CollapsibleCardHeader>
+			) }
+			{ ( isOpen || ! withHeader ) && (
+				// If it doesn't have a header, keep it open.
+				// Otherwise, the card will not be visible.
+				<CardBody className="dataforms-layouts-card__field-control">
+					<RegularLayout
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+						hideLabelFromVision={
+							hideLabelFromVision || withHeader
+						}
+					/>
+				</CardBody>
+			) }
+		</Card>
+	);
+}

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

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

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

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

package/src/dataforms-layouts/index.tsx

@@ -3,6 +3,7 @@
  */
 import FormRegularField from './regular';
 import FormPanelField from './panel';
+import FormCardField from './card';
 
 const FORM_FIELD_LAYOUTS = [
 	{
@@ -13,6 +14,10 @@ const FORM_FIELD_LAYOUTS = [
 		type: 'panel',
 		component: FormPanelField,
 	},
+	{
+		type: 'card',
+		component: FormCardField,
+	},
 ];
 
 export function getFormFieldLayout( type: string ) {

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;