@wordpress/dataviews 11.0.0 → 11.1.0

package/src/constants.ts

@@ -7,15 +7,18 @@ import { arrowDown, arrowUp } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import type { Operator, DayNumber } from './types';
+import type { DayNumber } from './types';
 
 // Filter operators.
-export const OPERATOR_IS = 'is';
-export const OPERATOR_IS_NOT = 'isNot';
 export const OPERATOR_IS_ANY = 'isAny';
 export const OPERATOR_IS_NONE = 'isNone';
 export const OPERATOR_IS_ALL = 'isAll';
 export const OPERATOR_IS_NOT_ALL = 'isNotAll';
+export const OPERATOR_BETWEEN = 'between';
+export const OPERATOR_IN_THE_PAST = 'inThePast';
+export const OPERATOR_OVER = 'over';
+export const OPERATOR_IS = 'is';
+export const OPERATOR_IS_NOT = 'isNot';
 export const OPERATOR_LESS_THAN = 'lessThan';
 export const OPERATOR_GREATER_THAN = 'greaterThan';
 export const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';
@@ -27,145 +30,8 @@ export const OPERATOR_AFTER_INC = 'afterInc';
 export const OPERATOR_CONTAINS = 'contains';
 export const OPERATOR_NOT_CONTAINS = 'notContains';
 export const OPERATOR_STARTS_WITH = 'startsWith';
-export const OPERATOR_BETWEEN = 'between';
 export const OPERATOR_ON = 'on';
 export const OPERATOR_NOT_ON = 'notOn';
-export const OPERATOR_IN_THE_PAST = 'inThePast';
-export const OPERATOR_OVER = 'over';
-
-export const ALL_OPERATORS: Operator[] = [
-	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_BEFORE,
-	OPERATOR_AFTER,
-	OPERATOR_BEFORE_INC,
-	OPERATOR_AFTER_INC,
-	OPERATOR_CONTAINS,
-	OPERATOR_NOT_CONTAINS,
-	OPERATOR_STARTS_WITH,
-	OPERATOR_BETWEEN,
-	OPERATOR_ON,
-	OPERATOR_NOT_ON,
-	OPERATOR_IN_THE_PAST,
-	OPERATOR_OVER,
-];
-
-export const SINGLE_SELECTION_OPERATORS: Operator[] = [
-	OPERATOR_IS,
-	OPERATOR_IS_NOT,
-	OPERATOR_LESS_THAN,
-	OPERATOR_GREATER_THAN,
-	OPERATOR_LESS_THAN_OR_EQUAL,
-	OPERATOR_GREATER_THAN_OR_EQUAL,
-	OPERATOR_BEFORE,
-	OPERATOR_AFTER,
-	OPERATOR_BEFORE_INC,
-	OPERATOR_AFTER_INC,
-	OPERATOR_CONTAINS,
-	OPERATOR_NOT_CONTAINS,
-	OPERATOR_STARTS_WITH,
-	OPERATOR_ON,
-	OPERATOR_NOT_ON,
-];
-
-export const OPERATORS: Record< Operator, { key: string; label: string } > = {
-	[ OPERATOR_IS ]: {
-		key: 'is-filter',
-		label: __( 'Is' ),
-	},
-	[ OPERATOR_IS_NOT ]: {
-		key: 'is-not-filter',
-		label: __( 'Is not' ),
-	},
-	[ OPERATOR_IS_ANY ]: {
-		key: 'is-any-filter',
-		label: __( 'Is any' ),
-	},
-	[ OPERATOR_IS_NONE ]: {
-		key: 'is-none-filter',
-		label: __( 'Is none' ),
-	},
-	[ OPERATOR_IS_ALL ]: {
-		key: 'is-all-filter',
-		label: __( 'Is all' ),
-	},
-	[ OPERATOR_IS_NOT_ALL ]: {
-		key: 'is-not-all-filter',
-		label: __( 'Is not all' ),
-	},
-	[ OPERATOR_LESS_THAN ]: {
-		key: 'less-than-filter',
-		label: __( 'Less than' ),
-	},
-	[ OPERATOR_GREATER_THAN ]: {
-		key: 'greater-than-filter',
-		label: __( 'Greater than' ),
-	},
-	[ OPERATOR_LESS_THAN_OR_EQUAL ]: {
-		key: 'less-than-or-equal-filter',
-		label: __( 'Less than or equal' ),
-	},
-	[ OPERATOR_GREATER_THAN_OR_EQUAL ]: {
-		key: 'greater-than-or-equal-filter',
-		label: __( 'Greater than or equal' ),
-	},
-	[ OPERATOR_BEFORE ]: {
-		key: 'before-filter',
-		label: __( 'Before' ),
-	},
-	[ OPERATOR_AFTER ]: {
-		key: 'after-filter',
-		label: __( 'After' ),
-	},
-	[ OPERATOR_BEFORE_INC ]: {
-		key: 'before-inc-filter',
-		label: __( 'Before (inc)' ),
-	},
-	[ OPERATOR_AFTER_INC ]: {
-		key: 'after-inc-filter',
-		label: __( 'After (inc)' ),
-	},
-	[ OPERATOR_CONTAINS ]: {
-		key: 'contains-filter',
-		label: __( 'Contains' ),
-	},
-	[ OPERATOR_NOT_CONTAINS ]: {
-		key: 'not-contains-filter',
-		label: __( "Doesn't contain" ),
-	},
-	[ OPERATOR_STARTS_WITH ]: {
-		key: 'starts-with-filter',
-		label: __( 'Starts with' ),
-	},
-	[ OPERATOR_BETWEEN ]: {
-		key: 'between-filter',
-		label: __( 'Between (inc)' ),
-	},
-	[ OPERATOR_ON ]: {
-		key: 'on-filter',
-		label: __( 'On' ),
-	},
-	[ OPERATOR_NOT_ON ]: {
-		key: 'not-on-filter',
-		label: __( 'Not on' ),
-	},
-	[ OPERATOR_IN_THE_PAST ]: {
-		key: 'in-the-past-filter',
-		label: __( 'In the past' ),
-	},
-	[ OPERATOR_OVER ]: {
-		key: 'over-filter',
-		label: __( 'Over' ),
-	},
-};
 
 export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;
 export const sortArrows = { asc: '↑', desc: '↓' };

