@wavemaker/react-runtime 11.14.3-rc.6401 → 11.15.0-1.246

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

@@ -10,17 +10,17 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _reactTable = require("@tanstack/react-table");
 var _utils = require("../utils");
 var _RowExpansionButton = require("./RowExpansionButton");
-var _excluded = ["name", "content"],
-  _excluded2 = ["className", "textAlign", "backgroundColor"];
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _TableDataRow = require("./TableDataRow");
+var _excluded = ["name", "content"];
 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; }
 // Constants
-var SYSTEM_COLUMN_IDS = ["multiSelect", "radioSelect", "row-index", "actions"];
+var SYSTEM_COLUMN_IDS = ["multiSelect", "radioSelect", "row-index", "rowIndex", "actions"];
 var DEFAULT_EXPANSION_WIDTH = "50px";
 var EXPANDED_ROW_BG_COLOR = "#f5f5f5";
 var DEFAULT_CELL_PADDING = "2rem";
@@ -40,10 +40,16 @@ var EmptyRow = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$rowClass = _ref.rowClass,
     rowClass = _ref$rowClass === void 0 ? "" : _ref$rowClass;
   return __jsx(_material.TableRow, {
-    className: rowClass
+    className: rowClass,
+    role: "row",
+    tabIndex: 0,
+    "data-row-id": "empty"
   }, __jsx(_material.TableCell, {
     colSpan: colSpan,
     className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " text-center"),
+    role: "cell",
+    "data-col-id": "empty-cell",
+    tabIndex: 0,
     style: {
       padding: DEFAULT_CELL_PADDING
     }
@@ -58,6 +64,9 @@ var ExpansionCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     config = _ref2.config;
   return __jsx(_material.TableCell, {
     className: "app-datagrid-cell row-expansion-cell",
+    role: "cell",
+    "data-col-id": "row-expansion",
+    tabIndex: 0,
     style: {
       textAlign: "center",
       position: "relative",
@@ -96,7 +105,7 @@ var ExpandedContent = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       var onLoad = function onLoad() {
         console.log("Partial content loaded for row:", rowId);
       };
-      return config.renderPartial(partialProps, onLoad);
+      return config.renderPartial(partialProps, onLoad, rowData);
     }
     if (config.children) {
       return config.children;
@@ -106,11 +115,16 @@ var ExpandedContent = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
   return __jsx(_material.TableRow, {
     className: "expanded-row-content",
     "data-row-id": rowId,
+    role: "row",
+    tabIndex: 0,
     style: {
       backgroundColor: EXPANDED_ROW_BG_COLOR
     }
   }, __jsx(_material.TableCell, {
     colSpan: colSpan,
+    role: "cell",
+    "data-col-id": "expanded-content",
+    tabIndex: 0,
     style: {
       padding: "16px",
       borderBottom: "1px solid #e0e0e0"
@@ -171,15 +185,16 @@ var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
     isRowSelected = _ref4.isRowSelected,
     _ref4$nodatamessage = _ref4.nodatamessage,
     nodatamessage = _ref4$nodatamessage === void 0 ? _utils.TABLE_MESSAGES.noDataMessage : _ref4$nodatamessage,
-    _ref4$loadingdatamsg = _ref4.loadingdatamsg,
-    loadingdatamsg = _ref4$loadingdatamsg === void 0 ? _utils.TABLE_MESSAGES.loadingMessage : _ref4$loadingdatamsg,
-    _ref4$isLoading = _ref4.isLoading,
-    isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
     rowExpansionConfig = _ref4.rowExpansionConfig,
-    _ref4$expandedRows = _ref4.expandedRows,
-    expandedRows = _ref4$expandedRows === void 0 ? new Set() : _ref4$expandedRows,
     toggleRowExpansion = _ref4.toggleRowExpansion,
-    isRowExpanded = _ref4.isRowExpanded;
+    isRowExpanded = _ref4.isRowExpanded,
+    ColClassSignature = _ref4.ColClassSignature,
+    rowsVersion = _ref4.rowsVersion,
+    tableData = _ref4.tableData,
+    _ref4$editingRowId = _ref4.editingRowId,
+    editingRowId = _ref4$editingRowId === void 0 ? null : _ref4$editingRowId,
+    _ref4$isAddingNewRow = _ref4.isAddingNewRow,
+    isAddingNewRow = _ref4$isAddingNewRow === void 0 ? false : _ref4$isAddingNewRow;
   var hasExpansion = !!(rowExpansionConfig !== null && rowExpansionConfig !== void 0 && rowExpansionConfig.show && toggleRowExpansion && isRowExpanded);
   var expansionInsertIndex = useExpansionPosition(hasExpansion, rowExpansionConfig || null, columns);
   var totalColumns = columns.length + (hasExpansion ? 1 : 0);
@@ -194,69 +209,56 @@ var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
       config: rowExpansionConfig
     });
   }, [hasExpansion, rowExpansionConfig, isRowExpanded, toggleRowExpansion]);
-  var renderDataRow = (0, _react.useCallback)(function (row) {
-    var rowId = row.id;
-    var isSelected = isRowSelected(rowId);
-    var isActive = isRowActive(rowId, isSelected);
-    var rowIsExpanded = (isRowExpanded === null || isRowExpanded === void 0 ? void 0 : isRowExpanded(rowId)) || false;
-    return __jsx(_react.Fragment, {
-      key: rowId
-    }, __jsx(_material.TableRow, {
-      className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(isActive ? "active" : "", " ").concat(rowClass),
-      onClick: function onClick(event) {
-        return onRowClick(event, row.original, rowId);
-      },
-      style: {
-        cursor: "pointer"
-      }
-    }, row.getVisibleCells().map(function (cell, cellIndex) {
-      var _cell$column$columnDe, _cell$column$columnDe2, _cell$column$columnDe3;
-      return __jsx(_react.Fragment, {
-        key: "cell-".concat(cellIndex)
-      }, hasExpansion && cellIndex === expansionInsertIndex && renderExpansionCell(rowId, row.original), __jsx(_material.TableCell, {
-        key: cell.id,
-        title: row.getValue(cell.column.id) ? String(row.getValue(cell.column.id)) : "",
-        className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " ").concat(((_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className) || "").trim(),
-        style: _objectSpread({
-          width: cell.column.getSize(),
-          textAlign: (_cell$column$columnDe2 = cell.column.columnDef.meta) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.textAlign,
-          backgroundColor: (_cell$column$columnDe3 = cell.column.columnDef.meta) === null || _cell$column$columnDe3 === void 0 ? void 0 : _cell$column$columnDe3.backgroundColor
-        }, function () {
-          var _ref5 = cell.column.columnDef.meta || {},
-            className = _ref5.className,
-            textAlign = _ref5.textAlign,
-            backgroundColor = _ref5.backgroundColor,
-            otherMeta = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
-          return otherMeta;
-        }())
-      }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
-    })), hasExpansion && rowIsExpanded && rowExpansionConfig && __jsx(ExpandedContent, {
-      rowId: rowId,
-      rowData: row.original,
-      config: rowExpansionConfig,
-      colSpan: totalColumns
-    }));
-  }, [isRowSelected, isRowActive, rowClass, onRowClick, hasExpansion, expansionInsertIndex, renderExpansionCell, isRowExpanded, rowExpansionConfig, totalColumns]);
 
   // Render logic
   var renderTableContent = function renderTableContent() {
     var rows = table.getRowModel().rows;
-    if (rows.length === 0) {
+    if (rows.length === 0 && !isAddingNewRow) {
       return __jsx(EmptyRow, {
         colSpan: totalColumns,
         message: nodatamessage,
         rowClass: rowClass
       });
     }
-    return rows.map(renderDataRow);
+    return rows.map(function (row) {
+      var rowId = row.id;
+      var isSelected = isRowSelected(rowId);
+      var isActive = isRowActive(rowId, isSelected);
+      var rowIsExpanded = (isRowExpanded === null || isRowExpanded === void 0 ? void 0 : isRowExpanded(rowId)) || false;
+      var isEditingRow = editingRowId === rowId;
+      return __jsx(_TableDataRow.TableDataRow, {
+        key: rowId,
+        row: row,
+        rowId: rowId,
+        index: row.index,
+        isSelected: isSelected,
+        isActive: isActive,
+        rowIsExpanded: rowIsExpanded,
+        isEditingRow: isEditingRow,
+        hasExpansion: hasExpansion,
+        expansionInsertIndex: expansionInsertIndex,
+        renderExpansionCell: renderExpansionCell,
+        rowClass: rowClass,
+        onRowClick: onRowClick,
+        ColClassSignature: ColClassSignature || "",
+        rowsVersion: rowsVersion || 0,
+        tableData: tableData || [],
+        ExpandedContent: ExpandedContent,
+        rowExpansionConfig: rowExpansionConfig,
+        totalColumns: totalColumns
+      });
+    });
   };
   return __jsx(_material.TableBody, {
     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"];
+  var keys = ["rowClass", "formposition", "nodatamessage", "rowsVersion", "tableData", "ColClassSignature", "activeRowIds", "selectedRowIds", "editingRowId", "table", "renderAddNewRow", "isAddingNewRow"];
   return keys.every(function (key) {
+    if (key === "activeRowIds" || key === "selectedRowIds") {
+      return (0, _isEqual["default"])(prev[key], current[key]);
+    }
     return prev[key] === current[key];
   });
 });

package/components/data/table/components/TableDataRow.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableDataRow = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _RowCells = require("./RowCells");
+var _useEditedRows = require("../hooks/use-edited-rows");
+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" != _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 TableDataRowComponent = function TableDataRowComponent(_ref) {
+  var row = _ref.row,
+    rowId = _ref.rowId,
+    isSelected = _ref.isSelected,
+    isActive = _ref.isActive,
+    rowIsExpanded = _ref.rowIsExpanded,
+    isEditingRow = _ref.isEditingRow,
+    hasExpansion = _ref.hasExpansion,
+    expansionInsertIndex = _ref.expansionInsertIndex,
+    renderExpansionCell = _ref.renderExpansionCell,
+    rowClass = _ref.rowClass,
+    onRowClick = _ref.onRowClick,
+    ColClassSignature = _ref.ColClassSignature,
+    rowsVersion = _ref.rowsVersion,
+    tableData = _ref.tableData,
+    ExpandedContent = _ref.ExpandedContent,
+    rowExpansionConfig = _ref.rowExpansionConfig,
+    totalColumns = _ref.totalColumns,
+    index = _ref.index;
+  // Subscribe to edits for this specific row.
+  // This hook will only trigger a re-render for THIS component if the data for this row changes.
+  var editedTableData = (0, _useEditedRows.useEditedRow)(rowId);
+
+  // Create a merged data object that proxies `getProperty` to return edited values
+  var mergedRowData = (0, _react.useMemo)(function () {
+    // If no edits, return original (ensure referential stability if possible, though row.original might change)
+    if (!editedTableData) {
+      return row.original;
+    }
+
+    // Create a shallow copy first
+    // we use a safe approach: spread original, then spread edits
+    var merged = _objectSpread(_objectSpread({}, row.original), editedTableData);
+
+    // Now strict overrides for getProperty
+    // If the original data has a getProperty method (WaveMaker specific), we need to wrap it.
+    if (typeof row.original.getProperty === "function") {
+      // Define getProperty on the merged object
+      // We use Object.defineProperty to make it non-enumerable if strictness is needed, but simple assignment is usually fine.
+      merged.getProperty = function (key) {
+        // 1. Check if we have an edited value for this key
+        if (editedTableData && Object.prototype.hasOwnProperty.call(editedTableData, key)) {
+          return editedTableData[key];
+        }
+        // 2. Fallback to original getProperty
+        return row.original.getProperty(key);
+      };
+    }
+    return merged;
+  }, [row.original, editedTableData]);
+  return __jsx(_react.Fragment, {
+    key: rowId
+  }, __jsx(_material.TableRow, {
+    className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(isActive ? "active" : "", " ").concat(rowClass),
+    onClick: function onClick(event) {
+      return onRowClick(event, row.original, rowId);
+    },
+    "data-row-id": row.index,
+    role: "row",
+    tabIndex: 0,
+    style: {
+      cursor: "pointer"
+    },
+    "data-editing": isEditingRow
+  }, __jsx(_RowCells.RowCells, {
+    cells: row.getVisibleCells(),
+    hasExpansion: hasExpansion,
+    expansionInsertIndex: expansionInsertIndex,
+    renderExpansionCell: renderExpansionCell,
+    rowId: rowId
+    // Pass the merged data which includes the "live" edited values and the smart getProperty
+    ,
+    rowData: mergedRowData,
+    ColClassSignature: ColClassSignature,
+    rowsVersion: rowsVersion,
+    tableData: tableData,
+    isEditingRow: isEditingRow,
+    isSelected: isSelected
+  })), hasExpansion && rowIsExpanded && rowExpansionConfig && __jsx(ExpandedContent, {
+    rowId: rowId,
+    rowData: row.original,
+    config: rowExpansionConfig,
+    colSpan: totalColumns
+  }));
+};
+var TableDataRow = exports.TableDataRow = /*#__PURE__*/(0, _react.memo)(TableDataRowComponent, function (prev, next) {
+  var keys = ["isSelected", "isActive", "rowIsExpanded", "isEditingRow", "rowClass", "ColClassSignature", "rowsVersion", "row", "index"];
+  return keys.every(function (key) {
+    return prev[key] === next[key];
+  });
+});