This commit is contained in:
Iliyan Angelov
2025-09-14 23:24:25 +03:00
commit c67067a2a4
71311 changed files with 6800714 additions and 0 deletions

View File

@@ -0,0 +1,10 @@
import { ReactElement, RefAttributes } from 'react';
import Select from './Select';
import { GroupBase } from './types';
import useAsync from './useAsync';
import type { AsyncProps } from './useAsync';
export type { AsyncProps };
declare type AsyncSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: AsyncProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
declare const AsyncSelect: AsyncSelect;
export { useAsync };
export default AsyncSelect;

View File

@@ -0,0 +1,10 @@
import { ReactElement, RefAttributes } from 'react';
import Select from './Select';
import { GroupBase } from './types';
import { AsyncAdditionalProps } from './useAsync';
import { StateManagerProps } from './useStateManager';
import { CreatableAdditionalProps } from './useCreatable';
export declare type AsyncCreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = StateManagerProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group> & AsyncAdditionalProps<Option, Group>;
declare type AsyncCreatableSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: AsyncCreatableProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
declare const AsyncCreatableSelect: AsyncCreatableSelect;
export default AsyncCreatableSelect;

View File

@@ -0,0 +1,10 @@
import { ReactElement, RefAttributes } from 'react';
import Select from './Select';
import { GroupBase } from './types';
import { StateManagerProps } from './useStateManager';
import useCreatable, { CreatableAdditionalProps } from './useCreatable';
export declare type CreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = StateManagerProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group>;
declare type CreatableSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreatableProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
declare const CreatableSelect: CreatableSelect;
export { useCreatable };
export default CreatableSelect;

View File

@@ -0,0 +1,9 @@
import * as React from 'react';
import { ReactNode } from 'react';
interface NonceProviderProps {
nonce: string;
children: ReactNode;
cacheKey: string;
}
declare const _default: ({ nonce, children, cacheKey }: NonceProviderProps) => React.JSX.Element;
export default _default;

View File

