@wordpress/dataviews 4.0.0 → 4.2.0

package/src/{layouts → dataviews-layouts}/grid/index.tsx

@@ -84,18 +84,18 @@ function GridItem< Item >( {
 			<div className="dataviews-view-grid__media">
 				{ renderedMediaField }
 			</div>
+			<SingleSelectionCheckbox
+				item={ item }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				getItemId={ getItemId }
+				primaryField={ primaryField }
+				disabled={ ! hasBulkAction }
+			/>
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<SingleSelectionCheckbox
-					item={ item }
-					selection={ selection }
-					onChangeSelection={ onChangeSelection }
-					getItemId={ getItemId }
-					primaryField={ primaryField }
-					disabled={ ! hasBulkAction }
-				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ renderedPrimaryField }
 				</HStack>
@@ -145,7 +145,7 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.label }
+										{ field.header }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"

package/src/{layouts → dataviews-layouts}/grid/style.scss

@@ -9,6 +9,7 @@
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
+		position: relative;
 
 		.dataviews-view-grid__title-actions {
 			padding: $grid-unit-10 0 $grid-unit-05;
@@ -22,6 +23,11 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.dataviews-view-grid__media::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
 		}
 	}
 
@@ -61,10 +67,20 @@
 			padding: 0 0 $grid-unit-15;
 		}
 
+		.dataviews-view-grid__field-value:not(:empty) {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			padding-top: math.div($grid-unit-05, 2);
+		}
+
 		.dataviews-view-grid__field {
 			align-items: flex-start;
 			min-height: $grid-unit-30;
 
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
+			}
+
 			&:not(.is-column) {
 				align-items: center;
 
@@ -130,11 +146,20 @@
 	}
 }
 
-.dataviews-density-picker__range-control {
-	width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
 	display: none;
 }
+
+.dataviews-view-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+}
+
+.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}

package/src/{layouts → dataviews-layouts}/list/index.tsx

@@ -2,6 +2,9 @@
  * External dependencies
  */
 import clsx from 'clsx';
+// TODO: use the @wordpress/components one once public
+// eslint-disable-next-line no-restricted-imports
+import { useStoreState } from '@ariakit/react';
 // Import CompositeStore type, which is not exported from @wordpress/components.
 // eslint-disable-next-line no-restricted-imports
 import type { CompositeStore } from '@ariakit/react';
@@ -358,10 +361,11 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 
 	const store = useCompositeStore( {
 		defaultActiveId: getItemDomId( selectedItem ),
-	} );
+	} ) as CompositeStore; // TODO, remove once composite APIs are public
 
 	// Manage focused item, when the active one is removed from the list.
-	const isActiveIdInList = store.useState(
+	const isActiveIdInList = useStoreState(
+		store,
 		( state: { items: any[]; activeId: any } ) =>
 			state.items.some(
 				( item: { id: any } ) => item.id === state.activeId

package/src/{layouts → dataviews-layouts}/list/style.scss

@@ -179,7 +179,10 @@
 		}
 
 		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 6;
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			display: flex;
+			align-items: center;
 		}
 	}
 

package/src/{layouts → dataviews-layouts}/table/column-header-menu.tsx

@@ -72,7 +72,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	);
 	const index = view.fields?.indexOf( fieldId ) as number;
 	if ( !! combinedField ) {
-		return combinedField.label;
+		return combinedField.header || combinedField.label;
 	}
 	const field = fields.find( ( f ) => f.id === fieldId );
 	if ( ! field ) {
@@ -91,9 +91,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		!! field.elements?.length &&
 		!! operators.length &&
 		! field.filterBy?.isPrimary;
-	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
-		return field.label;
-	}
+
 	return (
 		<DropdownMenu
 			align="start"
@@ -104,7 +102,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.label }
+					{ field.header }
 					{ view.sort && isSorted && (
 						<span aria-hidden="true">
 							{ sortArrows[ view.sort.direction ] }
@@ -249,7 +247,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							} }
 						>
 							<DropdownMenuItemLabel>
-								{ __( 'Hide' ) }
+								{ __( 'Hide column' ) }
 							</DropdownMenuItemLabel>
 						</DropdownMenuItem>
 					) }

