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

package/components/data/live-filter/index.js

@@ -0,0 +1,304 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lodashEs = require("lodash-es");
+var _util = require("../../../core/util");
+var _form = _interopRequireDefault(require("../form"));
+var _props = require("./props");
+var _types = require("../types");
+var _utils = require("../utils");
+var _fieldDataUtils = require("../utils/field-data-utils");
+var _filterFieldUtil = require("../utils/filter-field-util");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FILTER_CONSTANTS = {
+  EMPTY_KEY: "EMPTY_NULL_FILTER"
+};
+var WmLiveFilter = function WmLiveFilter(prop) {
+  var _props$listener;
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), prop);
+  var isInitilised = (0, _react.useRef)(false);
+  var isInvoked = (0, _react.useRef)(false);
+  var isDataSourceUpdatedRef = (0, _react.useRef)(false);
+  var dataSource = (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Variables) === null || _props$listener === void 0 ? void 0 : _props$listener[props.dataSource];
+  function updateResults(dataSet) {
+    var _props$listener2;
+    (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || _props$listener2.onChange(props.name, {
+      result: dataSet
+    });
+  }
+  function Livefilter(_x, _x2, _x3) {
+    return _Livefilter.apply(this, arguments);
+  }
+  function _Livefilter() {
+    _Livefilter = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(options, clearFilter, formFields) {
+      var _props$orderBy, _props$pagesize;
+      var dataModel, page, orderBy, pagesize, filterFields, isValid, _props$onBeforeservic, _props$toggleMessage, fieldsArray, _options$exportType, _options$exportSize, _options$data, _options$fields, _options$data2, _options$fileName, _options$data3, exportType;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (dataSource) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            // Treat first arg as submitted form data model
+            dataModel = options || {};
+            page = 1;
+            orderBy = (_props$orderBy = props.orderBy) !== null && _props$orderBy !== void 0 ? _props$orderBy : "";
+            pagesize = (_props$pagesize = props.pagesize) !== null && _props$pagesize !== void 0 ? _props$pagesize : 20;
+            filterFields = {};
+
+            // before invoke filter called onBeforeInvokeFilter if response is false or undefined then return
+            _context.prev = 7;
+            isValid = (_props$onBeforeservic = props.onBeforeservicecall) === null || _props$onBeforeservic === void 0 ? void 0 : _props$onBeforeservic.call(props, filterFields);
+            if (!(isValid === false)) {
+              _context.next = 11;
+              break;
+            }
+            return _context.abrupt("return");
+          case 11:
+            if (!(isValid && isValid.error)) {
+              _context.next = 14;
+              break;
+            }
+            (_props$toggleMessage = props.toggleMessage) === null || _props$toggleMessage === void 0 || _props$toggleMessage.call(props, true, isValid.error, "error", "ERROR");
+            return _context.abrupt("return");
+          case 14:
+            _context.next = 20;
+            break;
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](7);
+            if (!(_context.t0.message === "Abort")) {
+              _context.next = 20;
+              break;
+            }
+            return _context.abrupt("return");
+          case 20:
+            if (!clearFilter) {
+              _context.next = 22;
+              break;
+            }
+            return _context.abrupt("return", dataSource[_types.DataSource.Operation.LIST_RECORDS]({
+              filterFields: {},
+              orderBy: "",
+              page: 1
+            }).then(function (results) {
+              if (results) {
+                var _props$onSuccess;
+                updateResults(results === null || results === void 0 ? void 0 : results.data);
+                (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 || _props$onSuccess.call(props, results === null || results === void 0 ? void 0 : results.data);
+              }
+            })["catch"](function (err) {
+              var _props$toggleMessage2, _props$onResultCb;
+              (_props$toggleMessage2 = props.toggleMessage) === null || _props$toggleMessage2 === void 0 || _props$toggleMessage2.call(props, true, err, "error", "ERROR");
+              (_props$onResultCb = props.onResultCb) === null || _props$onResultCb === void 0 || _props$onResultCb.call(props, err, false);
+              return err;
+            }));
+          case 22:
+            /* Construct the formFields Variable to send it to the queryBuilder */
+            fieldsArray = (0, _lodashEs.isArray)(formFields) ? formFields : Object.values(formFields || {}); // Sync runtime values from submitted data into field definitions
+            fieldsArray.forEach(function (filterField) {
+              // Use fieldcol (or name) as the actual column identifier since field may contain "true"
+              var fieldKey = filterField.fieldcol || filterField.name || filterField.field;
+              var submitted = dataModel === null || dataModel === void 0 ? void 0 : dataModel[fieldKey];
+              if (filterField["isRange"] === true || filterField["isRange"] === "true") {
+                if (submitted && (0, _typeof2["default"])(submitted) === "object") {
+                  var _ref, _ref2, _submitted$minValue, _ref3, _ref4, _submitted$maxValue;
+                  filterField._minValue = (_ref = (_ref2 = (_submitted$minValue = submitted.minValue) !== null && _submitted$minValue !== void 0 ? _submitted$minValue : submitted.min) !== null && _ref2 !== void 0 ? _ref2 : submitted.start) !== null && _ref !== void 0 ? _ref : filterField._minValue;
+                  filterField._maxValue = (_ref3 = (_ref4 = (_submitted$maxValue = submitted.maxValue) !== null && _submitted$maxValue !== void 0 ? _submitted$maxValue : submitted.max) !== null && _ref4 !== void 0 ? _ref4 : submitted.end) !== null && _ref3 !== void 0 ? _ref3 : filterField._maxValue;
+                }
+              } else {
+                if (submitted !== undefined) {
+                  filterField.value = submitted;
+                }
+              }
+            });
+            fieldsArray.forEach(function (filterField) {
+              var fieldValue;
+              var matchMode;
+              // Use fieldcol (or name) as the actual column identifier since field may contain "true"
+              var colName = filterField.fieldcol || filterField.name || filterField.field;
+              var minValue = filterField._minValue;
+              var maxvalue = filterField._maxValue;
+              /* if field is part of a related entity, column name will be 'entity.fieldName' */
+              if (filterField["isRelated"]) {
+                colName += "." + filterField["lookup-field"];
+              }
+              if (filterField["isRange"] && filterField["isRange"] != "false") {
+                /*Based on the min and max values, decide the matchmode condition*/
+                fieldValue = (0, _utils.getRangeFieldValue)(minValue, maxvalue);
+                matchMode = (0, _utils.getRangeMatchMode)(minValue, maxvalue);
+                if ((0, _util.isDefined)(fieldValue)) {
+                  filterFields[colName] = {
+                    value: fieldValue,
+                    matchMode: matchMode,
+                    logicalOp: "AND"
+                  };
+                }
+              } else {
+                var filterValue = "value" in filterField ? filterField.value : filterField.datavalue;
+                switch (filterField.widget) {
+                  case _types.FormWidgetType.SELECT:
+                  case _types.FormWidgetType.RADIOSET:
+                    if ((0, _utils.getEnableEmptyFilter)(props.enableemptyfilter) && filterValue === FILTER_CONSTANTS.EMPTY_KEY) {
+                      matchMode = (0, _utils.getEmptyMatchMode)(props.enableemptyfilter);
+                      fieldValue = filterValue;
+                    } else {
+                      if (filterField.type === _types.DataType.BOOLEAN) {
+                        if ((0, _util.isDefined)(filterValue) && filterValue !== "") {
+                          fieldValue = JSON.parse(filterValue);
+                        }
+                      } else {
+                        fieldValue = filterValue;
+                      }
+                    }
+                    break;
+                  case _types.FormWidgetType.CHECKBOXSET:
+                  case _types.FormWidgetType.CHIPS:
+                    if (filterValue && filterValue.length) {
+                      fieldValue = filterValue;
+                    }
+                    break;
+                  case _types.FormWidgetType.CHECKBOX:
+                  case _types.FormWidgetType.TOGGLE:
+                    if ((0, _util.isDefined)(filterValue) && filterValue !== "") {
+                      fieldValue = filterField.type === _types.DataType.BOOLEAN ? JSON.parse(filterValue) : filterValue;
+                    }
+                    break;
+                  default:
+                    fieldValue = filterValue;
+                    break;
+                }
+                if ((0, _util.isDefined)(fieldValue) && fieldValue !== "" && fieldValue !== null) {
+                  filterFields[colName] = {};
+                  if (matchMode) {
+                    filterFields[colName].matchMode = matchMode;
+                    fieldValue = undefined;
+                  } else if (filterField.type === _types.DataType.STRING || filterField.isRelated) {
+                    // Only for string types and related fields, custom match modes are enabled.
+                    // filterFields[colName].matchMode =
+                    //   matchMode || filterField.matchmode || variable[DataSource.Operation.GET_MATCH_MODE]();
+                  }
+                  filterFields[colName].value = fieldValue;
+                  filterFields[colName].logicalOp = "AND";
+                  filterFields[colName].type = filterField.type;
+                }
+              }
+            });
+
+            //  if exportType is there then return the download
+            if (!(options && options.exportType || options && options.data && options.data.exportType)) {
+              _context.next = 28;
+              break;
+            }
+            exportType = (_options$exportType = options.exportType) !== null && _options$exportType !== void 0 ? _options$exportType : options.data.exportType;
+            return _context.abrupt("return", dataSource[_types.DataSource.Operation.DOWNLOAD]({
+              data: {
+                matchMode: "anywhereignorecase",
+                filterFields: filterFields,
+                orderBy: orderBy,
+                exportType: exportType,
+                logicalOp: "AND",
+                exportSize: (_options$exportSize = options.exportSize) !== null && _options$exportSize !== void 0 ? _options$exportSize : (_options$data = options.data) === null || _options$data === void 0 ? void 0 : _options$data.exportSize,
+                fields: (_options$fields = options.fields) !== null && _options$fields !== void 0 ? _options$fields : (_options$data2 = options.data) === null || _options$data2 === void 0 ? void 0 : _options$data2.fields,
+                fileName: (_options$fileName = options.fileName) !== null && _options$fileName !== void 0 ? _options$fileName : (_options$data3 = options.data) === null || _options$data3 === void 0 ? void 0 : _options$data3.fileName
+              }
+            }));
+          case 28:
+            return _context.abrupt("return", dataSource[_types.DataSource.Operation.LIST_RECORDS]({
+              filterFields: filterFields,
+              orderBy: orderBy,
+              page: page,
+              pagesize: pagesize,
+              skipDataSetUpdate: true,
+              inFlightBehavior: "executeAll"
+            }).then(function (results) {
+              if (results) {
+                var _props$onSuccess2;
+                updateResults(results === null || results === void 0 ? void 0 : results.data);
+                (_props$onSuccess2 = props.onSuccess) === null || _props$onSuccess2 === void 0 || _props$onSuccess2.call(props, results === null || results === void 0 ? void 0 : results.data);
+              }
+            })["catch"](function (err) {
+              var _props$toggleMessage3, _props$onResultCb2;
+              (_props$toggleMessage3 = props.toggleMessage) === null || _props$toggleMessage3 === void 0 || _props$toggleMessage3.call(props, true, err, "error", "ERROR");
+              (_props$onResultCb2 = props.onResultCb) === null || _props$onResultCb2 === void 0 || _props$onResultCb2.call(props, err, false);
+              return err;
+            }));
+          case 29:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[7, 16]]);
+    }));
+    return _Livefilter.apply(this, arguments);
+  }
+  function onDataSourceChange(formFields) {
+    if (isDataSourceUpdatedRef.current) return;
+    // const fields = get(props.listener.Widgets[props.name], "formfields", []);
+
+    // let formFields = isArray(fields) ? fields : Object.values(fields || {});
+
+    if ((0, _lodashEs.get)(formFields, "length")) {
+      isDataSourceUpdatedRef.current = true;
+    }
+    formFields.forEach(function (field) {
+      if ((0, _fieldDataUtils.isDataSetWidget)(field.widget)) {
+        var _props$listener3;
+        (0, _filterFieldUtil.getDistinctValuesForField)(dataSource, field, {
+          widget: "widgettype",
+          enableemptyfilter: props.enableemptyfilter,
+          EMPTY_VALUE: props === null || props === void 0 || (_props$listener3 = props.listener) === null || _props$listener3 === void 0 ? void 0 : _props$listener3.appLocale.LABEL_NO_VALUE
+        });
+      }
+    });
+  }
+
+  // side events
+  (0, _react.useEffect)(function () {
+    var _props$dataset;
+    if (!isInitilised.current && props !== null && props !== void 0 && props.dataset && (props === null || props === void 0 || (_props$dataset = props.dataset) === null || _props$dataset === void 0 ? void 0 : _props$dataset.length) > 0) {
+      updateResults(props.dataset);
+      // @ts-ignore
+      isInitilised.current = true;
+    }
+  }, [props.dataset]);
+  (0, _react.useEffect)(function () {
+    if (dataSource && dataSource.invoke && !isInvoked.current) {
+      isInvoked.current = true;
+      dataSource.invoke();
+    }
+  }, []);
+  return __jsx(_form["default"], (0, _extends2["default"])({}, props, {
+    Livefilter: Livefilter,
+    onDataSourceChange: onDataSourceChange,
+    "form-type": "live-filter"
+  }), props.children);
+};
+WmLiveFilter.displayName = "WmLiveFilter";
+
+/**
+ * The WmLiveFilter component is used to filter data from a data source.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-filter--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-filter--docs#tab-overview)
+ *
+ * @param props - {@link WmLiveFilterProps}
+ */
+var _default = exports["default"] = WmLiveFilter;

