@octopusdeploy/design-system-components/dist/src/components/Form/Select/DropdownList.d.ts

The design systems component library.

import type { ReactElement } from "react";
import type { PopoverPlacement } from "../../Popover";
import type { AsyncList } from "./AsyncList";
import { SelectOption } from "./SelectOption";
export declare const dropdownListWidths: readonly ["default", "wide"];
export type DropdownListWidth = (typeof dropdownListWidths)[number];
export interface DropdownListProps<T> {
    /**
     * The items to show in the dropdown. A static array, or an {@link AsyncList} for server-backed lists.
     */
    items: T[] | AsyncList<T>;
    /**
     * Maps an item to the option shown in the list.
     */
    getOption: (item: T) => SelectOption;
    /**
     * Called with the chosen option when the user selects one.
     */
    onItemSelected: (option: SelectOption) => void;
    /**
     * Whether to show a filter input above the list.
     * @default true
     */
    allowFilter?: boolean;
    /**
     * Sort the items alphanumerically before displaying. Has no effect on {@link AsyncList} items.
     * @default false
     */
    sortItems?: boolean;
    /**
     * Where the dropdown is positioned relative to the trigger.
     * @default "bottom-start"
     */
    placement?: PopoverPlacement;
    /**
     * Accessible name for the dropdown dialog and its filter/list.
     */
    accessibleName: string;
    /**
     * Icon shown in the trigger button.
     */
    triggerIcon: ReactElement;
    /**
     * Accessible name for the trigger button.
     */
    triggerAccessibleName: string;
    /**
     * Optional tooltip shown on the trigger button.
     */
    triggerTooltip?: string;
    /**
     * Whether the trigger is disabled.
     */
    disabled?: boolean;
    /**
     * The width of the dropdown.
     * @default "default"
     */
    width?: DropdownListWidth;
}
/**
 * A trigger button that opens a filterable dropdown list and reports the chosen option via
 * `onItemSelected`. This is used for pick-an-item-then-act flows (e.g. inserting a variable into a field).
 * It reuses the same filterable, virtualised option list, so consumers get filtering for free without having to
 * wire up the underlying dropdown primitives themselves.
 */
export declare function DropdownList<T>({ items, getOption, onItemSelected, allowFilter, sortItems, placement, accessibleName, triggerIcon, triggerAccessibleName, triggerTooltip, disabled, width, }: DropdownListProps<T>): import("react/jsx-runtime").JSX.Element;