@symply.io/basic-components 1.4.8 → 1.4.9-alpha.2

package/NumberInput/index.js

@@ -32,7 +32,7 @@ function NumberInput(props) {
     var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than the `miniValue`!");
-    var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
-    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 ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
+    var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip, handleKeyboardEvent = _e.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 ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
 }
 export default NumberInput;

package/NumberInput/useInteractions.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, KeyboardEventHandler } from "react";
 interface InteractionProps {
     value: string;
     integerOnly?: boolean;
@@ -13,5 +13,6 @@ declare function useInteractions(props: InteractionProps): {
     handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onOpenTooltip: () => void;
     onCloseTooltip: () => void;
+    handleKeyboardEvent: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 };
 export default useInteractions;

package/NumberInput/useInteractions.js

@@ -3,6 +3,37 @@ function useInteractions(props) {
     var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
     var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
     var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
+    var handleKeyboardEvent = useCallback(function (event) {
+        var key = event.key;
+        console.log({ key: key });
+        if (value.length === 0) {
+            if (minValue > 0) {
+                if (key === "-") {
+                    return false;
+                }
+                else {
+                    return true;
+                }
+            }
+            else if (key === ".") {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        else if (integerOnly) {
+            if (key === ".") {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return true;
+        }
+    }, []);
     var handleChange = useCallback(function (event) {
         event.preventDefault();
         var val = event.currentTarget.value;
@@ -51,7 +82,8 @@ function useInteractions(props) {
         handleBlur: handleBlur,
         handleChange: handleChange,
         onOpenTooltip: onOpenTooltip,
-        onCloseTooltip: onCloseTooltip
+        onCloseTooltip: onCloseTooltip,
+        handleKeyboardEvent: handleKeyboardEvent
     };
 }
 export default useInteractions;

package/package.json

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