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

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

@@ -9,7 +9,9 @@ declare const WmRatingStandalone: React.ComponentType<import("../../data/form/fo
     iconcolor?: string;
     iconsize?: string;
     activeiconclass?: string;
+    activeiconurl?: string;
     inactiveiconclass?: string;
+    inactiveiconurl?: string;
     setDatasetItems?: (items: RatingItem[]) => void;
     dataset?: any;
     datafield?: string;
@@ -93,6 +95,7 @@ declare const WmRatingStandalone: React.ComponentType<import("../../data/form/fo
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmRatingStandalone as WmRating };
 /**
@@ -129,7 +132,9 @@ declare const _default: React.ComponentType<{
     iconcolor?: string;
     iconsize?: string;
     activeiconclass?: string;
+    activeiconurl?: string;
     inactiveiconclass?: string;
+    inactiveiconurl?: string;
     setDatasetItems?: (items: RatingItem[]) => void;
     dataset?: any;
     datafield?: string;
@@ -208,5 +213,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/input/rating/index.js

@@ -23,6 +23,7 @@ import clsx from "clsx";
 import Tooltip from "@mui/material/Tooltip";
 import { isEmpty, isEqual } from "lodash-es";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import { Box } from "@mui/material";
 import { transformDataset } from "../../../utils/transformedDataset-utils";
 import withFormController from "../../data/form/form-controller/withFormController";
@@ -47,7 +48,9 @@ const WmRating = memo((props) => {
     iconcolor,
     iconsize,
     activeiconclass = DEFAULT_ICON_CLASS.active,
+    activeiconurl,
     inactiveiconclass = DEFAULT_ICON_CLASS.inactive,
+    inactiveiconurl,
     datasetItems = [],
     value,
     datafield = "index",
@@ -411,11 +414,13 @@ const WmRating = memo((props) => {
         ),
         children: [
           /* @__PURE__ */ jsx(
-            Box,
+            WmAppIcon,
             {
-              component: "i",
-              className: clsx("app-icon", "wm-rating-star-icon", iconClass),
-              "aria-hidden": "true"
+              iconclass: isActive ? activeiconclass : inactiveiconclass,
+              iconurl: isActive ? activeiconurl : inactiveiconurl,
+              prefabName: props.prefabName,
+              defaultClasses: "wm-rating-star-icon",
+              alt: "Rating"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -440,7 +445,7 @@ const WmRating = memo((props) => {
     {
       hidden: props.hidden,
       sx: __spreadProps(__spreadValues({}, styles), { height, width }),
-      className: clsx("app-ratings", { disabled: readonly }),
+      className: clsx("app-ratings", { disabled: readonly }, props.className),
       ref: ratingsRef,
       tabIndex: (_a = props.tabindex) != null ? _a : 0,
       children: /* @__PURE__ */ jsxs(

package/components/input/rating/props.d.ts

@@ -52,11 +52,19 @@ export interface RatingProps {
      * @default "wi wi-star"
      */
     activeiconclass?: string;
+    /**
+     * URL for the active (selected) icon.
+     */
+    activeiconurl?: string;
     /**
      * CSS class for the inactive (unselected) icon.
      * @default "wi wi-star-border"
      */
     inactiveiconclass?: string;
+    /**
+     * URL for the inactive (unselected) icon.
+     */
+    inactiveiconurl?: string;
     /**
      * Setter function for dataset items (injected by HOC).
      */

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

@@ -75,6 +75,7 @@ declare const WmSelectStandalone: React.ComponentType<import("../../data/form/fo
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmSelectStandalone as WmSelect };
 /**
@@ -173,5 +174,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -17,7 +17,9 @@ declare const WmSliderStandalone: React.ComponentType<import("../../data/form/fo
     markerlabeltext?: string | string[];
     showicons?: boolean;
     starticon?: string;
+    starticonurl?: string;
     endicon?: string;
+    endiconurl?: string;
     rangelabelposition?: "top" | "bottom" | "side";
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
@@ -69,6 +71,7 @@ declare const WmSliderStandalone: React.ComponentType<import("../../data/form/fo
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmSliderStandalone as WmSlider };
 /**
@@ -114,7 +117,9 @@ declare const _default: React.ComponentType<{
     markerlabeltext?: string | string[];
     showicons?: boolean;
     starticon?: string;
+    starticonurl?: string;
     endicon?: string;
+    endiconurl?: string;
     rangelabelposition?: "top" | "bottom" | "side";
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
@@ -162,5 +167,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/input/slider/index.js

@@ -23,6 +23,7 @@ import clsx from "clsx";
 import Box from "@mui/material/Box";
 import { Input } from "@base-ui-components/react/input";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import withFormController from "../../data/form/form-controller/withFormController";
 import { convertDataToObject } from "../../../utils/transformedDataset-utils";
 import withStandalone from "../../../higherOrder/withStandalone";
@@ -49,7 +50,9 @@ const WmSlider = memo(
       markerlabeltext,
       showicons = false,
       starticon = "wi wi-minus",
+      starticonurl,
       endicon = "wi wi-plus",
+      endiconurl,
       rangelabelposition = "bottom"
     } = props;
     const initialValue = datavalue !== void 0 ? datavalue : (minvalue + maxvalue) / 2;
@@ -249,7 +252,14 @@ const WmSlider = memo(
                 name: "decrementButton",
                 onClick: decrementButtonClick,
                 disabled,
-                children: /* @__PURE__ */ jsx(Box, { component: "i", "aria-hidden": "true", className: starticon })
+                children: /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: starticon,
+                    iconurl: starticonurl,
+                    prefabName: props.prefabName
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsxs(Box, { className: "slider-control wm-slider-control", style: sliderControlStyle, children: [
@@ -293,7 +303,14 @@ const WmSlider = memo(
                 name: "incrementButton",
                 onClick: incrementButtonClick,
                 disabled,
-                children: /* @__PURE__ */ jsx(Box, { component: "i", "aria-hidden": "true", className: endicon })
+                children: /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: endicon,
+                    iconurl: endiconurl,
+                    prefabName: props.prefabName
+                  }
+                )
               }
             )
           ] }),

package/components/input/slider/props.d.ts

@@ -74,10 +74,12 @@ export interface SliderProps {
      * CSS class for the icon at the start of the slider.
      */
     starticon?: string;
+    starticonurl?: string;
     /**
      * CSS class for the icon at the end of the slider.
      */
     endicon?: string;
+    endiconurl?: string;
     /**
      * Position of range labels (min/max).
      * @default "top"

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

@@ -22,7 +22,9 @@ declare const WmTextStandalone: import("react").ComponentType<import("../../data
     autocapitalize?: "none" | "sentences" | "words" | "characters";
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
     leadingiconclass?: string;
+    leadingiconurl?: string;
     trailingiconclass?: string;
+    trailingiconurl?: string;
     supportingtext?: string;
     onLeadingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
     onTrailingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
@@ -78,6 +80,7 @@ declare const WmTextStandalone: import("react").ComponentType<import("../../data
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmTextStandalone as WmText };
 /**
@@ -104,7 +107,7 @@ declare const _default: import("react").ComponentType<{
     regexp?: string | (RegExp & string);
     validationmessage?: string;
     hint?: string;
-    type?: "number" | "url" | "search" | "text" | "color" | "email" | "password" | "tel";
+    type?: "number" | "search" | "text" | "url" | "color" | "email" | "password" | "tel";
     observe?: string[];
     onBlur?: ((e: any) => void) & ((event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void);
     datavaluesource?: Record<string, unknown>;
@@ -125,7 +128,9 @@ declare const _default: import("react").ComponentType<{
     autocapitalize?: "none" | "sentences" | "words" | "characters";
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newVal: string | null, oldVal: string | null) => void;
     leadingiconclass?: string;
+    leadingiconurl?: string;
     trailingiconclass?: string;
+    trailingiconurl?: string;
     supportingtext?: string;
     onLeadingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
     onTrailingiconclick?: (event: React.MouseEvent<HTMLButtonElement>, widget?: Record<string, unknown>) => void;
@@ -177,5 +182,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/input/text/index.js

@@ -25,6 +25,7 @@ import clsx from "clsx";
 import toNumber from "lodash-es/toNumber";
 import debounce from "lodash-es/debounce";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import withFormController from "../../data/form/form-controller/withFormController";
 import { formatInput, removeDisplayFormat, applyAutoCapitalize, getFormatMaxLength } from "./util";
 import delay from "lodash-es/delay";
@@ -68,7 +69,9 @@ const WmText = memo(
       id,
       error,
       leadingiconclass,
+      leadingiconurl,
       trailingiconclass,
+      trailingiconurl,
       supportingtext,
       onLeadingiconclick,
       onTrailingiconclick
@@ -388,7 +391,7 @@ const WmText = memo(
             name: "supportingText"
           },
           input: {
-            startAdornment: leadingiconclass ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+            startAdornment: leadingiconclass || leadingiconurl ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -397,10 +400,17 @@ const WmText = memo(
                 onClick: handleLeadingIconClick,
                 "aria-hidden": "true",
                 tabIndex: -1,
-                children: /* @__PURE__ */ jsx("i", { "aria-hidden": "true", className: leadingiconclass })
+                children: /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: leadingiconclass,
+                    iconurl: leadingiconurl,
+                    prefabName: props.prefabName
+                  }
+                )
               }
             ) }) : void 0,
