@wavemaker-ai/react-runtime 1.0.0-rc.317 → 1.0.0-rc.322

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();

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,18 +150,6 @@ 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 (isInitialMountRef.current) {
         isInitialMountRef.current = false;
@@ -237,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);
@@ -267,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),
@@ -283,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(
@@ -338,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,

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

@@ -18,42 +18,129 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx } from "react/jsx-runtime";
-import { memo, useEffect } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import isEqual from "lodash-es/isEqual";
 import get from "lodash-es/get";
-import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
 import BaseField from "./base-field";
 import { WmComposite } from "../../../input/composite";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import { createFormFieldProxy } from "../../../../core/proxy-service";
 const DEFAULT_CLASS = "ng-pristine ng-invalid ng-touched";
 const DEFAULT_COMPOSITE_CLASS = "app-composite-widget caption-left clearfix form-group live-field";
+const DATASET_SYNC_KEYS = [
+  "dataset",
+  "datafield",
+  "displayfield",
+  "displaylabel",
+  "searchkey"
+];
 const WmFormField = memo(
   (props) => {
-    var _a;
+    var _a, _b;
+    const { show = true, deferload } = props;
+    const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
+      show: show == null ? void 0 : show.toString(),
+      deferload: deferload == null ? void 0 : deferload.toString(),
+      datavalue: props.defaultvalue
+    }));
+    const fieldProxyRef = useRef(null);
+    const formProxy = useWidgetProxy(`${props.formName}`);
+    const overriddenItemsRef = useRef({});
+    const fieldKey = props.formKey || props.name;
+    const defaultValueRegisteredRef = useRef(false);
+    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
+    const reset = useCallback(
+      (value) => {
+        const field = fieldProxyRef.current;
+        if (field.readonly || field.disabled) return;
+        fieldProxyRef.current.datavalue = value != null ? value : "";
+        fieldProxyRef.current.value = value != null ? value : "";
+      },
+      [fieldKey]
+    );
+    const isNumber = useMemo(
+      () => props.type === "integer" || props.type === "number",
+      [props.type]
+    );
+    const onChangeHandler = useCallback(
+      (name, data) => {
+        Object.keys(data).forEach((key) => {
+          fieldProxyRef.current[key] = key === "datavalue" && isNumber ? Number(data[key]) : data[key];
+        });
+        setProxyProps((prev) => {
+          return __spreadValues(__spreadValues({}, prev), isNumber ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
+        });
+      },
+      [isNumber]
+    );
     useEffect(() => {
-      if (props.name && props.destroy) {
-        props.destroy([props.name]);
+      if (!fieldKey || !formReady) return;
+      if (!formProxy.formWidgets) {
+        formProxy.formWidgets = {};
+        formProxy.formfields = {};
       }
-    }, []);
+      const mutableTarget = __spreadProps(__spreadValues({}, props), { reset, show, deferload });
+      const fieldProxy = createFormFieldProxy(
+        mutableTarget,
+        setProxyProps,
+        overriddenItemsRef,
+        formProxy
+      );
+      fieldProxyRef.current = fieldProxy;
+    }, [formReady]);
+    useEffect(() => {
+      if (!formReady || !fieldProxyRef.current) return;
+      if (defaultValueRegisteredRef.current) return;
+      defaultValueRegisteredRef.current = true;
+      fieldProxyRef.current.datavalue = props.defaultvalue;
+      fieldProxyRef.current.value = props.defaultvalue;
+      fieldProxyRef.current.defaultvalue = props.defaultvalue;
+    }, [props.defaultvalue]);
+    useEffect(() => {
+      var _a2;
+      const fieldProxy = fieldProxyRef.current;
+      if (!fieldProxy || !((_a2 = props.dataset) == null ? void 0 : _a2.length)) return;
+      DATASET_SYNC_KEYS.forEach((key) => {
+        const value = props[key];
+        if (value != null && fieldProxy[key] !== value) {
+          fieldProxy[key] = value;
+        }
+      });
+    }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
-        const formKey = (_b = props.formKey) != null ? _b : props.name;
+        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: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues({}, props), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
           fieldError,
+          validators: props.validators,
+          asyncValidators: props.asyncValidators,
+          observe: props.observe,
           invalid,
-          invalidCls
+          invalidCls,
+          iswidget: "false",
+          onChangeHandler
         })) });
       } else {
         return null;
       }
     }
     const itemsPerRow = ((_a = props == null ? void 0 : props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
-    if (props.hidden) {
+    if (!fieldProxyRef.current) {
+      return null;
+    }
+    const isDeferLoad = deferload === true;
+    const showValue = ((_b = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _b.toString()) !== "false";
+    if (!showValue && isDeferLoad) {
+      return null;
+    }
+    const shouldHide = !showValue && !isDeferLoad;
+    if (shouldHide) {
       return null;
     }
     return /* @__PURE__ */ jsx(
@@ -68,7 +155,6 @@ const WmFormField = memo(
         name: props.name,
         displayname: props.displayname,
         placeholder: props.placeholder,
-        hidden: props.hidden,
         "data-role": props.role || "form-field",
         children: /* @__PURE__ */ jsx(
           WmComposite,
@@ -89,7 +175,7 @@ const WmFormField = memo(
 );
 WmFormField.displayName = "WmFormField";
 const WmFormFieldStandalone = BaseField(WmFormField);
-var form_field_default = BaseField(withBaseWrapper(WmFormField));
+var form_field_default = BaseField(WmFormField);
 export {
   WmFormFieldStandalone as WmFormField,
   form_field_default as default