@carbon/react 1.7.0 → 1.9.0-rc.0

package/lib/components/NumberInput/NumberInput.js

@@ -10,45 +10,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
-var FeatureFlags$1 = require('@carbon/feature-flags');
-var mergeRefs = require('../../tools/mergeRefs.js');
-var requiredIfValueExists = require('../../prop-types/requiredIfValueExists.js');
+var index = require('../FeatureFlags/index.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
-var FeatureFlags = require('../../internal/FeatureFlags.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index = require('../FeatureFlags/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags$1);
 
-var _excluded = ["className", "disabled", "iconDescription", "id", "hideLabel", "hideSteppers", "label", "max", "min", "step", "value", "readOnly", "invalid", "invalidText", "warn", "warnText", "helperText", "ariaLabel", "light", "allowEmpty", "innerRef", "translateWithId", "isMobile", "size", "defaultValue"];
+var _excluded = ["allowEmpty", "className", "disabled", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
 
 var _defaultTranslations, _Subtract, _Add;
 var translationIds = {
@@ -56,331 +34,226 @@ var translationIds = {
   'decrement.number': 'decrement.number'
 };
 var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['increment.number'], 'Increment number'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['decrement.number'], 'Decrement number'), _defaultTranslations);
+var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function NumberInput(props, forwardRef) {
+  var _cx, _cx3;
+
+  var enabled = index.useFeatureFlag('enable-v11-release');
+
+  var _props$allowEmpty = props.allowEmpty,
+      allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
+      customClassName = props.className,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      defaultValue = props.defaultValue,
+      _props$helperText = props.helperText,
+      helperText = _props$helperText === void 0 ? '' : _props$helperText,
+      _props$hideLabel = props.hideLabel,
+      hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
+      hideSteppers = props.hideSteppers,
+      _props$iconDescriptio = props.iconDescription,
+      iconDescription = _props$iconDescriptio === void 0 ? enabled ? undefined : 'choose a number' : _props$iconDescriptio,
+      id = props.id,
+      label = props.label,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      _props$invalidText = props.invalidText,
+      invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
+      light = props.light,
+      max = props.max,
+      min = props.min,
+      onChange = props.onChange,
+      _onClick = props.onClick,
+      onKeyUp = props.onKeyUp,
+      readOnly = props.readOnly,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$translateWithI = props.translateWithId,
+      t = _props$translateWithI === void 0 ? function (id) {
+    return defaultTranslations[id];
+  } : _props$translateWithI,
+      _props$warn = props.warn,
+      warn = _props$warn === void 0 ? false : _props$warn,
+      _props$warnText = props.warnText,
+      warnText = _props$warnText === void 0 ? '' : _props$warnText,
+      controlledValue = props.value,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(function () {
+    if (controlledValue !== undefined) {
+      return controlledValue;
+    }
 
-var capMin = function capMin(min, value) {
-  return isNaN(min) || !min && min !== 0 || isNaN(value) || !value && value !== 0 ? value : Math.max(min, value);
-};
+    if (defaultValue !== undefined) {
+      return defaultValue;
+    }
 
-var capMax = function capMax(max, value) {
-  return isNaN(max) || !max && max !== 0 || isNaN(value) || !value && value !== 0 ? value : Math.min(max, value);
-};
+    return 0;
+  }),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = React.useState(controlledValue),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevControlledValue = _useState4[0],
+      setPrevControlledValue = _useState4[1];
+
+  var inputRef = React.useRef(null);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
+  var numberInputClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !enabled), _cx));
+  var isInputValid = getInputValidity({
+    allowEmpty: allowEmpty,
+    invalid: invalid,
+    value: value,
+    max: max,
+    min: min
+  });
+  var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id: id,
+    readOnly: readOnly,
+    disabled: disabled,
+    invalid: !isInputValid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText
+  });
+  var _ref = [t('increment.number'), t('decrement.number')],
+      incrementNumLabel = _ref[0],
+      decrementNumLabel = _ref[1];
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--number__input-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
+  var iconClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__readonly-icon"), readOnly), _cx3));
+
+  if (controlledValue !== prevControlledValue) {
+    setValue(controlledValue);
+    setPrevControlledValue(controlledValue);
+  }
 
