/** @jsx jsx */
/** @jsxFrag React.Fragment */
import React, { RefCallback } from "react";
import { Button } from "../Button";
import { List } from "../List";
import { ListItem } from "../ListItem";
import { Popover } from "../Popover";
import { UseSelectPropGetters } from "downshift";
import { ListConfigProvider } from "../ListConfig";
import { As } from "../shared/createElementFromAs";
import { inputHeightDictionary } from "../shared/inputHeightDictionary";
export declare type OptionProps = React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
interface RenderListItemProps {
    /**
     * Custom function to render each `ListItem`
     *
     * This is provided so you can render the `ListItem` on your own, with an `as`
     * prop, for example, so you can render a `Link`.
     *
     * The function will be called and it's return value rendered; this does not
     * use `React.createElement`, so an inline function is totally acceptable with
     * no performance penalty.
     *
     * @default `(props) => <ListItem {...props} />`
     *
     *
     * @param props - Props that were going to be passed to the underlying
     *`ListItem`. You must merge this with whatever you are going to render.
  
     * @param optionElement - The `option` element that is going to be parsed and
     * rendered as a `ListItem`.
     *
     * You can use this to get the props you passed to the `option` element so you
     * can customize behavior. For example, you can use this to extract the
     * `option`'s `value` prop and generate a custom URL with `Link` element.
     */
    renderListItem: (props: React.ComponentProps<typeof ListItem>, optionElement: React.ReactElement<React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "option">) => React.ReactElement<React.ComponentProps<typeof ListItem>>;
}
interface Props extends Pick<React.ComponentProps<typeof Popover>, "disabled" | "maxWidth" | "placement" | "popperOptions" | "matchTriggerWidth">, Pick<React.ComponentProps<typeof Button>, "aria-labelledby" | "aria-describedby" | "feel" | "style" | "color">, Pick<React.ComponentProps<typeof ListConfigProvider>, "margin" | "truncate">, Pick<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "onBlur" | "onChange" | "name">, Partial<RenderListItemProps> {
    /**
     * class name to apply to the trigger component
     */
    className?: string;
    /**
     * `RefCallback` for props that should be spread onto a `label` component
     * associated with this `Select`.
     *
     * The value will be calculated internally by `downshift`; so get the value
     * and call this callback. This callback will only be called when the values
     * change by a deep comparission (via
     * [`use-deep-compare-effect`](https://github.com/kentcdodds/use-deep-compare-effect));
     * not by `Object.is`. Therefore it's safe to save this entire value in state
     * and spread it onto a label without fear of more than one re-render.
     *
     * Example:
     *
     * ```
     * import * as React from 'react';
     *
     * export const SelectWithLabel: React.FC = () => {
     *   const [labelProps, setLabelProps] = React.useState();
     *
     *   return (
     *     <React.Fragment>
     *       <label {...labelProps}>select label</label>
     *       <Select
     *         labelPropsCallbackRef={setLabelProps}
     *         ...
     *       >
     *          ...
     *       </Select>
     *     </React.Fragment>
     *   );
     * }
     * ```
     */
    labelPropsCallbackRef?: RefCallback<ReturnType<UseSelectPropGetters<OptionProps>["getLabelProps"]>>;
    /**
     * ID is an optional field used to formulaicly add accessability props as
     * follows:
     *
     * - The trigger button will be given the this `id`
     * - The list will be given ```${id}-menu```
     *
     * If this field is not included or is `undefined`, the automatic downshift
     * props will be used.
     *
     * The list and trigger button will also be assigned the value of
     * `aria-labelledby`
     */
    id?: string | undefined;
    /**
     * Used to override how the underlying `List` is rendered
     *
     * This is useful when need to customize the list behavior
     *
     * @default <List />
     */
    listAs?: React.ReactElement<React.ComponentProps<typeof List>>;
    /**
     * Render prop function to generate a `React.ReactNode` based on the currently
     * selected value.
     *
     * This is useful when you want some custom behavior with what is shown in the
     * select in the unopened state.
     */
    renderTriggerNode?: (value: OptionProps | null) => React.ReactNode;
    triggerAs?: As;
    /**
     * Item currently selected
     *
     * While I believe it's also valid to use the `<option>`'s `selected` prop; we
     * are not using that here. We _might_ use that if we render a native `select`
     * element in the future.
     */
    value?: NonNullable<OptionProps["value"]> | null;
    /** Initial value for a non-controlled component */
    defaultValue?: NonNullable<OptionProps["value"]> | null;
    /**
     * Indicates decoration for the selected item
     *
     * Note, this is for an item that is selected; _not_ the item that is
     * highlighted.
     *
     * Options:
     *
     * * `checkmark` will place a checkmark to the left
     */
    selectionIndicator?: "checkmark" | null;
    size?: keyof typeof inputHeightDictionary;
}
export declare const Select: React.FC<Props>;
export {};