@@ -0,0 +1,491 @@
import * as React from 'react';
import { AriaAttributes, Component, FocusEventHandler, FormEventHandler, JSX, KeyboardEventHandler, MouseEventHandler, ReactNode, RefCallback, TouchEventHandler } from 'react';
import { FilterOptionOption } from './filters';
import { AriaLiveMessages, AriaSelection } from './accessibility/index';
import { SelectComponentsConfig } from './components/index';
import { ClassNamesConfig, StylesConfig, StylesProps } from './styles';
import { ThemeConfig } from './theme';
import { ActionMeta, FocusDirection, GetOptionLabel, GetOptionValue, GroupBase, InputActionMeta, MenuPlacement, MenuPosition, OnChangeValue, Options, OptionsOrGroups, PropsValue, SetValueAction } from './types';
export declare type FormatOptionLabelContext = 'menu' | 'value';
export interface FormatOptionLabelMeta<Option> {
context: FormatOptionLabelContext;
inputValue: string;
selectValue: Options<Option>;
}
export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
/** HTML ID of an element containing an error message related to the input**/
'aria-errormessage'?: AriaAttributes['aria-errormessage'];
/** Indicate if the value entered in the field is invalid **/
'aria-invalid'?: AriaAttributes['aria-invalid'];
/** Aria label (for assistive tech) */
'aria-label'?: AriaAttributes['aria-label'];
/** HTML ID of an element that should be used as the label (for assistive tech) */
'aria-labelledby'?: AriaAttributes['aria-labelledby'];
/** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive */
'aria-live'?: AriaAttributes['aria-live'];
/** Customise the messages used by the aria-live component */
ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>;
/** Focus the control when it is mounted */
autoFocus?: boolean;
/** Remove the currently focused option when the user presses backspace when Select isClearable or isMulti */
backspaceRemovesValue: boolean;
/** Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices) */
blurInputOnSelect: boolean;
/** When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent */
captureMenuScroll: boolean;
/** Sets a className attribute on the outer component */
className?: string;
/**
* If provided, all inner components will be given a prefixed className attribute.
*
* This is useful when styling via CSS classes instead of the Styles API approach.
*/
classNamePrefix?: string | null;
/**
* Provide classNames based on state for each inner component
*/
classNames: ClassNamesConfig<Option, IsMulti, Group>;
/** Close the select menu when the user selects an option */
closeMenuOnSelect: boolean;
/**
* If `true`, close the select menu when the user scrolls the document/body.
*
* If a function, takes a standard javascript `ScrollEvent` you return a boolean:
*
* `true` => The menu closes
*
* `false` => The menu stays open
*
* This is useful when you have a scrollable modal and want to portal the menu out,
* but want to avoid graphical issues.
*/
closeMenuOnScroll: boolean | ((event: Event) => boolean);
/**
* This complex object includes all the compositional components that are used
* in `react-select`. If you wish to overwrite a component, pass in an object
* with the appropriate namespace.
*
* If you only wish to restyle a component, we recommend using the `styles` prop
* instead. For a list of the components that can be passed in, and the shape
* that will be passed to them, see [the components docs](/components)
*/
components: SelectComponentsConfig<Option, IsMulti, Group>;
/** Whether the value of the select, e.g. SingleValue, should be displayed in the control. */
controlShouldRenderValue: boolean;
/** Delimiter used to join multiple values into a single HTML Input value */
delimiter?: string;
/** Clear all values when the user presses escape AND the menu is closed */
escapeClearsValue: boolean;
/** Custom method to filter whether an option should be displayed in the menu */
filterOption: ((option: FilterOptionOption<Option>, inputValue: string) => boolean) | null;
/**
* Formats group labels in the menu as React components
*
* An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
*/
formatGroupLabel: (group: Group) => ReactNode;
/** Formats option labels in the menu and control as React components */
formatOptionLabel?: (data: Option, formatOptionLabelMeta: FormatOptionLabelMeta<Option>) => ReactNode;
/**
* Resolves option data to a string to be displayed as the label by components
*
* Note: Failure to resolve to a string type can interfere with filtering and
* screen reader support.
*/
getOptionLabel: GetOptionLabel<Option>;
/** Resolves option data to a string to compare options and specify value attributes */
getOptionValue: GetOptionValue<Option>;
/** Hide the selected option from the menu */
hideSelectedOptions?: boolean;
/** The id to set on the SelectContainer component. */
id?: string;
/** The value of the search input */
inputValue: string;
/** The id of the search input */
inputId?: string;
/** Define an id prefix for the select components e.g. {your-id}-value */
instanceId?: number | string;
/** Is the select value clearable */
isClearable?: boolean;
/** Is the select disabled */
isDisabled: boolean;
/** Is the select in a state of loading (async) */
isLoading: boolean;
/**
* Override the built-in logic to detect whether an option is disabled
*
* An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
*/
isOptionDisabled: (option: Option, selectValue: Options<Option>) => boolean;
/** Override the built-in logic to detect whether an option is selected */
isOptionSelected?: (option: Option, selectValue: Options<Option>) => boolean;
/** Support multiple selected options */
isMulti: IsMulti;
/** Is the select direction right-to-left */
isRtl: boolean;
/** Whether to enable search functionality */
isSearchable: boolean;
/** Async: Text to display when loading options */
loadingMessage: (obj: {
inputValue: string;
}) => ReactNode;
/** Minimum height of the menu before flipping */
minMenuHeight: number;
/** Maximum height of the menu before scrolling */
maxMenuHeight: number;
/** Whether the menu is open */
menuIsOpen: boolean;
/**
* Default placement of the menu in relation to the control. 'auto' will flip
* when there isn't enough space below the control.
*/
menuPlacement: MenuPlacement;
/** The CSS position value of the menu, when "fixed" extra layout management is required */
menuPosition: MenuPosition;
/**
* Whether the menu should use a portal, and where it should attach
*
* An example can be found in the [Portaling](/advanced#portaling) documentation
*/
menuPortalTarget?: HTMLElement | null;
/** Whether to block scroll events when the menu is open */
menuShouldBlockScroll: boolean;
/** Whether the menu should be scrolled into view when it opens */
menuShouldScrollIntoView: boolean;
/** Name of the HTML Input (optional - without this, no input will be rendered) */
name?: string;
/** Text to display when there are no options */
noOptionsMessage: (obj: {
inputValue: string;
}) => ReactNode;
/** Handle blur events on the control */
onBlur?: FocusEventHandler<HTMLInputElement>;
/** Handle change events on the select */
onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
/** Handle focus events on the control */
onFocus?: FocusEventHandler<HTMLInputElement>;
/** Handle change events on the input */
onInputChange: (newValue: string, actionMeta: InputActionMeta) => void;
/** Handle key down events on the select */
onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
/** Handle the menu opening */
onMenuOpen: () => void;
/** Handle the menu closing */
onMenuClose: () => void;
/** Fired when the user scrolls to the top of the menu */
onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;
/** Fired when the user scrolls to the bottom of the menu */
onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
/** Allows control of whether the menu is opened when the Select is focused */
openMenuOnFocus: boolean;
/** Allows control of whether the menu is opened when the Select is clicked */
openMenuOnClick: boolean;
/** Array of options that populate the select menu */
options: OptionsOrGroups<Option, Group>;
/** Number of options to jump in menu when page{up|down} keys are used */
pageSize: number;
/** Placeholder for the select value */
placeholder: ReactNode;
/** Status to relay to screen readers */
screenReaderStatus: (obj: {
count: number;
}) => string;
/**
* Style modifier methods
*
* A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
*/
styles: StylesConfig<Option, IsMulti, Group>;
/** Theme modifier method */
theme?: ThemeConfig;
/** Sets the tabIndex attribute on the input */
tabIndex: number;
/** Select the currently focused option when the user presses tab */
tabSelectsValue: boolean;
/** Remove all non-essential styles */
unstyled: boolean;
/** The value of the select; reflected by the selected option */
value: PropsValue<Option>;
/** Sets the form attribute on the input */
form?: string;
/** Marks the value-holding input as required for form validation */
required?: boolean;
}
export declare const defaultProps: {
'aria-live': string;
backspaceRemovesValue: boolean;
blurInputOnSelect: boolean;
captureMenuScroll: boolean;
classNames: {};
closeMenuOnSelect: boolean;
closeMenuOnScroll: boolean;
components: {};
controlShouldRenderValue: boolean;
escapeClearsValue: boolean;
filterOption: (option: FilterOptionOption<unknown>, rawInput: string) => boolean;
formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
getOptionLabel: <Option_1>(option: Option_1) => string;
getOptionValue: <Option_2>(option: Option_2) => string;
isDisabled: boolean;
isLoading: boolean;
isMulti: boolean;
isRtl: boolean;
isSearchable: boolean;
isOptionDisabled: <Option_3>(option: Option_3) => boolean;
loadingMessage: () => string;
maxMenuHeight: number;
minMenuHeight: number;
menuIsOpen: boolean;
menuPlacement: string;
menuPosition: string;
menuShouldBlockScroll: boolean;
menuShouldScrollIntoView: boolean;
noOptionsMessage: () => string;
openMenuOnFocus: boolean;
openMenuOnClick: boolean;
options: never[];
pageSize: number;
placeholder: string;
screenReaderStatus: ({ count }: {
count: number;
}) => string;
styles: {};
tabIndex: number;
tabSelectsValue: boolean;
unstyled: boolean;
};
interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
ariaSelection: AriaSelection<Option, IsMulti> | null;
inputIsHidden: boolean;
isFocused: boolean;
focusedOption: Option | null;
focusedOptionId: string | null;
focusableOptionsWithIds: FocusableOptionWithId<Option>[];
focusedValue: Option | null;
selectValue: Options<Option>;
clearFocusValueOnUpdate: boolean;
prevWasFocused: boolean;
inputIsHiddenAfterUpdate: boolean | null | undefined;
prevProps: Props<Option, IsMulti, Group> | void;
instancePrefix: string;
isAppleDevice: boolean;
}
interface CategorizedOption<Option> {
type: 'option';
data: Option;
isDisabled: boolean;
isSelected: boolean;
label: string;
value: string;
index: number;
}
interface FocusableOptionWithId<Option> {
data: Option;
id: string;
}
interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
type: 'group';
data: Group;
options: readonly CategorizedOption<Option>[];
index: number;
}
declare type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<Props<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
static defaultProps: {
'aria-live': string;
backspaceRemovesValue: boolean;
blurInputOnSelect: boolean;
captureMenuScroll: boolean;
classNames: {};
closeMenuOnSelect: boolean;
closeMenuOnScroll: boolean;
components: {};
controlShouldRenderValue: boolean;
escapeClearsValue: boolean;
filterOption: (option: FilterOptionOption<unknown>, rawInput: string) => boolean;
formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
getOptionLabel: <Option_2>(option: Option_2) => string;
getOptionValue: <Option_3>(option: Option_3) => string;
isDisabled: boolean;
isLoading: boolean;
isMulti: boolean;
isRtl: boolean;
isSearchable: boolean;
isOptionDisabled: <Option_4>(option: Option_4) => boolean;
loadingMessage: () => string;
maxMenuHeight: number;
minMenuHeight: number;
menuIsOpen: boolean;
menuPlacement: string;
menuPosition: string;
menuShouldBlockScroll: boolean;
menuShouldScrollIntoView: boolean;
noOptionsMessage: () => string;
openMenuOnFocus: boolean;
openMenuOnClick: boolean;
options: never[];
pageSize: number;
placeholder: string;
screenReaderStatus: ({ count }: {
count: number;
}) => string;
styles: {};
tabIndex: number;
tabSelectsValue: boolean;
unstyled: boolean;
};
state: State<Option, IsMulti, Group>;
blockOptionHover: boolean;
isComposing: boolean;
commonProps: any;
initialTouchX: number;
initialTouchY: number;
openAfterFocus: boolean;
scrollToFocusedOptionOnUpdate: boolean;
userIsDragging?: boolean;
controlRef: HTMLDivElement | null;
getControlRef: RefCallback<HTMLDivElement>;
focusedOptionRef: HTMLDivElement | null;
getFocusedOptionRef: RefCallback<HTMLDivElement>;
menuListRef: HTMLDivElement | null;
getMenuListRef: RefCallback<HTMLDivElement>;
inputRef: HTMLInputElement | null;
getInputRef: RefCallback<HTMLInputElement>;
constructor(props: Props<Option, IsMulti, Group>);
static getDerivedStateFromProps(props: Props<unknown, boolean, GroupBase<unknown>>, state: State<unknown, boolean, GroupBase<unknown>>): {
prevProps: Props<unknown, boolean, GroupBase<unknown>>;
ariaSelection: AriaSelection<unknown, boolean> | null;
prevWasFocused: boolean;
inputIsHidden: boolean;
inputIsHiddenAfterUpdate: undefined;
} | {
prevProps: Props<unknown, boolean, GroupBase<unknown>>;
ariaSelection: AriaSelection<unknown, boolean> | null;
prevWasFocused: boolean;
inputIsHidden?: undefined;
inputIsHiddenAfterUpdate?: undefined;
};
componentDidMount(): void;
componentDidUpdate(prevProps: Props<Option, IsMulti, Group>): void;
componentWillUnmount(): void;
onMenuOpen(): void;
onMenuClose(): void;
onInputChange(newValue: string, actionMeta: InputActionMeta): void;
focusInput(): void;
blurInput(): void;
focus: () => void;
blur: () => void;
openMenu(focusOption: 'first' | 'last'): void;
focusValue(direction: 'previous' | 'next'): void;
focusOption(direction?: FocusDirection): void;
onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
setValue: (newValue: OnChangeValue<Option, IsMulti>, action: SetValueAction, option?: Option | undefined) => void;
selectOption: (newValue: Option) => void;
removeValue: (removedValue: Option) => void;
clearValue: () => void;
popValue: () => void;
getTheme(): import("./types").Theme;
getFocusedOptionId: (focusedOption: Option) => string | null;
getFocusableOptionsWithIds: () => FocusableOptionWithId<Option>[];
getValue: () => Options<Option>;
cx: (...args: any) => string;
getCommonProps(): {
clearValue: () => void;
cx: (...args: any) => string;
getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
getClassNames: <Key_1 extends keyof StylesProps<Option, IsMulti, Group>>(key: Key_1, props: StylesProps<Option, IsMulti, Group>[Key_1]) => string | undefined;
getValue: () => Options<Option>;
hasValue: boolean;
isMulti: IsMulti;
isRtl: boolean;
options: OptionsOrGroups<Option, Group>;
selectOption: (newValue: Option) => void;
selectProps: Readonly<Props<Option, IsMulti, Group>> & Readonly<{
children?: React.ReactNode;
}>;
setValue: (newValue: OnChangeValue<Option, IsMulti>, action: SetValueAction, option?: Option | undefined) => void;
theme: import("./types").Theme;
};
getOptionLabel: (data: Option) => string;
getOptionValue: (data: Option) => string;
getStyles: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => import("./types").CSSObjectWithLabel;
getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(key: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
getElementId: (element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder' | 'live-region') => string;
getComponents: () => {
ClearIndicator: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import(".").ClearIndicatorProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
Control: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import(".").ControlProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
DropdownIndicator: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import(".").DropdownIndicatorProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
DownChevron: (props: import("./components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
CrossIcon: (props: import("./components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
Group: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import(".").GroupProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
GroupHeading: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import(".").GroupHeadingProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
IndicatorsContainer: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import(".").IndicatorsContainerProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
IndicatorSeparator: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import(".").IndicatorSeparatorProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
Input: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>(props: import(".").InputProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
LoadingIndicator: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>({ innerProps, isRtl, size, ...restProps }: import(".").LoadingIndicatorProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
Menu: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("./components/Menu").MenuProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
MenuList: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("./components/Menu").MenuListProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element;
MenuPortal: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>(props: import("./components/Menu").MenuPortalProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element | null;
LoadingMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("./components/Menu").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
NoOptionsMessage: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>({ children, innerProps, ...restProps }: import("./components/Menu").NoticeProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
MultiValue: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>(props: import(".").MultiValueProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueContainer: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>({ children, innerProps, }: import(".").MultiValueGenericProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
MultiValueLabel: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>({ children, innerProps, }: import(".").MultiValueGenericProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
MultiValueRemove: typeof import("./components/MultiValue").MultiValueRemove;
Option: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import(".").OptionProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
SelectContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import(".").ContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
SingleValue: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import(".").SingleValueProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
ValueContainer: <Option_21, IsMulti_21 extends boolean, Group_21 extends GroupBase<Option_21>>(props: import(".").ValueContainerProps<Option_21, IsMulti_21, Group_21>) => import("@emotion/react").jsx.JSX.Element;
};
buildCategorizedOptions: () => CategorizedGroupOrOption<Option, Group>[];
getCategorizedOptions: () => CategorizedGroupOrOption<Option, Group>[];
buildFocusableOptions: () => Option[];
getFocusableOptions: () => Option[];
ariaOnChange: (value: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
hasValue(): boolean;
hasOptions(): boolean;
isClearable(): boolean;
isOptionDisabled(option: Option, selectValue: Options<Option>): boolean;
isOptionSelected(option: Option, selectValue: Options<Option>): boolean;
filterOption(option: FilterOptionOption<Option>, inputValue: string): boolean;
formatOptionLabel(data: Option, context: FormatOptionLabelContext): ReactNode;
formatGroupLabel(data: Group): React.ReactNode;
onMenuMouseDown: MouseEventHandler<HTMLDivElement>;
onMenuMouseMove: MouseEventHandler<HTMLDivElement>;
onControlMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
onDropdownIndicatorMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
onClearIndicatorMouseDown: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
onScroll: (event: Event) => void;
startListeningComposition(): void;
stopListeningComposition(): void;
onCompositionStart: () => void;
onCompositionEnd: () => void;
startListeningToTouch(): void;
stopListeningToTouch(): void;
onTouchStart: ({ touches }: TouchEvent) => void;
onTouchMove: ({ touches }: TouchEvent) => void;
onTouchEnd: (event: TouchEvent) => void;
onControlTouchEnd: TouchEventHandler<HTMLDivElement>;
onClearIndicatorTouchEnd: TouchEventHandler<HTMLDivElement>;
onDropdownIndicatorTouchEnd: TouchEventHandler<HTMLDivElement>;
handleInputChange: FormEventHandler<HTMLInputElement>;
onInputFocus: FocusEventHandler<HTMLInputElement>;
onInputBlur: FocusEventHandler<HTMLInputElement>;
onOptionHover: (focusedOption: Option) => void;
shouldHideSelectedOptions: () => boolean | IsMulti;
onValueInputFocus: FocusEventHandler;
onKeyDown: KeyboardEventHandler<HTMLDivElement>;
renderInput(): JSX.Element;
renderPlaceholderOrValue(): JSX.Element | JSX.Element[] | null;
renderClearIndicator(): JSX.Element | null;
renderLoadingIndicator(): JSX.Element | null;
renderIndicatorSeparator(): JSX.Element | null;
renderDropdownIndicator(): JSX.Element | null;
renderMenu(): JSX.Element | null;
renderFormField(): JSX.Element | undefined;
renderLiveRegion(): JSX.Element;
render(): JSX.Element;
}
export declare type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, Props<Option, IsMulti, Group>>;
export {};

View File

@@ -0,0 +1,5 @@
export declare function isIPhone(): boolean;
export declare function isMac(): boolean;
export declare function isIPad(): boolean;
export declare function isIOS(): boolean;
export declare function isAppleDevice(): boolean;

View File

@@ -0,0 +1,77 @@
import type { AriaAttributes } from 'react';
import { ActionMeta, GroupBase, InitialInputFocusedActionMeta, OnChangeValue, Options, OptionsOrGroups } from '../types';
export declare type OptionContext = 'menu' | 'value';
export declare type GuidanceContext = 'menu' | 'input' | 'value';
export declare type AriaSelection<Option, IsMulti extends boolean> = InitialInputFocusedActionMeta<Option, IsMulti> | (ActionMeta<Option> & {
value: OnChangeValue<Option, IsMulti>;
option?: Option;
options?: Options<Option>;
});
export interface AriaGuidanceProps {
/** String value of selectProp aria-label */
'aria-label': AriaAttributes['aria-label'];
/** String indicating user's current context and available keyboard interactivity */
context: GuidanceContext;
/** Boolean value of selectProp isSearchable */
isSearchable: boolean;
/** Boolean value of selectProp isMulti */
isMulti: boolean;
/** Boolean value of selectProp isDisabled */
isDisabled: boolean | null;
/** Boolean value of selectProp tabSelectsValue */
tabSelectsValue: boolean;
/** Boolean value indicating if user focused the input for the first time */
isInitialFocus: boolean;
}
export declare type AriaOnChangeProps<Option, IsMulti extends boolean> = AriaSelection<Option, IsMulti> & {
/** String derived label from selected or removed option/value */
label: string;
/** Array of labels derived from multiple selected or cleared options */
labels: string[];
/** Boolean indicating if the selected menu option is disabled */
isDisabled: boolean | null;
};
export interface AriaOnFilterProps {
/** String indicating current inputValue of the input */
inputValue: string;
/** String derived from selectProp screenReaderStatus */
resultsMessage: string;
}
export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
/** String indicating whether the option was focused in the menu or as (multi-) value */
context: OptionContext;
/** Option that is being focused */
focused: Option;
/** Boolean indicating whether focused menu option has been disabled */
isDisabled: boolean;
/** Boolean indicating whether focused menu option is an already selected option */
isSelected: boolean;
/** String derived label from focused option/value */
label: string;
/** Options provided as props to Select used to determine indexing */
options: OptionsOrGroups<Option, Group>;
/** selected option(s) of the Select */
selectValue: Options<Option>;
/** Boolean indicating whether user uses Apple device */
isAppleDevice: boolean;
}
export declare type AriaGuidance = (props: AriaGuidanceProps) => string;
export declare type AriaOnChange<Option, IsMulti extends boolean> = (props: AriaOnChangeProps<Option, IsMulti>) => string;
export declare type AriaOnFilter = (props: AriaOnFilterProps) => string;
export declare type AriaOnFocus<Option, Group extends GroupBase<Option> = GroupBase<Option>> = (props: AriaOnFocusProps<Option, Group>) => string;
export interface AriaLiveMessages<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
/** Guidance message used to convey component state and specific keyboard interactivity */
guidance?: (props: AriaGuidanceProps) => string;
/** OnChange message used to convey changes to value but also called when user selects disabled option */
onChange?: (props: AriaOnChangeProps<Option, IsMulti>) => string;
/** OnFilter message used to convey information about filtered results displayed in the menu */
onFilter?: (props: AriaOnFilterProps) => string;
/** OnFocus message used to convey information about the currently focused option or value */
onFocus?: (props: AriaOnFocusProps<Option, Group>) => string;
}
export declare const defaultAriaLiveMessages: {
guidance: (props: AriaGuidanceProps) => string;
onChange: <Option, IsMulti extends boolean>(props: AriaOnChangeProps<Option, IsMulti>) => string;
onFocus: <Option_1, Group extends GroupBase<Option_1>>(props: AriaOnFocusProps<Option_1, Group>) => string;
onFilter: (props: AriaOnFilterProps) => string;
};

View File

@@ -0,0 +1,8 @@
import { ReactElement } from 'react';
import { TransitionProps } from 'react-transition-group/Transition';
import { InputProps } from '../components/Input';
import { GroupBase } from '../types';
export declare type InputComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => ReactElement;
export declare type AnimatedInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = InputProps<Option, IsMulti, Group> & Partial<TransitionProps>;
declare const AnimatedInput: (WrappedComponent: InputComponent) => InputComponent;
export default AnimatedInput;

View File

@@ -0,0 +1,9 @@
import * as React from 'react';
import { ReactElement } from 'react';
import { TransitionProps } from 'react-transition-group/Transition';
import { MultiValueProps } from '../components/MultiValue';
import { GroupBase } from '../types';
export declare type MultiValueComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => ReactElement;
export declare type AnimatedMultiValueProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = MultiValueProps<Option, IsMulti, Group> & Partial<TransitionProps>;
declare const AnimatedMultiValue: (WrappedComponent: MultiValueComponent) => <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ in: inProp, onExited, ...props }: AnimatedMultiValueProps<Option, IsMulti, Group>) => React.JSX.Element;
export default AnimatedMultiValue;

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
import { ReactElement } from 'react';
import { PlaceholderProps } from '../components/Placeholder';
import { GroupBase } from '../types';
export declare type PlaceholderComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: PlaceholderProps<Option, IsMulti, Group>) => ReactElement;
declare const AnimatedPlaceholder: (WrappedComponent: PlaceholderComponent) => <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: PlaceholderProps<Option, IsMulti, Group>) => React.JSX.Element;
export default AnimatedPlaceholder;

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
import { ReactElement } from 'react';
import { SingleValueProps } from '../components/SingleValue';
import { GroupBase } from '../types';
export declare type SingleValueComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: SingleValueProps<Option, IsMulti, Group>) => ReactElement;
declare const AnimatedSingleValue: (WrappedComponent: SingleValueComponent) => <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: SingleValueProps<Option, IsMulti, Group>) => React.JSX.Element;
export default AnimatedSingleValue;

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
import { ReactElement } from 'react';
import { ValueContainerProps } from '../components/containers';
import { GroupBase } from '../types';
export declare type ValueContainerComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => ReactElement;
declare const AnimatedValueContainer: (WrappedComponent: ValueContainerComponent) => <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => React.JSX.Element;
export default AnimatedValueContainer;

View File

@@ -0,0 +1,59 @@
export declare const Input: (<Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").InputProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element) | undefined;
export declare const MultiValue: (<Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").MultiValueProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element) | undefined;
export declare const Placeholder: (<Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").PlaceholderProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element) | undefined;
export declare const SingleValue: (<Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").SingleValueProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element) | undefined;
export declare const ValueContainer: (<Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").ValueContainerProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element) | undefined;
declare const _default: import("memoize-one").MemoizedFn<(externalComponents?: Partial<{
ClearIndicator: <Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("..").GroupBase<Option_1>>(props: import("..").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends import("..").GroupBase<Option_2>>(props: import("..").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
DownChevron: (props: import("../components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
CrossIcon: (props: import("../components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("..").GroupBase<Option_3>>(props: import("..").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("..").GroupBase<Option_4>>(props: import("..").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("..").GroupBase<Option_5>>(props: import("..").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("..").GroupBase<Option_6>>(props: import("..").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("..").GroupBase<Option_7>>(props: import("..").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("..").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("..").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("..").GroupBase<Option_9>>(props: import("..").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("..").GroupBase<Option_10>>(props: import("..").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("..").GroupBase<Option_11>>(props: import("../components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("..").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("..").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("..").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("..").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("..").GroupBase<Option_14>>(props: import("..").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("..").GroupBase<Option_15>>({ children, innerProps, }: import("..").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("..").GroupBase<Option_15>>({ children, innerProps, }: import("..").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueRemove: typeof import("../components/MultiValue").MultiValueRemove;
Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("..").GroupBase<Option_16>>(props: import("..").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("..").GroupBase<Option_17>>(props: import("..").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("..").GroupBase<Option_18>>(props: import("..").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("..").GroupBase<Option_19>>(props: import("..").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("..").GroupBase<Option_20>>(props: import("..").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
}>) => Partial<{
ClearIndicator: <Option, IsMulti extends boolean, Group extends import("..").GroupBase<Option>>(props: import("..").ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("..").GroupBase<Option_1>>(props: import("..").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends import("..").GroupBase<Option_2>>(props: import("..").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
DownChevron: (props: import("../components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
CrossIcon: (props: import("../components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("..").GroupBase<Option_3>>(props: import("..").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("..").GroupBase<Option_4>>(props: import("..").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("..").GroupBase<Option_5>>(props: import("..").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("..").GroupBase<Option_6>>(props: import("..").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("..").GroupBase<Option_7>>(props: import("..").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("..").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("..").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("..").GroupBase<Option_9>>(props: import("..").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("..").GroupBase<Option_10>>(props: import("..").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("..").GroupBase<Option_11>>(props: import("../components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("..").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("..").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("..").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("..").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("..").GroupBase<Option_14>>(props: import("..").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("..").GroupBase<Option_15>>({ children, innerProps, }: import("..").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("..").GroupBase<Option_15>>({ children, innerProps, }: import("..").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueRemove: typeof import("../components/MultiValue").MultiValueRemove;
Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("..").GroupBase<Option_16>>(props: import("..").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("..").GroupBase<Option_17>>(props: import("..").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("..").GroupBase<Option_18>>(props: import("..").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("..").GroupBase<Option_19>>(props: import("..").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("..").GroupBase<Option_20>>(props: import("..").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
}>>;
export default _default;

View File

@@ -0,0 +1,18 @@
import * as React from 'react';
import { ComponentType, ReactNode } from 'react';
import { ExitHandler } from 'react-transition-group/Transition';
declare type FadeProps<ComponentProps> = {
component: ComponentType<ComponentProps>;
in?: boolean;
onExited?: ExitHandler<undefined | HTMLElement>;
duration?: number;
} & ComponentProps;
export declare const Fade: <ComponentProps extends {}>({ component: Tag, duration, in: inProp, onExited, ...props }: FadeProps<ComponentProps>) => React.JSX.Element;
export declare const collapseDuration = 260;
interface CollapseProps {
children: ReactNode;
in?: boolean;
onExited?: ExitHandler<undefined | HTMLElement>;
}
export declare const Collapse: ({ children, in: _in, onExited }: CollapseProps) => React.JSX.Element;
export {};

View File

@@ -0,0 +1,2 @@
export * from '../AsyncCreatable';
export { default } from '../AsyncCreatable';

View File

@@ -0,0 +1,2 @@
export * from '../Async';
export { default } from '../Async';

View File

@@ -0,0 +1,2 @@
export * from '../Select';
export { default } from '../Select';

View File

@@ -0,0 +1,5 @@
import { GroupBase } from './types';
export declare const formatGroupLabel: <Option, Group extends GroupBase<Option>>(group: Group) => string;
export declare const getOptionLabel: <Option>(option: Option) => string;
export declare const getOptionValue: <Option>(option: Option) => string;
export declare const isOptionDisabled: <Option>(option: Option) => boolean;

View File

@@ -0,0 +1,20 @@
/** @jsx jsx */
import { JSX, ReactNode, Ref } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export interface ControlProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** Children to render. */
children: ReactNode;
innerRef: Ref<HTMLDivElement>;
/** The mouse down event and the innerRef to pass down to the controller element. */
innerProps: JSX.IntrinsicElements['div'];
/** Whether the select is disabled. */
isDisabled: boolean;
/** Whether the select is focused. */
isFocused: boolean;
/** Whether the select is expanded. */
menuIsOpen: boolean;
}
export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, theme: { colors, borderRadius, spacing }, }: ControlProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
declare const Control: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default Control;

View File

@@ -0,0 +1,38 @@
/** @jsx jsx */
import { ComponentType, JSX, ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { CommonProps, CommonPropsAndClassName, CSSObjectWithLabel, CX, GetStyles, GroupBase, Options, Theme } from '../types';
import { Props } from '../Select';
export interface ForwardedHeadingProps<Option, Group extends GroupBase<Option>> {
id: string;
data: Group;
}
export interface GroupProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered. */
children: ReactNode;
/** Component to wrap the label, receives headingProps. */
Heading: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;
/** Props to pass to Heading. */
headingProps: ForwardedHeadingProps<Option, Group>;
/** Props to be passed to the group element. */
innerProps: JSX.IntrinsicElements['div'];
/** Label to be displayed in the heading component. */
label: ReactNode;
/** The data of the group. */
data: Group;
options: Options<Option>;
}
export declare const groupCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing } }: GroupProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
declare const Group: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupProps<Option, IsMulti, Group>) => jsx.JSX.Element;
interface GroupHeadingPropsDefinedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends ForwardedHeadingProps<Option, Group> {
className?: string | undefined;
selectProps: Props<Option, IsMulti, Group>;
theme: Theme;
getStyles: GetStyles<Option, IsMulti, Group>;
getClassNames: CommonProps<Option, IsMulti, Group>['getClassNames'];
cx: CX;
}
export declare type GroupHeadingProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = GroupHeadingPropsDefinedProps<Option, IsMulti, Group> & JSX.IntrinsicElements['div'];
export declare const groupHeadingCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { colors, spacing } }: GroupHeadingProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const GroupHeading: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: GroupHeadingProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default Group;

View File

@@ -0,0 +1,20 @@
/** @jsx jsx */
import { InputHTMLAttributes } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export interface InputSpecificProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends InputHTMLAttributes<HTMLInputElement>, CommonPropsAndClassName<Option, IsMulti, Group> {
/** Reference to the internal element */
innerRef?: (instance: HTMLInputElement | null) => void;
/** Set whether the input should be visible. Does not affect input size. */
isHidden: boolean;
/** Whether the input is disabled */
isDisabled?: boolean;
/** The ID of the form that the input belongs to */
form?: string;
/** Set className for the input element */
inputClassName?: string;
}
export declare type InputProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = InputSpecificProps<Option, IsMulti, Group>;
export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, theme: { spacing, colors }, }: InputProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
declare const Input: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default Input;

View File

@@ -0,0 +1,21 @@
/** @jsx jsx */
import { ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { AriaSelection } from '../accessibility';
import { CommonProps, GroupBase, Options } from '../types';
export interface LiveRegionProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends CommonProps<Option, IsMulti, Group> {
children: ReactNode;
innerProps: {
className?: string;
};
ariaSelection: AriaSelection<Option, IsMulti>;
focusedOption: Option | null;
focusedValue: Option | null;
selectValue: Options<Option>;
focusableOptions: Options<Option>;
isFocused: boolean;
id: string;
isAppleDevice: boolean;
}
declare const LiveRegion: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: LiveRegionProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default LiveRegion;

View File

@@ -0,0 +1,97 @@
/** @jsx jsx */
import { JSX, ReactElement, ReactNode, Ref } from 'react';
import { jsx } from '@emotion/react';
import { MenuPlacement, MenuPosition, CommonProps, GroupBase, CommonPropsAndClassName, CoercedMenuPlacement, CSSObjectWithLabel } from '../types';
interface CalculatedMenuPlacementAndHeight {
placement: CoercedMenuPlacement;
maxHeight: number;
}
interface PlacementArgs {
maxHeight: number;
menuEl: HTMLDivElement | null;
minHeight: number;
placement: MenuPlacement;
shouldScroll: boolean;
isFixedPosition: boolean;
controlHeight: number;
}
export declare function getMenuPlacement({ maxHeight: preferredMaxHeight, menuEl, minHeight, placement: preferredPlacement, shouldScroll, isFixedPosition, controlHeight, }: PlacementArgs): CalculatedMenuPlacementAndHeight;
export interface MenuPlacementProps {
/** Set the minimum height of the menu. */
minMenuHeight: number;
/** Set the maximum height of the menu. */
maxMenuHeight: number;
/** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */
menuPlacement: MenuPlacement;
/** The CSS position value of the menu, when "fixed" extra layout management is required */
menuPosition: MenuPosition;
/** Set whether the page should scroll to show the menu. */
menuShouldScrollIntoView: boolean;
}
export interface MenuProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group>, MenuPlacementProps {
/** Reference to the internal element, consumed by the MenuPlacer component */
innerRef: Ref<HTMLDivElement>;
innerProps: JSX.IntrinsicElements['div'];
isLoading: boolean;
placement: CoercedMenuPlacement;
/** The children to be rendered. */
children: ReactNode;
}
interface PlacerProps {
placement: CoercedMenuPlacement;
maxHeight: number;
}
interface ChildrenProps {
ref: Ref<HTMLDivElement>;
placerProps: PlacerProps;
}
export interface MenuPlacerProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends CommonProps<Option, IsMulti, Group>, MenuPlacementProps {
/** The children to be rendered. */
children: (childrenProps: ChildrenProps) => ReactElement;
}
export declare const menuCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ placement, theme: { borderRadius, spacing, colors }, }: MenuProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const MenuPlacer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPlacerProps<Option, IsMulti, Group>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
declare const Menu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default Menu;
export interface MenuListProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** Set the max height of the Menu component */
maxHeight: number;
/** The children to be rendered. */
children: ReactNode;
/** Inner ref to DOM ReactNode */
innerRef: Ref<HTMLDivElement>;
/** The currently focused option */
focusedOption: Option;
/** Props to be passed to the menu-list wrapper. */
innerProps: JSX.IntrinsicElements['div'];
}
export declare const menuListCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ maxHeight, theme: { spacing: { baseUnit }, }, }: MenuListProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const MenuList: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuListProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export declare const noOptionsMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const loadingMessageCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing: { baseUnit }, colors, }, }: NoticeProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export interface NoticeProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered. */
children: ReactNode;
/** Props to be passed on to the wrapper. */
innerProps: JSX.IntrinsicElements['div'];
}
export declare const NoOptionsMessage: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ children, innerProps, ...restProps }: NoticeProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export declare const LoadingMessage: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ children, innerProps, ...restProps }: NoticeProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export interface MenuPortalProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
appendTo: HTMLElement | undefined;
children: ReactNode;
controlElement: HTMLDivElement | null;
innerProps: JSX.IntrinsicElements['div'];
menuPlacement: MenuPlacement;
menuPosition: MenuPosition;
}
export interface PortalStyleArgs {
offset: number;
position: MenuPosition;
rect: {
left: number;
width: number;
};
}
export declare const menuPortalCSS: ({ rect, offset, position, }: PortalStyleArgs) => CSSObjectWithLabel;
export declare const MenuPortal: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuPortalProps<Option, IsMulti, Group>) => jsx.JSX.Element | null;

View File

@@ -0,0 +1,44 @@
/** @jsx jsx */
import { ComponentType, JSX, ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
import { Props } from '../Select';
interface MultiValueComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
Container: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
Label: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
Remove: ComponentType<MultiValueRemoveProps<Option, IsMulti, Group>>;
}
export interface MultiValueProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
children: ReactNode;
components: MultiValueComponents<Option, IsMulti, Group>;
cropWithEllipsis?: boolean;
data: Option;
innerProps: JSX.IntrinsicElements['div'];
isFocused: boolean;
isDisabled: boolean;
removeProps: JSX.IntrinsicElements['div'];
index: number;
}
export declare const multiValueCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, borderRadius, colors }, }: MultiValueProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const multiValueLabelCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { borderRadius, colors }, cropWithEllipsis, }: MultiValueProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const multiValueRemoveCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, borderRadius, colors }, isFocused, }: MultiValueProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export interface MultiValueGenericProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
children: ReactNode;
data: any;
innerProps: {
className?: string;
};
selectProps: Props<Option, IsMulti, Group>;
}
export declare const MultiValueGeneric: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ children, innerProps, }: MultiValueGenericProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export declare const MultiValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ children, innerProps, }: MultiValueGenericProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export declare const MultiValueLabel: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ children, innerProps, }: MultiValueGenericProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export interface MultiValueRemoveProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {
children?: ReactNode;
data: Option;
innerProps: JSX.IntrinsicElements['div'];
selectProps: Props<Option, IsMulti, Group>;
}
export declare function MultiValueRemove<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ children, innerProps }: MultiValueRemoveProps<Option, IsMulti, Group>): jsx.JSX.Element;
declare const MultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default MultiValue;

View File

@@ -0,0 +1,28 @@
/** @jsx jsx */
import { JSX, ReactNode, RefCallback } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export interface OptionProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered. */
children: ReactNode;
/** Inner ref to DOM Node */
innerRef: RefCallback<HTMLDivElement>;
/** props passed to the wrapping element for the group. */
innerProps: JSX.IntrinsicElements['div'];
/** Text to be displayed representing the option. */
label: string;
/** Type is used by the menu to determine whether this is an option or a group.
In the case of option this is always `option`. **/
type: 'option';
/** The data of the selected option. */
data: Option;
/** Whether the option is disabled. */
isDisabled: boolean;
/** Whether the option is focused. */
isFocused: boolean;
/** Whether the option is selected. */
isSelected: boolean;
}
export declare const optionCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isFocused, isSelected, theme: { spacing, colors }, }: OptionProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
declare const Option: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default Option;

View File

@@ -0,0 +1,15 @@
/** @jsx jsx */
import { JSX, ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export interface PlaceholderProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered. */
children: ReactNode;
/** props passed to the wrapping element for the group. */
innerProps: JSX.IntrinsicElements['div'];
isDisabled: boolean;
isFocused: boolean;
}
export declare const placeholderCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing, colors } }: PlaceholderProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
declare const Placeholder: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: PlaceholderProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default Placeholder;

View File

@@ -0,0 +1,17 @@
/** @jsx jsx */
import { JSX, ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export interface SingleValueProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered. */
children: ReactNode;
/** The data of the selected option rendered in the Single Value component. */
data: Option;
/** Props passed to the wrapping element for the group. */
innerProps: JSX.IntrinsicElements['div'];
/** Whether this is disabled. */
isDisabled: boolean;
}
export declare const css: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing, colors }, }: SingleValueProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
declare const SingleValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: SingleValueProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export default SingleValue;

View File

@@ -0,0 +1,33 @@
/** @jsx jsx */
import { JSX, ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export interface ContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** Whether the select is disabled. */
isDisabled: boolean;
isFocused: boolean;
/** The children to be rendered. */
children: ReactNode;
/** Inner props to be passed down to the container. */
innerProps: JSX.IntrinsicElements['div'];
}
export declare const containerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, isRtl, }: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel;
export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export interface ValueContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** Props to be passed to the value container element. */
innerProps?: JSX.IntrinsicElements['div'];
/** The children to be rendered. */
children: ReactNode;
isDisabled: boolean;
}
export declare const valueContainerCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ theme: { spacing }, isMulti, hasValue, selectProps: { controlShouldRenderValue }, }: ValueContainerProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const ValueContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ValueContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export interface IndicatorsContainerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
isDisabled: boolean;
/** The children to be rendered. */
children: ReactNode;
/** Props to be passed to the indicators container element. */
innerProps?: {};
}
export declare const indicatorsContainerCSS: () => CSSObjectWithLabel;
export declare const IndicatorsContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorsContainerProps<Option, IsMulti, Group>) => jsx.JSX.Element;

