convert SuggestionsList to TypeScript

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

@@ -11,27 +11,30 @@ import classnames from 'classnames';
 import { useState } from '@wordpress/element';
 import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
 
-const emptyList = Object.freeze( [] );
+/**
+ * Internal dependencies
+ */
+import type { SuggestionsListProps } from './types';
 
 const handleMouseDown = ( e ) => {
 	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
 };
 
-function SuggestionsList( {
+export const SuggestionsList = withSafeTimeout( function SuggestionsList( {
 	selectedIndex,
 	scrollIntoView,
 	match = '',
 	onHover,
 	onSelect,
-	suggestions = emptyList,
+	suggestions = [],
 	displayTransform,
 	instanceId,
 	setTimeout,
-} ) {
+}: SuggestionsListProps ) {
 	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
-	const listRef = useRefEffect(
+	const listRef = useRefEffect< HTMLUListElement >(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
@@ -116,8 +119,9 @@ function SuggestionsList( {
 						role="option"
 						className={ className }
 						key={
-							suggestion?.value
-								? suggestion.value
+							typeof suggestion === 'object' &&
+							'value' in suggestion
+								? suggestion?.value
 								: displayTransform( suggestion )
 						}
 						onMouseDown={ handleMouseDown }
@@ -142,6 +146,6 @@ function SuggestionsList( {
 			} ) }
 		</ul>
 	);
-}
+} );
 
-export default withSafeTimeout( SuggestionsList );
+export default SuggestionsList;

packages/components/src/form-token-field/types.ts

@@ -3,11 +3,26 @@
  */
 import type { MouseEventHandler } from 'react';
 
-export interface TokenProps {
+type Suggestion = string | { value: string };
+
+export interface SuggestionsListProps< T = Suggestion > {
+	selectedIndex: number;
+	scrollIntoView: boolean;
+	match: string;
+	onHover: ( suggestion: T ) => void;
+	onSelect: ( suggestion: T ) => void;
+	suggestions: T[];
+	displayTransform: ( value: T ) => string;
+	instanceId: string;
+	setTimeout: ( fn: () => void, delay: number ) => number;
+	clearTimeout: ( id: number ) => void;
+}
+
+export interface TokenProps< T = Suggestion > {
 	value: string;
 	status: 'error' | 'success' | 'validating';
 	title: string;
-	displayTransform;
+	displayTransform: ( value: T ) => string;
 	isBorderless: boolean;
 	disabled: boolean;
 	onClickRemove: ( { value }: { value: string } ) => void;