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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.22.0",
+	"version": "5.0.1-next.719a03cbe.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,26 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/components": "^29.12.0",
-		"@wordpress/compose": "^7.26.0",
-		"@wordpress/data": "^10.26.0",
-		"@wordpress/element": "^6.26.0",
-		"@wordpress/i18n": "^5.26.0",
-		"@wordpress/icons": "^10.26.0",
-		"@wordpress/primitives": "^4.26.0",
-		"@wordpress/private-apis": "^1.26.0",
-		"@wordpress/warning": "^3.26.0",
+		"@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",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"fast-deep-equal": "^3.1.3",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -67,5 +73,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "35e26942820d8237771af0c58e45b4303f0497f1"
+	"gitHead": "5e146e949c2765411a8310bcc2641a88d036a6d9"
 }

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

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -19,6 +18,8 @@ type SamplePost = {
 	date: string;
 	birthdate: string;
 	password?: string;
+	filesize?: number;
+	dimensions?: string;
 };
 
 const meta = {
@@ -89,12 +90,18 @@ const fields = [
 		id: 'status',
 		label: 'Status',
 		type: 'text' as const,
+		Edit: 'toggleGroup' as const,
 		elements: [
 			{ value: 'draft', label: 'Draft' },
 			{ value: 'published', label: 'Published' },
 			{ value: 'private', label: 'Private' },
 		],
 	},
+	{
+		id: 'email',
+		label: 'Email',
+		type: 'email' as const,
+	},
 	{
 		id: 'password',
 		label: 'Password',
@@ -106,20 +113,25 @@ const fields = [
 	{
 		id: 'sticky',
 		label: 'Sticky',
-		type: 'integer',
-		Edit: ( { field, onChange, data, hideLabelFromVision } ) => {
-			const { id, getValue } = field;
-			return (
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ hideLabelFromVision ? '' : field.label }
-					checked={ getValue( { item: data } ) }
-					onChange={ () =>
-						onChange( { [ id ]: ! getValue( { item: data } ) } )
-					}
-				/>
-			);
-		},
+		type: 'boolean',
+	},
+	{
+		id: 'can_comment',
+		label: 'Allow people to leave a comment',
+		type: 'boolean' as const,
+		Edit: 'checkbox',
+	},
+	{
+		id: 'filesize',
+		label: 'File Size',
+		type: 'integer' as const,
+		readOnly: true,
+	},
+	{
+		id: 'dimensions',
+		label: 'Dimensions',
+		type: 'text' as const,
+		readOnly: true,
 	},
 ] as Field< SamplePost >[];
 
@@ -136,9 +148,13 @@ export const Default = ( {
 		author: 1,
 		status: 'draft',
 		reviewer: 'fulano',
+		email: 'hello@wordpress.org',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
 		sticky: false,
+		can_comment: false,
+		filesize: 1024,
+		dimensions: '1920x1080',
 	} );
 
 	const form = useMemo(
@@ -148,16 +164,17 @@ export const Default = ( {
 			fields: [
 				'title',
 				'order',
-				{
-					id: 'sticky',
-					layout: 'regular',
-					labelPosition: 'side',
-				},
+				'sticky',
 				'author',
+				'status',
 				'reviewer',
+				'email',
 				'password',
 				'date',
 				'birthdate',
+				'can_comment',
+				'filesize',
+				'dimensions',
 			],
 		} ),
 		[ type, labelPosition ]
@@ -193,6 +210,8 @@ const CombinedFieldsComponent = ( {
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
+		filesize: 1024,
+		dimensions: '1920x1080',
 	} );
 
 	const form = useMemo(
@@ -208,6 +227,8 @@ const CombinedFieldsComponent = ( {
 				},
 				'order',
 				'author',
+				'filesize',
+				'dimensions',
 			],
 		} ),
 		[ type, labelPosition ]

package/src/components/dataviews/index.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentProps, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
+import { useContext, useMemo, useRef, useState } from '@wordpress/element';
+import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,11 +22,15 @@ import {
 import DataViewsLayout from '../dataviews-layout';
 import DataViewsFooter from '../dataviews-footer';
 import DataViewsSearch from '../dataviews-search';
-import DataViewsViewConfig from '../dataviews-view-config';
+import { BulkActionsFooter } from '../dataviews-bulk-actions';
+import { DataViewsPagination } from '../dataviews-pagination';
+import DataViewsViewConfig, {
+	DataviewsViewConfigDropdown,
+	ViewTypeMenu,
+} from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
-
 type ItemWithId = { id: string };
 
 type DataViewsProps< Item > = {
@@ -46,9 +50,16 @@ type DataViewsProps< Item > = {
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable?: ( item: Item ) => boolean;
 	header?: ReactNode;
 	getItemLevel?: ( item: Item ) => number;
+	children?: ReactNode;
+	perPageSizes?: [ number, number, number, number ];
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -57,7 +68,52 @@ const defaultGetItemId = ( item: ItemWithId ) => item.id;
 const defaultIsItemClickable = () => true;
 const EMPTY_ARRAY: any[] = [];
 
-export default function DataViews< Item >( {
+type DefaultUIProps = Pick<
+	DataViewsProps< any >,
+	'header' | 'search' | 'searchLabel'
+>;
+
+function DefaultUI( {
+	header,
+	search = true,
+	searchLabel = undefined,
+}: DefaultUIProps ) {
+	const { isShowingFilter } = useContext( DataViewsContext );
+	return (
+		<>
+			<HStack
+				alignment="top"
+				justify="space-between"
+				className="dataviews__view-actions"
+				spacing={ 1 }
+			>
+				<HStack
+					justify="start"
+					expanded={ false }
+					className="dataviews__search"
+				>
+					{ search && <DataViewsSearch label={ searchLabel } /> }
+					<FiltersToggle />
+				</HStack>
+				<HStack
+					spacing={ 1 }
+					expanded={ false }
+					style={ { flexShrink: 0 } }
+				>
+					<DataViewsViewConfig />
+					{ header }
+				</HStack>
+			</HStack>
+			{ isShowingFilter && (
+				<DataViewsFilters className="dataviews-filters__container" />
+			) }
+			<DataViewsLayout />
+			<DataViewsFooter />
+		</>
+	);
+}
+
+function DataViews< Item >( {
 	view,
 	onChangeView,
 	fields,
@@ -73,11 +129,15 @@ export default function DataViews< Item >( {
 	selection: selectionProperty,
 	onChangeSelection,
 	onClickItem,
+	renderItemLink,
 	isItemClickable = defaultIsItemClickable,
 	header,
+	children,
+	perPageSizes,
 }: DataViewsProps< Item > ) {
+	const containerRef = useRef< HTMLDivElement | null >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
-	const containerRef = useResizeObserver(
+	const resizeObserverRef = useResizeObserver(
 		( resizeObserverEntries: any ) => {
 			setContainerWidth(
 				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
@@ -130,46 +190,51 @@ export default function DataViews< Item >( {
 				getItemLevel,
 				isItemClickable,
 				onClickItem,
+				renderItemLink,
 				containerWidth,
+				containerRef,
+				defaultLayouts,
+				filters,
+				isShowingFilter,
+				setIsShowingFilter,
+				perPageSizes,
 			} }
 		>
-			<div className="dataviews-wrapper" ref={ containerRef }>
-				<HStack
-					alignment="top"
-					justify="space-between"
-					className="dataviews__view-actions"
-					spacing={ 1 }
-				>
-					<HStack
-						justify="start"
-						expanded={ false }
-						className="dataviews__search"
-					>
-						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<FiltersToggle
-							filters={ filters }
-							view={ view }
-							onChangeView={ onChangeView }
-							setOpenedFilter={ setOpenedFilter }
-							setIsShowingFilter={ setIsShowingFilter }
-							isShowingFilter={ isShowingFilter }
-						/>
-					</HStack>
-					<HStack
-						spacing={ 1 }
-						expanded={ false }
-						style={ { flexShrink: 0 } }
-					>
-						<DataViewsViewConfig
-							defaultLayouts={ defaultLayouts }
-						/>
-						{ header }
-					</HStack>
-				</HStack>
-				{ isShowingFilter && <DataViewsFilters /> }
-				<DataViewsLayout />
-				<DataViewsFooter />
+			<div
+				className="dataviews-wrapper"
+				ref={ useMergeRefs( [ containerRef, resizeObserverRef ] ) }
+			>
+				{ children ?? (
+					<DefaultUI
+						header={ header }
+						search={ search }
+						searchLabel={ searchLabel }
+					/>
+				) }
 			</div>
 		</DataViewsContext.Provider>
 	);
 }
+
+// Populate the DataViews sub components
+const DataViewsSubComponents = DataViews as typeof DataViews & {
+	BulkActionToolbar: typeof BulkActionsFooter;
+	Filters: typeof DataViewsFilters;
+	FiltersToggle: typeof FiltersToggle;
+	Layout: typeof DataViewsLayout;
+	LayoutSwitcher: typeof ViewTypeMenu;
+	Pagination: typeof DataViewsPagination;
+	Search: typeof DataViewsSearch;
+	ViewConfig: typeof DataviewsViewConfigDropdown;
+};
+
+DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
+DataViewsSubComponents.Filters = DataViewsFilters;
+DataViewsSubComponents.FiltersToggle = FiltersToggle;
+DataViewsSubComponents.Layout = DataViewsLayout;
+DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;
+DataViewsSubComponents.Pagination = DataViewsPagination;
+DataViewsSubComponents.Search = DataViewsSearch;
+DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;
+
+export default DataViewsSubComponents;

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

@@ -29,9 +29,11 @@ export type SpaceObject = {
 	description: string;
 	image: string;
 	type: string;
+	isPlanet: boolean;
 	categories: string[];
 	satellites: number;
 	date: string;
+	email: string;
 };
 
 export const data: SpaceObject[] = [
@@ -41,9 +43,11 @@ export const data: SpaceObject[] = [
 		description: 'Apollo description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Not a planet',
+		isPlanet: false,
 		categories: [ 'Space', 'NASA' ],
 		satellites: 0,
 		date: '2021-01-01T00:00:00Z',
+		email: 'apollo@example.com',
 	},
 	{
 		id: 2,
@@ -51,9 +55,11 @@ export const data: SpaceObject[] = [
 		description: 'Space description',
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
 		type: 'Not a planet',
+		isPlanet: false,
 		categories: [ 'Space' ],
 		satellites: 0,
 		date: '2019-01-02T00:00:00Z',
+		email: 'space@example.com',
 	},
 	{
 		id: 3,
@@ -61,9 +67,11 @@ export const data: SpaceObject[] = [
 		description: 'NASA photo',
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
 		type: 'Not a planet',
+		isPlanet: false,
 		categories: [ 'NASA' ],
 		satellites: 0,
 		date: '2025-01-03T00:00:00Z',
+		email: 'nasa@example.com',
 	},
 	{
 		id: 4,
@@ -71,9 +79,11 @@ export const data: SpaceObject[] = [
 		description: 'Neptune description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 14,
 		date: '2020-01-01T00:00:00Z',
+		email: 'neptune@example.com',
 	},
 	{
 		id: 5,
@@ -81,9 +91,11 @@ export const data: SpaceObject[] = [
 		description: 'Mercury description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
 		date: '2020-01-02T01:00:00Z',
+		email: 'mercury@example.com',
 	},
 	{
 		id: 6,
@@ -91,9 +103,11 @@ export const data: SpaceObject[] = [
 		description: 'La planète Vénus',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
 		date: '2020-01-02T00:00:00Z',
+		email: 'venus@example.com',
 	},
 	{
 		id: 7,
@@ -101,9 +115,11 @@ export const data: SpaceObject[] = [
 		description: 'Earth description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 1,
 		date: '2023-01-03T00:00:00Z',
+		email: 'earth@example.com',
 	},
 	{
 		id: 8,
@@ -111,9 +127,11 @@ export const data: SpaceObject[] = [
 		description: 'Mars description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 2,
 		date: '2020-01-01T00:00:00Z',
+		email: 'mars@example.com',
 	},
 	{
 		id: 9,
@@ -121,9 +139,11 @@ export const data: SpaceObject[] = [
 		description: 'Jupiter description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 95,
 		date: '2017-01-01T00:01:00Z',
+		email: 'jupiter@example.com',
 	},
 	{
 		id: 10,
@@ -131,9 +151,11 @@ export const data: SpaceObject[] = [
 		description: 'Saturn description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Gas giant',
+		isPlanet: true,
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 146,
 		date: '2020-02-01T00:02:00Z',
+		email: 'saturn@example.com',
 	},
 	{
 		id: 11,
@@ -141,9 +163,11 @@ export const data: SpaceObject[] = [
 		description: 'Uranus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Ice giant',
+		isPlanet: true,
 		categories: [ 'Space', 'Ice giant', 'Solar system' ],
 		satellites: 28,
 		date: '2020-03-01T00:00:00Z',
+		email: 'uranus@example.com',
 	},
 ];
 
@@ -562,7 +586,7 @@ export const themeFields: Field< Theme >[] = [
 	{
 		id: 'tags',
 		label: 'Tags',
-		render: ( { item } ) => item.tags.join( ', ' ),
+		type: 'array',
 	},
 ];
 
@@ -571,7 +595,13 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	layout: {},
+	layout: {
+		styles: {
+			satellites: {
+				align: 'end' as const,
+			},
+		},
+	},
 	filters: [],
 };
 
@@ -583,6 +613,7 @@ export const actions: Action< SpaceObject >[] = [
 		icon: trash,
 		hideModalHeader: true,
 		modalFocusOnMount: 'firstContentElement',
+		supportsBulk: true,
 		RenderModal: ( { items, closeModal } ) => {
 			return (
 				<VStack spacing="5">
@@ -620,6 +651,7 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		label: 'Image',
 		id: 'image',
+		type: 'media',
 		header: (
 			<HStack spacing={ 1 } justify="start">
 				<Icon icon={ image } />
@@ -631,13 +663,16 @@ export const fields: Field< SpaceObject >[] = [
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		enableSorting: false,
 	},
 	{
 		label: 'Title',
 		id: 'title',
+		type: 'text',
 		enableHiding: false,
 		enableGlobalSearch: true,
+		filterBy: {
+			operators: [ 'contains', 'notContains', 'startsWith' ],
+		},
 	},
 	{
 		id: 'date',
@@ -654,6 +689,18 @@ export const fields: Field< SpaceObject >[] = [
 			{ value: 'Terrestrial', label: 'Terrestrial' },
 			{ value: 'Gas giant', label: 'Gas giant' },
 		],
+		filterBy: {
+			operators: [ 'is', 'isNot' ],
+		},
+	},
+	{
+		id: 'isPlanet',
+		label: 'Is Planet',
+		type: 'boolean',
+		elements: [
+			{ value: true, label: 'True' },
+			{ value: false, label: 'False' },
+		],
 	},
 	{
 		label: 'Satellites',
@@ -664,8 +711,15 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		label: 'Description',
 		id: 'description',
+		type: 'text',
 		enableSorting: false,
 		enableGlobalSearch: true,
+		filterBy: false,
+	},
+	{
+		label: 'Email',
+		id: 'email',
+		type: 'email',
 	},
 	{
 		label: 'Categories',
@@ -683,15 +737,6 @@ export const fields: Field< SpaceObject >[] = [
 			{ value: 'Solar system', label: 'Solar system' },
 			{ value: 'Ice giant', label: 'Ice giant' },
 		],
-		filterBy: {
-			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
-		},
-		getValue: ( { item } ) => {
-			return item.categories;
-		},
-		render: ( { item } ) => {
-			return item.categories.join( ',' );
-		},
-		enableSorting: false,
+		type: 'array',
 	},
 ];