@arcblock/ux 3.3.5 → 3.3.7

package/lib/SessionUser/components/logged-in.d.ts

@@ -7,5 +7,6 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
     locale?: Locale;
     size?: number;
     popperType?: 'hover' | 'click';
+    profileUrl?: string;
 }
-export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;
+export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;

package/lib/SessionUser/components/logged-in.js

@@ -1,56 +1,57 @@
-import { jsxs as s, jsx as r, Fragment as W } from "react/jsx-runtime";
-import { useRef as z, useEffect as T } from "react";
-import { useMemoizedFn as n, useCreation as _, useReactive as j } from "ahooks";
+import { jsxs as s, jsx as r, Fragment as z } from "react/jsx-runtime";
+import { useRef as T, useEffect as _ } from "react";
+import { useMemoizedFn as n, useCreation as j, useReactive as G } from "ahooks";
 import f from "@arcblock/bridge";
-import { Box as k, IconButton as G, Popper as H, ClickAwayListener as N, Fade as Q, Paper as V, Divider as S, MenuList as q, MenuItem as J } from "@mui/material";
-import { Icon as K } from "@iconify/react";
-import X from "@iconify-icons/material-symbols/person-outline-rounded";
-import Y from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
-import Z from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
-import $ from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
-import ee from "copy-to-clipboard";
+import { Box as k, IconButton as H, Popper as N, ClickAwayListener as Q, Fade as V, Paper as q, Divider as S, MenuList as J, MenuItem as K } from "@mui/material";
+import { Icon as X } from "@iconify/react";
+import Y from "@iconify-icons/material-symbols/person-outline-rounded";
+import Z from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
+import $ from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
+import ee from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
+import re from "copy-to-clipboard";
 import h from "lodash/noop";