-var NumberInput = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(NumberInput, _Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(NumberInput);
-
-  function NumberInput(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, NumberInput);
-
-    _this = _super.call(this, props);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_inputRef", null);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleChange", function (evt) {
-      var _this$props = _this.props,
-          disabled = _this$props.disabled,
-          onChange = _this$props.onChange;
-
-      if (!disabled) {
-        evt.persist();
-        evt.imaginaryTarget = _this._inputRef;
-        var prevValue = _this.state.value;
-        var value = evt.target.value;
-        var direction = prevValue < value ? 'up' : 'down';
-
-        _this.setState({
-          value: value
-        }, function () {
-          if (FeatureFlags.useControlledStateWithValue) {
-            onChange(evt, {
-              value: value,
-              direction: direction
-            });
-          } else if (onChange) {
-            onChange(evt, {
-              value: value,
-              direction: direction
-            });
-          }
-        });
-      }
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleArrowClick", function (evt, direction) {
-      var value = typeof _this.state.value === 'string' ? Number(_this.state.value) : _this.state.value;
-      var _this$props2 = _this.props,
-          disabled = _this$props2.disabled,
-          min = _this$props2.min,
-          max = _this$props2.max,
-          step = _this$props2.step,
-          onChange = _this$props2.onChange,
-          onClick = _this$props2.onClick;
-      var conditional = direction === 'down' ? min !== undefined && value > min || min === undefined : max !== undefined && value < max || max === undefined;
-
-      if (!disabled && conditional) {
-        value = direction === 'down' ? value - step : value + step;
-        value = capMax(max, capMin(min, value));
-        evt.persist();
-        evt.imaginaryTarget = _this._inputRef;
-
-        _this.setState({
-          value: value
-        }, function () {
-          //TO-DO v11: update these events to return the same things --> evt, {value, direction}
-          if (FeatureFlags.useControlledStateWithValue) {
-            onClick && onClick(evt, {
-              value: value,
-              direction: direction
-            });
-            onChange && onChange(evt, {
-              value: value,
-              direction: direction
-            });
-          } else {
-            // value added as a 3rd argument rather than in same obj so it doesn't break in v10
-            onClick && onClick(evt, direction, value);
-            onChange && onChange(evt, direction, value);
-          }
-        });
-      }
-    });
+  var ariaDescribedBy = null;
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_handleInputRef", function (ref) {
-      _this._inputRef = ref;
-    });
+  if (normalizedProps.invalid) {
+    ariaDescribedBy = normalizedProps.invalidId;
+  }
 
-    _this.isControlled = props.value !== undefined;
+  if (normalizedProps.warn) {
+    ariaDescribedBy = normalizedProps.warnId;
+  }
 