package/components/data/live-filter/props.d.ts

@@ -0,0 +1,96 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface LiveFilterProps {
+    /**
+     * Error message to display.
+     */
+    errormessage?: string;
+    /**
+     * Position of the captions.
+     */
+    captionposition?: string;
+    /**
+     * Title of the live filter.
+     */
+    title?: string;
+    /**
+     * Encoding type.
+     */
+    enctype?: string;
+    /**
+     * HTTP method.
+     */
+    method?: string;
+    /**
+     * Alignment of captions.
+     */
+    captionalign?: string;
+    /**
+     * Subheading of the live filter.
+     */
+    subheading?: string;
+    /**
+     * CSS class for the icon.
+     */
+    iconclass?: string;
+    /**
+     * Whether to enable autocomplete.
+     */
+    autocomplete?: boolean;
+    /**
+     * Whether the filter is collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the filter is expanded by default.
+     */
+    expanded?: boolean;
+    /**
+     * Data source for the form.
+     */
+    formdatasource?: string;
+    /**
+     * Number of fields.
+     */
+    numberoffields?: number;
+    /**
+     * Page size for results.
+     */
+    pagesize?: number;
+    /**
+     * Whether to automatically update results.
+     */
+    autoupdate?: boolean;
+    /**
+     * Whether to enable empty filter.
+     */
+    enableemptyfilter?: string;
+    /**
+     * The data source for the filter.
+     */
+    dataSource?: string;
+    /**
+     * Order results by field.
+     */
+    orderBy?: string;
+    /**
+     * Success callback.
+     */
+    onSuccess?: (data: any) => void;
+    /**
+     * Before service call callback.
+     */
+    onBeforeservicecall?: (filterFields: any) => any;
+    /**
+     * Toggle message function.
+     */
+    toggleMessage?: (state: boolean, msg: any, type: string, header: string) => void;
+    /**
+     * Result callback.
+     */
+    onResultCb?: (err: any, success: boolean) => void;
+}
+/**
+ * Combined props for the WmLiveFilter component, including base WaveMaker props.
+ */
+export type WmLiveFilterProps = Prettify<LiveFilterProps & BaseProps>;
+export declare const DEFAULT_PROPS: Partial<WmLiveFilterProps>;

