@wordpress/dataviews 6.0.1-next.46f643fa0.0 → 7.0.0

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

@@ -36,6 +36,10 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 
 			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,
@@ -45,6 +49,7 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 				),
 				operators,
 				isVisible:
+					isLocked ||
 					isPrimary ||
 					!! view.filters?.some(
 						( f ) =>
@@ -52,11 +57,21 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 							ALL_OPERATORS.includes( f.operator )
 					),
 				isPrimary,
+				isLocked,
 			} );
 		} );
-		// Sort filters by primary property. We need the primary filters to be first.
-		// Then we sort by name.
+
+		// 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;
 			}

package/src/components/dataviews-filters/reset-filters.tsx

@@ -28,7 +28,8 @@ export default function ResetFilter( {
 		! view.search &&
 		! view.filters?.some(
 			( _filter ) =>
-				_filter.value !== undefined || ! isPrimary( _filter.field )
+				! _filter.isLocked &&
+				( _filter.value !== undefined || ! isPrimary( _filter.field ) )
 		);
 	return (
 		<Button
@@ -42,7 +43,8 @@ export default function ResetFilter( {
 					...view,
 					page: 1,
 					search: '',
-					filters: [],
+					filters:
+						view.filters?.filter( ( f ) => !! f.isLocked ) || [],
 				} );
 			} }
 		>

package/src/components/dataviews-filters/style.scss

@@ -80,11 +80,15 @@
 		align-items: center;
 		box-sizing: border-box;
 
+		&.is-not-clickable {
+			cursor: default;
+		}
+
 		&.has-reset {
 			padding-inline-end: $button-size-small + $grid-unit-05;
 		}
 
-		&:hover,
+		&:hover:not(&.is-not-clickable),
 		&:focus-visible,
 		&[aria-expanded="true"] {
 			background: $gray-200;

package/src/components/dataviews-item-actions/index.tsx

@@ -179,17 +179,6 @@ export default function ItemActions< Item >( {
 		);
 	}
 
-	// If all actions are primary, there is no need to render the dropdown.
-	if ( primaryActions.length === eligibleActions.length ) {
-		return (
-			<PrimaryActions
-				item={ item }
-				actions={ primaryActions }
-				registry={ registry }
-			/>
-		);
-	}
-
 	return (
 		<HStack
 			spacing={ 1 }
@@ -205,11 +194,13 @@ export default function ItemActions< Item >( {
 				actions={ primaryActions }
 				registry={ registry }
 			/>
-			<CompactItemActions
-				item={ item }
-				actions={ eligibleActions }
-				registry={ registry }
-			/>
+			{ primaryActions.length < eligibleActions.length && (
+				<CompactItemActions
+					item={ item }
+					actions={ eligibleActions }
+					registry={ registry }
+				/>
+			) }
 		</HStack>
 	);
 }

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

@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -35,6 +36,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		onClickItem,
 		isItemClickable,
 		renderItemLink,
+		empty = __( 'No results' ),
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -57,6 +59,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 			renderItemLink={ renderItemLink }
 			isItemClickable={ isItemClickable }
 			view={ view }
+			empty={ empty }
 		/>
 	);
 }

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

@@ -22,7 +22,7 @@ export function DataViewsPagination() {
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
 
-	if ( ! totalItems || ! totalPages ) {
+	if ( ! totalItems || ! totalPages || view.infiniteScrollEnabled ) {
 		return null;
 	}
 

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

@@ -47,6 +47,7 @@ import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { NormalizedField, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
+import InfiniteScrollToggle from './infinite-scroll-toggle';
 import { unlock } from '../../lock-unlock';
 
 const { Menu } = unlock( componentsPrivateApis );
@@ -102,12 +103,11 @@ export function ViewTypeMenu() {
 										if ( 'layout' in viewWithoutLayout ) {
 											delete viewWithoutLayout.layout;
 										}
-										// @ts-expect-error
 										return onChangeView( {
 											...viewWithoutLayout,
 											type: e.target.value,
 											...defaultLayouts[ e.target.value ],
-										} );
+										} as View );
 								}
 								warning( 'Invalid dataview' );
 							} }
