@wavemaker/react-runtime 11.14.2-rc.6311 → 11.14.4-rc.647538

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

@@ -14,6 +14,7 @@ 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");
@@ -200,7 +201,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 && props.datafield !== "All Fields") {
+        if (valueToSet && (0, _typeof2["default"])(valueToSet) === "object" && !Array.isArray(valueToSet) && props.datafield) {
           valueToSet = valueToSet[props.datafield];
         }
         if (type === "number") {
@@ -266,9 +267,9 @@ var withFormController = function withFormController(WrappedComponent) {
             hidden: contextFormRef === null || contextFormRef === void 0 ? void 0 : contextFormRef.isViewMode
           })
         });
-        return __jsx("div", {
-          style: {
-            width: "100%"
+        return __jsx(_Box["default"], {
+          sx: {
+            width: "inherit"
           }
         }, __jsx(WrappedComponent, (0, _extends2["default"])({}, controlledProps, {
           dataset: props.dataset,
@@ -289,7 +290,8 @@ var withFormController = function withFormController(WrappedComponent) {
             }
           }
           return value;
-        }()), hint && !shouldShowErrorMessage(validationType, fieldState, touched) && __jsx("p", {
+        }()), hint && !shouldShowErrorMessage(validationType, fieldState, touched) && __jsx(_Box["default"], {
+          component: "p",
           className: "help-block",
           "aria-hidden": "true",
           role: "alert",
@@ -298,12 +300,13 @@ var withFormController = function withFormController(WrappedComponent) {
             textAlign: "start",
             width: "100%"
           }
-        }, hint), shouldShowErrorMessage(validationType, fieldState, touched) && __jsx("p", {
+        }, hint), shouldShowErrorMessage(validationType, fieldState, touched) && __jsx(_Box["default"], {
+          component: "p",
           className: "help-block text-danger",
           "aria-hidden": "false",
           role: "alert",
           "aria-live": "assertive",
-          style: {
+          sx: {
             textAlign: "start",
             width: "100%"
           }

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

@@ -50,10 +50,6 @@ 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"
@@ -84,7 +80,7 @@ var GroupedListItems = exports.GroupedListItems = function GroupedListItems(_ref
         isFirst: isFirst,
         isLast: isLast,
         disableitem: disableitem,
-        itemclass: groupedItemClass,
+        itemclass: (0, _clsx["default"])(itemclass, "group-list-item"),
         itemsPerRowClass: itemsPerRowClass,
         name: "".concat(name, "_group_").concat(groupObj.key),
         tabIndex: tabIndex,

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

@@ -36,14 +36,11 @@ 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"])(resolvedItemClass, itemsPerRowClass),
+    itemClass: (0, _clsx["default"])(itemclass, itemsPerRowClass),
     index: globalIndex !== null && globalIndex !== void 0 ? globalIndex : index,
     isFirst: isFirst,
     isLast: isLast,

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

@@ -52,8 +52,7 @@ 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) {
@@ -106,19 +105,11 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
         getIndex: widgetMethods.getIndex,
         clear: widgetMethods.clear,
         getWidgets: widgetMethods.getWidgets,
-        showNavigation: showNavigation
-      });
-    }
-  }, []);
-
-  // Effect 3: Expose methods through widget instance
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(name, {
+        showNavigation: showNavigation,
         selecteditem: listState.selectedItems[0]
       });
     }
-  }, [listState.selectedItems]);
+  }, [widgetMethods.selectItem, widgetMethods.deselectItem, widgetMethods.getItem, widgetMethods.getIndex, widgetMethods.clear, widgetMethods.getWidgets, listState.selectedItems, listState.activeItems]);
 
   // Effect 3b: Update selected item widgets for state restoration (not selectfirstitem)
   var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
@@ -133,22 +124,18 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
     hasInitialWidgetUpdateRun.current = true;
 
     // Use double RAF to ensure DOM is fully updated
-    rafRef1.current = requestAnimationFrame(function () {
-      // getSelectedItemWidgets(null, listener, name);
-      rafRef2.current = requestAnimationFrame(function () {
-        (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
-      });
+    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) {
@@ -284,15 +271,8 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
       // Merge current state with existing state
       var stateToSave = stateManager.mergeWithExisting(stateManager.currentState, existingState);
 
-      // 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);
-      }
+      // Save the state
+      (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,10 +54,6 @@ 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) {
@@ -65,11 +61,6 @@ 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]);
@@ -96,7 +87,6 @@ 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)
@@ -118,14 +108,12 @@ 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);
@@ -140,9 +128,7 @@ 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
-          var _newSelectedItems2 = [item];
-          selectedItemsRef.current = _newSelectedItems2;
-          setSelectedItems(_newSelectedItems2);
+          setSelectedItems([item]);
           setActiveItems(new Set([item]));
           setFirstSelectedItem(item);
           // Only call onSelect if this is a new selection (not already active)
@@ -156,9 +142,7 @@ 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
-        var _newSelectedItems3 = [item];
-        selectedItemsRef.current = _newSelectedItems3;
-        setSelectedItems(_newSelectedItems3);
+        setSelectedItems([item]);
         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,8 +42,6 @@ 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 : [];
