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

package/components/data/table/hooks/useTableColumns.js

@@ -45,7 +45,7 @@ import {
 import { distributeColumnWidths } from "../utils/columnWidthDistribution";
 import { useResponsiveColumns } from "./useResponsiveColumns";
 import WmTableRowAction from "../table-row-action";
-const handleActionSelection = (rowId, rowData, handlers) => {
+const handleActionSelection = (rowId, rowData, handlers, event) => {
   const {
     useMultiSelect,
     handleMultiSelection,
@@ -55,9 +55,9 @@ const handleActionSelection = (rowId, rowData, handlers) => {
   } = handlers;
   if (useMultiSelect && handleMultiSelection && isRowSelected) {
     const currentlySelected = isRowSelected(rowId);
-    handleMultiSelection(rowId, rowData, !currentlySelected);
+    handleMultiSelection(rowId, rowData, !currentlySelected, event);
   } else if (useRadioSelect && handleRadioSelection) {
-    handleRadioSelection(rowId, rowData);
+    handleRadioSelection(rowId, rowData, event);
   }
 };
 const createActionClickHandler = (rowData, rowId, handlers, actionOnClick) => {
@@ -65,7 +65,7 @@ const createActionClickHandler = (rowData, rowId, handlers, actionOnClick) => {
     if (handlers.handleRowClick && event) {
       handlers.handleRowClick(event, rowData, rowId);
     }
-    handleActionSelection(rowId, rowData, handlers);
+    handleActionSelection(rowId, rowData, handlers, event);
     actionOnClick == null ? void 0 : actionOnClick(event, widget, newVal);
   };
 };
@@ -123,7 +123,7 @@ const EditingActionButtons = React.memo(
         const isDeleteButton = button.key === "delete-edit";
         if (isDeleteButton && event) {
           (_a = selectionHandlers.handleRowClick) == null ? void 0 : _a.call(selectionHandlers, event, rowData, rowId);
-          handleActionSelection(rowId, rowData, selectionHandlers);
+          handleActionSelection(rowId, rowData, selectionHandlers, event);
         }
         switch (button.key) {
           case "save-edit":

package/components/data/table/index.js

@@ -778,8 +778,8 @@ const WmTableComponent = memo(
       if (name && (listener == null ? void 0 : listener.Widgets[name]) && tableContainerRef.current) {
         listener.Widgets[name].nativeElement = tableContainerRef.current;
       }
-      const data = internalDataset;
-      onDatarender((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], { $data: data, data });
+      const data = internalDataset && internalDataset.length > 0 ? internalDataset : table.getRowModel().rows.map((row) => row.original) || [];
+      onDatarender((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], data);
     }, [onDatarender, name]);
     columnsStateRef.current = columns;
     const columnsForTable = useMemo(() => {

package/components/data/table/props.d.ts

@@ -942,9 +942,9 @@ export interface BuildSelectionColumnsProps {
     useMultiSelect: boolean;
     /** @deprecated Header now reads from table.getIsAllRowsSelected() — no longer used internally. */
     selectedRowIds?: string[];
-    handleRadioSelection: (rowId: string, rowData?: any) => void;
-    handleMultiSelection: (rowId: string, rowData: any, isSelected: boolean) => void;
-    handleSelectAll: (isSelected: boolean) => void;
+    handleRadioSelection: (rowId: string, rowData?: any, event?: any) => void;
+    handleMultiSelection: (rowId: string, rowData: any, isSelected: boolean, event?: any) => void;
+    handleSelectAll: (isSelected: boolean, event?: any) => void;
     /** @deprecated Header now reads from table.getIsAllRowsSelected() — no longer used internally. */
     internalDataset?: any[];
     radioselecttitle?: string;
@@ -1056,8 +1056,8 @@ export interface UseTableColumnsProps {
     cellState?: CellStateReturn;
     isResizing?: boolean;
     handleRowClick?: (event: React.MouseEvent, rowData: any, rowId: string) => void;
-    handleRadioSelection?: (rowId: string, rowData: any) => void;
-    handleMultiSelection?: (rowId: string, rowData: any, checked: boolean) => void;
+    handleRadioSelection?: (rowId: string, rowData: any, event?: any) => void;
+    handleMultiSelection?: (rowId: string, rowData: any, checked: boolean, event?: any) => void;
     useRadioSelect?: boolean;
     useMultiSelect?: boolean;
     isRowSelected?: (rowId: string) => boolean;
@@ -1121,9 +1121,9 @@ export interface UseRowSelectionReturn {
     selectedRowIds: string[];
     useMultiSelect: boolean;
     useRadioSelect: boolean;
-    handleRadioSelection: (rowId: string, rowData?: any) => void;
-    handleMultiSelection: (rowId: string, rowData: any, isSelected: boolean) => void;
-    handleSelectAll: (isSelected: boolean) => void;
+    handleRadioSelection: (rowId: string, rowData?: any, event?: any) => void;
+    handleMultiSelection: (rowId: string, rowData: any, isSelected: boolean, event?: any) => void;
+    handleSelectAll: (isSelected: boolean, event?: any) => void;
     handleRowSelectionClick: (event: MouseEvent, rowId: string, rowData: any) => boolean;
     isRowSelected: (rowId: string) => boolean;
     isInteractiveElement: (event: MouseEvent) => boolean;

package/components/data/table/utils/buildSelectionColumns.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Radio, Checkbox, FormControlLabel, Tooltip } from "@mui/material";
+import { Box, Radio, FormControlLabel, Tooltip } from "@mui/material";
 import { TABLE_MESSAGES } from "./constants";
 const getSelectionMeta = (ctx) => {
   var _a, _b, _c, _d;
@@ -17,7 +17,7 @@ function RadioSelectCell(ctx) {
         Radio,
         {
           checked: isSelected,
-          onChange: () => handleRadioSelection == null ? void 0 : handleRadioSelection(rowId, row.original),
+          onChange: (e) => handleRadioSelection == null ? void 0 : handleRadioSelection(rowId, row.original, e),
           value: rowId,
           name: `wmRadioselect-${tableName != null ? tableName : "table"}`,
           inputProps: {
@@ -39,24 +39,23 @@ function MultiSelectCell(ctx) {
   const isSelected = row.getIsSelected();
   const { handleMultiSelection, multiselecttitle, multiselectarialabel } = getSelectionMeta(ctx);
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle != null ? multiselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: isSelected,
-        onChange: (e) => handleMultiSelection == null ? void 0 : handleMultiSelection(rowId, row.original, e.target.checked),
-        value: rowId,
-        name: "gridMultiSelect",
-        inputProps: {
-          "aria-label": multiselectarialabel,
+    /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle != null ? multiselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isSelected ? "" : "unchecked", children: [
+      /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", "aria-live": "assertive", children: "Select row" }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "input",
+          type: "checkbox",
           role: "checkbox",
-          "aria-live": "assertive"
-        },
-        size: "small",
-        sx: {
-          padding: 0
+          checked: isSelected,
+          onChange: (e) => handleMultiSelection == null ? void 0 : handleMultiSelection(rowId, row.original, e.target.checked, e),
+          value: rowId,
+          name: "gridMultiSelect",
+          "aria-label": multiselectarialabel
         }
-      }
-    ) }) }),
+      ),
+      /* @__PURE__ */ jsx(Box, { component: "span", className: "caption" })
+    ] }) }) }),
     isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Selected" }) : /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Deselected" })
   ] });
 }
