@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,149 @@
+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" | "default";
+    /**
+     * 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;
+    /**
+     * URL for the leading icon (.svg renders inline, other URLs as image).
+     */
+    leadingiconurl?: string;
+    /**
+     * CSS class for the trailing icon.
+     */
+    trailingiconclass?: string;
+    /**
+     * URL for the trailing icon (.svg renders inline, other URLs as image).
+     */
+    trailingiconurl?: 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/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,194 @@
+const parseFormatTokens = (format) => {
+  const tokens = [];
+  let i = 0;
+  while (i < format.length) {
+    const char = format[i];
+    const nextChar = format[i + 1];
+    const isOptional = nextChar === "?";
+    if (char === "9") {
+      tokens.push({ type: "digit", char, optional: isOptional });
+      i += isOptional ? 2 : 1;
+    } else if (char === "A") {
+      tokens.push({ type: "letter-upper", char, optional: isOptional });
+      i += isOptional ? 2 : 1;
+    } else if (char === "a") {
+      tokens.push({ type: "letter-lower", char, optional: isOptional });
+      i += isOptional ? 2 : 1;
+    } else if (char === "X") {
+      tokens.push({ type: "alphanumeric", char, optional: isOptional });
+      i += isOptional ? 2 : 1;
+    } else if (char === "?") {
+      tokens.push({ type: "literal", char, optional: false });
+      i++;
+    } else {
+      tokens.push({ type: "literal", char, optional: false });
+      i++;
+    }
+  }
+  return tokens;
+};
+const extractInputChars = (value) => {
+  const chars = [];
+  for (const char of value) {
+    const isDigit = /\d/.test(char);
+    const isLetter = /[A-Za-z]/.test(char);
+    if (isDigit || isLetter) {
+      chars.push({ char, isDigit, isLetter });
+    }
+  }
+  return chars;
+};
+const getMaxInputLength = (tokens) => {
+  return tokens.filter(
+    (t) => t.type === "digit" || t.type === "letter-upper" || t.type === "letter-lower" || t.type === "alphanumeric"
+  ).length;
+};
+const formatInput = (value, format) => {
+  if (!format || value === null || value === void 0) return value != null ? value : "";
+  if (value === "") return "";
+  value = value.toString();
+  const tokens = parseFormatTokens(format);
+  const inputChars = extractInputChars(value);
+  if (inputChars.length === 0) return "";
+  let result = "";
+  let inputIndex = 0;
+  let pendingLiterals = "";
+  for (let tokenIndex = 0; tokenIndex < tokens.length; tokenIndex++) {
+    const token = tokens[tokenIndex];
+    if (inputIndex >= inputChars.length) {
+      break;
+    }
+    if (token.type === "literal") {
+      pendingLiterals += token.char;
+      continue;
+    }
+    let matched = false;
+    const inputChar = inputChars[inputIndex];
+    if (token.type === "digit" && (inputChar == null ? void 0 : inputChar.isDigit)) {
+      result += pendingLiterals + inputChar.char;
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "letter-upper" && (inputChar == null ? void 0 : inputChar.isLetter)) {
+      result += pendingLiterals + inputChar.char.toUpperCase();
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "letter-lower" && (inputChar == null ? void 0 : inputChar.isLetter)) {
+      result += pendingLiterals + inputChar.char.toLowerCase();
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "alphanumeric" && ((inputChar == null ? void 0 : inputChar.isDigit) || (inputChar == null ? void 0 : inputChar.isLetter))) {
+      result += pendingLiterals + inputChar.char;
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    }
+    if (!matched && !token.optional) {
+      let foundMatch = false;
+      for (let lookAhead = inputIndex; lookAhead < inputChars.length; lookAhead++) {
+        const 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 (!foundMatch) {
+        break;
+      }
+    }
+  }
+  return result;
+};
+const removeDisplayFormat = (value, format) => {
+  if (!format || !value) return value;
+  value = value.toString();
+  const tokens = parseFormatTokens(format);
+  const acceptsDigits = tokens.some((t) => t.type === "digit" || t.type === "alphanumeric");
+  const acceptsLetters = tokens.some(
+    (t) => t.type === "letter-upper" || t.type === "letter-lower" || t.type === "alphanumeric"
+  );
+  if (acceptsDigits && acceptsLetters) {
+    return value.replace(/[^A-Za-z0-9]/g, "");
+  } else if (acceptsLetters) {
+    return value.replace(/[^A-Za-z]/g, "");
+  } else if (acceptsDigits) {
+    return value.replace(/\D/g, "");
+  }
+  return value;
+};
+const getFormatMaxLength = (format) => {
+  if (!format) return Infinity;
+  const 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((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+    case "sentences":
+      return value.toLowerCase().replace(/(^\w|\.\s+\w)/g, (letter) => letter.toUpperCase());
+    default:
+      return value;
+  }
+}
+function applyAutoCapitalize(newValue, previousValue, cursorPosition, mode) {
+  if (mode === "none" || newValue.length <= previousValue.length) {
+    return { value: newValue, wasCapitalized: false };
+  }
+  const insertedChar = newValue[cursorPosition - 1];
+  let shouldCapitalize = false;
+  if (!/[a-zA-Z]/.test(insertedChar)) {
+    return { value: newValue, wasCapitalized: false };
+  }
+  if (mode === "characters") {
+    shouldCapitalize = true;
+  } else if (mode === "words") {
+    shouldCapitalize = cursorPosition === 1 || newValue[cursorPosition - 2] === " ";
+  } else if (mode === "sentences") {
+    if (cursorPosition === 1) {
+      shouldCapitalize = true;
+    } else {
+      const textBefore = newValue.substring(0, cursorPosition - 1);
+      const sentenceEndPattern = /[.!?]\s*$/;
+      shouldCapitalize = sentenceEndPattern.test(textBefore);
+    }
+  }
+  if (shouldCapitalize && insertedChar === insertedChar.toLowerCase()) {
+    const capitalizedValue = newValue.substring(0, cursorPosition - 1) + insertedChar.toUpperCase() + newValue.substring(cursorPosition);
+    return { value: capitalizedValue, wasCapitalized: true };
+  }
+  return { value: newValue, wasCapitalized: false };
+}
+export {
+  applyAutoCapitalize,
+  autoCapitalize,
+  formatInput,
+  getFormatMaxLength,
+  removeDisplayFormat
+};

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

@@ -0,0 +1,157 @@
+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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: 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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;