@wordpress/dataviews 4.1.0 → 4.3.0

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

@@ -25,16 +25,11 @@ import type {
 	NormalizedField,
 	SortDirection,
 	ViewTable as ViewTableType,
+	Operator,
 } from '../../types';
+import { getVisibleFieldIds } from '../index';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 interface HeaderMenuProps< Item > {
 	fieldId: string;
@@ -50,7 +45,7 @@ function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
 		.filter( Boolean )
 		.map( ( child, i ) => (
 			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparator /> }
+				{ i > 0 && <DropdownMenuV2.Separator /> }
 				{ child }
 			</Fragment>
 		) );
@@ -67,35 +62,46 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
+	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const index = visibleFieldIds?.indexOf( fieldId ) as number;
+	const isSorted = view.sort?.field === fieldId;
+	let isHidable = false;
+	let isSortable = false;
+	let canAddFilter = false;
+	let header;
+	let operators: Operator[] = [];
+
 	const combinedField = view.layout?.combinedFields?.find(
 		( f ) => f.id === fieldId
 	);
-	const index = view.fields?.indexOf( fieldId ) as number;
-	if ( !! combinedField ) {
-		return combinedField.label;
-	}
 	const field = fields.find( ( f ) => f.id === fieldId );
-	if ( ! field ) {
-		return null;
-	}
-	const isHidable = field.enableHiding !== false;
-	const isSortable = field.enableSorting !== false;
-	const isSorted = view.sort?.field === field.id;
-	const operators = sanitizeOperators( field );
-	// Filter can be added:
-	// 1. If the field is not already part of a view's filters.
-	// 2. If the field meets the type and operator requirements.
-	// 3. If it's not primary. If it is, it should be already visible.
-	const canAddFilter =
-		! view.filters?.some( ( _filter ) => field.id === _filter.field ) &&
-		!! field.elements?.length &&
-		!! operators.length &&
-		! field.filterBy?.isPrimary;
-	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
-		return field.label;
+
+	if ( ! combinedField ) {
+		if ( ! field ) {
+			// No combined or regular field found.
+			return null;
+		}
+
+		isHidable = field.enableHiding !== false;
+		isSortable = field.enableSorting !== false;
+		header = field.header;
+
+		operators = sanitizeOperators( field );
+		// Filter can be added:
+		// 1. If the field is not already part of a view's filters.
+		// 2. If the field meets the type and operator requirements.
+		// 3. If it's not primary. If it is, it should be already visible.
+		canAddFilter =
+			! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
+			!! field.elements?.length &&
+			!! operators.length &&
+			! field.filterBy?.isPrimary;
+	} else {
+		header = combinedField.header || combinedField.label;
 	}
