From 3a51f1a471fb3cd810df9eb5607f024e4bfd1b4a Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 24 Nov 2023 13:27:09 +0200
Subject: [PATCH 1/4] Dataviews: Update item actions in grid view

---
 .../src/components/dataviews/item-actions.js  | 159 +++++++++++++-----
 .../src/components/dataviews/view-grid.js     |   1 +
 .../src/components/dataviews/view-list.js     |   1 +
 3 files changed, 121 insertions(+), 40 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index 2c3373c14bfdf6..fbb33478f5acdf 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -2,18 +2,28 @@
  * WordPress dependencies
  */
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 	Button,
 	Modal,
 	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo, useState } from '@wordpress/element';
-import { moreVertical } from '@wordpress/icons';
+import { useMemo, useState, Fragment, Children } from '@wordpress/element';
+import { moreVertical, Icon } from '@wordpress/icons';
 
-function PrimaryActionTrigger( { action, onClick } ) {
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+} = unlock( componentsPrivateApis );
+
+function ButtonTrigger( { action, onClick } ) {
 	return (
 		<Button
 			label={ action.label }
@@ -25,11 +35,16 @@ function PrimaryActionTrigger( { action, onClick } ) {
 	);
 }
 
-function SecondaryActionTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger( { action, onClick } ) {
 	return (
-		<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>
+		<DropdownMenuItem
+			onClick={ onClick }
+			prefix={
+				action.isPrimary && action.icon && <Icon icon={ action.icon } />
+			}
+		>
 			{ action.label }
-		</MenuItem>
+		</DropdownMenuItem>
 	);
 }
 
@@ -62,7 +77,33 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 	);
 }
 
-export default function ItemActions( { item, actions } ) {
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( !! action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( item ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}
+
+export default function ItemActions( { item, actions, viewType } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
 			( accumulator, action ) => {
@@ -84,6 +125,15 @@ export default function ItemActions( { item, actions } ) {
 	if ( ! primaryActions.length && ! secondaryActions.length ) {
 		return null;
 	}
+	if ( viewType === 'grid' ) {
+		return (
+			<GridItemActions
+				item={ item }
+				primaryActions={ primaryActions }
+				secondaryActions={ secondaryActions }
+			/>
+		);
+	}
 	return (
 		<HStack justify="flex-end">
 			{ !! primaryActions.length &&
@@ -94,12 +144,12 @@ export default function ItemActions( { item, actions } ) {
 								key={ action.id }
 								action={ action }
 								item={ item }
-								ActionTrigger={ PrimaryActionTrigger }
+								ActionTrigger={ ButtonTrigger }
 							/>
 						);
 					}
 					return (
-						<PrimaryActionTrigger
+						<ButtonTrigger
 							key={ action.id }
 							action={ action }
 							onClick={ () => action.callback( item ) }
@@ -107,36 +157,65 @@ export default function ItemActions( { item, actions } ) {
 					);
 				} ) }
 			{ !! secondaryActions.length && (
-				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
-					{ () => (
-						<MenuGroup>
-							{ secondaryActions.map( ( action ) => {
-								if ( !! action.RenderModal ) {
-									return (
-										<ActionWithModal
-											key={ action.id }
-											action={ action }
-											item={ item }
-											ActionTrigger={
-												SecondaryActionTrigger
-											}
-										/>
-									);
-								}
-								return (
-									<SecondaryActionTrigger
-										key={ action.id }
-										action={ action }
-										onClick={ () =>
-											action.callback( item )
-										}
-									/>
-								);
-							} ) }
-						</MenuGroup>
-					) }
+				<DropdownMenu
+					trigger={
+						<Button
+							variant="tertiary"
+							size="compact"
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+						/>
+					}
+					align="start"
+				>
+					<ActionsDropdownMenuGroup
+						actions={ secondaryActions }
+						item={ item }
+					/>
 				</DropdownMenu>
 			) }
 		</HStack>
 	);
 }
+
+function WithSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparator /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
+function GridItemActions( { item, primaryActions, secondaryActions } ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					variant="tertiary"
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+				/>
+			}
+			align="start"
+		>
+			<WithSeparators>
+				{ !! primaryActions.length && (
+					<ActionsDropdownMenuGroup
+						actions={ primaryActions }
+						item={ item }
+					/>
+				) }
+				{ !! secondaryActions.length && (
+					<ActionsDropdownMenuGroup
+						actions={ secondaryActions }
+						item={ item }
+					/>
+				) }
+			</WithSeparators>
+		</DropdownMenu>
+	);
+}
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index d97a9db04200dd..dd555c91253ba5 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -61,6 +61,7 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 								<ItemActions
 									item={ item }
 									actions={ actions }
+									viewType={ view.type }
 								/>
 							</FlexBlock>
 						</HStack>
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index c5d0bd0d340fea..05f73a3d3bbd08 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -258,6 +258,7 @@ function ViewList( {
 						<ItemActions
 							item={ props.row.original }
 							actions={ actions }
+							viewType={ view.type }
 						/>
 					);
 				},

From dd53b6d86c5b74e54b55355f655dd12139cdf7f3 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 24 Nov 2023 15:46:05 +0200
Subject: [PATCH 2/4] Use new dropdown

---
 .../src/components/dataviews/item-actions.js      | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index fbb33478f5acdf..5c29c37b438d42 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -17,10 +17,11 @@ import { moreVertical, Icon } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 
 const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+	DropdownMenuV2Ariakit: DropdownMenu,
