in progress

WordPress · Mar 12, 2024 · c85a8b8 · c85a8b8
1 parent ddffca9
commit c85a8b8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 40 deletions.
diff --git a/packages/dataviews/src/bulk-actions-popover.js b/packages/dataviews/src/bulk-actions-popover.js
@@ -40,6 +40,7 @@ export default function BulkActionsPopover( {
 	actions = EMPTY_ARRAY,
 	setSelection,
 	getItemId,
+	anchor,
 } ) {
 	const selectedItems = useMemo( () => {
 		return data.filter( ( item ) =>
@@ -70,6 +71,7 @@ export default function BulkActionsPopover( {
 		<Popover
 			placement="bottom-middle"
 			className="dataviews-bulk-actions-popover"
+			anchor={ anchor }
 		>
 			<Toolbar label="Bulk actions">
 				<div className="dataviews-bulk-actions-toolbar-wrapper">

diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -46,6 +46,7 @@ export default function DataViews( {
 } ) {
 	const [ selection, setSelection ] = useState( [] );
 	const [ openedFilter, setOpenedFilter ] = useState( null );
+	const [ viewComponentAnchor, setViewComponentAnchor ] = useState();
 
 	useEffect( () => {
 		if (
@@ -133,6 +134,7 @@ export default function DataViews( {
 				/>
 			</HStack>
 			<ViewComponent
+				ref={ setViewComponentAnchor }
 				fields={ _fields }
 				view={ view }
 				onChangeView={ onChangeView }
@@ -146,20 +148,22 @@ export default function DataViews( {
 				deferredRendering={ deferredRendering }
 				setOpenedFilter={ setOpenedFilter }
 			/>
-			<div>
-				<Pagination
-					view={ view }
-					onChangeView={ onChangeView }
-					paginationInfo={ paginationInfo }
-				/>
-				<BulkActionsPopover
-					data={ data }
-					actions={ actions }
-					selection={ selection }
-					setSelection={ setSelection }
-					getItemId={ getItemId }
-				/>
-			</div>
+			<Pagination
+				view={ view }
+				onChangeView={ onChangeView }
+				paginationInfo={ paginationInfo }
+			/>
+			{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+				hasPossibleBulkAction && (
+					<BulkActionsPopover
+						anchor={ viewComponentAnchor }
+						data={ data }
+						actions={ actions }
+						selection={ selection }
+						setSelection={ setSelection }
+						getItemId={ getItemId }
+					/>
+				) }
 		</div>
 	);
 }
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -15,6 +15,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -125,17 +126,18 @@ function GridItem( {
 	);
 }
 
-export default function ViewGrid( {
-	data,
-	fields,
-	view,
-	actions,
-	isLoading,
-	getItemId,
-	deferredRendering,
-	selection,
-	onSelectionChange,
-} ) {
+const ViewGrid = forwardRef( ( props, ref ) => {
+	const {
+		data,
+		fields,
+		view,
+		actions,
+		isLoading,
+		getItemId,
+		deferredRendering,
+		selection,
+		onSelectionChange,
+	} = props;
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -161,6 +163,7 @@ export default function ViewGrid( {
 					alignment="top"
 					className="dataviews-view-grid"
 					aria-busy={ isLoading }
+					ref={ ref }
 				>
 					{ usedData.map( ( item ) => {
 						return (
@@ -192,4 +195,5 @@ export default function ViewGrid( {
 			) }
 		</>
 	);
-}
+} );
+export default ViewGrid;
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -331,19 +331,20 @@ function TableRow( {
 	);
 }
 
-function ViewTable( {
-	view,
-	onChangeView,
-	fields,
-	actions,
-	data,
-	getItemId,
-	isLoading = false,
-	deferredRendering,
-	selection,
-	onSelectionChange,
-	setOpenedFilter,
-} ) {
+const ViewTable = forwardRef( ( pros, ref ) => {
+	const {
+		view,
+		onChangeView,
+		fields,
+		actions,
+		data,
+		getItemId,
+		isLoading = false,
+		deferredRendering,
+		selection,
+		onSelectionChange,
+		setOpenedFilter,
+	} = pros;
 	const headerMenuRefs = useRef( new Map() );
 	const headerMenuToFocusRef = useRef();
 	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState();
@@ -393,6 +394,7 @@ function ViewTable( {
 				className="dataviews-view-table"
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
+				ref={ ref }
 			>
 				<thead>
 					<tr className="dataviews-view-table__row">
@@ -502,6 +504,6 @@ function ViewTable( {
 			</div>
 		</>
 	);
-}
+} );
 
 export default ViewTable;