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

package/components/data/form/form-controller/props.d.ts

@@ -121,6 +121,8 @@ export interface WithFormControllerProps {
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    /** Suppress the inline help-block; set by hosts that show validation errors their own way. */
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;

package/components/data/form/form-controller/utils.js

@@ -30,6 +30,7 @@ function resolveValue(value) {
   }
   return value === null ? void 0 : value;
 }
+const toPatternSource = (regexp) => regexp instanceof RegExp ? regexp.source : regexp;
 function extractDynamicValidationProps(validators, rules) {
   const result = {
     required: rules.required,
@@ -55,8 +56,8 @@ function extractDynamicValidationProps(validators, rules) {
         result.maxchars = resolveValue(validator.validator);
         break;
       case "regexp":
-        result.regexp = resolveValue(
-          validator.validator
+        result.regexp = toPatternSource(
+          resolveValue(validator.validator)
         );
         break;
       case "minvalue":

package/components/data/form/form-controller/validation-contrustor.js

@@ -58,6 +58,82 @@ const parseTime = (time) => {
   }
   return null;
 };
+const resolveValidatorValue = (validator) => {
+  if (!isFunction(validator)) return validator;
+  try {
+    return validator();
+  } catch (error) {
+    console.warn("Error resolving validator value:", error);
+    return void 0;
+  }
+};
+const parseDateValue = (value) => {
+  if (value === null || value === void 0 || value === "") return null;
+  if (isDate(value)) {
+    const parsed = moment(value);
+    return parsed.isValid() ? parsed : null;
+  }
+  if (isNumber(value)) {
+    const parsed = moment(value);
+    return parsed.isValid() ? parsed : null;
+  }
+  if (!isString(value)) return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  if (/^-?\d+$/.test(trimmed)) {
+    const parsed = moment(Number(trimmed));
+    return parsed.isValid() ? parsed : null;
+  }
+  const iso = moment(trimmed, moment.ISO_8601, true);
+  if (iso.isValid()) return iso;
+  const loose = moment(new Date(trimmed));
+  return loose.isValid() ? loose : null;
+};
+const toMinutesOfDay = (value) => {
+  if (value === null || value === void 0 || value === "") return null;
+  if (isString(value)) {
+    const fromTime = parseTime(value);
+    if (fromTime !== null) return fromTime;
+  }
+  const parsed = parseDateValue(value);
+  return parsed ? parsed.hours() * 60 + parsed.minutes() : null;
+};
+const toNumberList = (validator) => {
+  const raw = isArray(validator) ? validator : isString(validator) ? validator.split(",") : [];
+  return raw.map((entry) => Number(String(entry).trim())).filter((n) => !isNaN(n));
+};
+const toDateList = (validator) => {
+  const raw = isArray(validator) ? validator : isString(validator) ? validator.split(",") : [];
+  return raw.map((entry) => parseDateValue(isString(entry) ? entry.trim() : entry)).filter((entry) => entry !== null);
+};
+const dateTimeRule = (key, check) => {
+  return (config, rules, form, fieldName) => {
+    rules.validate = __spreadProps(__spreadValues({}, rules.validate), {
+      [key]: async (value) => {
+        if (value === null || value === void 0 || value === "") return true;
+        const bound = resolveValidatorValue(config.validator);
+        if (bound === null || bound === void 0 || bound === "") return true;
+        const result = check(value, bound);
+        if (result === null) {
+          console.warn(`Could not evaluate "${key}" validator for field "${fieldName}":`, {
+            value,
+            validator: bound
+          });
+          return true;
+        }
+        if (result) return true;
+        return await resolveErrorMessage(config.errorMessage, value, fieldName, form);
+      }
+    });
+    return rules;
+  };
+};
+const compareDay = (value, bound, ok) => {
+  const parsedValue = parseDateValue(value);
+  const parsedBound = parseDateValue(bound);
+  if (!parsedValue || !parsedBound) return null;
+  return ok(parsedValue.startOf("day").valueOf(), parsedBound.startOf("day").valueOf());
+};
 const validationHandlers = {
   required: (config, rules, form, fieldName) => {
     if (config.validator) {
@@ -170,7 +246,42 @@ const validationHandlers = {
       };
     }
     return rules;
-  }
+  },
+  mindate: dateTimeRule(
+    "minDate",
+    (value, bound) => compareDay(value, bound, (v, b) => v >= b)
+  ),
+  maxdate: dateTimeRule(
+    "maxDate",
+    (value, bound) => compareDay(value, bound, (v, b) => v <= b)
+  ),
+  mintime: dateTimeRule("minTime", (value, bound) => {
+    const current = toMinutesOfDay(value);
+    const min = toMinutesOfDay(bound);
+    if (current === null || min === null) return null;
+    return current >= min;
+  }),
+  maxtime: dateTimeRule("maxTime", (value, bound) => {
+    const current = toMinutesOfDay(value);
+    const max = toMinutesOfDay(bound);
+    if (current === null || max === null) return null;
+    return current <= max;
+  }),
+  excludedays: dateTimeRule("excludeDays", (value, bound) => {
+    const parsed = parseDateValue(value);
+    if (!parsed) return null;
+    const days = toNumberList(bound);
+    if (days.length === 0) return true;
+    return !days.includes(parsed.day());
+  }),
+  excludedates: dateTimeRule("excludeDates", (value, bound) => {
+    const parsed = parseDateValue(value);
+    if (!parsed) return null;
+    const excluded = toDateList(bound);
+    if (excluded.length === 0) return true;
+    const day = parsed.startOf("day").valueOf();
+    return !excluded.some((entry) => entry.startOf("day").valueOf() === day);
+  })
 };
 const isValidatorConfig = (config) => {
   return config && typeof config === "object" && !Array.isArray(config) && typeof config !== "function" && isString(config.type) && (isString(config.errorMessage) || isFunction(config.errorMessage)) && config.validator !== void 0;

package/components/data/form/form-controller/withFormController.js

@@ -48,6 +48,8 @@ import {
   useHTMLValidationProps,
   useExternalDataSync
 } from "./hooks";
+const ALWAYS_MULTI_VALUE_WIDGETS = ["WmChips", "WmCheckboxset"];
+const MULTI_SELECT_WIDGET = "WmSelect";
 const withFormController = (WrappedComponent) => {
   const WithFormControllerComponent = memo((props) => {
     const _a = props, {
@@ -121,6 +123,9 @@ const withFormController = (WrappedComponent) => {
     useDefaultValueSync(defaultvalue, datavalue, fieldRef);
     const widget = WrappedComponent == null ? void 0 : WrappedComponent.displayName;
     const ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget != null ? widget : "");
+    const isMultipleSelect = widget === MULTI_SELECT_WIDGET && props.multiple == true;
+    const isMultiValueWidget = ALWAYS_MULTI_VALUE_WIDGETS.includes(widget != null ? widget : "") || isMultipleSelect;
+    const fallbackDefaultValue = isMultiValueWidget && defaultvalue === void 0 ? [] : defaultvalue;
     const validationRules = useValidationRules(
       validationType,
       validators,
@@ -172,6 +177,10 @@ const withFormController = (WrappedComponent) => {
         trigger(effectiveFormKey);
       }
     }, [customValidationMsg]);
+    const onChangeRef = useRef(props.onChange);
+    useEffect(() => {
+      onChangeRef.current = props.onChange;
+    }, [props.onChange]);
     const createOnChangeHandler = useCallback(
       (field) => {
         return (e, componentProps, newValue, oldValue, isValid) => {
@@ -199,7 +208,7 @@ const withFormController = (WrappedComponent) => {
             setTouched(true);
             trigger(effectiveFormKey);
           }
-          (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e, componentProps, newValue, oldValue);
+          (_a2 = onChangeRef.current) == null ? void 0 : _a2.call(onChangeRef, e, componentProps, newValue, oldValue);
         };
       },
       [type, props.datafield, updateon, effectiveFormKey]
@@ -231,12 +240,13 @@ const withFormController = (WrappedComponent) => {
         control: formRef.control,
         name: effectiveFormKey,
         rules: validationRules,
-        defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
+        defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : fallbackDefaultValue,
         render: ({ field, fieldState }) => {
           var _a2, _b, _c;
           fieldRef.current = field;
           const processedValue = processFieldValue(field.value, type, props.datafield);
           const errorState = getErrorState(fieldState, validationType, touched);
+          const isExplicitFormField = !props.hideValidationMessage && (props.formfield === true || props.formfield === "true");
           let valueToUse;
           if (processedValue !== void 0) {
             valueToUse = processedValue;
@@ -321,11 +331,14 @@ const withFormController = (WrappedComponent) => {
                       value = JSON.stringify(value);
                     }
                   }
+                  if (value && typeof value === "object") {
+                    value = JSON.stringify(value);
+                  }
                   return value;
                 })()
               }
             ),
-            shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
+            isExplicitFormField && shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
               "p",
               {
                 className: "help-block text-danger",

package/components/data/form/form-field/index.js

@@ -48,7 +48,7 @@ const WmFormField = memo(
     const formProxy = useWidgetProxy(`${props.formName}`);
     const overriddenItemsRef = useRef({});
     const fieldKey = props.formKey || props.name;
-    const defaultValueRegisteredRef = useRef(false);
+    const prevDefaultValueRef = useRef(props.defaultvalue);
     const showfield = (_b = (_a = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _a.show) != null ? _b : show;
     const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0 || ((_c = props.formRef) == null ? void 0 : _c.name) === props.formName;
     const reset = useCallback(
@@ -81,7 +81,19 @@ const WmFormField = memo(
         formProxy.formWidgets = {};
         formProxy.formfields = {};
       }
-      const mutableTarget = __spreadProps(__spreadValues({}, props), { reset, show, deferload });
+      const mutableTarget = __spreadProps(__spreadValues({}, props), {
+        reset,
+        show,
+        deferload,
+        fieldValidations: {
+          validate: () => {
+            var _a2;
+            if (fieldKey && typeof ((_a2 = props.formRef) == null ? void 0 : _a2.trigger) === "function") {
+              props.formRef.trigger(fieldKey);
+            }
+          }
+        }
+      });
       const fieldProxy = createFormFieldProxy(
         mutableTarget,
         setProxyProps,
@@ -93,16 +105,19 @@ const WmFormField = memo(
     }, [formReady]);
     useEffect(() => {
       if (!formReady || !fieldProxyRef.current) return;
-      if (defaultValueRegisteredRef.current) return;
-      defaultValueRegisteredRef.current = true;
+      if (prevDefaultValueRef.current === props.defaultvalue) return;
+      const valueUnset = fieldProxyRef.current.datavalue === void 0 || fieldProxyRef.current.datavalue === prevDefaultValueRef.current;
+      prevDefaultValueRef.current = props.defaultvalue;
+      if (!valueUnset) return;
       fieldProxyRef.current.datavalue = props.defaultvalue;
       fieldProxyRef.current.value = props.defaultvalue;
       fieldProxyRef.current.defaultvalue = props.defaultvalue;
-    }, [props.defaultvalue]);
+    }, [props.defaultvalue, formReady]);
     useEffect(() => {
-      var _a2;
       const fieldProxy = fieldProxyRef.current;
-      if (!fieldProxy || !((_a2 = props.dataset) == null ? void 0 : _a2.length)) return;
+      if (!fieldProxy) return;
+      const hasDataset = typeof props.dataset === "function" || props.dataset && props.dataset.length > 0;
+      if (!hasDataset) return;
       DATASET_SYNC_KEYS.forEach((key) => {
         const value = props[key];
         if (value != null && fieldProxy[key] !== value) {
@@ -111,20 +126,25 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
         const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
         const fieldError = formKey && errors ? get(errors, formKey) : void 0;
         const invalid = Boolean(fieldError);
         const invalidCls = invalid ? " text-danger " : "";
-        return /* @__PURE__ */ jsx(Fragment, { children: (_h = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _h.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_n = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _n.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+          // proxyProps snapshots onChange once at mount; nothing resyncs it, so a
+          // handler assigned after mount (e.g. from a page's onReady) is never seen
+          // unless we read the live prop here, same as onTrailingiconclick below.
+          onChange: props.onChange,
           show: showfield,
           disabled: (_d2 = (_c2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _c2.disabled) != null ? _d2 : props == null ? void 0 : props.disabled,
           readonly: (_f = (_e = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e.readonly) != null ? _f : props == null ? void 0 : props.readonly,
           // BaseField derives this from live validators. A direct field-proxy write wins,
           // but never fall back to the initial proxyProps.required snapshot.
           required: (_g = overriddenItemsRef.current.required) != null ? _g : props.required,
+          displayname: (_h = overriddenItemsRef.current.displayname) != null ? _h : props.displayname,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -132,7 +152,14 @@ const WmFormField = memo(
           invalid,
           invalidCls,
           iswidget: "false",
-          onChangeHandler
+          onChangeHandler,
+          onTrailingiconclick: (_i = overriddenItemsRef.current.onTrailingiconclick) != null ? _i : props.onTrailingiconclick,
+          trailingiconurl: (_j = overriddenItemsRef.current.trailingiconurl) != null ? _j : props.trailingiconurl,
+          onLeadingiconclick: (_k = overriddenItemsRef.current.onLeadingiconclick) != null ? _k : props.onLeadingiconclick,
+          leadingiconurl: (_l = overriddenItemsRef.current.leadingiconurl) != null ? _l : props.leadingiconurl,
+          styles: {},
+          style: {},
+          limitdisplaytext: (_m = overriddenItemsRef.current.limitdisplaytext) != null ? _m : props.limitdisplaytext
         })) });
       } else {
         return null;
@@ -145,7 +172,7 @@ const WmFormField = memo(
     }
     const isDeferLoad = deferload === true;
     const showValue = (showfield == null ? void 0 : showfield.toString()) !== "false";
-    if ((!showValue || showfield) && isDeferLoad) {
+    if (!showValue && isDeferLoad) {
       return null;
     }
     const shouldHide = !showValue && !isDeferLoad;

package/components/data/form/form-field/props.d.ts

@@ -146,9 +146,9 @@ export interface FormFieldProps {
      */
     displaylabel?: string;
     /**
-     * The collection of data items for the field.
+     * The collection of data items for the field, or a thunk returning them.
      */
-    dataset?: any[];
+    dataset?: any[] | (() => any[]);
     /**
      * Key to use for searching.
      */
@@ -206,6 +206,12 @@ export interface FormFieldProps {
     reset?: () => void;
     setValidationMessage?: (message: string) => void;
     disabled?: boolean;
+    trailingiconurl?: string;
+    onTrailingiconclick?: (...args: any[]) => void;
+    leadingiconurl?: string;
+    onLeadingiconclick?: (...args: any[]) => void;
+    onChange?: (...args: any[]) => void;
+    limitdisplaytext?: string;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

package/components/data/list/components/ListItemWithTemplate.js

@@ -60,7 +60,7 @@ const ListItemWithTemplate = ({
     },
     [WidgetProxy, name]
   );
-  if (isPlainObject(item)) {
+  if (isPlainObject(item) && item.selected !== isActive) {
     item.selected = isActive;
   }
   const templateContent = renderItem ? renderItem(item, globalIndex != null ? globalIndex : index, WidgetProxy[name], getCurrentItemWidgets) : itemTemplate || /* @__PURE__ */ jsx(MediaWmListtemplate, {});

package/components/data/list/index.d.ts

@@ -84,6 +84,7 @@ declare const WmListStandalone: React.ComponentType<{
     datavalue?: any;
     width?: number | string;
     height?: number | string;
+    class?: string;
     animation?: string;
     show?: boolean | string;
     padding?: string;
@@ -139,6 +140,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/list/index.js

@@ -182,7 +182,7 @@ const WmList = (props) => {
   }
   const safeDataset = useMemo(() => {
     return addUniqueRowIds(resolvedDataset, { type: "list" });
-  }, [currentDataset]);
+  }, [currentDataset, dataset]);
   const [initialRender, setinitialRender] = useState(true);
   const userInitiatedSelectionRef = React.useRef(false);
   const listScrollContainerRef = useRef(null);
@@ -339,7 +339,7 @@ const WmList = (props) => {
     if (navigation === LIST_NAVIGATION_TYPES.NONE || !navigation) {
       paginationState.setCurrentPageSize(resolvedDataset.length);
     }
-  }, [resolvedDataset.length, pagesize, paginationState]);
+  }, [resolvedDataset.length, pagesize, paginationState.setCurrentPageSize]);
   const effectiveStateHandler = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
   const stateManager = useListStateManager({
     name,
@@ -512,18 +512,13 @@ const WmList = (props) => {
   return /* @__PURE__ */ jsxs(
     Box,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      className: clsx(
-        DEFAULT_CLS,
-        "wm-position-relative",
-        className,
-        hidden && "wm-hidden",
-        wrapper_autoLayout_Classes
-      ),
+      className: clsx(DEFAULT_CLS, "wm-position-relative", className, wrapper_autoLayout_Classes),
       component: "div",
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
-      ref: ListWrapperRef
+      ref: ListWrapperRef,
+      hidden
     }), direction ? { direction } : {}), {
       children: [
         /* @__PURE__ */ jsx(

package/components/data/pagination/hooks/usePagination.js

@@ -381,7 +381,7 @@ const usePagination = ({
           const updatedMaxResults = newMaxResults || prev.currentMaxResults;
           const updatedDataSize = newDataSize !== void 0 ? newDataSize : prev.dataSize;
           const updatedCurrentPage = currentPage !== void 0 ? currentPage : prev.currentPage;
-          const newPageCount = (paginationMeta == null ? void 0 : paginationMeta.totalPages) !== void 0 && (paginationMeta == null ? void 0 : paginationMeta.totalPages) > 1 ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
+          const newPageCount = (paginationMeta == null ? void 0 : paginationMeta.totalPages) !== void 0 && (isServerSidePagination || paginationMeta.totalPages > 1) ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
           return __spreadProps(__spreadValues({}, prev), {
             currentPage: updatedCurrentPage,
             dataSize: updatedDataSize,
@@ -390,7 +390,7 @@ const usePagination = ({
         }
       });
     },
-    [paginationMeta]
+    [isServerSidePagination, paginationMeta]
   );
   const disableNavigation = useCallback(() => {
     setDisableStates({
@@ -551,7 +551,7 @@ const usePagination = ({
               totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
               totalPages: paginationState.pageCount
             };
-            onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+            onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
           }
           if (setIsLoadingMore) {
             setIsLoadingMore(false);
@@ -582,7 +582,7 @@ const usePagination = ({
             totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
             totalPages: paginationState.pageCount
           };
-          onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+          onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
         }
         if (setIsLoadingMore) {
           setIsLoadingMore(false);
@@ -679,7 +679,7 @@ const usePagination = ({
           totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || fullData.length,
           totalPages: pageCount
         };
-        onSetRecord(event, widgetInstance, data, pageInfo);
+        onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
       }
       goToPage();
     },
@@ -737,7 +737,7 @@ const usePagination = ({
               totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
               totalPages: newPageCount
             };
-            onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+            onSetRecord(createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
           }
           if (setIsLoadingMore) {
             setIsLoadingMore(false);

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/RowExpansionButton.js

@@ -49,7 +49,11 @@ const RowExpansionButton = ({
     "aria-label": ariaLabel,
     "aria-expanded": isExpanded,
     "aria-live": "polite",
-    tabIndex: 0
+    tabIndex: 0,
+    styles: __spreadValues({
+      minWidth: 0,
+      padding: 0
+    }, config.styles)
   };
   if (config.listener) {
     commonProps.listener = config.listener;

package/components/data/table/components/TableBody.js

@@ -69,6 +69,8 @@ const ExpansionCell = memo(({ rowId, rowData, isExpanded, onToggle, config }) =>
       textAlign: "center",
       position: "relative",
       width: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
+      minWidth: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
+      maxWidth: config.columnwidth || DEFAULT_EXPANSION_WIDTH,
       padding: "4px"
     },
     children: /* @__PURE__ */ jsx(Box, { component: "span", className: "row-expansion-column", "data-identifier": "rowExpansionButtons", children: /* @__PURE__ */ jsx(