@@ -73,23 +71,12 @@ 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) {
-          rafRef1.current = requestAnimationFrame(function () {
-            // getSelectedItemWidgets(null, listener, name);
-            rafRef2.current = requestAnimationFrame(function () {
-              (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
-            });
+          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,7 +495,6 @@ 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,8 +164,10 @@ var getSelectedItemWidgets = exports.getSelectedItemWidgets = function getSelect
     return result;
   }, {});
   if (listener) {
-    listener.onChange(name, {
-      selectedItemWidgets: currentItemWidgets
-    });
+    setTimeout(function () {
+      listener.onChange(name, {
+        selectedItemWidgets: currentItemWidgets
+      });
+    }, 0);
   }
 };

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

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

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

@@ -15,6 +15,7 @@ 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");
@@ -237,12 +238,10 @@ var WmLiveFilter = function WmLiveFilter(prop) {
     }));
     return _Livefilter.apply(this, arguments);
   }
-  function onDataSourceChange(formFields) {
+  function onDataSourceChange() {
     if (isDataSourceUpdatedRef.current) return;
-    // const fields = get(props.listener.Widgets[props.name], "formfields", []);
-
-    // let formFields = isArray(fields) ? fields : Object.values(fields || {});
-
+    var fields = (0, _lodashEs.get)(props.listener.Widgets[props.name], "formfields", []);
+    var formFields = (0, _lodashEs.isArray)(fields) ? fields : Object.values(fields || {});
     if ((0, _lodashEs.get)(formFields, "length")) {
       isDataSourceUpdatedRef.current = true;
     }
@@ -277,4 +276,4 @@ var WmLiveFilter = function WmLiveFilter(prop) {
   );
 };
 WmLiveFilter.displayName = "WmLiveFilter";
-var _default = exports["default"] = WmLiveFilter;
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmLiveFilter);

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

@@ -1,56 +1,44 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
+var _typeof = 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"));
-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); }
+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 __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.datasource;
-  function formSubmit(formData, success, error) {
-    var primaryKeys = dataSource.execute("getPrimaryKey");
-    var operationType = (0, _utils.findOperationType)(formData, primaryKeys);
+  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) {
     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") {
-      props.formSubmit(formData, operationType, successWithOperationType, error);
+    if (operation === "delete") {
+      props.formSubmit(formData, operation, success, error);
       return;
     }
     props.formSubmit({
       inputFields: formData
-    }, operationType, successWithOperationType, error);
+    }, operation, success, error);
   }
   function getRelatedTableData(formField) {
     dataSource && dataSource.execute("getRelatedTableData", {
@@ -74,9 +62,11 @@ var WmLiveForm = function WmLiveForm(prop) {
       });
     });
   }
