@symply.io/basic-components 1.5.3-alpha.1 → 1.5.3-alpha.3

package/NumberInput/index.js

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -39,7 +40,8 @@ function NumberInput(props) {
         decimals: decimals,
         integerOnly: integerOnly,
         onChange: onChange
-    }), exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, valueDisplay = _f.valueDisplay, handleBlur = _f.handleBlur, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
+    }), typing = _f.typing, exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, roundedValue = _f.roundedValue, handleBlur = _f.handleBlur, handleFocus = _f.handleFocus, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
+    var valueDisplay = useMemo(function () { return (typing ? value : roundedValue); }, [typing, value, roundedValue]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
 }
 export default NumberInput;

package/NumberInput/useInteractions.d.ts

@@ -1,10 +1,12 @@
 import { ChangeEvent, KeyboardEventHandler } from "react";
 import type { InteractionProps } from "./types";
 declare function useInteractions(props: InteractionProps): {
+    typing: boolean;
     exceedError: boolean;
     tooltipOpen: boolean;
-    valueDisplay: string;
+    roundedValue: string;
     handleBlur: () => void;
+    handleFocus: () => void;
     handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onOpenTooltip: () => void;
     onCloseTooltip: () => void;

package/NumberInput/useInteractions.js

@@ -2,17 +2,17 @@ import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value, _a = props.decimals, decimals = _a === void 0 ? 0 : _a, integerOnly = props.integerOnly, _b = props.minValue, minValue = _b === void 0 ? Number.MIN_SAFE_INTEGER : _b, _c = props.maxValue, maxValue = _c === void 0 ? Number.MAX_SAFE_INTEGER : _c, onChange = props.onChange;
     var _d = useState(false), tooltipOpen = _d[0], setTooltipOpen = _d[1];
-    var valueDisplay = useMemo(function () {
+    var _e = useState(false), typing = _e[0], setTyping = _e[1];
+    var roundedValue = useMemo(function () {
         if (value === null || value === undefined) {
             return "";
         }
         else {
-            var valueStr = String(value);
-            if (valueStr.includes(".")) {
+            var valueStr = String(value).trim();
+            if (valueStr.includes(".") && decimals > 0) {
                 var decimalStrLen = valueStr.split(".")[1].length;
                 if (decimalStrLen > decimals) {
-                    var diff = decimals - decimalStrLen;
-                    return valueStr.slice(0, diff);
+                    return Number(valueStr).toFixed(decimals);
                 }
                 else {
                     return valueStr;
@@ -43,7 +43,14 @@ function useInteractions(props) {
             }
             else if (String(value).includes(".") && decimals > 0) {
                 var decimalStrLen = String(value).split(".")[1].length;
-                if (key !== "Backspace" && decimalStrLen >= decimals) {
+                if (![
+                    "Backspace",
+                    "ArrowUp",
+                    "ArrowDown",
+                    "ArrowLeft",
+                    "ArrowRight"
+                ].includes(key) &&
+                    decimalStrLen >= decimals) {
                     event.preventDefault();
                 }
             }
@@ -62,6 +69,9 @@ function useInteractions(props) {
             return;
         onChange(val);
     }, [onChange, minValue, integerOnly]);
+    var handleFocus = useCallback(function () {
+        setTyping(true);
+    }, [value]);
     var handleBlur = useCallback(function () {
         var excludedValue = [
             null,
@@ -73,6 +83,7 @@ function useInteractions(props) {
             "null",
             "undefined"
         ];
+        setTyping(false);
         var strVal = String(value).trim();
         if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
             var newValue = strVal.substring(0, String(value).length - 1);
@@ -92,10 +103,12 @@ function useInteractions(props) {
         setTooltipOpen(false);
     }, []);
     return {
+        typing: typing,
         exceedError: exceedError,
         tooltipOpen: tooltipOpen,
-        valueDisplay: valueDisplay,
+        roundedValue: roundedValue,
         handleBlur: handleBlur,
+        handleFocus: handleFocus,
         handleChange: handleChange,
         onOpenTooltip: onOpenTooltip,
         onCloseTooltip: onCloseTooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.5.3-alpha.1",
+  "version": "1.5.3-alpha.3",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",