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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "5.0.1-next.719a03cbe.0",
+	"version": "6.0.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.2.1-next.719a03cbe.0",
-		"@wordpress/components": "^29.13.1-next.719a03cbe.0",
-		"@wordpress/compose": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/data": "^10.26.1-next.719a03cbe.0",
-		"@wordpress/date": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/element": "^6.26.1-next.719a03cbe.0",
-		"@wordpress/i18n": "^6.0.1-next.719a03cbe.0",
-		"@wordpress/icons": "^10.26.2-next.719a03cbe.0",
-		"@wordpress/primitives": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/private-apis": "^1.26.1-next.719a03cbe.0",
-		"@wordpress/url": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/warning": "^3.26.1-next.719a03cbe.0",
+		"@wordpress/base-styles": "^6.4.0",
+		"@wordpress/components": "^30.1.0",
+		"@wordpress/compose": "^7.28.0",
+		"@wordpress/data": "^10.28.0",
+		"@wordpress/date": "^5.28.0",
+		"@wordpress/element": "^6.28.0",
+		"@wordpress/i18n": "^6.1.0",
+		"@wordpress/icons": "^10.28.0",
+		"@wordpress/keycodes": "^4.28.0",
+		"@wordpress/primitives": "^4.28.0",
+		"@wordpress/private-apis": "^1.28.0",
+		"@wordpress/url": "^4.28.0",
+		"@wordpress/warning": "^3.28.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": "5e146e949c2765411a8310bcc2641a88d036a6d9"
+	"gitHead": "28cc2098f5ee28f89096b638533796538f495f72"
 }

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;
@@ -62,6 +71,7 @@ const fields = [
 		label: 'Date as options',
 		type: 'datetime' as const,
 		elements: [
+			{ value: '', label: 'Select a date' },
 			{ value: '1970-02-23T12:00:00', label: "Jane's birth date" },
 			{ value: '1950-02-23T12:00:00', label: "John's birth date" },
 		],
@@ -259,3 +269,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

@@ -7,8 +7,14 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useContext, useMemo, useRef, useState } from '@wordpress/element';
-import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
+import {
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+	useEffect,
+} from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -59,7 +65,8 @@ type DataViewsProps< Item > = {
 	header?: ReactNode;
 	getItemLevel?: ( item: Item ) => number;
 	children?: ReactNode;
-	perPageSizes?: [ number, number, number, number ];
+	perPageSizes?: number[];
+	empty?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -133,7 +140,8 @@ function DataViews< Item >( {
 	isItemClickable = defaultIsItemClickable,
 	header,
 	children,
-	perPageSizes,
+	perPageSizes = [ 10, 20, 50, 100 ],
+	empty,
 }: DataViewsProps< Item > ) {
 	const containerRef = useRef< HTMLDivElement | null >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
@@ -168,10 +176,23 @@ function DataViews< Item >( {
 	}, [ selection, data, getItemId ] );
 
 	const filters = useFilters( _fields, view );
-	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>
-		( filters || [] ).some( ( filter ) => filter.isPrimary )
+	const hasPrimaryOrLockedFilters = useMemo(
+		() =>
+			( filters || [] ).some(
+				( filter ) => filter.isPrimary || filter.isLocked
+			),
+		[ filters ]
+	);
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(
+		hasPrimaryOrLockedFilters
 	);
 
+	useEffect( () => {
+		if ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {
+			setIsShowingFilter( true );
+		}
+	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
+
 	return (
 		<DataViewsContext.Provider
 			value={ {
@@ -193,17 +214,16 @@ function DataViews< Item >( {
 				renderItemLink,
 				containerWidth,
 				containerRef,
+				resizeObserverRef,
 				defaultLayouts,
 				filters,
 				isShowingFilter,
 				setIsShowingFilter,
 				perPageSizes,
+				empty,
 			} }
 		>
-			<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

@@ -33,140 +33,153 @@ export type SpaceObject = {
 	categories: string[];
 	satellites: number;
 	date: string;
+	datetime: string;
 	email: string;
 };
 
 export const data: SpaceObject[] = [
 	{
 		id: 1,
-		title: 'Apollo',
-		description: 'Apollo description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Not a planet',
+		title: 'Moon',
+		description:
+			'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.',
+		image: 'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
+		type: 'Satellite',
 		isPlanet: false,
-		categories: [ 'Space', 'NASA' ],
+		categories: [ 'Solar system', 'Satellite', 'Earth', 'Moon' ],
 		satellites: 0,
-		date: '2021-01-01T00:00:00Z',
-		email: 'apollo@example.com',
+		date: '2021-01-01',
+		datetime: '2021-01-01T14:30:00Z',
+		email: 'moon@example.com',
 	},
 	{
 		id: 2,
-		title: 'Space',
-		description: 'Space description',
-		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
-		type: 'Not a planet',
+		title: 'Io',
+		description: 'Moon of Jupiter',
+		image: 'https://live.staticflickr.com/5482/9460973502_07e8ab81fe_z.jpg',
+		type: 'Satellite',
 		isPlanet: false,
-		categories: [ 'Space' ],
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
 		satellites: 0,
-		date: '2019-01-02T00:00:00Z',
-		email: 'space@example.com',
+		date: '2019-01-02',
+		datetime: '2019-01-02T09:15:00Z',
+		email: 'io@example.com',
 	},
 	{
 		id: 3,
-		title: 'NASA',
-		description: 'NASA photo',
-		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
-		type: 'Not a planet',
+		title: 'Europa',
+		description: 'Moon of Jupiter',
+		image: 'https://live.staticflickr.com/65535/31499273012_baf5f38cc1_z.jpg',
+		type: 'Satellite',
 		isPlanet: false,
-		categories: [ 'NASA' ],
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
 		satellites: 0,
-		date: '2025-01-03T00:00:00Z',
-		email: 'nasa@example.com',
+		date: '2025-01-03',
+		datetime: '2025-01-03T16:45:30Z',
+		email: 'europa@example.com',
 	},
 	{
 		id: 4,
 		title: 'Neptune',
-		description: 'Neptune description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Ice giant in the Solar system',
+		image: 'https://live.staticflickr.com/65535/29523683990_000ff4720c_z.jpg',
 		type: 'Ice giant',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 14,
-		date: '2020-01-01T00:00:00Z',
+		categories: [ 'Ice giant', 'Planet', 'Solar system' ],
+		satellites: 16,
+		date: '2020-01-01',
+		datetime: '2020-01-01T11:22:15Z',
 		email: 'neptune@example.com',
 	},
 	{
 		id: 5,
 		title: 'Mercury',
-		description: 'Mercury description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Terrestrial planet in the Solar system',
+		image: 'https://live.staticflickr.com/813/40199101735_e5e92ffd11_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		categories: [ 'Terrestrial', 'Planet', 'Solar system' ],
 		satellites: 0,
-		date: '2020-01-02T01:00:00Z',
+		date: '2020-01-02',
+		datetime: '2020-01-02T13:05:45Z',
 		email: 'mercury@example.com',
 	},
 	{
 		id: 6,
 		title: 'Venus',
 		description: 'La planète Vénus',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		image: 'https://live.staticflickr.com/8025/7544560662_900e717727_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		categories: [ 'Terrestrial', 'Planet', 'Solar system' ],
 		satellites: 0,
-		date: '2020-01-02T00:00:00Z',
+		date: '2020-01-02',
+		datetime: '2020-01-02T08:30:12Z',
 		email: 'venus@example.com',
 	},
 	{
 		id: 7,
 		title: 'Earth',
-		description: 'Earth description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Terrestrial planet in the Solar system',
+		image: 'https://live.staticflickr.com/3762/9460163562_964fe6af07_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		categories: [ 'Terrestrial', 'Planet', 'Solar system', 'Earth' ],
 		satellites: 1,
-		date: '2023-01-03T00:00:00Z',
+		date: '2023-01-03',
+		datetime: '2023-01-03T18:15:30Z',
 		email: 'earth@example.com',
 	},
 	{
 		id: 8,
 		title: 'Mars',
-		description: 'Mars description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Terrestrial planet in the Solar system',
+		image: 'https://live.staticflickr.com/8151/7651156426_e047f4d219_z.jpg',
 		type: 'Terrestrial',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		categories: [ 'Terrestrial', 'Planet', 'Solar system' ],
 		satellites: 2,
-		date: '2020-01-01T00:00:00Z',
+		date: '2020-01-01',
+		datetime: '2020-01-01T20:45:00Z',
 		email: 'mars@example.com',
 	},
 	{
 		id: 9,
 		title: 'Jupiter',
-		description: 'Jupiter description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Gas giant in the Solar system',
+		image: 'https://staging-jubilee.flickr.com/2853/9458010071_6e6fc41408_z.jpg',
 		type: 'Gas giant',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 95,
-		date: '2017-01-01T00:01:00Z',
+		categories: [ 'Solar system', 'Planet', 'Gas giant' ],
+		satellites: 97,
+		date: '2017-01-01',
+		datetime: '2017-01-01T00:01:00Z',
 		email: 'jupiter@example.com',
 	},
 	{
 		id: 10,
 		title: 'Saturn',
-		description: 'Saturn description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Gas giant in the Solar system',
+		image: 'https://live.staticflickr.com/5524/9464658509_fc2d83dff5_z.jpg',
 		type: 'Gas giant',
 		isPlanet: true,
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 146,
-		date: '2020-02-01T00:02:00Z',
+		categories: [ 'Gas giant', 'Solar system', 'Planet' ],
+		satellites: 274,
+		date: '2020-02-01',
+		datetime: '2020-02-01T00:02:00Z',
 		email: 'saturn@example.com',
 	},
 	{
 		id: 11,
 		title: 'Uranus',
-		description: 'Uranus description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Ice giant in the Solar system',
+		image: 'https://live.staticflickr.com/65535/5553350875_3072df91e2_c.jpg',
 		type: 'Ice giant',
 		isPlanet: true,
-		categories: [ 'Space', 'Ice giant', 'Solar system' ],
+		categories: [ 'Planet', 'Ice giant', 'Solar system' ],
 		satellites: 28,
-		date: '2020-03-01T00:00:00Z',
+		date: '2020-03-01',
+		datetime: '2020-03-01T10:15:20Z',
 		email: 'uranus@example.com',
 	},
 ];
@@ -677,6 +690,11 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		id: 'date',
 		label: 'Date',
+		type: 'date',
+	},
+	{
+		id: 'datetime',
+		label: 'Datetime',
 		type: 'datetime',
 	},
 	{
@@ -684,7 +702,7 @@ export const fields: Field< SpaceObject >[] = [
 		id: 'type',
 		enableHiding: false,
 		elements: [
-			{ value: 'Not a planet', label: 'Not a planet' },
+			{ value: 'Satellite', label: 'Satellite' },
 			{ value: 'Ice giant', label: 'Ice giant' },
 			{ value: 'Terrestrial', label: 'Terrestrial' },
 			{ value: 'Gas giant', label: 'Gas giant' },
@@ -731,12 +749,17 @@ export const fields: Field< SpaceObject >[] = [
 			</HStack>
 		),
 		elements: [
-			{ value: 'Space', label: 'Space' },
-			{ value: 'NASA', label: 'NASA' },
-			{ value: 'Planet', label: 'Planet' },
 			{ value: 'Solar system', label: 'Solar system' },
+			{ value: 'Satellite', label: 'Satellite' },
+			{ value: 'Moon', label: 'Moon' },
+			{ value: 'Earth', label: 'Earth' },
+			{ value: 'Jupiter', label: 'Jupiter' },
+			{ value: 'Planet', label: 'Planet' },
 			{ value: 'Ice giant', label: 'Ice giant' },
+			{ value: 'Terrestrial', label: 'Terrestrial' },
+			{ value: 'Gas giant', label: 'Gas giant' },
 		],
 		type: 'array',
+		enableGlobalSearch: true,
 	},
 ];