@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/components/navigation/menu/index.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -18,12 +18,19 @@ var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _useAuth = require("@wavemaker/react-runtime/hooks/useAuth");
 var _constants = require("./constants");
 var _lodash = require("lodash");
-var _link = _interopRequireDefault(require("next/link"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _ListItems = require("./components/ListItems");
 var _utils = require("@wavemaker/react-runtime/core/util/utils");
 var _navigation = require("next/navigation");
+var _actionTask = require("@wavemaker/react-runtime/components/navigation/menu/utils/action-task");
+var _roleFilter = require("@wavemaker/react-runtime/components/navigation/menu/utils/role-filter");
+var _useKeyboardMovements = require("./hooks/useKeyboardMovements.hook");
+var _useTransformedDataset = require("./hooks/useTransformedDataset.hook");
+var _useHoverState2 = require("./hooks/useHoverState.hook");
+var _constants2 = require("@wavemaker/react-runtime/core/constants");
 var _excluded = ["menualign", "menuposition", "menulayout", "menuclass", "linktarget", "iconclass", "type", "animateitems", "disableMenuContext", "showonhover", "panelPosition", "autoclose", "autoopen", "hint", "arialabel", "width", "height", "iconposition", "caption", "shortcutkey", "onClick", "onSelect", "navNodes", "styles", "conditionalstyles", "className", "children", "listener", "name", "resetNavNodes", "nodes$", "dataset", "orderby", "itemlabel", "itemlink", "itemicon", "itemaction", "userrole", "itemchildren", "isactive", "displayValue", "onActionsclick", "dataPath", "isFromNav", "onNavItemActivate"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
@@ -32,115 +39,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var isPathMatchingLink = function isPathMatchingLink(path, link) {
   return new RegExp(link.replace("#", "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i").test(path);
 };
-var hasLinkToCurrentPage = function hasLinkToCurrentPage(nodes, currentPath) {
+var _hasLinkToCurrentPage = function hasLinkToCurrentPage(nodes, currentPath) {
   if (!nodes || !Array.isArray(nodes)) return false;
   return nodes.some(function (node) {
     if (node.link === currentPath) return true;
-    return node.children && hasLinkToCurrentPage(node.children, currentPath);
+    return node.children && _hasLinkToCurrentPage(node.children, currentPath);
   });
 };
 
-// Custom hooks
-var useKeyboardMovements = function useKeyboardMovements(menuposition) {
-  return (0, _react.useMemo)(function () {
-    switch (menuposition) {
-      case _constants.POSITION.UP_RIGHT:
-        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
-          MOVE_UP: "DOWN-ARROW",
-          MOVE_DOWN: "UP-ARROW"
-        });
-      case _constants.POSITION.UP_LEFT:
-        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
-          MOVE_UP: "DOWN-ARROW",
-          MOVE_DOWN: "UP-ARROW",
-          MOVE_LEFT: "RIGHT-ARROW",
-          MOVE_RIGHT: "LEFT-ARROW"
-        });
-      case _constants.POSITION.DOWN_LEFT:
-        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
-          MOVE_LEFT: "RIGHT-ARROW",
-          MOVE_RIGHT: "LEFT-ARROW"
-        });
-      default:
-        return _constants.KEYBOARD_MOVEMENTS;
-    }
-  }, [menuposition]);
-};
-var useTransformedDataset = function useTransformedDataset(dataset, itemlabel, orderby, itemchildren, dataPath) {
-  return (0, _react.useMemo)(function () {
-    if (!dataset) return _constants.DEFAULT_DATASET;
-    return (0, _transformedDatasetUtils.transformDataset)(dataset, undefined, itemlabel, undefined, undefined, orderby, null, dataPath, itemchildren);
-  }, [dataset, itemlabel, orderby]);
-};
-var useHoverState = function useHoverState() {
-  var _useState = (0, _react.useState)(new Set()),
-    hoveredNodes = _useState[0],
-    setHoveredNodes = _useState[1];
-  var leaveTimerRef = (0, _react.useRef)(null);
-  var enterTimerRef = (0, _react.useRef)(null);
-  var handleNodeMouseEnter = (0, _react.useCallback)(function (node) {
-    if (leaveTimerRef.current) {
-      clearTimeout(leaveTimerRef.current);
-      leaveTimerRef.current = null;
-    }
-
-    // Clear any pending enter timer
-    if (enterTimerRef.current) {
-      clearTimeout(enterTimerRef.current);
-      enterTimerRef.current = null;
-    }
-
-    // Add node to hovered set immediately
-    setHoveredNodes(function (prev) {
-      return new Set([].concat((0, _toConsumableArray2["default"])(prev), [node]));
-    });
-  }, []);
-  var handleNodeMouseLeave = (0, _react.useCallback)(function (node, event) {
-    var _relatedTarget$classL, _relatedTarget$closes;
-    var relatedTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
-    var isMovingToChild = relatedTarget && (((_relatedTarget$classL = relatedTarget.classList) === null || _relatedTarget$classL === void 0 ? void 0 : _relatedTarget$classL.contains("dropdown-menu")) || ((_relatedTarget$closes = relatedTarget.closest) === null || _relatedTarget$closes === void 0 ? void 0 : _relatedTarget$closes.call(relatedTarget, ".dropdown-menu")) !== null);
-
-    // if (!isMovingToChild) {
-    // Clear any pending enter timer
-    if (enterTimerRef.current) {
-      clearTimeout(enterTimerRef.current);
-      enterTimerRef.current = null;
-    }
-
-    // Set a delay before removing the node from hovered set
-    // leaveTimerRef.current = setTimeout(() => {
-    setHoveredNodes(function (prev) {
-      var newSet = new Set(prev);
-      newSet["delete"](node);
-      return newSet;
-    });
-    // }, HOVER_LEAVE_DELAY);
-    // }
-  }, []);
-  (0, _react.useEffect)(function () {
-    return function () {
-      if (leaveTimerRef.current) {
-        clearTimeout(leaveTimerRef.current);
-      }
-      if (enterTimerRef.current) {
-        clearTimeout(enterTimerRef.current);
-      }
-    };
-  }, []);
-  return {
-    hoveredNodes: hoveredNodes,
-    handleNodeMouseEnter: handleNodeMouseEnter,
-    handleNodeMouseLeave: handleNodeMouseLeave
-  };
-};
-
 // Main component
 var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _listener$appLocale;
   var _props$menualign = props.menualign,
     menualign = _props$menualign === void 0 ? "left" : _props$menualign,
     _props$menuposition = props.menuposition,
