@octopusdeploy/design-system-components/dist/src/components/Form/Primitives/Listbox.d.ts

The design systems component library.

import type { ReactElement } from "react";
import type React from "react";
export interface ListboxOption {
    label: string;
    value: string;
}
export interface ListboxElement {
    handleKeyDown: (event: React.KeyboardEvent) => void;
}
interface ListboxProps<T extends ListboxOption> {
    id?: string;
    value: string | string[] | undefined;
    options: T[];
    accessibleName: string;
    renderOption: (option: T, selected: boolean) => ReactElement;
    getOptionHeight: (option: T) => number;
    onOptionSelected: (option: T) => void;
    getOptionHtmlId: (index: number) => string;
    onOptionActive?: (index: number) => void;
    onLoadMore?: () => void;
    /**
     * Called when the user clicks the retry button in the error footer. When not supplied, the
     * error footer renders without a retry button — the consumer owns the retry policy (see
     * SelectOptionList's getRetryHandler).
     */
    onRetry?: () => void;
    isLoading?: boolean;
    hasError?: boolean;
    isMultiSelectable?: boolean;
    scrollPaddingTop?: number;
    scrollPaddingBottom?: number;
    /**
     * Focus behaviour of the listbox changes depending on whether there is an element like a search input controlling the focus
     *
     * `focus`: The option elements are independently focusable and become focused when they are the active selection.
     * `sub-focus`: The option elements are not directly focusable so that an element in the consumer can retain focus. Active selection should be specified in this consumer element with aria-activedescendant.
     * `none`:  When the type is `sub-focus` and the controlling consumer element is not focused, `none` can be used to disable the sub-focus appearance in the listbox.
     */
    focusType: "focus" | "sub-focus" | "none";
}
export declare const Listbox: <T extends ListboxOption>(props: ListboxProps<T> & {
    ref?: React.Ref<ListboxElement>;
}) => React.ReactElement;
export {};