@wordpress/dataviews 4.1.0 → 4.2.0

package/src/dataform-controls/select.tsx

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Select< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: any ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const elements = [
+		/*
+		 * Value can be undefined when:
+		 *
+		 * - the field is not required
+		 * - in bulk editing
+		 *
+		 */
+		{ label: __( 'Select item' ), value: '' },
+		...( field?.elements ?? [] ),
+	];
+
+	return (
+		<SelectControl
+			label={ label }
+			value={ value }
+			options={ elements }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

package/src/dataform-controls/style.scss

@@ -0,0 +1,4 @@
+.dataviews-controls__datetime {
+	border: none;
+	padding: 0;
+}

package/src/dataform-controls/text.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Text< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

package/src/dataforms-layouts/panel/index.tsx

@@ -17,7 +17,7 @@ import { closeSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps, NormalizedField } from '../../types';
+import type { DataFormProps, NormalizedField, Field } from '../../types';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -142,7 +142,11 @@ export default function FormPanel< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+				( form.fields ?? [] )
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
 			),
 		[ fields, form.fields ]
 	);

package/src/dataforms-layouts/regular/index.tsx

@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps } from '../../types';
+import type { DataFormProps, Field } from '../../types';
 
 export default function FormRegular< Item >( {
 	data,
@@ -19,7 +19,11 @@ export default function FormRegular< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+				( form.fields ?? [] )
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
 			),
 		[ fields, form.fields ]
 	);

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

@@ -1,11 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { RangeControl, Button } from '@wordpress/components';
+import { RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { plus, reset } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 
 const viewportBreaks = {
 	xhuge: { min: 3, max: 6, default: 5 },
@@ -40,21 +39,6 @@ function useViewPortBreakpoint() {
 	return null;
 }
 
-// Value is number from 0 to 100 representing how big an item is in the grid
-// 100 being the biggest and 0 being the smallest.
-// The size is relative to the viewport size, if one a given viewport the
-// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
-// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
-// A value of 75 will mean that the grid will have 4 items in a row.
-function getRangeValue(
-	density: number,
-	breakValues: { min: number; max: number; default: number }
-) {
-	const inverseDensity = breakValues.max - density;
-	const max = breakValues.max - breakValues.min;
-	return Math.round( ( inverseDensity * 100 ) / max );
-}
-
 export default function DensityPicker( {
 	density,
 	setDensity,
@@ -78,59 +62,41 @@ export default function DensityPicker( {
 			return _density;
 		} );
 	}, [ setDensity, viewport ] );
+	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const densityToUse = density || breakValues.default;
+
+	const marks = useMemo(
+		() =>
+			Array.from(
+				{ length: breakValues.max - breakValues.min + 1 },
+				( _, i ) => {
+					return {
+						value: breakValues.min + i,
+					};
+				}
+			),
+		[ breakValues ]
+	);
+
 	if ( ! viewport ) {
 		return null;
 	}
-	const breakValues = viewportBreaks[ viewport ];
-	const densityToUse = density || breakValues.default;
-	const rangeValue = getRangeValue( densityToUse, breakValues );
 
-	const step = 100 / ( breakValues.max - breakValues.min + 1 );
 	return (
-		<>
-			<Button
-				size="compact"
-				icon={ reset }
-				disabled={ rangeValue <= 0 }
-				accessibleWhenDisabled
-				label={ __( 'Decrease size' ) }
-				onClick={ () => {
-					setDensity( densityToUse + 1 );
-				} }
-			/>
-			<RangeControl
-				__nextHasNoMarginBottom
-				showTooltip={ false }
-				className="dataviews-density-picker__range-control"
-				label={ __( 'Item size' ) }
-				hideLabelFromVision
-				value={ rangeValue }
-				min={ 0 }
-				max={ 100 }
-				withInputField={ false }
-				onChange={ ( value = 0 ) => {
-					const inverseValue = 100 - value;
-					setDensity(
-						Math.round(
-							( inverseValue *
-								( breakValues.max - breakValues.min ) ) /
-								100 +
-								breakValues.min
-						)
-					);
-				} }
-				step={ step }
-			/>
-			<Button
-				size="compact"
-				icon={ plus }
-				disabled={ rangeValue >= 100 }
-				accessibleWhenDisabled
-				label={ __( 'Increase size' ) }
-				onClick={ () => {
-					setDensity( densityToUse - 1 );
-				} }
-			/>
-		</>
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			showTooltip={ false }
+			label={ __( 'Preview size' ) }
+			value={ breakValues.max + breakValues.min - densityToUse }
+			marks={ marks }
+			min={ breakValues.min }
+			max={ breakValues.max }
+			withInputField={ false }
+			onChange={ ( value = 0 ) => {
+				setDensity( breakValues.max + breakValues.min - value );
+			} }
+			step={ 1 }
+		/>
 	);
 }

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

@@ -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/dataviews-layouts/grid/style.scss

@@ -146,10 +146,6 @@
 	}
 }
 
