@trail-ui/react/dist/select/customSelect.d.ts

import { SlotsToClasses, MultiSelectSlots } from '@trail-ui/theme';
import react__default, { ReactNode } from 'react';
import { Positions, popoverDimensions } from '../overlay/overlay.js';
import 'react/jsx-runtime';

type BaseOption = {
    label: string;
    value: string | number;
    [key: string]: any;
};
interface CustomSelectProps {
    /**
     * @property {BaseOption[]} options - The list of options available for selection.
     */
    options: BaseOption[];
    /**
     * @property {string} [value] - The controlled value of the component
     */
    value: BaseOption['values'];
    /**
     * @property {string} [label] - An optional label for the Select component.
     * @default 'Select items'
     */
    label?: string;
    /**
     * @property {string} [id] - An optional id for the Select component.
     */
    id?: string;
    /**
     * @property {string} [labelKey] - The key to use for the label of each option.
     */
    labelKey?: string;
    /**
     * @property {string} [valueKey] - The key to use for the value of each option.
     */
    valueKey?: string;
    /**
     * @param onChange  - A callback function that is called when the selected items change.
     * @returns
     */
    onChange: (selectedItems: string | number) => void;
    /**
     * @param onInputChange  - A callback function that is called when the value of input changes.
     * @returns
     */
    onInputChange?: (e: react__default.ChangeEvent<HTMLInputElement>) => void /**
     * @property {() => void} [onTriggerBlur] - A callback function that is called when the Select component loses focus.
     */;
    onTriggerBlur?: react__default.FocusEventHandler<Element>;
    /**
     * @property {() => void} [onBlur] - A callback function that is called when the button or input element loses focus.
     */
    onBlur?: react__default.FocusEventHandler<Element>;
    /**
     * @property {(e : React.KeyboardEvent) => void} [onKeyDown] - A callback function that is called when any key is pressed in the Select component.
     */
    onKeyDown?: (e: react__default.KeyboardEvent) => void;
    /**
     * @property {SlotsToClasses<MultiSelectSlots>} [classNames] - An optional object of classes to style the Select component.
     */
    classNames?: SlotsToClasses<MultiSelectSlots>;
    /**
     * @property {string} [errorMessage] - An optional error message to display below the Select component.
     */
    errorMessage?: string;
    /**
     * @property {string} [description] - An optional description to display below the Select component.
     */
    description?: string;
    /**
     * @property {string} [placeholder] - An optional placeholder to display in the input field.
     */
    placeholder?: string;
    /**
     * @property {React.ReactNode} [errorIcon] - An optional icon to display next to the error message.
     */
    errorIcon?: react__default.ReactNode;
    /**
     * @property {string} [errorId] - The id of the error message for accessibility.
     */
    errorId?: string;
    /**
     * @property {boolean} [isRequired] - Whether the Select component is required.
     */
    isRequired?: boolean;
    /**
     * @property {boolean} [isDisabled] - Whether the Select component is disabled.
     */
    isDisabled?: boolean;
    /**
     * @property {boolean} [isInvalid] - Whether the Select component is invalid.
     */
    isInvalid?: boolean;
    /**
     * @property {string} [name] - The name of the form field
     */
    name?: string;
    /**
     * @property {string} [form] - The id of the form this field belongs to
     */
    form?: string;
    /**
     * @property {number} [maxOptionsBeforeConversionToComboBox] - the component will behave as select component if the options.length is less than this value and as a combox once the value exceeds this number
     * note - the isCombox property overrides the behaviour of this feild
     * @default 6
     */
    maxOptionsBeforeConversionToComboBox?: number;
    /**
     * @property {boolean} [isCombobox] - if set to true the components behaves as a combobox, if set to false it will behave as a listbox, if no value is passed it will act as a select if the options.length is less than maxOptionsBeforeConversionToComboBox and as a comboxbox after that
     * @default undefined
     */
    isCombobox?: boolean;
    /**
     * @property {keyof typeof Positions} [position] - the position of the popover with respect to the base element
     * @default Positions.bottom
     */
    position?: keyof typeof Positions;
    /**
     * @property {popoverDimensions} [popover] - the maxHeight and maxWidth of the popover
     */
    popover?: popoverDimensions;
    /**
     * @property {boolean} [isLoading] - the loading state of options
     */
    isLoading?: boolean;
    /**
     * @property {boolean} [allowCustomInput] - allows user to select options not present in the dropdown
     */
    allowCustomInput?: boolean;
    /**
     * @property {boolean} [renderCustomLabel] - allows user to render custom labels in dropdowns
     */
    renderCustomLabel?: (option: BaseOption) => ReactNode;
}
declare const CustomSelect: react__default.ForwardRefExoticComponent<CustomSelectProps & react__default.RefAttributes<HTMLInputElement | HTMLButtonElement | null>>;

export { BaseOption, CustomSelectProps, CustomSelect as default };