@wordpress/dataviews 4.5.0 → 4.7.0

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

@@ -32,7 +32,7 @@ import { useRegistry } from '@wordpress/data';
  */
 import { unlock } from '../../lock-unlock';
 import {
-	ActionsDropdownMenuGroup,
+	ActionsMenuGroup,
 	ActionModal,
 } from '../../components/dataviews-item-actions';
 import type { Action, NormalizedField, ViewListProps } from '../../types';
@@ -49,7 +49,7 @@ interface ListViewItemProps< Item > {
 	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
 }
 
-const { DropdownMenuV2: DropdownMenu } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 function generateItemWrapperCompositeId( idPrefix: string ) {
 	return `${ idPrefix }-item-wrapper`;
@@ -145,11 +145,9 @@ function ListItem< Item >( {
 	const descriptionId = `${ idPrefix }-description`;
 
 	const [ isHovered, setIsHovered ] = useState( false );
-	const handleMouseEnter = () => {
-		setIsHovered( true );
-	};
-	const handleMouseLeave = () => {
-		setIsHovered( false );
+	const handleHover: React.MouseEventHandler = ( { type } ) => {
+		const isHover = type === 'mouseenter';
+		setIsHovered( isHover );
 	};
 
 	useEffect( () => {
@@ -178,15 +176,54 @@ function ListItem< Item >( {
 	}, [ actions, item ] );
 
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
-	) : (
-		<div className="dataviews-view-list__media-placeholder"></div>
-	);
+		<div className="dataviews-view-list__media-wrapper">
+			<mediaField.render item={ item } />
+		</div>
+	) : null;
 
 	const renderedPrimaryField = primaryField?.render ? (
 		<primaryField.render item={ item } />
 	) : null;
 
+	const usedActions = eligibleActions?.length > 0 && (
+		<HStack spacing={ 3 } className="dataviews-view-list__item-actions">
+			{ primaryAction && (
+				<PrimaryActionGridCell
+					idPrefix={ idPrefix }
+					primaryAction={ primaryAction }
+					item={ item }
+				/>
+			) }
+			<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>
+			</div>
+		</HStack>
+	);
+
 	return (
 		<Composite.Row
 			ref={ itemRef }
@@ -196,116 +233,58 @@ function ListItem< Item >( {
 				'is-selected': isSelected,
 				'is-hovered': isHovered,
 			} ) }
-			onMouseEnter={ handleMouseEnter }
-			onMouseLeave={ handleMouseLeave }
+			onMouseEnter={ handleHover }
+			onMouseLeave={ handleHover }
 		>
-			<HStack
-				className="dataviews-view-list__item-wrapper"
-				alignment="center"
-				spacing={ 0 }
-			>
+			<HStack className="dataviews-view-list__item-wrapper" spacing={ 0 }>
 				<div role="gridcell">
 					<Composite.Item
-						render={ <div /> }
-						role="button"
 						id={ generateItemWrapperCompositeId( idPrefix ) }
 						aria-pressed={ isSelected }
 						aria-labelledby={ labelId }
 						aria-describedby={ descriptionId }
 						className="dataviews-view-list__item"
 						onClick={ () => onSelect( item ) }
+					/>
+				</div>
+				<HStack spacing={ 3 } justify="start" alignment="flex-start">
+					{ renderedMediaField }
+					<VStack
+						spacing={ 1 }
+						className="dataviews-view-list__field-wrapper"
 					>
-						<HStack
-							spacing={ 3 }
-							justify="start"
-							alignment="flex-start"
-						>
-							<div className="dataviews-view-list__media-wrapper">
-								{ renderedMediaField }
-							</div>
-							<VStack
-								spacing={ 1 }
-								className="dataviews-view-list__field-wrapper"
+						<HStack spacing={ 0 }>
+							<div
+								className="dataviews-view-list__primary-field"
+								id={ labelId }
 							>
-								<span
-									className="dataviews-view-list__primary-field"
-									id={ labelId }
-								>
-									{ renderedPrimaryField }
-								</span>
+								{ renderedPrimaryField }
+							</div>
+							{ usedActions }
+						</HStack>
+						<div
+							className="dataviews-view-list__fields"
+							id={ descriptionId }
+						>
+							{ visibleFields.map( ( field ) => (
 								<div
-									className="dataviews-view-list__fields"
-									id={ descriptionId }
+									key={ field.id }
+									className="dataviews-view-list__field"
 								>
-									{ visibleFields.map( ( field ) => (
-										<div
-											key={ field.id }
-											className="dataviews-view-list__field"
-										>
-											<VisuallyHidden
-												as="span"
-												className="dataviews-view-list__field-label"
-											>
-												{ field.label }
-											</VisuallyHidden>
-											<span className="dataviews-view-list__field-value">
-												<field.render item={ item } />
-											</span>
-										</div>
-									) ) }
+									<VisuallyHidden
+										as="span"
+										className="dataviews-view-list__field-label"
+									>
+										{ field.label }
+									</VisuallyHidden>
+									<span className="dataviews-view-list__field-value">
+										<field.render item={ item } />
+									</span>
 								</div>
-							</VStack>
-						</HStack>
-					</Composite.Item>
-				</div>
-				{ eligibleActions?.length > 0 && (
-					<HStack
-						spacing={ 3 }
-						justify="flex-end"
-						className="dataviews-view-list__item-actions"
-						style={ {
-							flexShrink: '0',
-							width: 'auto',
-						} }
-					>
-						{ primaryAction && (
-							<PrimaryActionGridCell
-								idPrefix={ idPrefix }
-								primaryAction={ primaryAction }
-								item={ item }
-							/>
-						) }
-						<div role="gridcell">
-							<DropdownMenu
-								trigger={
-									<Composite.Item
-										id={ generateDropdownTriggerCompositeId(
-											idPrefix
-										) }
-										render={
-											<Button
-												size="small"
-												icon={ moreVertical }
-												label={ __( 'Actions' ) }
-												accessibleWhenDisabled
-												disabled={ ! actions.length }
-												onKeyDown={
-													onDropdownTriggerKeyDown
-												}
-											/>
-										}
-									/>
-								}
-								placement="bottom-end"
-							>
-								<ActionsDropdownMenuGroup
-									actions={ eligibleActions }
-									item={ item }
-								/>
-							</DropdownMenu>
+							) ) }
 						</div>
-					</HStack>
-				) }
+					</VStack>
+				</HStack>
 			</HStack>
 		</Composite.Row>
 	);

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

@@ -7,63 +7,40 @@ ul.dataviews-view-list {
 
 	li {
 		margin: 0;
-		cursor: pointer;
 		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
-			border-radius: $grid-unit-05;
-
-			> * {
-				width: 100%;
-			}
+			padding: $grid-unit-20 $grid-unit-30;
 		}
 
 		.dataviews-view-list__item-actions {
-			position: absolute;
-			top: $grid-unit-20;
-			right: 0;
-
+			flex: 0;
+			overflow: hidden;
 
 			> div {
 				height: $button-size-small;
 			}
 
 			.components-button {
+				position: relative;
+				z-index: 1;
 				opacity: 0;
 			}
 		}
 
-		&:has(.dataviews-view-list__fields:empty) {
+		&:where(.is-selected, .is-hovered, :focus-within) {
 			.dataviews-view-list__item-actions {
-				top: 50%;
-				transform: translateY(-50%);
-			}
-		}
-
-		&.is-selected,
-		&.is-hovered,
-		&:focus-within {
-			.dataviews-view-list__item-actions {
-				background: #f8f8f8;
-				padding-left: $grid-unit-10;
-				margin-right: $grid-unit-30;
-				box-shadow: -12px 0 8px 0 #f8f8f8;
+				flex-basis: min-content;
+				overflow: unset;
+				padding-inline-end: $grid-unit-05;
 
 				.components-button {
 					opacity: 1;
-					position: static;
 				}
 			}
 		}
 
-		&.is-selected {
-			.dataviews-view-list__item-actions {
-				background-color: rgb(247 248 255);
-				box-shadow: -12px 0 8px 0 rgb(247 248 255);
-			}
-		}
-
 		&.is-selected.is-selected {
 			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 
@@ -105,27 +82,38 @@ ul.dataviews-view-list {
 	}
 
 	.dataviews-view-list__item {
-		box-sizing: border-box;
-		padding: $grid-unit-20 $grid-unit-30;
-		width: 100%;
+		position: absolute;
+		z-index: 1;
+		inset: 0;
 		scroll-margin: $grid-unit-10 0;
+		appearance: none;
+		border: none;
+		background: none;
+		padding: 0;
+		cursor: pointer;
 
 		&:focus-visible {
+			outline: none;
+
 			&::before {
 				position: absolute;
 				content: "";
-				top: var(--wp-admin-border-width-focus);
-				right: var(--wp-admin-border-width-focus);
-				bottom: var(--wp-admin-border-width-focus);
-				left: var(--wp-admin-border-width-focus);
+				inset: var(--wp-admin-border-width-focus);
 				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 				border-radius: $radius-small;
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
 			}
 		}
-		.dataviews-view-list__primary-field {
-			min-height: $grid-unit-30;
-			line-height: $grid-unit-30;
-			overflow: hidden;
+	}
+	.dataviews-view-list__primary-field {
+		flex: 1;
+		min-height: $grid-unit-30;
+		line-height: $grid-unit-30;
+		overflow: hidden;
+		// The field should be in front of the main button in case it has a link/button.
+		&:has(a, button) {
+			z-index: 1;
 		}
 	}
 
@@ -156,14 +144,9 @@ ul.dataviews-view-list {
 		}
 	}
 
-	.dataviews-view-list__media-placeholder {
-		width: $grid-unit-05 * 13;
-		height: $grid-unit-05 * 13;
-		background-color: $gray-200;
-	}
-
 	.dataviews-view-list__field-wrapper {
 		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+		flex-grow: 1;
 	}
 
 	.dataviews-view-list__fields {

package/src/dataviews-layouts/table/column-header-menu.tsx

@@ -29,7 +29,7 @@ import type {
 } from '../../types';
 import { getVisibleFieldIds } from '../index';
 
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 interface HeaderMenuProps< Item > {
 	fieldId: string;
@@ -40,12 +40,12 @@ interface HeaderMenuProps< Item > {
 	setOpenedFilter: ( fieldId: string ) => void;
 }
 
-function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
+function WithMenuSeparators( { children }: { children: ReactNode } ) {
 	return Children.toArray( children )
 		.filter( Boolean )
 		.map( ( child, i ) => (
 			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuV2.Separator /> }
+				{ i > 0 && <Menu.Separator /> }
 				{ child }
 			</Fragment>
 		) );
@@ -101,7 +101,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}
 
 	return (
-		<DropdownMenuV2
+		<Menu
 			align="start"
 			trigger={
 				<Button
@@ -120,9 +120,9 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 			}
 			style={ { minWidth: '240px' } }
 		>
-			<WithDropDownMenuSeparators>
+			<WithMenuSeparators>
 				{ isSortable && (
-					<DropdownMenuV2.Group>
+					<Menu.Group>
 						{ SORTING_DIRECTIONS.map(
 							( direction: SortDirection ) => {
 								const isChecked =
@@ -133,7 +133,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 								const value = `${ fieldId }-${ direction }`;
 
 								return (
-									<DropdownMenuV2.RadioItem
+									<Menu.RadioItem
 										key={ value }
 										// All sorting radio items share the same name, so that
 										// selecting a sorting option automatically deselects the
@@ -153,18 +153,18 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 											} );
 										} }
 									>
-										<DropdownMenuV2.ItemLabel>
+										<Menu.ItemLabel>
 											{ sortLabels[ direction ] }
-										</DropdownMenuV2.ItemLabel>
-									</DropdownMenuV2.RadioItem>
+										</Menu.ItemLabel>
+									</Menu.RadioItem>
 								);
 							}
 						) }
-					</DropdownMenuV2.Group>
+					</Menu.Group>
 				) }
 				{ canAddFilter && (
-					<DropdownMenuV2.Group>
-						<DropdownMenuV2.Item
+					<Menu.Group>
+						<Menu.Item
 							prefix={ <Icon icon={ funnel } /> }
 							onClick={ () => {
 								setOpenedFilter( fieldId );
@@ -182,14 +182,14 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 								} );
 							} }
 						>
-							<DropdownMenuV2.ItemLabel>
+							<Menu.ItemLabel>
 								{ __( 'Add filter' ) }
-							</DropdownMenuV2.ItemLabel>
-						</DropdownMenuV2.Item>
-					</DropdownMenuV2.Group>
+							</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu.Group>
 				) }
-				<DropdownMenuV2.Group>
-					<DropdownMenuV2.Item
+				<Menu.Group>
+					<Menu.Item
 						prefix={ <Icon icon={ arrowLeft } /> }
 						disabled={ index < 1 }
 						onClick={ () => {
@@ -207,11 +207,9 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							} );
 						} }
 					>
