Skip to content
ts
export function DropdownPopupContent<T = any>(;

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> =;

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;

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;
  };

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 component

ts
export function Dropdown<T = any>(;

defineDropdown

Define the dropdown component

ts
defineDropdown: (el: HTMLElement, props: DropdownProps) => void;

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(;