@wavemaker/react-runtime 11.14.1-rc.236

package/components/navigation/menu/index.js

@@ -0,0 +1,807 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _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/react-runtime/higherOrder/withBaseWrapper");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _constants = require("./constants");
+var _lodash = require("lodash");
+var _link = _interopRequireDefault(require("next/link"));
+var _ListItems = require("./components/ListItems");
+var _utils = require("@wavemaker/react-runtime/core/util/utils");
+var _excluded = ["menualign", "menuposition", "menulayout", "menuclass", "linktarget", "iconclass", "type", "animateitems", "disableMenuContext", "showonhover", "panelPosition", "autoclose", "autoopen", "hint", "arialabel", "width", "height", "iconposition", "caption", "shortcutkey", "onClick", "onSelect", "navNodes", "styles", "conditionalstyles", "className", "children", "listener", "name", "resetNavNodes", "nodes$", "dataset", "orderby", "itemlabel", "itemlink", "itemicon", "itemaction", "userrole", "itemchildren", "isactive", "displayValue", "onActionsclick", "dataPath"];
+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; }
+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);
+  });
+};
+
+// Custom hooks
+var useKeyboardMovements = function useKeyboardMovements(menuposition) {
+  return (0, _react.useMemo)(function () {
+    switch (menuposition) {
+      case _constants.POSITION.UP_RIGHT:
+        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
+          MOVE_UP: "DOWN-ARROW",
+          MOVE_DOWN: "UP-ARROW"
+        });
+      case _constants.POSITION.UP_LEFT:
+        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
+          MOVE_UP: "DOWN-ARROW",
+          MOVE_DOWN: "UP-ARROW",
+          MOVE_LEFT: "RIGHT-ARROW",
+          MOVE_RIGHT: "LEFT-ARROW"
+        });
+      case _constants.POSITION.DOWN_LEFT:
+        return _objectSpread(_objectSpread({}, _constants.KEYBOARD_MOVEMENTS), {}, {
+          MOVE_LEFT: "RIGHT-ARROW",
+          MOVE_RIGHT: "LEFT-ARROW"
+        });
+      default:
+        return _constants.KEYBOARD_MOVEMENTS;
+    }
+  }, [menuposition]);
+};
+var useTransformedDataset = function useTransformedDataset(dataset, itemlabel, orderby, itemchildren, dataPath) {
+  return (0, _react.useMemo)(function () {
+    if (!dataset) return _constants.DEFAULT_DATASET;
+    return (0, _transformedDatasetUtils.transformDataset)(dataset, undefined, itemlabel, undefined, undefined, orderby, null, dataPath, itemchildren);
+  }, [dataset, itemlabel, orderby]);
+};
+var useHoverState = function useHoverState() {
+  var _useState = (0, _react.useState)(new Set()),
+    hoveredNodes = _useState[0],
+    setHoveredNodes = _useState[1];
+  var leaveTimerRef = (0, _react.useRef)(null);
+  var enterTimerRef = (0, _react.useRef)(null);
+  var handleNodeMouseEnter = (0, _react.useCallback)(function (node) {
+    if (leaveTimerRef.current) {
+      clearTimeout(leaveTimerRef.current);
+      leaveTimerRef.current = null;
+    }
+
+    // Clear any pending enter timer
+    if (enterTimerRef.current) {
+      clearTimeout(enterTimerRef.current);
+      enterTimerRef.current = null;
+    }
+
+    // Add node to hovered set immediately
+    setHoveredNodes(function (prev) {
+      return new Set([].concat((0, _toConsumableArray2["default"])(prev), [node]));
+    });
+  }, []);
+  var handleNodeMouseLeave = (0, _react.useCallback)(function (node, event) {
+    var _relatedTarget$classL, _relatedTarget$closes;
+    var relatedTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
+    var isMovingToChild = relatedTarget && (((_relatedTarget$classL = relatedTarget.classList) === null || _relatedTarget$classL === void 0 ? void 0 : _relatedTarget$classL.contains("dropdown-menu")) || ((_relatedTarget$closes = relatedTarget.closest) === null || _relatedTarget$closes === void 0 ? void 0 : _relatedTarget$closes.call(relatedTarget, ".dropdown-menu")) !== null);
+
+    // if (!isMovingToChild) {
+    // Clear any pending enter timer
+    if (enterTimerRef.current) {
+      clearTimeout(enterTimerRef.current);
+      enterTimerRef.current = null;
+    }
+
+    // Set a delay before removing the node from hovered set
+    // leaveTimerRef.current = setTimeout(() => {
+    setHoveredNodes(function (prev) {
+      var newSet = new Set(prev);
+      newSet["delete"](node);
+      return newSet;
+    });
+    // }, HOVER_LEAVE_DELAY);
+    // }
+  }, []);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (leaveTimerRef.current) {
+        clearTimeout(leaveTimerRef.current);
+      }
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    hoveredNodes: hoveredNodes,
+    handleNodeMouseEnter: handleNodeMouseEnter,
+    handleNodeMouseLeave: handleNodeMouseLeave
+  };
+};
+
+// Main component
+var WmMenu = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _listener$appLocale;
+  var _props$menualign = props.menualign,
+    menualign = _props$menualign === void 0 ? "left" : _props$menualign,
+    _props$menuposition = props.menuposition,
+    menuposition = _props$menuposition === void 0 ? "down,right" : _props$menuposition,
+    _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,
+    _props$itemchildren = props.itemchildren,
+    itemchildren = _props$itemchildren === void 0 ? "children" : _props$itemchildren,
+    isactive = props.isactive,
+    displayValue = props.displayValue,
+    onActionsclick = props.onActionsclick,
+    dataPath = props.dataPath,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // State
+  var _useState2 = (0, _react.useState)(false),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    activeItem = _useState3[0],
+    setActiveItem = _useState3[1];
+  var _useState4 = (0, _react.useState)(-1),
+    focusedIndex = _useState4[0],
+    setFocusedIndex = _useState4[1];
+
+  // Refs
+  var buttonRef = (0, _react.useRef)(null);
+  var menuRef = (0, _react.useRef)(null);
+
+  // Custom hooks
+  var keyboardMovements = useKeyboardMovements(menuposition);
+  var transformedDataset = useTransformedDataset(dataset, itemlabel, orderby, itemchildren, dataPath);
+  var _useHoverState = useHoverState(),
+    hoveredNodes = _useHoverState.hoveredNodes,
+    handleNodeMouseEnter = _useHoverState.handleNodeMouseEnter,
+    handleNodeMouseLeave = _useHoverState.handleNodeMouseLeave;
+
+  // 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$classL2, _relatedTarget$closes2, _relatedTarget$closes3;
+    if (!showonhover) return;
+    var relatedTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
+    var isMovingToMenu = relatedTarget && (((_relatedTarget$classL2 = relatedTarget.classList) === null || _relatedTarget$classL2 === void 0 ? void 0 : _relatedTarget$classL2.contains("dropdown-menu")) || ((_relatedTarget$closes2 = relatedTarget.closest) === null || _relatedTarget$closes2 === void 0 ? void 0 : _relatedTarget$closes2.call(relatedTarget, ".dropdown-menu")) !== null || ((_relatedTarget$closes3 = relatedTarget.closest) === null || _relatedTarget$closes3 === void 0 ? void 0 : _relatedTarget$closes3.call(relatedTarget, ".app-menu")) !== null);
+    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, "", itemlabel, undefined, undefined, orderby, undefined, undefined, itemchildren);
+  }, [itemlabel, orderby]);
+  var createRefsForNodes = (0, _react.useCallback)(function (nodes) {
+    if (!nodes || !Array.isArray(nodes)) return [];
+    return nodes.map(function (node) {
+      var nodeWithRef = _objectSpread({}, node);
+      if (!nodeWithRef.nodeRef) {
+        nodeWithRef.nodeRef = /*#__PURE__*/_react["default"].createRef();
+      }
+      if (nodeWithRef.children && nodeWithRef.children.length) {
+        nodeWithRef.children = createRefsForNodes(transformChildrenDataset(nodeWithRef.children));
+      }
+      return nodeWithRef;
+    });
+  }, [transformChildrenDataset]);
+  var nodesWithRefs = (0, _react.useMemo)(function () {
+    return createRefsForNodes(transformedDataset);
+  }, [transformedDataset, 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 itemlabel === "function") {
+      try {
+        label = itemlabel(dataObject);
+      } catch (error) {
+        console.warn("Error evaluating itemlabel expression:", error);
+        label = (node === null || node === void 0 ? void 0 : node["label"]) || dataObject["label"];
+      }
+    } else {
+      label = (node === null || node === void 0 ? void 0 : node[itemlabel]) || dataObject[itemlabel];
+    }
+
+    // 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 {
+      children = (node === null || node === void 0 ? void 0 : node[itemchildren]) || 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);
+    }
+  }, [onClick, listener, name, open]);
+  var handleMenuItemClick = (0, _react.useCallback)(function (event, item) {
+    var _item$dataObject, _item$dataObject2;
+    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);
+    }
+    if (item.children && item.children.length > 0) {
+      item.expanded = !item.expanded;
+    }
+
+    // Create a simplified item object with only the required properties
+    var simplifiedItem = {
+      label: label,
+      dataValue: ((_item$dataObject = item.dataObject) === null || _item$dataObject === void 0 ? void 0 : _item$dataObject.dataValue) || label,
+      icon: icon,
+      link: link,
+      target: (_item$dataObject2 = item.dataObject) === null || _item$dataObject2 === void 0 ? void 0 : _item$dataObject2.target
+    };
+    if (onSelect) {
+      onSelect(event, props, simplifiedItem);
+    }
+    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, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: label
+      }));
+    }
+    // Then trigger item action (executes action and/or navigates to link)
+    // Use setTimeout to ensure onSelect navigation completes first, then dataset link navigation happens
+    setTimeout(function () {
+      (0, _utils.triggerItemAction)(simplifiedItem);
+    }, 0);
+    if (autoclose === _constants.AUTO_CLOSE.ALWAYS && (!item.children || item.children.length === 0)) {
+      setOpen(false);
+      setFocusedIndex(-1);
+    }
+  }, [flattenedNodes, onSelect, props, name, listener, autoclose, getNodeProperties]);
+
+  // 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
+  var renderMenuItems = (0, _react.useCallback)(function (nodes) {
+    if (!nodes || !Array.isArray(nodes)) return null;
+    return nodes.map(function (node, index) {
+      var _getNodeProperties2 = getNodeProperties(node),
+        label = _getNodeProperties2.label,
+        icon = _getNodeProperties2.icon,
+        link = _getNodeProperties2.link,
+        hint = _getNodeProperties2.hint,
+        disabled = _getNodeProperties2.disabled,
+        children = _getNodeProperties2.children;
+      var _menuposition$split = menuposition.split(","),
+        _menuposition$split2 = (0, _slicedToArray2["default"])(_menuposition$split, 2),
+        verticalPos = _menuposition$split2[0],
+        horizontalPos = _menuposition$split2[1];
+      var isHovered = hoveredNodes.has(node);
+      var isSubmenuOpen = node.expanded || hoveredNodes.has(node);
+      var submenuClassName = (0, _ListItems.buildMenuListClasses)(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition, isHovered);
+      return __jsx(_Box["default"], {
+        component: "li",
+        key: index,
+        className: (0, _clsx["default"])(children && children.length > 0 && "dropdown-submenu", "app-menu-item", hoveredNodes.has(node) && "hovered"),
+        onMouseEnter: function onMouseEnter() {
+          return handleNodeMouseEnter(node);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handleNodeMouseLeave(node, e);
+        },
+        style: {
+          position: "relative"
+        }
+      }, __jsx(_link["default"], {
+        title: label,
+        className: disabled ? "disabled" : "",
+        href: "javascript:void(0)",
+        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 || itemlabel)), children && children.length > 0 && (type !== "anchor" ? __jsx(_ListItems.CollapsibleMenu, {
+        isOpen: isSubmenuOpen,
+        verticalPos: verticalPos,
+        className: submenuClassName,
+        style: getMenuLayoutStyles(),
+        onMouseEnter: function onMouseEnter() {
+          return handleNodeMouseEnter(node);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handleNodeMouseLeave(node, e);
+        }
+      }, renderMenuItems(children)) : isSubmenuOpen && open && __jsx(_ListItems.MenuList, {
+        className: submenuClassName,
+        style: getMenuLayoutStyles(),
+        onMouseEnter: function onMouseEnter() {
+          return handleNodeMouseEnter(node);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handleNodeMouseLeave(node, e);
+        },
+        onClick: function onClick(event) {
+          return onActionsclick(event, node);
+        }
+      }, renderMenuItems(children))));
+    });
+  }, [getNodeProperties, menuposition, hoveredNodes, handleNodeMouseEnter, handleNodeMouseLeave, 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 = transformedDataset.some(function (node) {
+        return hasLinkToCurrentPage([node], window.location.pathname);
+      });
+      if (hasActiveItem) {
+        setOpen(true);
+      }
+    }
+  }, [transformedDataset, autoopen]);
+  (0, _react.useEffect)(function () {
+    // Handle outside click for both "outsideClick" and "always" autoclose modes
+    if (!open || autoclose === _constants.AUTO_CLOSE.NEVER) 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]);
+  (0, _react.useEffect)(function () {
+    if (!nodes$ || typeof nodes$.subscribe !== "function") return;
+    var datasetSubscription = nodes$.subscribe(function () {
+      if (!dataset) return;
+      var itemFound = false;
+      var getItem = function getItem(nodes) {
+        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)) {
+            getItem(item.children);
+          }
+        });
+      };
+      getItem(dataset);
+    });
+    return function () {
+      if (datasetSubscription && typeof datasetSubscription.unsubscribe === "function") {
+        datasetSubscription.unsubscribe();
+      }
+    };
+  }, [dataset, nodes$, name, listener, onSelect]);
+
+  // 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", menuclass, className, "menu-layout-".concat(menulayout), "menu-align-".concat(menualign), open ? "open" : "", menuposition !== null && menuposition !== void 0 && menuposition.startsWith("up") ? "dropup" : "", menuposition === _constants.POSITION.INLINE ? "dropinline-menu" : "")
+  }, hoverEventHandlers, {
+    style: _objectSpread(_objectSpread({}, buttonStyles), menuContainerStyles),
+    onKeyDown: handleKeyDown,
+    role: "menu",
+    "aria-label": arialabel || "Menu",
+    "aria-expanded": open,
+    type: type
+  }), __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", "icon-position-".concat(iconposition)),
+    "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
+    }
+  }, 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: "pull-right caret fa ".concat(_constants.CARET_CLS.DOWN)
+  })) : __jsx(_Button["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])("btn dropdown-toggle", "icon-position-".concat(iconposition)),
+    ref: buttonRef,
+    onClick: handleMenuClick,
+    "aria-haspopup": "true",
+    "aria-expanded": open,
+    "aria-label": arialabel || "Menu",
+    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
+    }
+  }, restProps), iconclass && __jsx("i", {
+    className: (0, _clsx["default"])("app-icon", iconclass),
+    "aria-hidden": "true"
+  }), __jsx("span", {
+    className: "caption"
+  }, children || caption || "Menu"), __jsx("span", {
+    className: (0, _clsx["default"])("pull-right caret fa", (menuposition === null || menuposition === void 0 ? void 0 : menuposition.startsWith("up")) !== open ? _constants.CARET_CLS.UP : _constants.CARET_CLS.DOWN)
+  }))), 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"])({
+    className: mainMenuClassName,
+    style: getMenuLayoutStyles()
+  }, hoverEventHandlers), renderMenuItems(nodesWithRefs)));
+});
+WmMenu.displayName = "WmMenu";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmMenu);