@arcblock/ux 3.0.21 → 3.0.23

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 I } from "react/jsx-runtime";
+import { createContext as N, use as O, useState as x, useRef as K, useMemo as g, useCallback as B, useEffect as b } from "react";
+import { useTheme as R, CssBaseline as V, StyledEngineProvider as W, ThemeProvider as q, GlobalStyles as z } from "@mui/material";
+import { deepmerge as Y } from "@mui/utils";
+import $ from "lodash/set";
+import J from "lodash/isUndefined";
+import { useDebounceFn as Q, useCreation as M } from "ahooks";
+import { getBlockletThemeOptions as X, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as Z, getDefaultThemePrefer as P } from "@blocklet/theme";
+import { useLocationState as ee } from "../hooks/use-location-state.js";
+import { createTheme as C, lazyCreateDefaultTheme as te, isUxTheme as oe, isTheme as re } from "./theme.js";
+const ne = C(), j = N({});
+function A() {
+  return O(j);
 }
-const B = (l) => l ? l === "system" ? $({ theme: { prefer: "system" } }) : l : $();
-function Z({ className: l = void 0 }) {
-  const t = M();
+const _ = (i) => i ? i === "system" ? P({ theme: { prefer: "system" } }) : i : P();
+function se({ className: i = void 0 }) {
+  const t = R();
   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", s = t.palette.grey[300], o = (i || "").trim().split(/\s+/).filter(Boolean).map((d) => d.startsWith(".") ? d : `.${d}`).join(" "), u = o ? `${o}::-webkit-scrollbar, ${o} *::-webkit-scrollbar` : "*::-webkit-scrollbar", r = o ? `${o}::-webkit-scrollbar-track, ${o} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", a = o ? `${o}::-webkit-scrollbar-thumb, ${o} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", c = o ? `${o}, ${o} *` : "*";
     return /* @__PURE__ */ m(
-      U,
+      z,
       {
         styles: {
           // Chrome, Safari, Edge
           "@supports selector(::-webkit-scrollbar)": {
-            [s]: {
+            [u]: {
               width: "12px",
               height: "12px"
             },
-            [i]: {
-              background: r
+            [r]: {
+              background: n
             },
-            [c]: {
-              background: a,
+            [a]: {
+              background: s,
               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: `${s} ${n}`
             }
           }
         }
@@ -54,97 +55,101 @@ function Z({ className: l = void 0 }) {
   }
   return null;
 }
-function _({
-  children: l = null,
-  theme: t = Q,
-  injectFirst: r = !0,
-  darkSchemeClass: a = ""
+let D = !1;
+const L = {};
+function U({
+  children: i = null,
+  theme: t = ne,
+  injectFirst: n = !0,
+  darkSchemeClass: s = ""
 }) {
-  const o = f(() => typeof t == "function" || J(t) ? t : T(t), [t]);
+  const o = g(() => typeof t == "function" || re(t) ? t : C(t), [t]), u = M(() => D ? null : (D = !0, /* @__PURE__ */ m(V, {})), []), r = M(() => L[s] ? null : (L[s] = !0, /* @__PURE__ */ m(se, { className: s })), [s]);
   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 }),
-      l
+    /* @__PURE__ */ m(W, { injectFirst: n, children: /* @__PURE__ */ I(q, { theme: o, children: [
+      u,
+      r,
+      i
     ] }) })
   );
 }
-function ee({
-  children: l = null,
+function le({
+  children: i = null,
   theme: t = void 0,
-  prefer: r = void 0,
-  disableBlockletTheme: a = !1,
+  prefer: n = void 0,
+  disableBlockletTheme: s = !1,
   ...o
 }) {
-  const [s, i] = E(() => B(r)), [c, g] = E(null), u = M(), k = q(), d = H(null), { run: w } = K(
+  const u = A(), [r, a] = x(() => _(n)), [c, d] = x(null), p = R(), k = ee(), f = K(null), S = J(u.toggleMode), { run: w } = Q(
     (e) => {
-      g(e);
+      d(e);
     },
     {
       wait: 200
     }
-  ), C = f(() => {
+  ), v = g(() => {
     let e = {};
     if (t) {
-      const R = z(s);
+      const G = te(r);
       if (typeof t == "function") {
-        const D = R();
-        Y(u) ? e = { ...t(u, { mode: s }) } : e = { ...t(D, { mode: s }) };
+        const H = G();
+        oe(p) ? e = { ...t(p, { mode: r }) } : e = { ...t(H, { 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 l = r;
+    return c && (l = c.mode || "light", e = Y(e, X(l, c))), $(e, "palette.mode", l), $(e, "mode", l), e;
+  }, [r, t, p, c]), T = g(() => C({ ...v, disableBlockletTheme: !!c || s }), [v, s, c]), E = B(() => {
+    const e = r === "light" ? "dark" : "light";
+    a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
+  }, [r, a]), y = B(
     (e) => {
-      s !== e && (i(e), sessionStorage.removeItem(b), localStorage.setItem(b, e));
+      r !== e && (a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
     },
-    [s, i]
-  ), L = f(
+    [r, a]
+  ), F = g(
     () => ({
-      mode: s,
-      toggleMode: S,
-      changeMode: v,
-      prefer: r
+      mode: r,
+      toggleMode: E,
+      changeMode: y,
+      prefer: n
     }),
-    [s, r, S, v]
+    [r, n, E, y]
   );
-  return h(() => {
-    i(B(r));
-  }, [r, i, k.search]), h(() => {
+  return b(() => {
+    a(_(n));
+  }, [n, a, k.search]), b(() => {
     const e = new URLSearchParams(k.search).get("theme");
-    W(e) && sessionStorage.setItem(b, e);
-  }, [k.search]), h(() => {
-    d.current || (d.current = document.querySelector('meta[name="theme-color"]'));
-    const e = p.palette.background.default;
-    if (d.current)
-      d.current.setAttribute("content", e);
+    Z(e) && sessionStorage.setItem(h, e);
+  }, [k.search]), b(() => {
+    f.current || (f.current = document.querySelector('meta[name="theme-color"]'));
+    const e = T.palette.background.default;
+    if (f.current)
+      f.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 l = document.createElement("meta");
+      l.name = "theme-color", l.content = e, document.head.appendChild(l), f.current = l;
     }
-  }, [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 = (l) => {
+      l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(l.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 }) });
+  }, [w]), b(() => {
+    S && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
+  }, [S, r]), /* @__PURE__ */ m(j, { value: F, children: /* @__PURE__ */ m(U, { theme: T, ...o, children: i }) });
 }
-function me({
-  children: l = null,
+function pe({
+  children: i = null,
   prefer: t = void 0,
-  enableColorScheme: r = !1,
-  ...a
+  enableColorScheme: n = !1,
+  ...s
 }) {
-  const { toggleMode: o } = X();
-  return r || t || !o ? /* @__PURE__ */ m(ee, { prefer: t, ...a, children: l }) : /* @__PURE__ */ m(_, { ...a, children: l });
+  const { toggleMode: o } = A();
+  return n || t || !o ? /* @__PURE__ */ m(le, { prefer: t, ...s, children: i }) : /* @__PURE__ */ m(U, { ...s, children: i });
 }
 export {
-  P as ColorSchemeContext,
-  me as default,
-  X as useColorScheme
+  j as ColorSchemeContext,
+  pe as default,
+  A as useColorScheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.21",
+  "version": "3.0.23",
   "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": "360a929c8fe8cd2a63b04eda4c5315b096d39473",
   "dependencies": {
-    "@arcblock/bridge": "3.0.21",
+    "@arcblock/bridge": "3.0.23",
     "@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.23",
+    "@arcblock/nft-display": "3.0.23",
+    "@arcblock/react-hooks": "3.0.23",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.21",
+    "@blocklet/theme": "3.0.23",
     "@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,7 +11,8 @@ import {
 } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 import set from 'lodash/set';
-import { useDebounceFn } from 'ahooks';
+import isUndefined from 'lodash/isUndefined';
+import { useCreation, useDebounceFn } from 'ahooks';
 import {
   BLOCKLET_THEME_PREFER_KEY,
   getDefaultThemePrefer,
@@ -128,6 +129,9 @@ interface BaseThemeProviderProps {
   darkSchemeClass?: string;
 }
 
+let injectedCssBaseline = false;
+const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
+
 /** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children = null,
@@ -146,12 +150,26 @@ function BaseThemeProvider({
     return createTheme(theme);
   }, [theme]);
 
+  const cssBaseline = useCreation(() => {
+    if (injectedCssBaseline) return null;
+
+    injectedCssBaseline = true;
+    return <CssBaseline />;
+  }, []);
+
+  const darkSchemeStyles = useCreation(() => {
+    if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
+
+    injectedDarkSchemeStylesMap[darkSchemeClass] = true;
+    return <DarkSchemeStyles className={darkSchemeClass} />;
+  }, [darkSchemeClass]);
+
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={_theme}>
-        <CssBaseline />
-        <DarkSchemeStyles className={darkSchemeClass} />
+        {cssBaseline}
+        {darkSchemeStyles}
         {children}
       </MuiThemeProvider>
     </StyledEngineProvider>
@@ -171,11 +189,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 +321,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};