@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
74 lines (73 loc) • 3.75 kB
TypeScript
import React from 'react';
import { type BoxProps } from '../Box/Box';
import { type BaseActiveDropdownItemProps } from './BaseActiveDropdownItem';
import './BaseDropdownAnimation.css';
import { type BaseDropdownGroup, type BaseDropdownOption } from './BaseDropdown.utils';
export type { BaseDropdownGroup, BaseDropdownOption, } from './BaseDropdown.utils';
export { NO_SELECTION_VALUE } from './BaseDropdown.utils';
/** gap between the icon and the label of the item */
export declare const HORIZONTAL_ICON_GAP = "4";
/** safe spacing, ie. padding, on the left & right of the active item and dropdown item */
export declare const HORIZONTAL_OUTER_PADDING_X = "12";
export interface BaseDropdownProps<T = string, G extends string = never> {
value: string;
activeItemProps?: Partial<Pick<BaseActiveDropdownItemProps, 'iconComponent' | 'label' | 'color' | 'alwaysVisibleLabel' | 'tagComponent' | 'tagPosition' | 'background' | 'labelStyle' | 'compactIcon'>>;
/**
* List of groups to show and the corresponding labels, in the expected order.
*
* _Defaults to ungrouped dropdown behavior_
*/
groups?: BaseDropdownGroup<T, G>[];
/**
* Additional group displayed after configured groups (only if there are non-empty groups).
* - "all": display all options (grouped options will effectively be shown twice in total)
* - "others": display only ungrouped options
*
* _Defaults to "others"_
*/
additionalGroup?: 'all' | 'others';
/**
* Label for the {@link additionalGroup}.
*
* Shows only if the additional group is not empty.
*/
additionalGroupLabel?: string;
/**
* If specified, show an "Unselect" option with value {@link NO_SELECTION_VALUE} above other options/groups
*
* _Defaults to `false`_
*/
allowUnselect?: boolean;
/**
* Label for {@link allowUnselect}
*/
unselectLabel?: string;
options: BaseDropdownOption<T>[];
onOpen?: () => void;
onOptionSelected?: (item: BaseDropdownOption<T>) => void;
renderDropdownOption: (item: BaseDropdownOption<T>, isSelected: boolean) => React.ReactNode;
searchableOptions?: boolean;
searchPlaceholder?: string;
placeholder?: string;
resetSearchOnClose?: boolean;
openToTopOnMobile?: boolean;
alwaysOpenToTop?: boolean;
openDropdownFullWidth?: boolean;
preloadIconUrls?: string[];
horizontalIconGap?: BoxProps['gap'];
openDropdownBackgroundColor?: BoxProps['background'];
size?: BaseActiveDropdownItemProps['size'];
isLoading?: boolean;
label?: string;
/**
* If provided, the dropdown will be scrollable and the max height will be set to the provided value.
* This is useful for dropdowns that have a lot of options and normally would be too tall to fit in the modal and overflow beyond the modal is not supported right now.
* This values should be set so that the last dropdown item is partially visible to indicate that there are more options.
*/
maxDropdownHeight?: number;
dropdownWidth?: number;
dropdownAlign?: 'start' | 'center' | 'end';
testId?: string;
}
declare function BaseDropdown<T extends string = string, G extends string = never>({ activeItemProps, value, options, groups, additionalGroup, additionalGroupLabel, allowUnselect, unselectLabel, onOptionSelected, onOpen, renderDropdownOption, searchableOptions, searchPlaceholder, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, isLoading, preloadIconUrls, horizontalIconGap, openDropdownBackgroundColor, size, label, maxDropdownHeight, dropdownWidth, dropdownAlign, testId, }: BaseDropdownProps<T, G>): React.JSX.Element;
export default BaseDropdown;