@wordpress/dataviews 4.22.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.22.0",
+	"version": "5.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,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.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",
 		"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": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
 }

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;