@wordpress/dataviews 6.0.0 → 7.0.0

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

@@ -9,173 +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,
-	NormalizedField,
+	NormalizedPanelLayout,
 	SimpleFormField,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
-import { DataFormLayout } from '../data-form-layout';
 import { isCombinedField } from '../is-combined-field';
-
-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 = useMemo( () => {
-		if ( isCombinedField( field ) ) {
-			return {
-				type: 'regular' as const,
-				fields: field.children.map( ( child ) => {
-					if ( typeof child === 'string' ) {
-						return {
-							id: child,
-						};
-					}
-					return child;
-				} ),
-			};
-		}
-		// If not explicit children return the field id itself.
-		return {
-			type: 'regular' as const,
-			fields: [ { 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 as 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,
@@ -183,20 +32,27 @@ export default function FormPanelField< Item >( {
 	onChange,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
-	const fieldDefinition = fields.find( ( fieldDef ) => {
-		// Default to the first child if it is a combined field.
+	const fieldDefinition = fields.find( ( _field ) => {
+		// Default to the first simple child if it is a combined field.
 		if ( isCombinedField( field ) ) {
-			const children = field.children.filter(
+			const simpleChildren = field.children.filter(
 				( child ): child is string | SimpleFormField =>
 					typeof child === 'string' || ! isCombinedField( child )
 			);
+
+			if ( simpleChildren.length === 0 ) {
+				return false;
+			}
+
 			const firstChildFieldId =
-				typeof children[ 0 ] === 'string'
-					? children[ 0 ]
-					: children[ 0 ].id;
-			return fieldDef.id === firstChildFieldId;
+				typeof simpleChildren[ 0 ] === 'string'
+					? simpleChildren[ 0 ]
+					: simpleChildren[ 0 ].id;
+
+			return _field.id === firstChildFieldId;
 		}
-		return fieldDef.id === field.id;
+
+		return _field.id === field.id;
 	} );
 
 	// Use internal state instead of a ref to make sure that the component
@@ -209,7 +65,12 @@ export default function FormPanelField< Item >( {
 		return null;
 	}
 
-	const labelPosition = field.labelPosition ?? 'side';
+	const layout: NormalizedPanelLayout = normalizeLayout( {
+		...field.layout,
+		type: 'panel',
+	} ) as NormalizedPanelLayout;
+
+	const labelPosition = layout.labelPosition;
 	const labelClassName = clsx(
 		'dataforms-layouts-panel__field-label',
 		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`
@@ -218,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 }>
@@ -228,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>
 		);
@@ -244,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>
 		);
 	}
@@ -264,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>
 	);

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

@@ -17,10 +17,15 @@ import {
 /**
  * Internal dependencies
  */
-import type { Form, FieldLayoutProps } from '../../types';
+import type {
+	Form,
+	FieldLayoutProps,
+	NormalizedRegularLayout,
+} 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 Header( { title }: { title: string } ) {
 	return (
@@ -43,26 +48,13 @@ export default function FormRegularField< Item >( {
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 
-	const form = useMemo( () => {
-		if ( isCombinedField( field ) ) {
-			return {
-				fields: field.children.map( ( child ) => {
-					if ( typeof child === 'string' ) {
-						return {
-							id: child,
-						};
-					}
-					return child;
-				} ),
-				type: 'regular' as const,
-			};
-		}
-
-		return {
-			type: 'regular' as const,
-			fields: [],
-		};
-	}, [ field ] );
+	const form: Form = useMemo(
+		(): Form => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: isCombinedField( field ) ? field.children : [],
+		} ),
+		[ field ]
+	);
 
 	if ( isCombinedField( field ) ) {
 		return (
@@ -72,14 +64,19 @@ export default function FormRegularField< Item >( {
 				) }
 				<DataFormLayout
 					data={ data }
-					form={ form as Form }
+					form={ form }
 					onChange={ onChange }
 				/>
 			</>
 		);
 	}
 
-	const labelPosition = field.labelPosition ?? 'top';
+	const layout: NormalizedRegularLayout = normalizeLayout( {
+		...field.layout,
+		type: 'regular',
+	} ) as NormalizedRegularLayout;
+
+	const labelPosition = layout.labelPosition;
 	const fieldDefinition = fields.find(
 		( fieldDef ) => fieldDef.id === field.id
 	);

package/src/dataviews-layouts/grid/index.tsx

@@ -13,6 +13,7 @@ import {
 	Spinner,
 	Flex,
 	FlexItem,
+	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -64,6 +65,7 @@ interface GridItemProps< Item > {
 	config: {
 		sizes: string;
 	};
+	posinset?: number;
 }
 
 function GridItem< Item >( {
@@ -83,8 +85,14 @@ function GridItem< Item >( {
 	badgeFields,
 	hasBulkActions,
 	config,
+	posinset,
 }: GridItemProps< Item > ) {
-	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const {
+		showTitle = true,
+		showMedia = true,
+		showDescription = true,
+		infiniteScrollEnabled,
+	} = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const instanceId = useInstanceId( GridItem );
@@ -117,6 +125,7 @@ function GridItem< Item >( {
 			};
 		}
 	}
+	const { paginationInfo } = useContext( DataViewsContext );
 
 	return (
 		<VStack
@@ -139,6 +148,11 @@ function GridItem< Item >( {
 					);
 				}
 			} }
+			role={ infiniteScrollEnabled ? 'article' : undefined }
+			aria-setsize={
+				infiniteScrollEnabled ? paginationInfo.totalItems : undefined
+			}
+			aria-posinset={ posinset }
 		>
 			{ showMedia && renderedMediaField && (
 				<ItemClickWrapper
@@ -227,9 +241,11 @@ function GridItem< Item >( {
 									direction="row"
 								>
 									<>
-										<FlexItem className="dataviews-view-grid__field-name">
-											{ field.header }
-										</FlexItem>
+										<Tooltip text={ field.label }>
+											<FlexItem className="dataviews-view-grid__field-name">
+												{ field.header }
+											</FlexItem>
+										</Tooltip>
 										<FlexItem
 											className="dataviews-view-grid__field-value"
 											style={ { maxHeight: 'none' } }
@@ -322,6 +338,8 @@ function ViewGrid< Item >( {
 		  }, new Map< string, typeof data >() )
 		: null;
 
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+
 	return (
 		<>
 			{
@@ -409,8 +427,9 @@ function ViewGrid< Item >( {
 						} }
 						aria-busy={ isLoading }
 						ref={ resizeObserverRef }
+						role={ isInfiniteScroll ? 'feed' : undefined }
 					>
-						{ data.map( ( item ) => {
+						{ data.map( ( item, index ) => {
 							return (
 								<GridItem
 									key={ getItemId( item ) }
@@ -432,6 +451,9 @@ function ViewGrid< Item >( {
 									config={ {
 										sizes: size,
 									} }
+									posinset={
+										isInfiniteScroll ? index + 1 : undefined
+									}
 								/>
 							);
 						} ) }
@@ -451,6 +473,11 @@ function ViewGrid< Item >( {
 					</div>
 				)
 			}
+			{ hasData && isLoading && (
+				<p className="dataviews-loading-more">
+					<Spinner />
+				</p>
+			) }
 		</>
 	);
 }

package/src/dataviews-layouts/grid/preview-size-picker.tsx

@@ -12,6 +12,14 @@ import DataViewsContext from '../../components/dataviews-context';
 import type { ViewGrid } from '../../types';
 
 const imageSizes = [
+	{
+		value: 120,
+		breakpoint: 1,
+	},
+	{
+		value: 170,
+		breakpoint: 1,
+	},
 	{
 		value: 230,
 		breakpoint: 1,
@@ -34,24 +42,18 @@ export default function PreviewSizePicker() {
 	const context = useContext( DataViewsContext );
 	const view = context.view as ViewGrid;
 
-	if ( context.containerWidth < 588 ) {
-		return null;
-	}
-
 	const breakValues = imageSizes.filter( ( size ) => {
 		return context.containerWidth >= size.breakpoint;
 	} );
 
+	const layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.
 	// If the container has resized and the set preview size is no longer available,
-	// we reset it to the next smallest size.
-	const previewSizeToUse = view.layout?.previewSize
-		? breakValues
-				.map( ( size, index ) => ( { ...size, index } ) )
-				.filter(
-					( size ) => size.value <= ( view.layout?.previewSize ?? 0 ) // We know the view.layout?.previewSize exists at this point but the linter doesn't seem to.
-				)
-				.sort( ( a, b ) => b.value - a.value )[ 0 ].index
-		: 0;
+	// we reset it to the next smallest size, or the smallest available size.
+	const previewSizeToUse =
+		breakValues
+			.map( ( size, index ) => ( { ...size, index } ) )
+			.filter( ( size ) => size.value <= layoutPreviewSize )
+			.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;
 
 	const marks = breakValues.map( ( size, index ) => {
 		return {