@wavemaker/react-runtime 11.14.1-rc.241 → 11.14.2-1.6423

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

@@ -19,7 +19,6 @@ var _set = _interopRequireDefault(require("lodash-es/set"));
 var _props = require("./props");
 var _utils = require("./utils");
 var _formContext = require("../form-context");
-var _utils2 = require("../../utils");
 var _lodashEs = require("lodash-es");
 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;
@@ -28,10 +27,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var DEFAULT_CLASS = "panel app-panel app-form";
 var BaseForm = function BaseForm(WrappedComponent) {
   var ControlledForm = function ControlledForm(FormProps) {
+    var _props$listener4;
     // setting up default props for form
     var props = _objectSpread(_objectSpread({}, _props.defaultProps), FormProps);
     var isInsideWizard = props.isInsideWizard || false;
-    var primaryKeyRef = (0, _react.useRef)([]);
     var formRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)({}),
       formfields = _useState[0],
@@ -70,6 +69,7 @@ var BaseForm = function BaseForm(WrappedComponent) {
       reset = _useForm.reset,
       watch = _useForm.watch,
       trigger = _useForm.trigger,
+      getValues = _useForm.getValues,
       clearErrors = _useForm.clearErrors;
 
     // update the form data when the formdata prop changes
@@ -165,14 +165,13 @@ var BaseForm = function BaseForm(WrappedComponent) {
     }, [trigger]);
     var handleFormSubmit = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data, e, operation) {
-        var isValid, _props$listener2, result, FormData, _props$listener3, operationType;
+        var isValid, _props$listener2, result, FormData, _props$listener3;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if (!e) {
                 e = new Event("submit");
               }
-
               // check form is valid or not
               _context.next = 3;
               return validateFieldsOnSubmit();
@@ -216,17 +215,22 @@ var BaseForm = function BaseForm(WrappedComponent) {
                 }
 
                 // get the operation type
-                operationType = props.widgettype === "live-form" && !operation ? (0, _utils2.findOperationType)(FormData, primaryKeyRef.current) : operation;
                 props.formSubmit(FormData, function (data) {
-                  if (props.widgettype === "live-form" && operationType === "insert") {
+                  if (props.widgettype === "live-form" && data.operationType === "insert") {
                     reset(data);
                   }
                   onResultCb((0, _get["default"])(data, "params"), "success");
+                  var hasCustomOnSuccess = props.onSuccess !== _props.defaultProps.onSuccess;
+                  if (!hasCustomOnSuccess && props.widgettype === "live-form") {
+                    var successMsg = data.operationType === "insert" && props.insertmessage || data.operationType === "update" && props.updatemessage || data.operationType === "delete" && props.deletemessage || props.postmessage;
+                    toggleMessage(true, successMsg, "success");
+                    return;
+                  }
                   toggleMessage(true, props.postmessage, "success");
                 }, function (error) {
                   toggleMessage(true, props.errormessage || error || error.message, "error");
                   onResultCb(error, "");
-                }, operationType);
+                });
               }
               if (props !== null && props !== void 0 && props.onSubmit) {
                 props.onSubmit(e, props, FormData);
@@ -375,7 +379,10 @@ var BaseForm = function BaseForm(WrappedComponent) {
       cancel: cancel,
       "new": create,
       edit: edit,
-      setShowViewMode: setShowViewMode
+      setShowViewMode: setShowViewMode,
+      dataoutput: getValues(),
+      save: submit,
+      reset: reset
     });
     var conditionalProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.target && {
       target: props.target
@@ -419,13 +426,23 @@ var BaseForm = function BaseForm(WrappedComponent) {
     function cancel() {
       setShowViewMode(true);
     }
+    var fields = (0, _get["default"])((_props$listener4 = props.listener) === null || _props$listener4 === void 0 ? void 0 : _props$listener4.Widgets[props.name], "formfields", {});
+    var FormFields = (0, _react.useMemo)(function () {
+      var newFields = [];
+      Object.keys(fields).forEach(function (key) {
+        if (!key.includes("formWidget") && fields[key]) {
+          newFields.push(fields[key]);
+        }
+      });
+      return newFields;
+    }, [fields]);
 
     // Call onDataSourceChange when formfields change
     (0, _react.useEffect)(function () {
-      if (props.onDataSourceChange && Object.keys(formfields).length > 0) {
-        props.onDataSourceChange(formfields);
+      if (props.onDataSourceChange && FormFields.length > 0) {
+        props.onDataSourceChange(FormFields);
       }
-    }, [formfields, props.onDataSourceChange]);
+    }, [FormFields, props.onDataSourceChange]);
 
     // Determine form classes based on wizard context
     var formClassName = (0, _react.useMemo)(function () {
@@ -434,6 +451,29 @@ var BaseForm = function BaseForm(WrappedComponent) {
       }
       return (0, _clsx["default"])(DEFAULT_CLASS, props.className);
     }, [isInsideWizard, props.className]);
+
+    // Notify parent containers (wizard) about validity changes
+    (0, _react.useEffect)(function () {
+      var el = formRef.current;
+      if (!el) return;
+      var emit = function emit() {
+        el.dispatchEvent(new CustomEvent("wm:form-validity", {
+          bubbles: true,
+          detail: {
+            isValid: isValid
+          }
+        }));
+      };
+      emit();
+      var unsubscribe = watch(function () {
+        return emit();
+      });
+      return function () {
+        if (typeof unsubscribe === "function") {
+          unsubscribe();
+        }
+      };
+    }, [watch, isValid]);
     return __jsx("form", (0, _extends2["default"])({
       name: props.name,
       defaultmode: props.defaultmode,

package/components/data/form/form-controller/withFormController.js

@@ -14,7 +14,6 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _reactHookForm = require("react-hook-form");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _validationContrustor = require("@wavemaker/react-runtime/components/data/form/form-controller/validation-contrustor");
 var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 var _formContext = require("@wavemaker/react-runtime/components/data/form/form-context");
@@ -201,7 +200,7 @@ var withFormController = function withFormController(WrappedComponent) {
         }
 
         // If the incoming value is an object and we have a datafield, extract the value
-        if (valueToSet && (0, _typeof2["default"])(valueToSet) === "object" && !Array.isArray(valueToSet) && props.datafield) {
+        if (valueToSet && (0, _typeof2["default"])(valueToSet) === "object" && !Array.isArray(valueToSet) && props.datafield && props.datafield !== "All Fields") {
           valueToSet = valueToSet[props.datafield];
         }
         if (type === "number") {
@@ -267,9 +266,9 @@ var withFormController = function withFormController(WrappedComponent) {
             hidden: contextFormRef === null || contextFormRef === void 0 ? void 0 : contextFormRef.isViewMode
           })
         });
-        return __jsx(_Box["default"], {
-          sx: {
-            width: "inherit"
+        return __jsx("div", {
+          style: {
+            width: "100%"
           }
         }, __jsx(WrappedComponent, (0, _extends2["default"])({}, controlledProps, {
           dataset: props.dataset,
@@ -290,8 +289,7 @@ var withFormController = function withFormController(WrappedComponent) {
             }
           }
           return value;
-        }()), hint && !shouldShowErrorMessage(validationType, fieldState, touched) && __jsx(_Box["default"], {
-          component: "p",
+        }()), hint && !shouldShowErrorMessage(validationType, fieldState, touched) && __jsx("p", {
           className: "help-block",
           "aria-hidden": "true",
           role: "alert",
@@ -300,13 +298,12 @@ var withFormController = function withFormController(WrappedComponent) {
             textAlign: "start",
             width: "100%"
           }
-        }, hint), shouldShowErrorMessage(validationType, fieldState, touched) && __jsx(_Box["default"], {
-          component: "p",
+        }, hint), shouldShowErrorMessage(validationType, fieldState, touched) && __jsx("p", {
           className: "help-block text-danger",
           "aria-hidden": "false",
           role: "alert",
           "aria-live": "assertive",
-          sx: {
+          style: {
             textAlign: "start",
             width: "100%"
           }

package/components/data/list/components/GroupedListItems.js

@@ -50,6 +50,10 @@ var GroupedListItems = exports.GroupedListItems = function GroupedListItems(_ref
   return __jsx(_react["default"].Fragment, null, groupsToRender.map(function (groupObj) {
     var isGroupCollapsed = groupCollapsed[groupObj.key] || false;
     var displayCount = groupObj.originalDataLength || groupObj.data.length;
+    // Build itemclass for grouped items: if function, wrap to append group class
+    var groupedItemClass = typeof itemclass === "function" ? function (it) {
+      return (0, _clsx["default"])(itemclass(it), "group-list-item");
+    } : (0, _clsx["default"])(itemclass, "group-list-item");
     return __jsx("li", {
       key: "group_".concat(groupObj.key),
       className: "app-list-item-group clearfix"
@@ -80,7 +84,7 @@ var GroupedListItems = exports.GroupedListItems = function GroupedListItems(_ref
         isFirst: isFirst,
         isLast: isLast,
         disableitem: disableitem,
-        itemclass: (0, _clsx["default"])(itemclass, "group-list-item"),
+        itemclass: groupedItemClass,
         itemsPerRowClass: itemsPerRowClass,
         name: "".concat(name, "_group_").concat(groupObj.key),
         tabIndex: tabIndex,

package/components/data/list/components/ListItemWithTemplate.js

@@ -36,11 +36,14 @@ var ListItemWithTemplate = exports.ListItemWithTemplate = function ListItemWithT
     onItemMouseEnter = _ref.onItemMouseEnter,
     onItemMouseLeave = _ref.onItemMouseLeave;
   var templateContent = renderItem ? renderItem(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
+
+  // Resolve item class: support string or function callback
+  var resolvedItemClass = typeof itemclass === "function" ? itemclass(item) : itemclass;
   return __jsx(_ListItem.WmListItem, {
     key: itemId,
     item: item,
     disableItem: disableitem,
-    itemClass: (0, _clsx["default"])(itemclass, itemsPerRowClass),
+    itemClass: (0, _clsx["default"])(resolvedItemClass, itemsPerRowClass),
     index: globalIndex !== null && globalIndex !== void 0 ? globalIndex : index,
     isFirst: isFirst,
     isLast: isLast,

package/components/data/list/hooks/useListEffects.js

@@ -52,7 +52,8 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
   var _useState = (0, _react.useState)(paginationState.currentPageSize),
     lastPageSize = _useState[0],
     setLastPageSize = _useState[1];
-
+  var rafRef1 = (0, _react.useRef)(null);
+  var rafRef2 = (0, _react.useRef)(null);
   // Effect 1: Accumulate data for On-Demand navigation
   (0, _react.useEffect)(function () {
     if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && safeDataset.length > 0) {
@@ -105,11 +106,19 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
         getIndex: widgetMethods.getIndex,
         clear: widgetMethods.clear,
         getWidgets: widgetMethods.getWidgets,
-        showNavigation: showNavigation,
+        showNavigation: showNavigation
+      });
+    }
+  }, []);
+
+  // Effect 3: Expose methods through widget instance
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
         selecteditem: listState.selectedItems[0]
       });
     }
-  }, [widgetMethods.selectItem, widgetMethods.deselectItem, widgetMethods.getItem, widgetMethods.getIndex, widgetMethods.clear, widgetMethods.getWidgets, listState.selectedItems, listState.activeItems]);
+  }, [listState.selectedItems]);
 
   // Effect 3b: Update selected item widgets for state restoration (not selectfirstitem)
   var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
@@ -124,18 +133,22 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
     hasInitialWidgetUpdateRun.current = true;
 
     // Use double RAF to ensure DOM is fully updated
-    requestAnimationFrame(function () {
-      (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+    rafRef1.current = requestAnimationFrame(function () {
+      // getSelectedItemWidgets(null, listener, name);
+      rafRef2.current = requestAnimationFrame(function () {
+        (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+      });
     });
+    return function () {
+      if (rafRef1.current) {
+        cancelAnimationFrame(rafRef1.current);
+      }
+      if (rafRef2.current) {
+        cancelAnimationFrame(rafRef2.current);
+      }
+    };
   }, [name, listState.selectedItems.length, initialRender, selectfirstitem]);
 
-  // Effect 4: Handle widgetInstance.selecteditem
-  (0, _react.useEffect)(function () {
-    if ((widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.selecteditem) != undefined) {
-      widgetMethods.selectItem(widgetInstance.selecteditem);
-    }
-  }, [widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.selecteditem]);
-
   // Effect 5: Handle selectfirstitem with onSelect
   (0, _react.useEffect)(function () {
     if (selectfirstitem && widgetInstance && onSelect && listState.selectedItems.length > 0) {
@@ -271,8 +284,15 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
       // Merge current state with existing state
       var stateToSave = stateManager.mergeWithExisting(stateManager.currentState, existingState);
 
-      // Save the state
-      (0, _listHelpers.saveListState)(name, statehandler, stateToSave);
+      // Compare state content, not object references
+      var existingStateStr = JSON.stringify(existingState);
+      var stateToSaveStr = JSON.stringify(stateToSave);
+      var statesAreEqual = existingStateStr === stateToSaveStr;
+
+      // Save the state only if content has actually changed
+      if (!statesAreEqual) {
+        (0, _listHelpers.saveListState)(name, statehandler, stateToSave);
+      }
     }
   }, [listState.selectedItems, paginationState.currentPage, items, name, navigation, hasBeenReordered, statehandler]);
   (0, _react.useEffect)(function () {

package/components/data/list/hooks/useListEventHandlers.js

@@ -54,6 +54,10 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
     setOnDemandCurrentPage = props.setOnDemandCurrentPage,
     listener = props.listener,
     name = props.name;
+  var selectedItemsRef = (0, _react.useRef)(selectedItems);
+  (0, _react.useEffect)(function () {
+    selectedItemsRef.current = selectedItems;
+  }, [selectedItems]);
 
   // Helper function to call onSelect and mark as user-initiated
   var callOnSelect = (0, _react.useCallback)(function (selectedItem) {
@@ -61,6 +65,11 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       if (userInitiatedSelectionRef) {
         userInitiatedSelectionRef.current = true;
       }
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(name, {
+          selecteditem: multiselect ? selectedItemsRef.current : selectedItem
+        });
+      }
       onSelect(widgetInstance, selectedItem);
     }
   }, [onSelect, widgetInstance, userInitiatedSelectionRef]);
@@ -87,6 +96,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
             return;
           }
           var rangeItems = (0, _lodashEs.slice)(items, start, end + 1);
+          selectedItemsRef.current = rangeItems;
           setSelectedItems(rangeItems);
           setActiveItems(new Set(rangeItems));
           // Only call onSelect if this is a new selection (not already active)
@@ -108,12 +118,14 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
           var newSelectedItems = (0, _lodashEs.filter)(selectedItems, function (selectedItem) {
             return selectedItem !== item;
           });
+          selectedItemsRef.current = newSelectedItems;
           setSelectedItems(newSelectedItems);
           var newActiveItems = new Set(activeItems);
           newActiveItems["delete"](item);
           setActiveItems(newActiveItems);
         } else {
           var _newSelectedItems = [].concat((0, _toConsumableArray2["default"])(selectedItems), [item]);
+          selectedItemsRef.current = _newSelectedItems;
           setSelectedItems(_newSelectedItems);
           var _newActiveItems = new Set(activeItems);
           _newActiveItems.add(item);
@@ -128,7 +140,9 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
         // Normal click without Ctrl - select item without deselecting if already selected
         if (!isItemSelected) {
           // If clicking an unselected item, select only this item
-          setSelectedItems([item]);
+          var _newSelectedItems2 = [item];
+          selectedItemsRef.current = _newSelectedItems2;
+          setSelectedItems(_newSelectedItems2);
           setActiveItems(new Set([item]));
           setFirstSelectedItem(item);
           // Only call onSelect if this is a new selection (not already active)
@@ -142,7 +156,9 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       // Single select mode - only select, don't deselect on normal click
       if (!isItemSelected) {
         // If clicking an unselected item, select it
-        setSelectedItems([item]);
+        var _newSelectedItems3 = [item];
+        selectedItemsRef.current = _newSelectedItems3;
+        setSelectedItems(_newSelectedItems3);
         setActiveItems(new Set([item]));
         setFirstSelectedItem(item);
         // Only call onSelect if this is a new selection (not already active)

package/components/data/list/hooks/useListState.js

@@ -42,6 +42,8 @@ var useListState = exports.useListState = function useListState(dataset, pagesiz
     isLoadingMore = _useState8[0],
     setIsLoadingMore = _useState8[1];
   var isInitialMount = (0, _react.useRef)(true);
+  var rafRef1 = (0, _react.useRef)(null);
+  var rafRef2 = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     // Ensure dataset is a valid array
     var validDataset = Array.isArray(dataset) ? dataset : [];
@@ -71,12 +73,23 @@ var useListState = exports.useListState = function useListState(dataset, pagesiz
 
         // Update selected item widgets after DOM is painted
         if (listener !== null && listener !== void 0 && listener.onChange && name) {
-          requestAnimationFrame(function () {
-            (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+          rafRef1.current = requestAnimationFrame(function () {
+            // getSelectedItemWidgets(null, listener, name);
+            rafRef2.current = requestAnimationFrame(function () {
+              (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+            });
           });
         }
       }
     }
+    return function () {
+      if (rafRef1.current) {
+        cancelAnimationFrame(rafRef1.current);
+      }
+      if (rafRef2.current) {
+        cancelAnimationFrame(rafRef2.current);
+      }
+    };
   }, [dataset, selectfirstitem, name]);
   return {
     selectedItems: selectedItems,

package/components/data/list/index.js

@@ -495,6 +495,7 @@ var WmList = function WmList(props) {
     }),
     component: "div",
     "data-name": name,
+    name: name,
     "data-navigation": navigation
   }, __jsx(_components2.ListHeader, {
     title: title,

package/components/data/list/utils/list-helpers.js

@@ -164,10 +164,8 @@ var getSelectedItemWidgets = exports.getSelectedItemWidgets = function getSelect
     return result;
   }, {});
   if (listener) {
-    setTimeout(function () {
-      listener.onChange(name, {
-        selectedItemWidgets: currentItemWidgets
-      });
-    }, 0);
+    listener.onChange(name, {
+      selectedItemWidgets: currentItemWidgets
+    });
   }
 };

package/components/data/list/utils/list-widget-methods.js

@@ -49,7 +49,7 @@ var useListWidgetMethods = exports.useListWidgetMethods = function useListWidget
         onSelect(widgetInstance, item);
       }
     }
-  }, [listState.activeItems]);
+  }, [listState.activeItems, getItemByIndexOrModel]);
   var deselectItem = (0, _react.useCallback)(function (val) {
     var item = getItemByIndexOrModel(val);
     if (!item) {

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

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _lodashEs = require("lodash-es");
 var _util = require("../../../core/util");
 var _form = _interopRequireDefault(require("../form"));
-var _withBaseWrapper = _interopRequireDefault(require("../../../higherOrder/withBaseWrapper"));
 var _props = require("./props");
 var _types = require("../types");
 var _utils = require("../utils");
@@ -238,10 +237,12 @@ var WmLiveFilter = function WmLiveFilter(prop) {
     }));
     return _Livefilter.apply(this, arguments);
   }
-  function onDataSourceChange() {
+  function onDataSourceChange(formFields) {
     if (isDataSourceUpdatedRef.current) return;
-    var fields = (0, _lodashEs.get)(props.listener.Widgets[props.name], "formfields", []);
-    var formFields = (0, _lodashEs.isArray)(fields) ? fields : Object.values(fields || {});
+    // 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;
     }
@@ -276,4 +277,4 @@ var WmLiveFilter = function WmLiveFilter(prop) {
   );
 };
 WmLiveFilter.displayName = "WmLiveFilter";
-var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmLiveFilter);
+var _default = exports["default"] = WmLiveFilter;

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

@@ -1,44 +1,56 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+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 _get = _interopRequireDefault(require("lodash-es/get"));
-var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
 var _fieldDataUtils = require("../utils/field-data-utils");
 var _replace = _interopRequireDefault(require("lodash-es/replace"));
-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" != _typeof(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 _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$listener;
   var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), prop);
   var dynamicFieldsRef = (0, _react.useRef)([]);
   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 formSubmit(formData, success, error, operation) {
+  var dataSource = props.datasource;
+  function formSubmit(formData, success, error) {
+    var primaryKeys = dataSource.execute("getPrimaryKey");
+    var operationType = (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];
       });
     }
-    if (operation === "delete") {
-      props.formSubmit(formData, operation, success, error);
+    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") {
+      props.formSubmit(formData, operationType, successWithOperationType, error);
       return;
     }
     props.formSubmit({
       inputFields: formData
-    }, operation, success, error);
+    }, operationType, successWithOperationType, error);
   }
   function getRelatedTableData(formField) {
     dataSource && dataSource.execute("getRelatedTableData", {
@@ -62,11 +74,9 @@ var WmLiveForm = function WmLiveForm(prop) {
       });
     });
   }
