@wordpress/dataviews 9.0.1-next.a730c9c8c.0 → 9.1.1-next.233ccab9b.0

package/src/components/dataviews-filters/use-filters.ts

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
+import type { NormalizedFilter, NormalizedField, View } from '../../types';
+
+function useFilters( fields: NormalizedField< any >[], view: View ) {
+	return useMemo( () => {
+		const filters: NormalizedFilter[] = [];
+		fields.forEach( ( field ) => {
+			if (
+				field.filterBy === false ||
+				( ! field.elements?.length && ! field.Edit )
+			) {
+				return;
+			}
+
+			const operators = field.filterBy.operators;
+			const isPrimary = !! field.filterBy?.isPrimary;
+			const isLocked =
+				view.filters?.some(
+					( f ) => f.field === field.id && !! f.isLocked
+				) ?? false;
+			filters.push( {
+				field: field.id,
+				name: field.label,
+				elements: field.elements ?? [],
+				singleSelection: operators.some( ( op ) =>
+					SINGLE_SELECTION_OPERATORS.includes( op )
+				),
+				operators,
+				isVisible:
+					isLocked ||
+					isPrimary ||
+					!! view.filters?.some(
+						( f ) =>
+							f.field === field.id &&
+							ALL_OPERATORS.includes( f.operator )
+					),
+				isPrimary,
+				isLocked,
+			} );
+		} );
+
+		// Sort filters by:
+		// - locked filters go first
+		// - primary filters go next
+		// - then, sort by name
+		filters.sort( ( a, b ) => {
+			if ( a.isLocked && ! b.isLocked ) {
+				return -1;
+			}
+			if ( ! a.isLocked && b.isLocked ) {
+				return 1;
+			}
+			if ( a.isPrimary && ! b.isPrimary ) {
+				return -1;
+			}
+			if ( ! a.isPrimary && b.isPrimary ) {
+				return 1;
+			}
+			return a.name.localeCompare( b.name );
+		} );
+		return filters;
+	}, [ fields, view ] );
+}
+
+export default useFilters;

package/src/components/dataviews-picker/index.tsx