-    menuposition = _props$menuposition === void 0 ? "down,right" : _props$menuposition,
+    initialMenuPosition = _props$menuposition === void 0 ? "down,right" : _props$menuposition,
     _props$menulayout = props.menulayout,
     menulayout = _props$menulayout === void 0 ? "vertical" : _props$menulayout,
     menuclass = props.menuclass,
@@ -199,29 +112,58 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     isFromNav = _props$isFromNav === void 0 ? false : _props$isFromNav,
     onNavItemActivate = props.onNavItemActivate,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // deeply cloning the dataset, it was getting mutated in the useTransformedDataset hook
+  var deepCloneDataset = (0, _lodash.cloneDeep)(dataset);
+  var itemLabelWrapper = typeof itemlabel === "function" ? function (rest) {
+    return itemlabel(_objectSpread({
+      App: listener === null || listener === void 0 ? void 0 : listener.App
+    }, rest));
+  } : itemlabel;
   var path = (0, _navigation.usePathname)();
+
+  // Get current user information
+  var _useCurrentUser = (0, _useAuth.useCurrentUser)(),
+    user = _useCurrentUser.user;
+
   // State
-  var _useState2 = (0, _react.useState)(false),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    activeItem = _useState3[0],
-    setActiveItem = _useState3[1];
-  var _useState4 = (0, _react.useState)(-1),
-    focusedIndex = _useState4[0],
-    setFocusedIndex = _useState4[1];
+  var _useState = (0, _react.useState)(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    activeItem = _useState2[0],
+    setActiveItem = _useState2[1];
+  var _useState3 = (0, _react.useState)(-1),
+    focusedIndex = _useState3[0],
+    setFocusedIndex = _useState3[1];
+  var _useState4 = (0, _react.useState)(initialMenuPosition),
+    menuPosition = _useState4[0],
+    setMenuPosition = _useState4[1];
 
   // Refs
   var buttonRef = (0, _react.useRef)(null);
   var menuRef = (0, _react.useRef)(null);
 
   // Custom hooks
-  var keyboardMovements = useKeyboardMovements(menuposition);
-  var transformedDataset = useTransformedDataset(dataset, itemlabel, orderby, itemchildren, dataPath);
-  var _useHoverState = useHoverState(),
-    hoveredNodes = _useHoverState.hoveredNodes,
-    handleNodeMouseEnter = _useHoverState.handleNodeMouseEnter,
-    handleNodeMouseLeave = _useHoverState.handleNodeMouseLeave;
+  var keyboardMovements = (0, _useKeyboardMovements.useKeyboardMovements)(menuPosition);
+  var transformedDataset = (0, _useTransformedDataset.useTransformedDataset)(deepCloneDataset, itemLabelWrapper, orderby, itemchildren, dataPath);
+
+  // Apply role-based filtering if userrole prop is provided
+  var filteredDataset = (0, _react.useMemo)(function () {
+    if (!userrole || !transformedDataset) {
+      return transformedDataset;
+    }
+
+    // Get user roles from the logged-in user
+    var userRoles = (user === null || user === void 0 ? void 0 : user.roles) || [];
+
+    // Apply role filtering with the dynamic userrole key
+    return (0, _roleFilter.filterMenuNodesByRole)(transformedDataset, userRoles, userrole);
+  }, [transformedDataset, userrole, user === null || user === void 0 ? void 0 : user.roles]);
+  var _useHoverState = (0, _useHoverState2.useHoverState)(),
+    hoveredPaths = _useHoverState.hoveredPaths,
+    handlePathMouseEnter = _useHoverState.handlePathMouseEnter,
+    handlePathMouseLeave = _useHoverState.handlePathMouseLeave;
 
   // Hover handlers for showonhover functionality
   var handleContainerMouseEnter = (0, _react.useCallback)(function () {
@@ -230,10 +172,10 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
   }, [showonhover]);
   var handleContainerMouseLeave = (0, _react.useCallback)(function (event) {
-    var _relatedTarget$classL2, _relatedTarget$closes2, _relatedTarget$closes3;
+    var _relatedTarget$classL, _relatedTarget$closes, _relatedTarget$closes2;
     if (!showonhover) return;
     var relatedTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
-    var isMovingToMenu = relatedTarget && (((_relatedTarget$classL2 = relatedTarget.classList) === null || _relatedTarget$classL2 === void 0 ? void 0 : _relatedTarget$classL2.contains("dropdown-menu")) || ((_relatedTarget$closes2 = relatedTarget.closest) === null || _relatedTarget$closes2 === void 0 ? void 0 : _relatedTarget$closes2.call(relatedTarget, ".dropdown-menu")) !== null || ((_relatedTarget$closes3 = relatedTarget.closest) === null || _relatedTarget$closes3 === void 0 ? void 0 : _relatedTarget$closes3.call(relatedTarget, ".app-menu")) !== null);
+    var isMovingToMenu = relatedTarget && (((_relatedTarget$classL = relatedTarget.classList) === null || _relatedTarget$classL === void 0 ? void 0 : _relatedTarget$classL.contains("dropdown-menu")) || ((_relatedTarget$closes = relatedTarget.closest) === null || _relatedTarget$closes === void 0 ? void 0 : _relatedTarget$closes.call(relatedTarget, ".dropdown-menu")) !== null || ((_relatedTarget$closes2 = relatedTarget.closest) === null || _relatedTarget$closes2 === void 0 ? void 0 : _relatedTarget$closes2.call(relatedTarget, ".app-menu")) !== null);
     if (!isMovingToMenu) {
       setOpen(false);
       setFocusedIndex(-1);
@@ -244,24 +186,33 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   // Memoized values
   var transformChildrenDataset = (0, _react.useCallback)(function (children) {
     if (!children || !Array.isArray(children)) return [];
-    return (0, _transformedDatasetUtils.transformDataset)(children, "", itemlabel, undefined, undefined, orderby, undefined, undefined, itemchildren);
-  }, [itemlabel, orderby]);
+    return (0, _transformedDatasetUtils.transformDataset)(children, "", itemLabelWrapper, undefined, undefined, orderby, undefined, undefined, itemchildren);
+  }, [itemLabelWrapper, orderby]);
   var createRefsForNodes = (0, _react.useCallback)(function (nodes) {
     if (!nodes || !Array.isArray(nodes)) return [];
     return nodes.map(function (node) {
+      var _dataObject;
       var nodeWithRef = _objectSpread({}, node);
       if (!nodeWithRef.nodeRef) {
         nodeWithRef.nodeRef = /*#__PURE__*/_react["default"].createRef();
       }
-      if (nodeWithRef.children && nodeWithRef.children.length) {
-        nodeWithRef.children = createRefsForNodes(transformChildrenDataset(nodeWithRef.children));
+
+      // Check for children at node.children first, then at dataObject.children (where datasetItems stores them)
+      var existingChildren = nodeWithRef.children || ((_dataObject = nodeWithRef.dataObject) === null || _dataObject === void 0 ? void 0 : _dataObject.children);
+      if (existingChildren && existingChildren.length) {
+        var _existingChildren$;
+        // If children already have dataObject (already transformed by datasetItems), just add refs
+        // Otherwise, transform them first
+        var alreadyTransformed = ((_existingChildren$ = existingChildren[0]) === null || _existingChildren$ === void 0 ? void 0 : _existingChildren$.dataObject) !== undefined;
+        var processedChildren = alreadyTransformed ? existingChildren : transformChildrenDataset(existingChildren);
+        nodeWithRef.children = createRefsForNodes(processedChildren);
       }
       return nodeWithRef;
     });
   }, [transformChildrenDataset]);
   var nodesWithRefs = (0, _react.useMemo)(function () {
-    return createRefsForNodes(transformedDataset);
-  }, [transformedDataset, createRefsForNodes]);
+    return createRefsForNodes(filteredDataset);
+  }, [filteredDataset, createRefsForNodes]);
   var flattenNodes = (0, _react.useCallback)(function (nodes) {
     if (!nodes || !Array.isArray(nodes)) return [];
     return nodes.reduce(function (acc, node) {
@@ -281,15 +232,15 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     var children;
 
     // Handle itemlabel - can be a string (field name) or function (expression)
-    if (typeof itemlabel === "function") {
+    if (typeof itemLabelWrapper === "function") {
       try {
-        label = itemlabel(dataObject);
+        label = itemLabelWrapper(dataObject);
       } catch (error) {
         console.warn("Error evaluating itemlabel expression:", error);
         label = (node === null || node === void 0 ? void 0 : node["label"]) || dataObject["label"];
       }
     } else {
-      label = (node === null || node === void 0 ? void 0 : node[itemlabel]) || dataObject[itemlabel];
+      label = (node === null || node === void 0 ? void 0 : node[itemLabelWrapper]) || dataObject[itemLabelWrapper];
     }
 
     // Handle itemchildren - can be a string (field name) or function (expression)
@@ -306,7 +257,9 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
         children = (node === null || node === void 0 ? void 0 : node["children"]) || dataObject["children"];
       }
     } else {
-      children = (node === null || node === void 0 ? void 0 : node[itemchildren]) || dataObject[itemchildren];
+      // First check for already-transformed children (stored at 'children' by datasetItems),
+      // then fall back to raw data at the itemchildren key
+      children = (node === null || node === void 0 ? void 0 : node.children) || (dataObject === null || dataObject === void 0 ? void 0 : dataObject.children) || (node === null || node === void 0 ? void 0 : node[itemchildren]) || (dataObject === null || dataObject === void 0 ? void 0 : dataObject[itemchildren]);
     }
     return {
       label: label,
@@ -374,6 +327,8 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, [onClick, listener, name, open, isFromNav, onNavItemActivate]);
   var handleMenuItemClick = (0, _react.useCallback)(function (event, item) {
     var _item$dataObject, _item$dataObject2, _item$dataObject3;
+    // since event is a synthetic event, we need to convert it to a native event to support the angular behavior
+    event = event.nativeEvent;
     var _getNodeProperties = getNodeProperties(item),
       label = _getNodeProperties.label,
       icon = _getNodeProperties.icon,
@@ -390,6 +345,7 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (index !== -1) {
       setFocusedIndex(index);
     }
+    (0, _actionTask.executeActionTaskFromItem)(item, listener);
     if (item.children && item.children.length > 0) {
       item.expanded = !item.expanded;
     }
@@ -419,16 +375,21 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
         datavalue: label
       });
     }
-    // Then trigger item action (executes action and/or navigates to link)
-    // Use setTimeout to ensure onSelect navigation completes first, then dataset link navigation happens
-    setTimeout(function () {
-      (0, _utils.triggerItemAction)(simplifiedItem);
-    }, 0);
+    var routeName = (0, _constants2.hyperLinkMofify)((0, _utils.getRouteNameFromLink)((simplifiedItem === null || simplifiedItem === void 0 ? void 0 : simplifiedItem.link) || ""));
+    // Check if target route is the current page - skip navigation to prevent refresh
+    var currentPath = window.location.pathname;
+    if (routeName !== currentPath) {
+      // timeout is used so that onSelect can perform its actions before the navigation happens
+      setTimeout(function () {
+        // this function is used to navigate when menuitem is expected to work as anchor
+        (0, _utils.triggerItemAction)(simplifiedItem);
+      }, 0);
+    }
     if (autoclose === _constants.AUTO_CLOSE.ALWAYS && (!item.children || item.children.length === 0)) {
       setOpen(false);
       setFocusedIndex(-1);
     }
-    onActionsclick === null || onActionsclick === void 0 || onActionsclick(event, item);
+    onActionsclick === null || onActionsclick === void 0 || onActionsclick(item);
   }, [flattenedNodes, onSelect, props, name, listener, autoclose, getNodeProperties, isFromNav, onNavItemActivate]);
 
   // Keyboard navigation
@@ -578,7 +539,22 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, [open, flattenedNodes.length, toggleMenu, handleArrowDown, handleArrowUp, handleEnterOrSpace, handleEscape, closeMenu, handleArrowRight, handleArrowLeft]);
 
   // Render functions
