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

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, {
@@ -147,6 +148,8 @@ const ExpansionHeaderCell = memo(
         rowSpan,
         style: __spreadValues({
           width: columnwidth || "50px",
+          minWidth: columnwidth || "50px",
+          maxWidth: columnwidth || "50px",
           padding: "8px",
           userSelect: "none"
         }, rest.style)
@@ -167,6 +170,7 @@ const TableHeaderComponent = memo(
     onColumnFilterChange,
     renderFormWidget,
     listener,
+    viewParent,
     tableStructure,
     onColumnSelect,
     onColumnDeselect,
@@ -330,7 +334,7 @@ const TableHeaderComponent = memo(
                     role: "columnheader",
                     "data-col-id": headerIndex,
                     tabIndex: 0,
-                    "data-col-field": header.column.id,
+                    "data-col-field": "row-expansion",
                     columnwidth: rowExpansionConfig == null ? void 0 : rowExpansionConfig.columnwidth
                   },
                   `expansion-header-${headerIndex}`
@@ -340,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 = {
@@ -348,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;
@@ -374,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

@@ -62,10 +62,21 @@ const useFormWidget = ({ listener }) => {
       const sessionSuffix = (widgetProps == null ? void 0 : widgetProps.sessionKey) ? `_${widgetProps.sessionKey}` : "";
       const uniqueName = `edit_${fieldName}${sessionSuffix}`;
       const disabled = getDisabledValue(widgetProps == null ? void 0 : widgetProps.disabled, widgetProps == null ? void 0 : widgetProps.rowData);
-      const commonProps = __spreadValues({
+      const commonProps = __spreadProps(__spreadValues({}, widgetProps == null ? void 0 : widgetProps.column), {
         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,
@@ -84,7 +95,7 @@ const useFormWidget = ({ listener }) => {
         column: widgetProps == null ? void 0 : widgetProps.column,
         updateon: "blur",
         regexp: ((_a = widgetProps == null ? void 0 : widgetProps.column) == null ? void 0 : _a.regexp) || ".*"
-      }, widgetProps == null ? void 0 : widgetProps.column);
+      });
       const wrapEventHandler = (handler) => {
         return (event) => {
           handler(event, {}, widgetProps == null ? void 0 : widgetProps.rowData);

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

@@ -39,9 +39,14 @@ const usePanelStructure = ({
       showrecordcount
     ]
   );
+  const showFooter = useMemo(
+    () => showPagination || footerActions.length > 0,
+    [showPagination, footerActions]
+  );
   return {
     showPanelHeading,
-    showPagination
+    showPagination,
+    showFooter
   };
 };
 export {

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

@@ -52,6 +52,7 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     padding?: string;
     margin?: string;
     height?: number | string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -35,6 +35,7 @@ const useRowHandlers = ({
   const handleRowClick = useCallback(
     (event, rowData, rowId) => {
       const hasSelectionMode = useRadioSelect || useMultiSelect;
+      invokeRowClick(event, rowData);
       let isSelectionHandled = false;
       if (hasSelectionMode && isrowselectable) {
         isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
@@ -47,7 +48,6 @@ const useRowHandlers = ({
         return;
       }
       handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
-      invokeRowClick(event, rowData);
     },
     [
       editingRowId,

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

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import isEqual from "lodash-es/isEqual";
 import {
   isInteractiveElement,
+  isSelectionCheckboxRenamed,
   getRowIdsFromDataset,
   rowExistsInDataset,
   selectionStateHelpers,
@@ -11,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) {
@@ -217,10 +249,13 @@ const useRowSelection = ({
       }
       if (useMultiSelect) {
         const isCurrentlySelected = selectionStateHelpers.isRowSelected(cellState, rowId);
-        const willBeSelected = !isCurrentlySelected;
-        selectionStateHelpers.toggleSelection(cellState, rowId);
+        const isToggled = !isSelectionCheckboxRenamed(event);
+        if (isToggled) {
+          selectionStateHelpers.toggleSelection(cellState, rowId);
+        }
+        const isSelected = isToggled ? !isCurrentlySelected : isCurrentlySelected;
         commitSelectionChange();
-        triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
+        triggerSelectionCallback(event, rowData, isSelected ? onRowselect : onRowdeselect);
         return true;
       }
       handleRadioSelection(rowId, rowData);
@@ -350,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,
@@ -359,7 +418,9 @@ const useRowSelection = ({
     handleSelectAll,
     handleRowSelectionClick,
     isRowSelected,
-    isInteractiveElement
+    isInteractiveElement,
+    selectItem,
+    deselectItem
   };
 };
 export {

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

@@ -59,8 +59,13 @@ const useTableData = ({
   widgetName
 }) => {
   const rowIdCacheRef = useRef([]);
+  const rawDatasetRef = useRef(void 0);
+  const processedDatasetRef = useRef([]);
   const processedDataset = useMemo(() => {
     const extracted = extractDataArray(dataset);
+    if (isEqual(rawDatasetRef.current, extracted)) {
+      return processedDatasetRef.current;
+    }
     const cachedIds = rowIdCacheRef.current;
     const prestamped = extracted.map((item, i) => {
       if (!item || typeof item !== "object" || item._wmTableRowId || item.id || item.ID || item.Id || !cachedIds[i]) {
@@ -70,8 +75,11 @@ const useTableData = ({
     });
     const withIds = addUniqueRowIds(prestamped);
     rowIdCacheRef.current = withIds.map((r) => r == null ? void 0 : r._wmTableRowId);
-    return removeEmptyRecords(withIds);
-  }, [dataset]);
+    const result = removeEmptyRecords(withIds);
+    rawDatasetRef.current = extracted;
+    processedDatasetRef.current = result;
+    return result;
+  }, [dataset, dataset == null ? void 0 : dataset.length]);
   const [internalDataset, setInternalDataset] = useState(processedDataset);
   useEffect(() => {
     if (!isEqual(internalDataset, processedDataset)) {

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;
+};