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

package/components/auth/RoleAuthGuard.js

@@ -0,0 +1,66 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useAppSelector } from "../../store";
+import { useAuth } from "../../hooks/useAuth";
+import { getActiveRoutingBasePath } from "../../core/constants";
+import { useAppContext } from "../../context/AppContext";
+function getPageNameFromPathname(pathname) {
+  const segments = pathname.split("/").filter(Boolean);
+  const routingBase = getActiveRoutingBasePath();
+  const baseIndex = segments.indexOf(routingBase);
+  if (baseIndex >= 0) {
+    return segments[baseIndex + 1] || "Main";
+  }
+  return segments[segments.length - 1] || "Main";
+}
+function RoleAuthGuard({ children }) {
+  const pathname = usePathname();
+  const { loggedInUser } = useAuth();
+  const isSecurityEnabled = useAppSelector(
+    (state) => {
+      var _a;
+      return (_a = state.auth.securityConfig) == null ? void 0 : _a.isSecurityEnabled;
+    }
+  );
+  const pages = useAppSelector((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.info) == null ? void 0 : _a.appConfig) == null ? void 0 : _b.pages) || [];
+  });
+  const i18n = useAppSelector((state) => state.i18n);
+  const appContext = useAppContext();
+  const [hasAccess, setHasAccess] = useState(false);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (isSecurityEnabled === void 0) {
+      setHasAccess(true);
+      return;
+    }
+    if (!isSecurityEnabled) {
+      setHasAccess(true);
+      return;
+    }
+    const pageName = getPageNameFromPathname(pathname || "");
+    const userRoles = (loggedInUser == null ? void 0 : loggedInUser.roles) || [];
+    const allowedRoles = ((_a = pages.find((page) => page.name === pageName)) == null ? void 0 : _a.allowedRoles) || [];
+    if (allowedRoles.length === 0) {
+      setHasAccess(true);
+      return;
+    }
+    const pageAccess = userRoles.some((role) => allowedRoles.includes(role));
+    if (!pageAccess) {
+      appContext.notifyApp(((_c = (_b = i18n == null ? void 0 : i18n.appLocale) == null ? void 0 : _b.LABELS) == null ? void 0 : _c.ACCESS_DENIED) || "Access Denied", "Error");
+      setHasAccess(false);
+      return;
+    }
+    setHasAccess(true);
+  }, [pathname, pages, isSecurityEnabled, loggedInUser == null ? void 0 : loggedInUser.roles, appContext.notifyApp]);
+  if (!hasAccess) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  RoleAuthGuard as default
+};

package/components/basic/anchor/index.d.ts

