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

package/components/navbar/nav-item/index.js

@@ -0,0 +1,66 @@
+"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.WmNavItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["className", "styles", "id", "onMouseEnter", "onMouseLeave", "name"];
+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 DEFAULT_CLASS = "app-nav-item";
+var WmNavItem = exports.WmNavItem = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var className = props.className,
+    styles = props.styles,
+    id = props.id,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    name = props.name,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx(_ListItem["default"], (0, _extends2["default"])({
+    component: "li"
+  }, (0, _attr.removeInvalidAttributes)(rest), {
+    name: name,
+    id: id,
+    sx: _objectSpread(_objectSpread({
+      display: "block"
+    }, styles), {}, {
+      width: "inherit",
+      margin: "inherit",
+      padding: "inherit",
+      textAlign: styles !== null && styles !== void 0 && styles.textAlign ? "".concat(styles.textAlign, " !important") : "inherit"
+    }),
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    title: props.hint,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }), props.children);
+}, function (prev, current) {
+  var keys = ["className", "styles", "children", "hidden"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmNavItem.displayName = "WmNavItem";
+
+/**
+ * The WmNavItem component is an individual item within a WmNav component.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navbar-nav-item--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navbar-nav-item--docs#tab-overview)
+ *
+ * @param props - {@link WmNavItemProps}
+ */
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper["default"])(WmNavItem));

package/components/navbar/nav-item/props.d.ts

@@ -0,0 +1,29 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface NavigationProps {
+    /**
+     * The URL to navigate to when the widget is clicked.
+     * @example "http://www.google.com"
+     */
+    hyperlink?: string;
+    /**
+     * Where to open the linked document.
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * If "true", the hyperlink URL will be encoded.
+     */
+    encodeurl?: "true" | "false";
+}
+/**
+ * Advanced widget properties.
+ */
+export interface AdvancedWidgetProps {
+    /**
+     * The unique ID for the widget.
+     */
+    id?: string;
+}
+export interface NavItemProps extends NavigationProps, AdvancedWidgetProps {
+    children?: React.ReactNode;
+}
+export type WmNavItemProps = Prettify<NavItemProps & BaseProps>;

