@react-md/form/lib/select/Select.d.ts

This package is for creating all the different form input types.

import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import type { CalculateFixedPositionOptions, PositionAnchor, PositionWidth } from "@react-md/utils";
import type { TextFieldContainerOptions } from "../text-field/TextFieldContainer";
import type { ListboxOptions } from "./Listbox";
import { getDisplayLabel as DEFAULT_GET_DISPLAY_LABEL } from "./utils";
declare type FakeSelectAttributes = Omit<HTMLAttributes<HTMLDivElement>, "placeholder" | "children" | "onChange" | "defaultValue" | "value">;
export interface SelectProps extends FakeSelectAttributes, TextFieldContainerOptions, ListboxOptions {
    /**
     * The id for the select component. This is required for a11y and will be used
     * to generate ids for the listbox and each option within the listbox.
     */
    id: string;
    /**
     * Boolean if the select is currently disabled.
     */
    disabled?: boolean;
    /**
     * An optional floating label to use with the select.
     */
    label?: ReactNode;
    /**
     * An optional style to apply to the label element.
     */
    labelStyle?: CSSProperties;
    /**
     * An optional className to apply to the label element.
     */
    labelClassName?: string;
    /**
     * An optional style to apply to the current display value within the
     * `Select`'s button component.
     */
    displayLabelStyle?: CSSProperties;
    /**
     * An optional className to apply to the current display value within the
     * `Select`'s button component.
     */
    displayLabelClassName?: string;
    /**
     * An optional style to apply to the listbox.
     */
    listboxStyle?: CSSProperties;
    /**
     * An optional className to apply to the listbox.
     */
    listboxClassName?: string;
    /**
     * Boolean if the select should act as a read only select field which just
     * allows for all the options to be visible when toggled open.
     */
    readOnly?: boolean;
    /**
     * An optional placeholder text to show while the select is unvalued and is
     * either currently focused or the `label` prop was not provided.
     */
    placeholder?: ReactNode;
    /**
     * A function that gets called whenever the Select's value changes so that the
     * selected option can be converted into a renderable element to show in the
     * Select's button. The default behavior is to use the `getOptionLabel`
     * default behavior. If the option is an object and the `disableLeftAddon`
     * prop has not been disabled, it will then attempt to also extract a
     * `leftAddon` from the option and use the `TextIconSpacing` component with
     * the label + icon/avatar.
     */
    getDisplayLabel?: typeof DEFAULT_GET_DISPLAY_LABEL;
    /**
     * The positioning configuration for how the listbox should be anchored to the
     * select button.
     */
    anchor?: PositionAnchor;
    /**
     * The sizing behavior for the listbox. It will default to have the same width
     * as the select button, but it is also possible to either have the
     * `min-width` be the width of the select button or just automatically
     * determine the width.
     *
     * The sizing behavior will always ensure that the left and right bounds of
     * the listbox appear within the viewport.
     */
    listboxWidth?: PositionWidth;
    /**
     * Boolean if the `Select`'s button display value should not attempt to
     * extract a `leftAddon` from the current selected option to display.
     */
    disableLeftAddon?: boolean;
    /**
     * Boolean if the select's listbox should not hide if the user resizes the
     * browser while it is visible.
     */
    closeOnResize?: boolean;
    /**
     * Boolean if the select's listbox should not hide if the user scrolls the
     * page while it is visible.
     */
    closeOnScroll?: boolean;
    /**
     * An optional icon to display to the right of the select. This should
     * normally be a dropdown icon to replace the native select's dropdown icon.
     * If this is set to `null`, the native select's dropdown icon will be
     * displayed instead.
     *
     * This defaults to the `IconProvider`'s dropdown icon from the
     * `@react-md/icon` package.
     */
    rightChildren?: ReactNode;
    /**
     * Used to add any additional fixed positioning behavior.
     * @example
     * ```tsx
     * positionOptions={{
     *   preventOverlap: true,
     *   disableSwapping: true,
     * }}
     * ```
     *
     * @remarks \@since 5.1.6
     */
    positionOptions?: CalculateFixedPositionOptions;
}
/**
 * This component is an accessible version of the `<select>` element that allows
 * for some more custom styles by using the `@react-md/list` package to render
 * the list of options.
 *
 * The `Select` component **must be controlled** with a `value` and `onChange`
 * handler.
 *
 * Note: Since this is not a native `<select>` component, the current value will
 * be rendered in an `<input type="hidden" />` element so that the value can be
 * sent along in forms. It is highly recommended to always provide a `name` prop
 * so this value is sent.
 */
export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
export {};