@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

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

@@ -1,24 +1,6 @@
-.dataviews-view-grid {
-	margin-bottom: auto;
-	display: grid;
-	gap: $grid-unit-40;
-	grid-template-rows: max-content;
-	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-	padding: 0 $grid-unit-60 $grid-unit-30;
-	container-type: inline-size;
-	/**
-	 * Breakpoints were adjusted from media queries breakpoints to account for
-	 * the sidebar width. This was done to match the existing styles we had.
-	 */
-	@container (max-width: 480px) {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-
-	@media not (prefers-reduced-motion) {
-		transition: padding ease-out 0.1s;
-	}
+@import "../utils/grid-items.scss";
 
+.dataviews-view-grid {
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
@@ -139,9 +121,15 @@
 	top: -9999em;
 	left: $grid-unit-10;
 	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+	opacity: 0;
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s linear;
+	}
 
 	@media (hover: none) {
 		// Show checkboxes on devices that do not support hover.
+		opacity: 1;
 		top: $grid-unit-10;
 	}
 }
@@ -149,9 +137,37 @@
 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	opacity: 1;
 	top: $grid-unit-10;
 }
 
+.dataviews-view-grid__card .dataviews-view-grid__media-actions {
+	position: absolute;
+	top: $grid-unit-05;
+	opacity: 0;
+	right: $grid-unit-05;
+
+	.dataviews-all-actions-button {
+		background-color: $white;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s linear;
+	}
+
+	@media (hover: none) {
+		// Show actions on devices that do not support hover.
+		opacity: 1;
+		top: $grid-unit-05;
+	}
+}
+
+.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded="true"]) {
+	opacity: 1;
+}
+
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }
@@ -162,4 +178,10 @@
 	color: $gray-900;
 	margin: 0 0 $grid-unit-10 0;
 	padding: 0 $grid-unit-60;
+	container-type: inline-size;
+
+	@container (max-width: 430px) {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
 }

package/src/dataviews-layouts/index.ts