-.dataviews-density-picker__range-control {
-	width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
 	display: none;

package/src/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/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 ] }

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

@@ -4,6 +4,7 @@
 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';
 
 /**
  *
@@ -20,6 +21,10 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 		return text;
 	}
 
+	if ( 'datetime' === type ) {
+		return datetime;
+	}
+
 	return {
 		sort: ( a: any, b: any, direction: SortDirection ) => {
 			if ( typeof a === 'number' && typeof b === 'number' ) {

package/src/field-types/integer.tsx

@@ -1,21 +1,7 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalNumberControl as NumberControl,
-	SelectControl,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type {
-	SortDirection,
-	ValidationContext,
-	DataFormControlProps,
-} from '../types';
+import type { SortDirection, ValidationContext } from '../types';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? a - b : b - a;
@@ -41,63 +27,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
-function Edit< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
-	const { id, label, description } = field;
-	const value = field.getValue( { item: data } ) ?? '';
-	const onChangeControl = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
-		[ id, onChange ]
-	);
-
-	if ( field.elements ) {
-		const elements = [
-			/*
-			 * Value can be undefined when:
-			 *
-			 * - the field is not required
-			 * - in bulk editing
-			 *
-			 */
-			{ label: __( 'Select item' ), value: '' },
-			...field.elements,
-		];
-
-		return (
-			<SelectControl
-				label={ label }
-				value={ value }
-				options={ elements }
-				onChange={ onChangeControl }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
-
-	return (
-		<NumberControl
-			label={ label }
-			help={ description }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
-}
-
 export default {
 	sort,
 	isValid,
-	Edit,
+	Edit: 'integer',
 };

package/src/field-types/text.tsx

@@ -1,18 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { SelectControl, TextControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import type {
-	SortDirection,
-	ValidationContext,
-	DataFormControlProps,
-} from '../types';
+import type { SortDirection, ValidationContext } from '../types';
 
 function sort( valueA: any, valueB: any, direction: SortDirection ) {
 	return direction === 'asc'
@@ -31,65 +20,8 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
-function Edit< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-}: DataFormControlProps< Item > ) {
-	const { id, label, placeholder } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
-		[ id, onChange ]
-	);
-
-	if ( field.elements ) {
-		const elements = [
-			/*
-			 * Value can be undefined when:
-			 *
-			 * - the field is not required
-			 * - in bulk editing
-			 *
-			 */
-			{ label: __( 'Select item' ), value: '' },
-			...field.elements,
-		];
-
-		return (
-			<SelectControl
-				label={ label }
-				value={ value }
-				options={ elements }
-				onChange={ onChangeControl }
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
-
-	return (
-		<TextControl
-			label={ label }
-			placeholder={ placeholder }
-			value={ value ?? '' }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
-}
-
 export default {
 	sort,
 	isValid,
-	Edit,
+	Edit: 'text',
 };

package/src/normalize-fields.ts

@@ -3,6 +3,7 @@
  */
 import getFieldTypeDefinition from './field-types';
 import type { Field, NormalizedField } from './types';
+import { getControl } from './dataform-controls';
 
 /**
  * Apply default values and normalize the fields config.
@@ -17,8 +18,7 @@ export function normalizeFields< Item >(
 		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
 
 		const getValue =
-			field.getValue ||
-			( ( { item }: { item: Item } ) => item[ field.id as keyof Item ] );
+			field.getValue || ( ( { item } ) => ( item as any )[ field.id ] );
 
 		const sort =
 			field.sort ??
@@ -39,17 +39,14 @@ export function normalizeFields< Item >(
 				);
 			};
 
-		const Edit = field.Edit || fieldTypeDefinition.Edit;
+		const Edit = getControl( field, fieldTypeDefinition );
 
 		const renderFromElements = ( { item }: { item: Item } ) => {
 			const value = getValue( { item } );
-			const label = field?.elements?.find( ( element ) => {
-				// Intentionally using == here to allow for type coercion.
-				// eslint-disable-next-line eqeqeq
-				return element.value == value;
-			} )?.label;
-
-			return label || value;
+			return (
+				field?.elements?.find( ( element ) => element.value === value )
+					?.label || getValue( { item } )
+			);
 		};
 
 		const render =
@@ -58,6 +55,7 @@ export function normalizeFields< Item >(
 		return {
 			...field,
 			label: field.label || field.id,
+			header: field.header || field.label || field.id,
 			getValue,
 			render,
 			sort,

package/src/style.scss

@@ -11,4 +11,5 @@
 @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

@@ -268,6 +268,34 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
 
+	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,