@wavemaker/react-runtime 11.14.1-16.6404

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

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableData = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../utils");
+var _confirmDialog = _interopRequireDefault(require("../../../dialogs/confirm-dialog"));
+var _crudHandlers = require("../utils/crud-handlers");
+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 useTableData = exports.useTableData = function useTableData(_ref) {
+  var dataset = _ref.dataset,
+    onRowDelete = _ref.onRowDelete,
+    _ref$deleteoktext = _ref.deleteoktext,
+    deleteoktext = _ref$deleteoktext === void 0 ? _utils.TABLE_MESSAGES.deleteOkText : _ref$deleteoktext,
+    _ref$deletecanceltext = _ref.deletecanceltext,
+    deletecanceltext = _ref$deletecanceltext === void 0 ? _utils.TABLE_MESSAGES.deleteCancelText : _ref$deletecanceltext,
+    _ref$confirmdelete = _ref.confirmdelete,
+    confirmdelete = _ref$confirmdelete === void 0 ? _utils.TABLE_MESSAGES.deleteConfirmMessage : _ref$confirmdelete,
+    _ref$deletemessage = _ref.deletemessage,
+    deletemessage = _ref$deletemessage === void 0 ? _utils.TABLE_MESSAGES.deleteSuccess : _ref$deletemessage,
+    _ref$errormessage = _ref.errormessage,
+    errormessage = _ref$errormessage === void 0 ? _utils.TABLE_MESSAGES.deleteError : _ref$errormessage,
+    showToast = _ref.showToast,
+    datasource = _ref.datasource,
+    binddataset = _ref.binddataset,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError,
+    onRowdelete = _ref.onRowdelete,
+    isServerSidePagination = _ref.isServerSidePagination;
+  // Add unique row IDs to the dataset if they don't already have them
+  var processedDataset = (0, _react.useMemo)(function () {
+    return (0, _utils.addUniqueRowIds)(dataset || []);
+  }, [dataset]);
+  var _useState = (0, _react.useState)(processedDataset),
+    internalDataset = _useState[0],
+    setInternalDataset = _useState[1];
+
+  // Update internalDataset when dataset prop changes
+  (0, _react.useEffect)(function () {
+    setInternalDataset(processedDataset);
+  }, [processedDataset]);
+  var _useState2 = (0, _react.useState)(false),
+    showDeleteConfirm = _useState2[0],
+    setShowDeleteConfirm = _useState2[1];
+  var pendingDeleteRef = (0, _react.useRef)(null);
+
+  // Handle confirm deletion
+  var handleConfirmDelete = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _pendingDeleteRef$cur, rowData, tableInstance, resolve, result;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!pendingDeleteRef.current) {
+            _context.next = 7;
+            break;
+          }
+          _pendingDeleteRef$cur = pendingDeleteRef.current, rowData = _pendingDeleteRef$cur.rowData, tableInstance = _pendingDeleteRef$cur.tableInstance, resolve = _pendingDeleteRef$cur.resolve;
+          _context.next = 4;
+          return (0, _crudHandlers.handleDeleteOperation)({
+            rowData: rowData,
+            tableInstance: tableInstance,
+            internalDataset: internalDataset,
+            setInternalDataset: setInternalDataset,
+            datasource: datasource,
+            binddataset: binddataset,
+            onRowDelete: onRowDelete,
+            showToast: showToast,
+            onSuccess: onSuccess,
+            onError: onError,
+            onRowdelete: onRowdelete,
+            deletemessage: deletemessage,
+            errormessage: errormessage,
+            isServerSidePagination: isServerSidePagination
+          });
+        case 4:
+          result = _context.sent;
+          resolve(result);
+          pendingDeleteRef.current = null;
+        case 7:
+          setShowDeleteConfirm(false);
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [internalDataset, setInternalDataset, datasource, binddataset, onRowDelete, showToast, onSuccess, onError, onRowdelete, deletemessage, errormessage, isServerSidePagination]);
+
+  // Handle cancel deletion
+  var handleCancelDelete = (0, _react.useCallback)(function () {
+    if (pendingDeleteRef.current) {
+      pendingDeleteRef.current.resolve(false);
+      pendingDeleteRef.current = null;
+    }
+    setShowDeleteConfirm(false);
+  }, []);
+
+  // Delete record functionality with confirmation
+  var deleteRecord = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(rowData, tableInstance) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", new Promise(function (resolve) {
+              // Store the delete operation details
+              pendingDeleteRef.current = {
+                rowData: rowData,
+                tableInstance: tableInstance,
+                resolve: resolve
+              };
+
+              // Show the confirmation dialog
+              setShowDeleteConfirm(true);
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), []);
+
+  // Render the confirmation dialog component
+  var renderConfirmDialog = (0, _react.useCallback)(function () {
+    if (!showDeleteConfirm) return null;
+    return /*#__PURE__*/_react["default"].createElement(_confirmDialog["default"], {
+      name: "delete-row-confirm",
+      isopen: showDeleteConfirm,
+      title: _utils.TABLE_MESSAGES.deleteConfirmTitle,
+      message: confirmdelete,
+      iconclass: "wi wi-delete",
+      oktext: deleteoktext,
+      canceltext: deletecanceltext,
+      onOk: handleConfirmDelete,
+      onCancel: handleCancelDelete,
+      onClose: handleCancelDelete,
+      listener: {}
+    });
+  }, [showDeleteConfirm, handleConfirmDelete, handleCancelDelete, confirmdelete, deleteoktext, deletecanceltext]);
+  return {
+    internalDataset: internalDataset,
+    setInternalDataset: setInternalDataset,
+    deleteRecord: deleteRecord,
+    renderConfirmDialog: renderConfirmDialog
+  };
+};

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

@@ -0,0 +1,467 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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");
+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
+  },
+  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;
+  // 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 fieldRefs = (0, _react.useRef)({});
+  var fieldValidationErrorsRef = (0, _react.useRef)({});
+  var cellUpdateCallbacksRef = (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;
+    }
+
+    // Cancel add new row if configured for this mode
+    if (config.cancelsAddNewRowOnEdit && isAddingNewRow) {
+      setIsAddingNewRow(false);
+    }
+
+    // Reset editing data and start fresh
+    resetEditingData();
+    setEditingRowId(rowId);
+    editingRowDataRef.current = _objectSpread({}, rowData);
+    resetValidationState(editMode === "quickedit" ? "all" : undefined);
+    incrementSessionKey();
+  }, [editMode, config.cancelsAddNewRowOnEdit, isAddingNewRow, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData]);
+
+  // Cancel editing function
+  var cancelEditing = (0, _react.useCallback)(function () {
+    setEditingRowId(null);
+
+    // For inline mode, also cancel add new row
+    if (editMode === "inline") {
+      setIsAddingNewRow(false);
+    }
+    resetEditingData();
+
+    // Reset validation based on mode
+    resetValidationState(editMode === "quickedit" ? "all" : undefined);
+    incrementSessionKey();
+  }, [editMode, resetValidationState, setEditingRowId, setIsAddingNewRow, incrementSessionKey, resetEditingData]);
+
+  // 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();
+        }
+        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]);
+
+  // 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);
+      }
+      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]);
+
+  // 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);
+    }
+
+    // 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]);
+
+  // 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) {
+    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: 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)) {
+      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
+  };
+};