@wavemaker-ai/react-runtime 1.0.0-next.27766

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,401 @@
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, useMemo, useEffect } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { usePagination, useNavigationSize } from "./hooks";
+import {
+  BasicPagination,
+  ClassicPagination,
+  PagerNavigation,
+  TotalRecords,
+  PageSizeSelector
+} from "./components";
+import { LIST_ALIGN, LIST_NAVIGATION_TYPES } from "../list/utils/constants";
+const WmPagination = memo((props) => {
+  const {
+    name,
+    dataset,
+    maxResults = 10,
+    currentPage,
+    navigation = LIST_NAVIGATION_TYPES.BASIC,
+    navigationsize,
+    navigationalign = LIST_ALIGN.LEFT,
+    showrecordcount = false,
+    maxsize = 5,
+    boundarylinks = false,
+    directionlinks = true,
+    allowpagesizechange = false,
+    pagesizeoptions = "5,10,20,50,100",
+    className,
+    styles,
+    listener,
+    onPaginationChange,
+    onSetRecord,
+    onPageSizeChange,
+    datasource,
+    isLoadingMore,
+    setIsLoadingMore,
+    isServerSidePagination,
+    onDataUpdate,
+    // On-Demand navigation props
+    ondemandmessage = "Load More",
+    viewlessmessage = "View Less",
+    showviewlessbutton = false,
+    listDirection,
+    scrollContainerRef
+  } = props;
+  const pagination = usePagination({
+    dataset,
+    maxResults,
+    currentPage,
+    navigation,
+    name,
+    listener,
+    onPaginationChange,
+    onSetRecord,
+    onPageSizeChange,
+    paginationMeta: props.paginationMeta,
+    totalItems: props.totalItems,
+    datasource,
+    isLoadingMore,
+    setIsLoadingMore,
+    isServerSidePagination,
+    listDirection,
+    scrollContainerRef,
+    sentinelRef: props.sentinelRef,
+    datasourceInvokeOptions: props.datasourceInvokeOptions
+  });
+  const prevResultLengthRef = React.useRef(0);
+  React.useEffect(() => {
+    const isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
+    if (isAccumulatingMode && onDataUpdate && pagination.result) {
+      if (pagination.result.length !== prevResultLengthRef.current) {
+        prevResultLengthRef.current = pagination.result.length;
+        onDataUpdate(pagination.result);
+      }
+    }
+  }, [navigation, onDataUpdate, pagination.result]);
+  const { navigationClass } = useNavigationSize({
+    navigation,
+    navigationsize
+  });
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!name || !((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name])) return;
+    const paginationWidget = (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name];
+    Object.assign(paginationWidget, pagination, {
+      // Add convenience navigation methods
+      goToFirstPage: () => pagination.navigatePage("first"),
+      goToLastPage: () => pagination.navigatePage("last"),
+      goToNextPage: () => pagination.navigatePage("next"),
+      goToPreviousPage: () => pagination.navigatePage("prev"),
+      actualPageSize: pagination.currentMaxResults
+    });
+    (_c = props == null ? void 0 : props.onPaginationWidgetReady) == null ? void 0 : _c.call(props, paginationWidget);
+  }, [name, pagination, props == null ? void 0 : props.onPaginationWidgetReady]);
+  const flexContainerStyles = useMemo(() => {
+    const baseStyles = {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      gap: 2
+    };
+    if (!showrecordcount) {
+      return __spreadProps(__spreadValues({}, baseStyles), {
+        justifyContent: navigationalign === "right" ? "flex-end" : navigationalign === "center" ? "center" : "flex-start"
+      });
+    }
+    return __spreadProps(__spreadValues({}, baseStyles), {
+      justifyContent: "space-between"
+    });
+  }, [showrecordcount, navigationalign]);
+  const pageSizeSelector = useMemo(() => {
+    var _a;
+    if (!allowpagesizechange) return null;
+    const parsedOptions = pagesizeoptions.split(",").map((opt) => parseInt(opt.trim(), 10)).filter((opt) => !isNaN(opt));
+    if (((_a = props.paginationMeta) == null ? void 0 : _a.size) && !parsedOptions.includes(props.paginationMeta.size)) {
+      parsedOptions.push(props.paginationMeta.size);
+    }
+    const minPageSize = parsedOptions.length > 0 ? Math.min(...parsedOptions) : 0;
+    if (pagination.dataSize < minPageSize) return null;
+    return /* @__PURE__ */ jsx(
+      PageSizeSelector,
+      {
+        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
+  ]);
+  const renderWithLayout = (children, recordCountVariant) => {
+    if (!showrecordcount) {
+      return /* @__PURE__ */ jsx(Box, { sx: flexContainerStyles, children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children }) });
+    }
+    if (navigationalign === "center") {
+      return /* @__PURE__ */ jsxs(Box, { sx: flexContainerStyles, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          children,
+          /* @__PURE__ */ jsx(TotalRecords, { dataSize: pagination.dataSize, variant: recordCountVariant })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Box, { sx: flexContainerStyles, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            order: navigationalign === "right" ? 2 : 1
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { sx: { order: navigationalign === "right" ? 1 : 2 }, children: /* @__PURE__ */ jsx(TotalRecords, { dataSize: pagination.dataSize, variant: recordCountVariant }) })
+    ] });
+  };
+  const renderNavigation = () => {
+    const showNavigation = pagination.pageCount > 1;
+    switch (pagination.navcontrols) {
+      case "Basic":
+        return showNavigation ? /* @__PURE__ */ jsx(
+          BasicPagination,
+          {
+            pageCount: pagination.pageCount,
+            currentPage: pagination.currentPage,
+            dataSize: pagination.dataSize,
+            maxResults: pagination.currentMaxResults,
+            boundarylinks,
+            directionlinks,
+            navigationsize,
+            navigationClass,
+            maxsize,
+            onPageChange: pagination.handlePageChange
+          }
+        ) : null;
+      case "Classic":
+        return showNavigation ? /* @__PURE__ */ jsx(
+          ClassicPagination,
+          {
+            currentPage: pagination.currentPage,
+            pageCount: pagination.pageCount,
+            dataSize: pagination.dataSize,
+            maxResults: pagination.currentMaxResults,
+            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 ? /* @__PURE__ */ jsx(
+          PagerNavigation,
+          {
+            navigationClass,
+            isDisablePrevious: pagination.isDisablePrevious,
+            isDisableNext: pagination.isDisableNext,
+            onNavigate: pagination.navigatePage
+          }
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  const renderPaginationContent = () => {
+    if (navigation === "None" || navigation === "Scroll") {
+      return null;
+    }
+    const navigationComponent = renderNavigation();
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      pageSizeSelector,
+      navigationComponent
+    ] });
+    if (!pageSizeSelector && !navigationComponent && !showrecordcount) {
+      return null;
+    }
+    const recordCountVariant = pagination.navcontrols === "Classic" ? "Classic" : "Basic";
+    return renderWithLayout(content, recordCountVariant);
+  };
+  if (pagination.navcontrols === "On-Demand") {
+    const hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+    const shouldShowLoadMore = hasEnoughData && pagination.hasMoreData && pagination.accumulatedDataCount < pagination.dataSize;
+    const shouldShowViewLess = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+    const showButton = shouldShowLoadMore || shouldShowViewLess;
+    if (!showButton && !pagination.isLoadingMore) {
+      return null;
+    }
+    const buttonText = shouldShowViewLess ? viewlessmessage : ondemandmessage;
+    const buttonAction = shouldShowViewLess ? pagination.resetAccumulatedData : pagination.loadMoreData;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "div",
+        className: clsx("on-demand-datagrid", className),
+        sx: __spreadValues({}, styles),
+        id: name,
+        children: [
+          pagination.isLoadingMore && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "div",
+              className: "loading-data-msg spin-icon-in-center",
+              sx: { textAlign: "center", padding: "16px" },
+              children: /* @__PURE__ */ jsxs(Box, { component: "span", children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "i",
+                    className: "app-icon panel-icon fa-spin fa fa-circle-o-notch",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: "Loading" }),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "loading-text", sx: { marginLeft: 1 }, children: "Loading..." })
+              ] })
+            }
+          ),
+          showButton && !pagination.isLoadingMore && /* @__PURE__ */ jsx(
+            Box,
+            {
+              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"
+                }
+              },
+              children: buttonText
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (pagination.navcontrols === "Scroll") {
+    const hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+    const shouldShowViewLessInScroll = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+    const showVerticalScrollSentinel = listDirection === "column" || listDirection === "vertical";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx("app-datanavigator clearfix", className),
+        sx: __spreadProps(__spreadValues({}, styles), {
+          width: "100%",
+          position: "relative"
+        }),
+        id: name,
+        children: [
+          pagination.isLoadingMore && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                padding: 2,
+                width: "100%",
+                textAlign: "center"
+              },
+              children: /* @__PURE__ */ jsxs(Box, { className: "status", children: [
+                /* @__PURE__ */ jsx("i", { className: "fa fa-circle-o-notch fa-spin" }),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "message", sx: { marginLeft: 1 }, children: "Loading..." })
+              ] })
+            }
+          ),
+          shouldShowViewLessInScroll && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "a",
+              className: "app-button btn btn-block on-demand-load-btn",
+              onClick: pagination.resetAccumulatedData,
+              children: viewlessmessage
+            }
+          ),
+          showVerticalScrollSentinel && /* @__PURE__ */ jsx(
+            Box,
+            {
+              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 /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: clsx("app-datanavigator clearfix", className),
+      sx: __spreadProps(__spreadValues({}, styles), {
+        width: "100%"
+      }),
+      id: name,
+      onClick: (e) => e.stopPropagation(),
+      children: renderPaginationContent()
+    }
+  );
+});
+WmPagination.displayName = "WmPagination";
+var pagination_default = WmPagination;
+export {
+  pagination_default as default
+};

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,162 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TableRow, TableCell, Box } from "@mui/material";
+import clsx from "clsx";
+import { filter } from "lodash-es";
+import WmTableRowAction from "../table-row-action";
+const createEmptyCell = (key, className = "text-center") => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Box, { className }) }, key);
+const createActionButton = (key, name, actionKey, title, iconClass, onClick, listener) => /* @__PURE__ */ jsx(
+  WmTableRowAction,
+  {
+    name,
+    className: `${actionKey === "acceptNew" ? "save" : "cancel"} row-action-button btn app-button btn-transparent ${name}-button`,
+    "data-action-key": actionKey,
+    displayName: "",
+    title,
+    iconclass: iconClass,
+    action: actionKey === "acceptNew" ? "save" : "cancel",
+    row: {},
+    rowIndex: -1,
+    listener,
+    show: true,
+    onClick: (event) => {
+      event == null ? void 0 : event.preventDefault();
+      event == null ? void 0 : event.stopPropagation();
+      onClick();
+    }
+  },
+  key
+);
+const createActionButtonsCell = (key, editMode, onSave, onCancel, listener) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Box, { component: "span", className: "actions-column", children: editMode === "inline" ? (
+  // Show save/cancel buttons for inline edit
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    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
+) }) }, key);
+const AddNewRow = ({
+  isAddingNewRow,
+  editMode,
+  wmTableColumns,
+  rowActions,
+  showrowindex,
+  radioselect = false,
+  multiselect = false,
+  sessionKey,
+  editingRowData,
+  renderEditableCell,
+  onKeyDown,
+  handleSave: onSave,
+  handleCancel: onCancel,
+  listener,
+  hasRowExpansion = false,
+  expansionPosition = 0
+}) => {
+  var _a, _b;
+  if (!isAddingNewRow || editMode !== "inline" && editMode !== "quickedit") {
+    return null;
+  }
+  const rowKey = editMode === "quickedit" ? "quick-edit-new-row" : "add-new-row";
+  const allVisibleColumns = filter(
+    wmTableColumns,
+    (col) => col.show !== false
+  );
+  const manualActionColumn = allVisibleColumns.find((col) => col.binding === "rowOperations");
+  const visibleColumns = allVisibleColumns.filter((col) => col.binding !== "rowOperations");
+  const totalCells = [];
+  if (radioselect || multiselect) {
+    totalCells.push(createEmptyCell(`${rowKey}-selection`));
+  }
+  if (showrowindex) {
+    totalCells.push(createEmptyCell(`${rowKey}-index`));
+  }
+  if (manualActionColumn && manualActionColumn.rowactionsposition === 0) {
+    totalCells.push(
+      createActionButtonsCell(`${rowKey}-manual-actions`, editMode, onSave, onCancel, listener)
+    );
+  }
+  const dataColumnStartIndex = totalCells.length;
+  const calculateExpansionIndex = () => {
+    if (!hasRowExpansion) return -1;
+    if (typeof expansionPosition === "number" || !isNaN(Number(expansionPosition))) {
+      return dataColumnStartIndex + Number(expansionPosition);
+    } else if (expansionPosition === "-1" || String(expansionPosition) === "-1") {
+      return dataColumnStartIndex + visibleColumns.length;
+    } else if (typeof expansionPosition === "string") {
+      const columnIndex = visibleColumns.findIndex(
+        (col) => col.field === expansionPosition || col.binding === expansionPosition
+      );
+      return columnIndex >= 0 ? dataColumnStartIndex + columnIndex + 1 : dataColumnStartIndex;
+    }
+    return dataColumnStartIndex;
+  };
+  const expansionInsertIndex = calculateExpansionIndex();
+  let expansionCellAdded = false;
+  if (hasRowExpansion && expansionInsertIndex === dataColumnStartIndex) {
+    totalCells.push(createEmptyCell(`${rowKey}-expansion`));
+    expansionCellAdded = true;
+  }
+  for (let index = 0; index < visibleColumns.length; index++) {
+    const column = visibleColumns[index];
+    const actualIndex = dataColumnStartIndex + index;
+    if (hasRowExpansion && actualIndex === expansionInsertIndex && !expansionCellAdded) {
+      totalCells.push(createEmptyCell(`${rowKey}-expansion`));
+      expansionCellAdded = true;
+    }
+    if (manualActionColumn && manualActionColumn.rowactionsposition !== void 0 && manualActionColumn.rowactionsposition !== 0 && Number(manualActionColumn.rowactionsposition) === index + 1) {
+      totalCells.push(
+        createActionButtonsCell(`${rowKey}-manual-actions`, editMode, onSave, onCancel, listener)
+      );
+    }
+    const fieldName = String(column.field || `field_${index}`);
+    const widgetType = String(column.editWidgetType || "WmText");
+    const editValue = (_b = (_a = editingRowData[fieldName]) != null ? _a : column.defaultvalue) != null ? _b : "";
+    totalCells.push(
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          className: clsx("app-datagrid-cell cell-editing form-group", {
+            "required-field": column.required
+          }),
+          children: column.readonly ? /* @__PURE__ */ jsx(Fragment, {}) : renderEditableCell(column, fieldName, widgetType, editValue, "new-row")
+        },
+        `new-row-${fieldName}`
+      )
+    );
+  }
+  if (hasRowExpansion && expansionInsertIndex === dataColumnStartIndex + visibleColumns.length && !expansionCellAdded) {
+    totalCells.push(createEmptyCell(`${rowKey}-expansion`));
+  }
+  if (manualActionColumn && (manualActionColumn.rowactionsposition === void 0 || manualActionColumn.rowactionsposition === -1 || Number(manualActionColumn.rowactionsposition) > visibleColumns.length)) {
+    totalCells.push(
+      createActionButtonsCell(`${rowKey}-manual-actions`, editMode, onSave, onCancel, listener)
+    );
+  }
+  if (!manualActionColumn && rowActions.length > 0) {
+    totalCells.push(
+      createActionButtonsCell(`${rowKey}-actions`, editMode, onSave, onCancel, listener)
+    );
+  }
+  return /* @__PURE__ */ jsx(TableRow, { className: "add-new-row", children: totalCells }, rowKey);
+};
+export {
+  AddNewRow
+};

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;

