orc-shared 5.10.2-dev.1 → 5.10.2-dev.2

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

@@ -9,6 +9,8 @@ var _InputBaseProps = _interopRequireWildcard(require("./InputBaseProps"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactNumberFormat = require("react-number-format");
 var _inputHelper = require("../../../utils/inputHelper");
+var _Icon = _interopRequireDefault(require("../DataDisplay/Icon"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _excluded = ["inputRef", "onChange"];
 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); }
@@ -21,17 +23,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 +78,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 +129,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
+      }
     }
   };
 });
@@ -168,6 +213,19 @@ var InputBase = function InputBase(_ref) {
   var isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
   var inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
   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 controlSpecificSuffix = null;
+  var onKeyDown = null;
+  var onWheel = null;
   if (isAdvancedNumericInput && numericInputProps) {
     Object.keys(numericInputProps).forEach(function (key) {
       if (key !== "blurFormattingSkipFixedDecimalScale") {
@@ -190,6 +248,88 @@ var InputBase = function InputBase(_ref) {
     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());
+        }
+      };
+      controlSpecificSuffix = /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.numericSpinnerContainer
+      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+        className: classes.numericSpinnerUp,
+        tabIndex: "-1",
+        "data-qa": "increase",
+        disabled: disabled,
+        onClick: function onClick() {
+          return increaseNumericValue();
+        }
+      }, /*#__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,
+        onClick: function onClick() {
+          return decreaseNumericValue();
+        }
+      }, /*#__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();
+        }
+      };
+    }
   }
   var defaultRows = 4;
   var rows = rowsProps;
@@ -200,10 +340,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 +381,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;
@@ -277,7 +408,11 @@ var InputBase = function InputBase(_ref) {
     className: classes.inputContainer
   }, label && /*#__PURE__*/_react.default.createElement("label", {
     className: "".concat(classes.prepend, " ").concat(disabled && classes.disabledPrepend)
-  }, label), /*#__PURE__*/_react.default.createElement(_InputBase.default, {
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InputBase.default, {
     classes: {
       input: (0, _classnames.default)(classes.controlInput, inputBaseInputStyle),
       error: classes.errorInput,
@@ -291,6 +426,8 @@ var InputBase = function InputBase(_ref) {
     placeholder: placeholder,
     value: textToDisplay,
     fullWidth: true,
+    onKeyDown: onKeyDown,
+    onWheel: onWheel,
     onChange: function onChange(event) {
       return onChangeHandler(event);
     },
@@ -304,14 +441,14 @@ var InputBase = function InputBase(_ref) {
     minRows: rows,
     title: tooltipText,
     autoComplete: autoComplete
-  })), error && /*#__PURE__*/_react.default.createElement("div", {
+  }), controlSpecificSuffix)), error && /*#__PURE__*/_react.default.createElement("div", {
     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) {

package/package.json

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

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

@@ -50,7 +50,9 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-US"}</label>
-						<InputBase />
+						<div>
+							<InputBase />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -61,7 +63,9 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-CA"}</label>
-						<InputBase />
+						<div>
+							<InputBase />
+						</div>
 					</div>
 				</div>
 			</div>,
@@ -69,7 +73,9 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"fr-CA"}</label>
-						<InputBase />
+						<div>
+							<InputBase />
+						</div>
 					</div>
 				</div>
 			</div>,
@@ -102,7 +108,9 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-US"}</label>
-						<InputBase />
+						<div>
+							<InputBase />
+						</div>
 					</div>
 					<div>{aError}</div>
 				</div>
@@ -114,7 +122,9 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-CA"}</label>
-						<InputBase />
+						<div>
+							<InputBase />
+						</div>
 					</div>
 				</div>
 			</div>,
@@ -122,7 +132,9 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"fr-CA"}</label>
-						<InputBase />
+						<div>
+							<InputBase />
+						</div>
 					</div>
 				</div>
 			</div>,

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 => {
@@ -129,6 +180,13 @@ const InputBase = ({ inputProps }) => {
 	const isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
 	const inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
 	const inputControlType = isAdvancedNumericInput ? "text" : type;
+	const [inputText, setInputText] = React.useState(null);
+	const textToDisplay = inputText ?? value;
+	const classes = useStyles({ label, errorPosition, isAdvancedNumericInput });
+
+	let controlSpecificSuffix = null;
+	let onKeyDown = null;
+	let onWheel = null;
 
 	if (isAdvancedNumericInput && numericInputProps) {
 		Object.keys(numericInputProps).forEach(key => {
@@ -157,6 +215,97 @@ 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());
+				}
+			};
+
+			controlSpecificSuffix = (
+				<div className={classes.numericSpinnerContainer}>
+					<IconButton
+						className={classes.numericSpinnerUp}
+						tabIndex="-1"
+						data-qa="increase"
+						disabled={disabled}
+						onClick={() => increaseNumericValue()}
+					>
+						<Icon id="chevron-up" />
+					</IconButton>
+
+					<IconButton
+						className={classes.numericSpinnerDown}
+						tabIndex="-1"
+						data-qa="decrease"
+						disabled={disabled}
+						onClick={() => decreaseNumericValue()}
+					>
+						<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();
+				}
+			};
+		}
 	}
 
 	const defaultRows = 4;
@@ -170,7 +319,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 +370,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) {
@@ -253,32 +399,37 @@ const InputBase = ({ inputProps }) => {
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
 				{label && <label className={`${classes.prepend} ${disabled && classes.disabledPrepend}`}>{label}</label>}
-				<InputBaseMUI
-					classes={{
-						input: classNames(classes.controlInput, inputBaseInputStyle),
-						error: classes.errorInput,
-						disabled: classes.disabled,
-						multiline: classes.multiline,
-						inputMultiline: classes.inputMultiline,
-					}}
-					onBlur={onBlurInternal}
-					onClick={onClick}
-					type={inputControlType}
-					placeholder={placeholder}
-					value={textToDisplay}
-					fullWidth={true}
-					onChange={event => onChangeHandler(event)}
-					error={!!error}
-					inputProps={inputAttributes}
-					inputComponent={inputComponent}
-					disabled={disabled}
-					multiline={multiline}
-					startAdornment={startAdornment}
-					endAdornment={endAdornment}
-					minRows={rows}
-					title={tooltipText}
-					autoComplete={autoComplete}
-				/>
+				<div style={{ display: "flex" }}>
+					<InputBaseMUI
+						classes={{
+							input: classNames(classes.controlInput, inputBaseInputStyle),
+							error: classes.errorInput,
+							disabled: classes.disabled,
+							multiline: classes.multiline,
+							inputMultiline: classes.inputMultiline,
+						}}
+						onBlur={onBlurInternal}
+						onClick={onClick}
+						type={inputControlType}
+						placeholder={placeholder}
+						value={textToDisplay}
+						fullWidth={true}
+						onKeyDown={onKeyDown}
+						onWheel={onWheel}
+						onChange={event => onChangeHandler(event)}
+						error={!!error}
+						inputProps={inputAttributes}
+						inputComponent={inputComponent}
+						disabled={disabled}
+						multiline={multiline}
+						startAdornment={startAdornment}
+						endAdornment={endAdornment}
+						minRows={rows}
+						title={tooltipText}
+						autoComplete={autoComplete}
+					/>
+					{controlSpecificSuffix}
+				</div>
 			</div>
 			{error && <div className={classNames(classes.errorText, errorTextStyle)}>{error}</div>}
 		</div>

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

@@ -317,7 +317,7 @@ describe("InputBase Component", () => {
 	});
 });
 
-describe("InputBase component debouce", () => {
+describe("InputBase component debounce", () => {
 	const clock = sinon.useFakeTimers();
 	let update, container;
 
@@ -946,4 +946,395 @@ 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("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] }]);
+	});
 });