@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/data/table/hooks/useTableEdit.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableEdit = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _lodashEs = require("lodash-es");
@@ -16,6 +18,8 @@ var _utils = require("../utils");
 var _useEditingState2 = require("./useEditingState");
 var _validation = require("../utils/validation");
 var _crudHandlers = require("../utils/crud-handlers");
+var _useEditedRows = require("./use-edited-rows");
+var _formContext = require("@wavemaker/react-runtime/components/data/form/form-context");
 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; }
@@ -40,6 +44,12 @@ var MODE_CONFIGS = {
     hasKeyboardNavigation: false,
     cancelsAddNewRowOnEdit: false
   },
+  form: {
+    showNewRowFormByDefault: false,
+    startEditOnRowClick: false,
+    hasKeyboardNavigation: false,
+    cancelsAddNewRowOnEdit: false
+  },
   none: {
     showNewRowFormByDefault: false,
     startEditOnRowClick: false,
@@ -87,7 +97,12 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
     onRowinsert = _ref.onRowinsert,
     onRowupdate = _ref.onRowupdate,
     tableRef = _ref.tableRef,
-    isServerSidePagination = _ref.isServerSidePagination;
+    isServerSidePagination = _ref.isServerSidePagination,
+    tableName = _ref.tableName;
+  var updateCell = (0, _useEditedRows.useUpdateEditedCell)();
+  var _useEditedRowsContext = (0, _useEditedRows.useEditedRowsContext)(),
+    getEdits = _useEditedRowsContext.getEdits,
+    removeRowEdits = _useEditedRowsContext.removeRowEdits;
   // Use the editing state hook
   var _useEditingState = (0, _useEditingState2.useEditingState)(),
     editingRowId = _useEditingState.editingRowId,
@@ -102,9 +117,12 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
     isRowEditing = _useEditingState.isRowEditing;
 
   // Validation refs
+  var formContext = (0, _formContext.useFormContext)();
+  var updateFormData = formContext === null || formContext === void 0 ? void 0 : formContext.updateFormData;
   var fieldRefs = (0, _react.useRef)({});
   var fieldValidationErrorsRef = (0, _react.useRef)({});
   var cellUpdateCallbacksRef = (0, _react.useRef)({});
+  var originalRowDataRef = (0, _react.useRef)({});
   var validationState = {
     fieldRefs: fieldRefs,
     fieldValidationErrors: fieldValidationErrorsRef,
@@ -130,6 +148,7 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
       console.warn("Editing is not enabled. Set editmode to enable this feature.");
       return;
     }
+    originalRowDataRef.current = _objectSpread({}, rowData);
 
     // Cancel add new row if configured for this mode
     if (config.cancelsAddNewRowOnEdit && isAddingNewRow) {
@@ -139,120 +158,241 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
     // Reset editing data and start fresh
     resetEditingData();
     setEditingRowId(rowId);
-    editingRowDataRef.current = _objectSpread({}, rowData);
+
+    // Initialize with existing edits if available
+    var existingEdits = getEdits(rowId) || {};
+    editingRowDataRef.current = _objectSpread(_objectSpread({}, rowData), existingEdits);
     resetValidationState(editMode === "quickedit" ? "all" : undefined);
     incrementSessionKey();
-  }, [editMode, config.cancelsAddNewRowOnEdit, isAddingNewRow, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData]);
+  }, [editMode, config.cancelsAddNewRowOnEdit, isAddingNewRow, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData, getEdits]);
 
   // Cancel editing function
   var cancelEditing = (0, _react.useCallback)(function () {
+    // Clear persisted edits for this row if we are cancelling
+    if (editingRowId) {
+      removeRowEdits(editingRowId);
+      // Also clear cellState if it exists
+      if (cellState) {
+        // Note: cellState doesn't have a clearRow method exposed easily here without path iteration.
+        // But removeRowEdits handles the EditedRowsContext which drives the view.
+        // Ideally we should clear cellState too, but let's focus on the visual consistency first.
+      }
+    }
     setEditingRowId(null);
 
-    // For inline mode, also cancel add new row
+    // For inline mode, also cancel add new row and clear refs
     if (editMode === "inline") {
       setIsAddingNewRow(false);
+      // Clear the editing data ref to ensure no old values persist
+      editingRowDataRef.current = {};
     }
     resetEditingData();
 
     // Reset validation based on mode
     resetValidationState(editMode === "quickedit" ? "all" : undefined);
     incrementSessionKey();
-  }, [editMode, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData]);
+  }, [editMode, editingRowId, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData, removeRowEdits, cellState]);
 
   // Generic save function that works for both edit modes