-  function onDataSourceChange() {
+  function onDataSourceChange(formFields) {
     if (isDataSourceUpdatedRef.current) return;
-    var fields = (0, _get["default"])(props.listener.Widgets[props.name], "formfields", []);
-    var formFields = (0, _isArray["default"])(fields) ? fields : Object.values(fields || {});
-    if ((0, _get["default"])(formFields, "length")) {
+    if (formFields.length > 0) {
       isDataSourceUpdatedRef.current = true;
     }
     formFields.forEach(function (field) {

package/components/data/table/components/TableBody.js

@@ -254,26 +254,10 @@ var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
     className: "app-grid-content ".concat(_utils.TABLE_CSS_CLASSES.gridBody)
   }, formposition === "top" && renderAddNewRow(), renderTableContent(), formposition === "bottom" && renderAddNewRow());
 };
-var TableBodyComponent = exports.TableBodyComponent = /*#__PURE__*/(0, _react.memo)(TableBodyComponentBase, function (prevProps, nextProps) {
-  // Since table key forces rebuilds on pagination, we can use simpler memoization
-  // Just prevent re-renders from function reference changes
-
-  // Allow re-render for these critical changes
-  if (prevProps.isLoading !== nextProps.isLoading) return false;
-  if (prevProps.rowClass !== nextProps.rowClass) return false;
-  if (prevProps.formposition !== nextProps.formposition) return false;
-  if (prevProps.nodatamessage !== nextProps.nodatamessage) return false;
-
-  // Check expandedRows
-  if (prevProps.expandedRows !== nextProps.expandedRows) {
-    var _prevProps$expandedRo, _nextProps$expandedRo;
-    var prevSize = ((_prevProps$expandedRo = prevProps.expandedRows) === null || _prevProps$expandedRo === void 0 ? void 0 : _prevProps$expandedRo.size) || 0;
-    var nextSize = ((_nextProps$expandedRo = nextProps.expandedRows) === null || _nextProps$expandedRo === void 0 ? void 0 : _nextProps$expandedRo.size) || 0;
-    if (prevSize !== nextSize) return false;
-  }
-
-  // Block re-render only for function reference changes (prevents infinite loops)
-  // Table key handles pagination rebuilds, so we don't need complex row comparisons
-  return true; // Prevent re-render for function reference changes only
+var TableBodyComponent = exports.TableBodyComponent = /*#__PURE__*/(0, _react.memo)(TableBodyComponentBase, function (prev, current) {
+  var keys = ["isLoading", "rowClass", "formposition", "nodatamessage", "loadingdatamsg", "rowsVersion", "tableData", "ColClassSignature"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
 });
 TableBodyComponent.displayName = "TableBodyComponent";

package/components/data/table/components/TableHeader.js

@@ -86,6 +86,7 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
       key: headerGroup.id,
       className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(rowClass)
     }, headerGroup.headers.map(function (header, headerIndex) {
+      var _header$column$column;
       var cells = [];
 
       // Insert expansion header before this cell if it's at the calculated position
@@ -104,7 +105,7 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
       // Add the regular header cell
       cells.push(__jsx(_material.TableCell, {
         key: header.id,
-        className: _utils.TABLE_CSS_CLASSES.headerCell,
+        className: "".concat(_utils.TABLE_CSS_CLASSES.headerCell, " ").concat(((_header$column$column = header.column.columnDef) === null || _header$column$column === void 0 || (_header$column$column = _header$column$column.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.className) || "").trim(),
         style: {
           cursor: enablesort && header.column.getCanSort() ? "pointer" : "default",
           userSelect: "none",
@@ -147,6 +148,9 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
   // Compare props including the sorting state
   var prevSorting = prevProps.sorting || [];
   var nextSorting = nextProps.sorting || [];
+  if (prevProps.ColClassSignature !== nextProps.ColClassSignature) {
+    return false;
+  }
 
   // Deep compare sorting arrays
   var sortingEqual = prevSorting.length === nextSorting.length && prevSorting.every(function (prevSort, index) {