From cf4dca0f42dfae5cdfb42ba78ce333bee402e81c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 11:43:41 +0100
Subject: [PATCH 1/3] Use onChange instead of onClick when possible

---
 packages/dataviews/src/add-filter.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js
index 2f001050cc1e51..0ebaa373c3ef9c 100644
--- a/packages/dataviews/src/add-filter.js
+++ b/packages/dataviews/src/add-filter.js
@@ -120,7 +120,7 @@ export default function AddFilter( { filters, view, onChangeView } ) {
 													name={ `add-filter-${ filter.field }` }
 													value={ element.value }
 													checked={ isActive }
-													onClick={ () => {
+													onChange={ ( e ) => {
 														onChangeView( {
 															...view,
 															page: 1,
@@ -132,7 +132,9 @@ export default function AddFilter( { filters, view, onChangeView } ) {
 																		activeOperator,
 																	value: isActive
 																		? undefined
-																		: element.value,
+																		: e
+																				.target
+																				.value,
 																},
 															],
 														} );

From 34884fddd108ea7d7c0e2353660dcd679d81362a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 11:44:31 +0100
Subject: [PATCH 2/3] Use actual radio item component for field operators,
 layout type, and page size radios

---
 packages/dataviews/src/view-actions.js | 15 +++++++++------
 packages/dataviews/src/view-table.js   |  5 +++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js
index 0e1aeab6d70520..ece589edf94c10 100644
--- a/packages/dataviews/src/view-actions.js
+++ b/packages/dataviews/src/view-actions.js
@@ -19,6 +19,7 @@ const {
 	DropdownMenuV2: DropdownMenu,
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
 	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
@@ -50,7 +51,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 		>
 			{ _availableViews.map( ( availableView ) => {
 				return (
-					<DropdownMenuRadioItemCustom
+					<DropdownMenuRadioItem
 						key={ availableView.type }
 						value={ availableView.type }
 						name="view-actions-available-view"
@@ -66,7 +67,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						<DropdownMenuItemLabel>
 							{ availableView.label }
 						</DropdownMenuItemLabel>
-					</DropdownMenuRadioItemCustom>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
 		</DropdownMenu>
@@ -90,21 +91,23 @@ function PageSizeMenu( { view, onChangeView } ) {
 		>
 			{ PAGE_SIZE_VALUES.map( ( size ) => {
 				return (
-					<DropdownMenuRadioItemCustom
+					<DropdownMenuRadioItem
 						key={ size }
 						value={ size }
 						name="view-actions-page-size"
 						checked={ view.perPage === size }
-						onChange={ ( e ) => {
+						onChange={ () => {
 							onChangeView( {
 								...view,
-								perPage: e.target.value,
+								// `e.target.value` holds the same value as `size` but as a string,
+								// so we use `size` directly to avoid parsing to int.
+								perPage: size,
 								page: 1,
 							} );
 						} }
 					>
 						<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>
-					</DropdownMenuRadioItemCustom>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
 		</DropdownMenu>
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index 6ca851c5d5690d..e23a96d63ebf20 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -23,6 +23,7 @@ const {
 	DropdownMenuV2: DropdownMenu,
 	DropdownMenuGroupV2: DropdownMenuGroup,
 	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
@@ -220,7 +221,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
 												operator,
 												{ label, key },
 											] ) => (
-												<DropdownMenuRadioItemCustom
+												<DropdownMenuRadioItem
 													key={ key }
 													name={ `view-table-${ filter.field }-conditions` }
 													value={ operator }
@@ -248,7 +249,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
 													<DropdownMenuItemLabel>
 														{ label }
 													</DropdownMenuItemLabel>
-												</DropdownMenuRadioItemCustom>
+												</DropdownMenuRadioItem>
 											)
 										) }
 									</DropdownMenu>

From d84d2274c4e02feeabffd180df52cc5423b2d57e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 11:46:37 +0100
Subject: [PATCH 3/3] Use actual radio item component for sorting radios,
 tweaking radio names and values

---
 packages/dataviews/src/view-actions.js | 22 ++++++++++++++--------
 packages/dataviews/src/view-table.js   | 22 +++++++++++++++-------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js
index ece589edf94c10..65c4dff8c36f71 100644
--- a/packages/dataviews/src/view-actions.js
+++ b/packages/dataviews/src/view-actions.js
@@ -13,7 +13,6 @@ import { memo } from '@wordpress/element';
  */
 import { unlock } from './lock-unlock';
 import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants';
-import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -213,18 +212,25 @@ function SortMenu( { fields, view, onChangeView } ) {
 									sortedDirection === direction &&
 									field.id === currentSortedField.id;
 
+								const value = `${ field.id }-${ direction }`;
+
 								return (
-									<DropdownMenuRadioItemCustom
-										key={ direction }
-										value={ direction }
-										name={ `view-actions-sorting-${ field.id }` }
+									<DropdownMenuRadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-actions-sorting"
+										value={ value }
 										checked={ isChecked }
-										onChange={ ( e ) => {
+										onChange={ () => {
 											onChangeView( {
 												...view,
 												sort: {
 													field: field.id,
-													direction: e.target.value,
+													direction,
 												},
 											} );
 										} }
@@ -232,7 +238,7 @@ function SortMenu( { fields, view, onChangeView } ) {
 										<DropdownMenuItemLabel>
 											{ info.label }
 										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItemCustom>
+									</DropdownMenuRadioItem>
 								);
 							}
 						) }
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index e23a96d63ebf20..0a7e29cd1068c1 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -94,18 +94,26 @@ function HeaderMenu( { field, view, onChangeView } ) {
 								const isChecked =
 									isSorted &&
 									view.sort.direction === direction;
+
+								const value = `${ field.id }-${ direction }`;
+
 								return (
-									<DropdownMenuRadioItemCustom
-										key={ direction }
-										name={ `view-table-sort-${ field.id }` }
-										value={ direction }
+									<DropdownMenuRadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-table-sorting"
+										value={ value }
 										checked={ isChecked }
-										onChange={ ( e ) => {
+										onChange={ () => {
 											onChangeView( {
 												...view,
 												sort: {
 													field: field.id,
-													direction: e.target.value,
+													direction,
 												},
 											} );
 										} }
@@ -113,7 +121,7 @@ function HeaderMenu( { field, view, onChangeView } ) {
 										<DropdownMenuItemLabel>
 											{ info.label }
 										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItemCustom>
+									</DropdownMenuRadioItem>
 								);
 							}
 						) }