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

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

@@ -0,0 +1,651 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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");
+var _components = require("../components");
+var _AddNewRow = require("../components/AddNewRow");
+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-ai/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; }
+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; }
+// Mode-specific behavior configurations
+var MODE_CONFIGS = {
+  inline: {
+    showNewRowFormByDefault: false,
+    startEditOnRowClick: false,
+    hasKeyboardNavigation: false,
+    cancelsAddNewRowOnEdit: true
+  },
+  quickedit: {
+    showNewRowFormByDefault: true,
+    startEditOnRowClick: true,
+    hasKeyboardNavigation: true,
+    cancelsAddNewRowOnEdit: false
+  },
+  dialog: {
+    showNewRowFormByDefault: false,
+    startEditOnRowClick: false,
+    hasKeyboardNavigation: false,
+    cancelsAddNewRowOnEdit: false
+  },
+  form: {
+    showNewRowFormByDefault: false,
+    startEditOnRowClick: false,
+    hasKeyboardNavigation: false,
+    cancelsAddNewRowOnEdit: false
+  },
+  none: {
+    showNewRowFormByDefault: false,
+    startEditOnRowClick: false,
+    hasKeyboardNavigation: false,
+    cancelsAddNewRowOnEdit: false
+  }
+};
+var useTableEdit = exports.useTableEdit = function useTableEdit(_ref) {
+  var _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? "none" : _ref$editMode,
+    internalDataset = _ref.internalDataset,
+    setInternalDataset = _ref.setInternalDataset,
+    wmTableColumns = _ref.wmTableColumns,
+    cellState = _ref.cellState,
+    renderFormWidget = _ref.renderFormWidget,
+    listener = _ref.listener,
+    onRowUpdate = _ref.onRowUpdate,
+    onRowDelete = _ref.onRowDelete,
+    onNewRowAdded = _ref.onNewRowAdded,
+    _ref$showrowindex = _ref.showrowindex,
+    showrowindex = _ref$showrowindex === void 0 ? false : _ref$showrowindex,
+    _ref$radioselect = _ref.radioselect,
+    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
+    _ref$multiselect = _ref.multiselect,
+    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
+    _ref$rowActions = _ref.rowActions,
+    rowActions = _ref$rowActions === void 0 ? [] : _ref$rowActions,
+    _ref$formposition = _ref.formposition,
+    formposition = _ref$formposition === void 0 ? "bottom" : _ref$formposition,
+    _ref$insertmessage = _ref.insertmessage,
+    insertmessage = _ref$insertmessage === void 0 ? _utils.TABLE_MESSAGES.insertSuccess : _ref$insertmessage,
+    _ref$updatemessage = _ref.updatemessage,
+    updatemessage = _ref$updatemessage === void 0 ? _utils.TABLE_MESSAGES.updateSuccess : _ref$updatemessage,
+    _ref$errormessage = _ref.errormessage,
+    errormessage = _ref$errormessage === void 0 ? _utils.TABLE_MESSAGES.operationError : _ref$errormessage,
+    showToast = _ref.showToast,
+    _ref$hasRowExpansion = _ref.hasRowExpansion,
+    hasRowExpansion = _ref$hasRowExpansion === void 0 ? false : _ref$hasRowExpansion,
+    _ref$expansionPositio = _ref.expansionPosition,
+    expansionPosition = _ref$expansionPositio === void 0 ? 0 : _ref$expansionPositio,
+    datasource = _ref.datasource,
+    binddataset = _ref.binddataset,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError,
+    onRowinsert = _ref.onRowinsert,
+    onRowupdate = _ref.onRowupdate,
+    tableRef = _ref.tableRef,
+    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,
+    isAddingNewRow = _useEditingState.isAddingNewRow,
+    sessionKey = _useEditingState.sessionKey,
+    editingRowDataRef = _useEditingState.editingRowDataRef,
+    newRowDataRef = _useEditingState.newRowDataRef,
+    setEditingRowId = _useEditingState.setEditingRowId,
+    setIsAddingNewRow = _useEditingState.setIsAddingNewRow,
+    incrementSessionKey = _useEditingState.incrementSessionKey,
+    resetEditingData = _useEditingState.resetEditingData,
+    isRowEditing = _useEditingState.isRowEditing;
+
+  // Validation refs
+  var formContext = (0, _formContext.useFormContext)();
+  var updateFormData = formContext === null || formContext === void 0 ? void 0 : formContext.updateFormData;
+  // Get parent form data context for proper data path resolution (used when table is inside a prefab)
+  var parentFormDataContext = (0, _formContext.useParentFormData)();
+  // Memoize the parent data path to avoid unnecessary re-renders
+  // Use explicit undefined check (not falsy) to allow empty string as valid path
+  var parentDataPath = (parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.parentDataPath) !== undefined ? parentFormDataContext.parentDataPath : undefined;
+  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,
+    cellUpdateCallbacks: cellUpdateCallbacksRef
+  };
+
+  // Get mode configuration
+  var config = MODE_CONFIGS[editMode] || MODE_CONFIGS.none;
+
+  // Reset validation state wrapper
+  var resetValidationState = (0, _react.useCallback)(function (context) {
+    (0, _validation.resetValidationState)(context, editingRowId, validationState);
+  }, [editingRowId]);
+
+  // Set default new row form visibility based on mode
+  (0, _react.useEffect)(function () {
+    setIsAddingNewRow(config.showNewRowFormByDefault);
+  }, [editMode, config.showNewRowFormByDefault, setIsAddingNewRow]);
+
+  // Start editing function
+  var startEditing = (0, _react.useCallback)(function (rowData, rowId) {
+    if (editMode === "none") {
+      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) {
+      setIsAddingNewRow(false);
+    }
+
+    // Reset editing data and start fresh
+    resetEditingData();
+    setEditingRowId(rowId);
+
+    // 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, 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 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, editingRowId, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData, removeRowEdits, cellState]);
+
+  // Generic save function that works for both edit modes
+  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) {
+                // Use parentDataPath (from ParentFormDataContext) when table is inside a prefab with parent form
+                // This ensures the table data is stored under the prefab's name (e.g., "employees")
+                // rather than the table's name (e.g., "EmployeeInfoTable1")
+                // Use explicit undefined check to allow empty string as valid (though unlikely) path
+                var tableKey = parentDataPath !== undefined && parentDataPath !== "" ? parentDataPath : 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();
+        }
+      }, _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, parentDataPath]);
+
+  // Save editing function
+  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();
+      }
+    }, _callee2);
+  })), [editMode, editingRowId, isAddingNewRow, resetEditingData, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, saveEditingInternal]);
+
+  // Update field value function
+  var updateFieldValue = (0, _react.useCallback)(function (fieldName, newValue, rowId) {
+    // Determine the actual row ID from the passed parameter or context
+    var effectiveRowId = rowId || editingRowId || "new-row";
+
+    // 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
+    if (editMode === "quickedit" && effectiveRowId === "new-row") {
+      // For quickedit new row, update newRowDataRef
+      newRowDataRef.current = _objectSpread(_objectSpread({}, newRowDataRef.current), {}, (0, _defineProperty2["default"])({}, fieldName, newValue));
+      var column = (0, _lodashEs.find)(wmTableColumns, function (col) {
+        return col.field === fieldName;
+      });
+      (0, _validation.validateField)("new-row", fieldName, newValue, column, validationState);
+    } else {
+      // For all other cases (including editing existing rows), update editingRowDataRef
+      editingRowDataRef.current = _objectSpread(_objectSpread({}, editingRowDataRef.current), {}, (0, _defineProperty2["default"])({}, fieldName, newValue));
+      var _column = (0, _lodashEs.find)(wmTableColumns, function (col) {
+        return col.field === fieldName;
+      });
+      (0, _validation.validateField)(effectiveRowId, fieldName, newValue, _column, validationState);
+    }
+  }, [editMode, editingRowId, wmTableColumns, cellState, setInternalDataset]);
+
+  // Save new row (for quickedit mode)
+  var saveNewRow = (0, _react.useCallback)(function () {
+    var success = saveEditingInternal(null, true, newRowDataRef, function () {
+      newRowDataRef.current = {};
+      resetValidationState("new-row");
+      incrementSessionKey();
+    });
+    return success;
+  }, [resetValidationState, incrementSessionKey, saveEditingInternal]);
+
+  // 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
+    var isFromNewRow = sourceRowId === "new-row";
+    var isEditingRow = editingRowId !== null && !isFromNewRow;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      isFromNewRow ? saveNewRow() : saveEditing();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isFromNewRow) {
+        newRowDataRef.current = {};
+        resetValidationState("new-row");
+        incrementSessionKey();
+      } else if (isEditingRow) {
+        cancelEditing();
+      }
+    }
+  }, [config.hasKeyboardNavigation, editMode, editingRowId, saveNewRow, saveEditing, cancelEditing, resetValidationState, incrementSessionKey]);
+
+  // Render editable cell
+  var renderEditableCell = (0, _react.useCallback)(function (column, rowData, rowId) {
+    var isEditing = isRowEditing(rowId);
+    var fieldName = String(column.field || "");
+    var widgetType = String(column.editWidgetType || "WmText");
+    if (isEditing && editMode !== "none") {
+      var editValue = (0, _lodashEs.get)(editingRowDataRef.current, fieldName) !== undefined ? (0, _lodashEs.get)(editingRowDataRef.current, fieldName) : (0, _lodashEs.get)(rowData, fieldName);
+      return __jsx(_components.EditableCell, {
+        key: "edit-cell-".concat(fieldName, "-").concat(sessionKey),
+        column: column,
+        rowData: rowData,
+        rowId: rowId,
+        fieldName: fieldName,
+        widgetType: widgetType,
+        editValue: editValue,
+        fieldValidationErrorsRef: fieldValidationErrorsRef,
+        cellUpdateCallbacksRef: cellUpdateCallbacksRef,
+        fieldRefs: fieldRefs,
+        renderFormWidget: renderFormWidget,
+        updateFieldValue: updateFieldValue,
+        sessionKey: sessionKey,
+        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
+      });
+    }
+    return __jsx(_react["default"].Fragment, null);
+  }, [isRowEditing, editMode, renderFormWidget, updateFieldValue, sessionKey, handleKeyDown, config.hasKeyboardNavigation]);
+
+  // Handle row click
+  var handleRowClick = (0, _react.useCallback)(function (rowData, rowId) {
+    if (!config.startEditOnRowClick) return;
+
+    // If not editing this row, start editing
+    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]);
+
+  // Handle add new row click
+  var handleAddNewRowClick = (0, _react.useCallback)(function () {
+    if (editMode !== "inline") {
+      console.warn("Add new row is not available for this edit mode.");
+      return;
+    }
+
+    // Cancel any existing editing
+    if (editingRowId) {
+      setEditingRowId(null);
+    }
+
+    // If already adding a new row, reset everything first
+    if (isAddingNewRow) {
+      setIsAddingNewRow(false);
+      resetEditingData();
+      resetValidationState();
+    }
+
+    // Initialize with default values
+    var initialData = {};
+    wmTableColumns.forEach(function (column) {
+      if (column.defaultvalue !== undefined && column.defaultvalue !== null && column.defaultvalue !== "") {
+        initialData[column.field] = column.defaultvalue;
+      }
+    });
+
+    // Start new row operation
+    setIsAddingNewRow(true);
+    editingRowDataRef.current = initialData;
+    resetValidationState();
+    incrementSessionKey();
+  }, [editMode, editingRowId, isAddingNewRow, wmTableColumns, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData]);
+
+  // Render add new row
+  var renderAddNewRow = (0, _react.useCallback)(function () {
+    var shouldShowNewRow = editMode === "inline" && isAddingNewRow || editMode === "quickedit" && config.showNewRowFormByDefault;
+    if (!shouldShowNewRow) return null;
+
+    // Determine which data ref to use
+    var dataRef = editMode === "quickedit" ? newRowDataRef : editingRowDataRef;
+    var onKeyDownHandler = config.hasKeyboardNavigation ? function (e) {
+      return handleKeyDown(e, "new-row");
+    } : undefined;
+
+    // Wrapper function to render EditableCell
+    var renderCell = function renderCell(column, fieldName, widgetType, editValue, rowId) {
+      return __jsx(_components.EditableCell, {
+        key: "new-row-cell-".concat(fieldName, "-").concat(sessionKey),
+        column: column,
+        rowData: {},
+        rowId: rowId,
+        fieldName: fieldName,
+        widgetType: widgetType,
+        editValue: editValue,
+        fieldValidationErrorsRef: fieldValidationErrorsRef,
+        cellUpdateCallbacksRef: cellUpdateCallbacksRef,
+        fieldRefs: fieldRefs,
+        renderFormWidget: renderFormWidget,
+        updateFieldValue: updateFieldValue,
+        sessionKey: sessionKey,
+        onKeyDown: onKeyDownHandler,
+        editMode: editMode
+      });
+    };
+    return __jsx(_AddNewRow.AddNewRow, {
+      isAddingNewRow: true,
+      editMode: editMode,
+      wmTableColumns: wmTableColumns,
+      rowActions: rowActions,
+      showrowindex: showrowindex,
+      radioselect: radioselect,
+      multiselect: multiselect,
+      sessionKey: sessionKey,
+      editingRowData: dataRef.current,
+      renderEditableCell: renderCell,
+      onKeyDown: onKeyDownHandler,
+      handleSave: editMode === "quickedit" ? saveNewRow : saveEditing,
+      handleCancel: function handleCancel() {
+        if (editMode === "quickedit") {
+          newRowDataRef.current = {};
+          resetValidationState("new-row");
+          incrementSessionKey();
+        } else {
+          cancelEditing();
+        }
+      },
+      listener: listener,
+      hasRowExpansion: hasRowExpansion,
+      expansionPosition: expansionPosition
+    });
+  }, [editMode, isAddingNewRow, config.showNewRowFormByDefault, config.hasKeyboardNavigation, wmTableColumns, rowActions, showrowindex, radioselect, multiselect, renderFormWidget, updateFieldValue, handleKeyDown, saveNewRow, saveEditing, cancelEditing, resetValidationState, incrementSessionKey, listener, sessionKey, hasRowExpansion, expansionPosition]);
+  return {
+    editingRowId: editingRowId,
+    editingRowData: editingRowDataRef.current,
+    isRowEditing: isRowEditing,
+    startEditing: startEditing,
+    cancelEditing: cancelEditing,
+    saveEditing: saveEditing,
+    updateFieldValue: updateFieldValue,
+    renderEditableCell: renderEditableCell,
+    handleRowClick: handleRowClick,
+    handleKeyDown: handleKeyDown,
+    fieldRefs: fieldRefs,
+    isAddingNewRow: isAddingNewRow,
+    handleAddNewRowClick: handleAddNewRowClick,
+    renderAddNewRow: renderAddNewRow
+  };
+};

package/components/data/table/hooks/useTableEffects.d.ts

@@ -0,0 +1,25 @@
+import { SortingState } from "@tanstack/react-table";
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+import { UseTableStateManagerReturn } from "./useTableStateManager";
+interface UseTableEffectsProps {
+    name: string;
+    navigation: string;
+    datasource: any;
+    internalDataset: any[];
+    statehandler: StorageType;
+    selectedRowIds: string[];
+    currentPage: number;
+    currentPageSize: number;
+    sorting: SortingState;
+    isGridEditMode: boolean;
+    stateManager: UseTableStateManagerReturn;
+    initialActualPageSize?: number;
+}
+export declare const useTableEffects: (props: UseTableEffectsProps) => {
+    restoredPageNumber: number;
+    restoredSelectedRowIds: string[];
+    restoredSelectedIndices: number[];
+    hasRestoredState: boolean;
+    setIsRestoringSelection: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};