-    if (FeatureFlags.useControlledStateWithValue && _this.isControlled) {
-      // Skips the logic of setting initial state if this component is controlled
-      _this.state = {};
-      return _rollupPluginBabelHelpers.possibleConstructorReturn(_this);
+  function handleOnChange(event) {
+    if (disabled) {
+      return;
     }
 
-    var _value = FeatureFlags.useControlledStateWithValue || typeof props.defaultValue !== 'undefined' ? props.defaultValue : props.value;
-
-    _value = _value === undefined ? 0 : _value;
+    var state = {
+      value: event.target.value,
+      direction: value < event.target.value ? 'up' : 'down'
+    };
+    setValue(state.value);
 
-    if (props.min || props.min === 0) {
-      _value = Math.max(props.min, _value);
+    if (onChange) {
+      onChange(event, state);
     }
-
-    _this.state = {
-      value: _value
-    };
-    return _this;
   }
 
-  _rollupPluginBabelHelpers.createClass(NumberInput, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          className = _this$props3.className,
-          disabled = _this$props3.disabled,
-          iconDescription = _this$props3.iconDescription,
-          id = _this$props3.id,
-          hideLabel = _this$props3.hideLabel,
-          hideSteppers = _this$props3.hideSteppers,
-          label = _this$props3.label,
-          max = _this$props3.max,
-          min = _this$props3.min,
-          step = _this$props3.step,
-          value = _this$props3.value,
-          readOnly = _this$props3.readOnly,
-          invalid = _this$props3.invalid,
-          invalidText = _this$props3.invalidText,
-          warn = _this$props3.warn,
-          warnText = _this$props3.warnText,
-          helperText = _this$props3.helperText,
-          ariaLabel = _this$props3.ariaLabel,
-          light = _this$props3.light,
-          allowEmpty = _this$props3.allowEmpty,
-          ref = _this$props3.innerRef,
-          t = _this$props3.translateWithId,
-          isMobile = _this$props3.isMobile,
-          size = _this$props3.size;
-          _this$props3.defaultValue;
-          var other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props3, _excluded);
-
-      var scope = this.context;
-      var enabled;
-
-      if (scope.enabled) {
-        enabled = scope.enabled('enable-v11-release');
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, customClassName, enabled))
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: numberInputClasses,
+    "data-invalid": normalizedProps.invalid ? true : undefined
+  }, /*#__PURE__*/React__default["default"].createElement(Label, {
+    disabled: normalizedProps.disabled,
+    hideLabel: hideLabel,
+    id: id,
+    label: label
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "data-invalid": normalizedProps.invalid ? true : undefined,
+    "aria-invalid": normalizedProps.invalid,
+    "aria-describedby": ariaDescribedBy,
+    disabled: normalizedProps.disabled,
+    ref: ref,
+    id: id,
+    max: max,
+    min: min,
+    onClick: _onClick,
+    onChange: handleOnChange,
+    onKeyUp: onKeyUp,
+    pattern: "[0-9]*",
+    readOnly: readOnly,
+    step: step,
+    type: "number",
+    value: value
+  })), normalizedProps.icon ? /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+    className: iconClasses
+  }) : null, !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--number__controls")
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    "aria-label": decrementNumLabel || iconDescription,
+    className: "".concat(prefix, "--number__control-btn down-icon"),
+    disabled: disabled,
+    onClick: function onClick(event) {
+      var state = {
+        value: clamp(max, min, value - step),
+        direction: 'down'
+      };
+      setValue(state.value);
+
+      if (onChange) {
+        onChange(event, state);
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var _classNames, _classNames3, _classNames5, _normalizedProps$icon;
-
-        var numberInputClasses = cx__default["default"]("".concat(prefix, "--number ").concat(prefix, "--number--helpertext"), [enabled ? null : className], (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--number--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--number--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--number--nolabel"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--number--nosteppers"), hideSteppers), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--number--mobile"), isMobile), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--number--").concat(size), size), _classNames));
-        var isInputInvalid; // If the user supplied `invalid` through props, we'll defer to the passed in value
-
-        if (invalid) {
-          isInputInvalid = true;
-        } else {
-          // Otherwise, if we don't allow an empty value then we check to see
-          // if the value is empty, or if it is out of range
-          if (!allowEmpty && _this2.state.value === '') {
-            isInputInvalid = true;
-          } else {
-            if (_this2.state.value !== '' && (_this2.state.value > max || _this2.state.value < min)) {
-              isInputInvalid = true;
-            }
-          }
-        }
-
-        var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
-          id: id,
-          readOnly: readOnly,
-          disabled: disabled,
-          invalid: isInputInvalid,
-          invalidText: invalidText,
-          warn: warn,
-          warnText: warnText
-        });
-        var props = {
-          disabled: normalizedProps.disabled,
-          id: id,
-          max: max,
-          min: min,
-          step: step,
-          onChange: _this2.handleChange,
-          value: FeatureFlags.useControlledStateWithValue && _this2.isControlled ? value : _this2.state.value,
-          readOnly: readOnly,
-          'aria-label': label ? null : ariaLabel
-        };
-        var buttonProps = {
-          disabled: disabled
-        };
-        var inputWrapperProps = {};
-
-        if (normalizedProps.invalid) {
-          inputWrapperProps['data-invalid'] = true;
-        }
-
-        var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled));
-        var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: helperTextClasses
-        }, helperText) : null;
-        var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _classNames3));
-        var labelText = label ? /*#__PURE__*/React__default["default"].createElement("label", {
-          htmlFor: id,
-          className: labelClasses
-        }, label) : null;
-        var _ref = [t('increment.number'), t('decrement.number')],
-            incrementNumLabel = _ref[0],
-            decrementNumLabel = _ref[1];
-        var wrapperClasses = cx__default["default"]("".concat(prefix, "--number__input-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
-        var iconClasses = cx__default["default"]((_classNames5 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--number__readonly-icon"), readOnly), _classNames5));
-        var ariaDescribedBy = null;
-
-        if (normalizedProps.invalid) {
-          ariaDescribedBy = normalizedProps.invalidId;
-        }
-
-        if (normalizedProps.warn) {
-          ariaDescribedBy = normalizedProps.warnId;
-        }
-
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
-        }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-          className: numberInputClasses
-        }, inputWrapperProps), function () {
-          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelText, /*#__PURE__*/React__default["default"].createElement("div", {
-            className: wrapperClasses
-          }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
-            "data-invalid": normalizedProps.invalid,
-            "aria-invalid": normalizedProps.invalid,
-            "aria-describedby": ariaDescribedBy,
-            type: "number",
-            pattern: "[0-9]*"
-          }, other, props, {
-            ref: mergeRefs["default"](ref, _this2._handleInputRef)
-          })), normalizedProps.icon && (_normalizedProps$icon || (_normalizedProps$icon = /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
-            className: iconClasses
-          }))), !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "".concat(prefix, "--number__controls")
-          }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-            type: "button",
-            className: "".concat(prefix, "--number__control-btn down-icon")
-          }, buttonProps, {
-            onClick: function onClick(evt) {
-              return _this2.handleArrowClick(evt, 'down');
-            },
-            title: decrementNumLabel || iconDescription,
-            "aria-label": decrementNumLabel || iconDescription,
-            tabIndex: "-1"
-          }), _Subtract || (_Subtract = /*#__PURE__*/React__default["default"].createElement(iconsReact.Subtract, {
-            className: "down-icon"
-          }))), /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "".concat(prefix, "--number__rule-divider")
-          }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-            type: "button",
-            className: "".concat(prefix, "--number__control-btn up-icon")
-          }, buttonProps, {
-            onClick: function onClick(evt) {
-              return _this2.handleArrowClick(evt, 'up');
-            },
-            title: incrementNumLabel || iconDescription,
-            "aria-label": incrementNumLabel || iconDescription,
-            tabIndex: "-1"
-          }), _Add || (_Add = /*#__PURE__*/React__default["default"].createElement(iconsReact.Add, {
-            className: "up-icon"
-          }))), /*#__PURE__*/React__default["default"].createElement("div", {
-            className: "".concat(prefix, "--number__rule-divider")
-          }))), normalizedProps.validation ? null : helper);
-        }(), normalizedProps.validation));
-      });
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref2, state) {
-      var value = _ref2.value;
-      var prevValue = state.prevValue;
-
-      if (FeatureFlags.useControlledStateWithValue && value === '' && prevValue !== '') {
-        return {
-          value: '',
-          prevValue: ''
-        };
-      } // If `useControlledStateWithValue` feature flag is on, do nothing here.
-      // Otherwise, do prop -> state sync with "value capping".
-      //// Value capping removed in #8965
-      //// value: capMax(max, capMin(min, value)), (L223)
-
-
-      return FeatureFlags.useControlledStateWithValue || prevValue === value ? null : {
-        value: value,
-        prevValue: value
+      if (_onClick) {
+        _onClick(event, state);
+      }
+    },
+    tabIndex: "-1",
+    title: decrementNumLabel || iconDescription,
+    type: "button"
+  }, _Subtract || (_Subtract = /*#__PURE__*/React__default["default"].createElement(iconsReact.Subtract, {
+    className: "down-icon"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--number__rule-divider")
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
+    "aria-label": incrementNumLabel || iconDescription,
+    className: "".concat(prefix, "--number__control-btn up-icon"),
+    disabled: disabled,
+    onClick: function onClick(event) {
+      var state = {
+        value: clamp(max, min, value + step),
+        direction: 'up'
       };
-    }
-    /**
-     * The DOM node reference to the `<input>`.
-     * @type {HTMLInputElement}
-     */
-
-  }]);
+      setValue(state.value);
 
