Combobox, FormTokenField: show message when no matches found (#66142)

Co-authored-by: vykes-mac <vykesmac@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: matt-west <mattwest@git.wordpress.org>

packages/components/CHANGELOG.md

@@ -40,6 +40,8 @@
 
 -   `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)).
 -   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
+-   `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) 
+-   `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) 
 
 ## 28.9.0 (2024-10-03)
 

packages/components/src/form-token-field/style.scss

@@ -173,7 +173,6 @@
 	padding: $grid-unit-10 $grid-unit-15;
 	min-height: $button-size-compact;
 	margin: 0;
-	cursor: pointer;
 	box-sizing: border-box;
 
 	&.is-selected {
@@ -189,4 +188,8 @@
 			background-color: $components-color-accent-transparent-40;
 		}
 	}
+
+	&:not(.is-empty) {
+		cursor: pointer;
+	}
 }

packages/components/src/form-token-field/suggestions-list.tsx

@@ -8,6 +8,7 @@ import type { MouseEventHandler, ReactNode } from 'react';
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -156,6 +157,11 @@ export function SuggestionsList<
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */
 			} ) }
+			{ suggestions.length === 0 && (
+				<li className="components-form-token-field__suggestion is-empty">
+					{ __( 'No items found' ) }
+				</li>
+			) }
 		</ul>
 	);
 }