@wordpress/dataviews 5.0.0 → 6.0.1-next.46f643fa0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "5.0.0",
+	"version": "6.0.1-next.46f643fa0.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",
@@ -46,18 +46,19 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/base-styles": "^6.3.0",
-		"@wordpress/components": "^30.0.0",
-		"@wordpress/compose": "^7.27.0",
-		"@wordpress/data": "^10.27.0",
-		"@wordpress/date": "^5.27.0",
-		"@wordpress/element": "^6.27.0",
-		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^10.27.0",
-		"@wordpress/primitives": "^4.27.0",
-		"@wordpress/private-apis": "^1.27.0",
-		"@wordpress/url": "^4.27.0",
-		"@wordpress/warning": "^3.27.0",
+		"@wordpress/base-styles": "^6.3.1-next.46f643fa0.0",
+		"@wordpress/components": "^30.1.1-next.46f643fa0.0",
+		"@wordpress/compose": "^7.27.1-next.46f643fa0.0",
+		"@wordpress/data": "^10.27.1-next.46f643fa0.0",
+		"@wordpress/date": "^5.27.1-next.46f643fa0.0",
+		"@wordpress/element": "^6.27.1-next.46f643fa0.0",
+		"@wordpress/i18n": "^6.0.1-next.46f643fa0.0",
+		"@wordpress/icons": "^10.27.2-next.46f643fa0.0",
+		"@wordpress/keycodes": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/primitives": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/private-apis": "^1.27.1-next.46f643fa0.0",
+		"@wordpress/url": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/warning": "^3.27.1-next.46f643fa0.0",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"fast-deep-equal": "^3.1.3",
@@ -73,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
+	"gitHead": "17e600e091675c5e3d809adfea23ac456bbeae19"
 }

package/src/components/dataform/stories/index.story.tsx

@@ -1,13 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalVStack as VStack,
+	privateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { Field, Form } from '../../../types';
+import { isItemValid } from '../../../validation';
+import type { Field, Form, DataFormControlProps } from '../../../types';
+import { unlock } from '../../../lock-unlock';
+
+const { ValidatedTextControl } = unlock( privateApis );
 
 type SamplePost = {
 	title: string;
@@ -259,3 +268,220 @@ export const CombinedFields = {
 		type: 'panel',
 	},
 };