package/components/navbar/nav-item/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/navigation/breadcrumb/index.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { BreadCrumbProps } from "./props";
+export declare const BreadCrumb: (props: BreadCrumbProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadCrumbStandalone: React.ComponentType<import("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper").BaseProps>;
+export { BreadCrumbStandalone as WmBreadcrumb };
+/**
+ * The BreadCrumb component renders a navigation breadcrumb trail from navNodes.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-breadcrumb--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-breadcrumb--docs)
+ *
+ * @param props - {@link BreadCrumbProps}
+ */
+declare const _default: React.ComponentType<{
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/navigation/breadcrumb/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmBreadcrumb = exports.BreadCrumb = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _link = _interopRequireDefault(require("next/link"));
+var _DataNav = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/DataNav"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var __jsx = _react["default"].createElement;
+var BreadCrumb = exports.BreadCrumb = function BreadCrumb(props) {
+  var className = props.className,
+    onBeforenavigate = props.onBeforenavigate,
+    itemtarget = props.itemtarget,
+    _props$navNodes = props.navNodes,
+    navNodes = _props$navNodes === void 0 ? [] : _props$navNodes;
+  function handleBeforeNavigate(e, node) {
+    if (onBeforenavigate) {
+      return onBeforenavigate(props, node);
+    }
+  }
+  var renderNavItem = function renderNavItem(node, index) {
+    var isLast = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    return __jsx("li", {
+      key: node.id || index,
+      className: (0, _clsx["default"])(node["class"], {
+        active: isLast
+      })
+    }, __jsx(_react["default"].Fragment, null, node.icon ? __jsx("i", {
+      className: node.icon
+    }) : __jsx("i", null), !isLast ? __jsx(_link["default"], {
+      href: node.link || "#",
+      title: node.hint || node.label,
+      onClick: function onClick(e) {
+        return handleBeforeNavigate(e, node);
+      },
+      className: (0, _clsx["default"])({
+        "disabled-link": !!node.action
+      })
+    }, node.label) : __jsx(_link["default"], {
+      title: node.hint || node.label,
+      className: "text-muted",
+      tabIndex: 0,
+      "aria-current": "page",
+      href: "#"
+    }, node.label)));
+  };
+  return __jsx("ol", {
+    className: (0, _clsx["default"])("breadcrumb app-breadcrumb", className)
+  }, navNodes.map(function (node, index) {
+    return renderNavItem(node, index, index === navNodes.length - 1);
+  }));
+};
+var BreadCrumbStandalone = exports.WmBreadcrumb = (0, _DataNav["default"])(BreadCrumb);
+/**
+ * The BreadCrumb component renders a navigation breadcrumb trail from navNodes.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-breadcrumb--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-breadcrumb--docs)
+ *
+ * @param props - {@link BreadCrumbProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])((0, _DataNav["default"])(BreadCrumb));

package/components/navigation/breadcrumb/props.d.ts

@@ -0,0 +1,6 @@
+import { DatasetAwareNavProps, NavNode } from "@wavemaker-ai/react-runtime/higherOrder/DataNav";
+export interface BreadCrumbProps extends DatasetAwareNavProps {
+    listener: Record<string, any>;
+    onBeforenavigate?: (props: BreadCrumbProps, node: NavNode) => boolean | void;
+    navNodes?: NavNode[];
+}

package/components/navigation/breadcrumb/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/navigation/menu/components/ListItems.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { AnimationType, PositionType } from "../props";
+export declare const buildMenuListClasses: (iconposition: string, menulayout: string, horizontalPos: string, panelPosition?: string, animateitems?: AnimationType, menuposition?: PositionType, isHovered?: boolean) => string;
+export declare const MenuList: React.MemoExoticComponent<({ className, style, role, iconposition, children, onMouseEnter, onMouseLeave, onClick, }: {
+    className?: string;
+    style?: React.CSSProperties;
+    iconposition?: string;
+    role?: string;
+    children: React.ReactNode;
+    onMouseEnter?: () => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const CollapsibleMenu: React.MemoExoticComponent<({ isOpen, verticalPos, children, className, style, onMouseEnter, onMouseLeave, onClick, }: {
+    isOpen: boolean;
+    verticalPos: string;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onMouseEnter?: () => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}) => import("react/jsx-runtime").JSX.Element>;

package/components/navigation/menu/components/ListItems.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildMenuListClasses = exports.MenuList = exports.CollapsibleMenu = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _constants = require("../constants");
+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;
+var getAnimationClass = function getAnimationClass(type, position) {
+  if (!type || !position || !_constants.ANIMATION_CLASSES[type]) return "";
+  return _constants.ANIMATION_CLASSES[type][position] || _constants.ANIMATION_CLASSES[type].name;
+};
+
+// Reusable menu list class builder
+var buildMenuListClasses = exports.buildMenuListClasses = function buildMenuListClasses(iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition, isHovered) {
+  return (0, _clsx["default"])("icon-position-".concat(iconposition), "menu-layout-".concat(menulayout), "dropdown-menu", horizontalPos === "left" && isHovered || panelPosition === "left" ? "pull-right" : "", !panelPosition && horizontalPos === "left" ? "pull-right" : "", menulayout === "horizontal" ? "horizontal" : "", animateitems && "animated ".concat(getAnimationClass(animateitems, menuposition)));
+};
+
+// Reusable Menu List Component
+var MenuList = exports.MenuList = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? "menu" : _ref$role,
+    _ref$iconposition = _ref.iconposition,
+    iconposition = _ref$iconposition === void 0 ? "left" : _ref$iconposition,
+    children = _ref.children,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onClick = _ref.onClick;
+  if (_react["default"].Children.count(children) === 0) {
+    return null;
+  }
+  return __jsx(_material.List, {
+    className: "".concat(className, " icon-position-").concat(iconposition),
+    role: role,
+    style: style,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick
+  }, children);
+});
+MenuList.displayName = "MenuList";
+
+// Reusable Collapsible Menu Component
+var CollapsibleMenu = exports.CollapsibleMenu = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var isOpen = _ref2.isOpen,
+    verticalPos = _ref2.verticalPos,
+    children = _ref2.children,
+    className = _ref2.className,
+    style = _ref2.style,
+    onMouseEnter = _ref2.onMouseEnter,
+    onMouseLeave = _ref2.onMouseLeave,
+    onClick = _ref2.onClick;
+  // Don't render anything if not open
+  if (!isOpen) return null;
+  return __jsx(MenuList, {
+    className: className,
+    style: style,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick
+  }, children);
+});
+CollapsibleMenu.displayName = "CollapsibleMenu";

package/components/navigation/menu/constants.d.ts

@@ -0,0 +1,53 @@
+import { AnimationType, PositionType } from "./props";
+export declare const KEYBOARD_MOVEMENTS: {
+    MOVE_UP: string;
+    MOVE_LEFT: string;
+    MOVE_RIGHT: string;
+    MOVE_DOWN: string;
+    ON_ENTER: string;
+    ON_MOUSE_ENTER: string;
+    ON_MOUSE_LEAVE: string;
+    ON_TAB: string;
+    ON_SHIFT_TAB: string;
+    ON_ESCAPE: string;
+};
+export declare const POSITION: {
+    DOWN_RIGHT: string;
+    DOWN_LEFT: string;
+    UP_RIGHT: string;
+    UP_LEFT: string;
+    INLINE: string;
+};
+export declare const LAYOUT: {
+    HORIZONTAL: string;
+    VERTICAL: string;
+    GRID: string;
+};
+export declare const AUTO_OPEN: {
+    NEVER: string;
+    ACTIVE_PAGE: string;
+    ALWAYS: string;
+};
+export declare const AUTO_CLOSE: {
+    ALWAYS: string;
+    OUTSIDE_CLICK: string;
+    ON_MOUSE_LEAVE: string;
+    NEVER: string;
+    DISABLED: string;
+};
+export declare const DEFAULT_DATASET: {
+    label: string;
+    link: string;
+    expanded: boolean;
+}[];
+export declare const ANIMATION_CLASSES: Record<AnimationType, Record<PositionType | "name", string>>;
+export declare const TOOLTIP_ENTER_DELAY = 1500;
+export declare const CARET_CLS: {
+    UP: string;
+    DOWN: string;
+};
+export declare const menuAlignClass: {
+    "pull-right": string;
+    "dropinline-menu": string;
+    "pull-left": string;
+};

package/components/navigation/menu/constants.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuAlignClass = exports.TOOLTIP_ENTER_DELAY = exports.POSITION = exports.LAYOUT = exports.KEYBOARD_MOVEMENTS = exports.DEFAULT_DATASET = exports.CARET_CLS = exports.AUTO_OPEN = exports.AUTO_CLOSE = exports.ANIMATION_CLASSES = void 0;
+// Define keyboard movement constants
+var KEYBOARD_MOVEMENTS = exports.KEYBOARD_MOVEMENTS = {
+  MOVE_UP: "UP-ARROW",
+  MOVE_LEFT: "LEFT-ARROW",
+  MOVE_RIGHT: "RIGHT-ARROW",
+  MOVE_DOWN: "DOWN-ARROW",
+  ON_ENTER: "ENTER",
+  ON_MOUSE_ENTER: "MOUSE-ENTER",
+  ON_MOUSE_LEAVE: "MOUSE-LEAVE",
+  ON_TAB: "TAB",
+  ON_SHIFT_TAB: "SHIFT-TAB",
+  ON_ESCAPE: "ESC"
+};
+
+// Define position constants
+var POSITION = exports.POSITION = {
+  DOWN_RIGHT: "down,right",
+  DOWN_LEFT: "down,left",
+  UP_RIGHT: "up,right",
+  UP_LEFT: "up,left",
+  INLINE: "inline"
+};
+
+// Define layout constants
+var LAYOUT = exports.LAYOUT = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+  GRID: "grid"
+};
+
+// Define autoopen constants
+var AUTO_OPEN = exports.AUTO_OPEN = {
+  NEVER: "never",
+  ACTIVE_PAGE: "activepage",
+  ALWAYS: "always"
+};
+
+// Define autoclose constants - FIXED to match exactly the string passed as prop
+var AUTO_CLOSE = exports.AUTO_CLOSE = {
+  ALWAYS: "always",
+  OUTSIDE_CLICK: "outsideClick",
+  // Now matches exactly the string "outsideClick"
+  ON_MOUSE_LEAVE: "onmouseleave",
+  NEVER: "never",
+  DISABLED: "disabled"
+};
+
+// Default dataset to use when none is provided
+var DEFAULT_DATASET = exports.DEFAULT_DATASET = [{
+  label: "Menu Item 1",
+  link: "#item1",
+  expanded: false
+}, {
+  label: "Menu Item 2",
+  link: "#item2",
+  expanded: false
+}, {
+  label: "Menu Item 3",
+  link: "#item3",
+  expanded: false
+}];
+
+// Constants
+var ANIMATION_CLASSES = exports.ANIMATION_CLASSES = {
+  scale: {
+    name: "wmScaleInLeft",
+    "down,right": "wmScaleInLeft",
+    "down,left": "wmScaleInRight",
+    "up,right": "wmScaleInTopLeft",
+    "up,left": "wmScaleInTopRight"
+  },
+  fade: {
+    name: "fadeIn",
+    "down,right": "fadeIn",
+    "down,left": "fadeIn",
+    "up,right": "fadeIn",
+    "up,left": "fadeIn"
+  },
+  slide: {
+    name: "wmSlideInDown",
+    "down,right": "wmSlideInDown",
+    "down,left": "wmSlideInDown",
+    "up,right": "wmSlideInUp",
+    "up,left": "wmSlideInUp"
+  }
+};
+var TOOLTIP_ENTER_DELAY = exports.TOOLTIP_ENTER_DELAY = 1500;
+var CARET_CLS = exports.CARET_CLS = {
+  UP: "fa-caret-up",
+  DOWN: "fa-caret-down"
+};
+var menuAlignClass = exports.menuAlignClass = {
+  "pull-right": "fa-caret-left",
+  "dropinline-menu": "fa-caret-down",
+  "pull-left": "fa-caret-right"
+};

package/components/navigation/menu/hooks/useHoverState.hook.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hook to manage menu hover state using path-based tracking.
+ *
+ * Uses string paths (e.g., "0", "0-0", "1-0") instead of node objects to avoid
+ * reference equality issues. Each menu item gets a unique, stable path identifier.
+ *
+ * The submenu stays open because:
+ * 1. Parent item has hover handlers
+ * 2. Submenu container ALSO has hover handlers for the SAME parent path
+ * 3. When mouse moves from parent to submenu, the submenu's onMouseEnter
+ *    re-adds the parent path before the visual update completes
+ */
+export declare const useHoverState: () => {
+    hoveredPaths: Set<string>;
+    handlePathMouseEnter: (path: string) => void;
+    handlePathMouseLeave: (path: string, _event?: React.MouseEvent<HTMLElement>) => void;
+};

package/components/navigation/menu/hooks/useHoverState.hook.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHoverState = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+/**
+ * Custom hook to manage menu hover state using path-based tracking.
+ *
+ * Uses string paths (e.g., "0", "0-0", "1-0") instead of node objects to avoid
+ * reference equality issues. Each menu item gets a unique, stable path identifier.
+ *
+ * The submenu stays open because:
+ * 1. Parent item has hover handlers
+ * 2. Submenu container ALSO has hover handlers for the SAME parent path
+ * 3. When mouse moves from parent to submenu, the submenu's onMouseEnter
+ *    re-adds the parent path before the visual update completes
+ */
+var useHoverState = exports.useHoverState = function useHoverState() {
+  // Track which menu paths are currently hovered using their string identifiers
+  var _useState = (0, _react.useState)(new Set()),
+    hoveredPaths = _useState[0],
+    setHoveredPaths = _useState[1];
+
+  // Add path to hover state when mouse enters a menu item or its submenu
+  var handlePathMouseEnter = (0, _react.useCallback)(function (path) {
+    setHoveredPaths(function (prev) {
+      return new Set([].concat((0, _toConsumableArray2["default"])(prev), [path]));
+    });
+  }, []);
+
+  // Remove path from hover state immediately when mouse leaves
+  var handlePathMouseLeave = (0, _react.useCallback)(function (path, _event) {
+    setHoveredPaths(function (prev) {
+      var newSet = new Set(prev);
+      newSet["delete"](path);
+      return newSet;
+    });
+  }, []);
+  return {
+    hoveredPaths: hoveredPaths,
+    handlePathMouseEnter: handlePathMouseEnter,
+    handlePathMouseLeave: handlePathMouseLeave
+  };
+};

package/components/navigation/menu/hooks/useKeyboardMovements.hook.d.ts

@@ -0,0 +1,12 @@
+export declare const useKeyboardMovements: (menuposition: string) => {
+    MOVE_UP: string;
+    MOVE_LEFT: string;
+    MOVE_RIGHT: string;
+    MOVE_DOWN: string;
+    ON_ENTER: string;
+    ON_MOUSE_ENTER: string;
+    ON_MOUSE_LEAVE: string;
+    ON_TAB: string;
+    ON_SHIFT_TAB: string;
+    ON_ESCAPE: string;
+};

package/components/navigation/menu/hooks/useKeyboardMovements.hook.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboardMovements = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _constants = require("../constants");
+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 useKeyboardMovements = exports.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]);
+};

package/components/navigation/menu/hooks/useTransformedDataset.hook.d.ts

@@ -0,0 +1,5 @@
+export declare const useTransformedDataset: (dataset: any, itemlabel: string | Function, orderby?: string, itemchildren?: string, dataPath?: string) => import("@wavemaker-ai/react-runtime/utils/transformedDataset-utils").DataSetItem[] | {
+    label: string;
+    link: string;
+    expanded: boolean;
+}[];

package/components/navigation/menu/hooks/useTransformedDataset.hook.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTransformedDataset = void 0;
+var _react = require("react");
+var _constants = require("../constants");
+var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
+var useTransformedDataset = exports.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]);
+};