DataViews: Implement isItemClickable and onClickItem props

packages/dataviews/README.md

@@ -377,6 +377,15 @@ The `defaultLayouts` property should be an object that includes properties named
 
 #### `selection`: `string[]`
 
+Callback that signals the user selected one of more items, and takes them as parameter.
+
+### `isItemClickable`: `function`
+
+A function that determines if a media field or a primary field are clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked.
+
+### `onClickItem`: `function`
+
+A callback function that is triggered when a user clicks on a media field or primary field. This function is currently implemented only in the `grid` and `list` views.
 The list of selected items' ids.
 
 If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component.

packages/dataviews/src/components/dataviews-context/index.ts

@@ -26,6 +26,8 @@ type DataViewsContextType< Item > = {
 	openedFilter: string | null;
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 	getItemId: ( item: Item ) => string;
+	onClickItem: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
 	density: number;
 };
 
@@ -43,6 +45,8 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	setOpenedFilter: () => {},
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
+	onClickItem: () => {},
+	isItemClickable: () => false,
 	density: 0,
 } );
 

packages/dataviews/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 }
 		/>

packages/dataviews/src/components/dataviews/index.tsx

@@ -44,6 +44,8 @@ type DataViewsProps< Item > = {
 	defaultLayouts: SupportedLayouts;
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable?: ( item: Item ) => boolean;
 	header?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
@@ -65,6 +67,8 @@ export default function DataViews< Item >( {
 	defaultLayouts,
 	selection: selectionProperty,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	header,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
@@ -110,6 +114,8 @@ export default function DataViews< Item >( {
 				openedFilter,
 				setOpenedFilter,
 				getItemId,
+				isItemClickable: isItemClickable ?? ( () => false ),
+				onClickItem: onClickItem ?? ( () => {} ),
 				density,
 			} }
 		>

packages/dataviews/src/components/dataviews/style.scss

@@ -19,7 +19,7 @@
 	position: sticky;
 	left: 0;
 	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
+	@include reduce-motion( "transition" );
 }
 
 .dataviews-view-list__primary-field,
@@ -62,6 +62,13 @@
 	}
 }
 
+.dataviews-view-list__primary-field--clickable,
+.dataviews-view-grid__primary-field--clickable,
+.dataviews-view-grid__media--clickable,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable {
+	cursor: pointer;
+}
+
 .dataviews-no-results,
 .dataviews-loading {
 	padding: 0 $grid-unit-60;
@@ -70,7 +77,7 @@
 	align-items: center;
 	justify-content: center;
 	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
+	@include reduce-motion( "transition" );
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
@@ -86,4 +93,3 @@
 		padding-right: $grid-unit-30;
 	}
 }
-

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

