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

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

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+const EDIT_FORM_OPTIONS = {
+  mode: "onChange",
+  // Validate on blur (widgets use updateon="blur")
+  shouldUnregister: true
+  // Drop field on unmount; prevents orphaned errors
+};
+const useTableEditForm = (tableName) => {
+  const { control, trigger, setValue, setError, reset, getFieldState } = useForm(EDIT_FORM_OPTIONS);
+  return useMemo(
+    () => ({
+      formRef: { control, trigger, name: tableName, validationtype: "default" },
+      validate: () => trigger(),
+      getInvalidFields: (fieldNames) => fieldNames.filter((fieldName) => getFieldState(fieldName).invalid),
+      setFieldValue: (fieldName, value) => setValue(fieldName, value, { shouldValidate: false, shouldDirty: true }),
+      setFieldError: (fieldName, message) => setError(fieldName, { type: "native", message }),
+      reset: () => reset()
+    }),
+    [control, trigger, setValue, setError, reset, getFieldState, tableName]
+  );
+};
+const useTableEditForms = (tableName) => {
+  const editForm = useTableEditForm(tableName);
+  const newRowForm = useTableEditForm(tableName);
+  return { editForm, newRowForm };
+};
+export {
+  useTableEditForms
+};

package/components/data/table/index.js

@@ -446,7 +446,9 @@ const WmTableComponent = memo(
       handleMultiSelection,
       handleSelectAll,
       handleRowSelectionClick,
-      isRowSelected
+      isRowSelected,
+      selectItem,
+      deselectItem
     } = useRowSelection({
       radioselect,
       multiselect: effectiveMultiselect,
@@ -532,6 +534,7 @@ const WmTableComponent = memo(
       }),
       [wmTableColumns, columnOverrides]
     );
