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

package/components/navbar/index.js

@@ -0,0 +1,136 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import {
+  withBaseWrapper
+} from "../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../common/WmAppIcon";
+import { removeInvalidAttributes } from "../../utils/attr";
+const DEFAULT_CLASS = "navbar navbar-default app-navbar";
+const WmNavbar = memo(
+  (props) => {
+    const _a = props, {
+      className,
+      children,
+      styles,
+      id,
+      title,
+      brandHref = "#",
+      showToggle = true,
+      menuiconclass = "wi wi-more-vert",
+      menuiconurl,
+      listener
+    } = _a, restProps = __objRest(_a, [
+      "className",
+      "children",
+      "styles",
+      "id",
+      "title",
+      "brandHref",
+      "showToggle",
+      "menuiconclass",
+      "menuiconurl",
+      "listener"
+    ]);
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const processedStyles = useMemo(() => {
+      if (!styles) return styles;
+      if (styles == null ? void 0 : styles.backgroundImage) {
+        styles.backgroundImage = `${styles.backgroundImage.includes("url(") ? styles.backgroundImage : "url(" + styles.backgroundImage + ")"}`;
+      }
+      return __spreadValues({}, styles);
+    }, [styles]);
+    const handleToggle = () => {
+      setIsCollapsed(!isCollapsed);
+    };
+    return /* @__PURE__ */ jsx(
+      Box,
+      __spreadProps(__spreadValues({
+        component: "nav",
+        style: processedStyles,
+        className: clsx(DEFAULT_CLASS, className),
+        id
+      }, removeInvalidAttributes(restProps)), {
+        children: /* @__PURE__ */ jsxs(Box, { component: "div", className: "container-fluid", children: [
+          /* @__PURE__ */ jsxs(Box, { component: "div", className: "navbar-header", children: [
+            showToggle && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: clsx("btn-transparent navbar-toggle", { collapsed: isCollapsed }),
+                onClick: handleToggle,
+                "aria-label": "Toggle navigation",
+                "aria-expanded": !isCollapsed,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle navigation" }),
+                  /* @__PURE__ */ jsx(
+                    WmAppIcon,
+                    {
+                      iconclass: menuiconclass,
+                      iconurl: menuiconurl,
+                      prefabName: props.prefabName,
+                      alt: "Menu icon"
+                    }
+                  )
+                ]
+              }
+            ),
+            title && /* @__PURE__ */ jsx(Link, { className: "navbar-brand", href: brandHref, underline: "none", children: /* @__PURE__ */ jsx("span", { className: "title", children: title }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "div",
+              className: clsx("navbar-collapse", {
+                collapse: isCollapsed,
+                in: !isCollapsed
+              }),
+              children
+            }
+          )
+        ] })
+      })
+    );
+  },
+  () => true
+);
+WmNavbar.displayName = "WmNavbar";
+var navbar_default = memo(withBaseWrapper(WmNavbar));
+export {
+  WmNavbar,
+  navbar_default as default
+};

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

@@ -0,0 +1,93 @@
+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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>>;
+export default _default;

package/components/navbar/nav/index.js

@@ -0,0 +1,248 @@
+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"
+};
+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;
+      }
+      return getOrderedDataset(dataset, orderby);
+    }, [dataset, orderby]);
+    const triggerActionClickForAnchor = (e, item) => {
+      e == null ? void 0 : e.preventDefault();
+      if (props.onSelect) {
+        props.onSelect(e, props, item);
+      }
+      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"];
+    };
+    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));
+    };
+    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 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"
+          },
+          " & .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()
+      }
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "layout",
+      "type",
+      "className",
+      "styles",
+      "children",
+      "dataset",
+      "orderby"
+    ];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
+WmNav.displayName = "WmNav";
+var nav_default = memo(withBaseWrapper(WmNav));
+export {
+  WmNav,
+  nav_default as default
+};

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-item/index.d.ts

@@ -0,0 +1,66 @@
+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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>>;
+export default _default;

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

@@ -0,0 +1,75 @@
+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";
+var nav_item_default = memo(withBaseWrapper(WmNavItem));
+export {
+  WmNavItem,
+  nav_item_default as default
+};