reablocks/dist/form/Select/Select.d.ts

Component library for React

import { default as React, FC, ReactElement } from 'react';
import { Placement } from '../../utils';
import { SelectInput, SelectInputProps } from './SelectInput';
import { SelectMenu, SelectMenuProps } from './SelectMenu';
import { SelectOptionProps } from './SelectOption';
export interface SelectProps {
    /**
     * The id of the select.
     */
    id?: string;
    /**
     * The form name of the select.
     */
    name?: string;
    /**
     * Additional CSS style attributes to apply to the select.
     */
    style?: React.CSSProperties;
    /**
     * Additional class names to apply to the select.
     */
    className?: string;
    /**
     * Additional class names to apply to the select container.
     */
    containerClassName?: string;
    /**
     * Additional class names to apply to the select when the
     * menu is open
     */
    activeClassName?: string;
    /**
     * Set the select to disabled state.
     */
    disabled?: boolean;
    /**
     * Auto focus the select on render.
     */
    autoFocus?: boolean;
    /**
     * Close the select after you select an option.
     * @default true
     */
    closeOnSelect?: boolean;
    /**
     * The value of the select.
     */
    value?: string | string[];
    /**
     * The deafult value of the input filter.
     */
    defaultFilterValue?: string;
    /**
     * Whether the select is required or not.
     */
    required?: boolean;
    /**
     * Whether the select is multi or single select.
     */
    multiple?: boolean;
    /**
     * Default placeholder text.
     */
    placeholder?: string;
    /**
     * Whether you can filter the select options.
     * @default true
     */
    filterable?: boolean | 'async';
    /**
     * Whether you can clear the select after selection.
     * @default true
     */
    clearable?: boolean;
    /**
     * Whether you can use the Tab key to select the current active option.
     */
    tabToSelect?: boolean;
    /**
     * Whether the select is in loading state or not.
     */
    loading?: boolean;
    /**
     * Whether you can refresh the async values or not.
     * @default false
     */
    refreshable?: boolean;
    /**
     * Whether you can create new options or not.
     */
    createable?: boolean;
    /**
     * Select options when paste text inside input.
     */
    selectOnPaste?: boolean;
    /**
     * The list of KeyCodes for creating select values.
     * The default is ['Enter']
     * Typical options would be: ['Enter', 'Tab', 'Space', 'Comma']
     * @default ['Enter']
     */
    selectOnKeys?: string[];
    /**
     * The options of the select.
     */
    children?: any;
    /**
     * Whether the select has an error state or not.
     */
    error?: boolean;
    /**
     * The placement options for the menu.
     * @default 'bottom-start'
     */
    menuPlacement?: Placement;
    /**
     * Whether the menu is disabled or not.
     * @default false
     */
    menuDisabled?: boolean;
    /**
     * The size of the select.
     * @default 'medium'
     */
    size?: 'small' | 'medium' | 'large' | string;
    /**
     * Whether to clear the input on blur.
     * @default true
     */
    clearOnBlur?: boolean;
    /**
     * When the input receives a key down event.
     */
    onInputKeydown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * When the input receives a key up event.
     */
    onInputKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * When the select was focused.
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLDivElement>) => void;
    /**
     * When the select was blurred.
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * When the select input value changed.
     */
    onInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * When the user manually refreshed the options.
     */
    onRefresh?: () => void;
    /**
     * When the user clears the select input.
     */
    onClear?: () => void;
    /**
     * When the value changes.
     */
    onChange?: (value: any) => void;
    /**
     * When a new option is added or removed.
     */
    onOptionsChange?: (options: SelectOptionProps[]) => void;
    /**
     * Content to display before the select input.
     */
    start?: React.ReactNode;
    /**
     * Content to display after the select input (before the action buttons).
     */
    end?: React.ReactNode;
    /**
     * Input override component.
     * @default <SelectInput />
     */
    input?: ReactElement<SelectInputProps, typeof SelectInput>;
    /**
     * Menu component override.
     * @default <SelectMenu />
     */
    menu?: ReactElement<SelectMenuProps, typeof SelectMenu>;
    /**
     * When menu is opened
     */
    onOpenMenu?: () => void;
    /**
     * When menu is closed
     */
    onCloseMenu?: () => void;
}
export declare const Select: FC<SelectProps>;