UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

49 lines (48 loc) 2.48 kB
import React from 'react'; import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core'; import { __CloseButtonProps } from '../CloseButton'; import { ComboboxItem, ComboboxLikeProps, ComboboxLikeStylesNames } from '../Combobox'; import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input'; export type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames; export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<SelectFactory>, ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> { /** Controlled component value */ value?: string | null; /** Uncontrolled component default value */ defaultValue?: string | null; /** Called when value changes */ onChange?: (value: string | null, option: ComboboxItem) => void; /** Determines whether the select should be searchable, `false` by default */ searchable?: boolean; /** Determines whether check icon should be displayed near the selected option label, `true` by default */ withCheckIcon?: boolean; /** Position of the check icon relative to the option label, `'left'` by default */ checkIconPosition?: 'left' | 'right'; /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */ nothingFoundMessage?: React.ReactNode; /** Controlled search value */ searchValue?: string; /** Default search value */ defaultSearchValue?: string; /** Called when search changes */ onSearchChange?: (value: string) => void; /** Determines whether it should be possible to deselect value by clicking on the selected option, `true` by default */ allowDeselect?: boolean; /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */ clearable?: boolean; /** Props passed down to the clear button */ clearButtonProps?: __CloseButtonProps & ElementProps<'button'>; /** Props passed down to the hidden input */ hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>; } export type SelectFactory = Factory<{ props: SelectProps; ref: HTMLInputElement; stylesNames: SelectStylesNames; variant: InputVariant; }>; export declare const Select: import("../../core").MantineComponent<{ props: SelectProps; ref: HTMLInputElement; stylesNames: SelectStylesNames; variant: InputVariant; }>;