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

package/components/data/table/components/SummaryRowFooter.js

@@ -1,46 +1,39 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SummaryRowFooter = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _SummaryRow = require("./SummaryRow");
-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;
-/**
- * SummaryRowFooter Component
- * Renders the table footer section containing summary rows.
- * Displays aggregated data like totals, averages, etc.
- */
-var SummaryRowFooterBase = function SummaryRowFooterBase(_ref) {
-  var summaryRowDefs = _ref.summaryRowDefs,
-    summaryRowDefObjects = _ref.summaryRowDefObjects,
-    columns = _ref.columns,
-    tableName = _ref.tableName,
-    summaryRowColumnShow = _ref.summaryRowColumnShow;
-  // Don't render if no summary rows
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { TableFooter } from "@mui/material";
+import { SummaryRow } from "./SummaryRow";
+const SummaryRowFooterBase = ({
+  summaryRowDefs,
+  summaryRowDefObjects,
+  columns,
+  tableName,
+  summaryRowColumnShow
+}) => {
   if (!summaryRowDefs || summaryRowDefs.length === 0) {
     return null;
   }
-  return __jsx(_material.TableFooter, {
-    className: "app-datagrid-footer",
-    style: {
-      borderTop: "3px solid #eee"
-    },
-    "data-table-name": tableName
-  }, summaryRowDefs.map(function (rowDef, rowIndex) {
-    return __jsx(_SummaryRow.SummaryRow, {
-      key: "summary-row-".concat(rowIndex),
-      rowDef: rowDef,
-      rowDefObject: summaryRowDefObjects[rowIndex] || {},
-      rowIndex: rowIndex,
-      columns: columns,
-      summaryRowColumnShow: summaryRowColumnShow
-    });
-  }));
+  return /* @__PURE__ */ jsx(
+    TableFooter,
+    {
+      className: "app-datagrid-footer",
+      style: { borderTop: "3px solid #eee" },
+      "data-table-name": tableName,
+      children: summaryRowDefs.map((rowDef, rowIndex) => /* @__PURE__ */ jsx(
+        SummaryRow,
+        {
+          rowDef,
+          rowDefObject: summaryRowDefObjects[rowIndex] || {},
+          rowIndex,
+          columns,
+          summaryRowColumnShow
+        },
+        `summary-row-${rowIndex}`
+      ))
+    }
+  );
+};
+const SummaryRowFooter = memo(SummaryRowFooterBase);
+SummaryRowFooter.displayName = "SummaryRowFooter";
+export {
+  SummaryRowFooter
 };
-var SummaryRowFooter = exports.SummaryRowFooter = /*#__PURE__*/(0, _react.memo)(SummaryRowFooterBase);
-SummaryRowFooter.displayName = "SummaryRowFooter";

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

@@ -1,68 +1,66 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableBodyComponent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _utils = require("../utils");
-var _RowExpansionButton = require("./RowExpansionButton");
-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", "rowIndex", "actions"];
-var DEFAULT_EXPANSION_WIDTH = "50px";
-var EXPANDED_ROW_BG_COLOR = "#f5f5f5";
-var DEFAULT_CELL_PADDING = "2rem";
-
-// Helper functions
-var isSystemColumn = function isSystemColumn(columnId) {
-  return SYSTEM_COLUMN_IDS.includes(columnId);
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
 };
-var parsePosition = function parsePosition(position) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useCallback } from "react";
+import { TableBody, TableRow, TableCell, Box } from "@mui/material";
+import { TABLE_CSS_CLASSES, TABLE_MESSAGES } from "../utils";
+import { RowExpansionButton } from "./RowExpansionButton";
+import isEqual from "lodash-es/isEqual";
+import { TableDataRow } from "./TableDataRow";
+const SYSTEM_COLUMN_IDS = ["multiSelect", "radioSelect", "row-index", "rowIndex", "actions"];
+const DEFAULT_EXPANSION_WIDTH = "50px";
+const EXPANDED_ROW_BG_COLOR = "#f5f5f5";
+const DEFAULT_CELL_PADDING = "2rem";
+const isSystemColumn = (columnId) => SYSTEM_COLUMN_IDS.includes(columnId);
+const parsePosition = (position) => {
   if (!position) return 0;
   if (position === "-1" || position === -1) return -1;
   return typeof position === "number" ? position : Number(position);
 };
