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

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/dataform-layouts/panel/style.scss

@@ -8,7 +8,7 @@
 	display: flex;
 	width: 100%;
 	min-height: $grid-unit-30;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	align-items: flex-start;
 	border-radius: $radius-small;
 	isolation: isolate;
@@ -44,7 +44,7 @@
 
 		.dataforms-layouts-panel__field-control {
 			color: $gray-700;
-			font-weight: var(--wpds-font-weight-regular);
+			font-weight: var(--wpds-typography-font-weight-regular);
 		}
 	}
 }
@@ -92,7 +92,6 @@
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
 	color: $gray-700;
-	text-transform: capitalize;
 
 	.components-base-control__label {
 		display: inline;
@@ -123,12 +122,12 @@
 	flex-grow: 1;
 	min-width: 0;
 	min-height: $grid-unit-30;
-	line-height: var(--wpds-font-line-height-md);
+	line-height: var(--wpds-typography-line-height-md);
 	display: flex;
 	align-items: center;
 	overflow: hidden;
 	word-break: break-word;
-	font-weight: var(--wpds-font-weight-medium);
+	font-weight: var(--wpds-typography-font-weight-medium);
 
 	> * {
 		min-width: 0;

package/src/components/dataform-layouts/panel/summary-button.tsx

@@ -157,7 +157,6 @@ export default function SummaryButton< Item >( {
 				<Button
 					className="dataforms-layouts-panel__field-trigger-icon"
 					label={ ariaLabel }
-					showTooltip={ false }
 					icon={ pencil }
 					size="small"
 					aria-expanded={ ariaExpanded }

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

@@ -15,7 +15,7 @@ import type {
 	View,
 	Action,
 	NormalizedField,
-	SupportedLayouts,
+	NormalizedSupportedLayouts,
 	NormalizedFilter,
 } from '../../types';
 import type { SetSelection } from '../../types/private';
@@ -50,16 +50,16 @@ type DataViewsContextType< Item > = {
 	resizeObserverRef:
 		| ( ( element?: HTMLDivElement | null ) => void )
 		| React.RefObject< HTMLDivElement >;
-	defaultLayouts: SupportedLayouts;
+	defaultLayouts: NormalizedSupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
 	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-filters/input-widget.tsx

@@ -64,6 +64,10 @@ export default function InputWidget( {
 				...currentField,
 				// Deactivate validation for filters.
 				isValid: {} satisfies NormalizedRules< any >,
+				// Filter controls are always enabled.
+				isDisabled: () => false,
+				// Filter controls are always visible.
+				isVisible: () => true,
 				// Configure getValue/setValue as if Item was a plain object.
 				getValue: ( { item }: { item: any } ) =>
 					item[ currentField.id ],

package/src/components/dataviews-filters/style.scss

@@ -76,7 +76,7 @@
 	.dataviews-filters__summary-chip {
 		border-radius: $grid-unit-20;
 		border: $border-width solid transparent;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		padding: $grid-unit-05 $grid-unit-15;
 		min-height: $grid-unit-40;
 		background: $gray-100;
@@ -137,7 +137,7 @@
 		align-items: center;
 		justify-content: center;
 		background: transparent;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		svg {
 			fill: $gray-700;

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 );
 

package/src/components/dataviews-layouts/activity/style.scss

@@ -4,7 +4,7 @@
 
 .dataviews-view-activity {
 	margin: 0 0 auto;
-	padding: $grid-unit-10 $grid-unit-30;
+	padding: 0 $grid-unit-30;
 
 	.dataviews-view-activity__group-header {
 		font-size: $font-size-large;
@@ -35,7 +35,7 @@
 			overflow: hidden;
 
 			&--clickable {
-				cursor: pointer;
+				cursor: var(--wpds-cursor-control);
 
 				&:focus-visible {
 					outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
@@ -104,7 +104,7 @@
 	.dataviews-view-activity__item {
 		&.is-compact {
 			.dataviews-view-activity__item-type {
-				width: $grid-unit-10;
+				width: $grid-unit-15;
 
 				&::before {
 					height: $grid-unit-15;