@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/data/table/utils/buildSelectionColumns.js

@@ -1,78 +1,48 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buildSelectionColumns = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _index = require("./index");
-var __jsx = _react["default"].createElement;
-var buildSelectionColumns = exports.buildSelectionColumns = function buildSelectionColumns(_ref) {
-  var useRadioSelect = _ref.useRadioSelect,
-    useMultiSelect = _ref.useMultiSelect,
-    selectedRowIds = _ref.selectedRowIds,
-    handleRadioSelection = _ref.handleRadioSelection,
-    handleMultiSelection = _ref.handleMultiSelection,
-    handleSelectAll = _ref.handleSelectAll,
-    internalDataset = _ref.internalDataset,
-    _ref$radioselecttitle = _ref.radioselecttitle,
-    radioselecttitle = _ref$radioselecttitle === void 0 ? "" : _ref$radioselecttitle,
-    _ref$radioselectarial = _ref.radioselectarialabel,
-    radioselectarialabel = _ref$radioselectarial === void 0 ? _index.TABLE_MESSAGES.radioSelectAriaLabel : _ref$radioselectarial,
-    _ref$multiselecttitle = _ref.multiselecttitle,
-    multiselecttitle = _ref$multiselecttitle === void 0 ? "" : _ref$multiselecttitle,
-    _ref$multiselectarial = _ref.multiselectarialabel,
-    multiselectarialabel = _ref$multiselectarial === void 0 ? _index.TABLE_MESSAGES.multiSelectAriaLabel : _ref$multiselectarial,
-    _ref$tableName = _ref.tableName,
-    tableName = _ref$tableName === void 0 ? "table" : _ref$tableName;
-  // Radio select column
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Radio, Checkbox, FormControlLabel, Tooltip } from "@mui/material";
+import { TABLE_MESSAGES } from "./constants";
+const buildSelectionColumns = ({
+  useRadioSelect,
+  useMultiSelect,
+  selectedRowIds,
+  handleRadioSelection,
+  handleMultiSelection,
+  handleSelectAll,
+  internalDataset,
+  radioselecttitle = "",
+  radioselectarialabel = TABLE_MESSAGES.radioSelectAriaLabel,
+  multiselecttitle = "",
+  multiselectarialabel = TABLE_MESSAGES.multiSelectAriaLabel,
+  tableName = "table"
+}) => {
   if (useRadioSelect) {
     return {
       id: "radioSelect",
-      header: function header() {
-        return __jsx(_material.Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "center"
+      header: () => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" } }),
+      cell: ({ row }) => {
+        const rowId = row.id;
+        const isSelected = row.getIsSelected();
+        return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle, placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsx(
+              Radio,
+              {
+                checked: isSelected,
+                onChange: () => handleRadioSelection(rowId, row.original),
+                value: rowId,
+                name: `wmRadioselect-${tableName}`,
+                inputProps: {
+                  "aria-label": radioselectarialabel
+                },
+                rowselectinput: "",
+                size: "small"
+              }
+            ),
+            label: "",
+            className: "caption"
           }
-        });
-      },
-      cell: function cell(_ref2) {
-        var row = _ref2.row;
-        var rowId = row.id;
-        // Use TanStack Table's built-in selection state for reactive cell updates
-        var isSelected = row.getIsSelected();
-        return __jsx(_material.Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "center"
-          }
-        }, __jsx(_material.Tooltip, {
-          title: radioselecttitle,
-          placement: "top"
-        }, __jsx(_material.Box, {
-          className: "radio app-radio"
-        }, __jsx(_material.FormControlLabel, {
-          control: __jsx(_material.Radio, {
-            checked: isSelected,
-            onChange: function onChange() {
-              return handleRadioSelection(rowId, row.original);
-            },
-            value: rowId,
-            name: "wmRadioselect-".concat(tableName),
-            inputProps: {
-              "aria-label": radioselectarialabel
-            }
-            // @ts-ignore - Custom attribute for WaveMaker specific functionality
-            ,
-            rowselectinput: "",
-            size: "small"
-          }),
-          label: "",
-          className: "caption"
-        }))));
+        ) }) }) });
       },
       size: 40,
       minSize: 40,
