@wordpress/dataviews 2.2.0 → 3.0.0

package/src/reset-filters.tsx

@@ -33,7 +33,7 @@ export default function ResetFilter( {
 	return (
 		<Button
 			disabled={ isDisabled }
-			__experimentalIsFocusable
+			accessibleWhenDisabled
 			size="compact"
 			variant="tertiary"
 			className="dataviews-filters__reset-button"

package/src/search-widget.tsx

@@ -93,7 +93,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 		// so the first item is not selected, since the focus is on the operators control.
 		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
 	} );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( f ) => f.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
@@ -130,7 +130,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 							onClick={ () => {
 								const newFilters = currentFilter
 									? [
-											...view.filters.map(
+											...( view.filters ?? [] ).map(
 												( _filter ) => {
 													if (
 														_filter.field ===
@@ -154,7 +154,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 											),
 									  ]
 									: [
-											...view.filters,
+											...( view.filters ?? [] ),
 											{
 												field: filter.field,
 												operator: filter.operators[ 0 ],
@@ -201,7 +201,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
-	const currentFilter = view.filters.find(
+	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
 	);
 	const currentValue = getCurrentValue( filter, currentFilter );
@@ -218,7 +218,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter
 					? [
-							...view.filters.map( ( _filter ) => {
+							...( view.filters ?? [] ).map( ( _filter ) => {
 								if ( _filter.field === filter.field ) {
 									return {
 										..._filter,
@@ -232,7 +232,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							} ),
 					  ]
 					: [
-							...view.filters,
+							...( view.filters ?? [] ),
 							{
 								field: filter.field,
 								operator: filter.operators[ 0 ],

package/src/single-selection-checkbox.tsx

@@ -7,39 +7,38 @@ import { CheckboxControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import type { Field, AnyItem } from './types';
+import type { Field } from './types';
+import type { SetSelection } from './private-types';
 
-interface SingleSelectionCheckboxProps< Item extends AnyItem > {
+interface SingleSelectionCheckboxProps< Item > {
 	selection: string[];
-	onSelectionChange: ( selection: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	item: Item;
-	data: Item[];
 	getItemId: ( item: Item ) => string;
 	primaryField?: Field< Item >;
 	disabled: boolean;
 }
 
-export default function SingleSelectionCheckbox< Item extends AnyItem >( {
+export default function SingleSelectionCheckbox< Item >( {
 	selection,
 	onSelectionChange,
 	item,
-	data,
 	getItemId,
 	primaryField,
 	disabled,
 }: SingleSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
-	const isSelected = ! disabled && selection.includes( id );
+	const checked = ! disabled && selection.includes( id );
 	let selectionLabel;
 	if ( primaryField?.getValue && item ) {
 		// eslint-disable-next-line @wordpress/valid-sprintf
 		selectionLabel = sprintf(
 			/* translators: %s: item title. */
-			isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			checked ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
 			primaryField.getValue( { item } )
 		);
 	} else {
-		selectionLabel = isSelected
+		selectionLabel = checked
 			? __( 'Select a new item' )
 			: __( 'Deselect item' );
 	}
@@ -49,31 +48,17 @@ export default function SingleSelectionCheckbox< Item extends AnyItem >( {
 			__nextHasNoMarginBottom
 			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
-			checked={ isSelected }
+			checked={ checked }
 			onChange={ () => {
 				if ( disabled ) {
 					return;
 				}
 
-				if ( ! isSelected ) {
-					onSelectionChange(
-						data.filter( ( _item ) => {
-							const itemId = getItemId?.( _item );
-							return (
-								itemId === id || selection.includes( itemId )
-							);
-						} )
-					);
-				} else {
-					onSelectionChange(
-						data.filter( ( _item ) => {
-							const itemId = getItemId?.( _item );
-							return (
-								itemId !== id && selection.includes( itemId )
-							);
-						} )
-					);
-				}
+				onSelectionChange(
+					selection.includes( id )
+						? selection.filter( ( itemId ) => id !== itemId )
+						: [ ...selection, id ]
+				);
 			} }
 		/>
 	);

package/src/stories/fixtures.js

@@ -22,6 +22,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Not a planet',
 		categories: [ 'Space', 'NASA' ],
+		satellites: 0,
 	},
 	{
 		id: 2,
@@ -30,6 +31,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
 		type: 'Not a planet',
 		categories: [ 'Space' ],
+		satellites: 0,
 	},
 	{
 		id: 3,
@@ -38,6 +40,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
 		type: 'Not a planet',
 		categories: [ 'NASA' ],
+		satellites: 0,
 	},
 	{
 		id: 4,
@@ -46,6 +49,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 14,
 	},
 	{
 		id: 5,
@@ -54,6 +58,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 0,
 	},
 	{
 		id: 6,
@@ -62,6 +67,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 0,
 	},
 	{
 		id: 7,
@@ -70,6 +76,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 1,
 	},
 	{
 		id: 8,
@@ -78,6 +85,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 2,
 	},
 	{
 		id: 9,
@@ -86,6 +94,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 95,
 	},
 	{
 		id: 10,
@@ -94,6 +103,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 146,
 	},
 	{
 		id: 11,
@@ -102,6 +112,7 @@ export const data = [
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
 		categories: [ 'Space', 'Ice giant', 'Solar system' ],
+		satellites: 28,
 	},
 ];
 
@@ -110,7 +121,7 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	hiddenFields: [ 'image', 'type' ],
+	fields: [ 'title', 'description', 'categories' ],
 	layout: {},
 	filters: [],
 };
@@ -178,6 +189,11 @@ export const fields = [
 			{ value: 'Gas giant', label: 'Gas giant' },
 		],
 	},
+	{
+		header: 'Satellites',
+		id: 'satellites',
+		enableSorting: true,
+	},
 	{
 		header: 'Description',
 		id: 'description',

package/src/stories/index.story.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,36 +17,11 @@ const meta = {
 };
 export default meta;
 
-const defaultConfigPerViewType = {
-	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
-	},
-	[ LAYOUT_GRID ]: {
-		mediaField: 'image',
-		primaryField: 'title',
-	},
-};
-
 export const Default = ( props ) => {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-			}
-
-			setView( newView );
-		},
-		[ view.type, setView ]
-	);
 	return (
 		<DataViews
 			{ ...props }
@@ -54,11 +29,23 @@ export const Default = ( props ) => {
 			data={ shownData }
 			view={ view }
 			fields={ fields }
-			onChangeView={ onChangeView }
+			onChangeView={ setView }
 		/>
 	);
 };
 Default.args = {
 	actions,
-	supportedLayouts: [ LAYOUT_TABLE, LAYOUT_GRID ],
+	defaultLayouts: {
+		[ LAYOUT_TABLE ]: {
+			layout: {
+				primaryField: 'title',
+			},
+		},
+		[ LAYOUT_GRID ]: {
+			layout: {
+				mediaField: 'image',
+				primaryField: 'title',
+			},
+		},
+	},
 };

package/src/style.scss

@@ -106,15 +106,6 @@
 			gap: $grid-unit-05;
 		}
 
-		th,
-		td {
-			&:first-child,
-			&:last-child {
-				transition: padding ease-out 0.1s;
-				@include reduce-motion("transition");
-			}
-		}
-
 		td:first-child,
 		th:first-child {
 			padding-left: $grid-unit-60;
@@ -191,10 +182,14 @@
 			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
 			padding-top: $grid-unit-10;
 			padding-bottom: $grid-unit-10;
+			padding-left: $grid-unit-15;
 			font-size: 11px;
 			text-transform: uppercase;
 			font-weight: 500;
-			padding-left: $grid-unit-05;
+
+			&:has(.dataviews-view-table-header-button):not(:first-child) {
+				padding-left: $grid-unit-05;
+			}
 		}
 	}
 	tbody {
@@ -259,7 +254,6 @@
 	color: $gray-700;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	display: block;
 	width: 100%;
 
 	a {
@@ -328,11 +322,6 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
-
-			.page-pages-preview-field__button::after {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			}
 		}
 	}
 
@@ -342,7 +331,6 @@
 		aspect-ratio: 1/1;
 		background-color: $gray-100;
 		border-radius: $grid-unit-05;
-		overflow: hidden;
 		position: relative;
 
 		img {
@@ -444,7 +432,7 @@
 		&.is-hovered,
 		&:focus-within {
 			.dataviews-view-list__item-actions {
-				padding-right: $grid-unit-40;
+				padding-right: $grid-unit-30;
 
 				.components-button {
 					opacity: 1;
@@ -559,7 +547,7 @@
 		}
 
 		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 5;
+			line-height: $grid-unit-05 * 6;
 			display: inline-flex;
 		}
 	}
@@ -756,10 +744,10 @@
 		border-radius: $grid-unit-20;
 		border: 1px solid transparent;
 		cursor: pointer;
-		padding: 0 $grid-unit-15;
-		height: $grid-unit-40;
+		padding: $grid-unit-05 $grid-unit-15;
+		min-height: $grid-unit-40;
 		background: $gray-100;
-		color: $gray-700;
+		color: $gray-800;
 		position: relative;
 		display: flex;
 		align-items: center;

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

@@ -233,7 +233,7 @@ describe( 'filters', () => {
 } );
 
 describe( 'sorting', () => {
-	it( 'should sort', () => {
+	it( 'should sort by string', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
@@ -252,6 +252,21 @@ describe( 'sorting', () => {
 		expect( result[ 0 ].title ).toBe( 'Uranus' );
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
+
+	it( 'should sort by number', () => {
+		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' );
+	} );
 } );
 
 describe( 'pagination', () => {

package/src/types.ts

@@ -3,6 +3,11 @@
  */
 import type { ReactElement, ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { SetSelection } from './private-types';
+
 export type SortDirection = 'asc' | 'desc';
 
 /**
@@ -37,12 +42,19 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type AnyItem = Record< string, any >;
+export type ItemRecord = Record< string, unknown >;
+
+export type FieldType = 'text';
 
 /**
  * A dataview field for a specific property of a data type.
  */
-export interface Field< Item extends AnyItem > {
+export type Field< Item > = {
+	/**
+	 * Type of the fields.
+	 */
+	type?: FieldType;
+
 	/**
 	 * The unique identifier of the field.
 	 */
@@ -54,10 +66,9 @@ export interface Field< Item extends AnyItem > {
 	header?: string;
 
 	/**
-	 * Callback used to retrieve the value of the field from the item.
-	 * Defaults to `item[ field.id ]`.
+	 * Placeholder for the field.
 	 */
-	getValue?: ( args: { item: Item } ) => any;
+	placeholder?: string;
 
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
@@ -103,17 +114,41 @@ export interface Field< Item extends AnyItem > {
 	 * Filter config for the field.
 	 */
 	filterBy?: FilterByConfig | undefined;
-}
-
-export type NormalizedField< Item extends AnyItem > = Field< Item > &
-	Required< Pick< Field< Item >, 'header' | 'getValue' | 'render' > >;
+} & ( Item extends ItemRecord
+	? {
+			/**
+			 * Callback used to retrieve the value of the field from the item.
+			 * Defaults to `item[ field.id ]`.
+			 */
+			getValue?: ( args: { item: Item } ) => any;
+	  }
+	: {
+			/**
+			 * Callback used to retrieve the value of the field from the item.
+			 * Defaults to `item[ field.id ]`.
+			 */
+			getValue: ( args: { item: Item } ) => any;
+	  } );
+
+export type NormalizedField< Item > = Field< Item > & {
+	header: string;
+	getValue: ( args: { item: Item } ) => any;
+	render: ( args: { item: Item } ) => ReactNode;
+};
 
 /**
  * A collection of dataview fields for a data type.
  */
-export type Fields< Item extends AnyItem > = Field< Item >[];
+export type Fields< Item > = Field< Item >[];
 
-export type Data< Item extends AnyItem > = Item[];
+export type Data< Item > = Item[];
+
+/**
+ * The form configuration.
+ */
+export type Form = {
+	visibleFields?: string[];
+};
 
 /**
  * The filters applied to the dataset.
@@ -186,7 +221,7 @@ interface ViewBase {
 	/**
 	 * The filters to apply.
 	 */
-	filters: Filter[];
+	filters?: Filter[];
 
 	/**
 	 * The sorting configuration.
@@ -216,13 +251,13 @@ interface ViewBase {
 	/**
 	 * The hidden fields.
 	 */
-	hiddenFields: string[];
+	fields?: string[];
 }
 
 export interface ViewTable extends ViewBase {
 	type: 'table';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -238,7 +273,7 @@ export interface ViewTable extends ViewBase {
 export interface ViewList extends ViewBase {
 	type: 'list';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -254,7 +289,7 @@ export interface ViewList extends ViewBase {
 export interface ViewGrid extends ViewBase {
 	type: 'grid';
 
-	layout: {
+	layout?: {
 		/**
 		 * The field to use as the primary field.
 		 */
@@ -279,7 +314,7 @@ export interface ViewGrid extends ViewBase {
 
 export type View = ViewList | ViewGrid | ViewTable;
 
-interface ActionBase< Item extends AnyItem > {
+interface ActionBase< Item > {
 	/**
 	 * The unique identifier of the action.
 	 */
@@ -325,8 +360,7 @@ interface ActionBase< Item extends AnyItem > {
 	supportsBulk?: boolean;
 }
 
-export interface ActionModal< Item extends AnyItem >
-	extends ActionBase< Item > {
+export interface ActionModal< Item > extends ActionBase< Item > {
 	/**
 	 * Modal to render when the action is triggered.
 	 */
@@ -351,8 +385,7 @@ export interface ActionModal< Item extends AnyItem >
 	modalHeader?: string;
 }
 
-export interface ActionButton< Item extends AnyItem >
-	extends ActionBase< AnyItem > {
+export interface ActionButton< Item > extends ActionBase< Item > {
 	/**
 	 * The callback to execute when the action is triggered.
 	 */
@@ -365,39 +398,40 @@ export interface ActionButton< Item extends AnyItem >
 	) => void;
 }
 
-export type Action< Item extends AnyItem > =
-	| ActionModal< Item >
-	| ActionButton< Item >;
+export type Action< Item > = ActionModal< Item > | ActionButton< Item >;
 
-export interface ViewBaseProps< Item extends AnyItem > {
+export interface ViewBaseProps< Item > {
 	actions: Action< Item >[];
 	data: Item[];
 	fields: NormalizedField< Item >[];
 	getItemId: ( item: Item ) => string;
 	isLoading?: boolean;
-	onChangeView( view: View ): void;
-	onSelectionChange: ( items: Item[] ) => void;
+	onChangeView: ( view: View ) => void;
+	onSelectionChange: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
 }
 
-export interface ViewTableProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
 	view: ViewTable;
 }
 
-export interface ViewListProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewListProps< Item > extends ViewBaseProps< Item > {
 	view: ViewList;
 }
 
-export interface ViewGridProps< Item extends AnyItem >
-	extends ViewBaseProps< Item > {
+export interface ViewGridProps< Item > extends ViewBaseProps< Item > {
 	view: ViewGrid;
 }
 
-export type ViewProps< Item extends AnyItem > =
+export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
+
+export interface SupportedLayouts {
+	list?: Omit< ViewList, 'type' >;
+	grid?: Omit< ViewGrid, 'type' >;
+	table?: Omit< ViewTable, 'type' >;
+}

package/src/utils.ts

@@ -8,11 +8,9 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 } from './constants';
-import type { AnyItem, NormalizedField } from './types';
+import type { NormalizedField } from './types';
 
-export function sanitizeOperators< Item extends AnyItem >(
-	field: NormalizedField< Item >
-) {
+export function sanitizeOperators< Item >( field: NormalizedField< Item > ) {
 	let operators = field.filterBy?.operators;
 
 	// Assign default values.