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

package/components/navigation/menu/index.js

@@ -1,916 +1,948 @@
-"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();
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, useEffect, useRef, useState, useMemo, useCallback } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { transformDataset } from "../../../utils/transformedDataset-utils";
+import {
+  POSITION,
+  LAYOUT,
+  AUTO_OPEN,
+  AUTO_CLOSE,
+  TOOLTIP_ENTER_DELAY,
+  CARET_CLS,
+  menuAlignClass
+} from "./constants";
+import { isEmpty, cloneDeep } from "lodash";
+import Link from "@mui/material/Link";
+import { buildMenuListClasses, CollapsibleMenu, MenuList } from "./components/ListItems";
+import {
+  getRouteNameFromLink,
+  triggerItemAction
+} from "../../../core/util/utils";
+import { usePathname } from "next/navigation";
+import { executeActionTaskFromItem } from "./utils/action-task";
+import { filterMenuNodesByRole } from "./utils/role-filter";
+import { useKeyboardMovements } from "./hooks/useKeyboardMovements.hook";
+import { useTransformedDataset } from "./hooks/useTransformedDataset.hook";
+import { useHoverState } from "./hooks/useHoverState.hook";
+import { hyperLinkMofify } from "../../../core/constants";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const isPathMatchingLink = (path, link) => {
+  const 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);
+  return new RegExp(`(^|/)${cleanLink}($|/)`, "i").test(path);
 };
