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

package/components/layout/header/props.d.ts

@@ -3,6 +3,7 @@ export interface HeaderProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmHeaderProps = HeaderProps;

package/components/layout/leftnav/index.js

@@ -2,12 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from "react";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PartialContentWrapper } from "../../common";
 import { PageLayoutContext } from "../../page/page-context";
 import { getLeftPanelPageClasses } from "./utils/page-class-util";
-const DEFAULT_CLASS = "app-nav-drawer app-left-panel left-panel-collapsed ";
+const DEFAULT_CLASS = "app-nav-drawer app-left-panel";
 const SLIDE_IN = "slide-in";
 const WmLeftPanel = (props) => {
-  const { onLeftPanelPageClassesChange } = useContext(PageLayoutContext);
+  const {
+    onLeftPanelPageClassesChange,
+    onLeftPanelPresenceChange,
+    leftPanelExpanded = false
+  } = useContext(PageLayoutContext);
   const {
     styles,
     children,
@@ -19,7 +24,8 @@ const WmLeftPanel = (props) => {
     navtype,
     navheight,
     animation = SLIDE_IN,
-    onNavHeightChange
+    onNavHeightChange,
+    content
   } = props;
   useEffect(() => {
     if (onNavHeightChange) {
@@ -31,18 +37,27 @@ const WmLeftPanel = (props) => {
       }
     };
   }, [navheight, onNavHeightChange]);
+  useEffect(() => {
+    onLeftPanelPresenceChange == null ? void 0 : onLeftPanelPresenceChange(true);
+    return () => {
+      onLeftPanelPresenceChange == null ? void 0 : onLeftPanelPresenceChange(false);
+    };
+  }, [onLeftPanelPresenceChange]);
   useEffect(() => {
     onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(
       getLeftPanelPageClasses({
         animation,
         columnwidth,
-        xscolumnwidth
+        xscolumnwidth,
+        expanded: leftPanelExpanded
       })
     );
+  }, [animation, columnwidth, xscolumnwidth, leftPanelExpanded, onLeftPanelPageClassesChange]);
+  useEffect(() => {
     return () => {
       onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(void 0);
     };
-  }, [animation, columnwidth, xscolumnwidth]);
+  }, [onLeftPanelPageClassesChange]);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -51,11 +66,12 @@ const WmLeftPanel = (props) => {
       sx: styles,
       className: clsx(
         DEFAULT_CLASS,
+        leftPanelExpanded ? "left-panel-expanded" : "left-panel-collapsed",
         className,
         animation,
         `col-md-${columnwidth} col-sm-${columnwidth} col-xs-${xscolumnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
       ),
-      children: render ? render(props) : children
+      children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: render ? render(props) : children })
     }
   );
 };

package/components/layout/leftnav/props.d.ts

@@ -29,6 +29,7 @@ export interface LeftNavProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmLeftNavProps = LeftNavProps;

package/components/layout/leftnav/utils/page-class-util.d.ts

@@ -2,6 +2,7 @@ export type LeftPanelPageLayout = {
     animation?: string;
     columnwidth?: number | string;
     xscolumnwidth?: number | string;
+    expanded?: boolean;
 };
 /**
  * (slide-in-left-panel-container, left-panel-container-*-*, etc.).

package/components/layout/leftnav/utils/page-class-util.js

@@ -9,9 +9,10 @@ const getPageWidthClass = (device, panelWidth) => {
   return `left-panel-container-${device}-${12 - width}`;
 };
 const getLeftPanelPageClasses = (layout) => {
+  const containerClass = layout.expanded ? "left-panel-expanded-container" : "left-panel-collapsed-container";
   if (layout.animation === SLIDE_IN) {
     return clsx(
-      "left-panel-collapsed-container",
+      containerClass,
       "slide-in-left-panel-container",
       getPageWidthClass("md", layout.columnwidth),
       getPageWidthClass("sm", layout.columnwidth),
@@ -19,9 +20,9 @@ const getLeftPanelPageClasses = (layout) => {
     );
   }
   if (layout.animation === SLIDE_OVER) {
-    return clsx("left-panel-collapsed-container", "slide-over-left-panel-container");
+    return clsx(containerClass, "slide-over-left-panel-container");
   }
-  return "left-panel-collapsed-container";
+  return containerClass;
 };
 export {
   getLeftPanelPageClasses

package/components/layout/rightnav/index.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PartialContentWrapper } from "../../common";
 const DEFAULT_CLASS = "app-right-panel";
 const WmRightPanel = (props) => {
-  const { styles, children, render, className, columnwidth = 2, id } = props;
-  return /* @__PURE__ */ jsx(Box, { id, sx: styles, className: clsx(DEFAULT_CLASS, className, `col-sm-${columnwidth}`), children: render ? render(props) : children });
+  const { styles, children, render, className, columnwidth = 2, id, content } = props;
+  const rendered = render ? render(props) : children;
+  return /* @__PURE__ */ jsx(Box, { id, sx: styles, className: clsx(DEFAULT_CLASS, className, `col-sm-${columnwidth}`), children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: rendered }) });
 };
 WmRightPanel.displayName = "WmRightPanel";
 var rightnav_default = WmRightPanel;

package/components/layout/rightnav/props.d.ts

@@ -8,6 +8,7 @@ export interface RightNavProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmRightNavProps = RightNavProps;

package/components/layout/topnav/index.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+import { PartialContentWrapper } from "../../common";
 const DEFAULT_CLASS = "app-top-nav";
 const WmTopNav = (props) => {
-  const { styles, children, render, className, id } = props;
+  const { styles, children, render, className, id, content } = props;
+  const rendered = render ? render(props) : children;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -14,7 +16,7 @@ const WmTopNav = (props) => {
       role: "navigation",
       "aria-label": "Second level navigation",
       "data-role": "page-topnav",
-      children: render ? render(props) : children
+      children: /* @__PURE__ */ jsx(PartialContentWrapper, { content, children: rendered })
     }
   );
 };

package/components/layout/topnav/props.d.ts

@@ -3,6 +3,7 @@ export interface TopNavProps {
     className?: string;
     styles?: React.CSSProperties;
     id?: string;
+    content?: string;
     render?: (props: Record<string, any>) => React.ReactNode;
 }
 export type WmTopNavProps = TopNavProps;

package/components/navbar/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/navbar/index.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
@@ -66,7 +66,10 @@ const WmNavbar = memo(
       "menuiconurl",
       "listener"
     ]);
+    const collapseRef = useRef(null);
+    const timersRef = useRef([]);
     const [isCollapsed, setIsCollapsed] = useState(true);
+    useEffect(() => () => timersRef.current.forEach(clearTimeout), []);
     const processedStyles = useMemo(() => {
       if (!styles) return styles;
       if (styles == null ? void 0 : styles.backgroundImage) {
@@ -74,8 +77,32 @@ const WmNavbar = memo(
       }
       return __spreadValues({}, styles);
     }, [styles]);
-    const handleToggle = () => {
-      setIsCollapsed(!isCollapsed);
+    const handleToggle = (event) => {
+      var _a2, _b;
+      event.stopPropagation();
+      const el = collapseRef.current;
+      if (!el) return;
+      const open = isCollapsed;
+      (_a2 = el.getAnimations) == null ? void 0 : _a2.call(el).forEach((a) => a.cancel());
+      el.style.overflow = "hidden";
+      el.style.display = "block";
+      const h = `${el.scrollHeight}px`;
+      el.style.height = open ? "0" : h;
+      timersRef.current.forEach(clearTimeout);
+      const finalize = () => {
+        animation == null ? void 0 : animation.cancel();
+        Object.assign(el.style, { display: open ? "block" : "none", height: "", overflow: "" });
+      };
+      const animation = (_b = el.animate) == null ? void 0 : _b.call(el, [{ height: open ? "0" : h }, { height: open ? h : "0" }], {
+        duration: 400,
+        fill: "forwards"
+      });
+      if (animation) {
+        animation.onfinish = finalize;
+      } else {
+        timersRef.current[0] = setTimeout(finalize, 400);
+      }
+      open ? setIsCollapsed(false) : timersRef.current[1] = setTimeout(() => setIsCollapsed(true), 500);
     };
     return /* @__PURE__ */ jsx(
       Box,
@@ -114,11 +141,9 @@ const WmNavbar = memo(
           /* @__PURE__ */ jsx(
             Box,
             {
+              ref: collapseRef,
               component: "div",
-              className: clsx("navbar-collapse", {
-                collapse: isCollapsed,
-                in: !isCollapsed
-              }),
+              className: clsx("navbar-collapse collapse", { in: !isCollapsed }),
               children
             }
           )

package/components/navbar/nav-item/index.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -22,6 +22,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

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

@@ -39,6 +39,7 @@ declare const _default: React.ComponentType<{
     datavalue?: any;
     width?: string | number;
     height?: string | number;
+    class?: string;
     onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
     onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
     onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;

package/components/navigation/menu/index.js

@@ -314,7 +314,8 @@ const WmMenu = memo((props) => {
         link: (node == null ? void 0 : node[itemlink]) || dataObject[itemlink] || dataObject["link"],
         hint: (node == null ? void 0 : node[hint]) || dataObject[hint],
         disabled: (node == null ? void 0 : node.disabled) || dataObject.disabled,
-        children: children2
+        children: children2,
+        itemClass: (node == null ? void 0 : node.class) || dataObject["class"]
       };
     },
     [itemlabel, itemicon, itemlink, hint, itemchildren]
@@ -331,23 +332,25 @@ const WmMenu = memo((props) => {
     [menualign]
   );
   const getMenuLayoutStyles = useCallback(() => {
+    const positionStyles = {
+      inset: "100% auto auto 0px",
+      transform: "translateY(0px)"
+    };
     switch (menulayout) {
       case LAYOUT.HORIZONTAL:
-        return {
+        return __spreadProps(__spreadValues({}, positionStyles), {
           display: "flex",
           flexDirection: "row"
-        };
+        });
       case LAYOUT.GRID:
-        return {
+        return __spreadProps(__spreadValues({}, positionStyles), {
           display: "grid",
           gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
           gap: "8px"
-        };
+        });
       case LAYOUT.VERTICAL:
       default:
-        return {
-          display: "block"
-        };
+        return __spreadValues({}, positionStyles);
     }
   }, [menulayout]);
   const handleMenuClick = useCallback(
@@ -636,7 +639,7 @@ const WmMenu = memo((props) => {
       if (!nodes || !Array.isArray(nodes)) return null;
       return nodes.map((node, index) => {
         var _a2;
-        const { label, icon, link, hint: hint2, disabled, children: children2 } = getNodeProperties(node);
+        const { label, icon, link, hint: hint2, disabled, children: children2, itemClass } = getNodeProperties(node);
         const itemPath = pathPrefix ? `${pathPrefix}-${index}` : `${index}`;
         const nodeValueLink = (_a2 = node == null ? void 0 : node.value) == null ? void 0 : _a2.link;
         const isActive = nodeValueLink && typeof nodeValueLink === "string" ? isPathMatchingLink(path, nodeValueLink) : link ? isPathMatchingLink(path, link) : false;
@@ -659,6 +662,7 @@ const WmMenu = memo((props) => {
             className: clsx(
               children2 && children2.length > 0 && "dropdown-submenu",
               "app-menu-item",
+              itemClass,
               {
                 active: isActive,
                 hovered: isHovered
@@ -740,10 +744,13 @@ const WmMenu = memo((props) => {
     ]
   );
   useEffect(() => {
+    if (props.hidden) {
+      setOpen(false);
+    }
     if (!open) return;
     setActiveItem(null);
     setFocusedIndex(-1);
-  }, [open]);
+  }, [open, props.hidden]);
   useEffect(() => {
     if (autoopen === AUTO_OPEN.ALWAYS) {
       setOpen(true);
@@ -990,7 +997,8 @@ const WmMenu = memo((props) => {
       onKeyDown: handleKeyDown,
       role: "menu",
       "aria-label": arialabel || "Menu",
-      "aria-expanded": open
+      "aria-expanded": open,
+      hidden: props.hidden
     }), { type, name }), {
       children: [
         /* @__PURE__ */ jsx(Tooltip, { title: hint || "", enterDelay: TOOLTIP_ENTER_DELAY, disableHoverListener: !hint, children: type === "anchor" ? /* @__PURE__ */ jsxs(

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

@@ -56,6 +56,7 @@ export interface MenuNode {
     nodeRef?: React.RefObject<HTMLDivElement | null>;
     dataObject?: any;
     isactive?: boolean;
+    class?: string;
 }
 export interface WmMenuExtendedProps extends Omit<WmMenuProps, "name"> {
     styles?: React.CSSProperties;

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

@@ -54,6 +54,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/navigation/popover/index.js

@@ -32,6 +32,7 @@ import debounce from "lodash-es/debounce";
 import Popover from "@mui/material/Popover";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import { WmAnchor } from "../../basic/anchor";
+import { PopoverContext } from "../../../context/PopoverContext";
 import { DEFAULT_PROPS } from "./props";
 const WmPopover = (Props) => {
   var _a, _b, _c;
@@ -44,6 +45,7 @@ const WmPopover = (Props) => {
   const popoverActionsRef = useRef(null);
   const loadedRef = useRef(false);
   const [open, setOpen] = useState(false);
+  const [keepContentMounted, setKeepContentMounted] = useState(false);
   const isOpen = Boolean(anchorEl);
   const openPopover = useCallback(() => {
     var _a2;
@@ -64,6 +66,16 @@ const WmPopover = (Props) => {
     setIsDialogOpen(false);
     (_a2 = props == null ? void 0 : props.onHide) == null ? void 0 : _a2.call(props, {}, __spreadValues({ isOpen: false }, props));
   }, [isOpen]);
+  const popoverContext = useMemo(
+    () => ({
+      closeForDialog: () => {
+        setKeepContentMounted(true);
+        closePopover();
+      },
+      onDialogClose: () => setKeepContentMounted(false)
+    }),
+    [closePopover]
+  );
   const togglePopover = useCallback(() => {
     if (isOpen) {
       closePopover();
@@ -260,7 +272,7 @@ const WmPopover = (Props) => {
         )
       })
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(PopoverContext.Provider, { value: popoverContext, children: /* @__PURE__ */ jsxs(
       Popover,
       {
         action: popoverActionsRef,
@@ -274,6 +286,7 @@ const WmPopover = (Props) => {
           enter: 0,
           exit: 0
         },
+        keepMounted: keepContentMounted,
         disableScrollLock: true,
         disableAutoFocus: true,
         disableEnforceFocus: true,
@@ -288,7 +301,6 @@ const WmPopover = (Props) => {
             },
             className: clsx(
               placement,
-              props.className,
               "app-popover in popover",
               props.contentanimation && `animated ${props.contentanimation}`,
               `popover-${placement}`,
@@ -309,7 +321,7 @@ const WmPopover = (Props) => {
           /* @__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 })
         ]
       }
-    )
+    ) })
   ] });
 };
 var popover_default = withBaseWrapper(WmPopover);

package/components/page/index.js

@@ -50,12 +50,58 @@ function WmPage(props) {
   }));
   const [hasFullNavHeight, setHasFullNavHeight] = useState(false);
   const [leftPanelPageClasses, setLeftPanelPageClasses] = useState();
+  const [hasLeftPanel, setHasLeftPanel] = useState(false);
+  const [leftPanelExpanded, setLeftPanelExpanded] = useState(false);
   const handleNavHeightChange = useCallback((isFull) => {
     setHasFullNavHeight(isFull);
   }, []);
   const handleLeftPanelPageClassesChange = useCallback((pageClasses) => {
     setLeftPanelPageClasses(pageClasses);
   }, []);
+  const handleLeftPanelPresenceChange = useCallback((present) => {
+    setHasLeftPanel(present);
+    if (!present) {
+      setLeftPanelExpanded(false);
+    }
+  }, []);
+  const toggleLeftPanel = useCallback(() => {
+    setLeftPanelExpanded((expanded) => !expanded);
+  }, []);
+  const handlePageClick = useCallback(
+    (event) => {
+      if (!leftPanelExpanded) {
+        return;
+      }
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      if (target.closest(".app-left-panel")) {
+        return;
+      }
+      if (target.closest("[data-role='page-left-panel-icon']")) {
+        return;
+      }
+      setLeftPanelExpanded(false);
+    },
+    [leftPanelExpanded]
+  );
+  const pageLayoutContextValue = useMemo(
+    () => ({
+      onLeftPanelPageClassesChange: handleLeftPanelPageClassesChange,
+      onLeftPanelPresenceChange: handleLeftPanelPresenceChange,
+      hasLeftPanel,
+      leftPanelExpanded,
+      toggleLeftPanel
+    }),
+    [
+      handleLeftPanelPageClassesChange,
+      handleLeftPanelPresenceChange,
+      hasLeftPanel,
+      leftPanelExpanded,
+      toggleLeftPanel
+    ]
+  );
   const handleResize = useCallback(() => {
     const newSize = {
       width: window.innerWidth,
@@ -122,25 +168,20 @@ function WmPage(props) {
       return child;
     });
   }, [children, handleNavHeightChange]);
-  return /* @__PURE__ */ jsx(
-    PageLayoutContext.Provider,
-    {
-      value: { onLeftPanelPageClassesChange: handleLeftPanelPageClassesChange },
-      children: /* @__PURE__ */ jsx(
-        Container,
-        __spreadProps(__spreadValues({}, removeInvalidAttributes(restProps)), {
-          className: clsx(
-            getDefaultClass(pageName),
-            { "app-nav-full": hasFullNavHeight },
-            leftPanelPageClasses,
-            className
-          ),
-          sx: __spreadValues({}, styles),
-          children: childrenWithCallback
-        })
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx(PageLayoutContext.Provider, { value: pageLayoutContextValue, children: /* @__PURE__ */ jsx(
+    Container,
+    __spreadProps(__spreadValues({}, removeInvalidAttributes(restProps)), {
+      onClick: handlePageClick,
+      className: clsx(
+        getDefaultClass(pageName),
+        { "app-nav-full": hasFullNavHeight },
+        leftPanelPageClasses,
+        className
+      ),
+      sx: __spreadValues({}, styles),
+      children: childrenWithCallback
+    })
+  ) });
 }
 WmPage.displayName = "WmPage";
 var page_default = WmPage;

package/components/page/page-context.d.ts

@@ -1,4 +1,8 @@
 export interface PageLayoutContextValue {
     onLeftPanelPageClassesChange?: (pageClasses?: string) => void;
+    onLeftPanelPresenceChange?: (present: boolean) => void;
+    hasLeftPanel?: boolean;
+    leftPanelExpanded?: boolean;
+    toggleLeftPanel?: () => void;
 }
 export declare const PageLayoutContext: import("react").Context<PageLayoutContextValue>;

package/components/page/partial/index.d.ts

@@ -17,6 +17,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/context/PopoverContext.d.ts

@@ -0,0 +1,5 @@
+export interface PopoverContextValue {
+    closeForDialog: () => void;
+    onDialogClose: () => void;
+}
+export declare const PopoverContext: import("react").Context<PopoverContextValue>;

package/context/PopoverContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const PopoverContext = createContext(null);
+export {
+  PopoverContext
+};

package/context/WidgetProvider.js

@@ -35,6 +35,7 @@ import { HttpProvider } from "../hooks/useHttp";
 import { removeWidgetsFromContext } from "../utils/widget-cleanup-util";
 import { EVENTEMITTER_METHODS } from "../core/constants/events";
 import { createWidgetProxy } from "../core/proxy-service";
+import { isPrefabScope, publishPartialNamespaces } from "../utils/partial-host-util";
 import { useLayout } from "./LayoutProvider";
 import isPlainObject from "lodash-es/isPlainObject";
 const WidgetContext = createContext(void 0);
@@ -176,8 +177,14 @@ const WidgetProvider = ({
       var _a2;
       if (!data.pageContext) return;
       if ((_a2 = data.pageContext) == null ? void 0 : _a2.isLayout) return;
-      proxy.Widgets[data.partialName] = data.proxy;
-      if (isAppWidgetRegisterNeeded) proxy.App.Widgets[data.partialName] = data.proxy;
+      const registerHost = (widgets) => {
+        if (!widgets) return;
+        if (isPrefabScope(data.pageContext) || !publishPartialNamespaces(widgets[data.partialName], data.proxy)) {
+          widgets[data.partialName] = data.proxy;
+        }
+      };
+      registerHost(proxy.Widgets);
+      if (isAppWidgetRegisterNeeded) registerHost(proxy.App.Widgets);
     };
     EVENTEMITTER_METHODS.PARTIAL_STATE_SYNC_ON(handlePartialStateSync);
     return () => {

package/core/proxy-service.d.ts

@@ -3,6 +3,8 @@ import { OverriddenPropsRegistry } from "@wavemaker-ai/react-runtime/core/script
 import BaseAppProps from "../higherOrder/BaseAppProps";
 import { FormFieldProps } from "../components/data/form/form-field/props";
 import type { UseFormSetValue } from "react-hook-form";
+/** True when `value` is a built-in that breaks if wrapped in a reactivity Proxy. */
+export declare const isNonProxyableBuiltin: (value: object) => boolean;
 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;