@oliasoft-open-source/react-ui-library 4.8.2 → 4.9.0-beta-2

package/dist/index.d.ts

@@ -904,6 +904,7 @@ declare interface INumberInputCell extends TCommonCell {
     left?: boolean;
     validationCallback?: TEmpty;
     allowEmpty?: boolean;
+    enableCosmeticRounding: boolean;
     enableDisplayRounding: boolean;
     roundDisplayValue: (value: TStringOrNumber) => TStringOrNumber;
 }
@@ -932,6 +933,7 @@ export declare interface INumberInputProps {
     allowEmpty?: boolean;
     isInTable?: boolean;
     groupOrder?: any;
+    enableCosmeticRounding?: boolean;
     enableDisplayRounding?: boolean;
     roundDisplayValue?: (args: TStringOrNumber) => TStringOrNumber;
     disableInternalErrorValidationMessages?: boolean;
@@ -1583,6 +1585,9 @@ export declare interface IUnitInputProps {
     onClick?: MouseEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
     unitTemplate?: Record<string, any>;
+    convertBackToStorageUnit?: boolean;
+    enableCosmeticRounding?: boolean;
+    enableDisplayRounding?: boolean;
 }
 
 declare interface IUnitTable extends Omit<ITableProps['table'], 'rows'> {
@@ -1664,7 +1669,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, disableInternalErrorValidationMessages, }: 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, disableInternalErrorValidationMessages, }: INumberInputProps) => JSX_2.Element;
 
 export declare const OptionDropdown: ({ name, label, options, onChange, showHeader, maxHeight, }: IOptionDropdownProps) => ReactElement;
 
@@ -1860,7 +1865,7 @@ declare type TUnitTableCellShape = TCellShape | IUnitTableStaticCell | IUnitTabl
 
 declare type UnitContextType = any;
 
-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.js

@@ -16,7 +16,7 @@ import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
 import { noop as noop$3, 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 { roundToFixed, toString as toString$1, validateNumber, cleanNumStr, stripLeadingZeros, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, isScientificStringNum, roundToPrecision, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
+import { isScientificStringNum, roundToPrecision, roundToFixed, toString as toString$1, validateNumber, stripLeadingZeros, 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;
@@ -55696,6 +55696,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 safeToString = (value) => String(toString$1(value));
 const getStringName$1 = (name2) => {
   if (!name2) return "";
@@ -55730,6 +55735,7 @@ const NumberInput = ({
   allowEmpty = false,
   isInTable: isInTable2,
   groupOrder,
+  enableCosmeticRounding = true,
   enableDisplayRounding = false,
   roundDisplayValue,
   disableInternalErrorValidationMessages = false
@@ -55737,6 +55743,7 @@ const NumberInput = ({
   const inputRef = useRef(null);
   const [displayValue, setDisplayValue] = useState(safeToString(value));
   const [focus2, setFocus] = useState(false);
+  const [pristine, setPristine] = useState(true);
   const stringName = getStringName$1(name2);
   const validateInputValue = (value2) => {
     const validation = validateNumber(value2);
@@ -55750,7 +55757,8 @@ const NumberInput = ({
   const firstError = errors2 && errors2.length && !disableInternalErrorValidationMessages ? errors2[0] : null;
   useEffect(() => {
     setDisplayValue(safeToString(value));
-  }, [value, enableDisplayRounding]);
+    setPristine(true);
+  }, [value, enableCosmeticRounding, enableDisplayRounding]);
   useEffect(() => {
     if (!focus2 && !valid) {
       validationCallback(stringName, firstError);
@@ -55759,24 +55767,27 @@ const NumberInput = ({
     }
   }, [focus2, valid, error2]);
   const onChangeValue = (evt) => {
-    var _a2, _b;
-    const value2 = evt instanceof KeyboardEvent ? displayValue : (_a2 = evt == null ? void 0 : evt.target) == null ? void 0 : _a2.value;
-    const inputValue = cleanNumStr(
-      value2.replaceAll(" ", "").replaceAll("|", "")
-    );
-    setDisplayValue(inputValue);
-    if ((_b = validateInputValue(inputValue)) == null ? void 0 : _b.valid) {
+    if (valid && !pristine) {
       const event = {
         ...evt,
         target: {
           ...evt.target,
-          value: stripLeadingZeros(safeToString(inputValue)),
+          value: stripLeadingZeros(safeToString(displayValue)),
           name: stringName
         }
       };
       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;
@@ -55794,10 +55805,17 @@ const NumberInput = ({
   };
   const onInputBlur = (evt) => {
     setFocus(false);
+    onChangeValue(evt);
     onBlur(evt);
   };
   const shouldDisplayRound = enableDisplayRounding && !focus2 && valid;
   const valueWithDisplayRounding = shouldDisplayRound ? roundDisplayValue ? safeToString(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(
     KeyboardEventHandler,
     {
@@ -55811,11 +55829,11 @@ const NumberInput = ({
           testId,
           disabled: disabled2,
           placeholder: placeholder3,
-          value: valueWithDisplayRounding,
-          onChange: onChangeValue,
+          value: valueWithCosmeticRounding,
+          onChange: onSetValue,
           onFocus: onInputFocus,
           onBlur: onInputBlur,
-          error: firstError || error2,
+          error: !focus2 && (firstError || error2),
           warning: warning2,
           right: !left2,
           small: small2,
@@ -55854,6 +55872,7 @@ const NumberInputCell = ({ cell: cell2, testId }) => {
       tooltip: cell2.tooltip,
       validationCallback: cell2.validationCallback,
       allowEmpty: cell2.allowEmpty,
+      enableCosmeticRounding: cell2.enableCosmeticRounding,
       enableDisplayRounding: cell2.enableDisplayRounding,
       roundDisplayValue: cell2.roundDisplayValue
     }
@@ -70283,7 +70302,10 @@ const UnitInput = ({
   validationCallback = () => ({ name: "", error: null }),
   disabledValidation = false,
   allowEmpty = false,
-  autoValue
+  autoValue,
+  convertBackToStorageUnit = false,
+  enableCosmeticRounding = true,
+  enableDisplayRounding = false
 }) => {
   const context2 = useUnitContext();
   const runAfterUpdate = useRunAfterUpdate();
@@ -70348,9 +70370,10 @@ const UnitInput = ({
     const input2 = evt.target;
     const { value: inputValue, selectionStart: currentCursorPosition } = input2;
     const newValue = withUnit(inputValue, (displayLayer == null ? void 0 : displayLayer.unit) || "");
+    const returnValue = convertBackToStorageUnit ? withUnit(convertAndGetValue(newValue, propUnit), propUnit) : newValue;
     onChange({
       target: {
-        value: newValue,
+        value: returnValue,
         name: stringName2
       }
     });
@@ -70511,6 +70534,8 @@ const UnitInput = ({
             left: left2,
             allowEmpty,
             validationCallback: (_name, error22) => validationCallback(stringName, error22),
+            enableCosmeticRounding,
+            enableDisplayRounding,
             groupOrder: predefinedOptions ? "middle" : "first",
             disableInternalErrorValidationMessages
           },
@@ -70530,7 +70555,7 @@ const UnitInput = ({
               sections: alternativeUnits.map(([value2, altUnit, label2]) => {
                 const displayUnit = label2 || altUnit || "";
                 const safeValue = !isNaN(Number(value2)) ? value2 : "";
-                const displayValue = safeValue;
+                const displayValue = enableCosmeticRounding ? roundNumberCosmetic(safeValue) : safeValue;
                 return {
                   type: "Option",
                   label: displayValue,
@@ -70601,22 +70626,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) => {