-            endAdornment: trailingiconclass ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            endAdornment: trailingiconclass || trailingiconurl ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -409,7 +419,14 @@ const WmText = memo(
                 onClick: handleTrailingIconClick,
                 "aria-hidden": "true",
                 tabIndex: -1,
-                children: /* @__PURE__ */ jsx("i", { "aria-hidden": "true", className: trailingiconclass })
+                children: /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: trailingiconclass,
+                    iconurl: trailingiconurl,
+                    prefabName: props.prefabName
+                  }
+                )
               }
             ) }) : void 0
           },
@@ -421,8 +438,8 @@ const WmText = memo(
               DEFAULT_CLASS,
               className,
               "wm-text-input",
-              leadingiconclass && "with-leading-icon",
-              trailingiconclass && "with-trailing-icon",
+              (leadingiconclass || leadingiconurl) && "with-leading-icon",
+              (trailingiconclass || trailingiconurl) && "with-trailing-icon",
               isTouched ? "ng-touched" : "ng-untouched",
               displayError && "ng-invalid"
             ),
@@ -454,7 +471,9 @@ const WmText = memo(
       "className",
       "hidden",
       "leadingiconclass",
+      "leadingiconurl",
       "trailingiconclass",
+      "trailingiconurl",
       "supportingtext"
     ];
     return keys.every((key) => prev[key] === current[key]);