@@ -0,0 +1,86 @@
+import { WmAnchorProps } from "./props";
+export declare const WmAnchor: {
+    (props: WmAnchorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmAnchor component is used to create hyperlinks with optional icons,
+ * badges, and support for navigation expressions.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-anchor--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-anchor--docs)
+ *
+ * @param props - {@link WmAnchorProps}
+ */
+declare const _default: import("react").ComponentType<{
+    caption: string;
+    iconclass?: string;
+    encodeurl?: string;
+    hyperlink?: string;
+    iconheight?: string;
+    iconwidth?: string;
+    iconurl?: string;
+    iconmargin?: string;
+    iconposition?: import("./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?: 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;
+    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/basic/anchor/index.js

@@ -0,0 +1,280 @@
+"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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useEffect, useState } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Badge from "@mui/material/Badge";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
+import { removeInvalidAttributes } from "../../../utils/attr";
+import { getCurrentPath, getGoToPageNameFromClickHandler } from "../../../core/util/utils";
+const DEFAULT_CLASS = "app-anchor";
+const getCurrentPageName = (pathname) => {
+  const segments = pathname.split("/").filter(Boolean);
+  return segments[segments.length - 1];
+};
+const WmAnchor = (props) => {
+  var _b;
+  const _a = props, {
+    ref,
+    caption = "Link",
+    iconclass,
+    styles,
+    className,
+    iconheight,
+    iconwidth,
+    iconmargin,
+    iconurl,
+    iconposition = "left",
+    badgevalue,
+    listener,
+    hyperlink,
+    encodeurl,
+    onClick,
+    shortcutkey,
+    arialabel,
+    target,
+    itemLink,
+    href: _ignoredHref
+  } = _a, restProps = __objRest(_a, [
+    "ref",
+    "caption",
+    "iconclass",
+    "styles",
+    "className",
+    "iconheight",
+    "iconwidth",
+    "iconmargin",
+    "iconurl",
+    "iconposition",
+    "badgevalue",
+    "listener",
+    "hyperlink",
+    "encodeurl",
+    "onClick",
+    "shortcutkey",
+    "arialabel",
+    "target",
+    "itemLink",
+    "href"
+  ]);
+  const path = getCurrentPath();
+  const [isActive, setIsActive] = useState(false);
+  const navigationInfo = useMemo(() => {
+    if (!onClick) return { hasGoToPageExpr: false, goToPageName: null, isCurrentPage: false };
+    const pageName = getGoToPageNameFromClickHandler(onClick);
+    if (!pageName) {
+      return { hasGoToPageExpr: false, goToPageName: null, isCurrentPage: false };
+    }
+    const currentPageName = getCurrentPageName(path);
+    return {
+      hasGoToPageExpr: true,
+      goToPageName: pageName,
+      isCurrentPage: pageName === currentPageName
+    };
+  }, [onClick, path]);
+  const processedHyperlink = useMemo(() => {
+    if (!hyperlink) return "#";
+    let processedLink = hyperlink;
+    if (encodeurl === "true") {
+      processedLink = encodeURIComponent(processedLink);
+    }
+    if (processedLink.startsWith("www.")) {
+      processedLink = `//${processedLink}`;
+    }
+    return processedLink;
+  }, [hyperlink, encodeurl]);
+  const doesHyperlinkMatchCurrentPath = useMemo(() => {
+    if (!hyperlink) return false;
+    let processedLink = hyperlink;
+    if (processedLink.startsWith("www.")) {
+      processedLink = `//${processedLink}`;
+    }
+    try {
+      if (processedLink.startsWith("/")) {
+        return path === processedLink;
+      }
+      const url = new URL(processedLink, window.location.origin);
+      return path === url.pathname;
+    } catch (e) {
+      return path.endsWith(processedLink);
+    }
+  }, [hyperlink, path]);
+  useEffect(() => {
+    const activeByHyperlink = doesHyperlinkMatchCurrentPath;
+    const activeByNavigationExpr = navigationInfo.isCurrentPage;
+    setIsActive(activeByHyperlink || activeByNavigationExpr);
+  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage, itemLink]);
+  const computedHref = useMemo(() => {
+    if (!hyperlink) {
+      return "javascript:void(0)";
+    }
+    return processedHyperlink;
+  }, [hyperlink, processedHyperlink]);
+  const anchorCssVars = useMemo(() => {
+    const vars = {
+      "--wm-anchor-icon-margin": iconmargin || "0 4"
+    };
+    if (iconheight) vars["--wm-anchor-icon-height"] = iconheight;
+    if (iconwidth) vars["--wm-anchor-icon-width"] = iconwidth;
+    return vars;
+  }, [iconheight, iconwidth, iconmargin]);
+  const handleClick = (e) => {
+    if (!hyperlink || navigationInfo.hasGoToPageExpr) {
+      e.preventDefault();
+    }
+    if (onClick) {
+      onClick(e, props);
+    }
+  };
+  function handleMouseEnter(event) {
+    var _a2;
+    (_a2 = props.onMouseEnter) == null ? void 0 : _a2.call(props, event, props);
+  }
+  function handleMouseLeave(event) {
+    var _a2;
+    (_a2 = props.onMouseLeave) == null ? void 0 : _a2.call(props, event, props);
+  }
+  function handleDoubleClick(event) {
+    var _a2;
+    (_a2 = props.onDoubleClick) == null ? void 0 : _a2.call(props, event, props);
+  }
+  function handleFocus(event) {
+    var _a2;
+    (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, event, props);
+  }
+  function handleBlur(event) {
+    var _a2;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, event, props);
+  }
+  const handleContextMenu = (e) => {
+    if (!hyperlink) {
+      e.preventDefault();
+    }
+  };
+  const domEvents = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props.onMouseEnter && { onMouseEnter: handleMouseEnter }), props.onMouseLeave && { onMouseLeave: handleMouseLeave }), props.onDoubleClick && { onDoubleClick: handleDoubleClick }), props.onFocus && { onFocus: handleFocus }), props.onBlur && { onBlur: handleBlur }), {
+    // Always attach onClick to ensure preventDefault is called when there's no hyperlink
+    onClick: handleClick
+  });
+  return /* @__PURE__ */ jsxs(
+    Link,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      href: computedHref
+    }, domEvents), {
+      style: __spreadValues(__spreadValues({}, anchorCssVars), styles),
+      caption,
+      role: "link",
+      tabIndex: props.tabindex,
+      className: clsx(DEFAULT_CLASS, "wm-anchor-link", {
+        [className || ""]: Boolean(className),
+        active: isActive,
+        "wm-anchor-icon-left": iconposition === "left",
+        "wm-anchor-icon-top": iconposition === "top",
+        "wm-anchor-icon-right": iconposition === "right"
+      }),
+      onContextMenu: handleContextMenu,
+      accessKey: shortcutkey,
+      "aria-label": arialabel || (badgevalue && caption ? `${caption} ${badgevalue}` : caption) || null,
+      "aria-current": isActive ? "page" : void 0,
+      target,
+      title: props.hint,
+      "data-identifier": "anchor"
+    }), removeInvalidAttributes(restProps)), {
+      name: props.name,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          WmAppIcon,
+          {
+            iconclass,
+            iconurl,
+            prefabName: props.prefabName,
+            defaultClasses: iconurl ? "anchor-image-icon wm-anchor-icon-media" : "wm-anchor-icon-media",
+            iconStyle: {
+              width: iconwidth,
+              height: iconheight,
+              margin: iconmargin,
+              fontSize: iconwidth
+            },
+            alt: "Anchor icon"
+          }
+        ),
+        caption && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (iconclass || iconurl) && /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: `${caption} ${(_b = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _b.LABEL_ICON}` }),
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "anchor-caption", children: caption })
+        ] }),
+        badgevalue && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            component: "span",
+            title: String(badgevalue),
+            badgeContent: badgevalue,
+            className: "badge pull-right wm-anchor-badge",
+            slotProps: {
+              badge: { className: "wm-anchor-badge-mark" }
+            }
+          }
+        )
+      ]
+    })
+  );
+};
+WmAnchor.displayName = "WmAnchor";
+const WmAnchorMemo = memo(WmAnchor, (prev, next) => {
+  const keysToCompare = [
+    "caption",
+    "iconclass",
+    "iconheight",
+    "iconwidth",
+    "iconurl",
+    "iconmargin",
+    "hyperlink",
+    "iconposition",
+    "badgevalue",
+    "encodeurl",
+    "className",
+    "styles",
+    "onClick",
+    "arialabel",
+    "target",
+    "shortcutkey"
+  ];
+  return keysToCompare.every((key) => prev[key] === next[key]);
+});
+var anchor_default = withBaseWrapper(WmAnchorMemo);
+export {
+  WmAnchor,
+  anchor_default as default
+};

