@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/src/field-types/telephone.tsx

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	NormalizedField,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+} from '../constants';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+export default {
+	sort,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
+	Edit: 'telephone',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_CONTAINS,
+			OPERATOR_NOT_CONTAINS,
+			OPERATOR_STARTS_WITH,
+			// Multiple selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/url.tsx

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	NormalizedField,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+} from '../constants';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+export default {
+	sort,
+	isValid: {
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+			if ( field?.elements ) {
+				const validValues = field.elements.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return __( 'Value must be one of the elements.' );
+				}
+			}
+
+			return null;
+		},
+	},
+	Edit: 'url',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_CONTAINS,
+			OPERATOR_NOT_CONTAINS,
+			OPERATOR_STARTS_WITH,
+			// Multiple selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/normalize-form-fields.ts

@@ -8,6 +8,7 @@ import type {
 	NormalizedRegularLayout,
 	NormalizedPanelLayout,
 	NormalizedCardLayout,
+	NormalizedRowLayout,
 } from './types';
 
 interface NormalizedFormField {
@@ -59,6 +60,11 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 						: true,
 			} satisfies NormalizedCardLayout;
 		}
+	} else if ( layout?.type === 'row' ) {
+		normalizedLayout = {
+			type: 'row',
+			alignment: layout?.alignment ?? 'center',
+		} satisfies NormalizedRowLayout;
 	}
 
 	return normalizedLayout;

package/src/style.scss

@@ -4,13 +4,17 @@
 @import "./components/dataviews-footer/style.scss";
 @import "./components/dataviews-pagination/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
+@import "./components/dataviews-picker/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 @import "./components/dataviews-view-config/style.scss";
 
 @import "./dataviews-layouts/grid/style.scss";
 @import "./dataviews-layouts/list/style.scss";
 @import "./dataviews-layouts/table/style.scss";
+@import "./dataviews-layouts/picker-grid/style.scss";
 
 @import "./dataform-controls/style.scss";
 @import "./dataforms-layouts/panel/style.scss";
 @import "./dataforms-layouts/regular/style.scss";
+@import "./dataforms-layouts/card/style.scss";
+@import "./dataforms-layouts/row/style.scss";

package/src/test/dataform.tsx

@@ -139,7 +139,7 @@ describe( 'DataForm component', () => {
 			expect( onChange ).toHaveBeenCalledTimes( newValue.length );
 			for ( let i = 0; i < newValue.length; i++ ) {
 				expect( onChange ).toHaveBeenNthCalledWith( i + 1, {
-					title: newValue[ i ],
+					title: newValue.slice( 0, i + 1 ),
 				} );
 			}
 		} );
@@ -408,7 +408,7 @@ describe( 'DataForm component', () => {
 			expect( onChange ).toHaveBeenCalledTimes( newValue.length );
 			for ( let i = 0; i < newValue.length; i++ ) {
 				expect( onChange ).toHaveBeenNthCalledWith( i + 1, {
-					title: newValue[ i ],
+					title: newValue.slice( 0, i + 1 ),
 				} );
 			}
 		} );

package/src/test/dataviews-picker.tsx

