@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
110 lines (109 loc) • 3.59 kB
text/typescript
import { IconProps } from "../Icon/type.mjs";
import "../Icon/index.mjs";
import { CSSProperties, ReactNode } from "react";
//#region src/LobeSelect/type.d.ts
type LobeSelectSize = 'large' | 'middle' | 'small';
type LobeSelectVariant = 'borderless' | 'filled' | 'outlined';
type LobeSelectBehaviorVariant = 'default' | 'item-aligned';
/**
* Variant for how selected items are indicated in the popup.
* - `check`: Display a checkmark icon next to selected items (default)
* - `bold`: Display selected items with bold text, no checkmark
*/
type LobeSelectIndicatorVariant = 'check' | 'bold';
interface LobeSelectOption<Value = string> {
className?: string;
disabled?: boolean;
label: ReactNode;
style?: CSSProperties;
title?: string;
value: Value;
}
interface LobeSelectOptionGroup<Value = string> {
disabled?: boolean;
label: ReactNode;
options: LobeSelectOption<Value>[];
}
type LobeSelectOptions<Value = string> = Array<LobeSelectOption<Value> | LobeSelectOptionGroup<Value>>;
interface LobeSelectClassNames {
clear?: string;
dropdown?: string;
empty?: string;
group?: string;
groupLabel?: string;
icon?: string;
item?: string;
itemIndicator?: string;
itemText?: string;
list?: string;
option?: string;
popup?: string;
prefix?: string;
root?: string;
search?: string;
suffix?: string;
trigger?: string;
value?: string;
}
interface LobeSelectProps<Value = string> {
allowClear?: boolean;
autoFocus?: boolean;
/**
* Behavior variant for Base UI Select.
*
* - `default`: regular dropdown positioning (alignItemWithTrigger=false, modal=false)
* - `item-aligned`: aligns the selected item with trigger and uses modal=true
* @default 'default'
*/
behaviorVariant?: LobeSelectBehaviorVariant;
className?: string;
classNames?: LobeSelectClassNames;
defaultOpen?: boolean;
defaultValue?: Value | Value[] | null;
disabled?: boolean;
id?: string;
labelRender?: (option: LobeSelectOption<Value>) => ReactNode;
/**
* 设置弹窗滚动高度
* @default 256
*/
listHeight?: number;
listItemHeight?: number;
loading?: boolean;
mode?: 'multiple' | 'tags';
name?: string;
onChange?: (value: Value | Value[] | null, option?: LobeSelectOption<Value> | LobeSelectOption<Value>[]) => void;
onOpenChange?: (open: boolean) => void;
onSelect?: (value: Value, option?: LobeSelectOption<Value>) => void;
open?: boolean;
optionRender?: (option: LobeSelectOption<Value>, info: {
index: number;
}) => ReactNode;
options?: LobeSelectOptions<Value>;
placeholder?: ReactNode;
popupClassName?: string;
popupMatchSelectWidth?: boolean | number;
prefix?: ReactNode | IconProps['icon'];
readOnly?: boolean;
required?: boolean;
/**
* Variant for how selected items are indicated in the popup.
* - `check`: Display a checkmark icon next to selected items (default)
* - `bold`: Display selected items with bold text, no checkmark
* @default 'check'
*/
selectedIndicatorVariant?: LobeSelectIndicatorVariant;
shadow?: boolean;
showSearch?: boolean;
size?: LobeSelectSize;
style?: CSSProperties;
suffixIcon?: IconProps['icon'] | ReactNode;
suffixIconProps?: Omit<IconProps, 'icon'>;
tokenSeparators?: string[];
value?: Value | Value[] | null;
variant?: LobeSelectVariant;
virtual?: boolean;
}
//#endregion
export { LobeSelectBehaviorVariant, LobeSelectClassNames, LobeSelectIndicatorVariant, LobeSelectOption, LobeSelectOptionGroup, LobeSelectOptions, LobeSelectProps, LobeSelectSize, LobeSelectVariant };
//# sourceMappingURL=type.d.mts.map