@wordpress/dataviews 4.9.1-next.cd6172eb0.0 → 4.11.0

package/src/dataviews-layouts/index.ts

@@ -16,7 +16,6 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import type { View, Field } from '../types';
 import PreviewSizePicker from './grid/preview-size-picker';
 import DensityPicker from './table/density-picker';
 
@@ -42,90 +41,3 @@ export const VIEW_LAYOUTS = [
 		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
 	},
 ];
-
-export function getNotHidableFieldIds( 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 [];
-}
-
-function getCombinedFieldIds( view: View ): string[] {
-	const combinedFields: string[] = [];
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		view.layout.combinedFields.forEach( ( combination ) => {
-			combinedFields.push( ...combination.children );
-		} );
-	}
-	return combinedFields;
-}
-
-export function getVisibleFieldIds(
-	view: View,
-	fields: Field< any >[]
-): string[] {
-	const fieldsToExclude = getCombinedFieldIds( view );
-
-	if ( view.fields ) {
-		return view.fields.filter( ( id ) => ! fieldsToExclude.includes( id ) );
-	}
-
-	const visibleFields = [];
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		visibleFields.push(
-			...view.layout.combinedFields.map( ( { id } ) => id )
-		);
-	}
-	visibleFields.push(
-		...fields
-			.filter( ( { id } ) => ! fieldsToExclude.includes( id ) )
-			.map( ( { id } ) => id )
-	);
-
-	return visibleFields;
-}
-
-export function getHiddenFieldIds(
-	view: View,
-	fields: Field< any >[]
-): string[] {
-	const fieldsToExclude = [
-		...getCombinedFieldIds( view ),
-		...getVisibleFieldIds( view, fields ),
-	];
-
-	// The media field does not need to be in the view.fields to be displayed.
-	if ( view.type === LAYOUT_GRID && view.layout?.mediaField ) {
-		fieldsToExclude.push( view.layout?.mediaField );
-	}
-
-	if ( view.type === LAYOUT_LIST && view.layout?.mediaField ) {
-		fieldsToExclude.push( view.layout?.mediaField );
-	}
-
-	return fields
-		.filter(
-			( { id, enableHiding } ) =>
-				! fieldsToExclude.includes( id ) && enableHiding
-		)
-		.map( ( { id } ) => id );
-}

package/src/dataviews-layouts/list/index.tsx

@@ -35,17 +35,25 @@ import {
 	ActionsMenuGroup,
 	ActionModal,
 } from '../../components/dataviews-item-actions';
-import type { Action, NormalizedField, ViewListProps } from '../../types';
+import type {
+	Action,
+	NormalizedField,
+	ViewList as ViewListType,
+	ViewListProps,
+	ActionModal as ActionModalType,
+} from '../../types';
 
 interface ListViewItemProps< Item > {
+	view: ViewListType;
 	actions: Action< Item >[];
 	idPrefix: string;
 	isSelected: boolean;
 	item: Item;
+	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
 	onSelect: ( item: Item ) => void;
-	primaryField?: NormalizedField< Item >;
-	visibleFields: NormalizedField< Item >[];
+	otherFields: NormalizedField< Item >[];
 	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
 }
 
