@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/input/textarea/index.js

@@ -16,6 +16,7 @@ var lodash = _interopRequireWildcard(require("lodash-es"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _delay = _interopRequireDefault(require("lodash/delay"));
+var _util = require("../util");
 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; }
@@ -295,18 +296,22 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
   } : {}), props.onClick ? {
     onClick: props.onClick
   } : {});
+  var value = (0, _util.sanitizeInputValue)(displayValue);
+  var isEditable = !readonly && !disabled;
   return __jsx(_react["default"].Fragment, null, __jsx(_TextField["default"], (0, _extends2["default"])({
+    hidden: props.hidden,
     multiline: true,
     variant: "standard",
     name: name,
     title: props.hint,
     id: id || name,
     placeholder: placeholder || "Place your text here",
-    value: displayValue,
+    value: value,
     required: required,
     disabled: disabled,
     error: isDirty && error.show,
     className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
+    style: styles,
     "aria-readonly": readonly,
     slotProps: {
       htmlInput: {
@@ -320,23 +325,21 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
         ref: textareaRef,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
-        pattern: regexp,
-        style: _objectSpread({
-          height: "none",
-          resize: "both",
-          overflow: "auto"
-        }, styles)
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid", isEditable ? "wm-textarea-editable" : ""),
+        pattern: regexp
       }
     },
     sx: {
-      width: "100%"
+      width: "100%",
+      "& .MuiInputBase-input": _objectSpread({}, styles.height ? {
+        height: "".concat(styles.height, " !important")
+      } : {})
     }
   }, events)), maxchars && __jsx(_Box["default"], {
     className: "textarea-count"
   }, limitdisplaytext.replaceAll("undefined", "".concat((displayValue === null || displayValue === void 0 ? void 0 : displayValue.length) || 0))));
 }, function (prev, current) {
-  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext"];
+  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext", "hidden"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

package/components/input/upload/index.js

@@ -0,0 +1,124 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("next/link"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("../../data/form/form-controller/withFormController"));
+var _image = _interopRequireDefault(require("next/image"));
+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 WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    formField = props.formField,
+    datavalue = props.datavalue,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    type = props.type,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    listener = props.listener;
+  var fileInputRef = (0, _react.useRef)(null);
+  var prevDatavalue = (0, _react.useRef)(datavalue);
+
+  // Check if we have existing file data
+  var isImage = (formField === null || formField === void 0 ? void 0 : formField.filetype) === "image";
+  var handleFileChange = function handleFileChange(event) {
+    var _event$target$files;
+    var file = ((_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0]) || null;
+
+    // For blob type, we need to call listener.onChange to update the form data
+    // The form controller will handle the actual value from the event.target.value
+    if (type === "file") {
+      var _listener$onChange;
+      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || props.name, {
+        datavalue: file
+      });
+    } else {
+      var _listener$onChange2;
+      // For blob type, pass the file name/path from the input value
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || props.name, {
+        datavalue: event.target.value
+      });
+    }
+    if (onChange) {
+      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], type === "file" ? file : event.target.value, prevDatavalue.current);
+    }
+    prevDatavalue.current = file;
+  };
+  var handleFileFocus = function handleFileFocus(event) {
+    if (onFocus) {
+      onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+  var handleFileBlur = function handleFileBlur(event) {
+    if (onBlur) {
+      onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+
+  // Render existing file display
+  var renderExistingFile = (0, _react.useCallback)(function () {
+    var fileUrl = (formField === null || formField === void 0 ? void 0 : formField.href) || (formField === null || formField === void 0 ? void 0 : formField.datavalue);
+    if (!fileUrl || type !== "file") return null;
+    return __jsx("div", {
+      className: "existing-file-display"
+    }, isImage ? __jsx(_link["default"], {
+      className: "form-control-static",
+      href: fileUrl
+    }, __jsx(_image["default"], {
+      style: {
+        height: "2em"
+      },
+      className: "wi wi-file",
+      src: fileUrl,
+      alt: "Existing file"
+    })) : __jsx(_link["default"], {
+      className: "form-control-static",
+      href: fileUrl
+    }, __jsx("i", {
+      className: "wi wi-file"
+    })));
+  }, [formField === null || formField === void 0 ? void 0 : formField.href, formField === null || formField === void 0 ? void 0 : formField.datavalue, isImage, type]);
+  (0, _react.useEffect)(function () {
+    if (!datavalue) {
+      // clear field input value
+      fileInputRef.current && (fileInputRef.current.value = "");
+    }
+  }, [datavalue]);
+  return __jsx("div", {
+    className: className,
+    style: style
+  }, renderExistingFile(), __jsx("input", (0, _extends2["default"])({}, props, {
+    hidden: props.hidden,
+    ref: fileInputRef,
+    type: "file",
+    name: "".concat(name, "_formWidget"),
+    className: "app-blob-upload",
+    required: required,
+    readOnly: readonly,
+    disabled: disabled,
+    onChange: handleFileChange,
+    onFocus: handleFileFocus,
+    onBlur: handleFileBlur
+  })));
+}, function (prev, current) {
+  var keys = ["name", "formField", "datavalue", "readonly", "required", "type", "onChange", "className", "style"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmUpload));

package/components/input/upload/props.js

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

package/components/input/util/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeInputValue = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var sanitizeInputValue = exports.sanitizeInputValue = function sanitizeInputValue(value) {
+  return value === null || value === undefined ? "" : (0, _typeof2["default"])(value) === "object" || Array.isArray(value) ? "" : String(value) === "[object Object]" || String(value).startsWith("[object ") ? "" : String(value);
+};

package/components/navbar/index.js

@@ -8,23 +8,49 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = 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 _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
-var _excluded = ["className", "children", "styles", "id"];
+var _button = require("@wavemaker/react-runtime/components/form/button");
+var _excluded = ["className", "children", "styles", "id", "title", "brandHref", "showToggle", "listener"];
 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 = "navbar navbar-default app-navbar";
 var WmNavbar = /*#__PURE__*/(0, _react.memo)(function (props) {
   var className = props.className,
     children = props.children,
     styles = props.styles,
     id = props.id,
+    title = props.title,
+    _props$brandHref = props.brandHref,
+    brandHref = _props$brandHref === void 0 ? "#" : _props$brandHref,
+    _props$showToggle = props.showToggle,
+    showToggle = _props$showToggle === void 0 ? true : _props$showToggle,
+    listener = props.listener,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(true),
+    isCollapsed = _useState[0],
+    setIsCollapsed = _useState[1];
+
+  // Process backgroundImage to ensure it has url() wrapper
+  var processedStyles = (0, _react.useMemo)(function () {
+    if (!styles) return styles;
+    if (styles !== null && styles !== void 0 && styles.backgroundImage) {
+      styles.backgroundImage = "".concat(styles.backgroundImage.includes("url(") ? styles.backgroundImage : "url(" + styles.backgroundImage + ")");
+    }
+    return _objectSpread({}, styles);
+  }, [styles]);
+  var handleToggle = function handleToggle() {
+    setIsCollapsed(!isCollapsed);
+  };
   return __jsx(_Box["default"], (0, _extends2["default"])({
     component: "nav",
-    sx: styles,
+    style: processedStyles,
     className: (0, _clsx["default"])(DEFAULT_CLASS, className),
     id: id
   }, restProps), __jsx(_Box["default"], {
@@ -32,7 +58,29 @@ var WmNavbar = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: "container-fluid"
   }, __jsx(_Box["default"], {
     component: "div",
-    className: "collapse navbar-collapse"
+    className: "navbar-header"
+  }, showToggle && __jsx(_button.WmButton, {
+    name: "navbar-toggle",
+    type: "button",
+    className: (0, _clsx["default"])("btn-transparent navbar-toggle", {
+      collapsed: isCollapsed
+    }),
+    onClick: handleToggle,
+    arialabel: "Toggle navigation",
+    iconclass: "wi wi-more-vert",
+    listener: listener
+  }), title && __jsx(_Link["default"], {
+    className: "navbar-brand",
+    href: brandHref,
+    underline: "none"
+  }, __jsx("span", {
+    className: "title"
+  }, title))), __jsx(_Box["default"], {
+    component: "div",
+    className: (0, _clsx["default"])("navbar-collapse", {
+      collapse: isCollapsed,
+      "in": !isCollapsed
+    })
   }, children)));
 }, function () {
   return true;

package/components/navbar/nav/index.js

@@ -15,7 +15,8 @@ var _anchor = require("@wavemaker/react-runtime/components/basic/anchor");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _menu = _interopRequireDefault(require("@wavemaker/react-runtime/components/navigation/menu"));
 var _utils = require("@wavemaker/react-runtime/core/util/utils");
-var _utils2 = require("../../../core/util/utils");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _lodashEs = require("lodash-es");
 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; }
@@ -27,7 +28,7 @@ var NavClassTypes = {
 };
 var DEFAULT_CLASS = "nav app-nav";
 var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$styles, _props$styles2;
+  var _props$styles, _props$styles2, _props$hidden;
   var layout = props.layout,
     _props$type = props.type,
     type = _props$type === void 0 ? "navbar" : _props$type,
@@ -35,8 +36,10 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
     children = props.children,
     name = props.name,
     styles = props.styles,
-    id = props.id;
-  var path = (0, _utils2.getCurrentPath)();
+    id = props.id,
+    dataset = props.dataset,
+    orderby = props.orderby;
+  var path = (0, _utils.getCurrentPath)();
   var _useState = (0, _react.useState)(null),
     activeNavItemIndex = _useState[0],
     setActiveNavItemIndex = _useState[1];
@@ -44,6 +47,16 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
     hoveredNavItemIndex = _useState2[0],
     setHoveredNavItemIndex = _useState2[1];
   var activeNavItemIndexRef = (0, _react.useRef)(null);
+
+  // Apply orderby to dataset
+  // Format: "field:direction" or "field1:direction1,field2:direction2"
+  // Example: "name:asc" or "priority:desc,name:asc"
+  var orderedDataset = (0, _react.useMemo)(function () {
+    if (!dataset || !Array.isArray(dataset)) {
+      return dataset;
+    }
+    return (0, _transformedDatasetUtils.getOrderedDataset)(dataset, orderby);
+  }, [dataset, orderby]);
   var triggerActionClickForAnchor = function triggerActionClickForAnchor(e, item) {
     e === null || e === void 0 || e.preventDefault();
     (0, _utils.triggerItemAction)({
@@ -68,6 +81,9 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (typeof itemlabel === "string") {
       return item[itemlabel];
     }
+    if (typeof item === "string") {
+      return item;
+    }
 
     // Fallback
     return item["label"];
@@ -104,28 +120,29 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (hasSubactions) {
       return false;
     }
-    var itemLink = (0, _utils2.getItemLink)(item, props);
-    if (itemLink) {
+    var itemLink = (0, _utils.getItemLink)(item, props);
+    if (itemLink && (0, _lodashEs.isString)(itemLink)) {
       var currentRoute = "#/".concat(path.split("/").filter(Boolean).pop() || "");
-      if (itemLink === currentRoute || path === itemLink.replace("#", "")) {
+      if (itemLink === currentRoute || path === (itemLink === null || itemLink === void 0 ? void 0 : itemLink.replace("#", ""))) {
         return true;
       }
     }
     return false;
   }, [activeNavItemIndex, path]);
   var renderNavItem = function renderNavItem() {
-    if (props.dataset && props.dataset.length > 0) {
-      return props.dataset.map(function (item, index) {
+    if (orderedDataset && orderedDataset.length > 0) {
+      return orderedDataset.map(function (item, index) {
         var label = getItemLabel(item);
         var isActive = isNavItemActive(item, index);
         var subActions = item["itemchildren"] || item["children"] || item["SubActions"];
         var hasSubactions = Array.isArray(subActions) && subActions.length > 0;
         var childComponent = hasSubactions ? __jsx(_menu["default"], {
           name: "",
+          autoclose: props.autoclose,
           itemlabel: props.itemlabel,
           itemlink: props.itemlink,
           itemicon: props.itemicon,
-          listener: {},
+          listener: props.listener,
           iconclass: item[props.itemicon],
           caption: label,
           dataset: subActions,
@@ -133,10 +150,11 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
           isFromNav: true,
           onNavItemActivate: handleNavItemActivate(index),
           onSelect: props.onSelect,
-          isNavFromMenu: true
+          isNavFromMenu: true,
+          showonhover: props.showonhover
         }) : __jsx(_anchor.WmAnchor, {
           name: "",
-          listener: {},
+          listener: props.listener,
           caption: label,
           iconclass: item[props.itemicon],
           iconposition: item[props.iconposition],
@@ -166,9 +184,14 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
     }
     return children;
   };
+  var _ref = styles || {},
+    backgroundImage = _ref.backgroundImage,
+    backgroundRepeat = _ref.backgroundRepeat,
+    backgroundPosition = _ref.backgroundPosition,
+    textAlign = _ref.textAlign;
   return __jsx(_List["default"], {
     disablePadding: true,
-    sx: _objectSpread({
+    sx: {
       "&": {
         width: ((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width) || "auto",
         height: ((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height) || "auto",
@@ -177,13 +200,20 @@ var WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
       " & .MuiListItem-root": {
         width: "auto"
       }
-    }, styles),
+    },
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundImage: backgroundImage,
+      backgroundRepeat: backgroundRepeat,
+      backgroundPosition: backgroundPosition
+    }),
     role: "navigation",
     className: (0, _clsx["default"])(DEFAULT_CLASS, className, "nav-".concat(layout, " ").concat(NavClassTypes[type])),
-    id: id
+    id: id,
+    name: props.name,
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false
   }, renderNavItem());
 }, function (prev, current) {
-  var keys = ["layout", "type", "className", "styles", "children"];
+  var keys = ["layout", "type", "className", "styles", "children", "dataset", "orderby"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

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

@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+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; }
@@ -21,8 +24,10 @@ var WmNavItem = exports.WmNavItem = /*#__PURE__*/(0, _react.memo)(function (prop
     styles = props.styles,
     id = props.id,
     onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave;
-  return __jsx(_ListItem["default"], {
+    onMouseLeave = props.onMouseLeave,
+    name = props.name,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return __jsx(_ListItem["default"], (0, _extends2["default"])({}, rest, {
     name: name,
     id: id,
     sx: _objectSpread(_objectSpread({
@@ -30,15 +35,16 @@ var WmNavItem = exports.WmNavItem = /*#__PURE__*/(0, _react.memo)(function (prop
     }, styles), {}, {
       width: "inherit",
       margin: "inherit",
-      padding: "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);
+  }), props.children);
 }, function (prev, current) {
-  var keys = ["className", "styles", "children"];
+  var keys = ["className", "styles", "children", "hidden"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

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

@@ -32,6 +32,9 @@ var MenuList = exports.MenuList = /*#__PURE__*/(0, _react.memo)(function (_ref)
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     onClick = _ref.onClick;
+  if (_react["default"].Children.count(children) === 0) {
+    return null;
+  }
   return __jsx(_material.List, {
     className: className,
     role: role,

package/components/navigation/menu/constants.js

@@ -47,7 +47,8 @@ var AUTO_CLOSE = exports.AUTO_CLOSE = {
   OUTSIDE_CLICK: "outsideClick",
   // Now matches exactly the string "outsideClick"
   ON_MOUSE_LEAVE: "onmouseleave",
-  NEVER: "never"
+  NEVER: "never",
+  DISABLED: "disabled"
 };
 
 // Default dataset to use when none is provided

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.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.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/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]);
+};