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

The design systems component library.

import type { ReactElement, ReactNode } from "react";
import type React from "react";
import type { IconOnlyButtonElement } from "../../Button/Button";
import type { PopoverBasicHelpProps } from "../../Popover/PopoverBasicHelp";
import type { DescriptionContent } from "../utils/descriptionWithLinks";
import type { AsyncList } from "./AsyncList";
import type { SelectOption } from "./SelectOption";
/**
 * The action buttons displayed inside a `Select` (and the `BindableField` built on it), capped at
 * two. Enforced as a tuple union rather than a doc-only convention.
 */
export type SelectActions = readonly [] | readonly [IconOnlyButtonElement] | readonly [IconOnlyButtonElement, IconOnlyButtonElement];
export interface SharedSelectProps<T> {
    /**
     * The items for the select
     */
    items: T[] | AsyncList<T>;
    /**
     * Controls whether items are sorted before displaying in the list.
     * Does not have any effect on AsyncList items.
     * @default false
     */
    sortItems?: boolean;
    /**
     * A function that returns a SelectOption for an item
     */
    getOption: (item: T) => SelectOption;
    /**
     * The label for the select
     */
    label: string;
    /**
     * The placeholder text to display when input is empty
     */
    placeholder?: string;
    /**
     * The description text to display below the input
     */
    description?: string | DescriptionContent;
    /**
     * Validation message to display
     */
    validationMessage?: string;
    /**
     * Whether the field is disabled
     */
    disabled?: boolean;
    /**
     * Whether the field must have a value. Once the selection has been changed, shows a local "This field is
     * required." validation error whenever it's left empty. Independent of `hasRequiredMarker`, which only
     * controls the visual "(required)" label - pass both together for a fully required field.
     */
    required?: boolean;
    /**
     * Whether the field is required
     */
    hasRequiredMarker?: boolean;
    /**
     * Whether to show optional marker
     */
    hasOptionalMarker?: boolean;
    /**
     * Whether this field has a default value marker
     */
    hasDefaultMarker?: boolean;
    /**
     * PopoverBasicHelp component to display additional help information
     */
    popover?: React.ReactElement<PopoverBasicHelpProps>;
    /**
     * Whether to autofocus the input
     */
    autoFocus?: boolean;
    /**
     * Whether the input is readonly
     */
    readOnly?: boolean;
    /**
     * Whether to allow filtering the options.
     */
    allowFilter?: boolean;
    /**
     * Whether to allow clearing the selection.
     */
    allowClear?: boolean;
    /**
     * Action buttons displayed inside the select field. A maximum of two actions is allowed.
     * Action elements are rendered as supplied — set `disabled` on them yourself when the field
     * is disabled or readonly.
     */
    actions?: SelectActions;
}
export interface SelectBaseProps<T> extends SharedSelectProps<T> {
    value: string | string[] | undefined;
    isMultiSelectable: boolean;
    renderOption: (option: SelectOption, selected: boolean) => ReactElement;
    onOptionsSelected: (options: SelectedOption[]) => void;
    renderSelection: (options: SelectedOption[]) => ReactNode;
    renderSelectionSummary?: (options: SelectedOption[]) => ReactNode;
    clearSelection: () => void;
}
export declare function SelectBase<T>({ items: itemsArrayOrAsyncList, sortItems, getOption, label, value, placeholder, description, validationMessage, disabled, required, hasRequiredMarker, hasOptionalMarker, hasDefaultMarker, popover, autoFocus, readOnly, onOptionsSelected, allowFilter, allowClear, actions, isMultiSelectable, renderSelection, renderSelectionSummary, renderOption, clearSelection, }: SelectBaseProps<T>): import("react/jsx-runtime").JSX.Element;
export interface MissingSelectedOption {
    missing: true;
    value: string;
}
export type SelectedOption = SelectOption | MissingSelectedOption;
export declare function isMissingSelectedOption(option: SelectedOption): option is MissingSelectedOption;
export declare function getSelectedOptionLabel(option: SelectedOption): string;