@@ -93,6 +101,8 @@ function PrimaryActionGridCell< Item >( {
 				render={
 					<Button
 						label={ label }
+						disabled={ !! primaryAction.disabled }
+						accessibleWhenDisabled
 						icon={ primaryAction.icon }
 						isDestructive={ primaryAction.isDestructive }
 						size="small"
@@ -116,6 +126,8 @@ function PrimaryActionGridCell< Item >( {
 				render={
 					<Button
 						label={ label }
+						disabled={ !! primaryAction.disabled }
+						accessibleWhenDisabled
 						icon={ primaryAction.icon }
 						isDestructive={ primaryAction.isDestructive }
 						size="small"
@@ -130,21 +142,28 @@ function PrimaryActionGridCell< Item >( {
 }
 
 function ListItem< Item >( {
+	view,
 	actions,
 	idPrefix,
 	isSelected,
 	item,
+	titleField,
 	mediaField,
+	descriptionField,
 	onSelect,
-	primaryField,
-	visibleFields,
+	otherFields,
 	onDropdownTriggerKeyDown,
 }: ListViewItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const itemRef = useRef< HTMLDivElement >( null );
 	const labelId = `${ idPrefix }-label`;
 	const descriptionId = `${ idPrefix }-description`;
 
+	const registry = useRegistry();
 	const [ isHovered, setIsHovered ] = useState( false );
+	const [ activeModalAction, setActiveModalAction ] = useState(
+		null as ActionModalType< Item > | null
+	);
 	const handleHover: React.MouseEventHandler = ( { type } ) => {
 		const isHover = type === 'mouseenter';
 		setIsHovered( isHover );
@@ -177,15 +196,17 @@ function ListItem< Item >( {
 
 	const hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;
 
-	const renderedMediaField = mediaField?.render ? (
-		<div className="dataviews-view-list__media-wrapper">
-			<mediaField.render item={ item } />
-		</div>
-	) : null;
+	const renderedMediaField =
+		showMedia && mediaField?.render ? (
+			<div className="dataviews-view-list__media-wrapper">
+				<mediaField.render item={ item } />
+			</div>
+		) : null;
 
-	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
-	) : null;
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } />
+		) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
 		<HStack spacing={ 3 } className="dataviews-view-list__item-actions">
@@ -198,31 +219,44 @@ function ListItem< Item >( {
 			) }
 			{ ! hasOnlyOnePrimaryAction && (
 				<div role="gridcell">
-					<Menu
-						trigger={
-							<Composite.Item
-								id={ generateDropdownTriggerCompositeId(
-									idPrefix
-								) }
-								render={
-									<Button
-										size="small"
-										icon={ moreVertical }
-										label={ __( 'Actions' ) }
-										accessibleWhenDisabled
-										disabled={ ! actions.length }
-										onKeyDown={ onDropdownTriggerKeyDown }
-									/>
-								}
-							/>
-						}
-						placement="bottom-end"
-					>
-						<ActionsMenuGroup
-							actions={ eligibleActions }
-							item={ item }
+					<Menu placement="bottom-end">
+						<Menu.TriggerButton
+							render={
+								<Composite.Item
+									id={ generateDropdownTriggerCompositeId(
+										idPrefix
+									) }
+									render={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __( 'Actions' ) }
+											accessibleWhenDisabled
+											disabled={ ! actions.length }
+											onKeyDown={
+												onDropdownTriggerKeyDown
+											}
+										/>
+									}
+								/>
+							}
 						/>
+						<Menu.Popover>
+							<ActionsMenuGroup
+								actions={ eligibleActions }
+								item={ item }
+								registry={ registry }
+								setActiveModalAction={ setActiveModalAction }
+							/>
+						</Menu.Popover>
 					</Menu>
+					{ !! activeModalAction && (
+						<ActionModal
+							action={ activeModalAction }
+							items={ [ item ] }
+							closeModal={ () => setActiveModalAction( null ) }
+						/>
+					) }
 				</div>
 			) }
 		</HStack>
@@ -231,7 +265,7 @@ function ListItem< Item >( {
 	return (
 		<Composite.Row
 			ref={ itemRef }
-			render={ <li /> }
+			render={ <div /> }
 			role="row"
 			className={ clsx( {
 				'is-selected': isSelected,
@@ -259,18 +293,23 @@ function ListItem< Item >( {
 					>
 						<HStack spacing={ 0 }>
 							<div
-								className="dataviews-view-list__primary-field"
+								className="dataviews-title-field"
 								id={ labelId }
 							>
-								{ renderedPrimaryField }
+								{ renderedTitleField }
 							</div>
 							{ usedActions }
 						</HStack>
+						{ showDescription && descriptionField?.render && (
+							<div className="dataviews-view-list__field">
+								<descriptionField.render item={ item } />
+							</div>
+						) }
 						<div
 							className="dataviews-view-list__fields"
 							id={ descriptionId }
 						>
-							{ visibleFields.map( ( field ) => (
+							{ otherFields.map( ( field ) => (
 								<div
 									key={ field.id }
 									className="dataviews-view-list__field"
@@ -294,6 +333,10 @@ function ListItem< Item >( {
 	);
 }
 
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
 export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const {
 		actions,
@@ -310,21 +353,14 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
 	);
-
-	const mediaField = fields.find(
-		( field ) => field.id === view.layout?.mediaField
-	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
-	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const visibleFields = fields.filter(
-		( field ) =>
-			viewFields.includes( field.id ) &&
-			! [ view.layout?.primaryField, view.layout?.mediaField ].includes(
-				field.id
-			)
+	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 ?? [] )
+		.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )
+		.filter( isDefined );
 
 	const onSelect = ( item: Item ) =>
 		onChangeSelection( [ getItemId( item ) ] );
@@ -454,7 +490,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	return (
 		<Composite
 			id={ baseId }
-			render={ <ul /> }
+			render={ <div /> }
 			className="dataviews-view-list"
 			role="grid"
 			activeId={ activeCompositeId }
@@ -465,14 +501,16 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 				return (
 					<ListItem
 						key={ id }
+						view={ view }
 						idPrefix={ id }
 						actions={ actions }
 						item={ item }
 						isSelected={ item === selectedItem }
 						onSelect={ onSelect }
 						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
+						titleField={ titleField }
+						descriptionField={ descriptionField }
+						otherFields={ otherFields }
 						onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
 					/>
 				);

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

@@ -1,17 +1,18 @@
-ul.dataviews-view-list {
+div.dataviews-view-list {
 	list-style-type: none;
 }
 
 .dataviews-view-list {
 	margin: 0 0 auto;
 
-	li {
+	div[role="row"] {
 		margin: 0;
 		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
 			padding: $grid-unit-20 $grid-unit-30;
+			box-sizing: border-box;
 		}
 
 		.dataviews-view-list__item-actions {
@@ -44,13 +45,13 @@ ul.dataviews-view-list {
 		&.is-selected.is-selected {
 			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 
-			& + li {
+			& + div[role="row"] {
 				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 			}
 		}
 
 		&:not(.is-selected) {
-			.dataviews-view-list__primary-field {
+			.dataviews-view-list__title-field {
 				color: $gray-900;
 			}
 			&:hover,
@@ -59,7 +60,7 @@ ul.dataviews-view-list {
 				color: var(--wp-admin-theme-color);
 				background-color: #f8f8f8;
 
-				.dataviews-view-list__primary-field,
+				.dataviews-view-list__title-field,
 				.dataviews-view-list__fields {
 					color: var(--wp-admin-theme-color);
 				}
@@ -68,13 +69,13 @@ ul.dataviews-view-list {
 
 	}
 
-	li.is-selected,
-	li.is-selected:focus-within {
+	div[role="row"].is-selected,
+	div[role="row"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-900;
 
-			.dataviews-view-list__primary-field,
+			.dataviews-view-list__title-field,
 			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
@@ -106,7 +107,7 @@ ul.dataviews-view-list {
 			}
 		}
 	}
-	.dataviews-view-list__primary-field {
+	.dataviews-view-list__title-field {
 		flex: 1;
 		min-height: $grid-unit-30;
 		line-height: $grid-unit-30;