@arcblock/ux 3.0.7 → 3.0.9

package/lib/DIDConnect/landing-page.js

@@ -1,17 +1,18 @@
 import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import { useMediaQuery as C, Box as e, Typography as j } from "@mui/material";
-import { isEthereumDid as A } from "@arcblock/did";
+import { useTheme as C, useMediaQuery as j, Box as e, Typography as A } from "@mui/material";
+import { isEthereumDid as B } from "@arcblock/did";
 import { getDIDMotifInfo as P } from "@arcblock/did-motif";
 import { useCreation as T } from "ahooks";
-import { useTheme as B } from "../Theme";
-import M from "../PoweredByArcBlock";
-import b from "../Avatar";
-import { getDIDColor as z, hexToRgba as E } from "../Util";
-import L from "../hooks/use-blocklet-logo";
-function J({
-  did: l,
+import "../Theme/theme.js";
+import "../Theme/theme-provider.js";
+import E from "../PoweredByArcBlock/index.js";
+import b from "../Avatar/index.js";
+import { getDIDColor as M, hexToRgba as z } from "../Util/index.js";
+import L from "../hooks/use-blocklet-logo.js";
+function K({
+  did: a,
   children: n,
-  title: a = void 0,
+  title: l = void 0,
   description: s = void 0,
   actions: h = void 0,
   logo: i = void 0,
@@ -20,15 +21,15 @@ function J({
   termsOfUse: u = void 0,
   standalone: y = !1
 }) {
-  const o = (globalThis == null ? void 0 : globalThis.blocklet) || (globalThis == null ? void 0 : globalThis.env) || {}, { palette: g } = B(), c = C((r) => r.breakpoints.down("lg")), I = L({
+  const o = (globalThis == null ? void 0 : globalThis.blocklet) || (globalThis == null ? void 0 : globalThis.env) || {}, { palette: g } = C(), c = j((r) => r.breakpoints.down("lg")), I = L({
     meta: o
   }), D = T(() => {
-    const r = o.appPid, v = A(r), w = v ? void 0 : P(r);
-    return v ? z(r) : w.color;
+    const r = o.appPid, v = B(r), w = v ? void 0 : P(r);
+    return v ? M(r) : w.color;
   }, [o == null ? void 0 : o.appPid]);
-  if (!l)
+  if (!a)
     return n;
-  a === void 0 && (a = o.appName), s === void 0 && (s = o.appDescription), i === void 0 && (i = I || ""), typeof i == "string" && (i ? i = /* @__PURE__ */ t(
+  l === void 0 && (l = o.appName), s === void 0 && (s = o.appDescription), i === void 0 && (i = I || ""), typeof i == "string" && (i ? i = /* @__PURE__ */ t(
     e,
     {
       sx: {
@@ -40,8 +41,8 @@ function J({
       src: i,
       alt: `${o.appName}'s logo`
     }
-  ) : i = /* @__PURE__ */ t(b, { size: d, did: l, src: i, variant: "rounded" })), m === void 0 && (m = /* @__PURE__ */ t(
-    M,
+  ) : i = /* @__PURE__ */ t(b, { size: d, did: a, src: i, variant: "rounded" })), m === void 0 && (m = /* @__PURE__ */ t(
+    E,
     {
       linkProps: {
         color: g.text.secondary,
@@ -59,20 +60,20 @@ function J({
       }
     }
   ));
-  let f = n;
-  !n && !c && (f = /* @__PURE__ */ t(
+  let p = n;
+  !n && !c && (p = /* @__PURE__ */ t(
     e,
     {
       sx: {
         filter: "blur(180px)",
         display: "flex"
       },
-      children: /* @__PURE__ */ t(b, { size: 210, did: l, variant: "rounded" })
+      children: /* @__PURE__ */ t(b, { size: 210, did: a, variant: "rounded" })
     }
   ));
   const k = !!n;
-  let p = !y;
-  return c && (p = !k), /* @__PURE__ */ x(
+  let f = !y;
+  return c && (f = !k), /* @__PURE__ */ x(
     e,
     {
       sx: {
@@ -95,7 +96,7 @@ function J({
           xs: 5,
           md: 8
         },
-        background: `radial-gradient(circle at bottom right, ${E(D, 0.3)} 10%, ${g.background.default} 50%)`,
+        background: `radial-gradient(circle at bottom right, ${z(D, 0.3)} 10%, ${g.background.default} 50%)`,
         position: "relative"
       },
       children: [
@@ -106,12 +107,12 @@ function J({
               maxWidth: 1200,
               display: "flex",
               alignItems: "center",
-              justifyContent: [p, f].filter(Boolean).length > 1 ? "space-between" : "center",
+              justifyContent: [f, p].filter(Boolean).length > 1 ? "space-between" : "center",
               width: "100%",
               margin: "auto"
             },
             children: [
-              p ? /* @__PURE__ */ x(
+              f ? /* @__PURE__ */ x(
                 e,
                 {
                   sx: {
@@ -122,7 +123,7 @@ function J({
                   children: [
                     /* @__PURE__ */ t(e, { sx: { display: "flex", alignItems: "center" }, children: i }),
                     /* @__PURE__ */ t(
-                      j,
+                      A,
                       {
                         variant: "h2",
                         sx: {
@@ -133,7 +134,7 @@ function J({
                             xl: "3.5rem"
                           }
                         },
-                        children: a
+                        children: l
                       }
                     ),
                     s ? /* @__PURE__ */ t(
@@ -151,7 +152,7 @@ function J({
                   ]
                 }
               ) : null,
-              f
+              p
             ]
           }
         ),
@@ -174,5 +175,5 @@ function J({
   );
 }
 export {
-  J as default
+  K as default
 };

package/lib/DIDConnect/powered-by.js

@@ -2,8 +2,8 @@ import { jsxs as r, jsx as o } from "react/jsx-runtime";
 import { useTheme as i, Box as n } from "@mui/material";
 import { Icon as c } from "@iconify/react";
 import a from "@iconify-icons/mdi/shield-check";
-import l from "./did-connect-logo";
-import { mergeSx as m } from "../Util/style";
+import l from "./did-connect-logo.js";
+import { mergeSx as m } from "../Util/style.js";
 function u({ ...e }) {
   const { palette: t } = i();
   return /* @__PURE__ */ r(

package/lib/DIDConnect/request-storage-access-api-dialog.js

@@ -8,11 +8,11 @@ import y from "@iconify-icons/material-symbols/rocket-launch-rounded";
 import { useReactive as F, useMemoizedFn as s } from "ahooks";
 import { memo as U, useRef as j, useImperativeHandle as M } from "react";
 import b from "lodash/noop";
-import { translate as W } from "../Locale/util";
-import Y from "./did-connect-container";
-import _ from "../CloseButton";
-import H from "../SharedBridge";
-import { setVisitorId as O } from "../Util";
+import { translate as W } from "../Locale/util.js";
+import Y from "./did-connect-container.js";
+import _ from "../CloseButton/index.js";
+import H from "../SharedBridge/index.js";
+import { setVisitorId as O } from "../Util/index.js";
 const P = {
   en: {
     allow: "Allow",

package/lib/DIDConnect/with-container.js

@@ -1,12 +1,13 @@
 import { jsx as n, jsxs as E } from "react/jsx-runtime";
 import { memo as H, createElement as I, useState as K, useRef as Q } from "react";
-import { Backdrop as U, useMediaQuery as V, Box as c, Drawer as q, SwipeableDrawer as J, Dialog as X, DialogContent as Y } from "@mui/material";
-import { useDebounce as Z, useMemoizedFn as D } from "ahooks";
-import { useBrowser as oo } from "@arcblock/react-hooks";
-import eo from "color-convert";
-import { useTheme as no } from "../Theme";
-import { mergeSx as ro } from "../Util/style";
-import { hexToRgba as d } from "../Util";
+import { Backdrop as U, useMediaQuery as V, useTheme as q, Box as c, Drawer as J, SwipeableDrawer as X, Dialog as Y, DialogContent as Z } from "@mui/material";
+import { useDebounce as oo, useMemoizedFn as D } from "ahooks";
+import { useBrowser as eo } from "@arcblock/react-hooks";
+import no from "color-convert";
+import "../Theme/theme.js";
+import "../Theme/theme-provider.js";
+import { mergeSx as ro } from "../Util/style.js";
+import { hexToRgba as d } from "../Util/index.js";
 const L = H(({ ref: l, ...m }) => /* @__PURE__ */ I(
   U,
   {
@@ -21,7 +22,7 @@ const L = H(({ ref: l, ...m }) => /* @__PURE__ */ I(
     key: "background"
   }
 ));
-function go(l) {
+function fo(l) {
   function m({
     popup: B = !1,
     open: _ = !1,
@@ -29,25 +30,25 @@ function go(l) {
     ...e
   }) {
     var P, y;
-    const [t, x] = K("#fff"), w = Q(null), z = oo(), M = V("(max-width:640px)");
+    const [a, x] = K("#fff"), w = Q(null), z = eo(), M = V("(max-width:640px)");
     let r = "page";
     B && (r = "dialog", M && z.mobile.any && (r = "drawer"));
-    const g = no(), p = _, T = ((y = (P = g == null ? void 0 : g.transitions) == null ? void 0 : P.duration) == null ? void 0 : y.leavingScreen) || 500, A = Z(p, {
+    const g = q(), p = _, T = ((y = (P = g == null ? void 0 : g.transitions) == null ? void 0 : P.duration) == null ? void 0 : y.leavingScreen) || 500, A = oo(p, {
       wait: T
     }), k = D(() => {
       const o = new URLSearchParams(window.location.search);
       o.get("magicToken") && o.delete("magicToken"), o.toString() && window.history.replaceState({}, "", `${window.location.pathname}?${o.toString()}`);
-    }), C = (o, a) => {
-      ["backdropClick", "escapeKeyDown"].includes(a) || (k(), e == null || e.onClose());
-    }, $ = A || p, j = h ? q : J, O = eo.hex.hsl(t), [R, S, i] = O, u = [0, 30, 60, 30, 0, 30, 60, 30], W = Math.max(...u), G = Math.min(...u);
+    }), C = (o, t) => {
+      ["backdropClick", "escapeKeyDown"].includes(t) || (k(), e == null || e.onClose());
+    }, $ = A || p, j = h ? J : X, O = no.hex.hsl(a), [R, S, i] = O, u = [0, 30, 60, 30, 0, 30, 60, 30], W = Math.max(...u), G = Math.min(...u);
     let f = !1;
     (i * (100 + W) / 100 > 100 || i * (100 + G) / 100 < 0) && (f = !0);
     const N = `linear-gradient(45deg, ${u.map((o) => {
-      let a = i * (100 + o) / 100, s = 0.6;
-      return f ? s = 0.5 * (100 + o) / 100 : a = i * (100 + o) / 100, `hsla(${R}, ${S}%, ${a}%, ${s})`;
+      let t = i * (100 + o) / 100, s = 0.6;
+      return f ? s = 0.5 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${R}, ${S}%, ${t}%, ${s})`;
     }).join(", ")})`, F = `linear-gradient(45deg, ${u.map((o) => {
-      let a = i * (100 + o) / 100, s = 0.2;
-      return f ? s = 0.3 * (100 + o) / 100 : a = i * (100 + o) / 100, `hsla(${R}, ${S}%, ${a}%, ${s})`;
+      let t = i * (100 + o) / 100, s = 0.2;
+      return f ? s = 0.3 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${R}, ${S}%, ${t}%, ${s})`;
     }).join(", ")})`, v = {
       overflow: "visible",
       "&::before, &::after": {
@@ -96,7 +97,7 @@ function go(l) {
           c,
           {
             sx: {
-              border: `1px solid ${d(t, 0.1)}`,
+              border: `1px solid ${d(a, 0.1)}`,
               m: "-1px",
               position: "relative",
               borderRadius: "12px",
@@ -134,13 +135,13 @@ function go(l) {
             "@keyframes glowBreathe": {
               "0%, 100%": {
                 boxShadow: `
-                      inset 0 0 7px ${d(t, 0.3)},
-                      inset 0 0 12px ${d(t, 0.3)}`
+                      inset 0 0 7px ${d(a, 0.3)},
+                      inset 0 0 12px ${d(a, 0.3)}`
               },
               "50%": {
                 boxShadow: `
-                      inset 0 0 18px ${d(t, 0.7)},
-                      inset 0 0 24px ${d(t, 0.5)}`
+                      inset 0 0 18px ${d(a, 0.7)},
+                      inset 0 0 24px ${d(a, 0.5)}`
               }
             }
           }
@@ -186,7 +187,7 @@ function go(l) {
         ]
       }
     ) : /* @__PURE__ */ n(
-      X,
+      Y,
       {
         open: p,
         slots: {
@@ -205,7 +206,7 @@ function go(l) {
           }
         },
         children: /* @__PURE__ */ n(
-          Y,
+          Z,
           {
             sx: {
               maxWidth: "calc(100vw - 18px)",
@@ -234,5 +235,5 @@ function go(l) {
   return m;
 }
 export {
-  go as default
+  fo as default
 };

package/lib/DIDConnect/with-ux-theme.js

@@ -1,15 +1,16 @@
 import { jsx as e } from "react/jsx-runtime";
 import { createTheme as t, useTheme as i } from "@mui/material";
 import { DID_CONNECT_THEME_LIGHT as T, DID_CONNECT_THEME_DARK as c } from "@blocklet/theme";
-import { ThemeProvider as f } from "../Theme";
-const p = t(T), s = t(c);
-function _(o) {
+import "../Theme/theme.js";
+import p from "../Theme/theme-provider.js";
+const f = t(T), s = t(c);
+function d(o) {
   function r(m) {
-    const { palette: n } = i(), h = n.mode === "dark" ? s : p;
-    return /* @__PURE__ */ e(f, { theme: h, children: /* @__PURE__ */ e(o, { ...m }) });
+    const { palette: n } = i(), h = n.mode === "dark" ? s : f;
+    return /* @__PURE__ */ e(p, { theme: h, children: /* @__PURE__ */ e(o, { ...m }) });
   }
   return r;
 }
 export {
-  _ as default
+  d as default
 };

package/lib/Datatable/CustomToolbar.js

@@ -4,18 +4,18 @@ import i from "prop-types";
 import { TableFilter as ue, TableViewCol as pe } from "mui-datatables";
 import he, { PrintContextConsumer as me } from "react-to-print";
 import { MoreVert as fe, CloudDownload as be, ViewColumn as Ce, FilterList as ge, Print as $ } from "@mui/icons-material";
-import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as we, LinearProgress as ye, useMediaQuery as Te } from "@mui/material";
-import { useDeepCompareEffect as ve } from "ahooks";
-import { handleCSVDownload as Re } from "./utils";
-import ke from "./TableSearch";
-import { useDatatableContext as Fe } from "./DatatableContext";
-import { styled as z, useTheme as Pe } from "../Theme";
+import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as we, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
+import { useDeepCompareEffect as Re } from "ahooks";
+import { handleCSVDownload as ke } from "./utils.js";
+import Fe from "./TableSearch.js";
+import { useDatatableContext as Pe } from "./DatatableContext.js";
+import { styled as z } from "../Theme/index.js";
 function Ie() {
-  const s = Pe();
-  return Te(s.breakpoints.down("sm"));
+  const s = Te();
+  return ve(s.breakpoints.down("sm"));
 }
 function Be({ ...s }) {
-  const [f, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: g } = Fe(), {
+  const [f, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: g } = Pe(), {
     data: Q = [],
     options: o,
     components: p = {},
@@ -32,7 +32,7 @@ function Be({ ...s }) {
     searchTextUpdate: _,
     searchClose: ee
   } = s, [B, h] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ie, print: m, viewColumns: ne, filterTable: le } = o.textLabels.toolbar, re = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
-  ve(() => {
+  Re(() => {
     (u || g) && h({});
   }, [u, g]);
   const q = (e) => /* @__PURE__ */ t(he, { content: () => s.tableRef(), children: /* @__PURE__ */ t(me, { children: e }) }), w = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
@@ -40,7 +40,7 @@ function Be({ ...s }) {
     icon: /* @__PURE__ */ t(be, {}),
     title: ie,
     onClick: () => {
-      Re(s);
+      ke(s);
     }
   }), o.viewColumns === !1 || o.viewColumns === "false" || a.push({
     icon: /* @__PURE__ */ t(Ce, {}),
@@ -155,7 +155,7 @@ function Be({ ...s }) {
       ),
       /* @__PURE__ */ r("div", { className: `custom-toobar-btns ${u || g ? "toobar-btns-disabled" : ""}`, children: [
         !re && /* @__PURE__ */ t(
-          ke,
+          Fe,
           {
             search: oe,
             options: o,

package/lib/Datatable/TableSearch.js

@@ -5,8 +5,8 @@ import { Tooltip as N, IconButton as w, TextField as g } from "@mui/material";
 import { Search as v, Clear as R } from "@mui/icons-material";
 import q from "clsx";
 import E from "lodash/noop";
-import { useDatatableContext as B } from "./DatatableContext";
-import { styled as D } from "../Theme";
+import { useDatatableContext as B } from "./DatatableContext.js";
+import { styled as D } from "../Theme/index.js";
 function M({
   search: t = "",
   options: s,

package/lib/Datatable/index.js

@@ -10,10 +10,10 @@ import ne from "lodash/get";
 import P from "clsx";
 import { useCreation as de, useDeepCompareEffect as h } from "ahooks";
 import { CircularProgress as ce } from "@mui/material";
-import R from "../Empty";
-import pe from "./CustomToolbar";
-import { DatatableProvider as ue, useDatatableContext as M } from "./DatatableContext";
-import { styled as $ } from "../Theme";
+import R from "../Empty/index.js";
+import pe from "./CustomToolbar.js";
+import { DatatableProvider as ue, useDatatableContext as M } from "./DatatableContext.js";
+import { styled as $ } from "../Theme/index.js";
 const fe = $("div")`
   display: flex;
   align-items: center;

package/lib/Dialog/confirm.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as g, Fragment as C } from "react/jsx-runtime";
+import { jsx as r, jsxs as C, Fragment as g } from "react/jsx-runtime";
 import o from "prop-types";
 import { useMemoizedFn as q } from "ahooks";
-import c from "../Button";
-import y from "./dialog";
+import c from "../Button/index.js";
+import y from "./dialog.js";
 function R({
   title: a,
   children: d,
@@ -12,10 +12,10 @@ function R({
   showCancelButton: n = !0,
   showConfirmButton: s = !0,
   fullScreen: x = !1,
-  confirmButton: l = {
+  confirmButton: p = {
     text: "Confirm"
   },
-  cancelButton: p = {
+  cancelButton: l = {
     text: "Cancel"
   },
   PaperProps: t = {},
@@ -54,7 +54,7 @@ function R({
           }
         }
       },
-      actions: n || s ? /* @__PURE__ */ g(C, { children: [
+      actions: n || s ? /* @__PURE__ */ C(g, { children: [
         n && /* @__PURE__ */ r(
           c,
           {
@@ -62,8 +62,8 @@ function R({
               e.stopPropagation(), i(e, "closeButton");
             },
             color: "primary",
-            ...p.props,
-            children: p.text
+            ...l.props,
+            children: l.text
           }
         ),
         s && /* @__PURE__ */ r(
@@ -74,8 +74,8 @@ function R({
             },
             color: "primary",
             autoFocus: !0,
-            ...l.props,
-            children: l.text
+            ...p.props,
+            children: p.text
           }
         )
       ] }) : null,

package/lib/Dialog/dialog.js

@@ -1,8 +1,8 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import e from "prop-types";
 import { Close as D } from "@mui/icons-material";
-import { Dialog as M, Box as w, useMediaQuery as v, Typography as N, DialogContent as C, DialogActions as B, IconButton as A } from "@mui/material";
-import { styled as h, useTheme as T } from "../Theme";
+import { Dialog as M, Box as w, useTheme as v, useMediaQuery as N, Typography as C, DialogContent as B, DialogActions as A, IconButton as T } from "@mui/material";
+import { styled as h } from "../Theme/index.js";
 function $({
   children: o,
   title: l = "",
@@ -15,7 +15,7 @@ function $({
   slotProps: u = {},
   ...p
 }) {
-  const _ = T(), i = v(_.breakpoints.down("md")), b = l || a || c, x = (r, j) => {
+  const _ = v(), i = N(_.breakpoints.down("md")), b = l || a || c, x = (r, j) => {
     const { onClose: m } = p;
     m && m(r, j);
   };
@@ -26,21 +26,21 @@ function $({
     },
     s.style
   );
-  const f = /* @__PURE__ */ t(A, { className: "ux-dialog_closeButton", onClick: (r) => x(r, "closeButton"), children: /* @__PURE__ */ t(D, {}) });
+  const f = /* @__PURE__ */ t(T, { className: "ux-dialog_closeButton", onClick: (r) => x(r, "closeButton"), children: /* @__PURE__ */ t(D, {}) });
   return /* @__PURE__ */ n(H, { fullScreen: i, onClose: x, PaperProps: s, ...p, children: [
     b && /* @__PURE__ */ n(O, { ...u.header, className: "ux-dialog_header", isMobile: i, children: [
       /* @__PURE__ */ n("div", { className: "ux-dialog_left", children: [
         a && i && f,
         d && /* @__PURE__ */ t("div", { className: "ux-dialog_prepend", children: d }),
-        l && /* @__PURE__ */ t(N, { variant: "h6", className: "ux-dialog_title", children: l })
+        l && /* @__PURE__ */ t(C, { variant: "h6", className: "ux-dialog_title", children: l })
       ] }),
       /* @__PURE__ */ n("div", { className: "ux-dialog_right", children: [
         /* @__PURE__ */ t("div", { className: "ux-dialog_toolbar", children: c }),
         a && !i && f
       ] })
     ] }),
-    /* @__PURE__ */ t(C, { ...u.content, children: o }),
-    g && /* @__PURE__ */ t(B, { className: `ux-dialog_actions--${y}`, children: g })
+    /* @__PURE__ */ t(B, { ...u.content, children: o }),
+    g && /* @__PURE__ */ t(A, { className: `ux-dialog_actions--${y}`, children: g })
   ] });
 }
 $.propTypes = {

package/lib/Dialog/index.js

@@ -1,6 +1,6 @@
-import { default as r } from "./dialog";
-import { default as t } from "./confirm";
-import { default as m } from "./use-confirm";
+import { default as r } from "./dialog.js";
+import { default as t } from "./confirm.js";
+import { default as m } from "./use-confirm.js";
 export {
   t as Confirm,
   r as default,

package/lib/Dialog/use-confirm.js

@@ -2,7 +2,7 @@ import { jsx as d } from "react/jsx-runtime";
 import { useRef as g, useState as w, isValidElement as f, useImperativeHandle as y } from "react";
 import { useMemoizedFn as e, useReactive as v } from "ahooks";
 import u from "lodash/noop";
-import H from "./confirm";
+import H from "./confirm.js";
 function R({ ref: s, ...l }) {
   const [B, c] = w(""), [C, i] = w(""), t = v({
     show: !1,

package/lib/DriftBot/index.js

@@ -1,5 +1,5 @@
 import { Component as n } from "react";
-import { mergeProps as s } from "../Util";
+import { mergeProps as s } from "../Util/index.js";
 const i = class i extends n {
   constructor(t) {
     super(s(t, i, ["attributes"])), this.addMainScript = this.addMainScript.bind(this), this.addIdentityVariables = this.addIdentityVariables.bind(this), this.insertScript = this.insertScript.bind(this);