@symply.io/basic-components 1.5.5-alpha.1 → 1.5.5-alpha.2

package/NumberInput/types.d.ts

@@ -1,5 +1,18 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ChangeEvent, FocusEventHandler, KeyboardEventHandler } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
+export interface InteractionStates {
+    typing: boolean;
+    tooltipOpen: boolean;
+    cursorIndex: number;
+    roundedValue: string;
+    exceedError: boolean;
+    handleKeyboardEvent: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    handleBlur: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+}
 export interface InteractionProps {
     value: string;
     integerOnly?: boolean;

package/NumberInput/useInteractions.d.ts

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

package/NumberInput/useInteractions.js

@@ -3,7 +3,7 @@ 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 _e = useState(false), typing = _e[0], setTyping = _e[1];
-    var _f = useState(value), register = _f[0], setRegister = _f[1];
+    var _f = useState(0), cursorIndex = _f[0], setCursorIndex = _f[1];
     var roundedValue = useMemo(function () {
         if (value === null || value === undefined) {
             return "";
@@ -26,7 +26,7 @@ function useInteractions(props) {
     }, [value, decimals]);
     var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
     var handleKeyboardEvent = useCallback(function (event) {
-        var key = event.key, currentTarget = event.currentTarget;
+        var key = event.key;
         if (key === "e") {
             event.preventDefault();
         }
@@ -45,8 +45,8 @@ function useInteractions(props) {
             else if (String(value).includes(".") && decimals > 0) {
                 var decimalPointIndex = String(value).lastIndexOf(".");
                 var decimalStrLen = String(value).split(".")[1].length;
-                var selectionStart = currentTarget.selectionStart;
-                if (selectionStart && decimalPointIndex <= selectionStart) {
+                console.log({ cursorIndex: cursorIndex, decimalPointIndex: decimalPointIndex, decimalStrLen: decimalStrLen });
+                if (cursorIndex && decimalPointIndex <= cursorIndex) {
                     if (![
                         "Backspace",
                         "ArrowUp",
@@ -60,7 +60,7 @@ function useInteractions(props) {
                 }
             }
         }
-    }, [value, minValue, integerOnly]);
+    }, [value, minValue, cursorIndex, integerOnly]);
     var handleChange = useCallback(function (event) {
         event.preventDefault();
         var val = event.currentTarget.value;
@@ -74,9 +74,9 @@ function useInteractions(props) {
             return;
         onChange(val);
     }, [onChange, minValue, integerOnly]);
-    var handleFocus = useCallback(function () {
+    var handleFocus = useCallback(function (event) {
         setTyping(true);
-        setRegister(value);
+        setCursorIndex(event.target.selectionStart || 0);
     }, [value]);
     var handleBlur = useCallback(function () {
         var excludedValue = [

package/package.json

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