@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.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-fields.ts

@@ -37,6 +37,22 @@ const getValueFromId =
 		return value;
 	};
 
+export const setValueFromId =
+	( id: string ) =>
+	( { value }: { value: any } ) => {
+		const path = id.split( '.' );
+		const result: any = {};
+		let current = result;
+
+		for ( const segment of path.slice( 0, -1 ) ) {
+			current[ segment ] = {};
+			current = current[ segment ];
+		}
+
+		current[ path.at( -1 )! ] = value;
+		return result;
+	};
+
 function getFilterBy< Item >(
 	field: Field< Item >,
 	fieldTypeDefinition: FieldTypeDefinition< Item >
@@ -128,6 +144,7 @@ export function normalizeFields< Item >(
 			field.type
 		);
 		const getValue = field.getValue || getValueFromId( field.id );
+		const setValue = field.setValue || setValueFromId( field.id );
 
 		const sort =
 			field.sort ??
@@ -166,6 +183,7 @@ export function normalizeFields< Item >(
 			label: field.label || field.id,
 			header: field.header || field.label || field.id,
 			getValue,
+			setValue,
 			render,
 			sort,
 			isValid,

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 ),
 				} );
 			}
 		} );