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

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

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

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

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

package/components/navigation/breadcrumb/index.js

@@ -0,0 +1,44 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Link from "next/link";
+import withDatasetAwareNavigation from "../../../higherOrder/DataNav";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+const BreadCrumb = (props) => {
+  const { className, onBeforenavigate, itemtarget, navNodes = [] } = props;
+  function handleBeforeNavigate(e, node) {
+    if (onBeforenavigate) {
+      return onBeforenavigate(props, node);
+    }
+  }
+  const renderNavItem = (node, index, isLast = false) => /* @__PURE__ */ jsx("li", { className: clsx(node.class, { active: isLast }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    node.icon ? /* @__PURE__ */ jsx("i", { className: node.icon }) : /* @__PURE__ */ jsx("i", {}),
+    !isLast ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: node.link || "#",
+        title: node.hint || node.label,
+        onClick: (e) => handleBeforeNavigate(e, node),
+        className: clsx({ "disabled-link": !!node.action }),
+        children: node.label
+      }
+    ) : /* @__PURE__ */ jsx(
+      Link,
+      {
+        title: node.hint || node.label,
+        className: "text-muted",
+        tabIndex: 0,
+        "aria-current": "page",
+        href: "#",
+        children: node.label
+      }
+    )
+  ] }) }, node.id || index);
+  return /* @__PURE__ */ jsx("ol", { className: clsx("breadcrumb app-breadcrumb", className), children: navNodes.map((node, index) => renderNavItem(node, index, index === navNodes.length - 1)) });
+};
+const BreadCrumbStandalone = withDatasetAwareNavigation(BreadCrumb);
+var breadcrumb_default = withBaseWrapper(withDatasetAwareNavigation(BreadCrumb));
+export {
+  BreadCrumb,
+  BreadCrumbStandalone as WmBreadcrumb,
+  breadcrumb_default as default
+};

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

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

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

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

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

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import React, { memo } from "react";
+import { List } from "@mui/material";
+import clsx from "clsx";
+import { ANIMATION_CLASSES } from "../constants";
+const getAnimationClass = (type, position) => {
+  if (!type || !position || !ANIMATION_CLASSES[type]) return "";
+  return ANIMATION_CLASSES[type][position] || ANIMATION_CLASSES[type].name;
+};
+const buildMenuListClasses = (iconposition, menulayout, horizontalPos, panelPosition, animateitems, menuposition, isHovered) => {
+  return clsx(
+    `icon-position-${iconposition}`,
+    `menu-layout-${menulayout}`,
+    "dropdown-menu",
+    horizontalPos === "left" && isHovered || panelPosition === "left" ? "pull-right" : "",
+    !panelPosition && horizontalPos === "left" ? "pull-right" : "",
+    menulayout === "horizontal" ? "horizontal" : "",
+    animateitems && `animated ${getAnimationClass(animateitems, menuposition)}`
+  );
+};
+const MenuList = memo(
+  ({
+    className,
+    style,
+    role = "menu",
+    iconposition = "left",
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onClick
+  }) => {
+    if (React.Children.count(children) === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      List,
+      {
+        className: `${className} icon-position-${iconposition}`,
+        role,
+        style,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        children
+      }
+    );
+  }
+);
+MenuList.displayName = "MenuList";
+const CollapsibleMenu = memo(
+  ({
+    isOpen,
+    verticalPos,
+    children,
+    className,
+    style,
+    onMouseEnter,
+    onMouseLeave,
+    onClick
+  }) => {
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx(
+      MenuList,
+      {
+        className,
+        style,
+        onMouseEnter,
+        onMouseLeave,
+        onClick,
+        children
+      }
+    );
+  }
+);
+CollapsibleMenu.displayName = "CollapsibleMenu";
+export {
+  CollapsibleMenu,
+  MenuList,
+  buildMenuListClasses
+};

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

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

package/components/navigation/menu/constants.js