-  var saveEditingInternal = (0, _react.useCallback)(function (rowId, isNewRow, rowDataRef, onSaveSuccess) {
-    var currentRowId = rowId || (isNewRow ? "new-row" : null);
-    if (!currentRowId) return false;
-
-    // Get original row data
-    var originalRow = !isNewRow && rowId ? internalDataset.find(function (row) {
-      return row._wmTableRowId === rowId;
-    }) : null;
-    var currentEditingData = rowDataRef.current;
-
-    // For existing rows, check if there are any changes
-    if (!isNewRow && rowId && originalRow) {
-      var hasChanges = Object.keys(currentEditingData).some(function (key) {
-        return currentEditingData[key] !== originalRow[key];
-      });
-      if (!hasChanges) {
-        if (showToast) {
-          showToast("No Changes Detected", "Info");
-        }
-        if (onSaveSuccess) {
-          onSaveSuccess();
+  var saveEditingInternal = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(rowId, isNewRow, rowDataRef, onSaveSuccess) {
+      var currentRowId, activeElement, editableCellContainer, fieldName, inputValue, currentEditingData, originalData, hasChanges, relevantFieldRefs, validationResult, result;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            currentRowId = rowId || (isNewRow ? "new-row" : null);
+            if (currentRowId) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return", Promise.resolve(false));
+          case 3:
+            // Capture value from active input element BEFORE blur
+            // This is needed because inputs use updateon="blur" and save triggers on mousedown (before blur)
+            // The blur event handler runs async, so we need to read the DOM value directly
+            activeElement = document.activeElement;
+            if (activeElement) {
+              // Get the field name from the closest editable cell container
+              editableCellContainer = activeElement.closest("[data-field-name]");
+              if (editableCellContainer) {
+                fieldName = editableCellContainer.getAttribute("data-field-name");
+                inputValue = activeElement.value; // Update editingRowDataRef with the current DOM value
+                if (fieldName && inputValue !== undefined) {
+                  rowDataRef.current = _objectSpread(_objectSpread({}, rowDataRef.current), {}, (0, _defineProperty2["default"])({}, fieldName, inputValue));
+                }
+              }
+
+              // Now blur to clean up focus state
+              if (activeElement.blur) {
+                activeElement.blur();
+              }
+            }
+
+            // Get current editing data
+            currentEditingData = rowDataRef.current;
+            originalData = originalRowDataRef.current; // Check if any changes were made (only for existing rows, not new rows)
+            if (!(!isNewRow && originalData && currentEditingData)) {
+              _context.next = 13;
+              break;
+            }
+            hasChanges = wmTableColumns.some(function (column) {
+              if (!column.field || column.readonly) return false;
+              var originalValue = (0, _lodashEs.get)(originalData, column.field);
+              var currentValue = (0, _lodashEs.get)(currentEditingData, column.field);
+              // Compare stringified values to handle type differences
+              return String(originalValue !== null && originalValue !== void 0 ? originalValue : "") !== String(currentValue !== null && currentValue !== void 0 ? currentValue : "");
+            });
+            if (hasChanges) {
+              _context.next = 13;
+              break;
+            }
+            showToast === null || showToast === void 0 || showToast("No changes detected", "Info");
+            // Still close edit mode even if no changes - call onSaveSuccess to reset state
+            if (onSaveSuccess) {
+              if (rowId) {
+                removeRowEdits(rowId);
+              }
+              onSaveSuccess();
+            }
+            return _context.abrupt("return", true);
+          case 13:
+            // Filter field refs to only include fields for the current row
+            relevantFieldRefs = {};
+            (0, _lodashEs.forEach)((0, _lodashEs.entries)(fieldRefs.current), function (_ref3) {
+              var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+                fieldKey = _ref4[0],
+                fieldElement = _ref4[1];
+              if (fieldKey.startsWith("".concat(currentRowId, "_"))) {
+                relevantFieldRefs[fieldKey] = fieldElement;
+              }
+            });
+
+            // Validate only the relevant fields
+            validationResult = (0, _utils.validateEditingFields)(relevantFieldRefs, currentRowId);
+            if (validationResult.isValid) {
+              _context.next = 19;
+              break;
+            }
+            (0, _validation.updateValidationErrors)(validationResult, relevantFieldRefs, validationState);
+            return _context.abrupt("return", false);
+          case 19:
+            _context.next = 21;
+            return (0, _crudHandlers.handleServerOperation)({
+              isNewRow: isNewRow,
+              rowId: rowId,
+              currentEditingData: currentEditingData,
+              wmTableColumns: wmTableColumns,
+              datasource: datasource,
+              binddataset: binddataset,
+              setInternalDataset: setInternalDataset,
+              onNewRowAdded: onNewRowAdded,
+              onRowUpdate: onRowUpdate,
+              showToast: showToast,
+              onSuccess: onSuccess,
+              onError: onError,
+              onRowinsert: onRowinsert,
+              onRowupdate: onRowupdate,
+              insertmessage: insertmessage,
+              updatemessage: updatemessage,
+              errormessage: errormessage,
+              tableInstance: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current,
+              isServerSidePagination: isServerSidePagination,
+              listener: listener,
+              widgetName: tableName
+            });
+          case 21:
+            result = _context.sent;
+            if (result) {
+              _context.next = 24;
+              break;
+            }
+            return _context.abrupt("return", false);
+          case 24:
+            if (updateFormData && tableName) {
+              // Sync the complete array to parent form using functional updater for latest state
+              setInternalDataset(function (currentDataset) {
+                var tableKey = tableName;
+
+                // Clean and filter the dataset
+                var cleanedDataset = currentDataset.map(function (row) {
+                  // Remove all internal properties from each row using centralized constant
+                  var cleanRow = _objectSpread({}, row);
+                  _utils.INTERNAL_PROPERTIES.forEach(function (prop) {
+                    return delete cleanRow[prop];
+                  });
+                  return cleanRow;
+                }).filter(function (row) {
+                  // Filter out empty rows - check if row has at least one meaningful value
+                  var hasData = Object.entries(row).some(function (_ref5) {
+                    var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+                      _ = _ref6[0],
+                      value = _ref6[1];
+                    return value !== null && value !== undefined && value !== "";
+                  });
+                  return hasData;
+                });
+
+                // Update parent form with cleaned data (without internal properties)
+                updateFormData((0, _defineProperty2["default"])({}, tableKey, cleanedDataset));
+
+                // Return the original dataset unchanged (internal properties needed for table functionality)
+                return currentDataset;
+              });
+            }
+            if (onSaveSuccess) {
+              // CLEAR EDITS ON SUCCESS
+              if (rowId) {
+                removeRowEdits(rowId);
+              }
+              onSaveSuccess();
+            }
+            return _context.abrupt("return", true);
+          case 27:
+          case "end":
+            return _context.stop();
         }
-        return true;
-      }
-    }
-
-    // Filter field refs to only include fields for the current row
-    var relevantFieldRefs = {};
-    (0, _lodashEs.forEach)((0, _lodashEs.entries)(fieldRefs.current), function (_ref2) {
-      var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-        fieldKey = _ref3[0],
-        fieldElement = _ref3[1];
-      if (fieldKey.startsWith("".concat(currentRowId, "_"))) {
-        relevantFieldRefs[fieldKey] = fieldElement;
-      }
-    });
-
-    // Validate only the relevant fields
-    var validationResult = (0, _utils.validateEditingFields)(relevantFieldRefs, currentRowId);
-    if (!validationResult.isValid) {
-      (0, _validation.updateValidationErrors)(validationResult, relevantFieldRefs, validationState);
-      return false;
-    }
-
-    // Handle server insert and update operation
-    (0, _crudHandlers.handleServerOperation)({
-      isNewRow: isNewRow,
-      rowId: rowId,
-      currentEditingData: currentEditingData,
-      wmTableColumns: wmTableColumns,
-      datasource: datasource,
-      binddataset: binddataset,
-      setInternalDataset: setInternalDataset,
-      onNewRowAdded: onNewRowAdded,
-      onRowUpdate: onRowUpdate,
-      showToast: showToast,
-      onSuccess: onSuccess,
-      onError: onError,
-      onRowinsert: onRowinsert,
-      onRowupdate: onRowupdate,
-      insertmessage: insertmessage,
-      updatemessage: updatemessage,
-      errormessage: errormessage,
-      tableInstance: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current,
-      isServerSidePagination: isServerSidePagination
-    });
-    if (onSaveSuccess) {
-      onSaveSuccess();
-    }
-    return true;
-  }, [internalDataset, wmTableColumns, datasource, binddataset, setInternalDataset, onNewRowAdded, onRowUpdate, showToast, onSuccess, onError, onRowinsert, onRowupdate, insertmessage, updatemessage, errormessage]);
+      }, _callee);
+    }));
+    return function (_x, _x2, _x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [internalDataset, wmTableColumns, datasource, binddataset, setInternalDataset, onNewRowAdded, onRowUpdate, showToast, onSuccess, onError, onRowinsert, onRowupdate, insertmessage, updatemessage, errormessage, removeRowEdits, updateFormData, tableName]);
 
   // Save editing function
