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

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

@@ -0,0 +1,141 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmText input component.
+ */
+export interface TextProps {
+    /**
+     * Source for binding data values.
+     */
+    datavaluesource?: Record<string, unknown>;
+    /**
+     * Whether to show a floating label on the input.
+     */
+    floatinglabel?: boolean;
+    /**
+     * Controls browser autocomplete behavior.
+     * @default "true"
+     */
+    autocomplete?: string;
+    /**
+     * Whether the input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * Whether to automatically trim whitespace from input.
+     */
+    autotrim?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Placeholder text shown when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * The HTML input type.
+     * @default "text"
+     */
+    type?: "text" | "password" | "number" | "email" | "tel" | "url" | "color" | "search";
+    /**
+     * Maximum number of characters allowed.
+     */
+    maxchars?: number;
+    /**
+     * Minimum value constraint (for number type).
+     */
+    minvalue?: number;
+    /**
+     * Maximum value constraint (for number type).
+     */
+    maxvalue?: number;
+    /**
+     * Step increment value (for number type).
+     */
+    step?: number;
+    /**
+     * Display format applied to the input value.
+     * @example "999-999-9999"
+     */
+    displayformat?: string;
+    /**
+     * When to apply the display format.
+     * @default "keypress"
+     */
+    showdisplayformaton?: "keypress" | "blur";
+    /**
+     * Regular expression pattern for input validation.
+     */
+    regexp?: string;
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * The bound data value of the input.
+     */
+    datavalue?: string;
+    /**
+     * When the data value should be updated.
+     * @default "blur"
+     */
+    updateon?: "keypress" | "blur";
+    /**
+     * Delay in milliseconds before updating the data value.
+     * @default "0"
+     */
+    updatedelay?: string;
+    /**
+     * Auto-capitalization mode for the input.
+     * @default "none"
+     */
+    autocapitalize?: "none" | "sentences" | "words" | "characters";
+    /**
+     * Callback invoked when the input value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
+    /**
+     * CSS class for the leading icon.
+     */
+    leadingiconclass?: string;
+    /**
+     * CSS class for the trailing icon.
+     */
+    trailingiconclass?: string;
+    /**
+     * Supporting text displayed below the input.
+     */
+    supportingtext?: string;
+    /**
+     * Callback invoked when the leading icon is clicked.
+     */
+    onLeadingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the trailing icon is clicked.
+     */
+    onTrailingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Keyboard shortcut key to focus the input.
+     */
+    shortcutkey?: string;
+    /**
+     * Whether the input has a validation error (typically injected by form controller).
+     */
+    error?: boolean;
+    /**
+     * The unique ID for the widget.
+     */
+    id?: string;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+}
+/**
+ * Combined props for the WmText component, including base WaveMaker props.
+ */
+export type WmTextProps = Prettify<TextProps & BaseProps>;

package/components/input/text/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,42 @@
+/**
+ * Format placeholders:
+ * - 9: Any digit (0-9)
+ * - A: Any letter (A-Z, a-z) - will be uppercased
+ * - a: Any letter (A-Z, a-z) - will be lowercased
+ * - X: Any alphanumeric character (preserves case)
+ * - ?: Makes the preceding placeholder optional
+ * - All other characters (including *, -, (, ), etc.) are treated as literal separators/static text
+ *
+ * Examples:
+ *   999-99-9999         → SSN format
+ *   (999) 999-9999      → US phone
+ *   AA-9999             → License plate (letters uppercased)
+ *   XXX-XXX             → Any 6 alphanumeric chars with dash
+ *   (***: AAA-999)      → Literal asterisks with letters and digits
+ */
+/**
+ * Universal format input function that handles any display format pattern
+ */
+export declare const formatInput: (value: string, format: string) => string;
+/**
+ * Removes display format characters from the value
+ * Intelligently extracts only the meaningful input characters based on format type
+ */
+export declare const removeDisplayFormat: (value: string, format?: string) => string;
+/**
+ * Get the maximum number of input characters allowed by the format
+ */
+export declare const getFormatMaxLength: (format: string) => number;
+export declare function autoCapitalize(value: string, type: "characters" | "words" | "sentences" | "none"): string;
+/**
+ * Applies autocapitalize logic to a character being inserted in real-time
+ * @param newValue - The complete new value after character insertion
+ * @param previousValue - The value before character insertion
+ * @param cursorPosition - The cursor position after insertion
+ * @param mode - The autocapitalize mode: "words", "sentence", "characters", or "none"
+ * @returns Object with capitalized value and whether capitalization was applied
+ */
+export declare function applyAutoCapitalize(newValue: string, previousValue: string, cursorPosition: number, mode: "none" | "sentences" | "words" | "characters"): {
+    value: string;
+    wasCapitalized: boolean;
+};

