@wavemaker/react-runtime 11.14.1-rc.236

package/components/data/table/live-table/index.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/withBaseWrapper"));
+var _dialog = _interopRequireDefault(require("../../../dialogs/dialog"));
+var _dialogBody = require("@wavemaker/react-runtime/components/dialogs/dialog-body");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+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 WmLiveTable = function WmLiveTable(props) {
+  var _useState = (0, _react.useState)(false),
+    isDialogOpen = _useState[0],
+    setIsDialogOpen = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    formData = _useState2[0],
+    setFormData = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isAddingNewRow = _useState3[0],
+    setIsAddingNewRow = _useState3[1];
+  var isDialogLayout = props.formlayout === "dialog";
+  var _props$formlayout = props.formlayout,
+    formlayout = _props$formlayout === void 0 ? "form" : _props$formlayout,
+    listener = props.listener;
+
+  // Separate WmTable and WmLiveForm from children - optimized with early exit
+  var _useMemo = (0, _react.useMemo)(function () {
+      var tableChild;
+      var formChild;
+      var childArray = _react.Children.toArray(props.children);
+      for (var i = 0; i < childArray.length; i++) {
+        var child = childArray[i];
+        if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+          var _child$type, _child$type2;
+          var displayName = ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || "";
+          if (!tableChild && displayName === "WmTable") {
+            tableChild = child;
+          } else if (!formChild && displayName === "WmLiveForm") {
+            formChild = child;
+          }
+
+          // Early exit if both children found
+          if (tableChild && formChild) break;
+        }
+      }
+      return {
+        tableChild: tableChild,
+        formChild: formChild
+      };
+    }, [props.children]),
+    tableChild = _useMemo.tableChild,
+    formChild = _useMemo.formChild;
+  var handleOpenDialog = (0, _react.useCallback)(function () {
+    setIsDialogOpen(true);
+  }, []);
+  var handleCloseDialog = (0, _react.useCallback)(function () {
+    setIsDialogOpen(false);
+    // Clear form data when dialog closes
+    setFormData(null);
+  }, []);
+
+  // Helper to get form widget - always get fresh value from listener
+  var getFormWidget = (0, _react.useCallback)(function () {
+    var _listener$Widgets;
+    // Always get fresh value from listener to ensure we have the latest registered methods
+    return listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[formChild === null || formChild === void 0 ? void 0 : formChild.props.name];
+  }, [formChild === null || formChild === void 0 ? void 0 : formChild.props.name]);
+  var getTableWidget = (0, _react.useCallback)(function () {
+    var _listener$Widgets2;
+    return listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[tableChild === null || tableChild === void 0 ? void 0 : tableChild.props.name];
+  }, [tableChild === null || tableChild === void 0 ? void 0 : tableChild.props.name]);
+
+  // Expose LiveTable methods through its own listener
+  (0, _react.useEffect)(function () {
+    if (!(listener !== null && listener !== void 0 && listener.onChange) || !(formChild !== null && formChild !== void 0 && formChild.props.name)) return;
+    var liveTableContext = {
+      addNewRow: function addNewRow(event, widget, row) {
+        var formWidget = getFormWidget();
+        var tableWidget = getTableWidget();
+
+        // Set flag to indicate we're adding a new row
+        setIsAddingNewRow(true);
+        if (isDialogLayout) {
+          // Clear form data for new row
+          setFormData({});
+          handleOpenDialog();
+        } else if (formlayout === "form") {
+          // For non-dialog mode, just reset the form
+          formWidget === null || formWidget === void 0 || formWidget["new"]();
+        } else if (formlayout === "inline" || formlayout === "quickedit") {
+          tableWidget === null || tableWidget === void 0 || tableWidget.addNewRow();
+        }
+      },
+      editRow: function editRow(event, widget, row) {
+        var tableWidget = getTableWidget();
+
+        // Reset flag since we're editing, not adding new
+        setIsAddingNewRow(false);
+        if (isDialogLayout) {
+          // Set form data first, then open dialog
+          setFormData(row);
+          handleOpenDialog();
+        } else if (formlayout === "form") {
+          var formWidget = getFormWidget();
+          formWidget === null || formWidget === void 0 || formWidget.edit(row);
+        } else if (formlayout === "inline" || formlayout === "quickedit") {
+          tableWidget === null || tableWidget === void 0 || tableWidget.editRow(event, widget, row);
+        }
+      },
+      closeDialog: function closeDialog() {
+        if (isDialogLayout) {
+          handleCloseDialog();
+        }
+      }
+    };
+    listener.onChange(props.name, liveTableContext);
+  }, [props.name, formChild === null || formChild === void 0 ? void 0 : formChild.props.name]);
+
+  // Create stable callbacks for form handlers
+  var handleFormSuccess = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _formChild$props, _formChild$props$onSu;
+    var _formWidget$setShowVi, formWidget, tableWidget;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (isDialogLayout) {
+            handleCloseDialog();
+          } else {
+            // Set form to view mode after successful submission
+            formWidget = getFormWidget();
+            formWidget === null || formWidget === void 0 || (_formWidget$setShowVi = formWidget.setShowViewMode) === null || _formWidget$setShowVi === void 0 || _formWidget$setShowVi.call(formWidget, true);
+          }
+          tableWidget = getTableWidget();
+          if (!(tableWidget && tableWidget.datasource)) {
+            _context.next = 12;
+            break;
+          }
+          _context.prev = 3;
+          if (!(tableWidget.refresh && typeof tableWidget.refresh === "function")) {
+            _context.next = 7;
+            break;
+          }
+          _context.next = 7;
+          return tableWidget.refresh(isAddingNewRow);
+        case 7:
+          _context.next = 12;
+          break;
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](3);
+          console.error("Error refreshing table data:", _context.t0);
+        case 12:
+          // Reset the flag after refresh
+          setIsAddingNewRow(false);
+
+          // Call original onSuccess if it exists
+          formChild === null || formChild === void 0 || (_formChild$props = formChild.props) === null || _formChild$props === void 0 || (_formChild$props$onSu = _formChild$props.onSuccess) === null || _formChild$props$onSu === void 0 || _formChild$props$onSu.call(_formChild$props);
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[3, 9]]);
+  })), [isDialogLayout, handleCloseDialog, getFormWidget, getTableWidget, formChild === null || formChild === void 0 ? void 0 : formChild.props, isAddingNewRow]);
+  var handleFormCancel = (0, _react.useCallback)(function () {
+    var _formChild$props2, _formChild$props2$can;
+    handleCloseDialog();
+    // Reset the flag when cancelling
+    setIsAddingNewRow(false);
+    // Call original cancel if it exists
+    formChild === null || formChild === void 0 || (_formChild$props2 = formChild.props) === null || _formChild$props2 === void 0 || (_formChild$props2$can = _formChild$props2.cancel) === null || _formChild$props2$can === void 0 || _formChild$props2$can.call(_formChild$props2);
+    if (formlayout === "form") {
+      var _formWidget$setShowVi2;
+      // Set form to view mode after successful submission
+      var formWidget = getFormWidget();
+      formWidget === null || formWidget === void 0 || (_formWidget$setShowVi2 = formWidget.setShowViewMode) === null || _formWidget$setShowVi2 === void 0 || _formWidget$setShowVi2.call(formWidget, true);
+    }
+  }, [handleCloseDialog, formChild === null || formChild === void 0 ? void 0 : formChild.props, formlayout, getFormWidget]);
+
+  // Enhance form child with success/cancel handlers - memoized more efficiently
+  var enhancedFormChild = (0, _react.useMemo)(function () {
+    if (!formChild || ! /*#__PURE__*/(0, _react.isValidElement)(formChild)) return formChild;
+    var newProps = _objectSpread(_objectSpread({}, formChild.props), {}, {
+      isLayoutDialog: isDialogLayout,
+      onSuccess: handleFormSuccess,
+      cancel: handleFormCancel
+    }, isDialogLayout && formData !== null && {
+      formdata: formData
+    });
+    return /*#__PURE__*/(0, _react.cloneElement)(formChild, newProps);
+  }, [formChild, isDialogLayout, handleFormSuccess, handleFormCancel, formData]);
+  var enhancedTableChild = (0, _react.useMemo)(function () {
+    if (!tableChild || ! /*#__PURE__*/(0, _react.isValidElement)(tableChild)) return tableChild;
+    return /*#__PURE__*/(0, _react.cloneElement)(tableChild, _objectSpread(_objectSpread({}, tableChild.props), {}, {
+      formName: formChild === null || formChild === void 0 ? void 0 : formChild.props.name
+    }));
+  }, [tableChild]);
+
+  // Render based on formlayout
+  if (isDialogLayout) {
+    return __jsx(_react["default"].Fragment, null, enhancedTableChild, formChild && __jsx(_dialog["default"], {
+      isopen: isDialogOpen,
+      onClose: handleCloseDialog,
+      name: "".concat(props.name, "_dialog"),
+      listener: props.listener,
+      modal: true,
+      closable: true,
+      title: formChild.props.title,
+      iconclass: formChild.props.iconclass,
+      dialogtype: "design-dialog"
+    }, __jsx(_dialogBody.WmDialogBody, {
+      name: "popup-body",
+      listener: {}
+    }, enhancedFormChild)));
+  }
+
+  // Default: render as form
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: "app-livegrid"
+  }, enhancedTableChild, enhancedFormChild);
+};
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmLiveTable);

