@oliasoft-open-source/react-ui-library 4.13.0-beta-14 → 4.13.0-beta-15

package/dist/index.d.ts

@@ -1038,10 +1038,9 @@ export declare interface IPortalProps {
 }
 
 declare interface IPredefinedOption {
-    value: string;
+    value?: string;
     label: string;
     valueKey?: string;
-    unit?: string;
 }
 
 export declare interface IPrintHeaderProps {
@@ -1561,13 +1560,17 @@ export declare interface IUnitInputProps {
     unitkey?: string;
     initUnit?: string;
     noConversion?: boolean;
+    doNotConvertValue?: boolean;
     testId?: string;
     warning?: string | boolean | null;
     predefinedOptions?: IPredefinedOption[] | null;
-    initialPredefinedOption?: string;
+    initialPredefinedOption?: boolean;
+    shouldLinkAutomaticly?: boolean;
+    selectedPredefinedOptionKey?: string;
     validationCallback?: (name: string, error: string | null) => any;
     disabledValidation?: boolean;
     allowEmpty?: boolean;
+    autoValue?: string;
     onChange?: TOnChangeEventHandler;
     onSwitchUnit?: (unit: string) => void;
     onClick?: MouseEventHandler<HTMLInputElement>;
@@ -1870,7 +1873,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, testId, warning, predefinedOptions, initialPredefinedOption, validationCallback, disabledValidation, allowEmpty, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, roundDisplayValue, }: 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, roundDisplayValue, }: IUnitInputProps) => JSX_2.Element;
 
 export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, }: IUnitTableProps) => JSX_2.Element;
 

package/dist/index.js