-  return NumberInput;
-}(React.Component);
+      if (onChange) {
+        onChange(event, state);
+      }
 
-_rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
+      if (_onClick) {
+        _onClick(event, state);
+      }
+    },
+    tabIndex: "-1",
+    title: incrementNumLabel || iconDescription,
+    type: "button"
+  }, _Add || (_Add = /*#__PURE__*/React__default["default"].createElement(iconsReact.Add, {
+    className: "up-icon"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--number__rule-divider")
+  }))), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default["default"].createElement(HelperText, {
+    disabled: disabled,
+    description: helperText
+  })));
+});
+NumberInput.propTypes = {
   /**
    * `true` to allow empty string.
    */
   allowEmpty: PropTypes__default["default"].bool,
 
-  /**
-   * Provide a description that would be used to best describe the use case of the NumberInput component
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
   /**
    * Specify an optional className to be applied to the wrapper node
    */
@@ -414,7 +287,7 @@ _rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
   /**
    * Provide a description for up/down icons that can be read by screen readers
    */
-  iconDescription: PropTypes__default["default"].string.isRequired,
+  iconDescription: PropTypes__default["default"].string,
 
   /**
    * Specify a custom `id` for the input
@@ -431,11 +304,6 @@ _rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
    */
   invalidText: PropTypes__default["default"].node,
 
-  /**
-   * `true` to use the mobile variant.
-   */
-  isMobile: deprecate["default"](PropTypes__default["default"].bool, "The `isMobile` prop no longer needed as the default NumberInput styles are now identical to the mobile variant styles. This prop will be removed in the next major version of `carbon-components-react`"),
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
@@ -445,7 +313,7 @@ _rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
   /**
    * `true` to use the light version.
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, '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.'),
 
   /**
    * The maximum value.
@@ -461,29 +329,28 @@ _rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
    * The new value is available in 'imaginaryTarget.value'
    * i.e. to get the value: evt.imaginaryTarget.value
    *
-   * * _With_ `useControlledStateWithValue` feature flag, the signature of the event handler will be altered to provide additional context in the second parameter: `onChange(event, { value, direction })` where:
-   *   * `event` is the (React) raw event
-   *   * `value` is the new value
-   *   * `direction` tells you the button you hit is up button or down button
-   * * _Without_ this feature flag the event handler has `onChange(event, direction)` signature.
    */
-  onChange: !FeatureFlags.useControlledStateWithValue ? PropTypes__default["default"].func : requiredIfValueExists["default"](PropTypes__default["default"].func),
+  onChange: PropTypes__default["default"].func,
 
   /**
    * Provide an optional function to be called when the up/down button is clicked
    */
   onClick: PropTypes__default["default"].func,
 
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp: PropTypes__default["default"].func,
+
   /**
    * Specify if the component should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
 
   /**
-   * Specify the size of the Number Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-   * TODO V11: remove `xl` (replaced with lg)
+   * Specify the size of the Number Input.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']),
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
 
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
@@ -493,7 +360,7 @@ _rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
   /**
    * Provide custom text for the component for each translation id
    */
-  translateWithId: PropTypes__default["default"].func.isRequired,
+  translateWithId: PropTypes__default["default"].func,
 
   /**
    * Specify the value of the input
@@ -509,38 +376,100 @@ _rollupPluginBabelHelpers.defineProperty(NumberInput, "propTypes", {
    * Provide the text that is displayed when the control is in warning state
    */
   warnText: PropTypes__default["default"].node
-});
+};
 
