@blocklet/ui-react 3.1.27 → 3.1.28

package/lib/Footer/links.js

@@ -1,39 +1,32 @@
-import { jsx as r, jsxs as m, Fragment as v } from "react/jsx-runtime";
-import { useState as N } from "react";
+import { jsx as r, jsxs as m, Fragment as N } from "react/jsx-runtime";
+import { useState as $ } from "react";
 import l from "prop-types";
-import { useCreation as $ } from "ahooks";
+import { useCreation as M } from "ahooks";
 import j from "lodash/isInteger";
 import I from "lodash/isString";
 import { styled as z } from "@arcblock/ux/lib/Theme";
 import c from "clsx";
-import { ExpandMore as M } from "@mui/icons-material";
-import C from "../Icon/index.js";
+import { ExpandMore as C } from "@mui/icons-material";
+import P from "../Icon/index.js";
 import A from "../hooks/use-mobile.js";
-import { splitNavColumns as E } from "../utils.js";
-function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
-  const [g, b] = N(-1), w = A({ key: "md" }), h = e.some((t) => t.items?.length), k = !w && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
+import { splitNavColumns as E, isMailProtocol as F } from "../utils.js";
+function R({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
+  const [g, b] = $(-1), w = A({ key: "md" }), h = e.some((t) => t.items?.length), x = !w && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
     let s = t;
     if (a)
       s = a({ label: t, link: o, props: n });
     else if (o && I(o)) {
-      const f = o.startsWith("http") || o.startsWith("//");
-      s = /* @__PURE__ */ r(
-        "a",
-        {
-          href: o,
-          "aria-label": `Footer link for ${t}`,
-          target: f ? "_blank" : "_self",
-          rel: f ? "noreferrer noopener" : void 0,
-          ...n,
-          children: t
-        }
-      );
-    }
-    return /* @__PURE__ */ m(v, { children: [
-      i && /* @__PURE__ */ r(C, { icon: i, size: 20, sx: { mr: 0.5 } }),
+      const f = o.startsWith("http") || o.startsWith("//"), v = F(o) ? {} : {
+        target: f ? "_blank" : "_self",
+        rel: f ? "noreferrer noopener" : void 0
+      };
+      s = /* @__PURE__ */ r("a", { href: o, "aria-label": `Footer link for ${t}`, ...v, ...n, children: t });
+    }
+    return /* @__PURE__ */ m(N, { children: [
+      i && /* @__PURE__ */ r(P, { icon: i, size: 20, sx: { mr: 0.5 } }),
       s
     ] });
-  }, y = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : k ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
+  }, y = M(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : x ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
     const { items: n } = i;
     return /* @__PURE__ */ m("div", { className: "footer-links-group", children: [
       /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(i) }),
@@ -59,7 +52,7 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
           /* @__PURE__ */ m("span", { className: "footer-links-item", children: [
             p(t),
             !!i?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
-              M,
+              C,
               {
                 style: {
                   transform: `rotate(${a ? 180 : 0}deg)`
@@ -72,21 +65,21 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
       },
       o
     );
-  }) : null, [e, d, k, g]);
+  }) : null, [e, d, x, g]);
   return e?.length ? /* @__PURE__ */ r(
-    R,
+    S,
     {
-      ...x,
-      className: c(x.className, {
+      ...k,
+      className: c(k.className, {
         "footer-links--grouped": h,
         "footer-links--flow": d,
-        "footer-links--columns": k
+        "footer-links--columns": x
       }),
       children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: y })
     }
   ) : null;
 }
