orc-shared 5.99.0-dev.3 → 5.99.0-dev.4

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js

@@ -111,7 +111,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 var StepperModal = function StepperModal(_ref) {
-  var _steps$currentStep, _steps$currentStep$fu, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
+  var _steps$currentStep, _steps$currentStep$fu, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4, _steps$currentStep5, _steps$currentStep6;
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? [] : _ref$steps,
     _ref$title = _ref.title,
@@ -180,7 +180,7 @@ var StepperModal = function StepperModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "outlined",
     onClick: closeCallback
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.cancel)), currentStep < steps.length - 1 && (((_steps$currentStep4 = steps[currentStep]) == null || (_steps$currentStep4 = _steps$currentStep4.actions) == null ? void 0 : _steps$currentStep4.length) > 0 ? steps[currentStep].actions.map(function (action) {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.cancel)), (currentStep < steps.length - 1 || ((_steps$currentStep4 = steps[currentStep]) == null ? void 0 : _steps$currentStep4.isIntermediate)) && (((_steps$currentStep5 = steps[currentStep]) == null || (_steps$currentStep5 = _steps$currentStep5.actions) == null ? void 0 : _steps$currentStep5.length) > 0 ? steps[currentStep].actions.map(function (action) {
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
       key: action.value,
       variant: "contained",
@@ -199,7 +199,7 @@ var StepperModal = function StepperModal(_ref) {
       return nextClick();
     },
     disableElevation: true
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.next))), currentStep === steps.length - 1 && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.next))), currentStep === steps.length - 1 && !((_steps$currentStep6 = steps[currentStep]) != null && _steps$currentStep6.isIntermediate) && /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     color: "primary",
     disabled: nextDisabled,

package/dist/components/MaterialUI/Inputs/InputBase.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useStyles = exports.default = exports.AdvancedNumericInput = void 0;
+exports.useStyles = exports.default = exports.AdvancedNumericInput = exports.AdvancedIntegerInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
@@ -9,7 +9,10 @@ var _InputBaseProps = _interopRequireWildcard(require("./InputBaseProps"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactNumberFormat = require("react-number-format");
 var _inputHelper = require("../../../utils/inputHelper");
-var _excluded = ["inputRef", "onChange"];
+var _Icon = _interopRequireDefault(require("../DataDisplay/Icon"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _excluded = ["inputRef", "onChange"],
+  _excluded2 = ["integerButtons"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -21,17 +24,17 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
 })();
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -76,13 +79,21 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       minWidth: 0,
       border: "".concat(theme.spacing(0.1), " solid ").concat(theme.palette.grey.borders),
       borderRadius: function borderRadius(props) {
-        return props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5);
+        var topLeft = props.label ? 0 : 0.5;
+        var topRight = props.isAdvancedNumericInput ? 0 : 0.5;
+        var bottomRight = topRight;
+        var bottomLeft = topLeft;
+        return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
       },
       paddingLeft: theme.spacing(0.85),
       "&:focus, &:active": {
         border: "".concat(theme.spacing(0.1), " solid ").concat(theme.palette.focus),
         borderRadius: function borderRadius(props) {
-          return props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5);
+          var topLeft = props.label ? 0 : 0.5;
+          var topRight = props.isAdvancedNumericInput ? 0 : 0.5;
+          var bottomRight = topRight;
+          var bottomLeft = topLeft;
+          return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
         }
       }
     },
