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

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

@@ -0,0 +1,75 @@
+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;
+    iconurl?: 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/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,11 @@
+function executeActionTaskFromItem(item, listener) {
+  var _a, _b, _c;
+  let actiontask = (_c = (_a = item == null ? void 0 : item.value) == null ? void 0 : _a.actiontask) != null ? _c : (_b = item == null ? void 0 : item.dataObject) == null ? void 0 : _b.actiontask;
+  if (!actiontask || typeof actiontask !== "function") {
+    return;
+  }
+  actiontask ? actiontask() : null;
+}
+export {
+  executeActionTaskFromItem
+};

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,61 @@
+var __defProp = Object.defineProperty;
+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;
+};
+function filterMenuNodesByRole(nodes, currentUserRoles, userroleKey = "userrole") {
+  if (!nodes || !Array.isArray(nodes)) return [];
+  let userRolesArray = [];
+  if (currentUserRoles) {
+    if (typeof currentUserRoles === "string") {
+      userRolesArray = currentUserRoles.split(",").map((r) => r.trim().toLowerCase());
+    } else if (Array.isArray(currentUserRoles)) {
+      userRolesArray = currentUserRoles.map((r) => r.toLowerCase());
+    }
+  }
+  return nodes.map((node) => {
+    var _a;
+    const filteredNode = __spreadValues({}, node);
+    const nodeUserRole = ((_a = node.dataObject) == null ? void 0 : _a[userroleKey]) || (node == null ? void 0 : node[userroleKey]);
+    if (!nodeUserRole) {
+      if (filteredNode.children && Array.isArray(filteredNode.children)) {
+        filteredNode.children = filterMenuNodesByRole(
+          filteredNode.children,
+          currentUserRoles,
+          userroleKey
+        );
+      }
+      return filteredNode;
+    }
+    if (!currentUserRoles || userRolesArray.length === 0) {
+      return null;
+    }
+    const allowedRoles = nodeUserRole.split(",").map((r) => r.trim().toLowerCase());
+    const hasAccess = userRolesArray.some((userRole) => allowedRoles.includes(userRole));
+    if (!hasAccess) {
+      return null;
+    }
+    if (filteredNode.children && Array.isArray(filteredNode.children)) {
+      filteredNode.children = filterMenuNodesByRole(
+        filteredNode.children,
+        currentUserRoles,
+        userroleKey
+      );
+    }
+    return filteredNode;
+  }).filter((node) => node !== null);
+}
+export {
+  filterMenuNodesByRole
+};

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

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

package/components/navigation/popover/index.js

