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

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/dataform/test/dataform.tsx

@@ -511,9 +511,9 @@ describe( 'DataForm component', () => {
 				/>
 			);
 
-			const titleField = screen.getByText( data.title );
+			const titleButton = fieldsSelector.title.view();
 			const user = await userEvent.setup();
-			await user.click( titleField );
+			await user.click( titleButton );
 			const titleEditField = screen.getByText(
 				'This is the Title Field'
 			);

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/fixtures.tsx

@@ -24,6 +24,7 @@ export type SpaceObject = {
 	date: string;
 	datetime: string;
 	email: string;
+	author: string;
 };
 
 export const data: SpaceObject[] = [
@@ -42,6 +43,7 @@ export const data: SpaceObject[] = [
 		date: '2021-01-01',
 		datetime: '2021-01-01T14:30:00Z',
 		email: 'moon@example.com',
+		author: 'lunarian_observer',
 	},
 	{
 		id: 2,
@@ -57,6 +59,7 @@ export const data: SpaceObject[] = [
 		date: '2019-01-02',
 		datetime: '2019-01-02T09:15:00Z',
 		email: 'io@example.com',
+		author: 'galilean_moon_enthusiast_supreme',
 	},
 	{
 		id: 3,
@@ -72,6 +75,7 @@ export const data: SpaceObject[] = [
 		date: '2025-01-03',
 		datetime: '2025-01-03T16:45:30Z',
 		email: 'europa@example.com',
+		author: 'icy_ocean_explorer',
 	},
 	{
 		id: 4,
@@ -87,6 +91,7 @@ export const data: SpaceObject[] = [
 		date: '2022-01-04',
 		datetime: '2022-01-04T12:30:00Z',
 		email: 'ganymede@example.com',
+		author: 'jovian_satellite_researcher',
 	},
 	{
 		id: 5,
@@ -102,6 +107,7 @@ export const data: SpaceObject[] = [
 		date: '2021-01-05',
 		datetime: '2021-01-05T14:15:30Z',
 		email: 'callisto@example.com',
+		author: 'crater_cartography_specialist',
 	},
 	{
 		id: 6,
@@ -117,6 +123,7 @@ export const data: SpaceObject[] = [
 		date: '2020-01-06',
 		datetime: '2020-01-06T10:45:15Z',
 		email: 'amalthea@example.com',
+		author: 'astro_photographer',
 	},
 	{
 		id: 7,
@@ -132,6 +139,7 @@ export const data: SpaceObject[] = [
 		date: '2019-01-07',
 		datetime: '2019-01-07T16:20:45Z',
 		email: 'himalia@example.com',
+		author: 'irregular_orbit_analyst',
 	},
 	{
 		id: 8,
@@ -147,6 +155,7 @@ export const data: SpaceObject[] = [
 		date: '2020-01-01',
 		datetime: '2020-01-01T11:22:15Z',
 		email: 'neptune@example.com',
+		author: 'neptunian_dynamics_professor',
 	},
 	{
 		id: 9,
@@ -162,6 +171,7 @@ export const data: SpaceObject[] = [
 		date: '2021-02-01',
 		datetime: '2021-02-01T11:30:00Z',
 		email: 'triton@example.com',
+		author: 'retrograde_orbit_specialist',
 	},
 	{
 		id: 10,
@@ -177,6 +187,7 @@ export const data: SpaceObject[] = [
 		date: '2020-02-02',
 		datetime: '2020-02-02T15:45:30Z',
 		email: 'nereid@example.com',
+		author: 'outer_solar_system_voyager_mission_director',
 	},
 	{
 		id: 11,
@@ -192,6 +203,7 @@ export const data: SpaceObject[] = [
 		date: '2019-02-03',
 		datetime: '2019-02-03T09:20:15Z',
 		email: 'proteus@example.com',
+		author: 'space_observer',
 	},
 	{
 		id: 12,
@@ -207,6 +219,7 @@ export const data: SpaceObject[] = [
 		date: '2020-01-02',
 		datetime: '2020-01-02T13:05:45Z',
 		email: 'mercury@example.com',
+		author: 'solar_wind_scientist',
 	},
 	{
 		id: 13,
@@ -222,6 +235,7 @@ export const data: SpaceObject[] = [
 		date: '2020-01-02',
 		datetime: '2020-01-02T08:30:12Z',
 		email: 'venus@example.com',
+		author: 'atmospheric_chemistry_expert',
 	},
 	{
 		id: 14,
@@ -237,6 +251,7 @@ export const data: SpaceObject[] = [
 		date: '2023-01-03',
 		datetime: '2023-01-03T18:15:30Z',
 		email: 'earth@example.com',
+		author: 'planetary_geologist',
 	},
 	{
 		id: 15,
@@ -252,6 +267,7 @@ export const data: SpaceObject[] = [
 		date: '2020-01-01',
 		datetime: '2020-01-01T20:45:00Z',
 		email: 'mars@example.com',
+		author: 'red_planet_explorer',
 	},
 	{
 		id: 16,
@@ -267,6 +283,7 @@ export const data: SpaceObject[] = [
 		date: '2017-01-01',
 		datetime: '2017-01-01T00:01:00Z',
 		email: 'jupiter@example.com',
+		author: 'gas_giant_meteorologist',
 	},
 	{
 		id: 17,
@@ -282,6 +299,7 @@ export const data: SpaceObject[] = [
 		date: '2020-02-01',
 		datetime: '2020-02-01T00:02:00Z',
 		email: 'saturn@example.com',
+		author: 'ring_system_analyst',
 	},
 	{
 		id: 18,
@@ -297,6 +315,7 @@ export const data: SpaceObject[] = [
 		date: '2020-03-01',
 		datetime: '2020-03-01T10:15:20Z',
 		email: 'uranus@example.com',
+		author: 'axial_tilt_researcher',
 	},
 	{
 		id: 19,
@@ -312,6 +331,7 @@ export const data: SpaceObject[] = [
 		date: '2020-03-01',
 		datetime: '2020-03-01T10:15:20Z',
 		email: 'thessalonikopolymnianebuchodonossarinacharybdis@example.com',
+		author: 'interstellar_nomadic_planetary_body_tracking_specialist',
 	},
 ];
 
@@ -429,6 +449,10 @@ export const fields: Field< SpaceObject >[] = [
 				value: 'Trans-Neptunian object',
 				label: 'Trans-Neptunian object',
 			},
+			{
+				value: 'Extreme Trans-Neptunian Scattered Disc Object',
+				label: 'Extreme Trans-Neptunian Scattered Disc Object',
+			},
 		],
 		filterBy: {
 			operators: [ 'is', 'isNot' ],
@@ -492,8 +516,73 @@ export const fields: Field< SpaceObject >[] = [
 			{ value: 'Ice giant', label: 'Ice giant' },
 			{ value: 'Terrestrial', label: 'Terrestrial' },
 			{ value: 'Gas giant', label: 'Gas giant' },
+			{
+				value: 'Extreme Outer Solar System Trans-Neptunian Region',
+				label: 'Extreme Outer Solar System Trans-Neptunian Region',
+			},
 		],
 		type: 'array',
 		enableGlobalSearch: true,
 	},
+	{
+		label: 'Author',
+		id: 'author',
+		type: 'text',
+		enableHiding: false,
+		enableGlobalSearch: true,
+		elements: [
+			{ value: 'lunarian_observer', label: 'lunarian_observer' },
+			{
+				value: 'galilean_moon_enthusiast_supreme',
+				label: 'galilean_moon_enthusiast_supreme',
+			},
+			{ value: 'icy_ocean_explorer', label: 'icy_ocean_explorer' },
+			{
+				value: 'jovian_satellite_researcher',
+				label: 'jovian_satellite_researcher',
+			},
+			{
+				value: 'crater_cartography_specialist',
+				label: 'crater_cartography_specialist',
+			},
+			{ value: 'astro_photographer', label: 'astro_photographer' },
+			{
+				value: 'irregular_orbit_analyst',
+				label: 'irregular_orbit_analyst',
+			},
+			{
+				value: 'neptunian_dynamics_professor',
+				label: 'neptunian_dynamics_professor',
+			},
+			{
+				value: 'retrograde_orbit_specialist',
+				label: 'retrograde_orbit_specialist',
+			},
+			{
+				value: 'outer_solar_system_voyager_mission_director',
+				label: 'outer_solar_system_voyager_mission_director',
+			},
+			{ value: 'space_observer', label: 'space_observer' },
+			{ value: 'solar_wind_scientist', label: 'solar_wind_scientist' },
+			{
+				value: 'atmospheric_chemistry_expert',
+				label: 'atmospheric_chemistry_expert',
+			},
+			{ value: 'planetary_geologist', label: 'planetary_geologist' },
+			{ value: 'red_planet_explorer', label: 'red_planet_explorer' },
+			{
+				value: 'gas_giant_meteorologist',
+				label: 'gas_giant_meteorologist',
+			},
+			{ value: 'ring_system_analyst', label: 'ring_system_analyst' },
+			{ value: 'axial_tilt_researcher', label: 'axial_tilt_researcher' },
+			{
+				value: 'interstellar_nomadic_planetary_body_tracking_specialist',
+				label: 'interstellar_nomadic_planetary_body_tracking_specialist',
+			},
+		],
+		filterBy: {
+			operators: [ 'isAny', 'isNone' ],
+		},
+	},
 ];

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