@arcblock/ux 3.3.6 → 3.3.8

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.6", s = { "@blocklet/js-sdk": "^1.17.6" }, n = {
+const e = "3.3.8", 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.6",
+  "version": "3.3.8",
   "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": "ee100e9010a13a124962ce7ef38c8378c6deca9b",
+  "gitHead": "b4c40eaa794d708a6d21b721306b8e1cf6fb00ce",
   "dependencies": {
-    "@arcblock/bridge": "3.3.6",
+    "@arcblock/bridge": "3.3.8",
     "@arcblock/did": "^1.27.16",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.3.6",
-    "@arcblock/nft-display": "3.3.6",
-    "@arcblock/react-hooks": "3.3.6",
+    "@arcblock/icons": "3.3.8",
+    "@arcblock/nft-display": "3.3.8",
+    "@arcblock/react-hooks": "3.3.8",
     "@blocklet/js-sdk": "^1.17.6",
-    "@blocklet/theme": "3.3.6",
+    "@blocklet/theme": "3.3.8",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

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;