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

package/components/basic/anchor/index.js

@@ -1,145 +1,156 @@
-"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);
+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, useRef } from "react";
+import clsx from "clsx";
+import Image from "next/image";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Badge from "@mui/material/Badge";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+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];
 };
-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);
+const WmAnchor = (props) => {
+  var _b;
+  const _a = props, {
+    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, [
+    "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 linkRef = useRef(null);
+  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]);
-
-  // Process hyperlink for href attribute
-  var processedHyperlink = (0, _react.useMemo)(function () {
+  const processedHyperlink = useMemo(() => {
     if (!hyperlink) return "#";
-    var processedLink = hyperlink;
+    let processedLink = hyperlink;
     if (encodeurl === "true") {
       processedLink = encodeURIComponent(processedLink);
     }
     if (processedLink.startsWith("www.")) {
-      processedLink = "//".concat(processedLink);
+      processedLink = `//${processedLink}`;
     }
     return processedLink;
   }, [hyperlink, encodeurl]);
-
-  // Check if hyperlink matches current path
-  var doesHyperlinkMatchCurrentPath = (0, _react.useMemo)(function () {
+  const doesHyperlinkMatchCurrentPath = useMemo(() => {
     if (!hyperlink) return false;
-    var processedLink = hyperlink;
+    let processedLink = hyperlink;
     if (processedLink.startsWith("www.")) {
-      processedLink = "//".concat(processedLink);
+      processedLink = `//${processedLink}`;
     }
     try {
       if (processedLink.startsWith("/")) {
         return path === processedLink;
       }
-      var url = new URL(processedLink, window.location.origin);
+      const url = new URL(processedLink, window.location.origin);
       return path === url.pathname;
-    } catch (_unused) {
+    } catch (e) {
       return path.endsWith(processedLink);
     }
   }, [hyperlink, path]);
-
-  // Determine active state
-  (0, _react.useEffect)(function () {
-    var activeByHyperlink = doesHyperlinkMatchCurrentPath;
-    var activeByNavigationExpr = navigationInfo.isCurrentPage;
+  useEffect(() => {
+    const activeByHyperlink = doesHyperlinkMatchCurrentPath;
+    const 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 () {
+  const computedHref = useMemo(() => {
     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 = {
+  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]);
-  var handleClick = function handleClick(e) {
+  const handleClick = (e) => {
     if (!hyperlink || navigationInfo.hasGoToPageExpr) {
       e.preventDefault();
     }
@@ -148,108 +159,117 @@ var WmAnchor = exports.WmAnchor = function WmAnchor(props) {
     }
   };
   function handleMouseEnter(event) {
-    var _props$onMouseEnter;
-    (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+    var _a2;
+    (_a2 = props.onMouseEnter) == null ? void 0 : _a2.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);
+    var _a2;
+    (_a2 = props.onMouseLeave) == null ? void 0 : _a2.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);
+    var _a2;
+    (_a2 = props.onDoubleClick) == null ? void 0 : _a2.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);
+    var _a2;
+    (_a2 = props.onFocus) == null ? void 0 : _a2.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);
+    var _a2;
+    (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, event, props);
   }
-
-  // Disable context menu if no hyperlink
-  var handleContextMenu = function handleContextMenu(e) {
+  const 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
-  }), {}, {
+  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 __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"
-      }
-    }
-  }));
+  return /* @__PURE__ */ jsxs(
+    Link,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+      ref: linkRef,
+      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,
+      children: [
+        iconurl && /* @__PURE__ */ jsx(
+          Image,
+          {
+            alt: "Image",
+            src: iconurl,
+            className: clsx("anchor-image-icon", "wm-anchor-icon-media", iconclass),
+            "aria-hidden": "true",
+            width: parseInt(iconwidth || "24", 10),
+            height: parseInt(iconheight || "24", 10)
+          }
+        ),
+        iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", "wm-anchor-icon-media", iconclass), "aria-hidden": "true" }),
+        caption && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__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";
-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];
-  });
+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]);
 });
-
-/**
- * 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);
+var anchor_default = withBaseWrapper(WmAnchorMemo);
+export {
+  WmAnchor,
+  anchor_default as default
+};

package/components/basic/anchor/props.js

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