@wavemaker-ai/react-runtime 1.0.0-rc.314 → 1.0.0-rc.319

package/components/input/text/index.js

@@ -289,6 +289,7 @@ const WmText = memo(
       }
     };
     const handleBlur = (e) => {
+      var _a;
       if (readonly || disabled) {
         return;
       }
@@ -306,14 +307,16 @@ const WmText = memo(
         setIsTouched(true);
         setIsDirty(true);
       }
-      onBlur == null ? void 0 : onBlur(e, listener == null ? void 0 : listener.Widgets[name]);
+      onBlur == null ? void 0 : onBlur(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
     };
     const handleFocus = (e) => {
-      onFocus == null ? void 0 : onFocus(e, listener == null ? void 0 : listener.Widgets[name]);
+      var _a;
+      onFocus == null ? void 0 : onFocus(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
     };
     const handleKeyDown = (e) => {
       delay(() => {
-        onKeydown == null ? void 0 : onKeydown(e, listener == null ? void 0 : listener.Widgets[name]);
+        var _a;
+        onKeydown == null ? void 0 : onKeydown(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
         if (e.key === "Enter") {
           debouncedUpdateValue(rawValue);
         }
@@ -321,24 +324,29 @@ const WmText = memo(
     };
     const handleKeyPress = (e) => {
       delay(() => {
-        onKeypress == null ? void 0 : onKeypress(e, listener == null ? void 0 : listener.Widgets[name]);
+        var _a;
+        onKeypress == null ? void 0 : onKeypress(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
       }, 0);
     };
     const handleKeyUp = (e) => {
       delay(() => {
-        onKeyup == null ? void 0 : onKeyup(e, listener == null ? void 0 : listener.Widgets[name]);
+        var _a;
+        onKeyup == null ? void 0 : onKeyup(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
       }, 0);
     };
     const handleLeadingIconClick = (e) => {
+      var _a;
       e.preventDefault();
-      onLeadingiconclick == null ? void 0 : onLeadingiconclick(e, listener == null ? void 0 : listener.Widgets[name]);
+      onLeadingiconclick == null ? void 0 : onLeadingiconclick(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
     };
     const handleTrailingIconClick = (e) => {
+      var _a;
       e.preventDefault();
-      onTrailingiconclick == null ? void 0 : onTrailingiconclick(e, listener == null ? void 0 : listener.Widgets[name]);
+      onTrailingiconclick == null ? void 0 : onTrailingiconclick(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
     };
     const handleMouseEnter = (e) => {
-      onMouseEnter == null ? void 0 : onMouseEnter(e, listener == null ? void 0 : listener.Widgets[name]);
+      var _a;
+      onMouseEnter == null ? void 0 : onMouseEnter(e, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
       setIsTouched(true);
     };
     const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({

package/components/input/textarea/index.d.ts

@@ -63,6 +63,8 @@ declare const WmTextareaStandalone: React.ComponentType<import("../../data/form/
     formfield?: boolean;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmTextareaStandalone as WmTextarea };
 /**
@@ -147,5 +149,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/input/upload/index.d.ts

@@ -58,6 +58,8 @@ declare const WithForm: React.NamedExoticComponent<import("../../data/form/form-
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 /**
  * The WmUpload component provides a file upload input for form fields with blob support.
@@ -138,5 +140,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/input/upload/index.js

@@ -45,7 +45,7 @@ const WmUpload = memo(
     const prevDatavalue = useRef(datavalue);
     const isImage = (formField == null ? void 0 : formField.filetype) === "image";
     const handleFileChange = (event) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const file = ((_a = event.target.files) == null ? void 0 : _a[0]) || null;
       if (type === "file") {
         (_b = listener == null ? void 0 : listener.onChange) == null ? void 0 : _b.call(listener, props.fieldName || props.name, {
@@ -59,7 +59,7 @@ const WmUpload = memo(
       if (onChange) {
         onChange(
           event,
-          listener == null ? void 0 : listener.Widgets[name],
+          (_d = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _d[name],
           type === "file" ? file : event.target.value,
           prevDatavalue.current
         );
@@ -67,13 +67,15 @@ const WmUpload = memo(
       prevDatavalue.current = file;
     };
     const handleFileFocus = (event) => {
+      var _a;
       if (onFocus) {
-        onFocus(event, listener == null ? void 0 : listener.Widgets[name]);
+        onFocus(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
       }
     };
     const handleFileBlur = (event) => {
+      var _a;
       if (onBlur) {
-        onBlur(event, listener == null ? void 0 : listener.Widgets[name]);
+        onBlur(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
       }
     };
     const renderExistingFile = useCallback(() => {

package/components/layout/leftnav/index.js

@@ -1,18 +1,24 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
+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 SLIDE_IN = "slide-in";
 const WmLeftPanel = (props) => {
+  const { onLeftPanelPageClassesChange } = useContext(PageLayoutContext);
   const {
     styles,
     children,
     render,
     className,
     columnwidth = 2,
+    xscolumnwidth = 10,
     id,
     navtype,
     navheight,
+    animation = SLIDE_IN,
     onNavHeightChange
   } = props;
   useEffect(() => {
@@ -25,6 +31,18 @@ const WmLeftPanel = (props) => {
       }
     };
   }, [navheight, onNavHeightChange]);
+  useEffect(() => {
+    onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(
+      getLeftPanelPageClasses({
+        animation,
+        columnwidth,
+        xscolumnwidth
+      })
+    );
+    return () => {
+      onLeftPanelPageClassesChange == null ? void 0 : onLeftPanelPageClassesChange(void 0);
+    };
+  }, [animation, columnwidth, xscolumnwidth]);
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -34,7 +52,8 @@ const WmLeftPanel = (props) => {
       className: clsx(
         DEFAULT_CLASS,
         className,
-        `col-sm-${columnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
+        animation,
+        `col-md-${columnwidth} col-sm-${columnwidth} col-xs-${xscolumnwidth} ${navtype ? `app-nav-${navtype}` : ""} ${navheight ? `app-nav-${navheight}` : ""}`
       ),
       children: render ? render(props) : children
     }

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

@@ -1,9 +1,18 @@
 export interface LeftNavProps {
+    /**
+     * The animation mode used by the left panel.
+     */
+    animation?: string;
     /**
      * The number of columns the left panel should span.
      * @default 2
      */
     columnwidth?: number | string;
+    /**
+     * The number of columns the left panel should span on extra-small screens.
+     * @default 10
+     */
+    xscolumnwidth?: number | string;
     /**
      * The height of the navigation panel.
      */

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

@@ -0,0 +1,9 @@
+export type LeftPanelPageLayout = {
+    animation?: string;
+    columnwidth?: number | string;
+    xscolumnwidth?: number | string;
+};
+/**
+ * (slide-in-left-panel-container, left-panel-container-*-*, etc.).
+ */
+export declare const getLeftPanelPageClasses: (layout: LeftPanelPageLayout) => string;

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

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+const SLIDE_IN = "slide-in";
+const SLIDE_OVER = "slide-over";
+const getPageWidthClass = (device, panelWidth) => {
+  const width = Number(panelWidth);
+  if (!Number.isFinite(width)) {
+    return "";
+  }
+  return `left-panel-container-${device}-${12 - width}`;
+};
+const getLeftPanelPageClasses = (layout) => {
+  if (layout.animation === SLIDE_IN) {
+    return clsx(
+      "left-panel-collapsed-container",
+      "slide-in-left-panel-container",
+      getPageWidthClass("md", layout.columnwidth),
+      getPageWidthClass("sm", layout.columnwidth),
+      getPageWidthClass("xs", layout.xscolumnwidth)
+    );
+  }
+  if (layout.animation === SLIDE_OVER) {
+    return clsx("left-panel-collapsed-container", "slide-over-left-panel-container");
+  }
+  return "left-panel-collapsed-container";
+};
+export {
+  getLeftPanelPageClasses
+};

package/components/navbar/index.d.ts

@@ -63,6 +63,8 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
     title?: string;
     brandHref?: string;
     showToggle?: boolean;

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

@@ -86,5 +86,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>>;
 export default _default;

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

@@ -59,5 +59,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>>;
 export default _default;

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

@@ -62,5 +62,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -31,6 +31,7 @@ declare const _default: React.ComponentType<{
     type?: "button" | "anchor";
     prefabName?: string;
     key?: string;
+    loading?: boolean;
     id?: string;
     caption?: string;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
@@ -73,6 +74,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     dataset?: any;
+    showSkeleton?: boolean;
     orderby?: string;
     iconclass?: string;
     onSelect?: ($event: React.MouseEvent<HTMLElement>, widget: any, $item: any) => void;

package/components/navigation/menu/index.js

@@ -366,7 +366,7 @@ const WmMenu = memo((props) => {
   );
   const handleMenuItemClick = useCallback(
     (event, item) => {
-      var _a2, _b2, _c2, _d, _e;
+      var _a2, _b2, _c2, _d, _e, _f;
       event = event.nativeEvent;
       const { label, icon, link } = getNodeProperties(item);
       if (item.children && item.children.length > 0 || !link || link === "#") {
@@ -396,7 +396,7 @@ const WmMenu = memo((props) => {
       if (isFromNav && onNavItemActivate) {
         onNavItemActivate();
       }
-      if (name && (listener == null ? void 0 : listener.Widgets[name])) {
+      if (name && ((_f = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _f[name])) {
         listener.Widgets[name].displayValue = label;
       }
       if (listener == null ? void 0 : listener.onChange) {

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

@@ -93,5 +93,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/navigation/popover/index.js

@@ -266,6 +266,7 @@ const WmPopover = (Props) => {
             },
             className: clsx(
               placement,
+              props.className,
               "app-popover in popover",
               props.contentanimation && `animated ${props.contentanimation}`,
               `popover-${placement}`,

package/components/page/index.js

@@ -36,6 +36,7 @@ import clsx from "clsx";
 import Container from "@mui/material/Container";
 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");
 function WmPage(props) {
@@ -48,9 +49,13 @@ function WmPage(props) {
     height: window.innerHeight
   }));
   const [hasFullNavHeight, setHasFullNavHeight] = useState(false);
+  const [leftPanelPageClasses, setLeftPanelPageClasses] = useState();
   const handleNavHeightChange = useCallback((isFull) => {
     setHasFullNavHeight(isFull);
   }, []);
+  const handleLeftPanelPageClassesChange = useCallback((pageClasses) => {
+    setLeftPanelPageClasses(pageClasses);
+  }, []);
   const handleResize = useCallback(() => {
     const newSize = {
       width: window.innerWidth,
@@ -118,12 +123,23 @@ function WmPage(props) {
     });
   }, [children, handleNavHeightChange]);
   return /* @__PURE__ */ jsx(
-    Container,
-    __spreadProps(__spreadValues({}, removeInvalidAttributes(restProps)), {
-      className: clsx(getDefaultClass(pageName), { "app-nav-full": hasFullNavHeight }, className),
-      sx: __spreadValues({}, styles),
-      children: childrenWithCallback
-    })
+    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
+        })
+      )
+    }
   );
 }
 WmPage.displayName = "WmPage";

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

@@ -0,0 +1,4 @@
+export interface PageLayoutContextValue {
+    onLeftPanelPageClassesChange?: (pageClasses?: string) => void;
+}
+export declare const PageLayoutContext: import("react").Context<PageLayoutContextValue>;

package/components/page/page-context.js

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

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

@@ -57,5 +57,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -44,13 +44,10 @@ const MEMO_KEYS = [
   "params"
 ];
 const arePropsEqual = (prevProps, nextProps) => {
-  const staticEqual = MEMO_KEYS.every((key) => {
+  return MEMO_KEYS.every((key) => {
     if (key === "styles") return isEqual(prevProps[key], nextProps[key]);
     return prevProps[key] === nextProps[key];
   });
-  if (!staticEqual) return false;
-  const paramNames = nextProps.params || [];
-  return paramNames.every((p) => prevProps[p] === nextProps[p]);
 };
 const CodegenPartialContainer = memo((props) => {
   const { prefab, content, prefabName, onLoad } = props;

package/context/AppContext.d.ts

@@ -6,4 +6,6 @@ interface AppProviderProps {
 declare const AppContext: import("react").Context<AppProviderProps>;
 export declare const useAppContext: () => BaseAppProps;
 export declare const useAppProxy: () => any;
+export declare const useAppNotificationAction: () => any;
+export declare const useNotifyApp: () => any;
 export default AppContext;

package/context/AppContext.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import get from "lodash-es/get";
 const AppContext = createContext(void 0);
 const useAppContext = () => {
   var _a;
@@ -16,9 +17,27 @@ const useAppProxy = () => {
   }
   return context;
 };
+const useAppNotificationAction = () => {
+  var _a;
+  const context = (_a = useContext(AppContext)) == null ? void 0 : _a.proxy;
+  if (context === void 0) {
+    throw new Error("useNotificationAction must be used within an AppProvider");
+  }
+  return get(context, "Actions.appNotification", null);
+};
+const useNotifyApp = () => {
+  var _a;
+  const context = (_a = useContext(AppContext)) == null ? void 0 : _a.proxy;
+  if (context === void 0) {
+    throw new Error("useNotifyApp must be used within an AppProvider");
+  }
+  return context.notifyApp;
+};
 var AppContext_default = AppContext;
 export {
   AppContext_default as default,
   useAppContext,
-  useAppProxy
+  useAppNotificationAction,
+  useAppProxy,
+  useNotifyApp
 };

package/context/WidgetProvider.js

@@ -32,7 +32,6 @@ import get from "lodash-es/get";
 import debounce from "lodash-es/debounce";
 import { useDebounceCallback } from "../hooks/useDebounce";
 import { HttpProvider } from "../hooks/useHttp";
-import { registerFormField, registerFormFieldSafe } from "../utils/form-state.util";
 import { removeWidgetsFromContext } from "../utils/widget-cleanup-util";
 import { EVENTEMITTER_METHODS } from "../core/constants/events";
 import { createWidgetProxy } from "../core/proxy-service";
@@ -100,7 +99,6 @@ const WidgetProvider = ({
               setPageContext,
               registry
             );
-            registerFormField(newContext.Widgets, widgetProxy, incomingWidget, newContext);
             registerMethod(newContext, widgetProxy, widgetName);
           }
         });
@@ -159,7 +157,6 @@ const WidgetProvider = ({
           pageContext.App.Widgets[widgetName] = props;
         }
       }
-      registerFormFieldSafe(pageContext.Widgets, props);
     };
   }, [isAppWidgetRegisterNeeded]);
   const debouncedEmitRef = useRef(

package/core/proxy-service.d.ts

@@ -1,6 +1,8 @@
 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 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;

package/core/proxy-service.js

@@ -500,7 +500,32 @@ const createStateProxy = (obj, path = [], setPageContext, overriddenPropsRegistr
     }
   });
 };
+const createFormFieldProxy = (formField, setState, overriddenItemsRef, formProxy) => {
+  const fieldProxy = new Proxy(formField, {
+    get: (target, prop) => {
+      return target[prop];
+    },
+    set: (target, prop, value) => {
+      target[prop] = value;
+      overriddenItemsRef.current[prop] = value;
+      setState(__spreadValues({}, target));
+      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;
+  return fieldProxy;
+};
 export {
+  createFormFieldProxy,
   createPageProxy,
   createStateProxy,
   createWidgetProxy

package/higherOrder/BaseApp.js

@@ -44,6 +44,7 @@ import { metadataService } from "../variables/metadata.service";
 import { i18nService as i18nServiceActions } from "../store/bindActions/i18nActions";
 import { WmContainer } from "../components/container";
 import WmPartialContainer from "../components/page/partial-container";
+import RoleAuthGuard from "../components/auth/RoleAuthGuard";
 (_a = global.wm) != null ? _a : global.wm = {};
 const BaseApp = (WrappedComponent, addAppScript, getAppVariables, appInfo = {}) => {
   const AppContextComponent = (props) => {
@@ -340,7 +341,7 @@ const BaseApp = (WrappedComponent, addAppScript, getAppVariables, appInfo = {})
       );
     }
     function notifyApp(message, type, showTypeLabel) {
-      const notificationAction = get(appContext, "Actions.appNotification");
+      const notificationAction = get(appProxyRef.current, "Actions.appNotification");
       if (notificationAction) {
         const appNotification = notificationAction.config.paramProvider();
         const newParams = () => ({
@@ -372,9 +373,6 @@ const BaseApp = (WrappedComponent, addAppScript, getAppVariables, appInfo = {})
           renderPartial: (props2, onLoad) => /* @__PURE__ */ jsx(
             WmPartialContainer,
             {
-              onRender: (commonComponent) => {
-                appProxyRef.current.Common = commonComponent;
-              },
               onLoad,
               "data-widget-id": "common-partial-container",
               content: props2.content,
@@ -412,6 +410,7 @@ const BaseApp = (WrappedComponent, addAppScript, getAppVariables, appInfo = {})
       wmSetDependency("metadata", metadataService);
       wmSetDependency("appManager", {
         notify,
+        notifyApp,
         pushToSessionFailureRequests,
         executeSessionFailureRequests,
         handle401
@@ -424,10 +423,10 @@ const BaseApp = (WrappedComponent, addAppScript, getAppVariables, appInfo = {})
           state: appContext,
           proxy: appProxyRef.current
         },
-        children: /* @__PURE__ */ jsx(AppSpinnerProvider, { children: /* @__PURE__ */ jsxs(LayoutProvider, { children: [
+        children: /* @__PURE__ */ jsx(AppSpinnerProvider, { children: /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsxs(RoleAuthGuard, { children: [
           /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props)),
           renderCommonComponents()
-        ] }) })
+        ] }) }) })
       }
     );
   };

package/higherOrder/BaseAppProps.d.ts

@@ -33,5 +33,6 @@ export interface BaseAppProps {
     Widgets?: Record<string, ProxyTarget>;
     subscribe: (eventName: string, callback: Function) => () => void;
     autoUpdateVariables: string[];
+    appLocale?: Record<string, any>;
 }
 export default BaseAppProps;

package/higherOrder/BasePage.js

@@ -224,22 +224,12 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
       securityConfig
     ]);
     const shouldInitialize = useMemo(() => {
-      var _a2, _b2;
       if (appContext && !appContext.isAppReady) {
         return false;
       }
       if (accessLoading) {
         return false;
       }
-      if (!hasAccess && isSecurityEnabled) {
-        if (isAuthenticated) {
-          appContext == null ? void 0 : appContext.notifyApp(
-            ((_b2 = (_a2 = pageContext == null ? void 0 : pageContext.appLocale) == null ? void 0 : _a2.LABELS) == null ? void 0 : _b2.ACCESS_DENIED) || "Access Denied",
-            "Error"
-          );
-        }
-        return false;
-      }
       return true;
     }, [appContext == null ? void 0 : appContext.isAppReady, accessLoading, hasAccess, isSecurityEnabled, isAuthenticated]);
     useEffect(() => {
@@ -319,9 +309,11 @@ const withPageContext = (WrappedComponent, addPageScript, getVariables, componen
             appProxy.updateActivePage(pageName2);
             appProxy.activePage = pageProxy;
             appProxy.activePageName = pageName2;
-            Object.assign(appProxy.Widgets, pageProxy.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.assign(appProxy.Widgets, pageProxy.Widgets);
+            Object.keys(pageProxy.Widgets).forEach((key) => {
+              appProxy.Widgets[key] = pageProxy.Widgets[key];
+            });
           }
           addPageScript(appProxy, pageProxy);
           wrapWithThirdPartyErrorGuard(

package/higherOrder/props.d.ts

@@ -67,6 +67,16 @@ export interface Props {
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    /**
+     * When true, indicates that the widget's data is being loaded.
+     * Used together with `showSkeleton` to display a skeleton placeholder.
+     */
+    loading?: boolean;
+    /**
+     * Optional runtime opt-out for skeleton display while loading.
+     * Not emitted by codegen — omit (default) to show skeleton when `loading` is true.
+     */
+    showSkeleton?: boolean;
 }
 /**
  * Interface for props injected by the BaseDialog (withDialogWrapper) HOC.