@arcblock/ux 3.0.25 → 3.0.27

package/lib/Tag/index.js

@@ -5,7 +5,7 @@ import n from "lodash/isUndefined";
 import { mergeProps as x } from "../Util/index.js";
 import e from "../Colors/themes/default.js";
 import { styled as w } from "../Theme/index.js";
-const i = {
+const c = {
   error: {
     color: e.common.white,
     backgroundColor: e.error.main
@@ -27,18 +27,18 @@ const i = {
     backgroundColor: "#222"
   }
 };
-function a({ ...m }) {
-  const o = Object.assign({}, m);
+function p({ ...s }) {
+  const o = Object.assign({}, s);
   n(o.type) && (o.type = "primary"), n(o.content) && (o.content = ""), n(o.style) && (o.style = {}), n(o.className) && (o.className = "");
-  const p = x(o, a, ["style"]), { type: t, content: l, children: y, style: f, className: g, ...d } = p, { palette: s } = b(), c = Object.assign({}, i[t] || i.primary, f);
-  return s[t] && Object.assign(c, {
-    color: s[t].contrastText || e.common.white,
-    backgroundColor: s[t].main
-  }), /* @__PURE__ */ h(j, { component: "span", className: g, style: c, ...d, children: l || y });
+  const m = x(o, p, ["style"]), { type: t, content: l, children: y, style: f, className: g, ...d } = m, { palette: i } = b(), a = Object.assign({}, c[t] || c.primary, f);
+  return i[t] && Object.assign(a, {
+    color: i[t].contrastText || e.common.white,
+    backgroundColor: i[t].main
+  }), /* @__PURE__ */ h(j, { component: "span", className: g, style: a, ...d, children: l || y });
 }
-a.propTypes = {
+p.propTypes = {
   children: r.any.isRequired,
-  type: r.oneOf(Object.keys(i)),
+  type: r.oneOf(Object.keys(c)),
   content: r.string,
   className: r.string,
   style: r.oneOfType([r.object, r.string])
@@ -53,9 +53,9 @@ const j = w(u)`
     line-height: 20px;
     font-size: 12px;
     font-weight: 500;
-    border-radius: 4px;
+    border-radius: ${({ theme: s }) => s.shape.borderRadius * 0.5}px;
   }
 `;
 export {
-  a as default
+  p as default
 };

package/lib/Theme/theme-provider.d.ts

@@ -6,18 +6,20 @@ export interface ColorSchemeContextType {
     changeMode: (mode: PaletteMode) => void;
     prefer?: Prefer;
 }
-export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
-export declare function useColorScheme(): ColorSchemeContextType;
 export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
     mode: PaletteMode;
 }) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
+export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
+export declare function useColorScheme(): ColorSchemeContextType;
 interface BaseThemeProviderProps {
     children?: React.ReactNode;
     theme?: UxTheme;
     injectFirst?: boolean;
     /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
     darkSchemeClass?: string;
+    /** 禁用样式缓存 */
+    disableStyleCache?: boolean;
 }
 interface ColorSchemeProviderProps extends BaseThemeProviderProps {
     prefer?: Prefer;

package/lib/Theme/theme-provider.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.25",
+  "version": "3.0.27",
   "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": "4f1f8b69bdd71bd8dee091312a9923e6fb9b8f41",
+  "gitHead": "b1e137e0c74f4b58af16b1d75a65166b163cf65d",
   "dependencies": {
-    "@arcblock/bridge": "3.0.25",
+    "@arcblock/bridge": "3.0.27",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.25",
-    "@arcblock/nft-display": "3.0.25",
-    "@arcblock/react-hooks": "3.0.25",
+    "@arcblock/icons": "3.0.27",
+    "@arcblock/nft-display": "3.0.27",
+    "@arcblock/react-hooks": "3.0.27",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.25",
+    "@blocklet/theme": "3.0.27",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/CodeBlock/index.tsx

@@ -120,7 +120,9 @@ export default function CodeBlock({
 }
 
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-const Pre = styled('pre')`
+const Pre = styled('pre', {
+  shouldForwardProp: (prop) => prop !== 'sx',
+})`
   font-family: ${fontFamily};
   display: block;
   font-size: 14px;
@@ -130,9 +132,10 @@ const Pre = styled('pre')`
   word-wrap: break-word;
   text-align: left;
   border-radius: 5px;
-  border: 1px solid #dedede;
-  background: #222;
-  color: ${colors.common.white};
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.palette.divider};
+  background: ${({ theme }) => theme.palette.background.default};
+  color: ${({ theme }) => theme.palette.common.white};
   position: relative;
 
   .codeblock__inner {

package/src/Config/config-provider.tsx

@@ -20,6 +20,7 @@ export function ConfigProvider({
   prefer,
   disableBlockletTheme = false,
   enableColorScheme,
+  disableStyleCache,
   // locale provider
   locale,
   fallbackLocale,
@@ -34,7 +35,8 @@ export function ConfigProvider({
       darkSchemeClass={darkSchemeClass}
       prefer={prefer}
       disableBlockletTheme={disableBlockletTheme}
-      enableColorScheme={enableColorScheme}>
+      enableColorScheme={enableColorScheme}
+      disableStyleCache={disableStyleCache}>
       <LocaleProvider
         locale={locale}
         fallbackLocale={fallbackLocale}

package/src/NFTDisplay/preview.tsx

@@ -0,0 +1,84 @@
+import Modal from '@mui/material/Modal';
+import styled from '@emotion/styled';
+import NFTDisplay, { getNFTData } from '.';
+
+export interface NftInfo {
+  address: string;
+  data: Record<string, any>;
+  display: Record<string, any>;
+  issuer: string;
+}
+
+export default function NftPreview({
+  visible,
+  onClose,
+  nft,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  nft: NftInfo | null;
+}) {
+  if (!visible || !nft) {
+    return null;
+  }
+
+  return (
+    <NftPreviewRoot>
+      {/* Preview Modal */}
+      <Modal open={visible} onClose={onClose}>
+        <ModalRoot onClick={onClose}>
+          <NFTDisplay data={getNFTData(nft)} address={nft.address} inset />
+        </ModalRoot>
+      </Modal>
+    </NftPreviewRoot>
+  );
+}
+
+const NftPreviewRoot = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    .mask {
+      opacity: 1;
+    }
+  }
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+`;
+
+const ModalRoot = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+
+  img,
+  object {
+    max-width: 90vw;
+    max-height: 75vh;
+  }
+
+  .nft-display--inset {
+    > .MuiBox-root,
+    .nft-display__loading {
+      width: 75vmin;
+      height: 75vmin;
+    }
+  }
+`;

package/src/NavMenu/style.ts

@@ -141,7 +141,7 @@ export const NavMenuItem = styled('li', {
     '.navmenu-item__desc': {
       fontSize: '12px',
       lineHeight: 1,
-      color: theme.palette.grey[500],
+      color: theme.palette.text.secondary,
     },
     '&:hover': {
       background: theme.palette.action.hover,

package/src/RelativeTime/index.tsx

@@ -73,6 +73,7 @@ export interface RelativeTimeProps {
   placement?: TooltipProps['placement'];
   sx?: SxProps;
   format?: string;
+  mode?: 'all' | 'daysLeft'; // all: 显示所有内容，daysLeft: 只显示剩余天数
 }
 
 function useRelativeTime({
@@ -194,7 +195,6 @@ function UTCChip({
         color: 'inherit',
         cursor: 'pointer',
         border: '1px solid',
-        fontSize: '0.8rem',
         borderColor: 'divider',
         borderRadius: '20px',
         padding: '4px 8px',
@@ -220,6 +220,7 @@ export default function RelativeTime({
   disableTimezone = false,
   placement = 'top-end',
   format = 'lll',
+  mode = 'all',
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
@@ -234,41 +235,54 @@ export default function RelativeTime({
     format,
   });
 
-  if (type === 'all') {
-    return (
-      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
-        <Box
-          {...rest}
-          sx={[
-            {
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 0.5,
-            },
-            ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
-          ]}>
-          <Box component="span" {...rest} sx={{}}>
-            {innerContent}
-          </Box>
+  const allContent = (
+    <Box
+      {...rest}
+      sx={[
+        {
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.5,
+        },
+        ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+      ]}>
+      <Box component="span" {...rest} sx={{}}>
+        {innerContent}
+      </Box>
+
+      <Box component="span" sx={{ color: 'inherit' }}>
+        ·
+      </Box>
+
+      <Box component="span" sx={{ color: 'inherit' }}>
+        {relativeString}
+      </Box>
 
+      {!disableTimezone && (
+        <>
           <Box component="span" sx={{ color: 'inherit' }}>
             ·
           </Box>
 
-          <Box component="span" sx={{ color: 'text.secondary' }}>
-            {relativeString}
-          </Box>
+          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
+        </>
+      )}
+    </Box>
+  );
 
-          {!disableTimezone && (
-            <>
-              <Box component="span" sx={{ color: 'inherit' }}>
-                ·
-              </Box>
+  // 优先通过 mode 来决定显示什么内容
+  if (mode === 'daysLeft') {
+    return (
+      <Tooltip title={allContent} placement={placement} enterTouchDelay={0}>
+        <Box component="span">{relativeString}</Box>
+      </Tooltip>
+    );
+  }
 
-              <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
-            </>
-          )}
-        </Box>
+  if (type === 'all' && mode === 'all') {
+    return (
+      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
+        {allContent}
       </Tooltip>
     );
   }

package/src/Tag/index.jsx

@@ -101,6 +101,6 @@ const Span = styled(Typography)`
     line-height: 20px;
     font-size: 12px;
     font-weight: 500;
-    border-radius: 4px;
+    border-radius: ${({ theme }) => theme.shape.borderRadius * 0.5}px;
   }
 `;

package/src/Theme/Theme.stories.jsx

@@ -4,6 +4,7 @@ export { default as Shadows } from './demo/shadows';
 export { default as WithCustomKey } from './demo/with-custom-key';
 export { default as CustomFonts } from './demo/custom-fonts';
 export { default as UrlTheme } from './demo/url-theme';
+export { default as CodeBlock } from './demo/code-block';
 
 export default {
   title: 'Theme/Theme',