npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.12.0-beta-3 → 4.12.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1569,13 +1569,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?: (event: TChangeEvent | ICustomChangeEvent) => void;
     onSwitchUnit?: (unit: string) => void;
     onClick?: MouseEventHandler<HTMLInputElement>;
@@ -1861,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, testId, warning, predefinedOptions, initialPredefinedOption, validationCallback, disabledValidation, allowEmpty, convertBackToStorageUnit, enableCosmeticRounding, enableDisplayRounding, }: 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 CHANGED Viewed

	@@ -1 +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-~~BMWyiwz3~~.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-~~BaYhOc6M~~.css"></head><body><div id="content"></div></body>
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-BVCFmQTa.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-BU9wzZv9.css"></head><body><div id="content"></div></body>

package/dist/index.js CHANGED Viewed

@@ -55652,6 +55652,10 @@ const NumberInput = ({
   const validateInputValue = (value2) => {
     const validation = validateNumber(value2);
     const isPlaceholder = placeholder3 && isEmptyNullOrUndefined(value2);
+    const isInfinity = [Infinity, -Infinity].includes(Number(value2));
+    if (isInfinity) {
+      return { valid: true, errors: [] };
+    }
     if (isPlaceholder) {
       return { valid: true, errors: [] };
     }
@@ -70248,109 +70252,6 @@ const initializeContext = (context2) => {
     UnitContext = context2;
   }
 };
-const PredefinedOptionsMenu = ({
-  predefinedOptions,
-  value = "",
-  onPredefinedOptionSelect,
-  disabled: disabled2,
-  initialPredefinedOption,
-  predefinedOptionsMenuState,
-  setPredefinedOptionsMenuState,
-  testId
-}) => {
-  const extractedValue = isValueWithUnit(value) ? getValue$1(value) : value;
-  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: extractedValue === 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]);
-  useEffect(() => {
-    const foundOption = predefinedOptions.find((option2) => {
-      const currentValue = isValueWithUnit((option2 == null ? void 0 : option2.value) ?? "") ? getValue$1((option2 == null ? void 0 : option2.value) ?? "") : option2.value;
-      return currentValue === extractedValue;
-    });
-    if (foundOption) {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
-      setFoundPredefinedMenuOption(foundOption);
-    } else {
-      setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
-      setFoundPredefinedMenuOption(void 0);
-    }
-  }, [extractedValue, predefinedOptions]);
-  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 = {
@@ -70375,24 +70276,28 @@ 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
 }) => {
   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]
@@ -70405,14 +70310,38 @@ const UnitInput = ({
     toUnit: initDisplayUnit,
     unitkey,
     defaultFromUnit: propUnit,
-    doNotConvertValue: noConversion
+    doNotConvertValue
   });
-  const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
+  const { value: convertedAutoValue } = safeConvertValue({
+    value: autoValue,
+    toUnit: initDisplayUnit,
+    unitkey,
+    defaultFromUnit: propAutoUnit,
+    doNotConvertValue
+  });
+  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;
+  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) : "";
+    const { value: resultValue = value } = convertUnit({
+      value: String(value),
+      unitkey,
+      toUnit: predefinedMenuItemUnit
+    });
+    return withUnit(resultValue, predefinedMenuItemUnit) === el2.value;
+  });
   const getAlternativeUnits = () => {
-    const valueToList = value ?? "";
+    const valueToList = isAutoValue ? autoValue : value ?? "";
     const initToUnit = displayLayer.unit;
     const shouldConvert = checkConversion({
       value: valueToList,
@@ -70471,7 +70400,7 @@ const UnitInput = ({
           toUnit: initDisplayUnit,
           unitkey,
           defaultFromUnit: propUnit,
-          doNotConvertValue: noConversion
+          doNotConvertValue
         });
         newValue = resultValue;
         newUnit = initDisplayUnit;
@@ -70481,29 +70410,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;
     }
@@ -70515,27 +70511,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,
-            predefinedOptions,
-            value: displayLayer.value,
-            onPredefinedOptionSelect: (newValue) => {
-              onChange({
-                target: {
-                  value: newValue,
-                  name: stringName
+            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(
@@ -70582,7 +70583,7 @@ const UnitInput = ({
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
-                    onClickUnit(value2, altUnit);
+                    onClickUnit(isAutoValue ? "" : value2, altUnit);
                   },
                   description: displayUnit,
                   selected: displayUnit === displayUnitLabel,