@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/input/number/index.js

@@ -1,406 +1,447 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmNumber = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var lodash = _interopRequireWildcard(require("lodash-es"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _formatUtil = require("@wavemaker-ai/react-runtime/utils/format-util");
-var _util = require("../util");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DEFAULT_CLASS = "form-control app-textbox app-number-input";
-var WmNumber = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    _props$regexp = props.regexp,
-    regexp = _props$regexp === void 0 ? ".*" : _props$regexp,
-    disabled = props.disabled,
-    name = props.name,
-    hint = props.hint,
-    arialabel = props.arialabel,
-    tabindex = props.tabindex,
-    shortcutkey = props.shortcutkey,
-    autofocus = props.autofocus,
-    _props$datavalue = props.datavalue,
-    initialDataValue = _props$datavalue === void 0 ? null : _props$datavalue,
-    _props$maxDataValue = props.maxDataValue,
-    initialMaxDataValue = _props$maxDataValue === void 0 ? null : _props$maxDataValue,
-    _props$maxvalue = props.maxvalue,
-    initialMaxValue = _props$maxvalue === void 0 ? null : _props$maxvalue,
-    _props$maxdisplayValu = props.maxdisplayValue,
-    initialMaxDisplayValue = _props$maxdisplayValu === void 0 ? null : _props$maxdisplayValu,
-    _props$isMaxWidget = props.isMaxWidget,
-    isMaxWidget = _props$isMaxWidget === void 0 ? false : _props$isMaxWidget,
-    _props$styles = props.styles,
-    styles = _props$styles === void 0 ? {} : _props$styles,
-    className = props.className,
-    placeholder = props.placeholder,
-    _props$updatedelay = props.updatedelay,
-    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
-    listener = props.listener,
-    _props$updateon = props.updateon,
-    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
-    step = props.step,
-    minvalue = props.minvalue,
-    maxvalue = props.maxvalue,
-    readonly = props.readonly,
-    _props$inputmode = props.inputmode,
-    inputmode = _props$inputmode === void 0 ? "natural" : _props$inputmode,
-    _props$trailingzero = props.trailingzero,
-    trailingzero = _props$trailingzero === void 0 ? false : _props$trailingzero,
-    _props$decimalplaces = props.decimalplaces,
-    decimalplaces = _props$decimalplaces === void 0 ? 0 : _props$decimalplaces,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    onKeydown = props.onKeydown,
-    onKeyup = props.onKeyup,
-    onKeypress = props.onKeypress,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    id = props.id,
-    error = props.error;
-  var _useState = (0, _react.useState)(false),
-    showError = _useState[0],
-    setShowError = _useState[1];
-  // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue)
-  // For regular widgets: use regular properties (datavalue)
-  var effectiveInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== undefined ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== undefined ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== undefined ? initialDataValue : null;
-  var _useState2 = (0, _react.useState)(effectiveInitialValue),
-    datavalue = _useState2[0],
-    setDatavalue = _useState2[1];
-  var _useState3 = (0, _react.useState)(effectiveInitialValue),
-    prevDatavalue = _useState3[0],
-    setPrevDatavalue = _useState3[1];
-  var _useState4 = (0, _react.useState)(effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""),
-    internalValue = _useState4[0],
-    setInternalValue = _useState4[1];
-  // Add state to preserve the original string input when trailingzero is true
-  var _useState5 = (0, _react.useState)(effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""),
-    rawInputValue = _useState5[0],
-    setRawInputValue = _useState5[1];
-  var _useState6 = (0, _react.useState)(false),
-    isDirty = _useState6[0],
-    setIsDirty = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    isTouched = _useState7[0],
-    setIsTouched = _useState7[1];
-  var inputEl = (0, _react.useRef)(null);
-  var effectiveDecimalPlaces = (0, _react.useMemo)(function () {
-    if (decimalplaces > 0) return decimalplaces;
-    if (inputmode === "financial" && step && step < 1) {
-      var stepStr = step.toString();
-      if (stepStr.includes(".")) {
-        return stepStr.split(".")[1].length;
-      }
-    }
-    return decimalplaces;
-  }, [decimalplaces, inputmode, step]);
-  var displayError = error || isDirty && showError;
-  var validateNumber = (0, _react.useCallback)(function (value) {
-    return (0, _formatUtil.validateNumericValue)(value, required, minvalue, maxvalue, regexp);
-  }, [required, regexp, minvalue, maxvalue]);
-  var debouncedUpdateValue = (0, _react.useCallback)(lodash.debounce(function (value) {
-    var validation = validateNumber(value);
-    setShowError(!validation.isValid);
-    if (prevDatavalue === value) {
-      return;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
-      var _listener$onChange;
-      var syntheticEvent = {
-        target: {
-          value: value === null ? "" : value.toString(),
-          name: name
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import TextField from "@mui/material/TextField";
+import * as lodash from "lodash-es";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import {
+  validateNumericValue,
+  handleNumericInputChange,
+  formatOnBlur,
+  handleStepValue
+} from "../../../utils/format-util";
+import { sanitizeInputValue } from "../util";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "form-control app-textbox app-number-input";
+const WmNumber = memo(
+  (props) => {
+    const {
+      required = false,
+      regexp = ".*",
+      disabled,
+      name,
+      hint,
+      arialabel,
+      tabindex,
+      shortcutkey,
+      autofocus,
+      datavalue: initialDataValue = null,
+      maxDataValue: initialMaxDataValue = null,
+      maxvalue: initialMaxValue = null,
+      maxdisplayValue: initialMaxDisplayValue = null,
+      isMaxWidget = false,
+      styles = {},
+      className,
+      placeholder,
+      updatedelay = "0",
+      listener,
+      updateon = "blur",
+      step,
+      minvalue,
+      maxvalue,
+      readonly,
+      inputmode = "natural",
+      trailingzero = false,
+      decimalplaces = 0,
+      onChange,
+      onClick,
+      onKeydown,
+      onKeyup,
+      onKeypress,
+      onBlur,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      id,
+      error
+    } = props;
+    const [showError, setShowError] = useState(false);
+    const effectiveInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== void 0 ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== void 0 ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== void 0 ? initialDataValue : null;
+    const [datavalue, setDatavalue] = useState(effectiveInitialValue);
+    const [prevDatavalue, setPrevDatavalue] = useState(effectiveInitialValue);
+    const [internalValue, setInternalValue] = useState(
+      effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""
+    );
+    const [rawInputValue, setRawInputValue] = useState(
+      effectiveInitialValue !== null ? effectiveInitialValue.toString() : ""
+    );
+    const [isDirty, setIsDirty] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const inputEl = useRef(null);
+    const effectiveDecimalPlaces = useMemo(() => {
+      if (decimalplaces > 0) return decimalplaces;
+      if (inputmode === "financial" && step && step < 1) {
+        const stepStr = step.toString();
+        if (stepStr.includes(".")) {
+          return stepStr.split(".")[1].length;
+        }
+      }
+      return decimalplaces;
+    }, [decimalplaces, inputmode, step]);
+    const displayError = error || isDirty && showError;
+    const validateNumber = useCallback(
+      (value2) => {
+        return validateNumericValue(value2, required, minvalue, maxvalue, regexp);
+      },
+      [required, regexp, minvalue, maxvalue]
+    );
+    const debouncedUpdateValue = useCallback(
+      lodash.debounce(
+        (value2) => {
+          var _a;
+          const validation = validateNumber(value2);
+          setShowError(!validation.isValid);
+          if (prevDatavalue === value2) {
+            return;
+          }
+          if (onChange || (listener == null ? void 0 : listener.onChange)) {
+            const syntheticEvent = {
+              target: {
+                value: value2 === null ? "" : value2.toString(),
+                name
+              },
+              currentTarget: inputEl.current
+            };
+            const updatedWidgetData = isMaxWidget ? {
+              maxDataValue: value2 == null ? "" : value2,
+              maxvalue: value2 == null ? "" : value2,
+              maxdisplayValue: value2 == null ? "" : value2.toString()
+            } : {
+              datavalue: value2 == null ? "" : value2,
+              value: value2 == null ? "" : value2,
+              displayValue: value2 == null ? "" : value2.toString()
+            };
+            (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(listener, props.fieldName || name, updatedWidgetData, value2, prevDatavalue);
+            if (onChange) {
+              const updatedProps = isMaxWidget ? __spreadProps(__spreadValues({}, props), {
+                maxDataValue: value2,
+                maxvalue: value2,
+                maxdisplayValue: value2 == null ? "" : value2.toString()
+              }) : __spreadProps(__spreadValues({}, props), {
+                datavalue: value2,
+                value: value2,
+                displayValue: value2 == null ? "" : value2.toString()
+              });
+              onChange(syntheticEvent, updatedProps, value2, prevDatavalue);
+            }
+          }
+          setPrevDatavalue(value2);
         },
-        currentTarget: inputEl.current
-      };
-      // For max widgets, use max-prefixed properties to avoid conflicts with regular widgets
-      var updatedWidgetData = isMaxWidget ? {
-        maxDataValue: value == null ? "" : value,
-        maxvalue: value == null ? "" : value,
-        maxdisplayValue: value == null ? "" : value.toString()
-      } : {
-        datavalue: value == null ? "" : value,
-        value: value == null ? "" : value,
-        displayValue: value == null ? "" : value.toString()
+        parseInt(updatedelay || "10"),
+        { leading: parseInt(updatedelay) === 0 }
+      ),
+      [onChange, name, prevDatavalue, updatedelay, validateNumber]
+    );
+    useEffect(() => {
+      if (!shortcutkey) return;
+      const handleGlobalKeyDown = (e) => {
+        var _a;
+        if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          e.preventDefault();
+          (_a = inputEl.current) == null ? void 0 : _a.focus();
+        }
       };
-      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || name, updatedWidgetData, value, prevDatavalue);
-      if (onChange) {
-        // Create updated props object with new value
-        // For max widgets, use max-prefixed properties
-        var updatedProps = isMaxWidget ? _objectSpread(_objectSpread({}, props), {}, {
-          maxDataValue: value,
-          maxvalue: value,
-          maxdisplayValue: value == null ? "" : value.toString()
-        }) : _objectSpread(_objectSpread({}, props), {}, {
-          datavalue: value,
-          value: value,
-          displayValue: value == null ? "" : value.toString()
-        });
-        onChange(syntheticEvent, updatedProps, value, prevDatavalue);
+      window.addEventListener("keydown", handleGlobalKeyDown);
+      return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+    }, [shortcutkey]);
+    const handleInputChange = (event) => {
+      var _a;
+      const result = handleNumericInputChange(
+        event.target.value,
+        inputmode,
+        effectiveDecimalPlaces,
+        setRawInputValue
+      );
+      if (result.newVal === null && event.target.value !== "") {
+        return;
       }
-    }
-    setPrevDatavalue(value);
-  }, parseInt(updatedelay || "10"), {
-    leading: parseInt(updatedelay) === 0
-  }), [onChange, name, prevDatavalue, updatedelay, validateNumber]);
-  (0, _react.useEffect)(function () {
-    if (!shortcutkey) return;
-    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
-      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _inputEl$current;
-        e.preventDefault();
-        (_inputEl$current = inputEl.current) === null || _inputEl$current === void 0 || _inputEl$current.focus();
+      setInternalValue(result.inputValue);
+      setDatavalue(result.newVal);
+      const validation = validateNumber(result.newVal);
+      setShowError(!validation.isValid);
+      if (updateon === "keypress") {
+        debouncedUpdateValue(result.newVal);
+        onChange == null ? void 0 : onChange(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], result.newVal, prevDatavalue);
       }
     };
-    window.addEventListener("keydown", handleGlobalKeyDown);
-    return function () {
-      return window.removeEventListener("keydown", handleGlobalKeyDown);
-    };
-  }, [shortcutkey]);
-  var handleInputChange = function handleInputChange(event) {
-    var result = (0, _formatUtil.handleNumericInputChange)(event.target.value, inputmode, effectiveDecimalPlaces, setRawInputValue);
-    if (result.newVal === null && event.target.value !== "") {
-      return; // Invalid input, don't update
-    }
-    setInternalValue(result.inputValue);
-    setDatavalue(result.newVal);
-    var validation = validateNumber(result.newVal);
-    setShowError(!validation.isValid);
-    if (updateon === "keypress") {
-      var _listener$Widgets;
-      debouncedUpdateValue(result.newVal);
-      onChange === null || onChange === void 0 || onChange(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], result.newVal, prevDatavalue);
-    }
-  };
-  var handleBlur = function handleBlur(e) {
-    var _listener$Widgets2;
-    var formattedValue = (0, _formatUtil.formatOnBlur)(datavalue, rawInputValue, trailingzero, effectiveDecimalPlaces);
-    if (formattedValue) {
-      setInternalValue(formattedValue);
-    }
-    if (updateon === "blur") {
-      debouncedUpdateValue(datavalue);
-    }
-    onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
-    var validation = validateNumber(datavalue);
-    if (!validation.isValid && (required || maxvalue || minvalue)) {
-      setIsDirty(true);
-    } else {
-      setIsDirty(false);
-    }
-    if (!validation.isValid && regexp != ".*") {
-      setIsTouched(true);
-      setIsDirty(true);
-      setShowError(true);
-    }
-  };
-  var handleArrowPress = (0, _react.useCallback)(function (event, direction) {
-    event.preventDefault();
-    if (readonly || disabled || !step || step === 0) {
-      return;
-    }
-    var targetVal = event.target.value;
-    var currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
-    var newValue = (0, _formatUtil.handleStepValue)(currentValue, direction, step, effectiveDecimalPlaces, minvalue, maxvalue);
-    var currentPrevValue = datavalue;
-    var cleanValue = newValue.toString();
-    setInternalValue(cleanValue);
-    setDatavalue(newValue);
-    setPrevDatavalue(currentPrevValue);
-    setRawInputValue(cleanValue);
-    var validation = validateNumber(newValue);
-    setShowError(!validation.isValid);
-    if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
-      var _listener$onChange2;
-      var syntheticEvent = {
-        target: {
-          value: newValue.toString(),
-          name: name
-        },
-        currentTarget: inputEl.current
-      };
-      // For max widgets, use max-prefixed properties to avoid conflicts with regular widgets
-      var updatedWidgetData = isMaxWidget ? {
-        maxDataValue: newValue == null ? "" : newValue,
-        maxvalue: newValue == null ? "" : newValue,
-        maxdisplayValue: newValue == null ? "" : newValue.toString()
-      } : {
-        datavalue: newValue == null ? "" : newValue,
-        value: newValue == null ? "" : newValue,
-        displayValue: newValue == null ? "" : newValue.toString()
-      };
-      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || name, updatedWidgetData, newValue, currentPrevValue);
-      if (onChange) {
-        // Create updated props object with new datavalue and displayValue
-        var updatedProps = _objectSpread(_objectSpread({}, props), {}, {
-          datavalue: newValue,
-          displayValue: newValue == null ? "" : newValue.toString()
-        });
-        onChange(syntheticEvent, updatedProps, newValue, currentPrevValue);
+    const handleBlur = (e) => {
+      var _a;
+      const formattedValue = formatOnBlur(
+        datavalue,
+        rawInputValue,
+        trailingzero,
+        effectiveDecimalPlaces
+      );
+      if (formattedValue) {
+        setInternalValue(formattedValue);
       }
-    }
-    if (updateon === "keypress") {
-      debouncedUpdateValue(newValue);
-    }
-    setPrevDatavalue(newValue);
-  }, [readonly, disabled, step, datavalue, minvalue, maxvalue, effectiveDecimalPlaces, validateNumber, onChange, name, props, listener, updateon, debouncedUpdateValue]);
-  var handleKeyDown = function handleKeyDown(e) {
-    var _listener$Widgets4;
-    if (step && step !== 0) {
-      if (e.key === "ArrowUp") {
-        handleArrowPress(e, "UP");
-        return;
-      } else if (e.key === "ArrowDown") {
-        handleArrowPress(e, "DOWN");
-        return;
+      if (updateon === "blur") {
+        debouncedUpdateValue(datavalue);
+      }
+      onBlur == null ? void 0 : onBlur(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+      const validation = validateNumber(datavalue);
+      if (!validation.isValid && (required || maxvalue || minvalue)) {
+        setIsDirty(true);
       } else {
-        var _listener$Widgets3;
-        onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+        setIsDirty(false);
       }
-    }
-    if (e.key === "Enter") {
-      debouncedUpdateValue(datavalue);
-    }
-    onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
-  };
-  var handleKeyUp = function handleKeyUp(e) {
-    var _listener$Widgets5;
-    onKeyup === null || onKeyup === void 0 || onKeyup(e, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
-  };
-  var handleFocus = function handleFocus(e) {
-    var _listener$Widgets6;
-    onFocus === null || onFocus === void 0 || onFocus(e, listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
-  };
-  var handleClick = function handleClick(e) {
-    var _listener$Widgets7;
-    onClick === null || onClick === void 0 || onClick(e, listener === null || listener === void 0 || (_listener$Widgets7 = listener.Widgets) === null || _listener$Widgets7 === void 0 ? void 0 : _listener$Widgets7[name]);
-  };
-  var handleMouseEnter = function handleMouseEnter(e) {
-    var _listener$Widgets8;
-    setIsTouched(true);
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e, listener === null || listener === void 0 || (_listener$Widgets8 = listener.Widgets) === null || _listener$Widgets8 === void 0 ? void 0 : _listener$Widgets8[name]);
-  };
-  var handleMouseLeave = function handleMouseLeave(e) {
-    var _listener$Widgets9;
-    setIsTouched(false);
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e, listener === null || listener === void 0 || (_listener$Widgets9 = listener.Widgets) === null || _listener$Widgets9 === void 0 ? void 0 : _listener$Widgets9[name]);
-  };
-  var handleKeyPress = function handleKeyPress(e) {
-    var _listener$Widgets0;
-    onKeypress === null || onKeypress === void 0 || onKeypress(e, listener === null || listener === void 0 || (_listener$Widgets0 = listener.Widgets) === null || _listener$Widgets0 === void 0 ? void 0 : _listener$Widgets0[name]);
-  };
-  (0, _react.useEffect)(function () {
-    // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue)
-    // For regular widgets: use regular properties (datavalue)
-    var currentInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== undefined ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== undefined ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== undefined ? initialDataValue : null;
-
-    // Only update if the incoming value is different from current state
-    // Use a more robust comparison that handles null/undefined/empty string cases
-    var currentValue = datavalue !== null && datavalue !== undefined ? datavalue : null;
-    var newValue = currentInitialValue;
-    if (currentValue !== newValue) {
-      setDatavalue(newValue);
-      var cleanValue = newValue !== null ? newValue.toString() : "";
-      setInternalValue(cleanValue);
-      setRawInputValue(cleanValue);
-      setPrevDatavalue(currentValue);
-    }
-  }, [initialDataValue, initialMaxDataValue, initialMaxValue, isMaxWidget]);
-  (0, _react.useEffect)(function () {
-    if (inputEl.current) {
-      var focus = function focus() {
-        var _inputEl$current2;
-        (_inputEl$current2 = inputEl.current) === null || _inputEl$current2 === void 0 || _inputEl$current2.focus();
-      };
-      if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
-        listener.Widgets[name].focus = focus;
+      if (!validation.isValid && regexp != ".*") {
+        setIsTouched(true);
+        setIsDirty(true);
+        setShowError(true);
       }
-    }
-  }, []);
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown
-  }, onMouseEnter ? {
-    onMouseEnter: handleMouseEnter
-  } : {}), onMouseLeave ? {
-    onMouseLeave: handleMouseLeave
-  } : {}), onClick ? {
-    onClick: handleClick
-  } : {}), onFocus ? {
-    onFocus: handleFocus
-  } : {}), onKeyup ? {
-    onKeyUp: handleKeyUp
-  } : {}), onKeypress ? {
-    onKeyPress: handleKeyPress
-  } : {}), updateon === "blur" || onBlur ? {
-    onBlur: handleBlur
-  } : {});
-  var value = (0, _util.sanitizeInputValue)(internalValue);
-  return __jsx(_TextField["default"], (0, _extends2["default"])({}, events, {
-    hidden: props.hidden,
-    title: hint || "Number Input",
-    name: name,
-    inputRef: inputEl,
-    variant: "standard",
-    autoFocus: autofocus,
-    disabled: disabled,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter number",
-    type: "text",
-    id: id || name,
-    value: value,
-    error: displayError,
-    className: (0, _clsx["default"])("app-input-wrapper", "wm-number-textfield", disabled && "wm-number-textfield-disabled", isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
-    slotProps: {
-      htmlInput: {
-        step: step,
-        min: minvalue,
-        max: maxvalue,
-        readOnly: readonly,
-        required: required,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, className, "wm-number-slot-input", isTouched ? "ng-touched" : "ng-untouched", displayError ? "ng-invalid" : "ng-valid"),
-        style: styles,
-        "aria-label": arialabel,
-        pattern: regexp,
-        tabIndex: tabindex
+    };
+    const handleArrowPress = useCallback(
+      (event, direction) => {
+        var _a;
+        event.preventDefault();
+        if (readonly || disabled || !step || step === 0) {
+          return;
+        }
+        const targetVal = event.target.value;
+        let currentValue = targetVal && !isNaN(Number.parseFloat(targetVal)) ? Number.parseFloat(targetVal) : datavalue;
+        const newValue = handleStepValue(
+          currentValue,
+          direction,
+          step,
+          effectiveDecimalPlaces,
+          minvalue,
+          maxvalue
+        );
+        const currentPrevValue = datavalue;
+        const cleanValue = newValue.toString();
+        setInternalValue(cleanValue);
+        setDatavalue(newValue);
+        setPrevDatavalue(currentPrevValue);
+        setRawInputValue(cleanValue);
+        const validation = validateNumber(newValue);
+        setShowError(!validation.isValid);
+        if (onChange || (listener == null ? void 0 : listener.onChange)) {
+          const syntheticEvent = {
+            target: {
+              value: newValue.toString(),
+              name
+            },
+            currentTarget: inputEl.current
+          };
+          const updatedWidgetData = isMaxWidget ? {
+            maxDataValue: newValue == null ? "" : newValue,
+            maxvalue: newValue == null ? "" : newValue,
+            maxdisplayValue: newValue == null ? "" : newValue.toString()
+          } : {
+            datavalue: newValue == null ? "" : newValue,
+            value: newValue == null ? "" : newValue,
+            displayValue: newValue == null ? "" : newValue.toString()
+          };
+          (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(
+            listener,
+            props.fieldName || name,
+            updatedWidgetData,
+            newValue,
+            currentPrevValue
+          );
+          if (onChange) {
+            const updatedProps = __spreadProps(__spreadValues({}, props), {
+              datavalue: newValue,
+              displayValue: newValue == null ? "" : newValue.toString()
+            });
+            onChange(syntheticEvent, updatedProps, newValue, currentPrevValue);
+          }
+        }
+        if (updateon === "keypress") {
+          debouncedUpdateValue(newValue);
+        }
+        setPrevDatavalue(newValue);
       },
-      formHelperText: {
-        className: (0, _clsx["default"])("wm-number-helper-text", displayError && "wm-number-helper-text-error")
+      [
+        readonly,
+        disabled,
+        step,
+        datavalue,
+        minvalue,
+        maxvalue,
+        effectiveDecimalPlaces,
+        validateNumber,
+        onChange,
+        name,
+        props,
+        listener,
+        updateon,
+        debouncedUpdateValue
+      ]
+    );
+    const handleKeyDown = (e) => {
+      var _a, _b;
+      if (step && step !== 0) {
+        if (e.key === "ArrowUp") {
+          handleArrowPress(e, "UP");
+          return;
+        } else if (e.key === "ArrowDown") {
+          handleArrowPress(e, "DOWN");
+          return;
+        } else {
+          onKeydown == null ? void 0 : onKeydown(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        }
       }
-    },
-    sx: styles
-  }));
-}, function (prev, current) {
-  var keys = ["datavalue", "maxDataValue", "isMaxWidget", "disabled", "required", "readonly", "placeholder", "tabindex", "shortcutkey", "autofocus", "arialabel", "inputmode", "trailingzero", "decimalplaces", "minvalue", "maxvalue", "className", "hidden", "show", "error"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+      if (e.key === "Enter") {
+        debouncedUpdateValue(datavalue);
+      }
+      onKeydown == null ? void 0 : onKeydown(e, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name]);
+    };
+    const handleKeyUp = (e) => {
+      var _a;
+      onKeyup == null ? void 0 : onKeyup(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleFocus = (e) => {
+      var _a;
+      onFocus == null ? void 0 : onFocus(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleClick = (e) => {
+      var _a;
+      onClick == null ? void 0 : onClick(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleMouseEnter = (e) => {
+      var _a;
+      setIsTouched(true);
+      onMouseEnter == null ? void 0 : onMouseEnter(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleMouseLeave = (e) => {
+      var _a;
+      setIsTouched(false);
+      onMouseLeave == null ? void 0 : onMouseLeave(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    const handleKeyPress = (e) => {
+      var _a;
+      onKeypress == null ? void 0 : onKeypress(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+    };
+    useEffect(() => {
+      const currentInitialValue = isMaxWidget ? initialMaxDataValue !== null && initialMaxDataValue !== void 0 ? initialMaxDataValue : initialMaxValue !== null && initialMaxValue !== void 0 ? initialMaxValue : null : initialDataValue !== null && initialDataValue !== void 0 ? initialDataValue : null;
+      const currentValue = datavalue !== null && datavalue !== void 0 ? datavalue : null;
+      const newValue = currentInitialValue;
+      if (currentValue !== newValue) {
+        setDatavalue(newValue);
+        const cleanValue = newValue !== null ? newValue.toString() : "";
+        setInternalValue(cleanValue);
+        setRawInputValue(cleanValue);
+        setPrevDatavalue(currentValue);
+      }
+    }, [initialDataValue, initialMaxDataValue, initialMaxValue, isMaxWidget]);
+    useEffect(() => {
+      if (inputEl.current) {
+        const focus = () => {
+          var _a;
+          (_a = inputEl.current) == null ? void 0 : _a.focus();
+        };
+        if (listener == null ? void 0 : listener.Widgets[name]) {
+          listener.Widgets[name].focus = focus;
+        }
+      }
+    }, []);
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      onChange: handleInputChange,
+      onKeyDown: handleKeyDown
+    }, onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), onMouseLeave ? { onMouseLeave: handleMouseLeave } : {}), onClick ? { onClick: handleClick } : {}), onFocus ? { onFocus: handleFocus } : {}), onKeyup ? { onKeyUp: handleKeyUp } : {}), onKeypress ? { onKeyPress: handleKeyPress } : {}), updateon === "blur" || onBlur ? { onBlur: handleBlur } : {});
+    const value = sanitizeInputValue(internalValue);
+    return /* @__PURE__ */ jsx(
+      TextField,
+      __spreadProps(__spreadValues({}, events), {
+        hidden: props.hidden,
+        title: hint || "Number Input",
+        name,
+        inputRef: inputEl,
+        variant: "standard",
+        autoFocus: autofocus,
+        disabled,
+        placeholder: placeholder != null ? placeholder : "Enter number",
+        type: "text",
+        id: id || name,
+        value,
+        error: displayError,
+        className: clsx(
+          "app-input-wrapper",
+          "wm-number-textfield",
+          disabled && "wm-number-textfield-disabled",
+          isTouched ? "ng-touched" : "ng-untouched",
+          displayError ? "ng-invalid" : "ng-valid"
+        ),
+        slotProps: {
+          htmlInput: {
+            step,
+            min: minvalue,
+            max: maxvalue,
+            readOnly: readonly,
+            required,
+            className: clsx(
+              DEFAULT_CLASS,
+              className,
+              "wm-number-slot-input",
+              isTouched ? "ng-touched" : "ng-untouched",
+              displayError ? "ng-invalid" : "ng-valid"
+            ),
+            style: styles,
+            "aria-label": arialabel,
+            pattern: regexp,
+            tabIndex: tabindex
+          },
+          formHelperText: {
+            className: clsx("wm-number-helper-text", displayError && "wm-number-helper-text-error")
+          }
+        },
+        sx: styles
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "maxDataValue",
+      "isMaxWidget",
+      "disabled",
+      "required",
+      "readonly",
+      "placeholder",
+      "tabindex",
+      "shortcutkey",
+      "autofocus",
+      "arialabel",
+      "inputmode",
+      "trailingzero",
+      "decimalplaces",
+      "minvalue",
+      "maxvalue",
+      "className",
+      "hidden",
+      "show",
+      "error"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmNumber.displayName = "WmNumber";
-var WithForm = (0, _withFormController["default"])(WmNumber);
-var WmNumberStandalone = exports.WmNumber = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmNumber component provides a numeric input with step controls, formatting, and validation.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-number--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-number--docs)
- *
- * @param props - {@link WmNumberProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmNumber);
+const WmNumberStandalone = withStandalone(WithForm);
+var number_default = withBaseWrapper(WithForm);
+export {
+  WmNumberStandalone as WmNumber,
+  number_default as default
+};