-						<DropdownMenuV2.ItemLabel>
-							{ __( 'Move left' ) }
-						</DropdownMenuV2.ItemLabel>
-					</DropdownMenuV2.Item>
-					<DropdownMenuV2.Item
+						<Menu.ItemLabel>{ __( 'Move left' ) }</Menu.ItemLabel>
+					</Menu.Item>
+					<Menu.Item
 						prefix={ <Icon icon={ arrowRight } /> }
 						disabled={ index >= visibleFieldIds.length - 1 }
 						onClick={ () => {
@@ -227,12 +225,10 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							} );
 						} }
 					>
-						<DropdownMenuV2.ItemLabel>
-							{ __( 'Move right' ) }
-						</DropdownMenuV2.ItemLabel>
-					</DropdownMenuV2.Item>
+						<Menu.ItemLabel>{ __( 'Move right' ) }</Menu.ItemLabel>
+					</Menu.Item>
 					{ isHidable && field && (
-						<DropdownMenuV2.Item
+						<Menu.Item
 							prefix={ <Icon icon={ unseen } /> }
 							onClick={ () => {
 								onHide( field );
@@ -244,14 +240,14 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 								} );
 							} }
 						>
-							<DropdownMenuV2.ItemLabel>
+							<Menu.ItemLabel>
 								{ __( 'Hide column' ) }