@@ -0,0 +1,311 @@
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, Suspense, useCallback, useLayoutEffect } from "react";
+import clsx from "clsx";
+import debounce from "lodash-es/debounce";
+import Popover from "@mui/material/Popover";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmAnchor } from "../../basic/anchor";
+import { DEFAULT_PROPS } from "./props";
+const WmPopover = (Props) => {
+  var _a, _b, _c;
+  const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [placement, setPlacement] = useState(props.popoverplacement || "bottom");
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const popoverContentRef = useRef(null);
+  const popoverActionsRef = useRef(null);
+  const loadedRef = useRef(false);
+  const [open, setOpen] = useState(false);
+  const isOpen = Boolean(anchorEl);
+  const openPopover = useCallback(() => {
+    var _a2;
+    if (!anchorRef.current) {
+      return;
+    }
+    calculatePlacement();
+    setAnchorEl(anchorRef.current);
+    setIsDialogOpen(true);
+    (_a2 = props == null ? void 0 : props.onShow) == null ? void 0 : _a2.call(props, {}, __spreadValues({ isOpen: true }, props));
+  }, []);
+  const closePopover = useCallback(() => {
+    var _a2;
+    if (!isOpen) {
+      return;
+    }
+    setAnchorEl(null);
+    setIsDialogOpen(false);
+    (_a2 = props == null ? void 0 : props.onHide) == null ? void 0 : _a2.call(props, {}, __spreadValues({ isOpen: false }, props));
+  }, [isOpen]);
+  const togglePopover = useCallback(() => {
+    if (isOpen) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  }, [isOpen, openPopover, closePopover]);
+  const apiRef = useRef({
+    open: openPopover,
+    close: closePopover,
+    toggle: togglePopover,
+    isOpen
+  });
+  apiRef.current = { open: openPopover, close: closePopover, toggle: togglePopover, isOpen };
+  useEffect(() => {
+    const { listener, name } = props;
+    if ((listener == null ? void 0 : listener.onChange) && name) {
+      listener.onChange(name, {
+        open: () => apiRef.current.open(),
+        close: () => apiRef.current.close(),
+        toggle: () => apiRef.current.toggle(),
+        isOpen
+      });
+    }
+  }, []);
+  function handleLoad(widget) {
+    if (props.onLoad && !loadedRef.current) {
+      loadedRef.current = true;
+      props.onLoad(widget);
+    }
+  }
+  useEffect(() => {
+    if (!isOpen || props.content) {
+      return;
+    }
+    handleLoad(__spreadValues({ isOpen }, props));
+  }, [isOpen]);
+  const calculatePlacement = useCallback(() => {
+    if (!anchorRef.current) return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    const viewHeight = window.innerHeight;
+    const viewWidth = window.innerWidth;
+    const height = parseInt(props.popoverheight);
+    const 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");
+  }, [props.popoverplacement, props.popoverheight, props.popoverwidth]);
+  useLayoutEffect(() => {
+    var _a2, _b2;
+    if (!isOpen) return;
+    (_b2 = (_a2 = popoverActionsRef.current) == null ? void 0 : _a2.updatePosition) == null ? void 0 : _b2.call(_a2);
+  }, [props.children]);
+  useEffect(() => {
+    if (!isOpen || props.autoclose === "disabled") return;
+    const handleOutsideClick = (event) => {
+      var _a2, _b2, _c2;
+      const target = event.target;
+      const isInsideAnchor = (_a2 = anchorRef.current) == null ? void 0 : _a2.contains(target);
+      const isInsidePopover = (_b2 = popoverContentRef.current) == null ? void 0 : _b2.contains(target);
+      if (!isInsideAnchor && !isInsidePopover) {
+        setAnchorEl(null);
+        setIsDialogOpen(false);
+        (_c2 = props == null ? void 0 : props.onHide) == null ? void 0 : _c2.call(props, event, __spreadValues({ isOpen: false }, props));
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, [isOpen, props.autoclose]);
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setAnchorEl(anchorRef.current);
+    } else if (event.key === "Escape") {
+      setAnchorEl(null);
+    }
+  };
+  const handleClick = (event) => {
+    var _a2, _b2;
+    event.preventDefault();
+    event.stopPropagation();
+    const widget = __spreadValues({ isOpen }, props);
+    delete widget.listener;
+    if (!isOpen) {
+      loadedRef.current = false;
+    }
+    if (anchorEl) {
+      if (isDialogOpen) {
+        setIsDialogOpen(false);
+        setAnchorEl(null);
+        (_a2 = props == null ? void 0 : props.onHide) == null ? void 0 : _a2.call(props, event.nativeEvent, widget);
+        return;
+      }
+      debounce(() => {
+        var _a3;
+        setAnchorEl(null);
+        (_a3 = props == null ? void 0 : props.onHide) == null ? void 0 : _a3.call(props, event.nativeEvent, widget);
+      }, 500);
+    } else {
+      if (open) {
+        setOpen(false);
+        return;
+      }
+      calculatePlacement();
+      setAnchorEl(event.currentTarget);
+      (_b2 = props == null ? void 0 : props.onShow) == null ? void 0 : _b2.call(props, event.nativeEvent, widget);
+      setIsDialogOpen(true);
+    }
+  };
+  const anchorOrigin = {
+    vertical: placement === "top" ? "top" : placement === "bottom" ? "bottom" : "center",
+    horizontal: placement === "left" ? "left" : placement === "right" ? "right" : "center"
+  };
+  const transformOrigin = {
+    vertical: placement === "top" ? "bottom" : placement === "bottom" ? "top" : "center",
+    horizontal: placement === "left" ? "right" : placement === "right" ? "left" : "center"
+  };
+  function handleClose(event, reason) {
+    var _a2, _b2, _c2;
+    if (props.autoclose === "disabled") {
+      return;
+    } else if (props.autoclose === "always") {
+      setAnchorEl(null);
+      (_a2 = props == null ? void 0 : props.onHide) == null ? void 0 : _a2.call(props, event.nativeEvent, __spreadValues({}, props));
+      return;
+    } else if (props.autoclose === "outsideClick") {
+      if (reason === "backdropClick") {
+        setAnchorEl(null);
+        (_b2 = props == null ? void 0 : props.onHide) == null ? void 0 : _b2.call(props, event.nativeEvent, __spreadValues({}, props));
+      }
+      return;
+    }
+    setAnchorEl(null);
+    (_c2 = props == null ? void 0 : props.onHide) == null ? void 0 : _c2.call(props, event.nativeEvent, __spreadValues({}, props));
+  }
+  const arrowStyles = useMemo(() => {
+    if (!anchorRef.current) return {};
+    return __spreadProps(__spreadValues(__spreadValues({}, placement === "top" && {
+      left: "calc(50% - 10px)"
+    }), placement === "bottom" && {
+      left: "calc(50% - 10px)"
+    }), {
+      marginLeft: "-4px"
+    });
+  }, [placement]);
+  const popoverHeight = ((_a = props == null ? void 0 : props.popoverheight) == null ? void 0 : _a.includes("px")) ? props == null ? void 0 : props.popoverheight : `${props == null ? void 0 : props.popoverheight}px`;
+  const popoverWidth = ((_b = props == null ? void 0 : props.popoverwidth) == null ? void 0 : _b.includes("px")) ? props == null ? void 0 : props.popoverwidth : `${props == null ? void 0 : props.popoverwidth}px`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        className: clsx({
+          "disable-popover": props.disabled,
+          "app-popover-wrapper": true
+        }),
+        hidden: props.hidden
+      }, { name: props.name }), {
+        children: /* @__PURE__ */ jsx(
+          WmAnchor,
+          {
+            hint: props.hint || props.name,
+            ref: anchorRef,
+            tabindex: (_c = props.tabindex) != null ? _c : 0,
+            className: clsx(props.className, {
+              "disable-popover": props.disabled
+            }),
+            styles: props.styles,
+            onClick: (event) => handleClick(event),
+            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
+          },
+          props.name
+        )
+      })
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        action: popoverActionsRef,
+        hidden: props.hidden,
+        open: isOpen,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin,
+        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: clsx(
+              placement,
+              props.className,
+              "app-popover in popover",
+              props.contentanimation && `animated ${props.contentanimation}`,
+              `popover-${placement}`,
+              `bs-popover-${placement}`,
+              "bs3 popover-logout-popover"
+            )
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx("popover-arrow arrow", props.popoverarrow === false && "hidden"),
+              style: arrowStyles
+            }
+          ),
+          props.title && /* @__PURE__ */ jsx("div", { className: "popover-title popover-header", children: props.title }),
+          /* @__PURE__ */ jsx("div", { className: "popover-content popover-body", children: props.render && props.content ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: props.render(props, () => handleLoad(__spreadValues({}, props))) }) : props.children })
+        ]
+      }
+    )
+  ] });
+};
+var popover_default = withBaseWrapper(WmPopover);
+export {
+  WmPopover,
+  popover_default as default
+};

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,10 @@
+const DEFAULT_PROPS = {
+  contentsource: "partial",
+  interaction: "click",
+  popoverplacement: "bottom",
+  popoverarrow: true,
+  autoclose: "outsideClick"
+};
+export {
+  DEFAULT_PROPS
+};

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;

package/components/page/content/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const DEFAULT_CLASS = "app-content clearfix";
+function WmContent(props) {
+  const { styles, children, className } = props;
+  return /* @__PURE__ */ jsx("main", { style: styles, className: clsx(DEFAULT_CLASS, className), children: /* @__PURE__ */ jsx("div", { className: "app-content-row", children }) });
+}
+WmContent.displayName = "WmContent";
+var content_default = WmContent;
+export {
+  content_default as default
+};

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

@@ -0,0 +1,6 @@
+import { BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * WmContent has no additional props beyond BaseProps.
+ * Combined props for the WmContent component.
+ */
+export type WmContentProps = BaseProps;

package/components/page/error-boundary/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ErrorFallbackProps } from "./props";
+declare const ErrorFallback: React.FC<ErrorFallbackProps>;
+/**
+ * The ErrorFallback component displays a user-friendly error UI when a React error boundary catches an error.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-error-boundary--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-error-boundary--docs#tab-overview)
+ *
+ * @param props - {@link ErrorFallbackProps}
+ */
+export default ErrorFallback;