From 914348d887afed75ea697f6fcfed12fc0d103482 Mon Sep 17 00:00:00 2001
From: Fernando Marichal <fernando.marichal@automattic.com>
Date: Thu, 4 Jul 2024 13:35:57 -0300
Subject: [PATCH] Add clear button to `Categories` dropdown (#49036)

* Add clear button to Categories dropdown

* Add changelog

* Add component changelog

* Fix button styles

* Rename methods and prop
---
 .../dev-36283_add_clear_button_to_dropdown    |  4 +++
 .../suffix-icon.tsx                           | 11 +++++--
 .../select-tree.scss                          | 15 +++++++++
 .../select-tree.tsx                           | 32 ++++++++++++++++---
 .../dev-36283_add_clear_button_to_dropdown    |  4 +++
 .../src/blocks/generic/taxonomy/edit.tsx      |  6 ++++
 6 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 packages/js/components/changelog/dev-36283_add_clear_button_to_dropdown
 create mode 100644 packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown

diff --git a/packages/js/components/changelog/dev-36283_add_clear_button_to_dropdown b/packages/js/components/changelog/dev-36283_add_clear_button_to_dropdown
new file mode 100644
index 00000000000..d939bb258da
--- /dev/null
+++ b/packages/js/components/changelog/dev-36283_add_clear_button_to_dropdown
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add clear button to SelectTree #49036
diff --git a/packages/js/components/src/experimental-select-control/suffix-icon.tsx b/packages/js/components/src/experimental-select-control/suffix-icon.tsx
index f1077fb08de..c6e8fddb5ea 100644
--- a/packages/js/components/src/experimental-select-control/suffix-icon.tsx
+++ b/packages/js/components/src/experimental-select-control/suffix-icon.tsx
@@ -3,14 +3,21 @@
  */
 import { createElement } from 'react';
 import { Icon } from '@wordpress/icons';
+import classNames from 'classnames';
 
 type SuffixIconProps = {
 	icon: JSX.Element;
+	className?: string;
 };
 
-export const SuffixIcon = ( { icon }: SuffixIconProps ) => {
+export const SuffixIcon = ( { className = '', icon }: SuffixIconProps ) => {
 	return (
-		<div className="woocommerce-experimental-select-control__suffix-icon">
+		<div
+			className={ classNames(
+				'woocommerce-experimental-select-control__suffix-icon',
+				className
+			) }
+		>
 			<Icon icon={ icon } size={ 24 } />
 		</div>
 	);
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.scss b/packages/js/components/src/experimental-select-tree-control/select-tree.scss
index 6eb0eba8234..db46edcf22b 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree.scss
+++ b/packages/js/components/src/experimental-select-tree-control/select-tree.scss
@@ -9,6 +9,21 @@
 	&__input:disabled {
 		background-color: $gray-100;
 	}
+	&__suffix, &__suffix-items {
+		display: flex;
+		align-items: center;
+		button {
+			height: $gap-large;
+			padding: 0 $gap-smallest;
+		}
+	}
+	&__icon-clear {
+		padding-right: 0;
+		svg {
+			fill: $gray-700;
+			cursor: pointer;
+		}
+	}
 }
 
 .woocommerce-experimental-select-tree-control__dropdown {
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
index 529dfd18bb3..53acfe8a634 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
+++ b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
-import { chevronDown, chevronUp } from '@wordpress/icons';
+import { chevronDown, chevronUp, closeSmall } from '@wordpress/icons';
 import classNames from 'classnames';
 import { createElement, useEffect, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { BaseControl, TextControl } from '@wordpress/components';
+import { BaseControl, Button, TextControl } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -28,6 +28,8 @@ interface SelectTreeProps extends TreeControlProps {
 	label: string | JSX.Element;
 	onInputChange?: ( value: string | undefined ) => void;
 	initialInputValue?: string | undefined;
+	isClearingAllowed?: boolean;
+	onClear?: () => void;
 }
 
 export const SelectTree = function SelectTree( {
@@ -38,6 +40,8 @@ export const SelectTree = function SelectTree( {
 	initialInputValue,
 	onInputChange,
 	shouldShowCreateButton,
+	isClearingAllowed = false,
+	onClear = () => {},
 	...props
 }: SelectTreeProps ) {
 	const linkedTree = useLinkedTree( items );
@@ -152,6 +156,12 @@ export const SelectTree = function SelectTree( {
 		value: inputValue,
 	};
 
+	const handleClear = () => {
+		if ( isClearingAllowed ) {
+			onClear();
+		}
+	};
+
 	return (
 		<div
 			id={ selectTreeInstanceId }
@@ -184,9 +194,21 @@ export const SelectTree = function SelectTree( {
 							} }
 							inputProps={ inputProps }
 							suffix={
-								<SuffixIcon
-									icon={ isOpen ? chevronUp : chevronDown }
-								/>
+								<div className="woocommerce-experimental-select-control__suffix-items">
+									{ isClearingAllowed && isOpen && (
+										<Button onClick={ handleClear }>
+											<SuffixIcon
+												className="woocommerce-experimental-select-control__icon-clear"
+												icon={ closeSmall }
+											/>
+										</Button>
+									) }
+									<SuffixIcon
+										icon={
+											isOpen ? chevronUp : chevronDown
+										}
+									/>
+								</div>
 							}
 						>
 							<SelectedItems
diff --git a/packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown b/packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown
new file mode 100644
index 00000000000..8f1393fc599
--- /dev/null
+++ b/packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add clear button to Categories dropdown #49036
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx b/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
index df2ab6c43ae..e6dd85b43e9 100644
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
+++ b/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
@@ -103,6 +103,10 @@ export function Edit( {
 		value: String( taxonomy.id ),
 	} ) );
 
+	function handleClear() {
+		setSelectedEntries( [] );
+	}
+
 	return (
 		<div { ...blockProps }>
 			<>
@@ -175,6 +179,8 @@ export function Edit( {
 							);
 						}
 					} }
+					onClear={ handleClear }
+					isClearingAllowed={ ( selectedEntries || [] ).length > 0 }
 				></SelectTreeControl>
 				{ showCreateNewModal && (
 					<CreateTaxonomyModal