@wordpress/dataviews 11.3.1-next.v.0 → 12.0.0

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

@@ -22,7 +22,7 @@ function Header( { title }: { title: string } ) {
 		<Stack
 			direction="column"
 			className="dataforms-layouts-row__header"
-			gap="md"
+			gap="lg"
 		>
 			<Stack direction="row" align="center">
 				<Heading level={ 2 } size={ 13 }>
@@ -42,6 +42,7 @@ export default function FormRowField< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const layout = field.layout as NormalizedRowLayout;
@@ -57,7 +58,7 @@ export default function FormRowField< Item >( {
 				{ ! hideLabelFromVision && field.label && (
 					<Header title={ field.label } />
 				) }
-				<Stack direction="row" align={ layout.alignment } gap="md">
+				<Stack direction="row" align={ layout.alignment } gap="lg">
 					<DataFormLayout
 						data={ data }
 						form={ form }
@@ -76,6 +77,7 @@ export default function FormRowField< Item >( {
 									field={ childField }
 									onChange={ onChange }
 									hideLabelFromVision={ hideLabelFromVision }
+									markWhenOptional={ markWhenOptional }
 									validity={ childFieldValidity }
 								/>
 							</div>
@@ -98,6 +100,7 @@ export default function FormRowField< Item >( {
 					data={ data }
 					field={ field }
 					onChange={ onChange }
+					markWhenOptional={ markWhenOptional }
 					validity={ validity }
 				/>
 			</div>

package/src/components/dataform-layouts/test/normalize-form.ts

@@ -139,6 +139,7 @@ describe( 'normalizeFormFields', () => {
 					type: 'panel',
 					openAs: 'dropdown',
 					summary: [],
+					editVisibility: 'on-hover',
 				},
 				fields: [
 					{
@@ -148,6 +149,7 @@ describe( 'normalizeFormFields', () => {
 							labelPosition: 'side',
 							openAs: 'dropdown',
 							summary: [],
+							editVisibility: 'on-hover',
 						},
 					},
 				],
@@ -166,6 +168,7 @@ describe( 'normalizeFormFields', () => {
 					type: 'panel',
 					openAs: 'dropdown',
 					summary: [],
+					editVisibility: 'on-hover',
 				},
 				fields: [
 					{
@@ -175,6 +178,7 @@ describe( 'normalizeFormFields', () => {
 							labelPosition: 'top',
 							openAs: 'dropdown',
 							summary: [],
+							editVisibility: 'on-hover',
 						},
 					},
 				],
@@ -358,6 +362,7 @@ describe( 'normalizeFormFields', () => {
 							labelPosition: 'side',
 							openAs: 'dropdown',
 							summary: [],
+							editVisibility: 'on-hover',
 						},
 					},
 				],

package/src/components/dataform-layouts/validation-badge.tsx

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { Badge } from '@wordpress/ui';
+import { sprintf, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { FieldValidity } from '../../types';
+
+function countInvalidFields( validity: FieldValidity | undefined ): number {
+	if ( ! validity ) {
+		return 0;
+	}
+
+	let count = 0;
+	const validityRules = Object.keys( validity ).filter(
+		( key ) => key !== 'children'
+	);
+
+	for ( const key of validityRules ) {
+		const rule = validity[ key as keyof Omit< FieldValidity, 'children' > ];
+		if ( rule?.type === 'invalid' ) {
+			count++;
+		}
+	}
+
+	// Count children recursively
+	if ( validity.children ) {
+		for ( const childValidity of Object.values( validity.children ) ) {
+			count += countInvalidFields( childValidity );
+		}
+	}
+
+	return count;
+}
+
+export default function ValidationBadge( {
+	validity,
+}: {
+	validity: FieldValidity | undefined;
+} ) {
+	const invalidCount = countInvalidFields( validity );
+
+	if ( invalidCount === 0 ) {
+		return null;
+	}
+
+	return (
+		<Badge intent="high">
+			{ sprintf(
+				/* translators: %d: Number of fields that need attention */
+				_n(
+					'%d field needs attention',
+					'%d fields need attention',
+					invalidCount
+				),
+				invalidCount
+			) }
+		</Badge>
+	);
+}

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

@@ -261,7 +261,7 @@ function renderFooterContent< Item >(
 		<Stack
 			direction="row"
 			className="dataviews-bulk-actions-footer__container"
-			gap="sm"
+			gap="md"
 			align="center"
 		>
 			<BulkSelectionCheckbox
@@ -277,7 +277,7 @@ function renderFooterContent< Item >(
 			<Stack
 				direction="row"
 				className="dataviews-bulk-actions-footer__action-buttons"
-				gap="2xs"
+				gap="xs"
 			>
 				{ actionsToShow.map( ( action ) => {
 					return (
@@ -320,7 +320,7 @@ function FooterContent< Item >( {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
 		null
 	);
-	const footerContentRef = useRef< JSX.Element | null >( null );
+	const footerContentRef = useRef< React.JSX.Element >( undefined );
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	const bulkActions = useMemo(
@@ -359,7 +359,7 @@ function FooterContent< Item >( {
 	);
 	if ( ! actionInProgress ) {
 		if ( footerContentRef.current ) {
-			footerContentRef.current = null;
+			footerContentRef.current = undefined;
 		}
 		return renderFooterContent(
 			data,

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

@@ -58,6 +58,7 @@ type DataViewsContextType< Item > = {
 	empty?: ReactNode;
 	hasInfiniteScrollHandler: boolean;
 	itemListLabel?: string;
+	onReset?: ( () => void ) | false;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {

package/src/components/dataviews-filters/filter.tsx

@@ -51,7 +51,7 @@ interface OperatorSelectorProps {
 }
 
 interface FilterProps extends OperatorSelectorProps {
-	addFilterRef: RefObject< HTMLButtonElement >;
+	addFilterRef: RefObject< HTMLButtonElement | null >;
 	openedFilter: string | null;
 	fields: NormalizedField< any >[];
 }
@@ -94,7 +94,7 @@ function OperatorSelector( {
 		operatorOptions.length > 1 && (
 			<Stack
 				direction="row"
-				gap="xs"
+				gap="sm"
 				justify="flex-start"
 				className="dataviews-filters__summary-operators-container"
 				align="center"

package/src/components/dataviews-filters/filters.tsx

@@ -62,7 +62,7 @@ function Filters( { className }: { className?: string } ) {
 		<Stack
 			direction="row"
 			justify="flex-start"
-			gap="xs"
+			gap="sm"
 			style={ { width: 'fit-content' } }
 			wrap="wrap"
 			className={ className }

package/src/components/dataviews-filters/search-widget.tsx

@@ -206,7 +206,12 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 							selected={ currentValue.includes( element.value ) }
 						/>
 					) }
-					<span>{ element.label }</span>
+					<span
+						className="dataviews-filters__search-widget-listitem-value"
+						title={ element.label }
+					>
+						{ element.label }
+					</span>
 				</Composite.Hover>
 			) ) }
 		</Composite>
@@ -307,7 +312,10 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 									) }
 								/>
 							) }
-							<span>
+							<span
+								className="dataviews-filters__search-widget-listitem-value"
+								title={ element.label }
+							>
 								<Ariakit.ComboboxItemValue
 									className="dataviews-filters__search-widget-filter-combobox-item-value"
 									value={ element.label }

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

@@ -231,6 +231,13 @@
 		}
 	}
 
+	.dataviews-filters__search-widget-listitem-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
 	.dataviews-filters__search-widget-listitem-description {
 		display: block;
 		overflow: hidden;
@@ -275,6 +282,7 @@
 
 	.dataviews-filters__search-widget-listitem-multi-selection {
 		--checkbox-size: 24px; // Width & height for small viewports.
+		flex-shrink: 0;
 
 		@include checkbox-control;
 		position: relative;

package/src/components/dataviews-filters/toggle.tsx

@@ -92,7 +92,7 @@ function FilterVisibilityToggle( {
 	filtersCount,
 	children,
 }: {
-	buttonRef: React.RefObject< HTMLButtonElement >;
+	buttonRef: React.RefObject< HTMLButtonElement | null >;
 	filtersCount?: number;
 	children: React.ReactNode;
 } ) {

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

@@ -42,7 +42,7 @@ export default function DataViewsFooter() {
 				justify="end"
 				align="center"
 				className="dataviews-footer"
-				gap="xs"
+				gap="sm"
 			>
 				{ hasBulkActions && <BulkActionsFooter /> }
 				<DataViewsPagination />

package/src/components/dataviews-layouts/activity/activity-item.tsx

@@ -100,9 +100,9 @@ function ActivityItem< Item >(
 	const verticalGap = useMemo( () => {
 		switch ( density ) {
 			case 'comfortable':
-				return 'sm';
+				return 'md';
 			default:
-				return 'xs';
+				return 'sm';
 		}
 	}, [ density ] );
 
@@ -121,10 +121,10 @@ function ActivityItem< Item >(
 				density === 'comfortable' && 'is-comfortable'
 			) }
 		>
-			<Stack direction="row" gap="md" justify="start" align="flex-start">
+			<Stack direction="row" gap="lg" justify="start" align="flex-start">
 				<Stack
 					direction="column"
-					gap="2xs"
+					gap="xs"
 					align="center"
 					className="dataviews-view-activity__item-type"
 				>

package/src/components/dataviews-layouts/activity/index.tsx

@@ -60,7 +60,7 @@ export default function ViewActivity< Item >(
 	// Render grouped activity
 	if ( hasData && groupField && dataByGroup ) {
 		return (
-			<Stack direction="column" gap="xs" className={ wrapperClassName }>
+			<Stack direction="column" gap="sm" className={ wrapperClassName }>
 				{ groupedEntries.map(
 					( [ groupName, groupData ]: [ string, Item[] ] ) => (
 						<ActivityGroup< Item >

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -101,19 +101,23 @@ const GridItem = forwardRef( function GridItem< Item >(
 	const id = getItemId( item );
 	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
-	const renderedMediaField = mediaField?.render ? (
+	const mediaPlaceholder = (
+		<span className="dataviews-view-grid__media-placeholder" />
+	);
+	const rendersMediaField = showMedia && mediaField?.render;
+	const renderedMediaField = rendersMediaField ? (
 		<mediaField.render
 			item={ item }
 			field={ mediaField }
 			config={ config }
 		/>
-	) : null;
+	) : (
+		mediaPlaceholder
+	);
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
 			<titleField.render item={ item } field={ titleField } />
 		) : null;
-	const shouldRenderMedia = showMedia && renderedMediaField;
-
 	let mediaA11yProps;
 	let titleA11yProps;
 	if ( isItemClickable( item ) && onClickItem ) {
@@ -159,19 +163,20 @@ const GridItem = forwardRef( function GridItem< Item >(
 				}
 			} }
 		>
-			{ shouldRenderMedia && (
-				<ItemClickWrapper
-					item={ item }
-					isItemClickable={ isItemClickable }
-					onClickItem={ onClickItem }
-					renderItemLink={ renderItemLink }
-					className="dataviews-view-grid__media"
-					{ ...mediaA11yProps }
-				>
-					{ renderedMediaField }
-				</ItemClickWrapper>
-			) }
-			{ hasBulkActions && shouldRenderMedia && (
+			<ItemClickWrapper
+				item={ item }
+				isItemClickable={ isItemClickable }
+				onClickItem={ onClickItem }
+				renderItemLink={ renderItemLink }
+				className={ clsx( 'dataviews-view-grid__media', {
+					'dataviews-view-grid__media--placeholder':
+						! rendersMediaField,
+				} ) }
+				{ ...mediaA11yProps }
+			>
+				{ renderedMediaField }
+			</ItemClickWrapper>
+			{ hasBulkActions && (
 				<DataViewsSelectionCheckbox
 					item={ item }
 					selection={ selection }
@@ -181,17 +186,13 @@ const GridItem = forwardRef( function GridItem< Item >(
 					disabled={ ! hasBulkAction }
 				/>
 			) }
-			{ ! showTitle && shouldRenderMedia && !! actions?.length && (
+			{ !! actions?.length && (
 				<div className="dataviews-view-grid__media-actions">
 					<ItemActions item={ item } actions={ actions } isCompact />
 				</div>
 			) }
 			{ showTitle && (
-				<Stack
-					direction="row"
-					gap="xs"
-					className="dataviews-view-grid__title-actions"
-				>
+				<div className="dataviews-view-grid__title">
 					<ItemClickWrapper
 						item={ item }
 						isItemClickable={ isItemClickable }
@@ -199,19 +200,18 @@ const GridItem = forwardRef( function GridItem< Item >(
 						renderItemLink={ renderItemLink }
 						className="dataviews-view-grid__title-field dataviews-title-field"
 						{ ...titleA11yProps }
+						title={
+							titleField?.getValueFormatted( {
+								item,
+								field: titleField,
+							} ) || undefined
+						}
 					>
 						{ renderedTitleField }
 					</ItemClickWrapper>
-					{ !! actions?.length && (
-						<ItemActions
-							item={ item }
-							actions={ actions }
-							isCompact
-						/>
-					) }
-				</Stack>
+				</div>
 			) }
-			<Stack direction="column" gap="2xs">
+			<Stack direction="column" gap="xs">
 				{ showDescription && descriptionField?.render && (
 					<descriptionField.render
 						item={ item }
@@ -222,7 +222,7 @@ const GridItem = forwardRef( function GridItem< Item >(
 					<Stack
 						direction="row"
 						className="dataviews-view-grid__badge-fields"
-						gap="xs"
+						gap="sm"
 						wrap="wrap"
 						align="top"
 						justify="flex-start"
@@ -246,7 +246,7 @@ const GridItem = forwardRef( function GridItem< Item >(
 					<Stack
 						direction="column"
 						className="dataviews-view-grid__fields"
-						gap="2xs"
+						gap="xs"
 					>
 						{ regularFields.map( ( field ) => {
 							return (
@@ -287,7 +287,7 @@ const GridItem = forwardRef( function GridItem< Item >(
 	props: GridItemProps< Item > & {
 		ref?: React.ForwardedRef< HTMLDivElement >;
 	}
-) => JSX.Element;
+) => React.ReactNode;
 
 interface CompositeGridProps< Item > {
 	data: Item[];

package/src/components/dataviews-layouts/grid/index.tsx

@@ -56,13 +56,13 @@ function ViewGrid< Item >( {
 			{
 				// Render multiple groups.
 				hasData && groupField && dataByGroup && (
-					<Stack direction="column" gap="md">
+					<Stack direction="column" gap="lg">
 						{ Array.from( dataByGroup.entries() ).map(
 							( [ groupName, groupItems ] ) => (
 								<Stack
 									direction="column"
 									key={ groupName }
-									gap="xs"
+									gap="sm"
 								>
 									<h3 className="dataviews-view-grid__group-header">
 										{ view.groupBy?.showLabel === false

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

@@ -46,7 +46,7 @@
 		justify-content: flex-start;
 		position: relative;
 
-		.dataviews-view-grid__title-actions {
+		.dataviews-view-grid__title {
 			padding: $grid-unit-10 0 $grid-unit-05;
 		}
 
@@ -87,6 +87,10 @@
 		overflow: hidden;
 		position: relative;
 
+		&.dataviews-view-grid__media--placeholder {
+			aspect-ratio: 3/1;
+		}
+
 		img {
 			object-fit: cover;
 			width: 100%;
@@ -104,6 +108,15 @@
 			border-radius: $grid-unit-05;
 			pointer-events: none;
 		}
+
+		.dataviews-view-grid__media-placeholder {
+			width: 100%;
+			height: 100%;
+			display: block;
+			border-radius: $radius-medium;
+			box-shadow: none;
+			background: $gray-100;
+		}
 	}
 
 	.dataviews-view-grid__fields {
@@ -185,6 +198,7 @@
 
 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
 	position: absolute;
+	z-index: 1;
 	top: $grid-unit-05;
 	opacity: 0;
 	right: $grid-unit-05;

package/src/components/dataviews-layouts/list/index.tsx

@@ -219,7 +219,7 @@ function ListItem< Item >( {
 	const usedActions = eligibleActions?.length > 0 && (
 		<Stack
 			direction="row"
-			gap="sm"
+			gap="md"
 			className="dataviews-view-list__item-actions"
 		>
 			{ primaryAction && (
@@ -312,22 +312,21 @@ function ListItem< Item >( {
 				</div>
 				<Stack
 					direction="row"
-					gap="sm"
+					gap="md"
 					justify="start"
 					align="flex-start"
-					style={ { flex: 1 } }
+					style={ { flex: 1, minWidth: 0 } }
 				>
 					{ renderedMediaField }
 					<Stack
 						direction="column"
-						gap="2xs"
+						gap="xs"
 						className="dataviews-view-list__field-wrapper"
 					>
 						<Stack direction="row" align="center">
 							<div
-								className="dataviews-title-field"
+								className="dataviews-title-field dataviews-view-list__title-field"
 								id={ labelId }
-								style={ { flex: 1 } }
 							>
 								{ renderedTitleField }
 							</div>
@@ -551,7 +550,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 			>
 				<Stack
 					direction="column"
-					gap="md"
+					gap="lg"
 					className={ clsx( 'dataviews-view-list', className ) }
 				>
 					{ Array.from( dataByGroup.entries() ).map(
@@ -559,7 +558,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 							<Stack
 								direction="column"
 								key={ groupName }
-								gap="xs"
+								gap="sm"
 							>
 								<h3 className="dataviews-view-list__group-header">
 									{ view.groupBy?.showLabel === false

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

@@ -171,6 +171,7 @@ div.dataviews-view-list {
 	.dataviews-view-list__field-wrapper {
 		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
+		min-width: 0;
 	}
 
 	.dataviews-view-list__field {

package/src/components/dataviews-layouts/picker-grid/index.tsx

@@ -145,7 +145,7 @@ function GridItem< Item >( {
 					</div>
 				</Stack>
 			) }
-			<Stack direction="column" gap="2xs">
+			<Stack direction="column" gap="xs">
 				{ showDescription && descriptionField?.render && (
 					<descriptionField.render
 						item={ item }
@@ -156,7 +156,7 @@ function GridItem< Item >( {
 					<Stack
 						direction="row"
 						className="dataviews-view-picker-grid__badge-fields"
-						gap="xs"
+						gap="sm"
 						wrap="wrap"
 						align="top"
 						justify="flex-start"
@@ -180,7 +180,7 @@ function GridItem< Item >( {
 					<Stack
 						direction="column"
 						className="dataviews-view-picker-grid__fields"
-						gap="2xs"
+						gap="xs"
 					>
 						{ regularFields.map( ( field ) => {
 							return (
@@ -236,7 +236,7 @@ function GridGroup< Item >( {
 		<Stack
 			direction="column"
 			key={ groupName }
-			gap="xs"
+			gap="sm"
 			role="group"
 			aria-labelledby={ headerId }
 		>
@@ -342,7 +342,7 @@ function ViewPickerGrid< Item >( {
 						render={ ( { children, ...props } ) => (
 							<Stack
 								direction="column"
-								gap="md"
+								gap="lg"
 								children={ children }
 								{ ...props }
 							/>

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -224,7 +224,7 @@ function ViewPickerTable< Item >( {
 	const headerMenuRefs = useRef<
 		Map< string, { node: HTMLButtonElement; fallback: string } >
 	>( new Map() );
-	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >( undefined );
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
 		useState< HTMLButtonElement >();
 	const isMultiselect = useIsMultiselectPicker( actions ) ?? false;

package/src/components/dataviews-layouts/table/column-primary.tsx

@@ -38,7 +38,7 @@ function ColumnPrimary< Item >( {
 	isItemClickable: ( item: Item ) => boolean;
 } ) {
 	return (
-		<Stack direction="row" gap="sm" align="flex-start" justify="flex-start">
+		<Stack direction="row" gap="md" align="flex-start" justify="flex-start">
 			{ mediaField && (
 				<ItemClickWrapper
 					item={ item }

package/src/components/dataviews-layouts/table/index.tsx

@@ -290,7 +290,7 @@ function ViewTable< Item >( {
 	const headerMenuRefs = useRef<
 		Map< string, { node: HTMLButtonElement; fallback: string } >
 	>( new Map() );
-	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >( undefined );
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
 		useState< HTMLButtonElement >();
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );

package/src/components/dataviews-layouts/utils/item-click-wrapper.tsx

@@ -66,6 +66,7 @@ export function ItemClickWrapper< Item >( {
 		} & ComponentProps< 'a' >
 	) => ReactElement;
 	className?: string;
+	title?: string;
 	children: ReactNode;
 } ) {
 	// Always render a wrapper element so layout and styling relying on the wrapper