@arcblock/ux 3.0.8 → 3.0.10

package/lib/Passport/passport.js

@@ -6,24 +6,24 @@ import u from "../NFTDisplay/index.js";
 import { useLocaleContext as y } from "../Locale/context.js";
 function b({
   passport: e,
-  user: m,
+  user: a,
   color: n,
   width: t = 150,
-  icon: o = null,
-  createPassportSvg: s,
+  icon: s = null,
+  createPassportSvg: o,
   // inherit props
   children: d,
-  ...a
+  ...m
 }) {
   const { t: c } = y();
   return /* @__PURE__ */ r(
     i,
     {
-      ...a,
+      ...m,
       sx: {
         display: "flex",
         alignItems: "center",
-        ...a == null ? void 0 : a.sx
+        ...m?.sx
       },
       children: [
         !!e.display && /* @__PURE__ */ l(i, { className: "passport-item__display", sx: { width: t }, children: /* @__PURE__ */ l(
@@ -39,13 +39,13 @@ function b({
           {
             className: "passport-item__display",
             dangerouslySetInnerHTML: {
-              __html: s({
+              __html: o({
                 title: e.scope === "kyc" ? e.name : e.title,
                 issuer: e.issuer && e.issuer.name,
                 issuerDid: e.issuer && e.issuer.id,
-                ownerName: m.fullName,
-                ownerDid: m.did,
-                ownerAvatarUrl: m.avatar,
+                ownerName: a.fullName,
+                ownerDid: a.did,
+                ownerAvatarUrl: a.avatar,
                 revoked: e.revoked,
                 scope: e.scope,
                 role: e.role,
@@ -92,7 +92,7 @@ function b({
                           }
                         },
                         children: [
-                          o,
+                          s,
                           e.revoked && /* @__PURE__ */ l(x, {})
                         ]
                       }

package/lib/PhoneInput/country-select.js

@@ -1,30 +1,30 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useState as O, useMemo as x } from "react";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as O, useMemo as g } from "react";
 import { Box as C, Typography as a, Select as z, TextField as j, MenuItem as k } from "@mui/material";
-import { defaultCountries as u, parseCountry as c, FlagEmoji as y } from "react-international-phone";
-import P from "@arcblock/icons/lib/ArrowDown";
-import { mergeSx as F } from "../Util/style.js";
-function L({
-  ref: w = void 0,
-  value: i,
-  onChange: s = void 0,
+import { defaultCountries as s, parseCountry as d, FlagEmoji as y } from "react-international-phone";
+import D from "@arcblock/icons/lib/ArrowDown";
+import { mergeSx as P } from "../Util/style.js";
+function F({
+  ref: x = void 0,
+  value: r,
+  onChange: w = void 0,
   sx: I = {},
   selectCountryProps: M = void 0,
-  preview: p = !1,
+  preview: u = !1,
   valueField: v = "iso2",
-  ...m
+  ...c
 }) {
-  const { hideFlag: h = !0, hideDialCode: f = !1 } = M || {}, [n, S] = O(""), r = x(() => {
-    const e = u.find((o) => o[1] === i);
-    return i && e ? c(e) : { name: "", iso2: "", dialCode: "" };
-  }, [i]), b = x(() => {
-    if (!n) return u;
+  const { hideFlag: p = !0, hideDialCode: h = !1 } = M || {}, [n, S] = O(""), m = g(() => {
+    const e = s.find((o) => o[1] === r);
+    return r && e ? d(e) : { name: "", iso2: "", dialCode: "" };
+  }, [r]), b = g(() => {
+    if (!n) return s;
     const e = n.toLowerCase();
-    return u.filter((o) => {
-      const d = c(o);
-      return d.name.toLowerCase().includes(e) || d.iso2.toLowerCase().includes(e) || d.dialCode.includes(e);
+    return s.filter((o) => {
+      const l = d(o);
+      return l.name.toLowerCase().includes(e) || l.iso2.toLowerCase().includes(e) || l.dialCode.includes(e);
     });
-  }, [n]), g = /* @__PURE__ */ l(
+  }, [n]), f = /* @__PURE__ */ i(
     C,
     {
       sx: {
@@ -32,27 +32,27 @@ function L({
         alignItems: "center",
         flexWrap: "nowrap",
         gap: 0.5,
-        cursor: p ? "default" : "pointer"
+        cursor: u ? "default" : "pointer"
       },
       children: [
-        h ? null : /* @__PURE__ */ t(y, { iso2: i, style: { display: "flex", width: 24, color: "inherit" } }),
-        /* @__PURE__ */ t(a, { component: "span", sx: { lineHeight: 1.5 }, children: f ? r == null ? void 0 : r.name : `+${r == null ? void 0 : r.dialCode}` })
+        p ? null : /* @__PURE__ */ t(y, { iso2: r, style: { display: "flex", width: 24, color: "inherit" } }),
+        /* @__PURE__ */ t(a, { component: "span", sx: { lineHeight: 1.5 }, children: h ? m?.name : `+${m?.dialCode}` })
       ]
     }
   );
-  return p ? g : /* @__PURE__ */ l(
+  return u ? f : /* @__PURE__ */ i(
     z,
     {
-      ...m,
-      ref: w,
+      ...c,
+      ref: x,
       MenuProps: {
         style: { maxHeight: 400, top: 2, zIndex: 9999 },
         // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
         anchorOrigin: { vertical: "bottom", horizontal: "left" },
         transformOrigin: { vertical: "top", horizontal: "left" },
-        ...m.MenuProps ?? {}
+        ...c.MenuProps ?? {}
       },
-      sx: F(
+      sx: P(
         {
           '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: "block" } },
           ".MuiSelect-select": { padding: 1, paddingRight: "24px !important" },
@@ -69,10 +69,10 @@ function L({
         },
         I
       ),
-      value: i,
-      onChange: (e) => s == null ? void 0 : s(e.target.value),
-      IconComponent: (e) => /* @__PURE__ */ t(P, { ...e, width: 20, height: 20 }),
-      renderValue: () => g,
+      value: r,
+      onChange: (e) => w?.(e.target.value),
+      IconComponent: (e) => /* @__PURE__ */ t(D, { ...e, width: 20, height: 20 }),
+      renderValue: () => f,
       children: [
         /* @__PURE__ */ t(C, { sx: { p: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t(
           j,
@@ -87,9 +87,9 @@ function L({
           }
         ) }),
         b.map((e) => {
-          const o = c(e);
-          return /* @__PURE__ */ l(k, { value: o[v], children: [
-            h ? null : /* @__PURE__ */ t(y, { iso2: o.iso2, style: { marginRight: 8, width: 24 } }),
+          const o = d(e);
+          return /* @__PURE__ */ i(k, { value: o[v], children: [
+            p ? null : /* @__PURE__ */ t(y, { iso2: o.iso2, style: { marginRight: 8, width: 24 } }),
             /* @__PURE__ */ t(
               a,
               {
@@ -99,7 +99,7 @@ function L({
                 children: o.name
               }
             ),
-            f ? null : /* @__PURE__ */ l(a, { color: "gray", children: [
+            h ? null : /* @__PURE__ */ i(a, { color: "gray", children: [
               "(+",
               o.dialCode,
               ")"
@@ -110,7 +110,7 @@ function L({
     }
   );
 }
-const A = L;
+const q = F;
 export {
-  A as default
+  q as default
 };

package/lib/PhoneInput/index.js

@@ -1,55 +1,54 @@
-import { jsxs as $, jsx as m } from "react/jsx-runtime";
-import { useMemo as P, useState as F, useCallback as k } from "react";
-import { Box as I, Typography as A, TextField as L } from "@mui/material";
-import { parsePhoneNumber as v } from "awesome-phonenumber";
-import { defaultCountries as f, parseCountry as p, usePhoneInput as R } from "react-international-phone";
-import V from "./country-select.js";
+import { jsxs as D, jsx as y } from "react/jsx-runtime";
+import { useMemo as g, useState as F, useCallback as k } from "react";
+import { Box as $, Typography as A, TextField as L } from "@mui/material";
+import { parsePhoneNumber as b } from "awesome-phonenumber";
+import { defaultCountries as d, parseCountry as f, usePhoneInput as R } from "react-international-phone";
+import I from "./country-select.js";
 import { mergeSx as q } from "../Util/style.js";
-function W(e, t, n = "") {
-  var c, h;
+function x(e, t, n = "") {
   if (!e) return !1;
-  const r = e.replace(/[\s\-()]+/g, ""), u = n || B(t);
-  if (g(u) === g(r))
+  const r = e.replace(/[\s\-()]+/g, ""), u = n || w(t);
+  if (m(u) === m(r))
     return !0;
-  const a = v(e, { regionCode: t }), d = (c = a.number) == null ? void 0 : c.input.replace(/[\s\-()]+/g, "");
-  return a.valid && (a.type === "mobile" || a.type === "fixed-line-or-mobile") && d === ((h = a.number) == null ? void 0 : h.e164);
+  const a = b(e, { regionCode: t }), l = a.number?.input.replace(/[\s\-()]+/g, "");
+  return a.valid && (a.type === "mobile" || a.type === "fixed-line-or-mobile") && l === a.number?.e164;
 }
-function x(e, t) {
+function P(e, t) {
   return e ? e.replace(new RegExp(`^\\+${t}`), "") : "";
 }
-function b(e, t) {
+function V(e, t) {
   return e ? e.startsWith("+") ? e : `+${t}${e}` : `+${t}`;
 }
-function g(e) {
+function m(e) {
   return e.replace(/^\+/, "");
 }
-function w(e, t) {
-  const n = f.find((r) => p(r).iso2 === e);
+function v(e, t) {
+  const n = d.find((r) => f(r).iso2 === e);
   if (n)
-    return p(n)[t];
+    return f(n)[t];
 }
-function B(e) {
-  return w(e, "dialCode") || "";
+function w(e) {
+  return v(e, "dialCode") || "";
 }
 function U(e) {
-  return w(e, "name") || "";
+  return v(e, "name") || "";
 }
 function X(e) {
   try {
     if (!e) return;
     if (e.startsWith("+")) {
-      const t = v(e);
+      const t = b(e);
       if (t.valid)
         return t.regionCode.toLowerCase();
-      for (const n of f) {
-        const r = p(n);
-        if (e.startsWith(`+${r.dialCode}`) && W(e, r.dialCode, r.iso2))
+      for (const n of d) {
+        const r = f(n);
+        if (e.startsWith(`+${r.dialCode}`) && x(e, r.dialCode, r.iso2))
           return r.iso2;
       }
     } else
-      for (const t of f) {
-        const n = p(t), r = `+${n.dialCode}${e}`;
-        if (W(r, n.dialCode, n.iso2))
+      for (const t of d) {
+        const n = f(t), r = `+${n.dialCode}${e}`;
+        if (x(r, n.dialCode, n.iso2))
           return n.iso2;
       }
     return;
@@ -64,56 +63,56 @@ function Y({
   countryDisplayOptions: r = {},
   preview: u = !1,
   allowDial: a = !0,
-  ...d
+  ...l
 }) {
-  const c = P(() => {
+  const p = g(() => {
     const o = /* @__PURE__ */ new Map();
-    return f.forEach((i) => {
-      const s = p(i);
+    return d.forEach((i) => {
+      const s = f(i);
       o.set(s.iso2, s);
     }), o;
-  }, []), [h, M] = F(e), E = k(
+  }, []), [B, M] = F(e), E = k(
     (o) => {
       if (!u && t) {
         const i = {
           ...e,
           ...o
-        }, s = c.get(i.country);
-        s && (i.phone = b(i.phone, g(s.dialCode))), t(i);
+        }, s = p.get(i.country);
+        s && (i.phone = V(i.phone, m(s.dialCode))), t(i);
       }
     },
-    [t, u, e, c]
-  ), C = P(() => {
-    const o = c.get(e.country);
-    return o ? g(o.dialCode) : "";
-  }, [e.country, c]), { phone: l, country: y, handlePhoneValueChange: S, setCountry: T } = R({
+    [t, u, e, p]
+  ), h = g(() => {
+    const o = p.get(e.country);
+    return o ? m(o.dialCode) : "";
+  }, [e.country, p]), { phone: c, country: C, handlePhoneValueChange: S, setCountry: T } = R({
     defaultCountry: e.country,
-    value: x(e.phone, C),
-    countries: f,
+    value: P(e.phone, h),
+    countries: d,
     disableDialCodeAndPrefix: !0,
     onChange: (o) => {
       const i = {
         ...o,
-        phone: h.country !== o.country && !o.phone ? x(e.phone, C) : o.phone
+        phone: B.country !== o.country && !o.phone ? P(e.phone, h) : o.phone
       };
       M(i), E(i);
     }
-  }), D = P(
-    () => l || x(e.phone, C),
-    [l, e.phone, C]
+  }), W = g(
+    () => c || P(e.phone, h),
+    [c, e.phone, h]
   ), j = (o) => {
     u || T(o);
   };
   if (u) {
-    const o = b(l, B(y)), i = l && W(o, y), s = a && i;
-    return /* @__PURE__ */ $(
-      I,
+    const o = V(c, w(C)), i = c && x(o, C), s = a && i;
+    return /* @__PURE__ */ D(
+      $,
       {
         component: s ? "a" : "div",
-        href: s ? `tel:${l}` : void 0,
+        href: s ? `tel:${c}` : void 0,
         ...s ? {
-          "aria-label": `Call ${l}`,
-          title: `Call ${l}`,
+          "aria-label": `Call ${c}`,
+          title: `Call ${c}`,
           rel: "nofollow",
           itemProp: "telephone"
         } : {},
@@ -128,14 +127,14 @@ function Y({
           }
         },
         children: [
-          /* @__PURE__ */ m(V, { value: y, preview: u }),
-          /* @__PURE__ */ m(A, { sx: { ml: 0.5 }, children: D })
+          /* @__PURE__ */ y(I, { value: C, preview: u }),
+          /* @__PURE__ */ y(A, { sx: { ml: 0.5 }, children: W })
         ]
       }
     );
   }
-  return /* @__PURE__ */ $(
-    I,
+  return /* @__PURE__ */ D(
+    $,
     {
       sx: {
         display: "flex",
@@ -143,20 +142,20 @@ function Y({
         gap: 0.5
       },
       children: [
-        /* @__PURE__ */ m(
-          V,
+        /* @__PURE__ */ y(
+          I,
           {
-            value: y,
+            value: C,
             onChange: j,
             preview: !1,
             selectCountryProps: r
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ y(
           L,
           {
-            ...d,
-            value: D,
+            ...l,
+            value: W,
             onChange: S,
             placeholder: n,
             className: "phone-input",
@@ -166,11 +165,11 @@ function Y({
                   padding: 1
                 }
               },
-              d.sx
+              l.sx
               // 这里传入的可能是一个数组或一个对象
             ),
             slotProps: {
-              input: d.InputProps ?? {}
+              input: l.InputProps ?? {}
             }
           }
         )
@@ -182,6 +181,6 @@ export {
   Y as default,
   X as detectCountryFromPhone,
   U as getCountryNameByCountry,
-  B as getDialCodeByCountry,
-  W as validatePhoneNumber
+  w as getDialCodeByCountry,
+  x as validatePhoneNumber
 };

package/lib/Screenshot/index.js

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as N } from "react/jsx-runtime";
-import { useRef as k, useState as v, useEffect as S, Children as g, cloneElement as $, createElement as z } from "react";
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import { useRef as N, useState as f, useEffect as k, Children as v, cloneElement as S, createElement as $ } from "react";
 import a from "lodash/isUndefined";
-import { mergeProps as C } from "../Util/index.js";
-import { styled as b } from "../Theme/index.js";
-import j from "./BaseScreenshot/index.js";
+import { mergeProps as z } from "../Util/index.js";
+import { styled as g } from "../Theme/index.js";
+import C from "./BaseScreenshot/index.js";
 /* empty css            */
 const u = {
   "iphone-x": {
@@ -71,34 +71,33 @@ const u = {
     width: 200,
     scale: 1
   }
-}, E = {
+}, j = {
   img: ["alt", "title", "src", "srcSet", "sizes", "loading", "key", "children"],
   video: ["alt", "title", "muted", "autoplay", "loop", "key", "children"]
-}, O = (t) => [
-  z(
+}, E = (t) => [
+  $(
     t.type,
-    E[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
+    j[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
   )
-], w = (t, e = !0) => {
+], b = (t, e = !0) => {
   for (let i = 0; i < t.length; i++) {
     const r = t[i];
     if (["img", "video"].includes(r.type))
-      return O(r);
+      return E(r);
     if (r.props && r.props.children) {
-      const n = g.toArray(r.props.children), o = w(n, !1);
+      const n = v.toArray(r.props.children), o = b(n, !1);
       if (o)
         return o;
     }
   }
   return e ? t : null;
 };
-function y(t) {
-  var f;
+function w(t) {
   const e = Object.assign({}, t);
   a(e.type) && (e.type = "iphone-x"), a(e.className) && (e.className = ""), a(e.style) && (e.style = {}), a(e.width) && (e.width = 0), a(e.height) && (e.height = 0);
-  const i = C(e, y, ["style", "width", "height"]), { type: r, children: n, style: o, className: c, width: p, height: m, ...l } = i, { zIndex: h = 0, borderRadius: d = 0 } = u[r] || {};
-  return /* @__PURE__ */ N(
-    H,
+  const i = z(e, w, ["style", "width", "height"]), { type: r, children: n, style: o, className: c, width: p, height: m, ...l } = i, { zIndex: h = 0, borderRadius: d = 0 } = u[r] || {};
+  return /* @__PURE__ */ x(
+    O,
     {
       ...l,
       type: r,
@@ -107,7 +106,7 @@ function y(t) {
       contentRadius: d,
       contentZIndex: h,
       children: [
-        /* @__PURE__ */ s("div", { className: "device-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: (f = w(g.toArray(n))) == null ? void 0 : f.map((R, x) => $(R, { key: x })) }) }),
+        /* @__PURE__ */ s("div", { className: "device-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: b(v.toArray(n))?.map((y, R) => S(y, { key: R })) }) }),
         /* @__PURE__ */ s("div", { className: "device-stripe" }),
         /* @__PURE__ */ s("div", { className: "device-header" }),
         /* @__PURE__ */ s("div", { className: "device-sensors" }),
@@ -117,7 +116,7 @@ function y(t) {
     }
   );
 }
-const H = b("div")`
+const O = g("div")`
   @media (max-width: ${(t) => u[t.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(t) => u[t.type].scale});
@@ -136,9 +135,9 @@ const H = b("div")`
     height: 100.1%;
   }
 `;
-function P({ ...t }) {
-  const e = k(null), [i, r] = v(), [n, o] = v(null);
-  return S(() => {
+function H({ ...t }) {
+  const e = N(null), [i, r] = f(), [n, o] = f(null);
+  return k(() => {
     let c = null;
     const p = () => {
       const { clientWidth: m } = e.current, { clientWidth: l, clientHeight: h } = e.current.children[0], d = m / l;
@@ -147,18 +146,18 @@ function P({ ...t }) {
     return e.current && (c = new ResizeObserver(p), c.observe(e.current)), () => {
       c && c.disconnect();
     };
-  }, [e.current]), /* @__PURE__ */ s(W, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(y, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
+  }, [e.current]), /* @__PURE__ */ s(P, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(w, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
 }
-const W = b("div")`
+const P = g("div")`
   div[type] {
     transform: scale(1);
     transform-origin: 0 0;
   }
 `;
-function _({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
+function Z({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
   const o = t.toLowerCase();
-  return ["phone", "macbook"].includes(o) ? /* @__PURE__ */ s(j, { type: o, sx: r, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) }) : /* @__PURE__ */ s(P, { type: t, sx: { ...r, margin: "auto" }, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) });
+  return ["phone", "macbook"].includes(o) ? /* @__PURE__ */ s(C, { type: o, sx: r, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) }) : /* @__PURE__ */ s(H, { type: t, sx: { ...r, margin: "auto" }, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) });
 }
 export {
-  _ as default
+  Z as default
 };