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

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

@@ -0,0 +1,56 @@
+const SYSTEM_HEADER_IDS = /* @__PURE__ */ new Set([
+  "multiSelect",
+  "radioSelect",
+  "row-index",
+  "rowIndex",
+  "actions"
+]);
+function findFirstDataColumnIndex(headers) {
+  for (let i = 0; i < headers.length; i++) {
+    if (!SYSTEM_HEADER_IDS.has(headers[i].id)) {
+      return i;
+    }
+  }
+  return 0;
+}
+function getExpansionColumnInsertIndex(headers, rowExpansionConfig, options) {
+  if (!rowExpansionConfig) return -1;
+  if (options == null ? void 0 : options.appendForGroupedTable) {
+    return headers.length;
+  }
+  const position = rowExpansionConfig.position;
+  if (position === "-1" || position === -1) {
+    return Math.max(0, headers.length - 1);
+  }
+  if (typeof position === "number" || typeof position === "string" && !isNaN(Number(position))) {
+    return findFirstDataColumnIndex([...headers]) + Number(position);
+  }
+  if (typeof position === "string") {
+    const columnIndex = headers.findIndex((header) => {
+      var _a;
+      if (header.id === position || header.column.id === position) {
+        return true;
+      }
+      const accessorKey = (_a = header.column.columnDef) == null ? void 0 : _a.accessorKey;
+      if (accessorKey === position) {
+        return true;
+      }
+      const normalizedPosition = position.replace(/\./g, "_");
+      return header.id === normalizedPosition || header.column.id === normalizedPosition;
+    });
+    return columnIndex >= 0 ? columnIndex + 1 : 0;
+  }
+  return 0;
+}
+function buildExpansionColSpec(columnwidth) {
+  const w = columnwidth || "50px";
+  return {
+    key: "row-expansion",
+    width: w,
+    style: { width: w }
+  };
+}
+export {
+  buildExpansionColSpec,
+  getExpansionColumnInsertIndex
+};

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type CSSProperties } from "react";
 import { WmTableColumnProps, WmTableRowActionProps, WmTableRowProps, WmTableActionProps, ValidationResult } from "../props";
 declare const formWidgets: readonly ["WmText", "WmTextarea", "WmCheckbox", "WmSlider", "WmCurrency", "WmSwitch", "WmSelect", "WmCheckboxSet", "WmRadioSet", "WmDate", "WmTime", "WmTimestamp", "WmRating", "WmDatetime", "WmSearch", "WmChips", "WmColorPicker"];
 type FormWidgetType = (typeof formWidgets)[number];
@@ -46,6 +46,8 @@ export declare const parseTableStructureWithGroups: (children: React.ReactNode)
 export declare const flattenTableStructure: (structure: TableStructureItem[]) => WmTableColumnProps[];
 export declare const parseTableRowActions: (children: React.ReactNode) => WmTableRowActionProps[];
 export declare const parseTableActions: (children: React.ReactNode) => WmTableActionProps[];
+/** Resolve row-bound expansion props. Uses precomputed map first, then tableRowProps(rowData) fallback. */
+export declare const getRowExpansionConfig: (config: WmTableRowProps | null, rowId: string, rowData?: any) => WmTableRowProps | null;
 export declare const parseTableRowExpansion: (children: React.ReactNode) => WmTableRowProps | null;
 export declare const isEditAction: (actionKey: string) => boolean;
 export declare const isDeleteAction: (actionKey: string) => boolean;
@@ -95,8 +97,18 @@ export declare const INTERNAL_PROPERTIES: string[];
  */
 export declare const cleanRowData: (data: any) => any;
 export declare const parseWidth: (width: string | number, fallbackSize?: number) => number;