+
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			align="start"
 			trigger={
 				<Button
@@ -104,7 +110,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.label }
+					{ header }
 					{ view.sort && isSorted && (
 						<span aria-hidden="true">
 							{ sortArrows[ view.sort.direction ] }
@@ -116,7 +122,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		>
 			<WithDropDownMenuSeparators>
 				{ isSortable && (
-					<DropdownMenuGroup>
+					<DropdownMenuV2.Group>
 						{ SORTING_DIRECTIONS.map(
 							( direction: SortDirection ) => {
 								const isChecked =
@@ -124,10 +130,10 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 									isSorted &&
 									view.sort.direction === direction;
 
-								const value = `${ field.id }-${ direction }`;
+								const value = `${ fieldId }-${ direction }`;
 
 								return (
-									<DropdownMenuRadioItem
+									<DropdownMenuV2.RadioItem
 										key={ value }
 										// All sorting radio items share the same name, so that
 										// selecting a sorting option automatically deselects the
@@ -141,34 +147,34 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 											onChangeView( {
 												...view,
 												sort: {
-													field: field.id,
+													field: fieldId,
 													direction,
 												},
 											} );
 										} }
 									>
-										<DropdownMenuItemLabel>
+										<DropdownMenuV2.ItemLabel>
 											{ sortLabels[ direction ] }
-										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItem>
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.RadioItem>
 								);
 							}
 						) }
-					</DropdownMenuGroup>
+					</DropdownMenuV2.Group>
 				) }
 				{ canAddFilter && (
-					<DropdownMenuGroup>
-						<DropdownMenuItem
+					<DropdownMenuV2.Group>
+						<DropdownMenuV2.Item
 							prefix={ <Icon icon={ funnel } /> }
 							onClick={ () => {
-								setOpenedFilter( field.id );
+								setOpenedFilter( fieldId );
 								onChangeView( {
 									...view,
 									page: 1,
 									filters: [
 										...( view.filters || [] ),
 										{
-											field: field.id,
+											field: fieldId,
 											value: undefined,
 											operator: operators[ 0 ],
 										},
@@ -176,86 +182,76 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 								} );
 							} }
 						>
-							<DropdownMenuItemLabel>
+							<DropdownMenuV2.ItemLabel>
 								{ __( 'Add filter' ) }
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
-					</DropdownMenuGroup>
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Group>
 				) }
-				<DropdownMenuGroup>
-					<DropdownMenuItem
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.Item
 						prefix={ <Icon icon={ arrowLeft } /> }
 						disabled={ index < 1 }
 						onClick={ () => {
-							if ( ! view.fields || index < 1 ) {
-								return;
-							}
 							onChangeView( {
 								...view,
 								fields: [
-									...( view.fields.slice( 0, index - 1 ) ??
-										[] ),
-									field.id,
-									view.fields[ index - 1 ],
-									...view.fields.slice( index + 1 ),
+									...( visibleFieldIds.slice(
+										0,
+										index - 1
+									) ?? [] ),
+									fieldId,
+									visibleFieldIds[ index - 1 ],
+									...visibleFieldIds.slice( index + 1 ),
 								],
 							} );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ __( 'Move left' ) }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-					<DropdownMenuItem
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item
 						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={
-							! view.fields || index >= view.fields.length - 1
-						}
+						disabled={ index >= visibleFieldIds.length - 1 }
 						onClick={ () => {
-							if (
-								! view.fields ||
-								index >= view.fields.length - 1
-							) {
-								return;
-							}
 							onChangeView( {
 								...view,
 								fields: [
-									...( view.fields.slice( 0, index ) ?? [] ),
-									view.fields[ index + 1 ],
-									field.id,
-									...view.fields.slice( index + 2 ),
+									...( visibleFieldIds.slice( 0, index ) ??
+										[] ),
+									visibleFieldIds[ index + 1 ],
+									fieldId,
+									...visibleFieldIds.slice( index + 2 ),
 								],
 							} );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ __( 'Move right' ) }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-					{ isHidable && (
-						<DropdownMenuItem
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					{ isHidable && field && (
+						<DropdownMenuV2.Item
 							prefix={ <Icon icon={ unseen } /> }
 							onClick={ () => {
-								const viewFields =
-									view.fields || fields.map( ( f ) => f.id );
 								onHide( field );
 								onChangeView( {
 									...view,
-									fields: viewFields.filter(
-										( id ) => id !== field.id
+									fields: visibleFieldIds.filter(
+										( id ) => id !== fieldId
 									),
 								} );
 							} }
 						>
-							<DropdownMenuItemLabel>
+							<DropdownMenuV2.ItemLabel>
 								{ __( 'Hide column' ) }
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
 					) }
-				</DropdownMenuGroup>
+				</DropdownMenuV2.Group>
 			</WithDropDownMenuSeparators>
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 } );
 

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

@@ -8,18 +8,11 @@ import clsx from 'clsx';
  */
 import { __ } from '@wordpress/i18n';
 import {
-	CheckboxControl,
 	Spinner,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import {
-	useEffect,
-	useId,
-	useRef,
-	useState,
-	useMemo,
-} from '@wordpress/element';
+import { useEffect, useId, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,6 +23,7 @@ import { sortValues } from '../../constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
+	BulkSelectionCheckbox,
 } from '../../components/dataviews-bulk-actions';
 import type {
 	Action,
@@ -40,14 +34,7 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
-
-interface BulkSelectionCheckboxProps< Item > {
-	selection: string[];
-	onChangeSelection: SetSelection;
-	data: Item[];
-	actions: Action< Item >[];
-	getItemId: ( item: Item ) => string;
-}
+import { getVisibleFieldIds } from '../index';
 
 interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
@@ -84,50 +71,6 @@ interface TableRowProps< Item > {
 	onChangeSelection: SetSelection;
 }
 
-function BulkSelectionCheckbox< Item >( {
-	selection,
-	onChangeSelection,
-	data,
-	actions,
-	getItemId,
-}: BulkSelectionCheckboxProps< Item > ) {
-	const selectableItems = useMemo( () => {
-		return data.filter( ( item ) => {
-			return actions.some(
-				( action ) =>
-					action.supportsBulk &&
-					( ! action.isEligible || action.isEligible( item ) )
-			);
-		} );
-	}, [ data, actions ] );
-	const selectedItems = data.filter(
-		( item ) =>
-			selection.includes( getItemId( item ) ) &&
-			selectableItems.includes( item )
-	);
-	const areAllSelected = selectedItems.length === selectableItems.length;
-	return (
-		<CheckboxControl
-			className="dataviews-view-table-selection-checkbox"
-			__nextHasNoMarginBottom
-			checked={ areAllSelected }
-			indeterminate={ ! areAllSelected && !! selectedItems.length }
-			onChange={ () => {
-				if ( areAllSelected ) {
-					onChangeSelection( [] );
-				} else {
-					onChangeSelection(
-						selectableItems.map( ( item ) => getItemId( item ) )
-					);
-				}
-			} }
-			aria-label={
-				areAllSelected ? __( 'Deselect all' ) : __( 'Select all' )
-			}
-		/>
-	);
-}
-
 function TableColumn< Item >( {
 	column,
 	fields,
@@ -212,8 +155,8 @@ function TableRow< Item >( {
 	// Will be set to true if `onTouchStart` fires. This happens before
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
-	const isTouchDevice = useRef( false );
-	const columns = view.fields || fields.map( ( f ) => f.id );
+	const isTouchDeviceRef = useRef( false );
+	const columns = getVisibleFieldIds( view, fields );
 
 	return (
 		<tr
@@ -225,14 +168,14 @@ function TableRow< Item >( {
 			onMouseEnter={ handleMouseEnter }
 			onMouseLeave={ handleMouseLeave }
 			onTouchStart={ () => {
-				isTouchDevice.current = true;
+				isTouchDeviceRef.current = true;
 			} }
 			onClick={ () => {
 				if ( ! hasPossibleBulkAction ) {
 					return;
 				}
 				if (
-					! isTouchDevice.current &&
+					! isTouchDeviceRef.current &&
 					document.getSelection()?.type !== 'Range'
 				) {
 					onChangeSelection(
@@ -346,7 +289,7 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
-	const columns = view.fields || fields.map( ( f ) => f.id );
+	const columns = getVisibleFieldIds( view, fields );
 	const hasData = !! data?.length;
 
 	const primaryField = fields.find(

package/src/dataviews-layouts/table/style.scss

@@ -7,11 +7,6 @@
 	color: $gray-700;
 	margin-bottom: auto;
 
-	a {
-		text-decoration: none;
-		color: $gray-900;
-		font-weight: 500;
-	}
 	th {
 		text-align: left;
 		color: $gray-900;

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