-  function onDataSourceChange(formFields) {
+  function onDataSourceChange() {
     if (isDataSourceUpdatedRef.current) return;
-    if (formFields.length > 0) {
+    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")) {
       isDataSourceUpdatedRef.current = true;
     }
     formFields.forEach(function (field) {

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

@@ -254,10 +254,26 @@ 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 (prev, current) {
-  var keys = ["isLoading", "rowClass", "formposition", "nodatamessage", "loadingdatamsg", "rowsVersion", "tableData", "ColClassSignature"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
+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
 });
 TableBodyComponent.displayName = "TableBodyComponent";

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

@@ -86,7 +86,6 @@ 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
@@ -105,7 +104,7 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
       // Add the regular header cell
       cells.push(__jsx(_material.TableCell, {
         key: header.id,
-        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(),
+        className: _utils.TABLE_CSS_CLASSES.headerCell,
         style: {
           cursor: enablesort && header.column.getCanSort() ? "pointer" : "default",
           userSelect: "none",
@@ -148,9 +147,6 @@ 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) {

package/components/data/table/index.js

@@ -550,18 +550,6 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     });
   }, [columns, columnOverrides, columnsVersion, editingRowId]);
 
-  // Compute  class signature from columns meta.className to trigger header and body re-render on class updates
-  var ColClassSignature = (0, _react.useMemo)(function () {
-    try {
-      return (columnsForTable || []).map(function (col) {
-        var _col$meta;
-        return String((col === null || col === void 0 || (_col$meta = col.meta) === null || _col$meta === void 0 ? void 0 : _col$meta.className) || "");
-      }).join("|");
-    } catch (_unused) {
-      return "";
-    }
-  }, [columnsForTable]);
-
   // Use filter hook for filtering functionality
   var _useTableFilter = (0, _hooks.useTableFilter)({
       filterMode: filtermode,
@@ -746,12 +734,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     if (filtermode === "search") {
       if (globalFilter || globalSearchColumn) {
         // Find column type for the selected search column
-        var columnType = globalSearchColumn ? function (_col$meta2, _col$meta3) {
+        var columnType = globalSearchColumn ? function (_col$meta, _col$meta2) {
           var col = (0, _lodashEs.find)(columnsForTable, function (c) {
             var column = c;
             return column.accessorKey === globalSearchColumn || column.id === globalSearchColumn;
           });
-          return (col === null || col === void 0 || (_col$meta2 = col.meta) === null || _col$meta2 === void 0 ? void 0 : _col$meta2.type) || (col === null || col === void 0 || (_col$meta3 = col.meta) === null || _col$meta3 === void 0 ? void 0 : _col$meta3.editinputtype) || "string";
+          return (col === null || col === void 0 || (_col$meta = col.meta) === null || _col$meta === void 0 ? void 0 : _col$meta.type) || (col === null || col === void 0 || (_col$meta2 = col.meta) === null || _col$meta2 === void 0 ? void 0 : _col$meta2.editinputtype) || "string";
         }() : "string";
         return [{
           field: globalSearchColumn || "",
@@ -771,12 +759,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
           field = _ref5[0],
           filter = _ref5[1];
         // Find column type for each field
-        var columnType = function (_col$meta4, _col$meta5) {
+        var columnType = function (_col$meta3, _col$meta4) {
           var col = (0, _lodashEs.find)(columnsForTable, function (c) {
             var column = c;
             return column.accessorKey === field || column.id === field;
           });
-          return (col === null || col === void 0 || (_col$meta4 = col.meta) === null || _col$meta4 === void 0 ? void 0 : _col$meta4.type) || (col === null || col === void 0 || (_col$meta5 = col.meta) === null || _col$meta5 === void 0 ? void 0 : _col$meta5.editinputtype) || "string";
+          return (col === null || col === void 0 || (_col$meta3 = col.meta) === null || _col$meta3 === void 0 ? void 0 : _col$meta3.type) || (col === null || col === void 0 || (_col$meta4 = col.meta) === null || _col$meta4 === void 0 ? void 0 : _col$meta4.editinputtype) || "string";
         }();
         return {
           field: field,
@@ -1209,7 +1197,6 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     table: table,
     enablesort: enablesort,
     rowClass: rowClass,
-    ColClassSignature: ColClassSignature,
     sorting: sorting,
     columnSizing: columnSizing,
     rowSelection: rowSelection,
@@ -1235,10 +1222,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     rowExpansionConfig: rowExpansionConfig,
     expandedRows: expandedRows,
     toggleRowExpansion: toggleRowExpansion,
-    isRowExpanded: isRowExpanded,
-    rowsVersion: tableData.length,
-    ColClassSignature: ColClassSignature,
-    tableData: tableData
+    isRowExpanded: isRowExpanded
   })))))), __jsx(_material.Box, {
     className: "panel-footer clearfix"
   }, showPagination && __jsx(_material.Box, {

package/components/data/utils/field-data-utils.js

@@ -29,7 +29,7 @@ var getDistinctFieldProperties = exports.getDistinctFieldProperties = function g
     props.filterExpr = formField.filterexpressions ? (0, _lodashEs.isObject)(formField.filterexpressions) ? formField.filterexpressions : JSON.parse(formField.filterexpressions) : {};
   } else {
     props.tableName = dataSource.execute(_types.DataSource.Operation.GET_ENTITY_NAME);
-    fieldColumn = formField["fieldcol"] || formField.key;
+    fieldColumn = formField.field || formField.key;
     props.distinctField = fieldColumn;
     props.aliasColumn = fieldColumn;
   }

package/components/dialogs/index.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _Slide = _interopRequireDefault(require("@mui/material/Slide"));
 var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
 var _clsx = _interopRequireDefault(require("clsx"));
 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); }
@@ -17,6 +18,21 @@ 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 DEFAULT_CLASS = "modal fade in";
+var Transition = /*#__PURE__*/_react["default"].forwardRef(function Transition(props, ref) {
+  return __jsx(_Slide["default"], (0, _extends2["default"])({
+    direction: "down",
+    ref: ref
+  }, props, {
+    timeout: {
+      enter: 500,
+      exit: 400
+    },
+    easing: {
+      enter: "cubic-bezier(0.4, 0, 0.2, 1)",
+      exit: "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  }));
+});
 var FadeTransition = /*#__PURE__*/_react["default"].forwardRef(function FadeTransition(props, ref) {
   return __jsx(_Fade["default"], (0, _extends2["default"])({
     ref: ref
@@ -31,19 +47,6 @@ var FadeTransition = /*#__PURE__*/_react["default"].forwardRef(function FadeTran
     }
   }), props.children);
 });
-
-// Memoized body scroll management
-var useBodyScrollLock = function useBodyScrollLock(lock) {
-  (0, _react.useEffect)(function () {
-    if (!lock || typeof document === "undefined") return;
-    var body = document.body;
-    var originalOverflow = body.style.overflow;
-    body.style.overflow = "hidden";
-    return function () {
-      body.style.overflow = originalOverflow;
-    };
-  }, [lock]);
-};
 var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props) {
   var children = props.children,
     className = props.className,
@@ -69,7 +72,6 @@ var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props)
   if (!open) {
     return null;
   }
-  useBodyScrollLock(open);
   var sheetPositionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.sheetposition === "top" && {
     position: "absolute",
     top: 0