@trail-ui/react
Version:
62 lines (59 loc) • 2.05 kB
TypeScript
import { SelectVariantProps, SlotsToClasses, SelectSlots } from '@trail-ui/theme';
import { ReactNode, ForwardedRef, ReactElement } from 'react';
import { Placement } from 'react-aria';
import { SelectProps as SelectProps$1, PopoverProps } from 'react-aria-components';
import { ListBoxProps } from '../listbox/listbox.js';
import { SpinnerProps } from '../spinner/spinner.js';
import 'react/jsx-runtime';
import '../listbox/listbox-item.js';
interface SelectProps<T extends object> extends Omit<SelectProps$1<T>, 'children'>, SelectVariantProps {
label?: ReactNode;
description?: ReactNode;
errorMessage?: ReactNode;
placement?: Placement;
items?: Iterable<T>;
children: React.ReactNode | ((item: T) => React.ReactNode);
/**
* The icon that represents the select open state. Usually a chevron icon.
*/
selectorIcon?: ReactNode;
/**
* Element to be rendered in the left side of the select.
*/
startContent?: React.ReactNode;
/**
* Element to be rendered in the right side of the select.
*/
endContent?: ReactNode;
isLoading?: boolean;
/**
* Props to be passed to the spinner component.
*
* @default { size: "sm" , color: "current" }
*/
spinnerProps?: Partial<SpinnerProps>;
/**
* Props to be passed to the popover component.
*
* @default { placement: "bottom", triggerScaleOnOpen: false, offset: 5 }
*/
popoverProps?: Partial<PopoverProps>;
/**
* Props to be passed to the listbox component.
*
* @default { disableAnimation: false }
*/
listBoxProps?: Partial<ListBoxProps<T>>;
/**
* Classes object to style the select and its children.
*/
classNames?: SlotsToClasses<SelectSlots>;
/**
* Whether the select component has search functionality.
*/
isSearchable?: boolean;
}
declare const _Select: <T extends object>(props: SelectProps<T> & {
ref?: ForwardedRef<HTMLDivElement>;
}) => ReactElement;
export { _Select as Select, SelectProps };