@arcblock/ux 3.1.17 → 3.1.19

package/lib/NavMenu/products.js

@@ -1,31 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as $, useState as D, useEffect as k } from "react";
+import { useRef as D, useState as G, useEffect as S } from "react";
 import { Link as p } from "react-router-dom";
-import { useMemoizedFn as S, useCreation as G } from "ahooks";
-import { Box as w, useTheme as E } from "@mui/material";
-import B from "./sub-item-group.js";
-import { Item as T } from "./nav-menu.js";
-import { styled as I } from "../Theme/index.js";
-import { useNavMenuContext as F } from "./nav-menu-context.js";
-import { translate as L } from "../Locale/util.js";
+import { useMemoizedFn as v, useCreation as B } from "ahooks";
+import { Box as g, useTheme as E } from "@mui/material";
+import T from "./sub-item-group.js";
+import { Item as F } from "./nav-menu.js";
+import { styled as C } from "../Theme/index.js";
+import { useNavMenuContext as L } from "./nav-menu-context.js";
+import { translate as _ } from "../Locale/util.js";
 import { useLocaleContext as K } from "../Locale/context.js";
-import _ from "./images/nft-studio.svg.js";
-import M from "./images/creator-studio.svg.js";
-import O from "./images/blocklet-launcher.svg.js";
-import P from "./images/blocklet-store.svg.js";
-import R from "./images/web3-kit.svg.js";
-import H from "./images/blocklet-framework.svg.js";
-import z from "./images/abt-network.svg.js";
-import V from "./images/blocklet-server.svg.js";
-import j from "./images/OCAP.svg.js";
-import q from "./images/did.svg.js";
-import U from "./images/did-wallet.svg.js";
-import J from "./images/vc.svg.js";
-import Q from "./images/payment-kit.png";
-import X from "./images/aigne.svg.js";
-import v from "./images/arcsphere.svg.js";
-import Y from "./images/aistro.png";
-const A = 260, Z = {
+import M from "./images/nft-studio.svg.js";
+import O from "./images/creator-studio.svg.js";
+import P from "./images/blocklet-launcher.svg.js";
+import R from "./images/blocklet-store.svg.js";
+import H from "./images/web3-kit.svg.js";
+import z from "./images/blocklet-framework.svg.js";
+import V from "./images/abt-network.svg.js";
+import j from "./images/blocklet-server.svg.js";
+import q from "./images/OCAP.svg.js";
+import U from "./images/did.svg.js";
+import J from "./images/did-wallet.svg.js";
+import Q from "./images/vc.svg.js";
+import X from "./images/payment-kit.png";
+import Y from "./images/aigne.svg.js";
+import A from "./images/arcsphere.svg.js";
+import Z from "./images/aistro.png";
+const I = 260, ee = {
   en: {
     groups: {
       applications: "Applications",
@@ -218,9 +218,9 @@ const A = 260, Z = {
       }
     }
   }
-}, ee = I(w)`
+}, oe = C(g)`
   padding: 8px;
-  background: ${({ theme: r }) => r.palette.grey[100]};
+  background: ${({ theme: i }) => i.palette.grey[100]};
   border-radius: 8px;
 
   &.is-inline {
@@ -239,29 +239,29 @@ const A = 260, Z = {
   .MuiGrid-container + .MuiGrid-container {
     margin-top: 0px;
   }
-`, oe = I(w, { shouldForwardProp: (r) => r !== "maxContent" })(
-  ({ theme: r, maxContent: c }) => ({
+`, te = C(g, { shouldForwardProp: (i) => i !== "maxContent" })(
+  ({ theme: i, maxContent: c }) => ({
     display: "grid",
-    gap: r.spacing(1),
+    gap: i.spacing(1),
     gridTemplateColumns: `repeat(1, ${c}px)`,
-    [r.breakpoints.up("md")]: {
+    [i.breakpoints.up("md")]: {
       gridTemplateColumns: `repeat(2, ${c}px)`
     },
-    [r.breakpoints.up("lg")]: {
+    [i.breakpoints.up("lg")]: {
       gridTemplateColumns: `repeat(3, ${c}px)`
     }
   })
 );
-function C({ color: r = "black", backgroundColor: c = "transparent", children: l }) {
+function y({ color: i = "black", backgroundColor: c = "transparent", children: l }) {
   return /* @__PURE__ */ e(
-    w,
+    g,
     {
       component: "span",
       sx: {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        color: r,
+        color: i,
         backgroundColor: c,
         borderRadius: "4px"
       },
@@ -269,34 +269,35 @@ function C({ color: r = "black", backgroundColor: c = "transparent", children: l
     }
   );
 }
-function b({ color: r = "black", backgroundColor: c = "transparent" }) {
-  return /* @__PURE__ */ e(C, { color: r, backgroundColor: c, children: /* @__PURE__ */ e(q, { style: { width: "100%" } }) });
+function w({ color: i = "black", backgroundColor: c = "transparent" }) {
+  return /* @__PURE__ */ e(y, { color: i, backgroundColor: c, children: /* @__PURE__ */ e(U, { style: { width: "100%" } }) });
 }
-function d({ color: r = "black", backgroundColor: c = "transparent" }) {
-  return /* @__PURE__ */ e(C, { color: r, backgroundColor: c, children: /* @__PURE__ */ e(X, { style: { width: "100%", height: "100%" } }) });
+function d({ color: i = "black", backgroundColor: c = "transparent" }) {
+  return /* @__PURE__ */ e(y, { color: i, backgroundColor: c, children: /* @__PURE__ */ e(Y, { style: { width: "100%", height: "100%" } }) });
 }
-function t({ to: r, children: c, className: l = "", ...u }) {
-  return (() => {
-    try {
-      return new URL(r).origin !== window.location.origin;
-    } catch {
-      return !1;
-    }
-  })() ? /* @__PURE__ */ e(p, { to: r, target: "_blank", rel: "noreferrer noopener", className: l, ...u, children: c }) : /* @__PURE__ */ e(p, { to: r, className: l, ...u, children: c });
+const N = (i) => {
+  try {
+    return new URL(i).origin !== window.location.origin;
+  } catch {
+    return !1;
+  }
+};
+function t({ to: i, children: c, className: l = "", ...u }) {
+  return N(i) ? /* @__PURE__ */ e(p, { to: i, target: "_blank", rel: "noreferrer noopener", className: l, ...u, children: c }) : /* @__PURE__ */ e(p, { to: i, className: l, ...u, children: c });
 }
-function $e({ className: r = "", type: c, ...l }) {
-  const { mode: u } = F(), h = E(), { locale: i = "en" } = K() || {}, a = $(null), { palette: g } = h, o = S((n, s = {}) => L(Z, n, i, "en", s)), [y, N] = D(A), m = S(() => {
+function De({ className: i = "", type: c, ...l }) {
+  const { mode: u } = L(), f = E(), { locale: r = "en" } = K() || {}, a = D(null), { palette: k } = f, o = v((n, s = {}) => _(ee, n, r, "en", s)), [x, W] = G(I), m = v(() => {
     if (!a.current) return;
     const n = a.current.querySelectorAll(".navmenu-item__content");
-    let s = A;
-    n.forEach((W) => {
-      const f = W.getBoundingClientRect().width + 64;
-      f > s && (s = f);
-    }), N(s);
+    let s = I;
+    n.forEach((b) => {
+      const h = b.getBoundingClientRect().width + 64;
+      h > s && (s = h);
+    }), W(s);
   });
-  k(() => {
+  S(() => {
     m();
-  }, [h, i, c, m]), k(() => {
+  }, [f, r, c, m]), S(() => {
     if (!a.current) return;
     const n = a.current.querySelector(".navmenu-item__content");
     if (!n) return;
@@ -307,7 +308,7 @@ function $e({ className: r = "", type: c, ...l }) {
       s.disconnect();
     };
   }, [m]);
-  const x = G(() => {
+  const $ = B(() => {
     if (c === "ARCBLOCK")
       return [
         {
@@ -315,32 +316,32 @@ function $e({ className: r = "", type: c, ...l }) {
           label: o("groups.applications"),
           children: [
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.nftstudio.rocks/${i}`, children: "NFT Studio" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.nftstudio.rocks/${r}`, children: "NFT Studio" }),
               description: o("products.nftStudio.description"),
-              icon: /* @__PURE__ */ e(_, {})
+              icon: /* @__PURE__ */ e(M, {})
             },
             {
               label: /* @__PURE__ */ e(
                 p,
                 {
-                  to: `https://www.arcblock.io/content/collections/${i}/creator-studio`,
+                  to: `https://www.arcblock.io/content/collections/${r}/creator-studio`,
                   target: "_blank",
                   rel: "noreferrer noopener",
                   children: "Creator Studio"
                 }
               ),
               description: o("products.creatorStudio.description"),
-              icon: /* @__PURE__ */ e(M, {})
+              icon: /* @__PURE__ */ e(O, {})
             },
             {
               label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/", children: "AIGNE" }),
               description: o("products.aigne.description"),
-              icon: /* @__PURE__ */ e(d, { color: g.mode === "dark" ? "white" : "black" })
+              icon: /* @__PURE__ */ e(d, { color: k.mode === "dark" ? "white" : "black" })
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${i}`, children: "ArcSphere" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
               description: o("products.arcsphere.description"),
-              icon: /* @__PURE__ */ e(v, {})
+              icon: /* @__PURE__ */ e(A, {})
             }
           ]
         },
@@ -349,24 +350,24 @@ function $e({ className: r = "", type: c, ...l }) {
           label: o("groups.components"),
           children: [
             {
-              label: /* @__PURE__ */ e(t, { to: `https://launcher.arcblock.io/${i}`, children: "Blocklet Launcher" }),
+              label: /* @__PURE__ */ e(t, { to: `https://launcher.arcblock.io/${r}`, children: "Blocklet Launcher" }),
               description: o("products.blockletLauncher.description"),
-              icon: /* @__PURE__ */ e(O, {})
+              icon: /* @__PURE__ */ e(P, {})
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${i}/payment-kit`, children: "Payment Kit" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${r}/payment-kit`, children: "Payment Kit" }),
               description: o("products.paymentKit.description"),
-              icon: /* @__PURE__ */ e("img", { src: Q, alt: "Payment Kit" })
+              icon: /* @__PURE__ */ e("img", { src: X, alt: "Payment Kit" })
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://store.blocklet.dev/?locale=${i}`, children: "Blocklet Store" }),
+              label: /* @__PURE__ */ e(t, { to: `https://store.blocklet.dev/?locale=${r}`, children: "Blocklet Store" }),
               description: o("products.blockletStore.description"),
-              icon: /* @__PURE__ */ e(P, {})
+              icon: /* @__PURE__ */ e(R, {})
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.web3kit.rocks/${i}`, children: "Web3 Kit" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.web3kit.rocks/${r}`, children: "Web3 Kit" }),
               description: o("products.web3Kit.description"),
-              icon: /* @__PURE__ */ e(R, {})
+              icon: /* @__PURE__ */ e(H, {})
             }
           ]
         },
@@ -378,34 +379,34 @@ function $e({ className: r = "", type: c, ...l }) {
               label: /* @__PURE__ */ e(
                 p,
                 {
-                  to: `https://www.arcblock.io/content/collections/${i}/blocklet`,
+                  to: `https://www.arcblock.io/content/collections/${r}/blocklet`,
                   target: "_blank",
                   rel: "noreferrer noopener",
                   children: "Blocklet Framework"
                 }
               ),
               description: o("products.blockletFramework.description"),
-              icon: /* @__PURE__ */ e(H, {})
+              icon: /* @__PURE__ */ e(z, {})
             },
             {
-              label: /* @__PURE__ */ e(p, { to: `https://www.didspaces.com/${i}`, target: "_blank", rel: "noreferrer noopener", children: "DID Spaces" }),
+              label: /* @__PURE__ */ e(p, { to: `https://www.didspaces.com/${r}`, target: "_blank", rel: "noreferrer noopener", children: "DID Spaces" }),
               description: o("products.didSpaces.description"),
-              icon: /* @__PURE__ */ e(b, { color: "#876bf4" })
+              icon: /* @__PURE__ */ e(w, { color: "#876bf4" })
             },
             {
               label: /* @__PURE__ */ e(p, { to: "https://main.abtnetwork.io/", target: "_blank", rel: "noreferrer noopener", children: "ABT Network" }),
               description: o("products.abtNetwork.description"),
-              icon: /* @__PURE__ */ e(z, {})
+              icon: /* @__PURE__ */ e(V, {})
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${i}/blocklet-server`, children: "Blocklet Server" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${r}/blocklet-server`, children: "Blocklet Server" }),
               description: o("products.blockletServer.description"),
-              icon: /* @__PURE__ */ e(V, {})
+              icon: /* @__PURE__ */ e(j, {})
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${i}/ocap`, children: "ОСАР" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/ocap`, children: "ОСАР" }),
               description: o("products.ocap.description"),
-              icon: /* @__PURE__ */ e(j, {})
+              icon: /* @__PURE__ */ e(q, {})
             }
           ]
         },
@@ -414,37 +415,40 @@ function $e({ className: r = "", type: c, ...l }) {
           label: o("groups.identity"),
           children: [
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${i}/did`, children: "DID" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/did`, children: "DID" }),
               description: o("products.did.description"),
-              icon: /* @__PURE__ */ e(b, { color: "#5b96f3" })
+              icon: /* @__PURE__ */ e(w, { color: "#5b96f3" })
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.didwallet.io/${i}`, children: "DID Wallet" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.didwallet.io/${r}`, children: "DID Wallet" }),
               description: o("products.didWallet.description"),
-              icon: /* @__PURE__ */ e(U, {})
+              icon: /* @__PURE__ */ e(J, {})
             },
             {
-              label: /* @__PURE__ */ e(p, { to: `https://www.didnames.io/${i}`, target: "_blank", rel: "noreferrer noopener", children: "DID Names" }),
+              label: /* @__PURE__ */ e(p, { to: `https://www.didnames.io/${r}`, target: "_blank", rel: "noreferrer noopener", children: "DID Names" }),
               description: o("products.didNameService.description"),
-              icon: /* @__PURE__ */ e(b, { color: "#678ab0" })
+              icon: /* @__PURE__ */ e(w, { color: "#678ab0" })
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${i}/verifiable-credential`, children: "VC" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/verifiable-credential`, children: "VC" }),
               description: o("products.vc.description"),
-              icon: /* @__PURE__ */ e(J, {})
+              icon: /* @__PURE__ */ e(Q, {})
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.didconnect.io/${i}`, children: "DID Connect" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.didconnect.io/${r}`, children: "DID Connect" }),
               description: o("products.didConnect.description"),
-              icon: /* @__PURE__ */ e(b, { color: "#5bbec5" })
+              icon: /* @__PURE__ */ e(w, { color: "#5bbec5" })
             }
           ]
         }
       ];
     if (c === "AIGNE") {
       const n = {
-        target: "_blank",
-        rel: "noreferrer noopener"
+        onClick: (s) => {
+          s.preventDefault();
+          const b = s.currentTarget.href, h = N(b) ? "_blank" : "_self";
+          window.open(b, h);
+        }
       };
       return [
         {
@@ -452,14 +456,14 @@ function $e({ className: r = "", type: c, ...l }) {
           label: o("groups.applications"),
           children: [
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${i}`, children: "ArcSphere" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
               description: o("products.arcsphere.description"),
-              icon: /* @__PURE__ */ e(v, {})
+              icon: /* @__PURE__ */ e(A, {})
             },
             {
-              label: /* @__PURE__ */ e(t, { to: `https://www.aistro.io/${i}`, children: "Aistro" }),
+              label: /* @__PURE__ */ e(t, { to: `https://www.aistro.io/${r}`, children: "Aistro" }),
               description: o("products.aistro.description"),
-              icon: /* @__PURE__ */ e("img", { src: Y, alt: "Aistro" })
+              icon: /* @__PURE__ */ e("img", { src: Z, alt: "Aistro" })
             },
             {
               label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/code-smith", ...n, children: "AIGNE CodeSmith" }),
@@ -518,9 +522,9 @@ function $e({ className: r = "", type: c, ...l }) {
       ];
     }
     return [];
-  }, [o, i, g]);
-  return /* @__PURE__ */ e(ee, { ref: a, className: `nav-menu-products is-${u} ${r}`, ...l, children: x.map((n) => /* @__PURE__ */ e(B, { label: n.label, children: /* @__PURE__ */ e(oe, { maxContent: y, children: n.children.map((s) => /* @__PURE__ */ e(T, { variant: "panel", style: { padding: "8px" }, ...s })) }) }, n.label)) });
+  }, [o, r, k]);
+  return /* @__PURE__ */ e(oe, { ref: a, className: `nav-menu-products is-${u} ${i}`, ...l, children: $.map((n) => /* @__PURE__ */ e(T, { label: n.label, children: /* @__PURE__ */ e(te, { maxContent: x, children: n.children.map((s) => /* @__PURE__ */ e(F, { variant: "panel", style: { padding: "8px" }, ...s })) }) }, n.label)) });
 }
 export {
-  $e as default
+  De as default
 };