View File

@@ -0,0 +1,73 @@
import { ComponentType } from 'react';
import { ContainerProps, IndicatorsContainerProps, ValueContainerProps } from './containers';
import { ClearIndicatorProps, CrossIconProps, DownChevronProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps } from './indicators';
import { ControlProps } from './Control';
import { GroupHeadingProps, GroupProps } from './Group';
import { InputProps } from './Input';
import { MenuListProps, MenuPortalProps, MenuProps, NoticeProps } from './Menu';
import { MultiValueGenericProps, MultiValueProps, MultiValueRemove, MultiValueRemoveProps } from './MultiValue';
import { OptionProps } from './Option';
import { PlaceholderProps } from './Placeholder';
import { SingleValueProps } from './SingleValue';
import { GroupBase } from '../types';
export interface SelectComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
DropdownIndicator: ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>> | null;
DownChevron: ComponentType<DownChevronProps>;
CrossIcon: ComponentType<CrossIconProps>;
Group: ComponentType<GroupProps<Option, IsMulti, Group>>;
GroupHeading: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;
IndicatorsContainer: ComponentType<IndicatorsContainerProps<Option, IsMulti, Group>>;
IndicatorSeparator: ComponentType<IndicatorSeparatorProps<Option, IsMulti, Group>> | null;
Input: ComponentType<InputProps<Option, IsMulti, Group>>;
LoadingIndicator: ComponentType<LoadingIndicatorProps<Option, IsMulti, Group>>;
Menu: ComponentType<MenuProps<Option, IsMulti, Group>>;
MenuList: ComponentType<MenuListProps<Option, IsMulti, Group>>;
MenuPortal: ComponentType<MenuPortalProps<Option, IsMulti, Group>>;
LoadingMessage: ComponentType<NoticeProps<Option, IsMulti, Group>>;
NoOptionsMessage: ComponentType<NoticeProps<Option, IsMulti, Group>>;
MultiValue: ComponentType<MultiValueProps<Option, IsMulti, Group>>;
MultiValueContainer: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
MultiValueLabel: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
MultiValueRemove: ComponentType<MultiValueRemoveProps<Option, IsMulti, Group>>;
Option: ComponentType<OptionProps<Option, IsMulti, Group>>;
Placeholder: ComponentType<PlaceholderProps<Option, IsMulti, Group>>;
SelectContainer: ComponentType<ContainerProps<Option, IsMulti, Group>>;
SingleValue: ComponentType<SingleValueProps<Option, IsMulti, Group>>;
ValueContainer: ComponentType<ValueContainerProps<Option, IsMulti, Group>>;
}
export declare type SelectComponentsConfig<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Partial<SelectComponents<Option, IsMulti, Group>>;
export declare const components: {
ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
DownChevron: (props: DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
CrossIcon: (props: CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>({ children, innerProps, ...restProps }: NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>({ children, innerProps, ...restProps }: NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>(props: MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
MultiValueRemove: typeof MultiValueRemove;
Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
};
export declare type SelectComponentsGeneric = typeof components;
interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
components: SelectComponentsConfig<Option, IsMulti, Group>;
}
export declare const defaultComponents: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: Props<Option, IsMulti, Group>) => SelectComponentsGeneric;
export {};

View File

@@ -0,0 +1,51 @@
/** @jsx jsx */
import { JSX, ReactNode } from 'react';
import { jsx } from '@emotion/react';
import { CommonPropsAndClassName, CSSObjectWithLabel, GroupBase } from '../types';
export declare type CrossIconProps = JSX.IntrinsicElements['svg'] & {
size?: number;
};
export declare const CrossIcon: (props: CrossIconProps) => jsx.JSX.Element;
export declare type DownChevronProps = JSX.IntrinsicElements['svg'] & {
size?: number;
};
export declare const DownChevron: (props: DownChevronProps) => jsx.JSX.Element;
export interface DropdownIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered inside the indicator. */
children?: ReactNode;
/** Props that will be passed on to the children. */
innerProps: JSX.IntrinsicElements['div'];
/** The focused state of the select. */
isFocused: boolean;
isDisabled: boolean;
}
export declare const dropdownIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const DropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** The children to be rendered inside the indicator. */
children?: ReactNode;
/** Props that will be passed on to the children. */
innerProps: JSX.IntrinsicElements['div'];
/** The focused state of the select. */
isFocused: boolean;
}
export declare const clearIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, theme: { spacing: { baseUnit }, colors, }, }: DropdownIndicatorProps<Option, IsMulti, Group> | ClearIndicatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export interface IndicatorSeparatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
isDisabled: boolean;
isFocused: boolean;
innerProps?: JSX.IntrinsicElements['span'];
}
export declare const indicatorSeparatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, theme: { spacing: { baseUnit }, colors, }, }: IndicatorSeparatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export declare const IndicatorSeparator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: IndicatorSeparatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;
export declare const loadingIndicatorCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isFocused, size, theme: { colors, spacing: { baseUnit }, }, }: LoadingIndicatorProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
export interface LoadingIndicatorProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends CommonPropsAndClassName<Option, IsMulti, Group> {
/** Props that will be passed on to the children. */
innerProps: JSX.IntrinsicElements['div'];
/** The focused state of the select. */
isFocused: boolean;
isDisabled: boolean;
/** Set size of the container. */
size: number;
}
export declare const LoadingIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ innerProps, isRtl, size, ...restProps }: LoadingIndicatorProps<Option, IsMulti, Group>) => jsx.JSX.Element;

