fix linting

components/content-search/SearchItem.tsx

@@ -58,6 +58,19 @@ const StyledTextHighlight = styled(TextHighlight)`
 	padding: 0 !important;
 `;
 
+export function defaultRenderItemType(suggestion: NormalizedSuggestion): string {
+	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localized CPT or taxonomy label.
+	if (suggestion.type === 'post_tag') {
+		return 'tag';
+	}
+
+	if (suggestion.subtype) {
+		return suggestion.subtype;
+	}
+
+	return suggestion.type;
+}
+
 const SearchItem: React.FC<RenderItemComponentProps> = ({
 	item: suggestion,
 	onSelect: onClick,
@@ -85,27 +98,10 @@ const SearchItem: React.FC<RenderItemComponentProps> = ({
 						</Truncate>
 					</SearchItemInfo>
 				</SearchItemHeader>
-				{showType && (
-					<SearchItemType>
-						{renderType(suggestion)}
-					</SearchItemType>
-				)}
+				{showType && <SearchItemType>{renderType(suggestion)}</SearchItemType>}
 			</SearchItemWrapper>
 		</Tooltip>
 	);
 };
 
-export function defaultRenderItemType(suggestion: NormalizedSuggestion): string {
-	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localized CPT or taxonomy label.
-	if (suggestion.type === 'post_tag') {
-		return 'tag';
-	}
-
-	if (suggestion.subtype) {
-		return suggestion.subtype;
-	}
-
-	return suggestion.type;
-}
-
 export default SearchItem;

components/content-search/index.tsx

@@ -3,14 +3,15 @@ import { useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import styled from '@emotion/styled';
 import { useMergeRefs } from '@wordpress/compose';
+import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
 import SearchItem from './SearchItem';
 import { StyledComponentContext } from '../styled-components-context';
-import type { ContentSearchMode, IdentifiableObject, QueryFilter, RenderItemComponentProps } from './types';
-import {
-	QueryClient,
-	QueryClientProvider,
-	useInfiniteQuery,
-} from '@tanstack/react-query';
+import type {
+	ContentSearchMode,
+	IdentifiableObject,
+	QueryFilter,
+	RenderItemComponentProps,
+} from './types';
 import { useOnClickOutside } from '../../hooks/use-on-click-outside';
 import { NormalizedSuggestion, fetchSearchResults } from './utils';
 
@@ -117,38 +118,23 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 
 	const mergedRef = useMergeRefs([searchContainer, clickOutsideRef]);
 
-	const {
-		status,
-		data,
-		error,
-		isFetching,
-		isFetchingNextPage,
-		fetchNextPage,
-		hasNextPage,
-	} = useInfiniteQuery(
-		{
-			queryKey: [
-				'search',
-				searchString,
-				contentTypes.join(','),
-				mode,
-				perPage,
-				queryFilter,
-			],
-			queryFn: async ({ pageParam = 1 }) => fetchSearchResults({
-				keyword: searchString,
-				page: pageParam,
-				mode,
-				perPage,
-				contentTypes,
-				queryFilter,
-				excludeItems,
-			}),
+	const { status, data, error, isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } =
+		useInfiniteQuery({
+			queryKey: ['search', searchString, contentTypes.join(','), mode, perPage, queryFilter],
+			queryFn: async ({ pageParam = 1 }) =>
+				fetchSearchResults({
+					keyword: searchString,
+					page: pageParam,
+					mode,
+					perPage,
+					contentTypes,
+					queryFilter,
+					excludeItems,
+				}),
 			getNextPageParam: (lastPage) => lastPage.nextPage,
 			getPreviousPageParam: (firstPage) => firstPage.previousPage,
-			initialPageParam: 1
-		}
-	);
+			initialPageParam: 1,
+		});
 
 	const searchResults = data?.pages.map((page) => page?.results).flat() || undefined;
 
@@ -162,7 +148,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 		<StyledNavigableMenu ref={mergedRef} orientation="vertical">
 			<StyledSearchControl
 				value={searchString}
-				onChange={(newSearchString) => {
+				onChange={(newSearchString: string) => {
 					setSearchString(newSearchString);
 				}}
 				label={label}
@@ -176,16 +162,19 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 
 			{hasSearchString || hasInitialResults ? (
 				<>
-					<List className={`tenup-content-search-list`}>
-						{isPending && <StyledSpinner onPointerEnterCapture={null} onPointerLeaveCapture={null} />}
+					<List className="tenup-content-search-list">
+						{isPending && <StyledSpinner />}
 						{hasNoResults && <ContentSearchNoResults />}
 						{hasSearchResults &&
 							searchResults.map((item) => {
 								const selectItem = () => {
 									handleItemSelection(item);
 								};
 								return (
-									<ListItem key={item.id} className="tenup-content-search-list-item">
+									<ListItem
+										key={item.id}
+										className="tenup-content-search-list-item"
+									>
 										<SearchResultItem
 											item={item}
 											onSelect={selectItem}
@@ -206,7 +195,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 						</LoadingContainer>
 					)}
 
-					{isFetchingNextPage && <StyledSpinner onPointerEnterCapture={null} onPointerLeaveCapture={null} />}
+					{isFetchingNextPage && <StyledSpinner />}
 				</>
 			) : null}
 		</StyledNavigableMenu>