liber-salti/build/TextField/TextField.types.d.ts

Saltí - Liber Design System

/// <reference types="react" />
import { OutlinedInputProps } from '@mui/material/OutlinedInput';
import { BaseTextFieldProps } from '@mui/material/TextField';
import { InputLabelProps } from '@mui/material/InputLabel';
import { TooltipProps } from '../Tooltip/Tooltip.types';
import { IconName } from '../Icon/Icon.types';
import { IconButtonProps } from '../IconButton/IconButton.types';
export declare type MaskOption = 'currency' | 'percentage' | 'float' | 'cpf' | 'cnpj' | 'phone' | 'cep';
export interface TextFieldProps extends Omit<BaseTextFieldProps, 'variant' | 'color' | 'size'> {
    /**
     * This prop helps users to fill forms faster, especially on mobile devices.
     * The name can be confusing, as it's more like an autofill.
     * You can learn more about it
     * [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
     */
    autoComplete?: string;
    /**
     * If `true`, the `input` element will be focused during the first mount.
     */
    autoFocus?: boolean;
    /**
     * The short hint displayed in the input before the user enters a value.
     */
    placeholder?: string;
    /**
     * The default value of the `input` element.
     */
    defaultValue?: unknown;
    /**
     * If `true`, the `input` element will be disabled.
     */
    disabled?: boolean;
    /**
     * If `true`, the label will be displayed in an error state.
     */
    error?: boolean;
    /**
     * Text to prefix de input value.
     */
    prefixText?: string;
    /**
     * Icon name to prefix de input value.
     * Will override `prefixText` if defined.
     */
    prefixIconName?: IconName;
    /**
     * Text to suffix de input value.
     */
    suffixText?: string;
    /**
     * Name of the Icon for the IconButton to suffix the input.
     * Will override `suffixText` if defined.
     */
    suffixIconButtonName?: IconName;
    /**
     * Action to be triggered on suffix icon button click
     */
    onSuffixIconButtonClick?: IconButtonProps['onClick'];
    /**
     * Props definition of the tooltip for the suffix IconButton.
     */
    suffixIconTooltipProps?: TooltipProps;
    /**
     * If `true`, the input will take up the full width of its container.
     */
    fullWidth?: boolean;
    /**
     * The helper text content.
     */
    helperText?: string;
    /**
     * The predefined input mask to be used.
     * Use only in `controlled` mode.
     */
    maskOption?: MaskOption;
    /**
     * The custom input mask to be used.
     * Use only in `controlled` mode, can't be used with maskOption.
     */
    customMask?: string;
    /**
     * The id of the `input` element.
     * Use this prop to make `label` and `helperText` accessible for screen readers.
     */
    id?: string;
    /**
     * Pass a ref to the `input` element.
     */
    inputRef?: React.Ref<any>;
    /**
     * The label content.
     */
    label?: string;
    /**
     * If `true`, a textarea element will be rendered instead of an input.
     */
    multiline?: boolean;
    /**
     * Name attribute of the `input` element.
     */
    name?: string;
    /**
     * If `true`, the label is displayed as required and the `input` element` will be required.
     */
    required?: boolean;
    /**
     * Number of rows to display when multiline option is set to true.
     */
    rows?: string | number;
    /**
     * Maximum number of rows to display when multiline option is set to true.
     */
    rowsMax?: string | number;
    /**
     * The size of the text field.
     */
    size?: 'large' | 'medium';
    /**
     * Type of the `input` element. It should be
     * [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
     */
    type?: React.InputHTMLAttributes<unknown>['type'];
    /**
     * The value of the `input` element, required for a controlled component.
     */
    value?: unknown;
    /**
     * Callback fired when the input is blurred.
     *
     * @param {object} event The event source of the callback.
     * Notice that the first argument (event) might be undefined.
     */
    onBlur?: OutlinedInputProps['onBlur'];
    /**
     * Callback fired when the value is changed.
     *
     * @param {object} event The event source of the callback.
     * You can pull out the new value by accessing `event.target.value` (string).
     */
    onChange?: OutlinedInputProps['onChange'];
    /**
     * Callback fired when the input is focused.
     *
     * @param {object} event The event source of the callback.
     * Notice that the first argument (event) might be undefined.
     */
    onFocus?: OutlinedInputProps['onFocus'];
    /**
     * Props applied to the Input element.
     */
    InputProps?: Partial<OutlinedInputProps>;
    /**
     * Props applied to the InputLabel element.
     */
    InputLabelProps?: Partial<InputLabelProps>;
    /**
     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes)
     * applied to the `input` element.
     */
    inputProps?: OutlinedInputProps['inputProps'];
}