@@ -7,13 +7,7 @@ import type { ReactNode } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import {
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import { useResizeObserver, throttle } from '@wordpress/compose';
 
 /**
@@ -22,7 +16,8 @@ import { useResizeObserver, throttle } from '@wordpress/compose';
 import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import {
-	default as DataViewsFilters,
+	Filters,
+	FiltersToggled,
 	useFilters,
 	FiltersToggle,
 } from '../dataviews-filters';
@@ -84,7 +79,6 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
-	const { isShowingFilter } = useContext( DataViewsContext );
 	return (
 		<>
 			<HStack
@@ -109,9 +103,7 @@ function DefaultUI( {
 					<DataViewsViewConfig />
 				</HStack>
 			</HStack>
-			{ isShowingFilter && (
-				<DataViewsFilters className="dataviews-filters__container" />
-			) }
+			<FiltersToggled className="dataviews-filters__container" />
 			<DataViewsLayout />
 			<DataViewsPickerFooter />
 		</>
@@ -263,7 +255,8 @@ function DataViewsPicker< Item >( {
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {
 		BulkActionToolbar: typeof DataViewsPickerFooter;
-		Filters: typeof DataViewsFilters;
+		Filters: typeof Filters;
+		FiltersToggled: typeof FiltersToggled;
 		FiltersToggle: typeof FiltersToggle;
 		Layout: typeof DataViewsLayout;
 		LayoutSwitcher: typeof ViewTypeMenu;
@@ -273,7 +266,8 @@ const DataViewsPickerSubComponents =
 	};
 
 DataViewsPickerSubComponents.BulkActionToolbar = DataViewsPickerFooter;
-DataViewsPickerSubComponents.Filters = DataViewsFilters;
+DataViewsPickerSubComponents.Filters = Filters;
+DataViewsPickerSubComponents.FiltersToggled = FiltersToggled;
 DataViewsPickerSubComponents.FiltersToggle = FiltersToggle;
 DataViewsPickerSubComponents.Layout = DataViewsLayout;
 DataViewsPickerSubComponents.LayoutSwitcher = ViewTypeMenu;

package/src/components/dataviews-view-config/index.tsx

@@ -562,9 +562,10 @@ function FieldControl() {
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
 			! togglableFields.includes( f.id ) &&
-			f.type !== 'media'
+			f.type !== 'media' &&
+			f.enableHiding !== false
 	);
-	const visibleFields = visibleFieldIds
+	let visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
 		.filter( isDefined );
 
@@ -622,7 +623,7 @@ function FieldControl() {
 			isVisibleFlag: 'showDescription',
 		},
 	].filter( ( { field } ) => isDefined( field ) );
-	const visibleLockedFields = lockedFields.filter(
+	let visibleLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
@@ -631,6 +632,20 @@ function FieldControl() {
 		isVisibleFlag: string;
 		ui?: ReactNode;
 	} >;
+
+	// If only one locked field is visible, prevent it from being hidden.
+	if ( visibleLockedFields.length === 1 ) {
+		visibleLockedFields = visibleLockedFields.map( ( locked ) => ( {
+			...locked,
+			field: { ...locked.field, enableHiding: false },
+		} ) );
+	}
+
+	// If no locked fields are visible but there are visibleFields, lock the last visible field.
+	if ( visibleLockedFields.length === 0 && visibleFields.length === 1 ) {
+		visibleFields = [ { ...visibleFields[ 0 ], enableHiding: false } ];
+	}
+
 	const hiddenLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error

package/src/dataform-controls/array.tsx

@@ -1,13 +1,22 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import { FormTokenField } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import { privateApis } from '@wordpress/components';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedFormTokenField } = unlock( privateApis );
 
 export default function ArrayControl< Item >( {
 	data,
@@ -18,66 +27,154 @@ export default function ArrayControl< Item >( {
 	const { label, placeholder, elements, getValue, setValue } = field;
 	const value = getValue( { item: data } );
 
-	const findElementByValue = useCallback(
-		( suggestionValue: string ) => {
-			return elements?.find(
-				( suggestion ) => suggestion.value === suggestionValue
-			);
-		},
-		[ elements ]
-	);
+	const [ customValidity, setCustomValidity ] = useState<
+		| {
+				type: 'validating' | 'valid' | 'invalid';
+				message: string;
+		  }
+		| undefined
+	>( undefined );
 
-	const findElementByLabel = useCallback(
-		( suggestionLabel: string ) => {
-			return elements?.find(
-				( suggestion ) => suggestion.label === suggestionLabel
-			);
-		},
-		[ elements ]
-	);
-
-	// Ensure value is an array
-	const arrayValue = useMemo(
+	// Convert stored values to element objects for the token field
+	const arrayValueAsElements = useMemo(
 		() =>
 			Array.isArray( value )
 				? value.map( ( token ) => {
-						const tokenLabel = findElementByValue( token )?.label;
-						return tokenLabel || token;
+						const element = elements?.find(
+							( suggestion ) => suggestion.value === token
+						);
+						return element || { value: token, label: token };
 				  } )
 				: [],
-		[ value, findElementByValue ]
+		[ value, elements ]
 	);
 
-	const onChangeControl = useCallback(
-		( tokens: ( string | { value: string } )[] ) => {
-			// Convert TokenItem objects to strings
-			const stringTokens = tokens.map( ( token ) => {
-				if ( typeof token !== 'string' ) {
+	const validateTokens = useCallback(
+		( tokens: ( string | { value: string; label?: string } )[] ) => {
+			// Extract actual values from tokens for validation
+			const tokenValues = tokens.map( ( token ) => {
+				if ( typeof token === 'object' && 'value' in token ) {
 					return token.value;
 				}
+				return token;
+			} );
+
+			// First, check if elements validation is required and any tokens are invalid
+			if ( field.isValid?.elements && elements ) {
+				const invalidTokens = tokenValues.filter( ( tokenValue ) => {
+					return ! elements.some(
+						( element ) => element.value === tokenValue
+					);
+				} );
+
+				if ( invalidTokens.length > 0 ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message: sprintf(
+							/* translators: %s: list of invalid tokens */
+							_n(
+								'Please select from the available options: %s is invalid.',
+								'Please select from the available options: %s are invalid.',
+								invalidTokens.length
+							),
+							invalidTokens.join( ', ' )
+						),
+					} );
+					return;
+				}
+			}
+
+			// Then check custom validation if provided.
+			if ( field.isValid?.custom ) {
+				const result = field.isValid?.custom?.(
+					deepMerge(
+						data,
+						setValue( {
+							item: data,
+							value: tokenValues,
+						} ) as Partial< Item >
+					),
+					field
+				);
+
+				if ( result ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message: result,
+					} );
+					return;
+				}
+			}
 