package/components/data/live-filter/props.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = void 0;
+/**
+ * Combined props for the WmLiveFilter component, including base WaveMaker props.
+ */
+
+var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  iconclass: "wi wi-filter-list",
+  pagesize: 20,
+  autoupdate: true,
+  enableemptyfilter: " "
+};

package/components/data/live-form/index.d.ts

@@ -0,0 +1,15 @@
+import { WmLiveFormProps } from "./props";
+declare const WmLiveForm: {
+    (prop: WmLiveFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmLiveForm component is used to create and manage forms with live data.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-form--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-form--docs)
+ *
+ * @param props - {@link WmLiveFormProps}
+ */
+export default WmLiveForm;

package/components/data/live-form/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _props = require("./props");
+var _form = _interopRequireDefault(require("../form"));
+var _fieldDataUtils = require("../utils/field-data-utils");
+var _replace = _interopRequireDefault(require("lodash-es/replace"));
+var _utils = require("../utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmLiveForm = function WmLiveForm(prop) {
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), prop);
+  var dynamicFieldsRef = (0, _react.useRef)([]);
+  var isDataSourceUpdatedRef = (0, _react.useRef)(false);
+  // FIX: Store formFields ref to get current field references at API response time
+  // This prevents stale closure issue where old component's updateFormWidgetDataset is called
+  var formFieldsRef = (0, _react.useRef)([]);
+  var dataSource = props.datasource;
+  function formSubmit(formData, success, error, operation) {
+    var primaryKeys = dataSource.execute("getPrimaryKey");
+    var operationType = operation !== null && operation !== void 0 ? operation : (0, _utils.findOperationType)(formData, primaryKeys);
+    if (dynamicFieldsRef.current.length > 0) {
+      dynamicFieldsRef.current.forEach(function (field) {
+        var item = field.formKey;
+        formData[item] = field.dataset[formData[item] - 1];
+      });
+    }
+    var successWithOperationType = function successWithOperationType(res) {
+      var payload = res && (0, _typeof2["default"])(res) === "object" ? _objectSpread(_objectSpread({}, res), {}, {
+        operationType: operationType
+      }) : {
+        operationType: operationType
+      };
+      if (typeof success === "function") {
+        success(payload);
+      }
+      return payload;
+    };
+    if (operationType === "delete") {
+      formData = _objectSpread(_objectSpread({}, formData), {}, {
+        row: formData
+      });
+    } else {
+      formData = {
+        inputFields: formData
+      };
+    }
+    if (props.onBeforeservicecall) {
+      var event = new Event("submit");
+      props.onBeforeservicecall(event, operationType, formData, dataSource.options);
+    }
+    props.formSubmit(formData, operationType, successWithOperationType, error);
+  }
+  function getRelatedTableData(formField) {
+    // Capture formKey to look up current field at response time (not the captured formField object)
+    var formKey = formField.formKey;
+    dataSource && dataSource.execute("getRelatedTableData", {
+      relatedField: formKey,
+      pagesize: formField.limit,
+      orderBy: formField.orderby ? (0, _replace["default"])(formField.orderby, /:/g, " ") : "",
+      filterFields: {},
+      filterExpr: formField.filterexpressions ? formField.filterexpressions : {}
+    }).then(function (response) {
+      var primaryKeys = dataSource.execute("getRelatedTablePrimaryKeys", formKey);
+      var displayField = primaryKeys.length < 0 ? undefined : primaryKeys[0];
+
+      // FIX: Look up the CURRENT field from formFieldsRef at response time
+      // This ensures we call the current component's updateFormWidgetDataset, not a stale one
+      var currentField = formFieldsRef.current.find(function (f) {
+        return f.formKey === formKey;
+      });
+
+      // Check if updateFormWidgetDataset is a function before calling it
+      if (currentField && typeof currentField.updateFormWidgetDataset === "function") {
+        currentField.updateFormWidgetDataset(response, displayField);
+      }
+      dynamicFieldsRef.current.push({
+        formKey: formKey,
+        dataset: response.data,
+        displayField: displayField
+      });
+    });
+  }
+  var onDataSourceChange = (0, _react.useCallback)(function (formFields) {
+    // FIX: Always update formFieldsRef with latest fields so async callbacks get current references
+    formFieldsRef.current = formFields;
+    if (isDataSourceUpdatedRef.current) return;
+    formFields.forEach(function (field) {
+      // FIX: Ignore field.isDataSetBound since isDataSourceUpdatedRef already guards against re-processing.
+      // The field's isDataSetBound state persists across dialog close/reopen, causing the bug.
+      // isDataSourceUpdatedRef is the correct source of truth for whether this LiveForm session has processed fields.
+      if ((0, _fieldDataUtils.isDataSetWidget)(field.widget) && field["isRelated"]) {
+        getRelatedTableData(field);
+        // Check if setIsDataSetBound is a function before calling it
+        if (typeof field.setIsDataSetBound === "function") {
+          field.setIsDataSetBound(true);
+        }
+      }
+    });
+    if (formFields.length > 0) {
+      isDataSourceUpdatedRef.current = true;
+    }
+  }, []);
+
+  // Destroy widget when component unmounts
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (props.destroy) {
+        props.destroy([props.name]);
+      }
+      isDataSourceUpdatedRef.current = false;
+    };
+  }, [props.destroy, props.name]);
+  return __jsx(_form["default"], (0, _extends2["default"])({}, props, {
+    formSubmit: formSubmit,
+    onDataSourceChange: onDataSourceChange,
+    widgettype: "live-form",
+    key: "live-form-".concat(props.name)
+  }), props.children);
+};
+WmLiveForm.displayName = "WmLiveForm";
+
+/**
+ * The WmLiveForm component is used to create and manage forms with live data.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-form--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-form--docs)
+ *
+ * @param props - {@link WmLiveFormProps}
+ */
+var _default = exports["default"] = WmLiveForm;

