@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

package/components/navbar/nav/index.js

@@ -1,244 +1,248 @@
-"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.WmNav = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _List = _interopRequireDefault(require("@mui/material/List"));
-var _navItem = require("@wavemaker-ai/react-runtime/components/navbar/nav-item");
-var _anchor = require("@wavemaker-ai/react-runtime/components/basic/anchor");
-var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var _menu = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/navigation/menu"));
-var _utils = require("@wavemaker-ai/react-runtime/core/util/utils");
-var _transformedDatasetUtils = require("@wavemaker-ai/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; }
-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 NavClassTypes = {
+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));
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useCallback, useRef, useMemo } from "react";
+import clsx from "clsx";
+import List from "@mui/material/List";
+import { WmNavItem } from "../nav-item";
+import { WmAnchor } from "../../basic/anchor";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import WmMenu from "../../navigation/menu";
+import { triggerItemAction } from "../../../core/util/utils";
+import { getCurrentPath, getItemLink } from "../../../core/util/utils";
+import { getOrderedDataset } from "../../../utils/transformedDataset-utils";
+import { isString } from "lodash-es";
+const NavClassTypes = {
   pills: "nav-pills",
   tabs: "nav-tabs",
   navbar: "navbar-nav"
 };
-var DEFAULT_CLASS = "nav app-nav";
-var WmNav = exports.WmNav = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _props$styles, _props$styles2, _props$hidden;
-  var layout = props.layout,
-    _props$type = props.type,
-    type = _props$type === void 0 ? "navbar" : _props$type,
-    className = props.className,
-    children = props.children,
-    name = props.name,
-    styles = props.styles,
-    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];
-  var _useState2 = (0, _react.useState)(null),
-    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();
-    if (props.onSelect) {
-      props.onSelect(e, props, item);
-    }
-    (0, _utils.triggerItemAction)({
-      label: getItemLabel(item),
-      link: item[props.itemlink || "link"],
-      target: item[props.itemtarget]
-    });
-  };
-
-  // Helper function to get the label - handles both string and function
-  var getItemLabel = function getItemLabel(item) {
-    var itemlabel = props.itemlabel;
-    if (typeof itemlabel === "function") {
-      try {
-        return itemlabel(item);
-      } catch (error) {
-        console.warn("Error in itemlabel function:", error);
+const DEFAULT_CLASS = "nav app-nav";
+const WmNav = memo(
+  (props) => {
+    var _a, _b, _c;
+    const {
+      layout,
+      type = "navbar",
+      className,
+      children,
+      name,
+      styles,
+      id,
+      dataset,
+      orderby
+    } = props;
+    const path = getCurrentPath();
+    const [activeNavItemIndex, setActiveNavItemIndex] = useState(null);
+    const [hoveredNavItemIndex, setHoveredNavItemIndex] = useState(null);
+    const activeNavItemIndexRef = useRef(null);
+    const orderedDataset = useMemo(() => {
+      if (!dataset || !Array.isArray(dataset)) {
+        return dataset;
       }
-    }
-
-    // If itemlabel is a string, use it as property name
-    if (typeof itemlabel === "string") {
-      return item[itemlabel];
-    }
-    if (typeof item === "string") {
-      return item;
-    }
-
-    // Fallback
-    return item["label"];
-  };
-  var _hasLinkInNavSubtree = function hasLinkInNavSubtree(item, currentPath, linkKey) {
-    var link = item[linkKey || "link"];
-    if (link) {
-      var currentRoute = "#/".concat(currentPath.split("/").filter(Boolean).pop() || "");
-      if (link === currentRoute || currentPath === link.replace("#", "")) {
-        return true;
+      return getOrderedDataset(dataset, orderby);
+    }, [dataset, orderby]);
+    const triggerActionClickForAnchor = (e, item) => {
+      e == null ? void 0 : e.preventDefault();
+      if (props.onSelect) {
+        props.onSelect(e, props, item);
       }
-    }
-    var children = item["itemchildren"] || item["children"] || item["SubActions"];
-    return Array.isArray(children) && children.some(function (child) {
-      return _hasLinkInNavSubtree(child, currentPath, linkKey);
-    });
-  };
-
-  // Handler to activate nav item when menu detects active item or menu item is clicked
-  var handleNavItemActivate = (0, _react.useCallback)(function (navItemIndex) {
-    return function () {
-      activeNavItemIndexRef.current = navItemIndex;
-      setActiveNavItemIndex(navItemIndex);
+      triggerItemAction({
+        label: getItemLabel(item),
+        link: item[props.itemlink || "link"],
+        target: item[props.itemtarget]
+      });
+    };
+    const getItemLabel = (item) => {
+      const { itemlabel } = props;
+      if (typeof itemlabel === "function") {
+        try {
+          return itemlabel(item);
+        } catch (error) {
+          console.warn("Error in itemlabel function:", error);
+        }
+      }
+      if (typeof itemlabel === "string") {
+        return item[itemlabel];
+      }
+      if (typeof item === "string") {
+        return item;
+      }
+      return item["label"];
     };
-  }, []);
-
-  // Handler for nav item hover enter
-  var handleNavItemMouseEnter = (0, _react.useCallback)(function (index) {
-    return function (event) {
-      setHoveredNavItemIndex(index);
+    const hasLinkInNavSubtree = (item, currentPath, linkKey) => {
+      const link = item[linkKey || "link"];
+      if (link) {
+        const currentRoute = `#/${currentPath.split("/").filter(Boolean).pop() || ""}`;
+        if (link === currentRoute || currentPath === link.replace("#", "")) {
+          return true;
+        }
+      }
+      const children2 = item["itemchildren"] || item["children"] || item["SubActions"];
+      return Array.isArray(children2) && children2.some((child) => hasLinkInNavSubtree(child, currentPath, linkKey));
     };
-  }, []);
-
-  // Handler for nav item hover leave
-  var handleNavItemMouseLeave = (0, _react.useCallback)(function (event) {
-    setHoveredNavItemIndex(null);
-  }, []);
-  var isNavItemActive = (0, _react.useCallback)(function (item, index) {
-    var subActions = item["itemchildren"] || item["children"] || item["SubActions"];
-    var hasSubactions = Array.isArray(subActions) && subActions.length > 0;
-
-    // For parent items: URL-based only so opening another dropdown can't steal active state.
-    if (hasSubactions) {
-      return _hasLinkInNavSubtree(item, path, props.itemlink || "link");
-    }
-    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 === null || itemLink === void 0 ? void 0 : itemLink.replace("#", ""))) {
-        return true;
+    const handleNavItemActivate = useCallback((navItemIndex) => {
+      return () => {
+        activeNavItemIndexRef.current = navItemIndex;
+        setActiveNavItemIndex(navItemIndex);
+      };
+    }, []);
+    const handleNavItemMouseEnter = useCallback((index) => {
+      return (event) => {
+        setHoveredNavItemIndex(index);
+      };
+    }, []);
+    const handleNavItemMouseLeave = useCallback((event) => {
+      setHoveredNavItemIndex(null);
+    }, []);
+    const isNavItemActive = useCallback(
+      (item, index) => {
+        const subActions = item["itemchildren"] || item["children"] || item["SubActions"];
+        const hasSubactions = Array.isArray(subActions) && subActions.length > 0;
+        if (hasSubactions) {
+          return hasLinkInNavSubtree(item, path, props.itemlink || "link");
+        }
+        const itemLink = getItemLink(item, props);
+        if (itemLink && isString(itemLink)) {
+          const currentRoute = `#/${path.split("/").filter(Boolean).pop() || ""}`;
+          if (itemLink === currentRoute || path === (itemLink == null ? void 0 : itemLink.replace("#", ""))) {
+            return true;
+          }
+        }
+        return false;
+      },
+      [activeNavItemIndex, path, props.itemlink]
+    );
+    const renderNavItem = () => {
+      if (orderedDataset && orderedDataset.length > 0) {
+        return orderedDataset.map((item, index) => {
+          const label = getItemLabel(item);
+          const isActive = isNavItemActive(item, index);
+          const subActions = item["itemchildren"] || item["children"] || item["SubActions"];
+          const hasSubactions = Array.isArray(subActions) && subActions.length > 0;
+          const navItemActive = isActive || hoveredNavItemIndex === index;
+          const childComponent = hasSubactions ? /* @__PURE__ */ jsx(
+            WmMenu,
+            {
+              name: "",
+              autoclose: props.autoclose,
+              itemlabel: props.itemlabel,
+              itemlink: props.itemlink,
+              itemicon: props.itemicon,
+              listener: props.listener || {},
+              iconclass: item[props.itemicon],
+              caption: label,
+              dataset: subActions,
+              type: "anchor",
+              isFromNav: true,
+              isNavItemActive: navItemActive,
+              onNavItemActivate: handleNavItemActivate(index),
+              onSelect: props.onSelect,
+              showonhover: props.showonhover
+            }
+          ) : /* @__PURE__ */ jsx(
+            WmAnchor,
+            {
+              name: "",
+              listener: props.listener,
+              caption: label,
+              iconclass: item[props.itemicon],
+              iconposition: item[props.iconposition],
+              iconheight: props.iconheight ? item[props.iconheight] : "",
+              iconwidth: props.iconwidth ? item[props.iconwidth] : "",
+              iconmargin: props.iconmargin ? item[props.iconmargin] : "",
+              hyperlink: "#",
+              onClick: (e) => triggerActionClickForAnchor(e, item),
+              target: item[props.itemtarget],
+              action: item[props.itemaction],
+              badgevalue: item[props.itembadge],
+              hint: item[props.itemhint],
+              children: item[props.itemchildren]
+            }
+          );
+          return /* @__PURE__ */ jsx(
+            WmNavItem,
+            {
+              name: "",
+              listener: {},
+              className: clsx(
+                hasSubactions ? `nav-${type}` : "",
+                isActive ? "active" : "",
+                hoveredNavItemIndex === index ? "active" : ""
+              ),
+              hint: item[props.itemhint],
+              onMouseEnter: handleNavItemMouseEnter(index),
+              onMouseLeave: handleNavItemMouseLeave,
+              children: childComponent
+            },
+            index
+          );
+        });
       }
-    }
-    return false;
-  }, [activeNavItemIndex, path, props.itemlink]);
-  var renderNavItem = function renderNavItem() {
-    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 navItemActive = isActive || hoveredNavItemIndex === index;
-        var childComponent = hasSubactions ? __jsx(_menu["default"], {
-          name: "",
-          autoclose: props.autoclose,
-          itemlabel: props.itemlabel,
-          itemlink: props.itemlink,
-          itemicon: props.itemicon,
-          listener: props.listener || {},
-          iconclass: item[props.itemicon],
-          caption: label,
-          dataset: subActions,
-          type: "anchor",
-          isFromNav: true,
-          isNavItemActive: navItemActive,
-          onNavItemActivate: handleNavItemActivate(index),
-          onSelect: props.onSelect,
-          showonhover: props.showonhover
-        }) : __jsx(_anchor.WmAnchor, {
-          name: "",
-          listener: props.listener,
-          caption: label,
-          iconclass: item[props.itemicon],
-          iconposition: item[props.iconposition],
-          iconheight: props.iconheight ? item[props.iconheight] : "",
-          iconwidth: props.iconwidth ? item[props.iconwidth] : "",
-          iconmargin: props.iconmargin ? item[props.iconmargin] : "",
-          hyperlink: "#",
-          onClick: function onClick(e) {
-            return triggerActionClickForAnchor(e, item);
+      return children;
+    };
+    const { backgroundImage, backgroundRepeat, backgroundPosition, textAlign } = styles || {};
+    return /* @__PURE__ */ jsx(
+      List,
+      {
+        disablePadding: true,
+        sx: {
+          "&": {
+            width: ((_a = props.styles) == null ? void 0 : _a.width) || "auto",
+            height: ((_b = props.styles) == null ? void 0 : _b.height) || "auto",
+            justifyContent: "normal"
           },
-          target: item[props.itemtarget],
-          action: item[props.itemaction],
-          badgevalue: item[props.itembadge],
-          hint: item[props.itemhint]
-        }, item[props.itemchildren]);
-        return __jsx(_navItem.WmNavItem, {
-          key: index,
-          name: "",
-          listener: {},
-          className: (0, _clsx["default"])(hasSubactions ? "nav-".concat(type) : "", isActive ? "active" : "", hoveredNavItemIndex === index ? "active" : ""),
-          hint: item[props.itemhint],
-          onMouseEnter: handleNavItemMouseEnter(index),
-          onMouseLeave: handleNavItemMouseLeave
-        }, childComponent);
-      });
-    }
-    return children;
-  };
-  var _ref = styles || {},
-    backgroundImage = _ref.backgroundImage,
-    backgroundRepeat = _ref.backgroundRepeat,
-    backgroundPosition = _ref.backgroundPosition,
-    textAlign = _ref.textAlign;
-  return __jsx(_List["default"], {
-    disablePadding: true,
-    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",
-        justifyContent: "normal"
-      },
-      " & .MuiListItem-root": {
-        width: "auto"
+          " & .MuiListItem-root": {
+            width: "auto"
+          }
+        },
+        style: __spreadProps(__spreadValues({}, styles), {
+          backgroundImage,
+          backgroundRepeat,
+          backgroundPosition
+        }),
+        role: "navigation",
+        className: clsx(DEFAULT_CLASS, className, `nav-${layout} ${NavClassTypes[type]}`),
+        id,
+        name: props.name,
+        hidden: (_c = props.hidden) != null ? _c : false,
+        children: renderNavItem()
       }
-    },
-    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,
-    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", "dataset", "orderby"];
-  return keys.every(function (key) {
-    return prev[key] === current[key];
-  });
-});
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "layout",
+      "type",
+      "className",
+      "styles",
+      "children",
+      "dataset",
+      "orderby"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
 WmNav.displayName = "WmNav";
-
-/**
- * The WmNav component is used to create navigation menus, tabs, or pills.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-nav--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-nav--docs)
- *
- * @param props - {@link WmNavProps}
- */
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper["default"])(WmNav));
+var nav_default = memo(withBaseWrapper(WmNav));
+export {
+  WmNav,
+  nav_default as default
+};

