import React from 'react'; import PropTypes from 'prop-types'; import { ComponentProps } from '../utils/types'; /** @public */ type TextChangeHandler = (event: React.ChangeEvent | React.MouseEvent, data: { name?: string; value: string; }) => void; /** @public */ type TextBlurHandler = (event: React.FocusEvent, data: { name?: string; value: string; }) => void; /** @public */ type TextFocusHandler = (event: React.FocusEvent, data: { name?: string; value: string; }) => void; interface TextPropsBase { /** Append removes rounded borders and the border from the right side. */ append?: boolean; /** * Control the browser's automatic capitalization functionality. * Note: Doesn't apply to physical keyboard input. * Examples: 'on', 'off', 'sentences', 'words, 'characters'. */ autoCapitalize?: string; /** * Control the browser's autofill functionality. * See [the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute) for details. * Examples: 'on', 'off', 'cc-name', 'shipping street-address'. */ autoComplete?: string; /** Set the input's autocorrect attribute. Only supported by Safari. See also `spellCheck`. */ autoCorrect?: string; /** Specify that the input should request focus when mounted. */ autoFocus?: boolean; /** * Include an "X" button to clear the value. * If `passwordVisibilityToggle` is `true`, this prop is ignored. */ canClear?: boolean; children?: React.ReactNode; /** * Set this property instead of value to make value uncontrolled. */ defaultValue?: string; /** * The id of the description. When placed in a ControlGroup, this is automatically set to the * ControlGroup's help component. */ describedBy?: string; /** Determines whether or not the input is editable. * If set to `"dimmed"`, the menu item does not respond to events but can still receive focus, and `aria-disabled` is set to `true`. */ disabled?: boolean | 'dimmed'; /** * A React ref which is set to the DOM element when the component mounts, and null when it unmounts. */ elementRef?: React.Ref; /** * Adornment after the input. */ endAdornment?: React.ReactNode; /** * Highlight the field as having an error. The border and text will turn red. */ error?: boolean; /** When false, display as inline-block with the default width. */ inline?: boolean; /** @private. */ inputClassName?: string; /** * An id for the input, which may be necessary for accessibility, such as for aria * attributes. */ inputId?: string; /** * A React ref which is set to the input element when the component mounts and null when it unmounts. */ inputRef?: React.Ref; /** * The id of the label. When placed in a ControlGroup, this is automatically set to the * ControlGroup's label. */ labelledBy?: string; /** Set the input's maxlength attribute. */ maxLength?: number; /** The name is returned with onChange events, which can be used to identify the * control when multiple controls share an onChange callback. */ name?: string; /** A callback for when the input loses focus. */ onBlur?: TextBlurHandler; /** * This is equivalent to onInput which is called on keydown, paste, and so on. * If value is set, this callback is required. This must set the value prop to retain the * change. */ onChange?: TextChangeHandler; /** A callback for when the user clicks the textbox. * This will only trigger when the textbox itself is clicked and will not trigger for other parts of the component, * such as the clear button or nodes added via "startAdornment" or "endAdornment" props. */ onClick?: React.MouseEventHandler; /** A callback for when the input takes focus. */ onFocus?: TextFocusHandler; /** A keydown callback can be used to prevent a certain input by utilizing the event argument. */ onKeyDown?: React.KeyboardEventHandler; /** A callback for when the text selection or cursor position changes. */ onSelect?: React.ReactEventHandler; /** @private. */ placeholder?: string; /** Prepend removes rounded borders from the left side. */ prepend?: boolean; /** @private. */ required?: boolean; /** Control the browser's spelling and grammar checking functionality. */ spellCheck?: boolean; /** * Adornment in front of the input. */ startAdornment?: React.ReactNode; tabIndex?: number; /** * 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). * @default 'text' */ type?: string; /** Allow password visibility to be toggled with an icon button. If this is enabled, * `type` prop will be ignored. */ passwordVisibilityToggle?: boolean; /** * The contents of the input. Setting this value makes the property controlled. A callback * is required. */ value?: string; } interface TextPropsBaseControlled extends TextPropsBase { defaultValue?: never; onChange: TextChangeHandler; value?: string; } interface TextPropsBaseUncontrolled extends TextPropsBase { defaultValue?: string; value?: never; } type TextProps = ComponentProps; /** Note: Text places role and aria props onto the input. All other props are placed on the wrapper. */ declare function Text({ append, autoCapitalize, autoComplete, autoCorrect, autoFocus, canClear, children, defaultValue, disabled, describedBy, elementRef, endAdornment, error, inline, inputClassName, inputId, inputRef, labelledBy, maxLength, name, onBlur, onChange, onClick, onFocus, onKeyDown, onSelect, passwordVisibilityToggle, placeholder, prepend, required, spellCheck, startAdornment, tabIndex, title, type, value, ...otherProps }: TextProps): React.JSX.Element; declare namespace Text { var propTypes: { append: PropTypes.Requireable; autoCapitalize: PropTypes.Requireable; autoComplete: PropTypes.Requireable; autoCorrect: PropTypes.Requireable; autoFocus: PropTypes.Requireable; canClear: PropTypes.Requireable; children: PropTypes.Requireable; defaultValue: PropTypes.Requireable; describedBy: PropTypes.Requireable; disabled: PropTypes.Requireable>; elementRef: PropTypes.Requireable; endAdornment: PropTypes.Requireable; error: PropTypes.Requireable; inline: PropTypes.Requireable; /** @private. */ inputClassName: PropTypes.Requireable; inputId: PropTypes.Requireable; inputRef: PropTypes.Requireable; labelledBy: PropTypes.Requireable; maxLength: PropTypes.Requireable; name: PropTypes.Requireable; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onChange: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; onSelect: PropTypes.Requireable<(...args: any[]) => any>; onClick: PropTypes.Requireable<(...args: any[]) => any>; /** @private. */ placeholder: PropTypes.Requireable; prepend: PropTypes.Requireable; /** @private. */ required: PropTypes.Requireable; spellCheck: PropTypes.Requireable; tabIndex: PropTypes.Requireable; startAdornment: PropTypes.Requireable; /** @private */ splunkTheme: PropTypes.Requireable; type: PropTypes.Requireable; passwordVisibilityToggle: PropTypes.Requireable; value: PropTypes.Requireable; }; var componentType: string; } export default Text; export { TextBlurHandler, TextChangeHandler, TextFocusHandler }; export type { TextProps, TextPropsBase, TextPropsBaseControlled, TextPropsBaseUncontrolled };