package/components/data/live-form/props.d.ts

@@ -0,0 +1,50 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { FormProps } from "@wavemaker-ai/react-runtime/components/data/form/props";
+export interface LiveFormProps extends FormProps {
+    /**
+     * Type of validation to use for the form.
+     * @default "default"
+     */
+    validationtype?: string;
+    /**
+     * Layout type for the form.
+     * @default "inline"
+     */
+    formlayout?: string;
+    /**
+     * Message to show when a record is successfully inserted.
+     * @default "Record added successfully"
+     */
+    insertmessage?: string;
+    /**
+     * Message to show when a record is successfully updated.
+     * @default "Record updated successfully"
+     */
+    updatemessage?: string;
+    /**
+     * Message to show when a record is successfully deleted.
+     * @default "Record deleted successfully"
+     */
+    deletemessage?: string;
+    /**
+     * Data source for the live form.
+     */
+    datasource?: any;
+    /**
+     * Function to handle form submission.
+     */
+    formSubmit?: any;
+    /**
+     * Function to destroy the widget.
+     */
+    destroy?: (names: string[]) => void;
+    /**
+     * Before service call callback.
+     */
+    onBeforeservicecall?: (event: Event, operationType: string, formData: any, options: any) => void;
+}
+/**
+ * Combined props for the WmLiveForm component, including base WaveMaker props.
+ */
+export type WmLiveFormProps = Prettify<LiveFormProps & BaseProps>;
+export declare const DEFAULT_PROPS: Partial<WmLiveFormProps>;

package/components/data/live-form/props.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = void 0;
+/**
+ * Combined props for the WmLiveForm component, including base WaveMaker props.
+ */
+
+var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  validationtype: "default",
+  defaultmode: "view",
+  formlayout: "inline",
+  insertmessage: "Record added successfully",
+  updatemessage: "Record updated successfully",
+  deletemessage: "Record deleted successfully",
+  errormessage: "An error occured. Please try again!",
+  messagelayout: "Toaster"
+};

package/components/data/pagination/components/BasicPagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { BasicPaginationProps } from "./props";
+export declare const BasicPagination: React.FC<BasicPaginationProps>;