-var EmptyRow = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var colSpan = _ref.colSpan,
-    message = _ref.message,
-    _ref$rowClass = _ref.rowClass,
-    rowClass = _ref$rowClass === void 0 ? "" : _ref$rowClass;
-  return __jsx(_material.TableRow, {
-    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
+const EmptyRow = memo(
+  ({ colSpan, message, rowClass = "" }) => /* @__PURE__ */ jsx(TableRow, { className: rowClass, role: "row", tabIndex: 0, "data-row-id": "empty", children: /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      colSpan,
+      className: `${TABLE_CSS_CLASSES.tableCell} text-center`,
+      role: "cell",
+      "data-col-id": "empty-cell",
+      tabIndex: 0,
+      style: { padding: DEFAULT_CELL_PADDING },
+      children: message
     }
-  }, message));
-});
+  ) })
+);
 EmptyRow.displayName = "EmptyRow";
-var ExpansionCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
-  var rowId = _ref2.rowId,
-    rowData = _ref2.rowData,
-    isExpanded = _ref2.isExpanded,
-    onToggle = _ref2.onToggle,
-    config = _ref2.config;
-  return __jsx(_material.TableCell, {
+const ExpansionCell = memo(({ rowId, rowData, isExpanded, onToggle, config }) => /* @__PURE__ */ jsx(
+  TableCell,
+  {
     className: "app-datagrid-cell row-expansion-cell",
     role: "cell",
     "data-col-id": "row-expansion",
@@ -72,40 +70,33 @@ var ExpansionCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       position: "relative",
       width: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
       padding: "4px"
-    }
-  }, __jsx(_material.Box, {
-    component: "span",
-    className: "row-expansion-column",
-    "data-identifier": "rowExpansionButtons"
-  }, __jsx(_RowExpansionButton.RowExpansionButton, {
-    rowId: rowId,
-    rowData: rowData,
-    isExpanded: isExpanded,
-    onToggle: onToggle,
-    config: config
-  })));
-});
+    },
+    children: /* @__PURE__ */ jsx(Box, { component: "span", className: "row-expansion-column", "data-identifier": "rowExpansionButtons", children: /* @__PURE__ */ jsx(
+      RowExpansionButton,
+      {
+        rowId,
+        rowData,
+        isExpanded,
+        onToggle,
+        config
+      }
+    ) })
+  }
+));
 ExpansionCell.displayName = "ExpansionCell";
-var ExpandedContent = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var rowId = _ref3.rowId,
-    rowData = _ref3.rowData,
-    config = _ref3.config,
-    colSpan = _ref3.colSpan,
-    onInstanceLoad = _ref3.onInstanceLoad;
-  var renderContent = (0, _react.useCallback)(function () {
+const ExpandedContent = memo(({ rowId, rowData, config, colSpan, onInstanceLoad }) => {
+  const renderContent = useCallback(() => {
     if (config.renderPartial) {
-      var name = config.name,
-        content = config.content,
-        restConfig = (0, _objectWithoutProperties2["default"])(config, _excluded);
-      var partialProps = _objectSpread({
+      const _a = config, { name, content } = _a, restConfig = __objRest(_a, ["name", "content"]);
+      const partialProps = __spreadValues({
         name: name || "table_row",
-        content: content,
-        rowData: rowData,
-        rowId: rowId
+        content,
+        rowData,
+        rowId
       }, restConfig);
-      var onLoad = function onLoad(widgetInstance) {
+      const onLoad = (widgetInstance) => {
         if (onInstanceLoad) {
-          onInstanceLoad(rowId, widgetInstance !== null && widgetInstance !== void 0 ? widgetInstance : {}, rowData);
+          onInstanceLoad(rowId, widgetInstance != null ? widgetInstance : {}, rowData);
         }
       };
       return config.renderPartial(partialProps, onLoad, rowData);
@@ -113,166 +104,179 @@ var ExpandedContent = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
     if (config.children) {
       return config.children;
     }
-    return __jsx("div", null, config.content || "No content available");
+    return /* @__PURE__ */ jsx("div", { children: config.content || "No content available" });
   }, [config, rowData, rowId, onInstanceLoad]);
-  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"
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      className: "expanded-row-content",
+      "data-row-id": rowId,
+      role: "row",
+      tabIndex: 0,
+      style: { backgroundColor: EXPANDED_ROW_BG_COLOR },
+      children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan,
+          role: "cell",
+          "data-col-id": "expanded-content",
+          tabIndex: 0,
+          style: {
+            padding: "16px",
+            borderBottom: "1px solid #e0e0e0"
+          },
+          children: renderContent()
+        }
+      )
     }
-  }, renderContent()));
+  );
 });
 ExpandedContent.displayName = "ExpandedContent";