@@ -0,0 +1,87 @@
+const KEYBOARD_MOVEMENTS = {
+  MOVE_UP: "UP-ARROW",
+  MOVE_LEFT: "LEFT-ARROW",
+  MOVE_RIGHT: "RIGHT-ARROW",
+  MOVE_DOWN: "DOWN-ARROW",
+  ON_ENTER: "ENTER",
+  ON_MOUSE_ENTER: "MOUSE-ENTER",
+  ON_MOUSE_LEAVE: "MOUSE-LEAVE",
+  ON_TAB: "TAB",
+  ON_SHIFT_TAB: "SHIFT-TAB",
+  ON_ESCAPE: "ESC"
+};
+const POSITION = {
+  DOWN_RIGHT: "down,right",
+  DOWN_LEFT: "down,left",
+  UP_RIGHT: "up,right",
+  UP_LEFT: "up,left",
+  INLINE: "inline"
+};
+const LAYOUT = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+  GRID: "grid"
+};
+const AUTO_OPEN = {
+  NEVER: "never",
+  ACTIVE_PAGE: "activepage",
+  ALWAYS: "always"
+};
+const AUTO_CLOSE = {
+  ALWAYS: "always",
+  OUTSIDE_CLICK: "outsideClick",
+  // Now matches exactly the string "outsideClick"
+  ON_MOUSE_LEAVE: "onmouseleave",
+  NEVER: "never",
+  DISABLED: "disabled"
+};
+const DEFAULT_DATASET = [
+  { label: "Menu Item 1", link: "#item1", expanded: false },
+  { label: "Menu Item 2", link: "#item2", expanded: false },
+  { label: "Menu Item 3", link: "#item3", expanded: false }
+];
+const ANIMATION_CLASSES = {
+  scale: {
+    name: "wmScaleInLeft",
+    "down,right": "wmScaleInLeft",
+    "down,left": "wmScaleInRight",
+    "up,right": "wmScaleInTopLeft",
+    "up,left": "wmScaleInTopRight"
+  },
+  fade: {
+    name: "fadeIn",
+    "down,right": "fadeIn",
+    "down,left": "fadeIn",
+    "up,right": "fadeIn",
+    "up,left": "fadeIn"
+  },
+  slide: {
+    name: "wmSlideInDown",
+    "down,right": "wmSlideInDown",
+    "down,left": "wmSlideInDown",
+    "up,right": "wmSlideInUp",
+    "up,left": "wmSlideInUp"
+  }
+};
+const TOOLTIP_ENTER_DELAY = 1500;
+const CARET_CLS = {
+  UP: "fa-caret-up",
+  DOWN: "fa-caret-down"
+};
+const menuAlignClass = {
+  "pull-right": "fa-caret-left",
+  "dropinline-menu": "fa-caret-down",
+  "pull-left": "fa-caret-right"
+};
+export {
+  ANIMATION_CLASSES,
+  AUTO_CLOSE,
+  AUTO_OPEN,
+  CARET_CLS,
+  DEFAULT_DATASET,
+  KEYBOARD_MOVEMENTS,
+  LAYOUT,
+  POSITION,
+  TOOLTIP_ENTER_DELAY,
+  menuAlignClass
+};

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

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

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

@@ -0,0 +1,21 @@
+import { useCallback, useState } from "react";
+const useHoverState = () => {
+  const [hoveredPaths, setHoveredPaths] = useState(/* @__PURE__ */ new Set());
+  const handlePathMouseEnter = useCallback((path) => {
+    setHoveredPaths((prev) => /* @__PURE__ */ new Set([...prev, path]));
+  }, []);
+  const handlePathMouseLeave = useCallback(
+    (path, _event) => {
+      setHoveredPaths((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(path);
+        return newSet;
+      });
+    },
+    []
+  );
+  return { hoveredPaths, handlePathMouseEnter, handlePathMouseLeave };
+};
+export {
+  useHoverState
+};

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

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

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

