@wordpress/dataviews 11.4.1-next.v.0 → 12.0.0

package/src/components/dataform-layouts/panel/modal.tsx

@@ -23,7 +23,7 @@ import type {
 	Field,
 	NormalizedForm,
 	NormalizedFormField,
-	NormalizedField,
+	FieldLayoutProps,
 } from '../../../types';
 import { DataFormLayout } from '../data-form-layout';
 import { DEFAULT_LAYOUT } from '../normalize-form';
@@ -31,6 +31,7 @@ import SummaryButton from './summary-button';
 import useFormValidity from '../../../hooks/use-form-validity';
 import useReportValidity from '../../../hooks/use-report-validity';
 import DataFormContext from '../../dataform-context';
+import useFieldFromFormField from './utils/use-field-from-form-field';
 
 function ModalContent< Item >( {
 	data,
@@ -117,13 +118,19 @@ function ModalContent< Item >( {
 					onChange={ handleOnChange }
 					validity={ validity }
 				>
-					{ ( FieldLayout, childField, childFieldValidity ) => (
+					{ (
+						FieldLayout,
+						childField,
+						childFieldValidity,
+						markWhenOptional
+					) => (
 						<FieldLayout
 							key={ childField.id }
 							data={ modalData }
 							field={ childField }
 							onChange={ handleOnChange }
 							hideLabelFromVision={ form.fields.length < 2 }
+							markWhenOptional={ markWhenOptional }
 							validity={ childFieldValidity }
 						/>
 					) }
@@ -132,7 +139,7 @@ function ModalContent< Item >( {
 			<Stack
 				direction="row"
 				className="dataforms-layouts-panel__modal-footer"
-				gap="sm"
+				gap="md"
 			>
 				<Spacer style={ { flex: 1 } } />
 				<Button
@@ -158,37 +165,32 @@ function PanelModal< Item >( {
 	data,
 	field,
 	onChange,
-	labelPosition,
-	summaryFields,
-	fieldDefinition,
-	onClose: onCloseCallback,
-	touched,
-}: {
-	data: Item;
-	field: NormalizedFormField;
-	onChange: ( value: any ) => void;
-	labelPosition: 'side' | 'top' | 'none';
-	summaryFields: NormalizedField< Item >[];
-	fieldDefinition: NormalizedField< Item >;
-	onClose?: () => void;
-	touched: boolean;
-} ) {
+	validity,
+}: FieldLayoutProps< Item > ) {
+	const [ touched, setTouched ] = useState( false );
+
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
+	const { fieldDefinition, fieldLabel, summaryFields } =
+		useFieldFromFormField( field );
+	if ( ! fieldDefinition ) {
+		return null;
+	}
 
 	const handleClose = () => {
 		setIsOpen( false );
-		onCloseCallback?.();
+		setTouched( true );
 	};
 
 	return (
 		<>
 			<SummaryButton
-				summaryFields={ summaryFields }
 				data={ data }
-				labelPosition={ labelPosition }
+				field={ field }
 				fieldLabel={ fieldLabel }
+				summaryFields={ summaryFields }
+				validity={ validity }
+				touched={ touched }
 				disabled={ fieldDefinition.readOnly === true }
 				onClick={ () => setIsOpen( true ) }
 				aria-expanded={ isOpen }

package/src/components/dataform-layouts/panel/style.scss

@@ -2,28 +2,101 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
-.dataforms-layouts-panel__field {
+.dataforms-layouts-panel__field-trigger {
+	position: relative;
+	color: inherit;
+	display: flex;
 	width: 100%;
-	min-height: $grid-unit-40;
-	justify-content: flex-start !important;
-	align-items: flex-start !important;
+	min-height: $grid-unit-30;
+	cursor: pointer;
+	align-items: flex-start;
+	border-radius: $radius-small;
+	isolation: isolate;
+
+	&--label-side {
+		flex-direction: row;
+		gap: var(--wpds-dimension-gap-md);
+	}
+
+	&--label-top {
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
+	&--label-none {
+		align-items: center;
+	}
+
+	&:not(.is-disabled):hover {
+		color: var(--wp-admin-theme-color);
+
+		.dataforms-layouts-panel__field-trigger-icon {
+			opacity: 1;
+		}
+
+		.dataforms-layouts-panel__field-label {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
+	&.is-disabled {
+		cursor: default;
+
+		.dataforms-layouts-panel__field-control {
+			color: $gray-700;
+			font-weight: var(--wpds-font-weight-regular);
+		}
+	}
+}
+
+.dataforms-layouts-panel__field-trigger--edit-always
+.dataforms-layouts-panel__field-trigger-icon {
+	opacity: 1;
+	fill: currentColor;
+
+	&:hover,
+	&:focus-visible {
+		fill: var(--wp-admin-theme-color);
+	}
+}
+
+.dataforms-layouts-panel__field-trigger-icon {
+	padding: 0;
+	color: var(--wp-admin-theme-color);
+	flex: 0 0 auto;
+	opacity: 0;
+	border-radius: var(--wpds-border-radius-xs);
 
-	&--label-position-none {
-		align-items: center !important;
+	&:focus-visible {
+		opacity: 1;
+		outline:
+			var(--wpds-border-width-focus) solid
+			var(--wp-admin-theme-color);
+	}
+}
+
+.dataforms-layouts-panel__field-dropdown-anchor {
+	width: 100%;
+
+	.components-dropdown {
+		width: 100%;
 	}
 }
 
 .dataforms-layouts-panel__field-label {
 	width: 38%;
 	flex-shrink: 0;
-	min-height: $grid-unit-40;
+	min-height: $grid-unit-30;
 	display: flex;
 	align-items: center;
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
+	color: $gray-700;
 
-	&--label-position-side {
-		align-self: center;
+	.components-base-control__label {
+		display: inline;
+		margin-bottom: 0;
+		line-height: inherit;
 	}
 
 	&.has-error {
@@ -32,8 +105,14 @@
 }
 
 .dataforms-layouts-panel__field-label-error-content {
+	position: relative;
+	z-index: 1;
 	cursor: help;
 	fill: $alert-red;
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	gap: $grid-unit-05;
 	svg {
 		fill: currentColor;
 	}
@@ -41,26 +120,33 @@
 
 .dataforms-layouts-panel__field-control {
 	flex-grow: 1;
-	min-height: $grid-unit-40;
+	min-width: 0;
+	min-height: $grid-unit-30;
+	line-height: var(--wpds-font-line-height-md);
 	display: flex;
 	align-items: center;
+	overflow: hidden;
+	font-weight: var(--wpds-font-weight-medium);
 
-	.components-button {
-		max-width: 100%;
-		text-align: left;
-		white-space: normal;
-		text-wrap: balance; // Fallback for Safari.
-		text-wrap: pretty;
-		min-height: $button-size-compact;
+	> * {
+		min-width: 0;
 	}
+}
 
-	&.components-button.is-link[aria-disabled="true"] {
-		text-decoration: none;
-	}
+.dataforms-layouts-panel__field-trigger--label-top
+.dataforms-layouts-panel__field-label {
+	width: 100%;
+}
 
-	.components-dropdown {
-		max-width: 100%;
-	}
+.dataforms-layouts-panel__field-trigger--label-top
+.dataforms-layouts-panel__field-control {
+	grid-column: 1 / -1;
+}
+
+.dataforms-layouts-panel__field-trigger--label-top
+.dataforms-layouts-panel__field-trigger-icon {
+	grid-row: 1;
+	grid-column: 2;
 }
 
 .dataforms-layouts-panel__field-dropdown .components-popover__content {
@@ -79,7 +165,3 @@
 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
 	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
 }
-
-.dataforms-layouts-panel__summary-button:empty {
-	min-width: $admin-sidebar-width;
-}

package/src/components/dataform-layouts/panel/summary-button.tsx

@@ -1,92 +1,170 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, Icon, Tooltip } from '@wordpress/components';
 import { sprintf, _x } from '@wordpress/i18n';
+import { error as errorIcon, pencil } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { NormalizedField } from '../../../types';
+import type {
+	FieldValidity,
+	NormalizedField,
+	NormalizedFormField,
+	NormalizedPanelLayout,
+} from '../../../types';
+import getLabelClassName from './utils/get-label-classname';
+import getLabelContent from './utils/get-label-content';
+import getFirstValidationError from './utils/get-first-validation-error';
 
-function SummaryButton< Item >( {
-	summaryFields,
+export default function SummaryButton< Item >( {
 	data,
-	labelPosition,
+	field,
 	fieldLabel,
+	summaryFields,
+	validity,
+	touched,
 	disabled,
 	onClick,
 	'aria-expanded': ariaExpanded,
 }: {
-	summaryFields: NormalizedField< Item >[];
 	data: Item;
-	labelPosition: 'side' | 'top' | 'none';
+	field: NormalizedFormField;
 	fieldLabel?: string;
+	summaryFields: NormalizedField< Item >[];
+	validity?: FieldValidity;
+	touched: boolean;
 	disabled?: boolean;
 	onClick: () => void;
 	'aria-expanded'?: boolean;
 } ) {
-	return (
-		<Button
-			className="dataforms-layouts-panel__summary-button"
-			size="compact"
-			variant={
-				[ 'none', 'top' ].includes( labelPosition )
-					? 'link'
-					: 'tertiary'
-			}
-			aria-expanded={ ariaExpanded }
-			aria-label={ sprintf(
+	const { labelPosition, editVisibility } =
+		field.layout as NormalizedPanelLayout;
+	const errorMessage = getFirstValidationError( validity );
+	const showError = touched && !! errorMessage;
+	const labelClassName = getLabelClassName( labelPosition, showError );
+	const labelContent = getLabelContent( showError, errorMessage, fieldLabel );
+	const className = clsx(
+		'dataforms-layouts-panel__field-trigger',
+		`dataforms-layouts-panel__field-trigger--label-${ labelPosition }`,
+		{
+			'is-disabled': disabled,
+			'dataforms-layouts-panel__field-trigger--edit-always':
+				editVisibility === 'always',
+		}
+	);
+
+	const controlId = useInstanceId(
+		SummaryButton,
+		'dataforms-layouts-panel__field-control'
+	);
+
+	const ariaLabel = showError
+		? sprintf(
+				// translators: %s: Field name.
+				_x( 'Edit %s (has errors)', 'field' ),
+				fieldLabel || ''
+		  )
+		: sprintf(
 				// translators: %s: Field name.
 				_x( 'Edit %s', 'field' ),
 				fieldLabel || ''
+		  );
+
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	const handleRowClick = () => {
+		const selection =
+			rowRef.current?.ownerDocument.defaultView?.getSelection();
+		if ( selection && selection.toString().length > 0 ) {
+			return;
+		}
+		onClick();
+	};
+
+	const handleKeyDown = ( event: React.KeyboardEvent ) => {
+		if (
+			event.target === event.currentTarget &&
+			( event.key === 'Enter' || event.key === ' ' )
+		) {
+			event.preventDefault();
+			onClick();
+		}
+	};
+
+	return (
+		<div
+			ref={ rowRef }
+			className={ className }
+			onClick={ ! disabled ? handleRowClick : undefined }
+			onKeyDown={ ! disabled ? handleKeyDown : undefined }
+		>
+			{ labelPosition !== 'none' && (
+				<span className={ labelClassName }>{ labelContent }</span>
+			) }
+			{ labelPosition === 'none' && showError && (
+				<Tooltip text={ errorMessage } placement="top">
+					<span className="dataforms-layouts-panel__field-label-error-content">
+						<Icon icon={ errorIcon } size={ 16 } />
+					</span>
+				</Tooltip>
 			) }
-			onClick={ onClick }
-			disabled={ disabled }
-			accessibleWhenDisabled
-			style={
-				summaryFields.length > 1
-					? {
-							minHeight: 'auto',
-							height: 'auto',
+			<span
+				id={ `${ controlId }` }
+				className="dataforms-layouts-panel__field-control"
+			>
+				{ summaryFields.length > 1 ? (
+					<span
+						style={ {
+							display: 'flex',
+							flexDirection: 'column',
 							alignItems: 'flex-start',
-					  }
-					: undefined
-			}
-		>
-			{ summaryFields.length > 1 ? (
-				<div
-					style={ {
-						display: 'flex',
-						flexDirection: 'column',
-						alignItems: 'flex-start',
-						width: '100%',
-						gap: '2px',
-					} }
-				>
-					{ summaryFields.map( ( summaryField ) => (
-						<div
+							width: '100%',
+							gap: '2px',
+						} }
+					>
+						{ summaryFields.map( ( summaryField ) => (
+							<span
+								key={ summaryField.id }
+								style={ { width: '100%' } }
+							>
+								<summaryField.render
+									item={ data }
+									field={ summaryField }
+								/>
+							</span>
+						) ) }
+					</span>
+				) : (
+					summaryFields.map( ( summaryField ) => (
+						<summaryField.render
 							key={ summaryField.id }
-							style={ { width: '100%' } }
-						>
-							<summaryField.render
-								item={ data }
-								field={ summaryField }
-							/>
-						</div>
-					) ) }
-				</div>
-			) : (
-				summaryFields.map( ( summaryField ) => (
-					<summaryField.render
-						key={ summaryField.id }
-						item={ data }
-						field={ summaryField }
-					/>
-				) )
+							item={ data }
+							field={ summaryField }
+						/>
+					) )
+				) }
+			</span>
+			{ ! disabled && (
+				<Button
+					className="dataforms-layouts-panel__field-trigger-icon"
+					label={ ariaLabel }
+					showTooltip={ false }
+					icon={ pencil }
+					size="small"
+					aria-expanded={ ariaExpanded }
+					aria-haspopup="dialog"
+					aria-describedby={ `${ controlId }` }
+				/>
 			) }
-		</Button>
+		</div>
 	);
 }
-
-export default SummaryButton;

package/src/components/dataform-layouts/panel/utils/get-first-validation-error.ts

@@ -0,0 +1,47 @@
+import type { FieldValidity } from '../../../../types';
+
+function getFirstValidationError(
+	validity: FieldValidity | undefined
+): string | undefined {
+	if ( ! validity ) {
+		return undefined;
+	}
+
+	const validityRules = Object.keys( validity ).filter(
+		( key ) => key !== 'children'
+	);
+
+	for ( const key of validityRules ) {
+		const rule = validity[ key as keyof Omit< FieldValidity, 'children' > ];
+		if ( rule === undefined ) {
+			continue;
+		}
+
+		if ( rule.type === 'invalid' ) {
+			if ( rule.message ) {
+				return rule.message;
+			}
+
+			// Provide default message for required validation (message is optional)
+			if ( key === 'required' ) {
+				return 'A required field is empty';
+			}
+
+			return 'Unidentified validation error';
+		}
+	}
+
+	// Check children recursively
+	if ( validity.children ) {
+		for ( const childValidity of Object.values( validity.children ) ) {
+			const childError = getFirstValidationError( childValidity );
+			if ( childError ) {
+				return childError;
+			}
+		}
+	}
+
+	return undefined;
+}
+
+export default getFirstValidationError;

package/src/components/dataform-layouts/panel/utils/get-label-classname.ts

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { LabelPosition } from '../../../../types';
+
+function getLabelClassName(
+	labelPosition: LabelPosition,
+	showError?: boolean
+) {
+	return clsx(
+		'dataforms-layouts-panel__field-label',
+		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`,
+		{ 'has-error': showError }
+	);
+}
+
+export default getLabelClassName;

package/src/components/dataform-layouts/panel/utils/get-label-content.tsx

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Icon, Tooltip } from '@wordpress/components';
+import { error as errorIcon } from '@wordpress/icons';
+
+function getLabelContent(
+	showError?: boolean,
+	errorMessage?: string,
+	fieldLabel?: string
+) {
+	return showError ? (
+		<Tooltip text={ errorMessage } placement="top">
+			<span className="dataforms-layouts-panel__field-label-error-content">
+				<Icon icon={ errorIcon } size={ 16 } />
+				<BaseControl.VisualLabel>
+					{ fieldLabel }
+				</BaseControl.VisualLabel>
+			</span>
+		</Tooltip>
+	) : (
+		<BaseControl.VisualLabel>{ fieldLabel }</BaseControl.VisualLabel>
+	);
+}
+
+export default getLabelContent;

package/src/components/dataform-layouts/panel/utils/use-field-from-form-field.ts

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	NormalizedFormField,
+	NormalizedField,
+	NormalizedPanelLayout,
+} from '../../../../types';
+import { getSummaryFields } from '../../get-summary-fields';
+import DataFormContext from '../../../dataform-context';
+
+const getFieldDefinition = < Item >(
+	field: NormalizedFormField,
+	fields: NormalizedField< Item >[]
+) => {
+	const fieldDefinition = fields.find( ( _field ) => _field.id === field.id );
+
+	if ( ! fieldDefinition ) {
+		return fields.find( ( _field ) => {
+			if ( !! field.children ) {
+				const simpleChildren = field.children.filter(
+					( child ) => ! child.children
+				);
+
+				if ( simpleChildren.length === 0 ) {
+					return false;
+				}
+
+				return _field.id === simpleChildren[ 0 ].id;
+			}
+
+			return _field.id === field.id;
+		} );
+	}
+
+	return fieldDefinition;
+};
+
+/**
+ * Determines the field definition and summary fields for a panel layout.
+ *
+ * Summary fields are determined with the following priority:
+ * 1. Use layout.summary fields if they exist
+ * 2. Fall back to the field definition that matches the form field's id
+ * 3. If the form field id doesn't exist, pick the first child field
+ * 4. If no field definition is found, return empty summary fields
+ *
+ * @param field The form field to get definition for
+ * @return Object containing fieldDefinition, fieldLabel, and summaryFields
+ */
+function useFieldFromFormField( field: NormalizedFormField ) {
+	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedPanelLayout;
+	const summaryFields = getSummaryFields( layout.summary, fields );
+	const fieldDefinition = getFieldDefinition( field, fields );
+	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
+
+	if ( summaryFields.length === 0 ) {
+		return {
+			summaryFields: fieldDefinition ? [ fieldDefinition ] : [],
+			fieldDefinition,
+			fieldLabel,
+		};
+	}
+
+	return {
+		summaryFields,
+		fieldDefinition,
+		fieldLabel,
+	};
+}
+
+export default useFieldFromFormField;