package/src/field-types/datetime.tsx

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const timeA = new Date( a ).getTime();
+	const timeB = new Date( b ).getTime();
+
+	return direction === 'asc' ? timeA - timeB : timeB - timeA;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'datetime',
+};

package/src/field-types/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import type { FieldType, SortDirection, ValidationContext } from '../types';
+import { default as integer } from './integer';
+import { default as text } from './text';
+import { default as datetime } from './datetime';
+
+/**
+ *
+ * @param {FieldType} type The field type definition to get.
+ *
+ * @return A field type definition.
+ */
+export default function getFieldTypeDefinition( type?: FieldType ) {
+	if ( 'integer' === type ) {
+		return integer;
+	}
+
+	if ( 'text' === type ) {
+		return text;
+	}
+
+	if ( 'datetime' === type ) {
+		return datetime;
+	}
+
+	return {
+		sort: ( a: any, b: any, direction: SortDirection ) => {
+			if ( typeof a === 'number' && typeof b === 'number' ) {
+				return direction === 'asc' ? a - b : b - a;
+			}
+
+			return direction === 'asc'
+				? a.localeCompare( b )
+				: b.localeCompare( a );
+		},
+		isValid: ( value: any, context?: ValidationContext ) => {
+			if ( context?.elements ) {
+				const validValues = context?.elements?.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return false;
+				}
+			}
+
+			return true;
+		},
+		Edit: () => null,
+	};
+}

package/src/field-types/integer.tsx

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return direction === 'asc' ? a - b : b - a;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	// TODO: this implicitely means the value is required.
+	if ( value === '' ) {
+		return false;
+	}
+
+	if ( ! Number.isInteger( Number( value ) ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( Number( value ) ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'integer',
+};

package/src/field-types/text.tsx

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements?.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'text',
+};

package/src/filter-and-sort-data-view.ts

@@ -140,21 +140,7 @@ export function filterSortAndPaginate< Item >(
 		} );
 		if ( fieldToSort ) {
 			filteredData.sort( ( a, b ) => {
-				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-
-				if (
-					typeof valueA === 'number' &&
-					typeof valueB === 'number'
-				) {
-					return view.sort?.direction === 'asc'
-						? valueA - valueB
-						: valueB - valueA;
-				}
-
-				return view.sort?.direction === 'asc'
-					? valueA.localeCompare( valueB )
-					: valueB.localeCompare( valueA );
+				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
 			} );
 		}
 	}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { default as DataViews } from './components/dataviews';
 export { default as DataForm } from './components/dataform';
-export { VIEW_LAYOUTS } from './layouts';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
+export { isItemValid } from './validation';