+  /**
+   * Recursively renders menu items with path-based hover tracking.
+   *
+   * @param nodes - Array of menu nodes to render
+   * @param pathPrefix - Parent path prefix for generating unique item paths
+   *                     e.g., "" for root, "0" for first item's children, "0-1" for nested
+   *
+   * Path structure examples:
+   * - Root item 0: "0"
+   * - Root item 1: "1"
+   * - First child of item 0: "0-0"
+   * - Second child of item 1: "1-1"
+   * - Grandchild: "0-0-0"
+   */
   var renderMenuItems = (0, _react.useCallback)(function (nodes) {
+    var pathPrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
     if (!nodes || !Array.isArray(nodes)) return null;
     return nodes.map(function (node, index) {
       var _value;
@@ -589,71 +565,83 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
         hint = _getNodeProperties2.hint,
         disabled = _getNodeProperties2.disabled,
         children = _getNodeProperties2.children;
+
+      // Generate unique path for this menu item by combining parent path with index
+      var itemPath = pathPrefix ? "".concat(pathPrefix, "-").concat(index) : "".concat(index);
       var nodeValueLink = node === null || node === void 0 || (_value = node.value) === null || _value === void 0 ? void 0 : _value.link;
       var isActive = nodeValueLink && typeof nodeValueLink === "string" ? isPathMatchingLink(path, nodeValueLink) : link ? isPathMatchingLink(path, link) : false;
-      var _menuposition$split = menuposition.split(","),
-        _menuposition$split2 = (0, _slicedToArray2["default"])(_menuposition$split, 2),
-        verticalPos = _menuposition$split2[0],
-        horizontalPos = _menuposition$split2[1];
-      var isHovered = hoveredNodes.has(node);
-      var isSubmenuOpen = node.expanded || hoveredNodes.has(node);
-      var submenuClassName = (0, _ListItems.buildMenuListClasses)(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition, isHovered);
+      var _menuPosition$split = menuPosition.split(","),
+        _menuPosition$split2 = (0, _slicedToArray2["default"])(_menuPosition$split, 2),
+        verticalPos = _menuPosition$split2[0],
+        horizontalPos = _menuPosition$split2[1];
+
+      // Check if this specific path is currently hovered
+      var isHovered = hoveredPaths.has(itemPath);
+
+      // Submenu opens when item is expanded OR hovered
+      var isSubmenuOpen = node.expanded || isHovered;
+      var submenuClassName = (0, _ListItems.buildMenuListClasses)(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuPosition, isHovered);
       return __jsx(_Box["default"], {
         component: "li",
         key: index,
         className: (0, _clsx["default"])(children && children.length > 0 && "dropdown-submenu", "app-menu-item", {
           active: isActive,
-          hovered: hoveredNodes.has(node)
-        }),
+          hovered: isHovered
+        })
+        // Track hover state for this item's path
+        ,
         onMouseEnter: function onMouseEnter() {
-          return handleNodeMouseEnter(node);
+          return handlePathMouseEnter(itemPath);
         },
         onMouseLeave: function onMouseLeave(e) {
-          return handleNodeMouseLeave(node, e);
+          return handlePathMouseLeave(itemPath, e);
         },
         style: {
           position: "relative"
         }
-      }, __jsx(_link["default"], {
+      }, __jsx(_Link["default"], {
         title: label,
         className: disabled ? "disabled" : "",
-        href: "#",
         onClick: function onClick(event) {
           handleMenuItemClick(event, node);
-        },
-        prefetch: false
+        }
       }, children && children.length > 0 && __jsx("span", {
         className: (0, _clsx["default"])("pull-right fa caret", _constants.menuAlignClass[menualign] || "fa-caret-right")
       }), icon && __jsx("i", {
         className: "app-icon ".concat(icon)
       }), __jsx("span", {
         className: "anchor-caption"
-      }, label || itemlabel)), children && children.length > 0 && (type !== "anchor" ? __jsx(_ListItems.CollapsibleMenu, {
+      }, label)), children && children.length > 0 && (type !== "anchor" ? __jsx(_ListItems.CollapsibleMenu, {
         isOpen: isSubmenuOpen,
         verticalPos: verticalPos,
         className: submenuClassName,
-        style: getMenuLayoutStyles(),
+        style: getMenuLayoutStyles()
+        // IMPORTANT: Submenu container also tracks the PARENT's path
+        // This keeps the parent in hover state when mouse moves to submenu
+        ,
         onMouseEnter: function onMouseEnter() {
-          return handleNodeMouseEnter(node);
+          return handlePathMouseEnter(itemPath);
         },
         onMouseLeave: function onMouseLeave(e) {
-          return handleNodeMouseLeave(node, e);
+          return handlePathMouseLeave(itemPath, e);
         }
-      }, renderMenuItems(children)) : isSubmenuOpen && open && __jsx(_ListItems.MenuList, {
+      }, renderMenuItems(children, itemPath)) : isSubmenuOpen && open && __jsx(_ListItems.MenuList, {
         className: submenuClassName,
-        style: getMenuLayoutStyles(),
+        style: getMenuLayoutStyles()
+        // Same hover tracking for anchor-type menus
+        ,
         onMouseEnter: function onMouseEnter() {
-          return handleNodeMouseEnter(node);
+          return handlePathMouseEnter(itemPath);
         },
         onMouseLeave: function onMouseLeave(e) {
-          return handleNodeMouseLeave(node, e);
+          return handlePathMouseLeave(itemPath, e);
         },
         onClick: function onClick(event) {
-          return onActionsclick(event, node);
+          return onActionsclick === null || onActionsclick === void 0 ? void 0 : onActionsclick(node);
         }
-      }, renderMenuItems(children))));
+      }, renderMenuItems(children, itemPath))));
     });
