@blocklet/ui-react 3.0.9 → 3.0.11

package/lib/Header/index.js

@@ -1,143 +1,141 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useMemo as w } from "react";
-import { useMemoizedFn as H } from "ahooks";
-import { withErrorBoundary as y } from "react-error-boundary";
-import { ErrorFallback as C } from "@arcblock/ux/lib/ErrorBoundary";
-import { styled as T, useTheme as _, deepmerge as E, ThemeProvider as F } from "@arcblock/ux/lib/Theme";
-import { ResponsiveHeader as L } from "@arcblock/ux/lib/Header";
-import P, { Products as R } from "@arcblock/ux/lib/NavMenu";
-import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
-import { translate as A } from "@arcblock/ux/lib/Locale/util";
-import M from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import W from "lodash/omit";
-import B from "lodash/isFinite";
-import j from "clsx";
-import S from "../Icon/index.js";
-import { mapRecursive as U, flatRecursive as K, matchPaths as O } from "../utils.js";
-import { formatBlockletInfo as q, getLocalizedNavigation as D, publicPath as G } from "../blocklets.js";
-import J from "../common/header-addons.js";
-import { useWalletHiddenTopbar as Q } from "../common/wallet-hidden-topbar.js";
-import V from "../libs/with-hide-when-embed.js";
-const X = {
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as k } from "react";
+import { useMemoizedFn as $ } from "ahooks";
+import { withErrorBoundary as N } from "react-error-boundary";
+import { ErrorFallback as H } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled as y, useTheme as C, deepmerge as T, ThemeProvider as _ } from "@arcblock/ux/lib/Theme";
+import { ResponsiveHeader as E } from "@arcblock/ux/lib/Header";
+import B, { Products as F } from "@arcblock/ux/lib/NavMenu";
+import { useLocaleContext as L } from "@arcblock/ux/lib/Locale/context";
+import { translate as P } from "@arcblock/ux/lib/Locale/util";
+import R from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import z from "lodash/omit";
+import A from "lodash/isFinite";
+import M from "clsx";
+import W from "../Icon/index.js";
+import { mapRecursive as j, flatRecursive as S, matchPaths as U } from "../utils.js";
+import { formatBlockletInfo as K, getLocalizedNavigation as O, publicPath as q } from "../blocklets.js";
+import D from "../common/header-addons.js";
+import { useWalletHiddenTopbar as G } from "../common/wallet-hidden-topbar.js";
+import J from "../libs/with-hide-when-embed.js";
+const Q = {
   en: {
     products: "Products"
   },
   zh: {
     products: "产品"
   }
-}, Y = (e) => {
-  if (!(e != null && e.length))
+}, V = (e) => {
+  if (!e?.length)
     return { navItems: [], activeId: null };
-  let t = 1;
-  const m = U(e, (o) => {
-    var d, f;
-    const n = o.icon ? /* @__PURE__ */ l(S, { icon: o.icon }) : null;
+  let r = 1;
+  const s = j(e, (o) => {
+    const i = o.icon ? /* @__PURE__ */ n(W, { icon: o.icon }) : null;
     if (o.items)
       return {
-        id: `${t++}`,
+        id: `${r++}`,
         label: o.title,
-        icon: n,
+        icon: i,
         children: o.items
       };
-    let a = {};
-    return ((d = o.link) != null && d.startsWith("http") || (f = o.link) != null && f.startsWith("//")) && (a = {
+    let l = {};
+    return (o.link?.startsWith("http") || o.link?.startsWith("//")) && (l = {
       target: "_blank",
       rel: "noreferrer"
     }), {
-      id: `${t++}`,
-      label: /* @__PURE__ */ l("a", { href: o.link, ...a, children: o.title }),
-      icon: n,
+      id: `${r++}`,
+      label: /* @__PURE__ */ n("a", { href: o.link, ...l, children: o.title }),
+      icon: i,
       description: o.description,
       link: o.link
     };
-  }, "items"), i = K(m), p = O(i.map((o) => o.link));
-  return { navItems: m, activeId: p >= 0 ? i[p].id : null };
+  }, "items"), a = S(s), d = U(a.map((o) => o.link));
+  return { navItems: s, activeId: d >= 0 ? a[d].id : null };
 };
-function Z({
+function X({
   meta: e = {},
-  addons: t = void 0,
-  sessionManagerProps: b = {
+  addons: r = void 0,
+  sessionManagerProps: u = {
     showRole: !0
   },
-  homeLink: m = G,
-  theme: i = void 0,
-  hideNavMenu: p = !1,
+  homeLink: s = q,
+  theme: a = void 0,
+  hideNavMenu: d = !1,
   showDomainWarningDialog: o = !0,
-  ...n
+  ...i
 }) {
-  var v, x;
-  Q();
-  const a = _(), { locale: d } = z() || {}, f = H((r, h = {}) => A(X, r, d, "en", h)), c = w(() => {
-    const r = Object.assign({}, window.blocklet, e);
+  G();
+  const l = C(), { locale: h } = L() || {}, v = $((t, f = {}) => P(Q, t, h, "en", f)), m = k(() => {
+    const t = Object.assign({}, window.blocklet, e);
     try {
-      return q(r);
-    } catch (h) {
-      return console.error("Failed to format blocklet info", h, r), r;
+      return K(t);
+    } catch (f) {
+      return console.error("Failed to format blocklet info", f, t), t;
     }
-  }, [e]), u = w(() => E(a, i), [a, i]), I = M({
+  }, [e]), c = k(() => T(l, a), [l, a]), x = R({
     meta: e,
-    theme: i
+    theme: a
   });
-  if (!c.appName)
+  if (!m.appName)
     return null;
-  const $ = D((v = c == null ? void 0 : c.navigation) == null ? void 0 : v.header, d), g = Y($), { navItems: s, activeId: N } = g, k = parseInt((x = window.blocklet) == null ? void 0 : x.USE_ARCBLOCK_THEME, 10);
-  return B(k) && s.splice(k, 0, {
-    label: f("products"),
+  const I = O(m?.navigation?.header, h), b = V(I), { navItems: p, activeId: w } = b, g = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
+  return A(g) && p.splice(g, 0, {
+    label: v("products"),
     // eslint-disable-next-line react/no-unstable-nested-components
-    children: ({ isOpen: r }) => /* @__PURE__ */ l(R, { isOpen: r })
-  }), /* @__PURE__ */ l(F, { theme: u, children: /* @__PURE__ */ l(
-    oo,
+    children: ({ isOpen: t }) => /* @__PURE__ */ n(F, { isOpen: t })
+  }), /* @__PURE__ */ n(_, { theme: c, children: /* @__PURE__ */ n(
+    Y,
     {
-      homeLink: m,
-      logo: /* @__PURE__ */ l("img", { src: I, alt: "logo" }),
+      homeLink: s,
+      logo: /* @__PURE__ */ n("img", { src: x, alt: "logo" }),
       addons: (
         // @ts-ignore
-        /* @__PURE__ */ l(
-          J,
+        /* @__PURE__ */ n(
+          D,
           {
-            formattedBlocklet: c,
-            addons: typeof t == "function" ? (r) => t(r, { navigation: g }) : t,
-            sessionManagerProps: b,
+            formattedBlocklet: m,
+            addons: typeof r == "function" ? (t) => r(t, { navigation: b }) : r,
+            sessionManagerProps: u,
             showDomainWarningDialog: o
           }
         )
       ),
-      ...W(n, ["bordered"]),
-      $bordered: n == null ? void 0 : n.bordered,
-      $bgcolor: u.palette.background.default,
-      className: j("blocklet__header", n.className),
-      children: p || !(s != null && s.length) ? null : ({ isMobile: r }) => (
+      ...z(i, ["bordered"]),
+      $bordered: i?.bordered,
+      $bgcolor: c.palette.background.default,
+      className: M("blocklet__header", i.className),
+      children: d || !p?.length ? null : ({ isMobile: t }) => (
         // @ts-ignore
-        /* @__PURE__ */ l(
-          P,
+        /* @__PURE__ */ n(
+          B,
           {
-            mode: r ? "inline" : "horizontal",
-            activeId: N,
-            items: s,
+            mode: t ? "inline" : "horizontal",
+            activeId: w,
+            items: p,
             className: "header-nav",
             bgColor: "transparent",
-            textColor: u.palette.grey[500],
-            activeTextColor: u.palette.text.primary
+            textColor: c.palette.grey[500],
+            activeTextColor: c.palette.text.primary
           }
         )
       )
     }
   ) });
 }
-const oo = T(L)`
+const Y = y(E)`
   ${({ $bgcolor: e }) => `background-color: ${e || "#fff"};`}
   .header-logo {
     min-width: 44px;
   }
-  ${({ $bordered: e, theme: t }) => e ? `border-bottom: 1px solid ${t.palette.divider};` : ""}
+  ${({ $bordered: e, theme: r }) => e ? `border-bottom: 1px solid ${r.palette.divider};` : ""}
   ${(e) => e.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;
     }
   }
-`, No = y(V(Z), {
-  FallbackComponent: C
+`, wo = N(J(X), {
+  FallbackComponent: H
 });
 export {
-  No as default
+  wo as default
 };

package/lib/Notifications/Snackbar.js

@@ -1,45 +1,45 @@
-import { jsxs as c, jsx as r, Fragment as u } from "react/jsx-runtime";
-import { useState as $, useEffect as z } from "react";
-import n from "@emotion/styled";
-import { green as D, amber as N, common as a } from "@mui/material/colors";
-import { Box as A, Typography as b, IconButton as T } from "@mui/material";
-import { useCreation as p } from "ahooks";
-import { Close as W } from "@mui/icons-material";
-import { Icon as B } from "@iconify/react";
-import _ from "@iconify-icons/tabler/circle-check";
-import j from "@iconify-icons/tabler/exclamation-circle";
-import h from "@iconify-icons/tabler/info-circle";
-import E from "@iconify-icons/tabler/xbox-x";
-import { SnackbarContent as H, useSnackbar as L } from "notistack";
-import M from "./hooks/use-width.js";
-import O from "./hooks/use-title.js";
-import { toClickableSpan as P, isIncludeActivity as F, sanitize as G } from "./utils.js";
-const R = {
-  normal: h,
-  success: _,
-  info: h,
-  warning: j,
-  error: E
-}, q = n(W)`
+import { jsxs as c, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { useState as S, useEffect as $ } from "react";
+import i from "@emotion/styled";
+import { green as z, amber as D, common as a } from "@mui/material/colors";
+import { Box as N, Typography as f, IconButton as A } from "@mui/material";
+import { useCreation as s } from "ahooks";
+import { Close as M } from "@mui/icons-material";
+import { Icon as T } from "@iconify/react";
+import W from "@iconify-icons/tabler/circle-check";
+import B from "@iconify-icons/tabler/exclamation-circle";
+import u from "@iconify-icons/tabler/info-circle";
+import _ from "@iconify-icons/tabler/xbox-x";
+import { SnackbarContent as j, useSnackbar as E } from "notistack";
+import H from "./hooks/use-width.js";
+import L from "./hooks/use-title.js";
+import { toClickableSpan as O, isIncludeActivity as P, sanitize as F } from "./utils.js";
+const G = {
+  normal: u,
+  success: W,
+  info: u,
+  warning: B,
+  error: _
+}, R = i(M)`
   font-size: 20px;
-`, J = n.div`
+`, q = i.div`
   display: flex;
   align-items: flex-start;
   gap: 8px;
   flex: 1;
   width: 0;
-`, K = n.div`
+`, J = i.div`
   display: flex;
   align-items: center;
   margin-left: auto;
   margin-right: -8px;
   width: 44px;
-`, Q = {
+`, K = {
   xl: "400px",
   lg: "400px",
   md: "400px",
   sm: "300px"
-}, U = n(H)`
+}, Q = i(j)`
   display: flex;
   color: #fff;
   align-items: center;
@@ -50,26 +50,26 @@ const R = {
     0px 6px 10px 0px rgba(0, 0, 0, 0.14),
     0px 1px 18px 0px rgba(0, 0, 0, 0.12);
 
-  ${({ severity: t, breakpoint: i }) => {
-  const e = Q[i] || "400px";
-  return t === "success" ? `
-        background-color: ${D[600]} !important;
-        width: ${e};
-      ` : t === "error" ? `
+  ${({ severity: o, breakpoint: n }) => {
+  const t = K[n] || "400px";
+  return o === "success" ? `
+        background-color: ${z[600]} !important;
+        width: ${t};
+      ` : o === "error" ? `
         background-color: #d32f2f !important;
-        width: ${e};
-      ` : t === "info" ? `
+        width: ${t};
+      ` : o === "info" ? `
         background-color: #1976d2 !important;
-        width: ${e};
-      ` : t === "warning" ? `
-        background-color: ${N[700]} !important;
-        width: ${e};
+        width: ${t};
+      ` : o === "warning" ? `
+        background-color: ${D[700]} !important;
+        width: ${t};
       ` : `
       background-color: #333;
-      width: ${e};
+      width: ${t};
     `;
 }}
-`, V = n.div`
+`, U = i.div`
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -96,43 +96,42 @@ const R = {
     }
   }
 `;
-function xe({
-  ref: t = void 0,
-  keyId: i,
-  notification: e = {},
-  viewAllUrl: w,
-  content: f = null
+function mt({
+  ref: o = void 0,
+  keyId: n,
+  notification: t = {},
+  viewAllUrl: b,
+  content: h = null
 }) {
-  var x;
-  const k = M(), [g, v] = $(e.description || ""), d = R[e.severity || ""], { closeSnackbar: m } = L(), y = () => m(i);
-  z(() => {
-    P(e.description || "", "en").then((l) => {
-      v(l);
+  const w = H(), [k, g] = S(t.description || ""), p = G[t.severity || ""], { closeSnackbar: d } = E(), v = () => d(n);
+  $(() => {
+    O(t.description || "", "en").then((l) => {
+      g(l);
     });
-  }, [e.description]);
-  const C = (l) => {
-    l.stopPropagation(), m(i), l != null && l.customPreventRedirect || window.open(w, "_blank");
-  }, I = p(() => F(e), [e]), o = p(() => e == null ? void 0 : e.activity, [e]), s = p(() => !o || o.type === "tips" ? null : o == null ? void 0 : o.meta, [o]), S = O({
-    activity: o,
-    users: [e == null ? void 0 : e.actorInfo],
-    actors: [(x = e == null ? void 0 : e.activity) == null ? void 0 : x.actor],
+  }, [t.description]);
+  const y = (l) => {
+    l.stopPropagation(), d(n), l?.customPreventRedirect || window.open(b, "_blank");
+  }, C = s(() => P(t), [t]), r = s(() => t?.activity, [t]), m = s(() => !r || r.type === "tips" ? null : r?.meta, [r]), I = L({
+    activity: r,
+    users: [t?.actorInfo],
+    actors: [t?.activity?.actor],
     extra: {
       linkColor: a.white
     }
   });
   return /* @__PURE__ */ c(
-    U,
+    Q,
     {
-      ref: t,
-      severity: e.severity,
-      breakpoint: k,
+      ref: o,
+      severity: t.severity,
+      breakpoint: w,
       children: [
-        /* @__PURE__ */ c(J, { children: [
-          d ? /* @__PURE__ */ r(B, { icon: d, fontSize: 24 }) : null,
-          /* @__PURE__ */ r(V, { onClick: C, style: { width: "calc(100% - 30px)" }, children: /* @__PURE__ */ r(A, { children: I ? /* @__PURE__ */ c(u, { children: [
-            /* @__PURE__ */ r("span", { className: "title", children: S }),
-            s ? /* @__PURE__ */ r(
-              b,
+        /* @__PURE__ */ c(q, { children: [
+          p ? /* @__PURE__ */ e(T, { icon: p, fontSize: 24 }) : null,
+          /* @__PURE__ */ e(U, { onClick: y, style: { width: "calc(100% - 30px)" }, children: /* @__PURE__ */ e(N, { children: C ? /* @__PURE__ */ c(x, { children: [
+            /* @__PURE__ */ e("span", { className: "title", children: I }),
+            m ? /* @__PURE__ */ e(
+              f,
               {
                 variant: "subtitle2",
                 component: "p",
@@ -146,26 +145,26 @@ function xe({
                   color: a.white,
                   lineHeight: 1.2
                 },
-                children: s == null ? void 0 : s.content
+                children: m?.content
               }
             ) : null
-          ] }) : /* @__PURE__ */ c(u, { children: [
-            /* @__PURE__ */ r("span", { className: "title", children: e.title }),
-            f || /* @__PURE__ */ r(
-              b,
+          ] }) : /* @__PURE__ */ c(x, { children: [
+            /* @__PURE__ */ e("span", { className: "title", children: t.title }),
+            h || /* @__PURE__ */ e(
+              f,
               {
                 component: "span",
                 className: "desc",
-                dangerouslySetInnerHTML: { __html: G(g) }
+                dangerouslySetInnerHTML: { __html: F(k) }
               }
             )
           ] }) }) })
         ] }),
-        /* @__PURE__ */ r(K, { children: /* @__PURE__ */ r(T, { "aria-label": "close", color: "inherit", onClick: y, size: "large", children: /* @__PURE__ */ r(q, {}) }, "close") })
+        /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(A, { "aria-label": "close", color: "inherit", onClick: v, size: "large", children: /* @__PURE__ */ e(R, {}) }, "close") })
       ]
     }
   );
 }
 export {
-  xe as default
+  mt as default
 };

package/lib/Notifications/hooks/use-title.js

@@ -1,4 +1,4 @@
-import { jsx as s, jsxs as o, Fragment as i } from "react/jsx-runtime";
+import { jsx as s, jsxs as i, Fragment as t } from "react/jsx-runtime";
 import F from "react";
 import { useCreation as f, useMemoizedFn as U } from "ahooks";
 import { useTheme as C, Link as E } from "@mui/material";
@@ -7,37 +7,37 @@ import { joinURL as R, withQuery as S } from "ufo";
 import D from "lodash/isEmpty";
 import { getActivityLink as I } from "../utils.js";
 const P = {
-  comment: (r, l) => l && l > 1 ? /* @__PURE__ */ o(i, { children: [
+  comment: (r, o) => o && o > 1 ? /* @__PURE__ */ i(t, { children: [
     "left ",
-    l,
+    o,
     " comments on your ",
     r
-  ] }) : /* @__PURE__ */ o(i, { children: [
+  ] }) : /* @__PURE__ */ i(t, { children: [
     "commented on your ",
     r
   ] }),
-  like: (r) => /* @__PURE__ */ o(i, { children: [
+  like: (r) => /* @__PURE__ */ i(t, { children: [
     "liked your ",
     r
   ] }),
-  follow: () => /* @__PURE__ */ s(i, { children: "followed you" }),
-  tips: (r) => /* @__PURE__ */ o(i, { children: [
+  follow: () => /* @__PURE__ */ s(t, { children: "followed you" }),
+  tips: (r) => /* @__PURE__ */ i(t, { children: [
     "gave tips to your ",
     r
   ] }),
-  mention: (r) => /* @__PURE__ */ o(i, { children: [
+  mention: (r) => /* @__PURE__ */ i(t, { children: [
     "mentioned you in ",
     r
   ] }),
-  assign: () => /* @__PURE__ */ s(i, { children: "assigned you a task" })
+  assign: () => /* @__PURE__ */ s(t, { children: "assigned you a task" })
 };
-function a({ user: r, color: l = void 0 }) {
-  const { palette: d } = C(), h = S(R(M, "user"), { did: r.did }), m = l || d.text.primary;
+function a({ user: r, color: o = void 0 }) {
+  const { palette: d } = C(), h = S(R(M, "user"), { did: r.did }), u = o || d.text.primary;
   return /* @__PURE__ */ s(
     E,
     {
       href: h,
-      color: m,
+      color: u,
       target: "_blank",
       onClick: (p) => {
         p.customPreventRedirect = !0;
@@ -52,52 +52,52 @@ function a({ user: r, color: l = void 0 }) {
   );
 }
 a.displayName = "UserLink";
-function H({ activity: r, users: l, actors: d, extra: h = {}, mountPoint: m = "" }) {
-  const { palette: p } = C(), { type: u, target: g } = r || {}, { type: y } = g || {}, { linkColor: c = p.text.primary } = h || {}, k = f(() => {
-    if (!Array.isArray(l)) return /* @__PURE__ */ new Map();
+function H({ activity: r, users: o, actors: d, extra: h = {}, mountPoint: u = "" }) {
+  const { palette: p } = C(), { type: m, target: g } = r || {}, { type: y } = g || {}, { linkColor: c = p.text.primary } = h || {}, k = f(() => {
+    if (!Array.isArray(o)) return /* @__PURE__ */ new Map();
     const e = /* @__PURE__ */ new Map();
-    return l.forEach((t) => {
-      t != null && t.did && !e.has(t.did) && e.set(t.did, t);
+    return o.forEach((l) => {
+      l?.did && !e.has(l.did) && e.set(l.did, l);
     }), e;
-  }, [l]), n = f(() => Array.isArray(d) ? d.map((e) => e ? k.get(e) || { did: e, fullName: "System" } : null).filter(Boolean) : [], [d, k]), L = U(() => {
+  }, [o]), n = f(() => Array.isArray(d) ? d.map((e) => e ? k.get(e) || { did: e, fullName: "System" } : null).filter(Boolean) : [], [d, k]), L = U(() => {
     if (!Array.isArray(n) || n.length === 0)
       return null;
     if (n.length === 1)
       return /* @__PURE__ */ s(a, { user: n[0], color: c });
-    const e = n.slice(0, -1), t = n[n.length - 1];
+    const e = n.slice(0, -1), l = n[n.length - 1];
     if (n.length === 2)
-      return /* @__PURE__ */ o(i, { children: [
+      return /* @__PURE__ */ i(t, { children: [
         /* @__PURE__ */ s(a, { user: e[0], color: c }),
         " and ",
-        /* @__PURE__ */ s(a, { user: t, color: c })
+        /* @__PURE__ */ s(a, { user: l, color: c })
       ] });
     const _ = n.length > 3, N = _ ? n.slice(0, 2) : e;
-    return /* @__PURE__ */ o(i, { children: [
-      N.map((T, w) => /* @__PURE__ */ o(F.Fragment, { children: [
+    return /* @__PURE__ */ i(t, { children: [
+      N.map((T, w) => /* @__PURE__ */ i(F.Fragment, { children: [
         /* @__PURE__ */ s(a, { user: T, color: c }),
         w < N.length - 1 ? ", " : ""
       ] }, T.did)),
-      _ ? `, and ${n.length - 2} others` : /* @__PURE__ */ o(i, { children: [
+      _ ? `, and ${n.length - 2} others` : /* @__PURE__ */ i(t, { children: [
         ", and ",
-        /* @__PURE__ */ s(a, { user: t, color: c })
+        /* @__PURE__ */ s(a, { user: l, color: c })
       ] })
     ] });
   }), A = U(() => {
-    const e = u ? P[u] : null;
-    return e ? e(y, l.length) : null;
+    const e = m ? P[m] : null;
+    return e ? e(y, o.length) : null;
   }), v = f(() => {
-    const e = L(), t = A();
-    return !e || !t ? null : /* @__PURE__ */ o(i, { children: [
+    const e = L(), l = A();
+    return !e || !l ? null : /* @__PURE__ */ i(t, { children: [
       e,
       " ",
-      t
+      l
     ] });
-  }, [u, y, n, L, A]), x = f(() => {
+  }, [m, y, n, L, A]), x = f(() => {
     if (!r) return null;
     const e = I(r);
-    return e != null && e.targetLink ? R(m, e.targetLink) : null;
-  }, [r, m]);
-  return !u || D(g) ? null : /* @__PURE__ */ o(i, { children: [
+    return e?.targetLink ? R(u, e.targetLink) : null;
+  }, [r, u]);
+  return !m || D(g) ? null : /* @__PURE__ */ i(t, { children: [
     v,
     " ",
     x && /* @__PURE__ */ s(