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

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

@@ -37,7 +37,7 @@ const DATASET_SYNC_KEYS = [
 ];
 const WmFormField = memo(
   (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { show = true, deferload } = props;
     const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
       show: show == null ? void 0 : show.toString(),
@@ -49,6 +49,7 @@ const WmFormField = memo(
     const overriddenItemsRef = useRef({});
     const fieldKey = props.formKey || props.name;
     const defaultValueRegisteredRef = useRef(false);
+    const showfield = (_b = (_a = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _a.show) != null ? _b : show;
     const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
     const reset = useCallback(
       (value) => {
@@ -66,10 +67,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 && data.datavalue !== void 0 && !Array.isArray(data.datavalue) ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
         });
       },
       [isNumber]
@@ -109,14 +110,17 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c2, _d2, _e, _f, _g;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
         const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
         const fieldError = formKey && errors ? get(errors, formKey) : void 0;
         const invalid = Boolean(fieldError);
         const invalidCls = invalid ? " text-danger " : "";
-        return /* @__PURE__ */ jsx(Fragment, { children: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_g = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _g.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+          show: showfield,
+          disabled: (_d2 = (_c2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _c2.disabled) != null ? _d2 : props == null ? void 0 : props.disabled,
+          readonly: (_f = (_e = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e.readonly) != null ? _f : props == null ? void 0 : props.readonly,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -130,13 +134,14 @@ 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 && ((_c = props.formRef) == null ? void 0 : _c.itemsPerRow) || "";
     if (!fieldProxyRef.current) {
       return null;
     }
     const isDeferLoad = deferload === true;
-    const showValue = ((_b = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _b.toString()) !== "false";
-    if (!showValue && isDeferLoad) {
+    const showValue = ((_d = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _d.toString()) !== "false";
+    if ((!showValue || showfield) && isDeferLoad) {
       return null;
     }
     const shouldHide = !showValue && !isDeferLoad;
@@ -146,7 +151,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-field/props.d.ts

@@ -205,6 +205,7 @@ export interface FormFieldProps {
     observeOn?: any[];
     reset?: () => void;
     setValidationMessage?: (message: string) => void;
+    disabled?: boolean;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

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,8 +3,10 @@ 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";
+import isEmpty from "lodash-es/isEmpty";
 const ListItemWithTemplate = ({
   item,
   index,
@@ -37,7 +39,7 @@ const ListItemWithTemplate = ({
   const getCurrentItemWidgets = useCallback(
     ($index) => {
       const cached = widgetCacheRef.current.get($index);
-      if (cached) {
+      if (cached && !isEmpty(cached)) {
         return cached;
       }
       const items = {};
@@ -51,7 +53,9 @@ const ListItemWithTemplate = ({
           }
         }
       }
-      widgetCacheRef.current.set($index, items);
+      if (!isEmpty(items)) {
+        widgetCacheRef.current.set($index, items);
+      }
       return items;
     },
     [WidgetProxy, name]
@@ -64,11 +68,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
   }

package/components/data/list/components/StandardListItems.js

@@ -35,7 +35,7 @@ const StandardListItems = ({
     const itemId = getItemId(item, globalIndex);
     const isFirst = index === 0;
     const isLast = index === currentItems.length - 1;
-    const isActive = (Array.isArray(activeItems) || activeItems instanceof Set) && some(Array.from(activeItems), (active) => active._wmListItemId === item._wmListItemId);
+    const isActive = (Array.isArray(activeItems) || activeItems instanceof Set) && some(Array.from(activeItems), (active) => active._wmListItemId && item._wmListItemId && active._wmListItemId === item._wmListItemId);
     return /* @__PURE__ */ jsx(
       ListItemWithTemplate,
       {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { GroupedDataItem } from "../hooks";
-import { INavigation, IDirection, IAlignment, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListBeforeDataRenderHandler } from "../props";
+import { INavigation, IDirection, IAlignment, DisableItemProp, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListBeforeDataRenderHandler } from "../props";
 import { DragEndEvent } from "@dnd-kit/core";
 export type DefaultEventHandler<T = ListItemData> = (event: React.MouseEvent, item: T) => void;
 export interface ListPaginationProps {
@@ -58,7 +58,7 @@ export interface ListItemsProps<T = ListItemData> {
     orderby?: string;
     startIndex?: number;
     endIndex?: number;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T) => string | null | undefined);
     itemsPerRowClass: string;
     direction: IDirection;
@@ -71,9 +71,11 @@ export interface ListItemsProps<T = ListItemData> {
     nodatamessage: string;
     ondemandmessage: string;
     loadingicon: string;
+    loadingiconurl?: string;
     loadingdatamsg: string;
     paginationclass: string;
     isLoadingMore: boolean;
+    prefabName?: string;
     collapsible: boolean;
     showcount: boolean;
     groupCollapsed: Record<string, boolean>;
@@ -102,6 +104,8 @@ export interface ListHeaderProps {
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
+    prefabName?: string;
 }
 export interface ListTemplateProps {
     children: React.ReactNode;
@@ -128,9 +132,11 @@ export interface LoadMoreButtonProps {
     paginationclass: string;
     isLoadingMore: boolean;
     loadingicon: string;
+    loadingiconurl?: string;
     loadingdatamsg: string;
     ondemandmessage: string;
     onLoadMore: () => void;
+    prefabName?: string;
 }
 export interface GroupHeaderProps {
     groupKey: string;
@@ -155,7 +161,7 @@ export interface ListItemWithTemplateProps<T extends ListItemData = ListItemData
     itemId: string;
     isFirst: boolean;
     isLast: boolean;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T, index?: number) => string | null | undefined);
     itemsPerRowClass: string;
     name: string;
@@ -177,7 +183,7 @@ export interface StandardListItemsProps<T extends ListItemData = ListItemData> {
     currentPageItems: CurrentPageItemsResult<T>;
     direction: string;
     enablereorder: boolean;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T, index?: number) => string | null | undefined);
     itemsPerRowClass: string;
     name: string;
@@ -198,7 +204,7 @@ export interface GroupedListItemsProps<T extends ListItemData = ListItemData> {
     groupedData: GroupedDataItem<T>[];
     paginatedGroupedData: PaginatedGroupedDataItem<T>[];
     direction: string;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T, index?: number) => string | null | undefined);
     itemsPerRowClass: string;
     name: string;

package/components/data/list/hooks/props.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { DefaultEventHandler, IPaginationMeta } from "../components/props";
-import { WmListProps, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler, ListSelectHandler } from "../props";
+import { WmListProps, DisableItemProp, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler, ListSelectHandler } from "../props";
 export interface GroupedDataItem<T = ListItemData> {
     key: string;
     data: T[];
@@ -11,7 +11,7 @@ export type UseListDataProps<T = ListItemData> = Pick<WmListProps<T>, "datafield
 export interface UseListEventHandlersProps<T extends ListItemData = ListItemData> {
     items: T[];
     multiselect: boolean;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     selectionlimit: number;
     collapsible: boolean;
     selectedItems: T[];

package/components/data/list/hooks/useListEffects.js

@@ -112,7 +112,7 @@ const useListEffects = (props) => {
         selectPageSize: (size) => widgetMethodsRef.current.selectPageSize(size)
       });
     }
-  }, [name, showNavigation, items]);
+  }, [name, showNavigation, items == null ? void 0 : items.length]);
   useEffect(() => {
     if ((listener == null ? void 0 : listener.onChange) && props.navigation !== LIST_NAVIGATION_TYPES.NONE) {
       listener.onChange(name, {

package/components/data/list/hooks/useListEventHandlers.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { useCallback, useRef, useEffect } from "react";
 import { findIndex, includes, filter, slice, min, max } from "lodash-es";
-import { getSelectedItemWidgets } from "../utils/list-helpers";
+import { getSelectedItemWidgets, resolveDisableItem } from "../utils/list-helpers";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
 import { setWidgetIndex, setWidgetPageIndex, setWidgetItem } from "../utils/widget-instance-utils";
 const useListEventHandlers = (props) => {
@@ -82,7 +82,8 @@ const useListEventHandlers = (props) => {
   );
   const handleListItemClick = useCallback(
     (event, item) => {
-      if (disableitem) return;
+      const itemIndex = findIndex(items, (i) => i === item);
+      if (resolveDisableItem(disableitem, item, itemIndex)) return;
       const selectCount = selectedItems.length;
       const isItemSelected = includes(selectedItems, item);
       const isItemActive = activeItems.has(item);

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

@@ -8,10 +8,11 @@ declare const WmListStandalone: React.ComponentType<{
     dataset?: any;
     datasource?: import("../../../variables/live-variable").LiveVariableConfig;
     direction?: import("./props").IDirection;
-    disableitem?: boolean;
+    disableitem?: import("./props").DisableItemProp<ListItemData>;
     enablereorder?: boolean;
     groupby?: string;
     iconclass?: string;
+    iconurl?: string;
     itemclass?: string | ((item: ListItemData) => string | null | undefined);
     itemsperrow?: string;
     listclass?: string;
@@ -21,6 +22,7 @@ declare const WmListStandalone: React.ComponentType<{
     loadingdatamsg?: string;
     skeletonRows?: number;
     loadingicon?: string;
+    loadingiconurl?: string;
     maxsize?: number;
     statehandler?: StorageType;
     navigation?: import("./props").INavigation;
@@ -115,6 +117,7 @@ declare const WmListStandalone: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmListStandalone as WmList };
 /**
@@ -178,5 +181,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/data/list/index.js

@@ -37,7 +37,7 @@ import { AppSpinner } from "../../common";
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 import {
   useListData,
@@ -56,8 +56,7 @@ import {
   LIST_DEFAULTS,
   LIST_MESSAGES,
   LIST_ALIGN,
-  LIST_DIRECTION,
-  INSETION_POSITION
+  LIST_DIRECTION
 } from "./utils/constants";
 import {
   getItemsPerRowClass,
@@ -122,9 +121,11 @@ const WmList = (props) => {
     title = "",
     subheading = "",
     iconclass = "",
+    iconurl,
     nodatamessage = LIST_MESSAGES.NO_DATA,
     loadingdatamsg = LIST_MESSAGES.LOADING,
-    loadingicon = "fa-spinner",
+    loadingicon = "fa fa-circle-o-notch",
+    loadingiconurl,
     ondemandmessage = LIST_MESSAGES.LOAD_MORE,
     // Styling Classes
     listclass = "list-group media-list",
@@ -467,7 +468,16 @@ const WmList = (props) => {
   }, [datasource]);
   useLayoutSize(ListWrapperRef, props.layoutWidth, props.layoutHeight);
   const showHorizontalScrollSentinel = showNavigation && navigation === LIST_NAVIGATION_TYPES.SCROLL && (direction === LIST_DIRECTION.HORIZONTAL || direction === "row");
-  const hostAutoLayoutPrefixes = ["pos-", ...INSETION_POSITION, "zi-", "w-", "h-"];
+  const hostAutoLayoutPrefixes = [
+    "wm-pos-",
+    "wm-top",
+    "wm-bottom",
+    "wm-left",
+    "wm-right",
+    "wm-zi-",
+    "wm-w-",
+    "wm-h-"
+  ];
   const wrapper_autoLayout_Classes = useMemo(
     () => filterAutoLayoutClasses(layoutClassName, hostAutoLayoutPrefixes),
     [layoutClassName]
@@ -490,7 +500,7 @@ const WmList = (props) => {
     }),
     [direction, wrap, alignment, gap, columngap]
   );
-  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton))
     return /* @__PURE__ */ jsx(
       WmSkeleton,
       __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmList"]), {
@@ -515,7 +525,16 @@ const WmList = (props) => {
       "data-navigation": navigation,
       ref: ListWrapperRef,
       children: [
-        /* @__PURE__ */ jsx(ListHeader, { title, subheading, iconclass }),
+        /* @__PURE__ */ jsx(
+          ListHeader,
+          {
+            title,
+            subheading,
+            iconclass,
+            iconurl,
+            prefabName: props.prefabName
+          }
+        ),
         /* @__PURE__ */ jsx(AppSpinner, { show: (_e = datasource == null ? void 0 : datasource.loading) != null ? _e : false, spinnermessages: [loadingdatamsg] }),
         /* @__PURE__ */ jsxs(
           InlineNavigation,
@@ -570,9 +589,11 @@ const WmList = (props) => {
                         nodatamessage,
                         ondemandmessage,
                         loadingicon,
+                        loadingiconurl,
                         loadingdatamsg,
                         paginationclass,
                         isLoadingMore: listState.isLoadingMore,
+                        prefabName: props.prefabName,
                         collapsible,
                         showcount,
                         groupCollapsed: listState.groupCollapsed,

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

@@ -25,6 +25,10 @@ export type IColumnAlignment = "start" | "center" | "end";
 export type ListItemData = Record<string, unknown> & {
     _wmListItemId?: string;
 };
+/**
+ * Per-item disable flag: static boolean or callback evaluated per list row.
+ */
+export type DisableItemProp<T = ListItemData> = boolean | ((item: T, index: number) => boolean);
 export type ListItemEventHandler = (event: React.MouseEvent, widget: unknown) => void;
 export type ListPageEventHandler = (event: React.MouseEvent | null, page: number) => void;
 export type ListReorderEventHandler<T = ListItemData> = (event: React.MouseEvent | null, data: T[], changedItem: T) => void;
@@ -64,9 +68,9 @@ export interface ListProps<T = ListItemData> {
      */
     direction?: IDirection;
     /**
-     * Whether to disable list items.
+     * Whether to disable list items (boolean or per-item callback).
      */
-    disableitem?: boolean;
+    disableitem?: DisableItemProp<T>;
     /**
      * Whether to enable reordering of list items.
      */
@@ -79,6 +83,10 @@ export interface ListProps<T = ListItemData> {
      * CSS class for the list icon.
      */
     iconclass?: string;
+    /**
+     * URL for the list icon (.svg renders inline, other URLs as image).
+     */
+    iconurl?: string;
     /**
      * CSS class or function returning a class for each list item.
      */
@@ -116,6 +124,10 @@ export interface ListProps<T = ListItemData> {
      * CSS class for the loading icon.
      */
     loadingicon?: string;
+    /**
+     * URL for the loading icon (.svg renders inline, other URLs as image).
+     */
+    loadingiconurl?: string;
     /**
      * Maximum size of the collection.
      */

package/components/data/list/utils/constants.d.ts

@@ -49,4 +49,3 @@ export declare const LIST_ALIGN: {
     readonly RIGHT: "right";
 };
 export declare const DEFAULT_PAGINATION_META: IPaginationMeta;
-export declare const INSETION_POSITION: readonly ["top", "bottom", "left", "right"];

package/components/data/list/utils/constants.js

@@ -56,12 +56,10 @@ const DEFAULT_PAGINATION_META = {
   number: 0,
   empty: true
 };
-const INSETION_POSITION = ["top", "bottom", "left", "right"];
 export {
   APP_LOCALE,
   DEFAULT_CLS,
   DEFAULT_PAGINATION_META,
-  INSETION_POSITION,
   LIST_ALIGN,
   LIST_DEFAULTS,
   LIST_DIRECTION,

package/components/data/list/utils/list-helpers.d.ts

@@ -1,4 +1,4 @@
-import { IAlignment, IDirection, ListItemData } from "../props";
+import { DisableItemProp, IAlignment, IDirection, ListItemData } from "../props";
 import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
 /**
  * Get items per row CSS classes based on configuration
@@ -20,6 +20,10 @@ export declare function hasListGroupAutoLayoutClass(layoutProps: {
     gap?: unknown;
     columngap?: unknown;
 }): boolean;
+/**
+ * Resolves disableitem prop to a boolean for a single list row.
+ */
+export declare const resolveDisableItem: <T extends ListItemData>(disableitem: DisableItemProp<T> | undefined, item: T, index: number) => boolean;
 /**
  * Get safe dataset ensuring it's always an array
  * @param dataset - Input dataset of any type