-  }, [getNodeProperties, menuposition, hoveredNodes, handleNodeMouseEnter, handleNodeMouseLeave, hint, handleMenuItemClick, activeItem, linktarget, iconposition, animateitems, menualign, getMenuLayoutStyles, type, open, panelPosition]);
+  }, [getNodeProperties, menuPosition, hoveredPaths, handlePathMouseEnter, handlePathMouseLeave, hint, handleMenuItemClick, activeItem, linktarget, iconposition, animateitems, menualign, getMenuLayoutStyles, type, open, panelPosition]);
 
   // Effects
   (0, _react.useEffect)(function () {
@@ -665,22 +653,22 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (autoopen === _constants.AUTO_OPEN.ALWAYS) {
       setOpen(true);
     } else if (autoopen === _constants.AUTO_OPEN.ACTIVE_PAGE) {
-      var hasActiveItem = transformedDataset.some(function (node) {
-        return hasLinkToCurrentPage([node], window.location.pathname);
+      var hasActiveItem = filteredDataset.some(function (node) {
+        return _hasLinkToCurrentPage([node], window.location.pathname);
       });
       if (hasActiveItem) {
         setOpen(true);
       }
     }
-  }, [transformedDataset, autoopen]);
+  }, [filteredDataset, autoopen]);
   var notifiedPathRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    if (!isFromNav || !onNavItemActivate || !transformedDataset || transformedDataset.length === 0) {
+    if (!isFromNav || !onNavItemActivate || !filteredDataset || filteredDataset.length === 0) {
       return;
     }
 
     // Check if any menu item is active using the same logic as renderMenuItems
-    var checkIfActive = function checkIfActive(nodes) {
+    var _checkIfActive = function checkIfActive(nodes) {
       if (!nodes || !Array.isArray(nodes)) return false;
       return nodes.some(function (node) {
         var _value2;
@@ -691,12 +679,12 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
         var isActive = nodeValueLink && typeof nodeValueLink === "string" ? isPathMatchingLink(path, nodeValueLink) : link ? isPathMatchingLink(path, link) : false;
         if (isActive) return true;
         if (children && children.length > 0) {
-          return checkIfActive(children);
+          return _checkIfActive(children);
         }
         return false;
       });
     };
-    var hasActiveItem = checkIfActive(transformedDataset);
+    var hasActiveItem = _checkIfActive(filteredDataset);
 
     // Notify nav if there's an active item and we haven't notified for this path yet
     if (hasActiveItem && notifiedPathRef.current !== path) {
@@ -707,10 +695,10 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
       // Reset when no active item found
       notifiedPathRef.current = null;
     }
-  }, [path, transformedDataset, isFromNav, onNavItemActivate, getNodeProperties]);
+  }, [path, filteredDataset, isFromNav, onNavItemActivate, getNodeProperties]);
   (0, _react.useEffect)(function () {
     // Handle outside click for both "outsideClick" and "always" autoclose modes
-    if (!open || autoclose === _constants.AUTO_CLOSE.NEVER) return;
+    if (!open || autoclose === _constants.AUTO_CLOSE.NEVER || autoclose === _constants.AUTO_CLOSE.DISABLED) return;
     var handleOutsideClick = function handleOutsideClick(event) {
       var _menuRef$current, _buttonRef$current2;
       if (!event.target) return;
@@ -747,12 +735,45 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
       window.removeEventListener("keydown", handleShortcutKey);
     };
   }, [shortcutkey]);
