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

package/components/container/tabs/index.js

@@ -26,6 +26,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState
@@ -165,10 +166,11 @@ const WmTabs = memo(
           return newSet;
         });
       }
-    }, [selectedIndex, type, dataset]);
+    }, [selectedIndex, type, dataset, dataset == null ? void 0 : dataset.length]);
     const changeTab = (newIndex) => {
       if (newIndex >= 0 && newIndex < panesCount.current && newIndex !== currentSelectedIndex.current) {
         prevSelectedIndex.current = currentSelectedIndex.current;
+        currentSelectedIndex.current = newIndex;
         setSelectedIndex(newIndex);
         saveStateToStorage(newIndex);
         return true;
@@ -257,7 +259,7 @@ const WmTabs = memo(
         activeTab: getActiveTab(activeIndex)
       });
     };
-    useEffect(() => {
+    useLayoutEffect(() => {
       updateListener();
     }, [prev, next, goToTab]);
     const getStateFromStorage = () => {
@@ -304,7 +306,7 @@ const WmTabs = memo(
           item.onHeaderclick(e, Widgets == null ? void 0 : Widgets[name], index);
         }
       },
-      [Widgets, name]
+      [name]
     );
     const renderTabHeader = React.useCallback(
       (item, index) => /* @__PURE__ */ createElement(
@@ -370,7 +372,7 @@ const WmTabs = memo(
       const headers = [];
       let tabIndex = 0;
       const addTabHeader = (itemProps) => {
-        const paneName = itemProps == null ? void 0 : itemProps.name;
+        const paneName = itemProps["item-id"] || itemProps.name;
         const latestWidgetState = paneName ? (Widgets == null ? void 0 : Widgets[paneName]) || {} : {};
         const headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
         const resolvedItemProps = __spreadValues(__spreadValues(__spreadValues({}, itemProps), latestWidgetState), headerOverrides);
@@ -395,7 +397,7 @@ const WmTabs = memo(
       });
       panesCount.current = tabIndex;
       return headers;
-    }, [dataset, render, renderTabHeader, Widgets, paneHeaderOverrides]);
+    }, [dataset, paneHeaderOverrides, renderTabHeader]);
     const renderStaticTabs = React.useCallback(() => {
       const visibleChildren = filterVisibleChildren(children, hiddenTabNames);
       panesCount.current = visibleChildren.length;
@@ -468,7 +470,10 @@ const WmTabs = memo(
           setSelectedIndex(newIndex);
           saveStateToStorage(newIndex);
           updateListener(newIndex);
-          onChange == null ? void 0 : onChange(null, getLatestTabsWidget(newIndex), newIndex, oldIndex);
+          setTimeout(
+            () => onChange == null ? void 0 : onChange(null, getLatestTabsWidget(newIndex), newIndex, oldIndex),
+            0
+          );
         },
         orientation,
         className: clsx("app-tabs clearfix", className, {
@@ -542,7 +547,6 @@ const WmTabs = memo(
       "transition",
       "type",
       "iconposition",
-      "render",
       "selectedindex",
       "children",
       "loading",
@@ -553,7 +557,7 @@ const WmTabs = memo(
       "styles"
     ];
     return keys.every((key) => {
-      if (key === "children") {
+      if (key === "children" || key === "dataset") {
         return prev[key] === next[key];
       }
       return isEqual(prev[key], next[key]);

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

@@ -49,6 +49,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/container/tabs/tab-pane/index.js

@@ -47,7 +47,7 @@ const WmTabpane = (props) => {
       listener.onChange(tabsContainerName, { activeTab: widgetInstance });
     }
     if (isActive) {
-      if (!loadedRef.current) {
+      if (!loadedRef.current && !renderPartial) {
         (_c = props == null ? void 0 : props.onLoad) == null ? void 0 : _c.call(props, null, widgetInstance);
         loadedRef.current = true;
       }
@@ -95,7 +95,7 @@ const WmTabpane = (props) => {
       return;
     }
     updatePaneHeader(name, headerProps);
-  }, [name, headerProps, updatePaneHeader]);
+  }, [name, updatePaneHeader]);
   return /* @__PURE__ */ jsx(
     Tabs.Panel,
     __spreadProps(__spreadValues(__spreadValues({

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

@@ -38,6 +38,7 @@ declare const WmWizardStandalone: React.ComponentType<{
     padding?: string;
     margin?: string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -130,6 +131,7 @@ declare const _default: React.ComponentType<{
     padding?: string;
     margin?: string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/wizard/index.js

@@ -51,6 +51,7 @@ 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 { publishPartialNamespaces, toHostWidgetProps } from "../../../utils/partial-host-util";
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
@@ -89,7 +90,9 @@ const WmWizardComponent = memo(
       width,
       height,
       render,
-      standalone = false
+      standalone = false,
+      viewParent,
+      prefab
     } = props;
     const [steps, setSteps] = useState([]);
     const [wizardMessage, setWizardMessage] = useState(message || { caption: "", type: "" });
@@ -99,6 +102,34 @@ const WmWizardComponent = memo(
     const navIndexRef = useRef(-1);
     const loadedStepNameRef = useRef(null);
     const [formReady, setFormReady] = useState(false);
+    const loadedStepPartialKeysRef = useRef(/* @__PURE__ */ new Set());
+    const currentStepRef = useRef(null);
+    const currentStepIndexRef = useRef(-1);
+    const handleStepPartialOnLoad = useCallback(
+      (widget, partialName) => {
+        var _a, _b, _c, _d;
+        if (!viewParent || !viewParent.Widgets) return;
+        const hostKey = ((_a = currentStepRef.current) == null ? void 0 : _a.name) || partialName;
+        if (!hostKey || loadedStepPartialKeysRef.current.has(hostKey)) return;
+        loadedStepPartialKeysRef.current.add(hostKey);
+        if (!widget || prefab) {
+          viewParent.Widgets[hostKey] = widget || props;
+        } else {
+          if (!viewParent.Widgets[hostKey]) {
+            viewParent.Widgets[hostKey] = toHostWidgetProps(props);
+          }
+          publishPartialNamespaces(viewParent.Widgets[hostKey], widget);
+        }
+        if (((_b = currentStepRef.current) == null ? void 0 : _b.name) === hostKey) {
+          (_d = (_c = currentStepRef.current) == null ? void 0 : _c.onLoad) == null ? void 0 : _d.call(
+            _c,
+            viewParent.Widgets[hostKey],
+            currentStepIndexRef.current
+          );
+        }
+      },
+      [viewParent, prefab]
+    );
     const parentFormContext = useParentFormData();
     const isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
     const createDynamicSteps = useCallback(
@@ -146,13 +177,19 @@ const WmWizardComponent = memo(
       [defaultstepindex]
     );
     const currentStep = useMemo(() => steps.find((step) => step.active) || null, [steps]);
+    currentStepRef.current = currentStep;
     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);
     }, [currentStep, visibleSteps]);
     useEffect(() => {
       navIndexRef.current = currentStepIndex;
+      currentStepIndexRef.current = currentStepIndex;
     }, [currentStepIndex]);
     const hasNextStep = useMemo(
       () => currentStepIndex < visibleSteps.length - 1,
@@ -284,27 +321,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 +378,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 +472,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 +595,8 @@ const WmWizardComponent = memo(
       currentStepIndex,
       isFirstStep,
       isLastStep,
-      visibleSteps
+      visibleSteps,
+      gotoStep
     ]);
     useEffect(() => {
       updateListener();
@@ -754,7 +803,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
@@ -764,7 +813,7 @@ const WmWizardComponent = memo(
                       className: clsx("app-wizard-step-content", {
                         active: step.active
                       }),
-                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, index) : step.children
+                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, handleStepPartialOnLoad) : step.children
                     }
                   )
                 ) : (
@@ -780,7 +829,7 @@ const WmWizardComponent = memo(
                       }),
                       listener,
                       isInsideWizard: true,
-                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, index) : step.children
+                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, handleStepPartialOnLoad) : step.children
                     }
                   )
                 )

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

@@ -49,7 +49,7 @@ export interface WizardStepData extends Record<string, unknown> {
     isValid: boolean;
     isInitialized: boolean;
     content?: ReactNode;
-    render?: (step: WizardStepData, stepIndex?: number, dataset?: Record<string, unknown>[]) => ReactNode;
+    render?: (step: WizardStepData, onLoad?: (widget?: Record<string, unknown>, partialName?: string) => void) => ReactNode;
     dynamicStepIndex?: number;
     isdynamic?: boolean;
     onLoad?: (step: WizardStepData, stepIndex: number) => void;
@@ -256,7 +256,7 @@ export interface WmWizardStepProps {
     ref?: React.Ref<unknown>;
     className?: string;
     props?: Record<string, unknown>;
-    render?: (item: Record<string, unknown>, index?: number, dataset?: Record<string, unknown>[]) => ReactNode;
+    render?: (props: Record<string, unknown>, onLoad?: (widget?: Record<string, unknown>, partialName?: string) => void) => ReactNode;
     listener?: Record<string, unknown>;
 }
 /**

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/dynamic-fields/WmxDynamicFormField.js

@@ -30,38 +30,24 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import WmText from "../../../input/text";
 import withFormController from "../form-controller/withFormController";
-import { loadWmxComponent, getWmxComponentName } from "../../../../utils/wmx.utils";
+import { getWmxComponentName, getWmxModule } from "../../../../utils/wmx.utils";
 const WmxDynamicFormField = ({ field, fieldProps }) => {
-  var _b;
+  var _b, _c, _d;
   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]);
+  const RawComponent = componentName ? (_c = (_b = getWmxModule()) == null ? void 0 : _b[`Wmx${componentName}`]) != null ? _c : null : null;
+  const EnhancedWmxComponent = useMemo(
+    () => RawComponent ? withFormController(RawComponent) : null,
+    [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;
+  const dataset = (_d = field == null ? void 0 : field.dataset) != null ? _d : fieldProps == null ? void 0 : fieldProps.dataset;
   return /* @__PURE__ */ jsx(
     EnhancedWmxComponent,
     __spreadProps(__spreadValues({

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")[];