package/components/data/table/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/data/table/table-action/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTableAction = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/withBaseWrapper"));
+var _excluded = ["widgetType", "displayName", "iconclass", "action", "position", "shortcutkey", "listener", "children", "variant", "color", "onClick"];
+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 WmTableActionComponent = function WmTableActionComponent(_ref) {
+  var widgetType = _ref.widgetType,
+    displayName = _ref.displayName,
+    iconclass = _ref.iconclass,
+    action = _ref.action,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "footer" : _ref$position,
+    shortcutkey = _ref.shortcutkey,
+    listener = _ref.listener,
+    children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "contained" : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (shortcutkey) {
+      var key = event.key.toLowerCase();
+      var shortcut = shortcutkey.toLowerCase();
+      if (key === shortcut || shortcut.includes("ctrl") && event.ctrlKey && key === shortcut.replace("ctrl+", "") || shortcut.includes("alt") && event.altKey && key === shortcut.replace("alt+", "") || shortcut.includes("shift") && event.shiftKey && key === shortcut.replace("shift+", "")) {
+        event.preventDefault();
+        handleClick(event);
+      }
+    }
+  };
+  var renderIcon = function renderIcon() {
+    if (iconclass) {
+      return __jsx("i", {
+        className: iconclass
+      });
+    }
+    return null;
+  };
+  return __jsx(_Button["default"], {
+    variant: variant,
+    color: color,
+    className: "wm-table-action ".concat(props.className || ""),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    title: props.title || displayName || "",
+    disabled: props.disabled,
+    tabIndex: props.tabindex,
+    startIcon: renderIcon(),
+    sx: _objectSpread(_objectSpread({}, props.styles), {}, {
+      display: props.show === "false" ? "none" : undefined,
+      "& .MuiButton-startIcon": {
+        marginRight: displayName ? 1 : 0
+      }
+    })
+  }, displayName);
+};
+WmTableActionComponent.displayName = "WmTableAction";
+var WmTableAction = exports.WmTableAction = (0, _withBaseWrapper["default"])(WmTableActionComponent);
+var _default = exports["default"] = WmTableAction;

