@wordpress/dataviews 6.0.0 → 7.0.0

package/src/dataviews-layouts/grid/style.scss

@@ -58,7 +58,6 @@
 
 	.dataviews-view-grid__media {
 		width: 100%;
-		min-height: 200px;
 		aspect-ratio: 1/1;
 		background-color: $white;
 		border-radius: $radius-medium;
@@ -105,6 +104,9 @@
 			.dataviews-view-grid__field-name {
 				width: 35%;
 				color: $gray-700;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
 			.dataviews-view-grid__field-value {

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

@@ -22,6 +22,7 @@ import {
 	useMemo,
 	useRef,
 	useState,
+	useContext,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
@@ -35,6 +36,7 @@ import {
 	ActionsMenuGroup,
 	ActionModal,
 } from '../../components/dataviews-item-actions';
+import DataViewsContext from '../../components/dataviews-context';
 import type {
 	Action,
 	NormalizedField,
@@ -55,6 +57,7 @@ interface ListViewItemProps< Item > {
 	onSelect: ( item: Item ) => void;
 	otherFields: NormalizedField< Item >[];
 	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
+	posinset?: number;
 }
 
 const { Menu } = unlock( componentsPrivateApis );
@@ -153,8 +156,14 @@ function ListItem< Item >( {
 	onSelect,
 	otherFields,
 	onDropdownTriggerKeyDown,
+	posinset,
 }: ListViewItemProps< Item > ) {
-	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const {
+		showTitle = true,
+		showMedia = true,
+		showDescription = true,
+		infiniteScrollEnabled,
+	} = view;
 	const itemRef = useRef< HTMLDivElement >( null );
 	const labelId = `${ idPrefix }-label`;
 	const descriptionId = `${ idPrefix }-description`;
@@ -169,6 +178,7 @@ function ListItem< Item >( {
 		setIsHovered( isHover );
 	};
 
+	const { paginationInfo } = useContext( DataViewsContext );
 	useEffect( () => {
 		if ( isSelected ) {
 			itemRef.current?.scrollIntoView( {
@@ -269,8 +279,18 @@ function ListItem< Item >( {
 	return (
 		<Composite.Row
 			ref={ itemRef }
-			render={ <div /> }
-			role="row"
+			render={
+				/* aria-posinset breaks Composite.Row if passed to it directly. */
+				<div
+					aria-posinset={ posinset }
+					aria-setsize={
+						infiniteScrollEnabled
+							? paginationInfo.totalItems
+							: undefined
+					}
+				/>
+			}
+			role={ infiniteScrollEnabled ? 'article' : 'row' }
 			className={ clsx( {
 				'is-selected': isSelected,
 				'is-hovered': isHovered,
@@ -498,33 +518,47 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	}
 
 	return (
-		<Composite
-			id={ baseId }
-			render={ <div /> }
-			className={ clsx( 'dataviews-view-list', className ) }
-			role="grid"
-			activeId={ activeCompositeId }
-			setActiveId={ setActiveCompositeId }
-		>
-			{ data.map( ( item ) => {
-				const id = generateCompositeItemIdPrefix( item );
-				return (
-					<ListItem
-						key={ id }
-						view={ view }
-						idPrefix={ id }
-						actions={ actions }
-						item={ item }
-						isSelected={ item === selectedItem }
-						onSelect={ onSelect }
-						mediaField={ mediaField }
-						titleField={ titleField }
-						descriptionField={ descriptionField }
-						otherFields={ otherFields }
-						onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
-					/>
-				);
-			} ) }
-		</Composite>
+		<>
+			<Composite
+				id={ baseId }
+				render={ <div /> }
+				className={ clsx( 'dataviews-view-list', className ) }
+				role={ view.infiniteScrollEnabled ? 'feed' : 'grid' }
+				activeId={ activeCompositeId }
+				setActiveId={ setActiveCompositeId }
+			>
+				{ data.map( ( item, index ) => {
+					const id = generateCompositeItemIdPrefix( item );
+					return (
+						<ListItem
+							key={ id }
+							view={ view }
+							idPrefix={ id }
+							actions={ actions }
+							item={ item }
+							isSelected={ item === selectedItem }
+							onSelect={ onSelect }
+							mediaField={ mediaField }
+							titleField={ titleField }
+							descriptionField={ descriptionField }
+							otherFields={ otherFields }
+							onDropdownTriggerKeyDown={
+								onDropdownTriggerKeyDown
+							}
+							posinset={
+								view.infiniteScrollEnabled
+									? index + 1
+									: undefined
+							}
+						/>
+					);
+				} ) }
+			</Composite>
+			{ hasData && isLoading && (
+				<p className="dataviews-loading-more">
+					<Spinner />
+				</p>
+			) }
+		</>
 	);
 }

package/src/dataviews-layouts/list/style.scss

@@ -5,7 +5,8 @@ div.dataviews-view-list {
 .dataviews-view-list {
 	margin: 0 0 auto;
 
-	div[role="row"] {
+	div[role="row"],
+	div[role="article"] {
 		margin: 0;
 		border-top: 1px solid $gray-100;
 
@@ -57,7 +58,8 @@ div.dataviews-view-list {
 		&.is-selected.is-selected {
 			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 
-			& + div[role="row"] {
+			& + div[role="row"],
+			& + div[role="article"] {
 				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 			}
 		}
@@ -82,7 +84,9 @@ div.dataviews-view-list {
 	}
 
 	div[role="row"].is-selected,
-	div[role="row"].is-selected:focus-within {
+	div[role="row"].is-selected:focus-within,
+	div[role="article"].is-selected,
+	div[role="article"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-900;

package/src/dataviews-layouts/table/column-header-menu.tsx

@@ -94,6 +94,10 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		field.filterBy !== false &&
 		! field.filterBy?.isPrimary;
 
+	if ( ! isSortable && ! canMove && ! isHidable && ! canAddFilter ) {
+		return header;
+	}
+
 	return (
 		<Menu>
 			<Menu.TriggerButton

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

@@ -70,6 +70,7 @@ interface TableRowProps< Item > {
 		} & ComponentProps< 'a' >
 	) => ReactElement;
 	isActionsColumnSticky?: boolean;
+	posinset?: number;
 }
 
 function TableColumnField< Item >( {
@@ -114,11 +115,18 @@ function TableRow< Item >( {
 	renderItemLink,
 	onChangeSelection,
 	isActionsColumnSticky,
+	posinset,
 }: TableRowProps< Item > ) {
+	const { paginationInfo } = useContext( DataViewsContext );
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
 	const isSelected = hasPossibleBulkAction && selection.includes( id );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const {
+		showTitle = true,
+		showMedia = true,
+		showDescription = true,
+		infiniteScrollEnabled,
+	} = view;
 	const handleMouseEnter = () => {
 		setIsHovered( true );
 	};
@@ -148,6 +156,11 @@ function TableRow< Item >( {
 			onTouchStart={ () => {
 				isTouchDeviceRef.current = true;
 			} }
+			aria-setsize={
+				infiniteScrollEnabled ? paginationInfo.totalItems : undefined
+			}
+			aria-posinset={ posinset }
+			role={ infiniteScrollEnabled ? 'article' : undefined }
 			onClick={ ( event ) => {
 				if ( ! hasPossibleBulkAction ) {
 					return;
@@ -356,6 +369,7 @@ function ViewTable< Item >( {
 				headerMenuRefs.current.delete( column );
 			}
 		};
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 
 	return (
 		<>
@@ -369,6 +383,7 @@ function ViewTable< Item >( {
 				} ) }
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
+				role={ isInfiniteScroll ? 'feed' : undefined }
 			>
 				<thead>
 					<tr className="dataviews-view-table__row">
@@ -434,6 +449,9 @@ function ViewTable< Item >( {
 										onChangeView={ onChangeView }
 										onHide={ onHide }
 										setOpenedFilter={ setOpenedFilter }
+										canMove={
+											view.layout?.enableMoving ?? true
+										}
 									/>
 								</th>
 							);
@@ -545,6 +563,9 @@ function ViewTable< Item >( {
 									isActionsColumnSticky={
 										! isHorizontalScrollEnd
 									}
+									posinset={
+										isInfiniteScroll ? index + 1 : undefined
+									}
 								/>
 							) ) }
 					</tbody>
@@ -558,6 +579,11 @@ function ViewTable< Item >( {
 				id={ tableNoticeId }
 			>
 				{ ! hasData && <p>{ isLoading ? <Spinner /> : empty }</p> }
+				{ hasData && isLoading && (
+					<p className="dataviews-loading-more">
+						<Spinner />
+					</p>
+				) }
 			</div>
 		</>
 	);

package/src/field-types/array.tsx

@@ -70,7 +70,7 @@ const arrayFieldType: FieldTypeDefinition< any > = {
 			return null;
 		},
 	},
-	Edit: null, // Not implemented yet
+	Edit: 'array', // Use array control
 	render,
 	enableSorting: true,
 	filterBy: {

package/src/normalize-form-fields.ts

@@ -1,42 +1,88 @@
 /**
  * Internal dependencies
  */
-import type { Form } from './types';
+import type {
+	Form,
+	Layout,
+	NormalizedLayout,
+	NormalizedRegularLayout,
+	NormalizedPanelLayout,
+	NormalizedCardLayout,
+} from './types';
 
 interface NormalizedFormField {
 	id: string;
-	layout: 'regular' | 'panel';
-	labelPosition: 'side' | 'top' | 'none';
+	layout: Layout;
+}
+
+export const DEFAULT_LAYOUT: NormalizedLayout = {
+	type: 'regular',
+	labelPosition: 'top',
+};
+
+/**
+ * Normalizes a layout configuration based on its type.
+ *
+ * @param layout The layout object to normalize.
+ * @return The normalized layout object.
+ */
+export function normalizeLayout( layout?: Layout ): NormalizedLayout {
+	let normalizedLayout = DEFAULT_LAYOUT;
+
+	if ( layout?.type === 'regular' ) {
+		normalizedLayout = {
+			type: 'regular',
+			labelPosition: layout?.labelPosition ?? 'top',
+		} satisfies NormalizedRegularLayout;
+	} else if ( layout?.type === 'panel' ) {
+		normalizedLayout = {
+			type: 'panel',
+			labelPosition: layout?.labelPosition ?? 'side',
+			openAs: layout?.openAs ?? 'dropdown',
+		} satisfies NormalizedPanelLayout;
+	} else if ( layout?.type === 'card' ) {
+		if ( layout.withHeader === false ) {
+			// Don't let isOpened be false if withHeader is false.
+			// Otherwise, the card will not be visible.
+			normalizedLayout = {
+				type: 'card',
+				withHeader: false,
+				isOpened: true,
+			} satisfies NormalizedCardLayout;
+		} else {
+			normalizedLayout = {
+				type: 'card',
+				withHeader: true,
+				isOpened:
+					typeof layout.isOpened === 'boolean'
+						? layout.isOpened
+						: true,
+			} satisfies NormalizedCardLayout;
+		}
+	}
+
+	return normalizedLayout;
 }
 
 export default function normalizeFormFields(
 	form: Form
 ): NormalizedFormField[] {
-	let layout: 'regular' | 'panel' = 'regular';
-	if ( [ 'regular', 'panel' ].includes( form.type ?? '' ) ) {
-		layout = form.type as 'regular' | 'panel';
-	}
-
-	const labelPosition =
-		form.labelPosition ?? ( layout === 'regular' ? 'top' : 'side' );
+	const formLayout = normalizeLayout( form?.layout );
 
 	return ( form.fields ?? [] ).map( ( field ) => {
 		if ( typeof field === 'string' ) {
 			return {
 				id: field,
-				layout,
-				labelPosition,
+				layout: formLayout,
 			};
 		}
 
-		const fieldLayout = field.layout ?? layout;
-		const fieldLabelPosition =
-			field.labelPosition ??
-			( fieldLayout === 'regular' ? 'top' : 'side' );
+		const fieldLayout = field.layout
+			? normalizeLayout( field.layout )
+			: formLayout;
 		return {
 			...field,
 			layout: fieldLayout,
-			labelPosition: fieldLabelPosition,
 		};
 	} );
 }

package/src/test/dataform.tsx

@@ -149,7 +149,10 @@ describe( 'DataForm component', () => {
 				<Dataform
 					onChange={ noop }
 					fields={ fields }
-					form={ { ...form, labelPosition: 'side' } }
+					form={ {
+						...form,
+						layout: { type: 'regular', labelPosition: 'side' },
+					} }
 					data={ data }
 				/>
 			);
@@ -191,7 +194,10 @@ describe( 'DataForm component', () => {
 	describe( 'in panel mode', () => {
 		const formPanelMode = {
 			...form,
-			type: 'panel' as const,
+			layout: {
+				type: 'panel',
+				labelPosition: 'side',
+			} as const,
 		};
 		it( 'should display fields', async () => {
 			render(
@@ -212,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(
@@ -243,7 +418,10 @@ describe( 'DataForm component', () => {
 				<Dataform
 					onChange={ noop }
 					fields={ fields }
-					form={ { ...formPanelMode, labelPosition: 'side' } }
+					form={ {
+						...formPanelMode,
+						layout: { type: 'panel', labelPosition: 'side' },
+					} }
 					data={ data }
 				/>
 			);

package/src/test/dataviews.tsx

@@ -147,6 +147,23 @@ function DataViewWrapper( {
 
 // jest.useFakeTimers();
 
+// Tests run against a DataView which is 500px wide.
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( ( callback ) => {
+			setTimeout( () => {
+				callback( [
+					{
+						borderBoxSize: [ { inlineSize: 500 } ],
+					},
+				] );
+			}, 0 );
+			return () => {};
+		} ),
+	};
+} );
+
 describe( 'DataViews component', () => {
 	it( 'should show "No results" if data is empty', () => {
 		render( <DataViewWrapper data={ [] } /> );
@@ -492,6 +509,27 @@ describe( 'DataViews component', () => {
 
 			await user.keyboard( '{/Control}' );
 		} );
+
+		it( 'accepts an invalid previewSize and the preview size picker falls back to another size', async () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						type: 'grid',
+						mediaField: 'image',
+						layout: { previewSize: 13 },
+					} }
+				/>
+			);
+			const user = userEvent.setup();
+			await user.click(
+				screen.getByRole( 'button', { name: 'View options' } )
+			);
+			const previewSizeSlider = screen.getByRole( 'slider', {
+				name: 'Preview size',
+			} );
+			expect( previewSizeSlider ).toBeInTheDocument();
+			expect( previewSizeSlider ).toHaveValue( '0' ); // Falls back to the smallest size, which is the first one.
+		} );
 	} );
 
 	describe( 'in list view', () => {