@wordpress/dataviews 11.2.1-next.v.0 → 11.3.0

package/src/dataviews/stories/layout-custom.tsx

@@ -0,0 +1,140 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../index';
+import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
+import type { View } from '../../types';
+import { data, fields } from './fixtures';
+import { LAYOUT_TABLE } from '../../constants';
+
+/**
+ * Poster/hero style layout that displays items as large image cards
+ * with overlaid text content.
+ */
+function PosterGrid( { items }: { items: typeof data } ) {
+	return (
+		<div
+			style={ {
+				display: 'grid',
+				gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+				gap: '16px',
+				padding: '16px 0',
+			} }
+		>
+			{ items.map( ( item ) => (
+				<div
+					key={ item.id }
+					style={ {
+						position: 'relative',
+						aspectRatio: '4 / 3',
+						borderRadius: '8px',
+						overflow: 'hidden',
+						backgroundImage: `url(${ item.image })`,
+						backgroundSize: 'cover',
+						backgroundPosition: 'center',
+					} }
+				>
+					<div
+						style={ {
+							position: 'absolute',
+							bottom: 0,
+							left: 0,
+							right: 0,
+							padding: '48px 16px 16px',
+							background:
+								'linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)',
+							color: 'white',
+						} }
+					>
+						<h3
+							style={ {
+								margin: '0 0 4px',
+								fontSize: '18px',
+								fontWeight: 600,
+								textShadow: '0 1px 2px rgba(0,0,0,0.5)',
+							} }
+						>
+							{ item.name.title }
+						</h3>
+						<p
+							style={ {
+								margin: '0 0 8px',
+								fontSize: '13px',
+								opacity: 0.9,
+								overflow: 'hidden',
+								textOverflow: 'ellipsis',
+								whiteSpace: 'nowrap',
+							} }
+						>
+							{ item.name.description }
+						</p>
+						<div style={ { display: 'flex', gap: '6px' } }>
+							{ item.categories.slice( 0, 2 ).map( ( cat ) => (
+								<span
+									key={ cat }
+									style={ {
+										fontSize: '11px',
+										padding: '2px 8px',
+										borderRadius: '4px',
+										backgroundColor:
+											'rgba(255,255,255,0.2)',
+									} }
+								>
+									{ cat }
+								</span>
+							) ) }
+						</div>
+					</div>
+				</div>
+			) ) }
+		</div>
+	);
+}
+
+/**
+ * Demonstrates a custom poster/hero layout using free composition.
+ *
+ * This story shows how to:
+ * - Use `<DataViews>` as a context provider with custom children
+ * - Render a completely custom layout (poster grid) instead of `<DataViews.Layout />`
+ * - Still leverage DataViews sub-components for search and pagination
+ */
+export const LayoutCustomComponent = () => {
+	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_TABLE,
+		search: '',
+		page: 1,
+		perPage: 6,
+		filters: [],
+		fields: [],
+	} );
+
+	const { data: processedData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ processedData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			defaultLayouts={ { table: {} } }
+		>
+			<div style={ { padding: '2px' } }>
+				<DataViews.Search />
+				<PosterGrid items={ processedData } />
+				<DataViews.Pagination />
+			</div>
+		</DataViews>
+	);
+};
+
+export default LayoutCustomComponent;

package/src/dataviews/test/dataviews.tsx

@@ -13,7 +13,12 @@ import { useMemo, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViews from '../index';
-import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../constants';
+import {
+	LAYOUT_ACTIVITY,
+	LAYOUT_GRID,
+	LAYOUT_LIST,
+	LAYOUT_TABLE,
+} from '../../constants';
 import type { Action, View } from '../../types';
 import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 
@@ -37,6 +42,7 @@ const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {},
 	[ LAYOUT_GRID ]: {},
 	[ LAYOUT_LIST ]: {},
+	[ LAYOUT_ACTIVITY ]: {},
 };
 
 const fields = [
@@ -147,6 +153,10 @@ function DataViewWrapper( {
 // jest.useFakeTimers();
 
 // Tests run against a DataView which is 500px wide.
+const mockUseViewportMatch = jest.fn(
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	( _viewport: string, _operator: string ) => false
+);
 jest.mock( '@wordpress/compose', () => {
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
@@ -160,6 +170,8 @@ jest.mock( '@wordpress/compose', () => {
 			}, 0 );
 			return () => {};
 		} ),
+		useViewportMatch: ( viewport: string, operator: string ): boolean =>
+			mockUseViewportMatch( viewport, operator ),
 	};
 } );
 
@@ -619,4 +631,57 @@ describe( 'DataViews component', () => {
 			).toEqual( 3 );
 		} );
 	} );
