@arcblock/ux 3.0.26 → 3.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,88 +1,90 @@
1
- import { jsxs as t, jsx as r, Fragment as c } from "react/jsx-runtime";
1
+ import { jsxs as i, jsx as o, Fragment as u } from "react/jsx-runtime";
2
2
  import { useState as N } from "react";
3
3
  import C from "copy-to-clipboard";
4
4
  import e from "highlight.js/lib/core";
5
- import n from "highlight.js/lib/languages/javascript";
6
- import s from "highlight.js/lib/languages/typescript";
5
+ import s from "highlight.js/lib/languages/javascript";
6
+ import l from "highlight.js/lib/languages/typescript";
7
7
  import _ from "highlight.js/lib/languages/json";
8
8
  import z from "highlight.js/lib/languages/elixir";
9
9
  import F from "highlight.js/lib/languages/java";
10
10
  import M from "highlight.js/lib/languages/swift";
11
- import u from "highlight.js/lib/languages/objectivec";
11
+ import d from "highlight.js/lib/languages/objectivec";
12
12
  import f from "highlight.js/lib/languages/kotlin";
13
- import d from "highlight.js/lib/languages/protobuf";
14
- import h from "highlight.js/lib/languages/python";
15
- import x from "highlight.js/lib/languages/yaml";
16
- import y from "highlight.js/lib/languages/shell";
17
- import L from "highlight.js/lib/languages/diff";
18
- import b from "highlight.js/lib/languages/plaintext";
13
+ import h from "highlight.js/lib/languages/protobuf";
14
+ import x from "highlight.js/lib/languages/python";
15
+ import y from "highlight.js/lib/languages/yaml";
16
+ import L from "highlight.js/lib/languages/shell";
17
+ import b from "highlight.js/lib/languages/diff";
18
+ import w from "highlight.js/lib/languages/plaintext";
19
19
  import B from "highlight.js/lib/languages/markdown";
20
20
  import "highlight.js/styles/atom-one-dark.css";
21
- import { FileCopy as S, Check as T } from "@mui/icons-material";
22
- import o from "../Colors/themes/default.js";
23
- import { styled as A } from "../Theme/index.js";
24
- import E from "./LightBox.js";
25
- e.registerLanguage("javascript", n);
26
- e.registerLanguage("js", n);
27
- e.registerLanguage("jsx", n);
28
- e.registerLanguage("typescript", s);
29
- e.registerLanguage("ts", s);
30
- e.registerLanguage("tsx", s);
21
+ import { FileCopy as P, Check as S } from "@mui/icons-material";
22
+ import t from "../Colors/themes/default.js";
23
+ import { styled as T } from "../Theme/index.js";
24
+ import A from "./LightBox.js";
25
+ e.registerLanguage("javascript", s);
26
+ e.registerLanguage("js", s);
27
+ e.registerLanguage("jsx", s);
28
+ e.registerLanguage("typescript", l);
29
+ e.registerLanguage("ts", l);
30
+ e.registerLanguage("tsx", l);
31
31
  e.registerLanguage("json", _);
32
32
  e.registerLanguage("elixir", z);
33
33
  e.registerLanguage("java", F);
34
34
  e.registerLanguage("kotlin", f);
35
35
  e.registerLanguage("kt", f);
36
- e.registerLanguage("protobuf", d);
37
- e.registerLanguage("protobuffer", d);
38
- e.registerLanguage("python", h);
39
- e.registerLanguage("py", h);
40
- e.registerLanguage("yaml", x);
41
- e.registerLanguage("yml", x);
42
- e.registerLanguage("shell", y);
43
- e.registerLanguage("sh", y);
44
- e.registerLanguage("plaintext", b);
45
- e.registerLanguage("text", b);
46
- e.registerLanguage("patch", L);
47
- e.registerLanguage("diff", L);
36
+ e.registerLanguage("protobuf", h);
37
+ e.registerLanguage("protobuffer", h);
38
+ e.registerLanguage("python", x);
39
+ e.registerLanguage("py", x);
40
+ e.registerLanguage("yaml", y);
41
+ e.registerLanguage("yml", y);
42
+ e.registerLanguage("shell", L);
43
+ e.registerLanguage("sh", L);
44
+ e.registerLanguage("plaintext", w);
45
+ e.registerLanguage("text", w);
46
+ e.registerLanguage("patch", b);
47
+ e.registerLanguage("diff", b);
48
48
  e.registerLanguage("swift", M);