@@ -0,0 +1,478 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsPicker from '../components/dataviews-picker';
+import { LAYOUT_PICKER_GRID } from '../constants';
+import type { ActionButton, View, ViewPickerGrid } from '../types';
+import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+
+type Data = {
+	id: number;
+	title: string;
+	author?: number;
+	order?: number;
+};
+
+const onChangeSelection = jest.fn();
+
+const data: Data[] = [
+	{
+		id: 1,
+		title: 'Hello World',
+		author: 1,
+		order: 1,
+	},
+	{
+		id: 2,
+		title: 'Homepage',
+		author: 2,
+		order: 1,
+	},
+	{
+		id: 3,
+		title: 'Posts',
+		author: 2,
+		order: 1,
+	},
+];
+
+const singleSelectCallback = jest.fn();
+const singleSelectActions: ActionButton< Data >[] = [
+	{
+		id: 'confirm',
+		label: 'Confirm',
+		supportsBulk: false,
+		isPrimary: true,
+		callback: singleSelectCallback,
+	},
+];
+
+const multiSelectCallback = jest.fn();
+const multiSelectActions: ActionButton< Data >[] = [
+	{
+		id: 'confirm',
+		label: 'Confirm',
+		supportsBulk: true,
+		isPrimary: true,
+		icon: 'check',
+		callback: multiSelectCallback,
+	},
+];
+
+function Picker( {
+	view: additionalView,
+	actions,
+	label,
+	multiselect,
+	...props
+}: {
+	actions?: ActionButton< Data >[];
+	view?: Partial< View >;
+	label?: string;
+	multiselect?: boolean;
+} ) {
+	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_PICKER_GRID,
+		fields: [],
+		titleField: 'title',
+		mediaField: 'image',
+		search: '',
+		page: 1,
+		perPage: 10,
+		filters: [],
+		...additionalView,
+	} as ViewPickerGrid );
+
+	const [ selection, setSelection ] = useState< string[] >( [] );
+
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, [] );
+	}, [ view ] );
+
+	const dataViewProps = {
+		actions,
+		picker: true,
+		getItemId: ( item: Data ) => item.id.toString(),
+		paginationInfo,
+		data: shownData,
+		view,
+		defaultLayouts: { [ LAYOUT_PICKER_GRID ]: {} },
+		fields: [],
+		onChangeView: setView,
+		multiselect,
+		selection,
+		itemListLabel: label,
+		onChangeSelection: ( newSelection: string[] ) => {
+			onChangeSelection( newSelection );
+			setSelection( newSelection );
+		},
+		...props,
+	};
+
+	return <DataViewsPicker { ...dataViewProps } />;
+}
+describe( 'DataViews Picker', () => {
+	describe( 'Grid layout', () => {
+		it( 'renders the grid as a `listbox` role, with items as `option` roles', () => {
+			render( <Picker /> );
+
+			// Grid should have listbox role
+			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
+
+			// Each data item should have option role
+			const options = screen.getAllByRole( 'option' );
+			expect( options ).toHaveLength( data.length );
+		} );
+
+		it( 'supports specifying a `label` which is rendered as an aria-label', () => {
+			const testLabel = 'Select an item from the grid';
+			render( <Picker label={ testLabel } /> );
+
+			// Grid should have the specified aria-label
+			expect(
+				screen.getByRole( 'listbox', { name: testLabel } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'implements single tab-stop composite pattern with aria-activedescendant', async () => {
+			render( <Picker /> );
+
+			// Grid should be tabbable as the main composite widget
+			const grid = screen.getByRole( 'listbox' );
+			expect( grid ).toHaveAttribute( 'tabindex', '0' );
+
+			// Individual options exist but are managed by composite pattern
+			const options = screen.getAllByRole( 'option' );
+			expect( options.length ).toBeGreaterThan( 0 );
+
+			const user = userEvent.setup();
+
+			const viewOptionsButton = screen.getByRole( 'button', {
+				name: 'View options',
+			} );
+
+			// Focus the viewOptions button, which is just before the grid.
+			viewOptionsButton.focus();
+			expect( viewOptionsButton ).toHaveFocus();
+
+			// Tab to the grid (single tab-stop for the entire grid)
+			await user.keyboard( '{Tab}' );
+			expect( grid ).toHaveFocus();
+
+			// Test aria-activedescendant behavior
+			// Trigger navigation to establish aria-activedescendant
+			await user.keyboard( '{ArrowRight}' );
+			await user.keyboard( '{ArrowLeft}' );
+			const firstActiveDescendant = grid.getAttribute(
+				'aria-activedescendant'
+			);
+
+			expect( firstActiveDescendant ).toBeTruthy();
+			expect( firstActiveDescendant ).toBe( options[ 0 ].id );
+
+			// Navigate with arrow keys to test aria-activedescendant changes
+			await user.keyboard( '{ArrowRight}' );
+			expect( grid ).toHaveFocus();
+
+			// Check that aria-activedescendant changed after navigation
+			const secondActiveDescendant = grid.getAttribute(
+				'aria-activedescendant'
+			);
+			expect( secondActiveDescendant ).toBeTruthy();
+			expect( secondActiveDescendant ).toBe( options[ 1 ].id );
+			expect( secondActiveDescendant ).not.toBe( firstActiveDescendant );
+
+			// Navigate to third option
+			await user.keyboard( '{ArrowRight}' );
+			expect( grid ).toHaveFocus();
+
+			const thirdActiveDescendant = grid.getAttribute(
+				'aria-activedescendant'
+			);
+			expect( thirdActiveDescendant ).toBeTruthy();
+			expect( thirdActiveDescendant ).toBe( options[ 2 ].id );
+			expect( thirdActiveDescendant ).not.toBe( firstActiveDescendant );
+			expect( thirdActiveDescendant ).not.toBe( secondActiveDescendant );
+
+			// Navigate back to first option
+			await user.keyboard( '{ArrowLeft}' );
+			expect( grid ).toHaveFocus();
+
+			await user.keyboard( '{ArrowLeft}' );
+			expect( grid ).toHaveFocus();
+
+			// Verify aria-activedescendant is back to first option
+			const backToFirstActiveDescendant = grid.getAttribute(
+				'aria-activedescendant'
+			);
+			expect( backToFirstActiveDescendant ).toBe( firstActiveDescendant );
+			expect( backToFirstActiveDescendant ).toBe( options[ 0 ].id );
+
+			// Tab should move focus away from the grid entirely
+			await user.keyboard( '{Tab}' );
+			expect( grid ).not.toHaveFocus();
+
+			// Shift+Tab should move back to the grid
+			await user.keyboard( '{Shift>}{Tab}{/Shift}' );
+			expect( grid ).toHaveFocus();
+
+			// aria-activedescendant should be maintained when returning to grid
+			expect( grid.getAttribute( 'aria-activedescendant' ) ).toBeTruthy();
+		} );
+
+		describe( 'Single selection', () => {
+			it( 'maintains only a single selected item and calls the `onChangeSelection` callback when the selection changes', async () => {
+				render( <Picker actions={ singleSelectActions } /> );
+
+				const user = userEvent.setup();
+				const listbox = screen.getByRole( 'listbox' );
+				const options = within( listbox ).getAllByRole( 'option' );
+
+				// Click first item
+				await user.click( options[ 0 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( options[ 1 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+				expect( options[ 2 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 0 ].id.toString(),
+				] );
+
+				// Click second item - should deselect first
+				await user.click( options[ 1 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+				expect( options[ 1 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( options[ 2 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 1 ].id.toString(),
+				] );
+			} );
+
+			it( 'calls the action callback when the action button is clicked', async () => {
+				render( <Picker actions={ singleSelectActions } /> );
+
+				const user = userEvent.setup();
+				const options = screen.getAllByRole( 'option' );
+
+				// Select first item
+				await user.click( options[ 0 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+
+				// Find the action button with correct label within the action buttons container
+				const confirmButton = screen.getByRole( 'button', {
+					name: 'Confirm',
+				} );
+				expect( confirmButton ).toBeInTheDocument();
+
+				// Clear any previous calls and click the action button
+				singleSelectCallback.mockClear();
+				await user.click( confirmButton );
+
+				// Verify the callback was called with correct parameters
+				expect( singleSelectCallback ).toHaveBeenCalledTimes( 1 );
+			} );
+		} );
+
+		describe( 'Multi selection', () => {
+			it( 'adds the `aria-multiselectable` attribute to the listbox', () => {
+				render( <Picker actions={ multiSelectActions } /> );
+
+				const listbox = screen.getByRole( 'listbox' );
+				expect( listbox ).toHaveAttribute(
+					'aria-multiselectable',
+					'true'
+				);
+			} );
+
+			it( 'supports multiple selected items and calls the `onChangeSelection` callback when the selection changes', async () => {
+				// Test multi-selection by clicking multiple items
+				render( <Picker actions={ multiSelectActions } /> );
+
+				const user = userEvent.setup();
+				const listbox = screen.getByRole( 'listbox' );
+				const options = within( listbox ).getAllByRole( 'option' );
+
+				// Click first item
+				await user.click( options[ 0 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( options[ 1 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 0 ].id.toString(),
+				] );
+
+				// Click second item - both should remain selected in multi-select mode
+				await user.click( options[ 1 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( options[ 1 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 0 ].id.toString(),
+					data[ 1 ].id.toString(),
+				] );
+
+				// Click first item again to deselect it
+				await user.click( options[ 0 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+				expect( options[ 1 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 1 ].id.toString(),
+				] );
+			} );
+
+			it( 'calls the action callback when the action button is clicked', async () => {
+				render( <Picker actions={ multiSelectActions } /> );
+
+				const user = userEvent.setup();
+				const options = screen.getAllByRole( 'option' );
+
+				// Select multiple items
+				await user.click( options[ 0 ] );
+				await user.click( options[ 1 ] );
+
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( options[ 1 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+
+				// Third item should remain unselected
+				expect( options[ 2 ] ).toHaveAttribute(
+					'aria-selected',
+					'false'
+				);
+
+				// Find the action button with correct label within the action buttons container
+				const confirmButton = screen.getByRole( 'button', {
+					name: 'Confirm',
+				} );
+				expect( confirmButton ).toBeInTheDocument();
+
+				// Clear any previous calls and click the action button
+				multiSelectCallback.mockClear();
+				await user.click( confirmButton );
+
+				// Verify the callback was called with correct parameters for multi-selection
+				expect( multiSelectCallback ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'maintains the selected items when navigating between pages for a paginated view', async () => {
+				// Create a component with pagination (2 items per page)
+				render(
+					<Picker
+						actions={ multiSelectActions }
+						view={ {
+							type: LAYOUT_PICKER_GRID,
+							fields: [],
+							titleField: 'title',
+							mediaField: 'image',
+							search: '',
+							page: 1,
+							perPage: 2, // Only 2 items per page to force pagination
+							filters: [],
+						} }
+					/>
+				);
+
+				const user = userEvent.setup();
+				const listbox = screen.getByRole( 'listbox' );
+
+				// Page 1: Select first item
+				let options = within( listbox ).getAllByRole( 'option' );
+				expect( options ).toHaveLength( 2 ); // Should show 2 items per page
+
+				await user.click( options[ 0 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 0 ].id.toString(),
+				] );
+
+				// Navigate to page 2
+				const nextButton = screen.getByRole( 'button', {
+					name: /next/i,
+				} );
+				await user.click( nextButton );
+
+				// Page 2: Select another item
+				options = within( listbox ).getAllByRole( 'option' );
+				expect( options ).toHaveLength( 1 ); // Page 2 should have 1 item (item 3)
+
+				await user.click( options[ 0 ] );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+				expect( onChangeSelection ).toHaveBeenCalledWith( [
+					data[ 0 ].id.toString(),
+					data[ 2 ].id.toString(),
+				] );
+
+				// Go back to page 1
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous/i,
+				} );
+				await user.click( prevButton );
+
+				// Verify first item is still selected
+				options = within( listbox ).getAllByRole( 'option' );
+				expect( options[ 0 ] ).toHaveAttribute(
+					'aria-selected',
+					'true'
+				);
+			} );
+		} );
+	} );
+} );