-var _hasLinkToCurrentPage = function hasLinkToCurrentPage(nodes, currentPath) {
+const hasLinkToCurrentPage = (nodes, currentPath) => {
   if (!nodes || !Array.isArray(nodes)) return false;
-  return nodes.some(function (node) {
+  return nodes.some((node) => {
     if (node.link === currentPath) return true;
-    return node.children && _hasLinkToCurrentPage(node.children, currentPath);
+    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 () {
+const WmMenu = memo((props) => {
+  var _b, _c;
+  const _a = props, {
+    menualign = "left",
+    menuposition: initialMenuPosition = "down,right",
+    menulayout = "vertical",
+    menuclass,
+    linktarget = "_self",
+    iconclass,
+    type = "button",
+    animateitems,
+    disableMenuContext = false,
+    showonhover = false,
+    panelPosition,
+    autoclose = "outsideClick",
+    autoopen = "never",
+    hint,
+    arialabel,
+    width,
+    height,
+    iconposition = "left",
+    caption,
+    shortcutkey,
+    onClick,
+    onSelect,
+    navNodes = [],
+    styles,
+    conditionalstyles,
+    className,
+    children,
+    listener,
+    name,
+    resetNavNodes,
+    nodes$,
+    dataset,
+    orderby,
+    itemlabel = "label",
+    itemlink = "Link",
+    itemicon = "Icon",
+    itemaction,
+    userrole,
+    loggedInUser,
+    itemchildren = "children",
+    isactive,
+    displayValue,
+    onActionsclick,
+    dataPath,
+    isFromNav = false,
+    onNavItemActivate,
+    isNavItemActive = false
+  } = _a, restProps = __objRest(_a, [
+    "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"
+  ]);
+  const deepCloneDataset = cloneDeep(dataset);
+  const itemLabelWrapper = typeof itemlabel === "function" ? (rest) => itemlabel(__spreadValues({ App: listener == null ? void 0 : listener.App }, rest)) : itemlabel;
+  const path = usePathname();
+  const user = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = loggedInUser != null ? loggedInUser : (_a2 = listener == null ? void 0 : listener.appConfig) == null ? void 0 : _a2.loggedInUser) != null ? _b2 : null;
+    },
+    [loggedInUser, (_b = listener == null ? void 0 : listener.appConfig) == null ? void 0 : _b.loggedInUser]
+  );
+  const [open, setOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [menuPosition, setMenuPosition] = useState(initialMenuPosition);
+  const buttonRef = useRef(null);
+  const menuRef = useRef(null);
+  const keyboardMovements = useKeyboardMovements(menuPosition);
+  const transformedDataset = useTransformedDataset(
+    deepCloneDataset,
+    itemLabelWrapper,
+    orderby,
+    itemchildren,
+    dataPath
+  );
+  const filteredDataset = useMemo(() => {
     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 () {
+    const userRoles = (user == null ? void 0 : user.roles) || [];
+    return filterMenuNodesByRole(transformedDataset, userRoles, userrole);
+  }, [transformedDataset, userrole, user == null ? void 0 : user.roles]);
+  const { hoveredPaths, handlePathMouseEnter, handlePathMouseLeave } = useHoverState();
+  const handleContainerMouseEnter = useCallback(() => {
     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);
+  const handleContainerMouseLeave = useCallback(
+    (event) => {
+      var _a2, _b2, _c2;
+      if (!showonhover) return;
+      const relatedTarget = event == null ? void 0 : event.relatedTarget;
+      const isMovingToMenu = relatedTarget && (((_a2 = relatedTarget.classList) == null ? void 0 : _a2.contains("dropdown-menu")) || ((_b2 = relatedTarget.closest) == null ? void 0 : _b2.call(relatedTarget, ".dropdown-menu")) !== null || ((_c2 = relatedTarget.closest) == null ? void 0 : _c2.call(relatedTarget, ".app-menu")) !== null);
+      if (!isMovingToMenu) {
+        setOpen(false);
+        setFocusedIndex(-1);
+        setActiveItem(null);
       }
-      return nodeWithRef;
-    });
-  }, [transformChildrenDataset]);
-  var nodesWithRefs = (0, _react.useMemo)(function () {
-    return createRefsForNodes(filteredDataset);
-  }, [filteredDataset, createRefsForNodes]);
-  var flattenNodes = (0, _react.useCallback)(function (nodes) {
+    },
+    [showonhover]
+  );
+  const transformChildrenDataset = useCallback(
+    (children2) => {
+      if (!children2 || !Array.isArray(children2)) return [];
+      return transformDataset(
+        children2,
+        "",
+        itemLabelWrapper,
+        void 0,
+        void 0,
+        orderby,
+        void 0,
+        void 0,
+        itemchildren
+      );
+    },
+    [itemLabelWrapper, orderby]
+  );
+  const createRefsForNodes = useCallback(
+    (nodes) => {
+      if (!nodes || !Array.isArray(nodes)) return [];
+      return nodes.map((node) => {
+        var _a2, _b2;
+        const nodeWithRef = __spreadValues({}, node);
+        if (!nodeWithRef.nodeRef) {
+          nodeWithRef.nodeRef = React.createRef();
+        }
+        const existingChildren = nodeWithRef.children || ((_a2 = nodeWithRef.dataObject) == null ? void 0 : _a2.children);
+        if (existingChildren && existingChildren.length) {
+          const alreadyTransformed = ((_b2 = existingChildren[0]) == null ? void 0 : _b2.dataObject) !== void 0;
+          const processedChildren = alreadyTransformed ? existingChildren : transformChildrenDataset(existingChildren);
+          nodeWithRef.children = createRefsForNodes(processedChildren);
+        }
+        return nodeWithRef;
+      });
+    },
+    [transformChildrenDataset]
+  );
+  const nodesWithRefs = useMemo(
+    () => createRefsForNodes(filteredDataset),
+    [filteredDataset, createRefsForNodes]
+  );
+  const flattenNodes = useCallback((nodes) => {
     if (!nodes || !Array.isArray(nodes)) return [];
-    return nodes.reduce(function (acc, node) {
+    return nodes.reduce((acc, node) => {
       acc.push(node);
       if (node.children && node.children.length) {
-        acc.push.apply(acc, (0, _toConsumableArray2["default"])(flattenNodes(node.children)));
+        acc.push(...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"];
+  const flattenedNodes = useMemo(() => flattenNodes(nodesWithRefs), [nodesWithRefs, flattenNodes]);
+  const getNodeProperties = useCallback(
+    (node) => {
+      const dataObject = node.dataObject || {};
+      let label;
+      let children2;
+      if (typeof itemLabelWrapper === "function") {
+        try {
+          label = itemLabelWrapper(dataObject);
+        } catch (error) {
+          console.warn("Error evaluating itemlabel expression:", error);
+          label = (node == null ? void 0 : node["label"]) || dataObject["label"];
+        }
+      } else {
+        label = (node == null ? void 0 : node[itemLabelWrapper]) || dataObject[itemLabelWrapper];
       }
-    } 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;
+      if (typeof itemchildren === "function") {
+        try {
+          const childrenData = itemchildren(dataObject);
+          if (Array.isArray(childrenData)) {
+            children2 = transformChildrenDataset(childrenData);
+          } else {
+            children2 = childrenData;
+          }
+        } catch (error) {
+          console.warn("Error evaluating itemchildren expression:", error);
+          children2 = (node == null ? void 0 : node["children"]) || dataObject["children"];
         }
-      } catch (error) {
-        console.warn("Error evaluating itemchildren expression:", error);
-        children = (node === null || node === void 0 ? void 0 : node["children"]) || dataObject["children"];
+      } else {
+        children2 = (node == null ? void 0 : node.children) || (dataObject == null ? void 0 : dataObject.children) || (node == null ? void 0 : node[itemchildren]) || (dataObject == null ? void 0 : dataObject[itemchildren]);
       }
-    } 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 {
+      return {
+        label,
+        icon: (node == null ? void 0 : node[itemicon]) || dataObject[itemicon],
+        link: (node == null ? void 0 : node[itemlink]) || dataObject[itemlink] || dataObject["link"],
+        hint: (node == null ? void 0 : node[hint]) || dataObject[hint],
+        disabled: (node == null ? void 0 : node.disabled) || dataObject.disabled,
+        children: children2
+      };
+    },
+    [itemlabel, itemicon, itemlink, hint, itemchildren]
+  );
+  const buttonStyles = useMemo(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, styles), conditionalstyles), width !== void 0 && { width: typeof width === "number" ? `${width}px` : width }), height !== void 0 && { height: typeof height === "number" ? `${height}px` : height }),
+    [styles, conditionalstyles, width, height]
+  );
+  const menuContainerStyles = useMemo(
+    () => ({
       textAlign: menualign,
       position: "relative"
-    };
-  }, [menualign]);
-  var getMenuLayoutStyles = (0, _react.useCallback)(function () {
+    }),
+    [menualign]
+  );
+  const getMenuLayoutStyles = useCallback(() => {
     switch (menulayout) {
-      case _constants.LAYOUT.HORIZONTAL:
+      case LAYOUT.HORIZONTAL:
         return {
           display: "flex",
           flexDirection: "row"
         };
-      case _constants.LAYOUT.GRID:
+      case LAYOUT.GRID:
         return {
           display: "grid",
           gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
           gap: "8px"
         };
-      case _constants.LAYOUT.VERTICAL:
+      case 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 === "#") {
+  const handleMenuClick = useCallback(
+    (event) => {
       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;
+      if (onClick && (listener == null ? void 0 : listener.Widgets) && name && listener.Widgets[name]) {
+        onClick(event, listener.Widgets[name]);
+      }
+      setOpen((prevState) => !prevState);
+      if (!open) {
+        setActiveItem(null);
+        setFocusedIndex(-1);
+      }
+      if (isFromNav && onNavItemActivate) {
+        onNavItemActivate();
+      }
+    },
+    [onClick, listener, name, open, isFromNav, onNavItemActivate]
+  );
+  const handleMenuItemClick = useCallback(
+    (event, item) => {
+      var _a2, _b2, _c2, _d, _e;
+      event = event.nativeEvent;
+      const { label, icon, link } = getNodeProperties(item);
+      if (item.children && item.children.length > 0 || !link || link === "#") {
+        event.preventDefault();
+      }
+      setActiveItem(item);
+      const index = flattenedNodes.findIndex((node) => node === item);
+      if (index !== -1) {
+        setFocusedIndex(index);
+      }
+      executeActionTaskFromItem(item, listener);
+      if (item.children && item.children.length > 0) {
+        item.expanded = !item.expanded;
+      }
+      const simplifiedItem = __spreadValues(__spreadProps(__spreadValues({}, item.dataObject || {}), {
+        name: ((_a2 = item.dataObject) == null ? void 0 : _a2.name) || name,
+        label,
+        dataValue: ((_b2 = item.dataObject) == null ? void 0 : _b2.dataValue) || label,
+        value: ((_c2 = item.dataObject) == null ? void 0 : _c2.dataValue) || label,
+        icon: ((_d = item.dataObject) == null ? void 0 : _d.icon) || icon,
+        link,
+        target: (_e = item.dataObject) == null ? void 0 : _e.target
+      }), item == null ? void 0 : item.value);
+      if (onSelect) {
+        onSelect(event, props, simplifiedItem);
+      }
+      if (isFromNav && onNavItemActivate) {
+        onNavItemActivate();
+      }
+      if (name && (listener == null ? void 0 : listener.Widgets[name])) {
+        listener.Widgets[name].displayValue = label;
+      }
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(name, {
+          datavalue: label
+        });
+      }
+      const routeName = hyperLinkMofify(getRouteNameFromLink((simplifiedItem == null ? void 0 : simplifiedItem.link) || ""));
+      const currentPath = window.location.pathname;
+      if (routeName !== currentPath) {
+        setTimeout(() => {
+          triggerItemAction(simplifiedItem);
+        }, 0);
+      }
+      if (autoclose === AUTO_CLOSE.ALWAYS && (!item.children || item.children.length === 0)) {
+        setOpen(false);
+        setFocusedIndex(-1);
+      }
+      onActionsclick == null ? void 0 : onActionsclick(item);
+    },
+    [
+      flattenedNodes,
+      onSelect,
+      props,
+      name,
+      listener,
+      autoclose,
+      getNodeProperties,
+      isFromNav,
+      onNavItemActivate
+    ]
+  );
+  const focusNode = useCallback(
+    (index) => {
+      var _a2, _b2;
+      if ((_b2 = (_a2 = flattenedNodes[index]) == null ? void 0 : _a2.nodeRef) == null ? void 0 : _b2.current) {
+        flattenedNodes[index].nodeRef.current.focus();
+      }
+    },
+    [flattenedNodes]
+  );
+  const closeMenu = useCallback(() => {
+    var _a2;
     setOpen(false);
     setFocusedIndex(-1);
     setActiveItem(null);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
+    (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
   }, []);
-  var toggleMenu = (0, _react.useCallback)(function () {
-    setOpen(function (prevOpen) {
-      return !prevOpen;
-    });
+  const toggleMenu = useCallback(() => {
+    setOpen((prevOpen) => !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);
+  const handleArrowDown = useCallback(
+    (event) => {
+      if (keyboardMovements.MOVE_DOWN !== "DOWN-ARROW") return;
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
       }
-    }
-  }, [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);
+      const nextIndex = focusedIndex < 0 ? 0 : (focusedIndex + 1) % flattenedNodes.length;
+      setFocusedIndex(nextIndex);
+      focusNode(nextIndex);
+    },
+    [keyboardMovements, open, focusedIndex, flattenedNodes.length, focusNode]
+  );
+  const handleArrowUp = useCallback(
+    (event) => {
+      if (keyboardMovements.MOVE_UP !== "UP-ARROW") return;
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
       }
-    }
-  }, [menulayout, keyboardMovements, focusedIndex, flattenedNodes, moveFocusHorizontally, collapseAndFocusParent]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var key = event.key;
-    if (key === "Enter" && document.activeElement === buttonRef.current) {
+      if (focusedIndex === 0) {
+        closeMenu();
+        return;
+      }
+      const prevIndex = focusedIndex <= 0 ? flattenedNodes.length - 1 : (focusedIndex - 1) % flattenedNodes.length;
+      setFocusedIndex(prevIndex);
+      focusNode(prevIndex);
+    },
+    [keyboardMovements, open, focusedIndex, flattenedNodes.length, focusNode, closeMenu]
+  );
+  const handleEnterOrSpace = useCallback(
+    (event) => {
+      if (keyboardMovements.ON_ENTER !== "ENTER") return;
       event.preventDefault();
-      toggleMenu();
-      return;
-    }
-    if (!open && key === "Enter") {
+      if (focusedIndex >= 0 && flattenedNodes[focusedIndex]) {
+        handleMenuItemClick(event, flattenedNodes[focusedIndex]);
+      } else if (open) {
+        closeMenu();
+      }
+    },
+    [keyboardMovements, focusedIndex, flattenedNodes, handleMenuItemClick, open, closeMenu]
+  );
+  const handleEscape = useCallback(
+    (event) => {
+      if (keyboardMovements.ON_ESCAPE !== "ESC") return;
       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);
+      closeMenu();
+    },
+    [keyboardMovements, closeMenu]
+  );
+  const moveFocusHorizontally = useCallback(
+    (direction) => {
+      const nextIndex = (focusedIndex + direction + flattenedNodes.length) % flattenedNodes.length;
+      setFocusedIndex(nextIndex);
+      focusNode(nextIndex);
+    },
+    [focusedIndex, flattenedNodes.length, focusNode]
+  );
+  const expandAndFocusChild = useCallback(
+    (currentItem) => {
+      currentItem.expanded = true;
+      const firstChild = currentItem.children[0];
+      const childIndex = flattenedNodes.findIndex((node) => node === firstChild);
+      if (childIndex !== -1) {
+        setFocusedIndex(childIndex);
+        setActiveItem(flattenedNodes[childIndex]);
+        focusNode(childIndex);
+      }
+    },
+    [flattenedNodes, focusNode]
+  );
+  const collapseAndFocusParent = useCallback(
+    (currentItem) => {
+      const parentIndex = flattenedNodes.findIndex(
+        (node) => {
+          var _a2;
+          return (_a2 = node.children) == null ? void 0 : _a2.some((child) => child === currentItem);
         }
-      }, 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);
+      );
+      if (parentIndex !== -1) {
+        flattenedNodes[parentIndex].expanded = false;
+        setFocusedIndex(parentIndex);
+        setActiveItem(flattenedNodes[parentIndex]);
+        focusNode(parentIndex);
+      }
+    },
+    [flattenedNodes, focusNode]
+  );
+  const handleArrowRight = useCallback(
+    (event) => {
+      if (menulayout === LAYOUT.HORIZONTAL || keyboardMovements.MOVE_RIGHT !== "RIGHT-ARROW")
+        return;
+      event.preventDefault();
+      if (focusedIndex >= 0 && flattenedNodes[focusedIndex]) {
+        const currentItem = flattenedNodes[focusedIndex];
+        if (currentItem.children && currentItem.children.length > 0) {
+          expandAndFocusChild(currentItem);
+        } else if (menulayout === LAYOUT.HORIZONTAL) {
+          moveFocusHorizontally(1);
         }
-      }, 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);
+      }
+    },
+    [
+      menulayout,
+      keyboardMovements,
+      focusedIndex,
+      flattenedNodes,
+      expandAndFocusChild,
+      moveFocusHorizontally
+    ]
+  );
+  const handleArrowLeft = useCallback(
+    (event) => {
+      if (menulayout === LAYOUT.HORIZONTAL || keyboardMovements.MOVE_LEFT !== "LEFT-ARROW") return;
+      event.preventDefault();
+      if (focusedIndex >= 0 && flattenedNodes[focusedIndex]) {
+        const currentItem = flattenedNodes[focusedIndex];
+        if (menulayout === LAYOUT.HORIZONTAL) {
+          moveFocusHorizontally(-1);
+        } else {
+          collapseAndFocusParent(currentItem);
         }
-      }, renderMenuItems(children, itemPath))));
-    });
-  }, [getNodeProperties, menuPosition, hoveredPaths, handlePathMouseEnter, handlePathMouseLeave, hint, handleMenuItemClick, activeItem, linktarget, iconposition, animateitems, menualign, getMenuLayoutStyles, type, open, panelPosition]);
-
-  // Effects
-  (0, _react.useEffect)(function () {
+      }
+    },
+    [
+      menulayout,
+      keyboardMovements,
+      focusedIndex,
+      flattenedNodes,
+      moveFocusHorizontally,
+      collapseAndFocusParent
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      const 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;
+      const keyHandlers = {
+        ArrowDown: handleArrowDown,
+        ArrowUp: handleArrowUp,
+        Enter: handleEnterOrSpace,
+        " ": handleEnterOrSpace,
+        Escape: handleEscape,
+        Tab: closeMenu,
+        ArrowRight: handleArrowRight,
+        ArrowLeft: handleArrowLeft
+      };
+      const handler = keyHandlers[key];
+      if (handler) {
+        handler(event);
+      }
+    },
+    [
+      open,
+      flattenedNodes.length,
+      toggleMenu,
+      handleArrowDown,
+      handleArrowUp,
+      handleEnterOrSpace,
+      handleEscape,
+      closeMenu,
+      handleArrowRight,
+      handleArrowLeft
+    ]
+  );
+  const renderMenuItems = useCallback(
+    (nodes, pathPrefix = "") => {
+      if (!nodes || !Array.isArray(nodes)) return null;
+      return nodes.map((node, index) => {
+        var _a2;
+        const { label, icon, link, hint: hint2, disabled, children: children2 } = getNodeProperties(node);
+        const itemPath = pathPrefix ? `${pathPrefix}-${index}` : `${index}`;
+        const nodeValueLink = (_a2 = node == null ? void 0 : node.value) == null ? void 0 : _a2.link;
+        const isActive = nodeValueLink && typeof nodeValueLink === "string" ? isPathMatchingLink(path, nodeValueLink) : link ? isPathMatchingLink(path, link) : false;
+        const [verticalPos2, horizontalPos2] = menuPosition.split(",");
+        const isHovered = hoveredPaths.has(itemPath);
+        const isSubmenuOpen = node.expanded || isHovered;
+        const submenuClassName = buildMenuListClasses(
+          iconposition,
+          menulayout,
+          horizontalPos2,
+          panelPosition,
+          animateitems,
+          menuPosition,
+          isHovered
+        );
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "li",
+            className: clsx(
+              children2 && children2.length > 0 && "dropdown-submenu",
+              "app-menu-item",
+              {
+                active: isActive,
+                hovered: isHovered
+              }
+            ),
+            onMouseEnter: () => handlePathMouseEnter(itemPath),
+            onMouseLeave: (e) => handlePathMouseLeave(itemPath, e),
+            style: { position: "relative" },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  title: label,
+                  className: disabled ? "disabled" : "",
+                  onClick: (event) => {
+                    handleMenuItemClick(event, node);
+                  },
+                  children: [
+                    children2 && children2.length > 0 && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx(
+                          "pull-right fa caret",
+                          menuAlignClass[menualign] || "fa-caret-right"
+                        )
+                      }
+                    ),
+                    icon && /* @__PURE__ */ jsx("i", { className: `app-icon ${icon}` }),
+                    /* @__PURE__ */ jsx("span", { className: "anchor-caption", children: label })
+                  ]
+                }
+              ),
+              children2 && children2.length > 0 && (type !== "anchor" ? /* @__PURE__ */ jsx(
+                CollapsibleMenu,
+                {
+                  isOpen: isSubmenuOpen,
+                  verticalPos: verticalPos2,
+                  className: submenuClassName,
+                  style: getMenuLayoutStyles(),
+                  onMouseEnter: () => handlePathMouseEnter(itemPath),
+                  onMouseLeave: (e) => handlePathMouseLeave(itemPath, e),
+                  children: renderMenuItems(children2, itemPath)
+                }
+              ) : isSubmenuOpen && open && /* @__PURE__ */ jsx(
+                MenuList,
+                {
+                  iconposition,
+                  className: submenuClassName,
+                  style: getMenuLayoutStyles(),
+                  onMouseEnter: () => handlePathMouseEnter(itemPath),
+                  onMouseLeave: (e) => handlePathMouseLeave(itemPath, e),
+                  onClick: (event) => onActionsclick == null ? void 0 : onActionsclick(node),
+                  children: renderMenuItems(children2, itemPath)
+                }
+              ))
+            ]
+          },
+          index
+        );
+      });
+    },
+    [
+      getNodeProperties,
+      menuPosition,
+      hoveredPaths,
+      handlePathMouseEnter,
+      handlePathMouseLeave,
+      hint,
+      handleMenuItemClick,
+      activeItem,
+      linktarget,
+      iconposition,
+      animateitems,
+      menualign,
+      getMenuLayoutStyles,
+      type,
+      open,
+      panelPosition
+    ]
+  );
+  useEffect(() => {
     if (!open) return;
     setActiveItem(null);
     setFocusedIndex(-1);
   }, [open]);
