@wordpress/dataviews 3.0.0 → 4.0.0

package/src/layouts/grid/density-picker.tsx

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { plus, lineSolid } from '@wordpress/icons';
+import { useEffect } from '@wordpress/element';
+
+const viewportBreaks = {
+	xhuge: { min: 3, max: 6, default: 5 },
+	huge: { min: 2, max: 4, default: 4 },
+	xlarge: { min: 2, max: 3, default: 3 },
+	large: { min: 1, max: 2, default: 2 },
+	mobile: { min: 1, max: 2, default: 2 },
+};
+
+function useViewPortBreakpoint() {
+	const isXHuge = useViewportMatch( 'xhuge', '>=' );
+	const isHuge = useViewportMatch( 'huge', '>=' );
+	const isXlarge = useViewportMatch( 'xlarge', '>=' );
+	const isLarge = useViewportMatch( 'large', '>=' );
+	const isMobile = useViewportMatch( 'mobile', '>=' );
+
+	if ( isXHuge ) {
+		return 'xhuge';
+	}
+	if ( isHuge ) {
+		return 'huge';
+	}
+	if ( isXlarge ) {
+		return 'xlarge';
+	}
+	if ( isLarge ) {
+		return 'large';
+	}
+	if ( isMobile ) {
+		return 'mobile';
+	}
+	return null;
+}
+
+// Value is number from 0 to 100 representing how big an item is in the grid
+// 100 being the biggest and 0 being the smallest.
+// The size is relative to the viewport size, if one a given viewport the
+// number of allowed items in a grid is 3 to 6 a 0 ( the smallest ) will mean that the grid will
+// have 6 items in a row, a 100 ( the biggest ) will mean that the grid will have 3 items in a row.
+// A value of 75 will mean that the grid will have 4 items in a row.
+function getRangeValue(
+	density: number,
+	breakValues: { min: number; max: number; default: number }
+) {
+	const inverseDensity = breakValues.max - density;
+	const max = breakValues.max - breakValues.min;
+	return Math.round( ( inverseDensity * 100 ) / max );
+}
+
+export default function DensityPicker( {
+	density,
+	setDensity,
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+	const viewport = useViewPortBreakpoint();
+	useEffect( () => {
+		setDensity( ( _density ) => {
+			if ( ! viewport || ! _density ) {
+				return 0;
+			}
+			const breakValues = viewportBreaks[ viewport ];
+			if ( _density < breakValues.min ) {
+				return breakValues.min;
+			}
+			if ( _density > breakValues.max ) {
+				return breakValues.max;
+			}
+			return _density;
+		} );
+	}, [ setDensity, viewport ] );
+	if ( ! viewport ) {
+		return null;
+	}
+	const breakValues = viewportBreaks[ viewport ];
+	const densityToUse = density || breakValues.default;
+	const rangeValue = getRangeValue( densityToUse, breakValues );
+
+	const step = 100 / ( breakValues.max - breakValues.min + 1 );
+	return (
+		<>
+			<Button
+				size="compact"
+				icon={ lineSolid }
+				disabled={ rangeValue <= 0 }
+				accessibleWhenDisabled
+				label={ __( 'Decrease size' ) }
+				onClick={ () => {
+					setDensity( densityToUse + 1 );
+				} }
+			/>
+			<RangeControl
+				__nextHasNoMarginBottom
+				showTooltip={ false }
+				className="dataviews-density-picker__range-control"
+				label={ __( 'Item size' ) }
+				hideLabelFromVision
+				value={ rangeValue }
+				min={ 0 }
+				max={ 100 }
+				withInputField={ false }
+				onChange={ ( value = 0 ) => {
+					const inverseValue = 100 - value;
+					setDensity(
+						Math.round(
+							( inverseValue *
+								( breakValues.max - breakValues.min ) ) /
+								100 +
+								breakValues.min
+						)
+					);
+				} }
+				step={ step }
+			/>
+			<Button
+				size="compact"
+				icon={ plus }
+				disabled={ rangeValue >= 100 }
+				accessibleWhenDisabled
+				label={ __( 'Increase size' ) }
+				onClick={ () => {
+					setDensity( densityToUse - 1 );
+				} }
+			/>
+		</>
+	);
+}

package/src/{view-grid.tsx → layouts/grid/index.tsx}

@@ -19,15 +19,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ItemActions from './item-actions';
-import SingleSelectionCheckbox from './single-selection-checkbox';
-import { useHasAPossibleBulkAction } from './bulk-actions';
-import type { Action, NormalizedField, ViewGridProps } from './types';
-import type { SetSelection } from './private-types';
+import ItemActions from '../../components/dataviews-item-actions';
+import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
+import type { Action, NormalizedField, ViewGridProps } from '../../types';
+import type { SetSelection } from '../../private-types';
 
 interface GridItemProps< Item > {
 	selection: string[];
-	onSelectionChange: SetSelection;
+	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
 	item: Item;
 	actions: Action< Item >[];
@@ -40,7 +40,7 @@ interface GridItemProps< Item > {
 
 function GridItem< Item >( {
 	selection,
-	onSelectionChange,
+	onChangeSelection,
 	getItemId,
 	item,
 	actions,
@@ -53,6 +53,12 @@ function GridItem< Item >( {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : null;
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
 	return (
 		<VStack
 			spacing={ 0 }
@@ -67,7 +73,7 @@ function GridItem< Item >( {
 					if ( ! hasBulkAction ) {
 						return;
 					}
-					onSelectionChange(
+					onChangeSelection(
 						selection.includes( id )
 							? selection.filter( ( itemId ) => id !== itemId )
 							: [ ...selection, id ]
@@ -76,7 +82,7 @@ function GridItem< Item >( {
 			} }
 		>
 			<div className="dataviews-view-grid__media">
-				{ mediaField?.render( { item } ) }
+				{ renderedMediaField }
 			</div>
 			<HStack
 				justify="space-between"
@@ -85,13 +91,13 @@ function GridItem< Item >( {
 				<SingleSelectionCheckbox
 					item={ item }
 					selection={ selection }
-					onSelectionChange={ onSelectionChange }
+					onChangeSelection={ onChangeSelection }
 					getItemId={ getItemId }
 					primaryField={ primaryField }
 					disabled={ ! hasBulkAction }
 				/>
 				<HStack className="dataviews-view-grid__primary-field">
-					{ primaryField?.render( { item } ) }
+					{ renderedPrimaryField }
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
@@ -104,32 +110,20 @@ function GridItem< Item >( {
 					justify="flex-start"
 				>
 					{ badgeFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<FlexItem
 								key={ field.id }
 								className="dataviews-view-grid__field-value"
 							>
-								{ renderedValue }
+								<field.render item={ item } />
 							</FlexItem>
 						);
 					} ) }
 				</HStack>
 			) }
 			{ !! visibleFields?.length && (
-				<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
+				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
 					{ visibleFields.map( ( field ) => {
-						const renderedValue = field.render( {
-							item,
-						} );
-						if ( ! renderedValue ) {
-							return null;
-						}
 						return (
 							<Flex
 								className={ clsx(
@@ -151,13 +145,13 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
+										{ field.label }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"
 										style={ { maxHeight: 'none' } }
 									>
-										{ renderedValue }
+										<field.render item={ item } />
 									</FlexItem>
 								</>
 							</Flex>
@@ -175,9 +169,10 @@ export default function ViewGrid< Item >( {
 	fields,
 	getItemId,
 	isLoading,
-	onSelectionChange,
+	onChangeSelection,
 	selection,
 	view,
+	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -208,6 +203,9 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
+	const gridStyle = density
+		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+		: {};
 	return (
 		<>
 			{ hasData && (
@@ -216,6 +214,7 @@ export default function ViewGrid< Item >( {
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
+					style={ gridStyle }
 					aria-busy={ isLoading }
 				>
 					{ data.map( ( item ) => {
@@ -223,7 +222,7 @@ export default function ViewGrid< Item >( {
 							<GridItem
 								key={ getItemId( item ) }
 								selection={ selection }
-								onSelectionChange={ onSelectionChange }
+								onChangeSelection={ onChangeSelection }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }

package/src/layouts/grid/style.scss

@@ -0,0 +1,140 @@
+.dataviews-view-grid {
+	margin-bottom: auto;
+	grid-template-rows: max-content;
+	padding: 0 $grid-unit-60 $grid-unit-30;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+
+	.dataviews-view-grid__card {
+		height: 100%;
+		justify-content: flex-start;
+
+		.dataviews-view-grid__title-actions {
+			padding: $grid-unit-10 0 $grid-unit-05;
+		}
+
+		.dataviews-view-grid__primary-field {
+			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+		}
+
+		&.is-selected {
+			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+		position: relative;
+
+		img {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+			pointer-events: none;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		&:not(:empty) {
+			padding: 0 0 $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field {
+			align-items: flex-start;
+			min-height: $grid-unit-30;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			&.is-column {
+				& + .is-row {
+					margin-top: $grid-unit-05;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
+				color: $gray-700;
+			}
+		}
+	}
+
+	.dataviews-view-grid__badge-fields {
+		&:not(:empty) {
+			padding-bottom: $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field-value {
+			width: fit-content;
+			background: $gray-100;
+			padding: 0 $grid-unit-10;
+			min-height: $grid-unit-30;
+			border-radius: $radius-block-ui;
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+		}
+	}
+}
+
+.dataviews-view-grid.dataviews-view-grid {
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+
+	@include break-xhuge() {
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+}
+
+.dataviews-density-picker__range-control {
+	width: 200px;
+}
+
+.dataviews-view-grid__field-value:empty,
+.dataviews-view-grid__field:empty {
+	display: none;
+}

package/src/layouts/index.ts

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './table';
+import ViewGrid from './grid';
+import ViewList from './list';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
+import type { View } from '../types';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];
+
+export function getMandatoryFields( view: View ): string[] {
+	if ( view.type === 'table' ) {
+		return [ view.layout?.primaryField ]
+			.concat(
+				view.layout?.combinedFields?.flatMap(
+					( field ) => field.children
+				) ?? []
+			)
+			.filter( ( item ): item is string => !! item );
+	}
+
+	if ( view.type === 'grid' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	if ( view.type === 'list' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	return [];
+}

package/src/{view-list.tsx → layouts/list/index.tsx}

@@ -32,10 +32,12 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, NormalizedField, ViewListProps } from './types';
-
-import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
+import { unlock } from '../../lock-unlock';
+import {
+	ActionsDropdownMenuGroup,
+	ActionModal,
+} from '../../components/dataviews-item-actions';
+import type { Action, NormalizedField, ViewListProps } from '../../types';
 
 interface ListViewItemProps< Item > {
 	actions: Action< Item >[];
@@ -113,6 +115,16 @@ function ListItem< Item >( {
 			? primaryAction.label
 			: primaryAction.label( [ item ] ) );
 
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : (
+		<div className="dataviews-view-list__media-placeholder"></div>
+	);
+
+	const renderedPrimaryField = primaryField?.render ? (
+		<primaryField.render item={ item } />
+	) : null;
+
 	return (
 		<CompositeRow
 			ref={ itemRef }
@@ -148,16 +160,17 @@ function ListItem< Item >( {
 							alignment="flex-start"
 						>
 							<div className="dataviews-view-list__media-wrapper">
-								{ mediaField?.render( { item } ) || (
-									<div className="dataviews-view-list__media-placeholder"></div>
-								) }
+								{ renderedMediaField }
 							</div>
-							<VStack spacing={ 0 }>
+							<VStack
+								spacing={ 1 }
+								className="dataviews-view-list__field-wrapper"
+							>
 								<span
 									className="dataviews-view-list__primary-field"
 									id={ labelId }
 								>
-									{ primaryField?.render( { item } ) }
+									{ renderedPrimaryField }
 								</span>
 								<div
 									className="dataviews-view-list__fields"
@@ -172,10 +185,10 @@ function ListItem< Item >( {
 												as="span"
 												className="dataviews-view-list__field-label"
 											>
-												{ field.header }
+												{ field.label }
 											</VisuallyHidden>
 											<span className="dataviews-view-list__field-value">
-												{ field.render( { item } ) }
+												<field.render item={ item } />
 											</span>
 										</div>
 									) ) }
@@ -186,7 +199,7 @@ function ListItem< Item >( {
 				</div>
 				{ eligibleActions?.length > 0 && (
 					<HStack
-						spacing={ 1 }
+						spacing={ 3 }
 						justify="flex-end"
 						className="dataviews-view-list__item-actions"
 						style={ {
@@ -205,7 +218,7 @@ function ListItem< Item >( {
 											isDestructive={
 												primaryAction.isDestructive
 											}
-											size="compact"
+											size="small"
 											onClick={ () =>
 												setIsModalOpen( true )
 											}
@@ -236,7 +249,7 @@ function ListItem< Item >( {
 												isDestructive={
 													primaryAction.isDestructive
 												}
-												size="compact"
+												size="small"
 												onClick={ () => {
 													primaryAction.callback(
 														[ item ],
@@ -255,7 +268,7 @@ function ListItem< Item >( {
 										store={ store }
 										render={
 											<Button
-												size="compact"
+												size="small"
 												icon={ moreVertical }
 												label={ __( 'Actions' ) }
 												accessibleWhenDisabled
@@ -310,7 +323,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		fields,
 		getItemId,
 		isLoading,
-		onSelectionChange,
+		onChangeSelection,
 		selection,
 		view,
 	} = props;
@@ -335,7 +348,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	);
 
 	const onSelect = ( item: Item ) =>
-		onSelectionChange( [ getItemId( item ) ] );
+		onChangeSelection( [ getItemId( item ) ] );
 
 	const getItemDomId = useCallback(
 		( item?: Item ) =>