@wordpress/dataviews 4.6.0 → 4.8.0

package/src/components/dataviews-filters/index.tsx

@@ -10,13 +10,13 @@ import {
 } from '@wordpress/element';
 import { __experimentalHStack as HStack, Button } from '@wordpress/components';
 import { funnel } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FilterSummary from './filter-summary';
-import { default as AddFilter, AddFilterDropdownMenu } from './add-filter';
+import { default as AddFilter, AddFilterMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
 import { sanitizeOperators } from '../../utils';
@@ -100,7 +100,7 @@ export function FilterVisibilityToggle( {
 	}
 	if ( ! hasVisibleFilters ) {
 		return (
-			<AddFilterDropdownMenu
+			<AddFilterMenu
 				filters={ filters }
 				view={ view }
 				onChangeView={ onChangeViewWithFilterVisibility }
@@ -124,7 +124,7 @@ export function FilterVisibilityToggle( {
 				className="dataviews-filters__visibility-toggle"
 				size="compact"
 				icon={ funnel }
-				label={ __( 'Toggle filter display' ) }
+				label={ _x( 'Filter', 'verb' ) }
 				onClick={ () => {
 					if ( ! isShowingFilter ) {
 						setOpenedFilter( null );

package/src/components/dataviews-item-actions/index.tsx

@@ -23,7 +23,7 @@ import { useRegistry } from '@wordpress/data';
 import { unlock } from '../../lock-unlock';
 import type { Action, ActionModal as ActionModalType } from '../../types';
 
-const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
+const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
 export interface ActionTriggerProps< Item > {
 	action: Action< Item >;
@@ -43,7 +43,7 @@ interface ActionWithModalProps< Item > extends ActionModalProps< Item > {
 	isBusy?: boolean;
 }
 
-interface ActionsDropdownMenuGroupProps< Item > {
+interface ActionsMenuGroupProps< Item > {
 	actions: Action< Item >[];
 	item: Item;
 }
@@ -77,7 +77,7 @@ function ButtonTrigger< Item >( {
 	);
 }
 
-function DropdownMenuItemTrigger< Item >( {
+function MenuItemTrigger< Item >( {
 	action,
 	onClick,
 	items,
@@ -85,12 +85,12 @@ function DropdownMenuItemTrigger< Item >( {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuV2.Item
+		<Menu.Item
 			onClick={ onClick }
 			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
-			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
-		</DropdownMenuV2.Item>
+			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+		</Menu.Item>
 	);
 }
 
@@ -146,13 +146,13 @@ export function ActionWithModal< Item >( {
 	);
 }
 
-export function ActionsDropdownMenuGroup< Item >( {
+export function ActionsMenuGroup< Item >( {
 	actions,
 	item,
-}: ActionsDropdownMenuGroupProps< Item > ) {
+}: ActionsMenuGroupProps< Item > ) {
 	const registry = useRegistry();
 	return (
-		<DropdownMenuV2.Group>
+		<Menu.Group>
 			{ actions.map( ( action ) => {
 				if ( 'RenderModal' in action ) {
 					return (
@@ -160,12 +160,12 @@ export function ActionsDropdownMenuGroup< Item >( {
 							key={ action.id }
 							action={ action }
 							items={ [ item ] }
-							ActionTrigger={ DropdownMenuItemTrigger }
+							ActionTrigger={ MenuItemTrigger }
 						/>
 					);
 				}
 				return (
-					<DropdownMenuItemTrigger
+					<MenuItemTrigger
 						key={ action.id }
 						action={ action }
 						onClick={ () => {
@@ -175,7 +175,7 @@ export function ActionsDropdownMenuGroup< Item >( {
 					/>
 				);
 			} ) }
-		</DropdownMenuV2.Group>
+		</Menu.Group>
 	);
 }
 
@@ -245,7 +245,7 @@ function CompactItemActions< Item >( {
 	actions,
 }: CompactItemActionsProps< Item > ) {
 	return (
-		<DropdownMenuV2
+		<Menu
 			trigger={
 				<Button
 					size="compact"
@@ -258,7 +258,7 @@ function CompactItemActions< Item >( {
 			}
 			placement="bottom-end"
 		>
-			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
-		</DropdownMenuV2>
+			<ActionsMenuGroup actions={ actions } item={ item } />
+		</Menu>
 	);
 }

package/src/components/dataviews-layout/index.tsx

@@ -28,6 +28,8 @@ export default function DataViewsLayout() {
 		onChangeSelection,
 		setOpenedFilter,
 		density,
+		onClickItem,
+		isItemClickable,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -44,6 +46,8 @@ export default function DataViewsLayout() {
 			onChangeSelection={ onChangeSelection }
 			selection={ selection }
 			setOpenedFilter={ setOpenedFilter }
+			onClickItem={ onClickItem }
+			isItemClickable={ isItemClickable }
 			view={ view }
 			density={ density }
 		/>

package/src/components/dataviews-selection-checkbox/index.tsx

@@ -33,8 +33,9 @@ export default function DataViewsSelectionCheckbox< Item >( {
 	if ( primaryField?.getValue && item ) {
 		// eslint-disable-next-line @wordpress/valid-sprintf
 		selectionLabel = sprintf(
-			/* translators: %s: item title. */
-			checked ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			checked
+				? /* translators: %s: item title. */ __( 'Deselect item: %s' )
+				: /* translators: %s: item title. */ __( 'Select item: %s' ),
 			primaryField.getValue( { item } )
 		);
 	} else {

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/components/form-field-visibility/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type FormFieldVisibilityProps< Item > = React.PropsWithChildren< {
+	field: NormalizedField< Item >;
+	data: Item;
+} >;
+
+export default function FormFieldVisibility< Item >( {
+	data,
+	field,
+	children,
+}: FormFieldVisibilityProps< Item > ) {
+	const isVisible = useMemo( () => {
+		if ( field.isVisible ) {
+			return field.isVisible( data );
+		}
+		return true;
+	}, [ field.isVisible, data ] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+	return children;
+}

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';
 
 /**
@@ -19,6 +19,7 @@ import { closeSmall } from '@wordpress/icons';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps, NormalizedField } from '../../types';
+import FormFieldVisibility from '../../components/form-field-visibility';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -105,7 +106,7 @@ function FormField< Item >( {
 							aria-expanded={ isOpen }
 							aria-label={ sprintf(
 								// translators: %s: Field name.
-								__( 'Edit %s' ),
+								_x( 'Edit %s', 'field' ),
 								field.label
 							) }
 							onClick={ onToggle }
@@ -156,12 +157,17 @@ export default function FormPanel< Item >( {
 		<VStack spacing={ 2 }>
 			{ visibleFields.map( ( field ) => {
 				return (
-					<FormField
+					<FormFieldVisibility
 						key={ field.id }
 						data={ data }
 						field={ field }
-						onChange={ onChange }
-					/>
+					>
+						<FormField
+							data={ data }
+							field={ field }
+							onChange={ onChange }
+						/>
+					</FormFieldVisibility>
 				);
 			} ) }
 		</VStack>

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

@@ -10,6 +10,7 @@ import { useMemo } from '@wordpress/element';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps } from '../../types';
+import FormFieldVisibility from '../../components/form-field-visibility';
 
 export default function FormRegular< Item >( {
 	data,
@@ -33,12 +34,17 @@ export default function FormRegular< Item >( {
 		<VStack spacing={ 4 }>
 			{ visibleFields.map( ( field ) => {
 				return (
-					<field.Edit
+					<FormFieldVisibility
 						key={ field.id }
 						data={ data }
 						field={ field }
-						onChange={ onChange }
-					/>
+					>
+						<field.Edit
+							data={ data }
+							field={ field }
+							onChange={ onChange }
+						/>
+					</FormFieldVisibility>
 				);
 			} ) }
 		</VStack>

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

@@ -24,11 +24,14 @@ import SingleSelectionCheckbox from '../../components/dataviews-selection-checkb
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
 
 interface GridItemProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
+	onClickItem: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
 	mediaField?: NormalizedField< Item >;
@@ -41,6 +44,8 @@ interface GridItemProps< Item > {
 function GridItem< Item >( {
 	selection,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	getItemId,
 	item,
 	actions,
@@ -59,6 +64,21 @@ function GridItem< Item >( {
 	const renderedPrimaryField = primaryField?.render ? (
 		<primaryField.render item={ item } />
 	) : null;
+
+	const clickableMediaItemProps = getClickableItemProps(
+		item,
+		isItemClickable,
+		onClickItem,
+		'dataviews-view-grid__media'
+	);
+
+	const clickablePrimaryItemProps = getClickableItemProps(
+		item,
+		isItemClickable,
+		onClickItem,
+		'dataviews-view-grid__primary-field'
+	);
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -81,9 +101,7 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div className="dataviews-view-grid__media">
-				{ renderedMediaField }
-			</div>
+			<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
 			<SingleSelectionCheckbox
 				item={ item }
 				selection={ selection }
@@ -96,8 +114,10 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<HStack className="dataviews-view-grid__primary-field">
-					{ renderedPrimaryField }
+				<HStack>
+					<div { ...clickablePrimaryItemProps }>
+						{ renderedPrimaryField }
+					</div>
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
@@ -170,6 +190,8 @@ export default function ViewGrid< Item >( {
 	getItemId,
 	isLoading,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	selection,
 	view,
 	density,
@@ -223,6 +245,8 @@ export default function ViewGrid< Item >( {
 								key={ getItemId( item ) }
 								selection={ selection }
 								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }

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

@@ -17,8 +17,13 @@
 
 		.dataviews-view-grid__primary-field {
 			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+
+			&--clickable {
+				width: fit-content;
+			}
 		}
 
+
 		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;

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>
 	);
 } );