@@ -80,76 +50,52 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
       enableResizing: false
     };
   }
-
-  // Multiselect column
   if (useMultiSelect) {
     return {
       id: "multiSelect",
-      header: function header() {
-        // Use selectedRowIds and internalDataset directly for reliable state
-        var selectedCount = selectedRowIds.length;
-        var isAllSelected = selectedCount > 0 && selectedCount === internalDataset.length;
-        return __jsx(_material.Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "center",
-            width: "100%"
-          }
-        }, __jsx(_material.Box, {
-          className: "app-checkbox checkbox"
-        }, __jsx(_material.Checkbox, {
-          checked: isAllSelected,
-          indeterminate: false,
-          onChange: function onChange(e) {
-            return handleSelectAll(e.target.checked);
-          },
-          size: "small",
-          inputProps: {
-            "aria-label": "Select all rows"
-          },
-          sx: {
-            padding: 0
+      header: () => {
+        const selectedCount = selectedRowIds.length;
+        const isAllSelected = selectedCount > 0 && selectedCount === internalDataset.length;
+        return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isAllSelected,
+            indeterminate: false,
+            onChange: (e) => handleSelectAll(e.target.checked),
+            size: "small",
+            inputProps: {
+              "aria-label": "Select all rows"
+            },
+            sx: {
+              padding: 0
+            }
           }
-        })));
+        ) }) });
       },
-      cell: function cell(_ref3) {
-        var row = _ref3.row;
-        var rowId = row.id;
-        // Use TanStack Table's built-in selection state for reactive cell updates
-        var isSelected = row.getIsSelected();
-        return __jsx(_material.Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "center"
-          }
-        }, __jsx(_material.Tooltip, {
-          title: multiselecttitle,
-          placement: "top"
-        }, __jsx(_material.Box, {
-          className: "app-checkbox checkbox"
-        }, __jsx(_material.Checkbox, {
-          checked: isSelected,
-          onChange: function onChange(e) {
-            return handleMultiSelection(rowId, row.original, e.target.checked);
-          },
-          value: rowId,
-          name: "gridMultiSelect",
-          inputProps: {
-            "aria-label": multiselectarialabel,
-            role: "checkbox",
-            "aria-live": "assertive"
-          },
-          size: "small",
-          sx: {
-            padding: 0
-          }
-        }))), isSelected ? __jsx("span", {
-          className: "sr-only",
-          "aria-live": "assertive"
-        }, "Row Selected") : __jsx("span", {
-          className: "sr-only",
-          "aria-live": "assertive"
-        }, "Row Deselected"));
+      cell: ({ row }) => {
+        const rowId = row.id;
+        const isSelected = row.getIsSelected();
+        return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "center" }, children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle, placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              onChange: (e) => handleMultiSelection(rowId, row.original, e.target.checked),
+              value: rowId,
+              name: "gridMultiSelect",
+              inputProps: {
+                "aria-label": multiselectarialabel,
+                role: "checkbox",
+                "aria-live": "assertive"
+              },
+              size: "small",
+              sx: {
+                padding: 0
+              }
+            }
+          ) }) }),
+          isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Selected" }) : /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Deselected" })
+        ] });
       },
       size: 40,
       minSize: 40,
@@ -158,4 +104,7 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
     };
   }
   return null;
-};
+};
+export {
+  buildSelectionColumns
+};

package/components/data/table/utils/columnBuilder.d.ts

@@ -8,7 +8,7 @@ export declare const createRowIndexColumn: () => ColumnDef<any>;
 /**
  * Creates data column definition from WmTableColumnProps
  */
