@wavemaker-ai/react-runtime 1.0.0-rc.314 → 1.0.0-rc.319

package/components/container/tabs/index.js

@@ -36,6 +36,11 @@ import Typography from "@mui/material/Typography";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import WmTabPane from "./tab-pane";
 import { DEFAULT_PROPS } from "./props";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import {
   getWidgetState,
   setWidgetState
@@ -90,6 +95,17 @@ const useTabsContext = () => {
 const WmTabs = memo(
   (Props) => {
     const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
+    if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+      return /* @__PURE__ */ jsx(
+        WmSkeleton,
+        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTabs"]), {
+          rows: props.skeletonRows,
+          columns: props.skeletonColumns,
+          className: clsx("app-tabs clearfix", props.className),
+          styles: props.styles
+        })
+      );
+    }
     const {
       defaultpaneindex,
       statehandler,
@@ -528,7 +544,13 @@ const WmTabs = memo(
       "iconposition",
       "render",
       "selectedindex",
-      "children"
+      "children",
+      "loading",
+      "showSkeleton",
+      "skeletonRows",
+      "skeletonColumns",
+      "className",
+      "styles"
     ];
     return keys.every((key) => {
       if (key === "children") {

package/components/container/tabs/props.d.ts

@@ -96,6 +96,16 @@ export interface TabsPropsBase {
      * Called when the active tab changes.
      */
     onChange?: (event: React.SyntheticEvent | null, props: WmTabsProps, newPaneIndex: number, oldPaneIndex: number) => void;
+    /**
+     * Number of skeleton tab headers shown while loading.
+     * @default 4
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton content lines shown in the active tab panel while loading.
+     * @default 3
+     */
+    skeletonColumns?: number;
 }
 /**
  * Combined props for the WmTabs component, including base WaveMaker props.

package/components/container/tabs/tab-pane/index.d.ts

@@ -87,5 +87,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/wizard/index.d.ts

@@ -30,6 +30,8 @@ declare const WmWizardStandalone: React.ComponentType<{
     onCancel?: (currentStep: WizardStepData | null, steps: WizardStepData[]) => void;
     onDone?: (currentStep: WizardStepData, steps: WizardStepData[]) => void;
     standalone?: boolean;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
     show?: boolean | string;
@@ -75,6 +77,8 @@ declare const WmWizardStandalone: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmWizardStandalone as WmWizard };
 /**
@@ -117,6 +121,8 @@ declare const _default: React.ComponentType<{
     onCancel?: (currentStep: WizardStepData | null, steps: WizardStepData[]) => void;
     onDone?: (currentStep: WizardStepData, steps: WizardStepData[]) => void;
     standalone?: boolean;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
     show?: boolean | string;
@@ -162,5 +168,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/wizard/index.js

@@ -51,9 +51,14 @@ import { getFormData } from "../../../utils/form-utils";
 import { useParentFormData } from "../../data/form/form-context";
 import isEqual from "lodash-es/isEqual";
 import withStandalone from "../../../higherOrder/withStandalone";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 const DEFAULT_CLS = "app-wizard panel clearfix";
 const BODY_CLASS = "app-wizard-body panel-body";
-const WmWizard = memo(
+const WmWizardComponent = memo(
   (props) => {
     const {
       listener,
@@ -818,7 +823,11 @@ const WmWizard = memo(
       "donebtnlabel",
       "cancelbtnlabel",
       "children",
-      "hidden"
+      "hidden",
+      "loading",
+      "showSkeleton",
+      "skeletonRows",
+      "skeletonColumns"
     ];
     return keys.every((key) => {
       if (key === "children") {
@@ -828,8 +837,23 @@ const WmWizard = memo(
     });
   }
 );
-const WmWizardStandalone = withStandalone(WmWizard);
+const WmWizard = (props) => {
+  if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmWizard"]), {
+        rows: props.skeletonRows,
+        columns: props.skeletonColumns,
+        className: clsx(DEFAULT_CLS, props.className),
+        styles: props.styles
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(WmWizardComponent, __spreadValues({}, props));
+};
 WmWizard.displayName = "WmWizard";
+const WmWizardStandalone = withStandalone(WmWizard);
+WmWizardComponent.displayName = "WmWizardComponent";
 var wizard_default = withBaseWrapper(WmWizard);
 export {
   WmWizardStandalone as WmWizard,

package/components/container/wizard/props.d.ts

@@ -212,6 +212,16 @@ export interface WizardPropsBase {
      * @default false
      */
     standalone?: boolean;
+    /**
+     * Number of skeleton step indicators shown while loading.
+     * @default 4
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton content fields shown in the step body while loading.
+     * @default 3
+     */
+    skeletonColumns?: number;
 }
 /**
  * Combined props for the WmWizard component, including base WaveMaker props.

package/components/container/wizard/wizard-step/index.d.ts

@@ -59,5 +59,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/card/card-actions/index.d.ts

@@ -63,5 +63,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/card/card-content/index.d.ts

@@ -63,5 +63,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/card/card-footer/index.d.ts

@@ -63,5 +63,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -85,5 +85,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/card/index.js

@@ -73,37 +73,43 @@ const WmCard = (props) => {
   }, []);
   const handleClick = useCallback(
     (event) => {
-      onClick == null ? void 0 : onClick(event, listener == null ? void 0 : listener.Widgets[name], cardItem, listener);
+      var _a;
+      onClick == null ? void 0 : onClick(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], cardItem, listener);
     },
     [onClick, listener, name]
   );
   const handleDoubleClick = useCallback(
     (event) => {
-      onDblclick == null ? void 0 : onDblclick(event, listener == null ? void 0 : listener.Widgets[name], cardItem, listener);
+      var _a;
+      onDblclick == null ? void 0 : onDblclick(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], cardItem, listener);
     },
     [onDblclick, props]
   );
   const handleMouseOver = useCallback(
     (event) => {
-      onMouseover == null ? void 0 : onMouseover(event, listener == null ? void 0 : listener.Widgets[name], cardItem, listener);
+      var _a;
+      onMouseover == null ? void 0 : onMouseover(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], cardItem, listener);
     },
     [onMouseover, props]
   );
   const handleMouseOut = useCallback(
     (event) => {
-      onMouseout == null ? void 0 : onMouseout(event, listener == null ? void 0 : listener.Widgets[name], cardItem, listener);
+      var _a;
+      onMouseout == null ? void 0 : onMouseout(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], cardItem, listener);
     },
     [onMouseout, props]
   );
   const handleMouseEnter = useCallback(
     (event) => {
-      onMouseenter == null ? void 0 : onMouseenter(event, listener == null ? void 0 : listener.Widgets[name], cardItem, listener);
+      var _a;
+      onMouseenter == null ? void 0 : onMouseenter(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], cardItem, listener);
     },
     [onMouseenter, props]
   );
   const handleMouseLeave = useCallback(
     (event) => {
-      onMouseleave == null ? void 0 : onMouseleave(event, listener == null ? void 0 : listener.Widgets[name], cardItem, listener);
+      var _a;
+      onMouseleave == null ? void 0 : onMouseleave(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], cardItem, listener);
     },
     [onMouseleave, props]
   );

package/components/data/form/base-form/hooks/useFormOperations.d.ts

@@ -10,4 +10,4 @@ import { UseFormOperationsOptions, UseFormOperationsReturn } from "../props";
  * - Save and new / Save and view actions
  * - View mode state management
  */
-export declare function useFormOperations({ formName, formfields, formRef, formReff, formType, fullDataPath, parentFormDataContext, clearFormData, resetFormData, trigger, submit, listener, widgetFormType, debouncedFilter, }: UseFormOperationsOptions): UseFormOperationsReturn;
+export declare function useFormOperations({ formName, formfields, formRef, formReff, formType, fullDataPath, parentFormDataContext, clearFormData, resetFormData, trigger, submit, formProxy, widgetFormType, debouncedFilter, }: UseFormOperationsOptions): UseFormOperationsReturn;

package/components/data/form/base-form/hooks/useFormOperations.js

@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react";
-import { cleanNullValues, setWidgetFormData } from "../utils";
+import { cleanNullValues } from "../utils";
 import { usesPrefixedFields } from "../props";
 function useFormOperations({
   formName,
@@ -13,7 +13,7 @@ function useFormOperations({
   resetFormData,
   trigger,
   submit,
-  listener,
+  formProxy,
   widgetFormType,
   debouncedFilter
 }) {
@@ -92,7 +92,7 @@ function useFormOperations({
       }
       const cleanedData = cleanNullValues(data);
       resetFormData(cleanedData);
-      setWidgetFormData(listener, formName, cleanedData);
+      formProxy.formdata = cleanedData;
       if (widgetFormType === "live-filter" && debouncedFilter) {
         debouncedFilter();
       }

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

@@ -22,7 +22,7 @@ import { useMemo, useState, useRef, useEffect, useCallback } from "react";
 import clsx from "clsx";
 import { useForm } from "react-hook-form";
 import get from "lodash-es/get";
-import { debounce } from "lodash-es";
+import debounce from "lodash-es/debounce";
 import { defaultProps } from "./props";
 import {
   FormProvider,
@@ -36,8 +36,6 @@ import {
   isElementInViewport,
   scrollToElement,
   transformRangeFilterData,
-  getWidgetFormData,
-  setWidgetFormData,
   getWidgetFormFields,
   registerChildFieldInWidget
 } from "./utils";
@@ -51,11 +49,19 @@ import {
   isChildFormType,
   usesPrefixedFields
 } from "./hooks";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import {
+  useAppNotificationAction,
+  useNotifyApp
+} from "../../../../context/AppContext";
 const DEFAULT_CLASS = "panel app-panel app-form";
 const BaseForm = (WrappedComponent) => {
   const ControlledForm = (FormProps) => {
-    var _a, _b;
+    var _a;
     const props = __spreadValues(__spreadValues({}, defaultProps), FormProps);
+    const formProxy = useWidgetProxy(props.name);
+    const notificationAction = useAppNotificationAction();
+    const notifyApp = useNotifyApp();
     const {
       name: formName,
       expanded: initialExpanded,
@@ -144,11 +150,10 @@ const BaseForm = (WrappedComponent) => {
       }
       return getItemsPerRowClass(String(itemsperrow));
     }, [itemsperrow]);
-    const listenerWidgetFormdata = formName ? (_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[formName]) == null ? void 0 : _b.formdata : void 0;
+    const listenerWidgetFormdata = (_a = formProxy == null ? void 0 : formProxy.formdata) != null ? _a : void 0;
     const widgetFormData = useMemo(() => {
       if (!formName) return formdata;
-      const widgetData = getWidgetFormData(listener, formName);
-      const proxyFormdata = widgetData == null ? void 0 : widgetData.formdata;
+      const proxyFormdata = formProxy == null ? void 0 : formProxy.formdata;
       return proxyFormdata && Object.keys(proxyFormdata).length > 0 ? proxyFormdata : formdata;
     }, [formName, formdata, listenerWidgetFormdata]);
     const formClassName = useMemo(() => {
@@ -157,7 +162,7 @@ const BaseForm = (WrappedComponent) => {
     const fields = useMemo(() => {
       const newFields = [];
       if (!formName) return newFields;
-      const Widgets = getWidgetFormFields(listener, formName) || {};
+      const Widgets = (formProxy == null ? void 0 : formProxy.formfields) || {};
       Object.keys(Widgets).forEach((key) => {
         if (!key.includes("formWidget") && Widgets[key]) {
           newFields.push(Widgets[key]);
@@ -182,7 +187,6 @@ const BaseForm = (WrappedComponent) => {
     }, []);
     const checkAppServiceErrorMsg = useCallback((type) => {
       var _a2;
-      const notificationAction = get(listener, "Actions.appNotification");
       if (notificationAction && type === "error") {
         return (_a2 = notificationAction == null ? void 0 : notificationAction.getMessage) == null ? void 0 : _a2.call(notificationAction);
       }
@@ -194,7 +198,7 @@ const BaseForm = (WrappedComponent) => {
     }, []);
     const toggleMessage = useCallback(
       (state, msg, type) => {
-        var _a2, _b2, _c;
+        var _a2;
         let template = msg;
         if (state && msg) {
           if (type === "error" && errormessage && errormessage.length > 0) {
@@ -212,7 +216,7 @@ const BaseForm = (WrappedComponent) => {
               scrollToElement(formEl);
             }
           } else {
-            (_c = (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp) == null ? void 0 : _c.call(_b2, template || "", type || "", true);
+            notifyApp == null ? void 0 : notifyApp(template || "", type || "", true);
           }
         } else {
           setStatusMessage({ caption: "", type: "" });
@@ -255,7 +259,7 @@ const BaseForm = (WrappedComponent) => {
         const currentData = getValues();
         markCurrentData(currentData);
         lastUpdateOriginRef.current = "child";
-        setWidgetFormData(listener, formName, currentData);
+        formProxy.formdata = currentData;
       },
       [setValue, getValues, markCurrentData, formName]
     );
@@ -333,16 +337,6 @@ const BaseForm = (WrappedComponent) => {
       }),
       [handleSubmit, livefilterFn]
     );
-    const clearFilter = useMemo(
-      () => handleSubmit((data, e) => {
-        e == null ? void 0 : e.preventDefault();
-        e == null ? void 0 : e.stopPropagation();
-        formresetFn();
-        const transformedData = transformRangeFilterData(data);
-        livefilterFn(transformedData, true, formfieldsRef.current);
-      }),
-      [handleSubmit, livefilterFn]
-    );
     const debouncedFilter = useCallback(() => {
       const debouncedFn = debounce(filter, 250);
       debouncedFn();
@@ -358,7 +352,7 @@ const BaseForm = (WrappedComponent) => {
       setShowViewMode
     } = useFormOperations({
       formName: formName || "",
-      formfields,
+      formfields: (formProxy == null ? void 0 : formProxy.formfields) || {},
       formRef,
       formReff,
       formType,
@@ -368,10 +362,20 @@ const BaseForm = (WrappedComponent) => {
       resetFormData,
       trigger,
       submit,
-      listener,
+      formProxy: formProxy || {},
       widgetFormType: props["form-type"],
       debouncedFilter
     });
+    const clearFilter = useMemo(
+      () => handleSubmit((data, e) => {
+        e == null ? void 0 : e.preventDefault();
+        e == null ? void 0 : e.stopPropagation();
+        formresetFn();
+        const transformedData = transformRangeFilterData(data);
+        livefilterFn(transformedData, true, formfieldsRef.current);
+      }),
+      [handleSubmit, livefilterFn]
+    );
     const expandCollapsePanel = useCallback(() => {
       if (collapsible) {
         setExpanded(!expanded);
@@ -383,7 +387,8 @@ const BaseForm = (WrappedComponent) => {
         return;
       }
       setShowViewMode(true);
-    }, [setShowViewMode, props]);
+      formresetFn();
+    }, [setShowViewMode, props.cancel, formresetFn]);
     const getFieldValue = useCallback((fieldName) => watch(fieldName), [watch]);
     const highlightInvalidFields = useCallback(async () => {
       await validateFieldsOnSubmit();
@@ -449,7 +454,7 @@ const BaseForm = (WrappedComponent) => {
     useEffect(() => {
       return () => {
         var _a2;
-        if (!formName) return;
+        if (!formName || !formRef.current) return;
         (_a2 = props == null ? void 0 : props.destroy) == null ? void 0 : _a2.call(props, formName);
         formresetFn();
       };
@@ -583,6 +588,7 @@ const BaseForm = (WrappedComponent) => {
         widgetCls,
         itemsPerRow,
         validationtype: props.validationtype,
+        submitCount,
         showViewMode,
         formdata: computedFormdata,
         submit,
@@ -602,6 +608,7 @@ const BaseForm = (WrappedComponent) => {
         widgetCls,
         itemsPerRow,
         props.validationtype,
+        submitCount,
         showViewMode,
         computedFormdata,
         submit,

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

@@ -245,7 +245,7 @@ export interface UseFormOperationsOptions {
     resetFormData: (data: any) => void;
     trigger: () => Promise<boolean>;
     submit: () => Promise<boolean | undefined>;
-    listener?: any;
+    formProxy: any;
     /** Widget form type (e.g., 'live-filter') */
     widgetFormType?: string;
     autoupdate?: string;

package/components/data/form/dynamic-fields/index.js

@@ -98,6 +98,9 @@ function DynamicForm(props) {
           WmFormField,
           __spreadProps(__spreadValues({}, field), {
             name: field.name,
+            formName: formContext == null ? void 0 : formContext.name,
+            formKey: field.name,
+            fieldName: field.name,
             field: "true",
             listener,
             className: clsx(

package/components/data/form/form-action/index.d.ts

@@ -60,6 +60,8 @@ declare const WmFormActionsStandalone: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmFormActionsStandalone as WmFormAction };
 /**
@@ -133,5 +135,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/form/form-controller/hooks/index.js

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useMemo } from "react";
 import { createValidationRules } from "../validation-contrustor";
+import isEqual from "lodash/isEqual";
 const useFormRegistration = (name, fieldProxy, contextFormRef) => {
   const hasRegisteredRef = useRef(false);
   useEffect(() => {
@@ -13,7 +14,7 @@ const useExternalDataSync = (datavalue, fieldRef) => {
   useEffect(() => {
     if (fieldRef.current && datavalue !== void 0) {
       const currentValue = fieldRef.current.value;
-      if (currentValue !== datavalue) {
+      if (!isEqual(currentValue, datavalue)) {
         fieldRef.current.onChange(datavalue);
       }
     }

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

@@ -45,7 +45,8 @@ import {
   useFormRegistration,
   useDefaultValueSync,
   useValidationRules,
-  useHTMLValidationProps
+  useHTMLValidationProps,
+  useExternalDataSync
 } from "./hooks";
 const withFormController = (WrappedComponent) => {
   const WithFormControllerComponent = memo((props) => {
@@ -114,6 +115,7 @@ const withFormController = (WrappedComponent) => {
     const trigger = formRef == null ? void 0 : formRef.trigger;
     const validationType = (form == null ? void 0 : form.validationtype) || (formRef == null ? void 0 : formRef.validationtype) || "default";
     useFormRegistration(name, fieldProxy, contextFormRef);
+    useExternalDataSync(effectiveDataValue, fieldRef);
     useDefaultValueSync(defaultvalue, datavalue, fieldRef);
     const widget = WrappedComponent == null ? void 0 : WrappedComponent.displayName;
     const ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget != null ? widget : "");
@@ -148,29 +150,12 @@ const withFormController = (WrappedComponent) => {
     useEffect(() => {
       observeRef.current = observe;
     }, [observe]);
-    useEffect(() => {
-      return () => {
-        if (props.destroy) {
-          props.destroy([
-            props.name,
-            effectiveFormKey,
-            `${effectiveFormKey}_formWidget`,
-            `${effectiveFormKey}_formLabel`
-          ]);
-        }
-      };
-    }, [effectiveFormKey]);
-    useEffect(() => {
-      if (touched && !hasEverBeenTouchedRef.current) {
-        hasEverBeenTouchedRef.current = true;
-      }
-    }, [touched]);
     useEffect(() => {
       if (isInitialMountRef.current) {
         isInitialMountRef.current = false;
         return;
       }
-      const hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef == null ? void 0 : formRef.submitCount) && formRef.submitCount > 0;
+      const hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef == null ? void 0 : formRef.submitCount) && formRef.submitCount > 0 || false;
       if (trigger && effectiveFormKey && hasBeenTouchedOrSubmitted) {
         trigger(effectiveFormKey);
       }
@@ -181,7 +166,7 @@ const withFormController = (WrappedComponent) => {
         customMsgInitialRef.current = false;
         return;
       }
-      if (trigger && effectiveFormKey) {
+      if (trigger && effectiveFormKey && hasEverBeenTouchedRef.current) {
         trigger(effectiveFormKey);
       }
     }, [customValidationMsg]);
@@ -218,6 +203,7 @@ const withFormController = (WrappedComponent) => {
         return (e) => {
           var _a2;
           setTouched(true);
+          hasEverBeenTouchedRef.current = true;
           field.onBlur();
           const shouldTriggerValidation = validationType === "html" && trigger && !!fieldState.error || validationType !== "none" && ((_a2 = observeRef.current) == null ? void 0 : _a2.length) && trigger;
           if (shouldTriggerValidation) {
@@ -241,7 +227,7 @@ const withFormController = (WrappedComponent) => {
         rules: validationRules,
         defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
         render: ({ field, fieldState }) => {
-          var _a2;
+          var _a2, _b;
           fieldRef.current = field;
           const processedValue = processFieldValue(field.value, type, props.datafield);
           const errorState = getErrorState(fieldState, validationType, touched);
@@ -271,7 +257,7 @@ const withFormController = (WrappedComponent) => {
             maxvalue: props.maxvalue !== void 0 ? props.maxvalue : void 0
             // Keep original, don't update
           };
-          const controlledProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props), extractedValidatorProps), validationType === "html" ? htmlValidationProps : {}), maxWidgetProps), {
+          const controlledProps = __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props), extractedValidatorProps), validationType === "html" ? htmlValidationProps : {}), maxWidgetProps), {
             isMaxWidget,
             // Ensure isMaxWidget is passed through
             onChange: createOnChangeHandler(field),
@@ -287,6 +273,11 @@ const withFormController = (WrappedComponent) => {
             className: clsx(wrappedComponentProps.className, {
               hidden: contextFormRef == null ? void 0 : contextFormRef.isViewMode
             })
+          }), {
+            listener: {
+              onChange: props.onChangeHandler,
+              Widgets: ((_a2 = props.listener) == null ? void 0 : _a2.Widgets) || {}
+            }
           });
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
@@ -342,7 +333,7 @@ const withFormController = (WrappedComponent) => {
                   textAlign: "start",
                   width: "100%"
                 },
-                children: (_a2 = fieldState.error) == null ? void 0 : _a2.message
+                children: (_b = fieldState.error) == null ? void 0 : _b.message
               }
             )
           ] });

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

@@ -95,10 +95,6 @@ const BaseField = (WrappedComponent) => {
       }
       return props.formKey;
     }, [props.formKey, props.searchkey, props.formName, props.name, props.parentForm]);
-    function resetField() {
-      const fieldName = props.formKey || props.name;
-      (formContext == null ? void 0 : formContext.resetField) && (formContext == null ? void 0 : formContext.resetField(fieldName));
-    }
     const modifiedProps = useMemo(() => {
       var _a;
       return __spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -113,7 +109,6 @@ const BaseField = (WrappedComponent) => {
         widgetCls,
         captionCls,
         fieldRef,
-        reset: resetField,
         setValidationMessage,
         customValidationMsg,
         fieldName: props.name,