+
+  // Fallback: run action task once when nodes$ is absent and an active item exists in the dataset
+  var executedInitialActiveRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (nodes$ && typeof nodes$.subscribe === "function") return; // nodes$ flow will handle it
+    if (executedInitialActiveRef.current) return;
+    if (!transformedDataset || transformedDataset.length === 0) return;
+    var itemFound = false;
+    var _getItem = function getItem(nodes) {
+      if (!nodes || !Array.isArray(nodes)) return;
+      nodes.forEach(function (item) {
+        var _dataObject2;
+        if (itemFound) return;
+        if (item !== null && item !== void 0 && item.isactive || item !== null && item !== void 0 && (_dataObject2 = item.dataObject) !== null && _dataObject2 !== void 0 && _dataObject2.isactive) {
+          itemFound = true;
+          if (listener !== null && listener !== void 0 && listener.Widgets && name && onSelect) {
+            var widget = listener.Widgets[name];
+            if (widget) {
+              onSelect({}, widget, item);
+            }
+          }
+          (0, _actionTask.executeActionTaskFromItem)(item, listener);
+        }
+        if (item.children && !(0, _lodash.isEmpty)(item.children)) {
+          _getItem(item.children);
+        }
+      });
+    };
+    _getItem(transformedDataset);
+    if (itemFound) {
+      executedInitialActiveRef.current = true;
+    }
+  }, []);
   (0, _react.useEffect)(function () {
     if (!nodes$ || typeof nodes$.subscribe !== "function") return;
     var datasetSubscription = nodes$.subscribe(function () {
       if (!dataset) return;
       var itemFound = false;
-      var getItem = function getItem(nodes) {
+      var _getItem2 = function getItem(nodes) {
         if (!nodes || !Array.isArray(nodes)) return;
         nodes.forEach(function (item) {
           if (itemFound) return;
@@ -767,11 +788,11 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
             return false;
           }
           if (item.children && !(0, _lodash.isEmpty)(item.children)) {
-            getItem(item.children);
+            _getItem2(item.children);
           }
         });
       };
-      getItem(dataset);
+      _getItem2(dataset);
     });
     return function () {
       if (datasetSubscription && typeof datasetSubscription.unsubscribe === "function") {
@@ -780,14 +801,130 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     };
   }, [dataset, nodes$, name, listener, onSelect]);
 
+  // ============ Exposed Methods Implementation ============
+  // 1. onShow - Lifecycle callback triggered when menu opens
+  var onShowCallback = (0, _react.useCallback)(function () {
+    // Similar to Angular's @HostListener('onShown') - lines 121-129
+    // Focus first item if opened via keyboard
+    if (open && flattenedNodes.length > 0 && focusedIndex === 0) {
+      setTimeout(function () {
+        var _flattenedNodes$;
+        (_flattenedNodes$ = flattenedNodes[0]) === null || _flattenedNodes$ === void 0 || (_flattenedNodes$ = _flattenedNodes$.nodeRef) === null || _flattenedNodes$ === void 0 || (_flattenedNodes$ = _flattenedNodes$.current) === null || _flattenedNodes$ === void 0 || _flattenedNodes$.focus();
+      }, 0);
+    }
+
+    // add the open class to the menu
+    setOpen(true);
+  }, [open, flattenedNodes, focusedIndex, props, listener, name]);
+
+  // 2. onHide - Lifecycle callback triggered when menu closes
+  var onHideCallback = (0, _react.useCallback)(function () {
+    // Similar to Angular's @HostListener('onHidden') - lines 130-137
+    // Reset menu state
+    setFocusedIndex(-1);
+    setActiveItem(null);
+
+    // Reset menuposition to original value
+    setMenuPosition(initialMenuPosition);
+
+    // remove the open class from the menu
+    setOpen(false);
+  }, [initialMenuPosition, props, listener, name]);
+
+  // 3. resetNodes - Method to reset/rebuild menu items
+  var resetNodesMethod = (0, _react.useCallback)(function () {
+    // Similar to Angular's resetNodes() - lines 227-233
+    // Call the parent resetNavNodes if available
+    if (resetNavNodes) {
+      resetNavNodes();
+    }
+
+    // Auto-open logic from Angular implementation
+    if (autoopen === _constants.AUTO_OPEN.ACTIVE_PAGE && _hasLinkToCurrentPage(transformedDataset, path)) {
+      setOpen(true);
+    } else if (autoopen === _constants.AUTO_OPEN.ALWAYS) {
+      setOpen(true);
+    }
+  }, [resetNavNodes, autoopen, transformedDataset, path]);
+
+  // 4. setMenuPosition - Method to programmatically change menu position
+  var setMenuPositionMethod = (0, _react.useCallback)(function (position) {
+    // Similar to Angular's setMenuPosition() - lines 261-287
+    var validPositions = [_constants.POSITION.DOWN_RIGHT, _constants.POSITION.DOWN_LEFT, _constants.POSITION.UP_RIGHT, _constants.POSITION.UP_LEFT, _constants.POSITION.INLINE];
+    if (validPositions.includes(position)) {
+      setMenuPosition(position);
+    } else {
+      console.warn("Invalid menu position: ".concat(position, ". Valid positions are: ").concat(validPositions.join(", ")));
+    }
+  }, []);
+
+  // 5. onKeyDown - Expose keyboard handler
+  var onKeyDownMethod = (0, _react.useCallback)(function (event, eventAction) {
+    // Similar to Angular's onKeyDown($event, eventAction) - lines 145-173
+    // This matches Angular's signature: onKeyDown($event, eventAction)
+    if (eventAction) {
+      // Handle specific event action if provided
+    }
+    handleKeyDown(event);
+  }, [handleKeyDown]);
+
+  // 6. onMenuItemSelect - Expose menu item select handler
+  var onMenuItemSelectMethod = (0, _react.useCallback)(function (event, item) {
+    var _listener$Widgets;
+    // Similar to Angular's onMenuItemSelect(args) - lines 289-293
+    // This matches Angular's signature: onMenuItemSelect({ $event, $item })
+    if (onSelect && listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name]) {
+      onSelect(event, listener.Widgets[name], item);
+    }
+  }, [onSelect, listener, name]);
+
+  // ============ Expose Methods to Widget Proxy ============
+  // This makes methods accessible via Page.Widgets.menu4.methodName
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange && name) {
+      Object.defineProperty(onShowCallback, "name", {
+        value: "onShow",
+        writable: false
+      });
+      Object.defineProperty(onHideCallback, "name", {
+        value: "onHide",
+        writable: false
+      });
+      Object.defineProperty(onKeyDownMethod, "name", {
+        value: "onKeyDown",
+        writable: false
+      });
+      Object.defineProperty(resetNodesMethod, "name", {
+        value: "resetNodes",
+        writable: false
+      });
+      Object.defineProperty(setMenuPositionMethod, "name", {
+        value: "setMenuPosition",
+        writable: false
+      });
+      Object.defineProperty(onMenuItemSelectMethod, "name", {
+        value: "onMenuItemSelect",
+        writable: false
+      });
+      listener.onChange(name, {
+        onShow: onShowCallback,
+        onHide: onHideCallback,
+        onKeyDown: onKeyDownMethod,
+        resetNodes: resetNodesMethod,
+        setMenuPosition: setMenuPositionMethod,
+        onMenuItemSelect: onMenuItemSelectMethod
+      });
+    }
+  }, []);
+
   // Memoized class names and styles
