@wavemaker-ai/react-runtime 1.0.0-rc.324 → 1.0.0-rc.328

package/components/container/index.js

@@ -30,7 +30,13 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useMemo, useCallback } from "react";
+import {
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback,
+  useState
+} from "react";
 import { clsx } from "clsx";
 import { withBaseWrapper } from "../../higherOrder/withBaseWrapper";
 import { useLayoutSize } from "../../hooks/useLayoutSize";
@@ -38,7 +44,7 @@ import { removeInvalidAttributes } from "../../utils/attr";
 import { normalizeBackgroundImage } from "../../utils/style-utils";
 const DEFAULT_CLASS = "app-container";
 const WmContainer = (props) => {
-  var _c;
+  var _c, _d, _e;
   const _a = props, { listener } = _a, restPartialProps = __objRest(_a, ["listener"]);
   const _b = restPartialProps, {
     className,
@@ -148,6 +154,9 @@ const WmContainer = (props) => {
   const isLoaded = useRef(false);
   const widget_instance = (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name];
   const containerRef = useRef(null);
+  const [partialHostKey, setPartialHostKey] = useState(void 0);
+  const hostWidgetState = partialHostKey ? (_d = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _d[partialHostKey] : void 0;
+  const hostShouldHide = ((_e = hostWidgetState == null ? void 0 : hostWidgetState.show) == null ? void 0 : _e.toString()) === "false";
   const containerStyles = useMemo(() => {
     if (!(styles == null ? void 0 : styles.backgroundImage)) {
       return styles;
@@ -200,6 +209,9 @@ const WmContainer = (props) => {
         viewParent.Widgets[props.name || partialName] = widget || props;
         isLoaded.current = true;
         onLoad == null ? void 0 : onLoad(widget || props);
+        if (!props.name && partialName) {
+          setPartialHostKey(partialName);
+        }
       }
     },
     [onLoad, props.name]
@@ -212,7 +224,7 @@ const WmContainer = (props) => {
   const classNames = (className == null ? void 0 : className.split(" ")) || [];
   return /* @__PURE__ */ jsx(
     "div",
-    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
       className: clsx(
         {
           [className || ""]: Boolean(className),
@@ -224,10 +236,11 @@ const WmContainer = (props) => {
       ),
       "data-widget-id": props["data-widget-id"],
       id,
-      hidden: props.hidden
+      hidden: props.hidden || hostShouldHide
     }, removeInvalidAttributes(rest)), domEvents), { name }), {
       style: __spreadValues(__spreadValues({}, containerStyles), conditionalstyle),
-      ref: containerRef,
+      ref: containerRef
+    }), direction ? { direction } : {}), {
       children: renderPartial ? renderPartial(restPartialProps, handleOnLoad) : children
     })
   );

package/components/container/layout-grid/grid-row/index.js

@@ -4,7 +4,7 @@ import { Container } from "@mui/material";
 import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
 const DEFAULT_CLASS = "app-grid-row clearfix";
 const WmGridrow = (props) => {
-  return /* @__PURE__ */ jsx(Container, { style: props.styles, className: clsx(DEFAULT_CLASS, props.className), children: props.children });
+  return /* @__PURE__ */ jsx(Container, { style: props.styles, className: clsx(DEFAULT_CLASS, props.className), hidden: props.hidden, children: props.children });
 };
 WmGridrow.displayName = "WmGridrow";
 var grid_row_default = withBaseWrapper(WmGridrow);

package/components/container/panel/components/panel-header/index.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, IconButton } from "@mui/material";
 import DOMPurify from "dompurify";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import CloseIcon from "@mui/icons-material/Close";
@@ -137,7 +135,7 @@ const PanelHeader = ({
           title: `${(_b = (_a = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _a.LABEL_COLLAPSE) != null ? _b : "Collapse"}/${(_d = (_c = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _c.LABEL_EXPAND) != null ? _d : "Expand"}`,
           onClick: onToggleExpand,
           "aria-expanded": isExpanded,
-          children: isExpanded ? /* @__PURE__ */ jsx(ExpandLessIcon, { className: "wi-minus" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { className: "wi-plus" })
+          children: /* @__PURE__ */ jsx(Box, { component: "i", className: isExpanded ? "wi-minus" : "wi-plus" })
         }
       ),
       enablefullscreen && /* @__PURE__ */ jsx(

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

@@ -39,6 +39,7 @@ declare const _default: React.ComponentType<{
     onHeaderClick?: (event: React.SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void;
     renderPartial?: (props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => React.ReactNode;
     layoutClassName?: string;
+    direction?: string;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;

package/components/container/tabs/tab-pane/index.js

@@ -98,7 +98,7 @@ const WmTabpane = (props) => {
   }, [name, headerProps, updatePaneHeader]);
   return /* @__PURE__ */ jsx(
     Tabs.Panel,
-    __spreadProps(__spreadValues({
+    __spreadProps(__spreadValues(__spreadValues({
       value: index,
       keepMounted: true,
       className: clsx("tab-pane", "wm-tab-pane-root", layoutClassName, {
@@ -113,7 +113,7 @@ const WmTabpane = (props) => {
       style: props == null ? void 0 : props.styles,
       "data-pane-name": name,
       title: props == null ? void 0 : props.title
-    }, { name }), {
+    }, { name }), props.direction ? { direction: props.direction } : {}), {
       children: /* @__PURE__ */ jsx("div", { className: "tab-body", "data-widget-id": props["data-widget-id"], children: renderPartial ? renderPartial(
         props,
         () => {

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

@@ -78,6 +78,7 @@ export interface TabPanePropsBase {
      * Utility layout classes from Studio Auto Layout (merged on the outer tab-pane wrapper).
      */
     layoutClassName?: string;
+    direction?: string;
 }
 /**
  * Combined props for the WmTabPane component, including base WaveMaker props.

package/components/container/wizard/index.js

@@ -97,6 +97,7 @@ const WmWizardComponent = memo(
     const formRefs = useRef({});
     const stepContainerRefs = useRef({});
     const navIndexRef = useRef(-1);
+    const loadedStepNameRef = useRef(null);
     const [formReady, setFormReady] = useState(false);
     const parentFormContext = useParentFormData();
     const isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
@@ -469,12 +470,6 @@ const WmWizardComponent = memo(
               });
             })
           );
-          setTimeout(() => {
-            if (step.onLoad) {
-              const stepIndex = visibleSteps.findIndex((s) => s.name === step.name);
-              step.onLoad(step, stepIndex);
-            }
-          }, 100);
         } else {
           const nextValidStep = getNextValidStep(0, visibleSteps);
           if (nextValidStep) {
@@ -583,10 +578,16 @@ const WmWizardComponent = memo(
       visibleSteps
     ]);
     useEffect(() => {
-      if (currentStep == null ? void 0 : currentStep.onLoad) {
-        currentStep == null ? void 0 : currentStep.onLoad(currentStep, currentStepIndex);
-      }
-    }, [currentStep == null ? void 0 : currentStep.onLoad]);
+      if (!(currentStep == null ? void 0 : currentStep.onLoad) || loadedStepNameRef.current === currentStep.name) return;
+      const step = currentStep;
+      const timer = setTimeout(() => {
+        var _a;
+        if (loadedStepNameRef.current === step.name) return;
+        loadedStepNameRef.current = step.name;
+        (_a = step.onLoad) == null ? void 0 : _a.call(step, step, currentStepIndex);
+      }, 100);
+      return () => clearTimeout(timer);
+    }, [currentStep == null ? void 0 : currentStep.name, currentStep == null ? void 0 : currentStep.onLoad, currentStepIndex]);
     useEffect(() => {
       if (type === "dynamic" && dataset.length > 0 && steps.length === 0) {
         const dynamicSteps = createDynamicSteps(dataset);

package/components/container/wizard/utils.js

@@ -44,6 +44,7 @@ const getStepByIndex = (index, visibleSteps) => {
 };
 const updateStepFocus = () => {
   setTimeout(() => {
+    if (typeof document === "undefined") return;
     const currentStepElement = document.querySelector(
       ".MuiStepButton-root[aria-current='step']"
     );

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

@@ -8,4 +8,4 @@ import { UseFormSubmissionOptions, UseFormSubmissionReturn } from "../props";
  * - Success/error callbacks
  * - Data output notification
  */
-export declare function useFormSubmission({ formName, formfields, formDataref: externalFormDataref, getValues, formType, validateFieldsOnSubmit, resetFormData, toggleMessage, setShowViewMode, listener, datasource, formSubmit, widgettype, onBeforeSubmit, onSubmit, onResult, onSuccess, onError, insertmessage, updatemessage, deletemessage, postmessage, errormessage, messagelayout, standalone, }: UseFormSubmissionOptions): UseFormSubmissionReturn;
+export declare function useFormSubmission({ formName, formfields, formDataref: externalFormDataref, getValues, formType, validateFieldsOnSubmit, resetFormData, toggleMessage, setShowViewMode, listener, datasource, formSubmit, widgettype, onBeforeSubmit, onSubmit, onResult, onSuccess, formSuccess, onError, insertmessage, updatemessage, deletemessage, postmessage, errormessage, messagelayout, standalone, }: UseFormSubmissionOptions): UseFormSubmissionReturn;

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

@@ -43,6 +43,7 @@ function useFormSubmission({
   onSubmit,
   onResult,
   onSuccess,
+  formSuccess,
   onError,
   insertmessage,
   updatemessage,
@@ -102,6 +103,7 @@ function useFormSubmission({
       }
       if (status) {
         onSuccess == null ? void 0 : onSuccess(event, {}, data);
+        formSuccess == null ? void 0 : formSuccess(event, {}, data);
         if (messagelayout === "Inline") {
           toggleMessage(true, "Data saved successfully", "success");
         }
@@ -113,7 +115,7 @@ function useFormSubmission({
         }
       }
     },
-    [onResult, onSuccess, onError, messagelayout, errormessage, toggleMessage]
+    [onResult, onSuccess, formSuccess, onError, messagelayout, errormessage, toggleMessage]
   );
   const handleSubmitSuccess = useCallback(
     (data, resolve) => {

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

@@ -159,17 +159,7 @@ const BaseForm = (WrappedComponent) => {
     const formClassName = useMemo(() => {
       return isInsideWizard ? clsx(className) : clsx(DEFAULT_CLASS, className);
     }, [isInsideWizard, className]);
-    const fields = useMemo(() => {
-      const newFields = [];
-      if (!formName) return newFields;
-      const Widgets = (formProxy == null ? void 0 : formProxy.formfields) || {};
-      Object.keys(Widgets).forEach((key) => {
-        if (!key.includes("formWidget") && Widgets[key]) {
-          newFields.push(Widgets[key]);
-        }
-      });
-      return newFields;
-    }, [formName]);
+    const onDataSourceChangeFiredRef = useRef(false);
     const registerHeaderAction = useCallback((actionName, action) => {
       if (!action || !actionName) return;
       setHeaderActions((prev) => {
@@ -317,6 +307,7 @@ const BaseForm = (WrappedComponent) => {
       onSubmit: props.onSubmit,
       onResult: props.onResult,
       onSuccess: props.onSuccess,
+      formSuccess: props.formSuccess,
       onError: props.onError,
       insertmessage: props.insertmessage,
       updatemessage: props.updatemessage,
@@ -539,10 +530,15 @@ const BaseForm = (WrappedComponent) => {
       debouncedFilter
     ]);
     useEffect(() => {
-      if (props.onDataSourceChange && fields.length > 0) {
-        props.onDataSourceChange(fields);
+      if (!props.onDataSourceChange || !formName) return;
+      if (onDataSourceChangeFiredRef.current) return;
+      const Widgets = (formProxy == null ? void 0 : formProxy.formfields) || {};
+      const currentFields = Object.keys(Widgets).filter((key) => !key.includes("formWidget") && Widgets[key]).map((key) => Widgets[key]);
+      if (currentFields.length > 0) {
+        onDataSourceChangeFiredRef.current = true;
+        props.onDataSourceChange(currentFields);
       }
-    }, [fields, props.onDataSourceChange]);
+    }, [props.onDataSourceChange, formName]);
     useEffect(() => {
       if (formRef.current) {
         const formEl = formRef.current;
@@ -661,6 +657,7 @@ const BaseForm = (WrappedComponent) => {
         return {
           formdata: (_a2 = currentFormData != null ? currentFormData : widgetFormData) != null ? _a2 : formdata,
           formName: formName || "",
+          isValid,
           rootParentForm: isChildForm ? rootParentForm || "" : formName || "",
           parentDataPath: isChildForm ? fullDataPath : void 0,
           lastUpdateOrigin: isChildForm ? parentFormDataContext == null ? void 0 : parentFormDataContext.lastUpdateOrigin : lastUpdateOriginRef.current,

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

@@ -97,6 +97,8 @@ interface BaseFormProps extends BaseProps {
     onSubmit: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any) => void;
     onError: (event: React.FormEvent<HTMLFormElement>, widget: any, error: any) => void;
     onSuccess: (event: React.FormEvent<HTMLFormElement>, widget?: any, data?: any) => void;
+    /** @deprecated Use onSuccess instead. Fired with the same args as onSuccess for backward compatibility. */
+    formSuccess?: (event: React.FormEvent<HTMLFormElement>, widget?: any, data?: any) => void;
     formSubmit: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any, operation?: any) => void;
     onChange: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any) => void;
     onBeforeSubmit: (event: React.FormEvent<HTMLFormElement>, widget: any, data: any) => boolean | string | object | Promise<boolean | string | object>;
@@ -280,6 +282,7 @@ export interface UseFormSubmissionOptions {
     onSubmit?: Function;
     onResult?: Function;
     onSuccess?: Function;
+    formSuccess?: Function;
     onError?: Function;
     insertmessage?: string;
     updatemessage?: string;

package/components/data/form/dynamic-fields/WmxDynamicFormField.d.ts

@@ -0,0 +1,11 @@
+import { FormFieldMetadata } from "./props";
+export type WmxFormFieldProps = Record<string, unknown> & {
+    class?: string;
+    className?: string;
+};
+type WmxDynamicFormFieldProps = {
+    field: FormFieldMetadata;
+    fieldProps: WmxFormFieldProps;
+};
+export declare const WmxDynamicFormField: ({ field, fieldProps }: WmxDynamicFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,77 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import WmText from "../../../input/text";
+import withFormController from "../form-controller/withFormController";
+import { loadWmxComponent, getWmxComponentName } from "../../../../utils/wmx.utils";
+const WmxDynamicFormField = ({ field, fieldProps }) => {
+  var _b;
+  const componentName = getWmxComponentName(String((field == null ? void 0 : field.widget) || ""));
+  const _a = fieldProps, { class: className } = _a, restProps = __objRest(_a, ["class"]);
+  const resolvedClassName = className || fieldProps.className;
+  const [RawComponent, setRawComponent] = useState(null);
+  useEffect(() => {
+    if (!componentName) return;
+    let isActive = true;
+    loadWmxComponent(componentName).then((component) => {
+      if (isActive) {
+        setRawComponent(component);
+      }
+    }).catch((e) => {
+      console.error(e);
+    });
+    return () => {
+      isActive = false;
+    };
+  }, [componentName]);
+  const EnhancedWmxComponent = useMemo(() => {
+    if (!RawComponent) return null;
+    return withFormController(RawComponent);
+  }, [RawComponent]);
+  if (!EnhancedWmxComponent) {
+    return /* @__PURE__ */ jsx(WmText, __spreadProps(__spreadValues({ name: field == null ? void 0 : field.name }, restProps), { className: resolvedClassName }));
+  }
+  const dataset = (_b = field == null ? void 0 : field.dataset) != null ? _b : fieldProps == null ? void 0 : fieldProps.dataset;
+  return /* @__PURE__ */ jsx(
+    EnhancedWmxComponent,
+    __spreadProps(__spreadValues({
+      componentname: componentName
+    }, restProps), {
+      className: resolvedClassName,
+      dataset
+    })
+  );
+};
+export {
+  WmxDynamicFormField
+};

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

@@ -42,7 +42,12 @@ import WmLabel from "../../../basic/label";
 import WmFormField from "../form-field";
 import { updateMetadata } from "./utils";
 import { COMPONENT_MAP } from "./constant";
+import { WmxDynamicFormField } from "./WmxDynamicFormField";
 const DEFAULT_FIELD_CLASS = "app-dynamic-form-field";
+const isWmxComponent = (field) => {
+  var _a;
+  return (_a = field == null ? void 0 : field.widget) == null ? void 0 : _a.includes("wmx-");
+};
 function DynamicForm(props) {
   const {
     metadata,
@@ -74,7 +79,6 @@ function DynamicForm(props) {
     return Math.floor(12 / columns);
   };
   const renderFormField = (field) => {
-    const ComponentToRender = COMPONENT_MAP[field.widget] || WmText;
     const fieldProps = __spreadValues(__spreadProps(__spreadValues({}, field), {
       className: field.class,
       listener,
@@ -84,8 +88,15 @@ function DynamicForm(props) {
       onChangeHandler: formContext.onChangeHandler
     });
     const _a = fieldProps, { class: className } = _a, restProps = __objRest(_a, ["class"]);
+    if (isWmxComponent(field)) {
+      return handleWmxFormFieldRendering(field, fieldProps);
+    }
+    const ComponentToRender = COMPONENT_MAP[field.widget] || WmText;
     return /* @__PURE__ */ jsx(ComponentToRender, __spreadProps(__spreadValues({}, restProps), { className: className || fieldProps.className }));
   };
+  const handleWmxFormFieldRendering = (field, fieldProps) => {
+    return /* @__PURE__ */ jsx(WmxDynamicFormField, { field, fieldProps });
+  };
   const renderFormFieldWithWrapper = (field) => {
     const columnWidth = getColumnWidth(field.columnwidth);
     return /* @__PURE__ */ jsx(

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

@@ -73,6 +73,7 @@ const withFormController = (WrappedComponent) => {
       observe,
       onBlur,
       fieldName,
+      updateon,
       standalone = false
     } = _a, wrappedComponentProps = __objRest(_a, [
       "formRef",
@@ -97,6 +98,7 @@ const withFormController = (WrappedComponent) => {
       "observe",
       "onBlur",
       "fieldName",
+      "updateon",
       "standalone"
     ]);
     const [touched, setTouched] = useState(false);
@@ -193,10 +195,14 @@ const withFormController = (WrappedComponent) => {
           if (isValid === false) {
             return;
           }
+          if (updateon === "keypress" && effectiveFormKey) {
+            setTouched(true);
+            trigger(effectiveFormKey);
+          }
           (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e, componentProps, newValue, oldValue);
         };
       },
-      [type, props.datafield]
+      [type, props.datafield, updateon, effectiveFormKey]
     );
     const createOnBlurHandler = useCallback(
       (field, fieldState) => {
@@ -275,7 +281,18 @@ const withFormController = (WrappedComponent) => {
             })
           }), {
             listener: {
-              onChange: props.onChangeHandler,
+              onChange: isMaxWidget && props.onChangeHandler ? (name2, data) => {
+                const remapped = __spreadValues({}, data);
+                if ("datavalue" in remapped) {
+                  remapped.maxDataValue = remapped.datavalue;
+                  delete remapped.datavalue;
+                }
+                if ("displayValue" in remapped) {
+                  remapped.maxDisplayValue = remapped.displayValue;
+                  delete remapped.displayValue;
+                }
+                props.onChangeHandler(name2, remapped);
+              } : props.onChangeHandler,
               Widgets: ((_a2 = props.listener) == null ? void 0 : _a2.Widgets) || {}
             }
           });
@@ -308,20 +325,6 @@ const withFormController = (WrappedComponent) => {
                 })()
               }
             ),
-            hint && !shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "help-block",
-                "aria-hidden": "true",
-                role: "alert",
-                "aria-live": "polite",
-                style: {
-                  textAlign: "start",
-                  width: "100%"
-                },
-                children: hint
-              }
-            ),
             shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
               "p",
               {

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

@@ -57,13 +57,15 @@ const BaseField = (WrappedComponent) => {
       }
     }
     function setFieldDataSet(dataset, options) {
-      setRelatedData({
-        displaylabel: props.displayfield = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE,
-        displayfield: props.displayfield = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE,
+      const aliasDisplayField = options.aliasColumn || LIVE_CONSTANTS.LABEL_VALUE;
+      const newRelatedData = {
+        displaylabel: aliasDisplayField,
+        displayfield: aliasDisplayField,
         datafield: options.aliasColumn || LIVE_CONSTANTS.LABEL_KEY,
         searchkey: options.distinctField || LIVE_CONSTANTS.LABEL_KEY,
         dataset
-      });
+      };
+      setRelatedData(newRelatedData);
     }
     const hasRequiredValidator = () => {
       const checkRequiredValidator = (validator) => {
@@ -134,7 +136,8 @@ const BaseField = (WrappedComponent) => {
       relatedData,
       isRequired,
       transformedFormKey,
-      customValidationMsg
+      customValidationMsg,
+      formContext
     ]);
     return /* @__PURE__ */ createElement(
       WrappedComponent,

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

@@ -37,7 +37,7 @@ const DATASET_SYNC_KEYS = [
 ];
 const WmFormField = memo(
   (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const { show = true, deferload } = props;
     const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
       show: show == null ? void 0 : show.toString(),
@@ -49,7 +49,8 @@ const WmFormField = memo(
     const overriddenItemsRef = useRef({});
     const fieldKey = props.formKey || props.name;
     const defaultValueRegisteredRef = useRef(false);
-    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
+    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(
       (value) => {
         const field = fieldProxyRef.current;
@@ -69,7 +70,7 @@ const WmFormField = memo(
           fieldProxyRef.current[key] = key === "datavalue" && isNumber && !Array.isArray(data[key]) ? Number(data[key]) : data[key];
         });
         setProxyProps((prev) => {
-          return __spreadValues(__spreadValues({}, prev), isNumber && !Array.isArray(data.datavalue) ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
+          return __spreadValues(__spreadValues({}, prev), isNumber && data.datavalue !== void 0 && !Array.isArray(data.datavalue) ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
         });
       },
       [isNumber]
@@ -109,14 +110,20 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c2, _d2, _e2, _f, _g, _h;
       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: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_h = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _h.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+          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 = (_e2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e2.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,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -131,13 +138,13 @@ const WmFormField = memo(
       }
     }
     const isDynamicFormField = typeof props.className === "string" && props.className.includes("app-dynamic-form-field");
-    const itemsPerRowClass = !isDynamicFormField && ((_a = props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
+    const itemsPerRowClass = !isDynamicFormField && ((_d = props.formRef) == null ? void 0 : _d.itemsPerRow) || "";
     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) {
+    const showValue = ((_e = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _e.toString()) !== "false";
+    if ((!showValue || showfield) && isDeferLoad) {
       return null;
     }
     const shouldHide = !showValue && !isDeferLoad;

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

@@ -205,6 +205,7 @@ export interface FormFieldProps {
     observeOn?: any[];
     reset?: () => void;
     setValidationMessage?: (message: string) => void;
+    disabled?: boolean;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

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

@@ -6,6 +6,7 @@ import { MediaWmListtemplate } from "../templates/media-template";
 import { resolveDisableItem } from "../utils/list-helpers";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
 import isPlainObject from "lodash-es/isPlainObject";
+import isEmpty from "lodash-es/isEmpty";
 const ListItemWithTemplate = ({
   item,
   index,
@@ -38,7 +39,7 @@ const ListItemWithTemplate = ({
   const getCurrentItemWidgets = useCallback(
     ($index) => {
       const cached = widgetCacheRef.current.get($index);
-      if (cached) {
+      if (cached && !isEmpty(cached)) {
         return cached;
       }
       const items = {};
@@ -52,7 +53,9 @@ const ListItemWithTemplate = ({
           }
         }
       }
-      widgetCacheRef.current.set($index, items);
+      if (!isEmpty(items)) {
+        widgetCacheRef.current.set($index, items);
+      }
       return items;
     },
     [WidgetProxy, name]

package/components/data/list/hooks/useListEffects.js

@@ -112,7 +112,7 @@ const useListEffects = (props) => {
         selectPageSize: (size) => widgetMethodsRef.current.selectPageSize(size)
       });
     }
-  }, [name, showNavigation, items]);
+  }, [name, showNavigation, items == null ? void 0 : items.length]);
   useEffect(() => {
     if ((listener == null ? void 0 : listener.onChange) && props.navigation !== LIST_NAVIGATION_TYPES.NONE) {
       listener.onChange(name, {