package/components/data/table/table-column/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTableColumn = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/withBaseWrapper"));
+var _excluded = ["binding", "caption", "widgetType", "pcdisplay", "mobiledisplay", "tabletdisplay", "index", "headerindex", "children", "listener"];
+var __jsx = _react["default"].createElement;
+var WmTableColumnComponent = function WmTableColumnComponent(_ref) {
+  var binding = _ref.binding,
+    caption = _ref.caption,
+    widgetType = _ref.widgetType,
+    _ref$pcdisplay = _ref.pcdisplay,
+    pcdisplay = _ref$pcdisplay === void 0 ? "true" : _ref$pcdisplay,
+    _ref$mobiledisplay = _ref.mobiledisplay,
+    mobiledisplay = _ref$mobiledisplay === void 0 ? "true" : _ref$mobiledisplay,
+    _ref$tabletdisplay = _ref.tabletdisplay,
+    tabletdisplay = _ref$tabletdisplay === void 0 ? "true" : _ref$tabletdisplay,
+    index = _ref.index,
+    headerindex = _ref.headerindex,
+    children = _ref.children,
+    listener = _ref.listener,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return __jsx(_material.TableCell, {
+    className: "wm-table-column ".concat(props.className || "")
+  }, children);
+};
+WmTableColumnComponent.displayName = "WmTableColumn";
+var WmTableColumn = exports.WmTableColumn = (0, _withBaseWrapper["default"])(WmTableColumnComponent);
+var _default = exports["default"] = WmTableColumn;

