@yurialessandrom/mui-mentions-rr
Version:
@mention people in a MUI TextField (React 17+)
30 lines (29 loc) • 1.43 kB
TypeScript
import React from 'react';
import { BaseSuggestionData, SuggestionData, SuggestionDataSource, SuggestionsQueryInfo } from './types';
interface SuggestionsOverlayProps<T extends BaseSuggestionData> {
/** The markup value string. */
value: string;
/** An array of data sources used in the markup string. */
dataSources: SuggestionDataSource<T>[];
/** The start of the selected text range in the plain text value. */
selectionStart: number | null;
/** The end of the selected text range in the plain text value. */
selectionEnd: number | null;
/** Whether the suggestions data is loading. */
loading: boolean;
/** A ref to the element which keeps track of the cursor position. */
cursorRef: React.RefObject<HTMLSpanElement>;
/** The position of the suggestions overlay. */
position?: 'bottom' | 'top';
/**
* zIndex for the suggestion overlay.
* @default 2
*/
zIndex?: number;
/** Callback invoked with the selected suggestion. */
onSelect: ({ id, display }: SuggestionData<T>, { childIndex, querySequenceStart, querySequenceEnd, plainTextValue }: SuggestionsQueryInfo) => void;
/** Callback invoked on mouse down in the suggestions overlay. */
onMouseDown: () => void;
}
declare function SuggestionsOverlay<T extends BaseSuggestionData>(props: SuggestionsOverlayProps<T>): React.JSX.Element | null;
export default SuggestionsOverlay;