-  var saveEditing = (0, _react.useCallback)(function () {
-    var isNewRow = editMode === "inline" ? isAddingNewRow : false;
-    var rowId = editingRowId || (isNewRow ? "new-row" : null);
-    var dataRef = editMode === "quickedit" && !editingRowId ? newRowDataRef : editingRowDataRef;
-    var success = saveEditingInternal(rowId, isNewRow, dataRef, function () {
-      // Reset editing state
-      setEditingRowId(null);
-
-      // For inline mode, reset add new row
-      if (editMode === "inline") {
-        setIsAddingNewRow(false);
+  var saveEditing = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var isNewRow, rowId, dataRef, success;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          isNewRow = editMode === "inline" ? isAddingNewRow : false;
+          rowId = editingRowId || (isNewRow ? "new-row" : null);
+          dataRef = editMode === "quickedit" && !editingRowId ? newRowDataRef : editingRowDataRef;
+          _context2.next = 5;
+          return saveEditingInternal(rowId, isNewRow, dataRef, function () {
+            // Reset editing state
+            setEditingRowId(null);
+
+            // For inline mode, reset add new row and clear the ref completely
+            if (editMode === "inline") {
+              setIsAddingNewRow(false);
+              // Clear the editing data ref to ensure no old values persist
+              editingRowDataRef.current = {};
+            }
+            resetEditingData();
+
+            // Reset validation based on context
+            resetValidationState(editMode === "quickedit" ? editingRowId ? "editing" : "new-row" : undefined);
+            incrementSessionKey();
+          });
+        case 5:
+          success = _context2.sent;
+          return _context2.abrupt("return", success);
+        case 7:
+        case "end":
+          return _context2.stop();
       }
-      resetEditingData();
-
-      // Reset validation based on context
-      resetValidationState(editMode === "quickedit" ? editingRowId ? "editing" : "new-row" : undefined);
-      incrementSessionKey();
-    });
-    return success;
-  }, [editMode, editingRowId, isAddingNewRow, resetEditingData, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, saveEditingInternal]);
+    }, _callee2);
+  })), [editMode, editingRowId, isAddingNewRow, resetEditingData, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, saveEditingInternal]);
 
   // Update field value function
   var updateFieldValue = (0, _react.useCallback)(function (fieldName, newValue, rowId) {
@@ -262,6 +402,21 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
     // Update cellState if available (for tracking changes without re-renders)
     if (cellState && effectiveRowId !== "new-row") {
       cellState.setValue(["cells", effectiveRowId, fieldName], newValue);
+      updateCell(effectiveRowId, fieldName, newValue);
+    }
+
+    // FIX: Only update internalDataset for quickedit mode (real-time updates needed)
+    // For inline mode, skip this to avoid re-renders - dataset will be updated on save
+    if (editMode === "quickedit" && String(effectiveRowId) !== "new-row") {
+      setInternalDataset(function (prev) {
+        return prev.map(function (row) {
+          // Match by ID
+          if ((row._wmTableRowId || row.id) === effectiveRowId) {
+            return _objectSpread(_objectSpread({}, row), {}, (0, _defineProperty2["default"])({}, fieldName, newValue));
+          }
+          return row;
+        });
+      });
     }
 
     // In quickedit mode, check if this update is for the new row
@@ -280,7 +435,7 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
       });
       (0, _validation.validateField)(effectiveRowId, fieldName, newValue, _column, validationState);
     }
