@intility/bifrost-react-select
Version:
React select component for Intility's design system, Bifrost.
99 lines (98 loc) • 4.26 kB
TypeScript
import { GroupBase, Props as ReactSelectProps, SelectInstance, components as originalComponents } from "react-select";
import { AsyncProps as AsyncSelectProps } from "react-select/async";
import { CreatableProps as CreatableSelectProps } from "react-select/creatable";
import { AsyncCreatableProps as AsyncCreatableSelectProps } from "react-select/async-creatable";
export declare const selectStyles: {
container: (provided: any) => any;
control: (provided: any, state: any) => any;
indicatorSeparator: () => {
display: string;
};
indicatorsContainer: (provided: any) => any;
clearIndicator: (provided: any) => any;
dropdownIndicator: (provided: any, state: any) => any;
input: (provided: any) => any;
menu: (provided: any) => any;
menuList: (provided: any) => any;
placeholder: (provided: any, state: any) => any;
valueContainer: (provided: any) => any;
singleValue: (provided: any, state: any) => any;
option: (provided: any, state: any) => any;
multiValue: (provided: any, state: any) => any;
multiValueLabel: (provided: any) => any;
multiValueRemove: (provided: any, state: any) => any;
group: (provided: any) => any;
groupHeading: (provided: any) => any;
};
export declare const selectComponents: typeof originalComponents;
export type SelectState = "default" | "alert";
export type SelectProps = {
/** Required label text */
label: React.ReactNode;
/** Hide label text, will add label prop as aria-label for screen readers */
hideLabel?: boolean;
/** Description text to show more information */
description?: React.ReactNode;
/** Available states: `default` and `alert` */
state?: SelectState;
/** Feedback text below the Select component */
feedback?: React.ReactNode;
/** Required prop indicating mandatory field */
required?: boolean;
/** Bool to mark Select component required, but hides the required label */
requiredNoLabel?: boolean;
/** Marks Select component as optional */
optional?: boolean;
/** Inline CSS styles */
style?: React.CSSProperties;
/** Displays a loading spinner */
loading?: boolean;
/** Decrease height of the input from `40px` to `32px` */
small?: boolean;
};
export type SelectType = {
<OptionType = {
label: string;
value: string;
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(props: ReactSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
displayName?: string;
};
/**
* Select component - dropdown list
*/
export declare const Select: SelectType;
export type AsyncType = {
<OptionType = {
label: string;
value: string;
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
options: OptionType[];
label?: string;
}>(props: AsyncSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
displayName?: string;
};
declare const AsyncSelect: AsyncType;
export type CreatableType = {
<OptionType = {
label: string;
value: string;
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
options: OptionType[];
label?: string;
}>(props: CreatableSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
displayName?: string;
};
declare const CreatableSelect: CreatableType;
export type AsyncCreatableType = {
<OptionType = {
label: string;
value: string;
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
options: OptionType[];
label?: string;
}>(props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> & React.RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
displayName?: string;
};
declare const AsyncCreatableSelect: AsyncCreatableType;
export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
export default Select;