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

package/components/advanced/carousel/index.d.ts

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

package/components/advanced/carousel/template.d.ts

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

package/components/advanced/login/index.d.ts

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

package/components/advanced/marquee/index.d.ts

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

package/components/auth/RoleAuthGuard.js

@@ -34,6 +34,7 @@ function RoleAuthGuard({ children }) {
   useEffect(() => {
     var _a, _b, _c;
     if (isSecurityEnabled === void 0) {
+      setHasAccess(true);
       return;
     }
     if (!isSecurityEnabled) {

package/components/basic/anchor/index.d.ts

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

package/components/basic/anchor/index.js

@@ -227,7 +227,7 @@ const WmAnchor = (props) => {
         ),
         iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", "wm-anchor-icon-media", iconclass), "aria-hidden": "true" }),
         caption && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: `${caption} ${(_b = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _b.LABEL_ICON}` }),
+          iconclass && /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: `${caption} ${(_b = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _b.LABEL_ICON}` }),
           /* @__PURE__ */ jsx(Box, { component: "span", className: "anchor-caption", children: caption })
         ] }),
         badgevalue && /* @__PURE__ */ jsx(

package/components/basic/audio/index.d.ts

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

package/components/basic/html/index.d.ts

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

package/components/basic/icon/index.d.ts

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

package/components/basic/iframe/index.d.ts

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

package/components/basic/label/index.d.ts

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

package/components/basic/label/index.js

@@ -36,6 +36,11 @@ import DOMPurify from "dompurify";
 import Box from "@mui/material/Box";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
 import { removeInvalidAttributes } from "../../../utils/attr";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 const DEFAULT_CLASS = "app-label";
 const containsHTML = (text) => {
   return /<[^>]*>/g.test(text);
@@ -71,7 +76,9 @@ const WmLabel = memo(
       onClick,
       listener,
       variant = "default:p",
-      viewParent
+      viewParent,
+      loading,
+      showSkeleton
     } = _a, rest = __objRest(_a, [
       "required",
       "trustAs",
@@ -85,8 +92,13 @@ const WmLabel = memo(
       "onClick",
       "listener",
       "variant",
-      "viewParent"
+      "viewParent",
+      "loading",
+      "showSkeleton"
     ]);
+    if (shouldShowSkeleton(loading, showSkeleton)) {
+      return /* @__PURE__ */ jsx(WmSkeleton, __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmLabel"]), { className, styles }));
+    }
     const hasCaptionProp = Object.prototype.hasOwnProperty.call(props, "caption");
     const safeCaption = hasCaptionProp ? caption : "Label";
     const captionString = (_c = typeof safeCaption === "string" ? safeCaption : (_b = JSON.stringify(safeCaption)) != null ? _b : "") == null ? void 0 : _c.replace(/&nbsp;|undefined|null/gi, " ");
@@ -154,7 +166,9 @@ const WmLabel = memo(
       "styles",
       "className",
       "hint",
-      "hidden"
+      "hidden",
+      "loading",
+      "showSkeleton"
     ];
     return keys.every((key) => prev[key] === current[key]);
   }

package/components/basic/picture/index.d.ts

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

package/components/basic/picture/index.js

@@ -33,6 +33,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
 import clsx from "clsx";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import { prefixPrefabResourceUrl } from "../../../utils/resource-url";
 import { removeInvalidAttributes } from "../../../utils/attr";
 const DEFAULT_CLASS = "app-picture";
@@ -118,6 +123,14 @@ const WmPicture = memo(
     const onMouseLeaveHandler = (event) => {
       onMouseLeave && onMouseLeave(event, props);
     };
+    if (shouldShowSkeleton(props.loading, props.showSkeleton))
+      return /* @__PURE__ */ jsx(
+        WmSkeleton,
+        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmPicture"]), {
+          className: props.className,
+          styles: props.styles
+        })
+      );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "img",
@@ -148,7 +161,13 @@ const WmPicture = memo(
     ] });
   },
   (prev, current) => {
-    const keysToCompare = ["picturesource", "imgSource", "show"];
+    const keysToCompare = [
+      "picturesource",
+      "imgSource",
+      "show",
+      "loading",
+      "showSkeleton"
+    ];
     return keysToCompare.every((key) => prev[key] === current[key]);
   }
 );

package/components/basic/progress-bar/index.d.ts

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

package/components/basic/progress-circle/index.d.ts

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

package/components/basic/progress-circle/index.js

