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

package/components/basic/spinner/index.js

@@ -24,6 +24,7 @@ import Typography from "@mui/material/Typography";
 import CircularProgress from "@mui/material/CircularProgress";
 import clsx from "clsx";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import { VariableEvents } from "./props";
 const WmSpinner = memo(
   (props) => {
@@ -33,6 +34,7 @@ const WmSpinner = memo(
       name,
       type = "icon",
       iconclass = "fa fa-circle-o-notch fa-spin",
+      iconurl,
       iconsize,
       imagewidth = "20px",
       imageheight,
@@ -145,18 +147,17 @@ const WmSpinner = memo(
       }
       if (type === "icon") {
         return /* @__PURE__ */ jsx(
-          "i",
+          WmAppIcon,
           {
-            className: clsx(
-              "spinner-image animated infinite",
-              "wm-spinner-icon",
-              iconclass,
+            iconclass,
+            iconurl,
+            prefabName: props.prefabName,
+            defaultClasses: clsx(
+              "spinner-image animated infinite ",
+              iconsize ? "wm-spinner-icon" : "",
               animation === "spin" ? "fa-spin" : animation
             ),
-            "aria-hidden": "true",
-            style: {
-              "--wm-spinner-icon-size": iconsize
-            }
+            iconStyle: iconsize ? { "--wm-spinner-icon-size": iconsize } : void 0
           }
         );
       }
@@ -198,6 +199,7 @@ const WmSpinner = memo(
       "servicevariabletotrack",
       "show",
       "iconclass",
+      "iconurl",
       "iconsize",
       "image",
       "imagewidth",

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

@@ -38,6 +38,11 @@ export interface SpinnerProps {
      * @default "fa fa-circle-o-notch fa-spin"
      */
     iconclass?: string;
+    /**
+     * Icon URL for spinner (effective only when type is 'icon').
+     * `.svg` URLs render inline; other URLs render as images.
+     */
+    iconurl?: string;
     /**
      * The font size for the icon (effective only when type is 'icon').
      */

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

@@ -66,5 +66,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -82,5 +82,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -77,5 +77,6 @@ declare const _default: React.ComponentType<{
     dataset?: any;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/chart/index.d.ts

@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
     yaxislabeldistance?: number;
     yunits?: string;
     iconclass?: string;
+    iconurl?: string;
     nodatamessage?: string;
     loadingdatamsg?: string;
     tooltips?: boolean;
@@ -127,5 +128,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/chart/props.d.ts

@@ -75,6 +75,7 @@ export interface ChartProps {
     yunits?: string;
     /** Icon class for panel header */
     iconclass?: string;
+    iconurl?: string;
     /** Message when no data is available */
     nodatamessage?: string;
     /** Message shown during data loading */

package/components/chart/src/chart.js

@@ -45,6 +45,7 @@ import {
 } from "./dataUtils";
 import { AXIS_CHART_DEFAULT_OFFSETS, dateList, PIE_CHART_DEFAULT_OFFSETS } from "./constants";
 import ChartRenderer from "./ChartRenderer";
+import { WmAppIcon } from "../../common/WmAppIcon";
 const WmChart = (props) => {
   var _b, _c;
   const _a = props, {
@@ -61,6 +62,7 @@ const WmChart = (props) => {
     title,
     subheading,
     iconclass,
+    iconurl,
     onSelect,
     onTransform,
     onBeforerender,
@@ -88,6 +90,7 @@ const WmChart = (props) => {
     "title",
     "subheading",
     "iconclass",
+    "iconurl",
     "onSelect",
     "onTransform",
     "onBeforerender",
@@ -428,7 +431,15 @@ const WmChart = (props) => {
       name: props == null ? void 0 : props.name,
       children: [
         title && /* @__PURE__ */ jsxs("div", { className: "panel-heading", children: [
-          iconclass && /* @__PURE__ */ jsx("i", { className: iconclass }),
+          (iconclass || iconurl) && /* @__PURE__ */ jsx(
+            WmAppIcon,
+            {
+              iconclass,
+              iconurl,
+              prefabName: props.prefabName,
+              defaultClasses: "panel-icon"
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "chart-title", children: title }),
           subheading && /* @__PURE__ */ jsx("span", { className: "chart-subheading", children: subheading })
         ] }),

package/components/chart/src/types.d.ts

@@ -44,6 +44,8 @@ export interface WmChartProps {
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
+    prefabName?: string;
     nodatamessage?: string;
     loadingdatamsg?: string;
     tooltips?: boolean;

package/components/common/WmAppIcon/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { WmAppIconProps } from "./props";
+/**
+ * Single, reusable renderer for the SVG / image / font 3-way icon branch.
+ *
+ * Decision order :
+ *   1. iconurl ending in `.svg`   -> inline SVG via SvgIconInline
+ *   2. iconurl (anything else)    -> `<img>`
+ *   3. iconclass / defaultIconClass -> `<i class="app-icon ...">`
+ *
+ * The host uses `display: contents` so existing CSS selectors targeting
+ * `.app-icon` directly inside the parent keep working.
+ */
+export declare const WmAppIcon: React.MemoExoticComponent<(props: WmAppIconProps) => import("react/jsx-runtime").JSX.Element>;
+export default WmAppIcon;

package/components/common/WmAppIcon/index.js

@@ -0,0 +1,130 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import {
+  fetchSvgIcon,
+  getCachedSvgIcon,
+  isSvgIconUrl,
+  resolveIconUrl
+} from "../../../utils/svg-icon";
+function toExtraClasses(defaultClasses) {
+  if (!defaultClasses) {
+    return [];
+  }
+  if (Array.isArray(defaultClasses)) {
+    return defaultClasses.filter(Boolean);
+  }
+  return defaultClasses.split(/\s+/).filter(Boolean);
+}
+function SvgIconInline({
+  resolvedUrl,
+  className,
+  style
+}) {
+  const [svgHtml, setSvgHtml] = useState(
+    () => {
+      var _a;
+      return (_a = getCachedSvgIcon(resolvedUrl)) != null ? _a : null;
+    }
+  );
+  useEffect(() => {
+    const cached = getCachedSvgIcon(resolvedUrl);
+    if (cached !== void 0) {
+      setSvgHtml(cached);
+      return;
+    }
+    let cancelled = false;
+    fetchSvgIcon(resolvedUrl).then((markup) => {
+      if (!cancelled) {
+        setSvgHtml(markup);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setSvgHtml(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedUrl]);
+  if (!svgHtml) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      className,
+      role: "img",
+      "aria-hidden": "true",
+      "data-identifier": "svg",
+      style,
+      dangerouslySetInnerHTML: { __html: svgHtml }
+    }
+  );
+}
+const WmAppIcon = memo((props) => {
+  const {
+    iconclass,
+    iconurl,
+    defaultIconClass,
+    defaultClasses,
+    iconStyle,
+    alt,
+    prefabName
+  } = props;
+  const extras = useMemo(() => toExtraClasses(defaultClasses), [defaultClasses]);
+  const isSvg = isSvgIconUrl(iconurl);
+  const isImage = !!iconurl && !isSvg;
+  const fontClass = useMemo(
+    () => [defaultIconClass, iconclass].filter(Boolean).join(" "),
+    [defaultIconClass, iconclass]
+  );
+  const resolvedImageUrl = useMemo(
+    () => isImage ? resolveIconUrl(iconurl, prefabName) : null,
+    [isImage, iconurl, prefabName]
+  );
+  const resolvedSvgUrl = useMemo(
+    () => isSvg && iconurl ? resolveIconUrl(iconurl, prefabName) : null,
+    [isSvg, iconurl, prefabName]
+  );
+  if (isSvg && resolvedSvgUrl) {
+    return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+      SvgIconInline,
+      {
+        resolvedUrl: resolvedSvgUrl,
+        className: clsx("app-icon", "app-icon-svg", ...extras),
+        style: iconStyle || void 0
+      },
+      resolvedSvgUrl
+    ) });
+  }
+  if (isImage && resolvedImageUrl) {
+    return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        "data-identifier": "img",
+        alt: alt || "",
+        src: resolvedImageUrl,
+        className: clsx("app-icon", ...extras),
+        style: iconStyle || void 0
+      }
+    ) });
+  }
+  if (fontClass) {
+    return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+      "i",
+      {
+        className: clsx("app-icon", ...extras, ...fontClass.split(/\s+/).filter(Boolean)),
+        "aria-hidden": "true",
+        style: iconStyle || void 0
+      }
+    ) });
+  }
+  return null;
+});
+WmAppIcon.displayName = "WmAppIcon";
+var WmAppIcon_default = WmAppIcon;
+export {
+  WmAppIcon,
+  WmAppIcon_default as default
+};

package/components/common/WmAppIcon/props.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react";
+export interface WmAppIconProps {
+    /** Font-icon CSS class (e.g. `wi wi-user`). Lowest priority when iconurl is set. */
+    iconclass?: string | null;
+    /** Icon URL. `.svg` -> inline SVG, anything else -> `<img>`. Wins over iconclass. */
+    iconurl?: string | null;
+    /** Fallback font-icon class when both iconclass and iconurl are empty. */
+    defaultIconClass?: string | null;
+    /** Extra classes appended to the rendered icon element on every branch. */
+    defaultClasses?: string | string[] | null;
+    /** Inline styles forwarded to the rendered icon element. */
+    iconStyle?: CSSProperties | null;
+    /** Alt text for the `<img>` branch. */
+    alt?: string | null;
+    /** Prefab name for resolving relative `resources/` icon URLs. */
+    prefabName?: string;
+}

package/components/common/index.d.ts

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

package/components/common/index.js

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

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

@@ -45,6 +45,13 @@ export declare const LAYOUT_DEFAULTS: {
 };
 /** Show skeleton while `loading` is true. Opt out only with explicit `showSkeleton={false}`. */
 export declare const shouldShowSkeleton: (loading?: boolean | string, showSkeleton?: boolean) => boolean;
+/**
+ * Hook that returns true only during the initial load.
+ * Once loading completes for the first time, always returns false —
+ * preventing skeleton from replacing (and unmounting) a stateful component
+ * on subsequent data fetches (e.g. pagination, sorting, filtering).
+ */
+export declare const useShouldShowSkeleton: (loading?: boolean | string, showSkeleton?: boolean) => boolean;
 export declare const SKELETON_REGISTRY: {
     WmButton: {
         variant: "rounded";

package/components/common/wm-skeleton.js

@@ -30,6 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
@@ -50,6 +51,14 @@ const shouldShowSkeleton = (loading, showSkeleton) => {
   if (showSkeleton === false) return false;
   return Boolean(loading);
 };
+const useShouldShowSkeleton = (loading, showSkeleton) => {
+  const hasLoadedOnce = useRef(false);
+  if (!loading) {
+    hasLoadedOnce.current = true;
+  }
+  if (hasLoadedOnce.current) return false;
+  return shouldShowSkeleton(loading, showSkeleton);
+};
 const SKELETON_REGISTRY = {
   WmButton: { variant: "rounded", height: 36, width: 100 },
   WmLabel: { variant: "text", width: 160 },
@@ -342,5 +351,6 @@ export {
   SKELETON_REGISTRY,
   WmSkeleton,
   wm_skeleton_default as default,
-  shouldShowSkeleton
+  shouldShowSkeleton,
+  useShouldShowSkeleton
 };

package/components/container/accordion/accordion-pane/index.d.ts

@@ -15,6 +15,7 @@ declare const _default: React.ComponentType<{
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
     badgevalue?: string | number;
     badgetype?: import("./props").AccordionPaneBadgeType;
     isdefaultpane?: boolean;
@@ -79,5 +80,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/accordion/accordion-pane/index.js

@@ -16,6 +16,7 @@ var __spreadValues = (a, b) => {
 };
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { WmAppIcon } from "../../../common/WmAppIcon";
 import { memo, useCallback, useEffect, useRef } from "react";
 import Typography from "@mui/material/Typography";
 import AccordionDetails from "@mui/material/AccordionDetails";
@@ -77,7 +78,15 @@ const WmAccordionPane = memo((Props) => {
             "aria-expanded": props.active,
             component: "div",
             children: /* @__PURE__ */ jsx(Typography, { className: "panel-title", variant: "h3", component: "h3", children: /* @__PURE__ */ jsxs(Typography, { className: "accordion-toggle clearfix", component: "a", children: [
-              props.iconclass && /* @__PURE__ */ jsx("div", { className: "pull-left", children: /* @__PURE__ */ jsx("i", { className: clsx("app-icon panel-icon", props.iconclass) }) }),
+              (props.iconclass || props.iconurl) && /* @__PURE__ */ jsx("div", { className: "pull-left", children: /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass: props.iconclass,
+                  iconurl: props.iconurl,
+                  prefabName: props.prefabName,
+                  defaultClasses: "panel-icon"
+                }
+              ) }),
               /* @__PURE__ */ jsxs("div", { className: clsx("pull-left", "wm-accordion-pane-title-main"), children: [
                 /* @__PURE__ */ jsx(Typography, { className: "heading", variant: "h3", component: "h3", children: props.title }),
                 props.subheading && /* @__PURE__ */ jsx(Typography, { className: "description", variant: "body2", component: "div", children: props.subheading })

package/components/container/accordion/accordion-pane/props.d.ts

@@ -22,6 +22,7 @@ export interface AccordionPanePropsBase {
      * Icon class for the pane header (e.g., "wi wi-home").
      */
     iconclass?: string;
+    iconurl?: string;
     /**
      * Badge value displayed in the header.
      */

package/components/container/accordion/index.d.ts

@@ -76,5 +76,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/accordion/index.js

@@ -31,7 +31,7 @@ import {
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 const DEFAULT_CLASS = "app-accordion panel-group";
 function isStaticAccordionPane(child) {
@@ -206,7 +206,7 @@ const WmAccordion = memo(
         return child;
       }) : null;
     };
-    if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+    if (useShouldShowSkeleton(props.loading, props.showSkeleton)) {
       return /* @__PURE__ */ jsx(
         WmSkeleton,
         __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmAccordion"]), {

package/components/container/index.d.ts

@@ -82,5 +82,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/layout-grid/grid-column/index.d.ts

@@ -68,5 +68,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/layout-grid/grid-row/index.d.ts

@@ -64,5 +64,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/layout-grid/index.d.ts

@@ -66,5 +66,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/linear-layout/index.d.ts

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

package/components/container/linear-layout/linear-layout-item/index.d.ts

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

package/components/container/panel/components/panel-header/index.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
 import { Box, IconButton } from "@mui/material";
 import DOMPurify from "dompurify";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -9,6 +8,7 @@ import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import CloseIcon from "@mui/icons-material/Close";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import WmMenu from "../../../../navigation/menu";
+import { WmAppIcon } from "../../../../common/WmAppIcon";
 import { toCssLength } from "../../../../../utils/style-utils";
 const PanelHeader = ({
   title = "Title",
@@ -56,21 +56,21 @@ const PanelHeader = ({
         onClick: onToggleExpand,
         "aria-expanded": isExpanded,
         children: [
-          /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
-            iconclass && !iconurl && /* @__PURE__ */ jsx(Box, { component: "i", className: `app-icon panel-icon ${iconclass}` }),
-            iconurl && /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "img",
-                "data-identifier": "img",
-                title: "iconurl",
-                alt: "Panel icon",
-                className: clsx("panel-image-icon", "wm-panel-header-icon-img"),
-                src: iconurl,
-                style: panelIconImgStyle
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx(Box, { className: "pull-left", children: /* @__PURE__ */ jsx(
+            WmAppIcon,
+            {
+              iconclass,
+              iconurl,
+              defaultClasses: iconurl ? "panel-image-icon wm-panel-header-icon-img" : "panel-icon",
+              iconStyle: panelIconImgStyle ? {
+                width: panelIconImgStyle["--wm-panel-icon-width"],
+                height: panelIconImgStyle["--wm-panel-icon-height"],
+                margin: panelIconImgStyle["--wm-panel-icon-margin"],
+                fontSize: iconwidth ? toCssLength(iconwidth) : void 0
+              } : iconwidth ? { fontSize: toCssLength(iconwidth) } : void 0,
+              alt: "Panel icon"
+            }
+          ) }),
           /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
             title && /* @__PURE__ */ jsx(
               Box,

package/components/container/panel/index.d.ts

@@ -116,5 +116,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/repeat-template/index.d.ts

@@ -80,5 +80,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/tabs/index.d.ts

@@ -84,5 +84,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;