-  (0, _react.useEffect)(function () {
-    if (autoopen === _constants.AUTO_OPEN.ALWAYS) {
+  useEffect(() => {
+    if (autoopen === 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);
-      });
+    } else if (autoopen === AUTO_OPEN.ACTIVE_PAGE) {
+      const hasActiveItem = filteredDataset.some(
+        (node) => hasLinkToCurrentPage([node], window.location.pathname)
+      );
       if (hasActiveItem) {
         setOpen(true);
       }
     }
   }, [filteredDataset, autoopen]);
-  var notifiedPathRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  const notifiedPathRef = useRef(null);
+  useEffect(() => {
     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) {
+    const 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;
+      return nodes.some((node) => {
+        var _a2;
+        const { link, children: children2 } = getNodeProperties(node);
+        const nodeValueLink = (_a2 = node == null ? void 0 : node.value) == null ? void 0 : _a2.link;
+        const 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);
+        if (children2 && children2.length > 0) {
+          return checkIfActive(children2);
         }
         return false;
       });
     };
-    var hasActiveItem = _checkIfActive(filteredDataset);
-
-    // Notify nav if there's an active item and we haven't notified for this path yet
+    const hasActiveItem = checkIfActive(filteredDataset);
     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;
+  useEffect(() => {
+    if (!open || autoclose === AUTO_CLOSE.NEVER || autoclose === AUTO_CLOSE.DISABLED) return;
+    const handleOutsideClick = (event) => {
+      var _a2, _b2, _c2;
       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);
+      const clickedInsideMenu = (_a2 = menuRef.current) == null ? void 0 : _a2.contains(event.target);
+      const clickedOnButton = (_b2 = buttonRef.current) == null ? void 0 : _b2.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();
+        (_c2 = buttonRef.current) == null ? void 0 : _c2.focus();
       }
     };
     document.addEventListener("mousedown", handleOutsideClick);
