@carbon/react 1.22.0 → 1.23.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -71,7 +71,8 @@ var getInputValue = function getInputValue(_ref) {
 
 var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
   var items = _ref2.items,
-      itemToString = _ref2.itemToString;
+      _ref2$itemToString = _ref2.itemToString,
+      itemToString = _ref2$itemToString === void 0 ? defaultItemToString : _ref2$itemToString;
 
   if (!inputValue) {
     return -1;
@@ -80,9 +81,9 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
   var searchValue = inputValue.toLowerCase();
 
   for (var i = 0; i < items.length; i++) {
-    var item = itemToString(items[i]).toLowerCase();
+    var _item = itemToString(items[i]).toLowerCase();
 
-    if (item.indexOf(searchValue) !== -1) {
+    if (_item.indexOf(searchValue) !== -1) {
       return i;
     }
   }
@@ -92,7 +93,7 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
 
 var getInstanceId = setupGetInstanceId["default"]();
 var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  var _cx, _ref4, _Text;
+  var _cx, _ref4, _cx4, _Text;
 
   var ariaLabel = props.ariaLabel,
       containerClassName = props.className,
@@ -129,7 +130,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   var _useContext = React.useContext(FormContext.FormContext),
       isFluid = _useContext.isFluid;
 
-  var textInput = React.useRef();
+  var textInput = React.useRef(null);
   var comboBoxInstanceId = getInstanceId();
 
   var _useState = React.useState(getInputValue({
@@ -147,12 +148,12 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       isFocused = _useState4[0],
       setIsFocused = _useState4[1];
 
-  var _useState5 = React.useState(null),
+  var _useState5 = React.useState(),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
       prevSelectedItem = _useState6[0],
       setPrevSelectedItem = _useState6[1];
 
-  var _useState7 = React.useState(null),
+  var _useState7 = React.useState(false),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
       doneInitialSelectedItem = _useState8[0],
       setDoneInitialSelectedItem = _useState8[1];
@@ -172,11 +173,11 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
 
   var filterItems = function filterItems(items, itemToString, inputValue) {
     return items.filter(function (item) {
-      return shouldFilterItem({
+      return shouldFilterItem ? shouldFilterItem({
         item: item,
         itemToString: itemToString,
         inputValue: inputValue
-      });
+      }) : defaultShouldFilterItem();
     });
   };
 
@@ -239,7 +240,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null, (_ref4 = {}, _rollupPluginBabelHelpers.defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _ref4)]);
-  var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
+  var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--text-input--empty"), !inputValue), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--combo-box--input--focus"), isFocused && !isFluid), _cx4)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
@@ -275,7 +276,8 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
         highlightedIndex = _ref5.highlightedIndex,
         clearSelection = _ref5.clearSelection,
         toggleMenu = _ref5.toggleMenu;
-    var rootProps = getRootProps({}, {
+    var rootProps = getRootProps( // @ts-ignore this is not supposed to be a required property
+    {}, {
       suppressRefError: true
     });
     var labelProps = getLabelProps();
@@ -317,11 +319,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     });
 
     var handleFocus = function handleFocus(evt) {
-      if (evt.target.type === 'button') {
-        setIsFocused(false);
-      } else {
-        setIsFocused(evt.type === 'focus' ? true : false);
-      }
+      setIsFocused(evt.type === 'focus');
     };
 
     var readOnlyEventHandlers = readOnly ? {
@@ -373,7 +371,8 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       clearSelection: clearSelection,
       translateWithId: translateWithId,
       disabled: disabled || readOnly,
-      onClearSelection: handleSelectionClear
+      onClearSelection: handleSelectionClear,
+      selectionCount: 0
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
       isOpen: isOpen,
       translateWithId: translateWithId
@@ -385,15 +384,18 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       var itemProps = getItemProps((_getItemProps = {
         item: item,
         index: index
-      }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-current', selectedItem === item ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', highlightedIndex === index ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
+      }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-current', selectedItem === item ? 'true' : 'false'), _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', highlightedIndex === index ? 'true' : 'false'), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
       return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
         isHighlighted: highlightedIndex === index || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || false,
-        title: itemToElement ? item.text : itemToString(item)
-      }, itemProps), itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+        title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
+      }, itemProps), itemToElement ?
+      /*#__PURE__*/
+      // @ts-ignore
+      React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id
-      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
+      }, item)) : itemToString ? itemToString(item) : defaultItemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
         className: "".concat(prefix, "--list-box__menu-item__selected-icon")
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
@@ -428,6 +430,7 @@ ComboBox.propTypes = {
   /**
    * Additional props passed to Downshift
    */
+  // @ts-ignore
   downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
 
   /**
@@ -484,6 +487,7 @@ ComboBox.propTypes = {
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component when a specific dropdown item is selected.
+   * `({ selectedItem }) => void`
    * @param {{ selectedItem }}
    */
   onChange: PropTypes__default["default"].func.isRequired,
@@ -491,6 +495,7 @@ ComboBox.propTypes = {
   /**
    * Callback function to notify consumer when the text input changes.
    * This provides support to change available items based on the text.
+   * `(inputText) => void`
    * @param {string} inputText
    */
   onInputChange: PropTypes__default["default"].func,
@@ -498,11 +503,13 @@ ComboBox.propTypes = {
   /**
    * Helper function passed to Downshift that allows the user to observe internal
    * state changes
+   * `(changes, stateAndHelpers) => void`
    */
   onStateChange: PropTypes__default["default"].func,
 
   /**
    * Callback function that fires when the combobox menu toggle is clicked
+   * `(evt) => void`
    * @param {MouseEvent} event
    */
   onToggleClick: PropTypes__default["default"].func,

package/lib/components/ComposedModal/ComposedModal.js

@@ -104,7 +104,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     onKeyDown(evt);
   }
 
-  function handleClick(evt) {
+  function handleMousedown(evt) {
     if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
       return;
     }
@@ -204,7 +204,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     ref: ref,
     "aria-hidden": !open,
     onBlur: handleBlur,
-    onClick: handleClick,
+    onMouseDown: handleMousedown,
     onKeyDown: handleKeyDown,
     className: modalClass,
     tabIndex: "-1"

package/lib/components/DataTable/TableSelectRow.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface TableSelectRowProps {
+    /**
+     * Specify the aria label for the underlying input control
+     */
+    ariaLabel: string;
+    /**
+     * Specify whether this row is selected, or not
+     */
+    checked: boolean;
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide an `id` for the underlying input control
+     */
+    id: string;
+    /**
+     * Provide a `name` for the underlying input control
+     */
+    name: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (value: boolean, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a handler to listen to when a user initiates a selection request
+     */
+    onSelect: React.MouseEventHandler<HTMLInputElement>;
+    /**
+     * Specify whether the control should be a radio button or inline checkbox
+     */
+    radio?: boolean;
+}
+declare const TableSelectRow: {
+    ({ ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: TableSelectRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the aria label for the underlying input control
+         */
+        ariaLabel: PropTypes.Validator<string>;
+        /**
+         * Specify whether this row is selected, or not
+         */
+        checked: PropTypes.Validator<boolean>;
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the control is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an `id` for the underlying input control
+         */
+        id: PropTypes.Validator<string>;
+        /**
+         * Provide a `name` for the underlying input control
+         */
+        name: PropTypes.Validator<string>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a handler to listen to when a user initiates a selection request
+         */
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Specify whether the control should be a radio button or inline checkbox
+         */
+        radio: PropTypes.Requireable<boolean>;
+    };
+};
+export default TableSelectRow;

package/lib/components/DataTable/TableSelectRow.js

@@ -24,8 +24,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var TableSelectRow = function TableSelectRow(_ref) {
-  var _classNames;
-
   var ariaLabel = _ref.ariaLabel,
       checked = _ref.checked,
       id = _ref.id,
@@ -45,7 +43,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
     disabled: disabled
   };
   var InlineInputComponent = radio ? RadioButton["default"] : InlineCheckbox["default"];
-  var tableSelectRowClasses = cx__default["default"]("".concat(prefix, "--table-column-checkbox"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--table-column-radio"), radio), _classNames));
+  var tableSelectRowClasses = cx__default["default"]("".concat(prefix, "--table-column-checkbox"), _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, className && _rollupPluginBabelHelpers.defineProperty({}, className, true)), {}, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--table-column-radio"), radio)));
   return /*#__PURE__*/React__default["default"].createElement("td", {
     className: tableSelectRowClasses
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
@@ -63,7 +61,7 @@ TableSelectRow.propTypes = {
   ariaLabel: PropTypes__default["default"].string.isRequired,
 
   /**
-   * Specify whether all items are selected, or not
+   * Specify whether this row is selected, or not
    */
   checked: PropTypes__default["default"].bool.isRequired,
 

package/lib/components/DatePicker/DatePicker.js

@@ -14,7 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var flatpickr = require('flatpickr');
-var index = require('../../node_modules/flatpickr/dist/l10n/index.js');
+var l10n = require('flatpickr/dist/l10n/index');
 var DatePickerInput = require('../DatePickerInput/DatePickerInput.js');
 var appendToPlugin = require('./plugins/appendToPlugin.js');
 var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
@@ -34,16 +34,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
+var l10n__default = /*#__PURE__*/_interopDefaultLegacy(l10n);
 
 var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "readOnly", "short", "value"];
 
-index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
-  var currentDay = index["default"].en.weekdays.shorthand;
+l10n__default["default"].en.weekdays.shorthand.forEach(function (_day, index) {
+  var currentDay = l10n__default["default"].en.weekdays.shorthand;
 
-  if (currentDay[index$1] === 'Thu' || currentDay[index$1] === 'Th') {
-    currentDay[index$1] = 'Th';
+  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+    currentDay[index] = 'Th';
   } else {
-    currentDay[index$1] = currentDay[index$1].charAt(0);
+    currentDay[index] = currentDay[index].charAt(0);
   }
 });
 var forEach = Array.prototype.forEach;
@@ -291,9 +292,9 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
 
     if (_rollupPluginBabelHelpers["typeof"](locale) === 'object') {
       var location = locale.locale ? locale.locale : 'en';
-      localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, index["default"][location]), locale);
+      localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, l10n__default["default"][location]), locale);
     } else {
-      localeData = index["default"][locale];
+      localeData = l10n__default["default"][locale];
     }
 
     var start = startInputField.current;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -69,7 +69,16 @@ var carbonFlatpickrFixEventsPlugin = (function (config) {
 
         if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
           // Update the calendar with the value of the `to` date input
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], false, fp.config.dateFormat);
+          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        }
+      } // save end date in calendar inmediately after it's been written down
+
+
+      if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
+        var currentEndDate = new Date(inputTo.value);
+
+        if (currentEndDate.toString() !== 'Invalid Date') {
+          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
         }
       }
     };

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -9,7 +9,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlugin.js');
+var rangePlugin = require('flatpickr/dist/plugins/rangePlugin');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
 
 /**
  * @param {object} config Plugin configuration.
@@ -20,7 +24,7 @@ var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlu
  */
 
 var carbonFlatpickrRangePlugin = (function (config) {
-  var factory = rangePlugin["default"](Object.assign({
+  var factory = rangePlugin__default["default"](Object.assign({
     position: 'left'
   }, config));
   return function (fp) {

package/lib/components/FileUploader/FileUploaderButton.js

@@ -17,6 +17,7 @@ var types = require('../../prop-types/types.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -45,7 +46,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex", "innerRef"];
+var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "name", "size", "innerRef"];
 
 function noop() {}
 
@@ -67,13 +68,9 @@ function FileUploaderButton(_ref) {
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'button' : _ref$role,
       name = _ref.name,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
       innerRef = _ref.innerRef,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
@@ -102,6 +99,7 @@ function FileUploaderButton(_ref) {
 
   function onClick(event) {
     event.target.value = null;
+    inputNode.current.click();
   }
 
   function onKeyDown(event) {
@@ -125,16 +123,17 @@ function FileUploaderButton(_ref) {
     onChange(event);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
-    ref: innerRef,
-    tabIndex: disabled ? -1 : tabIndex || 0,
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    disabled: disabled,
     className: classes,
-    onKeyDown: onKeyDown,
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, other), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(prefix, "--visually-hidden"),
+    ref: innerRef,
     htmlFor: inputId
-  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-    role: role,
-    "aria-disabled": disabled
-  }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
     className: "".concat(prefix, "--visually-hidden"),
     ref: inputNode,
     id: inputId,
@@ -144,8 +143,7 @@ function FileUploaderButton(_ref) {
     multiple: multiple,
     accept: accept,
     name: name,
-    onChange: handleOnChange,
-    onClick: onClick
+    onChange: handleOnChange
   }));
 }
 
@@ -223,7 +221,7 @@ FileUploaderButton.propTypes = {
   /**
    * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: deprecate["default"](PropTypes__default["default"].number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
 };
 
 exports["default"] = FileUploaderButton;

package/lib/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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 };