@@ -119,6 +130,41 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     inputMultiline: {
       padding: theme.spacing(0.6, 0.6, 0.6, 0.85)
+    },
+    numericSpinnerContainer: {
+      display: "flex",
+      backgroundColor: theme.palette.grey.light,
+      flexDirection: "column",
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderTopRightRadius: theme.shape.borderRadius,
+      borderBottomRightRadius: theme.shape.borderRadius,
+      border: "".concat(theme.spacing(0.1), " solid ").concat(theme.palette.grey.borders),
+      padding: 0,
+      margin: "0 0 0 -1px"
+    },
+    numericSpinnerUp: {
+      fontSize: "8px",
+      padding: "0 3px",
+      borderBottom: "1px solid #CCCCCC",
+      borderRadius: 0,
+      flex: 1,
+      margin: 0,
+      width: "20px",
+      "& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
+        marginLeft: 0
+      }
+    },
+    numericSpinnerDown: {
+      fontSize: "8px",
+      padding: "0 3px",
+      borderRadius: 0,
+      flex: 1,
+      margin: 0,
+      marginLeft: 0,
+      "& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
+        marginLeft: 0
+      }
     }
   };
 });
@@ -141,8 +187,27 @@ var AdvancedNumericInput = exports.AdvancedNumericInput = function AdvancedNumer
     }
   }));
 };
+var AdvancedIntegerInput = exports.AdvancedIntegerInput = function AdvancedIntegerInput(props) {
+  var integerButtons = props.integerButtons,
+    other = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex"
+    },
+    className: "InputBase-input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(AdvancedNumericInput, other), integerButtons);
+};
+var getInputComponent = function getInputComponent(isAdvancedNumericInput, decimalScale) {
+  if (isAdvancedNumericInput) {
+    if (decimalScale === 0) {
+      return AdvancedIntegerInput;
+    }
+    return AdvancedNumericInput;
+  }
+  return undefined;
+};
 var InputBase = function InputBase(_ref) {
-  var _inputProps$get;
+  var _inputProps$get, _numericInputProps$de;
   var inputProps = _ref.inputProps;
   if ((0, _InputBaseProps.isInputProps)(inputProps) === false) {
     throw new TypeError("inputProps property is not of type InputBaseProps");
@@ -166,8 +231,21 @@ var InputBase = function InputBase(_ref) {
   var rowsProps = inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.rows);
   var numericInputProps = (inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.numericInputProps)) || null;
   var isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
-  var inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
+  var decimalScale = (_numericInputProps$de = numericInputProps == null ? void 0 : numericInputProps.decimalScale) != null ? _numericInputProps$de : 0;
+  var inputComponent = getInputComponent(isAdvancedNumericInput, decimalScale);
   var inputControlType = isAdvancedNumericInput ? "text" : type;
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputText = _React$useState2[0],
+    setInputText = _React$useState2[1];
+  var textToDisplay = inputText != null ? inputText : value;
+  var classes = useStyles({
+    label: label,
+    errorPosition: errorPosition,
+    isAdvancedNumericInput: isAdvancedNumericInput
+  });
+  var onKeyDown = null;
+  var onWheel = null;
   if (isAdvancedNumericInput && numericInputProps) {
     Object.keys(numericInputProps).forEach(function (key) {
       if (key !== "blurFormattingSkipFixedDecimalScale") {
@@ -176,20 +254,118 @@ var InputBase = function InputBase(_ref) {
     });
   }
   if (isAdvancedNumericInput) {
-    var _numericInputProps$de;
     if (inputAttributes.max === undefined) {
       inputAttributes.max = 2147483647;
     }
     if (inputAttributes.min === undefined) {
       inputAttributes.min = -2147483648;
     }
-    var decimalScale = (_numericInputProps$de = numericInputProps == null ? void 0 : numericInputProps.decimalScale) != null ? _numericInputProps$de : 0;
     var lengthForMin = Math.trunc(inputAttributes.min).toString().length;
     var lengthForMax = Math.trunc(inputAttributes.max).toString().length;
     inputAttributes.maxLength = Math.max(lengthForMin, lengthForMax) + (decimalScale > 0 ? decimalScale + 1 : 0);
     inputAttributes.isAllowed = function (val) {
       return val.value === "" || val.value === "-" || val.value !== null;
     };
+    if (decimalScale === 0 && !disabled) {
+      var getInitialNumericValue = function getInitialNumericValue() {
+        if (0 >= inputAttributes.min && 0 <= inputAttributes.max) {
+          return 0;
+        }
+        if (Math.abs(inputAttributes.min) < Math.abs(inputAttributes.max)) {
+          return inputAttributes.min;
+        }
+        return inputAttributes.max;
+      };
+      var increaseNumericValue = function increaseNumericValue() {
+        if (textToDisplay) {
+          var currentValue = parseInt(textToDisplay, 10);
+          if (currentValue + 1 <= inputAttributes.max) {
+            setInputText((currentValue + 1).toString());
+          }
+        } else {
+          var _currentValue = getInitialNumericValue();
+          if (_currentValue === 0 && _currentValue + 1 <= inputAttributes.max) {
+            _currentValue++;
+          }
+          setInputText(_currentValue.toString());
+        }
+      };
+      var decreaseNumericValue = function decreaseNumericValue() {
+        if (textToDisplay) {
+          var currentValue = parseInt(textToDisplay, 10);
+          if (currentValue - 1 >= inputAttributes.min) {
+            setInputText((currentValue - 1).toString());
+          }
+        } else {
+          var _currentValue2 = getInitialNumericValue();
+          if (_currentValue2 === 0 && _currentValue2 - 1 >= inputAttributes.min) {
+            _currentValue2--;
+          }
+          setInputText(_currentValue2.toString());
+        }
+      };
+      var focusInput = function focusInput(target) {
+        target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
+      };
+      inputAttributes.integerButtons = /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.numericSpinnerContainer
+      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+        className: classes.numericSpinnerUp,
+        tabIndex: "-1",
+        "data-qa": "increase",
+        disabled: disabled,
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        } // prevent the button from stealing focus
+        ,
+        onClick: function onClick(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          increaseNumericValue();
+          focusInput(event.target);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        id: "chevron-up"
+      })), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+        className: classes.numericSpinnerDown,
+        tabIndex: "-1",
+        "data-qa": "decrease",
+        disabled: disabled,
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        } // prevent the button from stealing focus
+        ,
+        onClick: function onClick(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          decreaseNumericValue();
+          focusInput(event.target);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        id: "chevron-down"
+      })));
+      onKeyDown = function onKeyDown(event) {
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          event.stopPropagation();
+          increaseNumericValue();
+        }
+        // Note Alex20260119: using an 'else if' caused issue with code coverage
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          event.stopPropagation();
+          decreaseNumericValue();
+        }
+      };
+      onWheel = function onWheel(event) {
+        if (event.deltaY < 0) {
+          increaseNumericValue();
+        } else {
+          decreaseNumericValue();
+        }
+        focusInput(event.target);
+      };
+    }
   }
   var defaultRows = 4;
   var rows = rowsProps;