-
-// Custom hook for expansion logic
-var useExpansionPosition = function useExpansionPosition(hasExpansion, rowExpansionConfig, columns) {
-  return (0, _react.useMemo)(function () {
+const useExpansionPosition = (hasExpansion, rowExpansionConfig, columns) => {
+  return useMemo(() => {
     if (!hasExpansion || !rowExpansionConfig) return -1;
-    var position = rowExpansionConfig.position;
-    var parsedPosition = parsePosition(position);
-
-    // Insert before last column
+    const { position } = rowExpansionConfig;
+    const parsedPosition = parsePosition(position);
     if (parsedPosition === -1) {
       return columns.length - 1;
     }
-
-    // Position is a number - calculate based on data columns
     if (!isNaN(parsedPosition)) {
-      var firstDataColumnIndex = columns.findIndex(function (col) {
-        return !isSystemColumn(col.id);
-      });
+      const firstDataColumnIndex = columns.findIndex((col) => !isSystemColumn(col.id));
       return Math.max(0, firstDataColumnIndex + parsedPosition);
     }
-
-    // Position is a column name
     if (typeof position === "string") {
-      var columnIndex = columns.findIndex(function (col) {
-        // Check direct match with id or accessorKey
+      const columnIndex = columns.findIndex((col) => {
         if (col.id === position || col.accessorKey === position) {
           return true;
         }
-        // For nested paths like "name.location.url", TanStack converts dots to underscores in id
-        var normalizedPosition = position.replace(/\./g, "_");
+        const normalizedPosition = position.replace(/\./g, "_");
         return col.id === normalizedPosition;
       });
-      // Return index + 1 to place AFTER the named column
       return columnIndex >= 0 ? columnIndex + 1 : 0;
     }
     return 0;
   }, [hasExpansion, rowExpansionConfig, columns]);
 };
-
-// Main component
-var TableBodyComponentBase = function TableBodyComponentBase(_ref4) {
-  var table = _ref4.table,
-    columns = _ref4.columns,
-    _ref4$rowClass = _ref4.rowClass,
-    rowClass = _ref4$rowClass === void 0 ? "" : _ref4$rowClass,
-    _ref4$formposition = _ref4.formposition,
-    formposition = _ref4$formposition === void 0 ? "bottom" : _ref4$formposition,
-    renderAddNewRow = _ref4.renderAddNewRow,
-    onRowClick = _ref4.onRowClick,
-    isRowActive = _ref4.isRowActive,
-    isRowSelected = _ref4.isRowSelected,
-    _ref4$nodatamessage = _ref4.nodatamessage,
-    nodatamessage = _ref4$nodatamessage === void 0 ? _utils.TABLE_MESSAGES.noDataMessage : _ref4$nodatamessage,
-    rowExpansionConfig = _ref4.rowExpansionConfig,
-    toggleRowExpansion = _ref4.toggleRowExpansion,
-    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,
-    registerRowDefInstance = _ref4.registerRowDefInstance,
-    customExpressionColumns = _ref4.customExpressionColumns,
-    _ref4$customColumnsRe = _ref4.customColumnsRevision,
-    customColumnsRevision = _ref4$customColumnsRe === void 0 ? 0 : _ref4$customColumnsRe,
-    _ref4$columnsVersion = _ref4.columnsVersion,
-    columnsVersion = _ref4$columnsVersion === void 0 ? 0 : _ref4$columnsVersion;
-  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);
-  var renderExpansionCell = (0, _react.useCallback)(function (rowId, rowData) {
-    if (!hasExpansion || !rowExpansionConfig) return null;
-    return __jsx(ExpansionCell, {
-      key: "expansion-".concat(rowId),
-      rowId: rowId,
-      rowData: rowData,
-      isExpanded: isRowExpanded(rowId),
-      onToggle: toggleRowExpansion,
-      config: rowExpansionConfig
-    });
-  }, [hasExpansion, rowExpansionConfig, isRowExpanded, toggleRowExpansion]);
-
-  // Render logic
-  var renderTableContent = function renderTableContent() {
-    var rows = table.getRowModel().rows;
+const TableBodyComponentBase = ({
+  table,
+  columns,
+  rowClass = "",
+  formposition = "bottom",
+  renderAddNewRow,
+  onRowClick,
+  isRowActive,
+  isRowSelected,
+  nodatamessage = TABLE_MESSAGES.noDataMessage,
+  rowExpansionConfig,
+  toggleRowExpansion,
+  isRowExpanded,
+  ColClassSignature,
+  rowsVersion,
+  tableData,
+  editingRowId = null,
+  isAddingNewRow = false,
+  registerRowDefInstance,
+  customExpressionColumns,
+  customColumnsRevision = 0,
+  columnsVersion = 0
+}) => {
+  const hasExpansion = !!((rowExpansionConfig == null ? void 0 : rowExpansionConfig.show) && toggleRowExpansion && isRowExpanded);
+  const expansionInsertIndex = useExpansionPosition(
+    hasExpansion,
+    rowExpansionConfig || null,
+    columns
+  );
+  const totalColumns = columns.length + (hasExpansion ? 1 : 0);
+  const renderExpansionCell = useCallback(
+    (rowId, rowData) => {
+      if (!hasExpansion || !rowExpansionConfig) return null;
+      return /* @__PURE__ */ jsx(
+        ExpansionCell,
+        {
+          rowId,
+          rowData,
+          isExpanded: isRowExpanded(rowId),
+          onToggle: toggleRowExpansion,
+          config: rowExpansionConfig
+        },
+        `expansion-${rowId}`
+      );
+    },
+    [hasExpansion, rowExpansionConfig, isRowExpanded, toggleRowExpansion]
+  );
+  const renderTableContent = () => {
+    const rows = table.getRowModel().rows;
     if (rows.length === 0 && !isAddingNewRow) {
-      return __jsx(EmptyRow, {
-        colSpan: totalColumns,
-        message: nodatamessage,
-        rowClass: rowClass
-      });
+      return /* @__PURE__ */ jsx(EmptyRow, { colSpan: totalColumns, message: nodatamessage, rowClass });
     }
-    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,
-        onInstanceLoad: registerRowDefInstance,
-        customExpressionColumns: customExpressionColumns,
-        customColumnsRevision: customColumnsRevision,
-        columnsVersion: columnsVersion
-      });
+    return rows.map((row) => {
+      const rowId = row.id;
+      const isSelected = isRowSelected(rowId);
+      const isActive = isRowActive(rowId, isSelected);
+      const rowIsExpanded = (isRowExpanded == null ? void 0 : isRowExpanded(rowId)) || false;
+      const isEditingRow = editingRowId === rowId;
+      return /* @__PURE__ */ jsx(
+        TableDataRow,
+        {
+          row,
+          rowId,
+          index: row.index,
+          isSelected,
+          isActive,
+          rowIsExpanded,
+          isEditingRow,
+          hasExpansion,
+          expansionInsertIndex,
+          renderExpansionCell,
+          rowClass,
+          onRowClick,
+          ColClassSignature: ColClassSignature || "",
+          rowsVersion: rowsVersion || 0,
+          tableData: tableData || [],
+          ExpandedContent,
+          rowExpansionConfig,
+          totalColumns,
+          onInstanceLoad: registerRowDefInstance,
+          customExpressionColumns,
+          customColumnsRevision,
+          columnsVersion
+        },
+        rowId
+      );
     });
   };
-  return __jsx(_material.TableBody, {
-    className: "app-grid-content ".concat(_utils.TABLE_CSS_CLASSES.gridBody)
-  }, formposition === "top" && renderAddNewRow(), renderTableContent(), formposition === "bottom" && renderAddNewRow());
+  return /* @__PURE__ */ jsxs(TableBody, { className: `app-grid-content ${TABLE_CSS_CLASSES.gridBody}`, children: [
+    formposition === "top" && renderAddNewRow(),
+    renderTableContent(),
+    formposition === "bottom" && renderAddNewRow()
+  ] });
 };
-var TableBodyComponent = exports.TableBodyComponent = /*#__PURE__*/(0, _react.memo)(TableBodyComponentBase, function (prev, current) {
-  var keys = ["rowClass", "formposition", "nodatamessage", "rowsVersion", "tableData", "ColClassSignature", "activeRowIds", "selectedRowIds", "editingRowId", "table", "renderAddNewRow", "isAddingNewRow", "customExpressionColumns", "customColumnsRevision", "columnsVersion"];
-  return keys.every(function (key) {
+const TableBodyComponent = memo(TableBodyComponentBase, (prev, current) => {
+  const keys = [
+    "rowClass",
+    "formposition",
+    "nodatamessage",
+    "rowsVersion",
+    "tableData",
+    "ColClassSignature",
+    "activeRowIds",
+    "selectedRowIds",
+    "editingRowId",
+    "table",
+    "renderAddNewRow",
+    "isAddingNewRow",
+    "customExpressionColumns",
+    "customColumnsRevision",
+    "columnsVersion"
+  ];
+  return keys.every((key) => {
     if (key === "activeRowIds" || key === "selectedRowIds") {
-      return (0, _isEqual["default"])(prev[key], current[key]);
+      return isEqual(prev[key], current[key]);
     }
     return prev[key] === current[key];
   });
 });
-TableBodyComponent.displayName = "TableBodyComponent";
+TableBodyComponent.displayName = "TableBodyComponent";
+export {
+  TableBodyComponent
+};