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

package/components/advanced/marquee/index.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+/**
+ * The WmMarquee component is used to create a scrolling text or content area.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/advanced-marquee--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/advanced-marquee--docs)
+ *
+ * @param props - {@link WmMarqueeProps}
+ */
+declare const _default: React.ComponentType<{
+    direction?: "up" | "down" | "left" | "right";
+    scrollamount?: number;
+    scrolldelay?: number;
+    hyperlink?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    encodeurl?: "true" | "false";
+    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;
+    prefabName?: string;
+}>;
+export default _default;

package/components/advanced/marquee/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["direction", "scrollamount", "scrolldelay", "className", "styles", "children", "id"];
+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 DEFAULT_CLASS = "app-marquee app-container";
+var WmMarquee = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$direction = props.direction,
+    direction = _props$direction === void 0 ? "left" : _props$direction,
+    _props$scrollamount = props.scrollamount,
+    scrollamount = _props$scrollamount === void 0 ? 6 : _props$scrollamount,
+    _props$scrolldelay = props.scrolldelay,
+    scrolldelay = _props$scrolldelay === void 0 ? 85 : _props$scrolldelay,
+    className = props.className,
+    styles = props.styles,
+    children = props.children,
+    id = props.id,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // State to track if animation is paused on hover
+  var _useState = (0, _react.useState)(false),
+    isPaused = _useState[0],
+    setIsPaused = _useState[1];
+
+  // Generate unique animation name for this instance
+  var animationName = (0, _react.useMemo)(function () {
+    return "marquee-".concat(direction, "-").concat(Math.random().toString(36).substr(2, 9));
+  }, [direction]);
+
+  // Calculate animation duration based on scrollamount and scrolldelay
+  var animationDuration = (0, _react.useMemo)(function () {
+    var baseSpeed = 10;
+    var delayFactor = scrolldelay / 85;
+    var speedFactor = scrollamount / 6;
+    return "".concat(baseSpeed * delayFactor / speedFactor, "s");
+  }, [scrollamount, scrolldelay]);
+  var animationCSS = (0, _react.useMemo)(function () {
+    var animations = {
+      left: {
+        "0%": {
+          transform: "translateX(100%)"
+        },
+        "100%": {
+          transform: "translateX(-100%)"
+        }
+      },
+      right: {
+        "0%": {
+          transform: "translateX(-100%)"
+        },
+        "100%": {
+          transform: "translateX(100%)"
+        }
+      },
+      up: {
+        "0%": {
+          transform: "translateY(100%)"
+        },
+        "100%": {
+          transform: "translateY(-100%)"
+        }
+      },
+      down: {
+        "0%": {
+          transform: "translateY(-100%)"
+        },
+        "100%": {
+          transform: "translateY(100%)"
+        }
+      }
+    };
+    return animations[direction];
+  }, [direction]);
+  var containerStyles = (0, _react.useMemo)(function () {
+    return _objectSpread({
+      overflow: "hidden",
+      whiteSpace: direction === "left" || direction === "right" ? "nowrap" : "normal",
+      height: direction === "up" || direction === "down" ? "100%" : "auto",
+      position: "relative"
+    }, styles);
+  }, [direction, styles]);
+
+  // Content styles with animation
+  var contentStyles = (0, _react.useMemo)(function () {
+    return {
+      display: "inline-block",
+      animationName: "".concat(animationName),
+      animationDuration: animationDuration,
+      animationTimingFunction: "linear",
+      animationIterationCount: "infinite",
+      animationDirection: "normal",
+      animationFillMode: "none",
+      animationPlayState: isPaused ? "paused" : "running",
+      width: direction === "up" || direction === "down" ? "100%" : "auto"
+    };
+  }, [animationName, animationDuration, direction, isPaused]);
+
+  // Event handlers
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var _props$onClick;
+    props === null || props === void 0 || (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, props);
+  }, [props]);
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    var _props$onMouseEnter;
+    setIsPaused(true);
+    props === null || props === void 0 || (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+  }, [props]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    var _props$onMouseLeave;
+    setIsPaused(false);
+    props === null || props === void 0 || (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 || _props$onMouseLeave.call(props, event, props);
+  }, [props]);
+  return __jsx(_react["default"].Fragment, null, __jsx("style", null, "\n            @keyframes ".concat(animationName, " {\n              ").concat(Object.entries(animationCSS).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return "".concat(key, " { ").concat(Object.entries(value).map(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+        prop = _ref4[0],
+        val = _ref4[1];
+      return "".concat(prop, ": ").concat(val);
+    }).join("; "), " }");
+  }).join(" "), "\n            }\n          ")), __jsx(_Box["default"], (0, _extends2["default"])({
+    component: "div",
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    sx: containerStyles,
+    id: id,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, (0, _attr.removeInvalidAttributes)(restProps)), __jsx(_Box["default"], {
+    component: "div",
+    sx: contentStyles
+  }, children)));
+}, function (prevProps, nextProps) {
+  var keys = ["direction", "scrollamount", "scrolldelay", "className", "children"];
+  return keys.every(function (key) {
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmMarquee.displayName = "WmMarquee";
+
+/**
+ * The WmMarquee component is used to create a scrolling text or content area.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/advanced-marquee--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/advanced-marquee--docs)
+ *
+ * @param props - {@link WmMarqueeProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmMarquee);

package/components/advanced/marquee/props.d.ts

@@ -0,0 +1,32 @@
+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 MarqueeProps extends NavigationProps, AdvancedWidgetProps {
+    direction?: "up" | "down" | "left" | "right";
+    scrollamount?: number;
+    scrolldelay?: number;
+}
+export type WmMarqueeProps = Prettify<MarqueeProps & BaseProps>;
+export default WmMarqueeProps;

package/components/advanced/marquee/props.js

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

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

@@ -0,0 +1,83 @@
+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;
+}>;
+export default _default;

package/components/basic/anchor/index.js

@@ -0,0 +1,255 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmAnchor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
+var _image = _interopRequireDefault(require("next/image"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _utils = require("../../../core/util/utils");
+var _excluded = ["caption", "iconclass", "styles", "className", "iconheight", "iconwidth", "iconmargin", "iconurl", "iconposition", "badgevalue", "listener", "hyperlink", "encodeurl", "onClick", "shortcutkey", "arialabel", "target", "itemLink", "href"];
+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; }
+// Define regex outside component to avoid recreation on each render
+var GO_TO_PAGE_REGEX = /(?:\w+\?\.)?Actions(?:\?\.)?goToPage_(\w+)(?:\?\.)?invoke(?:\?\.)?\(\)/;
+var DEFAULT_CLASS = "app-anchor";
+var getCurrentPageName = function getCurrentPageName(pathname) {
+  var segments = pathname.split("/").filter(Boolean);
+  return segments[segments.length - 1];
+};
+var WmAnchor = exports.WmAnchor = function WmAnchor(props) {
+  var _listener$appLocale;
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? "Link" : _props$caption,
+    iconclass = props.iconclass,
+    styles = props.styles,
+    className = props.className,
+    iconheight = props.iconheight,
+    iconwidth = props.iconwidth,
+    iconmargin = props.iconmargin,
+    iconurl = props.iconurl,
+    _props$iconposition = props.iconposition,
+    iconposition = _props$iconposition === void 0 ? "left" : _props$iconposition,
+    badgevalue = props.badgevalue,
+    listener = props.listener,
+    hyperlink = props.hyperlink,
+    encodeurl = props.encodeurl,
+    onClick = props.onClick,
+    shortcutkey = props.shortcutkey,
+    arialabel = props.arialabel,
+    target = props.target,
+    itemLink = props.itemLink,
+    _ignoredHref = props.href,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var path = (0, _utils.getCurrentPath)();
+  var _useState = (0, _react.useState)(false),
+    isActive = _useState[0],
+    setIsActive = _useState[1];
+  var linkRef = (0, _react.useRef)(null);
+
+  // Extract navigation info from onClick
+  var navigationInfo = (0, _react.useMemo)(function () {
+    if (!onClick) return {
+      hasGoToPageExpr: false,
+      goToPageName: null,
+      isCurrentPage: false
+    };
+    var fnStr = onClick.toString();
+    var match = GO_TO_PAGE_REGEX.exec(fnStr);
+    if (!match) return {
+      hasGoToPageExpr: false,
+      goToPageName: null,
+      isCurrentPage: false
+    };
+    var pageName = match[1];
+    var currentPageName = getCurrentPageName(path);
+    return {
+      hasGoToPageExpr: true,
+      goToPageName: pageName,
+      isCurrentPage: pageName === currentPageName
+    };
+  }, [onClick, path]);
+
+  // Process hyperlink for href attribute
+  var processedHyperlink = (0, _react.useMemo)(function () {
+    if (!hyperlink) return "#";
+    var processedLink = hyperlink;
+    if (encodeurl === "true") {
+      processedLink = encodeURIComponent(processedLink);
+    }
+    if (processedLink.startsWith("www.")) {
+      processedLink = "//".concat(processedLink);
+    }
+    return processedLink;
+  }, [hyperlink, encodeurl]);
+
+  // Check if hyperlink matches current path
+  var doesHyperlinkMatchCurrentPath = (0, _react.useMemo)(function () {
+    if (!hyperlink) return false;
+    var processedLink = hyperlink;
+    if (processedLink.startsWith("www.")) {
+      processedLink = "//".concat(processedLink);
+    }
+    try {
+      if (processedLink.startsWith("/")) {
+        return path === processedLink;
+      }
+      var url = new URL(processedLink, window.location.origin);
+      return path === url.pathname;
+    } catch (_unused) {
+      return path.endsWith(processedLink);
+    }
+  }, [hyperlink, path]);
+
+  // Determine active state
+  (0, _react.useEffect)(function () {
+    var activeByHyperlink = doesHyperlinkMatchCurrentPath;
+    var activeByNavigationExpr = navigationInfo.isCurrentPage;
+    setIsActive(activeByHyperlink || activeByNavigationExpr);
+  }, [caption, path, doesHyperlinkMatchCurrentPath, navigationInfo.isCurrentPage, itemLink]);
+
+  // Compute href directly for use in render instead of useEffect
+  // This ensures the href is set correctly from the first render
+  var computedHref = (0, _react.useMemo)(function () {
+    if (!hyperlink) {
+      // Same as Angular: if no hyperlink, set javascript:void(0)
+      return "javascript:void(0)";
+    }
+    return processedHyperlink;
+  }, [hyperlink, processedHyperlink]);
+  var anchorCssVars = (0, _react.useMemo)(function () {
+    var 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]);
+  var handleClick = function handleClick(e) {
+    if (!hyperlink || navigationInfo.hasGoToPageExpr) {
+      e.preventDefault();
+    }
+    if (onClick) {
+      onClick(e, props);
+    }
+  };
+  function handleMouseEnter(event) {
+    var _props$onMouseEnter;
+    (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+  }
+  function handleMouseLeave(event) {
+    var _props$onMouseLeave;
+    (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 || _props$onMouseLeave.call(props, event, props);
+  }
+  function handleDoubleClick(event) {
+    var _props$onDoubleClick;
+    (_props$onDoubleClick = props.onDoubleClick) === null || _props$onDoubleClick === void 0 || _props$onDoubleClick.call(props, event, props);
+  }
+  function handleFocus(event) {
+    var _props$onFocus;
+    (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event, props);
+  }
+  function handleBlur(event) {
+    var _props$onBlur;
+    (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event, props);
+  }
+
+  // Disable context menu if no hyperlink
+  var handleContextMenu = function handleContextMenu(e) {
+    if (!hyperlink) {
+      e.preventDefault();
+    }
+  };
+  var domEvents = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, 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 __jsx(_Link["default"], (0, _extends2["default"])({
+    ref: linkRef,
+    href: computedHref
+  }, domEvents, {
+    style: _objectSpread(_objectSpread({}, anchorCssVars), styles),
+    caption: caption,
+    role: "link",
+    tabIndex: props.tabindex,
+    className: (0, _clsx2["default"])(DEFAULT_CLASS, "wm-anchor-link", (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, 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 ? "".concat(caption, " ").concat(badgevalue) : caption) || null,
+    "aria-current": isActive ? "page" : undefined,
+    target: target,
+    title: props.hint,
+    "data-identifier": "anchor"
+  }, (0, _attr.removeInvalidAttributes)(restProps), {
+    name: props.name
+  }), iconurl && __jsx(_image["default"], {
+    alt: "Image",
+    src: iconurl,
+    className: (0, _clsx2["default"])("anchor-image-icon", "wm-anchor-icon-media", iconclass),
+    "aria-hidden": "true",
+    width: parseInt(iconwidth || "24", 10),
+    height: parseInt(iconheight || "24", 10)
+  }), iconclass && __jsx("i", {
+    className: (0, _clsx2["default"])("app-icon", "wm-anchor-icon-media", iconclass),
+    "aria-hidden": "true"
+  }), caption && __jsx(_react["default"].Fragment, null, __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, "".concat(caption, " ").concat(listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx(_Box["default"], {
+    component: "span",
+    className: "anchor-caption"
+  }, caption)), badgevalue && __jsx(_Badge["default"], {
+    component: "span",
+    title: String(badgevalue),
+    badgeContent: badgevalue,
+    className: "badge pull-right wm-anchor-badge",
+    slotProps: {
+      badge: {
+        className: "wm-anchor-badge-mark"
+      }
+    }
+  }));
+};
+WmAnchor.displayName = "WmAnchor";
+var WmAnchorMemo = /*#__PURE__*/(0, _react.memo)(WmAnchor, function (prev, next) {
+  var keysToCompare = ["caption", "iconclass", "iconheight", "iconwidth", "iconurl", "iconmargin", "hyperlink", "iconposition", "badgevalue", "encodeurl", "className", "styles", "onClick", "arialabel", "target", "shortcutkey"];
+  return keysToCompare.every(function (key) {
+    return prev[key] === next[key];
+  });
+});
+
+/**
+ * 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}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmAnchorMemo);