@patreon/studio/module/components/Select/types.d.ts

Patreon Studio Design System

import type { BaseProps } from '../../types/component';
import type { Corners } from '../../types/corners';
import type { InlineHelpTextProps } from '../InlineHelpText';
export declare type AriaAttributes = Omit<React.AriaAttributes, 'aria-label'> & Required<Pick<React.AriaAttributes, 'aria-label'>>;
declare type BaseWithAria = BaseProps & AriaAttributes;
export interface SelectProps extends BaseWithAria, Omit<InlineHelpTextProps, 'inputId' | 'helpText'> {
    /**
     * Variant of the select input
     **/
    variant?: 'outlined' | 'solid';
    /**
     * Options to render.
     */
    options: Option[];
    /**
     * On change event to pass to `Select`.
     */
    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    /**
     * Label on top left.
     */
    primaryLabel?: React.ReactNode;
    /**
     * Label on top right.
     */
    secondaryLabel?: React.ReactNode;
    /**
     * Label on bottom left.
     */
    helperText?: React.ReactNode;
    /**
     * Marks the input as required and appends an asterisk to the label.
     *
     * When set to `'no-indicator'`, the value is required, but an asterisk isn't displayed on the label.
     */
    required?: boolean | 'no-indicator';
    /**
     * Disable Select.
     */
    disabled?: boolean;
    /**
     * Width of select, can be either default or fluid.
     * Default is `200px`
     */
    width?: 'default' | 'fluid';
    /**
     * Specifies border radius for `Select`. Default is `rounded`.
     */
    corners?: Corners;
    value?: HTMLSelectElement['value'];
}
export interface Option {
    /**
     * Option value.
     */
    value: string;
    /**
     * Option label.
     */
    label: string;
    /**
     * Set option as default.
     */
    defaultSelected?: boolean;
    /**
     * Disable only this option (as opposed to disabling the whole select).
     *
     * NOTE: You can still manually set the select to have this option's value
     * programmatically; setting the option as disabled disables the user's
     * ability to select it.
     */
    disabled?: boolean;
}
export {};