+/**
+ * Angular datatable.js hides show:false columns via jQuery `.hide()` / `.show()`
+ * (sets element.style.display = "none"), not by removing th/td from the DOM.
+ * setColGroupWidths also hides the matching `<col>` ($headerCol.hide()).
+ */
+export declare function isColumnDomHidden(meta?: Record<string, unknown>): boolean;
+/** Angular setColGroupWidths: jQuery `.hide()` plus width 0 on col for table-layout:fixed. */
+export declare function getDomHiddenColStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
+/** Inline style for hidden th/td — display:none and zero box so flex sizing cannot leak width. */
+export declare function getDomHiddenCellStyle(meta?: Record<string, unknown>): CSSProperties | undefined;
 export declare const getColClass: (colClass: string, rowData: any, columnName: string) => string;
-export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, DYNAMIC_COLUMNS_CONFIG, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
+export { TABLE_CSS_CLASSES, TABLE_DATA_STATES, TABLE_MESSAGES, INTERACTIVE_CLASSES, INTERACTIVE_ROLES, INTERACTIVE_DATA_ROLES, INTERACTIVE_TAG_NAMES, UNSUPPORTED_STATE_PERSISTENCE_TYPES, } from "./constants";
 export { renderDisplayCell } from "./renderDisplayCell";
 export { buildSelectionColumns } from "./buildSelectionColumns";
 export { validateField, resetValidationState, updateValidationErrors } from "./validation";

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

@@ -311,26 +311,17 @@ const flattenTableStructure = (structure) => {
   });
   return columns;
 };