package/components/basic/anchor/props.d.ts

@@ -0,0 +1,76 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Valid icon positions for the Anchor component.
+ */
+export type IconPositionType = "left" | "top" | "right";
+/**
+ * Base props specific to the WmAnchor component.
+ */
+export interface AnchorProps {
+    /**
+     * The text to be displayed as the anchor caption.
+     * @default "Link"
+     */
+    caption: string;
+    /**
+     * The CSS class for the icon to be displayed.
+     */
+    iconclass?: string;
+    /**
+     * If true, the hyperlink URL will be encoded.
+     */
+    encodeurl?: string;
+    /**
+     * The URL to navigate to when the anchor is clicked.
+     */
+    hyperlink?: string;
+    /**
+     * The height of the icon.
+     */
+    iconheight?: string;
+    /**
+     * The width of the icon.
+     */
+    iconwidth?: string;
+    /**
+     * The URL of the icon image.
+     */
+    iconurl?: string;
+    /**
+     * The margin around the icon.
+     * @default "0 4"
+     */
+    iconmargin?: string;
+    /**
+     * The position of the icon relative to the caption.
+     * @default "left"
+     */
+    iconposition?: IconPositionType;
+    /**
+     * The value to be displayed in a badge next to the anchor.
+     */
+    badgevalue?: string | number;
+    /**
+     * The keyboard shortcut for the anchor.
+     */
+    shortcutkey?: string;
+    /**
+     * The target attribute for the anchor (e.g., '_blank', '_self').
+     */
+    target?: string;
+    id?: string;
+    /**
+     * Internal prop for linked items in lists.
+     */
+    itemLink?: string;
+    /**
+     * Prop to allow overriding the href, though it's typically computed internally.
+     */
+    href?: string;
+    variant?: "standard";
+    action?: string;
+}
+/**
+ * Combined props for the WmAnchor component, including base WaveMaker props.
+ */
+export type WmAnchorProps = Prettify<AnchorProps & BaseProps>;

package/components/basic/audio/index.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { WmAudioProps } from "./props";
+export declare const WmAudio: React.MemoExoticComponent<(props: WmAudioProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmAudio component is used to play audio files within the application.
+ * It supports various formats, preloading options, and playback controls.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-audio--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-audio--docs)
+ *
+ * @param props - {@link WmAudioProps}
+ */
+declare const _default: React.ComponentType<{
+    mp3format: string;
+    muted?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    audiopreload?: "auto" | "metadata" | "none";
+    audiosupportmessage?: string;
+    autoplay?: boolean;
+    prefabName?: string;
+    id?: 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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;