package/components/input/text/util.js

@@ -0,0 +1,334 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyAutoCapitalize = applyAutoCapitalize;
+exports.autoCapitalize = autoCapitalize;
+exports.removeDisplayFormat = exports.getFormatMaxLength = exports.formatInput = void 0;
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Format placeholders:
+ * - 9: Any digit (0-9)
+ * - A: Any letter (A-Z, a-z) - will be uppercased
+ * - a: Any letter (A-Z, a-z) - will be lowercased
+ * - X: Any alphanumeric character (preserves case)
+ * - ?: Makes the preceding placeholder optional
+ * - All other characters (including *, -, (, ), etc.) are treated as literal separators/static text
+ *
+ * Examples:
+ *   999-99-9999         → SSN format
+ *   (999) 999-9999      → US phone
+ *   AA-9999             → License plate (letters uppercased)
+ *   XXX-XXX             → Any 6 alphanumeric chars with dash
+ *   (***: AAA-999)      → Literal asterisks with letters and digits
+ */
+
+/**
+ * Parse format string into tokens for processing
+ */
+var parseFormatTokens = function parseFormatTokens(format) {
+  var tokens = [];
+  var i = 0;
+  while (i < format.length) {
+    var _char = format[i];
+    var nextChar = format[i + 1];
+    var isOptional = nextChar === "?";
+    if (_char === "9") {
+      tokens.push({
+        type: "digit",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "A") {
+      tokens.push({
+        type: "letter-upper",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "a") {
+      tokens.push({
+        type: "letter-lower",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "X") {
+      // X = alphanumeric placeholder (use X instead of * to avoid conflicts with literal asterisks)
+      tokens.push({
+        type: "alphanumeric",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "?") {
+      // Standalone ? without preceding placeholder - treat as literal
+      tokens.push({
+        type: "literal",
+        "char": _char,
+        optional: false
+      });
+      i++;
+    } else {
+      // All other characters are literals (including *, -, (, ), spaces, etc.)
+      tokens.push({
+        type: "literal",
+        "char": _char,
+        optional: false
+      });
+      i++;
+    }
+  }
+  return tokens;
+};
+
+/**
+ * Extract input characters that can be used for formatting
+ * Returns an array of characters with their types
+ */
+var extractInputChars = function extractInputChars(value) {
+  var chars = [];
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _char2 = _step.value;
+      var isDigit = /\d/.test(_char2);
+      var isLetter = /[A-Za-z]/.test(_char2);
+      if (isDigit || isLetter) {
+        chars.push({
+          "char": _char2,
+          isDigit: isDigit,
+          isLetter: isLetter
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return chars;
+};
+
+/**
+ * Count the maximum number of input characters the format can accept
+ */
+var getMaxInputLength = function getMaxInputLength(tokens) {
+  return tokens.filter(function (t) {
+    return t.type === "digit" || t.type === "letter-upper" || t.type === "letter-lower" || t.type === "alphanumeric";
+  }).length;
+};
+
+/**
+ * Universal format input function that handles any display format pattern
+ */
+var formatInput = exports.formatInput = function formatInput(value, format) {
+  if (!format || value === null || value === undefined) return value !== null && value !== void 0 ? value : "";
+  if (value === "") return "";
+  value = value.toString();
+  var tokens = parseFormatTokens(format);
+  var inputChars = extractInputChars(value);
+  if (inputChars.length === 0) return "";
+  var result = "";
+  var inputIndex = 0;
+  var pendingLiterals = "";
+  for (var tokenIndex = 0; tokenIndex < tokens.length; tokenIndex++) {
+    var token = tokens[tokenIndex];
+
+    // No more input characters - stop processing
+    if (inputIndex >= inputChars.length) {
+      break;
+    }
+    if (token.type === "literal") {
+      // Collect literals but don't add them yet
+      pendingLiterals += token["char"];
+      continue;
+    }
+
+    // Find a matching input character for this token
+    var matched = false;
+    var inputChar = inputChars[inputIndex];
+    if (token.type === "digit" && inputChar !== null && inputChar !== void 0 && inputChar.isDigit) {
+      // Flush pending literals before adding the matched character
+      result += pendingLiterals + inputChar["char"];
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "letter-upper" && inputChar !== null && inputChar !== void 0 && inputChar.isLetter) {
+      result += pendingLiterals + inputChar["char"].toUpperCase();
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "letter-lower" && inputChar !== null && inputChar !== void 0 && inputChar.isLetter) {
+      result += pendingLiterals + inputChar["char"].toLowerCase();
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "alphanumeric" && (inputChar !== null && inputChar !== void 0 && inputChar.isDigit || inputChar !== null && inputChar !== void 0 && inputChar.isLetter)) {
+      result += pendingLiterals + inputChar["char"];
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    }
+
+    // If no match and token is not optional, try to skip input chars to find match
+    if (!matched && !token.optional) {
+      // Look ahead in input to find a matching character
+      var foundMatch = false;
+      for (var lookAhead = inputIndex; lookAhead < inputChars.length; lookAhead++) {
+        var lookAheadChar = inputChars[lookAhead];
+        if (token.type === "digit" && lookAheadChar.isDigit) {
+          result += pendingLiterals + lookAheadChar["char"];
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        } else if (token.type === "letter-upper" && lookAheadChar.isLetter) {
+          result += pendingLiterals + lookAheadChar["char"].toUpperCase();
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        } else if (token.type === "letter-lower" && lookAheadChar.isLetter) {
+          result += pendingLiterals + lookAheadChar["char"].toLowerCase();
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        } else if (token.type === "alphanumeric") {
+          result += pendingLiterals + lookAheadChar["char"];
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        }
+      }
+
+      // If still no match found, stop processing
+      if (!foundMatch) {
+        break;
+      }
+    }
+  }
+  return result;
+};
+
+/**
+ * Removes display format characters from the value
+ * Intelligently extracts only the meaningful input characters based on format type
+ */
+var removeDisplayFormat = exports.removeDisplayFormat = function removeDisplayFormat(value, format) {
+  if (!format || !value) return value;
+  value = value.toString();
+  var tokens = parseFormatTokens(format);
+
+  // Determine what character types the format accepts
+  var acceptsDigits = tokens.some(function (t) {
+    return t.type === "digit" || t.type === "alphanumeric";
+  });
+  var acceptsLetters = tokens.some(function (t) {
+    return t.type === "letter-upper" || t.type === "letter-lower" || t.type === "alphanumeric";
+  });
+  if (acceptsDigits && acceptsLetters) {
+    // Mixed format: keep both letters and numbers
+    return value.replace(/[^A-Za-z0-9]/g, "");
+  } else if (acceptsLetters) {
+    // Letters only format
+    return value.replace(/[^A-Za-z]/g, "");
+  } else if (acceptsDigits) {
+    // Digits only format
+    return value.replace(/\D/g, "");
+  }
+
+  // Default: return the value as-is (no placeholders in format)
+  return value;
+};
+
+/**
+ * Get the maximum number of input characters allowed by the format
+ */
+var getFormatMaxLength = exports.getFormatMaxLength = function getFormatMaxLength(format) {
+  if (!format) return Infinity;
+  var tokens = parseFormatTokens(format);
+  return getMaxInputLength(tokens);
+};
+function autoCapitalize(value, type) {
+  if (!value) return value;
+  switch (type) {
+    case "characters":
+      return value.toUpperCase();
+    case "words":
+      return value.split(" ").map(function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      }).join(" ");
+    case "sentences":
+      return value.toLowerCase().replace(/(^\w|\.\s+\w)/g, function (letter) {
+        return letter.toUpperCase();
+      });
+    default:
+      return value;
+  }
+}
+
+/**
+ * Applies autocapitalize logic to a character being inserted in real-time
+ * @param newValue - The complete new value after character insertion
+ * @param previousValue - The value before character insertion
+ * @param cursorPosition - The cursor position after insertion
+ * @param mode - The autocapitalize mode: "words", "sentence", "characters", or "none"
+ * @returns Object with capitalized value and whether capitalization was applied
+ */
+function applyAutoCapitalize(newValue, previousValue, cursorPosition, mode) {
+  // Only process if a character was inserted (not deleted)
+  if (mode === "none" || newValue.length <= previousValue.length) {
+    return {
+      value: newValue,
+      wasCapitalized: false
+    };
+  }
+  var insertedChar = newValue[cursorPosition - 1];
+  var shouldCapitalize = false;
+
+  // Only capitalize alphabetic characters
+  if (!/[a-zA-Z]/.test(insertedChar)) {
+    return {
+      value: newValue,
+      wasCapitalized: false
+    };
+  }
+  if (mode === "characters") {
+    // Capitalize every character
+    shouldCapitalize = true;
+  } else if (mode === "words") {
+    // Capitalize first letter of each word (after space or at start)
+    shouldCapitalize = cursorPosition === 1 || newValue[cursorPosition - 2] === " ";
+  } else if (mode === "sentences") {
+    // Capitalize first letter after sentence-ending punctuation (. ! ?)
+    if (cursorPosition === 1) {
+      shouldCapitalize = true;
+    } else {
+      // Check if we're at the start of a sentence
+      var textBefore = newValue.substring(0, cursorPosition - 1);
+      // Match sentence-ending punctuation followed by optional spaces
+      var sentenceEndPattern = /[.!?]\s*$/;
+      shouldCapitalize = sentenceEndPattern.test(textBefore);
+    }
+  }
+  if (shouldCapitalize && insertedChar === insertedChar.toLowerCase()) {
+    // Replace the lowercase character with uppercase
+    var capitalizedValue = newValue.substring(0, cursorPosition - 1) + insertedChar.toUpperCase() + newValue.substring(cursorPosition);
+    return {
+      value: capitalizedValue,
+      wasCapitalized: true
+    };
+  }
+  return {
+    value: newValue,
+    wasCapitalized: false
+  };
+}

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

@@ -0,0 +1,151 @@
+import React from "react";
+declare const WmTextareaStandalone: React.ComponentType<import("../../data/form/form-controller/props").WithFormControllerProps & {
+    readonly?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    maxchars?: number;
+    placeholder?: string;
+    shortcutkey?: string;
+    autofocus?: boolean;
+    limitdisplaytext?: string;
+    datavalue?: any;
+    regexp?: string;
+    updatedelay?: string;
+    updateon?: "keypress" | "blur";
+    autocapitalize?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
+    onKeypress?: ((event: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    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?: 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;
+    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?: 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 { WmTextareaStandalone as WmTextarea };
+/**
+ * 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}
+ */
+declare const _default: 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?: string;
+    observe?: string[];
+    onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    readonly?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    shortcutkey?: string;
+    autofocus?: boolean;
+    limitdisplaytext?: string;
+    updatedelay?: string;
+    updateon?: "keypress" | "blur";
+    autocapitalize?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
+    onKeypress?: ((event: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void) & ((event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
+    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?: 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;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    arialabel?: string;
+    tabindex?: number;
+    styles?: 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;