@oliasoft-open-source/react-ui-library 4.13.0 → 4.14.0-beta-1

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, 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, isNil, 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) {
@@ -4181,34 +4181,34 @@ const styles$M = {
   actionComponentContainer,
   active: active$7
 };
-const wrapper$4 = "_wrapper_1f7k2_1";
-const layer$1 = "_layer_1f7k2_5";
-const layerContainer$1 = "_layerContainer_1f7k2_8";
-const nested = "_nested_1f7k2_24";
-const fileInput$1 = "_fileInput_1f7k2_36";
-const trigger$2 = "_trigger_1f7k2_41";
-const middleAlignedInline = "_middleAlignedInline_1f7k2_50";
-const heading$5 = "_heading_1f7k2_56";
-const headingIcon = "_headingIcon_1f7k2_62";
-const option$1 = "_option_1f7k2_74";
-const active$6 = "_active_1f7k2_93";
-const selected$1 = "_selected_1f7k2_98";
-const optionContent$1 = "_optionContent_1f7k2_104";
-const inline$4 = "_inline_1f7k2_108";
-const icon$4 = "_icon_1f7k2_113";
-const check$1 = "_check_1f7k2_114";
-const text$3 = "_text_1f7k2_140";
-const label$a = "_label_1f7k2_145";
-const description = "_description_1f7k2_156";
-const arrow$1 = "_arrow_1f7k2_160";
-const divider$1 = "_divider_1f7k2_164";
-const deprecatedSemanticIcon = "_deprecatedSemanticIcon_1f7k2_168";
-const disabled$8 = "_disabled_1f7k2_172";
-const buttonLabel = "_buttonLabel_1f7k2_177";
-const buttonCaret = "_buttonCaret_1f7k2_183";
-const component = "_component_1f7k2_187";
-const right$7 = "_right_1f7k2_193";
-const actions$1 = "_actions_1f7k2_198";
+const wrapper$4 = "_wrapper_8cxhw_1";
+const layer$1 = "_layer_8cxhw_5";
+const layerContainer$1 = "_layerContainer_8cxhw_8";
+const nested = "_nested_8cxhw_24";
+const fileInput$1 = "_fileInput_8cxhw_36";
+const trigger$2 = "_trigger_8cxhw_41";
+const middleAlignedInline = "_middleAlignedInline_8cxhw_50";
+const heading$5 = "_heading_8cxhw_56";
+const headingIcon = "_headingIcon_8cxhw_62";
+const option$1 = "_option_8cxhw_74";
+const active$6 = "_active_8cxhw_93";
+const selected$1 = "_selected_8cxhw_98";
+const optionContent$1 = "_optionContent_8cxhw_105";
+const inline$4 = "_inline_8cxhw_109";
+const icon$4 = "_icon_8cxhw_114";
+const check$1 = "_check_8cxhw_115";
+const text$3 = "_text_8cxhw_141";
+const label$a = "_label_8cxhw_146";
+const description = "_description_8cxhw_157";
+const arrow$1 = "_arrow_8cxhw_161";
+const divider$1 = "_divider_8cxhw_165";
+const deprecatedSemanticIcon = "_deprecatedSemanticIcon_8cxhw_169";
+const disabled$8 = "_disabled_8cxhw_173";
+const buttonLabel = "_buttonLabel_8cxhw_178";
+const buttonCaret = "_buttonCaret_8cxhw_184";
+const component = "_component_8cxhw_188";
+const right$7 = "_right_8cxhw_194";
+const actions$1 = "_actions_8cxhw_199";
 const styles$L = {
   wrapper: wrapper$4,
   layer: layer$1,
@@ -4354,6 +4354,7 @@ const Section$1 = ({
   path,
   maxHeight
 }) => {
+  var _a2, _b;
   const disabledContext = useContext(DisabledContext);
   switch (section2.type) {
     case MenuType.HEADING:
@@ -4391,10 +4392,14 @@ const Section$1 = ({
         }
       );
     case MenuType.MENU:
+      const selected2 = !!((_b = (_a2 = section2 == null ? void 0 : section2.menu) == null ? void 0 : _a2.sections) == null ? void 0 : _b.find(
+        (s) => s.selected
+      ));
       return /* @__PURE__ */ jsx(
         DropDownMenu,
         {
           menu: section2.menu,
+          selected: selected2,
           title: section2.title,
           closeOnOptionClick,
           isNested: true,
@@ -4597,7 +4602,8 @@ const Text$1 = ({
   title: title2,
   carat,
   disabled: disabled2,
-  isOpen: isOpen2
+  isOpen: isOpen2,
+  selected: selected2
 }) => {
   let titleText;
   if (title2) {
@@ -4611,7 +4617,8 @@ const Text$1 = ({
       className: cx$2(
         styles$L.trigger,
         disabled2 ? styles$L.disabled : null,
-        isOpen2 ? styles$L.active : null
+        isOpen2 ? styles$L.active : null,
+        selected2 ? styles$L.selected : null
       ),
       children: [
         /* @__PURE__ */ jsx("span", { className: styles$L.label, title: titleText, children: label2 }),
@@ -4677,6 +4684,7 @@ const Trigger$1 = React__default.forwardRef(
     warning: warning2,
     tooltip: tooltip2,
     testId,
+    selected: selected2,
     ...restProps
   }, ref2) => {
     const triggerElement = trigger2 === TriggerType.BUTTON || trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsx(
@@ -4701,7 +4709,8 @@ const Trigger$1 = React__default.forwardRef(
         title: title2,
         disabled: isDisabled,
         carat: !contextMenu ? isNested ? MenuCarat.RIGHT : MenuCarat.DOWN : void 0,
-        isOpen: isOpen2
+        isOpen: isOpen2,
+        selected: selected2
       }
     ) : trigger2 === TriggerType.COMPONENT ? /* @__PURE__ */ jsx(Component, { component: component2, disabled: isDisabled }) : null;
     const wrappedTrigger = !isNested && (badgeTitle || badgeDot) ? /* @__PURE__ */ jsx(Badge, { title: badgeTitle, dot: badgeDot, small: !badgeDot, children: triggerElement }) : triggerElement;
@@ -4856,7 +4865,8 @@ const DropDownMenu = ({
   setOpen: setOpenProp,
   tooltip: tooltip2,
   error: error2,
-  warning: warning2
+  warning: warning2,
+  selected: selected2
 }) => {
   const disabledContext = useContext(DisabledContext);
   const {
@@ -4925,7 +4935,8 @@ const DropDownMenu = ({
         tooltip: tooltip2,
         error: error2,
         warning: warning2,
-        testId
+        testId,
+        selected: selected2
       }
     ),
     isOpen2 && renderLayer(
@@ -70233,6 +70244,7 @@ const safeConvertValue = ({
 }) => {
   const rawValue = getValue$1(value);
   const isInvalidInput = isWrongValue(rawValue);
+  const availableUnits = ALT_UNITS[unitkey];
   if (isValueWithUnknownUnit(value)) {
     return { value: rawValue };
   }
@@ -70242,6 +70254,9 @@ const safeConvertValue = ({
   if (!isValueWithUnit(value)) {
     return { value };
   }
+  if (!(availableUnits == null ? void 0 : availableUnits.includes(getUnit(value)))) {
+    return { value: rawValue };
+  }
   return convertUnit({
     value,
     unitkey,
@@ -70276,6 +70291,144 @@ 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,
+  predefinedOptionLinked,
+  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, option2.label, option2.valueKey].includes(
+        initialPredefinedOption
+      )
+    );
+  }, [initialPredefinedOption, predefinedOptionLinked]);
+  useEffect(() => {
+    if (initialPredefinedOptionObject) {
+      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+      setFoundPredefinedMenuOption(initialPredefinedOptionObject);
+      if (predefinedOptionLinked) {
+        onPredefinedOptionSelect(initialPredefinedOptionObject.value, {
+          predefinedSelected: true,
+          predefinedOption: initialPredefinedOptionObject
+        });
+      }
+    }
+  }, [
+    initialPredefinedOptionObject == null ? void 0 : initialPredefinedOptionObject.value,
+    initialPredefinedOptionObject == null ? void 0 : initialPredefinedOptionObject.label
+  ]);
+  useEffect(() => {
+    const foundOption = predefinedOptionLinked && predefinedOptions.find((option2) => {
+      const convertedValue = convertPredefinedOptions(option2);
+      return convertedValue === withUnit(displayLayer == null ? void 0 : displayLayer.value, (displayLayer == null ? void 0 : displayLayer.unit) ?? "");
+    });
+    if (foundOption || initialPredefinedOptionObject) {
+      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+      setFoundPredefinedMenuOption(
+        foundOption || initialPredefinedOptionObject
+      );
+    } else {
+      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
+      setFoundPredefinedMenuOption(void 0);
+    }
+  }, [extractedValue, predefinedOptionLinked]);
+  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 = {
@@ -70300,17 +70453,14 @@ const UnitInput = ({
   onFocus = noop$3,
   onSwitchUnit = noop$3,
   unitTemplate,
-  doNotConvertValue = false,
   testId,
   warning: warning2 = null,
   predefinedOptions,
-  initialPredefinedOption = false,
-  shouldLinkAutomaticly = true,
-  selectedPredefinedOptionKey,
+  initialPredefinedOption = "",
+  predefinedOptionLinked = true,
   validationCallback = () => ({ name: "", error: null }),
   disabledValidation = false,
   allowEmpty = false,
-  autoValue,
   convertBackToStorageUnit = false,
   enableCosmeticRounding = true,
   enableDisplayRounding = false,
@@ -70318,11 +70468,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]
@@ -70335,39 +70485,15 @@ const UnitInput = ({
     toUnit: initDisplayUnit,
     unitkey,
     defaultFromUnit: propUnit,
-    doNotConvertValue
-  });
-  const { value: 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 = allowEmpty || (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 || 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 disableInternalErrorValidationMessages = !!disabledValidation || disabled2;
   const getAlternativeUnits = () => {
-    const valueToList = isAutoValue ? autoValue : value ?? "";
-    const initToUnit = displayLayer.unit;
+    const valueToList = value ?? "";
+    const initToUnit = displayLayer == null ? void 0 : displayLayer.unit;
     const shouldConvert = checkConversion({
       value: valueToList,
       unitkey,
@@ -70425,7 +70551,7 @@ const UnitInput = ({
           toUnit: initDisplayUnit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue
+          doNotConvertValue: noConversion
         });
         newValue = resultValue;
         newUnit = initDisplayUnit;
@@ -70435,96 +70561,29 @@ const UnitInput = ({
           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) {
-      const { value: resultValue } = safeConvertValue({
-        value: autoValue,
-        toUnit: displayLayer.unit,
-        unitkey,
-        defaultFromUnit: propAutoUnit,
-        doNotConvertValue
-      });
-      return resultValue;
-    } else if (isValueWithUnit(placeholder22)) {
+    if (isValueWithUnit(placeholder22)) {
       const placeholderUnit = getUnit(placeholder22);
       const { value: resultValue } = safeConvertValue({
         value: placeholder22,
         toUnit: displayLayer.unit,
         unitkey,
         defaultFromUnit: placeholderUnit,
-        doNotConvertValue
+        doNotConvertValue: noConversion
       });
       return resultValue;
     }
@@ -70536,32 +70595,44 @@ 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,
+            unitTemplate: unitTemplate || (context2 == null ? void 0 : context2.unitTemplate),
+            unitkey,
+            predefinedOptions,
+            displayLayer,
+            onPredefinedOptionSelect: (newValue, optionState) => {
+              var _a2;
+              if (predefinedOptionLinked && ((_a2 = optionState == null ? void 0 : optionState.predefinedOption) == null ? void 0 : _a2.unit)) {
+                onChange({
+                  target: {
+                    value: withUnit(displayLayer == null ? void 0 : displayLayer.value, displayLayer == null ? void 0 : displayLayer.unit),
+                    name: stringName,
+                    predefinedSelected: optionState == null ? void 0 : optionState.predefinedSelected,
+                    predefinedOption: optionState == null ? void 0 : optionState.predefinedOption
+                  }
+                });
+              } else {
+                onChange({
+                  target: {
+                    value: newValue,
+                    name: stringName,
+                    predefinedSelected: optionState == null ? void 0 : optionState.predefinedSelected,
+                    predefinedOption: optionState == null ? void 0 : optionState.predefinedOption
+                  }
+                });
+                setDisplayLayer({
+                  value: newValue,
+                  unit: getUnit(newValue) || displayLayer.unit
+                });
               }
-            )
+            },
+            disabled: disabled2,
+            initialPredefinedOption,
+            predefinedOptionLinked,
+            predefinedOptionsMenuState,
+            setPredefinedOptionsMenuState
           }
         ),
         /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
@@ -70609,7 +70680,7 @@ const UnitInput = ({
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
-                    onClickUnit(isAutoValue ? "" : value2, altUnit);
+                    onClickUnit(value2, altUnit);
                   },
                   description: displayUnit,
                   selected: displayUnit === displayUnitLabel,