@wordpress/dataviews 12.1.1-next.v.202602241322.0 → 13.0.0

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

@@ -33,6 +33,7 @@ import { Stack } from '@wordpress/ui';
 import { unlock } from '../../../lock-unlock';
 import { ActionsMenuGroup, ActionModal } from '../../dataviews-item-actions';
 import DataViewsContext from '../../dataviews-context';
+import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
 import type {
 	Action,
 	NormalizedField,
@@ -216,6 +217,10 @@ function ListItem< Item >( {
 			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
+	const renderDescription = showDescription && descriptionField?.render;
+	// When we have only the media and title fields, we want to center them vertically in the list item.
+	const hasOnlyMediaAndTitle =
+		!! renderedMediaField && ! renderDescription && ! otherFields.length;
 	const usedActions = eligibleActions?.length > 0 && (
 		<Stack
 			direction="row"
@@ -314,7 +319,7 @@ function ListItem< Item >( {
 					direction="row"
 					gap="md"
 					justify="start"
-					align="flex-start"
+					align={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }
 					style={ { flex: 1, minWidth: 0 } }
 				>
 					{ renderedMediaField }
@@ -332,7 +337,7 @@ function ListItem< Item >( {
 							</div>
 							{ usedActions }
 						</Stack>
-						{ showDescription && descriptionField?.render && (
+						{ renderDescription && (
 							<div className="dataviews-view-list__field">
 								<descriptionField.render
 									item={ item }
@@ -389,6 +394,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		empty,
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
+	const isDelayedLoading = useDelayedLoading( !! isLoading );
 
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
@@ -425,6 +431,8 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		string | null | undefined
 	>( undefined );
 
+	const compositeRef = useRef< HTMLDivElement >( null );
+
 	// Update the active composite item when the selected item changes.
 	useEffect( () => {
 		if ( selectedItem ) {
@@ -463,7 +471,17 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 			const targetCompositeItemId = generateCompositeId( itemIdPrefix );
 
 			setActiveCompositeId( targetCompositeItemId );
-			document.getElementById( targetCompositeItemId )?.focus();
+			// The active composite item is controlled state that
+			// can update without needing a focus move (e.g., searching
+			// can trigger an active ID update). Only move DOM focus
+			// when it's already within the list.
+			if (
+				compositeRef.current?.contains(
+					compositeRef.current.ownerDocument.activeElement
+				)
+			) {
+				document.getElementById( targetCompositeItemId )?.focus();
+			}
 		},
 		[ data, generateCompositeItemIdPrefix ]
 	);
@@ -511,36 +529,30 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		[ selectCompositeItem, activeItemIndex ]
 	);
 
-	const hasData = data?.length;
+	const hasData = !! data?.length;
+	const groupField = view.groupBy?.field
+		? fields.find( ( field ) => field.id === view.groupBy?.field )
+		: null;
+	const dataByGroup =
+		hasData && groupField ? getDataByGroup( data, groupField ) : null;
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 	if ( ! hasData ) {
 		return (
 			<div
-				className={ clsx( {
-					'dataviews-loading': isLoading,
-					'dataviews-no-results': ! hasData && ! isLoading,
+				className={ clsx( 'dataviews-no-results', {
+					'is-refreshing': isDelayedLoading,
 				} ) }
 			>
-				{ ! hasData &&
-					( isLoading ? (
-						<p>
-							<Spinner />
-						</p>
-					) : (
-						empty
-					) ) }
+				{ empty }
 			</div>
 		);
 	}
 
-	const groupField = view.groupBy?.field
-		? fields.find( ( field ) => field.id === view.groupBy?.field )
-		: null;
-	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
-
 	// Render data grouped by field
 	if ( hasData && groupField && dataByGroup ) {
 		return (
 			<Composite
+				ref={ compositeRef }
 				id={ `${ baseId }` }
 				render={ <div /> }
 				className="dataviews-view-list__group"
@@ -606,6 +618,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	return (
 		<>
 			<Composite
+				ref={ compositeRef }
 				id={ baseId }
 				render={ <div /> }
 				className={ clsx( 'dataviews-view-list', className, {
@@ -614,10 +627,15 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 						[ 'compact', 'comfortable' ].includes(
 							view.layout.density
 						),
+					'is-refreshing': ! isInfiniteScroll && isDelayedLoading,
 				} ) }
 				role={ view.infiniteScrollEnabled ? 'feed' : 'grid' }
 				activeId={ activeCompositeId }
 				setActiveId={ setActiveCompositeId }
+				// @ts-ignore
+				inert={
+					! isInfiniteScroll && !! isLoading ? 'true' : undefined
+				}
 			>
 				{ data.map( ( item, index ) => {
 					const id = generateCompositeItemIdPrefix( item );
@@ -646,7 +664,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 					);
 				} ) }
 			</Composite>
-			{ hasData && isLoading && (
+			{ isInfiniteScroll && isLoading && (
 				<p className="dataviews-loading-more">
 					<Spinner />
 				</p>

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

@@ -1,5 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
+@use "../../../dataviews/style" as *;
 
 div.dataviews-view-list {
 	list-style-type: none;
@@ -169,7 +170,6 @@ 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;
 	}
@@ -224,10 +224,6 @@ div.dataviews-view-list {
 				height: $grid-unit-05 * 8;
 			}
 
-			.dataviews-view-list__field-wrapper {
-				min-height: $grid-unit-05 * 8;
-			}
-
 			.dataviews-view-list__fields {
 				gap: $grid-unit-10;
 				row-gap: $grid-unit-05;
@@ -256,10 +252,6 @@ div.dataviews-view-list {
 				height: $grid-unit-05 * 16;
 			}
 
-			.dataviews-view-list__field-wrapper {
-				min-height: $grid-unit-05 * 16;
-			}
-
 			.dataviews-view-list__fields {
 				gap: $grid-unit-20;
 				row-gap: $grid-unit-10;
@@ -271,6 +263,10 @@ div.dataviews-view-list {
 			}
 		}
 	}
+
+	&.is-refreshing {
+		@include dataviews-refreshing();
+	}
 }
 
 .dataviews-view-list__group-header {

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

@@ -42,6 +42,20 @@ import ColumnPrimary from './column-primary';
 import { useIsHorizontalScrollEnd } from './use-is-horizontal-scroll-end';
 import getDataByGroup from '../utils/get-data-by-group';
 import { PropertiesSection } from '../../dataviews-view-config/properties-section';
+import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
+
+function getEffectiveAlign(
+	explicitAlign: 'start' | 'center' | 'end' | undefined,
+	fieldType: string | undefined
+): 'start' | 'center' | 'end' | undefined {
+	if ( explicitAlign ) {
+		return explicitAlign;
+	}
+	if ( fieldType === 'integer' || fieldType === 'number' ) {
+		return 'end';
+	}
+	return undefined;
+}
 
 interface TableColumnFieldProps< Item > {
 	fields: NormalizedField< Item >[];
@@ -225,6 +239,8 @@ function TableRow< Item >( {
 				// Explicit picks the supported styles.
 				const { width, maxWidth, minWidth, align } =
 					view.layout?.styles?.[ column ] ?? {};
+				const field = fields.find( ( f ) => f.id === column );
+				const effectiveAlign = getEffectiveAlign( align, field?.type );
 
 				return (
 					<td
@@ -239,7 +255,7 @@ function TableRow< Item >( {
 							fields={ fields }
 							item={ item }
 							column={ column }
-							align={ align }
+							align={ effectiveAlign }
 						/>
 					</td>
 				);
@@ -287,13 +303,13 @@ function ViewTable< Item >( {
 	empty,
 }: ViewTableProps< Item > ) {
 	const { containerRef } = useContext( DataViewsContext );
+	const isDelayedLoading = useDelayedLoading( isLoading );
 	const headerMenuRefs = useRef<
 		Map< string, { node: HTMLButtonElement; fallback: string } >
 	>( new Map() );
 	const headerMenuToFocusRef = useRef< HTMLButtonElement >( undefined );
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
 		useState< HTMLButtonElement >();
-	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
 	const [ contextMenuAnchor, setContextMenuAnchor ] = useState< {
 		getBoundingClientRect: () => DOMRect;
 	} | null >( null );
@@ -312,6 +328,8 @@ function ViewTable< Item >( {
 		enabled: !! actions?.length,
 	} );
 
+	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
+
 	if ( nextHeaderMenuToFocus ) {
 		// If we need to force focus, we short-circuit rendering here
 		// to prevent any additional work while we handle that.
@@ -382,6 +400,18 @@ function ViewTable< Item >( {
 		};
 	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 	const isRtl = isRTL();
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( 'dataviews-no-results', {
+					'is-refreshing': isDelayedLoading,
+				} ) }
+				id={ tableNoticeId }
+			>
+				{ empty }
+			</div>
+		);
+	}
 
 	return (
 		<>
@@ -393,10 +423,13 @@ function ViewTable< Item >( {
 							view.layout.density
 						),
 					'has-bulk-actions': hasBulkActions,
+					'is-refreshing': ! isInfiniteScroll && isDelayedLoading,
 				} ) }
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
 				role={ isInfiniteScroll ? 'feed' : undefined }
+				// @ts-ignore Reason: inert is a recent HTML attribute
+				inert={ ! isInfiniteScroll && isLoading ? 'true' : undefined }
 			>
 				<colgroup>
 					{ hasBulkActions && (
@@ -411,7 +444,7 @@ function ViewTable< Item >( {
 							className={ clsx(
 								`dataviews-view-table__col-${ column }`,
 								{
-									'dataviews-view-table__col-expand':
+									'dataviews-view-table__col-first-expand':
 										! hasPrimaryColumn &&
 										index === columns.length - 1,
 								}
@@ -483,6 +516,13 @@ function ViewTable< Item >( {
 							// Explicit picks the supported styles.
 							const { width, maxWidth, minWidth, align } =
 								view.layout?.styles?.[ column ] ?? {};
+							const field = fields.find(
+								( f ) => f.id === column
+							);
+							const effectiveAlign = getEffectiveAlign(
+								align,
+								field?.type
+							);
 							const canInsertOrMove =
 								view.layout?.enableMoving ?? true;
 							return (
@@ -492,7 +532,7 @@ function ViewTable< Item >( {
 										width,
 										maxWidth,
 										minWidth,
-										textAlign: align,
+										textAlign: effectiveAlign,
 									} }
 									aria-sort={
 										view.sort?.direction &&
@@ -634,27 +674,13 @@ function ViewTable< Item >( {
 					</tbody>
 				) }
 			</table>
-			<div
-				className={ clsx( {
-					'dataviews-loading': isLoading,
-					'dataviews-no-results': ! hasData && ! isLoading,
-				} ) }
-				id={ tableNoticeId }
-			>
-				{ ! hasData &&
-					( isLoading ? (
-						<p>
-							<Spinner />
-						</p>
-					) : (
-						empty
-					) ) }
-				{ hasData && isLoading && (
+			{ isInfiniteScroll && isLoading && (
+				<div className="dataviews-loading" id={ tableNoticeId }>
 					<p className="dataviews-loading-more">
 						<Spinner />
 					</p>
-				) }
-			</div>
+				</div>
+			) }
 		</>
 	);
 }

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

@@ -2,6 +2,7 @@
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
+@use "../../../dataviews/style" as *;
 
 .dataviews-view-table {
 	width: 100%;
@@ -176,6 +177,7 @@
 
 			&.dataviews-view-table__cell-align-end {
 				justify-content: flex-end;
+				font-variant-numeric: tabular-nums;
 			}
 
 			&.dataviews-view-table__cell-align-center {
@@ -309,3 +311,7 @@
 .dataviews-view-table col[class^="dataviews-view-table__col-"]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
 	width: 1%;
 }
+
+.dataviews-view-table.is-refreshing {
+	@include dataviews-refreshing();
+}

package/src/dataform/stories/layout-card.tsx

@@ -152,7 +152,7 @@ const LayoutCardComponent = ( {
 		isCollapsible: collapsible,
 		isOpened: opened,
 	}: {
-		summary?: string | { id: string; visibility: 'always' }[];
+		summary?: string | string[] | { id: string; visibility: 'always' }[];
 		withSummary?: boolean;
 		withHeader?: boolean;
 		isCollapsible?: boolean;
@@ -178,7 +178,7 @@ const LayoutCardComponent = ( {
 				{
 					id: 'customerCard',
 					layout: getCardLayoutFromStoryArgs( {
-						summary: 'plan-summary',
+						summary: [ 'name', 'plan-summary' ],
 						withHeader: withHeader ?? true,
 						withSummary,
 						isCollapsible,

package/src/dataform/stories/layout-panel.tsx

@@ -75,6 +75,10 @@ const fields: Field< SamplePost >[] = [
 			{ value: 2, label: 'John' },
 			{ value: 3, label: 'Alice' },
 			{ value: 4, label: 'Bob' },
+			{
+				value: 5,
+				label: 'Superadministratoraccountwithalongunhyphenatedusername',
+			},
 		],
 		setValue: ( { value } ) => ( {
 			author: Number( value ),
@@ -310,7 +314,7 @@ const LayoutPanelComponent = ( {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
 		order: 2,
-		author: 1,
+		author: 5,
 		status: 'draft',
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',

package/src/dataviews/index.tsx

@@ -31,6 +31,7 @@ import DataViewsViewConfig, {
 	ViewTypeMenu,
 } from '../components/dataviews-view-config';
 import normalizeFields from '../field-types';
+import useData from '../hooks/use-data';
 import type { Action, Field, View, SupportedLayouts } from '../types';
 import type { SelectionOrUpdater } from '../types/private';
 type ItemWithId = { id: string };
@@ -236,6 +237,12 @@ function DataViews< Item >( {
 		[ defaultLayoutsProperty ]
 	);
 
+	const {
+		data: displayData,
+		paginationInfo: displayPaginationInfo,
+		hasInitiallyLoaded,
+	} = useData( data, isLoading, paginationInfo );
+
 	if ( ! defaultLayouts[ view.type ] ) {
 		return null;
 	}
@@ -247,9 +254,9 @@ function DataViews< Item >( {
 				onChangeView,
 				fields: _fields,
 				actions,
-				data,
+				data: displayData,
 				isLoading,
-				paginationInfo,
+				paginationInfo: displayPaginationInfo,
 				selection: _selection,
 				onChangeSelection: setSelectionWithChange,
 				openedFilter,
@@ -268,6 +275,7 @@ function DataViews< Item >( {
 				setIsShowingFilter,
 				config,
 				empty,
+				hasInitiallyLoaded,
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 				onReset,
 			} }

package/src/dataviews/stories/empty.tsx

@@ -59,13 +59,7 @@ const EmptyComponent = ( {
 		search: '',
 		page: 1,
 		perPage: 10,
-		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
-		},
+		layout: {},
 		filters: [],
 		fields: [ 'title', 'description', 'categories' ],
 	} );

package/src/dataviews/stories/free-composition.tsx

@@ -134,11 +134,6 @@ export const FreeCompositionComponent = () => {
 		page: 1,
 		perPage: 10,
 		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
 			enableMoving: false,
 		},
 		filters: [],

package/src/dataviews/stories/layout-table.tsx

@@ -32,13 +32,7 @@ export const LayoutTableComponent = ( {
 		search: '',
 		page: 1,
 		perPage: 10,
-		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
-		},
+		layout: {},
 		filters: [],
 		fields: [ 'categories' ],
 		titleField: 'title',

package/src/dataviews/stories/minimal-ui.tsx

@@ -23,11 +23,6 @@ const MinimalUIComponent = ( {
 		page: 1,
 		perPage: 10,
 		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
 			enableMoving: false,
 		},
 		filters: [],

package/src/dataviews/stories/with-card.tsx

@@ -24,13 +24,7 @@ const WithCardComponent = () => {
 		search: '',
 		page: 1,
 		perPage: 10,
-		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
-		},
+		layout: {},
 		filters: [],
 		fields: [ 'categories' ],
 		titleField: 'title',

package/src/dataviews/style.scss

@@ -2,6 +2,16 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/mixins" as *;
 
+@mixin dataviews-refreshing {
+	opacity: 0.5;
+	pointer-events: none;
+
+	@media not (prefers-reduced-motion) {
+		opacity: 1;
+		animation: dataviews-pulse 1s ease-in-out infinite;
+	}
+}
+
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	height: 100%;
@@ -44,6 +54,21 @@
 	}
 }
 
+.dataviews-no-results.is-refreshing {
+	@include dataviews-refreshing();
+}
+
+@keyframes dataviews-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+}
+
 .dataviews-loading-more {
 	text-align: center;
 }

package/src/dataviews-picker/index.tsx

@@ -237,6 +237,7 @@ function DataViewsPicker< Item >( {
 				config,
 				itemListLabel,
 				empty,
+				hasInitiallyLoaded: true,
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>

package/src/hooks/use-data.ts

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+type PaginationInfo = {
+	totalItems: number;
+	totalPages: number;
+	infiniteScrollHandler?: () => void;
+};
+
+export default function useData< Item >(
+	data: Item[],
+	isLoading: boolean | undefined,
+	paginationInfo: PaginationInfo
+): {
+	data: Item[];
+	paginationInfo: PaginationInfo;
+	hasInitiallyLoaded: boolean;
+} {
+	const previousDataRef = useRef< Item[] >( data );
+	const previousPaginationInfoRef =
+		useRef< PaginationInfo >( paginationInfo );
+	const [ hasInitiallyLoaded, setHasInitiallyLoaded ] = useState(
+		! isLoading
+	);
+	useEffect( () => {
+		if ( ! isLoading ) {
+			previousDataRef.current = data;
+			previousPaginationInfoRef.current = paginationInfo;
+			setHasInitiallyLoaded( true );
+		}
+	}, [ data, isLoading, paginationInfo ] );
+	return {
+		data:
+			isLoading && previousDataRef.current?.length
+				? previousDataRef.current
+				: data,
+		paginationInfo:
+			isLoading && previousDataRef.current?.length
+				? previousPaginationInfoRef.current
+				: paginationInfo,
+		hasInitiallyLoaded,
+	};
+}

package/src/hooks/use-delayed-loading.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from '@wordpress/element';
+
+export function useDelayedLoading(
+	isLoading: boolean,
+	options: { delay: number } = { delay: 400 }
+): boolean {
+	const [ showLoader, setShowLoader ] = useState( false );
+	useEffect( () => {
+		if ( ! isLoading ) {
+			return;
+		}
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, options.delay );
+		return () => {
+			clearTimeout( timeout );
+			setShowLoader( false );
+		};
+	}, [ isLoading, options.delay ] );
+	return showLoader;
+}