-				const tokenByLabel = findElementByLabel( token );
+			// If no validation errors, clear custom validity
+			setCustomValidity( undefined );
+		},
+		[ elements, data, field, setValue ]
+	);
 
-				return tokenByLabel?.value || token;
+	const onChangeControl = useCallback(
+		( tokens: ( string | { value: string; label?: string } )[] ) => {
+			const valueTokens = tokens.map( ( token ) => {
+				if ( typeof token === 'object' && 'value' in token ) {
+					return token.value;
+				}
+				// If it's a string, it's either a new suggestion value or user input
+				return token;
 			} );
 
-			onChange( setValue( { item: data, value: stringTokens } ) );
+			onChange( setValue( { item: data, value: valueTokens } ) );
 		},
-		[ onChange, setValue, data, findElementByLabel ]
+		[ onChange, setValue, data ]
 	);
 
 	return (
-		<FormTokenField
+		<ValidatedFormTokenField
+			required={ !! field.isValid?.required }
+			onValidate={ validateTokens }
+			customValidity={ customValidity }
 			label={ hideLabelFromVision ? undefined : label }
-			value={ arrayValue }
+			value={ arrayValueAsElements }
 			onChange={ onChangeControl }
 			placeholder={ placeholder }
-			suggestions={
-				elements?.map( ( suggestion ) => suggestion.label ) ?? []
-			}
+			suggestions={ elements?.map( ( element ) => element.value ) }
+			__experimentalValidateInput={ ( token: string ) => {
+				// If elements validation is required, check if token is valid
+				if ( field.isValid?.elements && elements ) {
+					return elements.some(
+						( element ) =>
+							element.value === token || element.label === token
+					);
+				}
+
+				// For non-elements validation, allow all tokens
+				return true;
+			} }
 			__experimentalExpandOnFocus={ elements && elements.length > 0 }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
+			__experimentalShowHowTo={ ! field.isValid?.elements }
+			displayTransform={ ( token: any ) => {
+				// For existing tokens (element objects), display their label
+				if ( typeof token === 'object' && 'label' in token ) {
+					return token.label;
+				}
+				// For suggestions (value strings), find the corresponding element and show its label
+				if ( typeof token === 'string' && elements ) {
+					const element = elements.find(
+						( el ) => el.value === token
+					);
+					return element?.label || token;
+				}
+				return token;
+			} }
+			__experimentalRenderItem={ ( { item }: { item: any } ) => {
+				// Custom rendering for suggestion items (item is a value string)
+				if ( typeof item === 'string' && elements ) {
+					const element = elements.find(
+						( el ) => el.value === item
+					);
+					return <span>{ element?.label || item }</span>;
+				}
+				return <span>{ item }</span>;
+			} }
 		/>
 	);
 }

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