@@ -15,8 +15,14 @@ import {
 import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
-import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import PreviewSizePicker from './grid/preview-size-picker';
+import ViewPickerGrid from './picker-grid';
+import {
+	LAYOUT_GRID,
+	LAYOUT_LIST,
+	LAYOUT_TABLE,
+	LAYOUT_PICKER_GRID,
+} from '../constants';
+import PreviewSizePicker from './utils/preview-size-picker';
 import DensityPicker from './table/density-picker';
 
 export const VIEW_LAYOUTS = [
@@ -40,4 +46,12 @@ export const VIEW_LAYOUTS = [
 		component: ViewList,
 		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
 	},
+	{
+		type: LAYOUT_PICKER_GRID,
+		label: __( 'Grid' ),
+		component: ViewPickerGrid,
+		icon: category,
+		viewConfigOptions: PreviewSizePicker,
+		isPicker: true,
+	},
 ];

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

@@ -0,0 +1,490 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Spinner,
+	Flex,
+	FlexItem,
+	privateApis as componentsPrivateApis,
+	Composite,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsContext from '../../components/dataviews-context';
+import { useIsMultiselectPicker } from '../../components/dataviews-picker/footer';
+import type {
+	NormalizedField,
+	ViewPickerGrid as ViewPickerGridType,
+	ViewPickerGridProps,
+} from '../../types';
+import type { SetSelection } from '../../private-types';
+import { GridItems } from '../utils/grid-items';
+const { Badge } = unlock( componentsPrivateApis );
+
+interface GridItemProps< Item > {
+	view: ViewPickerGridType;
+	multiselect?: boolean;
+	selection: string[];
+	onChangeSelection: SetSelection;
+	getItemId: ( item: Item ) => string;
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	regularFields: NormalizedField< Item >[];
+	badgeFields: NormalizedField< Item >[];
+	config: {
+		sizes: string;
+	};
+	posinset?: number;
+	setsize?: number;
+}
+
+function GridItem< Item >( {
+	view,
+	multiselect,
+	selection,
+	onChangeSelection,
+	getItemId,
+	item,
+	mediaField,
+	titleField,
+	descriptionField,
+	regularFields,
+	badgeFields,
+	config,
+	posinset,
+	setsize,
+}: GridItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render
+			item={ item }
+			field={ mediaField }
+			config={ config }
+		/>
+	) : null;
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } field={ titleField } />
+		) : null;
+
+	return (
+		<Composite.Item
+			key={ id }
+			render={ ( { children, ...props } ) => (
+				<VStack spacing={ 0 } children={ children } { ...props } />
+			) }
+			role="option"
+			aria-posinset={ posinset }
+			aria-setsize={ setsize }
+			className={ clsx( 'dataviews-view-picker-grid__card', {
+				'is-selected': isSelected,
+			} ) }
+			aria-selected={ isSelected }
+			onClick={ () => {
+				if ( isSelected ) {
+					onChangeSelection(
+						selection.filter( ( itemId ) => id !== itemId )
+					);
+				} else {
+					const newSelection = multiselect
+						? [ ...selection, id ]
+						: [ id ];
+					onChangeSelection( newSelection );
+				}
+			} }
+		>
+			{ showMedia && renderedMediaField && (
+				<div className="dataviews-view-picker-grid__media">
+					{ renderedMediaField }
+				</div>
+			) }
+			{ showMedia && renderedMediaField && (
+				<DataViewsSelectionCheckbox
+					item={ item }
+					selection={ selection }
+					onChangeSelection={ onChangeSelection }
+					getItemId={ getItemId }
+					titleField={ titleField }
+					disabled={ false }
+					aria-hidden
+					tabIndex={ -1 }
+				/>
+			) }
+			<HStack
+				justify="space-between"
+				className="dataviews-view-picker-grid__title-actions"
+			>
+				<div className="dataviews-view-picker-grid__title-field dataviews-title-field">
+					{ renderedTitleField }
+				</div>
+			</HStack>
+			<VStack spacing={ 1 }>
+				{ showDescription && descriptionField?.render && (
+					<descriptionField.render
+						item={ item }
+						field={ descriptionField }
+					/>
+				) }
+				{ !! badgeFields?.length && (
+					<HStack
+						className="dataviews-view-picker-grid__badge-fields"
+						spacing={ 2 }
+						wrap
+						alignment="top"
+						justify="flex-start"
+					>
+						{ badgeFields.map( ( field ) => {
+							return (
+								<Badge
+									key={ field.id }
+									className="dataviews-view-picker-grid__field-value"
+								>
+									<field.render
+										item={ item }
+										field={ field }
+									/>
+								</Badge>
+							);
+						} ) }
+					</HStack>
+				) }
+				{ !! regularFields?.length && (
+					<VStack
+						className="dataviews-view-picker-grid__fields"
+						spacing={ 1 }
+					>
+						{ regularFields.map( ( field ) => {
+							return (
+								<Flex
+									className="dataviews-view-picker-grid__field"
+									key={ field.id }
+									gap={ 1 }
+									justify="flex-start"
+									expanded
+									style={ { height: 'auto' } }
+									direction="row"
+								>
+									<>
+										<FlexItem className="dataviews-view-picker-grid__field-name">
+											{ field.header }
+										</FlexItem>
+										<FlexItem
+											className="dataviews-view-picker-grid__field-value"
+											style={ { maxHeight: 'none' } }
+										>
+											<field.render
+												item={ item }
+												field={ field }
+											/>
+										</FlexItem>
+									</>
+								</Flex>
+							);
+						} ) }
+					</VStack>
+				) }
+			</VStack>
+		</Composite.Item>
+	);
+}
+
+function GridGroup< Item >( {
+	groupName,
+	groupField,
+	children,
+}: {
+	groupName: string;
+	groupField: NormalizedField< Item >;
+	children: ReactNode;
+} ) {
+	const headerId = useInstanceId(
+		GridGroup,
+		'dataviews-view-picker-grid-group__header'
+	);
+	return (
+		<VStack
+			key={ groupName }
+			spacing={ 2 }
+			role="group"
+			aria-labelledby={ headerId }
+		>
+			<h3
+				className="dataviews-view-picker-grid-group__header"
+				id={ headerId }
+			>
+				{ sprintf(
+					// translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+					__( '%1$s: %2$s' ),
+					groupField.label,
+					groupName
+				) }
+			</h3>
+			{ children }
+		</VStack>
+	);
+}
+
+function ViewPickerGrid< Item >( {
+	actions,
+	data,
+	fields,
+	getItemId,
+	isLoading,
+	onChangeSelection,
+	selection,
+	view,
+	className,
+	empty,
+}: ViewPickerGridProps< Item > ) {
+	const { resizeObserverRef, paginationInfo, itemListLabel } =
+		useContext( DataViewsContext );
+	const titleField = fields.find(
+		( field ) => field.id === view?.titleField
+	);
+	const mediaField = fields.find(
+		( field ) => field.id === view?.mediaField
+	);
+	const descriptionField = fields.find(
+		( field ) => field.id === view?.descriptionField
+	);
+	const otherFields = view.fields ?? [];
+	const { regularFields, badgeFields } = otherFields.reduce(
+		(
+			accumulator: Record< string, NormalizedField< Item >[] >,
+			fieldId
+		) => {
+			const field = fields.find( ( f ) => f.id === fieldId );
+			if ( ! field ) {
+				return accumulator;
+			}
+			// If the field is a badge field, add it to the badgeFields array
+			// otherwise add it to the rest visibleFields array.
+			const key = view.layout?.badgeFields?.includes( fieldId )
+				? 'badgeFields'
+				: 'regularFields';
+			accumulator[ key ].push( field );
+			return accumulator;
+		},
+		{ regularFields: [], badgeFields: [] }
+	);
+	const hasData = !! data?.length;
+	const usedPreviewSize = view.layout?.previewSize;
+	const isMultiselect = useIsMultiselectPicker( actions );
+
+	/*
+	 * This is the maximum width that an image can achieve in the grid. The reasoning is:
+	 * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).
+	 * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.
+	 * So each image will never grow past 2*430px plus a little more to account for the gaps.
+	 */
+	const size = '900px';
+
+	const groupField = view.groupByField
+		? fields.find( ( f ) => f.id === view.groupByField )
+		: null;
+
+	// Group data by groupByField if specified
+	const dataByGroup = groupField
+		? data.reduce( ( groups: Map< string, typeof data >, item ) => {
+				const groupName = groupField.getValue( { item } );
+				if ( ! groups.has( groupName ) ) {
+					groups.set( groupName, [] );
+				}
+				groups.get( groupName )?.push( item );
+				return groups;
+		  }, new Map< string, typeof data >() )
+		: null;
+
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+
+	const currentPage = view?.page ?? 1;
+	const perPage = view?.perPage ?? 0;
+	const setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;
+
+	return (
+		<>
+			{
+				// Render multiple groups.
+				hasData && groupField && dataByGroup && (
+					<Composite
+						virtualFocus
+						orientation="horizontal"
+						role="listbox"
+						aria-multiselectable={ isMultiselect }
+						className={ clsx(
+							'dataviews-view-picker-grid',
+							className
+						) }
+						aria-label={ itemListLabel }
+						render={ ( { children, ...props } ) => (
+							<VStack
+								spacing={ 4 }
+								children={ children }
+								{ ...props }
+							/>
+						) }
+					>
+						{ Array.from( dataByGroup.entries() ).map(
+							( [ groupName, groupItems ] ) => (
+								<GridGroup
+									key={ groupName }
+									groupName={ groupName }
+									groupField={ groupField }
+								>
+									<GridItems
+										previewSize={ usedPreviewSize }
+										style={ {
+											gridTemplateColumns:
+												usedPreviewSize &&
+												`repeat(auto-fill, minmax(${ usedPreviewSize }px, 1fr))`,
+										} }
+										aria-busy={ isLoading }
+										ref={
+											resizeObserverRef as React.RefObject< HTMLDivElement >
+										}
+									>
+										{ groupItems.map( ( item ) => {
+											const posInSet =
+												( currentPage - 1 ) * perPage +
+												data.indexOf( item ) +
+												1;
+											return (
+												<GridItem
+													key={ getItemId( item ) }
+													view={ view }
+													multiselect={
+														isMultiselect
+													}
+													selection={ selection }
+													onChangeSelection={
+														onChangeSelection
+													}
+													getItemId={ getItemId }
+													item={ item }
+													mediaField={ mediaField }
+													titleField={ titleField }
+													descriptionField={
+														descriptionField
+													}
+													regularFields={
+														regularFields
+													}
+													badgeFields={ badgeFields }
+													config={ {
+														sizes: size,
+													} }
+													posinset={ posInSet }
+													setsize={ setSize }
+												/>
+											);
+										} ) }
+									</GridItems>
+								</GridGroup>
+							)
+						) }
+					</Composite>
+				)
+			}
+
+			{
+				// Render a single grid with all data.
+				hasData && ! dataByGroup && (
+					<Composite
+						render={
+							<GridItems
+								className={ clsx(
+									'dataviews-view-picker-grid',
+									className
+								) }
+								previewSize={ usedPreviewSize }
+								aria-busy={ isLoading }
+								ref={
+									resizeObserverRef as React.RefObject< HTMLDivElement >
+								}
+							/>
+						}
+						virtualFocus
+						orientation="horizontal"
+						role="listbox"
+						aria-multiselectable={ isMultiselect }
+						aria-label={ itemListLabel }
+					>
+						{ data.map( ( item, index ) => {
+							let posinset = isInfiniteScroll
+								? index + 1
+								: undefined;
+
+							if ( ! isInfiniteScroll ) {
+								// When infinite scroll isn't active, take pagination into account
+								// when calculating the posinset.
+								posinset =
+									( currentPage - 1 ) * perPage + index + 1;
+							}
+
+							return (
+								<GridItem
+									key={ getItemId( item ) }
+									view={ view }
+									multiselect={ isMultiselect }
+									selection={ selection }
+									onChangeSelection={ onChangeSelection }
+									getItemId={ getItemId }
+									item={ item }
+									mediaField={ mediaField }
+									titleField={ titleField }
+									descriptionField={ descriptionField }
+									regularFields={ regularFields }
+									badgeFields={ badgeFields }
+									config={ {
+										sizes: size,
+									} }
+									posinset={ posinset }
+									setsize={ setSize }
+								/>
+							);
+						} ) }
+					</Composite>
+				)
+			}
+			{
+				// Render empty state.
+				! hasData && (
+					<div
+						className={ clsx( {
+							'dataviews-loading': isLoading,
+							'dataviews-no-results': ! isLoading,
+						} ) }
+					>
+						<p>{ isLoading ? <Spinner /> : empty }</p>
+					</div>
+				)
+			}
+			{ hasData && isLoading && (
+				<p className="dataviews-loading-more">
+					<Spinner />
+				</p>
+			) }
+		</>
+	);
+}
+
+export default ViewPickerGrid;