@atlaskit/select/dist/types/popup-select/popup-select.d.ts

Select allows users to make a single selection or multiple selections from a list of options.

import React, { type KeyboardEventHandler, PureComponent, type ReactNode } from 'react';
import { type PopperProps } from '@atlaskit/popper/react-popper';
import { type AtlaskitSelectRefType, type OptionType, type ReactSelectProps, type ValidationState } from '../types';
type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
interface PopupSelectTriggerProps {
    ref: any;
    onKeyDown: KeyboardEventHandler<HTMLElement>;
    'aria-haspopup': 'true';
    'aria-expanded': boolean;
    'aria-controls'?: string;
}
export type ModifierList = 'offset' | 'computeStyles' | 'preventOverflow' | 'handleFlipStyle' | 'flip' | 'popperOffsets' | 'arrow' | 'hide' | 'eventListeners' | 'applyStyles';
export type PopupSelectHandle = {
    open: (options?: {
        controlOverride?: boolean;
    }) => void;
    close: (options?: {
        controlOverride?: boolean;
    }) => void;
    selectRef: AtlaskitSelectRefType | null;
    menuRef: HTMLElement | null;
    targetRef: HTMLElement | null;
};
export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends ReactSelectProps<Option, IsMulti> {
    /**
     * Defines whether the menu should close when selected. The default is `true`.
     */
    closeMenuOnSelect?: boolean;
    /**
     * Defines whether the menu should be closed by pressing the Tab key. The default is `true`.
     */
    shouldCloseMenuOnTab?: boolean;
    /**
     * The footer content shown at the bottom of the popup, underneath the select options.
     */
    footer?: ReactNode;
    /**
     * The props passed down to React Popper.
     *
     * Use these to override the default positioning strategy, behaviour and placement used by this library.
     * For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
     */
    popperProps?: PopperPropsNoChildren<Modifiers>;
    /**
     * The maximum number of options the select can contain without rendering the search field. The default is `5`.
     */
    searchThreshold?: number;
    /**
     * If `false`, renders a select with no search field. If `true`, renders a search field in the select when the
     * number of options exceeds the `searchThreshold`. The default is `true`.
     */
    isSearchable?: boolean;
    /**
     * The maximum width for the popup menu. Can be a number, representing the width in pixels,
     * or a string containing a CSS length datatype.
     */
    maxMenuWidth?: number | string;
    /**
     * The maximum width for the popup menu. Can be a number, representing the width in pixels,
     * or a string containing a CSS length datatype.
     */
    minMenuWidth?: number | string;
    /**
     * Render props used to anchor the popup to your content.
     *
     * Make this an interactive element, such as an @atlaskit/button component.
     *
     * The provided render props in `options` are detailed below:
     * - `isOpen`: The current state of the popup.
     * 		Use this to change the appearance of your target based on the state of your component
     * - `ref`: Pass this ref to the element the Popup should be attached to
     * - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
     * - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
     * 		ensure your experience is accessible
     */
    target?: (options: PopupSelectTriggerProps & {
        isOpen: boolean;
    }) => ReactNode;
    isOpen?: boolean;
    defaultIsOpen?: boolean;
    /**
     * Use this to set whether the component uses compact or standard spacing.
     */
    spacing?: 'default' | 'compact';
    /**
     *  @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
     *  Use isInvalid instead. The state of validation if used in a form
     */
    validationState?: ValidationState;
    /**
     * This prop indicates if the component is in an error state.
     */
    isInvalid?: boolean;
    /**
     * This gives an accessible name to the input for people who use assistive technology.
     */
    label?: string;
    /**
     * The `testId` prop appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. It will be set on the menu element when defined: `{testId}--menu`
     */
    testId?: string;
    /**
     * If `true`, the input value will be kept when an option is selected. The default is `false`.
     */
    shouldKeepInputOnSelect?: boolean;
}
export declare class PopupSelect<Option = OptionType, IsMulti extends boolean = false, Modifiers = ModifierList> extends PureComponent<PopupSelectProps<Option, IsMulti, Modifiers>> {
    private implementation;
    private setImplementationRef;
    get selectRef(): AtlaskitSelectRefType | null;
    get menuRef(): HTMLElement | null;
    get targetRef(): HTMLElement | null;
    open: (options?: {
        controlOverride?: boolean;
    }) => void;
    close: (options?: {
        controlOverride?: boolean;
    }) => void;
    render(): React.JSX.Element;
}
export {};