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

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;

package/src/components/dataform-layouts/regular/index.tsx

@@ -30,7 +30,7 @@ function Header( { title }: { title: string } ) {
 		<Stack
 			direction="column"
 			className="dataforms-layouts-regular__header"
-			gap="md"
+			gap="lg"
 		>
 			<Stack direction="row" align="center">
 				<Heading level={ 2 } size={ 13 }>
@@ -46,6 +46,7 @@ export default function FormRegularField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
@@ -89,7 +90,7 @@ export default function FormRegularField< Item >( {
 			<Stack
 				direction="row"
 				className="dataforms-layouts-regular__field"
-				gap="xs"
+				gap="sm"
 			>
 				<div
 					className={ clsx(
@@ -97,7 +98,9 @@ export default function FormRegularField< Item >( {
 						`dataforms-layouts-regular__field-label--label-position-${ labelPosition }`
 					) }
 				>
-					{ fieldDefinition.label }
+					<BaseControl.VisualLabel>
+						{ fieldDefinition.label }
+					</BaseControl.VisualLabel>
 				</div>
 				<div className="dataforms-layouts-regular__field-control">
 					{ fieldDefinition.readOnly === true ? (
@@ -112,6 +115,7 @@ export default function FormRegularField< Item >( {
 							field={ fieldDefinition }
 							onChange={ onChange }
 							hideLabelFromVision
+							markWhenOptional={ markWhenOptional }
 							validity={ validity }
 						/>
 					) }
@@ -144,6 +148,7 @@ export default function FormRegularField< Item >( {
 					hideLabelFromVision={
 						labelPosition === 'none' ? true : hideLabelFromVision
 					}
+					markWhenOptional={ markWhenOptional }
 					validity={ validity }
 				/>
 			) }

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

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .dataforms-layouts-regular__field {
@@ -5,6 +6,11 @@
 	min-height: $grid-unit-40;
 	justify-content: flex-start !important;
 	align-items: flex-start !important;
+
+	.components-base-control__label,
+	.components-input-control__label {
+		color: $gray-700;
+	}
 }
 
 .dataforms-layouts-regular__field-label {
@@ -19,6 +25,10 @@
 	&--label-position-side {
 		align-self: center;
 	}
+
+	.components-base-control__label {
+		margin-bottom: 0;
+	}
 }
 
 .dataforms-layouts-regular__field-control {