package/lib/NavMenu/style.js

@@ -23,7 +23,7 @@ const o = i("nav", {
     flexDirection: "column",
     alignItems: "stretch"
   }
-})), e = i("li", {
+})), a = i("li", {
   shouldForwardProp: (n) => n !== "$activeTextColor"
 })(({ $activeTextColor: n, theme: t }) => ({
   display: "flex",
@@ -146,6 +146,13 @@ const o = i("nav", {
     },
     "&.navmenu-item--active": {
       background: t.palette.action.hover
+    },
+    // Force clear hover state when not actually hovering
+    "&:not(:hover).navmenu-item--active": {
+      background: "transparent",
+      transition: t.transitions.create("background", {
+        duration: t.transitions.duration.standard
+      })
     }
   },
   // inline 布局中
@@ -156,7 +163,7 @@ const o = i("nav", {
     lineHeight: "48px",
     flexWrap: "wrap"
   }
-})), s = i(e)(({ theme: n }) => ({
+})), s = i(a)(({ theme: n }) => ({
   ".navmenu-item": {
     marginLeft: 0,
     overflow: "hidden"
@@ -220,7 +227,7 @@ const o = i("nav", {
       height: "48px"
     }
   }
-})), p = i("ul")(({ theme: n }) => ({
+})), d = i("ul")(({ theme: n }) => ({
   margin: 0,
   padding: "16px",
   borderRadius: "4px",
@@ -230,9 +237,9 @@ const o = i("nav", {
   }
 }));
 export {
-  e as NavMenuItem,
+  a as NavMenuItem,
   r as NavMenuRoot,
   o as NavMenuStyled,
   s as NavMenuSub,
-  p as NavMenuSubList
+  d as NavMenuSubList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.17",
+  "version": "3.1.19",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -66,16 +66,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "5b5551ce69cf45e2bed8cc06fbb3592020b7618c",
+  "gitHead": "49860d0bd0bb548087dcc6f49892fd4a88729d98",
   "dependencies": {
-    "@arcblock/bridge": "3.1.17",
+    "@arcblock/bridge": "3.1.19",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.17",
-    "@arcblock/nft-display": "3.1.17",
-    "@arcblock/react-hooks": "3.1.17",
+    "@arcblock/icons": "3.1.19",
+    "@arcblock/nft-display": "3.1.19",
+    "@arcblock/react-hooks": "3.1.19",
     "@blocklet/js-sdk": "^1.16.48",
-    "@blocklet/theme": "3.1.17",
+    "@blocklet/theme": "3.1.19",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/NavMenu/products.tsx

@@ -301,6 +301,16 @@ function AigneIcon({ color = 'black', backgroundColor = 'transparent' }: { color
   );
 }
 
+const isExternal = (to: string) => {
+  try {
+    const url = new URL(to);
+    return url.origin !== window.location.origin;
+  } catch {
+    // 如果 to 不是有效的 URL，则认为是内部链接
+    return false;
+  }
+};
+
 // 智能 Link 组件，根据 URL origin 决定是否在新标签页打开
 interface SmartLinkProps extends LinkProps {
   to: string;
@@ -308,17 +318,7 @@ interface SmartLinkProps extends LinkProps {
   className?: string;
 }
 function SmartLink({ to, children, className = '', ...restProps }: SmartLinkProps) {
-  const isExternal = () => {
-    try {
-      const url = new URL(to);
-      return url.origin !== window.location.origin;
-    } catch {
-      // 如果 to 不是有效的 URL，则认为是内部链接
-      return false;
-    }
-  };
-
-  if (isExternal()) {
+  if (isExternal(to)) {
     return (
       <Link to={to} target="_blank" rel="noreferrer noopener" className={className} {...restProps}>
         {children}
@@ -544,8 +544,13 @@ export default function Products({ className = '', type, ...rest }: ProductsProp
     if (type === 'AIGNE') {
       // aigne 相关页面，不能使用 react dom 自己的 navigate 跳转，因为没有对应的页面数据
       const aigneLinkBaseProps = {
-        target: '_blank',
-        rel: 'noreferrer noopener',
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+
+          const url = e.currentTarget.href;
+          const target = isExternal(url) ? '_blank' : '_self';
+          window.open(url, target);
+        },
       };
 
       return [

package/src/NavMenu/style.ts

@@ -162,6 +162,13 @@ export const NavMenuItem = styled('li', {
     '&.navmenu-item--active': {
       background: theme.palette.action.hover,
     },
+    // Force clear hover state when not actually hovering
+    '&:not(:hover).navmenu-item--active': {
+      background: 'transparent',
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.standard,
+      }),
+    },
   },
   // inline 布局中
   '&.navmenu-item--inline': {