From bb6935bd8ce1f19f23fa93135ed5724bf3b2a728 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 29 Nov 2023 10:55:22 +0100
Subject: [PATCH] Add separator

---
 .../src/components/dataviews/view-list.js     | 173 +++++++++---------
 1 file changed, 91 insertions(+), 82 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index 66976ffc58de2..4f4a34356a14e 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -185,91 +185,100 @@ function HeaderMenu( { dataView, header } ) {
 								</DropdownSubMenuTrigger>
 							}
 						>
-							{ filter.elements.map( ( element ) => {
-								let isActive = false;
-								if ( filterInView ) {
-									// Intentionally use loose comparison, so it does type conversion.
-									// This covers the case where a top-level filter for the same field converts a number into a string.
-									isActive =
-										element.value == filterInView.value; // eslint-disable-line eqeqeq
-								}
-
-								return (
-									<DropdownMenuItem
-										key={ element.value }
-										suffix={
-											isActive && <Icon icon={ check } />
-										}
-										onSelect={ () => {
-											dataView.setColumnFilters( [
-												...otherFilters,
-												{
-													[ filter.field +
-													':' +
-													filterInView?.operator ]:
-														isActive
-															? undefined
-															: element.value,
-												},
-											] );
-										} }
-									>
-										{ element.label }
-									</DropdownMenuItem>
-								);
-							} ) }
-							{ filter.operators.length > 1 && (
-								<DropdownSubMenu
-									trigger={
-										<DropdownSubMenuTrigger>
-											{ __( 'Settings' ) }
-										</DropdownSubMenuTrigger>
-									}
-								>
-									<DropdownMenuCheckboxItem
-										key="in-filter"
-										value={ OPERATOR_IN }
-										checked={
-											filterInView?.operator ===
-											OPERATOR_IN
+							<WithSeparators>
+								<DropdownMenuGroup>
+									{ filter.elements.map( ( element ) => {
+										let isActive = false;
+										if ( filterInView ) {
+											// Intentionally use loose comparison, so it does type conversion.
+											// This covers the case where a top-level filter for the same field converts a number into a string.
+											/* eslint-disable eqeqeq */
+											isActive =
+												element.value ==
+												filterInView.value;
+											/* eslint-enable eqeqeq */
 										}
-										onSelect={ () =>
-											dataView.setColumnFilters( [
-												...otherFilters,
-												{
-													[ filter.field +
-													':' +
-													OPERATOR_IN ]:
-														filterInView?.value,
-												},
-											] )
-										}
-									>
-										{ __( 'Show matches' ) }
-									</DropdownMenuCheckboxItem>
-									<DropdownMenuCheckboxItem
-										key="not-in-filter"
-										value={ OPERATOR_NOT_IN }
-										checked={
-											filterInView?.operator ===
-											OPERATOR_NOT_IN
-										}
-										onSelect={ () =>
-											dataView.setColumnFilters( [
-												...otherFilters,
-												{
-													[ filter.field +
-													':' +
-													OPERATOR_NOT_IN ]:
-														filterInView?.value,
-												},
-											] )
+
+										return (
+											<DropdownMenuItem
+												key={ element.value }
+												suffix={
+													isActive && (
+														<Icon icon={ check } />
+													)
+												}
+												onSelect={ () => {
+													dataView.setColumnFilters( [
+														...otherFilters,
+														{
+															[ filter.field +
+															':' +
+															filterInView?.operator ]:
+																isActive
+																	? undefined
+																	: element.value,
+														},
+													] );
+												} }
+											>
+												{ element.label }
+											</DropdownMenuItem>
+										);
+									} ) }
+								</DropdownMenuGroup>
+								{ filter.operators.length > 1 && (
+									<DropdownSubMenu
+										trigger={
+											<DropdownSubMenuTrigger>
+												{ __( 'Settings' ) }
+											</DropdownSubMenuTrigger>
 										}
 									>
-										{ __( 'Hide matches' ) }
-									</DropdownMenuCheckboxItem>
-								</DropdownSubMenu>
-							) }
+										<DropdownMenuCheckboxItem
+											key="in-filter"
+											value={ OPERATOR_IN }
+											checked={
+												filterInView?.operator ===
+												OPERATOR_IN
+											}
+											onSelect={ () =>
+												dataView.setColumnFilters( [
+													...otherFilters,
+													{
+														[ filter.field +
+														':' +
+														OPERATOR_IN ]:
+															filterInView?.value,
+													},
+												] )
+											}
+										>
+											{ __( 'Show matches' ) }
+										</DropdownMenuCheckboxItem>
+										<DropdownMenuCheckboxItem
+											key="not-in-filter"
+											value={ OPERATOR_NOT_IN }
+											checked={
+												filterInView?.operator ===
+												OPERATOR_NOT_IN
+											}
+											onSelect={ () =>
+												dataView.setColumnFilters( [
+													...otherFilters,
+													{
+														[ filter.field +
+														':' +
+														OPERATOR_NOT_IN ]:
+															filterInView?.value,
+													},
+												] )
+											}
+										>
+											{ __( 'Hide matches' ) }
+										</DropdownMenuCheckboxItem>
+									</DropdownSubMenu>
+								) }
+							</WithSeparators>
 						</DropdownSubMenu>
 					</DropdownMenuGroup>
 				) }