@wordpress/dataviews 4.22.0 → 5.0.1-next.719a03cbe.0

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

package/src/components/dataviews-view-config/index.tsx

@@ -45,26 +45,21 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
-import type { NormalizedField, SupportedLayouts, View } from '../../types';
+import type { NormalizedField, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 
 const { Menu } = unlock( componentsPrivateApis );
 
-interface ViewTypeMenuProps {
-	defaultLayouts?: SupportedLayouts;
-}
-
 const DATAVIEWS_CONFIG_POPOVER_PROPS = {
 	className: 'dataviews-config__popover',
 	placement: 'bottom-end',
 	offset: 9,
 };
 
-function ViewTypeMenu( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewTypeMenuProps ) {
-	const { view, onChangeView } = useContext( DataViewsContext );
+export function ViewTypeMenu() {
+	const { view, onChangeView, defaultLayouts } =
+		useContext( DataViewsContext );
 	const availableLayouts = Object.keys( defaultLayouts );
 	if ( availableLayouts.length <= 1 ) {
 		return null;
@@ -220,7 +215,8 @@ function SortDirectionControl() {
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function ItemsPerPageControl() {
-	const { view, onChangeView } = useContext( DataViewsContext );
+	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
+	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -242,7 +238,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ PAGE_SIZE_VALUES.map( ( value ) => {
+			{ pageSizeValues.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }
@@ -761,7 +757,7 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigDropdown() {
+export function DataviewsViewConfigDropdown() {
 	const { view } = useContext( DataViewsContext );
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
@@ -815,14 +811,10 @@ function DataviewsViewConfigDropdown() {
 	);
 }
 
-function _DataViewsViewConfig( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: {
-	defaultLayouts?: SupportedLayouts;
-} ) {
+function _DataViewsViewConfig() {
 	return (
 		<>
-			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<ViewTypeMenu />
 			<DataviewsViewConfigDropdown />
 		</>
 	);