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

package/components/input/text/index.d.ts

@@ -0,0 +1,177 @@
+declare const WmTextStandalone: import("react").ComponentType<import("../../data/form/form-controller/props").WithFormControllerProps & {
+    datavaluesource?: Record<string, unknown>;
+    floatinglabel?: boolean;
+    autocomplete?: string;
+    autofocus?: boolean;
+    autotrim?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    type?: "text" | "password" | "number" | "email" | "tel" | "url" | "color" | "search";
+    maxchars?: number;
+    minvalue?: number;
+    maxvalue?: number;
+    step?: number;
+    displayformat?: string;
+    showdisplayformaton?: "keypress" | "blur";
+    regexp?: string;
+    required?: boolean;
+    datavalue?: any;
+    updateon?: "keypress" | "blur";
+    updatedelay?: string;
+    autocapitalize?: "none" | "sentences" | "words" | "characters";
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
+    leadingiconclass?: string;
+    trailingiconclass?: string;
+    supportingtext?: string;
+    onLeadingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
+    onTrailingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
+    shortcutkey?: string;
+    error?: boolean;
+    id?: string;
+    fieldName?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: import("react").CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    dataset?: any;
+    prefabName?: string;
+} & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmTextStandalone as WmText };
+/**
+ * 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}
+ */
+declare const _default: import("react").ComponentType<{
+    [x: string]: any;
+    standalone?: boolean;
+    formRef?: any;
+    formKey?: string;
+    name: string;
+    datavalue?: any;
+    defaultvalue?: any;
+    validators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    asyncValidators?: import("../../data/form/form-controller/props").ValidatorConfig[];
+    required?: boolean;
+    maxchars?: number;
+    regexp?: string | (RegExp & string);
+    validationmessage?: string;
+    hint?: string;
+    type?: "number" | "url" | "search" | "text" | "password" | "color" | "tel" | "email";
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    datavaluesource?: Record<string, unknown>;
+    floatinglabel?: boolean;
+    autocomplete?: string;
+    autofocus?: boolean;
+    autotrim?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    minvalue?: number;
+    maxvalue?: number;
+    step?: number;
+    displayformat?: string;
+    showdisplayformaton?: "keypress" | "blur";
+    updateon?: "keypress" | "blur";
+    updatedelay?: string;
+    autocapitalize?: "none" | "sentences" | "words" | "characters";
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
+    leadingiconclass?: string;
+    trailingiconclass?: string;
+    supportingtext?: string;
+    onLeadingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
+    onTrailingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
+    shortcutkey?: string;
+    error?: boolean;
+    id?: string;
+    fieldName?: string;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: import("react").CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/input/text/index.js

@@ -0,0 +1,499 @@
+"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);
+    }
+    // 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 {
+      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();
+      }
+      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
+          });
+        }
+        if (onChange) {
+          var syntheticEvent = {
+            target: {
+              value: _datavalue,
+              name: name
+            },
+            currentTarget: ref.current
+          };
+          // 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 (input) {
+      input.addEventListener("animationstart", handleAnimationStart);
+    }
+    return function () {
+      if (input) {
+        input.removeEventListener("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 (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) {
+          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);
+        }
+      }, 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);
+          }
+        }
+      }, 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)) {
+        setIsDirty(true);
+      } else if (validation.isValid && !required) {
+        // Reset isDirty when field becomes valid (except for required fields which need blur)
+        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") {
+        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
+      }
+    }
+  }));
+}, 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];
+  });
+});
+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);