-_rollupPluginBabelHelpers.defineProperty(NumberInput, "defaultProps", {
-  disabled: false,
-  hideLabel: false,
-  iconDescription: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'choose a number',
-  step: 1,
-  invalid: false,
-  invalidText: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'Provide invalidText',
-  warn: false,
-  warnText: '',
-  ariaLabel: 'Numeric input field with increment and decrement buttons',
-  helperText: '',
-  light: false,
-  allowEmpty: false,
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
+function Label(_ref2) {
+  var _cx5;
+
+  var disabled = _ref2.disabled,
+      id = _ref2.id,
+      hideLabel = _ref2.hideLabel,
+      label = _ref2.label;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--label"), true), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--visually-hidden"), hideLabel), _cx5));
+
+  if (label) {
+    return /*#__PURE__*/React__default["default"].createElement("label", {
+      htmlFor: id,
+      className: className
+    }, label);
+  }
+
+  return null;
+}
+
+Label.propTypes = {
+  disabled: PropTypes__default["default"].bool,
+  hideLabel: PropTypes__default["default"].bool,
+  id: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].node
+};
+
+function HelperText(_ref3) {
+  var disabled = _ref3.disabled,
+      description = _ref3.description;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+
+  if (description) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className
+    }, description);
   }
-});
 