-F.propTypes = {
+R.propTypes = {
   links: l.arrayOf(
     l.shape({
       label: l.string,
@@ -100,7 +93,7 @@ F.propTypes = {
   // 列布局
   columns: l.number.isRequired
 };
-const R = z("div")`
+const S = z("div")`
   overflow: hidden;
   color: ${({ theme: e }) => e.palette.text.secondary};
   .footer-links-inner {
@@ -251,5 +244,5 @@ const R = z("div")`
   }
 `;
 export {
-  F as default
+  R as default
 };

package/lib/blocklets.js

@@ -1,48 +1,50 @@
-import { mapRecursive as s, filterRecursive as a, isUrl as f } from "./utils.js";
-const g = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || "/", i = (o) => {
-  const r = { ...o }, e = o?.background;
-  return typeof e == "string" ? r.background = { header: e, footer: e, default: e } : e && typeof e == "object" && (r.background = {
-    header: e.header || e.default,
-    footer: e.footer || e.default,
-    default: e.default
+import { mapRecursive as s, filterRecursive as a, isUrl as f, isMailProtocol as i } from "./utils.js";
+const p = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || "/", c = (e) => {
+  const r = { ...e }, t = e?.background;
+  return typeof t == "string" ? r.background = { header: t, footer: t, default: t } : t && typeof t == "object" && (r.background = {
+    header: t.header || t.default,
+    footer: t.footer || t.default,
+    default: t.default
   }), r;
-}, c = (o, r = "en") => {
-  if (typeof o == "string") {
-    if (f(o)) {
-      const t = new URL(o);
-      return t.searchParams.set("locale", r), t.href;
+}, u = (e, r = "en") => {
+  if (typeof e == "string") {
+    if (f(e)) {
+      const o = new URL(e);
+      return o.searchParams.set("locale", r), o.href;
     }
-    const e = new URL(o, window.location.origin);
-    return e.searchParams.set("locale", r), e.pathname + e.search;
+    if (i(e))
+      return e;
+    const t = new URL(e, window.location.origin);
+    return t.searchParams.set("locale", r), t.pathname + t.search;
   }
-  return typeof o == "object" ? o[r] || o?.en || o?.zh : o;
-}, p = (o, r = "en") => {
-  if (!o?.length)
-    return o;
-  const e = (t, n) => t && typeof t == "object" ? t[n] || t?.en || t?.zh : t;
+  return typeof e == "object" ? e[r] || e?.en || e?.zh : e;
+}, b = (e, r = "en") => {
+  if (!e?.length)
+    return e;
+  const t = (o, n) => o && typeof o == "object" ? o[n] || o?.en || o?.zh : o;
   return s(
-    o,
-    (t) => ({
-      ...t,
-      title: e(t.title, r),
-      description: e(t.description, r),
+    e,
+    (o) => ({
+      ...o,
+      title: t(o.title, r),
+      description: t(o.description, r),
       // 仅对叶结点进行处理
-      link: t.items?.length ? t.link : c(t.link, r),
-      _rawLink: t.link
+      link: o.items?.length ? o.link : u(o.link, r),
+      _rawLink: o.link
     }),
     "items"
   );
-}, u = (o) => s(
-  o,
+}, l = (e) => s(
+  e,
   (r) => r.role ? {
     ...r,
     role: Array.isArray(r.role) ? r.role : [r.role]
   } : r,
   "items"
-), l = (o) => {
-  if (!o?.length)
+), d = (e) => {
+  if (!e?.length)
     return null;
-  const r = u(o), e = {
+  const r = l(e), t = {
     header: [],
     footer: [],
     // 对应 footer social media
@@ -55,32 +57,32 @@ const g = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || "/", i =
     sessionManager: [],
     userCenter: []
   };
-  return r.forEach((t) => {
-    t.section ? Array.isArray(t.section) ? t.section.forEach((n) => {
-      e[n]?.push(t);
-    }) : typeof t.section == "string" && e[t.section]?.push(t) : e.header.push(t);
-  }), e;
-}, b = (o) => {
-  if (!o)
+  return r.forEach((o) => {
+    o.section ? Array.isArray(o.section) ? o.section.forEach((n) => {
+      t[n]?.push(o);
+    }) : typeof o.section == "string" && t[o.section]?.push(o) : t.header.push(o);
+  }), t;
+}, y = (e) => {
+  if (!e)
     return null;
-  const r = { ...o };
-  return r.theme = i(r.theme), r.navigation = l(d(r.navigation)), r;
-}, d = (o = []) => a(o, (r, e) => !!r.link || e.filteredChildren?.length, "items"), y = (o, r) => a(
-  o,
-  (e, t) => {
-    const n = !e.role || r && (e.role.includes(r) || e.role.includes("guest"));
-    return t.isLeaf ? n : n && t.filteredChildren?.length;
+  const r = { ...e };
+  return r.theme = c(r.theme), r.navigation = d(h(r.navigation)), r;
+}, h = (e = []) => a(e, (r, t) => !!r.link || t.filteredChildren?.length, "items"), w = (e, r) => a(
+  e,
+  (t, o) => {
+    const n = !t.role || r && (t.role.includes(r) || t.role.includes("guest"));
+    return o.isLeaf ? n : n && o.filteredChildren?.length;
   },
   "items"
 );
 export {
-  y as filterNavByRole,
-  d as filterValidNavItems,
-  b as formatBlockletInfo,
-  u as formatNavigation,
-  i as formatTheme,
-  c as getLink,
-  p as getLocalizedNavigation,
-  l as parseNavigation,
-  g as publicPath
+  w as filterNavByRole,
+  h as filterValidNavItems,
+  y as formatBlockletInfo,
+  l as formatNavigation,
+  c as formatTheme,
+  u as getLink,
+  b as getLocalizedNavigation,
+  d as parseNavigation,
+  p as publicPath
 };

package/lib/utils.d.ts

@@ -3,6 +3,7 @@ export function flatRecursive(array: any, childrenKey?: string): any[];
 export function countRecursive(array: any, childrenKey?: string): number;
 export function filterRecursive(array: any, predicate: any, childrenKey?: string): any;
 export function isUrl(str: any): boolean;
+export function isMailProtocol(str: any): boolean;
 export function isIconifyString(str: any): boolean;
 export function matchPath(path: any): any;
 export function matchPaths(paths?: any[]): number;

package/lib/utils.js

@@ -1,61 +1,62 @@
 import H from "semver";
-const d = (n, r, e = "children") => n.map((t) => Array.isArray(t[e]) ? r({
+const d = (e, r, n = "children") => e.map((t) => Array.isArray(t[n]) ? r({
   ...t,
-  [e]: d(t[e], r, e)
-}) : r(t)), C = (n, r = "children") => {
-  const e = [];
-  return d(n, (t) => e.push(t), r), e;
-}, S = (n, r = "children") => {
-  let e = 0;
-  return d(n, () => e++, r), e;
-}, R = (n, r, e = "children") => n.map((t) => ({ ...t })).filter((t) => {
-  const s = t[e];
+  [n]: d(t[n], r, n)
+}) : r(t)), C = (e, r = "children") => {
+  const n = [];
+  return d(e, (t) => n.push(t), r), n;
+}, P = (e, r = "children") => {
+  let n = 0;
+  return d(e, () => n++, r), n;
+}, R = (e, r, n = "children") => e.map((t) => ({ ...t })).filter((t) => {
+  const s = t[n];
   if (Array.isArray(s)) {
-    const o = R(s, r, e);
-    t[e] = o?.length ? o : void 0;
+    const o = R(s, r, n);
+    t[n] = o?.length ? o : void 0;
   }
-  const c = { filteredChildren: t[e], isLeaf: !s?.length };
+  const c = { filteredChildren: t[n], isLeaf: !s?.length };
   return r(t, c);
-}), x = (n) => /^https?:\/\//.test(n), P = (n) => /^[\w-]+:[\w-]+$/.test(n), V = (n) => {
-  if (!n || !n?.startsWith("/"))
+}), S = (e) => /^https?:\/\//.test(e), x = (e) => /^mailto:/i.test(e.trim()), W = (e) => /^[\w-]+:[\w-]+$/.test(e), V = (e) => {
+  if (!e || !e?.startsWith("/"))
     return !1;
-  const r = (s) => s.endsWith("/") ? s : `${s}/`, e = r(window.location.pathname), t = r(new URL(n, window.location.origin).pathname);
-  return e.startsWith(t);
-}, W = (n = []) => {
-  const r = n.map((t, s) => ({ path: t, index: s })).filter((t) => V(t.path));
+  const r = (s) => s.endsWith("/") ? s : `${s}/`, n = r(window.location.pathname), t = r(new URL(e, window.location.origin).pathname);
+  return n.startsWith(t);
+}, k = (e = []) => {
+  const r = e.map((t, s) => ({ path: t, index: s })).filter((t) => V(t.path));
   return r?.length ? r.slice(1).reduce((t, s) => t.path.length >= s.path.length ? t : s, r[0]).index : -1;
-}, k = (n, r = {}) => {
-  const { columns: e = 1, breakInside: t = !1, groupHeight: s = 48, itemHeight: c = 24, childrenKey: o = "items" } = r, p = n.reduce((u, g) => u + s + (g[o]?.length || 0) * c, 0), l = Math.ceil(p / e), h = [[]];
+}, v = (e, r = {}) => {
+  const { columns: n = 1, breakInside: t = !1, groupHeight: s = 48, itemHeight: c = 24, childrenKey: o = "items" } = r, p = e.reduce((u, g) => u + s + (g[o]?.length || 0) * c, 0), h = Math.ceil(p / n), l = [[]];
   let i = 0, a = 0;
-  const m = l * 0.2, f = (u) => a > l - m && i < e - 1 && a + u > l + m;
-  return n.forEach((u) => {
+  const m = h * 0.2, f = (u) => a > h - m && i < n - 1 && a + u > h + m;
+  return e.forEach((u) => {
     const g = s + (u[o]?.length || 0) * c;
-    t && f(s) && (i++, a = 0, h[i] = []), !t && a > 0 && f(g) && (i++, a = 0, h[i] = []), h[i].push({
+    t && f(s) && (i++, a = 0, l[i] = []), !t && a > 0 && f(g) && (i++, a = 0, l[i] = []), l[i].push({
       ...u,
       group: !0
     }), a += s, u[o] && u[o].forEach((w) => {
-      t && f(c) && (i++, a = 0, h[i] = []), h[i].push({
+      t && f(c) && (i++, a = 0, l[i] = []), l[i].push({
         ...w,
         group: !1
       }), a += c;
     });
-  }), h;
-}, v = (n, r) => {
-  const e = (c) => {
+  }), l;
+}, E = (e, r) => {
+  const n = (c) => {
     const o = c.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
     return o ? o[1] : c;
-  }, t = e(n), s = e(r);
-  return t === s && n !== r ? !1 : H.gte(t, s);
+  }, t = n(e), s = n(r);
+  return t === s && e !== r ? !1 : H.gte(t, s);
 };
 export {
-  v as compareVersions,
-  S as countRecursive,
+  E as compareVersions,
+  P as countRecursive,
   R as filterRecursive,
   C as flatRecursive,
-  P as isIconifyString,
-  x as isUrl,
+  W as isIconifyString,
+  x as isMailProtocol,
+  S as isUrl,
   d as mapRecursive,
   V as matchPath,
-  W as matchPaths,
-  k as splitNavColumns
+  k as matchPaths,
+  v as splitNavColumns
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.27",
+  "version": "3.1.28",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.48",
     "@abtnode/util": "^1.16.48",
-    "@arcblock/bridge": "3.1.27",
-    "@arcblock/icons": "3.1.27",
-    "@arcblock/react-hooks": "3.1.27",
+    "@arcblock/bridge": "3.1.28",
+    "@arcblock/icons": "3.1.28",
+    "@arcblock/react-hooks": "3.1.28",
     "@arcblock/ws": "^1.21.3",
     "@blocklet/constant": "^1.16.48",
     "@blocklet/did-space-react": "^1.1.16",
@@ -84,7 +84,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.1.27",
+    "@arcblock/did-connect-react": "3.1.28",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -92,5 +92,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "9cbf9135aa96ce8d13481db7b21f755d009d2f9f"
+  "gitHead": "8a62be8796c0ab9129b24a08ecc051d1ac23e0de"
 }

package/src/Footer/links.jsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import Icon from '../Icon';
 import useMobile from '../hooks/use-mobile';
-import { splitNavColumns } from '../utils';
+import { splitNavColumns, isMailProtocol } from '../utils';
 
 /**
  * footer 中的 links (支持分组, 最多支持 2 级)
@@ -28,14 +28,17 @@ export default function Links({ links = [], flowLayout = false, columns, ...rest
       result = render({ label, link, props });
     } else if (link && isString(link)) {
       const isExternal = link.startsWith('http') || link.startsWith('//');
+      const isMail = isMailProtocol(link);
+
+      const otherProps = isMail
+        ? {}
+        : {
+            target: isExternal ? '_blank' : '_self',
+            rel: isExternal ? 'noreferrer noopener' : undefined,
+          };
 
       result = (
-        <a
-          href={link}
-          aria-label={`Footer link for ${label}`}
-          target={isExternal ? '_blank' : '_self'}
-          rel={isExternal ? 'noreferrer noopener' : undefined}
-          {...props}>
+        <a href={link} aria-label={`Footer link for ${label}`} {...otherProps} {...props}>
           {label}
         </a>
       );

package/src/blocklets.js

@@ -1,4 +1,4 @@
-import { mapRecursive, filterRecursive, isUrl } from './utils';
+import { mapRecursive, filterRecursive, isUrl, isMailProtocol } from './utils';
 
 export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
@@ -28,6 +28,10 @@ export const getLink = (link, locale = 'en') => {
       url.searchParams.set('locale', locale);
       return url.href;
     }
+    // 如果是 mailto 协议, 直接返回
+    if (isMailProtocol(link)) {
+      return link;
+    }
     const url = new URL(link, window.location.origin);
     url.searchParams.set('locale', locale);
     return url.pathname + url.search;

package/src/utils.js

@@ -47,6 +47,11 @@ export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
 
+// 链接是否是 mailto 协议
+export const isMailProtocol = (str) => {
+  return /^mailto:/i.test(str.trim());
+};
+
 /**
  * @description 检测是否是 Iconify 格式的字符串
  * @deprecated