@wordpress/dataviews 10.3.1-next.2f1c7c01b.0 → 10.4.1-next.dc3f6d3c1.0

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

@@ -11,6 +11,7 @@
 	position: relative;
 	color: $gray-700;
 	margin-bottom: auto;
+	background-color: inherit;
 
 	th {
 		text-align: left;
@@ -29,7 +30,7 @@
 		&.dataviews-view-table__actions-column--sticky {
 			position: sticky;
 			right: 0;
-			background-color: $white;
+			background-color: inherit;
 		}
 
 		&.dataviews-view-table__actions-column--stuck {
@@ -47,7 +48,6 @@
 
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
-			width: 1%;
 
 			.dataviews-view-table__cell-content-wrapper {
 				max-width: auto;
@@ -57,6 +57,7 @@
 	}
 	tr {
 		border-top: 1px solid $gray-100;
+		background-color: inherit;
 
 		.dataviews-view-table-header-button {
 			gap: $grid-unit-05;
@@ -80,11 +81,6 @@
 			border-bottom: 0;
 		}
 
-		&.is-hovered,
-		&.is-hovered .dataviews-view-table__actions-column--sticky {
-			background-color: #f8f8f8;
-		}
-
 		.components-checkbox-control__input.components-checkbox-control__input {
 			opacity: 0;
 
@@ -99,15 +95,6 @@
 			opacity: 0;
 		}
 
-		&:focus-within,
-		&.is-hovered,
-		&:hover {
-			.components-checkbox-control__input,
-			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-				opacity: 1;
-			}
-		}
-
 		@media (hover: none) {
 			// Show checkboxes and quick-actions on devices that do not support hover.
 			.components-checkbox-control__input.components-checkbox-control__input,
@@ -117,7 +104,7 @@
 		}
 
 		&.is-selected {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
 			color: $gray-700;
 
 			&,
@@ -126,7 +113,7 @@
 			}
 
 			&:hover {
-				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 8%, $white);
 			}
 
 			.dataviews-view-table__actions-column--sticky {
@@ -138,10 +125,34 @@
 			}
 		}
 	}
+
+	// Hover styles only apply when bulk actions are available
+	&.has-bulk-actions {
+		tr {
+			// Only apply hover background to non-selected rows
+			&:not(.is-selected) {
+				&.is-hovered,
+				&.is-hovered .dataviews-view-table__actions-column--sticky {
+					background-color: #f8f8f8;
+				}
+			}
+
+			&:focus-within,
+			&.is-hovered,
+			&:hover {
+				.components-checkbox-control__input,
+				.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+					opacity: 1;
+				}
+			}
+		}
+	}
+
 	thead {
 		position: sticky;
 		inset-block-start: 0;
 		z-index: z-index(".dataviews-view-table thead");
+		background-color: inherit;
 
 		tr {
 			border: 0;
@@ -151,7 +162,7 @@
 			}
 		}
 		th {
-			background-color: $white;
+			background-color: inherit;
 			padding-top: $grid-unit-10;
 			padding-bottom: $grid-unit-10;
 			padding-left: $grid-unit-15;
@@ -172,6 +183,7 @@
 			min-height: $grid-unit-40;
 			display: flex;
 			align-items: center;
+			white-space: nowrap;
 
 			&.dataviews-view-table__cell-align-end {
 				justify-content: flex-end;
@@ -313,3 +325,8 @@
 		color: $gray-900;
 	}
 }
+
+/* Column width intents via colgroup: make non-primary columns shrink-to-fit */
+.dataviews-view-table col[class^="dataviews-view-table__col-"]:not(.dataviews-view-table__col-primary) {
+	width: 1%;
+}

package/src/field-types/date.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { dateI18n, getDate } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -24,9 +24,6 @@ import {
 	OPERATOR_BETWEEN,
 } from '../constants';
 