+    const columnValidatorsRef = useRef({});
     const {
       editingRowId,
       isRowEditing,
@@ -577,7 +580,8 @@ const WmTableComponent = memo(
       onRowdelete,
       tableRef,
       isServerSidePagination: isServerSidePagination(),
-      tableName: name
+      tableName: name,
+      columnValidatorsRef
     });
     const { handleRowClick } = useRowHandlers({
       editingRowId,
@@ -756,7 +760,13 @@ const WmTableComponent = memo(
       []
     );
     const columnsProxy = useMemo(
-      () => createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef),
+      () => createColumnsProxy(
+        wmTableColumns,
+        applyOverride,
+        setColumnsVersion,
+        setSummaryRowDef,
+        columnValidatorsRef.current
+      ),
       [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]
     );
     const {
@@ -969,6 +979,23 @@ const WmTableComponent = memo(
       },
       [name]
     );
+    const selectItemRef = useRef(selectItem);
+    const deselectItemRef = useRef(deselectItem);
+    selectItemRef.current = selectItem;
+    deselectItemRef.current = deselectItem;
+    const widgetSelectItem = useCallback((itemOrIndex) => {
+      selectItemRef.current(itemOrIndex);
+    }, []);
+    const widgetDeselectItem = useCallback((itemOrIndex) => {
+      deselectItemRef.current(itemOrIndex);
+    }, []);
+    useEffect(() => {
+      var _a2;
+      (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, widgetRegistrationKey, {
+        selectItem: widgetSelectItem,
+        deselectItem: widgetDeselectItem
+      });
+    });
     const sortInfoForExport = useMemo(() => {
       if (sorting.length > 0) {
         return {
@@ -1355,7 +1382,10 @@ const WmTableComponent = memo(
       datasource,
       dataset,
       selectPageSize,
-      rowDefInstances
+      rowDefInstances,
+      // Angular parity: table.selectItem / table.deselectItem (accepts a row or an index).
+      selectItem: widgetSelectItem,
+      deselectItem: widgetDeselectItem
     };
     const getRowId = (row) => row._wmTableRowId || String(row.id);
     const pushSelectedItemsToWidget = (selectedIds) => {
@@ -1525,34 +1555,40 @@ const WmTableComponent = memo(
                       } : {})
                     }, { name }), {
                       children: [
-                        showheader && wmTableColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            TableHeaderComponent,
-                            {
-                              table,
-                              enablesort,
-                              enablecolumnselection,
-                              rowClass,
-                              ColClassSignature,
-                              sorting,
-                              columnSizing,
-                              rowSelection,
-                              rowExpansionConfig: visibleRowExpansionConfig,
-                              columnsVersion,
-                              filterMode: filtermode,
-                              columnFilters,
-                              onColumnFilterChange: setColumnFilter,
-                              renderFormWidget,
-                              listener,
-                              tableStructure,
-                              onColumnSelect: handleColumnSelect,
-                              onColumnDeselect: handleColumnDeselect,
-                              onHeaderclick,
-                              tableName: name
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx("col", { style: c.style, width: c.width }, c.key)) })
-                        ] }),
+                        colGroupSpec.length > 0 && /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx(
+                          "col",
+                          __spreadValues({
+                            style: c.style,
+                            width: c.width
+                          }, c.domHidden ? { "data-wm-col-hidden": "" } : {}),
+                          c.key
+                        )) }),
+                        showheader && wmTableColumns.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                          TableHeaderComponent,
+                          {
+                            table,
+                            enablesort,
+                            enablecolumnselection,
+                            rowClass,
+                            ColClassSignature,
+                            sorting,
+                            columnSizing,
+                            rowSelection,
+                            rowExpansionConfig: visibleRowExpansionConfig,
+                            columnsVersion,
+                            filterMode: filtermode,
+                            columnFilters,
+                            onColumnFilterChange: setColumnFilter,
+                            renderFormWidget,
+                            listener,
+                            viewParent,
+                            tableStructure,
+                            onColumnSelect: handleColumnSelect,
+                            onColumnDeselect: handleColumnDeselect,
+                            onHeaderclick,
+                            tableName: name
+                          }
+                        ) }),
                         (internalDataset.length > 0 || !isTableLoading) && /* @__PURE__ */ jsx(
                           TableBodyComponent,
                           {

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

@@ -6,6 +6,9 @@ import { IAlignment, INavigation } from "../list/props";
 import { EditWidgetType } from "./utils";
 import { StorageType } from "../../../utils/state-persistance";
 import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+import { ValidatorConfig } from "@wavemaker-ai/react-runtime/components/data/form/form-controller/props";
+import { ColumnValidatorRegistry } from "./utils/columnValidation";
+import { TableEditFormRef } from "./hooks/useTableEditForms";
 export type TableEditMode = "inline" | "dialog" | "form" | "quickedit" | "none";
 export type TableActionPosition = "header" | "footer";
 export type TableFormPosition = "top" | "bottom";
@@ -820,6 +823,7 @@ export interface TableHeaderProps {
     columnsVersion?: number;
     filterMode?: TableFilterMode;
     listener: any;
+    viewParent?: any;
     columnFilters?: Record<string, any>;
     onColumnFilterChange?: (columnId: string, value: string, matchMode?: string) => void;
     renderFormWidget: (fieldName: string, widgetType: string, value: any, onChange: (value: any) => void, additionalProps?: any) => React.ReactNode;
@@ -854,7 +858,7 @@ export interface AddNewRowProps {
     sessionKey: number;
     editingRowData: Record<string, any>;
     renderEditableCell: (column: WmTableColumnProps, fieldName: string, widgetType: string, editValue: any, rowId: string) => ReactElement;
-    onKeyDown?: (e: KeyboardEvent, sourceRowId?: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent, sourceRowId?: string) => void;
     handleSave: () => void;
     handleCancel: () => void;
     listener?: any;
@@ -868,13 +872,17 @@ export interface EditableCellProps {
     fieldName: string;
     widgetType: string;
     editValue: any;
-    fieldValidationErrorsRef: RefObject<Record<string, boolean>>;
-    cellUpdateCallbacksRef: RefObject<Record<string, () => void>>;
+    /** The react-hook-form instance for this edit session, handed to the cell's widget. */
+    formRef: TableEditFormRef;
+    /** Shared `${rowId}_${fieldName}` -> true map of cells currently in error. */
+    cellErrorsRef?: RefObject<Record<string, boolean>>;
+    /** Cell containers, keyed `${rowId}_${fieldName}`. */
     fieldRefs: RefObject<Record<string, HTMLElement | null>>;
-    renderFormWidget: (name: string, type: string, value: any, onChange: (newValue: any) => void, props: any) => ReactElement;
+    columnValidatorsRef?: RefObject<ColumnValidatorRegistry>;
+    renderFormWidget: (name: string, type: string, value: any, onChange: (newValue: any) => void, props: TableEditWidgetProps) => ReactElement;
     updateFieldValue: (fieldName: string, newValue: any, rowId?: string) => void;
     sessionKey?: number;
-    onKeyDown?: (e: KeyboardEvent, sourceRowId?: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent, sourceRowId?: string) => void;
     editMode?: TableEditMode;
     validationmessage?: string;
 }
@@ -980,14 +988,32 @@ export interface UseTableDataReturn {
 export interface UseFormWidgetProps {
     listener?: any;
 }
+/** Everything an editable cell hands to its edit widget beyond the value itself. */
+export interface TableEditWidgetProps {
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    defaultvalue?: string | number | boolean;
+    sessionKey?: string | number;
+    rowData?: any;
+    column?: any;
+    /**
+     * The edit session's react-hook-form instance. `withFormController` validates the widget
+     * against it and, from the same validators, derives the date/time bounds the picker enforces
+     * on its own input.
+     */
+    formRef?: TableEditFormRef;
+    /** Form field name for the cell — the column field, independent of the row. */
+    formKey?: string;
+    /** Validators set by a page script via `columns.<name>.setValidators([...])`. */
+    validators?: ValidatorConfig[];
+    /** Validators set via `columns.<name>.setAsyncValidators([...])`. */
+    asyncValidators?: ValidatorConfig[];
+    /** Keep the widget out of the form entirely (hidden columns). */
+    ignoreInForm?: boolean;
+}
 export interface UseFormWidgetReturn {
-    renderFormWidget: (fieldName: string, widgetType: string, value: any, onFieldChange?: (newValue: any) => void, widgetProps?: {
-        required?: boolean;
-        disabled?: boolean;
-        placeholder?: string;
-        defaultvalue?: string | number | boolean;
-        sessionKey?: string | number;
-    }) => ReactElement;
+    renderFormWidget: (fieldName: string, widgetType: string, value: any, onFieldChange?: (newValue: any) => void, widgetProps?: TableEditWidgetProps) => ReactElement;
 }
 export interface UseTableEditProps {
     editMode?: TableEditMode;
@@ -1020,6 +1046,8 @@ export interface UseTableEditProps {
     onRowupdate?: (event: any, widget: any, data: any) => void;
     tableRef?: React.RefObject<any>;
     isServerSidePagination?: boolean;
+    /** Validators set by a page script via `columns.<name>.setValidators([...])`. */
+    columnValidatorsRef?: RefObject<Record<string, any>>;
 }
 export interface UseTableEditReturn {
     editingRowId: string | null;
@@ -1128,6 +1156,8 @@ export interface UseRowSelectionReturn {
     handleRowSelectionClick: (event: MouseEvent, rowId: string, rowData: any) => boolean;
     isRowSelected: (rowId: string) => boolean;
     isInteractiveElement: (event: MouseEvent) => boolean;
+    selectItem: (itemOrIndex: any) => void;
+    deselectItem: (itemOrIndex: any) => void;
 }
 export interface UseTableStateProps {
     editMode?: TableEditMode;
@@ -1302,17 +1332,6 @@ export interface UseRowExpansionReturn {
     registerRowDefInstance: (rowId: string, instance: any, rowData?: any) => void;
     rowDefInstances: Record<string, any>;
 }
-export interface FieldValidationState {
-    fieldRefs: RefObject<Record<string, HTMLElement | null>>;
-    fieldValidationErrors: RefObject<Record<string, boolean>>;
-    cellUpdateCallbacks: RefObject<Record<string, () => void>>;
-}
-export interface ValidationResult {
-    isValid: boolean;
-    invalidElements: HTMLElement[];
-    invalidFieldKeys?: string[];
-    firstInvalidElement?: HTMLElement;
-}
 /**
  * Interface for summary row value with optional styling
  */

package/components/data/table/utils/buildSelectionColumns.js

@@ -10,7 +10,7 @@ function RadioSelectCell(ctx) {
   const rowId = row.id;
   const isSelected = row.getIsSelected();
   const { handleRadioSelection, radioselecttitle, radioselectarialabel, tableName } = getSelectionMeta(ctx);
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle != null ? radioselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsxs(Box, { component: "label", children: [
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, "data-role": "select-row", children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle != null ? radioselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsxs(Box, { component: "label", children: [
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -33,7 +33,7 @@ function MultiSelectCell(ctx) {
   const rowId = row.id;
   const isSelected = row.getIsSelected();
   const { handleMultiSelection, multiselecttitle, multiselectarialabel } = getSelectionMeta(ctx);
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, "data-role": "select-row", children: [
     /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle != null ? multiselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isSelected ? "" : "unchecked", children: [
       /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", "aria-live": "assertive", children: "Select row" }),
       /* @__PURE__ */ jsx(
@@ -59,7 +59,7 @@ function MultiSelectHeader({ table, column }) {
   var _a, _b;
   const isAllSelected = table.getIsAllRowsSelected();
   const { handleSelectAll } = (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.selection) != null ? _b : {};
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isAllSelected ? "" : "unchecked", children: [
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, "data-role": "select-all", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isAllSelected ? "" : "unchecked", children: [
     /* @__PURE__ */ jsx(
       Box,
       {

package/components/data/table/utils/columnProxy.d.ts

@@ -1,3 +1,5 @@
+import { ValidatorConfig } from "@wavemaker-ai/react-runtime/components/data/form/form-controller/props";
+import { ColumnValidatorRegistry } from "./columnValidation";
 export declare const keyMap: {
     [key: string]: string;
 };
@@ -17,5 +19,9 @@ export interface ColumnAggregate {
 export interface EnhancedColumnProxy {
     aggregate: ColumnAggregate;
     setSummaryRowData: (data: SummaryRowData | SummaryRowData[]) => void;
+    setValidators: (validators: ValidatorConfig[]) => void;
+    setAsyncValidators: (asyncValidators: ValidatorConfig[]) => void;
 }
-export declare function createColumnsProxy(wmTableColumns: any[], applyOverride: (field: string, key: string, value: any) => void, setColumnsVersion?: (updater: (v: number) => number) => void, setSummaryRowDef?: (columnKey: string, data: any, rowIndex: number, refresh: boolean, show?: boolean) => void): Record<string, any>;
+export declare function createColumnsProxy(wmTableColumns: any[], applyOverride: (field: string, key: string, value: any) => void, setColumnsVersion?: (updater: (v: number) => number) => void, setSummaryRowDef?: (columnKey: string, data: any, rowIndex: number, refresh: boolean, show?: boolean) => void, 
+/** Live validator store, held in a ref so script calls survive column-def rebuilds. */
+validatorRegistry?: ColumnValidatorRegistry): Record<string, any>;

package/components/data/table/utils/columnProxy.js

@@ -17,6 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import {
+  storeColumnValidators
+} from "./columnValidation";
 const keyMap = {
   caption: "header",
   name: "accessorKey",
@@ -29,7 +32,7 @@ const keyMap = {
   "col-class": "meta.className",
   style: "meta"
 };
-function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef) {
+function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef, validatorRegistry) {
   const proxy = {};
   wmTableColumns.forEach((col, idx) => {
     const key = col.field;
@@ -39,11 +42,28 @@ function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, se
         const newData = Array.isArray(data) ? data : [data];
         invokeSummaryRowData(key, newData, setSummaryRowDef, columnShow);
       };
+      const storeValidators = (kind, method) => (validators) => {
+        if (!validatorRegistry) {
+          console.warn(
+            `${method} called on column "${key}" before the table wired up validation.`
+          );
+          return;
+        }
+        storeColumnValidators(validatorRegistry, key, kind, validators);
+      };
+      const setValidators = storeValidators("validators", "setValidators");
+      const setAsyncValidators = storeValidators("asyncValidators", "setAsyncValidators");
       proxy[key] = new Proxy(col, {
         get(target, prop) {
           if (prop === "setSummaryRowData") {
             return setSummaryRowData;
           }
+          if (prop === "setValidators") {
+            return setValidators;
+          }
+          if (prop === "setAsyncValidators") {
+            return setAsyncValidators;
+          }
           return target[prop];
         },
         set(target, prop, value) {

package/components/data/table/utils/columnValidation.d.ts

@@ -0,0 +1,19 @@
+import { ValidatorConfig } from "@wavemaker-ai/react-runtime/components/data/form/form-controller/props";
+import { WmTableColumnProps } from "../props";
+export interface ColumnValidators {
+    /** From `columns.<field>.setValidators([...])`. */
+    validators: ValidatorConfig[];
+    /** From `columns.<field>.setAsyncValidators([...])`. */
+    asyncValidators: ValidatorConfig[];
+}
+export type ColumnValidatorRegistry = Record<string, ColumnValidators>;
+export declare const isColumnValidatable: (column: WmTableColumnProps | undefined) => boolean;
+export declare const cloneValidators: (validators: ValidatorConfig[]) => ValidatorConfig[];
+export declare const storeColumnValidators: (registry: ColumnValidatorRegistry, field: string, kind: keyof ColumnValidators, validators: ValidatorConfig[]) => void;
+export interface NativeValidityError {
+    /** The column field, i.e. the react-hook-form field name for the cell. */
+    fieldName: string;
+    message: string;
+}
+export declare const collectNativeValidityErrors: (cellElements: Record<string, HTMLElement | null>, rowId: string) => NativeValidityError[];
+export declare const focusFirstInvalidCell: (cellElements: Record<string, HTMLElement | null>, rowId: string, invalidFieldNames: string[]) => void;

package/components/data/table/utils/columnValidation.js

@@ -0,0 +1,76 @@
+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 { cloneDeep } from "lodash-es";
+const isColumnValidatable = (column) => {
+  if (!column || !column.field) return false;
+  if (column.readonly) return false;
+  if (column.show === false) return false;
+  return true;
+};
+const cloneValidators = (validators) => Array.isArray(validators) ? cloneDeep(validators) : [];
+const storeColumnValidators = (registry, field, kind, validators) => {
+  const current = registry[field] || { validators: [], asyncValidators: [] };
+  registry[field] = __spreadProps(__spreadValues({}, current), { [kind]: cloneValidators(validators) });
+};
+const NATIVE_VALIDITY_FLAGS = [
+  "badInput",
+  "typeMismatch",
+  "stepMismatch",
+  "rangeOverflow",
+  "rangeUnderflow",
+  "tooLong",
+  "tooShort"
+];
+const hasNativeError = (input) => !input.validity.valid && NATIVE_VALIDITY_FLAGS.some((flag) => input.validity[flag]);
+const collectNativeValidityErrors = (cellElements, rowId) => {
+  const errors = [];
+  const prefix = `${rowId}_`;
+  for (const [fieldKey, element] of Object.entries(cellElements)) {
+    if (!element || !fieldKey.startsWith(prefix)) continue;
+    const fieldName = element.getAttribute("data-field-name") || fieldKey.slice(prefix.length);
+    const inputs = Array.from(element.querySelectorAll("input, select, textarea"));
+    const invalid = inputs.find(
+      (input) => !input.disabled && !("readOnly" in input && input.readOnly) && hasNativeError(input)
+    );
+    if (invalid) {
+      errors.push({ fieldName, message: invalid.validationMessage || "Value is not valid" });
+    }
+  }
+  return errors;
+};
+const focusFirstInvalidCell = (cellElements, rowId, invalidFieldNames) => {
+  var _a;
+  for (const fieldName of invalidFieldNames) {
+    const target = (_a = cellElements[`${rowId}_${fieldName}`]) == null ? void 0 : _a.querySelector(
+      "[focus-target], input, textarea, select"
+    );
+    if (target) {
+      target.focus();
+      return;
+    }
+  }
+};
+export {
+  cloneValidators,
+  collectNativeValidityErrors,
+  focusFirstInvalidCell,
+  isColumnValidatable,
+  storeColumnValidators
+};

package/components/data/table/utils/constants.d.ts

@@ -44,5 +44,7 @@ export declare const TABLE_MESSAGES: {
 export declare const INTERACTIVE_CLASSES: readonly ["MuiInputBase", "MuiSelect", "MuiButton", "MuiCheckbox", "MuiRadio", "MuiSlider", "MuiSwitch", "MuiTextField", "MuiAutocomplete", "MuiChip", "MuiRating", "MuiToggleButton", "MuiPickersDay", "MuiDatePicker", "MuiTimePicker", "MuiDateTimePicker", "MuiCalendarPicker", "MuiClockPicker", "MuiColorPicker", "MuiFormControl", "MuiFormGroup", "MuiFormControlLabel", "app-text", "app-textarea", "app-checkbox", "app-slider", "app-currency", "app-switch", "app-select", "app-checkboxset", "app-radioset", "app-date", "app-time", "app-timestamp", "app-rating", "app-datetime", "app-search", "app-chips", "app-colorpicker", "app-calendar", "app-editor"];
 export declare const INTERACTIVE_ROLES: readonly ["button", "textbox", "combobox", "listbox"];
 export declare const INTERACTIVE_DATA_ROLES: readonly ["input", "select", "date", "time", "color", "editor", "checkbox", "radio", "slider", "chips", "rating"];
+/** data-role values on the table selection column. Clicks here must not count as interactive widgets. */
+export declare const SELECTION_COLUMN_DATA_ROLES: readonly ["select-all", "select-row"];
 export declare const INTERACTIVE_TAG_NAMES: readonly ["INPUT", "BUTTON", "SELECT", "TEXTAREA", "A", "LABEL"];
 export declare const UNSUPPORTED_STATE_PERSISTENCE_TYPES: readonly string[];

package/components/data/table/utils/constants.js

@@ -104,6 +104,7 @@ const INTERACTIVE_DATA_ROLES = [
   "chips",
   "rating"
 ];
+const SELECTION_COLUMN_DATA_ROLES = ["select-all", "select-row"];
 const INTERACTIVE_TAG_NAMES = [
   "INPUT",
   "BUTTON",
@@ -122,6 +123,7 @@ export {
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_ROLES,
   INTERACTIVE_TAG_NAMES,
+  SELECTION_COLUMN_DATA_ROLES,
   TABLE_CSS_CLASSES,
   TABLE_DATA_STATES,
   TABLE_MESSAGES,

package/components/data/table/utils/index.d.ts

@@ -1,5 +1,5 @@
 import React, { type CSSProperties } from "react";
-import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps, ValidationResult } from "../props";
+import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps } from "../props";
 declare const formWidgets: readonly ["WmText", "WmTextarea", "WmCheckbox", "WmSlider", "WmCurrency", "WmSwitch", "WmSelect", "WmCheckboxSet", "WmRadioSet", "WmDate", "WmTime", "WmTimestamp", "WmRating", "WmDatetime", "WmSearch", "WmChips", "WmColorPicker"];
 type FormWidgetType = (typeof formWidgets)[number];
 export type EditWidgetType = FormWidgetType;
@@ -69,15 +69,6 @@ export declare const isDeleteAction: (actionKey: string) => boolean;
 export declare const isAddNewAction: (actionKey: string) => boolean;
 export declare const getActionButtonClass: (action: WmTableRowActionProps) => string;
 export declare const getTableActionButtonClass: (action: WmTableActionProps) => string;
-/**
- * Validates editing fields and focuses first invalid field if validation fails
- * Can be used across different edit modes (inline, dialog, quick edit)
- *
- * @param fieldRefs - Record of field references from editing form
- * @param editingRowId - Optional ID for logging/debugging purposes
- * @returns ValidationResult object with validation status and invalid elements
- */
-export declare const validateEditingFields: (fieldRefs: Record<string, HTMLElement | null>, editingRowId?: string) => ValidationResult;
 export declare const getButtonClasses: (action: any, spacing?: string, isGridEditMode?: boolean, isLoading?: boolean) => string;
 export declare const getSpacingClasses: (spacing?: string) => string;
 export declare const shouldShowPagination: ({ shownavigation, onDemandLoad, internalDataset, pagesize, allowpagesizechange, datasource, showrecordcount, }: {
@@ -123,10 +114,11 @@ export declare function getDomHiddenColStyle(meta?: Record<string, unknown>): CS
 /** Inline style for hidden th/td — display:none and zero box so flex sizing cannot leak width. */
 export declare function getDomHiddenCellStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
 export declare const getColClass: (colClass: string, rowData: any, columnName: string) => string;
-export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
+export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, SELECTION_COLUMN_DATA_ROLES, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
 export { renderDisplayCell } from "./renderDisplayCell";
 export { buildSelectionColumns } from "./buildSelectionColumns";
-export { validateField, resetValidationState, updateValidationErrors } from "./validation";
+export { cloneValidators, collectNativeValidityErrors, focusFirstInvalidCell, isColumnValidatable, } from "./columnValidation";
+export type { ColumnValidatorRegistry, NativeValidityError } from "./columnValidation";
 export { hasInteractiveClass, hasInteractiveAttributes, isInteractiveElement, getRowIdsFromDataset, rowExistsInDataset, selectionStateHelpers, } from "./selectionUtils";
 export { createRowIndexColumn, createDataColumn, createDataColumns, createEditingActionButtons, createDefaultColumnProps, getActionColumnSize, } from "./columnBuilder";
 export { isDataColumn, hasExplicitWidth, distributeColumnWidths } from "./columnWidthDistribution";