package/src/dataform-controls/number.tsx

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import type { DataFormControlProps } from '../types';
+import type { DataFormControlProps, FormatNumber } from '../types';
 import ValidatedNumber from './utils/validated-number';
 
 export default function Number< Item >( props: DataFormControlProps< Item > ) {
-	// TODO: remove this hardcoded value when the decimal number is configurable
-	return <ValidatedNumber { ...props } decimals={ 2 } />;
+	const decimals = ( props.field.format as FormatNumber )?.decimals ?? 2;
+	return <ValidatedNumber { ...props } decimals={ decimals } />;
 }

package/src/dataform-controls/textarea.tsx

@@ -33,7 +33,7 @@ export default function Textarea< Item >( {
 
 	return (
 		<ValidatedTextareaControl
-			required={ !! isValid?.required }
+			required={ !! isValid.required }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
@@ -41,6 +41,12 @@ export default function Textarea< Item >( {
 			help={ description }
 			onChange={ onChangeControl }
 			rows={ rows }
+			minLength={
+				isValid.minLength ? isValid.minLength.constraint : undefined
+			}
+			maxLength={
+				isValid.maxLength ? isValid.maxLength.constraint : undefined
+			}
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			hideLabelFromVision={ hideLabelFromVision }

package/src/dataform-controls/utils/get-custom-validity.ts

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import type { Rules, FieldValidity } from '../../types';
+import type { NormalizedRules, FieldValidity } from '../../types';
 
 export default function getCustomValidity< Item >(
-	isValid: Rules< Item >,
+	isValid: NormalizedRules< Item >,
 	validity: FieldValidity | undefined
 ) {
 	let customValidity;
@@ -16,6 +16,14 @@ export default function getCustomValidity< Item >(
 			: undefined;
 	} else if ( isValid?.pattern && validity?.pattern ) {
 		customValidity = validity.pattern;
+	} else if ( isValid?.min && validity?.min ) {
+		customValidity = validity.min;
+	} else if ( isValid?.max && validity?.max ) {
+		customValidity = validity.max;
+	} else if ( isValid?.minLength && validity?.minLength ) {
+		customValidity = validity.minLength;
+	} else if ( isValid?.maxLength && validity?.maxLength ) {
+		customValidity = validity.maxLength;
 	} else if ( isValid?.elements && validity?.elements ) {
 		customValidity = validity.elements;
 	} else if ( validity?.custom ) {

package/src/dataform-controls/utils/validated-input.tsx

@@ -56,7 +56,7 @@ export default function ValidatedText< Item >( {
 
 	return (
 		<ValidatedInputControl
-			required={ !! isValid?.required }
+			required={ !! isValid.required }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
@@ -67,7 +67,13 @@ export default function ValidatedText< Item >( {
 			type={ type }
 			prefix={ prefix }
 			suffix={ suffix }
-			pattern={ isValid?.pattern }
+			pattern={ isValid.pattern ? isValid.pattern.constraint : undefined }
+			minLength={
+				isValid.minLength ? isValid.minLength.constraint : undefined
+			}
+			maxLength={
+				isValid.maxLength ? isValid.maxLength.constraint : undefined
+			}
 			__next40pxDefaultSize
 		/>
 	);

package/src/dataform-controls/utils/validated-number.tsx

@@ -157,7 +157,7 @@ export default function ValidatedNumber< Item >( {
 
 	return (
 		<ValidatedNumberControl
-			required={ !! isValid?.required }
+			required={ !! isValid.required }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			help={ description }
@@ -166,6 +166,8 @@ export default function ValidatedNumber< Item >( {
 			__next40pxDefaultSize
 			hideLabelFromVision={ hideLabelFromVision }
 			step={ step }
+			min={ isValid.min ? isValid.min.constraint : undefined }
+			max={ isValid.max ? isValid.max.constraint : undefined }
 		/>
 	);
 }

package/src/dataform-layouts/panel/modal.tsx

@@ -63,11 +63,20 @@ function ModalContent< Item >( {
 		[ field ]
 	);
 
-	const { validity } = useFormValidity(
-		modalData,
-		fields as Field< any >[],
-		form
-	);
+	const fieldsAsFieldType: Field< Item >[] = fields.map( ( f ) => ( {
+		...f,
+		Edit: f.Edit === null ? undefined : f.Edit,
+		isValid: {
+			required: f.isValid.required?.constraint,
+			elements: f.isValid.elements?.constraint,
+			min: f.isValid.min?.constraint,
+			max: f.isValid.max?.constraint,
+			pattern: f.isValid.pattern?.constraint,
+			minLength: f.isValid.minLength?.constraint,
+			maxLength: f.isValid.maxLength?.constraint,
+		},
+	} ) );
+	const { validity } = useFormValidity( modalData, fieldsAsFieldType, form );
 
 	const onApply = () => {
 		onChange( changes );

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

@@ -3,7 +3,7 @@
 
 .dataviews-view-activity {
 	margin: 0 0 auto;
-	padding: $grid-unit-10 $grid-unit-60;
+	padding: $grid-unit-10 $grid-unit-30;
 
 	.dataviews-view-activity__group-header {
 		font-size: $font-size-large;

package/src/dataviews-layouts/grid/composite-grid.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement, HTMLAttributes } from 'react';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { isAppleOS } from '@wordpress/keycodes';
-import { useContext } from '@wordpress/element';
+import { useContext, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,7 +50,7 @@ function chunk< T >( array: T[], size: number ): T[][] {
 	return chunks;
 }
 
-interface GridItemProps< Item > {
+interface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {
 	view: ViewGridType;
 	selection: string[];
 	onChangeSelection: SetSelection;
@@ -75,24 +75,28 @@ interface GridItemProps< Item > {
 	};
 }
 
-function GridItem< Item >( {
-	view,
-	selection,
-	onChangeSelection,
-	onClickItem,
-	isItemClickable,
-	renderItemLink,
-	getItemId,
-	item,
-	actions,
-	mediaField,
-	titleField,
-	descriptionField,
-	regularFields,
-	badgeFields,
-	hasBulkActions,
-	config,
-}: GridItemProps< Item > ) {
+const GridItem = forwardRef( function GridItem< Item >(
+	{
+		view,
+		selection,
+		onChangeSelection,
+		onClickItem,
+		isItemClickable,
+		renderItemLink,
+		getItemId,
+		item,
+		actions,
+		mediaField,
+		titleField,
+		descriptionField,
+		regularFields,
+		badgeFields,
+		hasBulkActions,
+		config,
+		...props
+	}: GridItemProps< Item >,
+	ref: React.ForwardedRef< HTMLDivElement >
+) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -129,12 +133,19 @@ function GridItem< Item >( {
 	}
 	return (
 		<VStack
+			{ ...props }
+			ref={ ref }
 			spacing={ 0 }
-			key={ id }
-			className={ clsx( 'dataviews-view-grid__card', {
-				'is-selected': hasBulkAction && isSelected,
-			} ) }
+			className={ clsx(
+				props.className,
+				'dataviews-view-grid__row__gridcell',
+				'dataviews-view-grid__card',
+				{
+					'is-selected': hasBulkAction && isSelected,
+				}
+			) }
 			onClickCapture={ ( event ) => {
+				props.onClickCapture?.( event );
 				if ( isAppleOS() ? event.metaKey : event.ctrlKey ) {
 					event.stopPropagation();
 					event.preventDefault();
@@ -270,7 +281,11 @@ function GridItem< Item >( {
 			</VStack>
 		</VStack>
 	);
-}
+} ) as < Item >(
+	props: GridItemProps< Item > & {
+		ref?: React.ForwardedRef< HTMLDivElement >;
+	}
+) => JSX.Element;
 
 interface CompositeGridProps< Item > {
 	data: Item[];
@@ -383,10 +398,9 @@ export default function CompositeGrid< Item >( {
 						return (
 							<Composite.Item
 								key={ getItemId( item ) }
-								render={
-									<div
-										id={ getItemId( item ) }
-										className="dataviews-view-grid__row__gridcell"
+								render={ ( props ) => (
+									<GridItem
+										{ ...props }
 										role={
 											isInfiniteScroll
 												? 'article'
@@ -402,33 +416,26 @@ export default function CompositeGrid< Item >( {
 												? index + 1
 												: undefined
 										}
-									>
-										<GridItem
-											view={ view }
-											selection={ selection }
-											onChangeSelection={
-												onChangeSelection
-											}
-											onClickItem={ onClickItem }
-											isItemClickable={ isItemClickable }
-											renderItemLink={ renderItemLink }
-											getItemId={ getItemId }
-											item={ item }
-											actions={ actions }
-											mediaField={ mediaField }
-											titleField={ titleField }
-											descriptionField={
-												descriptionField
-											}
-											regularFields={ regularFields }
-											badgeFields={ badgeFields }
-											hasBulkActions={ hasBulkActions }
-											config={ {
-												sizes: size,
-											} }
-										/>
-									</div>
-								}
+										view={ view }
+										selection={ selection }
+										onChangeSelection={ onChangeSelection }
+										onClickItem={ onClickItem }
+										isItemClickable={ isItemClickable }
+										renderItemLink={ renderItemLink }
+										getItemId={ getItemId }
+										item={ item }
+										actions={ actions }
+										mediaField={ mediaField }
+										titleField={ titleField }
+										descriptionField={ descriptionField }
+										regularFields={ regularFields }
+										badgeFields={ badgeFields }
+										hasBulkActions={ hasBulkActions }
+										config={ {
+											sizes: size,
+										} }
+									/>
+								) }
 							/>
 						);
 					} ) }

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

@@ -5,21 +5,17 @@
 @use "../utils/grid-items.scss" as *;
 
 .dataviews-view-grid {
-	padding: 0 $grid-unit-60 $grid-unit-30;
+	padding: 0 $grid-unit-30 $grid-unit-30;
 	display: flex;
 	flex-direction: column;
 	gap: $grid-unit-40;
 	container-type: inline-size;
+	margin-bottom: auto;
 
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;
 	}
 
-	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-
 	.dataviews-view-grid__row {
 		display: grid;
 		gap: $grid-unit-40;
@@ -223,11 +219,6 @@
 	font-weight: $font-weight-medium;
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
-	padding: 0 $grid-unit-60;
+	padding: 0 $grid-unit-30;
 	container-type: inline-size;
-
-	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 }

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

@@ -405,12 +405,18 @@ function ViewTable< Item >( {
 						<col className="dataviews-view-table__col-checkbox" />
 					) }
 					{ hasPrimaryColumn && (
-						<col className="dataviews-view-table__col-primary" />
+						<col className="dataviews-view-table__col-first-data" />
 					) }
-					{ columns.map( ( column ) => (
+					{ columns.map( ( column, index ) => (
 						<col
 							key={ `col-${ column }` }
-							className={ `dataviews-view-table__col-${ column }` }
+							className={ clsx(
+								`dataviews-view-table__col-${ column }`,
+								{
+									'dataviews-view-table__col-first-data':
+										! hasPrimaryColumn && index === 0,
+								}
+							) }
 						/>
 					) ) }
 					{ !! actions?.length && (

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

@@ -61,12 +61,12 @@
 
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-60;
+			padding-left: $grid-unit-30;
 		}
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-60;
+			padding-right: $grid-unit-30;
 		}
 
 		&:last-child {
@@ -260,17 +260,6 @@
 	}
 }
 
-@container (max-width: 430px) {
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-left: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-right: $grid-unit-30;
-	}
-}
 
 .dataviews-view-table-selection-checkbox {
 	--checkbox-input-size: 24px;
@@ -316,12 +305,12 @@
 .dataviews-view-table__group-header-row {
 	.dataviews-view-table__group-header-cell {
 		font-weight: $font-weight-medium;
-		padding: $grid-unit-15 $grid-unit-60;
+		padding: $grid-unit-15 $grid-unit-30;
 		color: $gray-900;
 	}
 }
 
 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
-.dataviews-view-table col[class^="dataviews-view-table__col-"]:not(.dataviews-view-table__col-primary) {
+.dataviews-view-table col[class^="dataviews-view-table__col-"]:not(.dataviews-view-table__col-first-data) {
 	width: 1%;
 }

package/src/dataviews-layouts/utils/grid-items.scss

@@ -6,16 +6,8 @@
 	gap: $grid-unit-40;
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-	padding: 0 $grid-unit-60 $grid-unit-30;
+	padding: 0 $grid-unit-30 $grid-unit-30;
 	container-type: inline-size;
-	/**
-		* Breakpoints were adjusted from media queries breakpoints to account for
-		* the sidebar width. This was done to match the existing styles we had.
-		*/
-	@container (max-width: 430px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
 
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;