-import re from "../../Toast/index.js";
-import te from "../../Avatar/index.js";
-import { getUserAvatar as oe } from "../../Util/index.js";
-import ie from "./user-info.js";
-import { DASHBOARD_URL as ne, PROFILE_URL as ce } from "../../Util/constant.js";
-import le from "../../SessionPermission/index.js";
-import { translations as ae } from "../libs/translation.js";
-import { translate as se } from "../../Locale/util.js";
-import pe from "./did-space.js";
-import { mergeSx as ue } from "../../Util/style.js";
-import { createDebug as de } from "../../Util/logger.js";
-import { GA_LAST_ROLE as me } from "../../withTracker/constant/index.js";
-const fe = (e) => {
+import te from "../../Toast/index.js";
+import oe from "../../Avatar/index.js";
+import { getUserAvatar as ie } from "../../Util/index.js";
+import ne from "./user-info.js";
+import { DASHBOARD_URL as ce, PROFILE_URL as le } from "../../Util/constant.js";
+import ae from "../../SessionPermission/index.js";
+import { translations as se } from "../libs/translation.js";
+import { translate as pe } from "../../Locale/util.js";
+import ue from "./did-space.js";
+import { mergeSx as de } from "../../Util/style.js";
+import { createDebug as me } from "../../Util/logger.js";
+import { GA_LAST_ROLE as fe } from "../../withTracker/constant/index.js";
+const he = (e) => {
   const c = new URL(window.location.href);
   return c.searchParams.set("inviter", e), c.toString();
-}, g = de("did-connect");
-function Te({
+}, g = me("did-connect");
+function _e({
   session: e,
   onBindWallet: c = h,
   isBlocklet: l = !0,
   locale: u = "en",
   size: b = 24,
   popperType: I = "click",
-  sx: y,
-  ...R
+  profileUrl: y = le,
+  sx: R,
+  ...C
 }) {
-  const a = n((t, o = {}) => se(ae, t, u, "en", o)), C = _(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), P = z(null), d = j({
+  const a = n((t, o = {}) => pe(se, t, u, "en", o)), L = j(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), P = T(null), d = G({
     open: !1
   }), i = n((t = !d.open) => {
     d.open = t;
-  }), L = I === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, B = oe(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), D = e.useOAuth(), O = typeof e.usePasskey == "function" ? e.usePasskey() : null, v = n(({ inArcSphere: t = !1 } = {}) => {
-    localStorage.setItem(me, e?.user?.role);
+  }), B = I === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, D = ie(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), O = e.useOAuth(), E = typeof e.usePasskey == "function" ? e.usePasskey() : null, v = n(({ inArcSphere: t = !1 } = {}) => {
+    localStorage.setItem(fe, e?.user?.role);
     const o = {};
-    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? O.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? D.switchOAuthPassport(e.user) : e.switchPassport(h, o);
-  }), x = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((F) => {
+    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? E.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? O.switchOAuthPassport(e.user) : e.switchPassport(h, o);
+  }), x = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((W) => {
     const A = {};
     o && e.user.sourceAppPid && (A.sourceAppPid = e.user.sourceAppPid);
     const m = {};
     t ? m.userSession = t : (i(!1), m.showQuickConnect = !1), e.switchDid(
       () => {
-        i(!1), F();
+        i(!1), W();
       },
       A,
       m
@@ -58,16 +59,16 @@ function Te({
   })), w = n(({ inArcSphere: t = !1 } = {}) => {
     const o = {};
     t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(h, o);
-  }), E = n(() => {
-    i(!1), e.logout();
   }), M = n(() => {
-    i(!1), e.bindWallet(c);
+    i(!1), e.logout();
   }), U = n(() => {
+    i(!1), e.bindWallet(c);
+  }), F = n(() => {
     i(!1);
-    const t = fe(e.user.did);
-    ee(t), re.success(a("inviteCopied"));
+    const t = he(e.user.did);
+    re(t), te.success(a("inviteCopied"));
   });
-  return T(() => {
+  return _(() => {
     f.registerBlocklet("callSwitchPassport", () => {
       g("bridge registerBlocklet: callSwitchPassport"), v({ inArcSphere: !0 });
     }), f.registerBlocklet("callSwitchDid", () => {
@@ -78,31 +79,31 @@ function Te({
   }, []), /* @__PURE__ */ s(
     k,
     {
-      sx: ue(
+      sx: de(
         {
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center"
         },
         // @ts-ignore
-        y
+        R
       ),
-      ...R,
+      ...C,
       children: [
         /* @__PURE__ */ r(
-          G,
+          H,
           {
             ref: P,
             size: "medium",
             "data-cy": "sessionManager-logout-popup",
             className: "arc-session-user-logged-in",
             "aria-label": "User info button",
-            ...L,
-            children: /* @__PURE__ */ r(te, { variant: "circle", did: e.user.did, src: B, size: b, shape: "circle" })
+            ...B,
+            children: /* @__PURE__ */ r(oe, { variant: "circle", did: e.user.did, src: D, size: b, shape: "circle" })
           }
         ),
         /* @__PURE__ */ r(
-          H,
+          N,
           {
             open: d.open,
             anchorEl: P.current,
@@ -112,13 +113,13 @@ function Te({
               zIndex: 1600
             },
             children: ({ TransitionProps: t }) => /* @__PURE__ */ r(
-              N,
+              Q,
               {
                 onClickAway: (o) => {
                   o.preventDefault(), o.stopPropagation(), i(!1);
                 },
-                children: /* @__PURE__ */ r(Q, { ...t, timeout: 350, children: /* @__PURE__ */ s(
-                  V,
+                children: /* @__PURE__ */ r(V, { ...t, timeout: 350, children: /* @__PURE__ */ s(
+                  q,
                   {
                     variant: "outlined",
                     sx: {
@@ -128,7 +129,7 @@ function Te({
                     },
                     children: [
                       /* @__PURE__ */ r(
-                        ie,
+                        ne,
                         {
                           locale: u,
                           isBlocklet: l,
@@ -136,53 +137,53 @@ function Te({
                           onSwitchPassport: v,
                           onSwitchAccount: x,
                           onSwitchProfile: w,
-                          onBindWallet: M
+                          onBindWallet: U
                         }
                       ),
                       /* @__PURE__ */ r(S, { sx: { m: "0 !important" } }),
-                      /* @__PURE__ */ s(q, { sx: { p: 0 }, children: [
-                        l ? /* @__PURE__ */ s(W, { children: [
-                          /* @__PURE__ */ r(le, { session: e, children: /* @__PURE__ */ r(
+                      /* @__PURE__ */ s(J, { sx: { p: 0 }, children: [
+                        l ? /* @__PURE__ */ s(z, { children: [
+                          /* @__PURE__ */ r(ae, { session: e, children: /* @__PURE__ */ r(
                             p,
                             {
-                              icon: Y,
+                              icon: Z,
                               title: a("dashboard"),
                               component: "a",
-                              href: ne,
+                              href: ce,
                               sx: { display: "block", textDecoration: "none", color: "inherit" }
                             }
                           ) }),
                           /* @__PURE__ */ r(
                             p,
                             {
-                              icon: X,
+                              icon: Y,
                               title: a("profile"),
                               component: "a",
-                              href: ce,
+                              href: y,
                               sx: { display: "block", textDecoration: "none", color: "inherit" }
                             }
                           ),
-                          C && /* @__PURE__ */ r(
+                          L && /* @__PURE__ */ r(
                             p,
                             {
-                              icon: $,
+                              icon: ee,
                               title: a("invite"),
                               component: "div",
-                              onClick: U,
+                              onClick: F,
                               sx: { display: "block", color: "inherit" }
                             }
                           ),
                           /* @__PURE__ */ r(S, { sx: { m: "0 !important" } }),
-                          /* @__PURE__ */ r(pe, { session: e, locale: u })
+                          /* @__PURE__ */ r(ue, { session: e, locale: u })
                         ] }) : null,
                         /* @__PURE__ */ r(
                           p,
                           {
-                            icon: Z,
+                            icon: $,
                             title: a("logout"),
                             component: "div",
                             sx: { color: "error.main" },
-                            onClick: E,
+                            onClick: M,
                             "data-cy": "sessionManager-logout-trigger"
                           }
                         )
@@ -204,7 +205,7 @@ function p({
   ...l
 }) {
   return /* @__PURE__ */ r(k, { ...l, sx: { p: 0.5, ...l?.sx }, children: /* @__PURE__ */ s(
-    J,
+    K,
     {
       sx: {
         display: "flex",
@@ -217,12 +218,12 @@ function p({
         py: 1
       },
       children: [
-        /* @__PURE__ */ r(K, { icon: e, fontSize: 24 }),
+        /* @__PURE__ */ r(X, { icon: e, fontSize: 24 }),
         c
       ]
     }
   ) });
 }
 export {
-  Te as default
+  _e as default
 };

package/lib/SessionUser/index.d.ts

@@ -5,5 +5,6 @@ export interface SessionUserProps {
     locale?: Locale;
     size?: number;
     popperType?: 'hover' | 'click';
+    profileUrl?: string;
 }
-export default function SessionUser({ session, onBindWallet, locale, size, popperType, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;
+export default function SessionUser({ session, onBindWallet, locale, size, popperType, profileUrl, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;

package/lib/SessionUser/index.js

@@ -1,28 +1,31 @@
-import { jsx as n } from "react/jsx-runtime";
-import f from "lodash/noop";
-import { useCreation as p } from "ahooks";
-import u from "./components/logged-in.js";
-import l from "./components/un-login.js";
-function b({
+import { jsx as m } from "react/jsx-runtime";
+import p from "lodash/noop";
+import { useCreation as u } from "ahooks";
+import l from "./components/logged-in.js";
+import c from "./components/un-login.js";
+import { PROFILE_URL as g } from "../Util/constant.js";
+function d({
   session: r,
-  onBindWallet: e = f,
+  onBindWallet: i = p,
   locale: o = "en",
   size: t = 24,
-  popperType: i = "click"
+  popperType: n = "click",
+  profileUrl: e = g
 }) {
-  const m = p(() => !!globalThis?.blocklet, []);
-  return r.user ? /* @__PURE__ */ n(
-    u,
+  const f = u(() => !!globalThis?.blocklet, []);
+  return r.user ? /* @__PURE__ */ m(
+    l,
     {
-      isBlocklet: m,
+      isBlocklet: f,
       session: r,
-      onBindWallet: e,
+      onBindWallet: i,
       locale: o,
       size: t,
-      popperType: i
+      popperType: n,
+      profileUrl: e
     }
-  ) : /* @__PURE__ */ n(l, { session: r, locale: o, size: t });
+  ) : /* @__PURE__ */ m(c, { session: r, locale: o, size: t });
 }
 export {
-  b as default
+  d as default
 };

package/lib/SplitButton/index.js

@@ -1,45 +1,48 @@
-import { jsxs as s, Fragment as I, jsx as e } from "react/jsx-runtime";
-import { useState as P, useRef as b, createElement as A, isValidElement as E } from "react";
+import { jsxs as p, Fragment as P, jsx as e } from "react/jsx-runtime";
+import { useState as b, useRef as m, createElement as w, isValidElement as E } from "react";
 import { ExpandMore as L } from "@mui/icons-material";
-import { ButtonGroup as S, Popper as w, MenuItem as p, Button as c, Paper as z, ClickAwayListener as j, MenuList as G } from "@mui/material";
-import R from "lodash/noop";
-import { styled as d } from "../Theme/index.js";
-function v({ ...o }) {
+import { ButtonGroup as S, Popper as z, MenuItem as d, Button as u, Paper as R, ClickAwayListener as j, MenuList as G } from "@mui/material";
+import v from "lodash/noop";
+import { styled as f } from "../Theme/index.js";
+import F from "./useClickAway.js";
+function O({ ...o }) {
   const {
-    size: m = "medium",
+    size: h = "medium",
     color: r = "primary",
     menu: i = [],
     children: l = null,
-    variant: u = "contained",
-    onClick: f = R,
-    menuButtonProps: h = {},
-    ...g
-  } = o, [y, a] = P(!1), n = b(null), x = Array.isArray(i) ? (
+    variant: y = "contained",
+    onClick: g = v,
+    menuButtonProps: x = {},
+    ...k
+  } = o, [C, a] = b(!1), n = m(null), s = m(null), M = Array.isArray(i) ? (
     // eslint-disable-next-line react/no-array-index-key
-    i.map((t, C) => E(t) ? t : /* @__PURE__ */ A(p, { ...t, key: C }))
-  ) : i, M = () => {
+    i.map((t, A) => E(t) ? t : /* @__PURE__ */ w(d, { ...t, key: A }))
+  ) : i, B = () => {
     a((t) => !t);
-  }, k = (t) => {
+  }, c = (t) => {
     n.current && n.current.contains(t.target) || a(!1);
-  }, B = (t) => {
+  };
+  F(s, c);
+  const I = (t) => {
     t.target.closest(".MuiMenuItem-root") && a(!1);
   };
-  return /* @__PURE__ */ s(I, { children: [
-    /* @__PURE__ */ s(F, { variant: u, size: m, color: r, ref: n, ...g, children: [
-      typeof l == "function" ? l() : /* @__PURE__ */ e(c, { onClick: f, color: r, children: l }),
-      /* @__PURE__ */ e(c, { onClick: M, color: r, ...h, "aria-label": "more functions", children: /* @__PURE__ */ e(L, {}) })
+  return /* @__PURE__ */ p(P, { children: [
+    /* @__PURE__ */ p(T, { variant: y, size: h, color: r, ref: n, ...k, children: [
+      typeof l == "function" ? l() : /* @__PURE__ */ e(u, { onClick: g, color: r, children: l }),
+      /* @__PURE__ */ e(u, { onClick: B, color: r, ...x, "aria-label": "more functions", children: /* @__PURE__ */ e(L, {}) })
     ] }),
-    /* @__PURE__ */ e(O, { open: y, anchorEl: n.current, placement: "bottom-end", disablePortal: !1, children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(j, { onClickAway: k, children: /* @__PURE__ */ e(G, { onClick: B, children: x }) }) }) })
+    /* @__PURE__ */ e(V, { open: C, anchorEl: n.current, placement: "bottom-end", disablePortal: !1, children: /* @__PURE__ */ e(R, { ref: s, children: /* @__PURE__ */ e(j, { onClickAway: c, children: /* @__PURE__ */ e(G, { onClick: I, children: M }) }) }) })
   ] });
 }
-v.Item = p;
-const F = d(S)`
+O.Item = d;
+const T = f(S)`
   > .MuiButtonBase-root:last-of-type {
     min-width: 2em;
     padding-left: 0;
     padding-right: 0;
   }
-`, O = d(w)`
+`, V = f(z)`
   z-index: ${(o) => o.theme.zIndex.tooltip};
   .MuiList-root {
     padding: 4px 0;
@@ -50,5 +53,5 @@ const F = d(S)`
   }
 `;
 export {
-  v as default
+  O as default
 };

package/lib/SplitButton/useClickAway.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare function useClickAway(ref: React.RefObject<HTMLElement> | null, onClickAway: (event: MouseEvent) => void): void;
+export default useClickAway;

package/lib/SplitButton/useClickAway.js

@@ -0,0 +1,14 @@
+import { useEffect as u } from "react";
+function i(t, e) {
+  u(() => {
+    function n(r) {
+      !t || !t.current || t.current.contains(r.target) || e(r);
+    }
+    return document.addEventListener("click", n, !0), () => {
+      document.removeEventListener("click", n, !0);
+    };
+  }, [t, e]);
+}
+export {
+  i as default
+};

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.3.5", s = { "@blocklet/js-sdk": "^1.17.6" }, n = {
+const e = "3.3.7", s = { "@blocklet/js-sdk": "^1.17.6" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.3.5",
+  "version": "3.3.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "757fbba540967c8552f9c30fc64fdce00a8be222",
+  "gitHead": "cd0e3b812192ce054be488bcb60ed3f44e81fdff",
   "dependencies": {
-    "@arcblock/bridge": "3.3.5",
+    "@arcblock/bridge": "3.3.7",
     "@arcblock/did": "^1.27.16",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.3.5",
-    "@arcblock/nft-display": "3.3.5",
-    "@arcblock/react-hooks": "3.3.5",
+    "@arcblock/icons": "3.3.7",
+    "@arcblock/nft-display": "3.3.7",
+    "@arcblock/react-hooks": "3.3.7",
     "@blocklet/js-sdk": "^1.17.6",
-    "@blocklet/theme": "3.3.5",
+    "@blocklet/theme": "3.3.7",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/SessionUser/components/logged-in.tsx

@@ -50,6 +50,7 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
   locale?: Locale;
   size?: number;
   popperType?: 'hover' | 'click';
+  profileUrl?: string;
 }
 
 export default function LoggedIn({
@@ -59,6 +60,7 @@ export default function LoggedIn({
   locale = 'en',
   size = 24,
   popperType = 'click',
+  profileUrl = PROFILE_URL,
   sx,
   ...rest
 }: LoggedInProps) {
@@ -243,7 +245,7 @@ export default function LoggedIn({
                         icon={PersonOutlineRoundedIcon}
                         title={t('profile')}
                         component="a"
-                        href={PROFILE_URL}
+                        href={profileUrl}
                         sx={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
                       />
                       {isInviteEnabled && (

package/src/SessionUser/index.tsx

@@ -4,6 +4,7 @@ import { useCreation } from 'ahooks';
 import LoggedIn from './components/logged-in';
 import UnLogin from './components/un-login';
 import type { Locale, Session } from '../type';
+import { PROFILE_URL } from '../Util/constant';
 
 export interface SessionUserProps {
   session: Session;
@@ -11,6 +12,7 @@ export interface SessionUserProps {
   locale?: Locale;
   size?: number;
   popperType?: 'hover' | 'click';
+  profileUrl?: string;
 }
 
 export default function SessionUser({
@@ -19,6 +21,7 @@ export default function SessionUser({
   locale = 'en',
   size = 24,
   popperType = 'click',
+  profileUrl = PROFILE_URL,
 }: SessionUserProps) {
   const isBlocklet = useCreation(() => {
     return !!globalThis?.blocklet;
@@ -33,6 +36,7 @@ export default function SessionUser({
         locale={locale}
         size={size}
         popperType={popperType}
+        profileUrl={profileUrl}
       />
     );
   }

package/src/SplitButton/index.tsx

@@ -15,6 +15,7 @@ import {
 import noop from 'lodash/noop';
 
 import { styled } from '../Theme';
+import useClickAway from './useClickAway';
 
 export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
   menu?:
@@ -40,6 +41,9 @@ export default function SplitButton({ ...props }: SplitButtonProps) {
 
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement | null>(null);
+  // ClickAwayListener 只会监听事件的冒泡阶段，这会导致如果其他事件禁用了冒泡，那么下拉菜单将无法隐藏
+  // 所以定义一个 ref 来监听事件的捕获阶段
+  const paperRef = useRef<HTMLDivElement | null>(null);
   const menuItems = Array.isArray(menu)
     ? // eslint-disable-next-line react/no-array-index-key
       menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />))
@@ -56,6 +60,8 @@ export default function SplitButton({ ...props }: SplitButtonProps) {
     setOpen(false);
   };
 
+  useClickAway(paperRef as React.RefObject<HTMLElement>, handleClose);
+
   // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
   const handleItemClick: React.MouseEventHandler<HTMLUListElement> = (e) => {
     if ((e.target as HTMLElement).closest('.MuiMenuItem-root')) {
@@ -78,7 +84,7 @@ export default function SplitButton({ ...props }: SplitButtonProps) {
         </Button>
       </StyledButtonGroup>
       <StyledPopper open={open} anchorEl={anchorRef.current} placement="bottom-end" disablePortal={false}>
-        <Paper>
+        <Paper ref={paperRef}>
           <ClickAwayListener onClickAway={handleClose}>
             <MenuList onClick={handleItemClick}>{menuItems}</MenuList>
           </ClickAwayListener>

package/src/SplitButton/useClickAway.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+// 监听事件的捕获阶段，用于 ClickAwayListener 无法监听的事件
+function useClickAway(ref: React.RefObject<HTMLElement> | null, onClickAway: (event: MouseEvent) => void) {
+  useEffect(() => {
+    function handleClick(event: MouseEvent) {
+      if (!ref || !ref.current) return;
+
+      // 如果点击事件目标在 menu 元素内，阻止菜单关闭
+      if (ref.current.contains(event.target as Node)) {
+        return;
+      }
+
+      onClickAway(event);
+    }
+
+    document.addEventListener('click', handleClick, true);
+    return () => {
+      document.removeEventListener('click', handleClick, true);
+    };
+  }, [ref, onClickAway]);
+}
+
+export default useClickAway;