package/components/data/table/table-row/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTableRow = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/withBaseWrapper"));
+var _excluded = ["displayName", "widgetType", "expandicon", "collapseicon", "expandtitle", "collapsetitle", "position", "closeothers", "onBeforerowexpand", "onRowexpand", "onBeforerowcollapse", "onRowcollapse", "show", "disabled", "columnwidth", "content", "listener", "children", "renderPartial"];
+var WmTableRowComponent = function WmTableRowComponent(_ref) {
+  var displayName = _ref.displayName,
+    _ref$widgetType = _ref.widgetType,
+    widgetType = _ref$widgetType === void 0 ? "button" : _ref$widgetType,
+    _ref$expandicon = _ref.expandicon,
+    expandicon = _ref$expandicon === void 0 ? "wi wi-expand-more" : _ref$expandicon,
+    _ref$collapseicon = _ref.collapseicon,
+    collapseicon = _ref$collapseicon === void 0 ? "wi wi-chevron-right" : _ref$collapseicon,
+    expandtitle = _ref.expandtitle,
+    collapsetitle = _ref.collapsetitle,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "0" : _ref$position,
+    _ref$closeothers = _ref.closeothers,
+    closeothers = _ref$closeothers === void 0 ? false : _ref$closeothers,
+    onBeforerowexpand = _ref.onBeforerowexpand,
+    onRowexpand = _ref.onRowexpand,
+    onBeforerowcollapse = _ref.onBeforerowcollapse,
+    onRowcollapse = _ref.onRowcollapse,
+    _ref$show = _ref.show,
+    show = _ref$show === void 0 ? true : _ref$show,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$columnwidth = _ref.columnwidth,
+    columnwidth = _ref$columnwidth === void 0 ? "50px" : _ref$columnwidth,
+    content = _ref.content,
+    listener = _ref.listener,
+    children = _ref.children,
+    renderPartial = _ref.renderPartial,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // This is a configuration component that defines row expansion behavior.
+  // It doesn't render anything directly - the table parses its props
+  // and uses them to render expansion controls and expanded content.
+  // The renderPartial function receives props (including rowData) and an onLoad callback.
+  // The renderPartial prop or children will be rendered when a row is expanded.
+  return null;
+};
+WmTableRowComponent.displayName = "WmTableRow";
+var WmTableRow = exports.WmTableRow = (0, _withBaseWrapper["default"])(WmTableRowComponent);
+var _default = exports["default"] = WmTableRow;

