@blocklet/ui-react 3.0.9 → 3.0.11

package/lib/Footer/index.js

@@ -1,71 +1,70 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useMemo as b } from "react";
-import T from "prop-types";
-import { styled as M, useTheme as N, deepmerge as w, ThemeProvider as L } from "@arcblock/ux/lib/Theme";
-import { withErrorBoundary as j } from "react-error-boundary";
-import { useLocaleContext as C } from "@arcblock/ux/lib/Locale/context";
-import { ErrorFallback as E } from "@arcblock/ux/lib/ErrorBoundary";
-import I from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import P from "lodash/omit";
-import z from "./internal-footer.js";
-import { mapRecursive as D } from "../utils.js";
-import { formatBlockletInfo as H, getLocalizedNavigation as l } from "../blocklets.js";
-import { BlockletMetaProps as R } from "../types.js";
-import S from "../libs/with-hide-when-embed.js";
-function u({ meta: e = {}, theme: t = null, ...i }) {
-  var m, s, d;
-  const { locale: n } = C() || {}, p = N(), o = b(() => {
-    const r = Object.assign({}, window.blocklet, e);
+import { jsx as p } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import $ from "prop-types";
+import { styled as F, useTheme as x, deepmerge as T, ThemeProvider as B } from "@arcblock/ux/lib/Theme";
+import { withErrorBoundary as M } from "react-error-boundary";
+import { useLocaleContext as N } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback as w } from "@arcblock/ux/lib/ErrorBoundary";
+import L from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import j from "lodash/omit";
+import C from "./internal-footer.js";
+import { mapRecursive as E } from "../utils.js";
+import { formatBlockletInfo as I, getLocalizedNavigation as a } from "../blocklets.js";
+import { BlockletMetaProps as P } from "../types.js";
+import z from "../libs/with-hide-when-embed.js";
+function d({ meta: o = {}, theme: t = null, ...n }) {
+  const { locale: l } = N() || {}, c = x(), r = s(() => {
+    const e = Object.assign({}, window.blocklet, o);
     try {
-      return H(r);
-    } catch (x) {
-      return console.error("Failed to format blocklet info", x, r), r;
+      return I(e);
+    } catch (v) {
+      return console.error("Failed to format blocklet info", v, e), e;
     }
-  }, [e]), c = b(() => w(p, t), [p, t]), g = I({
+  }, [o]), m = s(() => T(c, t), [c, t]), f = L({
     key: "xs",
     // 始终优先长 logo
-    meta: e,
+    meta: o,
     theme: t
   });
-  if (!o.appName)
+  if (!r.appName)
     return null;
-  const { appName: h, appDescription: k, description: y, copyright: v } = o, $ = c.palette.background.default, a = {
-    footerNav: l((m = o == null ? void 0 : o.navigation) == null ? void 0 : m.footer, n) || [],
-    socialMedia: l((s = o == null ? void 0 : o.navigation) == null ? void 0 : s.social, n) || [],
-    links: l((d = o == null ? void 0 : o.navigation) == null ? void 0 : d.bottom, n) || []
-  }, F = {
+  const { appName: b, appDescription: k, description: u, copyright: g } = r, h = m.palette.background.default, i = {
+    footerNav: a(r?.navigation?.footer, l) || [],
+    socialMedia: a(r?.navigation?.social, l) || [],
+    links: a(r?.navigation?.bottom, l) || []
+  }, y = {
     brand: {
-      name: h,
-      description: k || y,
-      logo: g
+      name: b,
+      description: k || u,
+      logo: f
     },
-    navigation: D(
-      a.footerNav,
-      (r) => ({
-        ...r,
-        label: r.title,
-        link: r.link
+    navigation: E(
+      i.footerNav,
+      (e) => ({
+        ...e,
+        label: e.title,
+        link: e.link
       }),
       "items"
     ),
-    copyright: v,
-    socialMedia: a.socialMedia,
-    links: a.links.map((r) => ({ ...r, label: r.title }))
+    copyright: g,
+    socialMedia: i.socialMedia,
+    links: i.links.map((e) => ({ ...e, label: e.title }))
   };
-  return /* @__PURE__ */ f(L, { theme: c, children: /* @__PURE__ */ f(W, { ...F, ...P(i, ["bordered"]), $bordered: i == null ? void 0 : i.bordered, $bgcolor: $ }) });
+  return /* @__PURE__ */ p(B, { theme: m, children: /* @__PURE__ */ p(D, { ...y, ...j(n, ["bordered"]), $bordered: n?.bordered, $bgcolor: h }) });
 }
-u.propTypes = {
-  meta: R,
+d.propTypes = {
+  meta: P,
   // 允许覆盖 footer 内置的 theme
-  theme: T.object
+  theme: $.object
 };
-const W = M(z)`
-  ${({ $bordered: e, theme: t }) => `border-top: 1px solid ${e && t.palette.divider};`}
-  color: ${({ theme: e }) => e.palette.text.secondary};
-  ${({ $bgcolor: e }) => e && `background-color: ${e};`}
-`, oo = j(S(u), {
-  FallbackComponent: E
+const D = F(C)`
+  ${({ $bordered: o, theme: t }) => `border-top: 1px solid ${o && t.palette.divider};`}
+  color: ${({ theme: o }) => o.palette.text.secondary};
+  ${({ $bgcolor: o }) => o && `background-color: ${o};`}
+`, Z = M(z(d), {
+  FallbackComponent: w
 });
 export {
-  oo as default
+  Z as default
 };

package/lib/Footer/internal-footer.js

@@ -1,68 +1,64 @@
-import { jsxs as L, jsx as t } from "react/jsx-runtime";
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
 import n from "prop-types";
-import { Box as y } from "@mui/material";
-import O from "clsx";
-import B from "./brand.js";
-import g from "./links.js";
+import { Box as d } from "@mui/material";
+import v from "clsx";
+import L from "./brand.js";
+import y from "./links.js";
 import M from "./social-media.js";
-import N from "./copyright.js";
-import S from "./layout/standard.js";
-import C from "./layout/plain.js";
-const h = [
+import O from "./copyright.js";
+import B from "./layout/standard.js";
+import N from "./layout/plain.js";
+const f = [
   {
     name: "plain",
     // 没有 navigation 和 socialMedia, 使用一个简单的两端对齐布局
-    support: (a, o) => {
-      var r, e;
-      return !((r = o.navigation) != null && r.length) && !((e = o.socialMedia) != null && e.length);
-    },
-    component: C
+    support: (t, o) => !o.navigation?.length && !o.socialMedia?.length,
+    component: N
   },
   {
     name: "standard",
     // 默认标准布局
     support: () => !0,
-    component: S
+    component: B
   }
-], T = h.reduce((a, o) => ({ ...a, [o.name]: o }), {});
-function _({ ...a }) {
-  var d, f;
+], S = f.reduce((t, o) => ({ ...t, [o.name]: o }), {});
+function C({ ...t }) {
   const {
     brand: o = null,
-    navigation: r = null,
-    socialMedia: e = null,
-    copyright: l = null,
-    links: s = null,
-    layout: m = "auto",
-    ...i
-  } = a, k = () => o ? /* @__PURE__ */ t(B, { ...o }) : null, x = () => r != null && r.length ? /* @__PURE__ */ t(g, { links: r, columns: 3 }) : null, b = () => e != null && e.length ? /* @__PURE__ */ t(M, { items: e }) : null, w = () => {
-    const p = (l == null ? void 0 : l.owner) || (o == null ? void 0 : o.name);
-    return p ? /* @__PURE__ */ t(N, { owner: p, year: (l == null ? void 0 : l.year) || void 0 }) : null;
-  }, v = () => s != null && s.length ? /* @__PURE__ */ t(g, { flowLayout: !0, links: s }) : null, c = {
-    brand: k(),
-    navigation: x(),
-    socialMedia: b(),
-    copyright: w(),
-    links: v()
+    navigation: s = null,
+    socialMedia: p = null,
+    copyright: u = null,
+    links: c = null,
+    layout: l = "auto",
+    ...e
+  } = t, g = () => o ? /* @__PURE__ */ r(L, { ...o }) : null, h = () => s?.length ? /* @__PURE__ */ r(y, { links: s, columns: 3 }) : null, k = () => p?.length ? /* @__PURE__ */ r(M, { items: p }) : null, b = () => {
+    const i = u?.owner || o?.name;
+    return i ? /* @__PURE__ */ r(O, { owner: i, year: u?.year || void 0 }) : null;
+  }, x = () => c?.length ? /* @__PURE__ */ r(y, { flowLayout: !0, links: c }) : null, m = {
+    brand: g(),
+    navigation: h(),
+    socialMedia: k(),
+    copyright: b(),
+    links: x()
   };
-  let u = null;
-  if (m === "auto" ? u = h.find((p) => p.support(c, a)).component : u = (d = T[m]) == null ? void 0 : d.component, !u)
-    throw new Error(`layout ${m} is not supported.`);
-  return /* @__PURE__ */ L(
-    y,
+  let a = null;
+  if (l === "auto" ? a = f.find((i) => i.support(m, t)).component : a = S[l]?.component, !a)
+    throw new Error(`layout ${l} is not supported.`);
+  return /* @__PURE__ */ w(
+    d,
     {
-      ...i,
-      className: O("blocklet__footer", i.className),
+      ...e,
+      className: v("blocklet__footer", e.className),
       sx: [
         {
           position: "relative"
         },
-        ...Array.isArray(i.sx) ? i.sx : [i.sx]
+        ...Array.isArray(e.sx) ? e.sx : [e.sx]
       ],
       children: [
-        /* @__PURE__ */ t(u, { elements: c, data: a }),
-        /* @__PURE__ */ t(
-          y,
+        /* @__PURE__ */ r(a, { elements: m, data: t }),
+        /* @__PURE__ */ r(
+          d,
           {
             sx: {
               position: "absolute",
@@ -72,14 +68,14 @@ function _({ ...a }) {
               color: "transparent",
               "::selection": { background: "#000", color: "#fff" }
             },
-            children: (f = window == null ? void 0 : window.blocklet) == null ? void 0 : f.version
+            children: window?.blocklet?.version
           }
         )
       ]
     }
   );
 }
-_.propTypes = {
+C.propTypes = {
   brand: n.shape({
     name: n.node,
     description: n.string,
@@ -112,5 +108,5 @@ _.propTypes = {
   layout: n.oneOf(["auto", "standard", "plain"])
 };
 export {
-  _ as default
+  C as default
 };

package/lib/Footer/layout/standard.js

@@ -1,12 +1,11 @@
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
 import o from "prop-types";
-import x from "clsx";
+import m from "clsx";
 import { Container as t, Box as r } from "@mui/material";
-import { styled as f } from "@arcblock/ux/lib/Theme";
-import h from "./row.js";
-function g({ elements: e, data: s, className: p = "", ...c }) {
-  var l;
-  const d = !!((l = s.navigation) != null && l.length);
+import { styled as x } from "@arcblock/ux/lib/Theme";
+import f from "./row.js";
+function h({ elements: e, data: l, className: s = "", ...p }) {
+  const d = !!l.navigation?.length;
   let a = null;
   return d ? a = /* @__PURE__ */ n(t, { sx: { display: "flex", flexDirection: { xs: "column", md: "row" }, justifyContent: "space-between" }, children: [
     /* @__PURE__ */ n(
@@ -35,7 +34,7 @@ function g({ elements: e, data: s, className: p = "", ...c }) {
         ]
       }
     ),
-    /* @__PURE__ */ i(r, { sx: ({ palette: m }) => ({ mb: 3, borderTop: { xs: `1px solid ${m.grey[200]}`, md: 0 } }), children: e.navigation })
+    /* @__PURE__ */ i(r, { sx: ({ palette: c }) => ({ mb: 3, borderTop: { xs: `1px solid ${c.grey[200]}`, md: 0 } }), children: e.navigation })
   ] }) : a = /* @__PURE__ */ n(
     t,
     {
@@ -60,16 +59,16 @@ function g({ elements: e, data: s, className: p = "", ...c }) {
         )
       ]
     }
-  ), /* @__PURE__ */ i(b, { ...c, className: x({ "footer--with-navs": d }, p), children: /* @__PURE__ */ n(t, { style: { padding: 0 }, children: [
+  ), /* @__PURE__ */ i(g, { ...p, className: m({ "footer--with-navs": d }, s), children: /* @__PURE__ */ n(t, { style: { padding: 0 }, children: [
     a,
     /* @__PURE__ */ i(r, { sx: { pt: 3, borderTop: 1, borderColor: "divider" } }),
-    /* @__PURE__ */ i(t, { children: /* @__PURE__ */ n(h, { autoCenter: !0, children: [
+    /* @__PURE__ */ i(t, { children: /* @__PURE__ */ n(f, { autoCenter: !0, children: [
       e.copyright,
       e.links
     ] }) })
   ] }) });
 }
-g.propTypes = {
+h.propTypes = {
   elements: o.shape({
     brand: o.element,
     navigation: o.element,
@@ -80,7 +79,7 @@ g.propTypes = {
   data: o.object.isRequired,
   className: o.string
 };
-const b = f("div")`
+const g = x("div")`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {
@@ -99,5 +98,5 @@ const b = f("div")`
   }
 `;
 export {
-  g as default
+  h as default
 };

package/lib/Footer/links.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as m, Fragment as v } from "react/jsx-runtime";
+import { jsx as r, jsxs as m, Fragment as v } from "react/jsx-runtime";
 import { useState as N } from "react";
 import l from "prop-types";
 import { useCreation as $ } from "ahooks";
@@ -10,37 +10,34 @@ 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, ...k }) {
-  const [g, b] = N(-1), y = A({ key: "md" }), h = e.some((r) => {
-    var o;
-    return (o = r.items) == null ? void 0 : o.length;
-  }), x = !y && h && j(u) && u > 1, p = ({ label: r, link: o, icon: t, render: a, props: i }) => {
-    let s = r;
+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: r, link: o, props: i });
+      s = a({ label: t, link: o, props: n });
     else if (o && I(o)) {
       const f = o.startsWith("http") || o.startsWith("//");
-      s = /* @__PURE__ */ n(
+      s = /* @__PURE__ */ r(
         "a",
         {
           href: o,
-          "aria-label": `Footer link for ${r}`,
+          "aria-label": `Footer link for ${t}`,
           target: f ? "_blank" : "_self",
           rel: f ? "noreferrer noopener" : void 0,
-          ...i,
-          children: r
+          ...n,
+          children: t
         }
       );
     }
     return /* @__PURE__ */ m(v, { children: [
-      t && /* @__PURE__ */ n(C, { icon: t, size: 20, sx: { mr: 0.5 } }),
+      i && /* @__PURE__ */ r(C, { icon: i, size: 20, sx: { mr: 0.5 } }),
       s
     ] });
-  }, w = $(() => e != null && e.length ? d ? e.map((r, o) => /* @__PURE__ */ n("span", { className: "footer-links-item", children: p(r) }, o)) : x ? E(e, { columns: u }).map((r, o) => /* @__PURE__ */ n("div", { className: "footer-links-column", children: r.filter((t) => t.group).map((t, a) => {
-    const { items: i } = t;
+  }, 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__ */ n("span", { className: "footer-links-item", children: p(t) }),
-      !!(i != null && i.length) && /* @__PURE__ */ n("div", { className: "footer-links-sub", children: i.map((s, f) => /* @__PURE__ */ n(
+      /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(i) }),
+      !!n?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: n.map((s, f) => /* @__PURE__ */ r(
         "span",
         {
           className: c("footer-links-item", { "footer-links-item--new": s.isNew }),
@@ -49,8 +46,8 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
         f
       )) })
     ] }, a);
-  }) }, o)) : e.map((r, o) => {
-    const { items: t } = r, a = o === g;
+  }) }, o)) : e.map((t, o) => {
+    const { items: i } = t, a = o === g;
     return /* @__PURE__ */ m(
       "div",
       {
@@ -60,8 +57,8 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
         onClick: () => b(g === o ? -1 : o),
         children: [
           /* @__PURE__ */ m("span", { className: "footer-links-item", children: [
-            p(r),
-            !!(t != null && t.length) && /* @__PURE__ */ n("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ n(
+            p(t),
+            !!i?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
               M,
               {
                 style: {
@@ -70,22 +67,22 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
               }
             ) })
           ] }),
-          !!(t != null && t.length) && /* @__PURE__ */ n("div", { className: "footer-links-sub", children: t.map((i, s) => /* @__PURE__ */ n("span", { className: c("footer-links-item", { "footer-links-item--new": i.isNew }), children: p(i) }, s)) })
+          !!i?.length && /* @__PURE__ */ r("div", { className: "footer-links-sub", children: i.map((n, s) => /* @__PURE__ */ r("span", { className: c("footer-links-item", { "footer-links-item--new": n.isNew }), children: p(n) }, s)) })
         ]
       },
       o
     );
-  }) : null, [e, d, x, g]);
-  return e != null && e.length ? /* @__PURE__ */ n(
+  }) : null, [e, d, k, g]);
+  return e?.length ? /* @__PURE__ */ r(
     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__ */ n("div", { className: "footer-links-inner", children: w })
+      children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: w })
     }
   ) : null;
 }

package/lib/Footer/social-media.js

@@ -1,44 +1,44 @@
-import { jsx as n } from "react/jsx-runtime";
-import o from "prop-types";
-import { styled as i } from "@arcblock/ux/lib/Theme";
+import { jsx as o } from "react/jsx-runtime";
+import t from "prop-types";
+import { styled as a } from "@arcblock/ux/lib/Theme";
 import l from "../Icon/index.js";
-function p({ items: r = null, ...t }) {
-  return r != null && r.length ? /* @__PURE__ */ n(c, { ...t, children: r.map((e, a) => /* @__PURE__ */ n(
+function p({ items: e = null, ...n }) {
+  return e?.length ? /* @__PURE__ */ o(c, { ...n, children: e.map((r, i) => /* @__PURE__ */ o(
     "a",
     {
-      href: e.link,
+      href: r.link,
       target: "_blank",
-      "aria-label": `Social media icon${e.title ? ` for ${e.title}` : ""}`,
+      "aria-label": `Social media icon${r.title ? ` for ${r.title}` : ""}`,
       rel: "noreferrer",
-      children: /* @__PURE__ */ n(l, { icon: e.icon || e.title, size: 24, component: "span" })
+      children: /* @__PURE__ */ o(l, { icon: r.icon || r.title, size: 24, component: "span" })
     },
-    a
+    i
   )) }) : null;
 }
 p.propTypes = {
-  items: o.arrayOf(
-    o.shape({
+  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 c = i("div")`
+const c = a("div")`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 20px;
   a {
-    color: ${(r) => r.theme.palette.text.secondary};
+    color: ${(e) => e.theme.palette.text.secondary};
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {
-      color: ${({ theme: r }) => r.palette.text.primary};
+      color: ${({ theme: e }) => e.palette.text.primary};
     }
   }
-  ${(r) => r.theme.breakpoints.down("md")} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     gap: 12px;
   }
 `;