-const getFormattedDate = ( dateToDisplay: string | null ) =>
-	dateI18n( getSettings().formats.date, getDate( dateToDisplay ) );
-
 function sort( a: any, b: any, direction: SortDirection ) {
 	const timeA = new Date( a ).getTime();
 	const timeB = new Date( b ).getTime();
@@ -51,7 +48,16 @@ export default {
 			return '';
 		}
 
-		return getFormattedDate( value );
+		// Not all fields have format, but date fields do.
+		//
+		// At runtime, this method will never be called for non-date fields.
+		// However, the type system does not know this, so we need to check it.
+		// There's an opportunity here to improve the type system.
+		if ( field.type !== 'date' ) {
+			return '';
+		}
+
+		return dateI18n( field.format.date, getDate( value ) );
 	},
 	enableSorting: true,
 	filterBy: {

package/src/stories/dataform.story.tsx

@@ -268,6 +268,19 @@ const fields: Field< SamplePost >[] = [
 		label: 'Seat',
 		type: 'text',
 	},
+	{
+		id: 'metadata_summary',
+		label: 'Metadata',
+		type: 'text',
+		render: ( { item } ) => {
+			return (
+				<span>
+					<>Metadata</>
+					{ item.filesize ? `, ${ item.filesize } KB` : '' }
+				</span>
+			);
+		},
+	},
 ];
 
 const LayoutRegularComponent = ( {
@@ -1850,6 +1863,73 @@ const LayoutRowComponent = ( {
 	);
 };
 
+const LayoutDetailsComponent = () => {
+	const [ post, setPost ] = useState< SamplePost >( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+		reviewer: 'fulano',
+		date: '2021-01-01T12:00:00',
+		birthdate: '1950-02-23T12:00:00',
+		filesize: 1024,
+		dimensions: '1920x1080',
+		comment_status: 'open',
+		ping_status: true,
+		tags: [ 'photography' ],
+	} );
+
+	const form: Form = {
+		fields: [
+			{
+				id: 'discussion',
+				label: 'Discussion',
+				children: [ 'comment_status', 'ping_status' ],
+				layout: {
+					type: 'details',
+					summary: 'discussion',
+				},
+			},
+			{
+				id: 'metadata',
+				label: 'Metadata',
+				children: [ 'filesize', 'dimensions' ],
+				layout: {
+					type: 'details',
+					summary: 'metadata_summary',
+				},
+			},
+			{
+				id: 'categorization',
+				label: 'Categorization',
+				children: [ 'tags', 'description' ],
+				layout: { type: 'details' },
+			},
+			{
+				id: 'scheduling',
+				children: [ 'date', 'birthdate' ],
+				layout: {
+					type: 'details',
+				},
+			},
+		],
+	};
+
+	return (
+		<DataForm< SamplePost >
+			data={ post }
+			fields={ fields }
+			form={ form }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
 const LayoutMixedComponent = () => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -1977,6 +2057,10 @@ export const LayoutRow = {
 	},
 };
 
+export const LayoutDetails = {
+	render: LayoutDetailsComponent,
+};
+
 export const LayoutMixed = {
 	render: LayoutMixedComponent,
 };

package/src/stories/dataviews-picker.story.tsx

@@ -17,7 +17,7 @@ import {
  * Internal dependencies
  */
 import DataViewsPicker from '../components/dataviews-picker/index';
-import { LAYOUT_PICKER_GRID } from '../constants';
+import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../constants';
 import filterSortAndPaginate from '../utils/filter-sort-and-paginate';
 import type { ActionButton, View } from '../types';
 import { data, fields, type SpaceObject } from './dataviews.fixtures';
@@ -33,6 +33,7 @@ const storyArgs = {
 	perPageSizes: [ 10, 25, 50, 100 ],
 	isMultiselectable: false,
 	isGrouped: false,
+	infiniteScrollEnabled: false,
 };
 
 const storyArgTypes = {
@@ -73,7 +74,6 @@ const DataViewsPickerContent = ( {
 	selection: customSelection,
 }: PickerContentProps ) => {
 	const [ view, setView ] = useState< View >( {
-		type: LAYOUT_PICKER_GRID,
 		fields: [],
 		titleField: 'title',
 		mediaField: 'image',
@@ -81,6 +81,7 @@ const DataViewsPickerContent = ( {
 		page: 1,
 		perPage: 10,
 		filters: [],
+		type: LAYOUT_PICKER_GRID,
 		groupByField: isGrouped ? 'type' : undefined,
 		infiniteScrollEnabled,
 	} );
@@ -138,13 +139,14 @@ const DataViewsPickerContent = ( {
 		setView,
 		data: shownData,
 		getItemId: ( item ) => item.id.toString(),
+		totalDataLength: data.length,
 	} );
 
 	return (
 		<>
 			{ infiniteScrollEnabled && (
 				<style>{ `
-					.dataviews-wrapper {
+					.dataviews-picker-wrapper {
 						height: 600px;
 						overflow: auto;
 					}
@@ -171,6 +173,7 @@ const DataViewsPickerContent = ( {
 				itemListLabel="Galactic Bodies"
 				defaultLayouts={ {
 					[ LAYOUT_PICKER_GRID ]: {},
+					[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
 				} }
 			/>
 		</>
@@ -292,11 +295,13 @@ function useInfiniteScroll( {
 	setView,
 	data: shownData,
 	getItemId,
+	totalDataLength,
 }: {
 	view: View;
 	setView: ( view: View ) => void;
 	data: SpaceObject[];
 	getItemId: ( item: SpaceObject ) => string;
+	totalDataLength: number;
 } ): {
 	data: SpaceObject[];
 	paginationInfo: {
@@ -313,8 +318,8 @@ function useInfiniteScroll( {
 	);
 	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
 
-	const totalItems = data.length;
-	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
+	const totalItems = totalDataLength;
+	const totalPages = Math.ceil( totalItems / ( view.perPage || 10 ) );
 	const currentPage = view.page || 1;
 	const hasMoreData = currentPage < totalPages;
 
@@ -329,7 +334,7 @@ function useInfiniteScroll( {
 			...view,
 			page: currentPage + 1,
 		} );
-	}, [ isLoadingMore, currentPage, totalPages, view ] );
+	}, [ isLoadingMore, currentPage, totalPages, view, setView ] );
 
 	// Initialize data on first load or when view changes significantly
 	useEffect( () => {

package/src/stories/dataviews.story.tsx

@@ -70,7 +70,10 @@ const defaultLayouts = {
 	[ LAYOUT_LIST ]: {},
 };
 
-export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
+export const Default = ( {
+	perPageSizes = [ 10, 25, 50, 100 ],
+	hasClickableItems = true,
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
 		fields: [ 'categories' ],
@@ -100,7 +103,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 					{ ...props }
 				/>
 			) }
-			isItemClickable={ () => true }
+			isItemClickable={ () => hasClickableItems }
 			defaultLayouts={ defaultLayouts }
 			config={ { perPageSizes } }
 		/>
@@ -109,6 +112,7 @@ export const Default = ( { perPageSizes = [ 10, 25, 50, 100 ] } ) => {
 
 Default.args = {
 	perPageSizes: [ 10, 25, 50, 100 ],
+	hasClickableItems: true,
 };
 
 Default.argTypes = {
@@ -116,6 +120,10 @@ Default.argTypes = {
 		control: 'object',
 		description: 'Array of available page sizes',
 	},
+	hasClickableItems: {
+		control: 'boolean',
+		description: 'Are the items clickable',
+	},
 };
 
 export const Empty = () => {

package/src/stories/field-types.story.tsx

@@ -832,14 +832,53 @@ export const DateComponent = ( {
 	type,
 	Edit,
 	asyncElements,
+	formatDate,
+	formatWeekStartsOn,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
+	formatDate?: string;
+	formatWeekStartsOn?:
+		| 'sunday'
+		| 'monday'
+		| 'tuesday'
+		| 'wednesday'
+		| 'thursday'
+		| 'friday'
+		| 'saturday';
 } ) => {
 	const dateFields = useMemo(
-		() => fields.filter( ( field ) => field.type === 'date' ),
-		[]
+		() =>
+			fields
+				.filter( ( field ) => field.type === 'date' )
+				.map( ( field ) => {
+					if ( formatDate || formatWeekStartsOn !== undefined ) {
+						const format: {
+							date?: string;
+							weekStartsOn?:
+								| 'sunday'
+								| 'monday'
+								| 'tuesday'
+								| 'wednesday'
+								| 'thursday'
+								| 'friday'
+								| 'saturday';
+						} = {};
+						if ( formatDate ) {
+							format.date = formatDate;
+						}
+						if ( formatWeekStartsOn !== undefined ) {
+							format.weekStartsOn = formatWeekStartsOn;
+						}
+						return {
+							...field,
+							format,
+						};
+					}
+					return field;
+				} ),
+		[ formatDate, formatWeekStartsOn ]
 	);
 
 	return (
@@ -852,6 +891,32 @@ export const DateComponent = ( {
 	);
 };
 DateComponent.storyName = 'date';
+DateComponent.args = {
+	formatDate: '',
+	formatWeekStartsOn: undefined,
+};
+DateComponent.argTypes = {
+	formatDate: {
+		control: 'text',
+		description:
+			'Custom PHP date format string (e.g., "F j, Y" for "November 6, 2010"). Leave empty to use WordPress default.',
+	},
+	formatWeekStartsOn: {
+		control: 'select',
+		options: {
+			Default: undefined,
+			Sunday: 'sunday',
+			Monday: 'monday',
+			Tuesday: 'tuesday',
+			Wednesday: 'wednesday',
+			Thursday: 'thursday',
+			Friday: 'friday',
+			Saturday: 'saturday',
+		},
+		description:
+			'Day that the week starts on. Leave as Default to use WordPress default.',
+	},
+};
 
 export const EmailComponent = ( {
 	type,

package/src/style.scss

@@ -12,10 +12,12 @@
 @use "./dataviews-layouts/list/style.scss" as *;
 @use "./dataviews-layouts/table/style.scss" as *;
 @use "./dataviews-layouts/picker-grid/style.scss" as *;
+@use "./dataviews-layouts/picker-table/style.scss" as *;
 
 @use "./dataform-controls/style.scss" as *;
 @use "./dataform-layouts/panel/style.scss" as *;
 @use "./dataform-layouts/regular/style.scss" as *;
 @use "./dataform-layouts/card/style.scss" as *;
+@use "./dataform-layouts/details/style.scss" as *;
 @use "./dataform-layouts/row/style.scss" as *;
 @use "./dataform-layouts/style.scss" as *;

package/src/test/normalize-fields.ts

@@ -333,4 +333,57 @@ describe( 'normalizeFields: default getValue', () => {
 			} );
 		} );
 	} );
+
+	describe( 'format normalization', () => {
+		it( 'applies default format when not provided for date fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'publishDate',
+					type: 'date',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toBeDefined();
+			expect( normalizedFields[ 0 ].format.date ).toBeDefined();
+			expect( typeof normalizedFields[ 0 ].format.date ).toBe( 'string' );
+			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBeDefined();
+			expect( typeof normalizedFields[ 0 ].format.weekStartsOn ).toBe(
+				'string'
+			);
+		} );
+
+		it( 'preserves custom format when provided', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'publishDate',
+					type: 'date',
+					format: {
+						date: 'F j, Y',
+						weekStartsOn: 'monday',
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format.date ).toBe( 'F j, Y' );
+			expect( normalizedFields[ 0 ].format.weekStartsOn ).toBe(
+				'monday'
+			);
+		} );
+
+		it( 'adds empty format for non-date field types', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'title',
+					type: 'text',
+				},
+				{
+					id: 'count',
+					type: 'integer',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].format ).toEqual( {} );
+			expect( normalizedFields[ 1 ].format ).toEqual( {} );
+		} );
+	} );
 } );

package/src/types/dataform.ts

@@ -6,7 +6,7 @@ import type { Field, FieldValidity } from './field-api';
 /**
  * DataForm layouts.
  */
-export type LayoutType = 'regular' | 'panel' | 'card' | 'row';
+export type LayoutType = 'regular' | 'panel' | 'card' | 'row' | 'details';
 export type LabelPosition = 'top' | 'side' | 'none';
 
 export type PanelSummaryField = string | string[];
@@ -97,12 +97,27 @@ export type NormalizedRowLayout = {
 	styles: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;
 };
 
-export type Layout = RegularLayout | PanelLayout | CardLayout | RowLayout;
+export type DetailsLayout = {
+	type: 'details';
+	summary?: string;
+};
+export type NormalizedDetailsLayout = {
+	type: 'details';
+	summary: string;
+};
+
+export type Layout =
+	| RegularLayout
+	| PanelLayout
+	| CardLayout
+	| RowLayout
+	| DetailsLayout;
 export type NormalizedLayout =
 	| NormalizedRegularLayout
 	| NormalizedPanelLayout
 	| NormalizedCardLayout
-	| NormalizedRowLayout;
+	| NormalizedRowLayout
+	| NormalizedDetailsLayout;
 
 export type NormalizedSummaryField =
 	| NormalizedPanelSummaryField

package/src/types/dataviews.ts

@@ -269,7 +269,33 @@ export interface ViewPickerGrid extends ViewBase {
 	};
 }
 
-export type View = ViewList | ViewGrid | ViewTable | ViewPickerGrid;
+export interface ViewPickerTable extends ViewBase {
+	type: 'pickerTable';
+
+	layout?: {
+		/**
+		 * The styles for the columns.
+		 */
+		styles?: Record< string, ColumnStyle >;
+
+		/**
+		 * The density of the view.
+		 */
+		density?: Density;
+
+		/**
+		 * Whether the view allows column moving.
+		 */
+		enableMoving?: boolean;
+	};
+}
+
+export type View =
+	| ViewList
+	| ViewGrid
+	| ViewTable
+	| ViewPickerGrid
+	| ViewPickerTable;
 
 interface ActionBase< Item > {
 	/**
@@ -428,16 +454,24 @@ export interface ViewPickerGridProps< Item >
 	view: ViewPickerGrid;
 }
 
+export interface ViewPickerTableProps< Item >
+	extends Omit< ViewPickerBaseProps< Item >, 'view' > {
+	view: ViewPickerTable;
+}
+
 export type ViewProps< Item > =
 	| ViewTableProps< Item >
 	| ViewGridProps< Item >
 	| ViewListProps< Item >;
 
-export type ViewPickerProps< Item > = ViewPickerGridProps< Item >;
+export type ViewPickerProps< Item > =
+	| ViewPickerGridProps< Item >
+	| ViewPickerTableProps< Item >;
 
 export interface SupportedLayouts {
 	list?: Omit< ViewList, 'type' >;
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;
 	pickerGrid?: Omit< ViewPickerGrid, 'type' >;
+	pickerTable?: Omit< ViewPickerTable, 'type' >;
 }