package/components/navbar/nav/props.js

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

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

@@ -1,66 +1,75 @@
-"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];
-  });
-});
+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 } from "react/jsx-runtime";
+import { memo } from "react";
+import clsx from "clsx";
+import ListItem from "@mui/material/ListItem";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const DEFAULT_CLASS = "app-nav-item";
+const WmNavItem = memo(
+  (props) => {
+    const _a = props, { className, styles, id, onMouseEnter, onMouseLeave, name } = _a, rest = __objRest(_a, ["className", "styles", "id", "onMouseEnter", "onMouseLeave", "name"]);
+    return /* @__PURE__ */ jsx(
+      ListItem,
+      __spreadProps(__spreadValues({
+        component: "li"
+      }, removeInvalidAttributes(rest)), {
+        name,
+        id,
+        sx: __spreadProps(__spreadValues({
+          display: "block"
+        }, styles), {
+          width: "inherit",
+          margin: "inherit",
+          padding: "inherit",
+          textAlign: (styles == null ? void 0 : styles.textAlign) ? `${styles.textAlign} !important` : "inherit"
+        }),
+        className: clsx(DEFAULT_CLASS, className),
+        title: props.hint,
+        onMouseEnter,
+        onMouseLeave,
+        children: props.children
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = ["className", "styles", "children", "hidden"];
+    return keys.every((key) => 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));
+var nav_item_default = memo(withBaseWrapper(WmNavItem));
+export {
+  WmNavItem,
+  nav_item_default as default
+};

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

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