-    return function () {
+    return () => {
       document.removeEventListener("mousedown", handleOutsideClick);
     };
   }, [open, autoclose]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!shortcutkey) return;
-    var handleShortcutKey = function handleShortcutKey(event) {
-      var isModifierKey = event.altKey || navigator.platform.indexOf("Mac") !== -1 && event.ctrlKey && event.altKey;
+    const handleShortcutKey = (event) => {
+      var _a2;
+      const 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();
+        setOpen((prev) => !prev);
+        (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
       }
     };
     window.addEventListener("keydown", handleShortcutKey);
-    return function () {
+    return () => {
       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
+  const executedInitialActiveRef = useRef(false);
+  useEffect(() => {
+    if (nodes$ && typeof nodes$.subscribe === "function") return;
     if (executedInitialActiveRef.current) return;
     if (!transformedDataset || transformedDataset.length === 0) return;
-    var itemFound = false;
-    var _getItem = function getItem(nodes) {
+    let itemFound = false;
+    const getItem = (nodes) => {
       if (!nodes || !Array.isArray(nodes)) return;
-      nodes.forEach(function (item) {
-        var _dataObject2;
+      nodes.forEach((item) => {
+        var _a2;
         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) {
+        if ((item == null ? void 0 : item.isactive) || ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.isactive)) {
           itemFound = true;
-          if (listener !== null && listener !== void 0 && listener.Widgets && name && onSelect) {
-            var widget = listener.Widgets[name];
+          if ((listener == null ? void 0 : listener.Widgets) && name && onSelect) {
+            const widget = listener.Widgets[name];
             if (widget) {
               onSelect({}, widget, item);
             }
           }
-          (0, _actionTask.executeActionTaskFromItem)(item, listener);
+          executeActionTaskFromItem(item, listener);
         }
-        if (item.children && !(0, _lodash.isEmpty)(item.children)) {
-          _getItem(item.children);
+        if (item.children && !isEmpty(item.children)) {
+          getItem(item.children);
         }
       });
     };
-    _getItem(transformedDataset);
+    getItem(transformedDataset);
     if (itemFound) {
       executedInitialActiveRef.current = true;
     }
   }, []);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!nodes$ || typeof nodes$.subscribe !== "function") return;
-    var datasetSubscription = nodes$.subscribe(function () {
+    const datasetSubscription = nodes$.subscribe(() => {
       if (!dataset) return;
-      var itemFound = false;
-      var _getItem2 = function getItem(nodes) {
+      let itemFound = false;
+      const getItem = (nodes) => {
         if (!nodes || !Array.isArray(nodes)) return;
-        nodes.forEach(function (item) {
+        nodes.forEach((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 ((listener == null ? void 0 : listener.Widgets) && name && onSelect) {
+              const widget = listener.Widgets[name];
               if (widget) {
                 onSelect({}, widget, item);
               }
             }
             return false;
           }
-          if (item.children && !(0, _lodash.isEmpty)(item.children)) {
-            _getItem2(item.children);
+          if (item.children && !isEmpty(item.children)) {
+            getItem(item.children);
           }
         });
       };
-      _getItem2(dataset);
+      getItem(dataset);
     });
-    return function () {
+    return () => {
       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
+  const onShowCallback = useCallback(() => {
     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();
+      setTimeout(() => {
+        var _a2, _b2, _c2;
+        (_c2 = (_b2 = (_a2 = flattenedNodes[0]) == null ? void 0 : _a2.nodeRef) == null ? void 0 : _b2.current) == null ? void 0 : _c2.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
+  const onHideCallback = useCallback(() => {
     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
+  const resetNodesMethod = useCallback(() => {
     if (resetNavNodes) {
       resetNavNodes();
     }
-
-    // Auto-open logic from Angular implementation
-    if (autoopen === _constants.AUTO_OPEN.ACTIVE_PAGE && _hasLinkToCurrentPage(transformedDataset, path)) {
+    if (autoopen === AUTO_OPEN.ACTIVE_PAGE && hasLinkToCurrentPage(transformedDataset, path)) {
       setOpen(true);
-    } else if (autoopen === _constants.AUTO_OPEN.ALWAYS) {
+    } else if (autoopen === 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];
+  const setMenuPositionMethod = useCallback((position) => {
+    const validPositions = [
+      POSITION.DOWN_RIGHT,
+      POSITION.DOWN_LEFT,
+      POSITION.UP_RIGHT,
+      POSITION.UP_LEFT,
+      POSITION.INLINE
+    ];
     if (validPositions.includes(position)) {
       setMenuPosition(position);
     } else {
-      console.warn("Invalid menu position: ".concat(position, ". Valid positions are: ").concat(validPositions.join(", ")));
+      console.warn(
+        `Invalid menu position: ${position}. Valid positions are: ${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
-      });
+  const onKeyDownMethod = useCallback(
+    (event, eventAction) => {
+      if (eventAction) {
+      }
+      handleKeyDown(event);
+    },
+    [handleKeyDown]
+  );
+  const onMenuItemSelectMethod = useCallback(
+    (event, item) => {
+      var _a2;
+      if (onSelect && ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name])) {
+        onSelect(event, listener.Widgets[name], item);
+      }
+    },
+    [onSelect, listener, name]
+  );
+  useEffect(() => {
+    if ((listener == null ? 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
@@ -929,103 +961,136 @@ var WmMenu = exports.WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
       });
     }
   }, []);
-
-  // 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 ? {
+  const [verticalPos, horizontalPos] = menuPosition.split(",");
+  const mainMenuClassName = useMemo(
+    () => buildMenuListClasses(
+      iconposition,
+      menulayout,
+      horizontalPos,
+      panelPosition,
+      animateitems,
+      menuPosition
+    ),
+    [iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuPosition]
+  );
+  const 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)));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      caption,
+      ref: menuRef,
+      className: clsx("dropdown", "app-menu", { open }, className)
+    }, hoverEventHandlers), {
+      onKeyDown: handleKeyDown,
+      role: "menu",
+      "aria-label": arialabel || "Menu",
+      "aria-expanded": open
+    }), { type, name }), {
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: hint || "", enterDelay: TOOLTIP_ENTER_DELAY, disableHoverListener: !hint, children: type === "anchor" ? /* @__PURE__ */ jsxs(
+          "a",
+          __spreadProps(__spreadValues({
+            className: clsx("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 !== void 0 ? typeof width === "number" ? `${width}px` : width : void 0,
+              height: height !== void 0 ? typeof height === "number" ? `${height}px` : height : void 0,
+              textAlign: menualign
+            }
+          }, removeInvalidAttributes(restProps)), {
+            children: [
+              iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", iconclass), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${caption} ${(_c = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _c.LABEL_ICON}` }),
+              /* @__PURE__ */ jsx("span", { className: "anchor-caption", children: caption || "" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    "pull-right caret fa",
+                    (menuPosition == null ? void 0 : menuPosition.startsWith("up")) ? CARET_CLS.UP : CARET_CLS.DOWN
+                  )
+                }
+              )
+            ]
+          })
+        ) : /* @__PURE__ */ jsxs(
+          Button,
+          __spreadProps(__spreadValues({
+            className: clsx(
+              "btn dropdown-toggle",
+              `icon-position-${iconposition}`,
+              "app-button",
+              menuclass,
+              `menu-layout-${menulayout}`,
+              `menu-align-${menualign}`,
+              open ? "open" : "",
+              (menuPosition == null ? void 0 : menuPosition.startsWith("up")) ? "dropup" : "",
+              menuPosition === POSITION.INLINE ? "dropinline-menu" : ""
+            ),
+            ref: buttonRef,
+            onClick: handleMenuClick,
+            "aria-haspopup": "true",
+            "aria-expanded": open,
+            "aria-label": arialabel || "Menu",
+            accessKey: shortcutkey,
+            tabIndex: props.tabindex,
+            style: __spreadValues(__spreadValues({
+              width: width !== void 0 ? typeof width === "number" ? `${width}px` : width : void 0,
+              height: height !== void 0 ? typeof height === "number" ? `${height}px` : height : void 0
+            }, buttonStyles), menuContainerStyles)
+          }, removeInvalidAttributes(restProps)), {
+            children: [
+              iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", iconclass), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "btn-caption", children: caption }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    "pull-right caret fa",
+                    (menuPosition == null ? void 0 : menuPosition.startsWith("up")) ? CARET_CLS.UP : CARET_CLS.DOWN
+                  )
+                }
+              )
+            ]
+          })
+        ) }),
+        type !== "anchor" ? /* @__PURE__ */ jsx(
+          CollapsibleMenu,
+          __spreadProps(__spreadValues({
+            isOpen: open,
+            verticalPos,
+            className: mainMenuClassName,
+            style: getMenuLayoutStyles()
+          }, hoverEventHandlers), {
+            children: renderMenuItems(nodesWithRefs)
+          })
+        ) : open && /* @__PURE__ */ jsx(
+          MenuList,
+          __spreadProps(__spreadValues({
+            iconposition,
+            className: mainMenuClassName,
+            style: getMenuLayoutStyles()
+          }, hoverEventHandlers), {
+            children: 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);
+var menu_default = withBaseWrapper(WmMenu);
+export {
+  WmMenu,
+  menu_default as default
+};