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

package/src/dataviews-layouts/utils/item-click-wrapper.tsx

@@ -3,6 +3,11 @@
  */
 import type { ReactNode, ReactElement, ComponentProps } from 'react';
 
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
 function getClickableItemProps< Item >( {
 	item,
 	isItemClickable,
@@ -63,18 +68,51 @@ export function ItemClickWrapper< Item >( {
 	className?: string;
 	children: ReactNode;
 } ) {
+	// Always render a wrapper element so layout and styling relying on the wrapper
+	// still works even if the item is not clickable.
 	if ( ! isItemClickable( item ) ) {
-		return children;
+		return (
+			<div className={ className } { ...extraProps }>
+				{ children }
+			</div>
+		);
 	}
 
 	// If we have a renderItemLink, use it
 	if ( renderItemLink ) {
-		return renderItemLink( {
+		const renderedElement = renderItemLink( {
 			item,
 			className: `${ className } ${ className }--clickable`,
 			...extraProps,
 			children,
 		} );
+
+		// Clone the element and enhance onClick to stop propagation
+		return cloneElement( renderedElement, {
+			onClick: ( event: React.MouseEvent ) => {
+				// Always stop propagation to prevent selection
+				event.stopPropagation();
+
+				// If consumer provided an onClick, call it
+				if ( renderedElement.props.onClick ) {
+					renderedElement.props.onClick( event );
+				}
+			},
+			onKeyDown: ( event: React.KeyboardEvent ) => {
+				if (
+					event.key === 'Enter' ||
+					event.key === '' ||
+					event.key === ' '
+				) {
+					// Prevents onChangeSelection from triggering.
+					event.stopPropagation();
+					// If consumer provided an onKeyDown, call it
+					if ( renderedElement.props.onKeyDown ) {
+						renderedElement.props.onKeyDown( event );
+					}
+				}
+			},
+		} );
 	}
 
 	// Otherwise use the classic click handler approach

package/src/field-types/array.tsx

@@ -44,6 +44,7 @@ function render( { item, field }: DataViewRenderFieldProps< any > ) {
 const arrayFieldType: FieldTypeDefinition< any > = {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 

package/src/field-types/boolean.tsx

@@ -12,7 +12,7 @@ import type {
 	FieldTypeDefinition,
 	NormalizedField,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
@@ -35,6 +35,7 @@ function sort( a: any, b: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 
@@ -50,8 +51,8 @@ export default {
 	},
 	Edit: 'checkbox',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		if ( field.elements ) {
-			return renderFromElements( { item, field } );
+		if ( field.hasElements ) {
+			return <RenderFromElements item={ item } field={ field } />;
 		}
 
 		if ( field.getValue( { item } ) === true ) {

package/src/field-types/color.tsx

@@ -17,7 +17,7 @@ import type {
 	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_ANY,
@@ -56,6 +56,7 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 
@@ -66,20 +67,13 @@ export default {
 				return __( 'Value must be a valid color.' );
 			}
 
-			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: 'color',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		if ( field.elements ) {
-			return renderFromElements( { item, field } );
+		if ( field.hasElements ) {
+			return <RenderFromElements item={ item } field={ field } />;
 		}
 
 		const value = field.getValue( { item } );

package/src/field-types/{date.ts → date.tsx}

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -10,10 +9,9 @@ import { __ } from '@wordpress/i18n';
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -40,21 +38,12 @@ export default {
 	sort,
 	Edit: 'date',
 	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;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		if ( field.elements ) {
-			return renderFromElements( { item, field } );
+		if ( field.hasElements ) {
+			return <RenderFromElements item={ item } field={ field } />;
 		}
 
 		const value = field.getValue( { item } );

package/src/field-types/datetime.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_ON,
 	OPERATOR_NOT_ON,
@@ -34,23 +28,16 @@ function sort( a: any, b: any, direction: SortDirection ) {
 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;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'datetime',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/email.tsx

@@ -12,7 +12,7 @@ import type {
 	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_ALL,
@@ -39,6 +39,7 @@ const emailRegex =
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 
@@ -49,21 +50,16 @@ export default {
 				return __( 'Value must be a valid email address.' );
 			}
 
-			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: 'email',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/index.tsx

@@ -1,20 +1,15 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
-	NormalizedField,
 	FieldType,
 	FieldTypeDefinition,
 	SortDirection,
 } from '../types';
 import { default as email } from './email';
 import { default as integer } from './integer';
+import { default as number } from './number';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
 import { default as date } from './date';
@@ -25,7 +20,7 @@ import { default as password } from './password';
 import { default as telephone } from './telephone';
 import { default as color } from './color';
 import { default as url } from './url';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 /**
@@ -45,6 +40,10 @@ export default function getFieldTypeDefinition< Item >(
 		return integer;
 	}
 
+	if ( 'number' === type ) {
+		return number;
+	}
+
 	if ( 'text' === type ) {
 		return text;
 	}
@@ -98,25 +97,16 @@ export default function getFieldTypeDefinition< Item >(
 				: b.localeCompare( a );
 		},
 		isValid: {
-			custom: ( item: any, field: NormalizedField< any > ) => {
-				if ( field?.elements ) {
-					const value = field.getValue( { item } );
-					const validValues = field?.elements?.map(
-						( f ) => f.value
-					);
-					if ( ! validValues.includes( value ) ) {
-						return __( 'Value must be one of the elements.' );
-					}
-				}
-
-				return null;
-			},
+			elements: true,
+			custom: () => null,
 		},
 		Edit: null,
 		render: ( { item, field }: DataViewRenderFieldProps< Item > ) => {
-			return field.elements
-				? renderFromElements( { item, field } )
-				: field.getValue( { item } );
+			return field.hasElements ? (
+				<RenderFromElements item={ item } field={ field } />
+			) : (
+				field.getValue( { item } )
+			);
 		},
 		enableSorting: true,
 		filterBy: {

package/src/field-types/integer.tsx

@@ -12,7 +12,7 @@ import type {
 	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_NOT,
@@ -34,6 +34,7 @@ function sort( a: any, b: any, direction: SortDirection ) {
 export default {
 	sort,
 	isValid: {
+		elements: true,
 		custom: ( item: any, field: NormalizedField< any > ) => {
 			const value = field.getValue( { item } );
 			if (
@@ -43,21 +44,16 @@ export default {
 				return __( 'Value must be an integer.' );
 			}
 
-			if ( field?.elements ) {
-				const validValues = field.elements.map( ( f ) => f.value );
-				if ( ! validValues.includes( Number( value ) ) ) {
-					return __( 'Value must be one of the elements.' );
-				}
-			}
-
 			return null;
 		},
 	},
 	Edit: 'integer',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/media.tsx

@@ -1,12 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type { NormalizedField, FieldTypeDefinition } from '../types';
+import type { FieldTypeDefinition } from '../types';
 
 function sort() {
 	return 0;
@@ -15,17 +10,8 @@ function sort() {
 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;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: null,
 	render: () => null,

package/src/field-types/number.tsx

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	NormalizedField,
+	FieldTypeDefinition,
+} from '../types';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_BETWEEN,
+} from '../constants';
+import RenderFromElements from './utils/render-from-elements';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return direction === 'asc' ? a - b : b - a;
+}
+
+function isEmpty( value: unknown ): value is '' | undefined | null {
+	return value === '' || value === undefined || value === null;
+}
+
+export default {
+	sort,
+	isValid: {
+		elements: true,
+		custom: ( item: any, field: NormalizedField< any > ) => {
+			const value = field.getValue( { item } );
+
+			if ( ! isEmpty( value ) && ! Number.isFinite( value ) ) {
+				return __( 'Value must be a number.' );
+			}
+
+			return null;
+		},
+	},
+	Edit: 'number',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		if ( field.hasElements ) {
+			<RenderFromElements item={ item } field={ field } />;
+		}
+
+		const value = field.getValue( { item } );
+		if ( ! [ null, undefined ].includes( value ) ) {
+			return Number( value ).toFixed( 2 );
+		}
+
+		return null;
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+		],
+		validOperators: [
+			// Single-selection
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+			// Multiple-selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;

package/src/field-types/password.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 function sort( valueA: any, valueB: any, direction: SortDirection ) {
@@ -23,23 +17,16 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 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;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'password',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: '••••••••';
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			'••••••••'
+		);
 	},
 	enableSorting: false,
 	filterBy: false,

package/src/field-types/telephone.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_IS,
 	OPERATOR_IS_ALL,
@@ -34,23 +28,16 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 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;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'telephone',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {

package/src/field-types/text.tsx

@@ -1,18 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import type {
 	DataViewRenderFieldProps,
 	SortDirection,
-	NormalizedField,
 	FieldTypeDefinition,
 } from '../types';
-import { renderFromElements } from '../utils';
+import RenderFromElements from './utils/render-from-elements';
 import {
 	OPERATOR_CONTAINS,
 	OPERATOR_IS,
@@ -34,23 +28,16 @@ function sort( valueA: any, valueB: any, direction: SortDirection ) {
 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;
-		},
+		elements: true,
+		custom: () => null,
 	},
 	Edit: 'text',
 	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
-		return field.elements
-			? renderFromElements( { item, field } )
-			: field.getValue( { item } );
+		return field.hasElements ? (
+			<RenderFromElements item={ item } field={ field } />
+		) : (
+			field.getValue( { item } )
+		);
 	},
 	enableSorting: true,
 	filterBy: {