shelving/ui/form/QueryInput.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement, ReactNode } from "react";
import type { Schema } from "../../schema/Schema.js";
import { type PayloadFetchCallback } from "../../store/PayloadFetchStore.js";
import type { ImmutableArray } from "../../util/array.js";
import type { ValueInputProps } from "./Input.js";
export interface QueryInputProps<I, O> extends ValueInputProps<O> {
    /** Schema input */
    schema: Schema<I>;
    /**
     * Called with the current text value to return matching items whenever the text input changes.
     * - Automatically debounced, so only called after a short delay.
     * - Automatically shows a loading state while loading.
     * - Returning `undefined` signals to close the popover.
     */
    onQuery: PayloadFetchCallback<I, ImmutableArray<O> | undefined>;
    /**
     * Format an item of type `O` for display in the picker.
     * @param value The `T` value of an item returned by `onQuery()`, or `undefined` if a non-value was supplied.
     * - `undefined`
     */
    formatter?: ((value: O) => string) | undefined;
    /** Message that shows when query returns `[]` empty array (set to `""` empty string to show no message). */
    empty?: ReactNode | undefined;
}
/**
 * Combo box with query input.
 * - Show an input based on a `schema` of type `I`
 * - Values from the input are piped to an `onQuery()` callback.
 * - Show a `<Popover>` that has a radio list of items to allow a final option of type `O` to be picked.
 * - Errors / loading state / empty state are handled automatically.
 */
export declare function QueryInput<I, O>({ empty, value, onValue, onQuery, formatter, ...props }: QueryInputProps<I, O>): ReactElement;