View File

@@ -0,0 +1,2 @@
export * from '../Creatable';
export { default } from '../Creatable';

View File

@@ -0,0 +1 @@
export declare const stripDiacritics: (str: string) => string;

View File

@@ -0,0 +1,14 @@
export interface FilterOptionOption<Option> {
readonly label: string;
readonly value: string;
readonly data: Option;
}
interface Config<Option> {
readonly ignoreCase?: boolean;
readonly ignoreAccents?: boolean;
readonly stringify?: (option: FilterOptionOption<Option>) => string;
readonly trim?: boolean;
readonly matchFrom?: 'any' | 'start';
}
export declare const createFilter: <Option>(config?: Config<Option> | undefined) => (option: FilterOptionOption<Option>, rawInput: string) => boolean;
export {};

View File

@@ -0,0 +1,29 @@
import Select from './Select';
import type { GroupBase } from './types';
export type { FilterOptionOption } from './filters';
import useStateManager from './useStateManager';
export { default } from './stateManager';
export { default as NonceProvider } from './NonceProvider';
export { mergeStyles } from './styles';
export { defaultTheme } from './theme';
export { createFilter } from './filters';
export { components } from './components';
export declare type SelectInstance<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Select<Option, IsMulti, Group>;
export type { StateManagerProps as Props } from './useStateManager';
export { useStateManager };
export type { SelectComponentsConfig } from './components';
export type { ContainerProps, IndicatorsContainerProps, ValueContainerProps, } from './components/containers';
export type { ControlProps } from './components/Control';
export type { GroupProps, GroupHeadingProps } from './components/Group';
export type { ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, } from './components/indicators';
export type { InputProps } from './components/Input';
export type { MenuListProps, MenuProps, NoticeProps } from './components/Menu';
export type { MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, } from './components/MultiValue';
export type { OptionProps } from './components/Option';
export type { PlaceholderProps } from './components/Placeholder';
export type { SingleValueProps } from './components/SingleValue';
export type { ThemeConfig } from './theme';
export type { ClassNamesConfig, StylesConfig } from './styles';
export * from './types';
export type { OptionContext, GuidanceContext, AriaGuidanceProps, AriaOnChangeProps, AriaOnFilterProps, AriaOnFocusProps, AriaLiveMessages, AriaGuidance, AriaOnChange, AriaOnFilter, AriaOnFocus, } from './accessibility';
export type { FormatOptionLabelContext, FormatOptionLabelMeta } from './Select';

