Dropdown

DropdownPopupContent

export function DropdownPopupContent<T = any>({
  options,
  value,
  onChange,
  config,
  multiSelect,
  search,
  searchPlaceholder,
  listboxId,
  searchId,
  renderOption,
  renderNoResults,
  onClose,
  theme,
}: {
  options: DropdownOption<T>[];
  value: T | T[] | undefined;
  onChange: (value: T | T[]) => void;
  config: DropdownConfig<T>;
  multiSelect: boolean;
  search: boolean;
  searchPlaceholder: string;
  listboxId: string;
  searchId: string;
  renderOption?: (
    h: any,
    option: DropdownOption<T>,
    isSelected: boolean,
  ) => ComponentChildren;
  renderNoResults?: (h: any) => ComponentChildren;
  onClose: (focusNext?: boolean) => void;
  theme?: string | null;
});

---

DropdownContent

export function DropdownContent<T = any>({
  options,
  filteredOptions,
  multiSelect,
  focusedIndex,
  selectedOptions,
  onKeyDown,
  onSelect,
  onFocusChange,
  renderOption,
  renderNoResults,
  dropdownListRef,
  theme,
  optionIdPrefix,
}: DropdownContentProps<T>);

---

useDropdownService

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

---

DropdownRenderable

export type DropdownRenderable = any;

---

DropdownVNode

export type DropdownVNode = any;

---

DropdownStyle

export type DropdownStyle = string | Record<string, string | number | undefined>;

---

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;
    autoOpen?: boolean;
    multiSelect?: boolean;
    autocomplete?: boolean;
    /** Initial text for searchable dropdowns, used by grid quick-edit. */
    initialSearch?: string;
    /** Close the dropdown when Tab is pressed inside the open popup. */
    closeOnTab?: 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?: DropdownStyle;

  // Configuration
  config?: DropdownConfig<T>;

  onChange?: (value: T | T[]) => void;
  onClose?: (focusNext?: boolean) => void;
  // Templates
  renderOption?: (
    h: HyperFunc<DropdownVNode>,
    option: DropdownOption<T>,
    isSelected: boolean,
  ) => DropdownRenderable;
  renderPlaceholder?: (
    h: HyperFunc<DropdownVNode>,
    placeholder: string,
    children: DropdownRenderable,
  ) => DropdownRenderable;
  /**
   * Render the selected value
   */
  renderSelectedValue?: (
    h: HyperFunc<DropdownVNode>,
    selectedOptions: DropdownOption<T>[],
    children: DropdownRenderable,
  ) => DropdownRenderable;
  renderNoResults?: (h: HyperFunc<DropdownVNode>) => DropdownRenderable;
};

---

Dropdown

Dropdown component

export function Dropdown<T = any>({
  source,
  value,
  onChange,
  placeholder = 'Select an option',
  disabled = false,
  name,
  id,
  className = '',
  style,
  config = {},
  renderOption,
  renderPlaceholder,
  renderSelectedValue,
  renderNoResults,
  onClose,
}: DropdownProps<T>): any;

---

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({
  triggerRef,
  children,
  portalTarget,
  theme,
  dropdownMenuId,
  popupClassName,
  closeOnClickOutside = false,
  onClose,
  align = 'start',
  matchTriggerWidth = false,
}: DropdownPopupProps);

---

DropdownPopupProps

// DropdownPopup component - Handles positioning and portal rendering
export type DropdownPopupProps = {
  triggerRef: RefObject<HTMLDivElement>;
  children: ComponentChildren;
  portalTarget?: HTMLElement | null;
  theme?: string | null;
  dropdownMenuId?: string;
  popupClassName?: string;
  closeOnClickOutside?: boolean;
  onClose?: () => void;
  align?: 'start' | 'end';
  matchTriggerWidth?: boolean;
};

---

defineDropdown

Define the dropdown component

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

---

destroyDropdown

destroyDropdown: (el: HTMLElement) => void;