package/components/data/table/table-row-action/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTableRowAction = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _anchor = require("@wavemaker/react-runtime/components/basic/anchor");
+var _excluded = ["displayName", "title", "iconclass", "action", "row", "rowIndex", "listener", "children", "onClick", "widgettype", "show"];
+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 WmTableRowActionComponent = function WmTableRowActionComponent(_ref) {
+  var displayName = _ref.displayName,
+    title = _ref.title,
+    iconclass = _ref.iconclass,
+    action = _ref.action,
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    listener = _ref.listener,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    widgettype = _ref.widgettype,
+    _ref$show = _ref.show,
+    show = _ref$show === void 0 ? true : _ref$show,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (onClick) {
+      // Pass rowData as part of widget parameter
+      onClick(event, {}, row);
+    }
+  };
+  if (!show) {
+    return null;
+  }
+  if (widgettype === "anchor") {
+    return __jsx(_anchor.WmAnchor, (0, _extends2["default"])({}, props, {
+      title: displayName,
+      caption: displayName,
+      name: props.name || displayName,
+      listener: listener,
+      onClick: handleClick,
+      iconclass: iconclass,
+      show: show.toString(),
+      className: "wm-table-row-action ".concat(props.className || "")
+    }));
+  }
+  return __jsx(_material.Button, {
+    variant: "text",
+    size: "small",
+    className: "wm-table-row-action ".concat(props.className || ""),
+    onClick: handleClick,
+    title: title,
+    startIcon: iconclass ? __jsx("i", {
+      className: iconclass
+    }) : undefined,
+    sx: _objectSpread(_objectSpread({}, props.styles), {}, {
+      padding: "0.25rem 0.5rem",
+      marginRight: "0.25rem",
+      minWidth: "auto",
+      textTransform: "none"
+    })
+  }, displayName);
+};
+WmTableRowActionComponent.displayName = "WmTableRowAction";
+var WmTableRowAction = exports.WmTableRowAction = WmTableRowActionComponent;
+var _default = exports["default"] = WmTableRowAction;

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

@@ -0,0 +1,173 @@
+"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 _lodashEs = require("lodash-es");
+var __jsx = _react["default"].createElement;
+var buildSelectionColumns = exports.buildSelectionColumns = function buildSelectionColumns(_ref) {
+  var useRadioSelect = _ref.useRadioSelect,
+    useMultiSelect = _ref.useMultiSelect,
+    selectedRowId = _ref.selectedRowId,
+    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
+  if (useRadioSelect) {
+    return {
+      id: "radioSelect",
+      header: function header() {
+        return __jsx(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center"
+          }
+        });
+      },
+      cell: function cell(_ref2) {
+        var _table$getState$rowSe;
+        var row = _ref2.row,
+          table = _ref2.table;
+        var rowId = row.id;
+        // Get selection state from table's rowSelection state
+        var isSelected = ((_table$getState$rowSe = table.getState().rowSelection) === null || _table$getState$rowSe === void 0 ? void 0 : _table$getState$rowSe[rowId]) || false;
+        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,
+      maxSize: 40,
+      enableResizing: false
+    };
+  }
+
+  // Multiselect column
+  if (useMultiSelect) {
+    return {
+      id: "multiSelect",
+      header: function header(_ref3) {
+        var table = _ref3.table;
+        // Get the current data and selection state from the table instance
+        var currentData = table.options.data || [];
+        var rowSelection = table.getState().rowSelection || {};
+        var selectedCount = (0, _lodashEs.size)((0, _lodashEs.pickBy)(rowSelection));
+        var isAllSelected = selectedCount > 0 && selectedCount === currentData.length;
+        var isIndeterminate = selectedCount > 0 && selectedCount < currentData.length;
+        return __jsx(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            width: "100%"
+          }
+        }, __jsx(_material.Box, {
+          className: "app-checkbox checkbox"
+        }, __jsx(_material.FormControlLabel, {
+          control: __jsx(_material.Checkbox, {
+            checked: isAllSelected,
+            indeterminate: isIndeterminate,
+            onChange: function onChange(e) {
+              return handleSelectAll(e.target.checked);
+            },
+            size: "small",
+            inputProps: {
+              "aria-label": "Select all rows"
+            }
+          }),
+          label: "",
+          className: "caption"
+        })));
+      },
+      cell: function cell(_ref4) {
+        var _table$getState$rowSe2;
+        var row = _ref4.row,
+          table = _ref4.table;
+        var rowId = row.id;
+        // Get selection state from table's rowSelection state
+        var isSelected = ((_table$getState$rowSe2 = table.getState().rowSelection) === null || _table$getState$rowSe2 === void 0 ? void 0 : _table$getState$rowSe2[rowId]) || false;
+        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.FormControlLabel, {
+          control: __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"
+          }),
+          label: "",
+          className: "caption"
+        }))), isSelected ? __jsx("span", {
+          className: "sr-only",
+          "aria-live": "assertive"
+        }, "Row Selected") : __jsx("span", {
+          className: "sr-only",
+          "aria-live": "assertive"
+        }, "Row Deselected"));
+      },
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableResizing: false
+    };
+  }
+  return null;
+};