@arcblock/ux 3.0.21 → 3.0.22

package/lib/Theme/theme-provider.js

@@ -1,39 +1,40 @@
-import { jsx as m, jsxs as j } from "react/jsx-runtime";
-import { createContext as F, use as G, useState as E, useRef as H, useMemo as f, useCallback as x, useEffect as h } from "react";
-import { useTheme as M, StyledEngineProvider as I, ThemeProvider as N, CssBaseline as O, GlobalStyles as U } from "@mui/material";
-import { deepmerge as A } from "@mui/utils";
-import y from "lodash/set";
-import { useDebounceFn as K } from "ahooks";
-import { getBlockletThemeOptions as V, BLOCKLET_THEME_PREFER_KEY as b, isValidThemeMode as W, getDefaultThemePrefer as $ } from "@blocklet/theme";
-import { useLocationState as q } from "../hooks/use-location-state.js";
-import { createTheme as T, lazyCreateDefaultTheme as z, isUxTheme as Y, isTheme as J } from "./theme.js";
-const Q = T(), P = F({});
-function X() {
-  return G(P);
+import { jsx as m, jsxs as F } from "react/jsx-runtime";
+import { createContext as G, use as H, useState as y, useRef as I, useMemo as f, useCallback as $, useEffect as b } from "react";
+import { useTheme as _, StyledEngineProvider as N, ThemeProvider as O, CssBaseline as K, GlobalStyles as V } from "@mui/material";
+import { deepmerge as W } from "@mui/utils";
+import B from "lodash/set";
+import q from "lodash/isUndefined";
+import { useDebounceFn as z } from "ahooks";
+import { getBlockletThemeOptions as Y, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as J, getDefaultThemePrefer as M } from "@blocklet/theme";
+import { useLocationState as Q } from "../hooks/use-location-state.js";
+import { createTheme as C, lazyCreateDefaultTheme as X, isUxTheme as Z, isTheme as ee } from "./theme.js";
+const te = C(), L = G({});
+function R() {
+  return H(L);
 }
-const B = (l) => l ? l === "system" ? $({ theme: { prefer: "system" } }) : l : $();
-function Z({ className: l = void 0 }) {
-  const t = M();
+const P = (l) => l ? l === "system" ? M({ theme: { prefer: "system" } }) : l : M();
+function oe({ className: l = void 0 }) {
+  const t = _();
   if (t.palette.mode === "dark") {
-    const r = "transparent", a = t.palette.grey[300], o = (l || "").trim().split(/\s+/).filter(Boolean).map((u) => u.startsWith(".") ? u : `.${u}`).join(" "), s = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", i = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", c = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", g = o ? `${o}, ${o} *` : "*";
+    const n = "transparent", a = t.palette.grey[300], o = (l || "").trim().split(/\s+/).filter(Boolean).map((u) => u.startsWith(".") ? u : `.${u}`).join(" "), g = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", r = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", i = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", c = o ? `${o}, ${o} *` : "*";
     return /* @__PURE__ */ m(
-      U,
+      V,
       {
         styles: {
           // Chrome, Safari, Edge
           "@supports selector(::-webkit-scrollbar)": {
-            [s]: {
+            [g]: {
               width: "12px",
               height: "12px"
             },
-            [i]: {
-              background: r
+            [r]: {
+              background: n
             },
-            [c]: {
+            [i]: {
               background: a,
               borderRadius: "6px",
               border: "2px solid",
-              borderColor: r,
+              borderColor: n,
               backgroundClip: "padding-box",
               "&:hover": {
                 background: t.palette.grey[400],
@@ -43,9 +44,9 @@ function Z({ className: l = void 0 }) {
           },
           // Firefox
           "@supports not selector(::-webkit-scrollbar)": {
-            [g]: {
+            [c]: {
               scrollbarWidth: "auto",
-              scrollbarColor: `${a} ${r}`
+              scrollbarColor: `${a} ${n}`
             }
           }
         }
@@ -54,97 +55,99 @@ function Z({ className: l = void 0 }) {
   }
   return null;
 }
-function _({
+function D({
   children: l = null,
-  theme: t = Q,
-  injectFirst: r = !0,
+  theme: t = te,
+  injectFirst: n = !0,
   darkSchemeClass: a = ""
 }) {
-  const o = f(() => typeof t == "function" || J(t) ? t : T(t), [t]);
+  const o = f(() => typeof t == "function" || ee(t) ? t : C(t), [t]);
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    /* @__PURE__ */ m(I, { injectFirst: r, children: /* @__PURE__ */ j(N, { theme: o, children: [
-      /* @__PURE__ */ m(O, {}),
-      /* @__PURE__ */ m(Z, { className: a }),
+    /* @__PURE__ */ m(N, { injectFirst: n, children: /* @__PURE__ */ F(O, { theme: o, children: [
+      /* @__PURE__ */ m(K, {}),
+      /* @__PURE__ */ m(oe, { className: a }),
       l
     ] }) })
   );
 }
-function ee({
+function re({
   children: l = null,
   theme: t = void 0,
-  prefer: r = void 0,
+  prefer: n = void 0,
   disableBlockletTheme: a = !1,
   ...o
 }) {
-  const [s, i] = E(() => B(r)), [c, g] = E(null), u = M(), k = q(), d = H(null), { run: w } = K(
+  const g = R(), [r, i] = y(() => P(n)), [c, u] = y(null), k = _(), p = Q(), d = I(null), w = q(g.toggleMode), { run: S } = z(
     (e) => {
-      g(e);
+      u(e);
     },
     {
       wait: 200
     }
-  ), C = f(() => {
+  ), v = f(() => {
     let e = {};
     if (t) {
-      const R = z(s);
+      const U = X(r);
       if (typeof t == "function") {
-        const D = R();
-        Y(u) ? e = { ...t(u, { mode: s }) } : e = { ...t(D, { mode: s }) };
+        const j = U();
+        Z(k) ? e = { ...t(k, { mode: r }) } : e = { ...t(j, { mode: r }) };
       } else
         e = { ...t };
     }
-    let n = s;
-    return c && (n = c.mode || "light", e = A(e, V(n, c))), y(e, "palette.mode", n), y(e, "mode", n), e;
-  }, [s, t, u, c]), p = f(() => T({ ...C, disableBlockletTheme: !!c || a }), [C, a, c]), S = x(() => {
-    const e = s === "light" ? "dark" : "light";
-    i(e), sessionStorage.removeItem(b), localStorage.setItem(b, e);
-  }, [s, i]), v = x(
+    let s = r;
+    return c && (s = c.mode || "light", e = W(e, Y(s, c))), B(e, "palette.mode", s), B(e, "mode", s), e;
+  }, [r, t, k, c]), T = f(() => C({ ...v, disableBlockletTheme: !!c || a }), [v, a, c]), E = $(() => {
+    const e = r === "light" ? "dark" : "light";
+    i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
+  }, [r, i]), x = $(
     (e) => {
-      s !== e && (i(e), sessionStorage.removeItem(b), localStorage.setItem(b, e));
+      r !== e && (i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
     },
-    [s, i]
-  ), L = f(
+    [r, i]
+  ), A = f(
     () => ({
-      mode: s,
-      toggleMode: S,
-      changeMode: v,
-      prefer: r
+      mode: r,
+      toggleMode: E,
+      changeMode: x,
+      prefer: n
     }),
-    [s, r, S, v]
+    [r, n, E, x]
   );
-  return h(() => {
-    i(B(r));
-  }, [r, i, k.search]), h(() => {
-    const e = new URLSearchParams(k.search).get("theme");
-    W(e) && sessionStorage.setItem(b, e);
-  }, [k.search]), h(() => {
+  return b(() => {
+    i(P(n));
+  }, [n, i, p.search]), b(() => {
+    const e = new URLSearchParams(p.search).get("theme");
+    J(e) && sessionStorage.setItem(h, e);
+  }, [p.search]), b(() => {
     d.current || (d.current = document.querySelector('meta[name="theme-color"]'));
-    const e = p.palette.background.default;
+    const e = T.palette.background.default;
     if (d.current)
       d.current.setAttribute("content", e);
     else {
-      const n = document.createElement("meta");
-      n.name = "theme-color", n.content = e, document.head.appendChild(n), d.current = n;
+      const s = document.createElement("meta");
+      s.name = "theme-color", s.content = e, document.head.appendChild(s), d.current = s;
     }
-  }, [p.palette.background.default]), h(() => {
-    const e = (n) => {
-      n.origin === window.origin && n.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(n.data.payload);
+  }, [T.palette.background.default]), b(() => {
+    const e = (s) => {
+      s.origin === window.origin && s.data.type === "THEME_BUILDER_CONFIG_CHANGED" && S(s.data.payload);
     };
     return window.addEventListener("message", e), () => window.removeEventListener("message", e);
-  }, [w]), /* @__PURE__ */ m(P, { value: L, children: /* @__PURE__ */ m(_, { theme: p, ...o, children: l }) });
+  }, [S]), b(() => {
+    w && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
+  }, [w, r]), /* @__PURE__ */ m(L, { value: A, children: /* @__PURE__ */ m(D, { theme: T, ...o, children: l }) });
 }
-function me({
+function he({
   children: l = null,
   prefer: t = void 0,
-  enableColorScheme: r = !1,
+  enableColorScheme: n = !1,
   ...a
 }) {
-  const { toggleMode: o } = X();
-  return r || t || !o ? /* @__PURE__ */ m(ee, { prefer: t, ...a, children: l }) : /* @__PURE__ */ m(_, { ...a, children: l });
+  const { toggleMode: o } = R();
+  return n || t || !o ? /* @__PURE__ */ m(re, { prefer: t, ...a, children: l }) : /* @__PURE__ */ m(D, { ...a, children: l });
 }
 export {
-  P as ColorSchemeContext,
-  me as default,
-  X as useColorScheme
+  L as ColorSchemeContext,
+  he as default,
+  R as useColorScheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.21",
+  "version": "3.0.22",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "c14ba0a6dd6fef59a623fd3b0e07855b9dc55076",
+  "gitHead": "21018768a5b825c02861281925afb54efdf0aa4c",
   "dependencies": {
-    "@arcblock/bridge": "3.0.21",
+    "@arcblock/bridge": "3.0.22",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.21",
-    "@arcblock/nft-display": "3.0.21",
-    "@arcblock/react-hooks": "3.0.21",
+    "@arcblock/icons": "3.0.22",
+    "@arcblock/nft-display": "3.0.22",
+    "@arcblock/react-hooks": "3.0.22",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.21",
+    "@blocklet/theme": "3.0.22",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/ContactForm/index.tsx

@@ -222,7 +222,6 @@ const Form = styled('form', {
     font-size: 30px;
     text-align: center;
     color: ${(props) => {
-      // @ts-expect-error
       return props.theme.typography.color.main;
     }};
   }
@@ -239,7 +238,6 @@ const Form = styled('form', {
       border: none;
       border-bottom: 1px solid
         ${(props) => {
-          // @ts-expect-error
           return props.theme.typography.color.main;
         }};
       font-size: 16px;

package/src/Footer/index.tsx

@@ -85,7 +85,6 @@ const Container = styled('div', {
 
     .footer-item {
       color: ${(props) => {
-        // @ts-expect-error
         return props.theme.palette.text.hint;
       }};
       display: flex;

package/src/Header/header.tsx

@@ -167,7 +167,6 @@ const Root = styled(Box)`
     .header-brand-desc {
       margin-top: 4px;
       color: ${({ theme }) => {
-        // @ts-expect-error
         return theme.palette.text.hint;
       }};
     }

package/src/Layout/dashboard/sidebar.tsx

@@ -178,7 +178,6 @@ const Root = styled('div')`
     }
     .layout-sidebar-group {
       color: ${(props) => {
-        // @ts-expect-error
         return props.theme.palette.text.hint;
       }};
       .layout-sidebar-group-title {

package/src/Layout/dashboard-legacy/header.tsx

@@ -37,7 +37,6 @@ const StyledAppBar = styled(AppBar)`
     font-size: 24px;
     font-weight: 800;
     color: ${(props) => {
-      // @ts-expect-error
       return props.theme.typography.color.main;
     }};
     text-transform: uppercase;
@@ -48,7 +47,6 @@ const StyledAppBar = styled(AppBar)`
     font-size: 14px;
     line-height: 1.71;
     color: ${(props) => {
-      // @ts-expect-error
       return props.theme.typography.color.gray;
     }};
   }

package/src/Layout/dashboard-legacy/sidebar.tsx

@@ -52,7 +52,6 @@ export default function Sidebar({
             <ImageIcon
               name={images[name]}
               size={36}
-              // @ts-expect-error
               color={selected ? '#00c2c4' : theme.typography.color.main}
               prefix={prefix}
               showBadge={showBadge}

package/src/SessionUser/components/session-user-switch.tsx

@@ -106,7 +106,6 @@ export default function SessionUserSwitch({
     return (
       <SessionUserItem
         sessionItem={currentSession}
-        // @ts-expect-error
         statusContent={<Icon icon={SwapHorizRoundedIcon} color={palette.text.hint} />}
         sx={{
           borderRadius: 1,

package/src/Theme/theme-provider.tsx

@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 import set from 'lodash/set';
+import isUndefined from 'lodash/isUndefined';
 import { useDebounceFn } from 'ahooks';
 import {
   BLOCKLET_THEME_PREFER_KEY,
@@ -171,11 +172,13 @@ function ColorSchemeProvider({
   disableBlockletTheme = false,
   ...rest
 }: ThemeProviderProps) {
+  const parentColorScheme = useColorScheme();
   const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
   const [themeBuilderConfig, setThemeBuilderConfig] = useState<BlockletThemeMeta | null>(null);
   const parentTheme = useTheme();
   const location = useLocationState();
   const metaThemeColorRef = useRef<HTMLMetaElement | null>(null);
+  const isTopColorScheme = isUndefined(parentColorScheme.toggleMode);
 
   // 使用防抖函数包装 setThemeBuilderConfig，避免过于频繁的主题修改
   const { run: debouncedSetThemeBuilderConfig } = useDebounceFn(
@@ -301,6 +304,17 @@ function ColorSchemeProvider({
     return () => window.removeEventListener('message', handleMessage);
   }, [debouncedSetThemeBuilderConfig]);
 
+  // 修改 document[data-theme] 属性
+  useEffect(() => {
+    if (isTopColorScheme) {
+      if (mode === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      } else {
+        document.documentElement.removeAttribute('data-theme');
+      }
+    }
+  }, [isTopColorScheme, mode]);
+
   return (
     <ColorSchemeContext value={colorSchemeValue}>
       <BaseThemeProvider theme={theme} {...rest}>

package/src/withTheme/index.tsx

@@ -17,7 +17,6 @@ function withTheme<P extends object>(
   // @ts-expect-error
   const theme = createTheme({ mode, pageWidth, palette, typography });
 
-  // @ts-expect-error
   const color = theme.typography.color.main;
   const globalStyles = css`
     font-family: ${theme.typography.fontFamily};