-const parseTableRowActions = (children) => {
-  const actions = [];
-  React.Children.forEach(children, (child) => {
-    var _a;
-    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_row_action") || ((_a = child.type) == null ? void 0 : _a.displayName) === "WmTableRowAction")) {
-      const props = get(child, "props", {});
-      const actionProps = assign({}, props);
-      if (child.key) {
-        actionProps.key = child.key;
-      }
-      actions.push(actionProps);
-    }
-  });
-  return actions;
+const isTableChildOfType = (child, namePattern, componentToken) => {
+  var _a;
+  if (!((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.name)) return false;
+  const propName = child.props.name;
+  const displayName = getChildComponentDisplayName(child);
+  return propName.includes(namePattern) || displayName.includes(componentToken);
 };
-const parseTableActions = (children) => {
+const parseTableChildActions = (children, namePattern, componentToken) => {
   const actions = [];
   React.Children.forEach(children, (child) => {
-    var _a;
-    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_action") || ((_a = child.type) == null ? void 0 : _a.displayName) === "WmTableAction")) {
+    if (isTableChildOfType(child, namePattern, componentToken)) {
       const props = get(child, "props", {});
       const actionProps = assign({}, props);
       if (child.key) {
@@ -341,6 +332,8 @@ const parseTableActions = (children) => {
   });
   return actions;
 };
+const parseTableRowActions = (children) => parseTableChildActions(children, "wm_table_row_action", "WmTableRowAction");
+const parseTableActions = (children) => parseTableChildActions(children, "wm_table_action", "WmTableAction");
 function isTableRowComponent(child) {
   if (!(child == null ? void 0 : child.type)) return false;
   const name = child.type.displayName || child.type.name || "";
@@ -353,6 +346,11 @@ function isTableRowComponent(child) {
   }
   return false;
 }
+const getRowExpansionConfig = (config, rowId, rowData) => {
+  if (!config) return null;
+  const overrides = typeof config.tableRowProps === "function" && rowData !== void 0 ? config.tableRowProps(rowData) : {};
+  return __spreadValues(__spreadValues({}, config), overrides);
+};
 const parseTableRowExpansion = (children) => {
   let rowExpansionConfig = null;
   React.Children.forEach(children, (child) => {
@@ -570,6 +568,32 @@ const parseWidth = (width, fallbackSize = 150) => {
   }
   return columnSize;
 };
+function isColumnDomHidden(meta) {
+  return !!(meta == null ? void 0 : meta.domHidden);
+}
+function getDomHiddenColStyle(meta) {
+  if (!isColumnDomHidden(meta)) {
+    return void 0;
+  }
+  return {
+    display: "none",
+    width: 0,
+    minWidth: 0,
+    maxWidth: 0
+  };
+}
+function getDomHiddenCellStyle(meta) {
+  if (!isColumnDomHidden(meta)) {
+    return void 0;
+  }
+  return {
+    display: "none",
+    width: 0,
+    minWidth: 0,
+    maxWidth: 0,
+    padding: 0
+  };
+}
 const getColClass = (colClass, rowData, columnName) => {
   if (!colClass || typeof colClass !== "string") {
     return "";
@@ -611,7 +635,6 @@ import {
   INTERACTIVE_ROLES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_TAG_NAMES,
-  DYNAMIC_COLUMNS_CONFIG,
   UNSUPPORTED_STATE_PERSISTENCE_TYPES
 } from "./constants";
 import { renderDisplayCell } from "./renderDisplayCell";
@@ -642,7 +665,6 @@ import {
   convertFilterObjectToArray
 } from "./table-helpers";
 export {
-  DYNAMIC_COLUMNS_CONFIG,
   INTERACTIVE_CLASSES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_ROLES,
@@ -673,6 +695,9 @@ export {
   getButtonClasses,
   getChildComponentDisplayName,
   getColClass,
+  getDomHiddenCellStyle,
+  getDomHiddenColStyle,
+  getRowExpansionConfig,
   getRowIdsFromDataset,
   getSpacingClasses,
   getTableActionButtonClass,
@@ -683,6 +708,7 @@ export {
   hasInteractiveAttributes,
   hasInteractiveClass,
   isAddNewAction,
+  isColumnDomHidden,
   isColumnVisibleForViewport,
   isDataColumn,
   isDeleteAction,

package/components/dialogs/dialog/index.js

@@ -18,13 +18,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, Suspense } from "react";
 import clsx from "clsx";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import Dialog from "..";
 import BaseDialog from "../withDialogWrapper";
 import { WmDialogHeader } from "../dialog-header";
 import { WmDialogContent } from "../dialog-content";
+import { WmSpinner } from "../../basic/spinner";
 const WmDialog = memo(
   (props) => {
     var _a;
@@ -65,7 +66,7 @@ const WmDialog = memo(
               closable: props.closable
             }
           ),
-          props.children
+          /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(WmSpinner, { show: true, name: "dialog" }), children: props.children })
         ] }))
       })
     );

package/components/input/default/radioset/index.js

@@ -404,7 +404,8 @@ const WmRadioset = memo(
       "groupby",
       "collapsible",
       "datasetItems",
-      "hidden"
+      "hidden",
+      "getDisplayExpression"
     ];
     return keys.every((key) => {
       if (key === "datasetItems") {

package/components/input/select/index.js

@@ -334,10 +334,9 @@ const WmSelect = React.memo(
       }
       prevComputedValueRef.current = currentValue;
     }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
-    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), hidden: props.hidden, children: /* @__PURE__ */ jsxs(
       NativeSelect,
       __spreadProps(__spreadValues({
-        hidden: props.hidden,
         name,
         IconComponent: () => null,
         className: clsx(

package/components/input/textarea/index.js

@@ -303,7 +303,7 @@ const WmTextarea = memo(
             pattern: regexp
           }
         },
-        slots: __spreadValues({}, maxchars ? { formHelperText: TextareaCount } : {})
+        slots: __spreadValues({}, maxchars && limitdisplaytext ? { formHelperText: TextareaCount } : {})
       }, events)
     ) });
   },

package/components/navigation/popover/index.js

@@ -63,13 +63,20 @@ const WmPopover = (Props) => {
       openPopover();
     }
   }, [isOpen, openPopover, closePopover]);
