@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "8.0.1-next.e256d081a.0",
+	"version": "9.0.1-next.6870dfe5b.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,20 +46,21 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/base-styles": "^6.5.1-next.e256d081a.0",
-		"@wordpress/components": "^30.2.2-next.e256d081a.0",
-		"@wordpress/compose": "^7.29.1-next.e256d081a.0",
-		"@wordpress/data": "^10.29.1-next.e256d081a.0",
-		"@wordpress/date": "^5.30.1-next.e256d081a.0",
-		"@wordpress/element": "^6.29.1-next.e256d081a.0",
-		"@wordpress/i18n": "^6.2.1-next.e256d081a.0",
-		"@wordpress/icons": "^10.29.1-next.e256d081a.0",
-		"@wordpress/keycodes": "^4.29.1-next.e256d081a.0",
-		"@wordpress/primitives": "^4.29.1-next.e256d081a.0",
-		"@wordpress/private-apis": "^1.29.1-next.e256d081a.0",
-		"@wordpress/url": "^4.29.1-next.e256d081a.0",
-		"@wordpress/warning": "^3.29.1-next.e256d081a.0",
+		"@wordpress/base-styles": "^6.6.1-next.6870dfe5b.0",
+		"@wordpress/components": "^30.3.2-next.6870dfe5b.0",
+		"@wordpress/compose": "^7.30.1-next.6870dfe5b.0",
+		"@wordpress/data": "^10.30.1-next.6870dfe5b.0",
+		"@wordpress/date": "^5.30.1-next.6870dfe5b.0",
+		"@wordpress/element": "^6.30.1-next.6870dfe5b.0",
+		"@wordpress/i18n": "^6.3.1-next.6870dfe5b.0",
+		"@wordpress/icons": "^10.30.1-next.6870dfe5b.0",
+		"@wordpress/keycodes": "^4.30.1-next.6870dfe5b.0",
+		"@wordpress/primitives": "^4.30.1-next.6870dfe5b.0",
+		"@wordpress/private-apis": "^1.30.1-next.6870dfe5b.0",
+		"@wordpress/url": "^4.30.1-next.6870dfe5b.0",
+		"@wordpress/warning": "^3.30.1-next.6870dfe5b.0",
 		"clsx": "^2.1.1",
+		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
 		"fast-deep-equal": "^3.1.3",
 		"remove-accents": "^0.5.0"
@@ -74,5 +75,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "7d529ba9a461795d5f1572d3856de33f744287c2"
+	"gitHead": "c8637da9df499cd7b6b07c9fad918f6d45f4de3d"
 }

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