-  var _menuposition$split3 = menuposition.split(","),
-    _menuposition$split4 = (0, _slicedToArray2["default"])(_menuposition$split3, 2),
-    verticalPos = _menuposition$split4[0],
-    horizontalPos = _menuposition$split4[1];
+  var _menuPosition$split3 = menuPosition.split(","),
+    _menuPosition$split4 = (0, _slicedToArray2["default"])(_menuPosition$split3, 2),
+    verticalPos = _menuPosition$split4[0],
+    horizontalPos = _menuPosition$split4[1];
   var mainMenuClassName = (0, _react.useMemo)(function () {
-    return (0, _ListItems.buildMenuListClasses)(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition);
-  }, [iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition]);
+    return (0, _ListItems.buildMenuListClasses)(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuPosition);
+  }, [iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuPosition]);
   var hoverEventHandlers = showonhover ? {
     onMouseEnter: handleContainerMouseEnter,
     onMouseLeave: handleContainerMouseLeave
@@ -797,14 +934,16 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   return __jsx("div", (0, _extends2["default"])({
     caption: caption,
     ref: menuRef,
-    className: (0, _clsx["default"])("dropdown", "app-menu", menuclass, className, "menu-layout-".concat(menulayout), "menu-align-".concat(menualign), open ? "open" : "", menuposition !== null && menuposition !== void 0 && menuposition.startsWith("up") ? "dropup" : "", menuposition === _constants.POSITION.INLINE ? "dropinline-menu" : "")
+    className: (0, _clsx["default"])("dropdown", "app-menu", {
+      open: open
+    })
   }, hoverEventHandlers, {
-    style: _objectSpread(_objectSpread({}, buttonStyles), menuContainerStyles),
     onKeyDown: handleKeyDown,
     role: "menu",
     "aria-label": arialabel || "Menu",
     "aria-expanded": open,
-    type: type
+    type: type,
+    name: name
   }), __jsx(_Tooltip["default"], {
     title: hint || "",
     enterDelay: _constants.TOOLTIP_ENTER_DELAY,
@@ -832,9 +971,9 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, "".concat(caption, " ").concat(listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx("span", {
     className: "anchor-caption"
   }, caption || ""), __jsx("span", {
-    className: "pull-right caret fa ".concat(_constants.CARET_CLS.DOWN)
+    className: (0, _clsx["default"])("pull-right caret fa", menuPosition !== null && menuPosition !== void 0 && menuPosition.startsWith("up") ? _constants.CARET_CLS.UP : _constants.CARET_CLS.DOWN)
   })) : __jsx(_Button["default"], (0, _extends2["default"])({
-    className: (0, _clsx["default"])("btn dropdown-toggle", "icon-position-".concat(iconposition)),
+    className: (0, _clsx["default"])("btn dropdown-toggle", "icon-position-".concat(iconposition), "app-button", menuclass, className, "menu-layout-".concat(menulayout), "menu-align-".concat(menualign), open ? "open" : "", menuPosition !== null && menuPosition !== void 0 && menuPosition.startsWith("up") ? "dropup" : "", menuPosition === _constants.POSITION.INLINE ? "dropinline-menu" : ""),
     ref: buttonRef,
     onClick: handleMenuClick,
     "aria-haspopup": "true",
@@ -842,18 +981,17 @@ var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-label": arialabel || "Menu",
     accessKey: shortcutkey,
     tabIndex: props.tabindex,
-    style: {
+    style: _objectSpread(_objectSpread({
       width: width !== undefined ? typeof width === "number" ? "".concat(width, "px") : width : undefined,
-      height: height !== undefined ? typeof height === "number" ? "".concat(height, "px") : height : undefined,
-      textAlign: menualign
-    }
+      height: height !== undefined ? typeof height === "number" ? "".concat(height, "px") : height : undefined
+    }, buttonStyles), menuContainerStyles)
   }, restProps), iconclass && __jsx("i", {
     className: (0, _clsx["default"])("app-icon", iconclass),
     "aria-hidden": "true"
   }), __jsx("span", {
-    className: "caption"
-  }, children || caption || "Menu"), __jsx("span", {
-    className: (0, _clsx["default"])("pull-right caret fa", (menuposition === null || menuposition === void 0 ? void 0 : menuposition.startsWith("up")) !== open ? _constants.CARET_CLS.UP : _constants.CARET_CLS.DOWN)
+    className: "btn-caption"
+  }, caption), __jsx("span", {
+    className: (0, _clsx["default"])("pull-right caret fa", menuPosition !== null && menuPosition !== void 0 && menuPosition.startsWith("up") ? _constants.CARET_CLS.UP : _constants.CARET_CLS.DOWN)
   }))), type !== "anchor" ? __jsx(_ListItems.CollapsibleMenu, (0, _extends2["default"])({
     isOpen: open,
     verticalPos: verticalPos,