@@ -89,6 +89,11 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
+			aria-label={
+				titleField
+					? titleField.getValue( { item } ) || __( '(no title)' )
+					: undefined
+			}
 			key={ id }
 			render={ ( { children, ...props } ) => (
 				<VStack spacing={ 0 } children={ children } { ...props } />
@@ -130,14 +135,16 @@ function GridItem< Item >( {
 					tabIndex={ -1 }
 				/>
 			) }
-			<HStack
-				justify="space-between"
-				className="dataviews-view-picker-grid__title-actions"
-			>
-				<div className="dataviews-view-picker-grid__title-field dataviews-title-field">
-					{ renderedTitleField }
-				</div>
-			</HStack>
+			{ showTitle && (
+				<HStack
+					justify="space-between"
+					className="dataviews-view-picker-grid__title-actions"
+				>
+					<div className="dataviews-view-picker-grid__title-field dataviews-title-field">
+						{ renderedTitleField }
+					</div>
+				</HStack>
+			) }
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
 					<descriptionField.render

package/src/field-types/array.tsx

@@ -59,14 +59,6 @@ const arrayFieldType: FieldTypeDefinition< any > = {
 				return __( 'Every value must be a string.' );
 			}
 
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if (
-					! value.every( ( v: any ) => validValues.includes( v ) )
-				) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
 			return null;
 		},
 	},

package/src/index.ts

@@ -1,4 +1,5 @@
 export { default as DataViews } from './components/dataviews';
+export { default as DataViewsPicker } from './components/dataviews-picker';
 export { default as DataForm } from './components/dataform';
 export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';

package/src/test/validation.ts

@@ -117,4 +117,196 @@ describe( 'validation', () => {
 		const result = isItemValid( item, fields, form );
 		expect( result ).toBe( true );
 	} );
+
+	it( 'array field is invalid when required but empty', () => {
+		const item = { id: 1, tags: [] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				isValid: {
+					required: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field is invalid when required but not an array', () => {
+		const item = { id: 1, tags: null };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				isValid: {
+					required: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field is valid when required and has values', () => {
+		const item = { id: 1, tags: [ 'tag1', 'tag2' ] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				isValid: {
+					required: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'text field with isValid.elements validates against elements', () => {
+		const item = { id: 1, status: 'published' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'status',
+				type: 'text',
+				elements: [
+					{ value: 'draft', label: 'Draft' },
+					{ value: 'published', label: 'Published' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'status' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'text field with isValid.elements rejects invalid values', () => {
+		const item = { id: 1, status: 'invalid-status' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'status',
+				type: 'text',
+				elements: [
+					{ value: 'draft', label: 'Draft' },
+					{ value: 'published', label: 'Published' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'status' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field with isValid.elements validates against elements', () => {
+		const item = { id: 1, priority: 2 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'priority',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Low' },
+					{ value: 2, label: 'Medium' },
+					{ value: 3, label: 'High' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'priority' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field with isValid.elements rejects invalid values', () => {
+		const item = { id: 1, priority: 5 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'priority',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Low' },
+					{ value: 2, label: 'Medium' },
+					{ value: 3, label: 'High' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'priority' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field with isValid.elements validates all items against elements', () => {
+		const item = { id: 1, tags: [ 'red', 'blue' ] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				elements: [
+					{ value: 'red', label: 'Red' },
+					{ value: 'blue', label: 'Blue' },
+					{ value: 'green', label: 'Green' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'array field with isValid.elements rejects arrays with invalid items', () => {
+		const item = { id: 1, tags: [ 'red', 'yellow' ] };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				elements: [
+					{ value: 'red', label: 'Red' },
+					{ value: 'blue', label: 'Blue' },
+					{ value: 'green', label: 'Green' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'array field with isValid.elements handles non-array values', () => {
+		const item = { id: 1, tags: 'not-an-array' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'tags',
+				type: 'array',
+				elements: [
+					{ value: 'red', label: 'Red' },
+					{ value: 'blue', label: 'Blue' },
+				],
+				isValid: {
+					elements: true,
+				},
+			},
+		];
+		const form = { fields: [ 'tags' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
 } );

package/src/types.ts

@@ -164,6 +164,7 @@ export type FieldTypeDefinition< Item > = {
 
 export type Rules< Item > = {
 	required?: boolean;
+	elements?: boolean;
 	custom?: ( item: Item, field: NormalizedField< Item > ) => null | string;
 };
 
@@ -280,7 +281,7 @@ export type Field< Item > = {
 	enableGlobalSearch?: boolean;
 
 	/**
-	 * Whether the field is filterable.
+	 * Whether the field can be hidden in the UI.
 	 */
 	enableHiding?: boolean;