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

package/utils/form-utils.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldSkipFieldKey = exports.loginErrorMessage = exports.invokeFormEvent = exports.getFormWidget = exports.getFormProps = exports.getFormData = exports.getErrorTypes = exports.formValidate = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _keys = _interopRequireDefault(require("lodash-es/keys"));
+/**
+ * Form utility functions for centralizing form operations across widgets
+ */
+
+/**
+ * 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:
+ */
+var loginErrorMessage = exports.loginErrorMessage = function loginErrorMessage(error, appLocale, errorMessage) {
+  // 1. If a direct error message is passed, use it
+  if (errorMessage) return errorMessage;
+
+  // 2. If it's a plain string error
+  if (typeof error === "string") {
+    return error;
+  }
+
+  // 3. Try extracting from standard error response structure
+  if (error && (0, _typeof2["default"])(error) === "object") {
+    var _error$data;
+    var serverError = error === null || error === void 0 || (_error$data = error.data) === null || _error$data === void 0 || (_error$data = _error$data.errors) === null || _error$data === void 0 || (_error$data = _error$data.error) === null || _error$data === void 0 ? void 0 : _error$data[0];
+    if (serverError) {
+      var message = serverError.message,
+        _serverError$paramete = serverError.parameters,
+        parameters = _serverError$paramete === void 0 ? [] : _serverError$paramete;
+      if (typeof message === "string") {
+        // Replace {0}, {1}, {2}, ... with corresponding parameters dynamically
+        return message.replace(/{(\d+)}/g, function (match, index) {
+          var param = parameters[+index];
+          return param !== undefined ? param : match;
+        });
+      }
+
+      // If no message, but parameters exist, just join them
+      if (parameters.length) {
+        return parameters.join(", ");
+      }
+    }
+
+    // Fallback to error.message or .toString()
+    return error.message || error.toString();
+  }
+
+  // 4. Fallback to localized or default error message
+  return (appLocale === null || appLocale === void 0 ? void 0 : appLocale.LABEL_INVALID_USERNAME_OR_PASSWORD) || "Invalid username or password";
+};
+
+/**
+ * Get form properties safely from a form reference
+ */
+var getFormProps = exports.getFormProps = function getFormProps(formRef) {
+  var _formRef$current;
+  if (!((_formRef$current = formRef.current) !== null && _formRef$current !== void 0 && _formRef$current.getProps)) {
+    return null;
+  }
+  return formRef.current.getProps();
+};
+
+/**
+ * Get form widget from listener widgets collection
+ */
+var getFormWidget = exports.getFormWidget = function getFormWidget(formName, listener) {
+  var _listener$Widgets;
+  return listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[formName];
+};
+
+/**
+ * Get form data from form reference with fallback
+ */
+var getFormData = exports.getFormData = function getFormData(formRef) {
+  if (!formRef.current) return {
+    values: {},
+    isValid: false
+  };
+  if (formRef.current.getFormData) {
+    return formRef.current.getFormData();
+  }
+
+  // Fallback for legacy forms
+  return {
+    values: {},
+    isValid: true
+  };
+};
+var formValidate = exports.formValidate = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(formRef) {
+    var _formRef$current$vali, _formRef$current2;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (formRef.current) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 2:
+          _context.next = 4;
+          return (_formRef$current$vali = (_formRef$current2 = formRef.current).validateForm) === null || _formRef$current$vali === void 0 ? void 0 : _formRef$current$vali.call(_formRef$current2);
+        case 4:
+          _context.t0 = _context.sent;
+          if (_context.t0) {
+            _context.next = 7;
+            break;
+          }
+          _context.t0 = false;
+        case 7:
+          return _context.abrupt("return", _context.t0);
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function formValidate(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+/**
+ * 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)
+ */
+var invokeFormEvent = exports.invokeFormEvent = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(formRef, listener, eventName, event, formData) {
+    var formProps, formName, eventHandler, formWidget, result;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          formProps = getFormProps(formRef);
+          if (formProps) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          formName = formProps.name, eventHandler = formProps[eventName];
+          if (!(eventHandler && formName)) {
+            _context2.next = 10;
+            break;
+          }
+          formWidget = getFormWidget(formName, listener);
+          _context2.next = 8;
+          return eventHandler(event, formWidget, formData.values || {});
+        case 8:
+          result = _context2.sent;
+          return _context2.abrupt("return", result);
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function invokeFormEvent(_x2, _x3, _x4, _x5, _x6) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+/**
+ * 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
+ */
+var getErrorTypes = exports.getErrorTypes = function getErrorTypes(fieldErrors) {
+  if (!fieldErrors) return [];
+
+  // Handle multiple errors (when using criteriaMode: 'all')
+  if (fieldErrors.types) {
+    return (0, _keys["default"])(fieldErrors.types);
+  }
+
+  // Handle single error
+  if (fieldErrors.type) {
+    return [fieldErrors.type];
+  }
+  return (0, _keys["default"])(fieldErrors);
+};
+
+/**
+ * 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
+ */
+var shouldSkipFieldKey = exports.shouldSkipFieldKey = function shouldSkipFieldKey(fieldKey, allFieldKeys) {
+  // Skip formWidget entries (they are duplicates)
+  if (fieldKey.includes("formWidget")) return true;
+
+  // Skip underscore variants if dot notation exists (avoid duplicates)
+  if (fieldKey.includes("_")) {
+    var dotNotationKey = fieldKey.replace(/_/g, ".");
+    if (allFieldKeys.includes(dotNotationKey)) {
+      return true;
+    }
+  }
+  return false;
+};

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;

package/utils/format-util.js

@@ -0,0 +1,300 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateNumericValue = exports.roundToStep = exports.parseNumber = exports.isPercentageValue = exports.handleValidatedValueUpdate = exports.handleStepValue = exports.handleNumericInputChange = exports.getValueInRange = exports.getDecimalCount = exports.formatOnBlur = exports.formatNumberWithCommas = exports.formatFinancialValue = exports.findValueOf = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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; }
+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; }
+var getDecimalCount = exports.getDecimalCount = function getDecimalCount(format, DECIMAL_COUNT_MAP) {
+  return DECIMAL_COUNT_MAP[format] || 0;
+};
+var isPercentageValue = exports.isPercentageValue = function isPercentageValue(value) {
+  return value.includes("%");
+};
+var findValueOf = exports.findValueOf = function findValueOf(datum, key, createIfMissing) {
+  if (!key) return datum;
+  var parts = key.split(".");
+  var current = datum;
+  var _iterator = _createForOfIteratorHelper(parts),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var part = _step.value;
+      if (current[part] === undefined) {
+        if (createIfMissing) {
+          current[part] = {};
+        } else {
+          return undefined;
+        }
+      }
+      current = current[part];
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return current;
+};
+var parseNumber = exports.parseNumber = function parseNumber(val) {
+  return Number.parseFloat(val) || NaN;
+};
+var formatFinancialValue = exports.formatFinancialValue = function formatFinancialValue(value, decimalplaces) {
+  var numericValue = value.replace(/[^\d]/g, "");
+  if (!numericValue) return "";
+  var num = Number.parseInt(numericValue, 10) / Math.pow(10, decimalplaces);
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimalplaces,
+    maximumFractionDigits: decimalplaces
+  }).format(num);
+};
+var formatNumberWithCommas = exports.formatNumberWithCommas = function formatNumberWithCommas(value, trailingzero, decimalplaces) {
+  if (!value && value !== 0) return "";
+  if (trailingzero && typeof value === "string") {
+    // When trailingzero is true, preserve the original string format
+    var _num = Number(value.replace(/,/g, ""));
+    if (isNaN(_num)) return "";
+
+    // If the string has decimal places, preserve them with commas in integer part
+    if (value.includes(".")) {
+      var _value$split = value.split("."),
+        _value$split2 = (0, _slicedToArray2["default"])(_value$split, 2),
+        intPart = _value$split2[0],
+        decPart = _value$split2[1];
+      var intWithCommas = new Intl.NumberFormat("en-US").format(Number(intPart));
+      return "".concat(intWithCommas, ".").concat(decPart);
+    } else {
+      return new Intl.NumberFormat("en-US").format(_num);
+    }
+  }
+  var num = typeof value === "string" ? Number(value.toString().replace(/,/g, "")) : value;
+  if (isNaN(num)) return "";
+  if (trailingzero && decimalplaces !== undefined && decimalplaces > 0) {
+    // Show trailing zeros with specified decimal places
+    return new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: decimalplaces,
+      maximumFractionDigits: decimalplaces
+    }).format(num);
+  } else {
+    return new Intl.NumberFormat("en-US").format(num);
+  }
+};
+var getValueInRange = exports.getValueInRange = function getValueInRange(value, minvalue, maxvalue) {
+  if (minvalue !== undefined && !isNaN(minvalue) && value < minvalue) {
+    return minvalue;
+  }
+  if (maxvalue !== undefined && !isNaN(maxvalue) && value > maxvalue) {
+    return maxvalue;
+  }
+  return value;
+};
+
+// Helper function to round value based on step decimal places
+var roundToStep = exports.roundToStep = function roundToStep(value, step, decimalplaces) {
+  var _step$toString$split$;
+  if (step === 0) return value;
+  var stepDecimals = step.toString().includes(".") ? ((_step$toString$split$ = step.toString().split(".")[1]) === null || _step$toString$split$ === void 0 ? void 0 : _step$toString$split$.length) || 0 : 0;
+  var factor = Math.pow(10, Math.max(stepDecimals, decimalplaces));
+  return Math.round(value * factor) / factor;
+};
+
+// Handle step value calculation for increment/decrement operations
+var handleStepValue = exports.handleStepValue = function handleStepValue(currentValue, direction, step, decimalplaces, minvalue, maxvalue) {
+  if (step === 0) {
+    return currentValue || 0;
+  }
+
+  // Calculate new value based on step
+  var newValue;
+  if (currentValue === null || currentValue === undefined || isNaN(currentValue)) {
+    newValue = getValueInRange(minvalue || 0, minvalue || 0, maxvalue || 0);
+  } else {
+    var stepAmount = direction === "UP" ? step : -step;
+    newValue = getValueInRange(currentValue + stepAmount, minvalue !== null && minvalue !== void 0 ? minvalue : 0, maxvalue !== null && maxvalue !== void 0 ? maxvalue : 0);
+  }
+
+  // Round to appropriate decimal places
+  return roundToStep(newValue, step, decimalplaces);
+};
+
+// Common validation function for both currency and number widgets
+var validateNumericValue = exports.validateNumericValue = function validateNumericValue(value, required, minvalue, maxvalue, regexp) {
+  if ((value === undefined || value === null) && required) {
+    return {
+      isValid: false,
+      message: "This field is required"
+    };
+  }
+  var numValue = typeof value === "string" ? parseNumber(value) : value;
+  if ((numValue === undefined || numValue === null) && required) {
+    return {
+      isValid: false,
+      message: "This field is required"
+    };
+  }
+  if (numValue === undefined || numValue === null) {
+    return {
+      isValid: !required,
+      message: required ? "This field is required" : ""
+    };
+  }
+
+  // Regex validation (mainly for number widget)
+  if (regexp && !RegExp(regexp).test(numValue.toString())) {
+    return {
+      isValid: false,
+      message: "Invalid number format"
+    };
+  }
+  if (minvalue !== undefined && numValue < minvalue) {
+    return {
+      isValid: false,
+      message: "Value must be at least ".concat(minvalue)
+    };
+  }
+  if (maxvalue !== undefined && numValue > maxvalue) {
+    return {
+      isValid: false,
+      message: "Value must not exceed ".concat(maxvalue)
+    };
+  }
+  return {
+    isValid: true,
+    message: ""
+  };
+};
+
+// Common input change handler for both widgets
+var handleNumericInputChange = exports.handleNumericInputChange = function handleNumericInputChange(inputValue, inputmode, decimalplaces, setRawInputValue) {
+  var processedInputValue = inputValue;
+  var newVal;
+  if (inputmode === "financial" && decimalplaces > 0) {
+    var digitsOnly = inputValue.replace(/[^\d]/g, "");
+    if (digitsOnly === "") {
+      processedInputValue = "";
+      newVal = null;
+      setRawInputValue("");
+    } else {
+      var divisor = Math.pow(10, decimalplaces);
+      newVal = parseInt(digitsOnly) / divisor;
+      if (decimalplaces > 0) {
+        processedInputValue = newVal.toFixed(decimalplaces);
+      } else {
+        processedInputValue = newVal.toString();
+      }
+      setRawInputValue(processedInputValue);
+    }
+  } else {
+    // Basic validation for decimal input
+    if (decimalplaces > 0) {
+      // Allow digits, one dot, and basic decimal formatting
+      var _cleanValue = inputValue.replace(/[^\d.-]/g, "");
+      var dotCount = (_cleanValue.match(/\./g) || []).length;
+
+      // Prevent multiple dots
+      if (dotCount > 1) {
+        return {
+          inputValue: inputValue,
+          newVal: null
+        };
+      }
+
+      // Prevent decimal places beyond the limit
+      var _cleanValue$split = _cleanValue.split("."),
+        _cleanValue$split2 = (0, _slicedToArray2["default"])(_cleanValue$split, 2),
+        intPart = _cleanValue$split2[0],
+        _cleanValue$split2$ = _cleanValue$split2[1],
+        decPart = _cleanValue$split2$ === void 0 ? "" : _cleanValue$split2$;
+      if (decPart && decPart.length > decimalplaces) {
+        return {
+          inputValue: inputValue,
+          newVal: Number(_cleanValue)
+        };
+      }
+      processedInputValue = _cleanValue;
+    }
+
+    // Remove commas for processing but keep original input for display
+    var cleanValue = processedInputValue.replace(/,/g, "");
+    if (cleanValue === "" || cleanValue === "-") {
+      newVal = null;
+      setRawInputValue(cleanValue);
+    } else {
+      // Convert to number for validation and calculations
+      newVal = Number(cleanValue);
+      if (isNaN(newVal)) {
+        return {
+          inputValue: inputValue,
+          newVal: null
+        };
+      }
+
+      // Store raw input value to preserve trailing zeros
+      setRawInputValue(cleanValue);
+    }
+
+    // Don't format during typing - keep original input
+    processedInputValue = inputValue;
+  }
+  return {
+    inputValue: processedInputValue,
+    newVal: newVal
+  };
+};
+
+// Common blur formatting function
+var formatOnBlur = exports.formatOnBlur = function formatOnBlur(datavalue, rawInputValue, trailingzero, decimalplaces) {
+  if (datavalue !== null) {
+    if (trailingzero) {
+      // Use the raw input value to preserve trailing zeros
+      return formatNumberWithCommas(rawInputValue, trailingzero, decimalplaces);
+    } else {
+      if (rawInputValue.includes(".")) {
+        var _rawInputValue$split = rawInputValue.split("."),
+          _rawInputValue$split2 = (0, _slicedToArray2["default"])(_rawInputValue$split, 2),
+          intPart = _rawInputValue$split2[0],
+          decPart = _rawInputValue$split2[1];
+        var intWithCommas = new Intl.NumberFormat("en-US").format(Number(intPart));
+        var trimmedDecPart = decPart.replace(/0+$/, "");
+        if (trimmedDecPart === "") {
+          return intWithCommas;
+        }
+        return "".concat(intWithCommas, ".").concat(trimmedDecPart);
+      }
+      return formatNumberWithCommas(datavalue);
+    }
+  }
+  return "";
+};
+
+// Common validated value update function
+var handleValidatedValueUpdate = exports.handleValidatedValueUpdate = function handleValidatedValueUpdate(value, name, inputElCurrent, onChangeProp, listenerProp, prevDatavalueState, setPrevDatavalueState, widgetProps) {
+  var stringifiedValue = value === null ? "" : value.toString();
+  var widgetInfo = name && listenerProp !== null && listenerProp !== void 0 && listenerProp.Widgets ? listenerProp.Widgets[name] : undefined;
+  if (listenerProp !== null && listenerProp !== void 0 && listenerProp.onChange) {
+    listenerProp.onChange(name, _objectSpread(_objectSpread({}, widgetInfo || widgetProps), {}, {
+      datavalue: stringifiedValue
+    }));
+  }
+  setPrevDatavalueState(value);
+  var updatedProps = _objectSpread(_objectSpread({}, widgetProps), {}, {
+    datavalue: stringifiedValue
+  });
+  if (onChangeProp) {
+    var syntheticEvent = {
+      target: {
+        value: stringifiedValue,
+        name: name
+      },
+      currentTarget: inputElCurrent
+    };
+    onChangeProp(syntheticEvent, updatedProps, value, prevDatavalueState);
+  }
+};

