@wordpress/dataviews 4.21.0 → 5.0.0

package/src/components/dataviews-filters/index.tsx

@@ -16,34 +16,32 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import FilterSummary from './filter-summary';
+import Filter from './filter';
 import { default as AddFilter, AddFilterMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
-import { sanitizeOperators } from '../../utils';
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
+import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
 import type { NormalizedFilter, NormalizedField, View } from '../../types';
 
 export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	return useMemo( () => {
 		const filters: NormalizedFilter[] = [];
 		fields.forEach( ( field ) => {
-			if ( ! field.elements?.length ) {
-				return;
-			}
-
-			const operators = sanitizeOperators( field );
-			if ( operators.length === 0 ) {
+			if (
+				field.filterBy === false ||
+				( ! field.elements?.length && ! field.Edit )
+			) {
 				return;
 			}
 
+			const operators = field.filterBy.operators;
 			const isPrimary = !! field.filterBy?.isPrimary;
 			filters.push( {
 				field: field.id,
 				name: field.label,
-				elements: field.elements,
+				elements: field.elements ?? [],
 				singleSelection: operators.some( ( op ) =>
-					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
+					SINGLE_SELECTION_OPERATORS.includes( op )
 				),
 				operators,
 				isVisible:
@@ -71,21 +69,16 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	}, [ fields, view ] );
 }
 
-export function FiltersToggle( {
-	filters,
-	view,
-	onChangeView,
-	setOpenedFilter,
-	isShowingFilter,
-	setIsShowingFilter,
-}: {
-	filters: NormalizedFilter[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	setOpenedFilter: ( filter: string | null ) => void;
-	isShowingFilter: boolean;
-	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
-} ) {
+export function FiltersToggle() {
+	const {
+		filters,
+		view,
+		onChangeView,
+		setOpenedFilter,
+		isShowingFilter,
+		setIsShowingFilter,
+	} = useContext( DataViewsContext );
+
 	const buttonRef = useRef< HTMLButtonElement >( null );
 	const onChangeViewWithFilterVisibility = useCallback(
 		( _view: View ) => {
@@ -178,7 +171,7 @@ function FilterVisibilityToggle( {
 	);
 }
 
-function Filters() {
+function Filters( { className }: { className?: string } ) {
 	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
 		useContext( DataViewsContext );
 	const addFilterRef = useRef< HTMLButtonElement >( null );
@@ -200,10 +193,11 @@ function Filters() {
 	const filterComponents = [
 		...visibleFilters.map( ( filter ) => {
 			return (
-				<FilterSummary
+				<Filter
 					key={ filter.field }
 					filter={ filter }
 					view={ view }
+					fields={ fields }
 					onChangeView={ onChangeView }
 					addFilterRef={ addFilterRef }
 					openedFilter={ openedFilter }
@@ -226,8 +220,8 @@ function Filters() {
 		<HStack
 			justify="flex-start"
 			style={ { width: 'fit-content' } }
-			className="dataviews-filters__container"
 			wrap
+			className={ className }
 		>
 			{ filterComponents }
 		</HStack>

package/src/components/dataviews-filters/input-widget.tsx

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+import { Flex } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { View, NormalizedFilter, NormalizedField } from '../../types';
+import { getCurrentValue } from './utils';
+
+interface UserInputWidgetProps {
+	view: View;
+	filter: NormalizedFilter;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< any >[];
+}
+
+export default function InputWidget( {
+	filter,
+	view,
+	onChangeView,
+	fields,
+}: UserInputWidgetProps ) {
+	const currentFilter = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
+
+	const field = fields.find( ( f ) => f.id === filter.field );
+	const currentValue = getCurrentValue( filter, currentFilter );
+	const data = useMemo( () => {
+		return ( view.filters ?? [] ).reduce(
+			( acc, f ) => {
+				acc[ f.field ] = f.value;
+				return acc;
+			},
+			{} as Record< string, any >
+		);
+	}, [ view.filters ] );
+
+	const handleChange = useEvent( ( updatedData: Record< string, any > ) => {
+		if ( ! field || ! currentFilter ) {
+			return;
+		}
+		const nextValue = updatedData[ field.id ];
+		if ( fastDeepEqual( nextValue, currentValue ) ) {
+			return;
+		}
+
+		onChangeView( {
+			...view,
+			filters: ( view.filters ?? [] ).map( ( _filter ) =>
+				_filter.field === filter.field
+					? {
+							..._filter,
+							operator:
+								currentFilter.operator || filter.operators[ 0 ],
+							value: nextValue,
+					  }
+					: _filter
+			),
+		} );
+	} );
+
+	if ( ! field || ! field.Edit || ! currentFilter ) {
+		return null;
+	}
+
+	return (
+		<Flex
+			className="dataviews-filters__user-input-widget"
+			gap={ 2.5 }
+			direction="column"
+		>
+			<field.Edit
+				hideLabelFromVision
+				data={ data }
+				field={ field }
+				operator={ currentFilter.operator }
+				onChange={ handleChange }
+			/>
+		</Flex>
+	);
+}

package/src/components/dataviews-filters/search-widget.tsx

@@ -4,6 +4,7 @@
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import removeAccents from 'remove-accents';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,49 +14,25 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
 import { VisuallyHidden, Icon, Composite } from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
-import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
-import type { Filter, NormalizedFilter, View } from '../../types';
+import { getCurrentValue } from './utils';
+import type { Filter, NormalizedFilter, View, Option } from '../../types';
 
 interface SearchWidgetProps {
 	view: View;
-	filter: NormalizedFilter;
+	filter: NormalizedFilter & {
+		elements: Option[];
+	};
 	onChangeView: ( view: View ) => void;
 }
 
-const radioCheck = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
-	</SVG>
-);
-
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-const EMPTY_ARRAY: [] = [];
-const getCurrentValue = (
-	filterDefinition: NormalizedFilter,
-	currentFilter?: Filter
-) => {
-	if ( filterDefinition.singleSelection ) {
-		return currentFilter?.value;
-	}
-
-	if ( Array.isArray( currentFilter?.value ) ) {
-		return currentFilter.value;
-	}
-
-	if ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {
-		return [ currentFilter.value ];
-	}
-
-	return EMPTY_ARRAY;
-};
-
 const getNewValue = (
 	filterDefinition: NormalizedFilter,
 	currentFilter: Filter | undefined,
@@ -81,6 +58,30 @@ function generateFilterElementCompositeItemId(
 	return `${ prefix }-${ filterElementValue }`;
 }
 
+const MultiSelectionOption = ( { selected }: { selected: boolean } ) => {
+	return (
+		<span
+			className={ clsx(
+				'dataviews-filters__search-widget-listitem-multi-selection',
+				{ 'is-selected': selected }
+			) }
+		>
+			{ selected && <Icon icon={ check } /> }
+		</span>
+	);
+};
+
+const SingleSelectionOption = ( { selected }: { selected: boolean } ) => {
+	return (
+		<span
+			className={ clsx(
+				'dataviews-filters__search-widget-listitem-single-selection',
+				{ 'is-selected': selected }
+			) }
+		/>
+	);
+};
+
 function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );
 
@@ -189,16 +190,16 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 						/>
 					}
 				>
-					<span className="dataviews-filters__search-widget-listitem-check">
-						{ filter.singleSelection &&
-							currentValue === element.value && (
-								<Icon icon={ radioCheck } />
-							) }
-						{ ! filter.singleSelection &&
-							currentValue.includes( element.value ) && (
-								<Icon icon={ check } />
-							) }
-					</span>
+					{ filter.singleSelection && (
+						<SingleSelectionOption
+							selected={ currentValue === element.value }
+						/>
+					) }
+					{ ! filter.singleSelection && (
+						<MultiSelectionOption
+							selected={ currentValue.includes( element.value ) }
+						/>
+					) }
 					<span>{ element.label }</span>
 				</Composite.Hover>
 			) ) }
@@ -288,16 +289,18 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-filters__search-widget-listitem-check">
-								{ filter.singleSelection &&
-									currentValue === element.value && (
-										<Icon icon={ radioCheck } />
-									) }
-								{ ! filter.singleSelection &&
-									currentValue.includes( element.value ) && (
-										<Icon icon={ check } />
+							{ filter.singleSelection && (
+								<SingleSelectionOption
+									selected={ currentValue === element.value }
+								/>
+							) }
+							{ ! filter.singleSelection && (
+								<MultiSelectionOption
+									selected={ currentValue.includes(
+										element.value
 									) }
-							</span>
+								/>
+							) }
 							<span>
 								<Ariakit.ComboboxItemValue
 									className="dataviews-filters__search-widget-filter-combobox-item-value"

package/src/components/dataviews-filters/style.scss

@@ -34,11 +34,11 @@
 }
 
 .dataviews-filters__summary-operators-container {
-	padding: $grid-unit-10 $grid-unit-10 0;
+	padding: $grid-unit-10 $grid-unit-20;
 
-	&:has(+ .dataviews-filters__search-widget-listbox) {
+	&:has(+ .dataviews-filters__search-widget-listbox),
+	&:has(+ .dataviews-filters__user-input-widget) {
 		border-bottom: 1px solid $gray-200;
-		padding-bottom: $grid-unit-10;
 	}
 
 	&:empty {
@@ -47,6 +47,17 @@
 
 	.dataviews-filters__summary-operators-filter-name {
 		color: $gray-700;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex-shrink: 0; /* Prevents this element from shrinking */
+		max-width: calc(100% - 55px);
+	}
+
+	.dataviews-filters__summary-operators-filter-select {
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 }
 
@@ -170,9 +181,10 @@
 	gap: $grid-unit-10;
 	border-radius: $radius-small;
 	box-sizing: border-box;
-	padding: $grid-unit-10 $grid-unit-15;
+	padding: $grid-unit-05 $grid-unit-15;
 	cursor: default;
-	margin-block-end: 2px;
+	min-height: $grid-unit-40;
+	@include body-medium();
 
 	&:last-child {
 		margin-block-end: 0;
@@ -184,19 +196,27 @@
 		background-color: var(--wp-admin-theme-color);
 		color: $white;
 
-		.dataviews-filters__search-widget-listitem-check {
-			fill: $white;
-		}
-
 		.dataviews-filters__search-widget-listitem-description {
 			color: $white;
 		}
-	}
 
-	.dataviews-filters__search-widget-listitem-check {
-		width: 24px;
-		height: 24px;
-		flex-shrink: 0;
+		.dataviews-filters__search-widget-listitem-single-selection {
+			border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+			background: $white;
+			&.is-selected {
+				border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+				background: var(--wp-admin-theme-color-darker-20, #183ad6);
+			}
+		}
+
+		.dataviews-filters__search-widget-listitem-multi-selection {
+			border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+
+			&.is-selected {
+				border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+				background: var(--wp-admin-theme-color-darker-20, #183ad6);
+			}
+		}
 	}
 
 	.dataviews-filters__search-widget-listitem-description {
@@ -207,6 +227,81 @@
 		line-height: 16px;
 		color: $gray-700;
 	}
+
+	.dataviews-filters__search-widget-listitem-single-selection {
+		@include radio-control;
+		margin: 0;
+		padding: 0;
+
+		&.is-selected {
+			background: var(--wp-admin-theme-color, #3858e9);
+			border-color: var(--wp-admin-theme-color, #3858e9);
+
+			&::before {
+				content: "";
+				border-radius: $radius-round;
+				box-sizing: inherit;
+				width: math.div($radio-input-size-sm, 2);
+				height: math.div($radio-input-size-sm, 2);
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				margin: 0;
+				background-color: $white;
+
+				// This border serves as a background color in Windows High Contrast mode.
+				border: 4px solid $white;
+
+				@include break-small() {
+					width: math.div($radio-input-size, 2);
+					height: math.div($radio-input-size, 2);
+				}
+			}
+		}
+	}
+
+	.dataviews-filters__search-widget-listitem-multi-selection {
+		--checkbox-size: 24px; // Width & height for small viewports.
+
+		@include checkbox-control;
+		position: relative;
+		background: $white;
+		color: $gray-900;
+		margin: 0;
+		padding: 0;
+		width: var(--checkbox-size);
+		height: var(--checkbox-size);
+
+		@include break-small() {
+			--checkbox-size: 16px;
+		}
+
+		@media not (prefers-reduced-motion) {
+			transition: 0.1s border-color ease-in-out;
+		}
+
+		&.is-selected {
+			background: var(--wp-admin-theme-color, #3858e9);
+			border-color: var(--wp-admin-theme-color, #3858e9);
+
+			svg {
+				--checkmark-size: var(--checkbox-size);
+
+				fill: $white;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: var(--checkmark-size);
+				height: var(--checkmark-size);
+
+				@include break-small() {
+					--checkmark-size: calc(var(--checkbox-size) + 4px);
+				}
+			}
+		}
+	}
 }
 
 .dataviews-filters__search-widget-filter-combobox__wrapper {
@@ -289,3 +384,11 @@
 .dataviews-search {
 	width: fit-content;
 }
+
+.dataviews-filters__user-input-widget {
+	padding: $grid-unit-20;
+
+	.components-input-control__prefix {
+		padding-left: $grid-unit-10;
+	}
+}

package/src/components/dataviews-filters/utils.ts

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedFilter, Filter } from '../../types';
+
+const EMPTY_ARRAY: [] = [];
+
+export const getCurrentValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter?: Filter
+) => {
+	if ( filterDefinition.singleSelection ) {
+		return currentFilter?.value;
+	}
+
+	if ( Array.isArray( currentFilter?.value ) ) {
+		return currentFilter.value;
+	}
+
+	if ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {
+		return [ currentFilter.value ];
+	}
+
+	return EMPTY_ARRAY;
+};

package/src/components/dataviews-item-actions/index.tsx

@@ -196,7 +196,7 @@ export default function ItemActions< Item >( {
 			justify="flex-end"
 			className="dataviews-item-actions"
 			style={ {
-				flexShrink: '0',
+				flexShrink: 0,
 				width: 'auto',
 			} }
 		>

package/src/components/dataviews-layout/index.tsx

@@ -15,7 +15,11 @@ import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { ViewBaseProps } from '../../types';
 
-export default function DataViewsLayout() {
+type DataViewsLayoutProps = {
+	className?: string;
+};
+
+export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 	const {
 		actions = [],
 		data,
@@ -30,6 +34,7 @@ export default function DataViewsLayout() {
 		setOpenedFilter,
 		onClickItem,
 		isItemClickable,
+		renderItemLink,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -37,6 +42,7 @@ export default function DataViewsLayout() {
 
 	return (
 		<ViewComponent
+			className={ className }
 			actions={ actions }
 			data={ data }
 			fields={ fields }
@@ -48,6 +54,7 @@ export default function DataViewsLayout() {
 			selection={ selection }
 			setOpenedFilter={ setOpenedFilter }
 			onClickItem={ onClickItem }
+			renderItemLink={ renderItemLink }
 			isItemClickable={ isItemClickable }
 			view={ view }
 		/>

package/src/components/dataviews-pagination/index.tsx

@@ -15,7 +15,7 @@ import { next, previous } from '@wordpress/icons';
  */
 import DataViewsContext from '../dataviews-context';
 
-function DataViewsPagination() {
+export function DataViewsPagination() {
 	const {
 		view,
 		onChangeView,
@@ -36,8 +36,8 @@ function DataViewsPagination() {
 				'aria-label':
 					currentPage === page
 						? sprintf(
-								// translators: Current page number in total number of pages
-								__( 'Page %1$s of %2$s' ),
+								// translators: 1: current page number. 2: total number of pages.
+								__( 'Page %1$d of %2$d' ),
 								currentPage,
 								totalPages
 						  )
@@ -65,7 +65,7 @@ function DataViewsPagination() {
 						sprintf(
 							// translators: 1: Current page number, 2: Total number of pages.
 							_x(
-								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'<div>Page</div>%1$s<div>of %2$d</div>',
 								'paging'
 							),
 							'<CurrentPage />',

package/src/components/dataviews-selection-checkbox/index.tsx

@@ -7,15 +7,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { Field } from '../../types';
 import type { SetSelection } from '../../private-types';
+import type { NormalizedField } from '../../types';
 
 interface DataViewsSelectionCheckboxProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	item: Item;
 	getItemId: ( item: Item ) => string;
-	titleField?: Field< Item >;
+	titleField?: NormalizedField< Item >;
 	disabled: boolean;
 }