package/components/input/text/props.d.ts

@@ -102,10 +102,18 @@ export interface TextProps {
      * CSS class for the leading icon.
      */
     leadingiconclass?: string;
+    /**
+     * URL for the leading icon (.svg renders inline, other URLs as image).
+     */
+    leadingiconurl?: string;
     /**
      * CSS class for the trailing icon.
      */
     trailingiconclass?: string;
+    /**
+     * URL for the trailing icon (.svg renders inline, other URLs as image).
+     */
+    trailingiconurl?: string;
     /**
      * Supporting text displayed below the input.
      */

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

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

package/components/input/textarea/index.js

@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { Fragment, jsx } from "react/jsx-runtime";
-import { memo, useEffect, useRef, useState, useCallback } from "react";
+import { memo, useEffect, useRef, useState, useCallback, useMemo } from "react";
 import clsx from "clsx";
 import TextField from "@mui/material/TextField";
 import * as lodash from "lodash-es";
@@ -24,6 +24,7 @@ import withFormController from "../../data/form/form-controller/withFormControll
 import delay from "lodash-es/delay";
 import { sanitizeInputValue } from "../util";
 import withStandalone from "../../../higherOrder/withStandalone";
+import { resolveCharacterCountText } from "./util";
 const DEFAULT_CLASS = "form-control app-textarea";
 const TextareaCount = ({ children }) => /* @__PURE__ */ jsx("div", { className: "textarea-count", children });
 const WmTextarea = memo(
@@ -146,11 +147,15 @@ const WmTextarea = memo(
     }, [shortcutkey]);
     const handleUpdateCharLength = useCallback(
       (charLength) => {
-        if ((listener == null ? void 0 : listener.onChange) && limitdisplaytext !== "") {
+        if ((listener == null ? void 0 : listener.onChange) && (limitdisplaytext !== "" || maxchars)) {
           debouncedCharLengthUpdate(charLength);
         }
       },
-      [limitdisplaytext, debouncedCharLengthUpdate]
+      [limitdisplaytext, maxchars, debouncedCharLengthUpdate]
+    );
+    const characterCountText = useMemo(
+      () => maxchars ? resolveCharacterCountText(maxchars, displayValue, limitdisplaytext) : void 0,
+      [maxchars, displayValue, limitdisplaytext]
     );
     const handleInputChange = useCallback((event) => {
       var _a;
@@ -273,7 +278,7 @@ const WmTextarea = memo(
         ),
         style: styles,
         "aria-readonly": readonly,
-        helperText: maxchars ? limitdisplaytext.replaceAll("undefined", `${(displayValue == null ? void 0 : displayValue.length) || 0}`) : void 0,
+        helperText: characterCountText,
         slotProps: {
           htmlInput: {
             type: "textarea",

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

@@ -0,0 +1 @@
+export declare const resolveCharacterCountText: (maxchars: number, displayValue: string, limitdisplaytext: string) => string;

package/components/input/textarea/util.js

@@ -0,0 +1,17 @@
+const resolveCharacterCountText = (maxchars, displayValue, limitdisplaytext) => {
+  var _a;
+  const currentLength = (_a = displayValue == null ? void 0 : displayValue.length) != null ? _a : 0;
+  if (!limitdisplaytext) {
+    return `${currentLength}/${maxchars}`;
+  }
+  if (/left out of/i.test(limitdisplaytext)) {
+    return `${Math.max(maxchars - currentLength, 0)} characters left out of ${maxchars}`;
+  }
+  if (/filled out of/i.test(limitdisplaytext)) {
+    return `${currentLength} characters filled out of ${maxchars}`;
+  }
+  return `${currentLength}/${maxchars}`;
+};
+export {
+  resolveCharacterCountText
+};

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

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

package/components/navbar/index.d.ts

@@ -3,6 +3,9 @@ export declare const WmNavbar: import("react").MemoExoticComponent<(props: BaseP
     title?: string;
     brandHref?: string;
     showToggle?: boolean;
+    menuiconclass?: string;
+    menuiconurl?: string;
+    imgsrc?: string;
 }) => import("react/jsx-runtime").JSX.Element>;
 /**
  * The WmNavbar component renders a top navigation bar with brand, toggle, and child nav items.
@@ -65,8 +68,12 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
     title?: string;
     brandHref?: string;
     showToggle?: boolean;
+    menuiconclass?: string;
+    menuiconurl?: string;
+    imgsrc?: string;
 }>>;
 export default _default;

package/components/navbar/index.js

@@ -38,7 +38,7 @@ import Link from "@mui/material/Link";
 import {
   withBaseWrapper
 } from "../../higherOrder/withBaseWrapper";
-import { WmButton } from "../form/button";
+import { WmAppIcon } from "../common/WmAppIcon";
 import { removeInvalidAttributes } from "../../utils/attr";
 const DEFAULT_CLASS = "navbar navbar-default app-navbar";
 const WmNavbar = memo(
@@ -51,6 +51,8 @@ const WmNavbar = memo(
       title,
       brandHref = "#",
       showToggle = true,
+      menuiconclass = "wi wi-more-vert",
+      menuiconurl,
       listener
     } = _a, restProps = __objRest(_a, [
       "className",
@@ -60,6 +62,8 @@ const WmNavbar = memo(
       "title",
       "brandHref",
       "showToggle",
+      "menuiconclass",
+      "menuiconurl",
       "listener"
     ]);
     const [isCollapsed, setIsCollapsed] = useState(true);
@@ -83,16 +87,26 @@ const WmNavbar = memo(
       }, removeInvalidAttributes(restProps)), {
         children: /* @__PURE__ */ jsxs(Box, { component: "div", className: "container-fluid", children: [
           /* @__PURE__ */ jsxs(Box, { component: "div", className: "navbar-header", children: [
-            showToggle && /* @__PURE__ */ jsx(
-              WmButton,
+            showToggle && /* @__PURE__ */ jsxs(
+              "button",
               {
-                name: "navbar-toggle",
                 type: "button",
                 className: clsx("btn-transparent navbar-toggle", { collapsed: isCollapsed }),
                 onClick: handleToggle,
-                arialabel: "Toggle navigation",
-                iconclass: "wi wi-more-vert",
-                listener
+                "aria-label": "Toggle navigation",
+                "aria-expanded": !isCollapsed,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle navigation" }),
+                  /* @__PURE__ */ jsx(
+                    WmAppIcon,
+                    {
+                      iconclass: menuiconclass,
+                      iconurl: menuiconurl,
+                      prefabName: props.prefabName,
+                      alt: "Menu icon"
+                    }
+                  )
+                ]
               }
             ),
             title && /* @__PURE__ */ jsx(Link, { className: "navbar-brand", href: brandHref, underline: "none", children: /* @__PURE__ */ jsx("span", { className: "title", children: title }) })

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

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

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

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

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

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

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

@@ -30,10 +30,10 @@ declare const _default: React.ComponentType<{
     loggedInUser?: import("../../../store/slices/authSlice").LoggedInUserConfig | null;
     type?: "button" | "anchor";
     prefabName?: string;
+    caption?: string;
     key?: string;
     loading?: boolean;
     id?: string;
-    caption?: string;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     "data-widget-id"?: string;
     datavalue?: any;
@@ -75,8 +75,10 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     showSkeleton?: boolean;
+    widget?: string;
     orderby?: string;
     iconclass?: string;
+    iconurl?: string;
     onSelect?: ($event: React.MouseEvent<HTMLElement>, widget: any, $item: any) => void;
     shortcutkey?: string;
     iconposition?: string;

package/components/navigation/menu/index.js

@@ -36,6 +36,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import { transformDataset } from "../../../utils/transformedDataset-utils";
 import {
   POSITION,
@@ -82,6 +83,7 @@ const WmMenu = memo((props) => {
     menuclass,
     linktarget = "_self",
     iconclass,
+    iconurl,
     type = "button",
     animateitems,
     disableMenuContext = false,
@@ -130,6 +132,7 @@ const WmMenu = memo((props) => {
     "menuclass",
     "linktarget",
     "iconclass",
+    "iconurl",
     "type",
     "animateitems",
     "disableMenuContext",
@@ -389,7 +392,7 @@ const WmMenu = memo((props) => {
         icon: ((_d = item.dataObject) == null ? void 0 : _d.icon) || icon,
         link,
         target: (_e = item.dataObject) == null ? void 0 : _e.target
-      }), item == null ? void 0 : item.value);
+      }), typeof (item == null ? void 0 : item.value) === "object" && (item == null ? void 0 : item.value) !== null ? item.value : {});
       if (onSelect) {
         onSelect(event, props, simplifiedItem);
       }
@@ -1009,7 +1012,15 @@ const WmMenu = memo((props) => {
             }
           }, removeInvalidAttributes(restProps)), {
             children: [
-              iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", iconclass), "aria-hidden": "true" }),
+              (iconclass || iconurl) && /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass,
+                  iconurl,
+                  prefabName: props.prefabName,
+                  alt: "Menu icon"
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${caption} ${(_c = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _c.LABEL_ICON}` }),
               /* @__PURE__ */ jsx("span", { className: "anchor-caption", children: caption || "" }),
               /* @__PURE__ */ jsx(
@@ -1028,7 +1039,6 @@ const WmMenu = memo((props) => {
           __spreadProps(__spreadValues({
             className: clsx(
               "btn dropdown-toggle",
-              `icon-position-${iconposition}`,
               "app-button",
               menuclass,
               `menu-layout-${menulayout}`,
@@ -1050,7 +1060,15 @@ const WmMenu = memo((props) => {
             }, buttonStyles), menuContainerStyles)
           }, removeInvalidAttributes(restProps)), {
             children: [
-              iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", iconclass), "aria-hidden": "true" }),
+              (iconclass || iconurl) && /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass,
+                  iconurl,
+                  prefabName: props.prefabName,
+                  alt: "Menu icon"
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "btn-caption", children: caption }),
               /* @__PURE__ */ jsx(
                 "span",