@arcblock/ux 3.0.22 → 3.0.24

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,37 +1,37 @@
1
- import { jsx as m, jsxs as F } from "react/jsx-runtime";
2
- import { createContext as G, use as H, useState as y, useRef as I, useMemo as f, useCallback as $, useEffect as b } from "react";
3
- import { useTheme as _, StyledEngineProvider as N, ThemeProvider as O, CssBaseline as K, GlobalStyles as V } from "@mui/material";
4
- import { deepmerge as W } from "@mui/utils";
5
- import B from "lodash/set";
6
- import q from "lodash/isUndefined";
7
- import { useDebounceFn as z } from "ahooks";
8
- import { getBlockletThemeOptions as Y, BLOCKLET_THEME_PREFER_KEY as h, isValidThemeMode as J, getDefaultThemePrefer as M } from "@blocklet/theme";
9
- import { useLocationState as Q } from "../hooks/use-location-state.js";
10
- import { createTheme as C, lazyCreateDefaultTheme as X, isUxTheme as Z, isTheme as ee } from "./theme.js";
11
- const te = C(), L = G({});
12
- function R() {
13
- return H(L);
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);
14
14
  }
15
- const P = (l) => l ? l === "system" ? M({ theme: { prefer: "system" } }) : l : M();
16
- function oe({ className: l = void 0 }) {
17
- const t = _();
15
+ const _ = (i) => i ? i === "system" ? P({ theme: { prefer: "system" } }) : i : P();
16
+ function se({ className: i = void 0 }) {
17
+ const t = R();
18
18
  if (t.palette.mode === "dark") {
19
- 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} *` : "*";
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
20
  return /* @__PURE__ */ m(
21
- V,
21
+ z,
22
22
  {
23
23
  styles: {
24
24
  // Chrome, Safari, Edge
25
25
  "@supports selector(::-webkit-scrollbar)": {
26
- [g]: {
26
+ [u]: {
27
27
  width: "12px",
28
28
  height: "12px"
29
29
  },
30
30
  [r]: {
31
31
  background: n
32
32
  },
33
- [i]: {
34
- background: a,
33
+ [a]: {
34
+ background: s,
35
35
  borderRadius: "6px",
36
36
  border: "2px solid",
37
37
  borderColor: n,
@@ -46,7 +46,7 @@ function oe({ className: l = void 0 }) {
46
46
  "@supports not selector(::-webkit-scrollbar)": {
47
47
  [c]: {
48
48
  scrollbarWidth: "auto",
49
- scrollbarColor: `${a} ${n}`
49
+ scrollbarColor: `${s} ${n}`
50
50
  }
51
51
  }
52
52
  }
@@ -55,99 +55,101 @@ function oe({ className: l = void 0 }) {
55
55
  }
56
56
  return null;
57
57
  }
58
- function D({
59
- children: l = null,
60
- theme: t = te,
58
+ let D = !1;
59
+ const L = {};
60
+ function U({
61
+ children: i = null,
62
+ theme: t = ne,
61
63
  injectFirst: n = !0,
62
- darkSchemeClass: a = ""
64
+ darkSchemeClass: s = ""
63
65
  }) {
64
- const o = f(() => typeof t == "function" || ee(t) ? t : C(t), [t]);
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]);
65
67
  return (
66
68
  // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
67
- /* @__PURE__ */ m(N, { injectFirst: n, children: /* @__PURE__ */ F(O, { theme: o, children: [
68
- /* @__PURE__ */ m(K, {}),
69
- /* @__PURE__ */ m(oe, { className: a }),
70
- l
69
+ /* @__PURE__ */ m(W, { injectFirst: n, children: /* @__PURE__ */ I(q, { theme: o, children: [
70
+ u,
71
+ r,
72
+ i
71
73
  ] }) })
72
74
  );
73
75
  }
74
- function re({
75
- children: l = null,
76
+ function le({
77
+ children: i = null,
76
78
  theme: t = void 0,
77
79
  prefer: n = void 0,
78
- disableBlockletTheme: a = !1,
80
+ disableBlockletTheme: s = !1,
79
81
  ...o
80
82
  }) {
81
- 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(
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(
82
84
  (e) => {
83
- u(e);
85
+ d(e);
84
86
  },
85
87
  {
86
88
  wait: 200
87
89
  }
88
- ), v = f(() => {
90
+ ), v = g(() => {
89
91
  let e = {};
90
92
  if (t) {
91
- const U = X(r);
93
+ const G = te(r);
92
94
  if (typeof t == "function") {
93
- const j = U();
94
- Z(k) ? e = { ...t(k, { mode: r }) } : e = { ...t(j, { mode: r }) };
95
+ const H = G();
96
+ oe(p) ? e = { ...t(p, { mode: r }) } : e = { ...t(H, { mode: r }) };
95
97
  } else
96
98
  e = { ...t };
97
99
  }
98
- let s = r;
99
- return c && (s = c.mode || "light", e = W(e, Y(s, c))), B(e, "palette.mode", s), B(e, "mode", s), e;
100
- }, [r, t, k, c]), T = f(() => C({ ...v, disableBlockletTheme: !!c || a }), [v, a, c]), E = $(() => {
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(() => {
101
103
  const e = r === "light" ? "dark" : "light";
102
- i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
103
- }, [r, i]), x = $(
104
+ a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e);
105
+ }, [r, a]), y = B(
104
106
  (e) => {
105
- r !== e && (i(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
107
+ r !== e && (a(e), sessionStorage.removeItem(h), localStorage.setItem(h, e));
106
108
  },
107
- [r, i]
108
- ), A = f(
109
+ [r, a]
110
+ ), F = g(
109
111
  () => ({
110
112
  mode: r,
111
113
  toggleMode: E,
112
- changeMode: x,
114
+ changeMode: y,
113
115
  prefer: n
114
116
  }),
115
- [r, n, E, x]
117
+ [r, n, E, y]
116
118
  );
117
119
  return b(() => {
118
- i(P(n));
119
- }, [n, i, p.search]), b(() => {
120
- const e = new URLSearchParams(p.search).get("theme");
121
- J(e) && sessionStorage.setItem(h, e);
122
- }, [p.search]), b(() => {
123
- d.current || (d.current = document.querySelector('meta[name="theme-color"]'));
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"]'));
124
126
  const e = T.palette.background.default;
125
- if (d.current)
126
- d.current.setAttribute("content", e);
127
+ if (f.current)
128
+ f.current.setAttribute("content", e);
127
129
  else {
128
- const s = document.createElement("meta");
129
- s.name = "theme-color", s.content = e, document.head.appendChild(s), d.current = s;
130
+ const l = document.createElement("meta");
131
+ l.name = "theme-color", l.content = e, document.head.appendChild(l), f.current = l;
130
132
  }
131
133
  }, [T.palette.background.default]), b(() => {
132
- const e = (s) => {
133
- s.origin === window.origin && s.data.type === "THEME_BUILDER_CONFIG_CHANGED" && S(s.data.payload);
134
+ const e = (l) => {
135
+ l.origin === window.origin && l.data.type === "THEME_BUILDER_CONFIG_CHANGED" && w(l.data.payload);
134
136
  };
135
137
  return window.addEventListener("message", e), () => window.removeEventListener("message", e);
136
- }, [S]), b(() => {
137
- w && (r === "dark" ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.removeAttribute("data-theme"));
138
- }, [w, r]), /* @__PURE__ */ m(L, { value: A, children: /* @__PURE__ */ m(D, { theme: T, ...o, children: l }) });
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 }) });
139
141
  }
140
- function he({
141
- children: l = null,
142
+ function pe({
143
+ children: i = null,
142
144
  prefer: t = void 0,
143
145
  enableColorScheme: n = !1,
144
- ...a
146
+ ...s
145
147
  }) {
146
- const { toggleMode: o } = R();
147
- return n || t || !o ? /* @__PURE__ */ m(re, { prefer: t, ...a, children: l }) : /* @__PURE__ */ m(D, { ...a, children: l });
148
+ const { toggleMode: o } = A();
149
+ return n || t || !o ? /* @__PURE__ */ m(le, { prefer: t, ...s, children: i }) : /* @__PURE__ */ m(U, { ...s, children: i });
148
150
  }
149
151
  export {
150
- L as ColorSchemeContext,
151
- he as default,
152
- R as useColorScheme
152
+ j as ColorSchemeContext,
153
+ pe as default,
154
+ A as useColorScheme
153
155
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "3.0.22",
3
+ "version": "3.0.24",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -54,22 +54,22 @@
54
54
  "peerDependencies": {
55
55
  "@emotion/react": "^11.14.0",
56
56
  "@emotion/styled": "^11.14.0",
57
- "@mui/icons-material": "^7.1.2",
58
- "@mui/material": "^7.1.2",
59
- "@mui/utils": "^7.1.1",
57
+ "@mui/icons-material": "^7.2.0",
58
+ "@mui/material": "^7.2.0",
59
+ "@mui/utils": "^7.2.0",
60
60
  "react": "^19.0.0",
61
61
  "react-router-dom": "^6.22.3"
62
62
  },
63
- "gitHead": "21018768a5b825c02861281925afb54efdf0aa4c",
63
+ "gitHead": "37d2a1f13dfc80b7c41b2d503e295ac899f3c320",
64
64
  "dependencies": {
65
- "@arcblock/bridge": "3.0.22",
65
+ "@arcblock/bridge": "3.0.24",
66
66
  "@arcblock/did": "^1.20.15",
67
67
  "@arcblock/did-motif": "^1.1.14",
68
- "@arcblock/icons": "3.0.22",
69
- "@arcblock/nft-display": "3.0.22",
70
- "@arcblock/react-hooks": "3.0.22",
71
- "@blocklet/js-sdk": "^1.16.45",
72
- "@blocklet/theme": "3.0.22",
68
+ "@arcblock/icons": "3.0.24",
69
+ "@arcblock/nft-display": "3.0.24",
70
+ "@arcblock/react-hooks": "3.0.24",
71
+ "@blocklet/js-sdk": "^1.16.46",
72
+ "@blocklet/theme": "3.0.24",
73
73
  "@fontsource/roboto": "~5.1.1",
74
74
  "@fontsource/ubuntu-mono": "^5.2.6",
75
75
  "@iconify-icons/logos": "^1.2.36",
@@ -12,7 +12,7 @@ import {
12
12
  import { deepmerge } from '@mui/utils';
13
13
  import set from 'lodash/set';
14
14
  import isUndefined from 'lodash/isUndefined';
15
- import { useDebounceFn } from 'ahooks';
15
+ import { useCreation, useDebounceFn } from 'ahooks';
16
16
  import {
17
17
  BLOCKLET_THEME_PREFER_KEY,
18
18
  getDefaultThemePrefer,
@@ -129,6 +129,9 @@ interface BaseThemeProviderProps {
129
129
  darkSchemeClass?: string;
130
130
  }
131
131
 
132
+ let injectedCssBaseline = false;
133
+ const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
134
+
132
135
  /** 快速配置 MUI 主题 */
133
136
  function BaseThemeProvider({
134
137
  children = null,
@@ -147,12 +150,26 @@ function BaseThemeProvider({
147
150
  return createTheme(theme);
148
151
  }, [theme]);
149
152
 
153
+ const cssBaseline = useCreation(() => {
154
+ if (injectedCssBaseline) return null;
155
+
156
+ injectedCssBaseline = true;
157
+ return <CssBaseline />;
158
+ }, []);
159
+
160
+ const darkSchemeStyles = useCreation(() => {
161
+ if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
162
+
163
+ injectedDarkSchemeStylesMap[darkSchemeClass] = true;
164
+ return <DarkSchemeStyles className={darkSchemeClass} />;
165
+ }, [darkSchemeClass]);
166
+
150
167
  return (
151
168
  // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
152
169
  <StyledEngineProvider injectFirst={injectFirst}>
153
170
  <MuiThemeProvider theme={_theme}>
154
- <CssBaseline />
155
- <DarkSchemeStyles className={darkSchemeClass} />
171
+ {cssBaseline}
172
+ {darkSchemeStyles}
156
173
  {children}
157
174
  </MuiThemeProvider>
158
175
  </StyledEngineProvider>