import * as React from 'react'; import { TooltipProps } from '../Tooltip'; import { TooltipCommonProps } from '../common'; import { InputEnterKeyHint, InputSize, InputStatus, InputValue, MinValue, MaxValue } from '../Input'; export { InputValue, MinValue, MaxValue } from '../Input'; export type NumberInputProps = { /** 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; /** 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; /** Sets the value of the native `autocomplete` attribute, for example `off` or `email`. */ 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, no tooltip is displayed. */ statusMessage?: React.ReactNode; /** Specifies whether status suffix should be hidden. */ hideStatusSuffix?: boolean; /** Forces the focus state on the input. * @internal */ forceFocus?: boolean; /** Forces the hover state on the input. * @internal */ 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; /** When provided, hovering displays a tooltip with this content. */ clearButtonTooltipContent?: React.ReactNode; /** Clear button tooltip props. */ clearButtonTooltipProps?: TooltipCommonProps; /** Aria label for the clear button. */ clearButtonAriaLabel?: string; /** 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'; /** Sets the background color of the input. Accepts any CSS color value. */ backgroundColor?: string; /** 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; /** 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?: (e?: React.FocusEvent) => void; /** 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; /** 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; /** Specifies text direction. If true, the text is displayed from right to left. */ rtl?: boolean; /** Controls the size of the input. */ 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 statusMessageTooltipProps instead */ tooltipPlacement?: TooltipProps['placement']; /** Status message tooltip props. */ statusMessageTooltipProps?: TooltipCommonProps; /** 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 | Array; /** 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; /** Sets the native `inputmode` attribute, which picks the virtual keyboard on touch devices. * @default 'numeric' */ inputmode?: string; /** Sets the label of the virtual keyboard's enter key on touch devices. */ enterKeyHint?: InputEnterKeyHint; /** * Ref to the underlying `` DOM element. Accepts callback and object refs. * Use for input masking libraries such as `use-mask-input`. Memoize callback refs * to avoid reattaching on every render. */ inputRef?: ((input: HTMLInputElement) => void) | React.MutableRefObject; /** Has no effect. * @deprecated Has no effect. Remove it. */ strict?: boolean; /** Specifies whether stepper should be hidden. */ hideStepper?: boolean; /** Defines a standard input onChange callback. */ onChange?(value: number | null, stringValue: string): void; /** Enables internal validation and defines a message to display when user types invalid value. */ invalidMessage?: string; /** Defines a callback function which is called on cases when invalid value is typed. * - return { stringValue: string, { validationType: 'formatError' | 'outOfBoundsError', value: string }} * - `validationType` - type 'formatError' is set when value is in the wrong format * - type 'outOfBoundsError' is set when min or max props are used and value doesn't match the bounds * - `value` - is set to current input value */ onInvalid?(stringValue: string, { validationType, value, }: { validationType?: 'outOfBoundsError' | 'formatError'; value: string; }): void; }; //# sourceMappingURL=NumberInput.types.d.ts.map