@@ -213,10 +213,19 @@ function SortDirectionControl() {
 	);
 }
 
-const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function ItemsPerPageControl() {
-	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
-	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
+	const { view, config, onChangeView } = useContext( DataViewsContext );
+	const { infiniteScrollEnabled } = view;
+	if (
+		! config ||
+		! config.perPageSizes ||
+		config.perPageSizes.length < 2 ||
+		config.perPageSizes.length > 6 ||
+		infiniteScrollEnabled
+	) {
+		return null;
+	}
+
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -238,7 +247,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ pageSizeValues.map( ( value ) => {
+			{ config.perPageSizes.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }
@@ -799,6 +808,7 @@ export function DataviewsViewConfigDropdown() {
 							{ !! activeLayout?.viewConfigOptions && (
 								<activeLayout.viewConfigOptions />
 							) }
+							<InfiniteScrollToggle />
 							<ItemsPerPageControl />
 						</SettingsSection>
 						<SettingsSection title={ __( 'Properties' ) }>

package/src/components/dataviews-view-config/infinite-scroll-toggle.tsx

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+
+export default function InfiniteScrollToggle() {
+	const context = useContext( DataViewsContext );
+	const { view, onChangeView } = context;
+	const infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;
+
+	// Only render the toggle if an infinite scroll handler is available
+	if ( ! context.hasInfiniteScrollHandler ) {
+		return null;
+	}
+
+	return (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			label={ __( 'Enable infinite scroll' ) }
+			help={ __(
+				'Automatically load more content as you scroll, instead of showing pagination links.'
+			) }
+			checked={ infiniteScrollEnabled }
+			onChange={ ( newValue ) => {
+				onChangeView( {
+					...view,
+					infiniteScrollEnabled: newValue,
+				} );
+			} }
+		/>
+	);
+}

package/src/dataform-controls/array.tsx

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function ArrayControl< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, elements } = field;
+	const value = field.getValue( { item: data } );
+
+	const findElementByValue = useCallback(
+		( suggestionValue: string ) => {
+			return elements?.find(
+				( suggestion ) => suggestion.value === suggestionValue
+			);
+		},
+		[ elements ]
+	);
+
+	const findElementByLabel = useCallback(
+		( suggestionLabel: string ) => {
+			return elements?.find(
+				( suggestion ) => suggestion.label === suggestionLabel
+			);
+		},
+		[ elements ]
+	);
+
+	// Ensure value is an array
+	const arrayValue = useMemo(
+		() =>
+			Array.isArray( value )
+				? value.map( ( token ) => {
+						const tokenLabel = findElementByValue( token )?.label;
+						return tokenLabel || token;
+				  } )
+				: [],
+		[ value, findElementByValue ]
+	);
+
+	const onChangeControl = useCallback(
+		( tokens: ( string | { value: string } )[] ) => {
+			// Convert TokenItem objects to strings
+			const stringTokens = tokens.map( ( token ) => {
+				if ( typeof token !== 'string' ) {
+					return token.value;
+				}
+
+				const tokenByLabel = findElementByLabel( token );
+
+				return tokenByLabel?.value || token;
+			} );
+
+			onChange( {
+				[ id ]: stringTokens,
+			} );
+		},
+		[ id, onChange, findElementByLabel ]
+	);
+
+	return (
+		<FormTokenField
+			label={ hideLabelFromVision ? undefined : label }
+			value={ arrayValue }
+			onChange={ onChangeControl }
+			placeholder={ placeholder }
+			suggestions={
+				elements?.map( ( suggestion ) => suggestion.label ) ?? []
+			}
+			__experimentalExpandOnFocus={ elements && elements.length > 0 }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+}

package/src/dataform-controls/boolean.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,23 +19,36 @@ export default function Boolean< Item >( {
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
 	const { id, getValue, label } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedToggleControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	return (
 		<ValidatedToggleControl
 			required={ !! field.isValid.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: newValue,
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }

package/src/dataform-controls/email.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,6 +20,12 @@ export default function Email< Item >( {
 }: DataFormControlProps< Item > ) {
 	const { id, label, placeholder, description } = field;
 	const value = field.getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedTextControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -32,19 +38,26 @@ export default function Email< Item >( {
 	return (
 		<ValidatedTextControl
 			required={ !! field.isValid?.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: newValue,
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			type="email"
 			label={ label }
 			placeholder={ placeholder }

package/src/dataform-controls/index.tsx

@@ -21,12 +21,14 @@ import select from './select';
 import text from './text';
 import toggleGroup from './toggle-group';
 import boolean from './boolean';
+import array from './array';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
 }
 
 const FORM_CONTROLS: FormControls = {
+	array,
 	boolean,
 	checkbox,
 	datetime,
@@ -51,7 +53,7 @@ export function getControl< Item >(
 		return getControlByType( field.Edit );
 	}
 
-	if ( field.elements ) {
+	if ( field.elements && field.type !== 'array' ) {
 		return getControlByType( 'select' );
 	}
 

package/src/dataform-controls/integer.tsx

@@ -7,7 +7,7 @@ import {
 	__experimentalNumberControl as NumberControl,
 	privateApis,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -84,6 +84,13 @@ export default function Integer< Item >( {
 }: DataFormControlProps< Item > ) {
 	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedNumberControl
+			>[ 'customValidity' ]
+		>( undefined );
+
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) => {
 			onChange( {
@@ -112,21 +119,28 @@ export default function Integer< Item >( {
 	return (
 		<ValidatedNumberControl
 			required={ !! field.isValid?.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: [ undefined, '', null ].includes( newValue )
-								? undefined
-								: Number( newValue ),
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: [ undefined, '', null ].includes( newValue )
+							? undefined
+							: Number( newValue ),
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			label={ label }
 			help={ description }
 			value={ value }

package/src/dataform-controls/select.tsx

@@ -16,8 +16,9 @@ export default function Select< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } ) ?? '';
+	const { id, label, type } = field;
+	const isMultiple = type === 'array';
+	const value = field.getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
 	const onChangeControl = useCallback(
 		( newValue: any ) =>
 			onChange( {
@@ -26,17 +27,25 @@ export default function Select< Item >( {
 		[ id, onChange ]
 	);
 
-	const elements = [
-		/*
-		 * Value can be undefined when:
-		 *
-		 * - the field is not required
-		 * - in bulk editing
-		 *
-		 */
-		{ label: __( 'Select item' ), value: '' },
-		...( field?.elements ?? [] ),
-	];
+	const fieldElements = field?.elements ?? [];
+	const hasEmptyValue = fieldElements.some(
+		( { value: elementValue } ) => elementValue === ''
+	);
+
+	const elements =
+		hasEmptyValue || isMultiple
+			? fieldElements
+			: [
+					/*
+					 * Value can be undefined when:
+					 *
+					 * - the field is not required
+					 * - in bulk editing
+					 *
+					 */
+					{ label: __( 'Select item' ), value: '' },
+					...fieldElements,
+			  ];
 
 	return (
 		<SelectControl
@@ -48,6 +57,7 @@ export default function Select< Item >( {
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			hideLabelFromVision={ hideLabelFromVision }
+			multiple={ isMultiple }
 		/>
 	);
 }

package/src/dataform-controls/text.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,6 +20,12 @@ export default function Text< Item >( {
 }: DataFormControlProps< Item > ) {
 	const { id, label, placeholder, description } = field;
 	const value = field.getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedTextControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -32,19 +38,26 @@ export default function Text< Item >( {
 	return (
 		<ValidatedTextControl
 			required={ !! field.isValid?.required }
-			customValidator={ ( newValue: any ) => {
-				if ( field.isValid?.custom ) {
-					return field.isValid.custom(
-						{
-							...data,
-							[ id ]: newValue,
-						},
-						field
-					);
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
 				}
 
-				return null;
+				setCustomValidity( undefined );
 			} }
+			customValidity={ customValidity }
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }