@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

package/components/input/text/index.js

@@ -1,499 +1,462 @@
-"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.WmText = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _toNumber = _interopRequireDefault(require("lodash-es/toNumber"));
-var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _util = require("./util");
-var _delay = _interopRequireDefault(require("lodash-es/delay"));
-var _util2 = 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";
-var WmText = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$autocomplete = props.autocomplete,
-    autocomplete = _props$autocomplete === void 0 ? "true" : _props$autocomplete,
-    autofocus = props.autofocus,
-    disabled = props.disabled,
-    readonly = props.readonly,
-    placeholder = props.placeholder,
-    type = props.type,
-    maxchars = props.maxchars,
-    _props$styles = props.styles,
-    styles = _props$styles === void 0 ? {} : _props$styles,
-    className = props.className,
-    shortcutkey = props.shortcutkey,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    name = props.name,
-    arialabel = props.arialabel,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? "" : _props$datavalue,
-    hint = props.hint,
-    listener = props.listener,
-    displayformat = props.displayformat,
-    _props$showdisplayfor = props.showdisplayformaton,
-    showdisplayformaton = _props$showdisplayfor === void 0 ? "keypress" : _props$showdisplayfor,
-    _props$updatedelay = props.updatedelay,
-    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
-    tabindex = props.tabindex,
-    regexp = props.regexp,
-    _props$updateon = props.updateon,
-    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
-    _props$autocapitalize = props.autocapitalize,
-    autocapitalize = _props$autocapitalize === void 0 ? "none" : _props$autocapitalize,
-    autotrim = props.autotrim,
-    onChange = props.onChange,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onKeydown = props.onKeydown,
-    onKeypress = props.onKeypress,
-    onKeyup = props.onKeyup,
-    onMouseEnter = props.onMouseEnter,
-    id = props.id,
-    error = props.error,
-    leadingiconclass = props.leadingiconclass,
-    trailingiconclass = props.trailingiconclass,
-    supportingtext = props.supportingtext,
-    onLeadingiconclick = props.onLeadingiconclick,
-    onTrailingiconclick = props.onTrailingiconclick;
-
-  // Use a single state for the raw input value
-  var _useState = (0, _react.useState)(datavalue),
-    rawValue = _useState[0],
-    setRawValue = _useState[1];
-
-  // Compute formatted display value based on raw value
-  var displayValue = displayformat ? (0, _util.formatInput)(rawValue, displayformat) : rawValue;
-  var _useState2 = (0, _react.useState)(false),
-    showError = _useState2[0],
-    setShowError = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    isDirty = _useState3[0],
-    setIsDirty = _useState3[1];
-  var _useState4 = (0, _react.useState)(false),
-    isTouched = _useState4[0],
-    setIsTouched = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    isAutofilled = _useState5[0],
-    setIsAutofilled = _useState5[1];
-  var ref = (0, _react.useRef)(null);
-  var cursorPositionRef = (0, _react.useRef)(0);
-  var displayError = error || isDirty && showError;
-
-  // Track if changes are coming from internal user input
-  var isInternalChange = (0, _react.useRef)(false);
-  // Store previous value for onChange callbacks
-  var prevValueRef = (0, _react.useRef)(datavalue);
-
-  // Sync state with prop changes
-  (0, _react.useEffect)(function () {
-    // Only update state from props if it's not from an internal change
-    if (!isInternalChange.current && datavalue !== rawValue) {
-      setRawValue(datavalue);
-      prevValueRef.current = datavalue;
-    } else if (datavalue !== rawValue) {
-      setRawValue(datavalue);
+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]);
     }