+
+	describe( 'actions on mobile viewport', () => {
+		const testActions: Action< Data >[] = [
+			{
+				id: 'edit',
+				label: 'Edit',
+				isPrimary: true,
+				callback: () => {},
+			},
+		];
+
+		beforeEach( () => {
+			// Simulate mobile viewport
+			mockUseViewportMatch.mockImplementation(
+				( viewport: string, operator: string ) =>
+					viewport === 'medium' && operator === '<'
+			);
+		} );
+
+		afterEach( () => {
+			mockUseViewportMatch.mockImplementation( () => false );
+		} );
+
+		it( 'should show actions dropdown on mobile even when there is only one action in table layout', () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						type: LAYOUT_TABLE,
+					} }
+					actions={ testActions }
+				/>
+			);
+			// On mobile, the dropdown should be visible even with only primary actions
+			expect(
+				screen.getAllByRole( 'button', { name: 'Actions' } ).length
+			).toEqual( 3 );
+		} );
+
+		it( 'should show actions dropdown on mobile even when there is only one action in activity layout', () => {
+			render(
+				<DataViewWrapper
+					view={ {
+						type: LAYOUT_ACTIVITY,
+					} }
+					actions={ testActions }
+				/>
+			);
+			// On mobile, the dropdown should be visible even with only primary actions
+			expect(
+				screen.getAllByRole( 'button', { name: 'Actions' } ).length
+			).toEqual( 3 );
+		} );
+	} );
 } );

package/src/dataviews-picker/stories/fixtures.tsx

@@ -326,9 +326,7 @@ export const fields: Field< SpaceObject >[] = [
 			</Stack>
 		),
 		render: ( { item } ) => {
-			return (
-				<img src={ item.image } alt="" style={ { width: '100%' } } />
-			);
+			return <img src={ item.image } alt="" />;
 		},
 	},
 	{

package/src/dataviews-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta } from '@storybook/react-webpack5';
+import type { Meta } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/field-types/index.tsx

@@ -28,6 +28,7 @@ import { default as color } from './color';
 import { default as url } from './url';
 import { default as noType } from './no-type';
 import getIsValid from './utils/get-is-valid';
+import getFilter from './utils/get-filter';
 import getFormat from './utils/get-format';
 
 /**
@@ -111,6 +112,7 @@ export default function normalizeFields< Item >(
 				fieldType.defaultOperators,
 				fieldType.validOperators
 			),
+			filter: getFilter( fieldType ),
 			format: getFormat( field, fieldType ),
 			getValueFormatted:
 				field.getValueFormatted ?? fieldType.getValueFormatted,

package/src/field-types/stories/index.story.tsx

@@ -37,6 +37,7 @@ const meta = {
 				'array',
 				'checkbox',
 				'color',
+				'combobox',
 				'date',
 				'datetime',
 				'email',
@@ -530,6 +531,7 @@ type ControlTypes =
 	| 'array'
 	| 'checkbox'
 	| 'color'
+	| 'combobox'
 	| 'date'
 	| 'datetime'
 	| 'email'

package/src/field-types/utils/get-filter.ts

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { FilterOperatorMap } from '../../types';
+import type { FieldType } from '../../types/private';
+import { getOperatorByName } from '../../utils/operators';
+
+export default function getFilter< Item >(
+	fieldType: FieldType< Item >
+): FilterOperatorMap< Item > {
+	return fieldType.validOperators.reduce( ( accumulator, operator ) => {
+		const operatorObj = getOperatorByName( operator );
+		if ( operatorObj?.filter ) {
+			accumulator[ operator ] = operatorObj.filter;
+		}
+		return accumulator;
+	}, {} as FilterOperatorMap< Item > );
+}

package/src/hooks/use-report-validity.ts

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Triggers `reportValidity()` on all form inputs within a container element.
+ * This fires the browser's `invalid` event on each input, which validated
+ * controls listen to in order to display their error states.
+ *
+ * Used by panel and card layouts to show validation errors
+ * immediately when their content becomes visible after prior interaction.
+ *
+ * @param ref          A ref to the container element.
+ * @param shouldReport Whether to trigger reportValidity. Typically
+ *                     derived from `touched` state and open/visible state.
+ */
+export default function useReportValidity(
+	ref: React.RefObject< HTMLElement | null >,
+	shouldReport: boolean
+) {
+	useEffect( () => {
+		if ( shouldReport && ref.current ) {
+			const inputs = ref.current.querySelectorAll(
+				'input, textarea, select'
+			);
+			inputs.forEach( ( input ) => {
+				( input as HTMLInputElement ).reportValidity();
+			} );
+		}
+	}, [ shouldReport, ref ] );
+}

package/src/types/field-api.ts

@@ -104,6 +104,16 @@ export type CustomValidator< Item > =
 			field: NormalizedField< Item >
 	  ) => Promise< null | string > );
 
+export type FilterOperator< Item > = (
+	item: Item,
+	field: NormalizedField< Item >,
+	filterValue: any
+) => boolean;
+
+export type FilterOperatorMap< Item > = Partial<
+	Record< Operator, FilterOperator< Item > >
+>;
+
 type NormalizedRule< Item, ConstraintType > = {
 	constraint: ConstraintType;
 	validate: Validator< Item >;
@@ -356,6 +366,7 @@ export type NormalizedField< Item > = Omit<
 	enableHiding: boolean;
 	enableSorting: boolean;
 	filterBy: Required< FilterByConfig > | false;
+	filter: FilterOperatorMap< Item >;
 	readOnly: boolean;
 	format:
 		| {}