DropdownPopupContent
ts
export function DropdownPopupContent<T = any>(;
DropdownContent
ts
export function DropdownContent<T = any>(;
useDropdownService
ts
export function useDropdownService<T = any>(
options: DropdownOption<T>[],
value: T | T[] | undefined,
onChange: (value: T | T[]) => void,
config: DropdownConfig<T> =;
DropdownOption
ts
// Types
export type DropdownOption<T = any> = {
value: T;
label: string;
disabled?: boolean;
[key: string]: any;
};
SortDirection
ts
export type SortDirection = 'asc' | 'desc' | 'none';
FilterFunction
ts
export type FilterFunction<T = any> = (
option: DropdownOption<T>,
searchValue: string,
) => boolean;
SortFunction
ts
export type SortFunction<T = any> = (
a: DropdownOption<T>,
b: DropdownOption<T>,
direction: SortDirection,
) => number;
DropdownConfig
ts
export type DropdownConfig<T = any> = {
// Search configuration
search?: boolean;
searchPlaceholder?: string;
filterFunction?: FilterFunction<T>;
// Sorting configuration
sortDirection?: SortDirection;
sortFunction?: SortFunction<T>;
// Behavior configuration
closeOnClickOutside?: boolean;
autoFocus?: boolean;
multiSelect?: boolean;
autocomplete?: boolean;
// Portal configuration
portalTarget?: HTMLElement | null;
// Accessibility
ariaLabel?: string;
ariaLabelledBy?: string;
ariaDescribedBy?: string;
// Layout configuration
maxHeight?: number;
theme?: string | null;
// Custom class for popup
popupClassName?: string;
};
DropdownProps
ts
// Types
export type DropdownProps<T = any> = {
// Core props
source: DropdownOption<T>[];
value?: T | T[];
placeholder?: string;
disabled?: boolean;
name?: string;
id?: string;
className?: string;
style?: JSX.CSSProperties;
// Configuration
config?: DropdownConfig<T>;
onChange?: (value: T | T[]) => void;
// Templates
renderOption?: (
h: HyperFunc<VNode>,
option: DropdownOption<T>,
isSelected: boolean,
) => ComponentChildren;
renderPlaceholder?: (
h: HyperFunc<VNode>,
placeholder: string,
children: ComponentChildren,
) => ComponentChildren;
/**
* Render the selected value
*/
renderSelectedValue?: (
h: HyperFunc<VNode>,
selectedOptions: DropdownOption<T>[],
children: ComponentChildren,
) => ComponentChildren;
renderNoResults?: (h: HyperFunc<VNode>) => ComponentChildren;
};
Dropdown
Dropdown component
ts
export function Dropdown<T = any>(;
defineDropdown
Define the dropdown component
ts
defineDropdown: (el: HTMLElement, props: DropdownProps) => void;
DropdownPopup
Dropdown popup component
@param triggerRef - The reference to the trigger element * @param children - The children of the dropdown * @param portalTarget - The target element to render the dropdown * @param theme - The theme of the dropdown * @param dropdownMenuId - The id of the dropdown menu
ts
export function DropdownPopup(;