@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/navigation/menu/index.js

@@ -0,0 +1,1114 @@
+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 { WmAppIcon } from "../../common/WmAppIcon";
+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;
+  return new RegExp(`(^|/)${cleanLink}($|/)`, "i").test(path);
+};
+const hasLinkToCurrentPage = (nodes, currentPath) => {
+  if (!nodes || !Array.isArray(nodes)) return false;
+  return nodes.some((node) => {
+    if (node.link === currentPath) return true;
+    return node.children && hasLinkToCurrentPage(node.children, currentPath);
+  });
+};
+const WmMenu = memo((props) => {
+  var _b, _c;
+  const _a = props, {
+    menualign = "left",
+    menuposition: initialMenuPosition = "down,right",
+    menulayout = "vertical",
+    menuclass,
+    linktarget = "_self",
+    iconclass,
+    iconurl,
+    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",
+    "iconurl",
+    "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;
+    }
+    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]);
+  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);
+      }
+    },
+    [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((acc, node) => {
+      acc.push(node);
+      if (node.children && node.children.length) {
+        acc.push(...flattenNodes(node.children));
+      }
+      return acc;
+    }, []);
+  }, []);
+  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];
+      }
+      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"];
+        }
+      } 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]);
+      }
+      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]
+  );
+  const getMenuLayoutStyles = useCallback(() => {
+    switch (menulayout) {
+      case LAYOUT.HORIZONTAL:
+        return {
+          display: "flex",
+          flexDirection: "row"
+        };
+      case LAYOUT.GRID:
+        return {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
+          gap: "8px"
+        };
+      case LAYOUT.VERTICAL:
+      default:
+        return {
+          display: "block"
+        };
+    }
+  }, [menulayout]);
+  const handleMenuClick = useCallback(
+    (event) => {
+      event.preventDefault();
+      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, _f;
+      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
+      }), typeof (item == null ? void 0 : item.value) === "object" && (item == null ? void 0 : item.value) !== null ? item.value : {});
+      if (onSelect) {
+        onSelect(event, props, simplifiedItem);
+      }
+      if (isFromNav && onNavItemActivate) {
+        onNavItemActivate();
+      }
+      if (name && ((_f = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _f[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);
+    (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+  }, []);
+  const toggleMenu = useCallback(() => {
+    setOpen((prevOpen) => !prevOpen);
+  }, []);
+  const handleArrowDown = useCallback(
+    (event) => {
+      if (keyboardMovements.MOVE_DOWN !== "DOWN-ARROW") return;
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      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;
+      }
+      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();
+      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();
+      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);
+        }
+      );
+      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);
+        }
+      }
+    },
+    [
+      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);
+        }
+      }
+    },
+    [
+      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]);
+  useEffect(() => {
+    if (autoopen === AUTO_OPEN.ALWAYS) {
+      setOpen(true);
+    } else if (autoopen === AUTO_OPEN.ACTIVE_PAGE) {
+      const hasActiveItem = filteredDataset.some(
+        (node) => hasLinkToCurrentPage([node], window.location.pathname)
+      );
+      if (hasActiveItem) {
+        setOpen(true);
+      }
+    }
+  }, [filteredDataset, autoopen]);
+  const notifiedPathRef = useRef(null);
+  useEffect(() => {
+    if (!isFromNav || !onNavItemActivate || !filteredDataset || filteredDataset.length === 0) {
+      return;
+    }
+    const checkIfActive = (nodes) => {
+      if (!nodes || !Array.isArray(nodes)) return 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 (children2 && children2.length > 0) {
+          return checkIfActive(children2);
+        }
+        return false;
+      });
+    };
+    const hasActiveItem = checkIfActive(filteredDataset);
+    if (hasActiveItem && notifiedPathRef.current !== path) {
+      onNavItemActivate();
+      notifiedPathRef.current = path;
+      setOpen(true);
+    } else if (!hasActiveItem) {
+      notifiedPathRef.current = null;
+    }
+  }, [path, filteredDataset, isFromNav, onNavItemActivate, getNodeProperties]);
+  useEffect(() => {
+    if (!open || autoclose === AUTO_CLOSE.NEVER || autoclose === AUTO_CLOSE.DISABLED) return;
+    const handleOutsideClick = (event) => {
+      var _a2, _b2, _c2;
+      if (!event.target) return;
+      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) {
+        setOpen(false);
+        setFocusedIndex(-1);
+        setActiveItem(null);
+        (_c2 = buttonRef.current) == null ? void 0 : _c2.focus();
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [open, autoclose]);
+  useEffect(() => {
+    if (!shortcutkey) return;
+    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()) {
+        event.preventDefault();
+        setOpen((prev) => !prev);
+        (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    window.addEventListener("keydown", handleShortcutKey);
+    return () => {
+      window.removeEventListener("keydown", handleShortcutKey);
+    };
+  }, [shortcutkey]);
+  const executedInitialActiveRef = useRef(false);
+  useEffect(() => {
+    if (nodes$ && typeof nodes$.subscribe === "function") return;
+    if (executedInitialActiveRef.current) return;
+    if (!transformedDataset || transformedDataset.length === 0) return;
+    let itemFound = false;
+    const getItem = (nodes) => {
+      if (!nodes || !Array.isArray(nodes)) return;
+      nodes.forEach((item) => {
+        var _a2;
+        if (itemFound) return;
+        if ((item == null ? void 0 : item.isactive) || ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.isactive)) {
+          itemFound = true;
+          if ((listener == null ? void 0 : listener.Widgets) && name && onSelect) {
+            const widget = listener.Widgets[name];
+            if (widget) {
+              onSelect({}, widget, item);
+            }
+          }
+          executeActionTaskFromItem(item, listener);
+        }
+        if (item.children && !isEmpty(item.children)) {
+          getItem(item.children);
+        }
+      });
+    };
+    getItem(transformedDataset);
+    if (itemFound) {
+      executedInitialActiveRef.current = true;
+    }
+  }, []);
+  useEffect(() => {
+    if (!nodes$ || typeof nodes$.subscribe !== "function") return;
+    const datasetSubscription = nodes$.subscribe(() => {
+      if (!dataset) return;
+      let itemFound = false;
+      const getItem = (nodes) => {
+        if (!nodes || !Array.isArray(nodes)) return;
+        nodes.forEach((item) => {
+          if (itemFound) return;
+          if (item.isactive) {
+            itemFound = true;
+            if ((listener == null ? void 0 : listener.Widgets) && name && onSelect) {
+              const widget = listener.Widgets[name];
+              if (widget) {
+                onSelect({}, widget, item);
+              }
+            }
+            return false;
+          }
+          if (item.children && !isEmpty(item.children)) {
+            getItem(item.children);
+          }
+        });
+      };
+      getItem(dataset);
+    });
+    return () => {
+      if (datasetSubscription && typeof datasetSubscription.unsubscribe === "function") {
+        datasetSubscription.unsubscribe();
+      }
+    };
+  }, [dataset, nodes$, name, listener, onSelect]);
+  const onShowCallback = useCallback(() => {
+    if (open && flattenedNodes.length > 0 && focusedIndex === 0) {
+      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);
+    }
+    setOpen(true);
+  }, [open, flattenedNodes, focusedIndex, props, listener, name]);
+  const onHideCallback = useCallback(() => {
+    setFocusedIndex(-1);
+    setActiveItem(null);
+    setMenuPosition(initialMenuPosition);
+    setOpen(false);
+  }, [initialMenuPosition, props, listener, name]);
+  const resetNodesMethod = useCallback(() => {
+    if (resetNavNodes) {
+      resetNavNodes();
+    }
+    if (autoopen === AUTO_OPEN.ACTIVE_PAGE && hasLinkToCurrentPage(transformedDataset, path)) {
+      setOpen(true);
+    } else if (autoopen === AUTO_OPEN.ALWAYS) {
+      setOpen(true);
+    }
+  }, [resetNavNodes, autoopen, transformedDataset, path]);
+  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: ${position}. Valid positions are: ${validPositions.join(", ")}`
+      );
+    }
+  }, []);
+  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
+      });
+      Object.defineProperty(onMenuItemSelectMethod, "name", {
+        value: "onMenuItemSelect",
+        writable: false
+      });
+      listener.onChange(name, {
+        onShow: onShowCallback,
+        onHide: onHideCallback,
+        onKeyDown: onKeyDownMethod,
+        resetNodes: resetNodesMethod,
+        setMenuPosition: setMenuPositionMethod,
+        onMenuItemSelect: onMenuItemSelectMethod
+      });
+    }
+  }, []);
+  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
+  } : {};
+  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 || iconurl) && /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass,
+                  iconurl,
+                  prefabName: props.prefabName,
+                  alt: "Menu icon"
+                }
+              ),
+              /* @__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",
+              "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 || iconurl) && /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass,
+                  iconurl,
+                  prefabName: props.prefabName,
+                  alt: "Menu icon"
+                }
+              ),
+              /* @__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";
+var menu_default = withBaseWrapper(WmMenu);
+export {
+  WmMenu,
+  menu_default as default
+};