View File

@@ -0,0 +1,5 @@
/** @jsx jsx */
import { JSX } from 'react';
import { jsx } from '@emotion/react';
declare const A11yText: (props: JSX.IntrinsicElements['span']) => jsx.JSX.Element;
export default A11yText;

View File

@@ -0,0 +1,6 @@
/** @jsx jsx */
import { JSX, Ref } from 'react';
import { jsx } from '@emotion/react';
export default function DummyInput({ innerRef, ...props }: JSX.IntrinsicElements['input'] & {
readonly innerRef: Ref<HTMLInputElement>;
}): jsx.JSX.Element;

View File

@@ -0,0 +1,7 @@
/** @jsx jsx */
import { FocusEventHandler, FunctionComponent } from 'react';
declare const RequiredInput: FunctionComponent<{
readonly name?: string;
readonly onFocus: FocusEventHandler<HTMLInputElement>;
}>;
export default RequiredInput;

View File

@@ -0,0 +1,14 @@
/** @jsx jsx */
import { jsx } from '@emotion/react';
import { ReactElement, RefCallback } from 'react';
interface Props {
readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
readonly lockEnabled: boolean;
readonly captureEnabled: boolean;
readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
}
export default function ScrollManager({ children, lockEnabled, captureEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: Props): jsx.JSX.Element;
export {};

View File

@@ -0,0 +1,4 @@
export { default as A11yText } from './A11yText';
export { default as DummyInput } from './DummyInput';
export { default as ScrollManager } from './ScrollManager';
export { default as RequiredInput } from './RequiredInput';

View File

@@ -0,0 +1,9 @@
interface Options {
readonly isEnabled: boolean;
readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
}
export default function useScrollCapture({ isEnabled, onBottomArrive, onBottomLeave, onTopArrive, onTopLeave, }: Options): (element: HTMLElement | null) => void;
export {};

View File

@@ -0,0 +1,6 @@
interface Options {
readonly isEnabled: boolean;
readonly accountForScrollbars?: boolean;
}
export default function useScrollLock({ isEnabled, accountForScrollbars, }: Options): (element: HTMLElement | null) => void;
export {};

View File

@@ -0,0 +1,8 @@
import { ReactElement, RefAttributes } from 'react';
import { GroupBase } from './types';
import Select from './Select';
import type { StateManagerProps } from './useStateManager';
export type { StateManagerProps };
declare type StateManagedSelect = <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: StateManagerProps<Option, IsMulti, Group> & RefAttributes<Select<Option, IsMulti, Group>>) => ReactElement;
declare const StateManagedSelect: StateManagedSelect;
export default StateManagedSelect;

