@wordpress/dataviews 11.0.0 → 11.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "11.0.0",
+	"version": "11.1.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,20 +44,21 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.12.0",
-		"@wordpress/components": "^30.9.0",
-		"@wordpress/compose": "^7.36.0",
-		"@wordpress/data": "^10.36.0",
-		"@wordpress/date": "^5.36.0",
-		"@wordpress/dom": "^4.36.0",
-		"@wordpress/element": "^6.36.0",
-		"@wordpress/i18n": "^6.9.0",
-		"@wordpress/icons": "^11.3.0",
-		"@wordpress/keycodes": "^4.36.0",
-		"@wordpress/primitives": "^4.36.0",
-		"@wordpress/private-apis": "^1.36.0",
-		"@wordpress/url": "^4.36.0",
-		"@wordpress/warning": "^3.36.0",
+		"@wordpress/base-styles": "^6.13.0",
+		"@wordpress/components": "^31.0.0",
+		"@wordpress/compose": "^7.37.0",
+		"@wordpress/data": "^10.37.0",
+		"@wordpress/date": "^5.37.0",
+		"@wordpress/deprecated": "^4.37.0",
+		"@wordpress/dom": "^4.37.0",
+		"@wordpress/element": "^6.37.0",
+		"@wordpress/i18n": "^6.10.0",
+		"@wordpress/icons": "^11.4.0",
+		"@wordpress/keycodes": "^4.37.0",
+		"@wordpress/primitives": "^4.37.0",
+		"@wordpress/private-apis": "^1.37.0",
+		"@wordpress/url": "^4.37.0",
+		"@wordpress/warning": "^3.37.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -75,5 +76,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
+	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
 }

package/src/components/dataviews/style.scss

@@ -20,7 +20,7 @@
 .dataviews__view-actions,
 .dataviews-filters__container {
 	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
+	padding: $grid-unit-20 $grid-unit-30;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
@@ -33,7 +33,7 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-60;
+	padding: 0 $grid-unit-30;
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
@@ -53,12 +53,6 @@
 	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
 	}
-
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 }
 
 .dataviews-title-field {
@@ -109,29 +103,10 @@
 }
 
 /**
- * Applying a consistent 24px padding when DataViews are placed within cards.
+ * When DataViews are placed within cards, apply a consistent top padding.
  */
 .components-card__body:has(> .dataviews-wrapper),
 .components-card__body:has(> .dataviews-picker-wrapper) {
 	padding: $grid-unit-10 0 0;
 	overflow: hidden; // Prevent cells with white backgrounds overflowing the card
-
-	.dataviews__view-actions,
-	.dataviews-filters__container,
-	.dataviews-footer,
-	.dataviews-view-grid,
-	.dataviews-loading,
-	.dataviews-no-results {
-		padding-inline: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-inline-start: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-inline-end: $grid-unit-30;
-	}
 }

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

@@ -17,7 +17,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef, createInterpolateElement } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
 import { dateI18n, getDate } from '@wordpress/date';
 
@@ -26,35 +26,13 @@ import { dateI18n, getDate } from '@wordpress/date';
  */
 import SearchWidget from './search-widget';
 import InputWidget from './input-widget';
