@wordpress/dataviews 12.0.1-next.v.202602111440.0 → 12.0.1

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

@@ -16,6 +16,7 @@ import { Stack } from '@wordpress/ui';
 import type { ViewGridProps } from '../../../types';
 import getDataByGroup from '../utils/get-data-by-group';
 import CompositeGrid from './composite-grid';
+import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
 
 function ViewGrid< Item >( {
 	actions,
@@ -32,14 +33,29 @@ function ViewGrid< Item >( {
 	className,
 	empty,
 }: ViewGridProps< Item > ) {
+	const isDelayedLoading = useDelayedLoading( !! isLoading );
 	const hasData = !! data?.length;
 	const groupField = view.groupBy?.field
 		? fields.find( ( f ) => f.id === view.groupBy?.field )
 		: null;
 	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( 'dataviews-no-results', {
+					'is-refreshing': isDelayedLoading,
+				} ) }
+			>
+				{ empty }
+			</div>
+		);
+	}
 	const gridProps = {
-		className,
+		className: clsx( className, {
+			'is-refreshing': ! isInfiniteScroll && isDelayedLoading,
+		} ),
+		inert: ! isInfiniteScroll && !! isLoading ? 'true' : undefined,
 		isLoading,
 		view,
 		fields,
@@ -87,7 +103,7 @@ function ViewGrid< Item >( {
 			}
 			{
 				// Render a single grid with all data.
-				hasData && ! dataByGroup && (
+				! dataByGroup && (
 					<CompositeGrid
 						{ ...gridProps }
 						data={ data }
@@ -95,26 +111,7 @@ function ViewGrid< Item >( {
 					/>
 				)
 			}
-			{
-				// Render empty state.
-				! hasData && (
-					<div
-						className={ clsx( {
-							'dataviews-loading': isLoading,
-							'dataviews-no-results': ! isLoading,
-						} ) }
-					>
-						{ isLoading ? (
-							<p>
-								<Spinner />
-							</p>
-						) : (
-							empty
-						) }
-					</div>
-				)
-			}
-			{ hasData && isLoading && (
+			{ isInfiniteScroll && isLoading && (
 				<p className="dataviews-loading-more">
 					<Spinner />
 				</p>

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

@@ -3,6 +3,7 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 @use "../utils/grid-items.scss" as *;
+@use "../../../dataviews/style" as *;
 
 .dataviews-view-grid {
 	padding: 0 $grid-unit-30 $grid-unit-30;
@@ -164,6 +165,10 @@
 			padding-bottom: $grid-unit-15;
 		}
 	}
+
+	&.is-refreshing {
+		@include dataviews-refreshing();
+	}
 }
 
 .dataviews-view-grid__field-value:empty,

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,
@@ -389,6 +390,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 ) )
@@ -511,32 +513,25 @@ 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 (
@@ -614,10 +609,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 +646,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;
@@ -271,6 +272,10 @@ div.dataviews-view-list {
 			}
 		}
 	}
+
+	&.is-refreshing {
+		@include dataviews-refreshing();
+	}
 }
 
 .dataviews-view-list__group-header {

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/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 >();
+	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 && (
@@ -482,6 +515,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 (
@@ -491,7 +531,7 @@ function ViewTable< Item >( {
 										width,
 										maxWidth,
 										minWidth,
-										textAlign: align,
+										textAlign: effectiveAlign,
 									} }
 									aria-sort={
 										view.sort?.direction &&
@@ -633,27 +673,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%;
@@ -155,12 +156,12 @@
 
 			&:has(.dataviews-view-table-header-button):first-child {
 				// Table cell padding minus the header button padding.
-				padding-left: $grid-unit-50;
+				padding-left: $grid-unit-20;
 			}
 
 			&:has(.dataviews-view-table-header-button):last-child {
 				// Table cell padding minus the header button padding.
-				padding-right: $grid-unit-50;
+				padding-right: $grid-unit-20;
 			}
 		}
 	}
@@ -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) {
 	width: 1%;
 }
+
+.dataviews-view-table.is-refreshing {
+	@include dataviews-refreshing();
+}

package/src/dataform/stories/index.story.tsx

@@ -62,6 +62,11 @@ export const LayoutPanel = {
 			description: 'Chooses how to open the panel.',
 			options: [ 'default', 'dropdown', 'modal' ],
 		},
+		editVisibility: {
+			control: { type: 'select' },
+			description: 'Chooses when the edit icon is visible.',
+			options: [ 'default', 'always', 'on-hover' ],
+		},
 	},
 };
 

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

@@ -7,7 +7,13 @@ import { useMemo, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { Field, Form, Layout, PanelLayout } from '../../types';
+import type {
+	Field,
+	Form,
+	Layout,
+	PanelLayout,
+	EditVisibility,
+} from '../../types';
 
 type SamplePost = {
 	title: string;
@@ -261,10 +267,12 @@ const getPanelLayoutFromStoryArgs = ( {
 	summary,
 	labelPosition,
 	openAs,
+	editVisibility,
 }: {
 	summary?: string[];
 	labelPosition?: 'default' | 'top' | 'side' | 'none';
 	openAs?: 'default' | 'dropdown' | 'modal';
+	editVisibility?: 'default' | EditVisibility;
 } ): Layout | undefined => {
 	const panelLayout: PanelLayout = {
 		type: 'panel',
@@ -282,16 +290,22 @@ const getPanelLayoutFromStoryArgs = ( {
 		panelLayout.summary = summary;
 	}
 
+	if ( editVisibility !== 'default' ) {
+		panelLayout.editVisibility = editVisibility;
+	}
+
 	return panelLayout;
 };
 
 const LayoutPanelComponent = ( {
 	labelPosition,
 	openAs,
+	editVisibility,
 }: {
 	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
 	openAs: 'default' | 'dropdown' | 'modal';
+	editVisibility: 'default' | EditVisibility;
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -321,6 +335,7 @@ const LayoutPanelComponent = ( {
 			layout: getPanelLayoutFromStoryArgs( {
 				labelPosition,
 				openAs,
+				editVisibility,
 			} ),
 			fields: [
 				'title',
@@ -357,6 +372,7 @@ const LayoutPanelComponent = ( {
 						summary: [ 'origin', 'destination', 'flight_status' ],
 						labelPosition,
 						openAs,
+						editVisibility,
 					} ),
 				},
 				{
@@ -367,11 +383,12 @@ const LayoutPanelComponent = ( {
 						summary: [ 'author', 'seat' ],
 						labelPosition,
 						openAs,
+						editVisibility,
 					} ),
 				},
 			],
 		};
-	}, [ labelPosition, openAs ] );
+	}, [ labelPosition, openAs, editVisibility ] );
 
 	return (
 		<DataForm< SamplePost >

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 };
@@ -144,7 +145,7 @@ function DataViews< Item >( {
 	onReset,
 }: DataViewsProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
-	const containerRef = useRef< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
 		( resizeObserverEntries: any ) => {
@@ -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

@@ -128,7 +128,7 @@ function DataViewsPicker< Item >( {
 	empty,
 }: DataViewsPickerProps< Item > ) {
 	const { infiniteScrollHandler } = paginationInfo;
-	const containerRef = useRef< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
 		( resizeObserverEntries: any ) => {
@@ -237,6 +237,7 @@ function DataViewsPicker< Item >( {
 				config,
 				itemListLabel,
 				empty,
+				hasInitiallyLoaded: true,
 				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 			} }
 		>