View File

@@ -0,0 +1,68 @@
import { ContainerProps, IndicatorsContainerProps, ValueContainerProps } from './components/containers';
import { ControlProps } from './components/Control';
import { GroupHeadingProps, GroupProps } from './components/Group';
import { ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps } from './components/indicators';
import { InputProps } from './components/Input';
import { PlaceholderProps } from './components/Placeholder';
import { OptionProps } from './components/Option';
import { NoticeProps, MenuProps, MenuListProps, PortalStyleArgs } from './components/Menu';
import { SingleValueProps } from './components/SingleValue';
import { MultiValueProps } from './components/MultiValue';
import { CSSObjectWithLabel, GroupBase } from './types';
export interface StylesProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
clearIndicator: ClearIndicatorProps<Option, IsMulti, Group>;
container: ContainerProps<Option, IsMulti, Group>;
control: ControlProps<Option, IsMulti, Group>;
dropdownIndicator: DropdownIndicatorProps<Option, IsMulti, Group>;
group: GroupProps<Option, IsMulti, Group>;
groupHeading: GroupHeadingProps<Option, IsMulti, Group>;
indicatorsContainer: IndicatorsContainerProps<Option, IsMulti, Group>;
indicatorSeparator: IndicatorSeparatorProps<Option, IsMulti, Group>;
input: InputProps<Option, IsMulti, Group>;
loadingIndicator: LoadingIndicatorProps<Option, IsMulti, Group>;
loadingMessage: NoticeProps<Option, IsMulti, Group>;
menu: MenuProps<Option, IsMulti, Group>;
menuList: MenuListProps<Option, IsMulti, Group>;
menuPortal: PortalStyleArgs;
multiValue: MultiValueProps<Option, IsMulti, Group>;
multiValueLabel: MultiValueProps<Option, IsMulti, Group>;
multiValueRemove: MultiValueProps<Option, IsMulti, Group>;
noOptionsMessage: NoticeProps<Option, IsMulti, Group>;
option: OptionProps<Option, IsMulti, Group>;
placeholder: PlaceholderProps<Option, IsMulti, Group>;
singleValue: SingleValueProps<Option, IsMulti, Group>;
valueContainer: ValueContainerProps<Option, IsMulti, Group>;
}
export declare const defaultStyles: {
[K in keyof StylesProps<any, any, any>]: (props: StylesProps<unknown, boolean, GroupBase<unknown>>[K], unstyled: boolean) => CSSObjectWithLabel;
};
export declare type StylesConfig<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = {
[K in keyof StylesProps<Option, IsMulti, Group>]?: (base: CSSObjectWithLabel, props: StylesProps<Option, IsMulti, Group>[K]) => CSSObjectWithLabel;
};
export declare type ClassNamesConfig<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = {
[K in keyof StylesProps<Option, IsMulti, Group>]?: (props: StylesProps<Option, IsMulti, Group>[K]) => string;
};
export declare function mergeStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(source: StylesConfig<Option, IsMulti, Group>, target?: StylesConfig<Option, IsMulti, Group>): {
clearIndicator?: ((base: CSSObjectWithLabel, props: ClearIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
container?: ((base: CSSObjectWithLabel, props: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
control?: ((base: CSSObjectWithLabel, props: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
dropdownIndicator?: ((base: CSSObjectWithLabel, props: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
group?: ((base: CSSObjectWithLabel, props: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
groupHeading?: ((base: CSSObjectWithLabel, props: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
indicatorsContainer?: ((base: CSSObjectWithLabel, props: IndicatorsContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
indicatorSeparator?: ((base: CSSObjectWithLabel, props: IndicatorSeparatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
input?: ((base: CSSObjectWithLabel, props: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
loadingIndicator?: ((base: CSSObjectWithLabel, props: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
loadingMessage?: ((base: CSSObjectWithLabel, props: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
menu?: ((base: CSSObjectWithLabel, props: MenuProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
menuList?: ((base: CSSObjectWithLabel, props: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
menuPortal?: ((base: CSSObjectWithLabel, props: PortalStyleArgs) => CSSObjectWithLabel) | undefined;
multiValue?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
multiValueLabel?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
multiValueRemove?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
noOptionsMessage?: ((base: CSSObjectWithLabel, props: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
option?: ((base: CSSObjectWithLabel, props: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
placeholder?: ((base: CSSObjectWithLabel, props: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
singleValue?: ((base: CSSObjectWithLabel, props: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
valueContainer?: ((base: CSSObjectWithLabel, props: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
};

View File

@@ -0,0 +1,27 @@
import { Theme } from './types';
export declare const colors: {
primary: string;
primary75: string;
primary50: string;
primary25: string;
danger: string;
dangerLight: string;
neutral0: string;
neutral5: string;
neutral10: string;
neutral20: string;
neutral30: string;
neutral40: string;
neutral50: string;
neutral60: string;
neutral70: string;
neutral80: string;
neutral90: string;
};
export declare const spacing: {
baseUnit: number;
controlHeight: number;
menuGutter: number;
};
export declare const defaultTheme: Theme;
export declare type ThemeConfig = Theme | ((theme: Theme) => Theme);

View File

@@ -0,0 +1,128 @@
import { CSSObject } from '@emotion/react';
import { Props } from './Select';
import { StylesProps } from './styles';
export interface GroupBase<Option> {
readonly options: readonly Option[];
readonly label?: string;
}
export declare type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly (Option | Group)[];
export declare type Options<Option> = readonly Option[];
export declare type SingleValue<Option> = Option | null;
export declare type MultiValue<Option> = readonly Option[];
export declare type PropsValue<Option> = MultiValue<Option> | SingleValue<Option>;
export declare type OnChangeValue<Option, IsMulti extends boolean> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;
export interface Colors {
primary: string;
primary75: string;
primary50: string;
primary25: string;
danger: string;
dangerLight: string;
neutral0: string;
neutral5: string;
neutral10: string;
neutral20: string;
neutral30: string;
neutral40: string;
neutral50: string;
neutral60: string;
neutral70: string;
neutral80: string;
neutral90: string;
}
export interface ThemeSpacing {
baseUnit: number;
controlHeight: number;
menuGutter: number;
}
export interface Theme {
borderRadius: number;
colors: Colors;
spacing: ThemeSpacing;
}
export declare type ClassNamesState = {
[key: string]: boolean;
};
export declare type CX = (state: ClassNamesState, ...classNames: (string | undefined)[]) => string;
export declare type GetStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = <Key extends keyof StylesProps<Option, IsMulti, Group>>(propertyName: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => CSSObjectWithLabel;
export interface CommonProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
clearValue: () => void;
cx: CX;
/**
Get the styles of a particular part of the select. Pass in the name of the
property as the first argument, and the current props as the second argument.
See the `styles` object for the properties available.
*/
getStyles: GetStyles<Option, IsMulti, Group>;
getClassNames: <Key extends keyof StylesProps<Option, IsMulti, Group>>(propertyName: Key, props: StylesProps<Option, IsMulti, Group>[Key]) => string | undefined;
getValue: () => Options<Option>;
hasValue: boolean;
isMulti: boolean;
isRtl: boolean;
options: OptionsOrGroups<Option, Group>;
selectOption: (newValue: Option) => void;
selectProps: Props<Option, IsMulti, Group>;
setValue: (newValue: OnChangeValue<Option, IsMulti>, action: SetValueAction, option?: Option) => void;
theme: Theme;
}
export interface CommonPropsAndClassName<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends CommonProps<Option, IsMulti, Group> {
className?: string | undefined;
}
export interface ActionMetaBase<Option> {
option?: Option | undefined;
removedValue?: Option;
removedValues?: Options<Option>;
name?: string;
}
export interface SelectOptionActionMeta<Option> extends ActionMetaBase<Option> {
action: 'select-option';
option: Option | undefined;
name?: string;
}
export interface DeselectOptionActionMeta<Option> extends ActionMetaBase<Option> {
action: 'deselect-option';
option: Option | undefined;
name?: string;
}
export interface RemoveValueActionMeta<Option> extends ActionMetaBase<Option> {
action: 'remove-value';
removedValue: Option;
name?: string;
}
export interface PopValueActionMeta<Option> extends ActionMetaBase<Option> {
action: 'pop-value';
removedValue: Option;
name?: string;
}
export interface ClearActionMeta<Option> extends ActionMetaBase<Option> {
action: 'clear';
removedValues: Options<Option>;
name?: string;
}
export interface CreateOptionActionMeta<Option> extends ActionMetaBase<Option> {
action: 'create-option';
name?: string;
option: Option;
}
export interface InitialInputFocusedActionMeta<Option, IsMulti extends boolean> extends ActionMetaBase<Option> {
action: 'initial-input-focus';
value: OnChangeValue<Option, IsMulti>;
options?: Options<Option>;
}
export declare type ActionMeta<Option> = SelectOptionActionMeta<Option> | DeselectOptionActionMeta<Option> | RemoveValueActionMeta<Option> | PopValueActionMeta<Option> | ClearActionMeta<Option> | CreateOptionActionMeta<Option>;
export declare type SetValueAction = 'select-option' | 'deselect-option';
export declare type InputAction = 'set-value' | 'input-change' | 'input-blur' | 'menu-close';
export interface InputActionMeta {
action: InputAction;
/** The previous value of the search input. */
prevInputValue: string;
}
export declare type MenuPlacement = 'auto' | 'bottom' | 'top';
export declare type CoercedMenuPlacement = 'bottom' | 'top';
export declare type MenuPosition = 'absolute' | 'fixed';
export declare type FocusDirection = 'up' | 'down' | 'pageup' | 'pagedown' | 'first' | 'last';
export declare type GetOptionLabel<Option> = (option: Option) => string;
export declare type GetOptionValue<Option> = (option: Option) => string;
export declare type CSSObjectWithLabel = CSSObject & {
label?: string;
};

View File

@@ -0,0 +1,28 @@
import { StateManagerProps } from './useStateManager';
import { GroupBase, OptionsOrGroups } from './types';
declare type AsyncManagedPropKeys = 'options' | 'isLoading' | 'onInputChange' | 'filterOption';
export interface AsyncAdditionalProps<Option, Group extends GroupBase<Option>> {
/**
* The default set of options to show before the user starts searching. When
* set to `true`, the results for loadOptions('') will be autoloaded.
*/
defaultOptions?: OptionsOrGroups<Option, Group> | boolean;
/**
* If cacheOptions is truthy, then the loaded data will be cached. The cache
* will remain until `cacheOptions` changes value.
*/
cacheOptions?: any;
/**
* Function that returns a promise, which is the set of options to be used
* once the promise resolves.
*/
loadOptions?: (inputValue: string, callback: (options: OptionsOrGroups<Option, Group>) => void) => Promise<OptionsOrGroups<Option, Group>> | void;
/**
* Will cause the select to be displayed in the loading state, even if the
* Async select is not currently waiting for loadOptions to resolve
*/
isLoading?: boolean;
}
export declare type AsyncProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = StateManagerProps<Option, IsMulti, Group> & AsyncAdditionalProps<Option, Group>;
export default function useAsync<Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>({ defaultOptions: propsDefaultOptions, cacheOptions, loadOptions: propsLoadOptions, options: propsOptions, isLoading: propsIsLoading, onInputChange: propsOnInputChange, filterOption, ...restSelectProps }: AsyncProps<Option, IsMulti, Group> & AdditionalProps): StateManagerProps<Option, IsMulti, Group> & Omit<AdditionalProps, keyof AsyncAdditionalProps<Option, Group> | AsyncManagedPropKeys>;
export {};

View File

@@ -0,0 +1,41 @@
import { ReactNode } from 'react';
import { PublicBaseSelectProps } from './Select';
import { GetOptionLabel, GetOptionValue, GroupBase, Options, OptionsOrGroups } from './types';
export interface Accessors<Option> {
getOptionValue: GetOptionValue<Option>;
getOptionLabel: GetOptionLabel<Option>;
}
export interface CreatableAdditionalProps<Option, Group extends GroupBase<Option>> {
/**
* Allow options to be created while the `isLoading` prop is true. Useful to
* prevent the "create new ..." option being displayed while async results are
* still being loaded.
*/
allowCreateWhileLoading?: boolean;
/** Sets the position of the createOption element in your options list. Defaults to 'last' */
createOptionPosition?: 'first' | 'last';
/**
* Gets the label for the "create new ..." option in the menu. Is given the
* current input value.
*/
formatCreateLabel?: (inputValue: string) => ReactNode;
/**
* Determines whether the "create new ..." option should be displayed based on
* the current input value, select value and options array.
*/
isValidNewOption?: (inputValue: string, value: Options<Option>, options: OptionsOrGroups<Option, Group>, accessors: Accessors<Option>) => boolean;
/**
* Returns the data for the new option when it is created. Used to display the
* value, and is passed to `onChange`.
*/
getNewOptionData?: (inputValue: string, optionLabel: ReactNode) => Option;
/**
* If provided, this will be called with the input value when a new option is
* created, and `onChange` will **not** be called. Use this when you need more
* control over what happens when new options are created.
*/
onCreateOption?: (inputValue: string) => void;
}
declare type BaseCreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = PublicBaseSelectProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group>;
export default function useCreatable<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ allowCreateWhileLoading, createOptionPosition, formatCreateLabel, isValidNewOption, getNewOptionData, onCreateOption, options: propsOptions, onChange: propsOnChange, ...restSelectProps }: BaseCreatableProps<Option, IsMulti, Group>): PublicBaseSelectProps<Option, IsMulti, Group>;
export {};

View File

@@ -0,0 +1,12 @@
import { GroupBase, PropsValue } from './types';
import { PublicBaseSelectProps } from './Select';
declare type StateManagedPropKeys = 'inputValue' | 'menuIsOpen' | 'onChange' | 'onInputChange' | 'onMenuClose' | 'onMenuOpen' | 'value';
declare type SelectPropsWithOptionalStateManagedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<PublicBaseSelectProps<Option, IsMulti, Group>, StateManagedPropKeys> & Partial<PublicBaseSelectProps<Option, IsMulti, Group>>;
export interface StateManagerAdditionalProps<Option> {
defaultInputValue?: string;
defaultMenuIsOpen?: boolean;
defaultValue?: PropsValue<Option>;
}
export declare type StateManagerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = SelectPropsWithOptionalStateManagedProps<Option, IsMulti, Group> & StateManagerAdditionalProps<Option>;
export default function useStateManager<Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>({ defaultInputValue, defaultMenuIsOpen, defaultValue, inputValue: propsInputValue, menuIsOpen: propsMenuIsOpen, onChange: propsOnChange, onInputChange: propsOnInputChange, onMenuClose: propsOnMenuClose, onMenuOpen: propsOnMenuOpen, value: propsValue, ...restSelectProps }: StateManagerProps<Option, IsMulti, Group> & AdditionalProps): PublicBaseSelectProps<Option, IsMulti, Group> & Omit<AdditionalProps, keyof StateManagerAdditionalProps<Option> | StateManagedPropKeys>;
export {};

View File

@@ -0,0 +1,44 @@
import type { StylesProps } from './styles';
import type { ClassNamesState, CommonPropsAndClassName, GroupBase, InputActionMeta, MultiValue, OnChangeValue, Options, PropsValue, SingleValue } from './types';
export declare const noop: () => void;
export declare const emptyString: () => string;
export declare function classNames(prefix?: string | null, state?: ClassNamesState, ...classNameList: string[]): string;
export declare const cleanValue: <Option>(value: PropsValue<Option>) => Options<Option>;
export declare const cleanCommonProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>(props: Partial<CommonPropsAndClassName<Option, IsMulti, Group>> & AdditionalProps) => Omit<AdditionalProps, keyof CommonPropsAndClassName<Option, IsMulti, Group>>;
export declare const getStyleProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, Key extends keyof StylesProps<Option, IsMulti, Group>>(props: Pick<CommonPropsAndClassName<Option, IsMulti, Group>, "className" | "cx" | "getStyles" | "getClassNames"> & StylesProps<Option, IsMulti, Group>[Key], name: Key, classNamesState?: ClassNamesState | undefined) => {
css: import("./types").CSSObjectWithLabel;
className: string;
};
export declare function handleInputChange(inputValue: string, actionMeta: InputActionMeta, onInputChange?: (newValue: string, actionMeta: InputActionMeta) => string | void): string;
export declare function isDocumentElement(el: HTMLElement | typeof window): el is typeof window;
export declare function normalizedHeight(el: HTMLElement | typeof window): number;
export declare function getScrollTop(el: HTMLElement | typeof window): number;
export declare function scrollTo(el: HTMLElement | typeof window, top: number): void;
export declare function getScrollParent(element: HTMLElement): HTMLElement;
export declare function animatedScrollTo(element: HTMLElement | typeof window, to: number, duration?: number, callback?: (element: HTMLElement | typeof window) => void): void;
export declare function scrollIntoView(menuEl: HTMLElement, focusedEl: HTMLElement): void;
export declare function getBoundingClientObj(element: HTMLElement): {
bottom: number;
height: number;
left: number;
right: number;
top: number;
width: number;
};
export interface RectType {
left: number;
right: number;
bottom: number;
height: number;
width: number;
}
export declare function toKey(str: string): string;
export declare function isTouchCapable(): boolean;
export declare function isMobileDevice(): boolean;
export declare const supportsPassiveEvents: boolean;
export declare function notNullish<T>(item: T | null | undefined): item is T;
export declare function isArray<T>(arg: unknown): arg is readonly T[];
export declare function valueTernary<Option, IsMulti extends boolean>(isMulti: IsMulti | undefined, multiValue: MultiValue<Option>, singleValue: SingleValue<Option>): OnChangeValue<Option, IsMulti>;
export declare function singleValueAsValue<Option, IsMulti extends boolean>(singleValue: SingleValue<Option>): OnChangeValue<Option, IsMulti>;
export declare function multiValueAsValue<Option, IsMulti extends boolean>(multiValue: MultiValue<Option>): OnChangeValue<Option, IsMulti>;
export declare const removeProps: <Props extends object, K extends string[]>(propsObj: Props, ...properties: K) => Omit<Props, K[number]>;