-_rollupPluginBabelHelpers.defineProperty(NumberInput, "contextType", index.FeatureFlagContext);
-var NumberInput$1 = (function () {
-  var forwardRef = function forwardRef(props, ref) {
-    return /*#__PURE__*/React__default["default"].createElement(NumberInput, _rollupPluginBabelHelpers["extends"]({}, props, {
-      innerRef: ref
-    }));
-  };
+  return null;
+}
+
+HelperText.propTypes = {
+  description: PropTypes__default["default"].node,
+  disabled: PropTypes__default["default"].bool
+};
+/**
+ * Determine if the given value is invalid based on the given max, min and
+ * conditions like `allowEmpty`. If `invalid` is passed through, it will default
+ * to false.
+ *
+ * @param {object} config
+ * @param {boolean} config.allowEmpty
+ * @param {boolean} config.invalid
+ * @param {number} config.value
+ * @param {number} config.max
+ * @param {number} config.min
+ * @returns {boolean}
+ */
+
+function getInputValidity(_ref4) {
+  var allowEmpty = _ref4.allowEmpty,
+      invalid = _ref4.invalid,
+      value = _ref4.value,
+      max = _ref4.max,
+      min = _ref4.min;
 
-  forwardRef.displayName = 'NumberInput';
-  return /*#__PURE__*/React__default["default"].forwardRef(forwardRef);
-})();
+  if (invalid) {
+    return false;
+  }
+
+  if (value === '') {
+    return allowEmpty;
+  }
+
+  if (value > max || value < min) {
+    return false;
+  }
+
+  return true;
+}
+/**
+ * Clamp the given value between the upper bound `max` and the lower bound `min`
+ * @param {number} max
+ * @param {number} min
+ * @param {number} value
+ */
+
+
+function clamp(max, min, value) {
+  return Math.min(max, Math.max(min, value));
+}
 
 exports.NumberInput = NumberInput;
-exports["default"] = NumberInput$1;
 exports.translationIds = translationIds;