import React from 'react'; import PropTypes from 'prop-types'; import { ComponentProps } from '../utils/types'; /** @public */ type NumberChangeHandler = (event: React.ChangeEvent | React.KeyboardEvent | React.MouseEvent, data: { name?: string; value?: number; reason: 'input' | 'stepButton'; }) => void; /** @public */ type NumberBlurHandler = (event: React.FocusEvent, data: { name?: string; value: string; }) => void; /** @public */ type NumberFocusHandler = (event: React.FocusEvent, data: { name?: string; value: string; }) => void; interface NumberPropsBase { /** Append removes the rounded borders and the border from the right side and moves the * increment and decrement buttons to the left. */ append?: boolean; children?: React.ReactNode; /** * Set this property instead of value to make the value uncontrolled. */ defaultValue?: number; /** * The id of the description. When placed in a ControlGroup, this is automatically set to the * ControlGroup's help component. */ describedBy?: string; /** Determines if the input is editable. */ disabled?: boolean; /** * A React ref which is set to the DOM element when the component mounts, and null when it unmounts. */ elementRef?: React.Ref; /** * Highlight the field as having an error. */ error?: boolean; /** * 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 text input element when the component mounts, and null when it unmounts. */ inputRef?: React.Ref; /** When false, displays as inline-block with the default width. */ inline?: boolean; /** Hides the increment and decrement step buttons if true. */ hideStepButtons?: boolean; /** * The number of decimal places for rounding. Set to zero to limit input to integers. * Negative numbers are supported. For instance, -2 will round to the nearest hundred. */ roundTo?: number; /** * The id of the label. When placed in a ControlGroup, this is automatically set to the * ControlGroup's label. */ labelledBy?: string; /** * The locale determines the decimal separator. Supported locale formats are: `xx`, `xx-XX`, and `xx_XX`. */ locale?: string; /** The smallest allowable value. */ min?: number; /** The largest allowable value. */ max?: 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?: NumberBlurHandler; /** * 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?: NumberChangeHandler; /** A callback for when the input is clicked. * This will only trigger when the textbox itself is clicked and will not trigger for other parts of the component such as the step buttons. */ onClick?: React.MouseEventHandler; /** A callback for when the input takes focus. */ onFocus?: NumberFocusHandler; /** A keydown callback can be used to prevent a certain input by utilizing the event argument. */ onKeyDown?: React.KeyboardEventHandler; /** A keyup callback. */ onKeyUp?: React.KeyboardEventHandler; /** A callback for when the user selects text. */ onSelect?: React.ReactEventHandler; /** Prepend removes rounded borders from the left side. This cannot be used in combination * with append. */ prepend?: boolean; /** The amount of increment and decrement applied by the buttons and arrow keys. */ step?: number; /** * @private Adornment after the input to when step controls are not active */ endAdornment?: React.ReactNode; /** * @private Adornment before the input when step controls are not active */ startAdornment?: React.ReactNode; /** * The contents of the input. Setting this value makes the property controlled. A callback * is required. */ value?: number; } interface NumberPropsBaseControlled extends NumberPropsBase { defaultValue?: never; onChange: NumberChangeHandler; value?: number; } interface NumberPropsBaseUncontrolled extends NumberPropsBase { defaultValue?: number; value?: never; } type NumberProps = ComponentProps; declare function NumberInput({ append, defaultValue, describedBy, disabled, elementRef, error, hideStepButtons, inline, inputRef, locale, max, min, name, onBlur, onChange, onKeyDown, onKeyUp, prepend, roundTo, step, endAdornment, startAdornment, value, ...otherProps }: NumberProps): React.JSX.Element; declare namespace NumberInput { var displayName: string; var propTypes: { append: PropTypes.Requireable; children: PropTypes.Requireable; defaultValue: PropTypes.Requireable; describedBy: PropTypes.Requireable; disabled: PropTypes.Requireable; elementRef: PropTypes.Requireable; inputRef: PropTypes.Requireable; error: PropTypes.Requireable; hideStepButtons: PropTypes.Requireable; inline: PropTypes.Requireable; inputId: PropTypes.Requireable; labelledBy: PropTypes.Requireable; locale: PropTypes.Requireable; max: PropTypes.Requireable; min: PropTypes.Requireable; name: PropTypes.Requireable; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onChange: PropTypes.Requireable<(...args: any[]) => any>; onClick: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; endAdornment: PropTypes.Requireable; startAdornment: PropTypes.Requireable; onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; onKeyUp: PropTypes.Requireable<(...args: any[]) => any>; onSelect: PropTypes.Requireable<(...args: any[]) => any>; prepend: PropTypes.Requireable; roundTo: PropTypes.Requireable; step: PropTypes.Requireable; value: PropTypes.Requireable; }; } export default NumberInput; export { NumberBlurHandler, NumberChangeHandler, NumberFocusHandler }; export type { NumberPropsBase, NumberPropsBaseControlled, NumberPropsBaseUncontrolled };