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

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

@@ -0,0 +1,74 @@
+import type { LoggedInUserConfig } from "@wavemaker-ai/react-runtime/store/slices/authSlice";
+import { BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper";
+export interface WmMenuProps extends BaseProps {
+    type?: "button" | "anchor";
+    panelPosition?: string;
+    menualign?: string;
+    menuposition?: string;
+    menulayout?: string;
+    menuclass?: string;
+    linktarget?: string;
+    iconclass?: string;
+    animateitems?: string;
+    disableMenuContext?: boolean;
+    showonhover?: boolean;
+    autoclose?: string;
+    autoopen?: string;
+    hint?: string;
+    arialabel?: string;
+    width?: string | number;
+    height?: string | number;
+    iconposition?: string;
+    caption?: string;
+    shortcutkey?: string;
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onSelect?: ($event: React.MouseEvent<HTMLElement>, widget: any, $item: any) => void;
+    navNodes?: Array<any>;
+    resetNavNodes?: () => void;
+    orderby?: string;
+    dataset?: any;
+    itemlabel?: string | any;
+    itemlink?: string;
+    itemicon?: string;
+    itemaction?: string;
+    userrole?: string;
+    /**
+     * Logged-in user for role-based menu filtering. When set, overrides `listener.appConfig.loggedInUser`.
+     */
+    loggedInUser?: LoggedInUserConfig | null;
+    isactive?: string;
+    itemchildren?: string | any;
+    isFromNav?: boolean;
+    onNavItemActivate?: () => void;
+    isNavItemActive?: boolean;
+}
+export type AnimationType = "scale" | "fade" | "slide";
+export type PositionType = "down,right" | "down,left" | "up,right" | "up,left";
+export interface MenuNode {
+    label?: string;
+    icon?: string;
+    link?: string;
+    hint?: string;
+    disabled?: boolean;
+    children?: MenuNode[];
+    expanded?: boolean;
+    nodeRef?: React.RefObject<HTMLDivElement | null>;
+    dataObject?: any;
+    isactive?: boolean;
+}
+export interface WmMenuExtendedProps extends Omit<WmMenuProps, "name"> {
+    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;
+}

package/components/navigation/menu/props.js

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

package/components/navigation/menu/utils/action-task.d.ts

@@ -0,0 +1 @@
+export declare function executeActionTaskFromItem(item: any, listener?: any): void;

package/components/navigation/menu/utils/action-task.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.executeActionTaskFromItem = executeActionTaskFromItem;
+function executeActionTaskFromItem(item, listener) {
+  var _item$value$actiontas, _item$value, _item$dataObject;
+  var actiontask = (_item$value$actiontas = item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.actiontask) !== null && _item$value$actiontas !== void 0 ? _item$value$actiontas : item === null || item === void 0 || (_item$dataObject = item.dataObject) === null || _item$dataObject === void 0 ? void 0 : _item$dataObject.actiontask;
+  if (!actiontask || typeof actiontask !== "function") {
+    return;
+  }
+  actiontask ? actiontask() : null;
+}

package/components/navigation/menu/utils/role-filter.d.ts

@@ -0,0 +1,9 @@
+import { MenuNode } from "../props";
+/**
+ * Filters menu nodes based on user role
+ * @param nodes - Array of menu nodes to filter
+ * @param currentUserRoles - Current logged-in user's roles (array or comma-separated string)
+ * @param userroleKey - The dynamic key name to use for extracting role from node (defaults to 'userrole')
+ * @returns Filtered array of menu nodes that the user has access to
+ */
+export declare function filterMenuNodesByRole(nodes: MenuNode[], currentUserRoles?: string | string[], userroleKey?: string): MenuNode[];

package/components/navigation/menu/utils/role-filter.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterMenuNodesByRole = filterMenuNodesByRole;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+/**
+ * Filters menu nodes based on user role
+ * @param nodes - Array of menu nodes to filter
+ * @param currentUserRoles - Current logged-in user's roles (array or comma-separated string)
+ * @param userroleKey - The dynamic key name to use for extracting role from node (defaults to 'userrole')
+ * @returns Filtered array of menu nodes that the user has access to
+ */
+function filterMenuNodesByRole(nodes, currentUserRoles) {
+  var userroleKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "userrole";
+  if (!nodes || !Array.isArray(nodes)) return [];
+
+  // Convert currentUserRoles to array format
+  var userRolesArray = [];
+  if (currentUserRoles) {
+    if (typeof currentUserRoles === "string") {
+      userRolesArray = currentUserRoles.split(",").map(function (r) {
+        return r.trim().toLowerCase();
+      });
+    } else if (Array.isArray(currentUserRoles)) {
+      userRolesArray = currentUserRoles.map(function (r) {
+        return r.toLowerCase();
+      });
+    }
+  }
+  return nodes.map(function (node) {
+    var _node$dataObject;
+    // Create a shallow copy to avoid mutating the original
+    var filteredNode = _objectSpread({}, node);
+
+    // Use the dynamic userroleKey to extract the role from the node
+    var nodeUserRole = ((_node$dataObject = node.dataObject) === null || _node$dataObject === void 0 ? void 0 : _node$dataObject[userroleKey]) || (node === null || node === void 0 ? void 0 : node[userroleKey]);
+
+    // If no userrole is specified on the node, include the item
+    if (!nodeUserRole) {
+      // Still recursively filter children if they exist
+      if (filteredNode.children && Array.isArray(filteredNode.children)) {
+        filteredNode.children = filterMenuNodesByRole(filteredNode.children, currentUserRoles, userroleKey);
+      }
+      return filteredNode;
+    }
+
+    // If userrole is specified but user has no roles, exclude the item
+    if (!currentUserRoles || userRolesArray.length === 0) {
+      return null;
+    }
+
+    // Check if any of the user's roles match the allowed roles
+    var allowedRoles = nodeUserRole.split(",").map(function (r) {
+      return r.trim().toLowerCase();
+    });
+    var hasAccess = userRolesArray.some(function (userRole) {
+      return allowedRoles.includes(userRole);
+    });
+    if (!hasAccess) {
+      return null;
+    }
+
+    // User has access, recursively filter children
+    if (filteredNode.children && Array.isArray(filteredNode.children)) {
+      filteredNode.children = filterMenuNodesByRole(filteredNode.children, currentUserRoles, userroleKey);
+    }
+    return filteredNode;
+  }).filter(function (node) {
+    return node !== null;
+  });
+}

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

@@ -0,0 +1,97 @@
+import React from "react";
+import WmPopoverProps from "./props";
+export declare const WmPopover: (Props: WmPopoverProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The WmPopover component displays content in a floating overlay triggered by click or hover.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-popover--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-popover--docs)
+ *
+ * @param props - {@link WmPopoverProps}
+ */
+declare const _default: React.ComponentType<{
+    content?: string;
+    contentsource?: "inline" | "partial";
+    interaction?: "default" | "click" | "hover" | "click and hover";
+    popoverplacement?: "left" | "right" | "top" | "bottom";
+    popoverarrow: boolean | string;
+    popoverheight: string;
+    popoverwidth: string;
+    title?: string;
+    adaptiveposition?: boolean;
+    autoclose?: "disabled" | "always" | "outsideClick";
+    contentanimation?: string;
+    onLoad?: (widget: WmPopoverProps) => void | Function;
+    onShow?: (event: Event, widget: WmPopoverProps) => void;
+    onHide?: (event: Event, widget: WmPopoverProps) => void;
+    render?: (props: WmPopoverProps, onLoad: () => void) => React.ReactNode;
+    disabled?: boolean;
+    isOpen?: boolean;
+    caption: string;
+    iconclass?: string;
+    encodeurl?: string;
+    hyperlink?: string;
+    iconheight?: string;
+    iconwidth?: string;
+    iconurl?: string;
+    iconmargin?: string;
+    iconposition?: import("../../basic/anchor/props").IconPositionType;
+    badgevalue?: string | number;
+    shortcutkey?: string;
+    target?: string;
+    id?: string;
+    itemLink?: string;
+    href?: string;
+    variant?: "standard";
+    action?: string;
+    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;
+    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;

package/components/navigation/popover/index.js

@@ -0,0 +1,310 @@
+"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.WmPopover = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _anchor = require("@wavemaker-ai/react-runtime/components/basic/anchor");
+var _props = require("./props");
+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 WmPopover = exports.WmPopover = function WmPopover(Props) {
+  var _props$popoverheight, _props$popoverwidth, _props$tabindex;
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), Props);
+  var _useState = (0, _react.useState)(null),
+    anchorEl = _useState[0],
+    setAnchorEl = _useState[1];
+  var _useState2 = (0, _react.useState)(props.popoverplacement || "bottom"),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isDialogOpen = _useState3[0],
+    setIsDialogOpen = _useState3[1];
+  var anchorRef = (0, _react.useRef)(null);
+  var popoverContentRef = (0, _react.useRef)(null);
+  var loadedRef = (0, _react.useRef)(false);
+  var _useState4 = (0, _react.useState)(false),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var isOpen = Boolean(anchorEl);
+
+  // Exposeable methods
+  var openPopover = (0, _react.useCallback)(function () {
+    var _props$onShow;
+    if (!anchorRef.current) {
+      return;
+    }
+    calculatePlacement();
+    setAnchorEl(anchorRef.current);
+    setIsDialogOpen(true);
+    props === null || props === void 0 || (_props$onShow = props.onShow) === null || _props$onShow === void 0 || _props$onShow.call(props, {}, _objectSpread({
+      isOpen: true
+    }, props));
+  }, []);
+  var closePopover = (0, _react.useCallback)(function () {
+    var _props$onHide;
+    if (!isOpen) {
+      return;
+    }
+    setAnchorEl(null);
+    setIsDialogOpen(false);
+    props === null || props === void 0 || (_props$onHide = props.onHide) === null || _props$onHide === void 0 || _props$onHide.call(props, {}, _objectSpread({
+      isOpen: false
+    }, props));
+  }, [isOpen]);
+  var togglePopover = (0, _react.useCallback)(function () {
+    if (isOpen) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  }, [isOpen, openPopover, closePopover]);
+
+  // Register methods on listener
+  (0, _react.useEffect)(function () {
+    var _ref = props,
+      listener = _ref.listener,
+      name = _ref.name;
+    if (listener !== null && listener !== void 0 && listener.onChange && name) {
+      listener.onChange(name, {
+        open: openPopover,
+        close: closePopover,
+        toggle: togglePopover,
+        isOpen: isOpen
+      });
+    }
+  }, []);
+  function handleLoad(widget) {
+    if (props.onLoad && !loadedRef.current) {
+      loadedRef.current = true;
+      props.onLoad(widget);
+    }
+  }
+  (0, _react.useEffect)(function () {
+    if (!isOpen || props.content) {
+      return;
+    }
+    handleLoad(_objectSpread({
+      isOpen: isOpen
+    }, props));
+  }, [isOpen]);
+  var calculatePlacement = function calculatePlacement() {
+    if (!anchorRef.current) return;
+    var rect = anchorRef.current.getBoundingClientRect();
+    var viewHeight = window.innerHeight;
+    var viewWidth = window.innerWidth;
+    var height = parseInt(props.popoverheight);
+    var width = parseInt(props.popoverwidth);
+    if (props.popoverplacement === "top" && rect.top < height) setPlacement("bottom");else if (props.popoverplacement === "bottom" && viewHeight - rect.bottom < height) setPlacement("top");else if (props.popoverplacement === "left" && rect.left < width) setPlacement("right");else if (props.popoverplacement === "right" && viewWidth - rect.right < width) setPlacement("left");else setPlacement(props.popoverplacement || "bottom");
+  };
+  (0, _react.useEffect)(function () {
+    if (!isOpen || props.autoclose === "disabled") return;
+    var handleOutsideClick = function handleOutsideClick(event) {
+      var _anchorRef$current, _popoverContentRef$cu;
+      var target = event.target;
+      var isInsideAnchor = (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.contains(target);
+      var isInsidePopover = (_popoverContentRef$cu = popoverContentRef.current) === null || _popoverContentRef$cu === void 0 ? void 0 : _popoverContentRef$cu.contains(target);
+      if (!isInsideAnchor && !isInsidePopover) {
+        var _props$onHide2;
+        setAnchorEl(null);
+        setIsDialogOpen(false);
+        props === null || props === void 0 || (_props$onHide2 = props.onHide) === null || _props$onHide2 === void 0 || _props$onHide2.call(props, event, _objectSpread({
+          isOpen: false
+        }, props));
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return function () {
+      return document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [isOpen, props.autoclose]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setAnchorEl(anchorRef.current);
+    } else if (event.key === "Escape") {
+      setAnchorEl(null);
+    }
+  };
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var widget = _objectSpread({
+      isOpen: isOpen
+    }, props);
+    delete widget.listener;
+    if (!isOpen) {
+      loadedRef.current = false;
+    }
+    if (anchorEl) {
+      if (isDialogOpen) {
+        var _props$onHide3;
+        setIsDialogOpen(false);
+        setAnchorEl(null);
+        props === null || props === void 0 || (_props$onHide3 = props.onHide) === null || _props$onHide3 === void 0 || _props$onHide3.call(props, event.nativeEvent, widget);
+        return;
+      }
+      (0, _debounce["default"])(function () {
+        var _props$onHide4;
+        setAnchorEl(null);
+        props === null || props === void 0 || (_props$onHide4 = props.onHide) === null || _props$onHide4 === void 0 || _props$onHide4.call(props, event.nativeEvent, widget);
+      }, 500);
+    } else {
+      var _props$onShow2;
+      if (open) {
+        setOpen(false);
+        return;
+      }
+      calculatePlacement();
+      setAnchorEl(event.currentTarget);
+      props === null || props === void 0 || (_props$onShow2 = props.onShow) === null || _props$onShow2 === void 0 || _props$onShow2.call(props, event.nativeEvent, widget);
+      setIsDialogOpen(true);
+    }
+  };
+  var anchorOrigin = {
+    vertical: placement === "top" ? "top" : placement === "bottom" ? "bottom" : "center",
+    horizontal: placement === "left" ? "left" : placement === "right" ? "right" : "center"
+  };
+  var transformOrigin = {
+    vertical: placement === "top" ? "bottom" : placement === "bottom" ? "top" : "center",
+    horizontal: placement === "left" ? "right" : placement === "right" ? "left" : "center"
+  };
+  function handleClose(event, reason) {
+    var _props$onHide7;
+    if (props.autoclose === "disabled") {
+      return;
+    }
+    // Always: close when user clicks anywhere on the page
+    else if (props.autoclose === "always") {
+      var _props$onHide5;
+      setAnchorEl(null);
+      props === null || props === void 0 || (_props$onHide5 = props.onHide) === null || _props$onHide5 === void 0 || _props$onHide5.call(props, event.nativeEvent, _objectSpread({}, props));
+      return;
+    }
+
+    // Outside Click: close when user clicks outside the popover content
+    else if (props.autoclose === "outsideClick") {
+      if (reason === "backdropClick") {
+        var _props$onHide6;
+        setAnchorEl(null);
+        props === null || props === void 0 || (_props$onHide6 = props.onHide) === null || _props$onHide6 === void 0 || _props$onHide6.call(props, event.nativeEvent, _objectSpread({}, props));
+      }
+      return;
+    }
+
+    // Default behavior for any other autoclose value
+    setAnchorEl(null);
+    props === null || props === void 0 || (_props$onHide7 = props.onHide) === null || _props$onHide7 === void 0 || _props$onHide7.call(props, event.nativeEvent, _objectSpread({}, props));
+  }
+  var arrowStyles = (0, _react.useMemo)(function () {
+    if (!anchorRef.current) return {};
+    return _objectSpread(_objectSpread(_objectSpread({}, placement === "top" && {
+      left: "calc(50% - 10px)"
+    }), placement === "bottom" && {
+      left: "calc(50% - 10px)"
+    }), {}, {
+      marginLeft: "-4px"
+    });
+  }, [placement, props.popoverplacement, calculatePlacement]);
+  var popoverHeight = props !== null && props !== void 0 && (_props$popoverheight = props.popoverheight) !== null && _props$popoverheight !== void 0 && _props$popoverheight.includes("px") ? props === null || props === void 0 ? void 0 : props.popoverheight : "".concat(props === null || props === void 0 ? void 0 : props.popoverheight, "px");
+  var popoverWidth = props !== null && props !== void 0 && (_props$popoverwidth = props.popoverwidth) !== null && _props$popoverwidth !== void 0 && _props$popoverwidth.includes("px") ? props === null || props === void 0 ? void 0 : props.popoverwidth : "".concat(props === null || props === void 0 ? void 0 : props.popoverwidth, "px");
+  return __jsx(_react["default"].Fragment, null, __jsx("div", {
+    className: (0, _clsx["default"])({
+      "disable-popover": props.disabled,
+      "app-popover-wrapper": true
+    }),
+    style: props.styles,
+    hidden: props.hidden,
+    name: props.name
+  }, __jsx(_anchor.WmAnchor, {
+    hint: props.hint || props.name,
+    ref: anchorRef,
+    tabindex: (_props$tabindex = props.tabindex) !== null && _props$tabindex !== void 0 ? _props$tabindex : 0,
+    className: (0, _clsx["default"])(props.className, {
+      "disable-popover": props.disabled
+    }),
+    styles: props.styles
+    // @ts-ignore
+    ,
+    onClick: function onClick(event) {
+      return handleClick(event);
+    },
+    onMouseEnter: function onMouseEnter(event) {
+      if (props.interaction === "hover" || props.interaction === "default") {
+        handleClick(event);
+      }
+    },
+    "aria-expanded": isOpen,
+    "aria-haspopup": "true",
+    arialabel: props.arialabel,
+    caption: props.caption,
+    iconclass: props.iconclass,
+    iconheight: props.iconheight,
+    iconmargin: props.iconmargin,
+    iconposition: props.iconposition,
+    iconurl: props.iconurl,
+    iconwidth: props.iconwidth,
+    badgevalue: props.badgevalue,
+    encodeurl: props.encodeurl,
+    shortcutkey: props.shortcutkey,
+    name: props.name
+  })), __jsx(_Popover["default"], {
+    hidden: props.hidden,
+    open: isOpen,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    anchorOrigin: anchorOrigin,
+    transformOrigin: transformOrigin,
+    transitionDuration: {
+      enter: 0,
+      exit: 0
+    },
+    disableScrollLock: true,
+    disableAutoFocus: true,
+    disableEnforceFocus: true,
+    disableRestoreFocus: true,
+    slotProps: {
+      paper: {
+        ref: popoverContentRef,
+        style: {
+          height: popoverHeight,
+          width: popoverWidth,
+          pointerEvents: props.autoclose === "disabled" ? "none" : "auto"
+        },
+        className: (0, _clsx["default"])(placement, "app-popover in popover", props.contentanimation && "animated ".concat(props.contentanimation), "popover-".concat(placement), "bs-popover-".concat(placement), "bs3 popover-logout-popover")
+      }
+    }
+  }, __jsx("div", {
+    className: (0, _clsx["default"])("popover-arrow arrow", props.popoverarrow === false && "hidden"),
+    style: arrowStyles
+  }), props.title && __jsx("div", {
+    className: "popover-title popover-header"
+  }, props.title), __jsx("div", {
+    className: "popover-content popover-body"
+  }, props.render && props.content ? __jsx(_react.Suspense, {
+    fallback: null
+  }, props.render(props, function () {
+    return handleLoad(_objectSpread({}, props));
+  })) : props.children)));
+};
+
+/**
+ * The WmPopover component displays content in a floating overlay triggered by click or hover.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/navigation-popover--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/navigation-popover--docs)
+ *
+ * @param props - {@link WmPopoverProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmPopover);

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

@@ -0,0 +1,28 @@
+import BaseProps, { Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { WmAnchorProps } from "../../basic/anchor/props";
+type InteractionType = "click" | "hover" | "default" | "click and hover";
+type PopoverPlacementType = "top" | "bottom" | "left" | "right";
+type ContentSourceType = "partial" | "inline";
+type AutoCloseType = "outsideClick" | "always" | "disabled";
+interface PopoverProps extends WmAnchorProps {
+    content?: string;
+    contentsource?: ContentSourceType;
+    interaction?: InteractionType;
+    popoverplacement?: PopoverPlacementType;
+    popoverarrow: boolean | string;
+    popoverheight: string;
+    popoverwidth: string;
+    title?: string;
+    adaptiveposition?: boolean;
+    autoclose?: AutoCloseType;
+    contentanimation?: string;
+    onLoad?: (widget: WmPopoverProps) => void | Function;
+    onShow?: (event: Event, widget: WmPopoverProps) => void;
+    onHide?: (event: Event, widget: WmPopoverProps) => void;
+    render?: (props: WmPopoverProps, onLoad: () => void) => React.ReactNode;
+    disabled?: boolean;
+    isOpen?: boolean;
+}
+export declare const DEFAULT_PROPS: Partial<WmPopoverProps>;
+export type WmPopoverProps = Prettify<PopoverProps & BaseProps>;
+export default WmPopoverProps;

package/components/navigation/popover/props.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = void 0;
+var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  contentsource: "partial",
+  interaction: "click",
+  popoverplacement: "bottom",
+  popoverarrow: true,
+  autoclose: "outsideClick"
+};

package/components/page/content/index.d.ts

@@ -0,0 +1,15 @@
+import { WmContentProps } from "./props";
+declare function WmContent(props: WmContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace WmContent {
+    var displayName: string;
+}
+/**
+ * The WmContent component is the main content area container for page layout.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-content--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-content--docs#tab-overview)
+ *
+ * @param props - {@link WmContentProps}
+ */
+export default WmContent;