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

package/components/container/tabs/index.js

@@ -22,6 +22,7 @@ import { createElement } from "react";
 import React, {
   createContext,
   memo,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
@@ -34,12 +35,12 @@ import isEqual from "lodash-es/isEqual";
 import { Tabs } from "@base-ui-components/react/tabs";
 import Typography from "@mui/material/Typography";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import WmTabPane from "./tab-pane";
 import { DEFAULT_PROPS } from "./props";
 import {
   WmSkeleton,
-  SKELETON_REGISTRY,
-  shouldShowSkeleton
+  SKELETON_REGISTRY
 } from "../../common/wm-skeleton";
 import {
   getWidgetState,
@@ -55,6 +56,7 @@ const PANE_HEADER_PROP_KEYS = [
   "disabled",
   "show",
   "paneicon",
+  "paneiconurl",
   "badgevalue",
   "badgetype",
   "className",
@@ -67,6 +69,7 @@ const getPaneHeaderProps = (props) => ({
   disabled: props == null ? void 0 : props.disabled,
   show: props == null ? void 0 : props.show,
   paneicon: props == null ? void 0 : props.paneicon,
+  paneiconurl: props == null ? void 0 : props.paneiconurl,
   badgevalue: props == null ? void 0 : props.badgevalue,
   badgetype: props == null ? void 0 : props.badgetype,
   className: props == null ? void 0 : props.className,
@@ -95,17 +98,6 @@ const useTabsContext = () => {
 const WmTabs = memo(
   (Props) => {
     const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
-    if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
-      return /* @__PURE__ */ jsx(
-        WmSkeleton,
-        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTabs"]), {
-          rows: props.skeletonRows,
-          columns: props.skeletonColumns,
-          className: clsx("app-tabs clearfix", props.className),
-          styles: props.styles
-        })
-      );
-    }
     const {
       defaultpaneindex,
       statehandler,
@@ -329,7 +321,7 @@ const WmTabs = memo(
             active: selectedIndex === index,
             disabled: item == null ? void 0 : item.disabled
           }),
-          hidden: item.show === false,
+          hidden: item.show === false || item.show === "false",
           role: "tab",
           "aria-selected": selectedIndex === index,
           tabIndex: selectedIndex === index ? 0 : -1,
@@ -343,11 +335,19 @@ const WmTabs = memo(
               title: item.title || item.name || `Tab ${index + 1}`,
               "aria-selected": selectedIndex === index,
               "aria-disabled": item.disabled,
-              "aria-hidden": item.show === false,
+              "aria-hidden": item.show === false || item.show === "false",
               "aria-controls": `tabpanel-${index}`,
               onClick: (e) => handleTabHeaderClick(e, item, index),
               children: [
-                item.paneicon && /* @__PURE__ */ jsx("i", { className: `app-icon ${item.paneicon}` }),
+                (item.paneicon || item.paneiconurl) && /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: item.paneicon,
+                    iconurl: item.paneiconurl,
+                    prefabName: props.prefabName,
+                    alt: "Tab icon"
+                  }
+                ),
                 /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "span", children: item.title || item.name || `Tab ${index + 1}` }),
                 item.badgevalue && /* @__PURE__ */ jsx(
                   Typography,
@@ -427,7 +427,7 @@ const WmTabs = memo(
         return Array.from(renderedTabIndices).filter((index) => index >= 0 && index < dataset.length).map((index) => {
           const item = dataset[index];
           const isActive = selectedIndex === index;
-          return /* @__PURE__ */ jsx(React.Fragment, { children: render ? /* @__PURE__ */ jsx(Fragment, { children: render(item, index, dataset, isActive) }) : /* @__PURE__ */ createElement(
+          return /* @__PURE__ */ jsx(React.Fragment, { children: render ? /* @__PURE__ */ jsx(Fragment, { children: render(item, index, dataset, isActive) }) : /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(WmSkeleton, __spreadValues({}, SKELETON_REGISTRY["WmTabs"])), children: /* @__PURE__ */ createElement(
             WmTabPane,
             __spreadProps(__spreadValues({}, item), {
               key: index,
@@ -440,7 +440,7 @@ const WmTabs = memo(
               }),
               index
             })
-          ) }, index);
+          ) }) }, index);
         });
       }
       const visibleChildren = filterVisibleChildren(children, hiddenTabNames);

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

@@ -19,6 +19,7 @@ export type PaneHeaderProps = {
     disabled?: boolean;
     show?: string | boolean;
     paneicon?: string;
+    paneiconurl?: string;
     badgevalue?: string | number;
     badgetype?: string;
     className?: string;

package/components/container/tabs/tab-pane/index.d.ts

@@ -29,6 +29,7 @@ declare const _default: React.ComponentType<{
     badgevalue?: string | number;
     badgetype?: string;
     paneicon?: string;
+    paneiconurl?: string;
     isdynamic?: boolean;
     index?: number;
     item?: Record<string, unknown>;
@@ -89,5 +90,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/tabs/tab-pane/index.js

@@ -68,6 +68,7 @@ const WmTabpane = (props) => {
       disabled,
       show: props.show,
       paneicon: props.paneicon,
+      paneiconurl: props.paneiconurl,
       badgevalue: props.badgevalue,
       badgetype: props.badgetype,
       className,
@@ -80,6 +81,7 @@ const WmTabpane = (props) => {
       disabled,
       props.show,
       props.paneicon,
+      props.paneiconurl,
       props.badgevalue,
       props.badgetype,
       className,

package/components/container/tabs/tab-pane/props.d.ts

@@ -41,6 +41,7 @@ export interface TabPanePropsBase {
      * Icon class for the tab header.
      */
     paneicon?: string;
+    paneiconurl?: string;
     /**
      * Whether this pane is from dynamic tabs (injected).
      */

package/components/container/wizard/components/StepComponents.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import clsx from "clsx";
+import { WmAppIcon } from "../../../common/WmAppIcon";
 const CustomStepIcon = memo(
   (props) => {
     const { step, index = 0, wizardClass = "", active, completed } = props;
@@ -12,20 +13,27 @@ const CustomStepIcon = memo(
     const isIconStepper = (wizardClass == null ? void 0 : wizardClass.includes("iconstepper")) || (wizardClass == null ? void 0 : wizardClass.includes("tabstepper"));
     const isCompleted = step.isDone;
     const iconContent = useMemo(() => {
-      if (isCompleted && (isDottedStepper || isNumber)) {
+      if (isCompleted && (isDottedStepper || isNumber) && !isIconStepper) {
         return /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-done" });
       }
-      if (isNumber && !isCompleted) {
+      if (isNumber && !isCompleted && !isIconStepper) {
         return /* @__PURE__ */ jsx(Box, { component: "span", className: "count", children: index + 1 });
       }
       if ((isDottedStepper || isTextInline && !isIconStepper) && !isCompleted) {
         return /* @__PURE__ */ jsx(Box, { component: "span", className: "dottedstepper" });
       }
-      if (isIconStepper && step.iconclass && (!isCompleted || isCompleted && !step.doneiconclass)) {
-        return /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${step.iconclass}` });
+      if (isIconStepper && (step.iconclass || step.iconurl) && (!isCompleted || isCompleted && !step.doneiconclass && !step.doneiconurl)) {
+        return /* @__PURE__ */ jsx(WmAppIcon, { iconclass: step.iconclass, iconurl: step.iconurl, alt: "Wizard step icon" });
       }
-      if (step.doneiconclass && isCompleted && isIconStepper) {
-        return /* @__PURE__ */ jsx(Box, { component: "span", className: `app-icon ${step.doneiconclass}` });
+      if ((step.doneiconclass || step.doneiconurl) && isCompleted && isIconStepper) {
+        return /* @__PURE__ */ jsx(
+          WmAppIcon,
+          {
+            iconclass: step.doneiconclass,
+            iconurl: step.doneiconurl,
+            alt: "Wizard done icon"
+          }
+        );
       }
       return null;
     }, [step, index, isCompleted, isDottedStepper, isNumber, isTextInline, isIconStepper]);

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

@@ -79,6 +79,7 @@ declare const WmWizardStandalone: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmWizardStandalone as WmWizard };
 /**
@@ -170,5 +171,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/container/wizard/index.js

@@ -54,7 +54,7 @@ import withStandalone from "../../../higherOrder/withStandalone";
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 const DEFAULT_CLS = "app-wizard panel clearfix";
 const BODY_CLASS = "app-wizard-body panel-body";
@@ -838,7 +838,7 @@ const WmWizardComponent = memo(
   }
 );
 const WmWizard = (props) => {
-  if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton)) {
     return /* @__PURE__ */ jsx(
       WmSkeleton,
       __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmWizard"]), {

package/components/container/wizard/props.d.ts

@@ -34,7 +34,9 @@ export interface WizardStepData extends Record<string, unknown> {
     title: string;
     subtitle?: string;
     iconclass: string;
+    iconurl?: string;
     doneiconclass: string;
+    doneiconurl?: string;
     show: boolean | string;
     enableskip: boolean;
     enableNext: boolean;
@@ -235,7 +237,9 @@ export interface WmWizardStepProps {
     title?: string;
     subtitle?: string;
     iconclass?: string;
+    iconurl?: string;
     doneiconclass?: string;
+    doneiconurl?: string;
     enableskip?: boolean;
     disablenext?: boolean;
     disabledone?: boolean;

package/components/container/wizard/wizard-step/index.d.ts

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

package/components/container/wizard/wizard-step/index.js

@@ -12,7 +12,9 @@ const WmWizardstep = memo(
       title = "Step Title",
       subtitle,
       iconclass = "wi wi-person",
+      iconurl,
       doneiconclass = "wi wi-done",
+      doneiconurl,
       enableskip = false,
       disablenext = false,
       disabledone = false,
@@ -40,7 +42,9 @@ const WmWizardstep = memo(
         title,
         subtitle,
         iconclass,
+        iconurl,
         doneiconclass,
+        doneiconurl,
         show,
         enableskip,
         enableNext: !disablenext,
@@ -70,7 +74,9 @@ const WmWizardstep = memo(
         title,
         subtitle,
         iconclass,
+        iconurl,
         doneiconclass,
+        doneiconurl,
         show,
         enableskip,
         disablenext,

package/components/data/card/card-actions/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/data/card/card-content/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/data/card/card-footer/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/data/card/index.d.ts

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

package/components/data/card/index.js

@@ -23,6 +23,7 @@ import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import { Card, CardHeader, CardMedia, Avatar, Typography, Box } from "@mui/material";
 import Image from "next/image";
 import { WmMenu } from "../../navigation/menu";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import clsx from "clsx";
 import WmCardContentWithWrapper, { WmCardContent } from "./card-content";
 import WmCardActionsWithWrapper, { WmCardActions } from "./card-actions";
@@ -156,13 +157,19 @@ const WmCard = (props) => {
     }
   };
   const renderAvatar = () => {
-    if (iconclass && !iconurl) {
-      return /* @__PURE__ */ jsx(Avatar, { className: "app-card-avatar", children: /* @__PURE__ */ jsx("i", { className: `app-icon ${iconclass}` }) });
-    }
-    if (iconurl) {
-      return /* @__PURE__ */ jsx(Avatar, { className: "app-card-avatar", children: /* @__PURE__ */ jsx(Image, { src: iconurl, alt: "", width: 40, height: 40, className: "wm-card-avatar-img" }) });
+    if (!iconclass && !iconurl) {
+      return null;
     }
-    return null;
+    return /* @__PURE__ */ jsx(Avatar, { className: "app-card-avatar", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName: props.prefabName,
+        defaultClasses: iconurl ? "wm-card-avatar-img img-circle" : "",
+        alt: ""
+      }
+    ) });
   };
   const renderActionMenu = () => {
     if (!actions) return null;

package/components/data/form/dynamic-fields/index.js

@@ -120,6 +120,7 @@ function DynamicForm(props) {
                   caption: $formField.displayname,
                   required: $formField.required,
                   listener,
+                  hidden: !$formField.displayname,
                   className: clsx(
                     "app-label control-label formfield-label",
                     (formRef == null ? void 0 : formRef.captionCls) || ""

package/components/data/form/form-action/index.d.ts

@@ -62,6 +62,7 @@ declare const WmFormActionsStandalone: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmFormActionsStandalone as WmFormAction };
 /**
@@ -137,5 +138,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/data/form/form-action/index.js

@@ -41,6 +41,7 @@ const WmFormActions = memo((props) => {
   var _b;
   const _a = props, {
     position = "footer",
+    type = "button",
     btnClass,
     updateMode,
     displayName,
@@ -48,6 +49,7 @@ const WmFormActions = memo((props) => {
     showViewMode
   } = _a, rest = __objRest(_a, [
     "position",
+    "type",
     "btnClass",
     "updateMode",
     "displayName",
@@ -60,15 +62,15 @@ const WmFormActions = memo((props) => {
     (event) => {
       var _a2, _b2, _c;
       if (props.standalone) {
-        if (props.type === "submit") {
+        if (type === "submit") {
           (_a2 = formRef == null ? void 0 : formRef.submit) == null ? void 0 : _a2.call(formRef, event);
-        } else if (props.type === "reset") {
+        } else if (type === "reset") {
           (_b2 = formRef == null ? void 0 : formRef.formreset) == null ? void 0 : _b2.call(formRef);
         }
       }
       (_c = props.onClick) == null ? void 0 : _c.call(props, event);
     },
-    [formRef, props.onClick, props.type]
+    [formRef, props.onClick, type]
   );
   useEffect(() => {
     if (formRef && position.includes("header") && formRef.registerHeaderAction) {
@@ -93,7 +95,7 @@ const WmFormActions = memo((props) => {
       className: clsx(btnClass, rest.className),
       caption: displayName,
       iconclass: props.iconclass,
-      type: props.type,
+      type,
       disabled: props.disabled,
       onClick: handleClick,
       name: props.name,

package/components/data/form/form-field/index.js

@@ -66,10 +66,10 @@ const WmFormField = memo(
     const onChangeHandler = useCallback(
       (name, data) => {
         Object.keys(data).forEach((key) => {
-          fieldProxyRef.current[key] = key === "datavalue" && isNumber ? Number(data[key]) : data[key];
+          fieldProxyRef.current[key] = key === "datavalue" && isNumber && !Array.isArray(data[key]) ? Number(data[key]) : data[key];
         });
         setProxyProps((prev) => {
-          return __spreadValues(__spreadValues({}, prev), isNumber ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
+          return __spreadValues(__spreadValues({}, prev), isNumber && !Array.isArray(data.datavalue) ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
         });
       },
       [isNumber]
@@ -130,7 +130,8 @@ const WmFormField = memo(
         return null;
       }
     }
-    const itemsPerRow = ((_a = props == null ? void 0 : props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
+    const isDynamicFormField = typeof props.className === "string" && props.className.includes("app-dynamic-form-field");
+    const itemsPerRowClass = !isDynamicFormField && ((_a = props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
     if (!fieldProxyRef.current) {
       return null;
     }
@@ -146,7 +147,7 @@ const WmFormField = memo(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx(props.className, itemsPerRow, DEFAULT_CLASS),
+        className: clsx(props.className, itemsPerRowClass, DEFAULT_CLASS),
         id: props.id,
         style: __spreadValues(__spreadValues({}, props.conditionalstyle), props.styles),
         "data-displayname": props.displayname,

package/components/data/form/form-header/index.d.ts

@@ -1,5 +1,5 @@
 import { WmFormProps } from "../props";
-type FormHeaderProps = Pick<WmFormProps, "title" | "subheading" | "iconclass" | "collapsible" | "expanded" | "headerActions" | "expandCollapsePanel" | "isViewMode">;
+type FormHeaderProps = Pick<WmFormProps, "title" | "subheading" | "iconclass" | "iconurl" | "prefabName" | "collapsible" | "expanded" | "headerActions" | "expandCollapsePanel" | "isViewMode">;
 declare const WmFormHeader: {
     (props: FormHeaderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/components/data/form/form-header/index.js

@@ -24,7 +24,16 @@ import WmFormActions from "../form-action";
 import { WmButton } from "../../../form/button";
 const WmFormHeader = (props) => {
   return /* @__PURE__ */ jsx("div", { className: "panel-heading", children: /* @__PURE__ */ jsxs("h3", { className: "panel-title", children: [
-    /* @__PURE__ */ jsx("div", { className: "pull-left", children: props.iconclass && /* @__PURE__ */ jsx(WmIcon, { name: "", listener: {}, iconclass: props.iconclass }) }),
+    /* @__PURE__ */ jsx("div", { className: "pull-left", children: (props.iconclass || props.iconurl) && /* @__PURE__ */ jsx(
+      WmIcon,
+      {
+        name: "",
+        listener: {},
+        iconclass: props.iconclass || "",
+        iconurl: props.iconurl,
+        prefabName: props.prefabName
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "pull-left", children: [
       /* @__PURE__ */ jsx("div", { className: "heading", children: props.title }),
       /* @__PURE__ */ jsx("div", { className: "description", children: props.subheading })

package/components/data/form/index.js

@@ -28,11 +28,11 @@ import withStandalone from "../../../higherOrder/withStandalone";
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 const WmForm = (props) => {
   var _a, _b, _c, _d;
-  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton))
     return /* @__PURE__ */ jsx(
       WmSkeleton,
       __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmForm"]), {
@@ -61,12 +61,14 @@ const WmForm = (props) => {
       ref: props.formElementRef,
       noValidate: props.validationtype !== "html",
       children: [
-        !shouldHideHeader && ((props == null ? void 0 : props.title) || (props == null ? void 0 : props.subheading) || (props == null ? void 0 : props.iconclass) || (props == null ? void 0 : props.headerActions) && props.headerActions.length > 0 || (props == null ? void 0 : props.collapsible)) && /* @__PURE__ */ jsx(
+        !shouldHideHeader && ((props == null ? void 0 : props.title) || (props == null ? void 0 : props.subheading) || (props == null ? void 0 : props.iconclass) || (props == null ? void 0 : props.iconurl) || (props == null ? void 0 : props.headerActions) && props.headerActions.length > 0 || (props == null ? void 0 : props.collapsible)) && /* @__PURE__ */ jsx(
           WmFormHeader,
           {
             title: props.title,
             subheading: props.subheading,
             iconclass: props.iconclass,
+            iconurl: props.iconurl,
+            prefabName: props.prefabName,
             collapsible: props.collapsible,
             expanded: props.expanded,
             headerActions: props.headerActions,

package/components/data/form/props.d.ts

@@ -36,6 +36,7 @@ export interface FormProps {
      * CSS class for the form icon.
      */
     iconclass?: string;
+    iconurl?: string;
     /**
      * Whether to enable autocomplete for the form.
      */

package/components/data/list/components/ListHeader.js

@@ -2,10 +2,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import DOMPurify from "dompurify";
-const ListHeader = ({ title, subheading, iconclass }) => {
-  if (!title && !subheading && !iconclass) return null;
+import { WmAppIcon } from "../../../common/WmAppIcon";
+const ListHeader = ({
+  title,
+  subheading,
+  iconclass,
+  iconurl,
+  prefabName
+}) => {
+  if (!title && !subheading && !iconclass && !iconurl) return null;
   return /* @__PURE__ */ jsx(Box, { component: "div", className: "panel-heading", children: /* @__PURE__ */ jsxs(Typography, { className: "panel-title wm-all-unset", variant: "h6", children: [
-    /* @__PURE__ */ jsx("span", { className: "pull-left", children: iconclass && /* @__PURE__ */ jsx("i", { className: `app-icon panel-icon ${iconclass}`, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx("span", { className: "pull-left", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName,
+        defaultClasses: "panel-icon",
+        alt: "List icon"
+      }
+    ) }),
     /* @__PURE__ */ jsxs("span", { className: "pull-left", children: [
       title && /* @__PURE__ */ jsx(
         Typography,

package/components/data/list/components/ListItemWithTemplate.js

@@ -3,6 +3,7 @@ import { useCallback, useRef, useEffect, useMemo } from "react";
 import clsx from "clsx";
 import { WmListItem } from "./ListItem";
 import { MediaWmListtemplate } from "../templates/media-template";
+import { resolveDisableItem } from "../utils/list-helpers";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
 import isPlainObject from "lodash-es/isPlainObject";
 const ListItemWithTemplate = ({
@@ -64,11 +65,14 @@ const ListItemWithTemplate = ({
     return typeof itemclass === "function" ? itemclass(item) : itemclass;
   }, [itemclass, item]);
   const itemLayoutAttrs = itemAttrs ? itemAttrs(item, globalIndex != null ? globalIndex : index) : void 0;
+  const resolvedDisableItem = useMemo(() => {
+    return resolveDisableItem(disableitem, item, globalIndex != null ? globalIndex : index);
+  }, [disableitem, item, globalIndex, index]);
   return /* @__PURE__ */ jsx(
     WmListItem,
     {
       item,
-      disableItem: disableitem,
+      disableItem: resolvedDisableItem,
       itemClass: clsx(resolvedItemClass, itemsPerRowClass),
       index: globalIndex != null ? globalIndex : index,
       isFirst,

package/components/data/list/components/ListItems.d.ts

@@ -4,4 +4,4 @@ import { ListItemData } from "../props";
  * Main ListItems component - orchestrates rendering of list items
  * with support for grouping, pagination, and on-demand loading
  */
-export declare const ListItems: <T extends ListItemData = ListItemData>({ items, groupedData, groupby, navigation, currentPage, pagesize, visibleItems, orderby, disableitem, itemclass, itemsPerRowClass, direction, enablereorder, activeItems, name, tabIndex, renderItem, itemTemplate, nodatamessage, ondemandmessage, loadingicon, loadingdatamsg, paginationclass, isLoadingMore, collapsible, showcount, groupCollapsed, handleListItemClick, handleListItemDoubleClick, handleListItemMouseEnter, handleListItemMouseLeave, handleDragEnd, handleLoadMore, handleHeaderClick, onBeforedatarender, onRender, widgetInstance, rawDataset, datasource, totalItems, isServerSidePagination, showNavigation, itemAttrs, hasListGroupAutoLayout, standalone, }: ListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItems: <T extends ListItemData = ListItemData>({ items, groupedData, groupby, navigation, currentPage, pagesize, visibleItems, orderby, disableitem, itemclass, itemsPerRowClass, direction, enablereorder, activeItems, name, tabIndex, renderItem, itemTemplate, nodatamessage, ondemandmessage, loadingicon, loadingiconurl, loadingdatamsg, paginationclass, isLoadingMore, prefabName, collapsible, showcount, groupCollapsed, handleListItemClick, handleListItemDoubleClick, handleListItemMouseEnter, handleListItemMouseLeave, handleDragEnd, handleLoadMore, handleHeaderClick, onBeforedatarender, onRender, widgetInstance, rawDataset, datasource, totalItems, isServerSidePagination, showNavigation, itemAttrs, hasListGroupAutoLayout, standalone, }: ListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/components/data/list/components/ListItems.js

@@ -27,9 +27,11 @@ const ListItems = ({
   nodatamessage,
   ondemandmessage,
   loadingicon,
+  loadingiconurl,
   loadingdatamsg,
   paginationclass,
   isLoadingMore,
+  prefabName,
   collapsible,
   showcount,
   groupCollapsed,
@@ -205,9 +207,11 @@ const ListItems = ({
         paginationclass,
         isLoadingMore,
         loadingicon,
+        loadingiconurl,
         loadingdatamsg,
         ondemandmessage,
-        onLoadMore: handleLoadMore
+        onLoadMore: handleLoadMore,
+        prefabName
       }
     )
   ] });

package/components/data/list/components/LoadMoreButton.js

@@ -2,13 +2,16 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import { WmAppIcon } from "../../../common/WmAppIcon";
 const LoadMoreButton = ({
   paginationclass,
   isLoadingMore,
   loadingicon,
+  loadingiconurl,
   loadingdatamsg,
   ondemandmessage,
-  onLoadMore
+  onLoadMore,
+  prefabName
 }) => /* @__PURE__ */ jsx(Box, { component: "div", className: "panel-footer wm-load-more-footer wm-text-center", children: /* @__PURE__ */ jsx(
   Button,
   {
@@ -17,7 +20,16 @@ const LoadMoreButton = ({
     onClick: onLoadMore,
     disabled: isLoadingMore,
     children: isLoadingMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("i", { className: `app-icon ${loadingicon} fa-spin me-2`, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(
+        WmAppIcon,
+        {
+          iconclass: loadingicon ? `${loadingicon} fa-spin` : "fa fa-circle-o-notch fa-spin",
+          iconurl: loadingiconurl,
+          prefabName,
+          defaultClasses: clsx("app-icon", "me-2"),
+          alt: ""
+        }
+      ),
       loadingdatamsg
     ] }) : ondemandmessage
   }