@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
137 lines (136 loc) • 3.95 kB
TypeScript
import type { ComponentType } from 'react';
import React from 'react';
import type { GroupBase, OptionProps, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
interface SelectboxOption {
label: string;
value: string;
}
declare module 'react-select/dist/declarations/src/Select' {
interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
errorState?: boolean;
}
}
interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
/**
* Unique ID for the select element
*/
inputId: ReactSelectProps['inputId'];
/**
* Array of options that populate the select menu
*/
options: OptionsOrGroups<Option, Group>;
/**
* Default value of select menu
*
* @default undefined
*/
value?: ReactSelectProps<Option>['value'];
/**
* Text of the select element label
*/
label?: string;
/**
* Text of placeholder for the select value
*/
placeholder?: ReactSelectProps['placeholder'];
/**
* Text to display when there are no options
*/
noOptionsText?: string;
/**
* On select change callback
*/
onChange: ReactSelectProps<Option, IsMulti>['onChange'];
/**
* On input change callback
*/
onInputChange?: ReactSelectProps['onInputChange'];
/**
* Allows to attach selectbox options menu to specific HTML element
* Useful when used in modals
*
* @default selectbox-container
*/
menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
/**
* Allows to place selectbox options menu above or below the selectbox control
*
* @param {MenuPlacement} top Opens options menu above the control
* @param {MenuPlacement} bottom Opens options menu below the control
*
* @default 'auto'
*/
menuPlacement?: ReactSelectProps['menuPlacement'];
/**
* Displays loading indicator (PixelLoader) instead of selectbox
*
* @default false
*/
isLoading?: boolean;
/**
* Allows to enable search functionality
*
* @default false
*/
isSearchable?: boolean;
/**
* Allows to clear selected value
*
* @default false
*/
isClearable?: boolean;
/**
* Allows to select multiple options
*
* @default false
*/
isMulti?: IsMulti;
/**
* Allows to disable the component functionality
*
* @default false
*/
isDisabled?: boolean;
/**
* Allows to set selectbox as mandatory
*
* @default false
*/
isRequired?: boolean;
/**
* Allows to set selectbox to error state
*
* @default false
*/
error?: boolean;
/**
* Text of the error message when selectbox is in error state
*/
errorMessage?: string;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
/**
* Screen reader label describing the purpose of the SelectBox,
*/
ariaLabel?: string;
/**
* Allows to pass a screen reader label for the loading indicator
*/
loadingLabel?: string;
/**
* Allows to pass custom styles
*/
styles?: ReactSelectProps<Option, IsMulti, Group>['styles'];
/**
* Allows to pass custom option component
*/
optionComponent?: ComponentType<OptionProps<Option, IsMulti, Group>>;
}
declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
export default SelectBox;