@@ -29,6 +29,8 @@ 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 +43,8 @@ interface GridItemProps< Item > {
 function GridItem< Item >( {
 	selection,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	getItemId,
 	item,
 	actions,
@@ -59,6 +63,7 @@ function GridItem< Item >( {
 	const renderedPrimaryField = primaryField?.render ? (
 		<primaryField.render item={ item } />
 	) : null;
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -81,7 +86,27 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div className="dataviews-view-grid__media">
+			<div
+				className={ clsx( 'dataviews-view-grid__media', {
+					'dataviews-view-grid__media--clickable':
+						isItemClickable( item ),
+				} ) }
+				tabIndex={ isItemClickable( item ) ? 0 : undefined }
+				role="button"
+				onClick={ () => {
+					if ( isItemClickable( item ) ) {
+						onClickItem( item );
+					}
+				} }
+				onKeyDown={ ( event ) => {
+					if (
+						( event.key === 'Enter' || event.key === '' ) &&
+						isItemClickable( item )
+					) {
+						onClickItem( item );
+					}
+				} }
+			>
 				{ renderedMediaField }
 			</div>
 			<SingleSelectionCheckbox
@@ -96,8 +121,33 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<HStack className="dataviews-view-grid__primary-field">
-					{ renderedPrimaryField }
+				<HStack>
+					<div
+						className={ clsx(
+							'dataviews-view-grid__primary-field',
+							{
+								'dataviews-view-grid__primary-field--clickable':
+									isItemClickable( item ),
+							}
+						) }
+						tabIndex={ isItemClickable( item ) ? 0 : undefined }
+						role="button"
+						onClick={ () => {
+							if ( isItemClickable( item ) ) {
+								onClickItem( item );
+							}
+						} }
+						onKeyDown={ ( event ) => {
+							if (
+								( event.key === 'Enter' || event.key === '' ) &&
+								isItemClickable( item )
+							) {
+								onClickItem( item );
+							}
+						} }
+					>
+						{ renderedPrimaryField }
+					</div>
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
@@ -170,6 +220,8 @@ export default function ViewGrid< Item >( {
 	getItemId,
 	isLoading,
 	onChangeSelection,
+	onClickItem,
+	isItemClickable,
 	selection,
 	view,
 	density,
@@ -223,6 +275,8 @@ export default function ViewGrid< Item >( {
 								key={ getItemId( item ) }
 								selection={ selection }
 								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }

packages/dataviews/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;

packages/dataviews/src/dataviews-layouts/table/index.tsx

@@ -40,6 +40,8 @@ interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
 	field: NormalizedField< Item >;
 	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 interface TableColumnCombinedProps< Item > {
@@ -48,6 +50,8 @@ interface TableColumnCombinedProps< Item > {
 	field: CombinedField;
 	item: Item;
 	view: ViewTableType;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 interface TableColumnProps< Item > {
@@ -56,6 +60,8 @@ interface TableColumnProps< Item > {
 	item: Item;
 	column: string;
 	view: ViewTableType;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 interface TableRowProps< Item > {
@@ -69,6 +75,8 @@ interface TableRowProps< Item > {
 	selection: string[];
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem: ( item: Item ) => void;
 }
 
 function TableColumn< Item >( {
@@ -102,15 +110,40 @@ function TableColumnField< Item >( {
 	primaryField,
 	item,
 	field,
+	isItemClickable,
+	onClickItem,
 }: TableColumnFieldProps< Item > ) {
+	const isPrimaryField = primaryField?.id === field.id;
+	const isItemClickableField = isItemClickable( item ) && isPrimaryField;
 	return (
 		<div
 			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
-				'dataviews-view-table__primary-field':
-					primaryField?.id === field.id,
+				'dataviews-view-table__primary-field': isPrimaryField,
 			} ) }
 		>
-			<field.render { ...{ item } } />
+			<div
+				className={ clsx( 'dataviews-view-table__cell-content', {
+					'dataviews-view-table__cell-content--clickable':
+						isItemClickableField,
+				} ) }
+				tabIndex={ isItemClickableField ? 0 : undefined }
+				role="button"
+				onClick={ () => {
+					if ( isItemClickableField ) {
+						onClickItem( item );
+					}
+				} }
+				onKeyDown={ ( event ) => {
+					if (
+						( event.key === 'Enter' || event.key === '' ) &&
+						isItemClickableField
+					) {
+						onClickItem( item );
+					}
+				} }
+			>
+				<field.render { ...{ item } } />
+			</div>
 		</div>
 	);
 }
@@ -139,6 +172,8 @@ function TableRow< Item >( {
 	primaryField,
 	selection,
 	getItemId,
+	isItemClickable,
+	onClickItem,
 	onChangeSelection,
 }: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
@@ -214,6 +249,8 @@ function TableRow< Item >( {
 					<td key={ column } style={ { width, maxWidth, minWidth } }>
 						<TableColumn
 							primaryField={ primaryField }
+							isItemClickable={ isItemClickable }
+							onClickItem={ onClickItem }
 							fields={ fields }
 							item={ item }
 							column={ column }
@@ -252,6 +289,8 @@ function ViewTable< Item >( {
 	onChangeSelection,
 	selection,
 	setOpenedFilter,
+	onClickItem,
+	isItemClickable,
 	view,
 }: ViewTableProps< Item > ) {
 	const headerMenuRefs = useRef<
@@ -392,6 +431,8 @@ function ViewTable< Item >( {
 								selection={ selection }
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
 							/>
 						) ) }
 				</tbody>

packages/dataviews/src/types.ts

@@ -498,6 +498,8 @@ export interface ViewBaseProps< Item > {
 	onChangeSelection: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
+	onClickItem: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
 	view: View;
 	density: number;
 }