Dropdown

DropdownPopupContent

export function DropdownPopupContent<T = any>(;

---

DropdownContent

export function DropdownContent<T = any>(;

---

useDropdownService

export function useDropdownService<T = any>(
  options: DropdownOption<T>[],
  value: T | T[] | undefined,
  onChange: (value: T | T[]) => void,
  config: DropdownConfig<T> =;

---

DropdownOption

// Types
export type DropdownOption<T =  any> = {
    value: T;
    label: string;
    disabled?: boolean;
    [key: string]: any;
  };

---

SortDirection

export type SortDirection =  'asc' | 'desc' | 'none';

---

FilterFunction

export type FilterFunction<T =  any> = (
    option: DropdownOption<T>,
    searchValue: string,
  ) => boolean;

---

SortFunction

export type SortFunction<T =  any> = (
    a: DropdownOption<T>,
    b: DropdownOption<T>,
    direction: SortDirection,
  ) => number;

---

DropdownConfig

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

// 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

export function Dropdown<T = any>(;

---

defineDropdown

Define the dropdown component

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

export function DropdownPopup(;