@eccenca/gui-elements/dist/types/components/MultiSelect/MultiSelect.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { HTMLInputProps as BlueprintHTMLInputProps, Intent as BlueprintIntent } from "@blueprintjs/core";
import { MultiSelect as BlueprintMultiSelect, MultiSelectProps as BlueprintMultiSelectProps } from "@blueprintjs/select";
import { TestableComponent } from "../interfaces";
import { ContextOverlayProps } from "./../../index";
export interface MultiSuggestFieldSelectionProps<T> {
    newlySelected?: T;
    selectedItems: T[];
    createdItems: Partial<T>[];
}
interface MultiSuggestFieldCommonProps<T> extends TestableComponent, Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
    /**
     * Additional class name, space separated.
     */
    className?: string;
    /**
     * Returns the unique ID of an item. This will be used for equality of items.
     */
    itemId: (item: T) => string;
    /**
     * Returns the label of an item.
     * this would be used in the item selection list as well as the multi-select input
     */
    itemLabel: (item: T) => string;
    /**
     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
     */
    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
    /**
     * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
     */
    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children">>;
    /**
     * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
     */
    tagInputProps?: BlueprintMultiSelectProps<T>["tagInputProps"];
    /** Additional properties for the (query) input field of the multi-selection. */
    inputProps?: BlueprintHTMLInputProps;
    /**
     * prop to listen for query changes, when text is entered in the multi-select input
     */
    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
    /**
     * Whether the component should take up the full width of its container.
     * This overrides `tagInputProps.fill`.
     */
    fullWidth?: boolean;
    /**
     * text content to render when filtering items returns zero results.
     * If omitted, "No results." will be rendered in this case.
     */
    noResultText?: string;
    /**
     * text content to render when a new item non-existing in filtered items is about to be created .
     * If omitted, "No results." will be rendered in this case.
     */
    newItemCreationText?: string;
    /**
     * Allows to creates new item from a given query. If this is not provided then no new items can be created.
     */
    createNewItemFromQuery?: (query: string) => T;
    /**
     * Items that were newly created and not taken from the list will be post-fixed with this string.
     */
    newItemPostfix?: string;
    /**
     * Intent state of the multi select.
     */
    intent?: BlueprintIntent;
    /**
     * Disables the input element
     */
    disabled?: boolean;
    /**
     * Delay in ms how long the request for the given query should be delayed.
     */
    requestDelay?: number;
    /**
     * Clear query when an option is selected or unselected.
     * The query is empty then and the user need to enter a new query.
     */
    clearQueryOnSelection?: boolean;
    /**
     * If set then a `div` element is used as wrapper.
     * It uses the attributes given via this property.
     */
    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
    /**
     * Function that allows us to filter values from the option list.
     * If not provided, values are filtered by their labels
     */
    searchPredicate?: (item: T, query: string) => boolean;
    /**
     * Limits the height of the input target plus its dropdown menu when it is opened.
     * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100).
     * If not set than the dropdown menu cannot be larger that appr. the half of the available viewport hight.
     */
    limitHeightOpened?: boolean | number;
}
export type MultiSuggestFieldProps<T> = MultiSuggestFieldCommonProps<T> & ({
    /**
     * Predefined selected values.
     * `prePopulateWithItems` cannot be used then.
     */
    selectedItems?: T[];
    prePopulateWithItems?: never;
} | {
    selectedItems?: never;
    /**
     * When set to `true` will set the multi-select value with all the items provided.
     * `selectedItems` cannot be used then.
     */
    prePopulateWithItems?: boolean;
});
/**
 * Element behaves very similar to `SuggestField` but allows multiple selections.
 * Its value does not represent a string but a stack of objects.
 *
 * Example usage: input field for user created tags.
 *
 * Attention: there may be another `MultiSelect` component in future but this will be a re-implemented `Select` like element allowing multiple selections.
 */
export declare function MultiSuggestField<T>({ items, selectedItems: externalSelectedItems, prePopulateWithItems, itemId, itemLabel, onSelection, contextOverlayProps, tagInputProps, inputProps, runOnQueryChange, fullWidth, noResultText, newItemCreationText, newItemPostfix, disabled, createNewItemFromQuery, requestDelay, clearQueryOnSelection, className, "data-test-id": dataTestId, "data-testid": dataTestid, wrapperProps, searchPredicate, limitHeightOpened, intent, ...otherMultiSelectProps }: MultiSuggestFieldProps<T>): React.JSX.Element;
export declare namespace MultiSuggestField {
    var ofType: typeof BlueprintMultiSelect.ofType;
}
export default MultiSuggestField;