@arcblock/ux 3.1.41 → 3.1.42

package/lib/Header/header.js

@@ -1,5 +1,5 @@
-import { jsx as r, jsxs as t, Fragment as y } from "react/jsx-runtime";
-import { Box as d, Container as w } from "@mui/material";
+import { jsx as r, jsxs as t, Fragment as w } from "react/jsx-runtime";
+import { Box as d, Container as y } from "@mui/material";
 import { useRef as v, useState as N, useEffect as k } from "react";
 import z from "./auto-hidden.js";
 import { styled as W } from "../Theme/index.js";
@@ -14,24 +14,24 @@ function I({
   prepend: f = null,
   align: o = "left",
   maxWidth: x = !1,
-  homeLink: i = "/",
+  homeLink: a = "/",
   ...m
 }) {
-  const a = v(null), [g, u] = N("0px"), b = { minWidth: g };
+  const i = v(null), [g, u] = N("0px"), b = { minWidth: g };
   return k(() => {
     const { searchParams: n } = new URL(window.location.href);
-    n.get("inviter") && window.localStorage.setItem("inviter", n.get("inviter")), a.current && u(`${a.current.offsetWidth}px`);
-  }, []), /* @__PURE__ */ r(B, { ...m, children: /* @__PURE__ */ t(w, { maxWidth: x, className: "header-container", children: [
+    n.get("inviter") && window.localStorage.setItem("inviter", n.get("inviter")), i.current && u(`${i.current.offsetWidth}px`);
+  }, []), /* @__PURE__ */ r(B, { ...m, children: /* @__PURE__ */ t(y, { maxWidth: x, className: "header-container", children: [
     f,
     /* @__PURE__ */ r("div", { className: "header-brand-wrapper", style: b, children: (() => {
-      const n = /* @__PURE__ */ t(y, { children: [
-        e && /* @__PURE__ */ r("div", { className: "header-logo", ref: a, children: e }),
+      const n = /* @__PURE__ */ t(w, { children: [
+        e && /* @__PURE__ */ r("div", { className: "header-logo", ref: i, children: e }),
         l && /* @__PURE__ */ r(z, { height: 44, sx: { flexShrink: { xs: 1 } }, children: /* @__PURE__ */ t("div", { className: "header-brand", children: [
           /* @__PURE__ */ r("div", { className: "header-brand-title", children: /* @__PURE__ */ r("h2", { children: l }) }),
           /* @__PURE__ */ r("div", { className: "header-brand-desc", children: s })
         ] }) })
       ] });
-      return typeof i == "function" ? i(n) : /* @__PURE__ */ r("a", { href: i, children: n });
+      return typeof a == "function" ? a(n) : /* @__PURE__ */ r("a", { href: a, children: n });
     })() }),
     /* @__PURE__ */ r("div", { className: "header-brand-addon", children: h }),
     o === "right" && /* @__PURE__ */ r(
@@ -138,7 +138,7 @@ const B = W(d)`
     .header-menu {
       display: inline-block;
     }
-    .header-logo {
+    .header-brand-wrapper .header-logo {
       height: 32px;
     }
     .header-brand {

package/lib/Header/responsive-header.js

@@ -1,22 +1,22 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { useState as f } from "react";
-import { useReactive as y, useCreation as v } from "ahooks";
-import { Close as h, Menu as g } from "@mui/icons-material";
-import { Container as b, useTheme as x, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
-import p from "./header.js";
-import { styled as i } from "../Theme/index.js";
-function z({ prepend: n, children: r = null, ...s }) {
-  const a = x(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), u = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = y({
+import { useReactive as v, useCreation as g } from "ahooks";
+import { Close as y, Menu as h } from "@mui/icons-material";
+import { Container as x, useTheme as b, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
+import u from "./header.js";
+import { styled as s } from "../Theme/index.js";
+function z({ prepend: n, children: r = null, ...i }) {
+  const a = b(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), d = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = v({
     changed: !1,
     value: "",
     priority: ""
   });
-  return v(() => {
+  return g(() => {
     if (document.documentElement?.style) {
-      const d = () => {
+      const p = () => {
         e.changed && (e.value ? document.documentElement.style.setProperty("overflow", e.value, e.priority) : document.documentElement.style.removeProperty("overflow"), e.value = "", e.priority = "", e.changed = !1);
       };
-      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : d(), d;
+      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : p(), p;
     }
     return () => {
     };
@@ -30,12 +30,12 @@ function z({ prepend: n, children: r = null, ...s }) {
           className: "header-menu",
           "aria-label": "header menu button",
           onClick: () => m(!t),
-          children: t ? /* @__PURE__ */ o(h, {}) : /* @__PURE__ */ o(g, {})
+          children: t ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(h, {})
         }
       ),
-      ...s,
+      ...i,
       children: [
-        !l && u,
+        !l && d,
         l && /* @__PURE__ */ o(
           P,
           {
@@ -53,33 +53,41 @@ function z({ prepend: n, children: r = null, ...s }) {
             },
             slotProps: {
               paper: {
-                style: {
+                sx: {
                   top: 64,
                   bottom: 0,
                   boxShadow: "none",
                   backgroundImage: "none",
-                  backgroundColor: a.palette.background.paper
+                  backgroundColor: a.palette.background.paper,
+                  "& .navmenu.navmenu--inline": {
+                    margin: 0,
+                    padding: 0
+                  }
                 }
               }
             },
-            children: /* @__PURE__ */ o(M, { children: u })
+            children: /* @__PURE__ */ o(M, { children: d })
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ o(p, { prepend: n, ...s });
+  ) : /* @__PURE__ */ o(u, { prepend: n, ...i });
 }
-const C = i(p)`
+const C = s(u)`
   .header-menu {
     display: none;
   }
   ${(n) => n.theme.breakpoints.down("md")} {
     .header-menu {
       display: flex;
-      margin-right: 12px;
+      padding-left: 6px;
+      padding-right: 6px;
+      min-width: 0;
+      margin-left: -4px;
+      margin-right: 8px;
     }
   }
-`, M = i(b)`
+`, M = s(x)`
   padding-top: 8px;
   padding-bottom: 16px;
   .navmenu {

package/lib/NavMenu/style.js

@@ -158,7 +158,7 @@ const o = i("nav", {
   // inline 布局中
   "&.navmenu-item--inline": {
     margin: 0,
-    padding: "0 16px",
+    padding: 0,
     minHeight: "48px",
     lineHeight: "48px",
     flexWrap: "wrap"
@@ -207,7 +207,6 @@ const o = i("nav", {
       position: "static",
       transform: "none",
       flex: "1 0 100%",
-      margin: "0 -16px",
       padding: 0,
       height: 0,
       overflow: "hidden",
@@ -220,7 +219,7 @@ const o = i("nav", {
     },
     ".navmenu-sub__list": {
       padding: 0,
-      paddingLeft: "16px",
+      paddingLeft: "24px",
       boxShadow: "none"
     },
     ".navmenu-item__content": {

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.41", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
+const e = "3.1.42", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.41",
+  "version": "3.1.42",
   "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": "21979ee3abb716f0201960abe9c85d8f0a8f291c",
+  "gitHead": "747490bf0ea403cb53f961ae64f0544a75c13703",
   "dependencies": {
-    "@arcblock/bridge": "3.1.41",
+    "@arcblock/bridge": "3.1.42",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.41",
-    "@arcblock/nft-display": "3.1.41",
-    "@arcblock/react-hooks": "3.1.41",
+    "@arcblock/icons": "3.1.42",
+    "@arcblock/nft-display": "3.1.42",
+    "@arcblock/react-hooks": "3.1.42",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.41",
+    "@blocklet/theme": "3.1.42",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Header/header.tsx

@@ -195,7 +195,7 @@ const Root = styled(Box)`
     .header-menu {
       display: inline-block;
     }
-    .header-logo {
+    .header-brand-wrapper .header-logo {
       height: 32px;
     }
     .header-brand {

package/src/Header/responsive-header.tsx

@@ -94,12 +94,16 @@ function ResponsiveHeader({ prepend, children = null, ...rest }: ResponsiveHeade
           }}
           slotProps={{
             paper: {
-              style: {
+              sx: {
                 top: 64,
                 bottom: 0,
                 boxShadow: 'none',
                 backgroundImage: 'none',
                 backgroundColor: theme.palette.background.paper,
+                '& .navmenu.navmenu--inline': {
+                  margin: 0,
+                  padding: 0,
+                },
               },
             },
           }}>
@@ -117,7 +121,11 @@ const Root = styled(Header)`
   ${(props) => props.theme.breakpoints.down('md')} {
     .header-menu {
       display: flex;
-      margin-right: 12px;
+      padding-left: 6px;
+      padding-right: 6px;
+      min-width: 0;
+      margin-left: -4px;
+      margin-right: 8px;
     }
   }
 `;

package/src/NavMenu/style.ts

@@ -173,7 +173,7 @@ export const NavMenuItem = styled('li', {
   // inline 布局中
   '&.navmenu-item--inline': {
     margin: 0,
-    padding: '0 16px',
+    padding: 0,
     minHeight: '48px',
     lineHeight: '48px',
     flexWrap: 'wrap',
@@ -225,7 +225,6 @@ export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
       position: 'static',
       transform: 'none',
       flex: '1 0 100%',
-      margin: '0 -16px',
       padding: 0,
       height: 0,
       overflow: 'hidden',
@@ -238,7 +237,7 @@ export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
     },
     '.navmenu-sub__list': {
       padding: 0,
-      paddingLeft: '16px',
+      paddingLeft: '24px',
       boxShadow: 'none',
     },
     '.navmenu-item__content': {