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

package/components/input/textarea/index.js

@@ -1,366 +1,330 @@
-"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.WmTextarea = 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 _delay = _interopRequireDefault(require("lodash-es/delay"));
-var _util = require("@wavemaker-ai/react-runtime/components/input/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-textarea";
-var TextareaCount = function TextareaCount(_ref) {
-  var children = _ref.children;
-  return __jsx("div", {
-    className: "textarea-count"
-  }, children);
-};
-var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var name = props.name,
-    readonly = props.readonly,
-    required = props.required,
-    disabled = props.disabled,
-    maxchars = props.maxchars,
-    tabindex = props.tabindex,
-    placeholder = props.placeholder,
-    shortcutkey = props.shortcutkey,
-    autofocus = props.autofocus,
-    arialabel = props.arialabel,
-    _props$limitdisplayte = props.limitdisplaytext,
-    limitdisplaytext = _props$limitdisplayte === void 0 ? "" : _props$limitdisplayte,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? "" : _props$datavalue,
-    listener = props.listener,
-    onChange = props.onChange,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onKeydown = props.onKeydown,
-    onKeypress = props.onKeypress,
-    onKeyup = props.onKeyup,
-    className = props.className,
-    _props$styles = props.styles,
-    styles = _props$styles === void 0 ? {} : _props$styles,
-    _props$updatedelay = props.updatedelay,
-    updatedelay = _props$updatedelay === void 0 ? "0" : _props$updatedelay,
-    _props$updateon = props.updateon,
-    updateon = _props$updateon === void 0 ? "blur" : _props$updateon,
-    _props$regexp = props.regexp,
-    regexp = _props$regexp === void 0 ? ".*" : _props$regexp,
-    id = props.id;
-
-  // Track internal vs external updates
-  var valueRef = (0, _react.useRef)(datavalue);
-  var isInternalUpdate = (0, _react.useRef)(false);
-  var _useState = (0, _react.useState)(datavalue),
-    displayValue = _useState[0],
-    setDisplayValue = _useState[1];
-  var _useState2 = (0, _react.useState)({
-      show: false,
-      message: ""
-    }),
-    error = _useState2[0],
-    setError = _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 textareaRef = (0, _react.useRef)(null);
-
-  // Memoize validation function
-  var validateInput = (0, _react.useCallback)(function (inputValue) {
-    if (!inputValue.trim() && required) {
-      return {
-        isValid: false,
-        message: "This field is required"
-      };
-    }
-    if (regexp && inputValue && !new RegExp(regexp).test(inputValue)) {
-      return {
-        isValid: false,
-        message: "Invalid format"
-      };
-    }
-    if (maxchars && inputValue.length > maxchars) {
-      return {
-        isValid: false,
-        message: "Maximum ".concat(maxchars, " characters allowed")
-      };
-    }
-    return {
-      isValid: true,
-      message: ""
-    };
-  }, [required, regexp, maxchars]);
-  var updateValue = (0, _react.useCallback)(function (newValue, validation) {
-    isInternalUpdate.current = true;
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(props.fieldName || name, {
-        datavalue: newValue,
-        value: newValue,
-        charlength: newValue === null || newValue === void 0 ? void 0 : newValue.length
-      });
+var __defProp = Object.defineProperty;
+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) {
-      var syntheticEvent = {
-        target: {
-          value: newValue,
-          name: name
+  return a;
+};
+import { Fragment, jsx } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState, useCallback } 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 delay from "lodash-es/delay";
+import { sanitizeInputValue } from "../util";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "form-control app-textarea";
+const TextareaCount = ({ children }) => /* @__PURE__ */ jsx("div", { className: "textarea-count", children });
+const WmTextarea = memo(
+  (props) => {
+    const {
+      name,
+      readonly,
+      required,
+      disabled,
+      maxchars,
+      tabindex,
+      placeholder,
+      shortcutkey,
+      autofocus,
+      arialabel,
+      limitdisplaytext = "",
+      datavalue = "",
+      listener,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeydown,
+      onKeypress,
+      onKeyup,
+      className,
+      styles = {},
+      updatedelay = "0",
+      updateon = "blur",
+      regexp = ".*",
+      id
+    } = props;
+    const valueRef = useRef(datavalue);
+    const isInternalUpdate = useRef(false);
+    const [displayValue, setDisplayValue] = useState(datavalue);
+    const [error, setError] = useState({ show: false, message: "" });
+    const [isDirty, setIsDirty] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const textareaRef = useRef(null);
+    const validateInput = useCallback(
+      (inputValue) => {
+        if (!inputValue.trim() && required) {
+          return { isValid: false, message: "This field is required" };
+        }
+        if (regexp && inputValue && !new RegExp(regexp).test(inputValue)) {
+          return { isValid: false, message: "Invalid format" };
+        }
+        if (maxchars && inputValue.length > maxchars) {
+          return { isValid: false, message: `Maximum ${maxchars} characters allowed` };
+        }
+        return { isValid: true, message: "" };
+      },
+      [required, regexp, maxchars]
+    );
+    const updateValue = useCallback(
+      (newValue, validation) => {
+        isInternalUpdate.current = true;
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(props.fieldName || name, {
+            datavalue: newValue,
+            value: newValue,
+            charlength: newValue == null ? void 0 : newValue.length
+          });
+        }
+        if (onChange) {
+          const syntheticEvent = {
+            target: { value: newValue, name },
+            currentTarget: textareaRef.current
+          };
+          onChange(syntheticEvent, props, newValue, valueRef.current);
+        }
+        setTimeout(() => {
+          isInternalUpdate.current = false;
+        }, 0);
+      },
+      [onChange, listener == null ? void 0 : listener.onChange]
+    );
+    const debouncedUpdate = useCallback(
+      lodash.debounce(
+        (newValue) => {
+          const validation = validateInput(newValue);
+          setError({ show: !validation.isValid, message: validation.message });
+          updateValue(newValue, validation);
         },
-        currentTarget: textareaRef.current
+        parseInt(updatedelay || "10"),
+        { leading: parseInt(updatedelay) === 0 }
+      ),
+      [updatedelay, validateInput, updateValue]
+    );
+    const debouncedCharLengthUpdate = useCallback(
+      lodash.debounce((charLength) => {
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(props.fieldName || name, {
+            charlength: charLength
+          });
+        }
+      }, 10),
+      []
+    );
+    useEffect(() => {
+      if (datavalue !== valueRef.current && !isInternalUpdate.current) {
+        valueRef.current = datavalue;
+        setDisplayValue(datavalue);
+        if (isDirty) {
+          const validation = validateInput(datavalue);
+          setError({ show: !validation.isValid, message: validation.message });
+        }
+      }
+    }, [datavalue, isDirty, validateInput]);
+    useEffect(() => {
+      if (!shortcutkey) return;
+      const handleGlobalKeyDown = (e) => {
+        var _a;
+        if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+          e.preventDefault();
+          (_a = textareaRef.current) == null ? void 0 : _a.focus();
+        }
       };
-      onChange(syntheticEvent, props, newValue, valueRef.current);
-    }
-
-    // We need this setTimeout to ensure external updates don't override
-    // our internal update immediately
-    setTimeout(function () {
-      isInternalUpdate.current = false;
-    }, 0);
-  }, [onChange, listener === null || listener === void 0 ? void 0 : listener.onChange]);
-
-  // Debounced update with stable reference
-  var debouncedUpdate = (0, _react.useCallback)(lodash.debounce(function (newValue) {
-    var validation = validateInput(newValue);
-    setError({
-      show: !validation.isValid,
-      message: validation.message
-    });
-    updateValue(newValue, validation);
-  }, parseInt(updatedelay || "10"), {
-    leading: parseInt(updatedelay) === 0
-  }), [updatedelay, validateInput, updateValue]);
-  var debouncedCharLengthUpdate = (0, _react.useCallback)(lodash.debounce(function (charLength) {
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(props.fieldName || name, {
-        charlength: charLength
-      });
-    }
-  }, 10), []);
-
-  // Handle external value changes without overriding user input
-  (0, _react.useEffect)(function () {
-    // Only update if this is an external change (not triggered by our own code)
-    if (datavalue !== valueRef.current && !isInternalUpdate.current) {
-      valueRef.current = datavalue;
-      setDisplayValue(datavalue);
-      if (isDirty) {
-        var validation = validateInput(datavalue);
-        setError({
-          show: !validation.isValid,
-          message: validation.message
-        });
+      window.addEventListener("keydown", handleGlobalKeyDown);
+      return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+    }, [shortcutkey]);
+    const handleUpdateCharLength = useCallback(
+      (charLength) => {
+        if ((listener == null ? void 0 : listener.onChange) && limitdisplaytext !== "") {
+          debouncedCharLengthUpdate(charLength);
+        }
+      },
+      [limitdisplaytext, debouncedCharLengthUpdate]
+    );
+    const handleInputChange = useCallback((event) => {
+      var _a;
+      const newValue = event.target.value;
+      valueRef.current = newValue;
+      setDisplayValue(newValue);
+      isInternalUpdate.current = true;
+      handleUpdateCharLength(newValue.length);
+      if (updateon === "keypress") {
+        debouncedUpdate(newValue);
       }
-    }
-  }, [datavalue, isDirty, validateInput]);
-
-  // Setup keyboard shortcut
-  (0, _react.useEffect)(function () {
-    if (!shortcutkey) return;
-    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
-      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
-        var _textareaRef$current;
-        e.preventDefault();
-        (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
+      if (onKeypress) {
+        onKeypress(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
       }
-    };
-    window.addEventListener("keydown", handleGlobalKeyDown);
-    return function () {
-      return window.removeEventListener("keydown", handleGlobalKeyDown);
-    };
-  }, [shortcutkey]);
-  var handleUpdateCharLength = (0, _react.useCallback)(function (charLength) {
-    // Only update char length when limitdisplaytext is not empty
-    if (listener !== null && listener !== void 0 && listener.onChange && limitdisplaytext !== "") {
-      debouncedCharLengthUpdate(charLength);
-    }
-  }, [limitdisplaytext, debouncedCharLengthUpdate]);
-  var handleInputChange = (0, _react.useCallback)(function (event) {
-    var newValue = event.target.value;
-    // Update ref immediately on change
-    valueRef.current = newValue;
-    setDisplayValue(newValue);
-    isInternalUpdate.current = true;
-
-    // Always update char length regardless of updateon mode
-    handleUpdateCharLength(newValue.length);
-    if (updateon === "keypress") {
-      debouncedUpdate(newValue);
-    }
-    if (onKeypress) {
-      var _listener$Widgets;
-      onKeypress(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
-    }
-
-    // Reset the flag after a small delay
-    setTimeout(function () {
-      isInternalUpdate.current = false;
-    }, 0);
-  }, []);
-  var handleBlur = (0, _react.useCallback)(function (event) {
-    if (readonly || disabled) {
-      return;
-    }
-    // setIsDirty(true);
-    // Important: Update the flag before calling debouncedUpdate
-    isInternalUpdate.current = true;
-    var currentValue = valueRef.current;
-    if (updateon === "blur") {
-      // For immediate validation feedback
-      var _validation = validateInput(currentValue);
-      setError({
-        show: !_validation.isValid,
-        message: _validation.message
-      });
-
-      // Call the debounced update
-      debouncedUpdate(currentValue);
-    }
-    var validation = validateInput(currentValue);
-    if (!validation.isValid && required) {
-      setIsDirty(true);
-    } else {
-      setIsDirty(false);
-    }
-    if (onBlur) {
-      var _listener$Widgets2;
-      onBlur(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
-    }
-
-    // Reset the flag after a small delay
-    setTimeout(function () {
-      isInternalUpdate.current = false;
-    }, 0);
-  }, [updateon, debouncedUpdate, onBlur, listener, name, validateInput, handleUpdateCharLength]);
-  var handleFocus = (0, _react.useCallback)(function (event) {
-    if (onFocus) {
-      var _listener$Widgets3;
-      onFocus(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
-    }
-  }, [onFocus, listener, name]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === "Enter" && !event.shiftKey) {
-      // Set flag before update
-      isInternalUpdate.current = true;
-      debouncedUpdate(valueRef.current);
-    }
-    if (onKeydown) {
-      (0, _delay["default"])(function () {
-        var _listener$Widgets4;
-        onKeydown(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
-      }, 0);
-    }
-  }, [debouncedUpdate, onKeydown, listener, name]);
-  var handleKeyUp = (0, _react.useCallback)(function (event) {
-    if (onKeyup) {
-      (0, _delay["default"])(function () {
-        var _listener$Widgets5;
-        onKeyup(event, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+      setTimeout(() => {
+        isInternalUpdate.current = false;
       }, 0);
-    }
-  }, [onKeyup, listener, name]);
-  var handleMouseEnter = function handleMouseEnter(event) {
-    setIsTouched(true);
-    if (props.onMouseEnter) {
-      props.onMouseEnter(event, props, displayValue, valueRef.current);
-    }
-  };
-  var handleMouseLeave = function handleMouseLeave(event) {
-    setIsTouched(false);
-    if (props.onMouseLeave) {
-      props.onMouseLeave(event, props, displayValue, valueRef.current);
-    }
-  };
-  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    onChange: handleInputChange
-  }, onFocus ? {
-    onFocus: handleFocus
-  } : {}), onKeydown ? {
-    onKeyDown: handleKeyDown
-  } : {}), onKeyup ? {
-    onKeyUp: handleKeyUp
-  } : {}), updateon === "blur" || onBlur ? {
-    onBlur: handleBlur
-  } : {}), props.onMouseEnter ? {
-    onMouseEnter: handleMouseEnter
-  } : {}), props.onMouseLeave ? {
-    onMouseLeave: handleMouseLeave
-  } : {}), props.onClick ? {
-    onClick: function onClick(e) {
-      return props.onClick(e, props);
-    }
-  } : {});
-  var value = (0, _util.sanitizeInputValue)(displayValue);
-  var isEditable = !readonly && !disabled;
-  return __jsx(_react["default"].Fragment, null, __jsx(_TextField["default"], (0, _extends2["default"])({
-    hidden: props.hidden,
-    multiline: true,
-    variant: "standard",
-    name: name,
-    title: props.hint,
-    id: id || name,
-    placeholder: placeholder || "Place your text here",
-    value: value,
-    required: required,
-    disabled: disabled,
-    error: isDirty && error.show,
-    className: (0, _clsx["default"])("app-input-wrapper", "wm-textarea-root", isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
-    style: styles,
-    "aria-readonly": readonly,
-    helperText: maxchars ? limitdisplaytext.replaceAll("undefined", "".concat((displayValue === null || displayValue === void 0 ? void 0 : displayValue.length) || 0)) : undefined,
-    slotProps: {
-      htmlInput: {
-        type: "textarea",
-        maxLength: maxchars,
-        readOnly: readonly,
-        tabIndex: tabindex,
-        accessKey: shortcutkey,
-        "aria-label": arialabel,
-        autoFocus: autofocus,
-        ref: textareaRef,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, "wm-textarea-input", className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid", isEditable ? "wm-textarea-editable" : ""),
-        style: _objectSpread({}, styles.height ? {
-          "--wm-textarea-height": "".concat(styles.height)
-        } : {}),
-        pattern: regexp
+    }, []);
+    const handleBlur = useCallback(
+      (event) => {
+        var _a;
+        if (readonly || disabled) {
+          return;
+        }
+        isInternalUpdate.current = true;
+        const currentValue = valueRef.current;
+        if (updateon === "blur") {
+          const validation2 = validateInput(currentValue);
+          setError({ show: !validation2.isValid, message: validation2.message });
+          debouncedUpdate(currentValue);
+        }
+        const validation = validateInput(currentValue);
+        if (!validation.isValid && required) {
+          setIsDirty(true);
+        } else {
+          setIsDirty(false);
+        }
+        if (onBlur) {
+          onBlur(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        }
+        setTimeout(() => {
+          isInternalUpdate.current = false;
+        }, 0);
+      },
+      [updateon, debouncedUpdate, onBlur, listener, name, validateInput, handleUpdateCharLength]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        var _a;
+        if (onFocus) {
+          onFocus(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        }
+      },
+      [onFocus, listener, name]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          isInternalUpdate.current = true;
+          debouncedUpdate(valueRef.current);
+        }
+        if (onKeydown) {
+          delay(() => {
+            var _a;
+            onKeydown(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+          }, 0);
+        }
+      },
+      [debouncedUpdate, onKeydown, listener, name]
+    );
+    const handleKeyUp = useCallback(
+      (event) => {
+        if (onKeyup) {
+          delay(() => {
+            var _a;
+            onKeyup(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+          }, 0);
+        }
+      },
+      [onKeyup, listener, name]
+    );
+    const handleMouseEnter = (event) => {
+      setIsTouched(true);
+      if (props.onMouseEnter) {
+        props.onMouseEnter(event, props, displayValue, valueRef.current);
       }
-    },
-    slots: _objectSpread({}, maxchars ? {
-      formHelperText: TextareaCount
-    } : {})
-  }, events)));
-}, function (prev, current) {
-  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext", "hidden"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+    };
+    const handleMouseLeave = (event) => {
+      setIsTouched(false);
+      if (props.onMouseLeave) {
+        props.onMouseLeave(event, props, displayValue, valueRef.current);
+      }
+    };
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      onChange: handleInputChange
+    }, onFocus ? { onFocus: handleFocus } : {}), onKeydown ? { onKeyDown: handleKeyDown } : {}), onKeyup ? { onKeyUp: handleKeyUp } : {}), updateon === "blur" || onBlur ? { onBlur: handleBlur } : {}), props.onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), props.onMouseLeave ? { onMouseLeave: handleMouseLeave } : {}), props.onClick ? {
+      onClick: (e) => props.onClick(e, props)
+    } : {});
+    const value = sanitizeInputValue(displayValue);
+    const isEditable = !readonly && !disabled;
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      TextField,
+      __spreadValues({
+        hidden: props.hidden,
+        multiline: true,
+        variant: "standard",
+        name,
+        title: props.hint,
+        id: id || name,
+        placeholder: placeholder || "Place your text here",
+        value,
+        required,
+        disabled,
+        error: isDirty && error.show,
+        className: clsx(
+          "app-input-wrapper",
+          "wm-textarea-root",
+          isTouched ? "ng-touched" : "ng-untouched",
+          isDirty && "ng-invalid"
+        ),
+        style: styles,
+        "aria-readonly": readonly,
+        helperText: maxchars ? limitdisplaytext.replaceAll("undefined", `${(displayValue == null ? void 0 : displayValue.length) || 0}`) : void 0,
+        slotProps: {
+          htmlInput: {
+            type: "textarea",
+            maxLength: maxchars,
+            readOnly: readonly,
+            tabIndex: tabindex,
+            accessKey: shortcutkey,
+            "aria-label": arialabel,
+            autoFocus: autofocus,
+            ref: textareaRef,
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+            className: clsx(
+              DEFAULT_CLASS,
+              "wm-textarea-input",
+              className,
+              isTouched ? "ng-touched" : "ng-untouched",
+              isDirty && "ng-invalid",
+              isEditable ? "wm-textarea-editable" : ""
+            ),
+            style: __spreadValues({}, styles.height ? { "--wm-textarea-height": `${styles.height}` } : {}),
+            pattern: regexp
+          }
+        },
+        slots: __spreadValues({}, maxchars ? { formHelperText: TextareaCount } : {})
+      }, events)
+    ) });
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "disabled",
+      "required",
+      "readonly",
+      "placeholder",
+      "maxchars",
+      "tabindex",
+      "shortcutkey",
+      "autofocus",
+      "arialabel",
+      "limitdisplaytext",
+      "hidden"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmTextarea.displayName = "WmTextarea";
-var WithForm = (0, _withFormController["default"])(WmTextarea);
-var WmTextareaStandalone = exports.WmTextarea = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmTextarea component provides a multi-line text input with character limits and validation.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-textarea--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-textarea--docs)
- *
- * @param props - {@link WmTextareaProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmTextarea);
+const WmTextareaStandalone = withStandalone(WithForm);
+var textarea_default = withBaseWrapper(WithForm);
+export {
+  WmTextareaStandalone as WmTextarea,
+  textarea_default as default
+};