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

package/components/data/pagination/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { WmPaginationProps } from "./hooks/props";
+declare const WmPagination: React.MemoExoticComponent<(props: WmPaginationProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmPagination component is used to navigate through multiple pages of data.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-pagination--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-pagination--docs#tab-overview)
+ *
+ * @param props - {@link WmPaginationProps}
+ */
+export default WmPagination;

package/components/data/pagination/index.js

@@ -0,0 +1,454 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _hooks = require("./hooks");
+var _components = require("./components");
+var _constants = require("../list/utils/constants");
+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 WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    dataset = props.dataset,
+    _props$maxResults = props.maxResults,
+    maxResults = _props$maxResults === void 0 ? 10 : _props$maxResults,
+    currentPage = props.currentPage,
+    _props$navigation = props.navigation,
+    navigation = _props$navigation === void 0 ? _constants.LIST_NAVIGATION_TYPES.BASIC : _props$navigation,
+    navigationsize = props.navigationsize,
+    _props$navigationalig = props.navigationalign,
+    navigationalign = _props$navigationalig === void 0 ? _constants.LIST_ALIGN.LEFT : _props$navigationalig,
+    _props$showrecordcoun = props.showrecordcount,
+    showrecordcount = _props$showrecordcoun === void 0 ? false : _props$showrecordcoun,
+    _props$maxsize = props.maxsize,
+    maxsize = _props$maxsize === void 0 ? 5 : _props$maxsize,
+    _props$boundarylinks = props.boundarylinks,
+    boundarylinks = _props$boundarylinks === void 0 ? false : _props$boundarylinks,
+    _props$directionlinks = props.directionlinks,
+    directionlinks = _props$directionlinks === void 0 ? true : _props$directionlinks,
+    _props$allowpagesizec = props.allowpagesizechange,
+    allowpagesizechange = _props$allowpagesizec === void 0 ? false : _props$allowpagesizec,
+    _props$pagesizeoption = props.pagesizeoptions,
+    pagesizeoptions = _props$pagesizeoption === void 0 ? "5,10,20,50,100" : _props$pagesizeoption,
+    className = props.className,
+    styles = props.styles,
+    listener = props.listener,
+    onPaginationChange = props.onPaginationChange,
+    onSetRecord = props.onSetRecord,
+    onPageSizeChange = props.onPageSizeChange,
+    datasource = props.datasource,
+    isLoadingMore = props.isLoadingMore,
+    setIsLoadingMore = props.setIsLoadingMore,
+    isServerSidePagination = props.isServerSidePagination,
+    onDataUpdate = props.onDataUpdate,
+    _props$ondemandmessag = props.ondemandmessage,
+    ondemandmessage = _props$ondemandmessag === void 0 ? "Load More" : _props$ondemandmessag,
+    _props$viewlessmessag = props.viewlessmessage,
+    viewlessmessage = _props$viewlessmessag === void 0 ? "View Less" : _props$viewlessmessag,
+    _props$showviewlessbu = props.showviewlessbutton,
+    showviewlessbutton = _props$showviewlessbu === void 0 ? false : _props$showviewlessbu,
+    listDirection = props.listDirection,
+    scrollContainerRef = props.scrollContainerRef;
+
+  // Custom hooks for pagination logic and navigation sizing
+  var pagination = (0, _hooks.usePagination)({
+    dataset: dataset,
+    maxResults: maxResults,
+    currentPage: currentPage,
+    navigation: navigation,
+    name: name,
+    listener: listener,
+    onPaginationChange: onPaginationChange,
+    onSetRecord: onSetRecord,
+    onPageSizeChange: onPageSizeChange,
+    paginationMeta: props.paginationMeta,
+    totalItems: props.totalItems,
+    datasource: datasource,
+    isLoadingMore: isLoadingMore,
+    setIsLoadingMore: setIsLoadingMore,
+    isServerSidePagination: isServerSidePagination,
+    listDirection: listDirection,
+    scrollContainerRef: scrollContainerRef,
+    sentinelRef: props.sentinelRef,
+    datasourceInvokeOptions: props.datasourceInvokeOptions
+  });
+
+  // Notify parent component when data changes in Scroll or On-Demand mode
+  var prevResultLengthRef = _react["default"].useRef(0);
+  _react["default"].useEffect(function () {
+    var isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
+    if (isAccumulatingMode && onDataUpdate && pagination.result) {
+      // Only update if the result length has changed (new data added)
+      if (pagination.result.length !== prevResultLengthRef.current) {
+        prevResultLengthRef.current = pagination.result.length;
+        onDataUpdate(pagination.result);
+      }
+    }
+  }, [navigation, onDataUpdate, pagination.result]);
+  var _useNavigationSize = (0, _hooks.useNavigationSize)({
+      navigation: navigation,
+      navigationsize: navigationsize
+    }),
+    navigationClass = _useNavigationSize.navigationClass;
+
+  // Attach dataNavigator API to pagination widget proxy (like Angular's @ViewChild)
+  // Update properties every render so they stay current (like Angular component instance)
+  (0, _react.useEffect)(function () {
+    var _listener$Widgets, _listener$Widgets2, _props$onPaginationWi;
+    if (!name || !(listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name])) return;
+    var paginationWidget = listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name];
+
+    // Spread entire pagination object to avoid manual property copying
+    // This includes: currentPage, pageCount, dataSize, result, navigatePage, etc.
+    Object.assign(paginationWidget, pagination, {
+      // Add convenience navigation methods
+      goToFirstPage: function goToFirstPage() {
+        return pagination.navigatePage("first");
+      },
+      goToLastPage: function goToLastPage() {
+        return pagination.navigatePage("last");
+      },
+      goToNextPage: function goToNextPage() {
+        return pagination.navigatePage("next");
+      },
+      goToPreviousPage: function goToPreviousPage() {
+        return pagination.navigatePage("prev");
+      },
+      actualPageSize: pagination.currentMaxResults
+    });
+
+    // Notify parent once on mount
+    props === null || props === void 0 || (_props$onPaginationWi = props.onPaginationWidgetReady) === null || _props$onPaginationWi === void 0 || _props$onPaginationWi.call(props, paginationWidget);
+  }, [name, pagination, props === null || props === void 0 ? void 0 : props.onPaginationWidgetReady]);
+
+  // Memoized flex container styles for better performance
+  var flexContainerStyles = (0, _react.useMemo)(function () {
+    var baseStyles = {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      gap: 2
+    };
+
+    // When showrecordcount is false, align based on navigationalign
+    // When showrecordcount is true, use space-between for proper distribution
+    if (!showrecordcount) {
+      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+        justifyContent: navigationalign === "right" ? "flex-end" : navigationalign === "center" ? "center" : "flex-start"
+      });
+    }
+    return _objectSpread(_objectSpread({}, baseStyles), {}, {
+      justifyContent: "space-between"
+    });
+  }, [showrecordcount, navigationalign]);
+
+  // Memoized common page size selector
+  var pageSizeSelector = (0, _react.useMemo)(function () {
+    var _props$paginationMeta;
+    if (!allowpagesizechange) return null;
+
+    // Parse page size options to get the minimum value
+    var parsedOptions = pagesizeoptions.split(",").map(function (opt) {
+      return parseInt(opt.trim(), 10);
+    }).filter(function (opt) {
+      return !isNaN(opt);
+    });
+
+    // Include paginationMeta.size if available
+    if ((_props$paginationMeta = props.paginationMeta) !== null && _props$paginationMeta !== void 0 && _props$paginationMeta.size && !parsedOptions.includes(props.paginationMeta.size)) {
+      parsedOptions.push(props.paginationMeta.size);
+    }
+    var minPageSize = parsedOptions.length > 0 ? Math.min.apply(Math, (0, _toConsumableArray2["default"])(parsedOptions)) : 0;
+
+    // Hide page size selector if total records is less than or equal to the minimum page size
+    // since all records are already visible
+    if (pagination.dataSize < minPageSize) return null;
+    return __jsx(_components.PageSizeSelector, {
+      pagesizeoptions: pagesizeoptions,
+      maxResults: pagination.currentMaxResults,
+      currentPage: pagination.currentPage,
+      dataSize: pagination.dataSize,
+      paginationMeta: props.paginationMeta,
+      onPageSizeChange: pagination.handlePageSizeChange
+    });
+  }, [allowpagesizechange, pagesizeoptions, pagination.currentMaxResults, pagination.currentPage, pagination.dataSize, pagination.handlePageSizeChange, props.paginationMeta]);
+
+  // Simple layout helper function - not memoized to avoid dependency issues
+  var renderWithLayout = function renderWithLayout(children, recordCountVariant) {
+    // When showrecordcount is false, use simple flex container with alignment
+    if (!showrecordcount) {
+      return __jsx(_Box["default"], {
+        sx: flexContainerStyles
+      }, __jsx(_Box["default"], {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2
+        }
+      }, children));
+    }
+
+    // When showrecordcount is true, use complex layout with proper distribution
+    if (navigationalign === "center") {
+      return __jsx(_Box["default"], {
+        sx: flexContainerStyles
+      }, __jsx(_Box["default"], {
+        sx: {
+          flex: 1
+        }
+      }), __jsx(_Box["default"], {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2
+        }
+      }, children, __jsx(_components.TotalRecords, {
+        dataSize: pagination.dataSize,
+        variant: recordCountVariant
+      })), __jsx(_Box["default"], {
+        sx: {
+          flex: 1
+        }
+      }));
+    }
+    return __jsx(_Box["default"], {
+      sx: flexContainerStyles
+    }, __jsx(_Box["default"], {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        order: navigationalign === "right" ? 2 : 1
+      }
+    }, children), __jsx(_Box["default"], {
+      sx: {
+        order: navigationalign === "right" ? 1 : 2
+      }
+    }, __jsx(_components.TotalRecords, {
+      dataSize: pagination.dataSize,
+      variant: recordCountVariant
+    })));
+  };
+
+  // Render navigation components directly - avoid over-memoization
+  var renderNavigation = function renderNavigation() {
+    // Only show navigation when there are multiple pages (i.e., not all items are visible on current page)
+    var showNavigation = pagination.pageCount > 1;
+    switch (pagination.navcontrols) {
+      case "Basic":
+        return showNavigation ? __jsx(_components.BasicPagination, {
+          pageCount: pagination.pageCount,
+          currentPage: pagination.currentPage,
+          dataSize: pagination.dataSize,
+          maxResults: pagination.currentMaxResults,
+          boundarylinks: boundarylinks,
+          directionlinks: directionlinks,
+          navigationsize: navigationsize,
+          navigationClass: navigationClass,
+          maxsize: maxsize,
+          onPageChange: pagination.handlePageChange
+        }) : null;
+      case "Classic":
+        return showNavigation ? __jsx(_components.ClassicPagination, {
+          currentPage: pagination.currentPage,
+          pageCount: pagination.pageCount,
+          dataSize: pagination.dataSize,
+          maxResults: pagination.currentMaxResults,
+          navigationClass: navigationClass,
+          showrecordcount: false,
+          isDisableFirst: pagination.isDisableFirst,
+          isDisablePrevious: pagination.isDisablePrevious,
+          isDisableNext: pagination.isDisableNext,
+          isDisableLast: pagination.isDisableLast,
+          isDisableCurrent: pagination.isDisableCurrent,
+          isDisableCount: pagination.isDisableCount,
+          onNavigate: pagination.navigatePage,
+          onInputChange: pagination.handleInputChange,
+          onModelChange: pagination.onModelChange,
+          onKeyDown: pagination.onKeyDown
+        }) : null;
+      case "Pager":
+        return showNavigation ? __jsx(_components.PagerNavigation, {
+          navigationClass: navigationClass,
+          isDisablePrevious: pagination.isDisablePrevious,
+          isDisableNext: pagination.isDisableNext,
+          onNavigate: pagination.navigatePage
+        }) : null;
+      default:
+        return null;
+    }
+  };
+
+  // Simple render function - avoid over-optimization that causes re-renders
+  var renderPaginationContent = function renderPaginationContent() {
+    if (navigation === "None" || navigation === "Scroll") {
+      return null;
+    }
+    var navigationComponent = renderNavigation();
+    var content = __jsx(_react["default"].Fragment, null, pageSizeSelector, navigationComponent);
+
+    // Single-page datasets have no nav arrows or page-size row; still show Total records when enabled
+    if (!pageSizeSelector && !navigationComponent && !showrecordcount) {
+      return null;
+    }
+
+    // Get the appropriate record count variant based on navigation type
+    var recordCountVariant = pagination.navcontrols === "Classic" ? "Classic" : "Basic";
+    return renderWithLayout(content, recordCountVariant);
+  };
+
+  // Render On-Demand navigation content
+  if (pagination.navcontrols === "On-Demand") {
+    // Check if there's data to show and it's more than one page worth
+    // Don't show navigation if data is empty or already shows all items
+    var hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+
+    // Determine if we should show Load More button
+    // Only show when there's more data AND accumulated data is less than total
+    var shouldShowLoadMore = hasEnoughData && pagination.hasMoreData && pagination.accumulatedDataCount < pagination.dataSize;
+
+    // Determine if we should show View Less button
+    // Show when all data is loaded, showviewlessbutton is true, and more than first page is loaded
+    var shouldShowViewLess = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+
+    // Determine which button to show (if any)
+    var showButton = shouldShowLoadMore || shouldShowViewLess;
+
+    // If nothing to show and not loading, return null
+    if (!showButton && !pagination.isLoadingMore) {
+      return null;
+    }
+
+    // Determine button properties based on state
+    var buttonText = shouldShowViewLess ? viewlessmessage : ondemandmessage;
+    var buttonAction = shouldShowViewLess ? pagination.resetAccumulatedData : pagination.loadMoreData;
+    return __jsx(_Box["default"], {
+      component: "div",
+      className: (0, _clsx["default"])("on-demand-datagrid", className),
+      sx: _objectSpread({}, styles),
+      id: name
+    }, pagination.isLoadingMore && __jsx(_Box["default"], {
+      component: "div",
+      className: "loading-data-msg spin-icon-in-center",
+      sx: {
+        textAlign: "center",
+        padding: "16px"
+      }
+    }, __jsx(_Box["default"], {
+      component: "span"
+    }, __jsx(_Box["default"], {
+      component: "i",
+      className: "app-icon panel-icon fa-spin fa fa-circle-o-notch",
+      "aria-hidden": "true"
+    }), __jsx(_Box["default"], {
+      component: "span",
+      className: "sr-only"
+    }, "Loading"), __jsx(_Box["default"], {
+      component: "span",
+      className: "loading-text",
+      sx: {
+        marginLeft: 1
+      }
+    }, "Loading..."))), showButton && !pagination.isLoadingMore && __jsx(_Box["default"], {
+      component: "a",
+      className: "app-button btn btn-block on-demand-load-btn",
+      onClick: buttonAction,
+      sx: {
+        cursor: "pointer",
+        display: "block",
+        textAlign: "center",
+        padding: "10px",
+        "&:hover": {
+          textDecoration: "none"
+        }
+      }
+    }, buttonText));
+  }
+
+  // Render infinite scroll content
+  if (pagination.navcontrols === "Scroll") {
+    var _hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+    var shouldShowViewLessInScroll = _hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+    var showVerticalScrollSentinel = listDirection === "column" || listDirection === "vertical";
+    return __jsx(_Box["default"], {
+      className: (0, _clsx["default"])("app-datanavigator clearfix", className),
+      sx: _objectSpread(_objectSpread({}, styles), {}, {
+        width: "100%",
+        position: "relative"
+      }),
+      id: name
+    }, pagination.isLoadingMore && __jsx(_Box["default"], {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 2,
+        width: "100%",
+        textAlign: "center"
+      }
+    }, __jsx(_Box["default"], {
+      className: "status"
+    }, __jsx("i", {
+      className: "fa fa-circle-o-notch fa-spin"
+    }), __jsx(_Box["default"], {
+      component: "span",
+      className: "message",
+      sx: {
+        marginLeft: 1
+      }
+    }, "Loading..."))), shouldShowViewLessInScroll && __jsx(_Box["default"], {
+      component: "a",
+      className: "app-button btn btn-block on-demand-load-btn",
+      onClick: pagination.resetAccumulatedData
+    }, viewlessmessage), showVerticalScrollSentinel && __jsx(_Box["default"], {
+      ref: function ref(el) {
+        if (pagination.sentinelRef) {
+          pagination.sentinelRef.current = el;
+        }
+      },
+      sx: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "1px",
+        visibility: "hidden",
+        pointerEvents: "none"
+      },
+      "aria-hidden": "true"
+    }));
+  }
+  return __jsx(_Box["default"], {
+    className: (0, _clsx["default"])("app-datanavigator clearfix", className),
+    sx: _objectSpread(_objectSpread({}, styles), {}, {
+      width: "100%"
+    }),
+    id: name,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, renderPaginationContent());
+});
+WmPagination.displayName = "WmPagination";
+
+/**
+ * The WmPagination component is used to navigate through multiple pages of data.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-pagination--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-pagination--docs#tab-overview)
+ *
+ * @param props - {@link WmPaginationProps}
+ */
+var _default = exports["default"] = WmPagination;

