@mskcc/carbon-react/es/components/NumberInput/NumberInput.d.ts

Carbon react components for the MSKCC DSM

/**
 * MSKCC DSM 2021, 2023
 */
import React, { ReactNode } from 'react';
export declare const translationIds: {
    'increment.number': string;
    'decrement.number': string;
};
type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
    /**
     * `true` to allow empty string.
     */
    allowEmpty?: boolean;
    /**
     * Specify an optional className to be applied to the wrapper node
     */
    className?: string;
    /**
     * Optional starting value for uncontrolled state
     */
    defaultValue?: number | string;
    /**
     * Specify if the wheel functionality for the input should be disabled, or not
     */
    disableWheel?: boolean;
    /**
     * Specify if the control should be disabled, or not
     */
    disabled?: boolean;
    /**
     * Provide text that is used alongside the control label for additional help
     */
    helperText?: ReactNode;
    /**
     * Specify whether you want the underlying label to be visually hidden
     */
    hideLabel?: boolean;
    /**
     * Specify whether you want the steppers to be hidden
     */
    hideSteppers?: boolean;
    /**
     * Provide a description for up/down icons that can be read by screen readers
     */
    iconDescription?: string;
    /**
     * Specify a custom `id` for the input
     */
    id: string;
    /**
     * Specify if the currently value is invalid.
     */
    invalid?: boolean;
    /**
     * Message which is displayed if the value is invalid.
     */
    invalidText?: ReactNode;
    /**
     * Generic `label` that will be used as the textual representation of what
     * this field is for
     */
    label?: ReactNode;
    /**
     * `true` to use the light version.
     *
     * @deprecated The `light` prop for `NumberInput` is no longer needed and has
     *     been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.
     */
    light?: boolean;
    /**
     * The maximum value.
     */
    max?: number;
    /**
     * The minimum value.
     */
    min?: number;
    /**
     * Provide an optional handler that is called when the internal state of
     * NumberInput changes. This handler is called with event and state info.
     * `(event, { value, direction }) => void`
     */
    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
        value: number | string;
        direction: string;
    }) => void;
    /**
     * Provide an optional function to be called when the up/down button is clicked
     */
    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
        value: number | string;
        direction: string;
    }) => void;
    /**
     * Provide an optional function to be called when a key is pressed in the number input
     */
    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
    /**
     * Specify if the component should be read-only
     */
    readOnly?: boolean;
    /**
     * Specify the size of the Number Input.
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Specify how much the values should increase/decrease upon clicking on up/down button
     */
    step?: number;
    /**
     * Provide custom text for the component for each translation id
     */
    translateWithId?: (id: string) => string;
    /**
     * Specify the value of the input
     */
    value?: number | string;
    /**
     * Specify whether the control is currently in warning state
     */
    warn?: boolean;
    /**
     * Provide the text that is displayed when the control is in warning state
     */
    warnText?: ReactNode;
}
declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
export { NumberInput };