@@ -200,10 +376,6 @@ var InputBase = function InputBase(_ref) {
     // causing onBlur to never fire
     item.target.focus();
   };
-  var classes = useStyles({
-    label: label,
-    errorPosition: errorPosition
-  });
   var onChangeHandler = function onChangeHandler(event) {
     if (event.persist) {
       event.persist();
@@ -245,11 +417,6 @@ var InputBase = function InputBase(_ref) {
   };
   var inputBaseInputStyle = inputProps == null ? void 0 : inputProps.getStyle(_InputBaseProps.default.ruleNames.input);
   var errorTextStyle = inputProps == null ? void 0 : inputProps.getStyle(_InputBaseProps.default.ruleNames.errorText);
-  var _React$useState = _react.default.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputText = _React$useState2[0],
-    setInputText = _React$useState2[1];
-  var textToDisplay = inputText != null ? inputText : value;
   _react.default.useEffect(function () {
     if (inputText === null || window.bypassDebounce === true) {
       return;
@@ -271,6 +438,19 @@ var InputBase = function InputBase(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputText, metadata, timeoutDelay, update, value]);
+  if (onKeyDown) {
+    if (inputAttributes.onKeyDown) {
+      var originalKeyDown = inputAttributes.onKeyDown;
+      inputAttributes.onKeyDown = function (event) {
+        originalKeyDown(event);
+        if (!event.isDefaultPrevented()) {
+          onKeyDown(event);
+        }
+      };
+    } else {
+      inputAttributes.onKeyDown = onKeyDown;
+    }
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -291,6 +471,7 @@ var InputBase = function InputBase(_ref) {
     placeholder: placeholder,
     value: textToDisplay,
     fullWidth: true,
+    onWheel: onWheel,
     onChange: function onChange(event) {
       return onChangeHandler(event);
     },
@@ -308,10 +489,10 @@ var InputBase = function InputBase(_ref) {
     className: (0, _classnames.default)(classes.errorText, errorTextStyle)
   }, error));
 };
-__signature__(InputBase, "useStyles{classes}\nuseRef{timerId}\nuseEffect{}\nuseState{[inputText, setInputText](null)}\nuseEffect{}", function () {
+__signature__(InputBase, "useState{[inputText, setInputText](null)}\nuseStyles{classes}\nuseRef{timerId}\nuseEffect{}\nuseEffect{}", function () {
   return [useStyles];
 });
-__signature__(InputBase, "useStyles{classes}\nuseRef{timerId}\nuseEffect{}\nuseState{[inputText, setInputText](null)}\nuseEffect{}", function () {
+__signature__(InputBase, "useState{[inputText, setInputText](null)}\nuseStyles{classes}\nuseRef{timerId}\nuseEffect{}\nuseEffect{}", function () {
   return [useStyles];
 });
 var compareInputBase = function compareInputBase(prev, next) {
@@ -328,6 +509,8 @@ var _default3 = exports.default = _default2;
   }
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(AdvancedNumericInput, "AdvancedNumericInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(AdvancedIntegerInput, "AdvancedIntegerInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(getInputComponent, "getInputComponent", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(InputBase, "InputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(compareInputBase, "compareInputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
@@ -345,6 +528,8 @@ var _default3 = exports.default = _default2;
   }
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(AdvancedNumericInput, "AdvancedNumericInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(AdvancedIntegerInput, "AdvancedIntegerInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(getInputComponent, "getInputComponent", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(InputBase, "InputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(compareInputBase, "compareInputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.99.0-dev.3",
+	"version": "5.99.0-dev.4",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.js

@@ -165,7 +165,7 @@ const StepperModal = ({
 						<FormattedMessage {...sharedMessages.cancel} />
 					</Button>
 
-					{currentStep < steps.length - 1 &&
+					{(currentStep < steps.length - 1 || steps[currentStep]?.isIntermediate) &&
 						(steps[currentStep]?.actions?.length > 0 ? (
 							steps[currentStep].actions.map(action => (
 								<Button
@@ -191,7 +191,7 @@ const StepperModal = ({
 							</Button>
 						))}
 
-					{currentStep === steps.length - 1 && (
+					{currentStep === steps.length - 1 && !steps[currentStep]?.isIntermediate && (
 						<Button
 							variant="contained"
 							color="primary"

package/src/components/MaterialUI/DataDisplay/PredefinedElements/StepperModal.test.js

@@ -335,6 +335,80 @@ describe("StepperModal", () => {
 		expect(okCallback, "was called");
 	});
 
+	it("Renders StepperModal correctly without confirm button for an intermediate step", () => {
+		const open = true;
+		const title = "title";
+		const backdropClickCallback = jest.fn();
+		const okCallback = jest.fn();
+		const cancelCallback = jest.fn();
+		const modalProps = new ModalProps();
+		const actions = [
+			{
+				value: "first value",
+				label: "first action",
+				Handler: () => {},
+			},
+			{
+				value: "second value",
+				label: "second action",
+				Handler: () => {},
+			},
+		];
+		const steps = [{ title: "step1", content: <div>content</div>, actions, isIntermediate: true }];
+
+		const titleComponent = (
+			<div>
+				<div>{title}</div>
+				<div>step1</div>
+			</div>
+		);
+		const messageComponent = <div>{steps[0].content}</div>;
+
+		modalProps.set(ModalProps.propNames.title, titleComponent);
+		modalProps.set(ModalProps.propNames.open, open);
+		modalProps.set(ModalProps.propNames.backdropClickCallback, backdropClickCallback);
+		modalProps.set(ModalProps.propNames.type, "wide");
+
+		const actionPanel = (
+			<div>
+				<div></div>
+				<div>
+					<Button variant="outlined" disabled={false} onClick={() => cancelCallback()}>
+						{sharedMessages.cancel.defaultMessage}
+					</Button>
+					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
+						first action
+					</Button>
+					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
+						second action
+					</Button>
+				</div>
+			</div>
+		);
+
+		modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
+
+		const component = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<StepperModal
+					steps={steps}
+					title={title}
+					open={open}
+					confirmCallback={okCallback}
+					closeCallback={cancelCallback}
+				/>
+			</IntlProvider>
+		);
+
+		const expected = (
+			<IntlProvider locale="en-US" messages={messages}>
+				<Modal message={messageComponent} modalProps={modalProps} />
+			</IntlProvider>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
 	it("Render closed modal", () => {
 		const open = false;
 

package/src/components/MaterialUI/Inputs/InputBase.js

@@ -5,6 +5,8 @@ import InputBaseProps, { isInputProps } from "./InputBaseProps";
 import classNames from "classnames";
 import { NumericFormat, numericFormatter } from "react-number-format";
 import { trimSpacesAndLeadingZeros } from "../../../utils/inputHelper";
+import Icon from "../DataDisplay/Icon";
+import IconButton from "@material-ui/core/IconButton";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -39,11 +41,25 @@ export const useStyles = makeStyles(theme => ({
 		maxWidth: "unset",
 		minWidth: 0,
 		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
-		borderRadius: props => (props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5)),
+		borderRadius: props => {
+			const topLeft = props.label ? 0 : 0.5;
+			const topRight = props.isAdvancedNumericInput ? 0 : 0.5;
+			const bottomRight = topRight;
+			const bottomLeft = topLeft;
+
+			return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
+		},
 		paddingLeft: theme.spacing(0.85),
 		"&:focus, &:active": {
 			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
-			borderRadius: props => (props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5)),
+			borderRadius: props => {
+				const topLeft = props.label ? 0 : 0.5;
+				const topRight = props.isAdvancedNumericInput ? 0 : 0.5;
+				const bottomRight = topRight;
+				const bottomLeft = topLeft;
+
+				return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
+			},
 		},
 	},
 	errorInput: {
@@ -79,6 +95,41 @@ export const useStyles = makeStyles(theme => ({
 	inputMultiline: {
 		padding: theme.spacing(0.6, 0.6, 0.6, 0.85),
 	},
+	numericSpinnerContainer: {
+		display: "flex",
+		backgroundColor: theme.palette.grey.light,
+		flexDirection: "column",
+		borderTopLeftRadius: 0,
+		borderBottomLeftRadius: 0,
+		borderTopRightRadius: theme.shape.borderRadius,
+		borderBottomRightRadius: theme.shape.borderRadius,
+		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
+		padding: 0,
+		margin: "0 0 0 -1px",
+	},
+	numericSpinnerUp: {
+		fontSize: "8px",
+		padding: "0 3px",
+		borderBottom: "1px solid #CCCCCC",
+		borderRadius: 0,
+		flex: 1,
+		margin: 0,
+		width: "20px",
+		"& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
+			marginLeft: 0,
+		},
+	},
+	numericSpinnerDown: {
+		fontSize: "8px",
+		padding: "0 3px",
+		borderRadius: 0,
+		flex: 1,
+		margin: 0,
+		marginLeft: 0,
+		"& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
+			marginLeft: 0,
+		},
+	},
 }));
 
 export const AdvancedNumericInput = props => {
@@ -102,6 +153,29 @@ export const AdvancedNumericInput = props => {
 	);
 };
 
+export const AdvancedIntegerInput = props => {
+	const { integerButtons, ...other } = props;
+
+	return (
+		<div style={{ display: "flex" }} className="InputBase-input-wrapper">
+			<AdvancedNumericInput {...other} />
+			{integerButtons}
+		</div>
+	);
+};
+
+const getInputComponent = (isAdvancedNumericInput, decimalScale) => {
+	if (isAdvancedNumericInput) {
+		if (decimalScale === 0) {
+			return AdvancedIntegerInput;
+		}
+
+		return AdvancedNumericInput;
+	}
+
+	return undefined;
+};
+
 const InputBase = ({ inputProps }) => {
 	if (isInputProps(inputProps) === false) {
 		throw new TypeError("inputProps property is not of type InputBaseProps");
@@ -127,8 +201,15 @@ const InputBase = ({ inputProps }) => {
 	const numericInputProps = inputProps?.get(InputBaseProps.propNames.numericInputProps) || null;
 
 	const isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
-	const inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
+	const decimalScale = numericInputProps?.decimalScale ?? 0;
+	const inputComponent = getInputComponent(isAdvancedNumericInput, decimalScale);
 	const inputControlType = isAdvancedNumericInput ? "text" : type;
+	const [inputText, setInputText] = React.useState(null);
+	const textToDisplay = inputText ?? value;
+	const classes = useStyles({ label, errorPosition, isAdvancedNumericInput });
+
+	let onKeyDown = null;
+	let onWheel = null;
 
 	if (isAdvancedNumericInput && numericInputProps) {
 		Object.keys(numericInputProps).forEach(key => {
@@ -147,8 +228,6 @@ const InputBase = ({ inputProps }) => {
 			inputAttributes.min = -2147483648;
 		}
 
-		const decimalScale = numericInputProps?.decimalScale ?? 0;
-
 		const lengthForMin = Math.trunc(inputAttributes.min).toString().length;
 		const lengthForMax = Math.trunc(inputAttributes.max).toString().length;
 
@@ -157,6 +236,115 @@ const InputBase = ({ inputProps }) => {
 		inputAttributes.isAllowed = val => {
 			return val.value === "" || val.value === "-" || val.value !== null;
 		};
+
+		if (decimalScale === 0 && !disabled) {
+			const getInitialNumericValue = () => {
+				if (0 >= inputAttributes.min && 0 <= inputAttributes.max) {
+					return 0;
+				}
+
+				if (Math.abs(inputAttributes.min) < Math.abs(inputAttributes.max)) {
+					return inputAttributes.min;
+				}
+
+				return inputAttributes.max;
+			};
+
+			const increaseNumericValue = () => {
+				if (textToDisplay) {
+					const currentValue = parseInt(textToDisplay, 10);
+					if (currentValue + 1 <= inputAttributes.max) {
+						setInputText((currentValue + 1).toString());
+					}
+				} else {
+					let currentValue = getInitialNumericValue();
+					if (currentValue === 0 && currentValue + 1 <= inputAttributes.max) {
+						currentValue++;
+					}
+					setInputText(currentValue.toString());
+				}
+			};
+			const decreaseNumericValue = () => {
+				if (textToDisplay) {
+					const currentValue = parseInt(textToDisplay, 10);
+					if (currentValue - 1 >= inputAttributes.min) {
+						setInputText((currentValue - 1).toString());
+					}
+				} else {
+					let currentValue = getInitialNumericValue();
+					if (currentValue === 0 && currentValue - 1 >= inputAttributes.min) {
+						currentValue--;
+					}
+					setInputText(currentValue.toString());
+				}
+			};
+
+			const focusInput = target => {
+				target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
+			};
+
+			inputAttributes.integerButtons = (
+				<div className={classes.numericSpinnerContainer}>
+					<IconButton
+						className={classes.numericSpinnerUp}
+						tabIndex="-1"
+						data-qa="increase"
+						disabled={disabled}
+						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
+						onClick={event => {
+							event.preventDefault();
+							event.stopPropagation();
+							increaseNumericValue();
+							focusInput(event.target);
+						}}
+					>
+						<Icon id="chevron-up" />
+					</IconButton>
+
+					<IconButton
+						className={classes.numericSpinnerDown}
+						tabIndex="-1"
+						data-qa="decrease"
+						disabled={disabled}
+						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
+						onClick={event => {
+							event.preventDefault();
+							event.stopPropagation();
+							decreaseNumericValue();
+							focusInput(event.target);
+						}}
+					>
+						<Icon id="chevron-down" />
+					</IconButton>
+				</div>
+			);
+
+			onKeyDown = event => {
+				if (event.key === "ArrowUp") {
+					event.preventDefault();
+					event.stopPropagation();
+
+					increaseNumericValue();
+				}
+				// Note Alex20260119: using an 'else if' caused issue with code coverage
+				if (event.key === "ArrowDown") {
+					event.preventDefault();
+					event.stopPropagation();
+
+					decreaseNumericValue();
+				}
+			};
+
+			onWheel = event => {
+				if (event.deltaY < 0) {
+					increaseNumericValue();
+				} else {
+					decreaseNumericValue();
+				}
+
+				focusInput(event.target);
+			};
+		}
 	}
 
 	const defaultRows = 4;
@@ -170,7 +358,6 @@ const InputBase = ({ inputProps }) => {
 		// causing onBlur to never fire
 		item.target.focus();
 	};
-	const classes = useStyles({ label, errorPosition });
 
 	const onChangeHandler = event => {
 		if (event.persist) {
@@ -222,8 +409,6 @@ const InputBase = ({ inputProps }) => {
 
 	const inputBaseInputStyle = inputProps?.getStyle(InputBaseProps.ruleNames.input);
 	const errorTextStyle = inputProps?.getStyle(InputBaseProps.ruleNames.errorText);
-	const [inputText, setInputText] = React.useState(null);
-	const textToDisplay = inputText ?? value;
 
 	React.useEffect(() => {
 		if (inputText === null || window.bypassDebounce === true) {
@@ -249,6 +434,21 @@ const InputBase = ({ inputProps }) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [inputText, metadata, timeoutDelay, update, value]);
 
+	if (onKeyDown) {
+		if (inputAttributes.onKeyDown) {
+			const originalKeyDown = inputAttributes.onKeyDown;
+			inputAttributes.onKeyDown = event => {
+				originalKeyDown(event);
+
+				if (!event.isDefaultPrevented()) {
+					onKeyDown(event);
+				}
+			};
+		} else {
+			inputAttributes.onKeyDown = onKeyDown;
+		}
+	}
+
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
@@ -267,6 +467,7 @@ const InputBase = ({ inputProps }) => {
 					placeholder={placeholder}
 					value={textToDisplay}
 					fullWidth={true}
+					onWheel={onWheel}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}
 					inputProps={inputAttributes}

package/src/components/MaterialUI/Inputs/InputBase.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
-import InputBase, { AdvancedNumericInput } from "./InputBase";
+import InputBase, { AdvancedIntegerInput, AdvancedNumericInput } from "./InputBase";
 import InputBaseMUI from "@material-ui/core/InputBase";
 import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
@@ -317,7 +317,7 @@ describe("InputBase Component", () => {
 	});
 });
 
-describe("InputBase component debouce", () => {
+describe("InputBase component debounce", () => {
 	const clock = sinon.useFakeTimers();
 	let update, container;
 
@@ -399,7 +399,7 @@ describe("AdvancedNumericInput", () => {
 		container = null;
 	});
 
-	it("Renders InputBase component as advanced numeric input", () => {
+	it("Renders InputBase component as advanced numeric input with decimals", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
 		const aValue = "value";
@@ -408,6 +408,7 @@ describe("AdvancedNumericInput", () => {
 		inputProps.set(InputBaseProps.propNames.value, aValue);
 		inputProps.set(InputBaseProps.propNames.label, aLabel);
 		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
 
 		const component = <InputBase inputProps={inputProps} />;
 
@@ -417,6 +418,24 @@ describe("AdvancedNumericInput", () => {
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
 
+	it("Renders InputBase component as advanced numeric input without decimals", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+		const expected = <InputBaseMUI value={aValue} title="" inputComponent={AdvancedIntegerInput} />;
+
+		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
+	});
+
 	it("Renders InputBase component as advanced numeric input with custom numeric props", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
@@ -946,4 +965,463 @@ describe("AdvancedNumericInput", () => {
 
 		expect(update, "to have calls satisfying", [{ args: ["", metadata] }]);
 	});
+
+	it("Change advanced numeric input value with decimal does not have the spinner buttons", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']");
+		expect(btn.length, "to be", 0);
+	});
+
+	it("Disabled advanced numeric input value without decimals should not have the increase/decrease buttons", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.disabled, true);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		expect(btn.length, "to equal", 0);
+	});
+
+	it("Advanced numeric input value without decimals, simulate onMouseDown to make code coverage happy", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btnIncrease = mountedComponent.find("[data-qa='increase']").hostNodes();
+		const btnDecrease = mountedComponent.find("[data-qa='decrease']").hostNodes();
+
+		btnIncrease.simulate("mouseDown");
+		btnDecrease.simulate("mouseDown");
+	});
+
+	it("Advanced numeric input value without decimals but with custom onKeyDown with prevent default", () => {
+		const keydownSpy = sinon.stub().callsFake(e => {
+			e.preventDefault();
+		});
+
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(keydownSpy, "was called once");
+		expect(update, "was not called");
+	});
+
+	it("Advanced numeric input value without decimals but with custom onKeyDown without prevent default", () => {
+		const keydownSpy = sinon.stub().callsFake(e => {});
+
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(keydownSpy, "was called once");
+		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value with increase button", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
+	});
+
+	it("Change advanced numeric input value, 1 initial value with increase button", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "1";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["2", null] }]);
+	});
+
+	it("Change advanced numeric input value, 10 initial value with max 11 with increase button", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "10";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["11", null] }]);
+	});
+
+	it("Change advanced numeric input value, 11 initial value with max 11 with increase button stays at 11", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "11";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "was not called");
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, increase button set value to 5", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=-15, max=-5, increase button set value to -5", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -15, max: -5 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["-5", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, increase button set value to 5", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, key up set value to 1", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, scroll up set value to 1", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("wheel", { deltaY: -100 });
+
+		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value with decrease button", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["-1", null] }]);
+	});
+
+	it("Change advanced numeric input value, -1 initial value with decrease button", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "-1";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["-2", null] }]);
+	});
+
+	it("Change advanced numeric input value, -10 initial value with min 11 with decrease button", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "-10";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["-11", null] }]);
+	});
+
+	it("Change advanced numeric input value, -11 initial value with min -11 with decrease button stays at -11", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "-11";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "was not called");
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, decrease button should set to 5", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=-15, max=-5, decrease button set value to -5", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -15, max: -5 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["-5", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, decrease button set value to 5", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
+		btn.simulate("click");
+
+		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, key down set value to 1", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowDown" });
+
+		expect(update, "to have calls satisfying", [{ args: ["-1", null] }]);
+	});
+
+	it("Change advanced numeric input value, empty initial value, min=5, max=15, scroll down set value to 1", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("wheel", { deltaY: 100 });
+
+		expect(update, "to have calls satisfying", [{ args: ["-1", null] }]);
+	});
 });