# Dropdown
URL: https://pro.rv-grid.com/api/dropdown/
Source: src/content/docs/api/dropdown.md
### `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> =;
```

---

### `DropdownRenderable`

```ts
export type DropdownRenderable = any;
```

---

### `DropdownVNode`

```ts
export type DropdownVNode = any;
```

---

### `DropdownStyle`

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

---

### `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;
    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`

```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?: 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

```ts
export function Dropdown<T = any>(;
```

---

### `defineDropdown`

Define the dropdown component

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

---

### `destroyDropdown`

```ts
destroyDropdown: (el: HTMLElement) => 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(;
```
