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

package/utils/custom-expression/parser.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface TransformedMarkupInput {
+    markup: string;
+    components?: Record<string, unknown>;
+    partials?: string[];
+    prefabs?: string[];
+    imports: Array<{
+        name: string;
+        as?: string;
+        from: string;
+        lazy?: boolean;
+    }>;
+}
+export type CustomExpressionComponent = (rowData: any) => React.ReactNode;
+export declare function parseCustomExpressionToJsx(transformedMarkup: TransformedMarkupInput, fragment: any): Promise<CustomExpressionComponent>;

package/utils/custom-expression/parser.js

@@ -0,0 +1,137 @@
+import React from "react";
+import { transform } from "sucrase";
+import { getComponent } from "../../runtime-dynamic/registry";
+import { formatMessage, _get, toNumber } from "../../core/util";
+import { useAppState } from "../../context/WidgetProvider";
+const UTIL_SCOPE = {
+  formatMessage,
+  _get,
+  toNumber,
+  useAppState
+};
+function wrapCustomExpressionComponentBody(jsxInner) {
+  return `function __render__() {
+  const fragment = useAppState();
+  return (<React.Fragment>${jsxInner.trim() || "null"}</React.Fragment>);
+}`;
+}
+function stripLeadingArrow(markup) {
+  const trimmed = markup.trim();
+  const arrow = trimmed.match(/^\([^)]*\)\s*=>\s*/);
+  return arrow ? trimmed.slice(arrow[0].length).trim() : trimmed;
+}
+function extractMarkupComponents(markup) {
+  const matches = markup.match(/\bWm[A-Z]\w*/g);
+  return matches ? [...new Set(matches)] : [];
+}
+function resolveCustomExpressionScope(imports, fragment, markupForInference) {
+  const fr = fragment;
+  const names = ["React", "fragment", "row", "rowData", "Widgets", "Variables"];
+  const values = [React, fragment, void 0, void 0, fr == null ? void 0 : fr.Widgets, fr == null ? void 0 : fr.Variables];
+  const seen = new Set(names);
+  for (const importDef of imports) {
+    const binding = importDef.as || importDef.name;
+    if (seen.has(binding)) continue;
+    const component = getComponent(importDef.name);
+    if (component) {
+      seen.add(binding);
+      names.push(binding);
+      values.push(component);
+    }
+  }
+  for (const wmName of extractMarkupComponents(markupForInference)) {
+    if (seen.has(wmName)) continue;
+    const component = getComponent(wmName);
+    if (component) {
+      seen.add(wmName);
+      names.push(wmName);
+      values.push(component);
+    }
+  }
+  for (const [name, value] of Object.entries(UTIL_SCOPE)) {
+    if (!seen.has(name)) {
+      seen.add(name);
+      names.push(name);
+      values.push(value);
+    }
+  }
+  return { names, values };
+}
+function compileJsxToRenderBody(jsxWrapped) {
+  const result = transform(jsxWrapped, {
+    transforms: ["typescript", "jsx"],
+    jsxRuntime: "classic",
+    production: true
+  });
+  return result.code || "";
+}
+const cache = /* @__PURE__ */ new Map();
+async function parseCustomExpressionToJsx(transformedMarkup, fragment) {
+  const { markup, imports = [] } = transformedMarkup;
+  if (!(markup == null ? void 0 : markup.trim())) {
+    return () => null;
+  }
+  if (cache.has(markup)) {
+    return cache.get(markup);
+  }
+  const jsxInner = stripLeadingArrow(markup);
+  const jsxWrapped = wrapCustomExpressionComponentBody(jsxInner);
+  let compiledCode;
+  try {
+    compiledCode = compileJsxToRenderBody(jsxWrapped);
+  } catch (err) {
+    console.error("[customExpressionParser] Sucrase transform failed:", err);
+    const fallback = () => null;
+    cache.set(markup, fallback);
+    return fallback;
+  }
+  compiledCode = compiledCode.replace(/^["']use strict["'];?\s*/, "").replace(/\/\*#__PURE__\*\//g, "");
+  const fullCode = `${compiledCode}
+return __render__();`;
+  const { names, values: templateValues } = resolveCustomExpressionScope(
+    imports,
+    fragment,
+    `${markup}
+${jsxInner}`
+  );
+  const rowIdx = names.indexOf("row");
+  const rowDataIdx = names.indexOf("rowData");
+  const fragmentIdx = names.indexOf("fragment");
+  const widgetsIdx = names.indexOf("Widgets");
+  const variablesIdx = names.indexOf("Variables");
+  if (rowIdx < 0) {
+    console.error("[customExpressionParser] Internal error: row not in scope");
+    const fallback = () => null;
+    cache.set(markup, fallback);
+    return fallback;
+  }
+  let renderFn;
+  try {
+    renderFn = new Function(...names, fullCode);
+  } catch (err) {
+    console.error("[customExpressionParser] Function compilation failed:", err);
+    const fallback = () => null;
+    cache.set(markup, fallback);
+    return fallback;
+  }
+  const renderComponent = (rowData) => {
+    try {
+      const args = templateValues.slice();
+      args[rowIdx] = rowData;
+      if (rowDataIdx >= 0) args[rowDataIdx] = rowData;
+      const fr = fragment;
+      if (fragmentIdx >= 0) args[fragmentIdx] = fragment;
+      if (widgetsIdx >= 0) args[widgetsIdx] = fr == null ? void 0 : fr.Widgets;
+      if (variablesIdx >= 0) args[variablesIdx] = fr == null ? void 0 : fr.Variables;
+      return React.createElement("span", { className: "custom-expr-wrapper" }, renderFn(...args));
+    } catch (err) {
+      console.error("[customExpressionParser] Render error:", err);
+      return null;
+    }
+  };
+  cache.set(markup, renderComponent);
+  return renderComponent;
+}
+export {
+  parseCustomExpressionToJsx
+};

package/utils/dataset-util.d.ts

@@ -0,0 +1,31 @@
+export default class DatasetUtil {
+    static isValidDataset(dataSet: any, isList?: boolean): any;
+    static getValue(dataSet: any, key: any, index: any, isList?: boolean): any;
+    static setValue(dataSet: any, key: any, value: any, isList?: boolean): any;
+    private static getTargetNode;
+    static getItem(dataSet: any, index: any, isList?: boolean): any;
+    static setItem(dataSet: any, i: any, value: any, options?: any): any;
+    /**
+     * This method is to get target node options like path, parentIndex and isList
+     * Example: if we have parent dataset as object and we are performing operations on inner list then we have to set isList as true.
+     * So finding the target node type and updating the isList option.
+     */
+    static getChildDetails(dataSet: any, options: any, isList: boolean): {
+        path: any;
+        isList: boolean;
+        parentIndex: any;
+    };
+    static addItem(dataSet: any, value: any, index: any, options?: any): any;
+    /**
+     *
+     * @param dataSet
+     * @param i, can be index value of the object/element in array
+     *      or
+     * the whole object which needs to be removed
+     * @param exactMatch
+     * @returns {any}
+     */
+    static removeItem(dataSet: any, i: any, options: any): any;
+    static getValidDataset(isList?: boolean): {};
+    static getCount(dataSet: any, isList?: boolean): any;
+}

package/utils/dataset-util.js

@@ -0,0 +1,132 @@
+import { isUndefined, isBoolean, isEqual, isObject, isArray, get, set, findIndex } from "lodash-es";
+class DatasetUtil {
+  static isValidDataset(dataSet, isList) {
+    if (!dataSet || isList && !isArray(dataSet)) {
+      return false;
+    }
+    return dataSet;
+  }
+  static getValue(dataSet, key, index, isList) {
+    index = index || 0;
+    return isList ? dataSet[index][key] : dataSet[key];
+  }
+  static setValue(dataSet, key, value, isList) {
+    if (key && !isList) {
+      dataSet[key] = value;
+    }
+    return dataSet;
+  }
+  static getTargetNode(dataSet, options) {
+    dataSet = options.parentIndex !== void 0 ? dataSet[options.parentIndex] : dataSet;
+    return get(dataSet, options.path);
+  }
+  static getItem(dataSet, index, isList) {
+    return isList ? dataSet[index] : dataSet;
+  }
+  static setItem(dataSet, i, value, options) {
+    let index;
+    if (isUndefined(i) || !options.isList) {
+      return dataSet;
+    }
+    if (isObject(i)) {
+      index = findIndex(dataSet, i);
+    } else {
+      index = i;
+    }
+    if (options.path) {
+      const innerArray = DatasetUtil.getTargetNode(dataSet, options);
+      const innerElemindex = findIndex(innerArray, i);
+      if (innerElemindex > -1) {
+        innerArray[innerElemindex] = value;
+      }
+    } else {
+      if (index > -1) {
+        dataSet[index] = value;
+      }
+    }
+    return dataSet;
+  }
+  /**
+   * This method is to get target node options like path, parentIndex and isList
+   * Example: if we have parent dataset as object and we are performing operations on inner list then we have to set isList as true.
+   * So finding the target node type and updating the isList option.
+   */
+  static getChildDetails(dataSet, options, isList) {
+    let parentIndex, path;
+    if (options && options.path) {
+      path = options.path;
+      let targetNode;
+      if (isList) {
+        parentIndex = options.parentIndex || 0;
+        targetNode = get(dataSet[parentIndex], options.path);
+      } else {
+        targetNode = get(dataSet, options.path);
+      }
+      isList = targetNode ? isArray(targetNode) ? true : false : true;
+    }
+    return { path, isList, parentIndex };
+  }
+  static addItem(dataSet, value, index, options) {
+    if (isUndefined(value) || !options.isList) {
+      return dataSet;
+    }
+    if (options.path) {
+      const innerArray = DatasetUtil.getTargetNode(dataSet, options);
+      if (innerArray) {
+        index = index !== void 0 ? index : innerArray.length;
+        innerArray.splice(index, 0, value);
+      } else {
+        options.parentIndex !== void 0 ? set(dataSet[options.parentIndex], options.path, [value]) : set(dataSet, options.path, [value]);
+      }
+    } else {
+      index = index !== void 0 ? index : dataSet.length;
+      dataSet.splice(index, 0, value);
+    }
+    return dataSet;
+  }
+  /**
+   *
+   * @param dataSet
+   * @param i, can be index value of the object/element in array
+   *      or
+   * the whole object which needs to be removed
+   * @param exactMatch
+   * @returns {any}
+   */
+  static removeItem(dataSet, i, options) {
+    let index, exactMatch;
+    i = i !== void 0 ? i : dataSet.length - 1;
+    if (isBoolean(options)) {
+      exactMatch = options;
+    }
+    if (isObject(options)) {
+      exactMatch = options.exactMatch;
+    }
+    if (isObject(i)) {
+      if (options.path) {
+        const innerArray = DatasetUtil.getTargetNode(dataSet, options);
+        const innerElemindex = findIndex(innerArray, i);
+        if (innerElemindex > -1 && (!exactMatch || exactMatch && isEqual(innerArray[innerElemindex], i))) {
+          innerArray.splice(innerElemindex, 1);
+        }
+      } else {
+        index = findIndex(dataSet, i);
+        if (index > -1 && (!exactMatch || exactMatch && isEqual(dataSet[index], i))) {
+          dataSet.splice(index, 1);
+        }
+      }
+    } else {
+      dataSet.splice(i, 1);
+    }
+    return dataSet;
+  }
+  static getValidDataset(isList) {
+    return isList ? [] : {};
+  }
+  static getCount(dataSet, isList) {
+    return isList ? dataSet.length : Object.keys(dataSet).length;
+  }
+}
+export {
+  DatasetUtil as default
+};

package/utils/eval-expression.js

@@ -0,0 +1,23 @@
+import { isArray } from "lodash-es";
+const evalExp = (obj, path) => {
+  if (!obj || typeof path !== "string") {
+    console.warn("Invalid input: obj is null/undefined or path is not a string.");
+    return null;
+  }
+  const pathArray = path.replace(/\[(\w+)\]/g, ".$1").split(".");
+  const item = pathArray.slice(1, pathArray.length).reduce((accumulator, currentKey) => {
+    if (!accumulator) {
+      return null;
+    }
+    if (isArray(accumulator)) {
+      return accumulator[parseInt(currentKey)];
+    } else if (typeof accumulator === "object") {
+      return accumulator[currentKey];
+    }
+    return accumulator;
+  }, obj);
+  return item;
+};
+export {
+  evalExp
+};

package/utils/form-utils.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Form utility functions for centralizing form operations across widgets
+ */
+export interface IFormData {
+    values: Record<string, any>;
+    isValid: boolean;
+}
+export interface FormRef {
+    getProps?: () => {
+        name: string;
+        onSubmit?: (event: Event, widget: any, formData: Record<string, any>) => void;
+        onBeforeSubmit?: (event: Event, widget: any, formData: Record<string, any>) => void;
+        [key: string]: any;
+    };
+    getFormData?: () => IFormData;
+    validateForm?: () => boolean | Promise<boolean>;
+    clearErrors?: () => void;
+}
+/**
+ * The `loginErrorMessage` function handles various scenarios to generate an appropriate error message
+ * for login failures, including extracting from standard error response structures and providing
+ * fallback options.
+ * @param {any} error - The `error` parameter in the `loginErrorMessage` function is used to handle
+ * different types of errors that may occur during the login process. It can be of any type, such as a
+ * string, object, or other data types, and the function provides different logic to extract and handle
+ * error messages based
+ * @param [appLocale] - The `appLocale` parameter is an optional object that contains localized strings
+ * for different languages or regions. It is used to provide localized error messages based on the
+ * user's preferred language or region. If a specific error message is not provided, the function will
+ * fallback to a default error message stored in the `
+ * @param {string} [errorMessage] - The `errorMessage` parameter in the `loginErrorMessage` function is
+ * a string that can be passed directly to override any other error message handling logic in the
+ * function. If a value is provided for `errorMessage`, it will be returned immediately without going
+ * through the other error handling steps in the function.
+ * @returns The function `loginErrorMessage` returns a string message based on the provided error
+ * object, appLocale object, and optional errorMessage string. The function follows these steps to
+ * determine the message to return:
+ */
+export declare const loginErrorMessage: (error: any, appLocale?: Record<string, string>, errorMessage?: string) => string;
+/**
+ * Get form properties safely from a form reference
+ */
+export declare const getFormProps: (formRef: React.RefObject<FormRef | null>) => {
+    [key: string]: any;
+    name: string;
+    onSubmit?: (event: Event, widget: any, formData: Record<string, any>) => void;
+    onBeforeSubmit?: (event: Event, widget: any, formData: Record<string, any>) => void;
+};
+/**
+ * Get form widget from listener widgets collection
+ */
+export declare const getFormWidget: (formName: string, listener: any) => any;
+/**
+ * Get form data from form reference with fallback
+ */
+export declare const getFormData: (formRef: React.RefObject<FormRef | null>) => IFormData;
+export declare const formValidate: (formRef: React.RefObject<FormRef | null>) => Promise<boolean>;
+/**
+ * Invoke form events in a centralized way
+ * @param formRef - Reference to the form element
+ * @param listener - Widget listener containing form widgets
+ * @param eventName - Name of the event to invoke ('onSubmit', 'onBeforeSubmit', etc.)
+ * @param event - The event object
+ * @param formData - Optional form data to pass to the event handler
+ * @returns The result from the event handler (boolean, string, object, or undefined)
+ */
+export declare const invokeFormEvent: (formRef: React.RefObject<FormRef | null>, listener: any, eventName: string, event: Event, formData: IFormData) => Promise<any>;
+/**
+ * Extracts error types from react-hook-form error object.
+ * react-hook-form error structure: { type: 'required', message: '...' }
+ * or { types: { required: '...', minLength: '...' } }
+ * @param fieldErrors - The error object from react-hook-form
+ * @returns Array of error type strings
+ */
+export declare const getErrorTypes: (fieldErrors: any) => string[];
+/**
+ * Checks if a field key should be skipped during validation messages iteration.
+ * - Skips formWidget entries (duplicates)
+ * - Skips underscore variants if dot notation exists (e.g., Department_deptCode when Department.deptCode exists)
+ * @param fieldKey - The field key to check
+ * @param allFieldKeys - All field keys in the form
+ * @returns true if the field should be skipped
+ */
+export declare const shouldSkipFieldKey: (fieldKey: string, allFieldKeys: string[]) => boolean;

package/utils/form-utils.js

@@ -0,0 +1,91 @@
+import keys from "lodash-es/keys";
+const loginErrorMessage = (error, appLocale, errorMessage) => {
+  var _a, _b, _c;
+  if (errorMessage) return errorMessage;
+  if (typeof error === "string") {
+    return error;
+  }
+  if (error && typeof error === "object") {
+    const serverError = (_c = (_b = (_a = error == null ? void 0 : error.data) == null ? void 0 : _a.errors) == null ? void 0 : _b.error) == null ? void 0 : _c[0];
+    if (serverError) {
+      const { message, parameters = [] } = serverError;
+      if (typeof message === "string") {
+        return message.replace(/{(\d+)}/g, (match, index) => {
+          const param = parameters[+index];
+          return param !== void 0 ? param : match;
+        });
+      }
+      if (parameters.length) {
+        return parameters.join(", ");
+      }
+    }
+    return error.message || error.toString();
+  }
+  return (appLocale == null ? void 0 : appLocale.LABEL_INVALID_USERNAME_OR_PASSWORD) || "Invalid username or password";
+};
+const getFormProps = (formRef) => {
+  var _a;
+  if (!((_a = formRef.current) == null ? void 0 : _a.getProps)) {
+    return null;
+  }
+  return formRef.current.getProps();
+};
+const getFormWidget = (formName, listener) => {
+  var _a;
+  return (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[formName];
+};
+const getFormData = (formRef) => {
+  if (!formRef.current) return { values: {}, isValid: false };
+  if (formRef.current.getFormData) {
+    return formRef.current.getFormData();
+  }
+  return {
+    values: {},
+    isValid: true
+  };
+};
+const formValidate = async (formRef) => {
+  var _a, _b;
+  if (!formRef.current) return false;
+  return await ((_b = (_a = formRef.current).validateForm) == null ? void 0 : _b.call(_a)) || false;
+};
+const invokeFormEvent = async (formRef, listener, eventName, event, formData) => {
+  const formProps = getFormProps(formRef);
+  if (!formProps) return;
+  const { name: formName, [eventName]: eventHandler } = formProps;
+  if (eventHandler && formName) {
+    const formWidget = getFormWidget(formName, listener);
+    const result = await eventHandler(event, formWidget, formData.values || {});
+    return result;
+  }
+};
+const getErrorTypes = (fieldErrors) => {
+  if (!fieldErrors) return [];
+  if (fieldErrors.types) {
+    return keys(fieldErrors.types);
+  }
+  if (fieldErrors.type) {
+    return [fieldErrors.type];
+  }
+  return keys(fieldErrors);
+};
+const shouldSkipFieldKey = (fieldKey, allFieldKeys) => {
+  if (fieldKey.includes("formWidget")) return true;
+  if (fieldKey.includes("_")) {
+    const dotNotationKey = fieldKey.replace(/_/g, ".");
+    if (allFieldKeys.includes(dotNotationKey)) {
+      return true;
+    }
+  }
+  return false;
+};
+export {
+  formValidate,
+  getErrorTypes,
+  getFormData,
+  getFormProps,
+  getFormWidget,
+  invokeFormEvent,
+  loginErrorMessage,
+  shouldSkipFieldKey
+};

package/utils/format-util.d.ts

@@ -0,0 +1,25 @@
+export declare const getDecimalCount: (format: string, DECIMAL_COUNT_MAP: Record<string, number>) => number;
+export declare const isPercentageValue: (value: string) => boolean;
+export declare const findValueOf: (datum: any, key: string, createIfMissing?: boolean) => any;
+export declare const parseNumber: (val: string) => number;
+export declare const formatFinancialValue: (value: string, decimalplaces: number) => string;
+export declare const formatNumberWithCommas: (value: string | number, trailingzero?: boolean, decimalplaces?: number) => string;
+export declare const getValueInRange: (value: number, minvalue: number | undefined, maxvalue: number | undefined) => number;
+export declare const roundToStep: (value: number, step: number, decimalplaces: number) => number;
+export declare const handleStepValue: (currentValue: number | null | undefined, direction: "UP" | "DOWN", step: number, decimalplaces: number, minvalue?: number, maxvalue?: number) => number;
+export declare const validateNumericValue: (value: string | number | null, required: boolean, minvalue?: number, maxvalue?: number, regexp?: string) => {
+    isValid: boolean;
+    message: string;
+};
+export declare const handleNumericInputChange: (inputValue: string, inputmode: string, decimalplaces: number, setRawInputValue: (value: string) => void) => {
+    inputValue: string;
+    newVal: number | null;
+};
+export declare const formatOnBlur: (datavalue: number | null, rawInputValue: string, trailingzero: boolean, decimalplaces: number) => string;
+export declare const handleValidatedValueUpdate: (value: number | null, name: string | undefined, inputElCurrent: HTMLInputElement | null, onChangeProp: ((event: React.ChangeEvent<HTMLInputElement>, widget?: any, newValue?: number | null, oldValue?: number | null) => void) | undefined, listenerProp: {
+    onChange?: (name: string | undefined, widgetData: {
+        datavalue: string;
+        [key: string]: any;
+    }) => void;
+    Widgets?: Record<string, any>;
+} | undefined, prevDatavalueState: number | null, setPrevDatavalueState: React.Dispatch<React.SetStateAction<number | null>>, widgetProps?: any) => void;