@wordpress/dataviews 13.1.1-next.v.202603161435.0 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "13.1.1-next.v.202603161435.0+ab4981c4f",
+	"version": "14.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",
@@ -53,20 +53,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/components": "^32.4.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/compose": "^7.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/data": "^10.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/date": "^5.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/deprecated": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/element": "^6.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/i18n": "^6.14.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/icons": "^12.0.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/keycodes": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/primitives": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/ui": "^0.9.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/warning": "^3.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/base-styles": "^6.19.0",
+		"@wordpress/components": "^32.5.0",
+		"@wordpress/compose": "^7.43.0",
+		"@wordpress/data": "^10.43.0",
+		"@wordpress/date": "^5.43.0",
+		"@wordpress/deprecated": "^4.43.0",
+		"@wordpress/element": "^6.43.0",
+		"@wordpress/i18n": "^6.16.0",
+		"@wordpress/icons": "^12.1.0",
+		"@wordpress/keycodes": "^4.43.0",
+		"@wordpress/primitives": "^4.43.0",
+		"@wordpress/private-apis": "^1.43.0",
+		"@wordpress/ui": "^0.10.0",
+		"@wordpress/warning": "^3.43.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -75,12 +75,12 @@
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
+		"@storybook/addon-docs": "^10.2.8",
+		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
-		"storybook": "^10.1.11"
+		"storybook": "^10.2.8"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "748f4e4564fcc0e6ae90200d90bb993a3cef5828"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

package/src/components/dataform-controls/datetime.tsx

