@jetbrains/ring-ui-built 6.0.1

package/components/query-assist/query-assist.d.ts

@@ -0,0 +1,306 @@
+import React, { Component, ComponentRef, ReactNode, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import Caret, { Position } from '../caret/caret';
+import PopupMenu from '../popup-menu/popup-menu';
+import Button from '../button/button';
+import Icon from '../icon/icon';
+import { Size } from '../input/input';
+import { ShortcutsMap } from '../shortcuts/core';
+import { QueryAssistSuggestion, SuggestionItem } from './query-assist__suggestions';
+declare function noop(): void;
+export interface QueryAssistTranslations {
+    searchTitle: string;
+    clearTitle: string;
+}
+export interface FocusChange {
+    focus: boolean;
+}
+export interface QueryAssistChange {
+    query: string;
+    prevCaret?: number | null;
+    caret: number;
+    focus?: boolean;
+    selection?: Position | number | null;
+    dirty?: boolean;
+    suggestionsQuery?: string;
+}
+export interface QueryAssistResponse {
+    query?: string | undefined;
+    caret?: number | undefined;
+    styleRanges?: readonly StyleRange[] | undefined;
+    suggestions?: readonly QueryAssistSuggestion[] | undefined;
+}
+export interface QueryAssistRequestParams {
+    query: string;
+    caret: number;
+    omitSuggestions?: boolean;
+}
+export interface QueryAssistProps {
+    onApply: (change: QueryAssistChange) => void;
+    onChange: (change: QueryAssistChange) => void;
+    onApplySuggestion: (suggestion: QueryAssistSuggestion, change: QueryAssistChange) => void;
+    onClear: () => void;
+    onFocusChange: (change: FocusChange) => void;
+    translations?: QueryAssistTranslations | null | undefined;
+    autoOpen?: boolean | null | undefined | 'force';
+    caret?: number | null | undefined;
+    clear?: boolean | null | undefined;
+    className?: string | null | undefined;
+    popupClassName?: string | null | undefined;
+    inputClassName?: string | null | undefined;
+    dataSource: (params: QueryAssistRequestParams) => Promise<QueryAssistResponse> | QueryAssistResponse;
+    delay?: number | null | undefined;
+    disabled?: boolean | undefined;
+    focus?: boolean | null | undefined;
+    hint?: string | null | undefined;
+    hintOnSelection?: string | null | undefined;
+    glass?: boolean | null | undefined;
+    loader?: boolean | null | undefined;
+    placeholder?: string | null | undefined;
+    query?: string | null | undefined;
+    useCustomItemRender?: boolean | null | undefined;
+    actions?: ReactNode[] | null | undefined;
+    'data-test'?: string | null | undefined;
+    huge?: boolean | null | undefined;
+    size: Size;
+}
+export interface StyleRange {
+    style: string;
+    start: number;
+    length: number;
+}
+interface QueryAssistState {
+    dirty: boolean | undefined;
+    query: string | null | undefined;
+    placeholderEnabled: boolean;
+    shortcuts?: boolean;
+    suggestions: readonly QueryAssistSuggestion[];
+    showPopup: boolean;
+    prevQuery?: string | null | undefined;
+    loading?: boolean;
+    styleRanges?: readonly StyleRange[];
+}
+interface CaretPositionParams {
+    fromContentEditable?: boolean | null | undefined;
+    forceSetCaret?: boolean | null | undefined;
+}
+interface HistoryEntry {
+    query: string | null | undefined;
+    caret: Position | number;
+}
+/**
+ * @name Query Assist
+ */
+/**
+ * ## Data source function
+
+ Component class calls a data source function when user input happens and passes an object with fields \`caret\`, \`focus\` and \`query\` as the only argument.
+ The function must return an object with the fields described below. The object can be optionally wrapped in a Promise.
+
+ ### Return object fields
+
+ \`caret\` and \`query\` should just return server values provided to data source function.
+ These fields allow the Query Assist component to recognise and drop earlier responses from the server.
+
+ + __caret__ (\`string=0\`) Caret from request
+ + __query__ (\`string=''\`) Query from request
+ + __styleRanges__ (\`Array<suggestion>=\`) Array of \`styleRange\` objects, used to highlight the request in the input field
+ + __suggestions__ (\`Array<styleRange>\`) Array of \`suggestion\` objects to show.
+
+ ### **styleRange** object fields
+
+ start \`number\` Range start (in characters)
+ length \`number\` Range length (in characters)
+ style \`string\` Style of the range. Possible values: \`text\`, \`field_value\`, \`field_name\`, \`operator\`
+
+ ### **suggestion** object fields
+
+ + __prefix__ \`string=\` Suggestion option prefix
+ + __option__ \`string\` Suggestion option
+ + __suffix__ \`string=\` Suggestion option suffix
+ + __description__ \`string=\` Suggestion option description. Is not visible when a group is set
+ + __matchingStart__ \`number\` (required when matchingEnd is set) Start of the highlighted part of an option in the suggestions list (in characters)
+ + __matchingEnd__ \`number\` (required when matchingEnd is set) End of the highlighted part of an option in the suggestions list (in characters)
+ + __caret__ \`number\` Caret position after option completion (in characters)
+ + __completionStart__ \`number\` Where to start insertion (or replacement, when completing with the \`Tab\` key) of the completion option (in characters)
+ + __completionEnd__ \`number\` Where to end insertion of the completion option (in characters)
+ + __group__ \`string=\` Group title. Options with the same title are grouped under it
+ + __icon__ \`string=\` Icon URI, Data URI is possible
+ */
+export default class QueryAssist extends Component<QueryAssistProps> {
+    static propTypes: {
+        /**
+         * Open suggestions popup during the initial render
+         */
+        autoOpen: PropTypes.Requireable<string | boolean>;
+        /**
+         * Initial caret position
+         */
+        caret: PropTypes.Requireable<number>;
+        /**
+         * Show clickable "cross" icon on the right which clears the query
+         */
+        clear: PropTypes.Requireable<boolean>;
+        /**
+         * Additional class for the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Additional class for the popup
+         */
+        popupClassName: PropTypes.Requireable<string>;
+        /**
+         * Additional class for the input
+         */
+        inputClassName: PropTypes.Requireable<string>;
+        /**
+         * Data source function
+         */
+        dataSource: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Input debounce delay
+         */
+        delay: PropTypes.Requireable<number>;
+        /**
+         * Disable the component
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Initial focus
+         */
+        focus: PropTypes.Requireable<boolean>;
+        /**
+         * Hint under the suggestions list
+         */
+        hint: PropTypes.Requireable<string>;
+        /**
+         * Hint under the suggestions list visible when a suggestion is selected
+         */
+        hintOnSelection: PropTypes.Requireable<string>;
+        /**
+         * Show clickable "glass" icon on the right which applies the query
+         */
+        glass: PropTypes.Requireable<boolean>;
+        /**
+         * Show loader when a data request is in process
+         */
+        loader: PropTypes.Requireable<boolean>;
+        /**
+         * Field placeholder value
+         */
+        placeholder: PropTypes.Requireable<string>;
+        /**
+         * Called when the query is applied. An object with fields `caret`, `focus` and `query` is passed as an argument
+         */
+        onApply: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the query is changed. An object with fields `caret` and `query` is passed as an argument
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the query is cleared. Called without arguments
+         */
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the suggestion is applied
+         */
+        onApplySuggestion: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Called when the focus status is changed. An object with fields `focus` is passed as an argument
+         */
+        onFocusChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Initial query
+         */
+        query: PropTypes.Requireable<string>;
+        useCustomItemRender: PropTypes.Requireable<boolean>;
+        translations: PropTypes.Requireable<object>;
+        actions: PropTypes.Requireable<any[]>;
+        'data-test': PropTypes.Requireable<string>;
+        huge: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onApply: typeof noop;
+        onChange: typeof noop;
+        onApplySuggestion: typeof noop;
+        onClear: typeof noop;
+        onFocusChange: typeof noop;
+        size: Size;
+    };
+    static getDerivedStateFromProps({ query }: QueryAssistProps, { prevQuery }: QueryAssistState): Partial<QueryAssistState>;
+    constructor(props: QueryAssistProps);
+    state: QueryAssistState;
+    componentDidMount(): void;
+    shouldComponentUpdate(props: QueryAssistProps, state: QueryAssistState): boolean;
+    componentDidUpdate(prevProps: QueryAssistProps): void;
+    static ngModelStateField: string;
+    immediateState: QueryAssistChange;
+    requestData?: (afterCompletion?: boolean) => void;
+    ngModelStateField: string;
+    historyStack: HistoryEntry[];
+    mouseIsDownOnPopup?: boolean;
+    handleFocusChange: (e: SyntheticEvent) => void;
+    node?: HTMLElement | null;
+    nodeRef: (node: HTMLElement | null) => void;
+    updateFocus({ focus, caret }: QueryAssistProps): void;
+    setCaretPosition: (params?: CaretPositionParams) => void;
+    scrollInput(): void;
+    getQuery(): string;
+    isRenderingGlassOrLoader(): boolean | undefined;
+    togglePlaceholder: () => void;
+    isComposing?: boolean;
+    handleInput: (e: Event | SyntheticEvent) => void;
+    handleEnter: (e: React.KeyboardEvent) => void;
+    handleTab: (e: Event) => boolean | void;
+    setState: (state: Partial<QueryAssistState>, resolve?: () => void) => void;
+    private _pushHistory;
+    undo: (e: Event) => void;
+    handlePaste: (e: React.ClipboardEvent) => void;
+    handleCaretMove: (e: Event | SyntheticEvent) => void;
+    handleStyleRangesResponse: ({ suggestions, ...restProps }: QueryAssistResponse) => Promise<void>;
+    handleResponse: ({ query, caret, styleRanges, suggestions }: QueryAssistResponse, afterCompletion?: boolean) => Promise<void>;
+    handleApply: () => void;
+    handleComplete: (data?: SuggestionItem, replace?: boolean) => void;
+    requestStyleRanges: () => Promise<void>;
+    requestHandler: (afterCompletion?: boolean) => Promise<void>;
+    sendRequest(params: QueryAssistRequestParams): Promise<QueryAssistResponse>;
+    getPopupOffset(suggestions: readonly QueryAssistSuggestion[]): number;
+    handleCtrlSpace: (e: Event) => void;
+    trackPopupMouseState: (e: SyntheticEvent) => void;
+    trackCompositionState: (e: SyntheticEvent) => void;
+    closePopup: () => void;
+    clearQuery: () => void;
+    blurInput(): void;
+    /**
+     * Optionally setup data request delay. For each component create a separate
+     * instance of the delayed function. This may help reduce the load on the server
+     * when the user quickly inputs data.
+     */
+    setupRequestHandler(delay?: number | null): void;
+    private _renderSuggestion;
+    renderSuggestions(): import("../list/consts").ListDataItem<SuggestionItem>[];
+    renderQuery(): "" | React.JSX.Element[] | null | undefined;
+    setFocus(focus: boolean | null | undefined): void;
+    input?: HTMLElement | null;
+    caret?: Caret;
+    inputRef: (node: HTMLElement | null) => void;
+    _popup?: PopupMenu<SuggestionItem> | null;
+    popupRef: (node: PopupMenu<SuggestionItem> | null) => void;
+    placeholder?: HTMLElement | null;
+    placeholderRef: (node: HTMLElement | null) => void;
+    glass?: ComponentRef<typeof Icon> | null;
+    glassRef: (node: ComponentRef<typeof Icon> | null) => void;
+    loader?: HTMLElement | null;
+    loaderRef: (node: HTMLElement | null) => void;
+    clear?: ComponentRef<typeof Button> | null;
+    clearRef: (node: ComponentRef<typeof Button> | null) => void;
+    shortcutsScope: string;
+    shortcutsMap: ShortcutsMap;
+    listShortcutsMap: ShortcutsMap;
+    renderActions(): React.ReactNode[];
+    render(): React.JSX.Element;
+}
+export type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
+export declare const RerenderableQueryAssist: React.ForwardRefExoticComponent<QueryAssistProps & React.RefAttributes<QueryAssist>>;
+export {};