+  const apiRef = useRef({
+    open: openPopover,
+    close: closePopover,
+    toggle: togglePopover,
+    isOpen
+  });
+  apiRef.current = { open: openPopover, close: closePopover, toggle: togglePopover, isOpen };
   useEffect(() => {
     const { listener, name } = props;
     if ((listener == null ? void 0 : listener.onChange) && name) {
       listener.onChange(name, {
-        open: openPopover,
-        close: closePopover,
-        toggle: togglePopover,
+        open: () => apiRef.current.open(),
+        close: () => apiRef.current.close(),
+        toggle: () => apiRef.current.toggle(),
         isOpen
       });
     }
@@ -86,7 +93,7 @@ const WmPopover = (Props) => {
     }
     handleLoad(__spreadValues({ isOpen }, props));
   }, [isOpen]);
-  const calculatePlacement = () => {
+  const calculatePlacement = useCallback(() => {
     if (!anchorRef.current) return;
     const rect = anchorRef.current.getBoundingClientRect();
     const viewHeight = window.innerHeight;
@@ -100,7 +107,7 @@ const WmPopover = (Props) => {
     else if (props.popoverplacement === "right" && viewWidth - rect.right < width)
       setPlacement("left");
     else setPlacement(props.popoverplacement || "bottom");
-  };
+  }, [props.popoverplacement, props.popoverheight, props.popoverwidth]);
   useLayoutEffect(() => {
     var _a2, _b2;
     if (!isOpen) return;
@@ -197,7 +204,7 @@ const WmPopover = (Props) => {
     }), {
       marginLeft: "-4px"
     });
-  }, [placement, props.popoverplacement, calculatePlacement]);
+  }, [placement]);
   const popoverHeight = ((_a = props == null ? void 0 : props.popoverheight) == null ? void 0 : _a.includes("px")) ? props == null ? void 0 : props.popoverheight : `${props == null ? void 0 : props.popoverheight}px`;
   const popoverWidth = ((_b = props == null ? void 0 : props.popoverwidth) == null ? void 0 : _b.includes("px")) ? props == null ? void 0 : props.popoverwidth : `${props == null ? void 0 : props.popoverwidth}px`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -240,7 +247,8 @@ const WmPopover = (Props) => {
             encodeurl: props.encodeurl,
             shortcutkey: props.shortcutkey,
             name: props.name
-          }
+          },
+          props.name
         )
       })
     ),

package/components/page/index.js

@@ -38,7 +38,7 @@ import React from "react";
 import { removeInvalidAttributes } from "../../utils/attr";
 import { PageLayoutContext } from "./page-context";
 import { getCurrentPath } from "../../core/util/utils";
