feat(@clayui/autocomplete): adds loading indicator and live announcer to infinite scrolling

packages/clay-autocomplete/src/Autocomplete.tsx

@@ -3,10 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {
-	__NOT_PUBLIC_COLLECTION,
-	__NOT_PUBLIC_LIVE_ANNOUNCER,
-} from '@clayui/core';
+import {Announcer, LiveAnnouncer, __NOT_PUBLIC_COLLECTION} from '@clayui/core';
 import DropDown from '@clayui/drop-down';
 import {ClayInput as Input} from '@clayui/form';
 import LoadingIndicator from '@clayui/loading-indicator';
@@ -27,10 +24,9 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {AutocompleteContext} from './Context';
 
-import type {AnnouncerAPI, ICollectionProps} from '@clayui/core';
+import type {ICollectionProps} from '@clayui/core';
 
 const {Collection, useCollection, useVirtual} = __NOT_PUBLIC_COLLECTION;
-const {LiveAnnouncer} = __NOT_PUBLIC_LIVE_ANNOUNCER;
 
 type ItemProps<T> = {
 	children: React.ReactElement;
@@ -110,6 +106,9 @@ export interface IProps<T>
 	 * Messages for autocomplete.
 	 */
 	messages?: {
+		infiniteScrollingListCountPlural?: string;
+		infiniteScrollingLoaded?: string;
+		infiniteScrollingLoading?: string;
 		listCount?: string;
 		listCountPlural?: string;
 		loading: string;
@@ -189,6 +188,9 @@ function hasItem<T extends Record<string, any> | string | number>(
 const ESCAPE_REGEXP = /[.*+?^${}()|[\]\\]/g;
 
 const defaultMessages = {
+	infiniteScrollingListCountPlural: '{0} items loaded.',
+	infiniteScrollingLoaded: '{0} more items loaded.',
+	infiniteScrollingLoading: 'Loading more items.',
 	listCount: '{0} option available.',
 	listCountPlural: '{0} options available.',
 	loading: 'Loading...',
@@ -268,8 +270,6 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 
 	const ariaControlsId = useId();
 
-	const announcerAPI = useRef<AnnouncerAPI>(null);
-
 	const isFirst = useIsFirstRender();
 
 	const filterFn = useCallback(
@@ -347,6 +347,7 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 
 	const virtualizer = useVirtual({
 		estimateSize: 37,
+		isLoading,
 		items: filteredItems,
 		parentRef: menuRef,
 	});
@@ -396,6 +397,11 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 			[value]
 		),
 		items: filteredItems,
+		load: (
+			<DropDown.Item aria-disabled="true" roleItem="option">
+				<LoadingIndicator size="sm" />
+			</DropDown.Item>
+		),
 		notFound: (
 			<DropDown.Item
 				aria-disabled="true"
@@ -443,26 +449,57 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 		}
 	}, [active]);
 
+	useEffect(() => {
+		const lastKey = collection.getLastItem();
+
+		if (onLoadMore && !isLoading && activeDescendant === lastKey?.key) {
+			onLoadMore();
+		}
+	}, [activeDescendant]);
+
 	const optionCount = collection.getItems().length;
 	const lastSize = useRef(optionCount);
 
+	const itemsSizeRef = useRef(items?.length);
+
+	useEffect(() => {
+		itemsSizeRef.current = items?.length;
+	}, [items?.length]);
+
+	// TODO: Move to Collection in the future and identify a better standard for
+	// all components.
+	useEffect(() => {
+		if (active && isLoading) {
+			Announcer.announce(messages!.infiniteScrollingLoading!);
+
+			return () => {
+				Announcer.announce(
+					sub(messages!.infiniteScrollingLoaded!, [
+						itemsSizeRef.current! - items!.length!,
+					])
+				);
+			};
+		}
+	}, [active, messages!.infiniteScrollingLoading, isLoading]);
+
 	useEffect(() => {
 		// Only announces the number of options available when the menu is open
 		// if there is no item with focus, with the exception of Voice Over
 		// which does not include the message.
 		if (
-			announcerAPI.current &&
 			active &&
 			(!activeDescendant ||
 				isAppleDevice() ||
 				optionCount !== lastSize.current)
 		) {
 			const optionCount = collection.getItems().length;
 
-			announcerAPI.current.announce(
+			Announcer.announce(
 				sub(
 					optionCount === 1
 						? messages!.listCount!
+						: onLoadMore
+						? messages!.infiniteScrollingListCountPlural!
 						: messages!.listCountPlural!,
 					[optionCount]
 				)
@@ -490,7 +527,7 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 
 	return (
 		<>
-			<LiveAnnouncer ref={announcerAPI} />
+			<LiveAnnouncer />
 
 			<As
 				{...otherProps}

packages/clay-autocomplete/stories/Autocomplete.stories.tsx

@@ -4,11 +4,7 @@
  */
 
 import {Text, TextHighlight} from '@clayui/core';
-import {useResource} from '@clayui/data-provider';
-import {
-	FetchPolicy,
-	NetworkStatus,
-} from '@clayui/data-provider/src/useResource';
+import {FetchPolicy, NetworkStatus, useResource} from '@clayui/data-provider';
 import DropDown from '@clayui/drop-down';
 import Layout from '@clayui/layout';
 import {FocusScope, useDebounce} from '@clayui/shared';
@@ -288,6 +284,69 @@ export const AsyncFilter = () => {
 	);
 };
 
+export const InfiniteScroller = () => {
+	const [value, setValue] = useState('');
+
+	const [networkStatus, setNetworkStatus] = useState<NetworkStatus>(
+		NetworkStatus.Unused
+	);
+	const {loadMore, resource} = useResource({
+		fetch: async (link, options) => {
+			const result = await fetch(link, options);
+			const json = await result.json();
+
+			return {
+				cursor: json.info.next,
+				items: json.results,
+			};
+		},
+		fetchPolicy: FetchPolicy.CacheFirst,
+		link: 'https://rickandmortyapi.com/api/character/',
+		onNetworkStatusChange: setNetworkStatus,
+		variables: {name: value},
+	});
+
+	return (
+		<div className="row">
+			<div className="col-md-5">
+				<div className="sheet">
+					<div className="form-group">
+						<label
+							htmlFor="clay-autocomplete-1"
+							id="clay-autocomplete-label-1"
+						>
+							Name
+						</label>
+						<ClayAutocomplete
+							aria-labelledby="clay-autocomplete-label-1"
+							id="clay-autocomplete-1"
+							items={(resource as Array<RickandMorty>) ?? []}
+							loadingState={networkStatus}
+							messages={{
+								listCount: '{0} option available.',
+								listCountPlural: '{0} options available.',
+								loading: 'Loading...',
+								notFound: 'No results found',
+							}}
+							onChange={setValue}
+							onItemsChange={() => {}}
+							onLoadMore={loadMore}
+							placeholder="Enter a name"
+							value={value}
+						>
+							{(item) => (
+								<ClayAutocomplete.Item key={item.id}>
+									{item.name}
+								</ClayAutocomplete.Item>
+							)}
+						</ClayAutocomplete>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
 export const Keyboard = () => {
 	const inputRef = useRef<HTMLInputElement | null>(null);
 	const [value, setValue] = useState('');
@@ -305,6 +364,17 @@ export const Keyboard = () => {
 		<div className="row">
 			<div className="col-md-5">
 				<div className="sheet">
+					<div className="alert alert-danger">
+						This Autocomplete implementation uses the deprecated
+						implementation, we recommend using the{' '}
+						<a
+							href="https://clayui.com/docs/components/autocomplete"
+							target="__blank"
+						>
+							new pattern
+						</a>
+						.
+					</div>
 					<div className="form-group">
 						<label>Numbers (one-five)</label>
 						<FocusScope>
@@ -362,6 +432,17 @@ export const AsyncData = () => {
 		<div className="row">
 			<div className="col-md-5">
 				<div className="sheet">
+					<div className="alert alert-danger">
+						This Autocomplete implementation uses the deprecated
+						implementation, we recommend using the{' '}
+						<a
+							href="https://clayui.com/docs/components/autocomplete"
+							target="__blank"
+						>
+							new pattern
+						</a>
+						.
+					</div>
 					<div className="form-group">
 						<label>Name</label>
 						<ClayAutocomplete>

packages/clay-core/package.json

@@ -36,7 +36,7 @@
 		"@clayui/provider": "^3.128.0",
 		"@clayui/shared": "^3.136.0",
 		"@clayui/table": "^3.111.0",
-		"@tanstack/react-virtual": "3.0.0-beta.54",
+		"@tanstack/react-virtual": "^3.13.8",
 		"aria-hidden": "^1.2.2",
 		"classnames": "^2.2.6",
 		"fuzzy": "^0.1.3",

packages/clay-core/src/collection/Collection.tsx

@@ -175,8 +175,7 @@ export function Collection<
 			const target = event.target as HTMLElement;
 
 			if (
-				target.scrollTop + target.clientHeight >=
-					target.scrollHeight - 40 &&
+				target.scrollTop + target.clientHeight >= target.scrollHeight &&
 				!isLoading
 			) {
 				onLoadMore!();

packages/clay-core/src/collection/types.ts

@@ -109,6 +109,11 @@ export type Props<P, K> = {
 	 */
 	notFound?: JSX.Element;
 
+	/**
+	 * Renders an element when it is loading more items.
+	 */
+	load?: JSX.Element;
+
 	/**
 	 * Defines which key should be used as the item identifier.
 	 */