@wix/design-system/dist/types/InputArea/InputArea.types.d.ts

@wix/design-system

import * as React from 'react';
import { InputStatus } from '../Input';
import { TooltipProps } from '../Tooltip';
export type InputAreaStatus = InputStatus;
export interface InputAreaProps {
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /** Specifies a CSS class name to be appended to the component's root element.
     * @internal
     */
    className?: string;
    /** Associate a control with the regions that it controls. */
    ariaControls?: string;
    /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. */
    ariaDescribedby?: string;
    /** Define a string that labels the current element in case where a text label is not visible on the screen. */
    ariaLabel?: string;
    /** Focus the element on mount (standard React input autoFocus). */
    autoFocus?: boolean;
    autoSelect?: boolean;
    /** Controls the size of the input. */
    size?: InputAreaSize;
    /** Sets a default value for those who want to use this component un-controlled. */
    defaultValue?: string;
    /** Specifies whether input should be disabled. */
    disabled?: boolean;
    /** USED FOR TESTING. Forces focus state on the input. */
    forceFocus?: boolean;
    /** USED FOR TESTING. Forces hover state on the input. */
    forceHover?: boolean;
    /** Specifies whether character count is enabled. */
    hasCounter?: boolean;
    /** Assigns an unique identifier for the root element. */
    id?: string;
    /** Reference element data when a form is submitted. */
    name?: string;
    /** Sets the maximum height of an area in pixels. */
    maxHeight?: string;
    /** Defines the maximum text length in number of characters. */
    maxLength?: number;
    menuArrow?: boolean;
    /** Sets the minimum height of an area in pixels. */
    minHeight?: string;
    /** Defines a standard input onBlur callback */
    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
    /** Defines a standard input onChange callback. */
    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
    /** Defines a callback handler that is called when user presses enter. */
    onEnterPressed?: React.KeyboardEventHandler<HTMLTextAreaElement>;
    /** Defines a callback handler that is called when user presses escape. */
    onEscapePressed?: () => void;
    /** Defines a standard input onFocus callback. */
    onFocus?: (e?: React.FocusEvent<HTMLTextAreaElement>) => void;
    /** Defines a standard input onKeyDown callback. */
    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
    /** Defines a standard input onKeyUp callback. */
    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>;
    /** Defines a standard input onCompositionStart callback. */
    onCompositionStart?: (event: React.CompositionEvent<HTMLTextAreaElement>) => void;
    /** Defines a standard input onCompositionEnd callback. */
    onCompositionEnd?: (event: React.CompositionEvent<HTMLTextAreaElement>) => void;
    /** Sets a placeholder message to display. */
    placeholder?: string;
    /** Specifies whether input is read only. */
    readOnly?: boolean;
    /** Specifies whether area can be manually resized by the user. */
    resizable?: boolean;
    /** Sets initial height of an area to fit a specified number of rows. */
    rows?: number;
    /** Specifies whether area should grow and shrink according to user input. */
    autoGrow?: boolean;
    /** Sets the minimum amount of rows the component can have in `autoGrow` mode
     * @default 2
     */
    minRowsAutoGrow?: number;
    /** Sets the maximum amount of rows the component can have in `autoGrow` mode */
    maxRowsAutoGrow?: number;
    /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
    tabIndex?: number;
    /** Controls placement of a status tooltip. */
    tooltipPlacement?: TooltipProps['placement'];
    /** Defines input value. */
    value?: string;
    /** Specifies whether the input area is a mandatory field. */
    required?: boolean;
    /** Specifies the text direction. Use "auto" to automatically determine direction based on content. */
    dir?: InputAreaDir;
    /** Specifies the status of a field. */
    status?: InputAreaStatus;
    /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
    statusMessage?: React.ReactNode;
    /** Specifies custom textarea render function */
    children?: InputAreaChildrenFnArgs;
}
export type InputAreaSize = 'small' | 'medium';
export type InputAreaDir = 'ltr' | 'rtl' | 'auto';
export type InputAreaChildrenFnArgs = (data: {
    className: string;
    rows: number;
    ref: React.RefCallback<any>;
    onFocus: (e: React.SyntheticEvent) => void;
    onBlur: (e: React.SyntheticEvent) => void;
    onKeyDown: (e: React.SyntheticEvent) => void;
    onInput: (() => void) | undefined;
    dir?: InputAreaDir;
}) => React.ReactNode;
//# sourceMappingURL=InputArea.types.d.ts.map