49
- e.registerLanguage("objectivec", u);
50
- e.registerLanguage("oc", u);
49
+ e.registerLanguage("objectivec", d);
50
+ e.registerLanguage("oc", d);
51
51
  e.registerLanguage("markdown", B);
52
- function ge({
53
- code: w = "",
54
- language: i = "text",
52
+ function le({
53
+ code: r = "",
54
+ language: a = "text",
55
55
  children: k = null,
56
56
  dark: j = !0,
57
57
  ...v
58
58
  }) {
59
- const [g, l] = N(!1), p = w || k, $ = () => {
60
- g || (C(p), l(!0), setTimeout(() => {
61
- l(!1);
59
+ const [g, p] = N(!1), c = r || k, $ = () => {
60
+ g || (C(c), p(!0), setTimeout(() => {
61
+ p(!1);
62
62
  }, 1500));
63
- }, m = /* @__PURE__ */ t(H, { ...v, children: [
64
- /* @__PURE__ */ r("span", { className: "codeblock__inner", children: /* @__PURE__ */ r(
63
+ }, m = /* @__PURE__ */ i(E, { ...v, children: [
64
+ /* @__PURE__ */ o("span", { className: "codeblock__inner", children: /* @__PURE__ */ o(
65
65
  "code",
66
66
  {
67
- className: `hljs ${i}`,
68
- dangerouslySetInnerHTML: { __html: e.highlightAuto(p, [i]).value }
67
+ className: `hljs ${a}`,
68
+ dangerouslySetInnerHTML: { __html: e.highlightAuto(c, [a]).value }
69
69
  }
70
70
  ) }),
71
- /* @__PURE__ */ t("div", { className: "copy-button", onClick: $, children: [
72
- /* @__PURE__ */ r("span", { className: "default-text", children: i }),
73
- /* @__PURE__ */ r("span", { className: "hover-text", children: g ? /* @__PURE__ */ t(c, { children: [
74
- /* @__PURE__ */ r(T, { className: "copy-icon" }),
75
- /* @__PURE__ */ r("span", { className: "button-lang-text", children: "copied" })
76
- ] }) : /* @__PURE__ */ t(c, { children: [
77
- /* @__PURE__ */ r(S, { className: "copy-icon" }),
78
- /* @__PURE__ */ r("span", { className: "button-lang-text", children: "copy" })
71
+ /* @__PURE__ */ i("div", { className: "copy-button", onClick: $, children: [
72
+ /* @__PURE__ */ o("span", { className: "default-text", children: a }),
73
+ /* @__PURE__ */ o("span", { className: "hover-text", children: g ? /* @__PURE__ */ i(u, { children: [
74
+ /* @__PURE__ */ o(S, { className: "copy-icon" }),
75
+ /* @__PURE__ */ o("span", { className: "button-lang-text", children: "copied" })
76
+ ] }) : /* @__PURE__ */ i(u, { children: [
77
+ /* @__PURE__ */ o(P, { className: "copy-icon" }),
78
+ /* @__PURE__ */ o("span", { className: "button-lang-text", children: "copy" })
79
79
  ] }) })
80
80
  ] })
81
81
  ] });
82
- return j ? m : /* @__PURE__ */ r(E, { children: m });
82
+ return j ? m : /* @__PURE__ */ o(A, { children: m });
83
83
  }
84
- const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important", H = A("pre")`
85
- font-family: ${a};
84
+ const n = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important", E = T("pre", {
85
+ shouldForwardProp: (r) => r !== "sx"
86
+ })`
87
+ font-family: ${n};
86
88
  display: block;
87
89
  font-size: 14px;
88
90
  line-height: 1.42857143;
@@ -91,9 +93,10 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
91
93
  word-wrap: break-word;
92
94
  text-align: left;
93
95
  border-radius: 5px;
94
- border: 1px solid #dedede;
95
- background: #222;
96
- color: ${o.common.white};
96
+ border: 1px solid;
97
+ border-color: ${({ theme: r }) => r.palette.divider};
98
+ background: ${({ theme: r }) => r.palette.background.default};
99
+ color: ${({ theme: r }) => r.palette.common.white};
97
100
  position: relative;
98
101
 
99
102
  .codeblock__inner {
@@ -120,7 +123,7 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
120
123
 
121
124
  .copy-icon {
122
125
  font-size: 16px;
123
- color: ${o.common.white};
126
+ color: ${t.common.white};
124
127
  }
125
128
 
126
129
  .hover-text {
@@ -128,20 +131,20 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
128
131
  }
129
132
  .default-text {
130
133
  font-size: 12px;
131
- color: ${o.common.white};
134
+ color: ${t.common.white};
132
135
  }
133
136
  }
134
137
 
135
138
  &:hover {
136
139
  .copy-button {
137
140
  display: flex;
138
- background: ${o.primary.main};
141
+ background: ${t.primary.main};
139
142
 
140
143
  .hover-text {
141
144
  display: flex;
142
145
  justify-content: center;
143
146
  align-items: center;
144
- color: ${o.common.white};
147
+ color: ${t.common.white};
145
148
  }
146
149
  .default-text {
147
150
  display: none;
@@ -153,17 +156,17 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
153
156
  .button-lang-text {
154
157
  margin-left: 4px;
155
158
  font-size: 12px;
156
- color: ${o.common.white};
159
+ color: ${t.common.white};
157
160
  }
158
161
 
159
162
  code {
160
163
  counter-reset: line;
161
164
  counter-increment: line;
162
165
  padding: 16px;
163
- font-family: ${a};
164
- color: ${o.common.white};
166
+ font-family: ${n};
167
+ color: ${t.common.white};
165
168
  * {
166
- font-family: ${a};
169
+ font-family: ${n};
167
170
  }
168
171
  }
169
172
 
@@ -172,5 +175,5 @@ const a = "source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !imp
172
175
  }
173
176
  `;
174
177
  export {
175
- ge as default
178
+ le as default
176
179
  };
@@ -8,7 +8,7 @@ export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translat
8
8
  /**
9
9
  * 集中化配置
10
10
  */
11
- export declare function ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, disableStyleCache, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
12
12
  export declare function useConfig(): {
13
13
  mode: import('@mui/material').PaletteMode;
14
14
  toggleMode: () => void;
@@ -1,9 +1,9 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import { LocaleProvider as p, useLocaleContext as C } from "../Locale/context.js";
3
- import x, { useColorScheme as a } from "../Theme/theme-provider.js";
4
- import { useTheme as d } from "@mui/material";
2
+ import { LocaleProvider as C, useLocaleContext as x } from "../Locale/context.js";
3
+ import a, { useColorScheme as d } from "../Theme/theme-provider.js";
4
+ import { useTheme as v } from "@mui/material";
5
5
  import "../Theme/theme.js";
6
- function T({
6
+ function j({
7
7
  children: o,
8
8
  // theme provider
9
9
  theme: e,
@@ -12,15 +12,16 @@ function T({
12
12
  prefer: i,
13
13
  disableBlockletTheme: n = !1,
14
14
  enableColorScheme: c,
15
+ disableStyleCache: f,
15
16
  // locale provider
16
- locale: f,
17
- fallbackLocale: s,
18
- translations: l = {},
19
- languages: u,
20
- onLoadingTranslation: h
17
+ locale: s,
18
+ fallbackLocale: l,
19
+ translations: u = {},
20
+ languages: h,
21
+ onLoadingTranslation: p
21
22
  }) {
22
23
  return /* @__PURE__ */ t(
23
- x,
24
+ a,
24
25
  {
25
26
  theme: e,
26
27
  injectFirst: r,
@@ -28,22 +29,23 @@ function T({
28
29
  prefer: i,
29
30
  disableBlockletTheme: n,
30
31
  enableColorScheme: c,
32
+ disableStyleCache: f,
31
33
  children: /* @__PURE__ */ t(
32
- p,
34
+ C,
33
35
  {
34
- locale: f,
35
- fallbackLocale: s,
36
- translations: l,
37
- onLoadingTranslation: h,
38
- languages: u,
36
+ locale: s,
37
+ fallbackLocale: l,
38
+ translations: u,
39
+ onLoadingTranslation: p,
40
+ languages: h,
39
41
  children: o
40
42
  }
41
43
  )
42
44
  }
43
45
  );
44
46
  }
45
- function j() {
46
- const o = d(), e = C(), r = a();
47
+ function b() {
48
+ const o = v(), e = x(), r = d();
47
49
  return {
48
50
  theme: o,
49
51
  ...e,
@@ -51,6 +53,6 @@ function j() {
51
53
  };
52
54
  }
53
55
  export {
54
- T as ConfigProvider,
55
- j as useConfig
56
+ j as ConfigProvider,
57
+ b as useConfig
56
58
  };
@@ -126,7 +126,7 @@ const o = i("nav", {
126
126
  ".navmenu-item__desc": {
127
127
  fontSize: "12px",
128
128
  lineHeight: 1,
129
- color: t.palette.grey[500]
129
+ color: t.palette.text.secondary
130
130
  },
131
131
  "&:hover": {
132
132
  background: t.palette.action.hover,
package/lib/Tag/index.js CHANGED
@@ -5,7 +5,7 @@ import n from "lodash/isUndefined";
5
5
  import { mergeProps as x } from "../Util/index.js";
6
6
  import e from "../Colors/themes/default.js";
7
7
  import { styled as w } from "../Theme/index.js";
8
- const i = {
8
+ const c = {
9
9
  error: {
10
10
  color: e.common.white,
11
11
  backgroundColor: e.error.main
@@ -27,18 +27,18 @@ const i = {
27
27
  backgroundColor: "#222"
28
28
  }
29
29
  };
30
- function a({ ...m }) {
31
- const o = Object.assign({}, m);
30
+ function p({ ...s }) {
31
+ const o = Object.assign({}, s);
32
32
  n(o.type) && (o.type = "primary"), n(o.content) && (o.content = ""), n(o.style) && (o.style = {}), n(o.className) && (o.className = "");
33
- 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);
34
- return s[t] && Object.assign(c, {
35
- color: s[t].contrastText || e.common.white,
36
- backgroundColor: s[t].main
37
- }), /* @__PURE__ */ h(j, { component: "span", className: g, style: c, ...d, children: l || y });
33
+ 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);
34
+ return i[t] && Object.assign(a, {
35
+ color: i[t].contrastText || e.common.white,
36
+ backgroundColor: i[t].main
37
+ }), /* @__PURE__ */ h(j, { component: "span", className: g, style: a, ...d, children: l || y });
38
38
  }
39
- a.propTypes = {
39
+ p.propTypes = {
40
40
  children: r.any.isRequired,
41
- type: r.oneOf(Object.keys(i)),
41
+ type: r.oneOf(Object.keys(c)),
42
42
  content: r.string,
43
43
  className: r.string,
44
44
  style: r.oneOfType([r.object, r.string])
@@ -53,9 +53,9 @@ const j = w(u)`
53
53
  line-height: 20px;
54
54
  font-size: 12px;
55
55
  font-weight: 500;
56
- border-radius: 4px;
56
+ border-radius: ${({ theme: s }) => s.shape.borderRadius * 0.5}px;
57
57
  }
58
58
  `;
59
59
  export {
60
- a as default
60
+ p as default
61
61
  };
@@ -6,18 +6,20 @@ export interface ColorSchemeContextType {
6
6
  changeMode: (mode: PaletteMode) => void;
7
7
  prefer?: Prefer;
8
8
  }
9
- export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
10
- export declare function useColorScheme(): ColorSchemeContextType;
11
9
  export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
12
10
  mode: PaletteMode;
13
11
  }) => Theme);
14
12
  export type Prefer = 'light' | 'dark' | 'system';
13
+ export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
14
+ export declare function useColorScheme(): ColorSchemeContextType;
15
15
  interface BaseThemeProviderProps {
16
16
  children?: React.ReactNode;
17
17
  theme?: UxTheme;
18
18
  injectFirst?: boolean;
19
19
  /** 指定一个类名,DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
20
20
  darkSchemeClass?: string;
21
+ /** 禁用样式缓存 */
22
+ disableStyleCache?: boolean;
21
23
  }
22
24
  interface ColorSchemeProviderProps extends BaseThemeProviderProps {
23
25
  prefer?: Prefer;
@@ -1,50 +1,53 @@
1
- import { jsx as m, jsxs as I } from "react/jsx-runtime";
2
- import { createContext as N, use as O, useState as x, useRef as K, useMemo as g, useCallback as B, useEffect as b } from "react";
3
- import { useTheme as R, CssBaseline as V, StyledEngineProvider as W, ThemeProvider as q, GlobalStyles as z } from "@mui/material";
4
- import { deepmerge as Y } from "@mui/utils";
5
- import $ from "lodash/set";
6
- import J from "lodash/isUndefined";
7
- import { useDebounceFn as Q, useCreation as M } from "ahooks";
8
- import { getBlockletThemeOptions as X, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as Z, getDefaultThemePrefer as P } from "@blocklet/theme";
9
- import { useLocationState as ee } from "../hooks/use-location-state.js";
10
- import { createTheme as C, lazyCreateDefaultTheme as te, isUxTheme as oe, isTheme as re } from "./theme.js";
11
- const ne = C(), j = N({});
12
- function A() {
13
- return O(j);
1
+ import { jsx as a, jsxs as K } from "react/jsx-runtime";
2
+ import { createContext as O, use as V, useState as $, useRef as W, useMemo as g, useCallback as y, useEffect as f } from "react";
3
+ import { useTheme as A, CssBaseline as B, StyledEngineProvider as q, ThemeProvider as z, GlobalStyles as Y } from "@mui/material";
4
+ import { deepmerge as J } from "@mui/utils";
5
+ import M from "lodash/set";
6
+ import Q from "lodash/isUndefined";
7
+ import { useDebounceFn as X, useCreation as P } from "ahooks";
8
+ import { getBlockletThemeOptions as Z, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as ee, getDefaultThemePrefer as _ } from "@blocklet/theme";
9
+ import { useLocationState as te } from "../hooks/use-location-state.js";
10
+ import { createTheme as T, lazyCreateDefaultTheme as re, isUxTheme as oe, isTheme as ne } from "./theme.js";
11
+ const se = T(), N = O({});
12
+ function U() {
13
+ return V(N);
14
14
  }
15
- const _ = (i) => i ? i === "system" ? P({ theme: { prefer: "system" } }) : i : P();
16
- function se({ className: i = void 0 }) {
17
- const t = R();
18
- if (t.palette.mode === "dark") {
19
- 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} *` : "*";
20
- return /* @__PURE__ */ m(
21
- z,
15
+ const D = (i) => i ? i === "system" ? _({ theme: { prefer: "system" } }) : i : _();
16
+ function L({ className: i = void 0 }) {
17
+ const r = A();
18
+ if (r.palette.mode === "dark") {
19
+ 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} *` : "*";
20
+ return /* @__PURE__ */ a(
21
+ Y,
22
22
  {
23
23
  styles: {
24
24
  // Chrome, Safari, Edge
25
25
  "@supports selector(::-webkit-scrollbar)": {
26
- [u]: {
26
+ [d]: {
27
27
  width: "12px",
28
28
  height: "12px"
29
29
  },
30
- [r]: {
30
+ [o]: {
31
31
  background: n
32
32
  },
33
- [a]: {
33
+ [c]: {
34
34
  background: s,
35
35
  borderRadius: "6px",
36
36
  border: "2px solid",
37
37
  borderColor: n,
38
38
  backgroundClip: "padding-box",
39
39
  "&:hover": {
40
- background: t.palette.grey[400],
40
+ background: r.palette.grey[400],
41
41
  backgroundClip: "padding-box"
42
42
  }
43
+ },
44
+ [u]: {
45
+ background: n
43
46
  }
44
47
  },
45
48
  // Firefox
46
49
  "@supports not selector(::-webkit-scrollbar)": {
47
- [c]: {
50
+ [k]: {
48
51
  scrollbarWidth: "auto",
49
52
  scrollbarColor: `${s} ${n}`
50
53
  }
@@ -55,101 +58,102 @@ function se({ className: i = void 0 }) {
55
58
  }
56
59
  return null;
57
60
  }
58
- let D = !1;
59
- const L = {};
60
- function U({
61
+ let R = !1;
62
+ const j = {};
63
+ function F({
61
64
  children: i = null,
62
- theme: t = ne,
65
+ theme: r = se,
63
66
  injectFirst: n = !0,
64
- darkSchemeClass: s = ""
67
+ darkSchemeClass: s = "",
68
+ disableStyleCache: t = !1
65
69
  }) {
66
- 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]);
70
+ 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]);
67
71
  return (
68
72
  // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
69
- /* @__PURE__ */ m(W, { injectFirst: n, children: /* @__PURE__ */ I(q, { theme: o, children: [
70
- u,
71
- r,
73
+ /* @__PURE__ */ a(q, { injectFirst: n, children: /* @__PURE__ */ K(z, { theme: d, children: [
74
+ o,
75
+ c,
72
76
  i
73
77
  ] }) })
74
78
  );
75
79
  }
76
80
  function le({
77
81
  children: i = null,
78
- theme: t = void 0,
82
+ theme: r = void 0,
79
83
  prefer: n = void 0,
80
84
  disableBlockletTheme: s = !1,
81
- ...o
85
+ ...t
82
86
  }) {
83
- 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(
87
+ const d = U(), [o, c] = $(() => D(n)), [u, k] = $(null), m = A(), p = te(), b = W(null), C = Q(d.toggleMode), { run: S } = X(
84
88
  (e) => {
85
- d(e);
89
+ k(e);
86
90
  },
87
91
  {
88
92
  wait: 200
89
93
  }
90
94
  ), v = g(() => {
91
95
  let e = {};
92
- if (t) {
93
- const G = te(r);
94
- if (typeof t == "function") {
95
- const H = G();
96
- oe(p) ? e = { ...t(p, { mode: r }) } : e = { ...t(H, { mode: r }) };
96
+ if (r) {
97
+ const H = re(o);
98
+ if (typeof r == "function") {
99
+ const I = H();
100
+ oe(m) ? e = { ...r(m, { mode: o }) } : e = { ...r(I, { mode: o }) };
97
101
  } else
98
- e = { ...t };
102
+ e = { ...r };
99
103
  }
100
- let l = r;
101
- return c && (l = c.mode || "light", e = Y(e, X(l, c))), $(e, "palette.mode", l), $(e, "mode", l), e;
102
- }, [r, t, p, c]), T = g(() => C({ ...v, disableBlockletTheme: !!c || s }), [v, s, c]), E = B(() => {
103
- const e = r === "light" ? "dark" : "light";
104
- a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
105
- }, [r, a]), y = B(
104
+ let l = o;
105
+ return u && (l = u.mode || "light", e = J(e, Z(l, u))), M(e, "palette.mode", l), M(e, "mode", l), e;
106
+ }, [o, r, m, u]), w = g(() => T({ ...v, disableBlockletTheme: !!u || s }), [v, s, u]), E = y(() => {
107
+ const e = o === "light" ? "dark" : "light";
108
+ c(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
109
+ }, [o, c]), x = y(
106
110
  (e) => {
107
- r !== e && (a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
111
+ o !== e && (c(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
108
112
  },
109
- [r, a]
110
- ), F = g(
113
+ [o, c]
114
+ ), G = g(
111
115
  () => ({
112
- mode: r,
116
+ mode: o,
113
117
  toggleMode: E,
114
- changeMode: y,
118
+ changeMode: x,
115
119
  prefer: n
116
120
  }),
117
- [r, n, E, y]
121
+ [o, n, E, x]
118
122
  );
119
- return b(() => {
120
- a(_(n));
121
- }, [n, a, k.search]), b(() => {
122
- const e = new URLSearchParams(k.search).get("theme");
123
- Z(e) && sessionStorage.setItem(h, e);
124
- }, [k.search]), b(() => {
125
- f.current || (f.current = document.querySelector('meta[name="theme-color"]'));
126
- const e = T.palette.background.default;
127
- if (f.current)
128
- f.current.setAttribute("content", e);
123
+ return f(() => {
124
+ c(D(n));
125
+ }, [n, c, p.search]), f(() => {
126
+ const e = new URLSearchParams(p.search).get("theme");
127
+ ee(e) && sessionStorage.setItem(h, e);
128
+ }, [p.search]), f(() => {
129
+ b.current || (b.current = document.querySelector('meta[name="theme-color"]'));
130
+ const e = w.palette.background.default;
131
+ if (b.current)
132
+ b.current.setAttribute("content", e);
129
133
  else {
130
134
  const l = document.createElement("meta");
131
- l.name = "theme-color", l.content = e, document.head.appendChild(l), f.current = l;
135
+ l.name = "theme-color", l.content = e, document.head.appendChild(l), b.current = l;
132
136
  }
133
- }, [T.palette.background.default]), b(() => {
137
+ }, [w.palette.background.default]), f(() => {
134
138
  const e = (l) => {
135
- l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(l.data.payload);
139
+ l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && S(l.data.payload);
136
140
  };
137
141
  return window.addEventListener("message", e), () => window.removeEventListener("message", e);
138
- }, [w]), b(() => {
139
- S && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
140
- }, [S, r]), /* @__PURE__ */ m(j, { value: F, children: /* @__PURE__ */ m(U, { theme: T, ...o, children: i }) });
142
+ }, [S]), f(() => {
143
+ C && (o === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
144
+ }, [C, o]), /* @__PURE__ */ a(N, { value: G, children: /* @__PURE__ */ a(F, { theme: w, ...t, children: i }) });
141
145
  }
142
- function pe({
146
+ function ke({
143
147
  children: i = null,
144
- prefer: t = void 0,
148
+ prefer: r = void 0,
145
149
  enableColorScheme: n = !1,
146
150
  ...s
147
151
  }) {
148
- const { toggleMode: o } = A();
149
- return n || t || !o ? /* @__PURE__ */ m(le, { prefer: t, ...s, children: i }) : /* @__PURE__ */ m(U, { ...s, children: i });
152
+ const { toggleMode: t } = U();
153
+ return n || r || !t ? /* @__PURE__ */ a(le, { prefer: r, ...s, children: i }) : /* @__PURE__ */ a(F, { ...s, children: i });
150
154
  }
151
155
  export {
152
- j as ColorSchemeContext,
153
- pe as default,
154
- A as useColorScheme
156
+ N as ColorSchemeContext,
157
+ ke as default,
158
+ U as useColorScheme
155
159
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "3.0.26",
3
+ "version": "3.0.27",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -60,16 +60,16 @@
60
60
  "react": "^19.0.0",
61
61
  "react-router-dom": "^6.22.3"
62
62
  },
63
- "gitHead": "7bfbe63186facc499363ec4bcc776d1506893576",
63
+ "gitHead": "b1e137e0c74f4b58af16b1d75a65166b163cf65d",
64
64
  "dependencies": {
65
- "@arcblock/bridge": "3.0.26",
65
+ "@arcblock/bridge": "3.0.27",
66
66
  "@arcblock/did": "^1.20.15",
67
67
  "@arcblock/did-motif": "^1.1.14",
68
- "@arcblock/icons": "3.0.26",
69
- "@arcblock/nft-display": "3.0.26",
70
- "@arcblock/react-hooks": "3.0.26",
68
+ "@arcblock/icons": "3.0.27",
69
+ "@arcblock/nft-display": "3.0.27",
70
+ "@arcblock/react-hooks": "3.0.27",
71
71
  "@blocklet/js-sdk": "^1.16.46",
72
- "@blocklet/theme": "3.0.26",
72
+ "@blocklet/theme": "3.0.27",
73
73
  "@fontsource/roboto": "~5.1.1",
74
74
  "@fontsource/ubuntu-mono": "^5.2.6",
75
75
  "@iconify-icons/logos": "^1.2.36",
@@ -120,7 +120,9 @@ export default function CodeBlock({
120
120
  }
121
121
 
122
122
  const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
123
- const Pre = styled('pre')`
123
+ const Pre = styled('pre', {
124
+ shouldForwardProp: (prop) => prop !== 'sx',
125
+ })`
124
126
  font-family: ${fontFamily};
125
127
  display: block;
126
128
  font-size: 14px;
@@ -130,9 +132,10 @@ const Pre = styled('pre')`
130
132
  word-wrap: break-word;
131
133
  text-align: left;
132
134
  border-radius: 5px;
133
- border: 1px solid #dedede;
134
- background: #222;
135
- color: ${colors.common.white};
135
+ border: 1px solid;
136
+ border-color: ${({ theme }) => theme.palette.divider};
137
+ background: ${({ theme }) => theme.palette.background.default};
138
+ color: ${({ theme }) => theme.palette.common.white};
136
139
  position: relative;
137
140
 
138
141
  .codeblock__inner {
@@ -20,6 +20,7 @@ export function ConfigProvider({
20
20
  prefer,
21
21
  disableBlockletTheme = false,
22
22
  enableColorScheme,
23
+ disableStyleCache,
23
24
  // locale provider
24
25
  locale,
25
26
  fallbackLocale,
@@ -34,7 +35,8 @@ export function ConfigProvider({
34
35
  darkSchemeClass={darkSchemeClass}
35
36
  prefer={prefer}
36
37
  disableBlockletTheme={disableBlockletTheme}
37
- enableColorScheme={enableColorScheme}>
38
+ enableColorScheme={enableColorScheme}
39
+ disableStyleCache={disableStyleCache}>
38
40
  <LocaleProvider
39
41
  locale={locale}
40
42
  fallbackLocale={fallbackLocale}
@@ -141,7 +141,7 @@ export const NavMenuItem = styled('li', {
141
141
  '.navmenu-item__desc': {
142
142
  fontSize: '12px',
143
143
  lineHeight: 1,
144
- color: theme.palette.grey[500],
144
+ color: theme.palette.text.secondary,
145
145
  },
146
146
  '&:hover': {
147
147
  background: theme.palette.action.hover,
package/src/Tag/index.jsx CHANGED
@@ -101,6 +101,6 @@ const Span = styled(Typography)`
101
101
  line-height: 20px;
102
102
  font-size: 12px;
103
103
  font-weight: 500;
104
- border-radius: 4px;
104
+ border-radius: ${({ theme }) => theme.shape.borderRadius * 0.5}px;
105
105
  }
106
106
  `;
@@ -4,6 +4,7 @@ export { default as Shadows } from './demo/shadows';
4
4
  export { default as WithCustomKey } from './demo/with-custom-key';
5
5
  export { default as CustomFonts } from './demo/custom-fonts';
6
6
  export { default as UrlTheme } from './demo/url-theme';
7
+ export { default as CodeBlock } from './demo/code-block';
7
8
 
8
9
  export default {
9
10
  title: 'Theme/Theme',
@@ -33,6 +33,8 @@ export interface ColorSchemeContextType {
33
33
  changeMode: (mode: PaletteMode) => void;
34
34
  prefer?: Prefer;
35
35
  }
36
+ export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
37
+ export type Prefer = 'light' | 'dark' | 'system';
36
38
 
37
39
  export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
38
40
  export function useColorScheme() {
@@ -77,6 +79,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
77
79
  const webkitThumb = prefix
78
80
  ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb`
79
81
  : '*::-webkit-scrollbar-thumb';
82
+ const webKitCorner = prefix
83
+ ? `${prefix}::-webkit-scrollbar-corner, ${prefix} *::-webkit-scrollbar-corner`
84
+ : '*::-webkit-scrollbar-corner';
80
85
  const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
81
86
 
82
87
  return (
@@ -102,6 +107,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
102
107
  backgroundClip: 'padding-box',
103
108
  },
104
109
  },
110
+ [webKitCorner]: {
111
+ background: trackColor,
112
+ },
105
113
  },
106
114
  // Firefox
107
115
  '@supports not selector(::-webkit-scrollbar)': {
@@ -118,8 +126,8 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
118
126
  return null;
119
127
  }
120
128
 
121
- export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
122
- export type Prefer = 'light' | 'dark' | 'system';
129
+ let injectedCssBaseline = false;
130
+ const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
123
131
 
124
132
  interface BaseThemeProviderProps {
125
133
  children?: React.ReactNode;
@@ -127,17 +135,16 @@ interface BaseThemeProviderProps {
127
135
  injectFirst?: boolean;
128
136
  /** 指定一个类名,DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
129
137
  darkSchemeClass?: string;
138
+ /** 禁用样式缓存 */
139
+ disableStyleCache?: boolean;
130
140
  }
131
-
132
- let injectedCssBaseline = false;
133
- const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
134
-
135
141
  /** 快速配置 MUI 主题 */
136
142
  function BaseThemeProvider({
137
143
  children = null,
138
144
  theme = defaultTheme,
139
145
  injectFirst = true,
140
146
  darkSchemeClass = '',
147
+ disableStyleCache = false,
141
148
  }: BaseThemeProviderProps) {
142
149
  const _theme = useMemo(() => {
143
150
  if (typeof theme === 'function') {
@@ -151,18 +158,20 @@ function BaseThemeProvider({
151
158
  }, [theme]);
152
159
 
153
160
  const cssBaseline = useCreation(() => {
154
- if (injectedCssBaseline) return null;
161
+ if (disableStyleCache) return <CssBaseline />;
155
162
 
163
+ if (injectedCssBaseline) return null;
156
164
  injectedCssBaseline = true;
157
165
  return <CssBaseline />;
158
- }, []);
166
+ }, [disableStyleCache]);
159
167
 
160
168
  const darkSchemeStyles = useCreation(() => {
161
- if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
169
+ if (disableStyleCache) return <DarkSchemeStyles className={darkSchemeClass} />;
162
170
 
171
+ if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
163
172
  injectedDarkSchemeStylesMap[darkSchemeClass] = true;
164
173
  return <DarkSchemeStyles className={darkSchemeClass} />;
165
- }, [darkSchemeClass]);
174
+ }, [darkSchemeClass, disableStyleCache]);
166
175
 
167
176
  return (
168
177
  // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
@@ -180,7 +189,6 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
180
189
  prefer?: Prefer;
181
190
  disableBlockletTheme?: boolean;
182
191
  }
183
-
184
192
  /** 配置带颜色模式切换功能的 MUI 主题 */
185
193
  function ColorSchemeProvider({
186
194
  children = null,
@@ -349,7 +357,6 @@ export interface ThemeProviderProps extends ColorSchemeProviderProps {
349
357
  */
350
358
  enableColorScheme?: boolean;
351
359
  }
352
-
353
360
  export default function ThemeProvider({
354
361
  children = null,
355
362
  prefer = undefined,