@@ -0,0 +1,43 @@
+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 { useMemo } from "react";
+import { KEYBOARD_MOVEMENTS, POSITION } from "../constants";
+const useKeyboardMovements = (menuposition) => {
+  return useMemo(() => {
+    switch (menuposition) {
+      case POSITION.UP_RIGHT:
+        return __spreadProps(__spreadValues({}, KEYBOARD_MOVEMENTS), { MOVE_UP: "DOWN-ARROW", MOVE_DOWN: "UP-ARROW" });
+      case POSITION.UP_LEFT:
+        return __spreadProps(__spreadValues({}, KEYBOARD_MOVEMENTS), {
+          MOVE_UP: "DOWN-ARROW",
+          MOVE_DOWN: "UP-ARROW",
+          MOVE_LEFT: "RIGHT-ARROW",
+          MOVE_RIGHT: "LEFT-ARROW"
+        });
+      case POSITION.DOWN_LEFT:
+        return __spreadProps(__spreadValues({}, KEYBOARD_MOVEMENTS), { MOVE_LEFT: "RIGHT-ARROW", MOVE_RIGHT: "LEFT-ARROW" });
+      default:
+        return KEYBOARD_MOVEMENTS;
+    }
+  }, [menuposition]);
+};
+export {
+  useKeyboardMovements
+};

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

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

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

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { DEFAULT_DATASET } from "../constants";
+import { transformDataset } from "../../../../utils/transformedDataset-utils";
+const useTransformedDataset = (dataset, itemlabel, orderby, itemchildren, dataPath) => {
+  return useMemo(() => {
+    if (!dataset) return DEFAULT_DATASET;
+    return transformDataset(
+      dataset,
+      void 0,
+      itemlabel,
+      void 0,
+      void 0,
+      orderby,
+      null,
+      dataPath,
+      itemchildren
+    );
+  }, [dataset, itemlabel, orderby]);
+};
+export {
+  useTransformedDataset
+};

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

@@ -0,0 +1,109 @@
+import React from "react";
+import { WmMenuExtendedProps } from "./props";
+export declare const WmMenu: React.MemoExoticComponent<(props: WmMenuExtendedProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmMenu component renders a navigation menu with support for hierarchical items,
+ * dataset binding, role-based filtering, and configurable layout/position.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-menu--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-menu--docs)
+ *
+ * @param props - {@link WmMenuExtendedProps}
+ */
+declare const _default: React.ComponentType<{
+    styles?: React.CSSProperties;
+    conditionalstyles?: React.CSSProperties;
+    className?: string;
+    children?: React.ReactNode;
+    listener: Record<string, any>;
+    name?: string;
+    displayValue?: string;
+    onActionsclick?: (item: any) => void;
+    nodes$?: {
+        subscribe: (callback: () => void) => {
+            unsubscribe: () => void;
+        };
+    };
+    dataPath?: string;
+    hidden?: boolean;
+    loggedInUser?: import("../../../store/slices/authSlice").LoggedInUserConfig | null;
+    type?: "button" | "anchor";
+    prefabName?: string;
+    caption?: string;
+    key?: string;
+    loading?: boolean;
+    id?: string;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    "data-widget-id"?: string;
+    datavalue?: any;
+    width?: string | number;
+    height?: string | number;
+    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;
+    standalone?: boolean;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    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;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    showSkeleton?: boolean;
+    widget?: string;
+    orderby?: string;
+    iconclass?: string;
+    iconurl?: string;
+    onSelect?: ($event: React.MouseEvent<HTMLElement>, widget: any, $item: any) => void;
+    shortcutkey?: string;
+    iconposition?: string;
+    itemicon?: string;
+    itemlabel?: string | any;
+    panelPosition?: string;
+    menualign?: string;
+    menuposition?: string;
+    menulayout?: string;
+    menuclass?: string;
+    linktarget?: string;
+    animateitems?: string;
+    disableMenuContext?: boolean;
+    showonhover?: boolean;
+    autoclose?: string;
+    autoopen?: string;
+    navNodes?: Array<any>;
+    resetNavNodes?: () => void;
+    itemlink?: string;
+    itemaction?: string;
+    userrole?: string;
+    isactive?: string;
+    itemchildren?: string | any;
+    isFromNav?: boolean;
+    onNavItemActivate?: () => void;
+    isNavItemActive?: boolean;
+}>;
+export default _default;