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

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

@@ -0,0 +1,165 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * 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 ModalContent< Item >( {
+	data,
+	form,
+	fieldLabel,
+	onChange,
+	onClose,
+}: {
+	data: Item;
+	form: Form;
+	fieldLabel: string;
+	onChange: ( data: Partial< Item > ) => void;
+	onClose: () => void;
+} ) {
+	const [ changes, setChanges ] = useState< Partial< Item > >( {} );
+
+	const onApply = () => {
+		onChange( changes );
+		onClose();
+	};
+
+	const handleOnChange = ( value: Partial< Item > ) => {
+		setChanges( ( prev ) => ( { ...prev, ...value } ) );
+	};
+
+	// Merge original data with local changes for display
+	const displayData = { ...data, ...changes };
+
+	return (
+		<Modal
+			className="dataforms-layouts-panel__modal"
+			onRequestClose={ onClose }
+			isFullScreen={ false }
+			title={ fieldLabel }
+			size="medium"
+		>
+			<DataFormLayout
+				data={ displayData }
+				form={ form }
+				onChange={ handleOnChange }
+			>
+				{ ( FieldLayout, nestedField ) => (
+					<FieldLayout
+						key={ nestedField.id }
+						data={ displayData }
+						field={ nestedField }
+						onChange={ handleOnChange }
+						hideLabelFromVision={
+							( form?.fields ?? [] ).length < 2
+						}
+					/>
+				) }
+			</DataFormLayout>
+			<HStack
+				className="dataforms-layouts-panel__modal-footer"
+				spacing={ 3 }
+			>
+				<Spacer />
+				<Button
+					variant="tertiary"
+					onClick={ onClose }
+					__next40pxDefaultSize
+				>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					variant="primary"
+					onClick={ onApply }
+					__next40pxDefaultSize
+				>
+					{ __( 'Apply' ) }
+				</Button>
+			</HStack>
+		</Modal>
+	);
+}
+
+function PanelModal< Item >( {
+	fieldDefinition,
+	labelPosition,
+	data,
+	onChange,
+	field,
+}: {
+	fieldDefinition: NormalizedField< Item >;
+	labelPosition: 'side' | 'top' | 'none';
+	data: Item;
+	onChange: ( value: any ) => void;
+	field: FormField;
+} ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	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 ]
+	);
+
+	return (
+		<>
+			<Button
+				className="dataforms-layouts-modal__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={ () => setIsOpen( true ) }
+				disabled={ fieldDefinition.readOnly === true }
+				accessibleWhenDisabled
+			>
+				<fieldDefinition.render
+					item={ data }
+					field={ fieldDefinition }
+				/>
+			</Button>
+			{ isOpen && (
+				<ModalContent
+					data={ data }
+					form={ form as Form }
+					fieldLabel={ fieldLabel ?? '' }
+					onChange={ onChange }
+					onClose={ () => setIsOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}
+
+export default PanelModal;

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

@@ -52,6 +52,10 @@
 	margin-bottom: $grid-unit-20;
 }
 
+.dataforms-layouts-panel__modal-footer {
+	margin-top: $grid-unit-20;
+}
+
 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
 	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
 }

package/src/normalize-form-fields.ts

@@ -38,6 +38,7 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 		normalizedLayout = {
 			type: 'panel',
 			labelPosition: layout?.labelPosition ?? 'side',
+			openAs: layout?.openAs ?? 'dropdown',
 		} satisfies NormalizedPanelLayout;
 	} else if ( layout?.type === 'card' ) {
 		if ( layout.withHeader === false ) {

package/src/test/dataform.tsx

@@ -218,6 +218,175 @@ describe( 'DataForm component', () => {
 			}
 		} );
 
+		it( 'should use dropdown panel type by default', async () => {
+			render(
+				<Dataform
+					onChange={ noop }
+					fields={ fields }
+					form={ formPanelMode }
+					data={ data }
+				/>
+			);
+
+			const user = await userEvent.setup();
+			const titleButton = fieldsSelector.title.view();
+			await user.click( titleButton );
+
+			// Should show dropdown content (not modal)
+			expect(
+				screen.getByRole( 'textbox', { name: /title/i } )
+			).toBeInTheDocument();
+			// Should not have modal dialog
+			expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+			// Should not have modal buttons (Cancel/Apply)
+			expect(
+				screen.queryByRole( 'button', { name: /cancel/i } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: /apply/i } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should use dropdown panel type when explicitly set', async () => {
+			const formWithDropdownPanel = {
+				...form,
+				layout: {
+					type: 'panel',
+					labelPosition: 'side',
+					openAs: 'dropdown',
+				} as const,
+			};
+
+			render(
+				<Dataform
+					onChange={ noop }
+					fields={ fields }
+					form={ formWithDropdownPanel }
+					data={ data }
+				/>
+			);
+
+			const user = await userEvent.setup();
+			const titleButton = fieldsSelector.title.view();
+			await user.click( titleButton );
+
+			// Should show dropdown content
+			expect(
+				screen.getByRole( 'textbox', { name: /title/i } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should use modal panel type when set', async () => {
+			const formWithModalPanel = {
+				...form,
+				layout: {
+					type: 'panel',
+					labelPosition: 'side',
+					openAs: 'modal',
+				} as const,
+			};
+
+			render(
+				<Dataform
+					onChange={ noop }
+					fields={ fields }
+					form={ formWithModalPanel }
+					data={ data }
+				/>
+			);
+
+			const user = await userEvent.setup();
+			const titleButton = fieldsSelector.title.view();
+			await user.click( titleButton );
+
+			// Should show modal content
+			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'textbox', { name: /title/i } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should close modal when cancel button is clicked', async () => {
+			const formWithModalPanel = {
+				...form,
+				layout: {
+					type: 'panel',
+					labelPosition: 'side',
+					openAs: 'modal',
+				} as const,
+			};
+
+			render(
+				<Dataform
+					onChange={ noop }
+					fields={ fields }
+					form={ formWithModalPanel }
+					data={ data }
+				/>
+			);
+
+			const user = await userEvent.setup();
+			const titleButton = fieldsSelector.title.view();
+			await user.click( titleButton );
+
+			// Modal should be open
+			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+
+			// Click cancel button
+			const cancelButton = screen.getByRole( 'button', {
+				name: /cancel/i,
+			} );
+			await user.click( cancelButton );
+
+			// Modal should be closed
+			expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should apply changes and close modal when apply button is clicked', async () => {
+			const onChange = jest.fn();
+			const formWithModalPanel = {
+				...form,
+				layout: {
+					type: 'panel',
+					labelPosition: 'side',
+					openAs: 'modal',
+				} as const,
+			};
+
+			render(
+				<Dataform
+					onChange={ onChange }
+					fields={ fields }
+					form={ formWithModalPanel }
+					data={ data }
+				/>
+			);
+
+			const user = await userEvent.setup();
+			const titleButton = fieldsSelector.title.view();
+			await user.click( titleButton );
+
+			// Modal should be open
+			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+
+			// Type in the input
+			const titleInput = screen.getByRole( 'textbox', {
+				name: /title/i,
+			} );
+			await user.clear( titleInput );
+			await user.type( titleInput, 'New Title' );
+
+			// Click apply button
+			const applyButton = screen.getByRole( 'button', {
+				name: /apply/i,
+			} );
+			await user.click( applyButton );
+
+			// Modal should be closed and onChange should be called
+			expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+			expect( onChange ).toHaveBeenCalledWith( { title: 'New Title' } );
+		} );
+
 		it( 'should call onChange with the correct value for each typed character', async () => {
 			const onChange = jest.fn();
 			render(

package/src/test/normalize-form-fields.ts

@@ -100,7 +100,11 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'panel', labelPosition: 'side' },
+					layout: {
+						type: 'panel',
+						labelPosition: 'side',
+						openAs: 'dropdown',
+					},
 				},
 			] );
 		} );
@@ -114,7 +118,11 @@ describe( 'normalizeFormFields', () => {
 			expect( result ).toEqual( [
 				{
 					id: 'field1',
-					layout: { type: 'panel', labelPosition: 'top' },
+					layout: {
+						type: 'panel',
+						labelPosition: 'top',
+						openAs: 'dropdown',
+					},
 				},
 			] );
 		} );
@@ -195,7 +203,11 @@ describe( 'normalizeFormFields', () => {
 				},
 				{
 					id: 'field2',
-					layout: { type: 'panel', labelPosition: 'side' },
+					layout: {
+						type: 'panel',
+						labelPosition: 'side',
+						openAs: 'dropdown',
+					},
 				},
 			] );
 		} );

package/src/types.ts

@@ -689,10 +689,12 @@ export type NormalizedRegularLayout = {
 export type PanelLayout = {
 	type: 'panel';
 	labelPosition?: LabelPosition;
+	openAs?: 'dropdown' | 'modal';
 };
 export type NormalizedPanelLayout = {
 	type: 'panel';
 	labelPosition: LabelPosition;
+	openAs: 'dropdown' | 'modal';
 };
 
 export type CardLayout =