+
+function CustomEditControl< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<ValidatedTextControl
+			required={ !! field.isValid?.required }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
+
+const DataFormValidationComponent = ( { required }: { required: boolean } ) => {
+	type ValidatedItem = {
+		text: string;
+		email: string;
+		integer: number;
+		boolean: boolean;
+		customEdit: string;
+		customValidation: string;
+	};
+
+	const [ post, setPost ] = useState< ValidatedItem >( {
+		text: 'Hello, World!',
+		email: 'hi@example.com',
+		integer: 2,
+		boolean: true,
+		customEdit: 'custom control',
+		customValidation: 'potato',
+	} );
+
+	const _fields: Field< ValidatedItem >[] = [
+		{
+			id: 'text',
+			type: 'text' as const,
+			label: 'Text',
+			isValid: {
+				required,
+			},
+		},
+		{
+			id: 'email',
+			type: 'email' as const,
+			label: 'e-mail',
+			isValid: {
+				required,
+			},
+		},
+		{
+			id: 'integer',
+			type: 'integer' as const,
+			label: 'Integer',
+			isValid: {
+				required,
+			},
+		},
+		{
+			id: 'boolean',
+			type: 'boolean' as const,
+			label: 'Boolean',
+			isValid: {
+				required,
+			},
+		},
+		{
+			id: 'customEdit',
+			label: 'Custom Control',
+			Edit: CustomEditControl,
+			isValid: {
+				required,
+			},
+		},
+		{
+			id: 'customValidation',
+			type: 'text',
+			label: 'Custom validation',
+			isValid: {
+				required,
+				custom: ( value: ValidatedItem ) => {
+					if (
+						! [ 'tomato', 'potato' ].includes(
+							value.customValidation
+						)
+					) {
+						return 'Value must be one of "tomato", "potato"';
+					}
+
+					return null;
+				},
+			},
+		},
+	];
+
+	const form = {
+		fields: [
+			'text',
+			'email',
+			'integer',
+			'boolean',
+			'customEdit',
+			'customValidation',
+		],
+	};
+
+	const canSave = isItemValid( post, _fields, form );
+
+	return (
+		<form>
+			<VStack alignment="left">
+				<DataForm< ValidatedItem >
+					data={ post }
+					fields={ _fields }
+					form={ form }
+					onChange={ ( edits ) =>
+						setPost( ( prev ) => ( {
+							...prev,
+							...edits,
+						} ) )
+					}
+				/>
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					disabled={ ! canSave }
+					variant="primary"
+				>
+					Submit
+				</Button>
+			</VStack>
+		</form>
+	);
+};
+
+export const Validation = {
+	title: 'DataForm/Validation',
+	render: DataFormValidationComponent,
+	argTypes: {
+		required: {
+			control: { type: 'boolean' },
+			description: 'Whether or not the fields are required.',
+		},
+	},
+	args: {
+		required: true,
+	},
+};
+
+const DataFormVisibilityComponent = () => {
+	type Post = {
+		name: string;
+		email: string;
+		isActive: boolean;
+	};
+	const [ data, setData ] = useState( {
+		name: '',
+		email: '',
+		isActive: true,
+	} );
+
+	const _fields = [
+		{ id: 'isActive', label: 'Is module active?', type: 'boolean' },
+		{
+			id: 'name',
+			label: 'Name',
+			type: 'text',
+			isVisible: ( post ) => post.isActive === true,
+		},
+		{
+			id: 'email',
+			label: 'Email',
+			type: 'email',
+			isVisible: ( post ) => post.isActive === true,
+		},
+	] satisfies Field< Post >[];
+	const form = {
+		fields: [ 'isActive', 'name', 'email' ],
+	};
+	return (
+		<DataForm< Post >
+			data={ data }
+			fields={ _fields }
+			form={ form }
+			onChange={ ( edits ) =>
+				setData( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+export const Visibility = {
+	title: 'DataForm/Visibility',
+	render: DataFormVisibilityComponent,
+};

package/src/components/dataviews/index.tsx

@@ -8,7 +8,7 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react';
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useContext, useMemo, useRef, useState } from '@wordpress/element';
-import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -193,6 +193,7 @@ function DataViews< Item >( {
 				renderItemLink,
 				containerWidth,
 				containerRef,
+				resizeObserverRef,
 				defaultLayouts,
 				filters,
 				isShowingFilter,
@@ -200,10 +201,7 @@ function DataViews< Item >( {
 				perPageSizes,
 			} }
 		>
-			<div
-				className="dataviews-wrapper"
-				ref={ useMergeRefs( [ containerRef, resizeObserverRef ] ) }
-			>
+			<div className="dataviews-wrapper" ref={ containerRef }>
 				{ children ?? (
 					<DefaultUI
 						header={ header }

package/src/components/dataviews/stories/fixtures.tsx

@@ -759,5 +759,6 @@ export const fields: Field< SpaceObject >[] = [
 			{ value: 'Gas giant', label: 'Gas giant' },
 		],
 		type: 'array',
+		enableGlobalSearch: true,
 	},
 ];

package/src/components/dataviews-context/index.ts

@@ -47,6 +47,9 @@ type DataViewsContextType< Item > = {
 	isItemClickable: ( item: Item ) => boolean;
 	containerWidth: number;
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;
+	resizeObserverRef:
+		| ( ( element?: HTMLDivElement | null ) => void )
+		| React.RefObject< HTMLDivElement >;
 	defaultLayouts: SupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
@@ -72,6 +75,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	renderItemLink: undefined,
 	containerWidth: 0,
 	containerRef: createRef(),
+	resizeObserverRef: () => {},
 	defaultLayouts: { list: {}, grid: {}, table: {} },
 	filters: [],
 	isShowingFilter: false,

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

@@ -309,9 +309,9 @@ const FilterText = ( {
 
 		return createInterpolateElement(
 			sprintf(
-				/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: "Item count between (inc): 10-180". */
+				/* 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-%3$s</Value>'
+					'<Name>%1$s between (inc): </Name><Value>%2$s and %3$s</Value>'
 				),
 				filter.name,
 				label[ 0 ],

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

@@ -62,7 +62,13 @@ export default function InputWidget( {
 							..._filter,
 							operator:
 								currentFilter.operator || filter.operators[ 0 ],
-							value: nextValue,
+							// Consider empty strings as undefined:
+							//
+							// - undefined as value means the filter is unset: the filter widget displays no value and the search returns all records
+							// - empty string as value means "search empty string": returns only the records that have an empty string as value
+							//
+							// In practice, this means the filter will not be able to find an empty string as the value.
+							value: nextValue === '' ? undefined : nextValue,
 					  }
 					: _filter
 			),

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

@@ -22,7 +22,9 @@
 	line-height: $default-line-height;
 
 	.components-popover__content {
-		width: 230px;
+		width: 100%;
+		min-width: 230px;
+		max-width: 250px;
 		border-radius: $grid-unit-05;
 	}
 

package/src/dataform-controls/boolean.tsx

@@ -1,12 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { ToggleControl } from '@wordpress/components';
+import { privateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedToggleControl } = unlock( privateApis );
 
 export default function Boolean< Item >( {
 	field,
@@ -17,7 +20,21 @@ export default function Boolean< Item >( {
 	const { id, getValue, label } = field;
 
 	return (
-		<ToggleControl
+		<ValidatedToggleControl
+			required={ !! field.isValid.required }
+			customValidator={ ( newValue: any ) => {
+				if ( field.isValid?.custom ) {
+					return field.isValid.custom(
+						{
+							...data,
+							[ id ]: newValue,
+						},
+						field
+					);
+				}
+
+				return null;
+			} }
 			hidden={ hideLabelFromVision }
 			__nextHasNoMarginBottom
 			label={ label }