@wavemaker-ai/react-runtime 1.0.0-rc.332 → 1.0.0-rc.334

package/components/container/wizard/index.js

@@ -147,6 +147,10 @@ const WmWizardComponent = memo(
     );
     const currentStep = useMemo(() => steps.find((step) => step.active) || null, [steps]);
     const visibleSteps = useMemo(() => steps.filter((step) => step.show), [steps]);
+    const visibleStepsRef = useRef(visibleSteps);
+    visibleStepsRef.current = visibleSteps;
+    const stepsRef = useRef(steps);
+    stepsRef.current = steps;
     const currentStepIndex = useMemo(() => {
       if (!currentStep) return -1;
       return visibleSteps.findIndex((step) => step.name === currentStep.name);
@@ -284,27 +288,34 @@ const WmWizardComponent = memo(
       () => stepstyle === "justified" ? "justified" : "auto",
       [stepstyle]
     );
+    const activateStep = useCallback(
+      (step) => {
+        if (!step.show || step.disabled) return;
+        setSteps(
+          (prevSteps) => prevSteps.map((s) => {
+            const stepIndex = prevSteps.findIndex((ps) => ps.name === s.name);
+            const targetIndex = prevSteps.findIndex((ps) => ps.name === step.name);
+            return __spreadProps(__spreadValues({}, s), {
+              active: s.name === step.name,
+              isDone: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex,
+              done: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex || s.name === step.name && targetIndex > 0,
+              disabled: false,
+              // Ensure enableNext and isValid are preserved when activating a step
+              enableNext: s.name === step.name ? true : s.enableNext,
+              isValid: s.name === step.name ? true : s.isValid
+            });
+          })
+        );
+      },
+      [type]
+    );
     const onStepHeaderClick = useCallback(
       (event, step) => {
-        if ((step.done || step.isDone || nonLinear && type === "dynamic") && step.show && !step.disabled) {
-          setSteps(
-            (prevSteps) => prevSteps.map((s) => {
-              const stepIndex = prevSteps.findIndex((ps) => ps.name === s.name);
-              const targetIndex = prevSteps.findIndex((ps) => ps.name === step.name);
-              return __spreadProps(__spreadValues({}, s), {
-                active: s.name === step.name,
-                isDone: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex,
-                done: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex || s.name === step.name && targetIndex > 0,
-                disabled: false,
-                // Ensure enableNext and isValid are preserved when activating a step
-                enableNext: s.name === step.name ? true : s.enableNext,
-                isValid: s.name === step.name ? true : s.isValid
-              });
-            })
-          );
+        if (step.done || step.isDone || nonLinear && type === "dynamic") {
+          activateStep(step);
         }
       },
-      [nonLinear, type]
+      [nonLinear, type, activateStep]
     );
     const handleStepClick = useCallback(
       (index) => {
@@ -334,62 +345,64 @@ const WmWizardComponent = memo(
     const next = useCallback(
       async (eventName = "next") => {
         var _a, _b;
+        const currentVisibleSteps = visibleStepsRef.current;
         const fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
-        const fromStep = getStepByIndex(fromIndex, visibleSteps);
+        const fromStep = getStepByIndex(fromIndex, currentVisibleSteps);
         if (!fromStep) return;
-        const nextStep = getNextValidStep(fromIndex + 1, visibleSteps);
+        const nextStep = getNextValidStep(fromIndex + 1, currentVisibleSteps);
         if (!nextStep) return;
-        const nextIndex = visibleSteps.findIndex((s) => s.name === nextStep.name);
+        const nextIndex = currentVisibleSteps.findIndex((s) => s.name === nextStep.name);
         if (eventName === "skip") {
           const response = (_a = fromStep.onSkip) == null ? void 0 : _a.call(fromStep, fromStep, fromStep, fromIndex);
           if (response !== void 0) {
             await handleNavigation(
               response,
-              () => extendNextFn(fromStep, fromIndex, visibleSteps, setSteps)
+              () => extendNextFn(fromStep, fromIndex, currentVisibleSteps, setSteps)
             );
           } else {
-            extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+            extendNextFn(fromStep, fromIndex, currentVisibleSteps, setSteps);
           }
         } else if (fromStep.isValid && eventName === "next") {
           const response = (_b = fromStep.onNext) == null ? void 0 : _b.call(fromStep, fromStep, fromStep, fromIndex);
           if (response !== void 0) {
             await handleNavigation(
               response,
-              () => extendNextFn(fromStep, fromIndex, visibleSteps, setSteps)
+              () => extendNextFn(fromStep, fromIndex, currentVisibleSteps, setSteps)
             );
           } else {
-            extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+            extendNextFn(fromStep, fromIndex, currentVisibleSteps, setSteps);
           }
         } else if (enablenext && !fromStep.isValid) {
           console.warn("Cannot proceed: current step is invalid");
         } else {
-          extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+          extendNextFn(fromStep, fromIndex, currentVisibleSteps, setSteps);
         }
         navIndexRef.current = nextIndex;
         setFormReady(false);
       },
-      [currentStepIndex, visibleSteps, enablenext]
+      [currentStepIndex, enablenext]
     );
     const prev = useCallback(async () => {
       var _a;
+      const currentVisibleSteps = visibleStepsRef.current;
       const fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
-      const fromStep = getStepByIndex(fromIndex, visibleSteps);
+      const fromStep = getStepByIndex(fromIndex, currentVisibleSteps);
       if (!fromStep) return;
-      const targetStep = getPrevValidStep(fromIndex - 1, visibleSteps);
+      const targetStep = getPrevValidStep(fromIndex - 1, currentVisibleSteps);
       if (!targetStep) return;
-      const prevIndex = visibleSteps.findIndex((s) => s.name === targetStep.name);
+      const prevIndex = currentVisibleSteps.findIndex((s) => s.name === targetStep.name);
       const response = (_a = fromStep.onPrev) == null ? void 0 : _a.call(fromStep, fromStep, fromStep, fromIndex);
       if (response !== void 0) {
         await handleNavigation(
           response,
-          () => extendPrevFn(fromStep, fromIndex, visibleSteps, setSteps)
+          () => extendPrevFn(fromStep, fromIndex, currentVisibleSteps, setSteps)
         );
       } else {
-        extendPrevFn(fromStep, fromIndex, visibleSteps, setSteps);
+        extendPrevFn(fromStep, fromIndex, currentVisibleSteps, setSteps);
       }
       navIndexRef.current = prevIndex;
       setFormReady(false);
-    }, [currentStepIndex, visibleSteps]);
+    }, [currentStepIndex]);
     const registerStep = useCallback((stepData) => {
       setSteps((prevSteps) => {
         const existingIndex = prevSteps.findIndex((step) => step.name === stepData.name);
@@ -426,31 +439,33 @@ const WmWizardComponent = memo(
     }, [onCancel, steps]);
     const gotoStep = useCallback(
       (step) => {
+        const currentSteps = stepsRef.current;
+        const currentVisibleSteps = visibleStepsRef.current;
         let gotoStepIndex;
         let targetStep = null;
         if (typeof step === "string") {
-          gotoStepIndex = steps.map((s) => s.name).indexOf(step);
+          gotoStepIndex = currentSteps.map((s) => s.name).indexOf(step);
           if (gotoStepIndex === -1) {
             console.error(`Could not find step '${step}'`);
             return;
           }
-          targetStep = steps[gotoStepIndex];
+          targetStep = currentSteps[gotoStepIndex];
         } else if (typeof step === "number" && step >= 0) {
           gotoStepIndex = step;
-          targetStep = getStepByIndex(step, visibleSteps);
+          targetStep = getStepByIndex(step, currentVisibleSteps);
         } else {
           console.error("Invalid step name or index provided");
           return;
         }
         if (targetStep == null ? void 0 : targetStep.show) {
-          const visIndex = visibleSteps.findIndex((s) => s.name === (targetStep == null ? void 0 : targetStep.name));
+          const visIndex = currentVisibleSteps.findIndex((s) => s.name === (targetStep == null ? void 0 : targetStep.name));
           if (visIndex >= 0) navIndexRef.current = visIndex;
-          onStepHeaderClick({}, targetStep);
+          activateStep(targetStep);
         } else {
           console.error("The gotoStep function cannot navigate to hidden steps");
         }
       },
-      [steps, visibleSteps, onStepHeaderClick]
+      [activateStep]
     );
     const setDefaultStep = useCallback(
       (step) => {
@@ -547,7 +562,8 @@ const WmWizardComponent = memo(
       currentStepIndex,
       isFirstStep,
       isLastStep,
-      visibleSteps
+      visibleSteps,
+      gotoStep
     ]);
     useEffect(() => {
       updateListener();
@@ -754,7 +770,7 @@ const WmWizardComponent = memo(
                 className: clsx("app-wizard-step-container", {
                   active: step.active
                 }),
-                hidden: !step.active,
+                hidden: !step.active || step.show === false || step.show === "false",
                 name: step.name,
                 children: isInsideOuterForm ? (
                   // Inside outer form - use div, fields/forms pass through to outer form context

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

@@ -19,6 +19,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -23,6 +23,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/card/card-content/index.d.ts

@@ -23,6 +23,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/card/card-footer/index.d.ts

@@ -23,6 +23,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/card/index.d.ts

@@ -46,6 +46,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/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, formProxy, widgetFormType, debouncedFilter, }: UseFormOperationsOptions): UseFormOperationsReturn;
+export declare function useFormOperations({ formName, formfields, formRef, formReff, formType, fullDataPath, parentFormDataContext, clearFormData, resetFormData, trigger, submit, formProxy, widgetFormType, debouncedFilter, onReset, }: UseFormOperationsOptions): UseFormOperationsReturn;

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

@@ -16,7 +16,8 @@ function useFormOperations({
   submit,
   formProxy,
   widgetFormType,
-  debouncedFilter
+  debouncedFilter,
+  onReset
 }) {
   const hasPrefixedFields = usesPrefixedFields(formType);
   const [showViewMode, setShowViewMode] = useState(false);
@@ -53,6 +54,7 @@ function useFormOperations({
         return (_a = childForm == null ? void 0 : childForm.formreset) == null ? void 0 : _a.call(childForm);
       });
     }
+    onReset == null ? void 0 : onReset();
   }, [
     formName,
     formfields,
@@ -62,7 +64,8 @@ function useFormOperations({
     fullDataPath,
     parentFormDataContext,
     formRef,
-    formReff
+    formReff,
+    onReset
   ]);
   const create = useCallback(() => {
     formreset();

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

@@ -325,7 +325,7 @@ const BaseForm = (WrappedComponent) => {
         e == null ? void 0 : e.preventDefault();
         e == null ? void 0 : e.stopPropagation();
         const transformedData = transformRangeFilterData(data);
-        return livefilterFn(transformedData, false, formfieldsRef.current);
+        return livefilterFn(transformedData, false, formProxy == null ? void 0 : formProxy.formfields);
       }),
       [handleSubmit, livefilterFn]
     );
@@ -334,7 +334,7 @@ const BaseForm = (WrappedComponent) => {
       debouncedFn();
     }, [filter]);
     const {
-      formreset: formresetFn,
+      formreset,
       create,
       edit,
       setFormData,
@@ -356,18 +356,14 @@ const BaseForm = (WrappedComponent) => {
       submit,
       formProxy: formProxy || {},
       widgetFormType: props["form-type"],
-      debouncedFilter
+      debouncedFilter,
+      onReset: props.onReset
     });
-    const formreset = useCallback(async () => {
-      var _a2;
-      await formresetFn();
-      (_a2 = props.onReset) == null ? void 0 : _a2.call(props);
-    }, [formresetFn, props.onReset]);
     const clearFilter = useMemo(
       () => handleSubmit((data, e) => {
         e == null ? void 0 : e.preventDefault();
         e == null ? void 0 : e.stopPropagation();
-        formresetFn();
+        formreset();
         const transformedData = transformRangeFilterData(data);
         livefilterFn(transformedData, true, formfieldsRef.current);
       }),
@@ -384,8 +380,8 @@ const BaseForm = (WrappedComponent) => {
         return;
       }
       setShowViewMode(true);
-      formresetFn();
-    }, [setShowViewMode, props.cancel, formresetFn]);
+      formreset();
+    }, [setShowViewMode, props.cancel, formreset]);
     const highlightInvalidFields = useCallback(async () => {
       await validateFieldsOnSubmit();
     }, [validateFieldsOnSubmit]);
@@ -452,7 +448,7 @@ const BaseForm = (WrappedComponent) => {
         var _a2;
         if (!formName || !formRef.current) return;
         (_a2 = props == null ? void 0 : props.destroy) == null ? void 0 : _a2.call(props, formName);
-        formresetFn();
+        formreset();
       };
     }, []);
     useEffect(() => {
@@ -559,7 +555,7 @@ const BaseForm = (WrappedComponent) => {
       }
       const formId = formIdRef.current;
       parentFormRef.current[formId] = {
-        formreset: formresetFn,
+        formreset,
         validateFieldsOnSubmit
       };
       return () => {
@@ -567,7 +563,7 @@ const BaseForm = (WrappedComponent) => {
           delete parentFormRef.current[formId];
         }
       };
-    }, [parentFormRef, formresetFn, validateFieldsOnSubmit]);
+    }, [parentFormRef, formreset, validateFieldsOnSubmit]);
     const computedFormdata = widgetFormData || childFormData || formdata;
     const ref = useMemo(
       () => ({

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

@@ -252,6 +252,7 @@ export interface UseFormOperationsOptions {
     widgetFormType?: string;
     autoupdate?: string;
     debouncedFilter?: () => void;
+    onReset?: () => void;
 }
 export interface UseFormOperationsReturn {
     formreset: () => Promise<void>;

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

@@ -22,6 +22,7 @@ declare const WmFormActionsStandalone: import("react").ComponentType<{
     margin?: string;
     width?: number | string;
     height?: number | string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -98,6 +99,7 @@ declare const _default: import("react").ComponentType<{
     margin?: string;
     width?: number | string;
     height?: number | string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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.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;
       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: (_m = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _m.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,11 @@ 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
         })) });
       } else {
         return null;
@@ -145,7 +169,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,11 @@ 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;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

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