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

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

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>
 	);

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 {

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

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

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