@@ -65,11 +65,12 @@ const WmProgressCircle = (props) => {
     };
   }, [datavalue, minvalue, maxvalue, type, displayformat, props.strokeWidth, props.radius]);
   useEffect(() => {
+    var _a;
     if (listener && name) {
       listener.onChange(name, {
         percentagevalue: percentageValue
       });
-      onBeforerender == null ? void 0 : onBeforerender(listener, listener == null ? void 0 : listener.Widgets[name]);
+      onBeforerender == null ? void 0 : onBeforerender(listener, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
     }
   }, [percentageValue]);
   useEffect(() => {

package/components/basic/richtexteditor/index.d.ts

@@ -57,6 +57,8 @@ declare const WmRichTextEditorStandalone: React.ComponentType<import("../../data
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmRichTextEditorStandalone as WmRichtexteditor };
 /**
@@ -139,5 +141,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/basic/richtexteditor/index.js

@@ -50,6 +50,7 @@ const EditorPlaceholder = ({
   }
 );
 const WmRichTextEditorBase = (props) => {
+  var _a;
   const {
     name,
     className,
@@ -88,7 +89,7 @@ const WmRichTextEditorBase = (props) => {
   const lastValueRef = useRef(actualValue || "");
   const isMountedRef = useRef(true);
   const internalValueRef = useRef(actualValue || "");
-  const widgetInstance = listener == null ? void 0 : listener.Widgets[name || ""];
+  const widgetInstance = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name || ""];
   const editorOptions = useMemo(
     () => ({
       toolbar: true,
@@ -165,7 +166,7 @@ const WmRichTextEditorBase = (props) => {
   }, []);
   const handleEditorChange = useCallback(
     (newContent, isFromUser = true) => {
-      var _a, _b;
+      var _a2, _b;
       if (!isMountedRef.current || isInternalChange) {
         return;
       }
@@ -184,7 +185,7 @@ const WmRichTextEditorBase = (props) => {
             value: sanitizedContent,
             name
           },
-          currentTarget: (_b = (_a = editorRef.current) == null ? void 0 : _a.editor) == null ? void 0 : _b.workplace
+          currentTarget: (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.editor) == null ? void 0 : _b.workplace
         };
         onChange(syntheticEvent, widgetInstance, newContent, sanitizedContent);
       }
@@ -204,8 +205,8 @@ const WmRichTextEditorBase = (props) => {
   );
   const performEditorOperation = useCallback(
     (operation, value) => {
-      var _a;
-      if (!isEditorLoaded || !((_a = editorRef.current) == null ? void 0 : _a.editor)) {
+      var _a2;
+      if (!isEditorLoaded || !((_a2 = editorRef.current) == null ? void 0 : _a2.editor)) {
         setOperationStack((prev) => [...prev, { type: operation, value }]);
         return;
       }
@@ -270,13 +271,13 @@ const WmRichTextEditorBase = (props) => {
     [isEditorLoaded, sanitizeHtml]
   );
   useEffect(() => {
-    var _a, _b;
+    var _a2, _b;
     if (onBeforerender) {
       const syntheticEvent = {
         target: {
           value: ""
         },
-        currentTarget: (_b = (_a = editorRef.current) == null ? void 0 : _a.editor) == null ? void 0 : _b.workplace
+        currentTarget: (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.editor) == null ? void 0 : _b.workplace
       };
       onBeforerender(syntheticEvent, widgetInstance);
     }
@@ -284,7 +285,7 @@ const WmRichTextEditorBase = (props) => {
   const debouncedHandleOnChange = useMemo(
     () => lodash.debounce(
       (newContent) => {
-        var _a, _b;
+        var _a2, _b;
         const sanitizedContent = sanitizeHtml(newContent);
         const tempDiv = document.createElement("div");
         tempDiv.innerHTML = newContent;
@@ -302,7 +303,7 @@ const WmRichTextEditorBase = (props) => {
                 value: new_text_content,
                 name
               },
-              currentTarget: (_b = (_a = editorRef.current) == null ? void 0 : _a.editor) == null ? void 0 : _b.workplace
+              currentTarget: (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.editor) == null ? void 0 : _b.workplace
             };
             onChange(syntheticEvent, widgetInstance, new_text_content, old_text_context);
           }
@@ -325,9 +326,9 @@ const WmRichTextEditorBase = (props) => {
     };
   }, [debouncedHandleOnChange]);
   const handleEditorInit = useCallback(() => {
-    var _a;
+    var _a2;
     setIsEditorLoaded(true);
-    if ((_a = editorRef.current) == null ? void 0 : _a.editor) {
+    if ((_a2 = editorRef.current) == null ? void 0 : _a2.editor) {
       if (content !== void 0 && content !== null) {
         editorRef.current.editor.value = content == null ? void 0 : content.toString();
       }
@@ -483,8 +484,8 @@ const WmRichTextEditorBase = (props) => {
     }
   }, [datavalue]);
   useEffect(() => {
-    var _a;
-    if (((_a = editorRef.current) == null ? void 0 : _a.editor) && isEditorLoaded) {
+    var _a2;
+    if (((_a2 = editorRef.current) == null ? void 0 : _a2.editor) && isEditorLoaded) {
       if (readonly || disabled) {
         performEditorOperation("disable");
       } else {
@@ -505,9 +506,9 @@ const WmRichTextEditorBase = (props) => {
   useEffect(() => {
     isMountedRef.current = true;
     return () => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       isMountedRef.current = false;
-      if ((_a = editorRef.current) == null ? void 0 : _a.editor) {
+      if ((_a2 = editorRef.current) == null ? void 0 : _a2.editor) {
         try {
           (_c = (_b = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _b.editor) == null ? void 0 : _c.destruct();
         } catch (error) {

package/components/basic/search/index.d.ts

@@ -112,6 +112,8 @@ declare const WmSearchStandalone: React.ComponentType<import("../../data/form/fo
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }, "ref"> & React.RefAttributes<any> & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmSearchStandalone as WmSearch };
 /**
@@ -174,5 +176,7 @@ declare const _default: React.NamedExoticComponent<import("../../data/form/form-
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/basic/spinner/index.d.ts

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

package/components/basic/tile/index.d.ts

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

package/components/basic/tree/index.d.ts

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

package/components/basic/video/index.d.ts

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

package/components/chart/index.d.ts

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

package/components/common/index.d.ts

@@ -1 +1,3 @@
 export { AppSpinner } from "./AppSpinner";
+export { WmSkeleton, SKELETON_REGISTRY, shouldShowSkeleton } from "./wm-skeleton";
+export type { WmSkeletonProps, SkeletonConfig } from "./wm-skeleton";

package/components/common/index.js

@@ -1,4 +1,8 @@
 import { AppSpinner } from "./AppSpinner";
+import { WmSkeleton, SKELETON_REGISTRY, shouldShowSkeleton } from "./wm-skeleton";
 export {
-  AppSpinner
+  AppSpinner,
+  SKELETON_REGISTRY,
+  WmSkeleton,
+  shouldShowSkeleton
 };

package/components/common/wm-skeleton.d.ts

@@ -0,0 +1,95 @@
+import { CSSProperties } from "react";
+import { SkeletonProps } from "@mui/material/Skeleton";
+export type SkeletonLayout = "table" | "list" | "form" | "tabs" | "wizard" | "accordion";
+export interface WmSkeletonProps {
+    /** Selects a multi-element layout. Omit to render a single MUI `Skeleton`. */
+    type?: SkeletonLayout;
+    /** MUI Skeleton variant — only used when `type` is omitted. @default "rectangular" */
+    variant?: SkeletonProps["variant"];
+    width?: number | string;
+    height?: number | string;
+    /** @default "pulse" */
+    animation?: SkeletonProps["animation"];
+    /** Row count for `table`/`list` (default 5), tab/step/pane count for `tabs`/`wizard`/`accordion` (default 4), or field count for `form` (default 4). */
+    rows?: number;
+    /** Column count for `type="table"` (default 4) or content line count for `tabs`/`wizard`/`accordion` (default 3). */
+    columns?: number;
+    className?: string;
+    styles?: CSSProperties;
+}
+export type SkeletonConfig = Pick<WmSkeletonProps, "type" | "variant" | "width" | "height" | "animation" | "rows" | "columns">;
+/** Default row/column counts per layout type — single source of truth. */
+export declare const LAYOUT_DEFAULTS: {
+    table: {
+        rows: number;
+        columns: number;
+    };
+    list: {
+        rows: number;
+    };
+    form: {
+        rows: number;
+    };
+    tabs: {
+        rows: number;
+        columns: number;
+    };
+    wizard: {
+        rows: number;
+        columns: number;
+    };
+    accordion: {
+        rows: number;
+        columns: number;
+    };
+};
+/** Show skeleton while `loading` is true. Opt out only with explicit `showSkeleton={false}`. */
+export declare const shouldShowSkeleton: (loading?: boolean | string, showSkeleton?: boolean) => boolean;
+export declare const SKELETON_REGISTRY: {
+    WmButton: {
+        variant: "rounded";
+        height: number;
+        width: number;
+    };
+    WmLabel: {
+        variant: "text";
+        width: number;
+    };
+    WmPicture: {
+        variant: "rectangular";
+        height: number;
+        width: number;
+    };
+    WmTable: {
+        rows: number;
+        columns: number;
+        type: "table";
+    };
+    WmList: {
+        rows: number;
+        type: "list";
+    };
+    WmForm: {
+        rows: number;
+        type: "form";
+    };
+    WmTabs: {
+        rows: number;
+        columns: number;
+        type: "tabs";
+    };
+    WmWizard: {
+        rows: number;
+        columns: number;
+        type: "wizard";
+    };
+    WmAccordion: {
+        rows: number;
+        columns: number;
+        type: "accordion";
+    };
+};
+/** Derived from the registry — never needs manual updates. */
+export type SkeletonRegistryKey = keyof typeof SKELETON_REGISTRY;
+export declare const WmSkeleton: ({ type, variant, height, animation, ...layoutProps }: WmSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default WmSkeleton;