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

package/components/navbar/index.d.ts

@@ -0,0 +1,70 @@
+import { BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper";
+export declare const WmNavbar: import("react").MemoExoticComponent<(props: BaseProps & {
+    title?: string;
+    brandHref?: string;
+    showToggle?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmNavbar component renders a top navigation bar with brand, toggle, and child nav items.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navbar-navbar--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navbar-navbar--docs#tab-overview)
+ *
+ * @param props - {@link BaseProps}
+ */
+declare const _default: import("react").MemoExoticComponent<import("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?: import("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?: import("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;
+    title?: string;
+    brandHref?: string;
+    showToggle?: boolean;
+}>>;
+export default _default;

package/components/navbar/index.js

@@ -0,0 +1,101 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmNavbar = 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-ai/react-runtime/higherOrder/withBaseWrapper");
+var _button = require("@wavemaker-ai/react-runtime/components/form/button");
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+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 = exports.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",
+    style: processedStyles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id
+  }, (0, _attr.removeInvalidAttributes)(restProps)), __jsx(_Box["default"], {
+    component: "div",
+    className: "container-fluid"
+  }, __jsx(_Box["default"], {
+    component: "div",
+    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;
+});
+WmNavbar.displayName = "WmNavbar";
+
+/**
+ * The WmNavbar component renders a top navigation bar with brand, toggle, and child nav items.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navbar-navbar--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navbar-navbar--docs#tab-overview)
+ *
+ * @param props - {@link BaseProps}
+ */
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper.withBaseWrapper)(WmNavbar));

package/components/navbar/nav/index.d.ts

@@ -0,0 +1,90 @@
+import WmNavProps from "@wavemaker-ai/react-runtime/components/navbar/nav/props";
+export declare const WmNav: import("react").MemoExoticComponent<(props: WmNavProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * 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}
+ */
+declare const _default: import("react").MemoExoticComponent<import("react").ComponentType<{
+    layout: string;
+    type: string;
+    autoclose: string;
+    autoopen: string;
+    class: string;
+    dataset: any;
+    iconposition: string;
+    isactive: string;
+    itemlabel?: string | ((item: any, fragment?: any) => string);
+    itemhint: string;
+    itemlink: string;
+    itemicon: string;
+    itemclass: string;
+    itemchildren: string;
+    itemaction: string;
+    itembadge: string;
+    itemtarget: string;
+    name: string;
+    orderby: string;
+    show: boolean;
+    showonhover: boolean;
+    userrole: string;
+    onSelect?: (event: any, widget: any, item: any) => void;
+    iconheight?: string;
+    iconwidth?: string;
+    iconmargin?: string;
+    action?: string;
+    hyperlink?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    encodeurl?: "true" | "false";
+    id?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: import("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?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    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;
+    prefabName?: string;
+}>>;
+export default _default;

package/components/navbar/nav/index.js

@@ -0,0 +1,244 @@
+"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 = {
+  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);
+      }
+    }
+
+    // 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;
+      }
+    }
+    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);
+    };
+  }, []);
+
+  // Handler for nav item hover enter
+  var handleNavItemMouseEnter = (0, _react.useCallback)(function (index) {
+    return function (event) {
+      setHoveredNavItemIndex(index);
+    };
+  }, []);
+
+  // 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;
+      }
+    }
+    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);
+          },
+          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"
+      }
+    },
+    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];
+  });
+});
+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));

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

@@ -0,0 +1,56 @@
+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 NavProps extends NavigationProps, AdvancedWidgetProps {
+    layout: string;
+    type: string;
+    autoclose: string;
+    autoopen: string;
+    class: string;
+    dataset: any;
+    iconposition: string;
+    isactive: string;
+    itemlabel?: string | ((item: any, fragment?: any) => string);
+    itemhint: string;
+    itemlink: string;
+    itemicon: string;
+    itemclass: string;
+    itemchildren: string;
+    itemaction: string;
+    itembadge: string;
+    itemtarget: string;
+    name: string;
+    orderby: string;
+    show: boolean;
+    showonhover: boolean;
+    userrole: string;
+    onSelect?: (event: any, widget: any, item: any) => void;
+    iconheight?: string;
+    iconwidth?: string;
+    iconmargin?: string;
+    action?: string;
+}
+export type WmNavProps = Prettify<NavProps & BaseProps>;
+export default WmNavProps;

package/components/navbar/nav/props.js

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

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

@@ -0,0 +1,63 @@
+import { WmNavItemProps } from "./props";
+export declare const WmNavItem: import("react").MemoExoticComponent<(props: WmNavItemProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * 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}
+ */
+declare const _default: import("react").MemoExoticComponent<import("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?: import("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?: import("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;