@@ -37,7 +37,9 @@ function CalendarDateTimeControl< Item >( {
 	hideLabelFromVision,
 	markWhenOptional,
 	validity,
+	config,
 }: DataFormControlProps< Item > ) {
+	const { compact } = config || {};
 	const { id, label, description, setValue, getValue, isValid } = field;
 	const fieldValue = getValue( { item: data } );
 	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
@@ -179,17 +181,21 @@ function CalendarDateTimeControl< Item >( {
 					onChange={ handleManualDateTimeChange }
 				/>
 				{ /* Calendar widget */ }
-				<DateCalendar
-					style={ { width: '100%' } }
-					selected={
-						value ? parseDateTime( value ) || undefined : undefined
-					}
-					onSelect={ onSelectDate }
-					month={ calendarMonth }
-					onMonthChange={ setCalendarMonth }
-					timeZone={ timezoneString || undefined }
-					weekStartsOn={ weekStartsOn }
-				/>
+				{ ! compact && (
+					<DateCalendar
+						style={ { width: '100%' } }
+						selected={
+							value
+								? parseDateTime( value ) || undefined
+								: undefined
+						}
+						onSelect={ onSelectDate }
+						month={ calendarMonth }
+						onMonthChange={ setCalendarMonth }
+						timeZone={ timezoneString || undefined }
+						weekStartsOn={ weekStartsOn }
+					/>
+				) }
 			</Stack>
 		</BaseControl>
 	);
@@ -203,6 +209,7 @@ export default function DateTime< Item >( {
 	markWhenOptional,
 	operator,
 	validity,
+	config,
 }: DataFormControlProps< Item > ) {
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
@@ -225,6 +232,7 @@ export default function DateTime< Item >( {
 			hideLabelFromVision={ hideLabelFromVision }
 			markWhenOptional={ markWhenOptional }
 			validity={ validity }
+			config={ config }
 		/>
 	);
 }

package/src/components/dataform-layouts/card/index.tsx

@@ -1,13 +1,6 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	Card,
-	CardBody,
-	CardHeader as OriginalCardHeader,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import {
 	useCallback,
 	useContext,
@@ -16,7 +9,10 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
-import { chevronDown, chevronUp } from '@wordpress/icons';
+// TODO: enable in the ESlint rule once we complete
+// https://github.com/WordPress/gutenberg/issues/76135.
+// eslint-disable-next-line @wordpress/use-recommended-components
+import { Card, CollapsibleCard, Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -87,6 +83,113 @@ function isSummaryFieldVisible< Item >(
 	return true;
 }
 
+function HeaderContent< Item >( {
+	data,
+	fields,
+	label,
+	layout,
+	isOpen,
+	touched,
+	validity,
+}: {
+	data: Item;
+	fields: NormalizedField< Item >[];
+	label: string | undefined;
+	layout: NormalizedCardLayout;
+	isOpen: boolean;
+	touched: boolean;
+	validity: FieldLayoutProps< Item >[ 'validity' ];
+} ) {
+	const summaryFields = getSummaryFields< Item >( layout.summary, fields );
+
+	const visibleSummaryFields = summaryFields.filter( ( summaryField ) =>
+		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
+	);
+
+	const hasBadge = touched && layout.isCollapsible;
+	const hasSummary = visibleSummaryFields.length > 0 && layout.withHeader;
+
+	return (
+		<Stack
+			align="center"
+			justify="space-between"
+			className="dataforms-layouts-card__field-header-content"
+		>
+			<Card.Title>{ label }</Card.Title>
+			{ ( hasBadge || hasSummary ) && (
+				<CollapsibleCard.HeaderDescription className="dataforms-layouts-card__field-header-content-description">
+					{ hasBadge && <ValidationBadge validity={ validity } /> }
+					{ hasSummary && (
+						<div className="dataforms-layouts-card__field-summary">
+							{ visibleSummaryFields.map( ( summaryField ) => (
+								<summaryField.render
+									key={ summaryField.id }
+									item={ data }
+									field={ summaryField }
+								/>
+							) ) }
+						</div>
+					) }
+				</CollapsibleCard.HeaderDescription>
+			) }
+		</Stack>
+	);
+}
+
+function BodyContent< Item >( {
+	data,
+	field,
+	form,
+	onChange,
+	hideLabelFromVision,
+	markWhenOptional,
+	validity,
+	withHeader,
+}: {
+	data: Item;
+	field: FieldLayoutProps< Item >[ 'field' ];
+	form: NormalizedForm;
+	onChange: FieldLayoutProps< Item >[ 'onChange' ];
+	hideLabelFromVision?: boolean;
+	markWhenOptional?: boolean;
+	validity: FieldLayoutProps< Item >[ 'validity' ];
+	withHeader: boolean;
+} ) {
+	if ( field.children ) {
+		return (
+			<>
+				{ field.description && (
+					<div className="dataforms-layouts-card__field-description">
+						{ field.description }
+					</div>
+				) }
+				<DataFormLayout
+					data={ data }
+					form={ form }
+					onChange={ onChange }
+					validity={ validity?.children }
+				/>
+			</>
+		);
+	}
+
+	const SingleFieldLayout = getFormFieldLayout( 'regular' )?.component;
+	if ( ! SingleFieldLayout ) {
+		return null;
+	}
+
+	return (
+		<SingleFieldLayout
+			data={ data }
+			field={ field }
+			onChange={ onChange }
+			hideLabelFromVision={ hideLabelFromVision || withHeader }
+			markWhenOptional={ markWhenOptional }
+			validity={ validity }
+		/>
+	);
+}
+
 export default function FormCardField< Item >( {
 	data,
 	field,
@@ -97,10 +200,7 @@ export default function FormCardField< Item >( {
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
 	const layout = field.layout as NormalizedCardLayout;
-	const cardBodyRef = useRef< HTMLDivElement >( null );
-	const instanceId = useInstanceId( FormCardField );
-	const bodyId = `dataforms-layouts-card-card-body-${ instanceId }`;
-	const titleId = `dataforms-layouts-card-card-title-${ instanceId }`;
+	const contentRef = useRef< HTMLDivElement >( null );
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -111,7 +211,7 @@ export default function FormCardField< Item >( {
 	);
 
 	const { isOpened, isCollapsible } = layout;
-	const [ internalIsOpen, setIsOpen ] = useState( isOpened );
+	const [ isOpen, setIsOpen ] = useState( isOpened );
 	const [ touched, setTouched ] = useState( false );
 
 	// Sync internal state when the isOpened prop changes.
@@ -120,67 +220,32 @@ export default function FormCardField< Item >( {
 		setIsOpen( isOpened );
 	}, [ isOpened ] );
 
-	const toggle = useCallback( () => {
-		setIsOpen( ( prev ) => {
-			// Mark as touched when collapsing (going from open to closed)
-			if ( prev ) {
-				setTouched( true );
-			}
-			return ! prev;
-		} );
+	const handleOpenChange = useCallback( ( open: boolean ) => {
+		// Mark as touched when collapsing (going from open to closed)
+		if ( ! open ) {
+			setTouched( true );
+		}
+		setIsOpen( open );
 	}, [] );
 
-	const isOpen = isCollapsible ? internalIsOpen : true;
-
 	// Mark the card as touched when any field inside it is blurred.
 	// This aligns with how validated controls show errors on blur.
 	const handleBlur = useCallback( () => {
 		setTouched( true );
-	}, [ setTouched ] );
+	}, [] );
 
 	// When the card is expanded after being touched (collapsed with errors),
 	// trigger reportValidity to show field-level errors.
-	useReportValidity( cardBodyRef, isOpen && touched );
-
-	const summaryFields = getSummaryFields< Item >( layout.summary, fields );
-
-	const visibleSummaryFields = summaryFields.filter( ( summaryField ) =>
-		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
+	useReportValidity(
+		contentRef,
+		( isCollapsible ? isOpen : true ) && touched
 	);
 
-	const validationBadge =
-		touched && layout.isCollapsible ? (
-			<ValidationBadge validity={ validity } />
-		) : null;
-
-	const sizeCard = {
-		blockStart: 'medium' as const,
-		blockEnd: 'medium' as const,
-		inlineStart: 'medium' as const,
-		inlineEnd: 'medium' as const,
-	};
-
 	let label = field.label;
 	let withHeader: boolean;
-	let bodyContent: React.ReactNode;
 
 	if ( field.children ) {
 		withHeader = !! label && layout.withHeader;
-		bodyContent = (
-			<>
-				{ field.description && (
-					<div className="dataforms-layouts-card__field-description">
-						{ field.description }
-					</div>
-				) }
-				<DataFormLayout
-					data={ data }
-					form={ form }
-					onChange={ onChange }
-					validity={ validity?.children }
-				/>
-			</>
-		);
 	} else {
 		const fieldDefinition = fields.find(
 			( fieldDef ) => fieldDef.id === field.id
@@ -190,101 +255,61 @@ export default function FormCardField< Item >( {
 			return null;
 		}
 
-		const SingleFieldLayout = getFormFieldLayout( 'regular' )?.component;
-		if ( ! SingleFieldLayout ) {
-			return null;
-		}
-
 		label = fieldDefinition.label;
 		withHeader = !! label && layout.withHeader;
-		bodyContent = (
-			<SingleFieldLayout
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-				hideLabelFromVision={ hideLabelFromVision || withHeader }
-				markWhenOptional={ markWhenOptional }
-				validity={ validity }
-			/>
-		);
 	}
 
-	const sizeCardBody = {
-		blockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),
-		blockEnd: 'medium' as const,
-		inlineStart: 'medium' as const,
-		inlineEnd: 'medium' as const,
-	};
+	const bodyContent = (
+		<BodyContent
+			data={ data }
+			field={ field }
+			form={ form }
+			onChange={ onChange }
+			hideLabelFromVision={ hideLabelFromVision }
+			markWhenOptional={ markWhenOptional }
+			validity={ validity }
+			withHeader={ withHeader }
+		/>
+	);
 
-	return (
-		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
-			{ withHeader && (
-				<OriginalCardHeader
-					className="dataforms-layouts-card__field-header"
-					onClick={ isCollapsible ? toggle : undefined }
-					style={ {
-						cursor: isCollapsible ? 'pointer' : undefined,
-					} }
-					isBorderless
-				>
-					<div
-						style={ {
-							// Match the expand/collapse button's height to avoid layout
-							// differences when that button is not displayed.
-							height: isCollapsible ? undefined : '40px',
-							width: '100%',
-							display: 'flex',
-							justifyContent: 'space-between',
-							alignItems: 'center',
-						} }
-					>
-						<span
-							id={ titleId }
-							className="dataforms-layouts-card__field-header-label"
-						>
-							{ label }
-						</span>
-						{ validationBadge }
-						{ visibleSummaryFields.length > 0 &&
-							layout.withHeader && (
-								<div className="dataforms-layouts-card__field-summary">
-									{ visibleSummaryFields.map(
-										( summaryField ) => (
-											<summaryField.render
-												key={ summaryField.id }
-												item={ data }
-												field={ summaryField }
-											/>
-										)
-									) }
-								</div>
-							) }
-					</div>
-					{ isCollapsible && (
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							icon={ isOpen ? chevronUp : chevronDown }
-							aria-expanded={ isOpen }
-							aria-controls={ bodyId }
-							aria-labelledby={ titleId }
-						/>
-					) }
-				</OriginalCardHeader>
-			) }
-			{ ( isOpen || ! withHeader ) && (
-				// If it doesn't have a header, keep it open.
-				// Otherwise, the card will not be visible.
-				<CardBody
-					id={ bodyId }
-					size={ sizeCardBody }
-					className="dataforms-layouts-card__field-control"
-					ref={ cardBodyRef }
+	const headerContent = (
+		<HeaderContent
+			data={ data }
+			fields={ fields }
+			label={ label }
+			layout={ layout }
+			isOpen={ isCollapsible ? !! isOpen : true }
+			touched={ touched }
+			validity={ validity }
+		/>
+	);
+
+	if ( withHeader && isCollapsible ) {
+		return (
+			<CollapsibleCard.Root
+				className="dataforms-layouts-card__field"
+				open={ isOpen }
+				onOpenChange={ handleOpenChange }
+			>
+				<CollapsibleCard.Header>
+					{ headerContent }
+				</CollapsibleCard.Header>
+				<CollapsibleCard.Content
+					ref={ contentRef }
 					onBlur={ handleBlur }
 				>
 					{ bodyContent }
-				</CardBody>
-			) }
-		</Card>
+				</CollapsibleCard.Content>
+			</CollapsibleCard.Root>
+		);
+	}
+
+	return (
+		<Card.Root className="dataforms-layouts-card__field">
+			{ withHeader && <Card.Header>{ headerContent }</Card.Header> }
+			<Card.Content ref={ contentRef } onBlur={ handleBlur }>
+				{ bodyContent }
+			</Card.Content>
+		</Card.Root>
 	);
 }

package/src/components/dataform-layouts/card/style.scss

@@ -1,15 +1,18 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/mixins" as *;
-
-.dataforms-layouts-card__field-header-label {
-	@include heading-large();
-}
 
 .dataforms-layouts-card__field {
 	width: 100%;
 }
 
+.dataforms-layouts-card__field-header-content {
+	min-height: 24px; // TODO: use size / height DS token when available
+}
+
+.dataforms-layouts-card__field-header-content-description {
+	display: contents;
+}
+
 .dataforms-layouts-card__field-description {
 	color: $gray-700;
 	display: block;

package/src/components/dataviews-bulk-actions/index.tsx

@@ -95,6 +95,7 @@ interface BulkSelectionCheckboxProps< Item > {
 	data: Item[];
 	actions: Action< Item >[];
 	getItemId: ( item: Item ) => string;
+	disableSelectAll?: boolean;
 }
 
 export function BulkSelectionCheckbox< Item >( {
@@ -103,6 +104,7 @@ export function BulkSelectionCheckbox< Item >( {
 	data,
 	actions,
 	getItemId,
+	disableSelectAll = false,
 }: BulkSelectionCheckboxProps< Item > ) {
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
@@ -118,7 +120,23 @@ export function BulkSelectionCheckbox< Item >( {
 			selection.includes( getItemId( item ) ) &&
 			selectableItems.includes( item )
 	);
+	const hasSelection = selection.length > 0;
 	const areAllSelected = selectedItems.length === selectableItems.length;
+
+	if ( disableSelectAll ) {
+		return (
+			<CheckboxControl
+				className="dataviews-view-table-selection-checkbox"
+				checked={ hasSelection }
+				disabled={ ! hasSelection }
+				onChange={ () => {
+					onChangeSelection( [] );
+				} }
+				aria-label={ __( 'Deselect all' ) }
+			/>
+		);
+	}
+
 	return (
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
@@ -153,6 +171,7 @@ interface ToolbarContentProps< Item > {
 	data: Item[];
 	actions: Action< Item >[];
 	getItemId: ( item: Item ) => string;
+	isInfiniteScroll: boolean;
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
@@ -241,6 +260,7 @@ function renderFooterContent< Item >(
 	data: Item[],
 	actions: Action< Item >[],
 	getItemId: ( item: Item ) => string,
+	isInfiniteScroll: boolean,
 	selection: string[],
 	actionsToShow: Action< Item >[],
 	selectedItems: Item[],
@@ -255,7 +275,8 @@ function renderFooterContent< Item >(
 	const message = getFooterMessage(
 		selection.length,
 		data.length,
-		paginationInfo.totalItems
+		paginationInfo.totalItems,
+		isInfiniteScroll
 	);
 	return (
 		<Stack
@@ -270,6 +291,7 @@ function renderFooterContent< Item >(
 				data={ data }
 				actions={ actions }
 				getItemId={ getItemId }
+				disableSelectAll={ isInfiniteScroll }
 			/>
 			<span className="dataviews-bulk-actions-footer__item-count">
 				{ message }
@@ -315,6 +337,7 @@ function FooterContent< Item >( {
 	onChangeSelection,
 	data,
 	getItemId,
+	isInfiniteScroll,
 	paginationInfo,
 }: ToolbarContentProps< Item > ) {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
@@ -365,6 +388,7 @@ function FooterContent< Item >( {
 			data,
 			actions,
 			getItemId,
+			isInfiniteScroll,
 			selection,
 			actionsToShow,
 			selectedItems,
@@ -378,6 +402,7 @@ function FooterContent< Item >( {
 			data,
 			actions,
 			getItemId,
+			isInfiniteScroll,
 			selection,
 			actionsToShow,
 			selectedItems,
@@ -398,6 +423,7 @@ export function BulkActionsFooter() {
 		onChangeSelection,
 		getItemId,
 		paginationInfo,
+		view,
 	} = useContext( DataViewsContext );
 	return (
 		<FooterContent
@@ -406,6 +432,7 @@ export function BulkActionsFooter() {
 			data={ data }
 			actions={ actions }
 			getItemId={ getItemId }
+			isInfiniteScroll={ !! view.infiniteScrollEnabled }
 			paginationInfo={ paginationInfo }
 		/>
 	);

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

@@ -57,9 +57,9 @@ type DataViewsContextType< Item > = {
 	config: { perPageSizes: number[] };
 	empty?: ReactNode;
 	hasInitiallyLoaded?: boolean;
-	hasInfiniteScrollHandler: boolean;
 	itemListLabel?: string;
 	onReset?: ( () => void ) | false;
+	intersectionObserver?: IntersectionObserver | null;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -86,10 +86,10 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	isShowingFilter: false,
 	setIsShowingFilter: () => {},
 	hasInitiallyLoaded: false,
-	hasInfiniteScrollHandler: false,
 	config: {
 		perPageSizes: [],
 	},
+	intersectionObserver: null,
 } );
 
 DataViewsContext.displayName = 'DataViewsContext';

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

@@ -31,14 +31,9 @@ export default function DataViewsFooter() {
 		actions = EMPTY_ARRAY,
 		isLoading,
 		hasInitiallyLoaded,
-		hasInfiniteScrollHandler,
 	} = useContext( DataViewsContext );
 
-	const isRefreshing =
-		!! isLoading &&
-		hasInitiallyLoaded &&
-		! hasInfiniteScrollHandler &&
-		!! data?.length;
+	const isRefreshing = !! isLoading && hasInitiallyLoaded && !! data?.length;
 
 	const isDelayedRefreshing = useDelayedLoading( !! isRefreshing );