import * as React from 'react'; import { InputEnterKeyHint, 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 isn't visible on the screen. */ ariaLabel?: string; /** Focus the element on mount (standard React input autoFocus). */ autoFocus?: boolean; /** Automatically selects the entire input text. */ 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; /** Forces the focus state on the input. * @internal */ forceFocus?: boolean; /** Forces the hover state on the input. * @internal */ 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; /** Defines the minimum text length in number of characters. */ minLength?: number; /** * Sets the native `inputmode` attribute, which picks the virtual keyboard on touch devices. * Supported values are `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email` and `url`. */ inputmode?: string; /** Sets the label of the virtual keyboard's enter key on touch devices. */ enterKeyHint?: InputEnterKeyHint; /** Specifies whether input should have a dropdown menu arrow on the right side. */ menuArrow?: boolean; /** Sets the minimum height of an area in pixels. */ minHeight?: string; /** Defines a standard input onBlur callback. */ onBlur?: React.FocusEventHandler; /** Defines a standard input onChange callback. */ onChange?: React.ChangeEventHandler; /** Defines a callback handler that is called when user presses enter. */ onEnterPressed?: React.KeyboardEventHandler; /** Defines a callback handler that is called when user presses escape. */ onEscapePressed?: () => void; /** Defines a standard input onFocus callback. */ onFocus?: (e?: React.FocusEvent) => void; /** Defines a standard input onKeyDown callback. */ onKeyDown?: React.KeyboardEventHandler; /** Defines a standard input onKeyUp callback. */ onKeyUp?: React.KeyboardEventHandler; /** Defines a standard input onCompositionStart callback. */ onCompositionStart?: (event: React.CompositionEvent) => void; /** Defines a standard input onCompositionEnd callback. */ onCompositionEnd?: (event: React.CompositionEvent) => 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; /** Sets the background color of the input area. Accepts any CSS color value. */ backgroundColor?: string; /** Specifies the status of a field. */ status?: InputAreaStatus; /** Defines the message to display on status icon hover. If not given or empty, no tooltip is displayed. */ statusMessage?: React.ReactNode; /** Specifies custom textarea render function. */ children?: InputAreaChildrenFnArgs; } export interface InputAreaState { /** * Sets focus on the input element. */ focus: boolean; focusVisible: boolean; counter: number; computedRows: number | undefined; } export type InputAreaSize = 'small' | 'medium'; export type InputAreaDir = 'ltr' | 'rtl' | 'auto'; export type InputAreaChildrenFnArgs = (data: { /** Specifies a CSS class name to be appended to the component's root element. * @internal */ className: string; rows: number; ref: React.RefCallback; /** Defines a standard input onFocus callback. */ onFocus: (e: React.SyntheticEvent) => void; /** Defines a standard input onBlur callback. */ onBlur: (e: React.SyntheticEvent) => void; /** Defines a standard input onKeyDown callback. */ onKeyDown: (e: React.SyntheticEvent) => void; onInput: (() => void) | undefined; dir?: InputAreaDir; }) => React.ReactNode; //# sourceMappingURL=InputArea.types.d.ts.map