@arcblock/ux 3.3.3 → 3.3.4

package/lib/DIDConnect/with-container.js

@@ -1,14 +1,14 @@
 import { jsx as e, jsxs as F } from "react/jsx-runtime";
-import { memo as E, createElement as H, useState as I, useRef as K } from "react";
+import { memo as I, createElement as E, useState as H, useRef as K } from "react";
 import { Backdrop as Q, useMediaQuery as U, useTheme as V, Box as d, Drawer as q, SwipeableDrawer as J, Dialog as X, DialogContent as Y } from "@mui/material";
 import { useDebounce as Z, useMemoizedFn as v } from "ahooks";
 import { useBrowser as oo } from "@arcblock/react-hooks";
 import eo from "color-convert";
 import "../Theme/theme.js";
 import "../Theme/theme-provider.js";
-import { mergeSx as ro } from "../Util/style.js";
+import { mergeSx as no } from "../Util/style.js";
 import { hexToRgba as c } from "../Util/index.js";
-const D = E(({ ref: s, ...m }) => /* @__PURE__ */ H(
+const D = I(({ ref: s, ...m }) => /* @__PURE__ */ E(
   Q,
   {
     open: !0,
@@ -27,18 +27,18 @@ function xo(s) {
     popup: y = !1,
     open: P = !1,
     hideCloseButton: h = !1,
-    ...r
+    ...n
   }) {
-    const [a, g] = I("#fff"), f = K(null), B = oo(), L = U("(max-width:640px)");
-    let n = "page";
-    y && (n = "dialog", L && B.mobile.any && (n = "drawer"));
-    const _ = V(), p = P, z = _?.transitions?.duration?.leavingScreen || 500, M = Z(p, {
-      wait: z
+    const [a, g] = H("#fff"), f = K(null), B = oo(), L = U("(max-width:640px)");
+    let r = "page";
+    y && (r = "dialog", L && B.mobile.any && (r = "drawer"));
+    const z = V(), p = P, _ = z?.transitions?.duration?.leavingScreen || 500, M = Z(p, {
+      wait: _
     }), w = v(() => {
       const o = new URLSearchParams(window.location.search);
       o.get("magicToken") && o.delete("magicToken"), o.toString() && window.history.replaceState({}, "", `${window.location.pathname}?${o.toString()}`);
     }), k = (o, t) => {
-      ["backdropClick", "escapeKeyDown"].includes(t) || (w(), r?.onClose());
+      ["backdropClick", "escapeKeyDown"].includes(t) || (w(), n?.onClose());
     }, C = M || p, T = h ? q : J, A = eo.hex.hsl(a), [S, $, i] = A, u = [0, 30, 60, 30, 0, 30, 60, 30], j = Math.max(...u), O = Math.min(...u);
     let x = !1;
     (i * (100 + j) / 100 > 100 || i * (100 + O) / 100 < 0) && (x = !0);
@@ -48,7 +48,7 @@ function xo(s) {
     }).join(", ")})`, G = `linear-gradient(45deg, ${u.map((o) => {
       let t = i * (100 + o) / 100, l = 0.2;
       return x ? l = 0.3 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${S}, ${$}%, ${t}%, ${l})`;
-    }).join(", ")})`, R = r.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
+    }).join(", ")})`, R = n.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
       overflow: "visible",
       "&::before, &::after": {
         content: '""',
@@ -79,7 +79,7 @@ function xo(s) {
           backgroundPosition: "0 0"
         }
       }
-    }, N = r.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
+    }, N = n.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
       animation: "glowBreathe 7s linear infinite",
       ".did-connect__root": {
         backgroundColor: "transparent"
@@ -98,13 +98,13 @@ function xo(s) {
         }
       }
     }, b = v(() => {
-      w(), r?.onClose?.();
+      w(), n?.onClose?.();
     });
-    return n === "page" ? /* @__PURE__ */ e(
+    return r === "page" ? /* @__PURE__ */ e(
       d,
       {
         className: "did-connect__container-page",
-        sx: ro(R, {
+        sx: no(R, {
           borderRadius: 1,
           position: "relative",
           zIndex: 1
@@ -120,11 +120,11 @@ function xo(s) {
               zIndex: 2,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ e(s, { ...r, onClose: b, setColor: g, hideCloseButton: !0, mode: n })
+            children: /* @__PURE__ */ e(s, { ...n, onClose: b, setColor: g, hideCloseButton: !0, mode: r })
           }
         )
       }
-    ) : n === "drawer" ? /* @__PURE__ */ F(
+    ) : r === "drawer" ? /* @__PURE__ */ F(
       T,
       {
         className: "did-connect__container-drawer",
@@ -136,6 +136,10 @@ function xo(s) {
         slots: {
           backdrop: D
         },
+        sx: {
+          zIndex: "1400 !important"
+          // dialog 的默认 z-index 是 1300，在 dialog 中打开验证/登录时会被遮挡，这里强制设置为 1400，确保 Drawer 在最上层
+        },
         slotProps: {
           paper: {
             sx: {
@@ -184,7 +188,7 @@ function xo(s) {
                 width: 500,
                 height: "auto"
               },
-              children: C ? /* @__PURE__ */ e(s, { ...r, onClose: b, setColor: g, hideCloseButton: !0, mode: n }) : null
+              children: C ? /* @__PURE__ */ e(s, { ...n, onClose: b, setColor: g, hideCloseButton: !0, mode: r }) : null
             }
           )
         ]
@@ -223,11 +227,11 @@ function xo(s) {
             children: C ? /* @__PURE__ */ e(
               s,
               {
-                ...r,
+                ...n,
                 onClose: b,
                 setColor: g,
                 hideCloseButton: h,
-                mode: n
+                mode: r
               }
             ) : null
           }

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.3.3", s = { "@blocklet/js-sdk": "^1.17.6" }, n = {
+const e = "3.3.4", 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.3",
+  "version": "3.3.4",
   "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": "915561d073369e7a4e78a45349ae286a05b8c253",
+  "gitHead": "529197d1b0de7d864446ac88452033fd7f541bd2",
   "dependencies": {
-    "@arcblock/bridge": "3.3.3",
+    "@arcblock/bridge": "3.3.4",
     "@arcblock/did": "^1.27.16",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.3.3",
-    "@arcblock/nft-display": "3.3.3",
-    "@arcblock/react-hooks": "3.3.3",
+    "@arcblock/icons": "3.3.4",
+    "@arcblock/nft-display": "3.3.4",
+    "@arcblock/react-hooks": "3.3.4",
     "@blocklet/js-sdk": "^1.17.6",
-    "@blocklet/theme": "3.3.3",
+    "@blocklet/theme": "3.3.4",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/DIDConnect/with-container.tsx

@@ -224,6 +224,9 @@ export default function withContainer(Component: React.ComponentType<any>) {
           slots={{
             backdrop: BackdropWrap,
           }}
+          sx={{
+            zIndex: '1400 !important', // dialog 的默认 z-index 是 1300，在 dialog 中打开验证/登录时会被遮挡，这里强制设置为 1400，确保 Drawer 在最上层
+          }}
           slotProps={{
             paper: {
               sx: {