-import {
-	OPERATORS,
-	OPERATOR_IS,
-	OPERATOR_IS_NOT,
-	OPERATOR_IS_ANY,
-	OPERATOR_IS_NONE,
-	OPERATOR_IS_ALL,
-	OPERATOR_IS_NOT_ALL,
-	OPERATOR_LESS_THAN,
-	OPERATOR_GREATER_THAN,
-	OPERATOR_LESS_THAN_OR_EQUAL,
-	OPERATOR_GREATER_THAN_OR_EQUAL,
-	OPERATOR_CONTAINS,
-	OPERATOR_NOT_CONTAINS,
-	OPERATOR_STARTS_WITH,
-	OPERATOR_BEFORE,
-	OPERATOR_AFTER,
-	OPERATOR_BEFORE_INC,
-	OPERATOR_AFTER_INC,
-	OPERATOR_BETWEEN,
-	OPERATOR_ON,
-	OPERATOR_NOT_ON,
-	OPERATOR_IN_THE_PAST,
-	OPERATOR_OVER,
-} from '../../constants';
+import { getOperatorByName } from '../../utils/operators';
 import type {
 	Filter,
 	NormalizedField,
 	NormalizedFieldDate,
+	NormalizedFieldNumber,
+	NormalizedFieldInteger,
 	NormalizedFilter,
 	Operator,
 	Option,
@@ -62,6 +40,8 @@ import type {
 } from '../../types';
 import useElements from '../../hooks/use-elements';
 import parseDateTime from '../../field-types/utils/parse-date-time';
+import { formatNumber } from '../../field-types/number';
+import { formatInteger } from '../../field-types/integer';
 
 const ENTER = 'Enter';
 const SPACE = ' ';
@@ -93,285 +73,11 @@ const FilterText = ( {
 		return filter.name;
 	}
 
-	const filterTextWrappers = {
-		Name: <span className="dataviews-filters__summary-filter-text-name" />,
-		Value: (
-			<span className="dataviews-filters__summary-filter-text-value" />
-		),
-	};
-
-	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is any: Admin, Editor". */
-				__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_NONE ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is none: Admin, Editor". */
-				__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
+	const operator = getOperatorByName( filterInView?.operator );
+	if ( operator !== undefined ) {
+		return operator.filterText( filter, activeElements );
 	}
 
-	if ( filterInView?.operator === OPERATOR_IS_ALL ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is all: Admin, Editor". */
-				__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not all: Admin, Editor". */
-				__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is: Admin". */
-				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_NOT ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not: Admin". */
-				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_LESS_THAN ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is less than: 10". */
-				__( '<Name>%1$s is less than: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_GREATER_THAN ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is greater than: 10". */
-				__( '<Name>%1$s is greater than: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_LESS_THAN_OR_EQUAL ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is less than or equal to: 10". */
-				__(
-					'<Name>%1$s is less than or equal to: </Name><Value>%2$s</Value>'
-				),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_GREATER_THAN_OR_EQUAL ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is greater than or equal to: 10". */
-				__(
-					'<Name>%1$s is greater than or equal to: </Name><Value>%2$s</Value>'
-				),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_CONTAINS ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Title contains: Mars". */
-				__( '<Name>%1$s contains: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_NOT_CONTAINS ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Description doesn't contain: photo". */
-				__( "<Name>%1$s doesn't contain: </Name><Value>%2$s</Value>" ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_STARTS_WITH ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Title starts with: Mar". */
-				__( '<Name>%1$s starts with: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_BEFORE ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is before: 2024-01-01". */
-				__( '<Name>%1$s is before: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_AFTER ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is after: 2024-01-01". */
-				__( '<Name>%1$s is after: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_BEFORE_INC ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is on or before: 2024-01-01". */
-				__( '<Name>%1$s is on or before: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_AFTER_INC ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is on or after: 2024-01-01". */
-				__( '<Name>%1$s is on or after: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_BETWEEN ) {
-		const { label } = activeElements[ 0 ];
-
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: "Item count between (inc): 10 and 180". */
-				__(
-					'<Name>%1$s between (inc): </Name><Value>%2$s and %3$s</Value>'
-				),
-				filter.name,
-				label[ 0 ],
-				label[ 1 ]
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_ON ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is: 2024-01-01". */
-				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_NOT_ON ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is not: 2024-01-01". */
-				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IN_THE_PAST ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is in the past: 1 days". */
-				__( '<Name>%1$s is in the past: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_OVER ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is over: 1 days ago". */
-				__( '<Name>%1$s is over: </Name><Value>%2$s</Value> ago' ),
-				filter.name,
-				`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`
-			),
-			filterTextWrappers
-		);
-	}
 	return sprintf(
 		/* translators: 1: Filter name e.g.: "Unknown status for Author". */
 		__( 'Unknown status for %1$s' ),
@@ -386,7 +92,7 @@ function OperatorSelector( {
 }: OperatorSelectorProps ) {
 	const operatorOptions = filter.operators?.map( ( operator ) => ( {
 		value: operator,
-		label: OPERATORS[ operator ]?.label,
+		label: getOperatorByName( operator )?.label || operator,
 	} ) );
 	const currentFilter = view.filters?.find(
 		( _filter ) => _filter.field === filter.field
@@ -409,7 +115,7 @@ function OperatorSelector( {
 					value={ value }
 					options={ operatorOptions }
 					onChange={ ( newValue ) => {
-						const operator = newValue as Operator;
+						const newOperator = newValue as Operator;
 						const currentOperator = currentFilter?.operator;
 						const newFilters = currentFilter
 							? [
@@ -418,28 +124,29 @@ function OperatorSelector( {
 											if (
 												_filter.field === filter.field
 											) {
-												// Reset the value only when switching between operators that have different value types.
-												const OPERATORS_SHOULD_RESET_VALUE =
-													[
-														OPERATOR_BETWEEN,
-														OPERATOR_IN_THE_PAST,
-														OPERATOR_OVER,
-													];
-												const shouldResetValue =
-													currentOperator &&
-													( OPERATORS_SHOULD_RESET_VALUE.includes(
+												const currentOpSelectionModel =
+													getOperatorByName(
 														currentOperator
-													) ||
-														OPERATORS_SHOULD_RESET_VALUE.includes(
-															operator
-														) );
+													)?.selection;
+												const newOpSelectionModel =
+													getOperatorByName(
+														newOperator
+													)?.selection;
+
+												const shouldResetValue =
+													currentOpSelectionModel !==
+														newOpSelectionModel ||
+													[
+														currentOpSelectionModel,
+														newOpSelectionModel,
+													].includes( 'custom' );
 
 												return {
 													..._filter,
 													value: shouldResetValue
 														? undefined
 														: _filter.value,
-													operator,
+													operator: newOperator,
 												};
 											}
 											return _filter;
@@ -450,7 +157,7 @@ function OperatorSelector( {
 									...( view.filters ?? [] ),
 									{
 										field: filter.field,
-										operator,
+										operator: newOperator,
 										value: undefined,
 									},
 							  ];
@@ -521,6 +228,12 @@ export default function Filter( {
 			} catch ( e ) {
 				label = filterInView.value;
 			}
+		} else if ( field?.type === 'number' && typeof label === 'number' ) {
+			const numberField = field as NormalizedFieldNumber< any >;
+			label = formatNumber( label, numberField.format );
+		} else if ( field?.type === 'integer' && typeof label === 'number' ) {
+			const integerField = field as NormalizedFieldInteger< any >;
+			label = formatInteger( label, integerField.format );
 		}
 
 		activeElements = [

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

@@ -13,7 +13,12 @@ import { Flex } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import type { View, NormalizedFilter, NormalizedField } from '../../types';
+import type {
+	View,
+	NormalizedFilter,
+	NormalizedField,
+	NormalizedRules,
+} from '../../types';
 import { getCurrentValue } from './utils';
 
 interface UserInputWidgetProps {
@@ -58,10 +63,7 @@ export default function InputWidget( {
 			return {
 				...currentField,
 				// Deactivate validation for filters.
-				isValid: {
-					required: false,
-					custom: () => null,
-				},
+				isValid: {} satisfies NormalizedRules< any >,
 				// Configure getValue/setValue as if Item was a plain object.
 				getValue: ( { item }: { item: any } ) =>
 					item[ currentField.id ],

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

@@ -6,7 +6,10 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
+import {
+	isRegisteredOperator,
+	isSingleSelectionOperator,
+} from '../../utils/operators';
 import type { NormalizedFilter, NormalizedField, View } from '../../types';
 
 function useFilters( fields: NormalizedField< any >[], view: View ) {
@@ -33,7 +36,7 @@ function useFilters( fields: NormalizedField< any >[], view: View ) {
 				getElements: field.getElements,
 				hasElements: field.hasElements,
 				singleSelection: operators.some( ( op ) =>
-					SINGLE_SELECTION_OPERATORS.includes( op )
+					isSingleSelectionOperator( op )
 				),
 				operators,
 				isVisible:
@@ -42,7 +45,7 @@ function useFilters( fields: NormalizedField< any >[], view: View ) {
 					!! view.filters?.some(
 						( f ) =>
 							f.field === field.id &&
-							ALL_OPERATORS.includes( f.operator )
+							isRegisteredOperator( f.operator )
 					),
 				isPrimary,
 				isLocked,

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

@@ -7,7 +7,7 @@
 	bottom: 0;
 	left: 0;
 	background-color: inherit;
-	padding: $grid-unit-15 $grid-unit-60;
+	padding: $grid-unit-15 $grid-unit-30;
 	border-top: $border-width solid $gray-100;
 	flex-shrink: 0;
 
@@ -18,12 +18,6 @@
 	z-index: z-index(".dataviews-footer");
 }
 
-@container (max-width: 430px) {
-	.dataviews-footer {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-}
-
 @container (max-width: 560px) {
 	.dataviews-footer {
 		flex-direction: column !important;