@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/navigation/menu/index.js

@@ -0,0 +1,1031 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmMenu = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
+var _constants = require("./constants");
+var _lodash = require("lodash");
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _ListItems = require("./components/ListItems");
+var _utils = require("@wavemaker-ai/react-runtime/core/util/utils");
+var _navigation = require("next/navigation");
+var _actionTask = require("@wavemaker-ai/react-runtime/components/navigation/menu/utils/action-task");
+var _roleFilter = require("@wavemaker-ai/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-ai/react-runtime/core/constants");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+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", "loggedInUser", "itemchildren", "isactive", "displayValue", "onActionsclick", "dataPath", "isFromNav", "onNavItemActivate", "isNavItemActive"];
+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;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Checks if the current path matches the nav item link.
+ * Uses path-segment matching to avoid false positives when one page name
+ * is a substring of another (e.g. "Tasks" should not match "/TasksService").
+ */
+var isPathMatchingLink = function isPathMatchingLink(path, link) {
+  var cleanLink = link.replace(/^#\/?/, "").split("?")[0].trim();
+  if (!cleanLink) return false;
+  // Match link as a full path segment: preceded by ^ or /, followed by $ or /
+  return new RegExp("(^|/)".concat(cleanLink, "($|/)"), "i").test(path);
+};
+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);
+  });
+};
+
+// Main component
+var WmMenu = exports.WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _listener$appConfig2, _listener$appLocale;
+  var _props$menualign = props.menualign,
+    menualign = _props$menualign === void 0 ? "left" : _props$menualign,
+    _props$menuposition = 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,
+    _props$linktarget = props.linktarget,
+    linktarget = _props$linktarget === void 0 ? "_self" : _props$linktarget,
+    iconclass = props.iconclass,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "button" : _props$type,
+    animateitems = props.animateitems,
+    _props$disableMenuCon = props.disableMenuContext,
+    disableMenuContext = _props$disableMenuCon === void 0 ? false : _props$disableMenuCon,
+    _props$showonhover = props.showonhover,
+    showonhover = _props$showonhover === void 0 ? false : _props$showonhover,
+    panelPosition = props.panelPosition,
+    _props$autoclose = props.autoclose,
+    autoclose = _props$autoclose === void 0 ? "outsideClick" : _props$autoclose,
+    _props$autoopen = props.autoopen,
+    autoopen = _props$autoopen === void 0 ? "never" : _props$autoopen,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    width = props.width,
+    height = props.height,
+    _props$iconposition = props.iconposition,
+    iconposition = _props$iconposition === void 0 ? "left" : _props$iconposition,
+    caption = props.caption,
+    shortcutkey = props.shortcutkey,
+    onClick = props.onClick,
+    onSelect = props.onSelect,
+    _props$navNodes = props.navNodes,
+    navNodes = _props$navNodes === void 0 ? [] : _props$navNodes,
+    styles = props.styles,
+    conditionalstyles = props.conditionalstyles,
+    className = props.className,
+    children = props.children,
+    listener = props.listener,
+    name = props.name,
+    resetNavNodes = props.resetNavNodes,
+    nodes$ = props.nodes$,
+    dataset = props.dataset,
+    orderby = props.orderby,
+    _props$itemlabel = props.itemlabel,
+    itemlabel = _props$itemlabel === void 0 ? "label" : _props$itemlabel,
+    _props$itemlink = props.itemlink,
+    itemlink = _props$itemlink === void 0 ? "Link" : _props$itemlink,
+    _props$itemicon = props.itemicon,
+    itemicon = _props$itemicon === void 0 ? "Icon" : _props$itemicon,
+    itemaction = props.itemaction,
+    userrole = props.userrole,
+    loggedInUser = props.loggedInUser,
+    _props$itemchildren = props.itemchildren,
+    itemchildren = _props$itemchildren === void 0 ? "children" : _props$itemchildren,
+    isactive = props.isactive,
+    displayValue = props.displayValue,
+    onActionsclick = props.onActionsclick,
+    dataPath = props.dataPath,
+    _props$isFromNav = props.isFromNav,
+    isFromNav = _props$isFromNav === void 0 ? false : _props$isFromNav,
+    onNavItemActivate = props.onNavItemActivate,
+    _props$isNavItemActiv = props.isNavItemActive,
+    isNavItemActive = _props$isNavItemActiv === void 0 ? false : _props$isNavItemActiv,
+    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)();
+  var user = (0, _react.useMemo)(function () {
+    var _ref, _listener$appConfig;
+    return (_ref = loggedInUser !== null && loggedInUser !== void 0 ? loggedInUser : listener === null || listener === void 0 || (_listener$appConfig = listener.appConfig) === null || _listener$appConfig === void 0 ? void 0 : _listener$appConfig.loggedInUser) !== null && _ref !== void 0 ? _ref : null;
+  }, [loggedInUser, listener === null || listener === void 0 || (_listener$appConfig2 = listener.appConfig) === null || _listener$appConfig2 === void 0 ? void 0 : _listener$appConfig2.loggedInUser]);
+
+  // State
+  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 = (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 () {
+    if (showonhover) {
+      setOpen(true);
+    }
+  }, [showonhover]);
+  var handleContainerMouseLeave = (0, _react.useCallback)(function (event) {
+    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$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);
+      setActiveItem(null);
+    }
+  }, [showonhover]);
+
+  // Memoized values
+  var transformChildrenDataset = (0, _react.useCallback)(function (children) {
+    if (!children || !Array.isArray(children)) return [];
+    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();
+      }
+
+      // 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(filteredDataset);
+  }, [filteredDataset, createRefsForNodes]);
+  var flattenNodes = (0, _react.useCallback)(function (nodes) {
+    if (!nodes || !Array.isArray(nodes)) return [];
+    return nodes.reduce(function (acc, node) {
+      acc.push(node);
+      if (node.children && node.children.length) {
+        acc.push.apply(acc, (0, _toConsumableArray2["default"])(flattenNodes(node.children)));
+      }
+      return acc;
+    }, []);
+  }, []);
+  var flattenedNodes = (0, _react.useMemo)(function () {
+    return flattenNodes(nodesWithRefs);
+  }, [nodesWithRefs, flattenNodes]);
+  var getNodeProperties = (0, _react.useCallback)(function (node) {
+    var dataObject = node.dataObject || {};
+    var label;
+    var children;
+
+    // Handle itemlabel - can be a string (field name) or function (expression)
+    if (typeof itemLabelWrapper === "function") {
+      try {
+        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[itemLabelWrapper]) || dataObject[itemLabelWrapper];
+    }
+
+    // Handle itemchildren - can be a string (field name) or function (expression)
+    if (typeof itemchildren === "function") {
+      try {
+        var childrenData = itemchildren(dataObject);
+        if (Array.isArray(childrenData)) {
+          children = transformChildrenDataset(childrenData);
+        } else {
+          children = childrenData;
+        }
+      } catch (error) {
+        console.warn("Error evaluating itemchildren expression:", error);
+        children = (node === null || node === void 0 ? void 0 : node["children"]) || dataObject["children"];
+      }
+    } else {
+      // 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,
+      icon: (node === null || node === void 0 ? void 0 : node[itemicon]) || dataObject[itemicon],
+      link: (node === null || node === void 0 ? void 0 : node[itemlink]) || dataObject[itemlink] || dataObject["link"],
+      hint: (node === null || node === void 0 ? void 0 : node[hint]) || dataObject[hint],
+      disabled: (node === null || node === void 0 ? void 0 : node.disabled) || dataObject.disabled,
+      children: children
+    };
+  }, [itemlabel, itemicon, itemlink, hint, itemchildren]);
+
+  // Computed styles
+  var buttonStyles = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), conditionalstyles), width !== undefined && {
+      width: typeof width === "number" ? "".concat(width, "px") : width
+    }), height !== undefined && {
+      height: typeof height === "number" ? "".concat(height, "px") : height
+    });
+  }, [styles, conditionalstyles, width, height]);
+  var menuContainerStyles = (0, _react.useMemo)(function () {
+    return {
+      textAlign: menualign,
+      position: "relative"
+    };
+  }, [menualign]);
+  var getMenuLayoutStyles = (0, _react.useCallback)(function () {
+    switch (menulayout) {
+      case _constants.LAYOUT.HORIZONTAL:
+        return {
+          display: "flex",
+          flexDirection: "row"
+        };
+      case _constants.LAYOUT.GRID:
+        return {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
+          gap: "8px"
+        };
+      case _constants.LAYOUT.VERTICAL:
+      default:
+        return {
+          display: "block"
+        };
+    }
+  }, [menulayout]);
+
+  // Event handlers
+  var handleMenuClick = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    if (onClick && listener !== null && listener !== void 0 && listener.Widgets && name && listener.Widgets[name]) {
+      onClick(event, listener.Widgets[name]);
+    }
+    setOpen(function (prevState) {
+      return !prevState;
+    });
+    if (!open) {
+      setActiveItem(null);
+      setFocusedIndex(-1);
+    }
+
+    // If menu is from nav, notify nav to activate the nav item when menu button is clicked
+    if (isFromNav && onNavItemActivate) {
+      onNavItemActivate();
+    }
+  }, [onClick, listener, name, open, isFromNav, onNavItemActivate]);
+  var handleMenuItemClick = (0, _react.useCallback)(function (event, item) {
+    var _item$dataObject, _item$dataObject2, _item$dataObject3, _item$dataObject4, _item$dataObject5;
+    // 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,
+      link = _getNodeProperties.link;
+
+    // Only prevent default if item has children (submenu) or no valid link
+    if (item.children && item.children.length > 0 || !link || link === "#") {
+      event.preventDefault();
+    }
+    setActiveItem(item);
+    var index = flattenedNodes.findIndex(function (node) {
+      return node === item;
+    });
+    if (index !== -1) {
+      setFocusedIndex(index);
+    }
+    (0, _actionTask.executeActionTaskFromItem)(item, listener);
+    if (item.children && item.children.length > 0) {
+      item.expanded = !item.expanded;
+    }
+
+    // Create a simplified item object with only the required properties
+    var simplifiedItem = _objectSpread(_objectSpread({}, item.dataObject || {}), {}, {
+      name: ((_item$dataObject = item.dataObject) === null || _item$dataObject === void 0 ? void 0 : _item$dataObject.name) || name,
+      label: label,
+      dataValue: ((_item$dataObject2 = item.dataObject) === null || _item$dataObject2 === void 0 ? void 0 : _item$dataObject2.dataValue) || label,
+      value: ((_item$dataObject3 = item.dataObject) === null || _item$dataObject3 === void 0 ? void 0 : _item$dataObject3.dataValue) || label,
+      icon: ((_item$dataObject4 = item.dataObject) === null || _item$dataObject4 === void 0 ? void 0 : _item$dataObject4.icon) || icon,
+      link: link,
+      target: (_item$dataObject5 = item.dataObject) === null || _item$dataObject5 === void 0 ? void 0 : _item$dataObject5.target
+    }, item === null || item === void 0 ? void 0 : item.value);
+    if (onSelect) {
+      onSelect(event, props, simplifiedItem);
+    }
+
+    // If menu is from nav, notify nav to activate the nav item
+    if (isFromNav && onNavItemActivate) {
+      onNavItemActivate();
+    }
+    if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = label;
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        datavalue: label
+      });
+    }
+    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(item);
+  }, [flattenedNodes, onSelect, props, name, listener, autoclose, getNodeProperties, isFromNav, onNavItemActivate]);
+
+  // Keyboard navigation
+  var focusNode = (0, _react.useCallback)(function (index) {
+    var _flattenedNodes$index;
+    if ((_flattenedNodes$index = flattenedNodes[index]) !== null && _flattenedNodes$index !== void 0 && (_flattenedNodes$index = _flattenedNodes$index.nodeRef) !== null && _flattenedNodes$index !== void 0 && _flattenedNodes$index.current) {
+      flattenedNodes[index].nodeRef.current.focus();
+    }
+  }, [flattenedNodes]);
+  var closeMenu = (0, _react.useCallback)(function () {
+    var _buttonRef$current;
+    setOpen(false);
+    setFocusedIndex(-1);
+    setActiveItem(null);
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
+  }, []);
+  var toggleMenu = (0, _react.useCallback)(function () {
+    setOpen(function (prevOpen) {
+      return !prevOpen;
+    });
+  }, []);
+  var handleArrowDown = (0, _react.useCallback)(function (event) {
+    if (keyboardMovements.MOVE_DOWN !== "DOWN-ARROW") return;
+    event.preventDefault();
+    if (!open) {
+      setOpen(true);
+      return;
+    }
+    var nextIndex = focusedIndex < 0 ? 0 : (focusedIndex + 1) % flattenedNodes.length;
+    setFocusedIndex(nextIndex);
+    focusNode(nextIndex);
+  }, [keyboardMovements, open, focusedIndex, flattenedNodes.length, focusNode]);
+  var handleArrowUp = (0, _react.useCallback)(function (event) {
+    if (keyboardMovements.MOVE_UP !== "UP-ARROW") return;
+    event.preventDefault();
+    if (!open) {
+      setOpen(true);
+      return;
+    }
+    if (focusedIndex === 0) {
+      closeMenu();
+      return;
+    }
+    var prevIndex = focusedIndex <= 0 ? flattenedNodes.length - 1 : (focusedIndex - 1) % flattenedNodes.length;
+    setFocusedIndex(prevIndex);
+    focusNode(prevIndex);
+  }, [keyboardMovements, open, focusedIndex, flattenedNodes.length, focusNode, closeMenu]);
+  var handleEnterOrSpace = (0, _react.useCallback)(function (event) {
+    if (keyboardMovements.ON_ENTER !== "ENTER") return;
+    event.preventDefault();
+    if (focusedIndex >= 0 && flattenedNodes[focusedIndex]) {
+      handleMenuItemClick(event, flattenedNodes[focusedIndex]);
+    } else if (open) {
+      closeMenu();
+    }
+  }, [keyboardMovements, focusedIndex, flattenedNodes, handleMenuItemClick, open, closeMenu]);
+  var handleEscape = (0, _react.useCallback)(function (event) {
+    if (keyboardMovements.ON_ESCAPE !== "ESC") return;
+    event.preventDefault();
+    closeMenu();
+  }, [keyboardMovements, closeMenu]);
+  var moveFocusHorizontally = (0, _react.useCallback)(function (direction) {
+    var nextIndex = (focusedIndex + direction + flattenedNodes.length) % flattenedNodes.length;
+    setFocusedIndex(nextIndex);
+    focusNode(nextIndex);
+  }, [focusedIndex, flattenedNodes.length, focusNode]);
+  var expandAndFocusChild = (0, _react.useCallback)(function (currentItem) {
+    currentItem.expanded = true;
+    var firstChild = currentItem.children[0];
+    var childIndex = flattenedNodes.findIndex(function (node) {
+      return node === firstChild;
+    });
+    if (childIndex !== -1) {
+      setFocusedIndex(childIndex);
+      setActiveItem(flattenedNodes[childIndex]);
+      focusNode(childIndex);
+    }
+  }, [flattenedNodes, focusNode]);
+  var collapseAndFocusParent = (0, _react.useCallback)(function (currentItem) {
+    var parentIndex = flattenedNodes.findIndex(function (node) {
+      var _node$children;
+      return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.some(function (child) {
+        return child === currentItem;
+      });
+    });
+    if (parentIndex !== -1) {
+      flattenedNodes[parentIndex].expanded = false;
+      setFocusedIndex(parentIndex);
+      setActiveItem(flattenedNodes[parentIndex]);
+      focusNode(parentIndex);
+    }
+  }, [flattenedNodes, focusNode]);
+  var handleArrowRight = (0, _react.useCallback)(function (event) {
+    if (menulayout === _constants.LAYOUT.HORIZONTAL || keyboardMovements.MOVE_RIGHT !== "RIGHT-ARROW") return;
+    event.preventDefault();
+    if (focusedIndex >= 0 && flattenedNodes[focusedIndex]) {
+      var currentItem = flattenedNodes[focusedIndex];
+      if (currentItem.children && currentItem.children.length > 0) {
+        expandAndFocusChild(currentItem);
+      } else if (menulayout === _constants.LAYOUT.HORIZONTAL) {
+        moveFocusHorizontally(1);
+      }
+    }
+  }, [menulayout, keyboardMovements, focusedIndex, flattenedNodes, expandAndFocusChild, moveFocusHorizontally]);
+  var handleArrowLeft = (0, _react.useCallback)(function (event) {
+    if (menulayout === _constants.LAYOUT.HORIZONTAL || keyboardMovements.MOVE_LEFT !== "LEFT-ARROW") return;
+    event.preventDefault();
+    if (focusedIndex >= 0 && flattenedNodes[focusedIndex]) {
+      var currentItem = flattenedNodes[focusedIndex];
+      if (menulayout === _constants.LAYOUT.HORIZONTAL) {
+        moveFocusHorizontally(-1);
+      } else {
+        collapseAndFocusParent(currentItem);
+      }
+    }
+  }, [menulayout, keyboardMovements, focusedIndex, flattenedNodes, moveFocusHorizontally, collapseAndFocusParent]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    var key = event.key;
+    if (key === "Enter" && document.activeElement === buttonRef.current) {
+      event.preventDefault();
+      toggleMenu();
+      return;
+    }
+    if (!open && key === "Enter") {
+      event.preventDefault();
+      setOpen(true);
+      return;
+    }
+    if (!open && !["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
+      return;
+    }
+    if (flattenedNodes.length === 0 && open) return;
+    var keyHandlers = {
+      ArrowDown: handleArrowDown,
+      ArrowUp: handleArrowUp,
+      Enter: handleEnterOrSpace,
+      " ": handleEnterOrSpace,
+      Escape: handleEscape,
+      Tab: closeMenu,
+      ArrowRight: handleArrowRight,
+      ArrowLeft: handleArrowLeft
+    };
+    var handler = keyHandlers[key];
+    if (handler) {
+      handler(event);
+    }
+  }, [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;
+      var _getNodeProperties2 = getNodeProperties(node),
+        label = _getNodeProperties2.label,
+        icon = _getNodeProperties2.icon,
+        link = _getNodeProperties2.link,
+        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];
+
+      // 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: isHovered
+        })
+        // Track hover state for this item's path
+        ,
+        onMouseEnter: function onMouseEnter() {
+          return handlePathMouseEnter(itemPath);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handlePathMouseLeave(itemPath, e);
+        },
+        style: {
+          position: "relative"
+        }
+      }, __jsx(_Link["default"], {
+        title: label,
+        className: disabled ? "disabled" : "",
+        onClick: function onClick(event) {
+          handleMenuItemClick(event, node);
+        }
+      }, 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)), children && children.length > 0 && (type !== "anchor" ? __jsx(_ListItems.CollapsibleMenu, {
+        isOpen: isSubmenuOpen,
+        verticalPos: verticalPos,
+        className: submenuClassName,
+        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 handlePathMouseEnter(itemPath);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handlePathMouseLeave(itemPath, e);
+        }
+      }, renderMenuItems(children, itemPath)) : isSubmenuOpen && open && __jsx(_ListItems.MenuList, {
+        iconposition: iconposition,
+        className: submenuClassName,
+        style: getMenuLayoutStyles()
+        // Same hover tracking for anchor-type menus
+        ,
+        onMouseEnter: function onMouseEnter() {
+          return handlePathMouseEnter(itemPath);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handlePathMouseLeave(itemPath, e);
+        },
+        onClick: function onClick(event) {
+          return onActionsclick === null || onActionsclick === void 0 ? void 0 : onActionsclick(node);
+        }
+      }, renderMenuItems(children, itemPath))));
+    });
+  }, [getNodeProperties, menuPosition, hoveredPaths, handlePathMouseEnter, handlePathMouseLeave, hint, handleMenuItemClick, activeItem, linktarget, iconposition, animateitems, menualign, getMenuLayoutStyles, type, open, panelPosition]);
+
+  // Effects
+  (0, _react.useEffect)(function () {
+    if (!open) return;
+    setActiveItem(null);
+    setFocusedIndex(-1);
+  }, [open]);
+  (0, _react.useEffect)(function () {
+    if (autoopen === _constants.AUTO_OPEN.ALWAYS) {
+      setOpen(true);
+    } else if (autoopen === _constants.AUTO_OPEN.ACTIVE_PAGE) {
+      var hasActiveItem = filteredDataset.some(function (node) {
+        return _hasLinkToCurrentPage([node], window.location.pathname);
+      });
+      if (hasActiveItem) {
+        setOpen(true);
+      }
+    }
+  }, [filteredDataset, autoopen]);
+  var notifiedPathRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    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) {
+      if (!nodes || !Array.isArray(nodes)) return false;
+      return nodes.some(function (node) {
+        var _value2;
+        var _getNodeProperties3 = getNodeProperties(node),
+          link = _getNodeProperties3.link,
+          children = _getNodeProperties3.children;
+        var nodeValueLink = node === null || node === void 0 || (_value2 = node.value) === null || _value2 === void 0 ? void 0 : _value2.link;
+        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 false;
+      });
+    };
+    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) {
+      onNavItemActivate();
+      notifiedPathRef.current = path;
+      setOpen(true);
+    } else if (!hasActiveItem) {
+      // Reset when no active item found
+      notifiedPathRef.current = null;
+    }
+  }, [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 || autoclose === _constants.AUTO_CLOSE.DISABLED) return;
+    var handleOutsideClick = function handleOutsideClick(event) {
+      var _menuRef$current, _buttonRef$current2;
+      if (!event.target) return;
+      var clickedInsideMenu = (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.contains(event.target);
+      var clickedOnButton = (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.contains(event.target);
+      if (!clickedInsideMenu && !clickedOnButton) {
+        var _buttonRef$current3;
+        setOpen(false);
+        setFocusedIndex(-1);
+        setActiveItem(null);
+        (_buttonRef$current3 = buttonRef.current) === null || _buttonRef$current3 === void 0 || _buttonRef$current3.focus();
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return function () {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [open, autoclose]);
+  (0, _react.useEffect)(function () {
+    if (!shortcutkey) return;
+    var handleShortcutKey = function handleShortcutKey(event) {
+      var isModifierKey = event.altKey || navigator.platform.indexOf("Mac") !== -1 && event.ctrlKey && event.altKey;
+      if (isModifierKey && event.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        var _buttonRef$current4;
+        event.preventDefault();
+        setOpen(function (prev) {
+          return !prev;
+        });
+        (_buttonRef$current4 = buttonRef.current) === null || _buttonRef$current4 === void 0 || _buttonRef$current4.focus();
+      }
+    };
+    window.addEventListener("keydown", handleShortcutKey);
+    return function () {
+      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 _getItem2 = function getItem(nodes) {
+        if (!nodes || !Array.isArray(nodes)) return;
+        nodes.forEach(function (item) {
+          if (itemFound) return;
+          if (item.isactive) {
+            itemFound = true;
+            if (listener !== null && listener !== void 0 && listener.Widgets && name && onSelect) {
+              var widget = listener.Widgets[name];
+              if (widget) {
+                onSelect({}, widget, item);
+              }
+            }
+            return false;
+          }
+          if (item.children && !(0, _lodash.isEmpty)(item.children)) {
+            _getItem2(item.children);
+          }
+        });
+      };
+      _getItem2(dataset);
+    });
+    return function () {
+      if (datasetSubscription && typeof datasetSubscription.unsubscribe === "function") {
+        datasetSubscription.unsubscribe();
+      }
+    };
+  }, [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 mainMenuClassName = (0, _react.useMemo)(function () {
+    return (0, _ListItems.buildMenuListClasses)(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuPosition);
+  }, [iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuPosition]);
+  var hoverEventHandlers = showonhover ? {
+    onMouseEnter: handleContainerMouseEnter,
+    onMouseLeave: handleContainerMouseLeave
+  } : {};
+
+  // Render
+  return __jsx("div", (0, _extends2["default"])({
+    caption: caption,
+    ref: menuRef,
+    className: (0, _clsx["default"])("dropdown", "app-menu", {
+      open: open
+    }, className)
+  }, hoverEventHandlers, {
+    onKeyDown: handleKeyDown,
+    role: "menu",
+    "aria-label": arialabel || "Menu",
+    "aria-expanded": open,
+    type: type,
+    name: name
+  }), __jsx(_Tooltip["default"], {
+    title: hint || "",
+    enterDelay: _constants.TOOLTIP_ENTER_DELAY,
+    disableHoverListener: !hint
+  }, type === "anchor" ? __jsx("a", (0, _extends2["default"])({
+    className: (0, _clsx["default"])("dropdown-toggle app-anchor", isNavItemActive && "active"),
+    "icon-position": "left",
+    role: "button",
+    onClick: handleMenuClick,
+    "aria-label": arialabel || "Menu",
+    "aria-expanded": open,
+    "aria-haspopup": "true",
+    accessKey: shortcutkey,
+    tabIndex: props.tabindex,
+    style: {
+      width: width !== undefined ? typeof width === "number" ? "".concat(width, "px") : width : undefined,
+      height: height !== undefined ? typeof height === "number" ? "".concat(height, "px") : height : undefined,
+      textAlign: menualign
+    }
+  }, (0, _attr.removeInvalidAttributes)(restProps)), iconclass && __jsx("i", {
+    className: (0, _clsx["default"])("app-icon", iconclass),
+    "aria-hidden": "true"
+  }), __jsx("span", {
+    className: "sr-only"
+  }, "".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: (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), "app-button", menuclass, "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",
+    "aria-expanded": open,
+    "aria-label": arialabel || "Menu",
+    accessKey: shortcutkey,
+    tabIndex: props.tabindex,
+    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
+    }, buttonStyles), menuContainerStyles)
+  }, (0, _attr.removeInvalidAttributes)(restProps)), iconclass && __jsx("i", {
+    className: (0, _clsx["default"])("app-icon", iconclass),
+    "aria-hidden": "true"
+  }), __jsx("span", {
+    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,
+    className: mainMenuClassName,
+    style: getMenuLayoutStyles()
+  }, hoverEventHandlers), renderMenuItems(nodesWithRefs)) : open && __jsx(_ListItems.MenuList, (0, _extends2["default"])({
+    iconposition: iconposition,
+    className: mainMenuClassName,
+    style: getMenuLayoutStyles()
+  }, hoverEventHandlers), renderMenuItems(nodesWithRefs)));
+});
+WmMenu.displayName = "WmMenu";
+
+/**
+ * The WmMenu component renders a navigation menu with support for hierarchical items,
+ * dataset binding, role-based filtering, and configurable layout/position.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-menu--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-menu--docs)
+ *
+ * @param props - {@link WmMenuExtendedProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmMenu);