@wavemaker-ai/react-runtime 1.0.0-rc.647655 → 1.0.0-rc.647684

package/components/dialogs/index.js

@@ -18,11 +18,13 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
-import React, { memo, useEffect } from "react";
+import React, { memo, useEffect, useMemo } from "react";
 import Dialog from "@mui/material/Dialog";
 import Fade from "@mui/material/Fade";
 import clsx from "clsx";
+import { useAppState } from "../../context/WidgetProvider";
 import { Box } from "@mui/material";
+import { getFragmentCssScopeClass } from "../../utils/style-utils";
 const DEFAULT_CLASS = "modal fade in";
 const FadeTransition = React.forwardRef(function FadeTransition2(props, ref) {
   return /* @__PURE__ */ jsx(
@@ -56,6 +58,16 @@ const useBodyScrollLock = (lock) => {
 const WmDialog = memo((props) => {
   const { children, className, open = false, onClose, modal = false, onTransitionEntered } = props;
   useBodyScrollLock(open);
+  const appState = useAppState();
+  const cssScopeClass = useMemo(
+    () => getFragmentCssScopeClass({
+      componentName: appState == null ? void 0 : appState.componentName,
+      name: appState == null ? void 0 : appState.name,
+      componentType: appState == null ? void 0 : appState.componentType,
+      type: appState == null ? void 0 : appState.type
+    }),
+    [appState == null ? void 0 : appState.componentName, appState == null ? void 0 : appState.name, appState == null ? void 0 : appState.componentType, appState == null ? void 0 : appState.type]
+  );
   const transitionType = FadeTransition;
   const pageRef = document.getElementsByClassName("app-page")[0] || null;
   const handleClose = (event, reason) => {
@@ -130,7 +142,7 @@ const WmDialog = memo((props) => {
           width: "var(--wm-modal-full-screen-width)"
         }, sheetPositionStyles))
       },
-      children: /* @__PURE__ */ jsx(Box, { className: clsx(className), children })
+      children: /* @__PURE__ */ jsx("div", { className: clsx(cssScopeClass), children: /* @__PURE__ */ jsx(Box, { className: clsx(className), children }) })
     })
   );
 });

package/components/input/chips/index.js

