@wordpress/dataviews 2.1.0 → 3.0.0

package/src/item-actions.tsx

@@ -15,12 +15,13 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
+import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import type { Action, ActionModal as ActionModalType, AnyItem } from './types';
+import type { Action, ActionModal as ActionModalType } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -30,42 +31,41 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-export interface ActionTriggerProps< Item extends AnyItem > {
+export interface ActionTriggerProps< Item > {
 	action: Action< Item >;
 	onClick: MouseEventHandler;
 	isBusy?: boolean;
 	items: Item[];
 }
 
-interface ActionModalProps< Item extends AnyItem > {
+interface ActionModalProps< Item > {
 	action: ActionModalType< Item >;
 	items: Item[];
 	closeModal?: () => void;
 }
 
-interface ActionWithModalProps< Item extends AnyItem >
-	extends ActionModalProps< Item > {
+interface ActionWithModalProps< Item > extends ActionModalProps< Item > {
 	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
 	isBusy?: boolean;
 }
 
-interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
+interface ActionsDropdownMenuGroupProps< Item > {
 	actions: Action< Item >[];
 	item: Item;
 }
 
-interface ItemActionsProps< Item extends AnyItem > {
+interface ItemActionsProps< Item > {
 	item: Item;
 	actions: Action< Item >[];
 	isCompact?: boolean;
 }
 
-interface CompactItemActionsProps< Item extends AnyItem > {
+interface CompactItemActionsProps< Item > {
 	item: Item;
 	actions: Action< Item >[];
 }
 
-function ButtonTrigger< Item extends AnyItem >( {
+function ButtonTrigger< Item >( {
 	action,
 	onClick,
 	items,
@@ -83,7 +83,7 @@ function ButtonTrigger< Item extends AnyItem >( {
 	);
 }
 
-function DropdownMenuItemTrigger< Item extends AnyItem >( {
+function DropdownMenuItemTrigger< Item >( {
 	action,
 	onClick,
 	items,
@@ -100,7 +100,7 @@ function DropdownMenuItemTrigger< Item extends AnyItem >( {
 	);
 }
 
-export function ActionModal< Item extends AnyItem >( {
+export function ActionModal< Item >( {
 	action,
 	items,
 	closeModal,
@@ -112,21 +112,18 @@ export function ActionModal< Item extends AnyItem >( {
 			title={ action.modalHeader || label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal ?? ( () => {} ) }
+			focusOnMount="firstContentElement"
+			size="small"
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
 				action.id
 			) }` }
 		>
-			<action.RenderModal
-				items={ items }
-				closeModal={ closeModal }
-				onActionStart={ action.onActionStart }
-				onActionPerformed={ action.onActionPerformed }
-			/>
+			<action.RenderModal items={ items } closeModal={ closeModal } />
 		</Modal>
 	);
 }
 
-export function ActionWithModal< Item extends AnyItem >( {
+export function ActionWithModal< Item >( {
 	action,
 	items,
 	ActionTrigger,
@@ -155,10 +152,11 @@ export function ActionWithModal< Item extends AnyItem >( {
 	);
 }
 
-export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
+export function ActionsDropdownMenuGroup< Item >( {
 	actions,
 	item,
 }: ActionsDropdownMenuGroupProps< Item > ) {
+	const registry = useRegistry();
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {
@@ -176,7 +174,9 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
 					<DropdownMenuItemTrigger
 						key={ action.id }
 						action={ action }
-						onClick={ () => action.callback( [ item ] ) }
+						onClick={ () => {
+							action.callback( [ item ], { registry } );
+						} }
 						items={ [ item ] }
 					/>
 				);
@@ -185,11 +185,12 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
 	);
 }
 
-export default function ItemActions< Item extends AnyItem >( {
+export default function ItemActions< Item >( {
 	item,
 	actions,
 	isCompact,
 }: ItemActionsProps< Item > ) {
+	const registry = useRegistry();
 	const { primaryActions, eligibleActions } = useMemo( () => {
 		// If an action is eligible for all items, doesn't need
 		// to provide the `isEligible` function.
@@ -233,7 +234,9 @@ export default function ItemActions< Item extends AnyItem >( {
 						<ButtonTrigger
 							key={ action.id }
 							action={ action }
-							onClick={ () => action.callback( [ item ] ) }
+							onClick={ () => {
+								action.callback( [ item ], { registry } );
+							} }
 							items={ [ item ] }
 						/>
 					);
@@ -243,7 +246,7 @@ export default function ItemActions< Item extends AnyItem >( {
 	);
 }
 
-function CompactItemActions< Item extends AnyItem >( {
+function CompactItemActions< Item >( {
 	item,
 	actions,
 }: CompactItemActionsProps< Item > ) {
@@ -254,7 +257,7 @@ function CompactItemActions< Item extends AnyItem >( {
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					disabled={ ! actions.length }
 					className="dataviews-all-actions-button"
 				/>

package/src/lock-unlock.ts

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/dataviews'
 	);

package/src/normalize-fields.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { Field, AnyItem, NormalizedField } from './types';
+import type { Field, NormalizedField, ItemRecord } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -9,11 +9,13 @@ import type { Field, AnyItem, NormalizedField } from './types';
  * @param fields Fields config.
  * @return Normalized fields config.
  */
-export function normalizeFields< Item extends AnyItem >(
+export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
-		const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
+		const getValue =
+			field.getValue ||
+			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
 
 		return {
 			...field,

package/src/pagination.tsx

@@ -90,7 +90,7 @@ const Pagination = memo( function Pagination( {
 							} )
 						}
 						disabled={ currentPage === 1 }
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
 						icon={ chevronLeft }
 						showTooltip
@@ -102,7 +102,7 @@ const Pagination = memo( function Pagination( {
 							onChangeView( { ...view, page: currentPage + 1 } )
 						}
 						disabled={ currentPage >= totalPages }
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
 						icon={ chevronRight }
 						showTooltip

package/src/private-types.tsx

@@ -0,0 +1,2 @@
+export type SelectionOrUpdater = string[] | ( ( prev: string[] ) => string[] );
+export type SetSelection = ( selection: SelectionOrUpdater ) => void;

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 = 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', () => {