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

package/components/navigation/breadcrumb/index.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import withDatasetAwareNavigation from "../../../higherOrder/DataNav";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 const BreadCrumb = (props) => {
   const { className, onBeforenavigate, itemtarget, navNodes = [] } = props;
   function handleBeforeNavigate(e, node) {
@@ -11,7 +12,7 @@ const BreadCrumb = (props) => {
     }
   }
   const renderNavItem = (node, index, isLast = false) => /* @__PURE__ */ jsx("li", { className: clsx(node.class, { active: isLast }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    node.icon ? /* @__PURE__ */ jsx("i", { className: node.icon }) : /* @__PURE__ */ jsx("i", {}),
+    node.icon && /* @__PURE__ */ jsx(WmAppIcon, { icon: node.icon }),
     !isLast ? /* @__PURE__ */ jsx(
       Link,
       {

package/components/navigation/popover/index.js

@@ -18,7 +18,15 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useMemo, Suspense, useCallback, useLayoutEffect } from "react";
+import {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  Suspense,
+  useCallback,
+  useLayoutEffect
+} from "react";
 import clsx from "clsx";
 import debounce from "lodash-es/debounce";
 import Popover from "@mui/material/Popover";
@@ -63,13 +71,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 +101,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 +115,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 +212,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 +255,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,22 +1,46 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 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 { className, columnwidth, styles, layoutClassName, direction } = props;
+  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",
-    {
+    __spreadProps(__spreadValues({
       style: styles,
       className: clsx(
         DEFAULT_CLASS,
         className,
         `col-sm-${columnwidth} col-md-${columnwidth}`,
         layoutClassName
-      ),
+      )
+    }, direction ? { direction } : {}), {
       children: props.children
-    }
-  );
+    })
+  ) }) });
 }
 WmPageContent.displayName = "WmPageContent";
 var page_content_default = WmPageContent;

package/components/page/page-content/props.d.ts

@@ -9,6 +9,7 @@ export interface PageContentProps {
      * Utility layout classes from Studio Auto Layout (merged on the page-content root).
      */
     layoutClassName?: string;
+    direction?: string;
 }
 /**
  * Combined props for the WmPageContent component, including base WaveMaker props.

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", style: { height: "inherit" }, 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/components/wmx/WmxRenderer.d.ts

@@ -0,0 +1,8 @@
+import { BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/props";
+type WmxRendererProps = {
+    componentname: string;
+    field?: boolean;
+};
+type WmxRendererExtendedProps = WmxRendererProps & BaseProps;
+declare const WmxRenderer: (props: WmxRendererExtendedProps) => import("react/jsx-runtime").JSX.Element;
+export default WmxRenderer;

package/components/wmx/WmxRenderer.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getWmxModule } from "../../utils/wmx.utils";
+import withFormController from "../data/form/form-controller/withFormController";
+import withBaseWrapper from "../../higherOrder/withBaseWrapper";
+const WmxRenderer = (props) => {
+  var _b;
+  const _a = props, { componentname, field } = _a, restProps = __objRest(_a, ["componentname", "field"]);
+  const wmxModule = getWmxModule();
+  const RawComponent = (_b = wmxModule == null ? void 0 : wmxModule[`Wmx${componentname}`]) != null ? _b : null;
+  const FormFieldComponent = useMemo(
+    () => RawComponent ? withBaseWrapper(withFormController(RawComponent)) : null,
+    [RawComponent]
+  );
+  const BaseWrappedComponent = useMemo(
+    () => RawComponent ? withBaseWrapper(RawComponent) : null,
+    [RawComponent]
+  );
+  if (!wmxModule || !RawComponent || !FormFieldComponent || !BaseWrappedComponent) return null;
+  const isFormField = String(field) === "true";
+  if (isFormField) {
+    return /* @__PURE__ */ jsx(FormFieldComponent, __spreadValues({ componentname }, restProps));
+  }
+  return /* @__PURE__ */ jsx(BaseWrappedComponent, __spreadValues({ componentname }, restProps));
+};
+var WmxRenderer_default = WmxRenderer;
+export {
+  WmxRenderer_default as default
+};

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