package/src/normalize-fields.ts

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import type { Field, NormalizedField, ItemRecord } from './types';
+import getFieldTypeDefinition from './field-types';
+import type { Field, NormalizedField } from './types';
+import { getControl } from './dataform-controls';
 
 /**
  * Apply default values and normalize the fields config.
@@ -13,15 +15,52 @@ export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
+		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
+
 		const getValue =
-			field.getValue ||
-			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
+			field.getValue || ( ( { item } ) => ( item as any )[ field.id ] );
+
+		const sort =
+			field.sort ??
+			function sort( a, b, direction ) {
+				return fieldTypeDefinition.sort(
+					getValue( { item: a } ),
+					getValue( { item: b } ),
+					direction
+				);
+			};
+
+		const isValid =
+			field.isValid ??
+			function isValid( item, context ) {
+				return fieldTypeDefinition.isValid(
+					getValue( { item } ),
+					context
+				);
+			};
+
+		const Edit = getControl( field, fieldTypeDefinition );
+
+		const renderFromElements = ( { item }: { item: Item } ) => {
+			const value = getValue( { item } );
+			return (
+				field?.elements?.find( ( element ) => element.value === value )
+					?.label || getValue( { item } )
+			);
+		};
+
+		const render =
+			field.render || ( field.elements ? renderFromElements : getValue );
 
 		return {
 			...field,
 			label: field.label || field.id,
+			header: field.header || field.label || field.id,
 			getValue,
-			render: field.render || getValue,
+			render,
+			sort,
+			isValid,
+			Edit,
 		};
 	} );
 }

package/src/style.scss

@@ -5,7 +5,11 @@
 @import "./components/dataviews-pagination/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
+@import "./components/dataviews-view-config/style.scss";
 
-@import "./layouts/grid/style.scss";
-@import "./layouts/list/style.scss";
-@import "./layouts/table/style.scss";
+@import "./dataviews-layouts/grid/style.scss";
+@import "./dataviews-layouts/list/style.scss";
+@import "./dataviews-layouts/table/style.scss";
+
+@import "./dataform-controls/style.scss";
+@import "./dataforms-layouts/panel/style.scss";

package/src/test/filter-and-sort-data-view.js

@@ -233,7 +233,22 @@ describe( 'filters', () => {
 } );
 
 describe( 'sorting', () => {
-	it( 'should sort by string', () => {
+	it( 'should sort integer field types', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'satellites', direction: 'desc' },
+			},
+			fields
+		);
+
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should sort text field types', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
@@ -253,13 +268,46 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
 
-	it( 'should sort by number', () => {
+	it( 'should sort datetime field types', () => {
+		const { data: resultDesc } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'date', direction: 'desc' },
+			},
+			fields
+		);
+		expect( resultDesc ).toHaveLength( 11 );
+		expect( resultDesc[ 0 ].title ).toBe( 'NASA' );
+		expect( resultDesc[ 1 ].title ).toBe( 'Earth' );
+		expect( resultDesc[ 9 ].title ).toBe( 'Space' );
+		expect( resultDesc[ 10 ].title ).toBe( 'Jupiter' );
+
+		const { data: resultAsc } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'date', direction: 'asc' },
+			},
+			fields
+		);
+		expect( resultAsc ).toHaveLength( 11 );
+		expect( resultAsc[ 0 ].title ).toBe( 'Jupiter' );
+		expect( resultAsc[ 1 ].title ).toBe( 'Space' );
+		expect( resultAsc[ 9 ].title ).toBe( 'Earth' );
+		expect( resultAsc[ 10 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should sort untyped fields if the value is a number', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
 				sort: { field: 'satellites', direction: 'desc' },
 			},
-			fields
+			// Remove type information for satellites field to test sorting untyped fields.
+			fields.map( ( field ) =>
+				field.id === 'satellites'
+					? { ...field, type: undefined }
+					: field
+			)
 		);
 
 		expect( result ).toHaveLength( 11 );
@@ -267,6 +315,29 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Jupiter' );
 		expect( result[ 2 ].title ).toBe( 'Uranus' );
 	} );
+
+	it( 'should sort untyped fields if the value is string', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			// Remove type information for the title field to test sorting untyped fields.
+			fields.map( ( field ) =>
+				field.id === 'title' ? { ...field, type: undefined } : field
+			)
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
 } );
 
 describe( 'pagination', () => {

package/src/test/validation.ts

@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { isItemValid } from '../validation';
+import type { Field } from '../types';
+
+describe( 'validation', () => {
+	it( 'fields not visible in form are not validated', () => {
+		const item = { id: 1, valid_order: 2, invalid_order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'valid_order',
+				type: 'integer',
+			},
+			{
+				id: 'invalid_order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'valid_order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field is valid if value is integer', () => {
+		const item = { id: 1, order: 2, title: 'hi' };
+		const fields: Field< {} >[] = [
+			{
+				type: 'integer',
+				id: 'order',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field is invalid if value is not integer', () => {
+		const item = { id: 1, order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field is invalid if value is empty', () => {
+		const item = { id: 1, order: '' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 3 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Jane' },
+					{ value: 2, label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'text field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 'not-in-elements' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				type: 'text',
+				elements: [
+					{ value: 'jane', label: 'Jane' },
+					{ value: 'john', label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'untyped field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 'not-in-elements' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				elements: [
+					{ value: 'jane', label: 'Jane' },
+					{ value: 'john', label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'fields can provide its own isValid function', () => {
+		const item = { id: 1, order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+				elements: [
+					{ value: 'a', label: 'A' },
+					{ value: 'b', label: 'B' },
+				],
+				isValid: () => true, // Overrides the validation provided for integer types.
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+} );