-  }, [editMode, editingRowId, wmTableColumns, cellState]);
+  }, [editMode, editingRowId, wmTableColumns, cellState, setInternalDataset]);
 
   // Save new row (for quickedit mode)
   var saveNewRow = (0, _react.useCallback)(function () {
@@ -294,6 +449,21 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
 
   // Handle keyboard events (for modes that support it)
   var handleKeyDown = (0, _react.useCallback)(function (e, sourceRowId) {
+    // Handle Enter key for inline mode as well (not just quickedit)
+    if (editMode === "inline" && e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      saveEditing();
+      return;
+    }
+
+    // Handle Escape key for inline mode
+    if (editMode === "inline" && e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      cancelEditing();
+      return;
+    }
     if (!config.hasKeyboardNavigation || editMode !== "quickedit") return;
 
     // Determine if the event is from the new row
@@ -337,7 +507,10 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
         renderFormWidget: renderFormWidget,
         updateFieldValue: updateFieldValue,
         sessionKey: sessionKey,
-        onKeyDown: config.hasKeyboardNavigation ? function (e) {
+        onKeyDown:
+        // FIX: Pass onKeyDown for both inline and quickedit modes
+        // Inline mode now supports Enter/Escape keys
+        editMode === "inline" || config.hasKeyboardNavigation ? function (e) {
           return handleKeyDown(e, rowId);
         } : undefined,
         editMode: editMode
@@ -351,7 +524,9 @@ var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
     if (!config.startEditOnRowClick) return;
 
     // If not editing this row, start editing
-    if (!isRowEditing(rowId)) {
+    if (!isRowEditing(rowId) && (editMode === "quickedit" || editMode === "inline" ? (0, _lodashEs.every)(validationState.fieldValidationErrors.current, function (error) {
+      return error === false;
+    }) : true)) {
       startEditing(rowData, rowId);
     }
   }, [config.startEditOnRowClick, isRowEditing, startEditing]);

package/components/data/table/hooks/useTableEffects.js

@@ -6,20 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTableEffects = void 0;
 var _react = require("react");
 var _tableHelpers = require("../utils/table-helpers");
+var _constants = require("../utils/constants");
 var useTableEffects = exports.useTableEffects = function useTableEffects(props) {
   var name = props.name,
     navigation = props.navigation,
     datasource = props.datasource,
     internalDataset = props.internalDataset,
     statehandler = props.statehandler,
-    selectedRowId = props.selectedRowId,
     selectedRowIds = props.selectedRowIds,
     currentPage = props.currentPage,
     currentPageSize = props.currentPageSize,
-    sorting = props.sorting,
     isGridEditMode = props.isGridEditMode,
-    stateManager = props.stateManager,
-    initialActualPageSize = props.initialActualPageSize;
+    stateManager = props.stateManager;
 
   // State to track if we've restored state
   var _useState = (0, _react.useState)(false),
@@ -40,6 +38,11 @@ var useTableEffects = exports.useTableEffects = function useTableEffects(props)
 
   // Effect 1: Load persisted state when component mounts
   (0, _react.useEffect)(function () {
+    // Skip state restoration for navigation types that don't support it
+    if (_constants.UNSUPPORTED_STATE_PERSISTENCE_TYPES.includes(navigation)) {
+      setHasRestoredState(true);
+      return;
+    }
     if (!hasRestoredState && statehandler && internalDataset.length > 0) {
       var savedState = (0, _tableHelpers.getTableState)(name, statehandler);
       if (savedState) {
@@ -53,9 +56,11 @@ var useTableEffects = exports.useTableEffects = function useTableEffects(props)
 
         // Extract selected indices for the current page (only if no active filter)
         if (savedState.selectedItem && savedState.selectedItem.length > 0 && !hasActiveFilter) {
+          // Default to page 1 if pagination is not saved (page 1 is the default, so it's not persisted)
+          var restoredPage = savedState.pagination || 1;
           // Only restore selections for the current page
           var currentPageSelections = savedState.selectedItem.filter(function (item) {
-            return item.page === savedState.pagination;
+            return item.page === restoredPage;
           }).map(function (item) {
             return item.index;
           });
@@ -65,10 +70,15 @@ var useTableEffects = exports.useTableEffects = function useTableEffects(props)
       }
       setHasRestoredState(true);
     }
-  }, [name, statehandler, hasRestoredState, internalDataset.length]);
+  }, [name, statehandler, hasRestoredState, internalDataset.length, navigation]);
 
   // Effect 2: Persist state on changes
   (0, _react.useEffect)(function () {
+    // Skip persistence for navigation types that don't support it
+    if (_constants.UNSUPPORTED_STATE_PERSISTENCE_TYPES.includes(navigation)) {
+      return;
+    }
+
     // Skip persistence if we haven't loaded initial data yet
     if (internalDataset.length === 0 || !statehandler) {
       return;
@@ -79,6 +89,12 @@ var useTableEffects = exports.useTableEffects = function useTableEffects(props)
       return;
     }
 
+    // Skip persistence while datasource is loading
+    // This prevents saving stale state (e.g., old pagination value) during page transitions
+    if (datasource !== null && datasource !== void 0 && datasource.loading) {
+      return;
+    }
+
     // Check if we're in default state
     if (!stateManager.isDefaultState()) {
       // Get existing persisted state
@@ -114,12 +130,10 @@ var useTableEffects = exports.useTableEffects = function useTableEffects(props)
 
       // Only save if there's something to save
       if (Object.keys(cleanedState).length > 0) {
-        // If we have a filter active, use clear-then-save to avoid merge issues
-        var hasActiveFilter = cleanedState.search && cleanedState.search.length > 0;
-        if (hasActiveFilter) {
-          // Clear first to ensure no merge happens
-          (0, _tableHelpers.clearTableState)(name, statehandler);
-        }
+        // Always clear first to ensure clean replacement (not merge)
+        // This is required because setWidgetState uses lodash merge() which would
+        // preserve old properties like pagination even when they should be removed
+        (0, _tableHelpers.clearTableState)(name, statehandler);
 
         // Save the cleaned state
         (0, _tableHelpers.saveTableState)(name, statehandler, cleanedState);
@@ -127,8 +141,12 @@ var useTableEffects = exports.useTableEffects = function useTableEffects(props)
         // If nothing to save, clear the state
         (0, _tableHelpers.clearTableState)(name, statehandler);
       }
+    } else {
+      // We're in default state - clear any existing persisted state
+      // This ensures old values (like pagination: 2) are removed when returning to defaults
+      (0, _tableHelpers.clearTableState)(name, statehandler);
     }
-  }, [selectedRowId, selectedRowIds, currentPage, currentPageSize, internalDataset, name, statehandler, isGridEditMode, isRestoringSelection, stateManager]);
+  }, [selectedRowIds, currentPage, currentPageSize, internalDataset, name, statehandler, isGridEditMode, isRestoringSelection, stateManager, navigation, datasource === null || datasource === void 0 ? void 0 : datasource.loading]);
   return {
     restoredPageNumber: restoredPageNumber,
     restoredSelectedRowIds: restoredSelectedRowIds,

package/components/data/table/hooks/useTableFilter.js

@@ -9,7 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _lodashEs = require("lodash-es");
-var _types = require("../../types");
+var _types = require("@wavemaker/react-runtime/components/data/types");
 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; }
 // Constants