package/utils/layoutsize-util.d.ts

@@ -0,0 +1 @@
+export declare function layoutSizeUtil(el: HTMLElement, widget?: string, height?: string): void;

package/utils/layoutsize-util.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutSizeUtil = layoutSizeUtil;
+// alligening flexgrow, flexShrink,selfAlign and minWidth/minHeight to achieve the desired
+// auto layout behavior based on parent flex context and provided value (fill/hug/number).
+
+function applySize(el, key, nv) {
+  var parent = el.parentElement;
+  var parentStyle = parent ? getComputedStyle(parent) : null;
+  var isParentFlex = !!parentStyle && ["flex", "inline-flex"].includes(parentStyle.display);
+  var isMainAxis = false;
+  if (isParentFlex) {
+    var flexDir = parentStyle.flexDirection;
+    var isRow = ["row", "row-reverse"].includes(flexDir);
+    isMainAxis = key === "width" && isRow || key === "height" && !isRow;
+  }
+  var minKey = key === "width" ? "minWidth" : "minHeight";
+  if (nv === "fill") {
+    if (!isParentFlex) {
+      el.style[key] = "100%";
+    } else {
+      el.style[key] = "";
+      if (isMainAxis) {
+        el.style.flexGrow = "1";
+        el.style.flexShrink = "";
+        el.style[minKey] = "0";
+      } else {
+        el.style.alignSelf = "stretch";
+      }
+    }
+  } else {
+    if (nv === "hug") {
+      el.style[key] = "fit-content";
+    }
+    if (isParentFlex) {
+      if (isMainAxis) {
+        el.style.flexGrow = "";
+        el.style.flexShrink = "0";
+        el.style[minKey] = "";
+      } else {
+        el.style.alignSelf = "";
+      }
+    } else {
+      el.style.flexGrow = "";
+      el.style.flexShrink = "0";
+      el.style.alignSelf = "";
+      el.style[minKey] = "";
+    }
+  }
+}
+function layoutSizeUtil(el, widget, height) {
+  if (widget) applySize(el, "width", widget);
+  if (height) applySize(el, "height", height);
+}

package/utils/lib-error-skipper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Wraps page/prefab script methods with error handling that detects
+ * unsupported library usage (e.g. jQuery) and surfaces all other errors
+ * with full context instead of swallowing them.
+ */
+export declare const isJQueryError: (error: any) => boolean;
+interface AppContext {
+    notifyApp?: (message: string, type: string) => void;
+}
+export declare const wrapWithThirdPartyErrorGuard: (pageProxy: Record<string, any>, appContext: AppContext | null | undefined, componentName: string) => void;
+export {};