@wavemaker-ai/react-runtime 1.0.0-rc.647712 → 12.0.0-rc.335

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

@@ -1,7 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { Box } from "@mui/material";
+import { useFormState } from "react-hook-form";
+import { get, isString } from "lodash-es";
 import { FieldValidationError } from "./FieldValidationError";
+import { isColumnValidatable } from "../utils/columnValidation";
+const CELL_SX = {
+  position: "relative",
+  "& > .wi-error": {
+    position: "absolute",
+    // Centres the 16px glyph on the editor without depending on the editor's height.
+    top: "calc(50% - 10px)",
+    right: 0,
+    // Above the input, which would otherwise paint over the icon.
+    zIndex: 3
+  }
+};
 const EditableCell = ({
   column,
   rowData,
@@ -9,8 +23,9 @@ const EditableCell = ({
   fieldName,
   widgetType,
   editValue,
-  fieldValidationErrorsRef,
-  cellUpdateCallbacksRef,
+  formRef,
+  cellErrorsRef,
+  columnValidatorsRef,
   fieldRefs,
   renderFormWidget,
   updateFieldValue,
@@ -19,31 +34,32 @@ const EditableCell = ({
   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;
-    }
-  };
+  const { errors } = useFormState({ control: formRef.control, name: fieldName, exact: true });
+  const error = get(errors, fieldName);
+  const showError = Boolean(error);
+  const cellRefCallback = useCallback(
+    (element) => {
+      if (!fieldRefs.current) return;
+      if (element) fieldRefs.current[fieldKey] = element;
+      else delete fieldRefs.current[fieldKey];
+    },
+    [fieldKey, fieldRefs]
+  );
   useEffect(() => {
-    if (cellUpdateCallbacksRef.current) {
-      cellUpdateCallbacksRef.current[fieldKey] = () => setForceUpdate((prev) => prev + 1);
-    }
+    const cellErrors = cellErrorsRef == null ? void 0 : cellErrorsRef.current;
+    if (!cellErrors) return;
+    if (showError) cellErrors[fieldKey] = true;
+    else delete cellErrors[fieldKey];
     return () => {
-      if (cellUpdateCallbacksRef.current) {
-        delete cellUpdateCallbacksRef.current[fieldKey];
-      }
+      delete cellErrors[fieldKey];
     };
-  }, [fieldKey, cellUpdateCallbacksRef]);
-  const showError = ((_a = fieldValidationErrorsRef.current) == null ? void 0 : _a[fieldKey]) === true;
+  }, [showError, fieldKey, cellErrorsRef]);
   const handleKeyDown = (e) => {
-    if (onKeyDown) {
-      onKeyDown(e, rowId);
-    }
+    onKeyDown == null ? void 0 : onKeyDown(e, rowId);
   };
+  const ignoreInForm = !isColumnValidatable(column);
+  const columnValidators = (_a = columnValidatorsRef == null ? void 0 : columnValidatorsRef.current) == null ? void 0 : _a[fieldName];
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -51,6 +67,7 @@ const EditableCell = ({
       onKeyDown: editMode === "quickedit" || editMode === "inline" ? handleKeyDown : void 0,
       "data-field-name": fieldName,
       "data-row-id": rowId,
+      sx: CELL_SX,
       children: [
         renderFormWidget(
           fieldName,
@@ -64,14 +81,20 @@ const EditableCell = ({
             defaultvalue: column.defaultvalue,
             sessionKey: `${sessionKey}_${rowId}_${fieldName}`,
             rowData,
-            column
+            column,
+            formRef,
+            // formKey stays stable; widget name keeps session-unique value
+            formKey: fieldName,
+            validators: columnValidators == null ? void 0 : columnValidators.validators,
+            asyncValidators: columnValidators == null ? void 0 : columnValidators.asyncValidators,
+            ignoreInForm
           }
         ),
         showError && /* @__PURE__ */ jsx(
           FieldValidationError,
           {
             showError: true,
-            title: column.validationmessage ? column.validationmessage : column.required ? "This field is required" : "Field validation failed"
+            title: isString(error == null ? void 0 : error.message) && error.message || column.validationmessage || (column.required ? "This field is required" : "Field validation failed")
           }
         )
       ]

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

@@ -9,7 +9,7 @@ const FieldValidationError = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "text-danger wi wi-error",
+      className: "app-label text-danger wi wi-error",
       "data-placement": "top",
       "data-container": "body",
       title

package/components/data/table/components/TableHeader.js

@@ -36,6 +36,7 @@ import { flexRender } from "@tanstack/react-table";
 import { TABLE_CSS_CLASSES, getDomHiddenCellStyle } from "../utils";
 import { TableFilterRow } from "./TableFilters";
 import { calculateMaxDepth, generateHeaderRows, hasTableGroups } from "../utils/groupHeaderUtils";
+import { getWidgetForCallback } from "../utils/selectionUtils";
 const StandardHeaderCell = memo(
   (_a) => {
     var _b = _a, {
@@ -169,6 +170,7 @@ const TableHeaderComponent = memo(
     onColumnFilterChange,
     renderFormWidget,
     listener,
+    viewParent,
     tableStructure,
     onColumnSelect,
     onColumnDeselect,
@@ -342,7 +344,7 @@ const TableHeaderComponent = memo(
             const columnId = header.column.id;
             const isSystemColumn = columnId === "multiSelect" || columnId === "radioSelect" || columnId === "row-index" || columnId === "rowIndex" || columnId === "actions";
             const handleHeaderClick = (event) => {
-              var _a2, _b2;
+              var _a2;
               if (onHeaderclick) {
                 const colDef = header.column.columnDef;
                 const columnData = {
@@ -350,7 +352,11 @@ const TableHeaderComponent = memo(
                   caption: colDef.header || columnId,
                   colDef
                 };
-                onHeaderclick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[tableName || ""], columnData);
+                onHeaderclick(
+                  event,
+                  getWidgetForCallback(listener, viewParent, tableName || ""),
+                  columnData
+                );
               }
               if (enablecolumnselection && !isSystemColumn) {
                 const target = event.currentTarget;
@@ -376,7 +382,7 @@ const TableHeaderComponent = memo(
                 return;
               }
               if (enablesort && header.column.getCanSort()) {
-                (_b2 = header.column.getToggleSortingHandler()) == null ? void 0 : _b2(event);
+                (_a2 = header.column.getToggleSortingHandler()) == null ? void 0 : _a2(event);
               }
             };
             const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();

package/components/data/table/hooks/useFormWidget.js

@@ -66,6 +66,17 @@ const useFormWidget = ({ listener }) => {
         key: uniqueName,
         // Add key to force component recreation
         name: uniqueName,
+        // Wiring the cell into the table's own react-hook-form instance. withFormController
+        // prefers this `formRef` over the page form's context, keys the field by `formKey`, and
+        // turns `validators` (plus the column's required/regexp/maxchars/min/max) into rules —
+        // including the date/time bounds it hands straight back to the picker. `ignoreInForm`
+        // opts a cell out entirely, leaving the widget uncontrolled.
+        formRef: widgetProps == null ? void 0 : widgetProps.formRef,
+        formKey: widgetProps == null ? void 0 : widgetProps.formKey,
+        validators: widgetProps == null ? void 0 : widgetProps.validators,
+        asyncValidators: widgetProps == null ? void 0 : widgetProps.asyncValidators,
+        ignoreInForm: widgetProps == null ? void 0 : widgetProps.ignoreInForm,
+        hideValidationMessage: true,
         datavalue: effectiveValue,
         required: (widgetProps == null ? void 0 : widgetProps.required) || false,
         disabled,

package/components/data/table/hooks/useRowSelection.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import isEqual from "lodash-es/isEqual";
 import {
   isInteractiveElement,
   isSelectionCheckboxRenamed,
@@ -12,6 +13,36 @@ import {
 import { saveTableState, getTableState } from "../utils/table-helpers";
 import { cleanRowData, UNSUPPORTED_STATE_PERSISTENCE_TYPES } from "../utils";
 const getRowFallbackId = (row) => row._wmTableRowId || String(row.id) || String(0);
+const omitEmptyArrays = (row) => {
+  const result = {};
+  Object.keys(row).forEach((key) => {
+    const value = row[key];
+    if (Array.isArray(value) && value.length === 0) return;
+    if (typeof value === "function") return;
+    result[key] = value;
+  });
+  return result;
+};
+const resolveRowFromDataset = (dataset, itemOrIndex) => {
+  var _a, _b, _c;
+  const rows = dataset || [];
+  if (typeof itemOrIndex === "number") {
+    return (_a = rows[itemOrIndex]) != null ? _a : null;
+  }
+  if (!itemOrIndex || typeof itemOrIndex !== "object") {
+    return null;
+  }
+  if (rows.indexOf(itemOrIndex) >= 0) {
+    return itemOrIndex;
+  }
+  const candidateId = (_b = itemOrIndex._wmTableRowId) != null ? _b : itemOrIndex.id;
+  if (candidateId !== void 0 && candidateId !== null) {
+    const byId = rows.find((row) => row._wmTableRowId === candidateId || row.id === candidateId);
+    if (byId) return byId;
+  }
+  const needle = omitEmptyArrays(itemOrIndex);
+  return (_c = rows.find((row) => isEqual(omitEmptyArrays(row), needle))) != null ? _c : null;
+};
 const getSelectedIndices = (selectedIds, dataset) => selectedIds.reduce((indices, rowId) => {
   const index = dataset.findIndex((row) => row._wmTableRowId === rowId || row.id === rowId);
   if (index >= 0) {
@@ -354,6 +385,30 @@ const useRowSelection = ({
     useMultiSelect,
     applySelectionForMode
   ]);
+  const selectItem = useCallback(
+    (itemOrIndex) => {
+      const row = resolveRowFromDataset(datasetRef.current, itemOrIndex);
+      if (!row) return;
+      const rowId = getRowFallbackId(row);
+      if (selectionStateHelpers.isRowSelected(cellState, rowId)) return;
+      if (useMultiSelect) {
+        handleMultiSelection(rowId, row, true);
+      } else {
+        handleRadioSelection(rowId, row);
+      }
+    },
+    [cellState, useMultiSelect, handleMultiSelection, handleRadioSelection]
+  );
+  const deselectItem = useCallback(
+    (itemOrIndex) => {
+      const row = resolveRowFromDataset(datasetRef.current, itemOrIndex);
+      if (!row) return;
+      const rowId = getRowFallbackId(row);
+      if (!selectionStateHelpers.isRowSelected(cellState, rowId)) return;
+      handleMultiSelection(rowId, row, false);
+    },
+    [cellState, handleMultiSelection]
+  );
   return {
     selectedRowIds,
     useMultiSelect,
@@ -363,7 +418,9 @@ const useRowSelection = ({
     handleSelectAll,
     handleRowSelectionClick,
     isRowSelected,
-    isInteractiveElement
+    isInteractiveElement,
+    selectItem,
+    deselectItem
   };
 };
 export {

package/components/data/table/hooks/useTableEdit.d.ts

@@ -1,4 +1,4 @@
 import { UseFormWidgetReturn, UseTableEditProps, UseTableEditReturn } from "../props";
-export declare const useTableEdit: ({ editMode, internalDataset, setInternalDataset, wmTableColumns, cellState, renderFormWidget, listener, onRowUpdate, onRowDelete, onNewRowAdded, showrowindex, radioselect, multiselect, rowActions, formposition, insertmessage, updatemessage, errormessage, showToast, hasRowExpansion, expansionPosition, datasource, binddataset, onSuccess, onError, onRowinsert, onRowupdate, tableRef, isServerSidePagination, tableName, }: UseTableEditProps & {
+export declare const useTableEdit: ({ editMode, internalDataset, setInternalDataset, wmTableColumns, cellState, renderFormWidget, listener, onRowUpdate, onRowDelete, onNewRowAdded, showrowindex, radioselect, multiselect, rowActions, formposition, insertmessage, updatemessage, errormessage, showToast, hasRowExpansion, expansionPosition, datasource, binddataset, onSuccess, onError, onRowinsert, onRowupdate, tableRef, isServerSidePagination, tableName, columnValidatorsRef, }: UseTableEditProps & {
     renderFormWidget: UseFormWidgetReturn["renderFormWidget"];
 }) => UseTableEditReturn;

package/components/data/table/hooks/useTableEdit.js

@@ -19,22 +19,38 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useEffect } from "react";
-import { find, forEach, entries, get, every } from "lodash-es";
+import { get } from "lodash-es";
 import { EditableCell } from "../components";
 import { AddNewRow } from "../components/AddNewRow";
-import { validateEditingFields, TABLE_MESSAGES, INTERNAL_PROPERTIES } from "../utils";
+import { TABLE_MESSAGES, INTERNAL_PROPERTIES } from "../utils";
 import { useEditingState } from "./useEditingState";
 import {
-  validateField,
-  resetValidationState as resetValidation,
-  updateValidationErrors
-} from "../utils/validation";
+  isColumnValidatable,
+  collectNativeValidityErrors,
+  focusFirstInvalidCell
+} from "../utils/columnValidation";
+import { useTableEditForms } from "./useTableEditForms";
 import { handleServerOperation } from "../utils/crud-handlers";
 import { useUpdateEditedCell, useEditedRowsContext } from "./use-edited-rows";
 import {
   useFormContext,
   useParentFormData
 } from "../../form/form-context";
+const DEFERRED_COMMIT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "number",
+  "email",
+  "url",
+  "tel",
+  "search",
+  "password"
+]);
+const readPendingInputValue = (element) => {
+  if (element.tagName === "TEXTAREA") return element.value;
+  if (element.tagName !== "INPUT") return void 0;
+  const input = element;
+  return DEFERRED_COMMIT_INPUT_TYPES.has(input.type) ? input.value : void 0;
+};
 const MODE_CONFIGS = {
   inline: {
     showNewRowFormByDefault: false,
@@ -97,7 +113,8 @@ const useTableEdit = ({
   onRowupdate,
   tableRef,
   isServerSidePagination,
-  tableName
+  tableName,
+  columnValidatorsRef
 }) => {
   const updateCell = useUpdateEditedCell();
   const { getEdits, removeRowEdits } = useEditedRowsContext();
@@ -118,20 +135,24 @@ const useTableEdit = ({
   const parentFormDataContext = useParentFormData();
   const parentDataPath = (parentFormDataContext == null ? void 0 : parentFormDataContext.parentDataPath) !== void 0 ? parentFormDataContext.parentDataPath : void 0;
   const fieldRefs = useRef({});
-  const fieldValidationErrorsRef = useRef({});
-  const cellUpdateCallbacksRef = useRef({});
+  const cellErrorsRef = useRef({});
   const originalRowDataRef = useRef({});
-  const validationState = {
-    fieldRefs,
-    fieldValidationErrors: fieldValidationErrorsRef,
-    cellUpdateCallbacks: cellUpdateCallbacksRef
-  };
+  const { editForm, newRowForm } = useTableEditForms(tableName);
+  const usesSeparateNewRowSession = editMode === "quickedit";
+  const formFor = useCallback(
+    (isNewRowSession) => isNewRowSession && usesSeparateNewRowSession ? newRowForm : editForm,
+    [editForm, newRowForm, usesSeparateNewRowSession]
+  );
+  const dataRefFor = useCallback(
+    (isNewRowSession) => isNewRowSession && usesSeparateNewRowSession ? newRowDataRef : editingRowDataRef,
+    [usesSeparateNewRowSession, newRowDataRef, editingRowDataRef]
+  );
   const config = MODE_CONFIGS[editMode] || MODE_CONFIGS.none;
   const resetValidationState = useCallback(
-    (context) => {
-      resetValidation(context, editingRowId, validationState);
+    (isNewRowSession = false) => {
+      formFor(isNewRowSession).reset();
     },
-    [editingRowId]
+    [formFor]
   );
   useEffect(() => {
     setIsAddingNewRow(config.showNewRowFormByDefault);
@@ -150,7 +171,7 @@ const useTableEdit = ({
       setEditingRowId(rowId);
       const existingEdits = getEdits(rowId) || {};
       editingRowDataRef.current = __spreadValues(__spreadValues({}, rowData), existingEdits);
-      resetValidationState(editMode === "quickedit" ? "all" : void 0);
+      resetValidationState();
       incrementSessionKey();
     },
     [
@@ -177,7 +198,7 @@ const useTableEdit = ({
       editingRowDataRef.current = {};
     }
     resetEditingData();
-    resetValidationState(editMode === "quickedit" ? "all" : void 0);
+    resetValidationState();
     incrementSessionKey();
   }, [
     editMode,
@@ -191,27 +212,43 @@ const useTableEdit = ({
     cellState
   ]);
   const saveEditingInternal = useCallback(
-    async (rowId, isNewRow, rowDataRef, onSaveSuccess) => {
+    async (rowId, isNewRow, rowDataRef, form, onSaveSuccess) => {
+      var _a, _b;
       const currentRowId = rowId || (isNewRow ? "new-row" : null);
       if (!currentRowId) return Promise.resolve(false);
       const activeElement = document.activeElement;
       if (activeElement) {
-        const editableCellContainer = activeElement.closest("[data-field-name]");
-        if (editableCellContainer) {
-          const fieldName = editableCellContainer.getAttribute("data-field-name");
-          const inputValue = activeElement.value;
-          if (fieldName && inputValue !== void 0) {
-            rowDataRef.current = __spreadProps(__spreadValues({}, rowDataRef.current), {
-              [fieldName]: inputValue
-            });
-          }
-        }
-        if (activeElement.blur) {
-          activeElement.blur();
+        const fieldName = (_a = activeElement.closest("[data-field-name]")) == null ? void 0 : _a.getAttribute("data-field-name");
+        const pendingValue = readPendingInputValue(activeElement);
+        if (fieldName && pendingValue !== void 0) {
+          rowDataRef.current = __spreadProps(__spreadValues({}, rowDataRef.current), {
+            [fieldName]: pendingValue
+          });
+          form.setFieldValue(fieldName, pendingValue);
         }
+        (_b = activeElement.blur) == null ? void 0 : _b.call(activeElement);
       }
       const currentEditingData = rowDataRef.current;
       const originalData = originalRowDataRef.current;
+      const validatableFields = wmTableColumns.filter(isColumnValidatable).map((column) => column.field);
+      if (!await form.validate()) {
+        focusFirstInvalidCell(
+          fieldRefs.current,
+          currentRowId,
+          form.getInvalidFields(validatableFields)
+        );
+        return false;
+      }
+      const nativeErrors = collectNativeValidityErrors(fieldRefs.current, currentRowId);
+      if (nativeErrors.length > 0) {
+        nativeErrors.forEach(({ fieldName, message }) => form.setFieldError(fieldName, message));
+        focusFirstInvalidCell(
+          fieldRefs.current,
+          currentRowId,
+          nativeErrors.map(({ fieldName }) => fieldName)
+        );
+        return false;
+      }
       if (!isNewRow && originalData && currentEditingData) {
         const hasChanges = wmTableColumns.some((column) => {
           if (!column.field || column.readonly) return false;
@@ -230,17 +267,6 @@ const useTableEdit = ({
           return true;
         }
       }
-      const relevantFieldRefs = {};
-      forEach(entries(fieldRefs.current), ([fieldKey, fieldElement]) => {
-        if (fieldKey.startsWith(`${currentRowId}_`)) {
-          relevantFieldRefs[fieldKey] = fieldElement;
-        }
-      });
-      const validationResult = validateEditingFields(relevantFieldRefs, currentRowId);
-      if (!validationResult.isValid) {
-        updateValidationErrors(validationResult, relevantFieldRefs, validationState);
-        return false;
-      }
       const result = await handleServerOperation({
         isNewRow,
         rowId,
@@ -315,19 +341,23 @@ const useTableEdit = ({
   const saveEditing = useCallback(async () => {
     const isNewRow = editMode === "inline" ? isAddingNewRow : false;
     const rowId = editingRowId || (isNewRow ? "new-row" : null);
-    const dataRef = editMode === "quickedit" && !editingRowId ? newRowDataRef : editingRowDataRef;
-    const success = await saveEditingInternal(rowId, isNewRow, dataRef, () => {
-      setEditingRowId(null);
-      if (editMode === "inline") {
-        setIsAddingNewRow(false);
-        editingRowDataRef.current = {};
+    const isNewRowSession = usesSeparateNewRowSession ? !editingRowId : isAddingNewRow;
+    const success = await saveEditingInternal(
+      rowId,
+      isNewRow,
+      dataRefFor(isNewRowSession),
+      formFor(isNewRowSession),
+      () => {
+        setEditingRowId(null);
+        if (editMode === "inline") {
+          setIsAddingNewRow(false);
+          editingRowDataRef.current = {};
+        }
+        resetEditingData();
+        resetValidationState(isNewRowSession);
+        incrementSessionKey();
       }
-      resetEditingData();
-      resetValidationState(
-        editMode === "quickedit" ? editingRowId ? "editing" : "new-row" : void 0
-      );
-      incrementSessionKey();
-    });
+    );
     return success;
   }, [
     editMode,
@@ -338,7 +368,10 @@ const useTableEdit = ({
     setEditingRowId,
     setIsAddingNewRow,
     incrementSessionKey,
-    saveEditingInternal
+    saveEditingInternal,
+    formFor,
+    dataRefFor,
+    usesSeparateNewRowSession
   ]);
   const updateFieldValue = useCallback(
     (fieldName, newValue, rowId) => {
@@ -361,26 +394,22 @@ const useTableEdit = ({
         newRowDataRef.current = __spreadProps(__spreadValues({}, newRowDataRef.current), {
           [fieldName]: newValue
         });
-        const column = find(wmTableColumns, (col) => col.field === fieldName);
-        validateField("new-row", fieldName, newValue, column, validationState);
       } else {
         editingRowDataRef.current = __spreadProps(__spreadValues({}, editingRowDataRef.current), {
           [fieldName]: newValue
         });
-        const column = find(wmTableColumns, (col) => col.field === fieldName);
-        validateField(effectiveRowId, fieldName, newValue, column, validationState);
       }
     },
-    [editMode, editingRowId, wmTableColumns, cellState, setInternalDataset]
+    [editMode, editingRowId, cellState, setInternalDataset]
   );
   const saveNewRow = useCallback(() => {
-    const success = saveEditingInternal(null, true, newRowDataRef, () => {
+    const success = saveEditingInternal(null, true, newRowDataRef, formFor(true), () => {
       newRowDataRef.current = {};
-      resetValidationState("new-row");
+      resetValidationState(true);
       incrementSessionKey();
     });
     return success;
-  }, [resetValidationState, incrementSessionKey, saveEditingInternal]);
+  }, [resetValidationState, incrementSessionKey, saveEditingInternal, formFor]);
   const handleKeyDown = useCallback(
     (e, sourceRowId) => {
       if (editMode === "inline" && e.key === "Enter" && !e.shiftKey) {
@@ -407,7 +436,7 @@ const useTableEdit = ({
         e.stopPropagation();
         if (isFromNewRow) {
           newRowDataRef.current = {};
-          resetValidationState("new-row");
+          resetValidationState(true);
           incrementSessionKey();
         } else if (isEditingRow) {
           cancelEditing();
@@ -441,8 +470,9 @@ const useTableEdit = ({
             fieldName,
             widgetType,
             editValue,
-            fieldValidationErrorsRef,
-            cellUpdateCallbacksRef,
+            formRef: formFor(false).formRef,
+            cellErrorsRef,
+            columnValidatorsRef,
             fieldRefs,
             renderFormWidget,
             updateFieldValue,
@@ -466,17 +496,22 @@ const useTableEdit = ({
       updateFieldValue,
       sessionKey,
       handleKeyDown,
-      config.hasKeyboardNavigation
+      config.hasKeyboardNavigation,
+      columnValidatorsRef,
+      formFor
     ]
   );
   const handleRowClick = useCallback(
     (rowData, rowId) => {
       if (!config.startEditOnRowClick) return;
-      if (!isRowEditing(rowId) && (editMode === "quickedit" || editMode === "inline" ? every(validationState.fieldValidationErrors.current, (error) => error === false) : true)) {
+      const editingRowHasErrors = !!editingRowId && Object.keys(cellErrorsRef.current).some(
+        (fieldKey) => fieldKey.startsWith(`${editingRowId}_`)
+      );
+      if (!isRowEditing(rowId) && !editingRowHasErrors) {
         startEditing(rowData, rowId);
       }
     },
-    [config.startEditOnRowClick, isRowEditing, startEditing]
+    [config.startEditOnRowClick, isRowEditing, startEditing, editingRowId]
   );
   const handleAddNewRowClick = useCallback(() => {
     if (editMode !== "inline") {
@@ -515,7 +550,8 @@ const useTableEdit = ({
   const renderAddNewRow = useCallback(() => {
     const shouldShowNewRow = editMode === "inline" && isAddingNewRow || editMode === "quickedit" && config.showNewRowFormByDefault;
     if (!shouldShowNewRow) return null;
-    const dataRef = editMode === "quickedit" ? newRowDataRef : editingRowDataRef;
+    const dataRef = dataRefFor(true);
+    const newRowFormRef = formFor(true).formRef;
     const onKeyDownHandler = config.hasKeyboardNavigation ? (e) => handleKeyDown(e, "new-row") : void 0;
     const renderCell = (column, fieldName, widgetType, editValue, rowId) => {
       return /* @__PURE__ */ jsx(
@@ -527,8 +563,9 @@ const useTableEdit = ({
           fieldName,
           widgetType,
           editValue,
-          fieldValidationErrorsRef,
-          cellUpdateCallbacksRef,
+          formRef: newRowFormRef,
+          cellErrorsRef,
+          columnValidatorsRef,
           fieldRefs,
           renderFormWidget,
           updateFieldValue,
@@ -557,7 +594,7 @@ const useTableEdit = ({
         handleCancel: () => {
           if (editMode === "quickedit") {
             newRowDataRef.current = {};
-            resetValidationState("new-row");
+            resetValidationState(true);
             incrementSessionKey();
           } else {
             cancelEditing();
@@ -588,7 +625,10 @@ const useTableEdit = ({
     incrementSessionKey,
     sessionKey,
     hasRowExpansion,
-    expansionPosition
+    expansionPosition,
+    columnValidatorsRef,
+    formFor,
+    dataRefFor
   ]);
   return {
     editingRowId,

package/components/data/table/hooks/useTableEditForms.d.ts

@@ -0,0 +1,25 @@
+import { Control, FieldValues, UseFormTrigger } from "react-hook-form";
+export interface TableEditFormRef {
+    control: Control<FieldValues>;
+    trigger: UseFormTrigger<FieldValues>;
+    name?: string;
+    validationtype: "default";
+}
+export interface TableEditForm {
+    /** Spread onto every edit widget of the session this form backs. */
+    formRef: TableEditFormRef;
+    /** Validate every registered cell; resolves false when any rule fails. */
+    validate: () => Promise<boolean>;
+    /** Which of fieldNames have errors. */
+    getInvalidFields: (fieldNames: string[]) => string[];
+    /** Update field value without re-validating. */
+    setFieldValue: (fieldName: string, value: unknown) => void;
+    /** Set error from browser validity. */
+    setFieldError: (fieldName: string, message: string) => void;
+    /** Clear all values and errors. */
+    reset: () => void;
+}
+export declare const useTableEditForms: (tableName?: string) => {
+    editForm: TableEditForm;
+    newRowForm: TableEditForm;
+};