-    // Reset the flag
-    isInternalChange.current = false;
-
-    // Reset autofill state when value is reset externally
-    if (datavalue === "" || datavalue === null || datavalue === undefined) {
-      setIsAutofilled(false);
-    }
-  }, [datavalue]);
-  var validateInput = (0, _react.useCallback)(function (value) {
-    if (displayformat) {
-      value = (0, _util.removeDisplayFormat)(value, displayformat);
-    }
-    if (!value.trim() && required) {
-      return {
-        isValid: false,
-        type: "required",
-        message: "This field is required"
-      };
-    }
-    if (type === "email" && value && value.trim()) {
-      var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(value.trim())) {
-        return {
-          isValid: false,
-          type: "email",
-          message: "Please enter a valid email address"
-        };
-      }
-    }
-    if (regexp && value && !new RegExp(regexp || ".*", "g").test(value)) {
-      return {
-        isValid: false,
-        type: "regexp",
-        message: "Invalid format"
-      };
-    }
-    if (maxchars && value.length > maxchars) {
-      return {
-        isValid: false,
-        type: "maxchars",
-        message: "Maximum ".concat(maxchars, " characters allowed")
-      };
-    }
-    if (props.type === "number") {
-      if (props.minvalue && (0, _toNumber["default"])(value) < props.minvalue) {
-        return {
-          isValid: false,
-          type: "minvalue",
-          message: "Minimum ".concat(props.minvalue, " characters allowed")
-        };
-      }
-      if (props.maxvalue && (0, _toNumber["default"])(value) > props.maxvalue) {
-        return {
-          isValid: false,
-          type: "maxvalue",
-          message: "Maximum ".concat(props.maxvalue, " characters allowed")
-        };
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef, useEffect, useState, useCallback, useMemo } from "react";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import clsx from "clsx";
+import toNumber from "lodash-es/toNumber";
+import debounce from "lodash-es/debounce";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { formatInput, removeDisplayFormat, applyAutoCapitalize, getFormatMaxLength } from "./util";
+import delay from "lodash-es/delay";
+import { sanitizeInputValue } from "../util";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "form-control app-textbox";
+const WmText = memo(
+  (props) => {
+    const {
+      autocomplete = "true",
+      autofocus,
+      disabled,
+      readonly,
+      placeholder,
+      type,
+      maxchars,
+      styles = {},
+      className,
+      shortcutkey,
+      required = false,
+      name,
+      arialabel,
+      datavalue = "",
+      hint,
+      listener,
+      displayformat,
+      showdisplayformaton = "keypress",
+      updatedelay = "0",
+      tabindex,
+      regexp,
+      updateon: updateonProp = "blur",
+      autocapitalize = "none",
+      autotrim,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeydown,
+      onKeypress,
+      onKeyup,
+      onMouseEnter,
+      id,
+      error,
+      leadingiconclass,
+      trailingiconclass,
+      supportingtext,
+      onLeadingiconclick,
+      onTrailingiconclick
+    } = props;
+    const updateon = updateonProp === "default" ? "blur" : updateonProp;
+    const [rawValue, setRawValue] = useState(() => sanitizeInputValue(datavalue));
+    const displayValue = displayformat ? formatInput(rawValue, displayformat) : rawValue;
+    const [showError, setShowError] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const [isAutofilled, setIsAutofilled] = useState(false);
+    const ref = useRef(null);
+    const cursorPositionRef = useRef(0);
+    const displayError = error || isDirty && showError;
+    const isInternalChange = useRef(false);
+    const prevValueRef = useRef(datavalue);
+    useEffect(() => {
+      const normalizedValue = sanitizeInputValue(datavalue);
+      if (!isInternalChange.current && normalizedValue !== rawValue) {
+        setRawValue(normalizedValue);
+        prevValueRef.current = datavalue;
+      } else if (normalizedValue !== rawValue) {
+        setRawValue(normalizedValue);
       }
-    }
-    return {
-      isValid: true,
-      message: "",
-      type: ""
-    };
-  }, [required, regexp, maxchars]);
-
-  // Debounced update function for delayed updates
-  var debouncedUpdateValue = (0, _react.useMemo)(function () {
-    return (0, _debounce["default"])(function (value) {
-      if (autotrim) {
-        value = value.trim();
+      isInternalChange.current = false;
+      if (datavalue === "" || datavalue === null || datavalue === void 0) {
+        setIsAutofilled(false);
       }
-      var validation = validateInput(value);
-      setShowError(!validation.isValid);
-      if (onChange || listener !== null && listener !== void 0 && listener.onChange) {
-        isInternalChange.current = true;
-
-        // Remove display format before processing the value
-        var unformattedValue = displayformat ? (0, _util.removeDisplayFormat)(value, displayformat) : value;
-        var _datavalue = props.type === "number" ? (0, _toNumber["default"])(unformattedValue) : unformattedValue;
-        if (listener !== null && listener !== void 0 && listener.onChange) {
-          listener.onChange(props.fieldName || name, {
-            datavalue: _datavalue,
-            value: value,
-            charlength: value.length
-          });
+    }, [datavalue]);
+    const validateInput = useCallback(
+      (value) => {
+        let stringValue = sanitizeInputValue(value);
+        if (displayformat) {
+          stringValue = removeDisplayFormat(stringValue, displayformat);
+        }
+        if (!stringValue.trim() && required) {
+          return { isValid: false, type: "required", message: "This field is required" };
+        }
+        if (type === "email" && stringValue && stringValue.trim()) {
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(stringValue.trim())) {
+            return { isValid: false, type: "email", message: "Please enter a valid email address" };
+          }
         }
-        if (onChange) {
-          var syntheticEvent = {
-            target: {
-              value: _datavalue,
-              name: name
-            },
-            currentTarget: ref.current
+        if (regexp && stringValue && !new RegExp(regexp || ".*", "g").test(stringValue)) {
+          return { isValid: false, type: "regexp", message: "Invalid format" };
+        }
+        if (maxchars && stringValue.length > maxchars) {
+          return {
+            isValid: false,
+            type: "maxchars",
+            message: `Maximum ${maxchars} characters allowed`
           };
-          // onChange expects string | null, so convert number to string if needed
-          var onChangeValue = typeof _datavalue === "number" ? String(_datavalue) : _datavalue;
-          var prevValue = typeof prevValueRef.current === "number" ? String(prevValueRef.current) : prevValueRef.current;
-          onChange(syntheticEvent, props, onChangeValue, prevValue);
         }
-        prevValueRef.current = _datavalue;
-      }
-    }, parseInt(updatedelay) || 0, {
-      leading: parseInt(updatedelay) === 0
-    });
-  }, [onChange, listener, name, validateInput, autotrim, displayformat]);
-
-  // Shortcut key handler
-  (0, _react.useEffect)(function () {
-    if (!shortcutkey) return;
-    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
-      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _ref$current;
-        e.preventDefault();
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
-      }
-    };
-    window.addEventListener("keydown", handleGlobalKeyDown);
-    return function () {
-      return window.removeEventListener("keydown", handleGlobalKeyDown);
-    };
-  }, [shortcutkey]);
-
-  // Autofill detection using mui-auto-fill animation event
-  (0, _react.useEffect)(function () {
-    var input = ref.current;
-    function handleAnimationStart(e) {
-      if (e.animationName === "mui-auto-fill") {
-        setIsAutofilled(true);
+        if (props.type === "number") {
+          if (props.minvalue && toNumber(stringValue) < props.minvalue) {
+            return {
+              isValid: false,
+              type: "minvalue",
+              message: `Minimum ${props.minvalue} characters allowed`
+            };
+          }
+          if (props.maxvalue && toNumber(stringValue) > props.maxvalue) {
+            return {
+              isValid: false,
+              type: "maxvalue",
+              message: `Maximum ${props.maxvalue} characters allowed`
+            };
+          }
+        }
+        return { isValid: true, message: "", type: "" };
+      },
+      [required, regexp, maxchars, displayformat, type, props.type, props.minvalue, props.maxvalue]
+    );
+    const debouncedUpdateValue = useMemo(
+      () => debounce(
+        (value) => {
+          if (autotrim) {
+            value = value.trim();
+          }
+          const validation = validateInput(value);
+          setShowError(!validation.isValid);
+          if (onChange || (listener == null ? void 0 : listener.onChange)) {
+            isInternalChange.current = true;
+            const unformattedValue = displayformat ? removeDisplayFormat(value, displayformat) : value;
+            const datavalue2 = props.type === "number" ? toNumber(unformattedValue) : unformattedValue;
+            if (listener == null ? void 0 : listener.onChange) {
+              listener.onChange(props.fieldName || name, {
+                datavalue: datavalue2,
+                value,
+                charlength: value.length
+              });
+            }
+            if (onChange) {
+              const syntheticEvent = {
+                target: {
+                  value: datavalue2,
+                  name
+                },
+                currentTarget: ref.current
+              };
+              const onChangeValue = typeof datavalue2 === "number" ? String(datavalue2) : datavalue2;
+              const prevValue = typeof prevValueRef.current === "number" ? String(prevValueRef.current) : prevValueRef.current;
+              onChange(syntheticEvent, props, onChangeValue, prevValue);
+            }
+            prevValueRef.current = datavalue2;
+          }
+        },
+        parseInt(updatedelay) || 0,
+        { leading: parseInt(updatedelay) === 0 }
+      ),
+      [onChange, listener, name, validateInput, autotrim, displayformat]
+    );
+    useEffect(() => {
+      if (!shortcutkey) return;
+      const handleGlobalKeyDown = (e) => {
+        var _a;
+        if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          e.preventDefault();
+          (_a = ref.current) == null ? void 0 : _a.focus();
+        }
+      };
+      window.addEventListener("keydown", handleGlobalKeyDown);
+      return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+    }, [shortcutkey]);
+    useEffect(() => {
+      const input = ref.current;
+      function handleAnimationStart(e) {
+        if (e.animationName === "mui-auto-fill") {
+          setIsAutofilled(true);
+        }
       }
-    }
-    if (input) {
-      input.addEventListener("animationstart", handleAnimationStart);
-    }
-    return function () {
       if (input) {
-        input.removeEventListener("animationstart", handleAnimationStart);
+        input.addEventListener("animationstart", handleAnimationStart);
       }
-    };
-  }, []);
-  var handleInputChange = function handleInputChange(e) {
-    isInternalChange.current = true;
-    var inputEl = e.target;
-    var newValue = inputEl.value;
-    var previousValue = rawValue;
-    cursorPositionRef.current = inputEl.selectionStart || 0;
-
-    // Manual autocapitalize implementation
-    var capitalizeResult = (0, _util.applyAutoCapitalize)(newValue, previousValue, cursorPositionRef.current, autocapitalize);
-    newValue = capitalizeResult.value;
-
-    // Extract meaningful characters for validation if displayformat is present
-    var cleanValue = displayformat ? (0, _util.removeDisplayFormat)(newValue, displayformat) : newValue;
-
-    // Enforce maxchars constraint BEFORE setting state
-    if (maxchars && cleanValue.length > maxchars) {
-      // Prevent input that exceeds maxchars
-      return;
-    }
-
-    // Enforce displayformat character limit using the generic format parser
-    if (displayformat) {
-      var maxFormatLength = (0, _util.getFormatMaxLength)(displayformat);
-      if (cleanValue.length > maxFormatLength) {
-        // Prevent input that exceeds format character limit
-        return;
-      }
-    }
-
-    // Enforce min/max value constraints for number type
-    if (props.type === "number") {
-      var numValue = (0, _toNumber["default"])(cleanValue);
-      if (props.maxvalue !== undefined && numValue > props.maxvalue) {
-        // Prevent input that exceeds maxvalue
+      return () => {
+        if (input) {
+          input.removeEventListener("animationstart", handleAnimationStart);
+        }
+      };
+    }, []);
+    const handleInputChange = (e) => {
+      isInternalChange.current = true;
+      const inputEl = e.target;
+      let newValue = inputEl.value;
+      const previousValue = rawValue;
+      cursorPositionRef.current = inputEl.selectionStart || 0;
+      const capitalizeResult = applyAutoCapitalize(
+        newValue,
+        previousValue,
+        cursorPositionRef.current,
+        autocapitalize
+      );
+      newValue = capitalizeResult.value;
+      const cleanValue = displayformat ? removeDisplayFormat(newValue, displayformat) : newValue;
+      if (maxchars && cleanValue.length > maxchars) {
         return;
       }
-      if (props.minvalue !== undefined && numValue < props.minvalue && cleanValue.length >= String(props.minvalue).length) {
-        // Only prevent if the number length is complete and still below minvalue
-        // This allows typing "1" when minvalue is 10
-        var minLength = String(props.minvalue).length;
-        if (cleanValue.length >= minLength) {
+      if (displayformat) {
+        const maxFormatLength = getFormatMaxLength(displayformat);
+        if (cleanValue.length > maxFormatLength) {
           return;
         }
       }
-    }
-    setRawValue(newValue);
-
-    // Restore cursor position after capitalization
-    if (capitalizeResult.wasCapitalized) {
-      setTimeout(function () {
-        if (ref.current && cursorPositionRef.current !== null) {
-          ref.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+      if (props.type === "number") {
+        const numValue = toNumber(cleanValue);
+        if (props.maxvalue !== void 0 && numValue > props.maxvalue) {
+          return;
         }
-      }, 0);
-    }
-
-    // Handle cursor position for formatted input
-    if (displayformat && showdisplayformaton === "keypress") {
-      setTimeout(function () {
-        if (ref.current) {
-          var formatted = (0, _util.formatInput)(newValue, displayformat);
-          // Count meaningful characters (not separators) before cursor
-          var charsBefore = (0, _util.removeDisplayFormat)(newValue.substring(0, cursorPositionRef.current), displayformat).length;
-
-          // Find position in formatted string where we have the same number of meaningful chars
-          var newPos = formatted.split("").reduce(function (pos, _char, index) {
-            if (pos !== -1) return pos;
-            var charsSoFar = (0, _util.removeDisplayFormat)(formatted.substring(0, index + 1), displayformat).length;
-            return charsSoFar >= charsBefore ? index + 1 : -1;
-          }, -1);
-          if (newPos !== -1) {
-            ref.current.setSelectionRange(newPos, newPos);
+        if (props.minvalue !== void 0 && numValue < props.minvalue && cleanValue.length >= String(props.minvalue).length) {
+          const minLength = String(props.minvalue).length;
+          if (cleanValue.length >= minLength) {
+            return;
           }
         }
-      }, 0);
-    }
-    var validation = validateInput(newValue);
-    setShowError(!validation.isValid);
-
-    // Set isDirty based on validation and whether user has typed
-    if (updateon === "keypress") {
-      if (!validation.isValid && (newValue.trim() || required)) {
+      }
+      setRawValue(newValue);
+      if (capitalizeResult.wasCapitalized) {
+        setTimeout(() => {
+          if (ref.current && cursorPositionRef.current !== null) {
+            ref.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+          }
+        }, 0);
+      }
+      if (displayformat && showdisplayformaton === "keypress") {
+        setTimeout(() => {
+          if (ref.current) {
+            const formatted = formatInput(newValue, displayformat);
+            const charsBefore = removeDisplayFormat(
+              newValue.substring(0, cursorPositionRef.current),
+              displayformat
+            ).length;
+            const newPos = formatted.split("").reduce((pos, char, index) => {
+              if (pos !== -1) return pos;
+              const charsSoFar = removeDisplayFormat(
+                formatted.substring(0, index + 1),
+                displayformat
+              ).length;
+              return charsSoFar >= charsBefore ? index + 1 : -1;
+            }, -1);
+            if (newPos !== -1) {
+              ref.current.setSelectionRange(newPos, newPos);
+            }
+          }
+        }, 0);
+      }
+      const validation = validateInput(newValue);
+      setShowError(!validation.isValid);
+      if (updateon === "keypress") {
+        if (!validation.isValid && (newValue.trim() || required)) {
+          setIsDirty(true);
+        } else if (validation.isValid && !required) {
+          setIsDirty(false);
+        }
+      }
+      if (updateon === "keypress" || isAutofilled) {
+        debouncedUpdateValue(newValue);
+      }
+    };
+    const handleBlur = (e) => {
+      if (readonly || disabled) {
+        return;
+      }
+      const validation = validateInput(rawValue);
+      if (!validation.isValid && (required || validation.type === "regexp")) {
         setIsDirty(true);
-      } else if (validation.isValid && !required) {
-        // Reset isDirty when field becomes valid (except for required fields which need blur)
+      } else {
         setIsDirty(false);
       }
-    }
-    if (updateon === "keypress" || isAutofilled) {
-      debouncedUpdateValue(newValue);
-    }
-  };
-  var handleBlur = function handleBlur(e) {
-    if (readonly || disabled) {
-      return;
-    }
-    var validation = validateInput(rawValue);
-    if (!validation.isValid && (required || validation.type === "regexp")) {
-      setIsDirty(true);
-    } else {
-      setIsDirty(false);
-    }
-    setShowError(!validation.isValid);
-    if (updateon === "blur") {
-      debouncedUpdateValue(rawValue);
-    }
-    if (!validation.isValid && regexp != ".*") {
-      setIsTouched(true);
-      setIsDirty(true);
-    }
-    onBlur === null || onBlur === void 0 || onBlur(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-  };
-  var handleFocus = function handleFocus(e) {
-    onFocus === null || onFocus === void 0 || onFocus(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    (0, _delay["default"])(function () {
-      onKeydown === null || onKeydown === void 0 || onKeydown(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-      if (e.key === "Enter") {
+      setShowError(!validation.isValid);
+      if (updateon === "blur") {
         debouncedUpdateValue(rawValue);
       }
-    }, 0);
-  };
-  var handleKeyPress = function handleKeyPress(e) {
-    (0, _delay["default"])(function () {
-      onKeypress === null || onKeypress === void 0 || onKeypress(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }, 0);
-  };
-  var handleKeyUp = function handleKeyUp(e) {
-    (0, _delay["default"])(function () {
-      onKeyup === null || onKeyup === void 0 || onKeyup(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    }, 0);
-  };
-  var handleLeadingIconClick = function handleLeadingIconClick(e) {
-    e.preventDefault();
-    onLeadingiconclick === null || onLeadingiconclick === void 0 || onLeadingiconclick(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-  };
-  var handleTrailingIconClick = function handleTrailingIconClick(e) {
-    e.preventDefault();
-    onTrailingiconclick === null || onTrailingiconclick === void 0 || onTrailingiconclick(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-  };
-  var handleMouseEnter = function handleMouseEnter(e) {
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    setIsTouched(true);
-  };
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    onChange: handleInputChange,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown
-  }, onFocus ? {
-    onFocus: handleFocus
-  } : {}), onKeyup ? {
-    onKeyUp: handleKeyUp
-  } : {}), onKeypress ? {
-    onKeyPress: handleKeyPress
-  } : {}), props.onClick ? {
-    onClick: props.onClick
-  } : {}), props.onMouseEnter ? {
-    onMouseEnter: handleMouseEnter
-  } : {}), props.onMouseLeave ? {
-    onMouseLeave: props.onMouseLeave
-  } : {});
-  return __jsx(_TextField["default"], (0, _extends2["default"])({}, events, {
-    hidden: props.hidden,
-    title: hint || "Text Input",
-    name: name,
-    id: id || name,
-    variant: "standard",
-    autoComplete: (autocomplete === null || autocomplete === void 0 ? void 0 : autocomplete.toString()) === "true" ? "on" : "off",
-    autoFocus: autofocus,
-    disabled: disabled,
-    required: required,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter text",
-    value: (0, _util2.sanitizeInputValue)(displayValue),
-    type: type,
-    inputRef: ref,
-    error: displayError,
-    "aria-readonly": readonly,
-    helperText: supportingtext || undefined,
-    className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", displayError && "ng-invalid"),
-    slotProps: {
-      formHelperText: {
-        className: (0, _clsx["default"])("app-label help-block supporting-text", "wm-text-helper-text", displayError && "wm-text-helper-text-error"),
-        name: "supportingText"
-      },
-      input: {
-        startAdornment: leadingiconclass ? __jsx(_InputAdornment["default"], {
-          position: "start"
-        }, __jsx("button", {
-          type: "button",
-          name: "leadingIcon",
-          className: "btn-leading-icon",
-          onClick: handleLeadingIconClick,
-          "aria-hidden": "true",
-          tabIndex: -1
-        }, __jsx("i", {
-          "aria-hidden": "true",
-          className: leadingiconclass
-        }))) : undefined,
-        endAdornment: trailingiconclass ? __jsx(_InputAdornment["default"], {
-          position: "end"
-        }, __jsx("button", {
-          type: "button",
-          name: "trailingIcon",
-          className: "btn-trailing-icon",
-          onClick: handleTrailingIconClick,
-          "aria-hidden": "true",
-          tabIndex: -1
-        }, __jsx("i", {
-          "aria-hidden": "true",
-          className: trailingiconclass
-        }))) : undefined
-      },
-      htmlInput: {
-        tabIndex: tabindex,
-        readOnly: readonly,
-        autoCapitalize: autocapitalize,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, className, "wm-text-input", leadingiconclass && "with-leading-icon", trailingiconclass && "with-trailing-icon", isTouched ? "ng-touched" : "ng-untouched", displayError && "ng-invalid"),
-        style: styles,
-        "aria-label": arialabel,
-        maxLength: maxchars,
-        pattern: regexp,
-        min: props.minvalue,
-        max: props.maxvalue,
-        step: props.step
+      if (!validation.isValid && regexp != ".*") {
+        setIsTouched(true);
+        setIsDirty(true);
       }
-    }
-  }));
-}, function (prev, current) {
-  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "error", "className", "hidden", "leadingiconclass", "trailingiconclass", "supportingtext"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+      onBlur == null ? void 0 : onBlur(e, listener == null ? void 0 : listener.Widgets[name]);
+    };
+    const handleFocus = (e) => {
+      onFocus == null ? void 0 : onFocus(e, listener == null ? void 0 : listener.Widgets[name]);
+    };
+    const handleKeyDown = (e) => {
+      delay(() => {
+        onKeydown == null ? void 0 : onKeydown(e, listener == null ? void 0 : listener.Widgets[name]);
+        if (e.key === "Enter") {
+          debouncedUpdateValue(rawValue);
+        }
+      }, 0);
+    };
+    const handleKeyPress = (e) => {
+      delay(() => {
+        onKeypress == null ? void 0 : onKeypress(e, listener == null ? void 0 : listener.Widgets[name]);
+      }, 0);
+    };
+    const handleKeyUp = (e) => {
+      delay(() => {
+        onKeyup == null ? void 0 : onKeyup(e, listener == null ? void 0 : listener.Widgets[name]);
+      }, 0);
+    };
+    const handleLeadingIconClick = (e) => {
+      e.preventDefault();
+      onLeadingiconclick == null ? void 0 : onLeadingiconclick(e, listener == null ? void 0 : listener.Widgets[name]);
+    };
+    const handleTrailingIconClick = (e) => {
+      e.preventDefault();
+      onTrailingiconclick == null ? void 0 : onTrailingiconclick(e, listener == null ? void 0 : listener.Widgets[name]);
+    };
+    const handleMouseEnter = (e) => {
+      onMouseEnter == null ? void 0 : onMouseEnter(e, listener == null ? void 0 : listener.Widgets[name]);
+      setIsTouched(true);
+    };
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      onChange: handleInputChange,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown
+    }, onFocus ? { onFocus: handleFocus } : {}), onKeyup ? { onKeyUp: handleKeyUp } : {}), onKeypress ? { onKeyPress: handleKeyPress } : {}), props.onClick ? { onClick: props.onClick } : {}), props.onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), props.onMouseLeave ? { onMouseLeave: props.onMouseLeave } : {});
+    return /* @__PURE__ */ jsx(
+      TextField,
+      __spreadProps(__spreadValues({}, events), {
+        hidden: props.hidden,
+        title: hint || "Text Input",
+        name,
+        id: id || name,
+        variant: "standard",
+        autoComplete: (autocomplete == null ? void 0 : autocomplete.toString()) === "true" ? "on" : "off",
+        autoFocus: autofocus,
+        disabled,
+        required,
+        placeholder: placeholder != null ? placeholder : "Enter text",
+        value: sanitizeInputValue(displayValue),
+        type,
+        inputRef: ref,
+        error: displayError,
+        "aria-readonly": readonly,
+        helperText: supportingtext || void 0,
+        className: clsx(
+          "app-input-wrapper",
+          isTouched ? "ng-touched" : "ng-untouched",
+          displayError && "ng-invalid"
+        ),
+        slotProps: {
+          formHelperText: {
+            className: clsx(
+              "app-label help-block supporting-text",
+              "wm-text-helper-text",
+              displayError && "wm-text-helper-text-error"
+            ),
+            name: "supportingText"
+          },
+          input: {
+            startAdornment: leadingiconclass ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                name: "leadingIcon",
+                className: "btn-leading-icon",
+                onClick: handleLeadingIconClick,
+                "aria-hidden": "true",
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsx("i", { "aria-hidden": "true", className: leadingiconclass })
+              }
+            ) }) : void 0,
+            endAdornment: trailingiconclass ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                name: "trailingIcon",
+                className: "btn-trailing-icon",
+                onClick: handleTrailingIconClick,
+                "aria-hidden": "true",
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsx("i", { "aria-hidden": "true", className: trailingiconclass })
+              }
+            ) }) : void 0
+          },
+          htmlInput: {
+            tabIndex: tabindex,
+            readOnly: readonly,
+            autoCapitalize: autocapitalize,
+            className: clsx(
+              DEFAULT_CLASS,
+              className,
+              "wm-text-input",
+              leadingiconclass && "with-leading-icon",
+              trailingiconclass && "with-trailing-icon",
+              isTouched ? "ng-touched" : "ng-untouched",
+              displayError && "ng-invalid"
+            ),
+            style: styles,
+            "aria-label": arialabel,
+            maxLength: maxchars,
+            pattern: regexp,
+            min: props.minvalue,
+            max: props.maxvalue,
+            step: props.step
+          }
+        }
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "disabled",
+      "required",
+      "readonly",
+      "placeholder",
+      "maxchars",
+      "tabindex",
+      "shortcutkey",
+      "autofocus",
+      "arialabel",
+      "error",
+      "className",
+      "hidden",
+      "leadingiconclass",
+      "trailingiconclass",
+      "supportingtext"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmText.displayName = "WmText";
-var WithForm = (0, _withFormController["default"])(WmText);
-var WmTextStandalone = exports.WmText = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmText component provides a single-line text input with formatting, validation, and event support.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-text--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-text--docs)
- *
- * @param props - {@link WmTextProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmText);
+const WmTextStandalone = withStandalone(WithForm);
+var text_default = withBaseWrapper(WithForm);
+export {
+  WmTextStandalone as WmText,
+  text_default as default
+};