import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
import { CSSResult } from 'lit';
import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
import * as React_2 from 'react';
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
import { TemplateResult } from 'lit';

declare type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText'>>;

export declare const defaultProps: DefaultProps;

export declare const PieSelect: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<SelectProps>, "children">> & React_2.RefAttributes<PieSelect_2> & PieSelectEvents & ReactBaseType>;

/**
 * @tagname pie-select
 * @event {CustomEvent} change - when the selected option is changed.
 */
declare class PieSelect_2 extends PieSelect_base implements SelectProps {
    size: "small" | "medium" | "large";
    disabled: boolean;
    status: "default" | "error";
    assistiveText: SelectProps['assistiveText'];
    name: SelectProps['name'];
    options: SelectProps['options'];
    private _value;
    focusTarget: HTMLSelectElement;
    private _select;
    private _leadingIconSlot;
    private _hasLeadingIcon;
    protected firstUpdated(): void;
    get value(): SelectProps['value'];
    set value(newValue: SelectProps['value']);
    /**
     * (Read-only) returns a ValidityState with the validity states that this element is in.
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
     */
    get validity(): ValidityState;
    /**
     * Called after the disabled state of the element changes,
     * either because the disabled attribute of this element was added or removed;
     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
     * @param disabled - The latest disabled state of the select.
     */
    formDisabledCallback(disabled: boolean): void;
    /**
     * Called when the form that owns this component is reset.
     * Resets the value to the default select value.
     */
    formResetCallback(): void;
    /**
     * Captures the native change event and wraps it in a custom event.
     * @param event - The change event.
     */
    private _handleChange;
    private _handleLeadingIconSlotchange;
    /**
     * Renders the options from the options property
     * @param options - The options to render
     * @returns A template result with the rendered options
     */
    private renderChildren;
    /**
     * Renders the assistive text if available.
     * @returns A template result with the assistive text
     */
    private renderAssistiveText;
    render(): TemplateResult<1>;
    static styles: CSSResult;
}

declare const PieSelect_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;

declare type PieSelectEvents = {
    onChange?: (event: CustomEvent) => void;
};

declare type ReactBaseType = Omit<React_2.HTMLAttributes<HTMLSelectElement>, 'onChange'>;

export declare interface SelectOptionGroupProps {
    /**
     * What HTML element the option should be such option or optgroup.
     */
    tag: 'optgroup';
    /**
     * The label for the select option group.
     */
    label?: string;
    /**
     * The options within the select option group.
     */
    options: SelectOptionProps[];
    /**
     * Same as the HTML disabled attribute - indicates whether the select option group is disabled.
     */
    disabled?: boolean;
}

export declare interface SelectOptionProps {
    /**
     * What HTML element the option should be such option or optgroup.
     */
    tag: 'option';
    /**
     * The text content to display for the select option.
     */
    text: string;
    /**
     * The value of the select option (used as a key/value pair in HTML forms with `name`).
     */
    value?: string;
    /**
     * Same as the HTML disabled attribute - indicates whether the select option is disabled.
     */
    disabled?: boolean;
    /**
     * Same as the HTML selected attribute - indicates whether the select option is selected by default when the page first loads.
     */
    selected?: boolean;
}

export declare interface SelectProps {
    /**
     * The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
     */
    size?: typeof sizes[number];
    /**
     * Same as the HTML disabled attribute - indicates whether the select is disabled.
     */
    disabled?: boolean;
    /**
     * An optional assistive text to display below the select element. Must be provided when the status is error.
     */
    assistiveText?: string;
    /**
     * The status of the select component / assistive text. Can be default or error.
     */
    status?: typeof statusTypes[number];
    /**
     * The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.
     */
    name?: string;
    /**
     * The options to display in the select. Can be an array of option objects or option group objects.
     */
    options: (SelectOptionProps | SelectOptionGroupProps)[];
    /**
     * The value of the selected option
     */
    value?: string | number;
}

export declare const sizes: readonly ["small", "medium", "large"];

export declare const statusTypes: readonly ["default", "error"];

export { }