Data views: Add click-to-select behavior on table rows (WordPress#59803)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: andrewhayward <andrewhayward@git.wordpress.org>

packages/dataviews/src/style.scss

@@ -190,6 +190,12 @@
 			> * {
 				flex-grow: 1;
 			}
+
+			&.dataviews-view-table__primary-field {
+				a {
+					flex-grow: 0;
+				}
+			}
 		}
 	}
 	.dataviews-view-table-header-button {
@@ -236,6 +242,7 @@
 	white-space: nowrap;
 	display: block;
 	width: 100%;
+	overflow: hidden;
 
 	a {
 		text-decoration: none;
@@ -244,10 +251,10 @@
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
-		width: 100%;
+		flex-grow: 0;
 
 		&:hover {
-			color: $gray-900;
+			color: var(--wp-admin-theme-color);
 		}
 		@include link-reset();
 	}

packages/dataviews/src/view-table.js

@@ -237,7 +237,6 @@ function TableRow( {
 	data,
 } ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
-
 	const isSelected = selection.includes( id );
 
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -250,22 +249,28 @@ function TableRow( {
 		setIsHovered( false );
 	};
 
+	// Will be set to true if `onTouchStart` fires. This happens before
+	// `onClick` and can be used to exclude touchscreen devices from certain
+	// behaviours.
+	const isTouchDevice = useRef( false );
+
 	return (
 		<tr
 			className={ classnames( 'dataviews-view-table__row', {
-				'is-selected':
-					hasPossibleBulkAction && selection.includes( id ),
+				'is-selected': hasPossibleBulkAction && isSelected,
 				'is-hovered': isHovered,
+				'has-bulk-actions': hasPossibleBulkAction,
 			} ) }
 			onMouseEnter={ handleMouseEnter }
 			onMouseLeave={ handleMouseLeave }
-			onClickCapture={ ( event ) => {
-				if ( event.ctrlKey || event.metaKey ) {
-					event.stopPropagation();
-					event.preventDefault();
-					if ( ! hasPossibleBulkAction ) {
-						return;
-					}
+			onTouchStart={ () => {
+				isTouchDevice.current = true;
+			} }
+			onClick={ () => {
+				if (
+					! isTouchDevice.current &&
+					document.getSelection().type !== 'Range'
+				) {
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {
@@ -337,9 +342,20 @@ function TableRow( {
 				</td>
 			) ) }
 			{ !! actions?.length && (
-				<td className="dataviews-view-table__actions-column">
+				// Disable reason: we are not making the element interactive,
+				// but preventing any click events from bubbling up to the
+				// table row. This allows us to add a click handler to the row
+				// itself (to toggle row selection) without erroneously
+				// intercepting click events from ItemActions.
+
+				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+				<td
+					className="dataviews-view-table__actions-column"
+					onClick={ ( e ) => e.stopPropagation() }
+				>
 					<ItemActions item={ item } actions={ actions } />
 				</td>
+				/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			) }
 		</tr>
 	);