@wordpress/dataviews 4.6.0 → 4.7.0

package/src/components/dataviews-view-config/index.tsx

@@ -51,7 +51,7 @@ import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
@@ -69,7 +69,7 @@ function ViewTypeMenu( {
 	}
 	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<DropdownMenuV2
+		<Menu
 			trigger={
 				<Button
 					size="compact"
@@ -84,7 +84,7 @@ function ViewTypeMenu( {
 					return null;
 				}
 				return (
-					<DropdownMenuV2.RadioItem
+					<Menu.RadioItem
 						key={ layout }
 						value={ layout }
 						name="view-actions-available-view"
@@ -104,13 +104,11 @@ function ViewTypeMenu( {
 							warning( 'Invalid dataview' );
 						} }
 					>
-						<DropdownMenuV2.ItemLabel>
-							{ config.label }
-						</DropdownMenuV2.ItemLabel>
-					</DropdownMenuV2.RadioItem>
+						<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>
+					</Menu.RadioItem>
 				);
 			} ) }
-		</DropdownMenuV2>
+		</Menu>
 	);
 }
 
@@ -363,12 +361,12 @@ function FieldItem( {
 							isVisible
 								? sprintf(
 										/* translators: %s: field label */
-										__( 'Hide %s' ),
+										_x( 'Hide %s', 'field' ),
 										label
 								  )
 								: sprintf(
 										/* translators: %s: field label */
-										__( 'Show %s' ),
+										_x( 'Show %s', 'field' ),
 										label
 								  )
 						}

package/src/dataforms-layouts/panel/index.tsx

@@ -10,7 +10,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, _x } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 
 /**
@@ -105,7 +105,7 @@ function FormField< Item >( {
 							aria-expanded={ isOpen }
 							aria-label={ sprintf(
 								// translators: %s: Field name.
-								__( 'Edit %s' ),
+								_x( 'Edit %s', 'field' ),
 								field.label
 							) }
 							onClick={ onToggle }

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`;
@@ -176,10 +176,10 @@ 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 } />
@@ -195,7 +195,7 @@ function ListItem< Item >( {
 				/>
 			) }
 			<div role="gridcell">
-				<DropdownMenu
+				<Menu
 					trigger={
 						<Composite.Item
 							id={ generateDropdownTriggerCompositeId(
@@ -215,11 +215,11 @@ function ListItem< Item >( {
 					}
 					placement="bottom-end"
 				>
-					<ActionsDropdownMenuGroup
+					<ActionsMenuGroup
 						actions={ eligibleActions }
 						item={ item }
 					/>
-				</DropdownMenu>
+				</Menu>
 			</div>
 		</HStack>
 	);
@@ -248,9 +248,7 @@ function ListItem< Item >( {
 					/>
 				</div>
 				<HStack spacing={ 3 } justify="start" alignment="flex-start">
-					<div className="dataviews-view-list__media-wrapper">
-						{ renderedMediaField }
-					</div>
+					{ renderedMediaField }
 					<VStack
 						spacing={ 1 }
 						className="dataviews-view-list__field-wrapper"

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

@@ -33,7 +33,7 @@ ul.dataviews-view-list {
 			.dataviews-view-list__item-actions {
 				flex-basis: min-content;
 				overflow: unset;
-				margin-inline: $grid-unit-10 0;
+				padding-inline-end: $grid-unit-05;
 
 				.components-button {
 					opacity: 1;
@@ -144,12 +144,6 @@ 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;

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.
  */