@oliasoft-open-source/react-ui-library 4.6.18 → 4.7.0-beta-2

package/dist/assets/{index-DdTheZoQ.css → index-dOfLgtRX.css}

@@ -11222,9 +11222,12 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   background-color: var(--color-background-primary);
   transform: translate(-50%, -50%);
 }
-._predefinedMenuActive_1yvt4_1 input {
+._predefinedMenuActive_ye9w9_1 input {
   background: var(--color-background-disabled) !important;
 }
+._inputWrapper_ye9w9_4 {
+  flex: 1;
+}
 ._link_q42rz_1 a {
   display: flex;
   justify-content: center;

package/dist/assets/{index-3CeHq3uM.js → index-ffnttoim.js}

@@ -57242,7 +57242,7 @@ const inputDisabled$1 = "_inputDisabled_u3xdj_61";
 const hideScrollbars$1 = "_hideScrollbars_u3xdj_67";
 const cell = "_cell_u3xdj_77";
 const disabledLink = "_disabledLink_u3xdj_87";
-const inputWrapper = "_inputWrapper_u3xdj_91";
+const inputWrapper$1 = "_inputWrapper_u3xdj_91";
 const breakWord = "_breakWord_u3xdj_106";
 const inputCell = "_inputCell_u3xdj_109";
 const sliderCell = "_sliderCell_u3xdj_112";
@@ -57272,7 +57272,7 @@ const styles$9 = {
   hideScrollbars: hideScrollbars$1,
   cell,
   disabledLink,
-  inputWrapper,
+  inputWrapper: inputWrapper$1,
   breakWord,
   inputCell,
   sliderCell,
@@ -77649,10 +77649,11 @@ const styles$3 = {
   placeholderContainer,
   placeholder
 };
-requireUnits();
-const predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
+const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
+const inputWrapper = "_inputWrapper_ye9w9_4";
 const styles$2 = {
-  predefinedMenuActive
+  predefinedMenuActive,
+  inputWrapper
 };
 const Footer = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [

package/dist/global.css

@@ -11222,6 +11222,9 @@ tbody ._staticCell_u3xdj_116 ._staticCellContent_u3xdj_119 {
   background-color: var(--color-background-primary);
   transform: translate(-50%, -50%);
 }
-._predefinedMenuActive_1yvt4_1 input {
+._predefinedMenuActive_ye9w9_1 input {
   background: var(--color-background-disabled) !important;
 }
+._inputWrapper_ye9w9_4 {
+  flex: 1;
+}

package/dist/index.d.ts

@@ -900,6 +900,7 @@ declare interface INumberInputCell extends TCommonCell {
     left?: boolean;
     validationCallback?: TEmpty;
     allowEmpty?: boolean;
+    enableCosmeticRounding: boolean;
     enableDisplayRounding: boolean;
     roundDisplayValue: (value: TStringNumberNull) => TStringNumberNull;
 }
@@ -928,6 +929,7 @@ export declare interface INumberInputProps {
     allowEmpty?: boolean;
     isInTable?: boolean;
     groupOrder?: any;
+    enableCosmeticRounding?: boolean;
     enableDisplayRounding?: boolean;
     roundDisplayValue?: (args: TStringNumberNull) => TStringNumberNull;
 }
@@ -1563,7 +1565,7 @@ export declare interface IUnitInputProps {
     placeholder?: string;
     disabled?: boolean;
     disabledUnit?: boolean;
-    error?: string | null | boolean;
+    error?: string | boolean;
     left?: boolean;
     small?: boolean;
     width?: string | number;
@@ -1573,15 +1575,12 @@ export declare interface IUnitInputProps {
     noConversion?: boolean;
     doNotConvertValue?: boolean;
     testId?: string;
-    warning?: string | null;
+    warning?: string | boolean;
     predefinedOptions?: IPredefinedOption[];
     initialPredefinedOption?: boolean;
     shouldLinkAutomaticly?: boolean;
     selectedPredefinedOptionKey?: string;
-    validationCallback?: (name: string, message: string | null) => {
-        name: string;
-        error: string | null;
-    };
+    validationCallback?: (params: IUnitInputValidationCallbackPayload) => void;
     disabledValidation?: boolean;
     allowEmpty?: boolean;
     autoValue?: string;
@@ -1590,6 +1589,16 @@ export declare interface IUnitInputProps {
     onClick?: MouseEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
     unitTemplate?: Record<string, any>;
+    convertBackToStorageUnit?: boolean;
+    enableCosmeticRounding?: boolean;
+    enableDisplayRounding?: boolean;
+}
+
+declare interface IUnitInputValidationCallbackPayload {
+    name: string | {
+        fieldName: string;
+    };
+    error: string | null;
 }
 
 declare interface IUnitTable extends Omit<ITableProps['table'], 'rows'> {
@@ -1671,7 +1680,7 @@ export declare const Modal: ({ children, visible, centered, width, onEnter, onEs
 
 export declare const NativeSelect: ({ disabled, error, warning, tooltip, options, onChange, onFocus, onBlur, right, small, tabIndex, selectedOption, width, groupOrder, testId, isInTable, clearable, placeholder, hasNonExistentValue, maxTooltipWidth, borderRadius, }: INativeSelectProps) => JSX_2.Element;
 
-export declare const NumberInput: ({ name, placeholder, disabled, error, left, small, width, value, onChange, onFocus, onBlur, tabIndex, testId, tooltip, warning, validationCallback, allowEmpty, isInTable, groupOrder, enableDisplayRounding, roundDisplayValue, }: INumberInputProps) => JSX_2.Element;
+export declare const NumberInput: ({ name, placeholder, disabled, error, left, small, width, value, onChange, onFocus, onBlur, tabIndex, testId, tooltip, warning, validationCallback, allowEmpty, isInTable, groupOrder, enableCosmeticRounding, enableDisplayRounding, roundDisplayValue, }: INumberInputProps) => JSX_2.Element;
 
 export declare const OptionDropdown: ({ name, label, options, onChange, showHeader, maxHeight, }: IOptionDropdownProps) => ReactElement;
 
@@ -1852,7 +1861,7 @@ export declare type TTriggerType = 'Text' | 'Button' | 'DropDownButton' | 'Compo
 
 declare type TUnitTableCellShape = TCellShape | IUnitTableStaticCell | IUnitTableInputCell | IUnitTableNumberInputCell;
 
-export declare const UnitInput: ({ name, placeholder, disabled, disabledUnit, error, left, small, width, value, unitkey, initUnit, noConversion, onChange, onClick, onFocus, onSwitchUnit, unitTemplate, doNotConvertValue, testId, warning, predefinedOptions, initialPredefinedOption, shouldLinkAutomaticly, selectedPredefinedOptionKey, validationCallback, disabledValidation, allowEmpty, autoValue, }: IUnitInputProps) => JSX_2.Element;
+export declare const UnitInput: ({ name, placeholder, disabled, disabledUnit, error, left, small, width, value, unitkey, initUnit, noConversion, onChange, onClick, onFocus, onSwitchUnit, unitTemplate, doNotConvertValue, testId, warning, predefinedOptions, initialPredefinedOption, shouldLinkAutomaticly, selectedPredefinedOptionKey, validationCallback, disabledValidation, allowEmpty, autoValue, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, }: IUnitInputProps) => JSX_2.Element;
 
 export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, }: IUnitTableProps) => JSX_2.Element;
 

package/dist/index.html

@@ -1 +1 @@
-<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-3CeHq3uM.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-DdTheZoQ.css"></head><body><div id="content"></div></body>
+<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-ffnttoim.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-dOfLgtRX.css"></head><body><div id="content"></div></body>

package/dist/index.js

@@ -10,9 +10,8 @@ import React__default, { useContext, isValidElement, useState, useRef, useEffect
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
-import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
-import { roundToFixed, validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, isScientificStringNum, roundToPrecision, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
-import { isValueWithUnit as isValueWithUnit$1 } from "@oliasoft-open-source/units/dist/units";
+import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isEqual as isEqual$4 } from "lodash";
+import { isScientificStringNum, roundToPrecision, roundToFixed, validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, label as label$b, altUnitsList, convertAndGetValue, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -55705,7 +55704,7 @@ const inputDisabled$1 = "_inputDisabled_u3xdj_61";
 const hideScrollbars$1 = "_hideScrollbars_u3xdj_67";
 const cell = "_cell_u3xdj_77";
 const disabledLink = "_disabledLink_u3xdj_87";
-const inputWrapper = "_inputWrapper_u3xdj_91";
+const inputWrapper$1 = "_inputWrapper_u3xdj_91";
 const breakWord = "_breakWord_u3xdj_106";
 const inputCell = "_inputCell_u3xdj_109";
 const sliderCell = "_sliderCell_u3xdj_112";
@@ -55735,7 +55734,7 @@ const styles$7 = {
   hideScrollbars: hideScrollbars$1,
   cell,
   disabledLink,
-  inputWrapper,
+  inputWrapper: inputWrapper$1,
   breakWord,
   inputCell,
   sliderCell,
@@ -55791,6 +55790,11 @@ const InputCell = ({
     }
   );
 };
+const COSMETIC_ROUNDING_DEFAULT_PRECISION = 14;
+const roundNumberCosmetic = (value) => {
+  const isScientific = isScientificStringNum(value);
+  return !isScientific ? roundToPrecision(value, COSMETIC_ROUNDING_DEFAULT_PRECISION) : value;
+};
 const getStringName$1 = (name2) => {
   if (!name2)
     return "";
@@ -55825,61 +55829,57 @@ const NumberInput = ({
   allowEmpty = false,
   isInTable: isInTable2,
   groupOrder,
+  enableCosmeticRounding = true,
   enableDisplayRounding = false,
   roundDisplayValue
 }) => {
   const inputRef = useRef(null);
-  const [displayValue, setDisplayValue] = useState(value);
-  const [validationError, setValidationError] = useState(null);
+  const [displayValue, setDisplayValue] = useState(String(value));
   const [focus2, setFocus] = useState(false);
+  const [pristine, setPristine] = useState(true);
   const stringName = getStringName$1(name2);
   const validateInputValue = (value2) => {
-    let validation = validateNumber(value2);
+    const validation = validateNumber(value2);
     if (allowEmpty && value2 === "" || validation.valid) {
       return { ...validation, valid: true, errors: void 0 };
     } else {
       return validation;
     }
   };
+  const { valid, errors: errors2 } = validateInputValue(displayValue);
+  const firstError = errors2 && errors2.length ? errors2[0] : null;
   useEffect(() => {
-    const { valid, errors: errors2 } = validateInputValue(value);
-    setDisplayValue(value);
-    if (valid) {
-      setValidationError(null);
-      validationCallback(stringName, null);
-    } else {
-      const firstError = errors2 && errors2.length ? errors2[0] : null;
-      setValidationError(firstError);
+    setDisplayValue(String(value));
+  }, [value, enableCosmeticRounding, enableDisplayRounding]);
+  useEffect(() => {
+    if (!focus2 && !valid) {
       validationCallback(stringName, firstError);
+    } else {
+      validationCallback(stringName, null);
     }
-  }, [value, error2]);
-  const onSetValue = (evt) => {
-    const input2 = evt.target;
-    const { value: value2 } = input2;
-    const inputValue = cleanNumStr(
-      value2.replaceAll(" ", "").replaceAll("|", "")
-    );
-    const { valid, errors: errors2 } = validateInputValue(inputValue);
-    if (valid) {
-      const newEvent = {
+  }, [focus2, valid, error2]);
+  const onChangeValue = (evt) => {
+    if (valid && !pristine) {
+      const event = {
         ...evt,
         target: {
           ...evt.target,
-          value: inputValue,
+          value: String(displayValue),
           name: stringName
         }
       };
-      onChange(newEvent);
-      setDisplayValue(inputValue);
-      setValidationError(null);
-      validationCallback(stringName, null);
-    } else {
-      setDisplayValue(inputValue);
-      const firstError = errors2 && errors2.length ? errors2[0] : null;
-      setValidationError(firstError);
-      validationCallback(stringName, firstError);
+      onChange(event);
     }
   };
+  const onSetValue = (evt) => {
+    const input2 = evt.target;
+    const { value: value2 } = input2;
+    const inputValue = cleanNumStr(
+      value2.replaceAll(" ", "").replaceAll("|", "")
+    );
+    setDisplayValue(inputValue);
+    setPristine(false);
+  };
   useEffect(() => {
     if (inputRef && (inputRef == null ? void 0 : inputRef.current) && enableDisplayRounding && focus2) {
       const textInput = inputRef.current;
@@ -55897,33 +55897,48 @@ const NumberInput = ({
   };
   const onInputBlur = (evt) => {
     setFocus(false);
+    onChangeValue(evt);
     onBlur(evt);
   };
-  const roundedDisplayValue = !focus2 && enableDisplayRounding ? roundDisplayValue ? roundDisplayValue(displayValue) : roundToFixed(displayValue, 2) : displayValue;
+  const shouldDisplayRound = enableDisplayRounding && !focus2;
+  const valueWithDisplayRounding = shouldDisplayRound ? roundDisplayValue ? String(roundDisplayValue(displayValue)) : roundToFixed(displayValue, 2) : displayValue;
+  const displayValueEndsWithZero = !!(valueWithDisplayRounding == null ? void 0 : valueWithDisplayRounding.endsWith("0"));
+  const shouldCosmeticallyRound = enableCosmeticRounding && // only when prop is enabled
+  valueWithDisplayRounding && // not when empty typed value
+  !displayValueEndsWithZero && // not when intentionally trying to type trailing zeros as interim values (OW-17109)
+  valid;
+  const valueWithCosmeticRounding = shouldCosmeticallyRound ? roundNumberCosmetic(valueWithDisplayRounding) : valueWithDisplayRounding;
   return /* @__PURE__ */ jsx(
-    Input$1,
+    KeyboardEventHandler,
     {
-      type: "text",
-      name: stringName,
-      testId,
-      disabled: disabled2,
-      placeholder: placeholder3,
-      value: roundedDisplayValue,
-      onChange: onSetValue,
-      onFocus: onInputFocus,
-      onBlur: onInputBlur,
-      error: error2 || validationError,
-      warning: warning2,
-      right: !left2,
-      small: small2,
-      width: width2,
-      isInTable: isInTable2,
-      groupOrder,
-      tabIndex,
-      tooltip: tooltip2,
-      ref: inputRef
-    },
-    stringName
+      handleKeys: [EventKey.ENTER],
+      onKeyEvent: (_key, evt) => onChangeValue(evt),
+      children: /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          type: "text",
+          name: stringName,
+          testId,
+          disabled: disabled2,
+          placeholder: placeholder3,
+          value: valueWithCosmeticRounding,
+          onChange: onSetValue,
+          onFocus: onInputFocus,
+          onBlur: onInputBlur,
+          error: !focus2 && (firstError || error2),
+          warning: warning2,
+          right: !left2,
+          small: small2,
+          width: width2,
+          isInTable: isInTable2,
+          groupOrder,
+          tabIndex,
+          tooltip: tooltip2,
+          ref: inputRef
+        },
+        stringName
+      )
+    }
   );
 };
 const NumberInputCell = ({ cell: cell2, testId }) => {
@@ -55949,6 +55964,7 @@ const NumberInputCell = ({ cell: cell2, testId }) => {
       tooltip: cell2.tooltip,
       validationCallback: cell2.validationCallback,
       allowEmpty: cell2.allowEmpty,
+      enableCosmeticRounding: cell2.enableCosmeticRounding,
       enableDisplayRounding: cell2.enableDisplayRounding,
       roundDisplayValue: cell2.roundDisplayValue
     }
@@ -70382,45 +70398,6 @@ const getStringName = (name2) => {
   }
   return typeof name2 === "string" ? name2 : "";
 };
-const isErrorObject = (error2) => isObjectLike(error2) && has$1(error2, "message");
-const getErrorMessage = (error2) => {
-  if (typeof error2 === "string") {
-    return error2;
-  } else if (isErrorObject(error2)) {
-    return error2.message;
-  } else {
-    return null;
-  }
-};
-const hasLeadingZeroes = (value) => {
-  return value.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g)) === 0;
-};
-const validate = (value, options) => {
-  var _a;
-  const {
-    allowEmpty = false,
-    autoValue,
-    placeholder: placeholder3,
-    disabledValidation = false
-  } = options || {};
-  const stringValue = String(value);
-  if (disabledValidation || autoValue || placeholder3) {
-    return null;
-  }
-  const cleanValue = isValueWithUnit$1(stringValue) ? getValue$1(stringValue) : stringValue;
-  if (allowEmpty && cleanValue === "") {
-    return null;
-  }
-  if (hasLeadingZeroes(cleanValue)) {
-    return "Invalid number format due to leading zeroes";
-  }
-  const validationErrors = validateNumber(cleanValue);
-  if (!validationErrors.valid) {
-    const firstError = ((_a = validationErrors == null ? void 0 : validationErrors.errors) == null ? void 0 : _a[0]) ?? null;
-    return getErrorMessage(firstError);
-  }
-  return null;
-};
 const isUnitKnown = (unit2 = "") => {
   var _a;
   return (_a = KNOWN_UNITS) == null ? void 0 : _a.includes(unit2);
@@ -70429,16 +70406,18 @@ const isKnownUnit = (valueWithUnit, defaultUnit) => {
   const unitFromValue = getUnit(valueWithUnit || "");
   return isUnitKnown(defaultUnit) && isUnitKnown(unitFromValue);
 };
-const predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
+const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
+const inputWrapper = "_inputWrapper_ye9w9_4";
 const styles = {
-  predefinedMenuActive
+  predefinedMenuActive,
+  inputWrapper
 };
 const UnitInput = ({
   name: name2,
   placeholder: placeholder3 = "",
   disabled: disabled2 = false,
   disabledUnit = false,
-  error: error2 = null,
+  error: error2 = false,
   left: left2 = false,
   small: small2 = false,
   width: width2 = "100%",
@@ -70457,15 +70436,18 @@ const UnitInput = ({
   unitTemplate,
   doNotConvertValue = false,
   testId,
-  warning: warning2 = null,
+  warning: warning2 = false,
   predefinedOptions,
   initialPredefinedOption = false,
   shouldLinkAutomaticly = true,
   selectedPredefinedOptionKey,
-  validationCallback = () => ({ name: "", error: null }),
+  validationCallback,
   disabledValidation = false,
   allowEmpty = false,
-  autoValue
+  autoValue,
+  convertBackToStorageUnit = false,
+  enableCosmeticRounding = true,
+  enableDisplayRounding = false
 }) => {
   if (typeof value === "number") {
     value = `${value}`;
@@ -70494,7 +70476,6 @@ const UnitInput = ({
   );
   const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : convertedAutoValue !== "" ? { value: convertedAutoValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
   const [displayLayer, setDisplayLayer] = useState(initDisplayLayer);
-  const [validationError, setValidationError] = useState(null);
   const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(
     initialPredefinedOption ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM
   );
@@ -70527,33 +70508,16 @@ const UnitInput = ({
     const stringName2 = getStringName(name2);
     const input2 = evt.target;
     const { value: inputValue, selectionStart: currentCursorPosition } = input2;
-    const cleanInputValue = cleanNumStr(
-      inputValue.replaceAll(" ", "").replaceAll("|", "")
-    );
-    const newValue = withUnit(cleanInputValue, (displayLayer == null ? void 0 : displayLayer.unit) || "");
-    const rawValue = getValue$1(newValue);
-    const validationResult = validate(rawValue, {
-      allowEmpty,
-      autoValue,
-      placeholder: placeholder3,
-      disabledValidation
+    const newValue = withUnit(inputValue, (displayLayer == null ? void 0 : displayLayer.unit) || "");
+    const returnValue = convertBackToStorageUnit ? withUnit(convertAndGetValue(newValue, propUnit), propUnit) : newValue;
+    onChange({
+      target: {
+        value: returnValue,
+        name: stringName2
+      }
     });
-    if (validationResult === null) {
-      onChange({
-        target: {
-          value: newValue,
-          name: stringName2
-        }
-      });
-      const [val, u] = split$1(newValue);
-      setDisplayLayer({ value: val, unit: u });
-      setValidationError(null);
-      validationCallback(stringName2, null);
-    } else {
-      setDisplayLayer({ value: cleanInputValue, unit: displayLayer.unit });
-      setValidationError(validationResult);
-      validationCallback(stringName2, validationResult);
-    }
+    const [val, u] = split$1(newValue);
+    setDisplayLayer({ value: val, unit: u });
     runAfterUpdate(() => {
       input2.selectionStart = currentCursorPosition;
       input2.selectionEnd = currentCursorPosition;
@@ -70599,14 +70563,6 @@ const UnitInput = ({
         }
       }
     }
-    const cleanValue = checkAndCleanDecimalComma(propValue);
-    const errorMessage = validate(cleanValue, {
-      allowEmpty,
-      autoValue,
-      placeholder: placeholder3,
-      disabledValidation
-    });
-    setValidationError(errorMessage);
   }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
   const alternativeUnits = getAlternativeUnits();
   const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
@@ -70640,6 +70596,14 @@ const UnitInput = ({
       selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
     };
   };
+  const handleValidationCallback = (name22, error22) => {
+    if (validationCallback) {
+      validationCallback({
+        name: name22,
+        error: error22
+      });
+    }
+  };
   sectionsPredefinedMenu = [
     {
       type: MenuType.OPTION,
@@ -70696,10 +70660,9 @@ const UnitInput = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
-          Input$1,
+        /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
+          NumberInput,
           {
-            type: "text",
             name: stringName,
             testId,
             disabled: disabled2,
@@ -70712,12 +70675,17 @@ const UnitInput = ({
             value: displayLayer.value,
             onChange: onSetValue,
             onFocus,
-            error: error2 || validationError,
+            error: error2,
             warning: warning2,
-            right: !left2
+            left: left2,
+            allowEmpty,
+            validationCallback: handleValidationCallback,
+            enableCosmeticRounding,
+            enableDisplayRounding,
+            groupOrder: predefinedOptions ? "middle" : "first"
           },
           stringName
-        ),
+        ) }),
         displayUnitLabel && (noConvert || !knownUnit ? /* @__PURE__ */ jsx(InputGroupAddon, { groupOrder: "last", children: displayUnitLabel }) : /* @__PURE__ */ jsx(
           Menu,
           {
@@ -70731,9 +70699,11 @@ const UnitInput = ({
               small: small2,
               sections: alternativeUnits.map(([value2, altUnit, label2]) => {
                 const displayUnit = label2 || altUnit || "";
+                const safeValue = !isNaN(Number(value2)) ? value2 : "";
+                const displayValue = enableCosmeticRounding ? roundNumberCosmetic(safeValue) : safeValue;
                 return {
                   type: "Option",
-                  label: !isNaN(Number(value2)) ? value2 : "",
+                  label: displayValue,
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
@@ -70801,22 +70771,12 @@ const convertVisibleRows = ({
         const storageUnit = storageUnits[unitKey];
         const unitChanged = selectedUnit !== storageUnit;
         const convertedValue = unitChanged ? convertAndGetValue(value, selectedUnit, storageUnit) : cell2.value;
-        const isScientific = isScientificStringNum(value);
-        const displayValue = enableCosmeticRounding && (unitChanged || !isScientific) ? (
-          /*
-           Optionally do Excel-style "cosmetic rounding" of display values (only if enableCosmeticRounding prop on)
-           This means rounding to slightly less precision than the underlying floating-point number type, to
-           resolve floating-point "rounding noise" associated with storing values in one unit but converting
-           and displaying them in another unit. This solution was evaluated by Tools Team in relation to
-           tickets OW-10614 and OW-15745.
-          */
-          roundToPrecision(convertedValue, 14)
-        ) : convertedValue;
-        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(displayValue) : displayValue;
+        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue) : convertedValue;
         return {
           ...cell2,
           value: formattedDisplayValue,
-          enableCosmeticRounding,
+          enableCosmeticRounding: enableCosmeticRounding && unitChanged,
+          //todo: why did we need to check unitChanged here? (original rationale)
           enableDisplayRounding,
           roundDisplayValue,
           onChange: (evt) => {