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

package/components/container/tabs/index.js

@@ -22,6 +22,7 @@ import { createElement } from "react";
 import React, {
   createContext,
   memo,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
@@ -34,12 +35,12 @@ import isEqual from "lodash-es/isEqual";
 import { Tabs } from "@base-ui-components/react/tabs";
 import Typography from "@mui/material/Typography";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import WmTabPane from "./tab-pane";
 import { DEFAULT_PROPS } from "./props";
 import {
   WmSkeleton,
-  SKELETON_REGISTRY,
-  shouldShowSkeleton
+  SKELETON_REGISTRY
 } from "../../common/wm-skeleton";
 import {
   getWidgetState,
@@ -55,6 +56,7 @@ const PANE_HEADER_PROP_KEYS = [
   "disabled",
   "show",
   "paneicon",
+  "paneiconurl",
   "badgevalue",
   "badgetype",
   "className",
@@ -67,6 +69,7 @@ const getPaneHeaderProps = (props) => ({
   disabled: props == null ? void 0 : props.disabled,
   show: props == null ? void 0 : props.show,
   paneicon: props == null ? void 0 : props.paneicon,
+  paneiconurl: props == null ? void 0 : props.paneiconurl,
   badgevalue: props == null ? void 0 : props.badgevalue,
   badgetype: props == null ? void 0 : props.badgetype,
   className: props == null ? void 0 : props.className,
@@ -95,17 +98,6 @@ const useTabsContext = () => {
 const WmTabs = memo(
   (Props) => {
     const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
-    if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
-      return /* @__PURE__ */ jsx(
-        WmSkeleton,
-        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTabs"]), {
-          rows: props.skeletonRows,
-          columns: props.skeletonColumns,
-          className: clsx("app-tabs clearfix", props.className),
-          styles: props.styles
-        })
-      );
-    }
     const {
       defaultpaneindex,
       statehandler,
@@ -329,7 +321,7 @@ const WmTabs = memo(
             active: selectedIndex === index,
             disabled: item == null ? void 0 : item.disabled
           }),
-          hidden: item.show === false,
+          hidden: item.show === false || item.show === "false",
           role: "tab",
           "aria-selected": selectedIndex === index,
           tabIndex: selectedIndex === index ? 0 : -1,
@@ -343,11 +335,19 @@ const WmTabs = memo(
               title: item.title || item.name || `Tab ${index + 1}`,
               "aria-selected": selectedIndex === index,
               "aria-disabled": item.disabled,
-              "aria-hidden": item.show === false,
+              "aria-hidden": item.show === false || item.show === "false",
               "aria-controls": `tabpanel-${index}`,
               onClick: (e) => handleTabHeaderClick(e, item, index),
               children: [
-                item.paneicon && /* @__PURE__ */ jsx("i", { className: `app-icon ${item.paneicon}` }),
+                (item.paneicon || item.paneiconurl) && /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: item.paneicon,
+                    iconurl: item.paneiconurl,
+                    prefabName: props.prefabName,
+                    alt: "Tab icon"
+                  }
+                ),
                 /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "span", children: item.title || item.name || `Tab ${index + 1}` }),
                 item.badgevalue && /* @__PURE__ */ jsx(
                   Typography,
@@ -427,7 +427,7 @@ const WmTabs = memo(
         return Array.from(renderedTabIndices).filter((index) => index >= 0 && index < dataset.length).map((index) => {
           const item = dataset[index];
           const isActive = selectedIndex === index;
-          return /* @__PURE__ */ jsx(React.Fragment, { children: render ? /* @__PURE__ */ jsx(Fragment, { children: render(item, index, dataset, isActive) }) : /* @__PURE__ */ createElement(
+          return /* @__PURE__ */ jsx(React.Fragment, { children: render ? /* @__PURE__ */ jsx(Fragment, { children: render(item, index, dataset, isActive) }) : /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(WmSkeleton, __spreadValues({}, SKELETON_REGISTRY["WmTabs"])), children: /* @__PURE__ */ createElement(
             WmTabPane,
             __spreadProps(__spreadValues({}, item), {
               key: index,
@@ -440,7 +440,7 @@ const WmTabs = memo(
               }),
               index
             })
-          ) }, index);
+          ) }) }, index);
         });
       }
       const visibleChildren = filterVisibleChildren(children, hiddenTabNames);

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

@@ -19,6 +19,7 @@ export type PaneHeaderProps = {
     disabled?: boolean;
     show?: string | boolean;
     paneicon?: string;
+    paneiconurl?: string;
     badgevalue?: string | number;
     badgetype?: string;
     className?: string;

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

@@ -29,6 +29,7 @@ declare const _default: React.ComponentType<{
     badgevalue?: string | number;
     badgetype?: string;
     paneicon?: string;
+    paneiconurl?: string;
     isdynamic?: boolean;
     index?: number;
     item?: Record<string, unknown>;
@@ -89,5 +90,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -68,6 +68,7 @@ const WmTabpane = (props) => {
       disabled,
       show: props.show,
       paneicon: props.paneicon,
+      paneiconurl: props.paneiconurl,
       badgevalue: props.badgevalue,
       badgetype: props.badgetype,
       className,
@@ -80,6 +81,7 @@ const WmTabpane = (props) => {
       disabled,
       props.show,
       props.paneicon,
+      props.paneiconurl,
       props.badgevalue,
       props.badgetype,
       className,

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

@@ -41,6 +41,7 @@ export interface TabPanePropsBase {
      * Icon class for the tab header.
      */
     paneicon?: string;
+    paneiconurl?: string;
     /**
      * Whether this pane is from dynamic tabs (injected).
      */

package/components/container/wizard/components/StepComponents.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import clsx from "clsx";
+import { WmAppIcon } from "../../../common/WmAppIcon";
 const CustomStepIcon = memo(
   (props) => {
     const { step, index = 0, wizardClass = "", active, completed } = props;
@@ -12,20 +13,27 @@ const CustomStepIcon = memo(
     const isIconStepper = (wizardClass == null ? void 0 : wizardClass.includes("iconstepper")) || (wizardClass == null ? void 0 : wizardClass.includes("tabstepper"));
     const isCompleted = step.isDone;
     const iconContent = useMemo(() => {
-      if (isCompleted && (isDottedStepper || isNumber)) {
+      if (isCompleted && (isDottedStepper || isNumber) && !isIconStepper) {
         return /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-done" });
       }
-      if (isNumber && !isCompleted) {
+      if (isNumber && !isCompleted && !isIconStepper) {
         return /* @__PURE__ */ jsx(Box, { component: "span", className: "count", children: index + 1 });
       }
       if ((isDottedStepper || isTextInline && !isIconStepper) && !isCompleted) {
         return /* @__PURE__ */ jsx(Box, { component: "span", className: "dottedstepper" });
       }
-      if (isIconStepper && step.iconclass && (!isCompleted || isCompleted && !step.doneiconclass)) {
-        return /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${step.iconclass}` });
+      if (isIconStepper && (step.iconclass || step.iconurl) && (!isCompleted || isCompleted && !step.doneiconclass && !step.doneiconurl)) {
+        return /* @__PURE__ */ jsx(WmAppIcon, { iconclass: step.iconclass, iconurl: step.iconurl, alt: "Wizard step icon" });
       }
-      if (step.doneiconclass && isCompleted && isIconStepper) {
-        return /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${step.doneiconclass}` });
+      if ((step.doneiconclass || step.doneiconurl) && isCompleted && isIconStepper) {
+        return /* @__PURE__ */ jsx(
+          WmAppIcon,
+          {
+            iconclass: step.doneiconclass,
+            iconurl: step.doneiconurl,
+            alt: "Wizard done icon"
+          }
+        );
       }
       return null;
     }, [step, index, isCompleted, isDottedStepper, isNumber, isTextInline, isIconStepper]);

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

@@ -79,6 +79,7 @@ declare const WmWizardStandalone: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmWizardStandalone as WmWizard };
 /**
@@ -170,5 +171,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/wizard/index.js

@@ -54,7 +54,7 @@ import withStandalone from "../../../higherOrder/withStandalone";
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 const DEFAULT_CLS = "app-wizard panel clearfix";
 const BODY_CLASS = "app-wizard-body panel-body";
@@ -838,7 +838,7 @@ const WmWizardComponent = memo(
   }
 );
 const WmWizard = (props) => {
-  if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton)) {
     return /* @__PURE__ */ jsx(
       WmSkeleton,
       __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmWizard"]), {

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

@@ -34,7 +34,9 @@ export interface WizardStepData extends Record<string, unknown> {
     title: string;
     subtitle?: string;
     iconclass: string;
+    iconurl?: string;
     doneiconclass: string;
+    doneiconurl?: string;
     show: boolean | string;
     enableskip: boolean;
     enableNext: boolean;
@@ -235,7 +237,9 @@ export interface WmWizardStepProps {
     title?: string;
     subtitle?: string;
     iconclass?: string;
+    iconurl?: string;
     doneiconclass?: string;
+    doneiconurl?: string;
     enableskip?: boolean;
     disablenext?: boolean;
     disabledone?: boolean;

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

@@ -61,5 +61,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/wizard/wizard-step/index.js

@@ -12,7 +12,9 @@ const WmWizardstep = memo(
       title = "Step Title",
       subtitle,
       iconclass = "wi wi-person",
+      iconurl,
       doneiconclass = "wi wi-done",
+      doneiconurl,
       enableskip = false,
       disablenext = false,
       disabledone = false,
@@ -40,7 +42,9 @@ const WmWizardstep = memo(
         title,
         subtitle,
         iconclass,
+        iconurl,
         doneiconclass,
+        doneiconurl,
         show,
         enableskip,
         enableNext: !disablenext,
@@ -70,7 +74,9 @@ const WmWizardstep = memo(
         title,
         subtitle,
         iconclass,
+        iconurl,
         doneiconclass,
+        doneiconurl,
         show,
         enableskip,
         disablenext,

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

@@ -65,5 +65,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -65,5 +65,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -65,5 +65,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

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

package/components/data/card/index.js

@@ -23,6 +23,7 @@ import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import { Card, CardHeader, CardMedia, Avatar, Typography, Box } from "@mui/material";
 import Image from "next/image";
 import { WmMenu } from "../../navigation/menu";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import clsx from "clsx";
 import WmCardContentWithWrapper, { WmCardContent } from "./card-content";
 import WmCardActionsWithWrapper, { WmCardActions } from "./card-actions";
@@ -156,13 +157,19 @@ const WmCard = (props) => {
     }
   };
   const renderAvatar = () => {
-    if (iconclass && !iconurl) {
-      return /* @__PURE__ */ jsx(Avatar, { className: "app-card-avatar", children: /* @__PURE__ */ jsx("i", { className: `app-icon ${iconclass}` }) });
-    }
-    if (iconurl) {
-      return /* @__PURE__ */ jsx(Avatar, { className: "app-card-avatar", children: /* @__PURE__ */ jsx(Image, { src: iconurl, alt: "", width: 40, height: 40, className: "wm-card-avatar-img" }) });
+    if (!iconclass && !iconurl) {
+      return null;
     }
-    return null;
+    return /* @__PURE__ */ jsx(Avatar, { className: "app-card-avatar", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName: props.prefabName,
+        defaultClasses: iconurl ? "wm-card-avatar-img img-circle" : "",
+        alt: ""
+      }
+    ) });
   };
   const renderActionMenu = () => {
     if (!actions) return null;

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/index.js

@@ -120,6 +120,7 @@ function DynamicForm(props) {
                   caption: $formField.displayname,
                   required: $formField.required,
                   listener,
+                  hidden: !$formField.displayname,
                   className: clsx(
                     "app-label control-label formfield-label",
                     (formRef == null ? void 0 : formRef.captionCls) || ""

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

@@ -62,6 +62,7 @@ declare const WmFormActionsStandalone: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmFormActionsStandalone as WmFormAction };
 /**
@@ -137,5 +138,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -41,6 +41,7 @@ const WmFormActions = memo((props) => {
   var _b;
   const _a = props, {
     position = "footer",
+    type = "button",
     btnClass,
     updateMode,
     displayName,
@@ -48,6 +49,7 @@ const WmFormActions = memo((props) => {
     showViewMode
   } = _a, rest = __objRest(_a, [
     "position",
+    "type",
     "btnClass",
     "updateMode",
     "displayName",
@@ -60,15 +62,15 @@ const WmFormActions = memo((props) => {
     (event) => {
       var _a2, _b2, _c;
       if (props.standalone) {
-        if (props.type === "submit") {
+        if (type === "submit") {
           (_a2 = formRef == null ? void 0 : formRef.submit) == null ? void 0 : _a2.call(formRef, event);
-        } else if (props.type === "reset") {
+        } else if (type === "reset") {
           (_b2 = formRef == null ? void 0 : formRef.formreset) == null ? void 0 : _b2.call(formRef);
         }
       }
       (_c = props.onClick) == null ? void 0 : _c.call(props, event);
     },
-    [formRef, props.onClick, props.type]
+    [formRef, props.onClick, type]
   );
   useEffect(() => {
     if (formRef && position.includes("header") && formRef.registerHeaderAction) {
@@ -93,7 +95,7 @@ const WmFormActions = memo((props) => {
       className: clsx(btnClass, rest.className),
       caption: displayName,
       iconclass: props.iconclass,
-      type: props.type,
+      type,
       disabled: props.disabled,
       onClick: handleClick,
       name: props.name,

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) || {}
             }
           });

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,