@@ -65,20 +64,21 @@ function MultiSelectHeader({ table, column }) {
   var _a, _b;
   const isAllSelected = table.getIsAllRowsSelected();
   const { handleSelectAll } = (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.selection) != null ? _b : {};
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      checked: isAllSelected,
-      onChange: (e) => handleSelectAll == null ? void 0 : handleSelectAll(e.target.checked),
-      size: "small",
-      inputProps: {
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isAllSelected ? "" : "unchecked", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "input",
+        type: "checkbox",
+        role: "checkbox",
+        checked: isAllSelected,
+        onChange: (e) => handleSelectAll == null ? void 0 : handleSelectAll(e.target.checked, e),
+        name: "gridMultiSelectAll",
         "aria-label": "Select all rows"
-      },
-      sx: {
-        padding: 0
       }
-    }
-  ) }) });
+    ),
+    /* @__PURE__ */ jsx(Box, { component: "span", className: "caption" })
+  ] }) }) });
 }
 MultiSelectHeader.displayName = "MultiSelectHeader";
 const buildSelectionColumns = ({

package/components/data/table/utils/index.js

@@ -70,12 +70,26 @@ const hashString = (str, index) => {
   }
   return `row_${Math.abs(hash)}_${index}`;
 };
+const safeStringify = (value) => {
+  const seen = /* @__PURE__ */ new WeakSet();
+  try {
+    return JSON.stringify(value, (_key, val) => {
+      if (typeof val === "object" && val !== null) {
+        if (seen.has(val)) return "[Circular]";
+        seen.add(val);
+      }
+      return val;
+    });
+  } catch (e) {
+    return String(value);
+  }
+};
 const generateDeterministicHash = (obj, index) => {
   const hashSource = index.toString() + (isObject(obj) ? transform(
     omit(obj, "_wmTableRowId"),
     (result, value, key) => {
       if (!isNil(value)) {
-        result.push(`${key}:${isObject(value) ? JSON.stringify(value) : String(value)}`);
+        result.push(`${key}:${isObject(value) ? safeStringify(value) : String(value)}`);
       }
     },
     []

package/components/data/table/utils/selectionUtils.d.ts

@@ -11,6 +11,8 @@ export declare const hasInteractiveAttributes: (element: HTMLElement) => boolean
  * Check if element or its ancestors are interactive
  */
 export declare const isInteractiveElement: (event: React.MouseEvent) => boolean;
+export declare const toNativeEvent: (event: any) => any;
+export declare const createSelectionEventStub: () => any;
 /**
  * Widget passed to user callbacks must come from the page proxy (viewParent), which
  * listener.onChange updates synchronously. listener.Widgets lags one React commit behind.

package/components/data/table/utils/selectionUtils.js

@@ -47,6 +47,26 @@ const isInteractiveElement = (event) => {
   }
   return false;
 };
+const toNativeEvent = (event) => {
+  var _a;
+  return (_a = event == null ? void 0 : event.nativeEvent) != null ? _a : event;
+};
+const createSelectionEventStub = () => ({
+  target: {
+    closest: () => null,
+    matches: () => false,
+    querySelector: () => null
+  },
+  currentTarget: null,
+  preventDefault: () => {
+  },
+  stopPropagation: () => {
+  },
+  stopImmediatePropagation: () => {
+  },
+  isDefaultPrevented: () => false,
+  isPropagationStopped: () => false
+});
 const getWidgetForCallback = (listener, viewParent, widgetKey) => {
   var _a, _b, _c;
   return (_c = (_a = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a[widgetKey]) != null ? _c : (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[widgetKey];
@@ -106,11 +126,13 @@ const selectionStateHelpers = {
   }
 };
 export {
+  createSelectionEventStub,
   getRowIdsFromDataset,
   getWidgetForCallback,
   hasInteractiveAttributes,
   hasInteractiveClass,
   isInteractiveElement,
   rowExistsInDataset,
-  selectionStateHelpers
+  selectionStateHelpers,
+  toNativeEvent
 };

package/components/dialogs/dialog-actions/index.js

@@ -1,9 +1,18 @@
 import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 import DialogActions from "@mui/material/DialogActions";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 const WmDialogFooter = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx(DialogActions, { className: "app-dialog-footer modal-footer", children });
+  const { children, className, styles, hidden } = props;
+  return /* @__PURE__ */ jsx(
+    DialogActions,
+    {
+      className: clsx("app-dialog-footer modal-footer", className),
+      style: styles,
+      hidden: hidden != null ? hidden : false,
+      children
+    }
+  );
 };
 WmDialogFooter.displayName = "WmDialogFooter";
 var dialog_actions_default = withBaseWrapper(WmDialogFooter);

package/components/input/epoch/date/index.js

@@ -153,7 +153,7 @@ const WmDate = forwardRef((props, ref) => {
     () => {
       var _a2;
       return [
-        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y",
+        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "yyyy-MM-dd",
         selectedLocale || (listener == null ? void 0 : listener.selectedLocale) || "en"
       ];
     },
@@ -255,6 +255,7 @@ const WmDate = forwardRef((props, ref) => {
     if (!dateValue) return "";
     try {
       const momentDate = moment(dateValue).locale(currentLocale);
+      if (!momentDate.isValid()) return "";
       const momentPattern = convertToMomentFormat(datepattern);
       return momentDate.format(momentPattern);
     } catch (e) {

package/components/input/epoch/date/utils.js

@@ -57,10 +57,12 @@ const parseExcludedDates = (excludedates, getDateObj) => {
 };
 const defaultGetDateObj = (date) => {
   if (!date) return null;
-  if (date instanceof Date) return date;
+  if (date instanceof Date) return isNaN(date.getTime()) ? null : date;
   if (typeof date === "string") {
     const parsedDate = moment(date).toDate();
-    return isNaN(parsedDate.getTime()) ? new Date(date) : parsedDate;
+    if (!isNaN(parsedDate.getTime())) return parsedDate;
+    const fallbackDate = new Date(date);
+    return isNaN(fallbackDate.getTime()) ? null : fallbackDate;
   }
   return null;
 };

package/components/input/epoch/datetime/index.js

@@ -96,8 +96,8 @@ const WmDateTime = memo(
     const defaultDateTimeFormat = useMemo(() => {
       const combinedFromParts = () => {
         var _a2, _b2;
-        const datePart = defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y";
-        const timePart = defaultTimeFormat || ((_b2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b2.time) || "h:mm:ss a";
+        const datePart = defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "yyyy-MM-dd";
+        const timePart = defaultTimeFormat || ((_b2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b2.time) || "hh:mm a";
         return `${datePart} ${timePart}`;
       };
       return combinedFromParts();

package/components/input/epoch/datetime/props.d.ts

@@ -45,12 +45,12 @@ export interface DateTimeProps {
     defaultDateTimeFormat?: string;
     /**
      * Default date segment for display when `datepattern` is unset and `defaultDateTimeFormat` is not set.
-     * Falls back to `listener.localeFormats.date`, then `"MMM d, y"`.
+     * Falls back to `listener.localeFormats.date`, then `"yyyy-MM-dd"`.
      */
     defaultDateFormat?: string;
     /**
      * Default time segment for display when `datepattern` is unset and `defaultDateTimeFormat` is not set.
-     * Falls back to `listener.localeFormats.time`, then `"h:mm:ss a"`.
+     * Falls back to `listener.localeFormats.time`, then `"hh:mm a"`.
      */
     defaultTimeFormat?: string;
     /**

package/components/input/epoch/time/utils.d.ts

@@ -9,7 +9,7 @@ export declare function validateTimeRange(timeValue: Date | moment.Moment | null
 export declare function validateTimeFormat(inputValue: string, pattern: string, required: boolean, validationmessage?: string): ValidationResult;
 export declare function parseTimeObj(timeValue: string | Date | null | undefined): Date | null;
 export declare const DEFAULT_CLASS = "input-group app-timeinput";
-export declare const DEFAULT_TIMEPATTERN = "h:mm:ss A";
+export declare const DEFAULT_TIMEPATTERN = "hh:mm a";
 export declare const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 export declare const READONLY_STYLES: {
     cursor: string;

package/components/input/epoch/time/utils.js

@@ -76,7 +76,7 @@ function formatDisplayTimeValue(value, pattern) {
     if (pattern === "timestamp") {
       return momentObj.valueOf().toString();
     }
-    return momentObj.isValid() ? momentObj.format(pattern) : "";
+    return momentObj.isValid() ? momentObj.format(pattern.replace(/\ba\b/g, "A")) : "";
   } catch (error) {
     console.warn("Error formatting display value:", error);
     return "";
@@ -178,7 +178,7 @@ function parseTimeObj(timeValue) {
   }
 }
 const DEFAULT_CLASS = "input-group app-timeinput";
-const DEFAULT_TIMEPATTERN = "h:mm:ss A";
+const DEFAULT_TIMEPATTERN = "hh:mm a";
 const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 const READONLY_STYLES = {
   cursor: "not-allowed"

package/components/input/fileupload/useFileUpload.js

@@ -30,7 +30,6 @@ const useFileUpload = (props) => {
     disabled = !fileUploadConstants.DEFAULT_VALUES.ENABLED,
     contenttype = "",
     maxfilesize,
-    uploadpath,
     datasource,
     extensions,
     filetype,
@@ -104,7 +103,7 @@ const useFileUpload = (props) => {
       const eventHandler = (_b2 = (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]) == null ? void 0 : _b2[eventName];
       return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
     },
-    [listener, name]
+    [name]
   );
   const fileUploadProgress = (progress) => {
     setUploadedFiles((prevFiles) => {
@@ -125,26 +124,18 @@ const useFileUpload = (props) => {
       });
     });
   };
-  useEffect(() => {
-    const progressObs = datasource && datasource._progressObservable;
-    if (progressObs) {
-      progressObs.subscribe((progress) => {
-        var _a2, _b2;
-        fileUploadProgress(progress);
-        if (progress.progress === 100) {
-          (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
-        } else if (progress.errMsg) {
-          (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
-        }
-      });
-    }
-    return () => {
-      const progressObs2 = datasource && datasource._progressObservable;
-      if (progressObs2 == null ? void 0 : progressObs2.unsubscribe) {
-        progressObs2.unsubscribe();
+  const subscribeToProgress = useCallback((progressObs) => {
+    if (!progressObs) return;
+    progressObs.subscribe((progress) => {
+      var _a2, _b2;
+      fileUploadProgress(progress);
+      if (progress.progress === 100) {
+        (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
+      } else if (progress.errMsg) {
+        (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
       }
-    };
-  }, [invokeEventCallback]);
+    });
+  }, []);
   useEffect(() => {
     const selected = getChooseFilter();
     setChooseFilter(selected);
@@ -193,7 +184,7 @@ const useFileUpload = (props) => {
     window.removeEventListener("focus", disableDropZone);
   };
   const onBeforeSelectEventCall = ($event, $files) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2;
     const files = getValidFiles(
       $files,
       contenttype,
@@ -237,14 +228,18 @@ const useFileUpload = (props) => {
         });
         if (datasource) {
           datasource._progressObservable = eventObserver();
+          subscribeToProgress(datasource._progressObservable);
           datasource.dataBinding = datasource.dataBinding || {};
           datasource.dataBinding.files = filesWithIds;
           datasource.dataSet = filesWithIds;
         }
         setUploadedFiles((prev) => multiple ? [...prev, ...filesWithIds] : [...filesWithIds]);
         listener == null ? void 0 : listener.onChange(name, { selectedFiles: filesWithIds });
-        const selectedFile = (_d = filesWithIds[0]) != null ? _d : (_c = (_b2 = fileInputRef.current) == null ? void 0 : _b2.files) == null ? void 0 : _c[0];
-        onSelect == null ? void 0 : onSelect($event, selectedFile, filesWithIds);
+        onSelect == null ? void 0 : onSelect(
+          $event,
+          (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name],
+          filesWithIds
+        );
       }
     }
   };

package/components/input/select/index.js

@@ -334,7 +334,7 @@ const WmSelect = React.memo(
       }
       prevComputedValueRef.current = currentValue;
     }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
-    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), hidden: props.hidden, style: styles, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS), hidden: props.hidden, style: styles, children: /* @__PURE__ */ jsxs(
       NativeSelect,
       __spreadProps(__spreadValues({
         name,
@@ -342,7 +342,6 @@ const WmSelect = React.memo(
         className: clsx(
           isTouched ? "ng-touched" : "ng-untouched",
           isDirty ? "ng-invalid" : "ng-valid",
-          className,
           "wm-native-select-root"
         ),
         value: multiple ? computedSelectValue : (_b = (_a = computedSelectValue.key) != null ? _a : placeholder) != null ? _b : ""
@@ -365,7 +364,11 @@ const WmSelect = React.memo(
           multiple,
           disabled,
           "aria-readonly": readonly,
-          className: `app-select ${className} ${DEFAULT_CLASS}  form-control ng-valid ng-touched ng-dirty wm-app `,
+          className: clsx(
+            "app-select",
+            className || "",
+            "form-control ng-valid ng-touched ng-dirty wm-app"
+          ),
           accessKey: shortcutkey,
           title: hint
         },

package/components/navigation/popover/index.d.ts

@@ -25,7 +25,7 @@ declare const _default: React.ComponentType<{
     onLoad?: (widget: WmPopoverProps) => void | Function;
     onShow?: (event: Event, widget: WmPopoverProps) => void;
     onHide?: (event: Event, widget: WmPopoverProps) => void;
-    render?: (props: WmPopoverProps, onLoad: () => void) => React.ReactNode;
+    render?: (props: WmPopoverProps, onLoad: (widget?: any) => void) => React.ReactNode;
     disabled?: boolean;
     isOpen?: boolean;
     caption: string;

package/components/navigation/popover/index.js

@@ -306,7 +306,7 @@ const WmPopover = (Props) => {
             }
           ),
           props.title && /* @__PURE__ */ jsx("div", { className: "popover-title popover-header", children: props.title }),
-          /* @__PURE__ */ jsx("div", { className: "popover-content popover-body", children: props.render && props.content ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: props.render(props, () => handleLoad(__spreadValues({}, props))) }) : props.children })
+          /* @__PURE__ */ jsx("div", { className: "popover-content popover-body", children: props.render && props.content ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: props.render(props, (widget) => handleLoad(widget)) }) : props.children })
         ]
       }
     )

package/components/navigation/popover/props.d.ts

@@ -19,7 +19,7 @@ interface PopoverProps extends WmAnchorProps {
     onLoad?: (widget: WmPopoverProps) => void | Function;
     onShow?: (event: Event, widget: WmPopoverProps) => void;
     onHide?: (event: Event, widget: WmPopoverProps) => void;
-    render?: (props: WmPopoverProps, onLoad: () => void) => React.ReactNode;
+    render?: (props: WmPopoverProps, onLoad: (widget?: any) => void) => React.ReactNode;
     disabled?: boolean;
     isOpen?: boolean;
 }

package/core/proxy-service.d.ts

@@ -2,8 +2,23 @@ import { PageContextState, ProxyTarget } from "@wavemaker-ai/react-runtime/types
 import { OverriddenPropsRegistry } from "@wavemaker-ai/react-runtime/core/script-registry";
 import BaseAppProps from "../higherOrder/BaseAppProps";
 import { FormFieldProps } from "../components/data/form/form-field/props";
+import type { UseFormSetValue } from "react-hook-form";
 export declare function clearPageWidgetProxyCache(widgetsProxy: object | null | undefined): void;
 export declare const createWidgetProxy: (widget: any, widgetName: string, setPageContext: any, overriddenPropsRegistry?: OverriddenPropsRegistry) => any;
 export declare const createPageProxy: (target: ProxyTarget, setPageContext: React.Dispatch<React.SetStateAction<PageContextState>>, overriddenPropsRegistry?: OverriddenPropsRegistry) => ProxyTarget;
 export declare const createStateProxy: (obj: PageContextState | BaseAppProps, path: string[], setPageContext: React.Dispatch<React.SetStateAction<PageContextState>> | React.Dispatch<React.SetStateAction<BaseAppProps>>, overriddenPropsRegistry?: OverriddenPropsRegistry) => ProxyTarget;
-export declare const createFormFieldProxy: (formField: FormFieldProps, setState: React.Dispatch<React.SetStateAction<FormFieldProps>>, overriddenItemsRef: React.MutableRefObject<Record<string, any>>, formProxy: any) => any;
+/**
+ * Distinct fields with their canonical registry key - a field is stored under several keys,
+ * so dedupe by identity and keep the first (canonical) key. Iterate this, not Object.keys().
+ */
+export declare const getFormFieldEntries: (formfields: Record<string, any> | undefined) => {
+    key: string;
+    field: any;
+}[];
+/** Distinct field objects in registration order. */
+export declare const getFormFieldList: (formfields: Record<string, any> | undefined) => any[];
+/** Hidden `<name>_formWidget` lookup alias, so registry iteration yields one entry per field (as in Angular). */
+export declare const defineFieldAlias: (alias: string, widget: any, ...registries: any[]) => void;
+export declare const createFormFieldProxy: (formField: FormFieldProps, setState: React.Dispatch<React.SetStateAction<FormFieldProps>>, overriddenItemsRef: React.MutableRefObject<Record<string, any>>, formProxy: any, formRef?: {
+    setValue?: UseFormSetValue<any>;
+}) => any;

package/core/proxy-service.js

@@ -550,28 +550,52 @@ const createStateProxy = (obj, path = [], setPageContext, overriddenPropsRegistr
     }
   });
 };
-const createFormFieldProxy = (formField, setState, overriddenItemsRef, formProxy) => {
+const getFormFieldEntries = (formfields) => {
+  const canonicalKeyByField = /* @__PURE__ */ new Map();
+  Object.entries(formfields != null ? formfields : {}).forEach(([key, field]) => {
+    if (field && !canonicalKeyByField.has(field)) canonicalKeyByField.set(field, key);
+  });
+  return [...canonicalKeyByField].map(([field, key]) => ({ key, field }));
+};
+const getFormFieldList = (formfields) => getFormFieldEntries(formfields).map(({ field }) => field);
+const defineFieldAlias = (alias, widget, ...registries) => registries.forEach(
+  (registry) => registry && Object.defineProperty(registry, alias, {
+    value: widget,
+    enumerable: false,
+    configurable: true,
+    writable: true
+  })
+);
+const createFormFieldProxy = (formField, setState, overriddenItemsRef, formProxy, formRef) => {
+  const { name, formKey } = formField;
+  const rhfKey = formKey || name;
   const fieldProxy = new Proxy(formField, {
     get: (target, prop) => {
+      if (prop === "setProperty") {
+        return function(key, value) {
+          fieldProxy[key] = value;
+          return this;
+        };
+      }
       return target[prop];
     },
     set: (target, prop, value) => {
       target[prop] = value;
       overriddenItemsRef.current[prop] = value;
       setState(__spreadValues({}, target));
+      if ((prop === "datavalue" || prop === "value") && rhfKey && (formRef == null ? void 0 : formRef.setValue)) {
+        formRef.setValue(rhfKey, value, { shouldValidate: false, shouldDirty: true });
+      }
       return true;
     }
   });
-  const name = formField.name;
-  const key = formField.formKey;
-  if (key) {
-    formProxy.formfields[key] = fieldProxy;
-    formProxy.formWidgets[key] = fieldProxy;
-  }
-  formProxy.formfields[`${name}_formWidget`] = fieldProxy;
-  formProxy.formWidgets[`${name}_formWidget`] = fieldProxy;
-  formProxy.formfields[`${name}`] = fieldProxy;
-  formProxy.formWidgets[`${name}`] = fieldProxy;
+  const { formfields, formWidgets } = formProxy;
+  [formKey, name].forEach((fieldKey) => {
+    if (!fieldKey) return;
+    formfields[fieldKey] = fieldProxy;
+    formWidgets[fieldKey] = fieldProxy;
+  });
+  defineFieldAlias(`${name}_formWidget`, fieldProxy, formfields, formWidgets);
   return fieldProxy;
 };
 export {
@@ -579,5 +603,8 @@ export {
   createFormFieldProxy,
   createPageProxy,
   createStateProxy,
-  createWidgetProxy
+  createWidgetProxy,
+  defineFieldAlias,
+  getFormFieldEntries,
+  getFormFieldList
 };

package/higherOrder/BaseDateTime.js

@@ -235,7 +235,14 @@ const withBaseDateTime = (WrappedComponent) => {
       if (date == "CURRENT_DATE") {
         return /* @__PURE__ */ new Date();
       }
-      return typeof date === "string" ? moment(date).toDate() : date;
+      if (typeof date === "string") {
+        const parsed = moment(date).toDate();
+        return isNaN(parsed.getTime()) ? void 0 : parsed;
+      }
+      if (date instanceof Date) {
+        return isNaN(date.getTime()) ? void 0 : date;
+      }
+      return date;
     }, []);
     const handleKeyDown = useCallback((event) => {
       const arrowKeys = Object.values(ARROW_KEYS);