@oliasoft-open-source/react-ui-library 4.11.0-beta-3 → 4.12.0-beta-1

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 { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, roundToFixed, validateNumber, cleanNumStr, stripLeadingZeros, unitFromQuantity, ALT_UNITS, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, label as label$b, isValidNum, getAltUnitsListByQuantity, altUnitsList, convertAndGetValue, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
+import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, roundToFixed, validateNumber, cleanNumStr, stripLeadingZeros, unitFromQuantity, getUnit, ALT_UNITS, isValueWithUnit, getValue as getValue$1, withUnit, convertSamePrecision, convertAndGetValue, KNOWN_UNITS, split as split$1, label as label$b, isValidNum, getAltUnitsListByQuantity, altUnitsList, 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;
@@ -55766,7 +55766,6 @@ const NumberInput = ({
   };
   const onInputBlur = (evt) => {
     setFocus(false);
-    onChangeValue(evt);
     onBlur(evt);
   };
   const shouldDisplayRound = enableDisplayRounding && !focus2 && valid;
@@ -70176,6 +70175,10 @@ var PredefinedOptionsMenuState = /* @__PURE__ */ ((PredefinedOptionsMenuState2)
 const isWrongValue = (val) => {
   return val === "undefined" || val === void 0 || val === "" || val === "null" || val === null || val === "NaN" || isNaN(val);
 };
+const isValueWithUnknownUnit = (value) => {
+  if (!value) return false;
+  return Boolean(getUnit(value));
+};
 const checkConversion = ({
   value,
   unitkey,
@@ -70194,31 +70197,43 @@ const checkConversion = ({
   }
   return true;
 };
-const convertUnit = (stringValue = "", toUnit, unitkey, defaultFromUnit = "", doNotConvertValue = false) => {
+const convertUnit = ({
+  value: inputValue,
+  unitkey,
+  toUnit,
+  fromUnit,
+  doNotConvertValue = false,
+  exactPrecision = false
+}) => {
   var _a2;
-  if (doNotConvertValue) return stringValue;
-  if (!((_a2 = validateNumber(stringValue)) == null ? void 0 : _a2.valid)) return;
-  if (toUnit && !isWrongValue(stringValue)) {
-    try {
-      const valueWithUnit = isValueWithUnit(stringValue) ? stringValue : withUnit(stringValue, defaultFromUnit);
-      const shouldConvert = checkConversion({
-        value: valueWithUnit,
-        toUnit,
-        unitkey
-      });
-      if (shouldConvert) {
-        const result = convertSamePrecision(valueWithUnit, toUnit);
-        return getValue$1(result);
-      }
-      return getValue$1(valueWithUnit);
-    } catch (e2) {
+  const value = isValueWithUnit(inputValue) ? getValue$1(inputValue) : inputValue;
+  if (doNotConvertValue) {
+    return { value, error: null };
+  }
+  const defaultFromUnit = fromUnit || (isValueWithUnit(inputValue) ? getUnit(inputValue) : unitFromQuantity(unitkey));
+  if (!((_a2 = validateNumber(value)) == null ? void 0 : _a2.valid)) {
+    return { value: void 0, error: "Invalid number format" };
+  }
+  if (!toUnit) {
+    return { value: void 0, error: "Target unit is missing" };
+  }
+  if (!defaultFromUnit) {
+    return { value: void 0, error: "Source unit is missing" };
+  }
+  if (isWrongValue(value)) {
+    return { value: void 0, error: "Value is invalid for conversion" };
+  }
+  try {
+    const valueWithUnit = withUnit(value, defaultFromUnit);
+    if (checkConversion({ value: valueWithUnit, toUnit, unitkey })) {
+      const result = exactPrecision ? convertSamePrecision(valueWithUnit, toUnit) : convertAndGetValue(valueWithUnit, toUnit);
+      return { value: getValue$1(safeToString(result)), error: null };
     }
+    return { value: getValue$1(valueWithUnit), error: null };
+  } catch (e2) {
+    return { value: void 0, error: "Conversion not possible" };
   }
 };
-const isValueWithUnknownUnit = (value) => {
-  if (!value) return false;
-  return Boolean(getUnit(value));
-};
 const safeConvertValue = ({
   value = "",
   toUnit,
@@ -70230,18 +70245,19 @@ const safeConvertValue = ({
   const rawValue = getValue$1(value);
   const isInvalidInput = isWrongValue(rawValue);
   if (isInvalidInput) {
-    return rawValue;
+    return { value: rawValue };
   }
   if (!isWithUnit) {
-    return value;
+    return { value };
   }
-  return convertUnit(
-    rawValue,
-    toUnit,
+  return convertUnit({
+    value,
     unitkey,
-    defaultFromUnit,
-    doNotConvertValue
-  );
+    toUnit,
+    fromUnit: defaultFromUnit,
+    doNotConvertValue,
+    exactPrecision: true
+  });
 };
 const getStringName = (name2) => {
   if (isObject$5(name2) && !isArray$1(name2) && !isFunction$3(name2)) {
@@ -70268,6 +70284,95 @@ const initializeContext = (context2) => {
     UnitContext = context2;
   }
 };
+const PredefinedOptionsMenu = ({
+  predefinedOptions,
+  value,
+  onPredefinedOptionSelect,
+  disabled: disabled2,
+  initialPredefinedOption,
+  predefinedOptionsMenuState,
+  setPredefinedOptionsMenuState,
+  testId
+}) => {
+  const [foundPredefinedMenuOption, setFoundPredefinedMenuOption] = useState(void 0);
+  const createPredefinedOption = (el2) => {
+    const elementValue = (el2 == null ? void 0 : el2.value) ? el2.value : "";
+    const [inputValue = "", unit2 = ""] = isValueWithUnit(elementValue) ? split$1(elementValue) : [elementValue];
+    return {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        const validation = validateNumber(inputValue);
+        if (validation.valid && !disabled2) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+          onPredefinedOptionSelect(elementValue);
+          setFoundPredefinedMenuOption(el2);
+        }
+      },
+      label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Text, { children: el2.label }),
+        /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
+      ] }),
+      description: isValueWithUnit(elementValue) ? `${inputValue} ${unit2}` : elementValue,
+      selected: value === elementValue && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
+    };
+  };
+  const initialPredefinedOptionObject = useMemo$1(() => {
+    return predefinedOptions.find(
+      (option2) => option2.value === initialPredefinedOption || option2.label === initialPredefinedOption || option2.valueKey === initialPredefinedOption
+    );
+  }, [initialPredefinedOption, predefinedOptions]);
+  useEffect(() => {
+    if (initialPredefinedOptionObject) {
+      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+      setFoundPredefinedMenuOption(initialPredefinedOptionObject);
+      onPredefinedOptionSelect(initialPredefinedOptionObject.value);
+    }
+  }, [initialPredefinedOptionObject]);
+  const sectionsPredefinedMenu = [
+    {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        if (!disabled2) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
+        }
+      },
+      label: "Custom",
+      selected: predefinedOptionsMenuState === PredefinedOptionsMenuState.CUSTOM
+    },
+    ...predefinedOptions.map(createPredefinedOption)
+  ];
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      text: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : "",
+      children: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          testId: testId && `${testId}-predefined-menu`,
+          maxHeight: 380,
+          groupOrder: "first",
+          disabled: disabled2,
+          menu: {
+            colored: true,
+            trigger: "Component",
+            component: /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                groupOrder: "first",
+                active: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED,
+                icon: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? "link" : "unlink"
+              }
+            ),
+            small: true,
+            sections: sectionsPredefinedMenu
+          }
+        }
+      )
+    }
+  );
+};
 const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
 const inputWrapper = "_inputWrapper_ye9w9_4";
 const styles = {
@@ -70292,28 +70397,24 @@ const UnitInput = ({
   onFocus = noop$3,
   onSwitchUnit = noop$3,
   unitTemplate,
-  doNotConvertValue = false,
   testId,
   warning: warning2 = null,
   predefinedOptions,
-  initialPredefinedOption = false,
-  shouldLinkAutomaticly = true,
-  selectedPredefinedOptionKey,
+  initialPredefinedOption = "",
   validationCallback = () => ({ name: "", error: null }),
   disabledValidation = false,
   allowEmpty = false,
-  autoValue,
   convertBackToStorageUnit = false,
   enableCosmeticRounding = true,
   enableDisplayRounding = false
 }) => {
   const context2 = useUnitContext();
   const runAfterUpdate = useRunAfterUpdate();
+  const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(PredefinedOptionsMenuState.CUSTOM);
   if (typeof value === "number") {
     value = `${value}`;
   }
   const [propValue = "", propUnit = ""] = value !== void 0 ? split$1(value) : [];
-  const propAutoUnit = autoValue ? getUnit(autoValue) : "";
   const preferredUnit = useMemo$1(
     () => getPreferredUnit(unitkey, unitTemplate || (context2 == null ? void 0 : context2.unitTemplate)),
     [unitkey, unitTemplate, context2 == null ? void 0 : context2.unitTemplate]
@@ -70321,41 +70422,19 @@ const UnitInput = ({
   const knownUnit = isKnownUnit(value, preferredUnit);
   const initDisplayUnit = initUnit || preferredUnit || propUnit;
   const previousInitUnit = usePrevious(initDisplayUnit);
-  const convertedValue = safeConvertValue({
+  const { value: convertedValue } = safeConvertValue({
     value,
     toUnit: initDisplayUnit,
     unitkey,
     defaultFromUnit: propUnit,
-    doNotConvertValue
-  });
-  const convertedAutoValue = safeConvertValue({
-    value: autoValue,
-    toUnit: initDisplayUnit,
-    unitkey,
-    defaultFromUnit: propAutoUnit,
-    doNotConvertValue
+    doNotConvertValue: noConversion
   });
-  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : convertedAutoValue !== "" ? { value: convertedAutoValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
+  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
   const [displayLayer, setDisplayLayer] = useState(initDisplayLayer);
-  const derivedAllowEmpty = (displayLayer == null ? void 0 : displayLayer.value) === void 0;
-  const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(
-    initialPredefinedOption ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM
-  );
-  const isAutoValue = propValue === "" && autoValue;
-  const disableInternalErrorValidationMessages = !!(disabledValidation || autoValue);
-  const foundPredefinedMenuOption = predefinedOptions && predefinedOptions.find((el2) => {
-    if (!(el2 == null ? void 0 : el2.value)) return;
-    if (selectedPredefinedOptionKey) {
-      return selectedPredefinedOptionKey === el2.valueKey;
-    }
-    const predefinedMenuItemUnit = isValueWithUnit(el2.value) ? getUnit(el2.value) : "";
-    return withUnit(
-      convertUnit(value, predefinedMenuItemUnit, unitkey),
-      predefinedMenuItemUnit
-    ) === el2.value;
-  });
+  const derivedAllowEmpty = allowEmpty || (displayLayer == null ? void 0 : displayLayer.value) === void 0;
+  const disableInternalErrorValidationMessages = !!disabledValidation;
   const getAlternativeUnits = () => {
-    const valueToList = isAutoValue ? autoValue : value ?? "";
+    const valueToList = value ?? "";
     const initToUnit = displayLayer.unit;
     const shouldConvert = checkConversion({
       value: valueToList,
@@ -70409,109 +70488,46 @@ const UnitInput = ({
     if (initDisplayUnit) {
       let newValue, newUnit = "";
       if (previousInitUnit !== initDisplayUnit) {
-        newValue = safeConvertValue({
+        const { value: resultValue } = safeConvertValue({
           value,
           toUnit: initDisplayUnit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue
+          doNotConvertValue: noConversion
         });
+        newValue = resultValue;
         newUnit = initDisplayUnit;
       } else if (withUnit(displayLayer.value, displayLayer.unit) !== value) {
-        newValue = safeConvertValue({
+        const { value: resultValue } = safeConvertValue({
           value,
           toUnit: displayLayer.unit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue
+          doNotConvertValue: noConversion
         });
+        newValue = resultValue;
         newUnit = displayLayer.unit;
       }
-      if (newValue !== void 0) {
+      if (newValue !== void 0 && !initialPredefinedOption) {
         setDisplayLayer({ value: newValue, unit: newUnit });
       }
-      if (predefinedOptions) {
-        if (foundPredefinedMenuOption && shouldLinkAutomaticly) {
-          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-        } else {
-          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
-        }
-      }
     }
-  }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
+  }, [initDisplayUnit, value, error2]);
   const alternativeUnits = getAlternativeUnits();
   const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
   const noConvert = noConversion || !alternativeUnits || alternativeUnits && alternativeUnits.length === 1;
   const stringName = getStringName(name2);
-  let sectionsPredefinedMenu;
-  const createPredefinedOption = (el2) => {
-    const elementValue = (el2 == null ? void 0 : el2.value) ? el2.value : "";
-    const [value2 = "", unit2 = ""] = isValueWithUnit(elementValue) ? split$1(elementValue) : [elementValue];
-    return {
-      type: MenuType.OPTION,
-      inline: true,
-      onClick: () => {
-        const validation = validateNumber(value2);
-        if (validation.valid && !disabled2) {
-          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-          onChange({
-            target: {
-              value: elementValue,
-              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || "",
-              predefinedSelected: true,
-              predefinedOption: el2
-            }
-          });
-        }
-      },
-      label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx(Text, { children: el2.label }),
-        /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
-      ] }),
-      description: isValueWithUnit(elementValue) ? `${value2} ${unit2}` : elementValue,
-      selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
-    };
-  };
-  sectionsPredefinedMenu = [
-    {
-      type: MenuType.OPTION,
-      inline: true,
-      onClick: () => {
-        if (predefinedOptionsMenuState !== PredefinedOptionsMenuState.CUSTOM && !disabled2) {
-          onChange({
-            target: {
-              value: withUnit(displayLayer.value, displayLayer.unit),
-              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || ""
-            }
-          });
-        }
-      },
-      label: "Custom",
-      selected: predefinedOptionsMenuState === PredefinedOptionsMenuState.CUSTOM
-    }
-  ];
-  if (predefinedOptions == null ? void 0 : predefinedOptions.length) {
-    const dynamicOptions = predefinedOptions.map(createPredefinedOption);
-    sectionsPredefinedMenu = [...sectionsPredefinedMenu, ...dynamicOptions];
-  }
   const getPlaceholder = (placeholder22) => {
-    if (isAutoValue) {
-      return safeConvertValue({
-        value: autoValue,
-        toUnit: displayLayer.unit,
-        unitkey,
-        defaultFromUnit: propAutoUnit,
-        doNotConvertValue
-      });
-    } else if (isValueWithUnit(placeholder22)) {
+    if (isValueWithUnit(placeholder22)) {
       const placeholderUnit = getUnit(placeholder22);
-      return safeConvertValue({
+      const { value: resultValue } = safeConvertValue({
         value: placeholder22,
         toUnit: displayLayer.unit,
         unitkey,
         defaultFromUnit: placeholderUnit,
-        doNotConvertValue
+        doNotConvertValue: noConversion
       });
+      return resultValue;
     }
     return placeholder22;
   };
@@ -70521,32 +70537,27 @@ const UnitInput = ({
       className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles.predefinedMenuActive) : "",
       children: /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: width2, children: [
         predefinedOptions && /* @__PURE__ */ jsx(
-          Tooltip,
+          PredefinedOptionsMenu,
           {
-            text: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : "",
-            children: /* @__PURE__ */ jsx(
-              Menu,
-              {
-                maxHeight: 380,
-                groupOrder: "first",
-                testId: testId && `${testId}-predefined-menu`,
-                disabled: disabled2,
-                menu: {
-                  colored: true,
-                  trigger: "Component",
-                  component: /* @__PURE__ */ jsx(
-                    Button$1,
-                    {
-                      groupOrder: "first",
-                      active: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED,
-                      icon: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? "link" : "unlink"
-                    }
-                  ),
-                  small: small2,
-                  sections: sectionsPredefinedMenu
+            testId,
+            predefinedOptions,
+            value: displayLayer.value,
+            onPredefinedOptionSelect: (newValue) => {
+              onChange({
+                target: {
+                  value: newValue,
+                  name: stringName
                 }
-              }
-            )
+              });
+              setDisplayLayer({
+                value: newValue,
+                unit: getUnit(newValue) || displayLayer.unit
+              });
+            },
+            disabled: disabled2,
+            initialPredefinedOption,
+            predefinedOptionsMenuState,
+            setPredefinedOptionsMenuState
           }
         ),
         /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
@@ -70593,7 +70604,7 @@ const UnitInput = ({
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
-                    onClickUnit(isAutoValue ? "" : value2, altUnit);
+                    onClickUnit(value2, altUnit);
                   },
                   description: displayUnit,
                   selected: displayUnit === displayUnitLabel,
@@ -70616,20 +70627,6 @@ const normalizeUnits = (unitConfig) => unitConfig.reduce(
   },
   { preferredUnits: {}, storageUnits: {} }
 );
-const tryConvertValue = (value, unitKey, selectedUnit, storageUnit) => {
-  if (checkConversion({
-    value,
-    unitkey: unitKey,
-    toUnit: selectedUnit
-  })) {
-    try {
-      return convertAndGetValue(value, selectedUnit, storageUnit);
-    } catch {
-      return value;
-    }
-  }
-  return value;
-};
 const convertVisibleRows = ({
   headers,
   rows,
@@ -70671,7 +70668,13 @@ const convertVisibleRows = ({
         const selectedUnit = selectedUnits[unitKey];
         const storageUnit = storageUnits[unitKey];
         const unitChanged = selectedUnit !== storageUnit;
-        const convertedValue = unitChanged ? tryConvertValue(value, unitKey, selectedUnit, storageUnit) : cell2.value;
+        const { value: resultValue = value } = convertUnit({
+          value: safeToString(value),
+          unitkey: unitKey,
+          toUnit: selectedUnit,
+          fromUnit: storageUnit
+        });
+        const convertedValue = unitChanged ? resultValue : cell2.value;
         const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue) : convertedValue;
         return {
           ...cell2,
@@ -70686,7 +70689,13 @@ const convertVisibleRows = ({
             const selectedUnit2 = selectedUnits[unitKey];
             const unitChanged2 = selectedUnit2 !== storageUnit2;
             const nextUnit = convertBackToStorageUnit ? storageUnit2 : selectedUnit2;
-            const nextValueConverted = unitChanged2 ? tryConvertValue(value2, unitKey, nextUnit, selectedUnit2) : value2;
+            const { value: resultValue2 = value2 } = convertUnit({
+              value: String(value2),
+              unitkey: unitKey,
+              toUnit: nextUnit,
+              fromUnit: selectedUnit2
+            });
+            const nextValueConverted = unitChanged2 ? resultValue2 : value2;
             if ("onChange" in cell2) {
               const { onChange } = cell2;
               const event = {