-							</DropdownMenuV2.ItemLabel>
-						</DropdownMenuV2.Item>
+							</Menu.ItemLabel>
+						</Menu.Item>
 					) }
-				</DropdownMenuV2.Group>
-			</WithDropDownMenuSeparators>
-		</DropdownMenuV2>
+				</Menu.Group>
+			</WithMenuSeparators>
+		</Menu>
 	);
 } );
 

package/src/types.ts

@@ -106,7 +106,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
 	 */
-	render?: ComponentType< { item: Item } >;
+	render?: ComponentType< DataViewRenderFieldProps< Item > >;
 
 	/**
 	 * Callback used to render an edit control for the field.
@@ -159,7 +159,7 @@ export type NormalizedField< Item > = Field< Item > & {
 	label: string;
 	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
-	render: ComponentType< { item: Item } >;
+	render: ComponentType< DataViewRenderFieldProps< Item > >;
 	Edit: ComponentType< DataFormControlProps< Item > >;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
 	isValid: ( item: Item, context?: ValidationContext ) => boolean;
@@ -181,6 +181,10 @@ export type DataFormControlProps< Item > = {
 	hideLabelFromVision?: boolean;
 };
 
+export type DataViewRenderFieldProps< Item > = {
+	item: Item;
+};
+
 /**
  * The filters applied to the dataset.
  */