@@ -171,10 +171,8 @@ const fields: Field< SamplePost >[] = [
 ];
 
 const LayoutRegularComponent = ( {
-	type = 'default',
 	labelPosition,
 }: {
-	type?: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
 } ) => {
 	const [ post, setPost ] = useState( {
@@ -196,7 +194,7 @@ const LayoutRegularComponent = ( {
 	const form: Form = useMemo(
 		() => ( {
 			layout: getLayoutFromStoryArgs( {
-				type,
+				type: 'regular',
 				labelPosition,
 			} ),
 			fields: [
@@ -216,7 +214,7 @@ const LayoutRegularComponent = ( {
 				'tags',
 			],
 		} ),
-		[ type, labelPosition ]
+		[ labelPosition ]
 	);
 
 	return (
@@ -240,7 +238,7 @@ const getLayoutFromStoryArgs = ( {
 	openAs,
 	withHeader,
 }: {
-	type: 'default' | 'regular' | 'panel' | 'card';
+	type: 'default' | 'regular' | 'panel' | 'card' | 'row';
 	labelPosition?: 'default' | 'top' | 'side' | 'none';
 	openAs?: 'default' | 'dropdown' | 'modal';
 	withHeader?: boolean;
@@ -391,6 +389,9 @@ const ValidationComponent = ( {
 	type ValidatedItem = {
 		text: string;
 		email: string;
+		telephone: string;
+		url: string;
+		color: string;
 		integer: number;
 		boolean: boolean;
 		customEdit: string;
@@ -399,6 +400,9 @@ const ValidationComponent = ( {
 	const [ post, setPost ] = useState< ValidatedItem >( {
 		text: 'Can have letters and spaces',
 		email: 'hi@example.com',
+		telephone: '+306978241796',
+		url: 'https://example.com',
+		color: '#ff6600',
 		integer: 2,
 		boolean: true,
 		customEdit: 'custom control',
@@ -418,6 +422,27 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customTelephoneRule = ( value: ValidatedItem ) => {
+		if ( ! /^\+30\d{10}$/.test( value.telephone ) ) {
+			return 'Telephone number must start with +30 and have 10 digits after.';
+		}
+
+		return null;
+	};
+	const customUrlRule = ( value: ValidatedItem ) => {
+		if ( ! /^https:\/\/example\.com$/.test( value.url ) ) {
+			return 'URL must be from https://example.com domain.';
+		}
+
+		return null;
+	};
+	const customColorRule = ( value: ValidatedItem ) => {
+		if ( ! /^#[0-9A-Fa-f]{6}$/.test( value.color ) ) {
+			return 'Color must be a valid hex format (e.g., #ff6600).';
+		}
+
+		return null;
+	};
 	const customIntegerRule = ( value: ValidatedItem ) => {
 		if ( value.integer % 2 !== 0 ) {
 			return 'Integer must be an even number.';
@@ -451,6 +476,33 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customEmailRule ),
 			},
 		},
+		{
+			id: 'telephone',
+			type: 'telephone',
+			label: 'telephone',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customTelephoneRule ),
+			},
+		},
+		{
+			id: 'url',
+			type: 'url',
+			label: 'URL',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customUrlRule ),
+			},
+		},
+		{
+			id: 'color',
+			type: 'color',
+			label: 'Color',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customColorRule ),
+			},
+		},
 		{
 			id: 'integer',
 			type: 'integer',
@@ -480,7 +532,16 @@ const ValidationComponent = ( {
 
 	const form = {
 		layout: { type },
-		fields: [ 'text', 'email', 'integer', 'boolean', 'customEdit' ],
+		fields: [
+			'text',
+			'email',
+			'telephone',
+			'url',
+			'color',
+			'integer',
+			'boolean',
+			'customEdit',
+		],
 	};
 
 	const canSave = isItemValid( post, _fields, form );
@@ -671,6 +732,8 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 				{
 					id: 'customerCard',
 					label: 'Customer',
+					description:
+						'Enter your contact details, plan type, and addresses to complete your customer information.',
 					children: [
 						{
 							id: 'customerContact',
@@ -751,6 +814,247 @@ const LayoutCardComponent = ( { withHeader }: { withHeader: boolean } ) => {
 	);
 };
 
+const LayoutRowComponent = ( {
+	alignment,
+}: {
+	alignment: 'start' | 'center' | 'end';
+} ) => {
+	type Customer = {
+		name: string;
+		email: string;
+		phone: string;
+		plan: string;
+		shippingAddress: string;
+		shippingCity: string;
+		shippingPostalCode: string;
+		shippingCountry: string;
+		billingAddress: string;
+		billingCity: string;
+		billingPostalCode: string;
+		totalOrders: number;
+		totalRevenue: number;
+		averageOrderValue: number;
+		hasVat: boolean;
+		hasDiscount: boolean;
+		vat: number;
+		commission: number;
+	};
+
+	const customerFields: Field< Customer >[] = [
+		{
+			id: 'name',
+			label: 'Customer Name',
+			type: 'text',
+		},
+		{
+			id: 'phone',
+			label: 'Phone',
+			type: 'text',
+		},
+		{
+			id: 'email',
+			label: 'Email',
+			type: 'email',
+		},
+		{
+			id: 'shippingAddress',
+			label: 'Shipping Address',
+			type: 'text',
+		},
+		{
+			id: 'shippingCity',
+			label: 'Shipping City',
+			type: 'text',
+		},
+		{
+			id: 'shippingPostalCode',
+			label: 'Shipping Postal Code',
+			type: 'text',
+		},
+		{
+			id: 'shippingCountry',
+			label: 'Shipping Country',
+			type: 'text',
+		},
+		{
+			id: 'billingAddress',
+			label: 'Billing Address',
+			type: 'text',
+		},
+		{
+			id: 'billingCity',
+			label: 'Billing City',
+			type: 'text',
+		},
+		{
+			id: 'billingPostalCode',
+			label: 'Billing Postal Code',
+			type: 'text',
+		},
+		{
+			id: 'vat',
+			label: 'VAT',
+			type: 'integer',
+		},
+		{
+			id: 'commission',
+			label: 'Commission',
+			type: 'integer',
+		},
+		{
+			id: 'hasDiscount',
+			label: 'Has Discount?',
+			type: 'boolean',
+		},
+		{
+			id: 'plan',
+			label: 'Plan',
+			type: 'text',
+			Edit: 'toggleGroup',
+			elements: [
+				{ value: 'basic', label: 'Basic' },
+				{ value: 'business', label: 'Business' },
+				{ value: 'vip', label: 'VIP' },
+			],
+		},
+		{
+			id: 'renewal',
+			label: 'Renewal',
+			type: 'text',
+			Edit: 'radio',
+			elements: [
+				{ value: 'weekly', label: 'Weekly' },
+				{ value: 'monthly', label: 'Monthly' },
+				{ value: 'yearly', label: 'Yearly' },
+			],
+		},
+	];
+
+	const [ customer, setCustomer ] = useState< Customer >( {
+		name: 'Danyka Romaguera',
+		email: 'aromaguera@example.org',
+		phone: '1-828-352-1250',
+		plan: 'Business',
+		shippingAddress: 'N/A',
+		shippingCity: 'N/A',
+		shippingPostalCode: 'N/A',
+		shippingCountry: 'N/A',
+		billingAddress: 'Danyka Romaguera, West Myrtiehaven, 80240-4282, BI',
+		billingCity: 'City',
+		billingPostalCode: 'PC',
+		totalOrders: 2,
+		totalRevenue: 1430,
+		averageOrderValue: 715,
+		hasVat: true,
+		vat: 10,
+		commission: 5,
+		hasDiscount: true,
+	} );
+
+	const form: Form = useMemo(
+		() => ( {
+			fields: [
+				{
+					id: 'customer',
+					label: 'Customer',
+					layout: {
+						type: 'row',
+						alignment,
+					},
+					children: [ 'name', 'phone', 'email' ],
+				},
+				{
+					id: 'addressRow',
+					label: 'Billing & Shipping Addresses',
+					layout: {
+						type: 'row',
+						alignment,
+					},
+					children: [
+						{
+							id: 'billingAddress',
+							children: [
+								'billingAddress',
+								'billingCity',
+								'billingPostalCode',
+							],
+						},
+						{
+							id: 'shippingAddress',
+							children: [
+								'shippingAddress',
+								'shippingCity',
+								'shippingPostalCode',
+								'shippingCountry',
+							],
+						},
+					],
+				},
+				{
+					id: 'payments-and-tax',
+					label: 'Payments & Taxes',
+					layout: {
+						type: 'row',
+						alignment,
+					},
+					children: [ 'vat', 'commission', 'hasDiscount' ],
+				},
+				{
+					id: 'planRow',
+					label: 'Subscription',
+					layout: {
+						type: 'row',
+						alignment,
+					},
+					children: [ 'plan', 'renewal' ],
+				},
+			],
+		} ),
+		[ alignment ]
+	);
+
+	const topLevelLayout: Form = useMemo(
+		() => ( {
+			layout: {
+				type: 'row',
+				alignment,
+			},
+			fields: [ 'name', 'phone', 'email' ],
+		} ),
+		[ alignment ]
+	);
+
+	return (
+		<>
+			<h1>Row Layout</h1>
+			<h2>As top-level layout</h2>
+			<DataForm
+				data={ customer }
+				fields={ customerFields }
+				form={ topLevelLayout }
+				onChange={ ( edits ) =>
+					setCustomer( ( prev ) => ( {
+						...prev,
+						...edits,
+					} ) )
+				}
+			/>
+			<h2>Per field layout</h2>
+			<DataForm
+				data={ customer }
+				fields={ customerFields }
+				form={ form }
+				onChange={ ( edits ) =>
+					setCustomer( ( prev ) => ( {
+						...prev,
+						...edits,
+					} ) )
+				}
+			/>
+		</>
+	);
+};
+
 const LayoutMixedComponent = () => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -767,14 +1071,18 @@ const LayoutMixedComponent = () => {
 	const form: Form = {
 		fields: [
 			{
-				id: 'title',
+				id: 'title-and-status',
+				children: [
+					{
+						id: 'title',
+						layout: { type: 'panel' },
+					},
+					'status',
+				],
 				layout: {
-					type: 'panel',
-					labelPosition: 'top',
-					openAs: 'dropdown',
+					type: 'row',
 				},
 			},
-			'status',
 			{
 				id: 'order',
 				layout: {
@@ -865,6 +1173,20 @@ export const LayoutRegular = {
 	},
 };
 
+export const LayoutRow = {
+	render: LayoutRowComponent,
+	argTypes: {
+		alignment: {
+			control: { type: 'select' },
+			description: 'The alignment of the fields.',
+			options: [ 'start', 'center', 'end' ],
+		},
+	},
+	args: {
+		alignment: 'center',
+	},
+};
+
 export const LayoutMixed = {
 	render: LayoutMixedComponent,
 };

package/src/components/dataform-context/index.tsx

@@ -15,6 +15,7 @@ type DataFormContextType< Item > = {
 const DataFormContext = createContext< DataFormContextType< any > >( {
 	fields: [],
 } );
+DataFormContext.displayName = 'DataFormContext';
 
 export function DataFormProvider< Item >( {
 	fields,

package/src/components/dataviews/index.tsx

@@ -20,6 +20,7 @@ import { useResizeObserver, throttle } from '@wordpress/compose';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import {
 	default as DataViewsFilters,
 	useFilters,
@@ -78,6 +79,10 @@ const defaultGetItemId = ( item: ItemWithId ) => item.id;
 const defaultIsItemClickable = () => true;
 const EMPTY_ARRAY: any[] = [];
 
+const dataViewsLayouts = VIEW_LAYOUTS.filter(
+	( viewLayout ) => ! viewLayout.isPicker
+);
+
 type DefaultUIProps = Pick<
 	DataViewsProps< any >,
 	'header' | 'search' | 'searchLabel'
@@ -135,7 +140,7 @@ function DataViews< Item >( {
 	getItemLevel,
 	isLoading = false,
 	paginationInfo,
-	defaultLayouts,
+	defaultLayouts: defaultLayoutsProperty,
 	selection: selectionProperty,
 	onChangeSelection,
 	onClickItem,
@@ -224,6 +229,25 @@ function DataViews< Item >( {
 		};
 	}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );
 
+	// Filter out DataViewsPicker layouts.
+	const defaultLayouts = useMemo(
+		() =>
+			Object.fromEntries(
+				Object.entries( defaultLayoutsProperty ).filter(
+					( [ layoutType ] ) => {
+						return dataViewsLayouts.some(
+							( viewLayout ) => viewLayout.type === layoutType
+						);
+					}
+				)
+			),
+		[ defaultLayoutsProperty ]
+	);
+
+	if ( ! defaultLayouts[ view.type ] ) {
+		return null;
+	}
+
 	return (
 		<DataViewsContext.Provider
 			value={ {

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

@@ -772,7 +772,7 @@ export const fields: Field< SpaceObject >[] = [
 		label: 'Title',
 		id: 'title',
 		type: 'text',
-		enableHiding: false,
+		enableHiding: true,
 		enableGlobalSearch: true,
 		filterBy: {
 			operators: [ 'contains', 'notContains', 'startsWith' ],

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

@@ -46,6 +46,20 @@ import './style.css';
 const meta = {
 	title: 'DataViews/DataViews',
 	component: DataViews,
+	// Use fullscreen layout and a wrapper div with padding to resolve conflicts
+	// between Ariakit's Dialog (usePreventBodyScroll) and Storybook's body padding
+	// (sb-main-padding class). This ensures consistent layout in DataViews stories
+	// when clicking actions menus. Without this the padding on the body will jump.
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [
+		( Story ) => (
+			<div style={ { padding: '1rem' } }>
+				<Story />
+			</div>
+		),
+	],
 } as Meta< typeof DataViews >;
 
 export default meta;

package/src/components/dataviews/style.scss

@@ -1,4 +1,5 @@
-.dataviews-wrapper {
+.dataviews-wrapper,
+.dataviews-picker-wrapper {
 	height: 100%;
 	overflow: auto;
 	box-sizing: border-box;
@@ -104,7 +105,8 @@
 /**
  * Applying a consistent 24px padding when DataViews are placed within cards.
  */
-.components-card__body:has(> .dataviews-wrapper) {
+.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
 

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

@@ -57,6 +57,7 @@ type DataViewsContextType< Item > = {
 	config: { perPageSizes: number[] };
 	empty?: ReactNode;
 	hasInfiniteScrollHandler: boolean;
+	itemListLabel?: string;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -88,4 +89,6 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	},
 } );
 
+DataViewsContext.displayName = 'DataViewsContext';
+
 export default DataViewsContext;

package/src/components/dataviews-layout/index.tsx

@@ -36,11 +36,13 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		onClickItem,
 		isItemClickable,
 		renderItemLink,
+		defaultLayouts,
 		empty = __( 'No results' ),
 	} = useContext( DataViewsContext );
 
-	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
-		?.component as ComponentType< ViewBaseProps< any > >;
+	const ViewComponent = VIEW_LAYOUTS.find(
+		( v ) => v.type === view.type && defaultLayouts[ v.type ]
+	)?.component as ComponentType< ViewBaseProps< any > >;
 
 	return (
 		<ViewComponent