package/components/data/table/components/AddNewRow.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AddNewRowProps } from "../props";
+export declare const AddNewRow: React.FC<AddNewRowProps>;

package/components/data/table/components/AddNewRow.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddNewRow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _lodashEs = require("lodash-es");
+var _tableRowAction = _interopRequireDefault(require("../table-row-action"));
+var __jsx = _react["default"].createElement;
+// Helper function to create empty cells
+var createEmptyCell = function createEmptyCell(key) {
+  var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "text-center";
+  return __jsx(_material.TableCell, {
+    key: key
+  }, __jsx(_material.Box, {
+    className: className
+  }));
+};
+
+// Helper function to create action buttons
+var createActionButton = function createActionButton(key, name, actionKey, title, iconClass, _onClick, listener) {
+  return __jsx(_tableRowAction["default"], {
+    key: key,
+    name: name,
+    className: "".concat(actionKey === "acceptNew" ? "save" : "cancel", " row-action-button btn app-button btn-transparent ").concat(name, "-button"),
+    "data-action-key": actionKey,
+    displayName: "",
+    title: title,
+    iconclass: iconClass,
+    action: actionKey === "acceptNew" ? "save" : "cancel",
+    row: {},
+    rowIndex: -1,
+    listener: listener,
+    show: true,
+    onClick: function onClick(event) {
+      event === null || event === void 0 || event.preventDefault();
+      event === null || event === void 0 || event.stopPropagation();
+      _onClick();
+    }
+  });
+};
+
+// Helper function to create action buttons cell
+var createActionButtonsCell = function createActionButtonsCell(key, editMode, onSave, onCancel, listener) {
+  return __jsx(_material.TableCell, {
+    key: key
+  }, __jsx(_material.Box, {
+    component: "span",
+    className: "actions-column"
+  }, editMode === "inline" ?
+  // Show save/cancel buttons for inline edit
+  __jsx(_react["default"].Fragment, null, createActionButton("accept-new", "accept-new-row", "acceptNew", "Save", "wi wi-done", onSave, listener), createActionButton("cancel-new", "cancel-new-row", "cancelNew", "Cancel", "wi wi-cancel", onCancel, listener)) :
+  // No actions for quick edit mode
+  null));
+};
+var AddNewRow = exports.AddNewRow = function AddNewRow(_ref) {
+  var isAddingNewRow = _ref.isAddingNewRow,
+    editMode = _ref.editMode,
+    wmTableColumns = _ref.wmTableColumns,
+    rowActions = _ref.rowActions,
+    showrowindex = _ref.showrowindex,
+    _ref$radioselect = _ref.radioselect,
+    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
+    _ref$multiselect = _ref.multiselect,
+    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
+    sessionKey = _ref.sessionKey,
+    editingRowData = _ref.editingRowData,
+    renderEditableCell = _ref.renderEditableCell,
+    onKeyDown = _ref.onKeyDown,
+    onSave = _ref.handleSave,
+    onCancel = _ref.handleCancel,
+    listener = _ref.listener,
+    _ref$hasRowExpansion = _ref.hasRowExpansion,
+    hasRowExpansion = _ref$hasRowExpansion === void 0 ? false : _ref$hasRowExpansion,
+    _ref$expansionPositio = _ref.expansionPosition,
+    expansionPosition = _ref$expansionPositio === void 0 ? 0 : _ref$expansionPositio;
+  if (!isAddingNewRow || editMode !== "inline" && editMode !== "quickedit") {
+    return null;
+  }
+  var rowKey = editMode === "quickedit" ? "quick-edit-new-row" : "add-new-row";
+
+  // Filter visible columns and separate manual action column
+  var allVisibleColumns = (0, _lodashEs.filter)(wmTableColumns, function (col) {
+    return col.show !== false;
+  });
+  var manualActionColumn = allVisibleColumns.find(function (col) {
+    return col.binding === "rowOperations";
+  });
+  var visibleColumns = allVisibleColumns.filter(function (col) {
+    return col.binding !== "rowOperations";
+  });
+
+  // Calculate total columns including system columns
+  var totalCells = [];
+
+  // Add selection column
+  if (radioselect || multiselect) {
+    totalCells.push(createEmptyCell("".concat(rowKey, "-selection")));
+  }
+
+  // Add row index column
+  if (showrowindex) {
+    totalCells.push(createEmptyCell("".concat(rowKey, "-index")));
+  }
+
+  // Add manual action column if positioned at 0
+  if (manualActionColumn && manualActionColumn.rowactionsposition === 0) {
+    totalCells.push(createActionButtonsCell("".concat(rowKey, "-manual-actions"), editMode, onSave, onCancel, listener));
+  }
+
+  // Calculate expansion cell position
+  var dataColumnStartIndex = totalCells.length;
+  var calculateExpansionIndex = function calculateExpansionIndex() {
+    if (!hasRowExpansion) return -1;
+
+    // Handle numeric positions
+    if (typeof expansionPosition === "number" || !isNaN(Number(expansionPosition))) {
+      return dataColumnStartIndex + Number(expansionPosition);
+    }
+    // Handle -1 position (after all columns)
+    else if (expansionPosition === "-1" || String(expansionPosition) === "-1") {
+      return dataColumnStartIndex + visibleColumns.length;
+    }
+    // Handle column name positions
+    else if (typeof expansionPosition === "string") {
+      // For nested paths like "name.location.url", we need to match the exact field value
+      var columnIndex = visibleColumns.findIndex(function (col) {
+        return col.field === expansionPosition || col.binding === expansionPosition;
+      });
+      // Place AFTER the named column
+      return columnIndex >= 0 ? dataColumnStartIndex + columnIndex + 1 : dataColumnStartIndex;
+    }
+    // Default to beginning
+    return dataColumnStartIndex;
+  };
+  var expansionInsertIndex = calculateExpansionIndex();
+
+  // Add expansion cell at the beginning if it's positioned before all data columns
+  var expansionCellAdded = false;
+  if (hasRowExpansion && expansionInsertIndex === dataColumnStartIndex) {
+    totalCells.push(createEmptyCell("".concat(rowKey, "-expansion")));
+    expansionCellAdded = true;
+  }
+
+  // Add data columns
+  for (var index = 0; index < visibleColumns.length; index++) {
+    var _ref2, _editingRowData$field;
+    var column = visibleColumns[index];
+    var actualIndex = dataColumnStartIndex + index;
+
+    // Insert expansion cell at calculated position
+    if (hasRowExpansion && actualIndex === expansionInsertIndex && !expansionCellAdded) {
+      totalCells.push(createEmptyCell("".concat(rowKey, "-expansion")));
+      expansionCellAdded = true;
+    }
+
+    // Insert manual action column if positioned at this index
+    if (manualActionColumn && manualActionColumn.rowactionsposition !== undefined && manualActionColumn.rowactionsposition !== 0 && Number(manualActionColumn.rowactionsposition) === index + 1) {
+      totalCells.push(createActionButtonsCell("".concat(rowKey, "-manual-actions"), editMode, onSave, onCancel, listener));
+    }
+    var fieldName = String(column.field || "field_".concat(index));
+    var widgetType = String(column.editWidgetType || "WmText");
+    var editValue = (_ref2 = (_editingRowData$field = editingRowData[fieldName]) !== null && _editingRowData$field !== void 0 ? _editingRowData$field : column.defaultvalue) !== null && _ref2 !== void 0 ? _ref2 : "";
+    totalCells.push(__jsx(_material.TableCell, {
+      key: "new-row-".concat(fieldName),
+      className: (0, _clsx["default"])("app-datagrid-cell cell-editing form-group", {
+        "required-field": column.required
+      })
+    }, column.readonly ? __jsx(_react["default"].Fragment, null) : renderEditableCell(column, fieldName, widgetType, editValue, "new-row")));
+  }
+
+  // Add expansion cell at the end if it's positioned after all data columns
+  if (hasRowExpansion && expansionInsertIndex === dataColumnStartIndex + visibleColumns.length && !expansionCellAdded) {
+    totalCells.push(createEmptyCell("".concat(rowKey, "-expansion")));
+  }
+
+  // Add manual action column at the end if not already added
+  if (manualActionColumn && (manualActionColumn.rowactionsposition === undefined || manualActionColumn.rowactionsposition === -1 || Number(manualActionColumn.rowactionsposition) > visibleColumns.length)) {
+    totalCells.push(createActionButtonsCell("".concat(rowKey, "-manual-actions"), editMode, onSave, onCancel, listener));
+  }
+
+  // Add default actions column if no manual action column
+  if (!manualActionColumn && rowActions.length > 0) {
+    totalCells.push(createActionButtonsCell("".concat(rowKey, "-actions"), editMode, onSave, onCancel, listener));
+  }
+  return __jsx(_material.TableRow, {
+    className: "add-new-row",
+    key: rowKey
+  }, totalCells);
+};

package/components/data/table/components/EditableCell.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { EditableCellProps } from "../props";
+export declare const EditableCell: React.FC<EditableCellProps>;
+export default EditableCell;