@blocklet/ui-react 3.4.5 → 3.4.7

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import { useState as I, useMemo as C } from "react";
-import { styled as k, Box as p, Typography as y, IconButton as D, Button as U, useTheme as S, FormControl as B, TextField as F } from "@mui/material";
+import { Box as p, Typography as y, IconButton as k, Button as D, useTheme as U, styled as S, FormControl as B, TextField as F } from "@mui/material";
 import { Remove as T, Add as _ } from "@mui/icons-material";
 import { translate as z } from "@arcblock/ux/lib/Locale/util";
 import { useMemoizedFn as E } from "ahooks";
@@ -83,14 +83,14 @@ function q({ links: t = [], onChange: s }) {
               },
               children: [
                 /* @__PURE__ */ e($, { value: o, onChange: (c) => b(n, c), errorMsg: a }),
-                /* @__PURE__ */ e(D, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
+                /* @__PURE__ */ e(k, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
               ]
             },
             n
           );
         }),
         t.length < g ? /* @__PURE__ */ f(
-          U,
+          D,
           {
             fullWidth: !0,
             variant: "outlined",
@@ -122,7 +122,7 @@ function q({ links: t = [], onChange: s }) {
   );
 }
 function G({ link: t }) {
-  const l = S().palette.mode === "dark";
+  const l = U().palette.mode === "dark";
   if (!t)
     return null;
   const { icon: r, options: i } = W(t) || {};
@@ -174,7 +174,7 @@ function ut({
     }
   );
 }
-const H = k("span")`
+const H = S("span")`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;

package/lib/UserCenter/components/user-info/metadata.js

@@ -1,7 +1,7 @@
 import { jsxs as y, Fragment as B, jsx as t } from "react/jsx-runtime";
-import { memo as te, createElement as re, useState as R, useRef as ie, useEffect as ae, useMemo as D } from "react";
+import { useState as R, useRef as te, useEffect as re, useMemo as D, memo as ie, createElement as ae } from "react";
 import { Icon as le } from "@iconify/react";
-import { Backdrop as de, Box as m, useMediaQuery as ce, SwipeableDrawer as pe, Typography as L, Tooltip as se } from "@mui/material";
+import { useMediaQuery as de, SwipeableDrawer as ce, Box as m, Typography as L, Tooltip as se, Backdrop as pe } from "@mui/material";
 import me from "@emotion/styled";
 import N from "@arcblock/ux/lib/Button";
 import F, { detectCountryFromPhone as T, getCountryNameByCountry as ue, validatePhoneNumber as he, getDialCodeByCountry as fe } from "@arcblock/ux/lib/PhoneInput";
@@ -29,12 +29,12 @@ import Se from "./address.js";
 const E = {
   width: 20,
   height: 20
-}, H = 200, Q = te(function({
+}, H = 200, Q = ie(function({
   ref: r,
   ...I
 }) {
-  return /* @__PURE__ */ re(
-    de,
+  return /* @__PURE__ */ ae(
+    pe,
     {
       ref: r,
       component: "div",
@@ -50,12 +50,12 @@ const E = {
 });
 Q.displayName = "BackdropWrap";
 function mo({
-  isMyself: p,
+  isMyself: s,
   user: r,
   onSave: I,
   isMobile: x
 }) {
-  const [U, P] = R(!1), [Y, C] = R(!1), _ = ie(null), q = we(), b = ce("(max-width:640px)") || q.mobile.any, c = w({
+  const [U, P] = R(!1), [Y, C] = R(!1), _ = te(null), q = we(), b = de("(max-width:640px)") || q.mobile.any, c = w({
     email: "",
     phone: ""
   }), u = w({
@@ -66,7 +66,7 @@ function mo({
     line2: "",
     postalCode: ""
   });
-  ae(() => {
+  re(() => {
     b || C(!1);
   }, [b]);
   const j = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), A = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: z } = ve(), d = be((o, n = {}) => ge(Ve, o, z, "en", n)), a = w(
@@ -108,10 +108,10 @@ function mo({
       country: h,
       phone: ""
     };
-  }, [a.phone, r?.phone, h]), s = (o, n) => {
+  }, [a.phone, r?.phone, h]), p = (o, n) => {
     a[n] = o;
   }, K = (o, n) => {
-    l[o] = n, o === "city" && s(n, "location"), o === "postalCode" ? u.postalCode = n && !$(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
+    l[o] = n, o === "city" && p(n, "location"), o === "postalCode" ? u.postalCode = n && !$(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
   }, S = () => {
     b ? C(!0) : P(!0);
   }, O = () => {
@@ -147,7 +147,7 @@ function mo({
         favicon: e
       };
     });
-    s(n, "links");
+    p(n, "links");
   }, ee = () => {
     if (Object.keys(a).forEach((n) => {
       const e = n, i = a[e];
@@ -176,7 +176,7 @@ function mo({
           g,
           {
             value: a.bio ?? "",
-            onChange: (e) => s(e, "bio"),
+            onChange: (e) => p(e, "bio"),
             editable: o,
             placeholder: "Bio",
             component: "textarea",
@@ -189,7 +189,7 @@ function mo({
             }
           }
         ),
-        !o && p ? /* @__PURE__ */ t(
+        !o && s ? /* @__PURE__ */ t(
           N,
           {
             size: x ? "small" : "large",
@@ -205,7 +205,7 @@ function mo({
             children: d("profile.editProfile")
           }
         ) : null,
-        o && p && J ? /* @__PURE__ */ t(
+        o && s && J ? /* @__PURE__ */ t(
           Se,
           {
             address: l,
@@ -217,11 +217,11 @@ function mo({
           g,
           {
             value: a.location ?? r?.address?.city ?? "",
-            onChange: (e) => s(e, "location"),
+            onChange: (e) => p(e, "location"),
             editable: o,
             placeholder: "Location",
             label: d("profile.location"),
-            tooltip: p && (l.line1 || l.line2) ? /* @__PURE__ */ t(B, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
+            tooltip: s && (l.line1 || l.line2) ? /* @__PURE__ */ t(B, { children: ["line1", "line2"].map((e) => l[e] ? /* @__PURE__ */ y(m, { children: [
               /* @__PURE__ */ t(
                 L,
                 {
@@ -247,7 +247,7 @@ function mo({
           g,
           {
             value: a.timezone || "",
-            onChange: (e) => s(e, "timezone"),
+            onChange: (e) => p(e, "timezone"),
             editable: o,
             placeholder: "timezone",
             icon: /* @__PURE__ */ t(Pe, { ...E }),
@@ -257,7 +257,7 @@ function mo({
               Ae,
               {
                 value: a.timezone ?? "",
-                onChange: (e) => s(e, "timezone"),
+                onChange: (e) => p(e, "timezone"),
                 disabled: !o,
                 mode: n
               }
@@ -269,7 +269,7 @@ function mo({
           {
             value: a.email ?? r?.email ?? "",
             editable: o,
-            hidePreview: !p,
+            hidePreview: !s,
             disabled: r?.sourceProvider === M.EMAIL,
             canEdit: !A,
             verified: A,
@@ -289,9 +289,9 @@ function mo({
                 }
               ) }) : null
             ] }),
-            onChange: (e) => s(e, "email"),
+            onChange: (e) => p(e, "email"),
             errorMsg: c.email,
-            renderValue: (e) => p ? /* @__PURE__ */ t(
+            renderValue: (e) => s ? /* @__PURE__ */ t(
               "a",
               {
                 href: `mailto:${e}`,
@@ -313,29 +313,31 @@ function mo({
           {
             value: V.phone,
             editable: o,
-            hidePreview: !p,
+            hidePreview: !s,
             canEdit: !j,
             verified: j,
             placeholder: "Phone",
             icon: /* @__PURE__ */ t(Ie, { ...E }),
-            onChange: (e) => s(e, "phone"),
+            onChange: (e) => p(e, "phone"),
             label: d("profile.phone"),
-            renderValue: () => p ? /* @__PURE__ */ t(F, { value: V, preview: !0 }) : null,
+            renderValue: () => s ? /* @__PURE__ */ t(F, { value: V, preview: !0 }) : null,
             children: /* @__PURE__ */ t(
               F,
               {
                 variant: "outlined",
                 className: "editable-field",
-                InputProps: {
-                  sx: { backgroundColor: "transparent" },
-                  placeholder: "Phone"
+                slotProps: {
+                  input: {
+                    sx: { backgroundColor: "transparent" },
+                    placeholder: "Phone"
+                  }
                 },
                 value: V,
                 error: !!c.phone,
                 helperText: c.phone,
                 sx: xe(Be, c.phone ? {} : Le),
                 onChange: (e) => {
-                  he(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), s(
+                  he(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), p(
                     {
                       country: e.country,
                       phoneNumber: e.phone
@@ -348,7 +350,7 @@ function mo({
           }
         ),
         /* @__PURE__ */ t(Ne, { editable: o, links: X, onChange: Z }),
-        o && p ? /* @__PURE__ */ y(
+        o && s ? /* @__PURE__ */ y(
           m,
           {
             style: { width: "100%" },
@@ -397,7 +399,7 @@ function mo({
   return /* @__PURE__ */ y(B, { children: [
     W(U),
     b && /* @__PURE__ */ y(
-      pe,
+      ce,
       {
         sx: {
           zIndex: 9999

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -6,19 +6,19 @@ import { useMemoizedFn as V } from "ahooks";
 import { translate as Y } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext as $ } from "@arcblock/ux/lib/Locale/context";
 import q from "lodash/noop";
-import { useState as C, useEffect as j } from "react";
+import { lazy as G, useState as C, useEffect as j } from "react";
 import I from "@arcblock/ux/lib/Toast";
-import { parseURL as G, joinURL as H } from "ufo";
-import { KeyboardArrowUp as J, KeyboardArrowDown as X } from "@mui/icons-material";
-import { getBlockletSDK as Z } from "@blocklet/js-sdk";
-import { translations as _ } from "../../libs/locales.js";
+import { parseURL as H, joinURL as J } from "ufo";
+import { KeyboardArrowUp as X, KeyboardArrowDown as Z } from "@mui/icons-material";
+import { getBlockletSDK as _ } from "@blocklet/js-sdk";
+import { translations as P } from "../../libs/locales.js";
 import { formatAxiosError as R } from "../../libs/utils.js";
-import { currentTimezone as P, getStatusDuration as M, isValidUrl as tt, isDuplicateUrl as rt } from "./utils.js";
-import et from "./switch-role.js";
-import ot from "./metadata.js";
+import { currentTimezone as M, getStatusDuration as tt, isValidUrl as rt, isDuplicateUrl as et } from "./utils.js";
+import ot from "./switch-role.js";
 import at from "./user-status.js";
 import nt from "./user-info.js";
 import it from "./social-actions/index.js";
+const lt = G(() => import("./metadata.js"));
 function kt({
   user: t,
   isMyself: o = !0,
@@ -31,7 +31,7 @@ function kt({
   isShowSocialActions: D = !1,
   ...m
 }) {
-  const h = Z(), { locale: x } = $(), [g, v] = C(void 0), w = V((i, e = {}) => Y(_, i, x, "en", e)), [d, S] = C(!a || c);
+  const h = _(), { locale: x } = $(), [g, v] = C(void 0), w = V((i, e = {}) => Y(P, i, x, "en", e)), [d, S] = C(!a || c);
   j(() => {
     v(t?.metadata?.status);
   }, [t]), j(() => {
@@ -41,7 +41,7 @@ function kt({
     if (o)
       try {
         if (i) {
-          const e = M(i);
+          const e = tt(i);
           i.dateRange = e.length > 0 ? e : g?.dateRange ?? [];
         }
         v(i), await h.user.saveProfile({
@@ -62,10 +62,10 @@ function kt({
     const { metadata: e, address: E } = i;
     try {
       const p = e?.links?.map((n, U) => {
-        if (!n.url || !tt(n.url) || U > 0 && e.links?.slice(0, U)?.some((K) => rt(K.url, n.url)))
+        if (!n.url || !rt(n.url) || U > 0 && e.links?.slice(0, U)?.some((K) => et(K.url, n.url)))
           return null;
         try {
-          return G(n.url).protocol || (n.url = H("https://", n.url)), n;
+          return H(n.url).protocol || (n.url = J("https://", n.url)), n;
         } catch {
           return console.error("Invalid URL:", n.url), null;
         }
@@ -146,7 +146,7 @@ function kt({
                         isMobile: a,
                         size: m.size || (a ? 64 : 100),
                         isMyself: o,
-                        timezone: t?.metadata?.timezone || P,
+                        timezone: t?.metadata?.timezone || M,
                         status: g,
                         onChange: L
                       }
@@ -188,7 +188,7 @@ function kt({
                               children: t?.fullName
                             }
                           ),
-                          o ? /* @__PURE__ */ r(et, { user: t, switchPassport: k }) : null
+                          o ? /* @__PURE__ */ r(ot, { user: t, switchPassport: k }) : null
                         ]
                       }
                     ),
@@ -211,7 +211,7 @@ function kt({
           }
         ),
         !o && D ? /* @__PURE__ */ r(s, { sx: { mt: 2 }, children: /* @__PURE__ */ r(it, { user: t }) }) : null,
-        /* @__PURE__ */ r(ot, { isMobile: a, isMyself: o, user: t, onSave: B }),
+        /* @__PURE__ */ r(lt, { isMobile: a, isMyself: o, user: t, onSave: B }),
         o ? /* @__PURE__ */ l(N, { children: [
           /* @__PURE__ */ r(T, { sx: { my: a ? 1 : 3 } }),
           a && !c ? /* @__PURE__ */ r(
@@ -234,7 +234,7 @@ function kt({
                       opacity: 0.8
                     }
                   },
-                  children: d ? /* @__PURE__ */ r(J, {}) : /* @__PURE__ */ r(X, {})
+                  children: d ? /* @__PURE__ */ r(X, {}) : /* @__PURE__ */ r(Z, {})
                 }
               )
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.4.5",
+  "version": "3.4.7",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -8,6 +8,7 @@
     "component",
     "blocklet"
   ],
+  "sideEffects": false,
   "author": "wangshijun<wangshijun2010@gmail.com>",
   "homepage": "https://www.arcblock.io/docs/blocklet-ui-react",
   "license": "Apache-2.0",
@@ -35,11 +36,11 @@
   "dependencies": {
     "@abtnode/constant": "^1.17.7",
     "@abtnode/util": "^1.17.7",
-    "@arcblock/bridge": "3.4.5",
-    "@arcblock/icons": "3.4.5",
-    "@arcblock/react-hooks": "3.4.5",
-    "@arcblock/ws": "^1.28.2",
-    "@blocklet/did-space-react": "^1.2.14",
+    "@arcblock/bridge": "3.4.7",
+    "@arcblock/icons": "3.4.7",
+    "@arcblock/react-hooks": "3.4.7",
+    "@arcblock/ws": "^1.28.5",
+    "@blocklet/did-space-react": "^1.2.15",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -82,7 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.4.5",
+    "@arcblock/did-connect-react": "3.4.7",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -96,5 +97,5 @@
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "a944f14b25e2fd8cd0e7e32b3c3ce276961e6b64"
+  "gitHead": "eb0fca0015ba4ee80affb3b03d47505c45f8ec1c"
 }

package/src/UserCenter/components/user-info/metadata.tsx

@@ -497,9 +497,11 @@ export default function UserMetadataComponent({
           <PhoneInput
             variant="outlined"
             className="editable-field"
-            InputProps={{
-              sx: { backgroundColor: 'transparent' },
-              placeholder: 'Phone',
+            slotProps={{
+              input: {
+                sx: { backgroundColor: 'transparent' },
+                placeholder: 'Phone',
+              },
             }}
             value={phoneValue}
             error={!!validateMsg.phone}

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -6,7 +6,7 @@ import { useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import noop from 'lodash/noop';
-import { useEffect, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { AxiosError } from 'axios';
 import { parseURL, joinURL } from 'ufo';
@@ -21,11 +21,13 @@ import type { User, UserAddress, UserMetadata } from '../../../@types';
 import { formatAxiosError } from '../../libs/utils';
 import { currentTimezone, getStatusDuration, isValidUrl, isDuplicateUrl } from './utils';
 import SwitchRole from './switch-role';
-import UserMetadataComponent from './metadata';
+
 import UserStatus from './user-status';
 import UserInfo from './user-info';
 import SocialActions from './social-actions';
 
+const UserMetadataComponent = lazy(() => import('./metadata'));
+
 export default function UserBasicInfo({
   user,
   isMyself = true,