package/components/data/table/components/EditableCell.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@mui/material";
+import { FieldValidationError } from "./FieldValidationError";
+const EditableCell = ({
+  column,
+  rowData,
+  rowId,
+  fieldName,
+  widgetType,
+  editValue,
+  fieldValidationErrorsRef,
+  cellUpdateCallbacksRef,
+  fieldRefs,
+  renderFormWidget,
+  updateFieldValue,
+  sessionKey = 0,
+  onKeyDown,
+  editMode = "inline"
+}) => {
+  var _a;
+  const cellRef = useRef(null);
+  const [, setForceUpdate] = useState(0);
+  const fieldKey = `${rowId}_${fieldName}`;
+  const cellRefCallback = (element) => {
+    cellRef.current = element;
+    if (element && fieldRefs.current) {
+      fieldRefs.current[fieldKey] = element;
+    }
+  };
+  useEffect(() => {
+    if (cellUpdateCallbacksRef.current) {
+      cellUpdateCallbacksRef.current[fieldKey] = () => setForceUpdate((prev) => prev + 1);
+    }
+    return () => {
+      if (cellUpdateCallbacksRef.current) {
+        delete cellUpdateCallbacksRef.current[fieldKey];
+      }
+    };
+  }, [fieldKey, cellUpdateCallbacksRef]);
+  const showError = ((_a = fieldValidationErrorsRef.current) == null ? void 0 : _a[fieldKey]) === true;
+  const handleKeyDown = (e) => {
+    if (onKeyDown) {
+      onKeyDown(e, rowId);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: cellRefCallback,
+      onKeyDown: editMode === "quickedit" || editMode === "inline" ? handleKeyDown : void 0,
+      "data-field-name": fieldName,
+      "data-row-id": rowId,
+      children: [
+        renderFormWidget(
+          fieldName,
+          widgetType,
+          editValue,
+          (newValue) => updateFieldValue(fieldName, newValue, rowId),
+          {
+            required: column.required,
+            disabled: column.disabled,
+            placeholder: column.placeholder,
+            defaultvalue: column.defaultvalue,
+            sessionKey: `${sessionKey}_${rowId}_${fieldName}`,
+            rowData,
+            column
+          }
+        ),
+        showError && /* @__PURE__ */ jsx(
+          FieldValidationError,
+          {
+            showError: true,
+            title: column.validationmessage ? column.validationmessage : column.required ? "This field is required" : "Field validation failed"
+          }
+        )
+      ]
+    }
+  );
+};
+var EditableCell_default = EditableCell;
+export {
+  EditableCell,
+  EditableCell_default as default
+};

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

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