@blocklet/ui-react 3.0.12 → 3.0.13

package/lib/Footer/brand.js

@@ -1,15 +1,15 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { isValidElement as s } from "react";
+import { isValidElement as l } from "react";
 import i from "prop-types";
-import { styled as m } from "@arcblock/ux/lib/Theme";
-import { Box as a } from "@mui/material";
-function p({ name: e = "", logo: t = "", description: r = "", ...d }) {
+import { styled as s } from "@arcblock/ux/lib/Theme";
+import { Box as m } from "@mui/material";
+function p({ name: e = "", logo: t = "", description: r = "", ...a }) {
   if (!e && !t && !r)
     return null;
-  const l = s(t) ? t : /* @__PURE__ */ o("img", { src: t, alt: e });
-  return /* @__PURE__ */ n(h, { ...d, children: [
+  const d = l(t) ? t : /* @__PURE__ */ o("img", { src: t, alt: e });
+  return /* @__PURE__ */ n(h, { ...a, children: [
     /* @__PURE__ */ n("div", { children: [
-      t && /* @__PURE__ */ o(a, { component: "a", href: "/", className: "footer-brand-logo", children: l }),
+      t && /* @__PURE__ */ o(m, { component: "a", href: "/", className: "footer-brand-logo", children: d }),
       e && /* @__PURE__ */ o("div", { className: "footer-brand-name", children: e })
     ] }),
     r && /* @__PURE__ */ o("div", { className: "footer-brand-desc", children: r })
@@ -20,7 +20,7 @@ p.propTypes = {
   logo: i.node,
   description: i.string
 };
-const h = m(a)`
+const h = s("div")`
   display: flex;
   flex-direction: column;
   font-size: 14px;

package/lib/Footer/layout/plain.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as n, Fragment as a } from "react/jsx-runtime";
 import { cloneElement as l } from "react";
 import e from "prop-types";
-import { Box as p, Container as r } from "@mui/material";
-import { styled as d } from "@arcblock/ux/lib/Theme";
-import s from "./row.js";
-function c({ elements: i, data: u, ...o }) {
-  return /* @__PURE__ */ t(m, { ...o, children: /* @__PURE__ */ t(r, { style: { padding: 0 }, children: /* @__PURE__ */ n(r, { className: "plain-layout-container", children: [
-    i.links && /* @__PURE__ */ n(s, { sx: { width: 1 }, autoCenter: !0, children: [
+import { Container as r } from "@mui/material";
+import { styled as p } from "@arcblock/ux/lib/Theme";
+import d from "./row.js";
+function s({ elements: i, data: m, ...o }) {
+  return /* @__PURE__ */ t(c, { ...o, children: /* @__PURE__ */ t(r, { style: { padding: 0 }, children: /* @__PURE__ */ n(r, { className: "plain-layout-container", children: [
+    i.links && /* @__PURE__ */ n(d, { sx: { width: 1 }, autoCenter: !0, children: [
       i.copyright,
       i.links
     ] }),
@@ -16,7 +16,7 @@ function c({ elements: i, data: u, ...o }) {
     ] })
   ] }) }) });
 }
-c.propTypes = {
+s.propTypes = {
   elements: e.shape({
     brand: e.element,
     navigation: e.element,
@@ -26,7 +26,7 @@ c.propTypes = {
   }).isRequired,
   data: e.object.isRequired
 };
-const m = d(p)`
+const c = p("div")`
   padding: 24px 0;
   .plain-layout-container {
     display: flex;
@@ -37,5 +37,5 @@ const m = d(p)`
   }
 `;
 export {
-  c as default
+  s as default
 };

package/lib/Footer/layout/standard.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
 import o from "prop-types";
 import m from "clsx";
-import { Box as r, Container as t } from "@mui/material";
+import { Container as t, Box as r } from "@mui/material";
 import { styled as x } from "@arcblock/ux/lib/Theme";
 import f from "./row.js";
 function h({ elements: e, data: l, className: s = "", ...p }) {
@@ -79,7 +79,7 @@ h.propTypes = {
   data: o.object.isRequired,
   className: o.string
 };
-const g = x(r)`
+const g = x("div")`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {

package/lib/Footer/links.js

@@ -5,14 +5,13 @@ import { useCreation as $ } from "ahooks";
 import j from "lodash/isInteger";
 import I from "lodash/isString";
 import { styled as z } from "@arcblock/ux/lib/Theme";
-import { Box as M } from "@mui/material";
 import c from "clsx";
-import { ExpandMore as C } from "@mui/icons-material";
-import A from "../Icon/index.js";
-import E from "../hooks/use-mobile.js";
-import { splitNavColumns as F } from "../utils.js";
-function R({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
-  const [g, b] = N(-1), y = E({ key: "md" }), h = e.some((t) => t.items?.length), x = !y && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
+import { ExpandMore as M } from "@mui/icons-material";
+import C from "../Icon/index.js";
+import A from "../hooks/use-mobile.js";
+import { splitNavColumns as E } from "../utils.js";
+function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
+  const [g, b] = N(-1), y = A({ key: "md" }), h = e.some((t) => t.items?.length), k = !y && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
     let s = t;
     if (a)
       s = a({ label: t, link: o, props: n });
@@ -31,10 +30,10 @@ function R({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
       );
     }
     return /* @__PURE__ */ m(v, { children: [
-      i && /* @__PURE__ */ r(A, { icon: i, size: 20, sx: { mr: 0.5 } }),
+      i && /* @__PURE__ */ r(C, { icon: i, size: 20, sx: { mr: 0.5 } }),
       s
     ] });
-  }, w = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : x ? F(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
+  }, w = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : k ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
     const { items: n } = i;
     return /* @__PURE__ */ m("div", { className: "footer-links-group", children: [
       /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(i) }),
@@ -60,7 +59,7 @@ function R({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
           /* @__PURE__ */ m("span", { className: "footer-links-item", children: [
             p(t),
             !!i?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
-              C,
+              M,
               {
                 style: {
                   transform: `rotate(${a ? 180 : 0}deg)`
@@ -73,21 +72,21 @@ function R({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
       },
       o
     );
-  }) : null, [e, d, x, g]);
+  }) : null, [e, d, k, g]);
   return e?.length ? /* @__PURE__ */ r(
-    S,
+    R,
     {
-      ...k,
-      className: c(k.className, {
+      ...x,
+      className: c(x.className, {
         "footer-links--grouped": h,
         "footer-links--flow": d,
-        "footer-links--columns": x
+        "footer-links--columns": k
       }),
       children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: w })
     }
   ) : null;
 }
-R.propTypes = {
+F.propTypes = {
   links: l.arrayOf(
     l.shape({
       label: l.string,
@@ -101,7 +100,7 @@ R.propTypes = {
   // 列布局
   columns: l.number.isRequired
 };
-const S = z(M)`
+const R = z("div")`
   overflow: hidden;
   color: ${({ theme: e }) => e.palette.text.secondary};
   .footer-links-inner {
@@ -251,5 +250,5 @@ const S = z(M)`
   }
 `;
 export {
-  R as default
+  F as default
 };

package/lib/Footer/social-media.js

@@ -1,31 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import o from "prop-types";
+import { jsx as o } from "react/jsx-runtime";
+import t from "prop-types";
 import { styled as a } from "@arcblock/ux/lib/Theme";
-import { Box as l } from "@mui/material";
-import p from "../Icon/index.js";
-function c({ items: e = null, ...n }) {
-  return e?.length ? /* @__PURE__ */ t(s, { ...n, children: e.map((r, i) => /* @__PURE__ */ t(
+import l from "../Icon/index.js";
+function p({ items: e = null, ...n }) {
+  return e?.length ? /* @__PURE__ */ o(c, { ...n, children: e.map((r, i) => /* @__PURE__ */ o(
     "a",
     {
       href: r.link,
       target: "_blank",
       "aria-label": `Social media icon${r.title ? ` for ${r.title}` : ""}`,
       rel: "noreferrer",
-      children: /* @__PURE__ */ t(p, { icon: r.icon || r.title, size: 24, component: "span" })
+      children: /* @__PURE__ */ o(l, { icon: r.icon || r.title, size: 24, component: "span" })
     },
     i
   )) }) : null;
 }
-c.propTypes = {
-  items: o.arrayOf(
-    o.shape({
+p.propTypes = {
+  items: t.arrayOf(
+    t.shape({
       // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
-      icon: o.string,
-      link: o.string
+      icon: t.string,
+      link: t.string
     })
   )
 };
-const s = a(l)`
+const c = a("div")`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -44,5 +43,5 @@ const s = a(l)`
   }
 `;
 export {
-  c as default
+  p as default
 };

package/lib/UserCenter/components/user-center.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as f, Fragment as D } from "react/jsx-runtime";
 import { use as fe } from "react";
-import { styled as oe, Box as a, Typography as pe, CircularProgress as me, Divider as he } from "@mui/material";
+import { Box as a, Typography as pe, CircularProgress as me, Divider as he } from "@mui/material";
 import { useMemoizedFn as y, useCreation as d, useRequest as Y } from "ahooks";
 import xe from "p-wait-for";
 import { SessionContext as ge } from "@arcblock/did-connect/lib/Session";
@@ -12,6 +12,7 @@ import { useConfirm as ye } from "@arcblock/ux/lib/Dialog";
 import { translate as Ce } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback as Pe } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled as oe } from "@arcblock/ux/lib/Theme";
 import Se from "lodash/cloneDeep";
 import { joinURL as C, getQuery as De, withoutTrailingSlash as Z, withQuery as $ } from "ufo";
 import { PROFILE_URL as k } from "@arcblock/ux/lib/Util/constant";
@@ -63,7 +64,7 @@ const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe
     }
   }
 }));
-function Pr({
+function Sr({
   children: v,
   notLoginContent: L = null,
   currentTab: h,
@@ -439,5 +440,5 @@ function Pr({
   );
 }
 export {
-  Pr as default
+  Sr as default
 };

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

@@ -1,7 +1,7 @@
-import { jsxs as E, jsx as s } from "react/jsx-runtime";
-import { Box as I, Tooltip as H, Badge as z } from "@mui/material";
+import { jsxs as w, jsx as s } from "react/jsx-runtime";
+import { Tooltip as E, Box as H, Badge as z } from "@mui/material";
 import B from "@emotion/styled";
-import { lazy as c, useState as v, useEffect as U, useCallback as q, useMemo as A, Suspense as F } from "react";
+import { lazy as c, useState as k, useEffect as U, useCallback as q, useMemo as A, Suspense as F } from "react";
 import { useMemoizedFn as C, useInterval as L, useUnmount as Q, useCreation as G } from "ahooks";
 import { useLocaleContext as J } from "@arcblock/ux/lib/Locale/context";
 import { translate as K } from "@arcblock/ux/lib/Locale/util";
@@ -38,21 +38,21 @@ const _ = c(() => import("@arcblock/icons/lib/Meeting")), tt = c(() => import("@
     durationName: "userStatus.duration.ThisWeek"
   }
 };
-function yt({
+function vt({
   isMobile: t = void 0,
-  size: R,
+  size: I,
   isMyself: h,
   status: i,
   onChange: d,
-  timezone: W = void 0
+  timezone: R = void 0
 }) {
-  const { locale: l } = J(), u = C((n, e = {}) => K(X, n, l, "en", e)), [b, m] = v(void 0), p = C(() => {
+  const { locale: l } = J(), u = C((n, e = {}) => K(X, n, l, "en", e)), [W, m] = k(void 0), p = C(() => {
     m(void 0);
   });
   U(() => {
     m(1e3);
   }, [i]);
-  const N = L(() => {
+  const b = L(() => {
     if (i?.value && i?.dateRange?.length === 2) {
       if (T(i))
         return;
@@ -64,11 +64,11 @@ function yt({
       }
     } else
       p();
-  }, b);
+  }, W);
   Q(() => {
-    N();
+    b();
   });
-  const [O, g] = v(null), S = q(() => Object.keys(a).map((e) => ({
+  const [N, g] = k(null), S = q(() => Object.keys(a).map((e) => ({
     id: a[e],
     name: u(`userStatus.duration.${e}`)
   })), [u]), f = G(() => {
@@ -83,49 +83,49 @@ function yt({
         children: n
       };
     });
-  }, [u, S, l]), D = (n) => {
+  }, [u, S, l]), O = (n) => {
     h && g(n.currentTarget);
   }, x = () => {
     g(null);
-  }, j = (n) => {
+  }, D = (n) => {
     h && (d(n), x());
-  }, y = $[i?.value], M = A(() => {
+  }, v = $[i?.value], j = A(() => {
     const n = f.find((e) => e.id === i?.value);
     if (n) {
       const e = l === "zh" ? "zh-cn" : "en-us";
       let r;
-      return T(i) || (r = i?.dateRange?.map((w) => P(w, { locale: e }))), r && r.length > 0 ? `${n.name}: ${r.join("~")}` : n.name;
+      return T(i) || (r = i?.dateRange?.map((M) => P(M, { locale: e }))), r && r.length > 0 ? `${n.name}: ${r.join("~")}` : n.name;
     }
     return null;
-  }, [i, f, l]), k = !!O;
-  return /* @__PURE__ */ E(rt, { size: R, isMobile: t, children: [
-    /* @__PURE__ */ s(H, { title: M, children: /* @__PURE__ */ s(
-      I,
+  }, [i, f, l]), y = !!N;
+  return /* @__PURE__ */ w(rt, { size: I, isMobile: t, children: [
+    /* @__PURE__ */ s(E, { title: j, children: /* @__PURE__ */ s(
+      H,
       {
         className: "status-icon",
-        onClick: D,
+        onClick: O,
         sx: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        children: y ? /* @__PURE__ */ s(F, { fallback: null, children: /* @__PURE__ */ s(y, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ s(z, { color: "success", variant: "dot" })
+        children: v ? /* @__PURE__ */ s(F, { fallback: null, children: /* @__PURE__ */ s(v, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ s(z, { color: "success", variant: "dot" })
       }
     ) }),
-    k && /* @__PURE__ */ s(
+    y && /* @__PURE__ */ s(
       V,
       {
         selected: i,
         data: f,
-        open: k,
-        onSelect: j,
+        open: y,
+        onSelect: D,
         onClose: x,
-        timezone: W
+        timezone: R
       }
     )
   ] });
 }
-const rt = B(I)`
+const rt = B("div")`
   position: absolute;
   left: ${({ size: t }) => `${t * 3 / 4}px`};
   top: ${({ size: t }) => `${t * 0.65}px`};
@@ -149,5 +149,5 @@ const rt = B(I)`
   }
 `;
 export {
-  yt as default
+  vt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.45",
     "@abtnode/util": "^1.16.45",
-    "@arcblock/bridge": "3.0.12",
-    "@arcblock/icons": "3.0.12",
-    "@arcblock/react-hooks": "3.0.12",
+    "@arcblock/bridge": "3.0.13",
+    "@arcblock/icons": "3.0.13",
+    "@arcblock/react-hooks": "3.0.13",
     "@arcblock/ws": "^1.20.15",
     "@blocklet/constant": "^1.16.45",
     "@blocklet/did-space-react": "^1.1.0",
@@ -90,5 +90,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "ebe824e4b0ddfc1cbdd9ffecc22283e57a58c042"
+  "gitHead": "2c404ff0a38e52d197334a035160b5eddf56df07"
 }

package/src/Footer/brand.jsx

@@ -31,7 +31,7 @@ Brand.propTypes = {
   description: PropTypes.string,
 };
 
-const Root = styled(Box)`
+const Root = styled('div')`
   display: flex;
   flex-direction: column;
   font-size: 14px;

package/src/Footer/layout/plain.jsx

@@ -1,6 +1,6 @@
 import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Container } from '@mui/material';
+import { Container } from '@mui/material';
 import { styled } from '@arcblock/ux/lib/Theme';
 import Row from './row';
 
@@ -41,7 +41,7 @@ PlainLayout.propTypes = {
   data: PropTypes.object.isRequired,
 };
 
-const Root = styled(Box)`
+const Root = styled('div')`
   padding: 24px 0;
   .plain-layout-container {
     display: flex;

package/src/Footer/layout/standard.jsx

@@ -92,7 +92,7 @@ StandardLayout.propTypes = {
   className: PropTypes.string,
 };
 
-const Root = styled(Box)`
+const Root = styled('div')`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {

package/src/Footer/links.jsx

@@ -5,7 +5,6 @@ import { useCreation } from 'ahooks';
 import isInteger from 'lodash/isInteger';
 import isString from 'lodash/isString';
 import { styled } from '@arcblock/ux/lib/Theme';
-import { Box } from '@mui/material';
 import clsx from 'clsx';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import Icon from '../Icon';
@@ -163,7 +162,7 @@ Links.propTypes = {
   columns: PropTypes.number.isRequired,
 };
 
-const Root = styled(Box)`
+const Root = styled('div')`
   overflow: hidden;
   color: ${({ theme }) => theme.palette.text.secondary};
   .footer-links-inner {

package/src/Footer/social-media.jsx

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
-import { Box } from '@mui/material';
-
 import Icon from '../Icon';
 
 export default function SocialMedia({ items = null, ...rest }) {
@@ -37,7 +35,7 @@ SocialMedia.propTypes = {
   ),
 };
 
-const Root = styled(Box)`
+const Root = styled('div')`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;

package/src/UserCenter/components/user-center.tsx

@@ -1,5 +1,5 @@
 import { use } from 'react';
-import { Box, CircularProgress, Divider, Typography, styled } from '@mui/material';
+import { Box, CircularProgress, Divider, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
 import pWaitFor from 'p-wait-for';
@@ -13,6 +13,7 @@ import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import { styled } from '@arcblock/ux/lib/Theme';
 import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery, joinURL, withoutTrailingSlash } from 'ufo';
 import type { AxiosError } from 'axios';

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

@@ -209,7 +209,7 @@ export default function UserStatus({
   );
 }
 
-const StatusDiv = styled(Box)<{ size: number; isMobile?: boolean }>`
+const StatusDiv = styled('div')<{ size: number; isMobile?: boolean }>`
   position: absolute;
   left: ${({ size }) => `${(size * 3) / 4}px`};
   top: ${({ size }) => `${size * 0.65}px`};