@@ -100,6 +100,10 @@ const WmChips = React.memo(
     const [uniqueKeyCounter, setUniqueKeyCounter] = useState(0);
     const [isInitialized, setIsInitialized] = useState(false);
     const backspaceArmedRef = useRef(false);
+    const chipsListRef = useRef(chipsList);
+    chipsListRef.current = chipsList;
+    const modelByValueRef = useRef(modelByValue);
+    modelByValueRef.current = modelByValue;
     const maxSizeReached = "Max size reached";
     const isFullWidth = inputwidth === "full";
     const generateStableKeyCb = useCallback(
@@ -219,7 +223,20 @@ const WmChips = React.memo(
             };
             newChipsList.push(chipObj);
           } else {
-            searchQuery2.push(val);
+            const existingChip = chipsListRef.current.find((chip) => {
+              var _a2, _b;
+              const chipModelValue = (_b = (_a2 = chip.dataObject) == null ? void 0 : _a2[datafield]) != null ? _b : chip.value;
+              return isEqual(chip.value, val) || isEqual(chipModelValue, val);
+            });
+            if (existingChip) {
+              newChipsList.push(__spreadProps(__spreadValues({}, existingChip), {
+                key: generateStableKeyCb(existingChip.value, i),
+                active: false,
+                isDuplicate: false
+              }));
+            } else {
+              searchQuery2.push(val);
+            }
           }
         });
         if (searchQuery2.length && datafield !== "All Fields") {
@@ -248,16 +265,23 @@ const WmChips = React.memo(
     const debouncedUpdateQueryModel = useMemo(() => {
       return debounce(updateQueryModel, 150);
     }, [updateQueryModel]);
+    const debouncedUpdateQueryModelRef = useRef(debouncedUpdateQueryModel);
+    useEffect(() => {
+      debouncedUpdateQueryModelRef.current = debouncedUpdateQueryModel;
+    }, [debouncedUpdateQueryModel]);
     useEffect(() => {
       if (isInitialized && datavalue !== void 0) {
-        debouncedUpdateQueryModel(datavalue);
+        if (isEqual(datavalue, modelByValueRef.current)) {
+          return;
+        }
+        debouncedUpdateQueryModelRef.current(datavalue);
       } else if (datavalue == void 0 || datavalue.length == 0) {
         setChipsList([]);
         setSearchQuery(void 0);
         setModelByValue([]);
         updateMaxSize(0);
       }
-    }, [datavalue, debouncedUpdateQueryModel]);
+    }, [datavalue, isInitialized]);
     const addItem = useCallback(
       (newItem) => {
         performAddItem(
@@ -447,7 +471,7 @@ const WmChips = React.memo(
         formEl.removeEventListener("wmformreset", handleFormReset);
       };
     }, []);
-    const renderChipsList = () => {
+    const RenderChipsList = () => {
       const sensors = useSensors(
         useSensor(PointerSensor, {
           activationConstraint: { distance: 5 }
@@ -624,7 +648,7 @@ const WmChips = React.memo(
         className: "wm-chips-root",
         ref: rootRef,
         style: __spreadValues({ width, height }, styles),
-        children: renderChipsList()
+        children: RenderChipsList()
       }
     );
   },

package/components/input/color-picker/index.js

@@ -513,8 +513,8 @@ const WmColorPicker = memo(
         window.removeEventListener("resize", updatePosition);
       };
     }, [isOpen, calculatePosition, setPickerPosition]);
-    const checkPlaceholder = () => {
-      setTimeout(() => {
+    useEffect(() => {
+      const timeoutId = setTimeout(() => {
         var _a2;
         const captionEl = (_a2 = containerRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
         if (captionEl && !captionEl.classList.contains("float-active")) {
@@ -523,10 +523,8 @@ const WmColorPicker = memo(
           setPlaceholder(placeholder);
         }
       }, 100);
-    };
-    useEffect(() => {
-      checkPlaceholder();
-    }, [inputValue, isInteractingWithPicker]);
+      return () => clearTimeout(timeoutId);
+    }, [inputValue, isInteractingWithPicker, placeholder]);
     return /* @__PURE__ */ jsxs(
       Box,
       {

package/components/input/epoch/date/index.js

@@ -69,7 +69,7 @@ const WmDate = forwardRef((props, ref) => {
     onMouseEnter,
     onMouseLeave,
     onBeforeload,
-    placeholder = "Select Date",
+    placeholder = "Select date",
     tabindex = 0,
     datepattern: datepatternProp,
     outputformat = "yyyy-MM-dd",
@@ -153,7 +153,7 @@ const WmDate = forwardRef((props, ref) => {
     () => {
       var _a2;
       return [
-        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y",
+        defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "yyyy-MM-dd",
         selectedLocale || (listener == null ? void 0 : listener.selectedLocale) || "en"
       ];
     },
@@ -255,6 +255,7 @@ const WmDate = forwardRef((props, ref) => {
     if (!dateValue) return "";
     try {
       const momentDate = moment(dateValue).locale(currentLocale);
+      if (!momentDate.isValid()) return "";
       const momentPattern = convertToMomentFormat(datepattern);
       return momentDate.format(momentPattern);
     } catch (e) {

package/components/input/epoch/date/utils.js

@@ -57,10 +57,12 @@ const parseExcludedDates = (excludedates, getDateObj) => {
 };
 const defaultGetDateObj = (date) => {
   if (!date) return null;
-  if (date instanceof Date) return date;
+  if (date instanceof Date) return isNaN(date.getTime()) ? null : date;
   if (typeof date === "string") {
     const parsedDate = moment(date).toDate();
-    return isNaN(parsedDate.getTime()) ? new Date(date) : parsedDate;
+    if (!isNaN(parsedDate.getTime())) return parsedDate;
+    const fallbackDate = new Date(date);
+    return isNaN(fallbackDate.getTime()) ? null : fallbackDate;
   }
   return null;
 };

package/components/input/epoch/datetime/index.js

@@ -96,8 +96,8 @@ const WmDateTime = memo(
     const defaultDateTimeFormat = useMemo(() => {
       const combinedFromParts = () => {
         var _a2, _b2;
-        const datePart = defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "MMM d, y";
-        const timePart = defaultTimeFormat || ((_b2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b2.time) || "h:mm:ss a";
+        const datePart = defaultDateFormat || ((_a2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _a2.date) || "yyyy-MM-dd";
+        const timePart = defaultTimeFormat || ((_b2 = listener == null ? void 0 : listener.localeFormats) == null ? void 0 : _b2.time) || "hh:mm a";
         return `${datePart} ${timePart}`;
       };
       return combinedFromParts();

package/components/input/epoch/datetime/props.d.ts

@@ -45,12 +45,12 @@ export interface DateTimeProps {
     defaultDateTimeFormat?: string;
     /**
      * Default date segment for display when `datepattern` is unset and `defaultDateTimeFormat` is not set.
-     * Falls back to `listener.localeFormats.date`, then `"MMM d, y"`.
+     * Falls back to `listener.localeFormats.date`, then `"yyyy-MM-dd"`.
      */
     defaultDateFormat?: string;
     /**
      * Default time segment for display when `datepattern` is unset and `defaultDateTimeFormat` is not set.
-     * Falls back to `listener.localeFormats.time`, then `"h:mm:ss a"`.
+     * Falls back to `listener.localeFormats.time`, then `"hh:mm a"`.
      */
     defaultTimeFormat?: string;
     /**

package/components/input/epoch/time/utils.d.ts

@@ -9,7 +9,7 @@ export declare function validateTimeRange(timeValue: Date | moment.Moment | null
 export declare function validateTimeFormat(inputValue: string, pattern: string, required: boolean, validationmessage?: string): ValidationResult;
 export declare function parseTimeObj(timeValue: string | Date | null | undefined): Date | null;
 export declare const DEFAULT_CLASS = "input-group app-timeinput";
-export declare const DEFAULT_TIMEPATTERN = "h:mm:ss A";
+export declare const DEFAULT_TIMEPATTERN = "hh:mm a";
 export declare const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 export declare const READONLY_STYLES: {
     cursor: string;

package/components/input/epoch/time/utils.js

@@ -76,7 +76,7 @@ function formatDisplayTimeValue(value, pattern) {
     if (pattern === "timestamp") {
       return momentObj.valueOf().toString();
     }
-    return momentObj.isValid() ? momentObj.format(pattern) : "";
+    return momentObj.isValid() ? momentObj.format(pattern.replace(/\ba\b/g, "A")) : "";
   } catch (error) {
     console.warn("Error formatting display value:", error);
     return "";
@@ -178,7 +178,7 @@ function parseTimeObj(timeValue) {
   }
 }
 const DEFAULT_CLASS = "input-group app-timeinput";
-const DEFAULT_TIMEPATTERN = "h:mm:ss A";
+const DEFAULT_TIMEPATTERN = "hh:mm a";
 const DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
 const READONLY_STYLES = {
   cursor: "not-allowed"

package/components/input/fileupload/useFileUpload.js

@@ -30,7 +30,6 @@ const useFileUpload = (props) => {
     disabled = !fileUploadConstants.DEFAULT_VALUES.ENABLED,
     contenttype = "",
     maxfilesize,
-    uploadpath,
     datasource,
     extensions,
     filetype,
@@ -104,7 +103,7 @@ const useFileUpload = (props) => {
       const eventHandler = (_b2 = (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]) == null ? void 0 : _b2[eventName];
       return eventHandler ? eventHandler(payload.$event, listener.Widgets[name], payload.files) || true : true;
     },
-    [listener, name]
+    [name]
   );
   const fileUploadProgress = (progress) => {
     setUploadedFiles((prevFiles) => {
@@ -125,26 +124,18 @@ const useFileUpload = (props) => {
       });
     });
   };
-  useEffect(() => {
-    const progressObs = datasource && datasource._progressObservable;
-    if (progressObs) {
-      progressObs.subscribe((progress) => {
-        var _a2, _b2;
-        fileUploadProgress(progress);
-        if (progress.progress === 100) {
-          (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
-        } else if (progress.errMsg) {
-          (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
-        }
-      });
-    }
-    return () => {
-      const progressObs2 = datasource && datasource._progressObservable;
-      if (progressObs2 == null ? void 0 : progressObs2.unsubscribe) {
-        progressObs2.unsubscribe();
+  const subscribeToProgress = useCallback((progressObs) => {
+    if (!progressObs) return;
+    progressObs.subscribe((progress) => {
+      var _a2, _b2;
+      fileUploadProgress(progress);
+      if (progress.progress === 100) {
+        (_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp("File uploaded successfully", "Success");
+      } else if (progress.errMsg) {
+        (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp("File upload failed", "Error");
       }
-    };
-  }, [invokeEventCallback]);
+    });
+  }, []);
   useEffect(() => {
     const selected = getChooseFilter();
     setChooseFilter(selected);
@@ -193,7 +184,7 @@ const useFileUpload = (props) => {
     window.removeEventListener("focus", disableDropZone);
   };
   const onBeforeSelectEventCall = ($event, $files) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2;
     const files = getValidFiles(
       $files,
       contenttype,
@@ -237,14 +228,18 @@ const useFileUpload = (props) => {
         });
         if (datasource) {
           datasource._progressObservable = eventObserver();
+          subscribeToProgress(datasource._progressObservable);
           datasource.dataBinding = datasource.dataBinding || {};
           datasource.dataBinding.files = filesWithIds;
           datasource.dataSet = filesWithIds;
         }
         setUploadedFiles((prev) => multiple ? [...prev, ...filesWithIds] : [...filesWithIds]);
         listener == null ? void 0 : listener.onChange(name, { selectedFiles: filesWithIds });
-        const selectedFile = (_d = filesWithIds[0]) != null ? _d : (_c = (_b2 = fileInputRef.current) == null ? void 0 : _b2.files) == null ? void 0 : _c[0];
-        onSelect == null ? void 0 : onSelect($event, selectedFile, filesWithIds);
+        onSelect == null ? void 0 : onSelect(
+          $event,
+          (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name],
+          filesWithIds
+        );
       }
     }
   };

package/components/input/select/index.js

@@ -47,7 +47,7 @@ const WmSelect = React.memo(
       name,
       styles,
       orderby,
-      placeholder,
+      placeholder = "Select value",
       readonly = false,
       required = false,
       shortcutkey,
@@ -334,7 +334,7 @@ const WmSelect = React.memo(
       }
       prevComputedValueRef.current = currentValue;
     }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
-    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), hidden: props.hidden, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS), hidden: props.hidden, style: styles, children: /* @__PURE__ */ jsxs(
       NativeSelect,
       __spreadProps(__spreadValues({
         name,
@@ -342,7 +342,6 @@ const WmSelect = React.memo(
         className: clsx(
           isTouched ? "ng-touched" : "ng-untouched",
           isDirty ? "ng-invalid" : "ng-valid",
-          className,
           "wm-native-select-root"
         ),
         value: multiple ? computedSelectValue : (_b = (_a = computedSelectValue.key) != null ? _a : placeholder) != null ? _b : ""
@@ -365,10 +364,13 @@ const WmSelect = React.memo(
           multiple,
           disabled,
           "aria-readonly": readonly,
-          className: `app-select ${className} ${DEFAULT_CLASS}  form-control ng-valid ng-touched ng-dirty wm-app `,
+          className: clsx(
+            "app-select",
+            className || "",
+            "form-control ng-valid ng-touched ng-dirty wm-app"
+          ),
           accessKey: shortcutkey,
-          title: hint,
-          style: styles
+          title: hint
         },
         readOnly: readonly,
         children: [

package/components/input/text/index.js

@@ -369,13 +369,14 @@ const WmText = memo(
         autoFocus: autofocus,
         disabled,
         required,
-        placeholder: placeholder != null ? placeholder : "Enter text",
+        placeholder: placeholder != null ? placeholder : "Enter value",
         value: sanitizeInputValue(displayValue),
         type,
         inputRef: ref,
         error: displayError,
         "aria-readonly": readonly,
         helperText: supportingtext || void 0,
+        style: styles,
         className: clsx(
           "app-input-wrapper",
           isTouched ? "ng-touched" : "ng-untouched",
@@ -443,7 +444,6 @@ const WmText = memo(
               isTouched ? "ng-touched" : "ng-untouched",
               displayError && "ng-invalid"
             ),
-            style: styles,
             "aria-label": arialabel,
             maxLength: maxchars,
             pattern: regexp,

package/components/input/textarea/index.js

@@ -14,6 +14,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { Fragment, jsx } from "react/jsx-runtime";
 import { memo, useEffect, useRef, useState, useCallback, useMemo } from "react";
 import clsx from "clsx";
@@ -133,13 +145,22 @@ const WmTextarea = memo(
         }
       }
     }, [datavalue, isDirty, validateInput]);
+    useEffect(() => {
+      var _a2, _b;
+      const shadowTextarea = (_b = (_a2 = textareaRef.current) == null ? void 0 : _a2.closest(".wm-textarea-root")) == null ? void 0 : _b.querySelector('textarea[aria-hidden="true"]');
+      if (readonly) {
+        shadowTextarea == null ? void 0 : shadowTextarea.setAttribute("readonly", "");
+      } else {
+        shadowTextarea == null ? void 0 : shadowTextarea.removeAttribute("readonly");
+      }
+    }, [readonly]);
     useEffect(() => {
       if (!shortcutkey) return;
       const handleGlobalKeyDown = (e) => {
-        var _a;
+        var _a2;
         if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
           e.preventDefault();
-          (_a = textareaRef.current) == null ? void 0 : _a.focus();
+          (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
         }
       };
       window.addEventListener("keydown", handleGlobalKeyDown);
@@ -154,11 +175,11 @@ const WmTextarea = memo(
       [limitdisplaytext, maxchars, debouncedCharLengthUpdate]
     );
     const characterCountText = useMemo(
-      () => maxchars ? resolveCharacterCountText(maxchars, displayValue, limitdisplaytext) : void 0,
+      () => maxchars && limitdisplaytext ? resolveCharacterCountText(maxchars, displayValue, limitdisplaytext) : void 0,
       [maxchars, displayValue, limitdisplaytext]
     );
     const handleInputChange = useCallback((event) => {
-      var _a;
+      var _a2;
       const newValue = event.target.value;
       valueRef.current = newValue;
       setDisplayValue(newValue);
@@ -168,7 +189,7 @@ const WmTextarea = memo(
         debouncedUpdate(newValue);
       }
       if (onKeypress) {
-        onKeypress(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        onKeypress(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
       }
       setTimeout(() => {
         isInternalUpdate.current = false;
@@ -176,7 +197,7 @@ const WmTextarea = memo(
     }, []);
     const handleBlur = useCallback(
       (event) => {
-        var _a;
+        var _a2;
         if (readonly || disabled) {
           return;
         }
@@ -194,7 +215,7 @@ const WmTextarea = memo(
           setIsDirty(false);
         }
         if (onBlur) {
-          onBlur(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+          onBlur(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
         }
         setTimeout(() => {
           isInternalUpdate.current = false;
@@ -204,9 +225,9 @@ const WmTextarea = memo(
     );
     const handleFocus = useCallback(
       (event) => {
-        var _a;
+        var _a2;
         if (onFocus) {
-          onFocus(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+          onFocus(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
         }
       },
       [onFocus, listener, name]
@@ -219,8 +240,8 @@ const WmTextarea = memo(
         }
         if (onKeydown) {
           delay(() => {
-            var _a;
-            onKeydown(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+            var _a2;
+            onKeydown(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
           }, 0);
         }
       },
@@ -230,8 +251,8 @@ const WmTextarea = memo(
       (event) => {
         if (onKeyup) {
           delay(() => {
-            var _a;
-            onKeyup(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+            var _a2;
+            onKeyup(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
           }, 0);
         }
       },
@@ -256,6 +277,8 @@ const WmTextarea = memo(
     } : {});
     const value = sanitizeInputValue(displayValue);
     const isEditable = !readonly && !disabled;
+    const _a = styles || {}, { height: styleHeight } = _a, rootStyles = __objRest(_a, ["height"]);
+    const textareaHeight = !styleHeight ? void 0 : typeof styleHeight === "number" ? `${styleHeight}px` : String(styleHeight);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       TextField,
       __spreadValues({
@@ -276,7 +299,7 @@ const WmTextarea = memo(
           isTouched ? "ng-touched" : "ng-untouched",
           isDirty && "ng-invalid"
         ),
-        style: styles,
+        style: rootStyles,
         "aria-readonly": readonly,
         helperText: characterCountText,
         slotProps: {
@@ -299,7 +322,7 @@ const WmTextarea = memo(
               isDirty && "ng-invalid",
               isEditable ? "wm-textarea-editable" : ""
             ),
-            style: __spreadValues({}, styles.height ? { "--wm-textarea-height": `${styles.height}` } : {}),
+            style: __spreadValues({}, textareaHeight ? { "--wm-textarea-height": textareaHeight } : {}),
             pattern: regexp
           }
         },
@@ -320,7 +343,9 @@ const WmTextarea = memo(
       "autofocus",
       "arialabel",
       "limitdisplaytext",
-      "hidden"
+      "hidden",
+      "styles",
+      "className"
     ];
     return keys.every((key) => prev[key] === current[key]);
   }

package/components/navbar/nav/index.js

@@ -61,14 +61,19 @@ const WmNav = memo(
     }, [dataset, orderby]);
     const triggerActionClickForAnchor = (e, item) => {
       e == null ? void 0 : e.preventDefault();
+      const navigate = () => {
+        triggerItemAction({
+          label: getItemLabel(item),
+          link: item[props.itemlink || "link"],
+          target: item[props.itemtarget]
+        });
+      };
       if (props.onSelect) {
         props.onSelect(e, props, item);
+        setTimeout(navigate, 0);
+      } else {
+        navigate();
       }
-      triggerItemAction({
-        label: getItemLabel(item),
-        link: item[props.itemlink || "link"],
-        target: item[props.itemtarget]
-      });
     };
     const getItemLabel = (item) => {
       const { itemlabel } = props;

package/components/navigation/breadcrumb/index.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import withDatasetAwareNavigation from "../../../higherOrder/DataNav";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 const BreadCrumb = (props) => {
   const { className, onBeforenavigate, itemtarget, navNodes = [] } = props;
   function handleBeforeNavigate(e, node) {
@@ -11,7 +12,7 @@ const BreadCrumb = (props) => {
     }
   }
   const renderNavItem = (node, index, isLast = false) => /* @__PURE__ */ jsx("li", { className: clsx(node.class, { active: isLast }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    node.icon ? /* @__PURE__ */ jsx("i", { className: node.icon }) : /* @__PURE__ */ jsx("i", {}),
+    node.icon && /* @__PURE__ */ jsx(WmAppIcon, { icon: node.icon }),
     !isLast ? /* @__PURE__ */ jsx(
       Link,
       {

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

@@ -25,7 +25,7 @@ declare const _default: React.ComponentType<{
     onLoad?: (widget: WmPopoverProps) => void | Function;
     onShow?: (event: Event, widget: WmPopoverProps) => void;
     onHide?: (event: Event, widget: WmPopoverProps) => void;
-    render?: (props: WmPopoverProps, onLoad: () => void) => React.ReactNode;
+    render?: (props: WmPopoverProps, onLoad: (widget?: any) => void) => React.ReactNode;
     disabled?: boolean;
     isOpen?: boolean;
     caption: string;

package/components/navigation/popover/index.js

@@ -18,7 +18,15 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useMemo, Suspense, useCallback, useLayoutEffect } from "react";
+import {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  Suspense,
+  useCallback,
+  useLayoutEffect
+} from "react";
 import clsx from "clsx";
 import debounce from "lodash-es/debounce";
 import Popover from "@mui/material/Popover";
@@ -298,7 +306,7 @@ const WmPopover = (Props) => {
             }
           ),
           props.title && /* @__PURE__ */ jsx("div", { className: "popover-title popover-header", children: props.title }),
-          /* @__PURE__ */ jsx("div", { className: "popover-content popover-body", children: props.render && props.content ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: props.render(props, () => handleLoad(__spreadValues({}, props))) }) : props.children })
+          /* @__PURE__ */ jsx("div", { className: "popover-content popover-body", children: props.render && props.content ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: props.render(props, (widget) => handleLoad(widget)) }) : props.children })
         ]
       }
     )

package/components/navigation/popover/props.d.ts

@@ -19,7 +19,7 @@ interface PopoverProps extends WmAnchorProps {
     onLoad?: (widget: WmPopoverProps) => void | Function;
     onShow?: (event: Event, widget: WmPopoverProps) => void;
     onHide?: (event: Event, widget: WmPopoverProps) => void;
-    render?: (props: WmPopoverProps, onLoad: () => void) => React.ReactNode;
+    render?: (props: WmPopoverProps, onLoad: (widget?: any) => void) => React.ReactNode;
     disabled?: boolean;
     isOpen?: boolean;
 }