pouncejs/dist/esm/components/Combobox/Combobox.d.ts

A collection of UI components from Panther labs

import React from 'react';
import { NativeAttributes } from '../Box';
export declare type ComboboxProps<T> = Omit<NativeAttributes<'input'>, 'value' | 'onChange'> & {
    /** Callback when the selection changes */
    onChange: (value: T | null) => void;
    /** A list of entries that the dropdown will have as options */
    items: T[];
    /** The id of the combobox */
    id?: string;
    /** The variant of the component that decides the colors */
    variant?: 'solid' | 'outline';
    /** The label that is associated with this combobox */
    label: string;
    /** Whether the label should get visually hidden */
    hideLabel?: boolean;
    /**
     * A function that converts the an item to a string. This is the value that the dropdown will
     * expose to the user. This is also the value that the dropdown will use internally for comparisons
     * so it should be unique (which should be by default since you wouldn't want to expose duplicate
     * values to the user) */
    itemToString?: (item: T) => string;
    /**
     * A function used to group the Menu Items.
     */
    itemToGroup?: (item: T) => string;
    /**
     * A function that accepts an item as a parameteer and returns `true` if the item should be
     * disabled or `false` otherwise. Defaults to `() => false`.
     */
    disableItem?: (item: T) => boolean;
    /** Whether the combobox has an invalid value */
    invalid?: boolean;
    /** Whether the combobox is required or not */
    required?: boolean;
    /** Whether the combobox is disabled or not */
    disabled?: boolean;
    /** A placeholder that's visible when the user focuses on the Combobox */
    placeholder?: string;
    /** @ignore */
    hidden?: boolean;
    /**
     * The value of the item that is currently selected. The component is a controlled one,
     * so the the selected value should be provided explicitly to the dropdown
     * */
    value: T | null;
    /** Whether the Combobox should have an input to search results */
    searchable?: boolean;
    /**
     * The maximum number of results that the MultiCombobox should show. Default value is
     * `undefined` to display which displays all of them.
     * */
    maxResults?: number;
    /** The maximum height (in pixels) of the Combobox dropdown. Defaults to 300. */
    maxHeight?: number;
    /** The maximum width (in pixels) of the Combobox dropdown. Defaults to 800. */
    maxWidth?: number;
    /** Whether a clear selection control should be available to the user */
    showClearSelectionControl?: boolean;
};
/**
 * A simple Combobox can be thought of as a typical `<select>` component. Whenerever you would
 * use a normal select, you should now pass the `<Combobox>` component.
 */
declare function Combobox<Item>({ onChange, onBlur, value, items, variant, searchable, label, hideLabel, disabled, disableItem, itemToString, itemToGroup, maxHeight, maxWidth, maxResults, invalid, required, hidden, showClearSelectionControl, ...rest }: ComboboxProps<Item>): React.ReactElement<ComboboxProps<Item>>;
declare const _default: typeof Combobox;
export default _default;