-export declare const createDataColumn: (wmColumn: WmTableColumnProps, renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode) => ColumnDef<any>;
+export declare const createDataColumn: (wmColumn: WmTableColumnProps, renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode, index?: number) => ColumnDef<any>;
 /**
  * Creates column definitions from table columns
  */

package/components/data/table/utils/columnBuilder.js

@@ -1,102 +1,83 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getActionColumnSize = exports.createRowIndexColumn = exports.createEditingActionButtons = exports.createDefaultColumnProps = exports.createDataColumns = exports.createDataColumn = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _lodashEs = require("lodash-es");
-var _ = require(".");
-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; }
-/**
- * Creates row index column definition
- */
-var createRowIndexColumn = exports.createRowIndexColumn = function createRowIndexColumn() {
-  return {
-    id: "rowIndex",
-    header: "S. No.",
-    size: 70,
-    minSize: 70,
-    maxSize: 70,
-    enableResizing: false,
-    cell: function cell(_ref) {
-      var row = _ref.row,
-        table = _ref.table;
-      // Get current page information for continuous numbering across pages
-      var pageIndex = table.getState().pagination.pageIndex;
-      var pageSize = table.getState().pagination.pageSize;
-
-      // Check if we're using manual pagination (server-side)
-      var isManualPagination = table.options.manualPagination;
-      var rowPositionOnPage;
-      if (isManualPagination) {
-        // For server-side pagination, use the row's index in the current data
-        rowPositionOnPage = row.index;
-      } else {
-        // For client-side pagination, find position within paginated rows
-        var paginationModel = table.getPaginationRowModel();
-        var currentPageRows = paginationModel.rows;
-        rowPositionOnPage = currentPageRows.findIndex(function (pageRow) {
-          return pageRow.id === row.id;
-        });
-      }
-
-      // Calculate continuous row number across pages
-      var rowNumber = pageIndex * pageSize + rowPositionOnPage + 1;
-      return __jsx(_material.Box, {
-        "data-col-identifier": "rowIndex"
-      }, rowNumber);
-    },
-    enableSorting: false
-  };
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
 };