-const getDefaultClass = (pageName) => clsx("app-page", pageName ? `app-page-${pageName.toLowerCase()}` : "", "container");
+const getDefaultClass = (pageName) => clsx("app-page", "container");
 function WmPage(props) {
   const pathname = getCurrentPath();
   const pageName = pathname.split("/").pop();

package/components/page/page-content/index.js

@@ -1,10 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
+import { useAppState } from "../../../context/WidgetProvider";
+import { getCurrentPath } from "../../../core/util/utils";
 const DEFAULT_CLASS = "app-page-content app-content-column";
 function WmPageContent(props) {
   const { className, columnwidth, styles, layoutClassName } = props;
-  return /* @__PURE__ */ jsx(
+  const appState = useAppState();
+  const pageName = ((appState == null ? void 0 : appState.componentName) || (appState == null ? void 0 : appState.name) || getCurrentPath().split("/").pop() || "").toLowerCase();
+  return /* @__PURE__ */ jsx("div", { className: "app-content-column-wrapper", children: /* @__PURE__ */ jsx("div", { className: clsx(pageName && `app-page-${pageName}`), style: { display: "inline" }, children: /* @__PURE__ */ jsx(
     "div",
     {
       style: styles,
@@ -16,7 +20,7 @@ function WmPageContent(props) {
       ),
       children: props.children
     }
-  );
+  ) }) });
 }
 WmPageContent.displayName = "WmPageContent";
 var page_content_default = WmPageContent;

package/components/page/partial-container/index.js

@@ -19,6 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import React, { memo, useCallback } from "react";
+import clsx from "clsx";
 import Container from "@mui/material/Container";
 import appstore from "../../../core/appstore";
 import isEqual from "lodash-es/isEqual";
@@ -69,7 +70,7 @@ const CodegenPartialContainer = memo((props) => {
     const partial = partials.find((p) => p.name === content);
     return partial ? React.createElement(partial.component, __spreadProps(__spreadValues({}, params), { onLoad: handleOnLoad })) : null;
   };
-  return /* @__PURE__ */ jsx(Container, { className: "partial-container", children: contentToRender() });
+  return /* @__PURE__ */ jsx("div", { className: clsx(content && `app-partial-${content.toLowerCase()}`), children: /* @__PURE__ */ jsx(Container, { className: "partial-container", children: contentToRender() }) });
 }, arePropsEqual);
 CodegenPartialContainer.displayName = "WmPartialContainer";
 const WmPartialContainer = memo((props) => {

package/components/prefab/index.js

@@ -31,6 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
+import clsx from "clsx";
 import { removeInvalidAttributes } from "../../utils/attr";
 const WmPrefab = (props) => {
   const _a = props, {
@@ -69,14 +70,14 @@ const WmPrefab = (props) => {
       }
     };
   }, [onLoad, onDestroy]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: clsx(props.prefabname && `app-prefab-${props.prefabname.toLowerCase()}`), children: /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({}, removeInvalidAttributes(rest, ["hidden"])), {
       style: __spreadValues(__spreadValues(__spreadValues({}, styles), width !== void 0 && { width: parseFloat(width) }), height !== void 0 && { height: parseFloat(height) }),
       ref,
       children
     })
-  );
+  ) });
 };
 var prefab_default = WmPrefab;
 export {

package/components/prefab/props.d.ts

@@ -13,6 +13,7 @@ interface PrefabProps {
     width?: number | string;
     height?: string;
     styles?: React.CSSProperties;
+    prefabname?: string;
 }
 export type WmPrefabProps = Prettify<PrefabProps & BaseProps>;
 export {};

package/context/WidgetProvider.js

@@ -87,10 +87,11 @@ const WidgetProvider = ({
         Object.keys(value.Widgets).forEach((widgetName) => {
           var _a2;
           const currentWidget = newContext.Widgets[widgetName];
-          const incomingWidget = value.Widgets[widgetName];
+          const incomingWidget = proxy.Widgets[widgetName] || value.Widgets[widgetName];
           if (currentWidget == null ? void 0 : currentWidget.App) {
             registerMethod(newContext, (_a2 = pageContextRef.current) == null ? void 0 : _a2.Widgets[widgetName], widgetName);
           } else {
+            if (incomingWidget.__isProxy) return;
             if (!isPage && (incomingWidget == null ? void 0 : incomingWidget.isLayout)) return;
             const registry = value == null ? void 0 : value.overriddenPropsRegistry;
             const widgetProxy = createWidgetProxy(

package/core/proxy-service.d.ts

@@ -2,6 +2,7 @@ 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";
+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;

package/core/proxy-service.js

@@ -28,6 +28,11 @@ import LiveVariable from "../variables/live-variable";
 import { ModelVariable } from "../variables/model-variable";
 import CrudVariable from "../variables/crud-variable";
 const proxyMap = /* @__PURE__ */ new WeakMap();
+const pageWidgetProxyCaches = /* @__PURE__ */ new WeakMap();
+function clearPageWidgetProxyCache(widgetsProxy) {
+  var _a;
+  (_a = pageWidgetProxyCaches.get(widgetsProxy)) == null ? void 0 : _a.clear();
+}
 let pendingWidgetContextUpdates = null;
 let batchedSetPageContextForWidgets = null;
 function flushPendingWidgetContextUpdates() {
@@ -201,6 +206,7 @@ const createWidgetProxy = (widget, widgetName, setPageContext, overriddenPropsRe
   if (widget == null) {
     return widget;
   }
+  widget.__isProxy = true;
   const proxy = new Proxy(widget, {
     set(target, prop, value, receiver) {
       if (typeof prop === "symbol" || prop === "prototype") {
@@ -231,6 +237,7 @@ const createWidgetProxy = (widget, widgetName, setPageContext, overriddenPropsRe
           return this;
         };
       }
+      if (prop === "__isProxy") return true;
       if (prop === "$element") {
         const rawElement = Reflect.get(target, prop, receiver);
         if (rawElement) {
@@ -310,7 +317,7 @@ const createWidgetProxy = (widget, widgetName, setPageContext, overriddenPropsRe
 };
 const createPageProxy = (target, setPageContext, overriddenPropsRegistry) => {
   const widgetProxies = /* @__PURE__ */ new Map();
-  return new Proxy(target, {
+  const widgetsProxy = new Proxy(target, {
     get(widgetsTarget, widgetName) {
       if (widgetName === void 0 || widgetName === "undefined") {
         return void 0;
@@ -378,6 +385,39 @@ const createPageProxy = (target, setPageContext, overriddenPropsRegistry) => {
       return true;
     }
   });
+  pageWidgetProxyCaches.set(widgetsProxy, widgetProxies);
+  return widgetsProxy;
+};
+const wrapVariableProxy = (variable, path, varName, setPageContext) => {
+  if (proxyMap.has(variable)) {
+    return variable;
+  }
+  const varProxy = new Proxy(variable, {
+    set(target, prop, value, receiver) {
+      if (typeof prop === "symbol") {
+        return Reflect.set(target, prop, value, receiver);
+      }
+      const prevVal = Reflect.get(target, prop, receiver);
+      const result = Reflect.set(target, prop, value, receiver);
+      if (prevVal !== value) {
+        setPageContext((prev) => {
+          const newState = __spreadValues({}, prev);
+          let current = newState;
+          for (let i = 0; i < path.length; i++) {
+            const key = path[i];
+            const existing = current[key];
+            current[key] = existing ? __spreadValues({}, existing) : {};
+            current = current[key];
+          }
+          current[varName] = target;
+          return newState;
+        });
+      }
+      return result;
+    }
+  });
+  proxyMap.set(varProxy, true);
+  return varProxy;
 };
 const createStateProxy = (obj, path = [], setPageContext, overriddenPropsRegistry) => {
   const nestedProxies = /* @__PURE__ */ new Map();
@@ -432,7 +472,17 @@ const createStateProxy = (obj, path = [], setPageContext, overriddenPropsRegistr
         return value;
       }
       if (value instanceof ServiceVariable || value instanceof LiveVariable || value instanceof ModelVariable || value instanceof CrudVariable) {
-        return value;
+        if (nestedProxies.has(prop)) {
+          return nestedProxies.get(prop);
+        }
+        const varProxy = wrapVariableProxy(
+          value,
+          path,
+          prop,
+          setPageContext
+        );
+        nestedProxies.set(prop, varProxy);
+        return varProxy;
       }
       if (isDOMElement(value)) {
         return value;
@@ -525,6 +575,7 @@ const createFormFieldProxy = (formField, setState, overriddenItemsRef, formProxy
   return fieldProxy;
 };
 export {
+  clearPageWidgetProxyCache,
   createFormFieldProxy,
   createPageProxy,
   createStateProxy,

package/core/util/index.js

@@ -1,4 +1,5 @@
 import get from "lodash-es/get";
+import has from "lodash-es/has";
 import { store } from "../../store";
 import { isArray, isObject, isString } from "lodash-es";
 const VALIDATOR = {
@@ -89,7 +90,8 @@ const getTimezone = () => {
   return timezone || "UTC";
 };
 const formatMessage = (fragment, expression) => {
-  return get(fragment, `appLocale.${expression}`, expression);
+  const path = `appLocale.${expression}`;
+  return has(fragment, path) ? get(fragment, path) : void 0;
 };
 function syncLocaleMessages(target, messages) {
   if (!target || typeof target !== "object") {

package/higherOrder/BasePage.js

@@ -35,7 +35,10 @@ import { redirectToLogin } from "../store/slices/authSlice";
 import {
   VariableEvents
 } from "../types";
-import { createStateProxy } from "../core/proxy-service";
+import {
+  clearPageWidgetProxyCache,
+  createStateProxy
+} from "../core/proxy-service";
 import {
   accordionExpansionHandler,
   mergeVariablesAndActions,
@@ -115,6 +118,7 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
     const overriddenPropsRegistryRef = useRef(null);
     const onStartupCompletedRef = useRef(false);
     const lastSyncedLocaleRevisionRef = useRef(-1);
+    const appliedLocaleRef = useRef(void 0);
     const [isPageReady, setIsPageReady] = useState(false);
     const pageReady = useCallback(() => {
       setIsPageReady(true);
@@ -143,7 +147,8 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
         date: i18n.dateFormat,
         time: i18n.timeFormat,
         currency: i18n.currencyCode
-      }
+      },
+      i18n
     }, prefabInfo), props), componentInfo), {
       executeStartup,
       formatters,
@@ -153,7 +158,6 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
       layoutReady,
       activePageName: componentInfo == null ? void 0 : componentInfo.componentName
     }));
-    const initialAppConfig = useMemo(() => appContext, [appContext]);
     useActivePageReactivity({
       componentType: componentInfo == null ? void 0 : componentInfo.componentType,
       appProxy,
@@ -321,7 +325,7 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
           pageProxy.Variables = Variables;
           pageProxy.Actions = Actions;
           pageProxy.pageReady = pageReady;
-          pageProxy.App = __spreadValues(__spreadValues({}, appProxy), initialAppConfig);
+          pageProxy.App = appProxy != null ? appProxy : appContext;
           pageProxy.selectedLocale = i18n.selectedLocale || "en";
           pageProxy.overriddenPropsRegistry = overriddenPropsRegistryRef.current;
           setupVariableSubscriptions(pageVariables.Variables);
@@ -331,6 +335,7 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
             appProxy.updateActivePage(pageName2);
             appProxy.activePage = pageProxy;
             appProxy.activePageName = pageName2;
+            clearPageWidgetProxyCache(appProxy.Widgets);
             Object.setPrototypeOf(appProxy.Widgets, pageProxy.Widgets);
           } else if ((componentInfo == null ? void 0 : componentInfo.componentName) === "Common" && (componentInfo == null ? void 0 : componentInfo.componentType) === "PARTIAL" && appProxy) {
             Object.keys(pageProxy.Widgets).forEach((key) => {
@@ -567,6 +572,22 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
     async function executeStartup() {
       await (appContext == null ? void 0 : appContext.executeStartAppOperations());
     }
+    useEffect(() => {
+      const prevLocale = appliedLocaleRef.current;
+      appliedLocaleRef.current = i18n.selectedLocale;
+      const isLocaleSwitch = prevLocale !== void 0 && prevLocale !== i18n.selectedLocale;
+      if (isLocaleSwitch && pageProxyRef.current) {
+        pageProxyRef.current.Widgets = {};
+      }
+      setPageContext((prev) => {
+        if (prev.selectedLocale === i18n.selectedLocale) {
+          return prev;
+        }
+        return __spreadValues(__spreadProps(__spreadValues({}, prev), {
+          selectedLocale: i18n.selectedLocale
+        }), isLocaleSwitch && { Widgets: {} });
+      });
+    }, [i18n.selectedLocale]);
     const applyLocaleToProxies = useCallback(
       (newAppLocale) => {
         var _a2;