+	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
+	DropdownMenuItemV2Ariakit: DropdownMenuItem,
+	DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator,
+	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
 function ButtonTrigger( { action, onClick } ) {
@@ -43,7 +44,7 @@ function DropdownMenuItemTrigger( { action, onClick } ) {
 				action.isPrimary && action.icon && <Icon icon={ action.icon } />
 			}
 		>
-			{ action.label }
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
 }
@@ -166,7 +167,7 @@ export default function ItemActions( { item, actions, viewType } ) {
 							label={ __( 'Actions' ) }
 						/>
 					}
-					align="start"
+					placement="bottom-end"
 				>
 					<ActionsDropdownMenuGroup
 						actions={ secondaryActions }
@@ -200,7 +201,7 @@ function GridItemActions( { item, primaryActions, secondaryActions } ) {
 					label={ __( 'Actions' ) }
 				/>
 			}
-			align="start"
+			placement="bottom-end"
 		>
 			<WithSeparators>
 				{ !! primaryActions.length && (

From 9e2752d5b77ec0a3f6202045f4cef6c62a664865 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 27 Nov 2023 10:31:37 +0200
Subject: [PATCH 3/4] remove separators and icons

---
 .../src/components/dataviews/item-actions.js  | 51 ++++++-------------
 1 file changed, 15 insertions(+), 36 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index 5c29c37b438d42..92ba363cbeef67 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -8,8 +8,8 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo, useState, Fragment, Children } from '@wordpress/element';
-import { moreVertical, Icon } from '@wordpress/icons';
+import { useMemo, useState } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +20,6 @@ const {
 	DropdownMenuV2Ariakit: DropdownMenu,
 	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
 	DropdownMenuItemV2Ariakit: DropdownMenuItem,
-	DropdownMenuSeparatorV2Ariakit: DropdownMenuSeparator,
 	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
@@ -38,12 +37,7 @@ function ButtonTrigger( { action, onClick } ) {
 
 function DropdownMenuItemTrigger( { action, onClick } ) {
 	return (
-		<DropdownMenuItem
-			onClick={ onClick }
-			prefix={
-				action.isPrimary && action.icon && <Icon icon={ action.icon } />
-			}
-		>
+		<DropdownMenuItem onClick={ onClick }>
 			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
@@ -161,7 +155,6 @@ export default function ItemActions( { item, actions, viewType } ) {
 				<DropdownMenu
 					trigger={
 						<Button
-							variant="tertiary"
 							size="compact"
 							icon={ moreVertical }
 							label={ __( 'Actions' ) }
@@ -179,23 +172,11 @@ export default function ItemActions( { item, actions, viewType } ) {
 	);
 }
 
-function WithSeparators( { children } ) {
-	return Children.toArray( children )
-		.filter( Boolean )
-		.map( ( child, i ) => (
-			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparator /> }
-				{ child }
-			</Fragment>
-		) );
-}
-
 function GridItemActions( { item, primaryActions, secondaryActions } ) {
 	return (
 		<DropdownMenu
 			trigger={
 				<Button
-					variant="tertiary"
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
@@ -203,20 +184,18 @@ function GridItemActions( { item, primaryActions, secondaryActions } ) {
 			}
 			placement="bottom-end"
 		>
-			<WithSeparators>
-				{ !! primaryActions.length && (
-					<ActionsDropdownMenuGroup
-						actions={ primaryActions }
-						item={ item }
-					/>
-				) }
-				{ !! secondaryActions.length && (
-					<ActionsDropdownMenuGroup
-						actions={ secondaryActions }
-						item={ item }
-					/>
-				) }
-			</WithSeparators>
+			{ !! primaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ primaryActions }
+					item={ item }
+				/>
+			) }
+			{ !! secondaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ secondaryActions }
+					item={ item }
+				/>
+			) }
 		</DropdownMenu>
 	);
 }

From becb8b3953f042ec9c10be56c3b9f13286bdd6f2 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 27 Nov 2023 10:55:39 +0200
Subject: [PATCH 4/4] add `isCompact` prop instead of viewType

---
 .../edit-site/src/components/dataviews/item-actions.js    | 8 ++++----
 packages/edit-site/src/components/dataviews/view-grid.js  | 2 +-
 packages/edit-site/src/components/dataviews/view-list.js  | 1 -
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index 92ba363cbeef67..c35fe4f77e4dfd 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -98,7 +98,7 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 	);
 }
 
-export default function ItemActions( { item, actions, viewType } ) {
+export default function ItemActions( { item, actions, isCompact } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
 			( accumulator, action ) => {
@@ -120,9 +120,9 @@ export default function ItemActions( { item, actions, viewType } ) {
 	if ( ! primaryActions.length && ! secondaryActions.length ) {
 		return null;
 	}
-	if ( viewType === 'grid' ) {
+	if ( isCompact ) {
 		return (
-			<GridItemActions
+			<CompactItemActions
 				item={ item }
 				primaryActions={ primaryActions }
 				secondaryActions={ secondaryActions }
@@ -172,7 +172,7 @@ export default function ItemActions( { item, actions, viewType } ) {
 	);
 }
 
-function GridItemActions( { item, primaryActions, secondaryActions } ) {
+function CompactItemActions( { item, primaryActions, secondaryActions } ) {
 	return (
 		<DropdownMenu
 			trigger={
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index dd555c91253ba5..fd74d4f401a966 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -61,7 +61,7 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 								<ItemActions
 									item={ item }
 									actions={ actions }
-									viewType={ view.type }
+									isCompact
 								/>
 							</FlexBlock>
 						</HStack>
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index 05f73a3d3bbd08..c5d0bd0d340fea 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -258,7 +258,6 @@ function ViewList( {
 						<ItemActions
 							item={ props.row.original }
 							actions={ actions }
-							viewType={ view.type }
 						/>
 					);
 				},