@@ -43,7 +43,7 @@ const appstore = {
 };
 if (!appstore.I18nService.get()) {
   appstore.I18nService.set({
-    selectedLocale: getSessionLocaleSafe() || "en",
+    selectedLocale: "en",
     messages: {},
     getSelectedLocale: function() {
       try {

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.d.ts

@@ -38,8 +38,6 @@ export declare const getSessionStorageItem: (key: string) => any;
 export declare const getSessionLocaleSafe: () => string | undefined;
 export declare const getTimezone: () => string;
 export declare const formatMessage: (fragment: any, expression: string) => any;
-/** Angular parity: same appLocale object, swap message keys in place so bindings stay valid. */
-export declare function syncLocaleMessages(target: Record<string, any> | undefined, messages: Record<string, any>): boolean;
 export declare function reload(): void;
 export declare const toNumber: (value: any) => number;
 export declare const _get: {

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,36 +90,9 @@ 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") {
-    return false;
-  }
-  let synced = true;
-  Object.keys(target).forEach((key) => {
-    if (!(key in messages)) {
-      try {
-        delete target[key];
-      } catch (e) {
-        synced = false;
-      }
-    }
-  });
-  Object.keys(messages).forEach((key) => {
-    try {
-      const descriptor = Object.getOwnPropertyDescriptor(target, key);
-      if (descriptor && !descriptor.configurable && !descriptor.writable) {
-        synced = false;
-        return;
-      }
-      target[key] = messages[key];
-    } catch (e) {
-      synced = false;
-    }
-  });
-  return synced;
-}
 function reload() {
   window.location.reload();
 }
@@ -214,7 +188,6 @@ export {
   reload,
   replace,
   setSessionStorageItem,
-  syncLocaleMessages,
   toBoolean,
   toNumber
 };

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,
@@ -49,7 +52,6 @@ import {
 } from "../core/script-registry";
 import formatters from "../core/formatters";
 import { useAppProxy } from "../context/AppContext";
-import { syncLocaleMessages } from "../core/util";
 import {
   computeMergedPageParams,
   computePartialParamKey,
@@ -64,7 +66,7 @@ import { viewportService } from "../store/viewport.service";
 import { formatMessage } from "../core/util";
 const withPageContext = (WrappedComponent, addPageScript, getVariables, componentInfo, prefabInfo) => {
   const PageContextComponent = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     const dispatch = useAppDispatch();
     const { show, hide } = (_a = useAppSpinner()) != null ? _a : {};
     const i18n = useAppSelector((state) => state.i18n);
@@ -115,6 +117,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);
@@ -153,7 +156,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,
@@ -308,9 +310,7 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
           if (!appProxy.appLocale) {
             appProxy.appLocale = {};
           }
-          if (!syncLocaleMessages(appProxy.appLocale, mergedAppLocale)) {
-            appProxy.appLocale = __spreadValues({}, mergedAppLocale);
-          }
+          appProxy.appLocale = __spreadValues({}, mergedAppLocale);
           const localeFormats = {
             date: i18n.dateFormat,
             time: i18n.timeFormat,
@@ -321,7 +321,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 +331,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,63 +568,44 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
     async function executeStartup() {
       await (appContext == null ? void 0 : appContext.executeStartAppOperations());
     }
-    const applyLocaleToProxies = useCallback(
-      (newAppLocale) => {
-        var _a2;
-        if (appProxy) {
-          if (!appProxy.appLocale) {
-            appProxy.appLocale = {};
-          }
-          if (!syncLocaleMessages(appProxy.appLocale, newAppLocale)) {
-            appProxy.appLocale = __spreadValues({}, newAppLocale);
-          }
-        }
-        if (pageProxyRef.current) {
-          if (!pageProxyRef.current.appLocale) {
-            pageProxyRef.current.appLocale = {};
-          }
-          if (!syncLocaleMessages(pageProxyRef.current.appLocale, newAppLocale)) {
-            pageProxyRef.current.appLocale = __spreadValues({}, newAppLocale);
-          }
-          if (pageProxyRef.current.App) {
-            pageProxyRef.current.App.appLocale = (_a2 = appProxy == null ? void 0 : appProxy.appLocale) != null ? _a2 : newAppLocale;
-          }
-        }
-      },
-      [appProxy == null ? void 0 : appProxy.appLocale]
-    );
-    if (isInitialized && pageProxyRef.current && ((_c = i18n.localeRevision) != null ? _c : 0) !== lastSyncedLocaleRevisionRef.current) {
-      const isLocaleChange = lastSyncedLocaleRevisionRef.current >= 0;
-      lastSyncedLocaleRevisionRef.current = (_d = i18n.localeRevision) != null ? _d : 0;
-      applyLocaleToProxies(i18n.appLocale);
-      if (isLocaleChange && (componentInfo == null ? void 0 : componentInfo.componentType) === "PAGE") {
-        addPageScript(appProxy, pageProxyRef.current);
-      }
-    }
     useEffect(() => {
-      const newAppLocale = merge({}, i18n.appLocale || {}, (prefabInfo == null ? void 0 : prefabInfo.appLocale) || {});
-      if (!isEqual(pageContext.appLocale, newAppLocale)) {
-        setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
-          appLocale: newAppLocale
-        }));
+      const prevLocale = appliedLocaleRef.current;
+      appliedLocaleRef.current = i18n.selectedLocale;
+      const isLocaleSwitch = prevLocale !== void 0 && prevLocale !== i18n.selectedLocale;
+      if (isLocaleSwitch && pageProxyRef.current) {
+        pageProxyRef.current.Widgets = {};
       }
-    }, [i18n.appLocale]);
-    useEffect(() => {
+      const newAppLocale = merge({}, i18n.appLocale || {}, (prefabInfo == null ? void 0 : prefabInfo.appLocale) || {});
       const localeFormats = {
         date: i18n.dateFormat,
         time: i18n.timeFormat,
         currency: i18n.currencyCode
       };
-      setPageContext((prev) => __spreadProps(__spreadValues({}, prev), {
-        localeFormats
-      }));
       if (pageProxyRef.current) {
+        const appLocaleChanged = !isEqual(pageProxyRef.current.appLocale, newAppLocale);
+        if (appLocaleChanged) {
+          appProxy.appLocale = newAppLocale;
+          pageProxyRef.current.appLocale = newAppLocale;
+          pageProxyRef.current.App.appLocale = newAppLocale;
+        }
         pageProxyRef.current.localeFormats = localeFormats;
         if (pageProxyRef.current.App) {
           pageProxyRef.current.App.localeFormats = localeFormats;
         }
       }
-    }, [i18n.dateFormat, i18n.timeFormat, i18n.currencyCode]);
+      setPageContext((prev) => {
+        const appLocaleChanged = !isEqual(prev.appLocale, newAppLocale);
+        if (prev.selectedLocale === i18n.selectedLocale && !appLocaleChanged) {
+          return __spreadProps(__spreadValues({}, prev), { localeFormats });
+        }
+        return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, prev), {
+          selectedLocale: i18n.selectedLocale
+        }), isLocaleSwitch && { Widgets: {} }), {
+          appLocale: newAppLocale,
+          localeFormats
+        });
+      });
+    }, [i18n.selectedLocale, i18n.appLocale, i18n.dateFormat, i18n.timeFormat, i18n.currencyCode]);
     const pageName = (appProxy == null ? void 0 : appProxy.activePageName) || "";
     useEffect(() => {
       if ((componentInfo == null ? void 0 : componentInfo.componentType) === "PARTIAL" && pageName) {
@@ -681,14 +663,14 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
         ((_a2 = appVariables[value]) == null ? void 0 : _a2.invokeOnParamChange) && ((_b2 = appVariables[value]) == null ? void 0 : _b2.invokeOnParamChange());
       });
     }
-    if (((_e = componentInfo == null ? void 0 : componentInfo.autoUpdateVariables) == null ? void 0 : _e.length) && onStartupCompletedRef.current) {
+    if (((_c = componentInfo == null ? void 0 : componentInfo.autoUpdateVariables) == null ? void 0 : _c.length) && onStartupCompletedRef.current) {
       const pageVariables = pageContext.Variables;
       componentInfo.autoUpdateVariables.forEach((value) => {
         var _a2, _b2;
         (_b2 = (_a2 = pageVariables[value]) == null ? void 0 : _a2.invokeOnParamChange) == null ? void 0 : _b2.call(_a2);
       });
     }
-    return /* @__PURE__ */ jsx(WidgetProvider, { value: { value: pageContext, proxy: pageProxyRef.current }, children: /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props), `locale-${(_f = i18n.localeRevision) != null ? _f : 0}`) });
+    return /* @__PURE__ */ jsx(WidgetProvider, { value: { value: pageContext, proxy: pageProxyRef.current }, children: /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props)) });
   };
   PageContextComponent.displayName = `WithPageContext(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
   return PageContextComponent;