@wavemaker/react-runtime 11.14.1-15.6409

package/components/data/pagination/index.js

@@ -0,0 +1,322 @@
+"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 _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 _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+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;
+
+  // 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,
+    datasourceInvokeOptions: props.datasourceInvokeOptions
+  });
+
+  // Notify parent component when data changes in Scroll mode
+  var prevResultLengthRef = _react["default"].useRef(0);
+  _react["default"].useEffect(function () {
+    if (navigation === "Scroll" && 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;
+
+  // 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 () {
+    if (!allowpagesizechange) 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;
+      case "Scroll":
+        // For scroll navigation, render a sentinel element for intersection observer
+        return null;
+      // Navigation controls not needed for infinite scroll
+
+      default:
+        return null;
+    }
+  };
+
+  // Simple render function - avoid over-optimization that causes re-renders
+  var renderPaginationContent = function renderPaginationContent() {
+    var navigationComponent = renderNavigation();
+    var content = __jsx(_react["default"].Fragment, null, pageSizeSelector, navigationComponent);
+
+    // Return early if no content to render
+    if (!pageSizeSelector && !navigationComponent) {
+      return null;
+    }
+
+    // Get the appropriate record count variant based on navigation type
+    var recordCountVariant = pagination.navcontrols === "Classic" ? "Classic" : "Basic";
+    return renderWithLayout(content, recordCountVariant);
+  };
+
+  // Render infinite scroll content
+  if (pagination.navcontrols === "Scroll") {
+    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..."))), !pagination.hasMoreData && pagination.dataSize > 0 && __jsx(_Box["default"], {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 2,
+        width: "100%",
+        textAlign: "center",
+        color: "text.secondary"
+      }
+    }, __jsx("span", null, "No more data to load")), __jsx(_Box["default"], {
+      ref: function ref(el) {
+        if (pagination.sentinelRef) {
+          pagination.sentinelRef.current = el;
+        }
+        // Observer setup is handled by useEffect in the hook when data is initialized
+      },
+      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";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmPagination);

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

@@ -0,0 +1,190 @@
+"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 _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)
+    }, 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.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EditableCell = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _FieldValidationError = require("./FieldValidationError");
+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;
+var EditableCell = exports.EditableCell = function EditableCell(_ref) {
+  var _fieldValidationError;
+  var column = _ref.column,
+    rowData = _ref.rowData,
+    rowId = _ref.rowId,
+    fieldName = _ref.fieldName,
+    widgetType = _ref.widgetType,
+    editValue = _ref.editValue,
+    fieldValidationErrorsRef = _ref.fieldValidationErrorsRef,
+    cellUpdateCallbacksRef = _ref.cellUpdateCallbacksRef,
+    fieldRefs = _ref.fieldRefs,
+    renderFormWidget = _ref.renderFormWidget,
+    updateFieldValue = _ref.updateFieldValue,
+    _ref$sessionKey = _ref.sessionKey,
+    sessionKey = _ref$sessionKey === void 0 ? 0 : _ref$sessionKey,
+    onKeyDown = _ref.onKeyDown,
+    _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? "inline" : _ref$editMode;
+  var cellRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(0),
+    setForceUpdate = _useState[1];
+
+  // Generate a unique field key for validation tracking
+  var fieldKey = "".concat(rowId, "_").concat(fieldName);
+
+  // Create a ref callback to register the cell element for validation
+  var cellRefCallback = function cellRefCallback(element) {
+    cellRef.current = element;
+    if (element && fieldRefs.current) {
+      fieldRefs.current[fieldKey] = element;
+    }
+  };
+
+  // Register a cell update callback to force re-render on validation state changes
+  (0, _react.useEffect)(function () {
+    if (cellUpdateCallbacksRef.current) {
+      cellUpdateCallbacksRef.current[fieldKey] = function () {
+        return setForceUpdate(function (prev) {
+          return prev + 1;
+        });
+      };
+    }
+    return function () {
+      if (cellUpdateCallbacksRef.current) {
+        delete cellUpdateCallbacksRef.current[fieldKey];
+      }
+    };
+  }, [fieldKey, cellUpdateCallbacksRef]);
+
+  // Determine if we should show validation error
+  var showError = ((_fieldValidationError = fieldValidationErrorsRef.current) === null || _fieldValidationError === void 0 ? void 0 : _fieldValidationError[fieldKey]) === true;
+
+  // Handle keyboard events for quick edit mode
+  var handleKeyDown = function handleKeyDown(e) {
+    if (onKeyDown) {
+      onKeyDown(e, rowId);
+    }
+  };
+  return __jsx(_material.Box, {
+    ref: cellRefCallback,
+    onKeyDown: editMode === "quickedit" ? handleKeyDown : undefined,
+    "data-field-name": fieldName,
+    "data-row-id": rowId
+  }, renderFormWidget(fieldName, widgetType, editValue, function (newValue) {
+    return updateFieldValue(fieldName, newValue, rowId);
+  }, {
+    required: column.required,
+    disabled: column.disabled,
+    placeholder: column.placeholder,
+    defaultvalue: column.defaultvalue,
+    sessionKey: "".concat(sessionKey, "_").concat(rowId, "_").concat(fieldName),
+    rowData: rowData,
+    column: column
+  }), showError && __jsx(_FieldValidationError.FieldValidationError, {
+    showError: true,
+    title: column.required ? "This field is required" : "Field validation failed"
+  }));
+};
+var _default = exports["default"] = EditableCell;

package/components/data/table/components/FieldValidationError.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldValidationError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var __jsx = _react["default"].createElement;
+var FieldValidationError = exports.FieldValidationError = function FieldValidationError(_ref) {
+  var showError = _ref.showError,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Field validation failed" : _ref$title;
+  if (!showError) {
+    return null;
+  }
+  return __jsx("span", {
+    className: "text-danger wi wi-error",
+    "data-placement": "top",
+    "data-container": "body",
+    title: title
+  });
+};
+var _default = exports["default"] = FieldValidationError;