import * as React from 'react'; import { TooltipProps } from '../Tooltip'; import { TooltipCommonProps } from '../common'; import { SIZES } from './Input.constants'; import { ValuesOf } from '../utils/typeUtils'; export type InputValue = string | number | undefined; export type MinValue = number | undefined; export type MaxValue = number | undefined; export interface InputProps { children?: React.ReactNode; /** 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; /** Assigns a unique identifier for the root element */ id?: string; /** Specifies the role of the input element for accessibility */ role?: 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; /** Automatically selects the entire input text */ autoSelect?: boolean; /** Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values */ autocomplete?: string; /** Defines the initial value of an input */ defaultValue?: InputValue; /** Specifies whether input should be disabled or not */ disabled?: boolean; /** Specify the status of a field */ status?: InputStatus; /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */ statusMessage?: React.ReactNode; /** Status message tooltip props */ statusMessageTooltipProps?: TooltipCommonProps; /** Specifies whether status suffix should be hidden */ hideStatusSuffix?: boolean; /** USED FOR TESTING - forces focus state on the input */ forceFocus?: boolean; /** USED FOR TESTING - forces hover state on the input */ forceHover?: boolean; /** Sets the maximum number of characters that can be inserted to a field */ maxLength?: number; /** Specifies whether input should have a dropdown menu arrow on the right side */ menuArrow?: boolean; /** Displays clear button (X) on a non-empty input */ clearButton?: boolean; /** Specifies whether to focus the field when clear button is clicked */ focusOnClearClick?: boolean; /** Reference element data when a form is submitted */ name?: string; /** Control the border style of input */ border?: 'standard' | 'round' | 'bottomLine' | 'none'; /** Specifies whether input shouldn't have rounded corners on its left */ noLeftBorderRadius?: boolean; /** Specifies whether input shouldn't have rounded corners on its right */ noRightBorderRadius?: boolean; /** Defines a standard input onBlur callback */ onBlur?: React.FocusEventHandler; /** Defines a standard input onChange callback */ onChange?: React.ChangeEventHandler; /** Displays clear button (X) on a non-empty input and calls a callback function */ onClear?: (event: React.MouseEvent | React.KeyboardEvent) => void; /** Defines a callback function called on compositionstart/compositionend events */ onCompositionChange?: (isComposing: boolean) => void; /** Defines a callback handler that is called when the user presses -enter- */ onEnterPressed?: React.KeyboardEventHandler; /** Defines a callback handler that is called when the user presses -escape- */ onEscapePressed?: React.KeyboardEventHandler; /** Defines a standard input onFocus callback */ onFocus?: React.FocusEventHandler; /** Defines a standard input onClick callback */ onInputClicked?: React.MouseEventHandler; /** Defines a standard input onKeyDown callback */ onKeyDown?: React.KeyboardEventHandler; /** Defines a standard input onKeyUp callback */ onKeyUp?: React.KeyboardEventHandler; /** Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut) */ onPaste?: React.ClipboardEventHandler; /** Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut) */ onCopy?: React.ClipboardEventHandler; /** Sets a placeholder message to display */ placeholder?: string; /** Pass a component you want to show as the prefix of the input, e.g., text, icon */ prefix?: React.ReactNode; /** Specifies whether input is read only */ readOnly?: boolean; /** Restricts input editing */ disableEditing?: boolean; rtl?: boolean; /** Controls the size of the input. Default value: `medium` */ size?: InputSize; /** Pass a component you want to show as the suffix of the input, e.g., text, icon */ suffix?: React.ReactNode; /** Indicates that element can be focused and where it participates in sequential keyboard navigation */ tabIndex?: number; /** Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. */ textOverflow?: 'clip' | 'ellipsis'; /** * Controls placement of a status tooltip * @deprecated use tooltipProps instead */ tooltipPlacement?: TooltipProps['placement']; /** Specifies the type of `` element to display. Default is text. */ type?: string; /** Specifies the current value of the element */ value?: string | number; withSelection?: boolean; /** Specifies whether input is mandatory */ required?: boolean; /** Sets a minimum value of an input. Similar to HTML5 min attribute. */ min?: MinValue; /** Sets a maximum value of an input. Similar to html5 max attribute. */ max?: MaxValue; /** Specifies the interval between number values */ step?: number; /** Render a custom input instead of the default html input tag */ customInput?: React.ReactNode | Function; /** Sets a pattern that typed value must match to be valid (regex) */ pattern?: string; inputRef?: (input: HTMLInputElement) => void; inputmode?: string; ariaRoledescription?: string; /** When provided hover will display a tooltip with content */ clearButtonTooltipContent?: React.ReactNode; /** Clear button tooltip props */ clearButtonTooltipProps?: TooltipCommonProps; /** Aria label for the clear button */ clearButtonAriaLabel?: string; /** * Specifies reference of the input element * @internal */ inputElementRef?: any; } export type InputStatus = InputStatusError | InputStatusWarning | InputStatusLoading; export type InputStatusError = 'error'; export type InputStatusLoading = 'loading'; export type InputStatusWarning = 'warning'; export type InputImperativeActions = { /** * Sets focus on the input element */ focus: HTMLInputElement['focus']; /** * Removes focus from the input element */ blur: HTMLInputElement['blur']; /** * Selects the text in the input element */ select: HTMLInputElement['select']; /** * Sets the start and end positions of the current text selection in the input element */ setSelectionRange: HTMLInputElement['setSelectionRange']; /** * Clears the input value */ clear: (event?: React.MouseEvent | React.KeyboardEvent) => void; /** * Gets the input DOM element. */ input: InputElementType | null; }; export type InputSize = ValuesOf; //# sourceMappingURL=Input.types.d.ts.map