-
-/**
- * Creates data column definition from WmTableColumnProps
- */
-var createDataColumn = exports.createDataColumn = function createDataColumn(wmColumn, renderCell) {
-  var _wmColumn$colClass, _wmColumn$styles;
-  var colClassProp = (_wmColumn$colClass = wmColumn.colClass) !== null && _wmColumn$colClass !== void 0 ? _wmColumn$colClass : wmColumn["col-class"];
-  // Extract width from either width prop or styles prop
-  var columnSize;
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { get } from "lodash-es";
+import { parseWidth } from ".";
+const createRowIndexColumn = () => ({
+  id: "rowIndex",
+  header: "S. No.",
+  size: 70,
+  minSize: 70,
+  maxSize: 70,
+  enableResizing: false,
+  cell: ({ row, table }) => {
+    const pageIndex = table.getState().pagination.pageIndex;
+    const pageSize = table.getState().pagination.pageSize;
+    const isManualPagination = table.options.manualPagination;
+    let rowPositionOnPage;
+    if (isManualPagination) {
+      rowPositionOnPage = row.index;
+    } else {
+      const paginationModel = table.getPaginationRowModel();
+      const currentPageRows = paginationModel.rows;
+      rowPositionOnPage = currentPageRows.findIndex((pageRow) => pageRow.id === row.id);
+    }
+    const rowNumber = pageIndex * pageSize + rowPositionOnPage + 1;
+    return /* @__PURE__ */ jsx(Box, { "data-col-identifier": "rowIndex", children: rowNumber });
+  },
+  enableSorting: false
+});
+const createDataColumn = (wmColumn, renderCell, index = 0) => {
+  var _a, _b;
+  const colClassProp = (_a = wmColumn.colClass) != null ? _a : wmColumn["col-class"];
+  let columnSize;
   if (wmColumn.width) {
     columnSize = parseInt(wmColumn.width);
-  } else if ((_wmColumn$styles = wmColumn.styles) !== null && _wmColumn$styles !== void 0 && _wmColumn$styles.width) {
-    columnSize = (0, _.parseWidth)(wmColumn.styles.width);
+  } else if ((_b = wmColumn.styles) == null ? void 0 : _b.width) {
+    columnSize = parseWidth(wmColumn.styles.width);
   }
-  return _objectSpread(_objectSpread({
-    accessorKey: wmColumn.field || wmColumn.name,
+  const accessorKey = wmColumn.field || wmColumn.name;
+  const columnId = (accessorKey == null ? void 0 : accessorKey.replace(/\./g, "_")) || (typeof wmColumn.caption === "string" && wmColumn.caption ? wmColumn.caption : void 0) || `column_${index}`;
+  return __spreadProps(__spreadValues({
+    id: columnId,
+    accessorKey,
     // Use sortby field for sorting if provided, otherwise use the display field
     // Supports nested properties like "department.store.employee"
-    accessorFn: wmColumn.sortby ? function (row) {
-      return (0, _lodashEs.get)(row, wmColumn.sortby || "");
-    } : undefined,
+    accessorFn: wmColumn.sortby ? (row) => get(row, wmColumn.sortby || "") : void 0,
     header: wmColumn.caption,
     size: columnSize,
     minSize: 50
-  }, columnSize ? {} : {
-    maxSize: 500
-  }), {}, {
+  }, columnSize ? {} : { maxSize: 500 }), {
     // Only set maxSize for auto-sized columns
     enableResizing: true,
     // Enable resizing for all data columns
-    cell: function cell(_ref2) {
-      var row = _ref2.row;
-      return renderCell(wmColumn, row);
-    },
+    cell: ({ row }) => renderCell(wmColumn, row),
     enableSorting: wmColumn.sortable,
     // Pass column styles and properties through meta for TableCell styling and filtering
-    meta: _objectSpread(_objectSpread({
+    meta: __spreadProps(__spreadValues({
       textAlign: wmColumn.textalignment,
       backgroundColor: wmColumn.backgroundcolor,
-      className: wmColumn === null || wmColumn === void 0 ? void 0 : wmColumn.className,
+      className: wmColumn == null ? void 0 : wmColumn.className,
       colClass: colClassProp
-    }, wmColumn.styles), {}, {
+    }, wmColumn.styles), {
       // Include widget types for filter rendering
       widgetType: wmColumn.widgetType,
       editWidgetType: wmColumn.editWidgetType,
@@ -105,29 +86,21 @@ var createDataColumn = exports.createDataColumn = function createDataColumn(wmCo
       type: wmColumn.type || wmColumn.columntype || "string",
       searchable: wmColumn.searchable !== false,
       // Custom cell renderer for optimized rendering in MemoizedRowCells
-      renderCellContent: wmColumn === null || wmColumn === void 0 ? void 0 : wmColumn.renderCellContent
+      renderCellContent: wmColumn == null ? void 0 : wmColumn.renderCellContent
     })
   });
 };
-
-/**
- * Creates column definitions from table columns
- */
-var createDataColumns = exports.createDataColumns = function createDataColumns(wmTableColumns, renderCell) {
-  var columns = [];
-  wmTableColumns.forEach(function (wmColumn) {
+const createDataColumns = (wmTableColumns, renderCell) => {
+  const columns = [];
+  wmTableColumns.forEach((wmColumn, index) => {
     if (wmColumn.show) {
-      columns.push(createDataColumn(wmColumn, renderCell));
+      columns.push(createDataColumn(wmColumn, renderCell, index));
     }
   });
   return columns;
 };
-
-/**
- * Creates save/cancel/delete action buttons for editing mode
- */
-var createEditingActionButtons = exports.createEditingActionButtons = function createEditingActionButtons() {
-  return [{
+const createEditingActionButtons = () => [
+  {
     key: "save-edit",
     name: "save-edit-row",
     className: "save row-action-button btn app-button btn-transparent save-edit-row-button",
@@ -138,7 +111,8 @@ var createEditingActionButtons = exports.createEditingActionButtons = function c
     action: "save",
     show: true,
     widgettype: "button"
-  }, {
+  },
+  {
     key: "cancel-edit",
     name: "cancel-edit-row",
     className: "cancel row-action-button btn app-button btn-transparent cancel-edit-row-button",
@@ -149,7 +123,8 @@ var createEditingActionButtons = exports.createEditingActionButtons = function c
     action: "cancel",
     show: true,
     widgettype: "button"
-  }, {
+  },
+  {
     key: "delete-edit",
     name: "delete-row",
     className: "delete row-action-button btn app-button btn-transparent delete-row-button",
@@ -160,66 +135,52 @@ var createEditingActionButtons = exports.createEditingActionButtons = function c
     action: "delete",
     show: true,
     widgettype: "button"
-  }];
+  }
+];
+const createDefaultColumnProps = (field, displayName, type, index) => ({
+  // Core properties
+  field,
+  binding: field,
+  caption: displayName,
+  displayName,
+  widgetType: "dynamic-text",
+  // Special type for dynamic columns to render raw text
+  editWidgetType: "WmText",
+  // Display settings
+  show: true,
+  pcdisplay: true,
+  mobiledisplay: true,
+  tabletdisplay: true,
+  // Positioning
+  index,
+  headerindex: index.toString(),
+  // Sorting and searching
+  sortable: true,
+  searchable: true,
+  showinfilter: true,
+  // Styling
+  textalignment: "left",
+  // width: "150px", // Fixed width to disable resizing for dynamic columns
+  // Data type properties
+  type,
+  columntype: type,
+  // Form field properties
+  required: false,
+  disabled: false,
+  readonly: false,
+  // Required props for compatibility
+  listener: null,
+  // Will be set by the component
+  name: field
+});
+const getActionColumnSize = (editmode) => {
+  return editmode === "quickedit" ? { size: 80, minSize: 60 } : { size: 100, minSize: 80 };
 };
-
-/**
- * Creates a default WmTableColumnProps object for dynamic column generation
- * @param field - The field name for the column
- * @param displayName - The display name/caption for the column
- * @param type - The data type of the column
- * @param index - The column index
- * @returns A complete WmTableColumnProps object with sensible defaults
- */
-var createDefaultColumnProps = exports.createDefaultColumnProps = function createDefaultColumnProps(field, displayName, type, index) {
-  return {
-    // Core properties
-    field: field,
-    binding: field,
-    caption: displayName,
-    displayName: displayName,
-    widgetType: "dynamic-text",
-    // Special type for dynamic columns to render raw text
-    editWidgetType: "WmText",
-    // Display settings
-    show: true,
-    pcdisplay: true,
-    mobiledisplay: true,
-    tabletdisplay: true,
-    // Positioning
-    index: index,
-    headerindex: index.toString(),
-    // Sorting and searching
-    sortable: true,
-    searchable: true,
-    showinfilter: true,
-    // Styling
-    textalignment: "left",
-    // width: "150px", // Fixed width to disable resizing for dynamic columns
-
-    // Data type properties
-    type: type,
-    columntype: type,
-    // Form field properties
-    required: false,
-    disabled: false,
-    readonly: false,
-    // Required props for compatibility
-    listener: null,
-    // Will be set by the component
-    name: field
-  };
+export {
+  createDataColumn,
+  createDataColumns,
+  createDefaultColumnProps,
+  createEditingActionButtons,
+  createRowIndexColumn,
+  getActionColumnSize
 };
-
-/**
- * Get action column size based on edit mode
- */
-var getActionColumnSize = exports.getActionColumnSize = function getActionColumnSize(editmode) {
-  return editmode === "quickedit" ? {
-    size: 80,
-    minSize: 60
-  } : {
-    size: 100,
-    minSize: 80
-  };
-};