@@ -15,7 +15,7 @@ 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 { 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, isNil, isEqual as isEqual$4 } from "lodash";
+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, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue as getValue$1, withUnit, convertSamePrecision, convertAndGetValue, 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) {
@@ -70233,7 +70233,6 @@ const safeConvertValue = ({
 }) => {
   const rawValue = getValue$1(value);
   const isInvalidInput = isWrongValue(rawValue);
-  const availableUnits = ALT_UNITS[unitkey];
   if (isValueWithUnknownUnit(value)) {
     return { value: rawValue };
   }
@@ -70243,9 +70242,6 @@ const safeConvertValue = ({
   if (!isValueWithUnit(value)) {
     return { value };
   }
-  if (!(availableUnits == null ? void 0 : availableUnits.includes(getUnit(value)))) {
-    return { value: rawValue };
-  }
   return convertUnit({
     value,
     unitkey,
@@ -70280,134 +70276,6 @@ const initializeContext = (context2) => {
     UnitContext = context2;
   }
 };
-const extractValue = (value) => {
-  if (isNil(value)) return value;
-  return isValueWithUnit(value) ? getValue$1(value) : value;
-};
-const PredefinedOptionsMenu = ({
-  predefinedOptions,
-  displayLayer,
-  unitkey: rootUnitKey,
-  unitTemplate,
-  onPredefinedOptionSelect,
-  disabled: disabled2,
-  initialPredefinedOption,
-  predefinedOptionsMenuState,
-  setPredefinedOptionsMenuState,
-  testId
-}) => {
-  const extractedValue = extractValue(displayLayer == null ? void 0 : displayLayer.value);
-  const [foundPredefinedMenuOption, setFoundPredefinedMenuOption] = useState(void 0);
-  const convertPredefinedOptions = ({
-    value,
-    unit: optionUnitKey
-  }) => {
-    if (!value || !rootUnitKey) return value;
-    if (!isValueWithUnit(value)) return value;
-    const selectedUnitKey = optionUnitKey || rootUnitKey;
-    const preferredOptionUnit = getPreferredUnit(selectedUnitKey, unitTemplate);
-    const { value: resultValue } = safeConvertValue({
-      value,
-      toUnit: preferredOptionUnit,
-      unitkey: selectedUnitKey,
-      defaultFromUnit: "",
-      doNotConvertValue: false
-    });
-    return withUnit(resultValue, preferredOptionUnit);
-  };
-  const createPredefinedOption = (el2) => {
-    const convertedValue = convertPredefinedOptions(el2);
-    const [inputValue = "", unit2 = ""] = split$1(convertedValue);
-    return {
-      type: MenuType.OPTION,
-      inline: true,
-      onClick: () => {
-        const validation = validateNumber(inputValue);
-        const optionState = {
-          predefinedSelected: true,
-          predefinedOption: el2
-        };
-        if (validation.valid && !disabled2) {
-          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-          onPredefinedOptionSelect(convertedValue, optionState);
-          setFoundPredefinedMenuOption(el2);
-        }
-      },
-      label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx(Text, { children: el2.label }),
-        /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
-      ] }),
-      description: `${inputValue} ${unit2}`,
-      selected: isEqual$4(foundPredefinedMenuOption, el2) && 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, {
-        predefinedSelected: true,
-        predefinedOption: initialPredefinedOptionObject
-      });
-    }
-  }, [initialPredefinedOptionObject]);
-  useEffect(() => {
-    const foundOption = predefinedOptions.find((option2) => {
-      const convertedValue = convertPredefinedOptions(option2);
-      return convertedValue === withUnit(displayLayer == null ? void 0 : displayLayer.value, (displayLayer == null ? void 0 : displayLayer.unit) ?? "");
-    });
-    if (foundOption) {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-      setFoundPredefinedMenuOption(foundOption);
-    } else {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
-      setFoundPredefinedMenuOption(void 0);
-    }
-  }, [extractedValue]);
-  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(
-    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
-      },
-      tooltip: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : ""
-    }
-  );
-};
 const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
 const inputWrapper = "_inputWrapper_ye9w9_4";
 const styles = {
@@ -70432,13 +70300,17 @@ const UnitInput = ({
   onFocus = noop$3,
   onSwitchUnit = noop$3,
   unitTemplate,
+  doNotConvertValue = false,
   testId,
   warning: warning2 = null,
   predefinedOptions,
-  initialPredefinedOption = "",
+  initialPredefinedOption = false,
+  shouldLinkAutomaticly = true,
+  selectedPredefinedOptionKey,
   validationCallback = () => ({ name: "", error: null }),
   disabledValidation = false,
   allowEmpty = false,
+  autoValue,
   convertBackToStorageUnit = false,
   enableCosmeticRounding = true,
   enableDisplayRounding = false,
@@ -70446,11 +70318,11 @@ const UnitInput = ({
 }) => {
   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]
@@ -70463,15 +70335,39 @@ const UnitInput = ({
     toUnit: initDisplayUnit,
     unitkey,
     defaultFromUnit: propUnit,
-    doNotConvertValue: noConversion
+    doNotConvertValue
+  });
+  const { value: convertedAutoValue } = safeConvertValue({
+    value: autoValue,
+    toUnit: initDisplayUnit,
+    unitkey,
+    defaultFromUnit: propAutoUnit,
+    doNotConvertValue
   });
-  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
+  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : convertedAutoValue !== "" ? { value: convertedAutoValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
   const [displayLayer, setDisplayLayer] = useState(initDisplayLayer);
   const derivedAllowEmpty = allowEmpty || (displayLayer == null ? void 0 : displayLayer.value) === void 0;
-  const disableInternalErrorValidationMessages = !!disabledValidation || disabled2;
+  const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(
+    initialPredefinedOption ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM
+  );
+  const isAutoValue = propValue === "" && autoValue;
+  const disableInternalErrorValidationMessages = !!(disabledValidation || autoValue || disabled2);
+  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) : "";
+    const { value: resultValue = value } = convertUnit({
+      value: String(value),
+      unitkey,
+      toUnit: predefinedMenuItemUnit
+    });
+    return withUnit(resultValue, predefinedMenuItemUnit) === el2.value;
+  });
   const getAlternativeUnits = () => {
-    const valueToList = value ?? "";
-    const initToUnit = displayLayer == null ? void 0 : displayLayer.unit;
+    const valueToList = isAutoValue ? autoValue : value ?? "";
+    const initToUnit = displayLayer.unit;
     const shouldConvert = checkConversion({
       value: valueToList,
       unitkey,
@@ -70529,7 +70425,7 @@ const UnitInput = ({
           toUnit: initDisplayUnit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue: noConversion
+          doNotConvertValue
         });
         newValue = resultValue;
         newUnit = initDisplayUnit;
@@ -70539,29 +70435,96 @@ const UnitInput = ({
           toUnit: displayLayer.unit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue: noConversion
+          doNotConvertValue
         });
         newValue = resultValue;
         newUnit = displayLayer.unit;
       }
-      if (newValue !== void 0 && !initialPredefinedOption) {
+      if (newValue !== void 0) {
         setDisplayLayer({ value: newValue, unit: newUnit });
       }
+      if (predefinedOptions) {
+        if (foundPredefinedMenuOption && shouldLinkAutomaticly) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+        } else {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
+        }
+      }
     }
-  }, [initDisplayUnit, value, error2]);
+  }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
   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 (isValueWithUnit(placeholder22)) {
+    if (isAutoValue) {
+      const { value: resultValue } = safeConvertValue({
+        value: autoValue,
+        toUnit: displayLayer.unit,
+        unitkey,
+        defaultFromUnit: propAutoUnit,
+        doNotConvertValue
+      });
+      return resultValue;
+    } else if (isValueWithUnit(placeholder22)) {
       const placeholderUnit = getUnit(placeholder22);
       const { value: resultValue } = safeConvertValue({
         value: placeholder22,
         toUnit: displayLayer.unit,
         unitkey,
         defaultFromUnit: placeholderUnit,
-        doNotConvertValue: noConversion
+        doNotConvertValue
       });
       return resultValue;
     }
@@ -70573,31 +70536,32 @@ const UnitInput = ({
       className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles.predefinedMenuActive) : "",
       children: /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: width2, children: [
         predefinedOptions && /* @__PURE__ */ jsx(
-          PredefinedOptionsMenu,
+          Tooltip,
           {
-            testId,
-            unitTemplate: unitTemplate || (context2 == null ? void 0 : context2.unitTemplate),
-            unitkey,
-            predefinedOptions,
-            displayLayer,
-            onPredefinedOptionSelect: (newValue, optionState) => {
-              onChange({
-                target: {
-                  value: newValue,
-                  name: stringName,
-                  predefinedSelected: optionState == null ? void 0 : optionState.predefinedSelected,
-                  predefinedOption: optionState == null ? void 0 : optionState.predefinedOption
+            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
                 }
-              });
-              setDisplayLayer({
-                value: newValue,
-                unit: getUnit(newValue) || displayLayer.unit
-              });
-            },
-            disabled: disabled2,
-            initialPredefinedOption,
-            predefinedOptionsMenuState,
-            setPredefinedOptionsMenuState
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
@@ -70645,7 +70609,7 @@ const UnitInput = ({
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
-                    onClickUnit(value2, altUnit);
+                    onClickUnit(isAutoValue ? "" : value2, altUnit);
                   },
                   description: displayUnit,
                   selected: displayUnit === displayUnitLabel,