@blocklet/list 0.16.25 → 0.16.27

package/lib/index.es.js

@@ -1,10 +1,10 @@
 import { jsx as t, jsxs as h, Fragment as M } from "react/jsx-runtime";
-import { styled as X, useTheme as ye } from "@arcblock/ux/lib/Theme";
+import { styled as X, useTheme as xe } from "@arcblock/ux/lib/Theme";
 import Je from "@mui/material/styles/createTheme";
 import et from "@mui/material/styles/ThemeProvider";
 import { pick as tt, omitBy as le, orderBy as rt, isEmpty as ot, merge as nt } from "lodash-es";
-import { ErrorFallback as xe } from "@arcblock/ux/lib/ErrorBoundary";
-import x from "@mui/material/Box";
+import { ErrorFallback as ye } from "@arcblock/ux/lib/ErrorBoundary";
+import y from "@mui/material/Box";
 import F from "@mui/material/Stack";
 import { ErrorBoundary as it } from "react-error-boundary";
 import lt from "@iconify-icons/tabler/compass";
@@ -23,8 +23,8 @@ import $ from "@mui/material/useMediaQuery";
 import gt from "@mui/material/Drawer";
 import ze from "@mui/material/Checkbox";
 import De from "@mui/material/FormControlLabel";
-import yt from "@mui/icons-material/Check";
-import xt from "@mui/icons-material/KeyboardArrowDown";
+import xt from "@mui/icons-material/Check";
+import yt from "@mui/icons-material/KeyboardArrowDown";
 import wt from "@mui/material/ClickAwayListener";
 import bt from "@mui/material/Grow";
 import Ne from "@mui/material/MenuItem";
@@ -119,7 +119,7 @@ function jt(e, r) {
   return {
     filters: e,
     cleanFilter: (i) => {
-      const u = i ? le(o, (d, y) => i.includes(y)) : {};
+      const u = i ? le(o, (d, x) => i.includes(x)) : {};
       n(le(u, (d) => d === "" || d === void 0));
     },
     handleActiveMenu: (i) => {
@@ -165,13 +165,13 @@ const Ht = (e, r, o) => e && r || !o, Ue = (e) => [
   //   value: 'rating',
   // },
 ], Ve = (e, r, o) => {
-  var d, y;
+  var d, x;
   const n = ut(e), l = ht(n.search);
   if ((d = pt(e, { strict: !0 })) == null ? void 0 : d.endsWith(".gif"))
     return l.imageFilter ? mt({ ...n, search: "" }) : e;
   if (l.imageFilter)
     return e;
-  const a = o || ((y = window.blocklet) == null ? void 0 : y.version), { w: i, h: u } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  const a = o || ((x = window.blocklet) == null ? void 0 : x.version), { w: i, h: u } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
   return be(e, {
     ...i || u ? { imageFilter: "resize", w: i, h: u } : {},
     v: a
@@ -360,7 +360,7 @@ function Zt(e) {
     layout: i = {},
     wrapChildren: u = (I) => I,
     extraFilter: d = (I) => I,
-    baseSearch: y = !1,
+    baseSearch: x = !1,
     fetchCategoryDelay: m = 0,
     showResourcesSwitch: f = !1,
     showCategory: k = !0,
@@ -406,7 +406,7 @@ function Zt(e) {
     categoryOptions: Y,
     priceOptions: c,
     storeApi: T,
-    baseSearch: y,
+    baseSearch: x,
     showResourcesSwitch: f,
     showCategory: k,
     tagFilters: g,
@@ -470,11 +470,11 @@ function ve({
   xl: l,
   exact: s
 }) {
-  const a = ft(), i = $(a.breakpoints.down("sm")), u = $(a.breakpoints.between("sm", "md")), d = $(a.breakpoints.between("md", "lg")), y = $(a.breakpoints.between("lg", "xl"));
+  const a = ft(), i = $(a.breakpoints.down("sm")), u = $(a.breakpoints.between("sm", "md")), d = $(a.breakpoints.between("md", "lg")), x = $(a.breakpoints.between("lg", "xl"));
   if (s)
-    return i ? e || null : u ? r || null : d ? o || null : y ? n || null : l || null;
+    return i ? e || null : u ? r || null : d ? o || null : x ? n || null : l || null;
   let m = e;
-  return i || (m = Z(r, m), u) || (m = Z(o, m), d) || (m = Z(n, m), y) ? m : Z(l, m);
+  return i || (m = Z(r, m), u) || (m = Z(o, m), d) || (m = Z(n, m), x) ? m : Z(l, m);
 }
 function Jt({ children: e }) {
   const { open: r, toggleOpen: o } = ke();
@@ -482,7 +482,7 @@ function Jt({ children: e }) {
     ve,
     {
       xs: /* @__PURE__ */ t(gt, { open: r, onClose: () => o(!1), children: e }),
-      md: /* @__PURE__ */ t(x, { children: e })
+      md: /* @__PURE__ */ t(y, { children: e })
     }
   );
 }
@@ -499,9 +499,9 @@ const er = at(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
 ));
 function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
   var S;
-  const s = fe(null), a = ye(), [i, u] = E(!1), [d, y] = E(e !== null ? e : ""), m = $(a.breakpoints.down("sm"));
+  const s = fe(null), a = xe(), [i, u] = E(!1), [d, x] = E(e !== null ? e : ""), m = $(a.breakpoints.down("sm"));
   H(() => {
-    y(e !== null ? e : "");
+    x(e !== null ? e : "");
   }, [e]);
   const f = me(() => {
     u(!1);
@@ -509,7 +509,7 @@ function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
     u(!0);
   }, []);
   function g(p) {
-    y(p.value), o(p.value), m && f();
+    x(p.value), o(p.value), m && f();
   }
   function B(p) {
     return p === d;
@@ -527,7 +527,7 @@ function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
         ...l,
         children: [
           ((S = r.find((p) => p.value === d)) == null ? void 0 : S.name) || n,
-          /* @__PURE__ */ t(Ct, { className: "my-select__arrowdown", component: xt, sx: { width: 18, height: 18 } })
+          /* @__PURE__ */ t(Ct, { className: "my-select__arrowdown", component: yt, sx: { width: 18, height: 18 } })
         ]
       }
     ),
@@ -538,7 +538,7 @@ function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
         style: { transformOrigin: v === "bottom" ? "center top" : "center bottom" },
         children: /* @__PURE__ */ t(kt, { children: /* @__PURE__ */ t(wt, { onClickAway: f, children: /* @__PURE__ */ t(rr, { autoFocusItem: i, onMouseEnter: k, onMouseLeave: f, children: r.map((w) => /* @__PURE__ */ h(Ne, { onClick: () => g(w), sx: { fontSize: 14 }, children: [
           /* @__PURE__ */ t(
-            yt,
+            xt,
             {
               sx: { mr: 1, fontSize: 16, visibility: B(w.value) ? "visible" : "hidden" }
             }
@@ -634,7 +634,7 @@ function Ye() {
   );
 }
 function or({ menus: e }) {
-  const { selectedCategory: r, search: o, t: n, categoryOptions: l, loadings: s, layout: a, baseSearch: i } = R(), { filters: u, handleActiveMenu: d, handleCategory: y, cleanFilter: m } = o, { toggleOpen: f } = ke();
+  const { selectedCategory: r, search: o, t: n, categoryOptions: l, loadings: s, layout: a, baseSearch: i } = R(), { filters: u, handleActiveMenu: d, handleCategory: x, cleanFilter: m } = o, { toggleOpen: f } = ke();
   H(() => {
     f(!1);
   }, [Object.values(u).join("")]);
@@ -672,8 +672,8 @@ function or({ menus: e }) {
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
         children: k ? /* @__PURE__ */ h(M, { children: [
-          a.showExplore && /* @__PURE__ */ h(x, { mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
-            /* @__PURE__ */ h(x, { display: "flex", alignItems: "center", gap: 1, children: [
+          a.showExplore && /* @__PURE__ */ h(y, { mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
+            /* @__PURE__ */ h(y, { display: "flex", alignItems: "center", gap: 1, children: [
               /* @__PURE__ */ t(K, { icon: lt, width: 20, height: 20 }),
               /* @__PURE__ */ t(
                 b,
@@ -689,7 +689,7 @@ function or({ menus: e }) {
                 }
               )
             ] }),
-            e == null ? void 0 : e.map((g) => /* @__PURE__ */ h(x, { display: "flex", alignItems: "center", mt: 2, gap: 1, children: [
+            e == null ? void 0 : e.map((g) => /* @__PURE__ */ h(y, { display: "flex", alignItems: "center", mt: 2, gap: 1, children: [
               typeof g.icon == "string" ? /* @__PURE__ */ t(K, { icon: g.icon, width: 20, height: 20 }) : g.icon,
               /* @__PURE__ */ t(
                 b,
@@ -717,7 +717,7 @@ function or({ menus: e }) {
               color: r === g.value ? "text.primary" : "text.lighter",
               textTransform: "capitalize",
               onClick: () => {
-                r === g.value ? m() : y(g.value), f(!1);
+                r === g.value ? m() : x(g.value), f(!1);
               },
               children: g.name
             },
@@ -745,7 +745,7 @@ function Ce() {
   };
 }
 const Ze = st(function(r) {
-  return /* @__PURE__ */ t(x, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ne, {}) });
+  return /* @__PURE__ */ t(y, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ne, {}) });
 });
 function Pe({
   icon: e,
@@ -770,7 +770,7 @@ function Pe({
 const nr = 16 / 9, ce = 292, ge = 189, te = 336;
 function ir() {
   var B, S;
-  const { t: e, search: r } = R(), { get: o } = Ce(), n = ye(), l = $(n.breakpoints.down("md")), s = ((S = (B = window.blocklet) == null ? void 0 : B.preferences) == null ? void 0 : S.homeBanner) || [], {
+  const { t: e, search: r } = R(), { get: o } = Ce(), n = xe(), l = $(n.breakpoints.down("md")), s = ((S = (B = window.blocklet) == null ? void 0 : B.preferences) == null ? void 0 : S.homeBanner) || [], {
     data: a = [],
     error: i,
     loading: u
@@ -792,7 +792,7 @@ function ir() {
   return !i && s.length > 0 ? /* @__PURE__ */ h(M, { children: [
     /* @__PURE__ */ t(b, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
     /* @__PURE__ */ t(
-      x,
+      y,
       {
         height: { xs: "auto", md: ce },
         minHeight: ce,
@@ -801,13 +801,13 @@ function ir() {
         borderColor: "divider",
         borderRadius: 3,
         overflow: "hidden",
-        children: u ? /* @__PURE__ */ h(x, { p: 5, display: { md: "flex" }, gap: 5, alignItems: "center", justifyContent: "center", children: [
+        children: u ? /* @__PURE__ */ h(y, { p: 5, display: { md: "flex" }, gap: 5, alignItems: "center", justifyContent: "center", children: [
           /* @__PURE__ */ t(O, { variant: "rounded", height: ge, width: te }),
-          /* @__PURE__ */ h(x, { flex: 1, height: "100%", children: [
+          /* @__PURE__ */ h(y, { flex: 1, height: "100%", children: [
             /* @__PURE__ */ t(O, { variant: "text", height: 50, width: 100 }),
             /* @__PURE__ */ t(O, { variant: "text", height: 40, width: "100%" }),
             /* @__PURE__ */ t(O, { variant: "text", height: 40, width: 300 }),
-            /* @__PURE__ */ h(x, { display: "flex", gap: 1, my: 2, children: [
+            /* @__PURE__ */ h(y, { display: "flex", gap: 1, my: 2, children: [
               /* @__PURE__ */ t(O, { variant: "circular", height: 20, width: 20 }),
               /* @__PURE__ */ t(O, { variant: "text", height: 20, width: 50 })
             ] }),
@@ -825,8 +825,8 @@ function ir() {
             showBullets: !1,
             showThumbnails: !1,
             showFullscreenButton: !1,
-            renderLeftNav: (p) => /* @__PURE__ */ t(x, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(It, { sx: { ...d, left: 5 } }) }),
-            renderRightNav: (p) => /* @__PURE__ */ t(x, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Bt, { sx: { ...d, right: 5 } }) }),
+            renderLeftNav: (p) => /* @__PURE__ */ t(y, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(It, { sx: { ...d, left: 5 } }) }),
+            renderRightNav: (p) => /* @__PURE__ */ t(y, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Bt, { sx: { ...d, right: 5 } }) }),
             items: s.map((p, v) => ({
               original: p.did,
               renderItem: () => {
@@ -860,9 +860,9 @@ function ir() {
                     onClick: () => r.handleSearchSelect(w),
                     gap: { xs: 2, md: 5 },
                     children: [
-                      y(T),
+                      x(T),
                       /* @__PURE__ */ h(F, { flex: 1, height: "100%", gap: 3, children: [
-                        /* @__PURE__ */ h(x, { flex: 1, children: [
+                        /* @__PURE__ */ h(y, { flex: 1, children: [
                           m(p.name || w.title || p.name),
                           f(p.desc || w.description)
                         ] }),
@@ -879,8 +879,8 @@ function ir() {
       }
     )
   ] }) : null;
-  function y(p) {
-    return /* @__PURE__ */ t(x, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: te }, children: /* @__PURE__ */ t(sr, { url: p }) });
+  function x(p) {
+    return /* @__PURE__ */ t(y, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: te }, children: /* @__PURE__ */ t(sr, { url: p }) });
   }
   function m(p) {
     return /* @__PURE__ */ t(b, { variant: "h2", width: "100%", children: p });
@@ -911,7 +911,7 @@ function ir() {
   }
   function k(p, v = 0) {
     const { did: w, owner: A, stats: T } = p;
-    return /* @__PURE__ */ h(x, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+    return /* @__PURE__ */ h(y, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
       /* @__PURE__ */ t(Pe, { icon: /* @__PURE__ */ t($e, { src: A.avatar, did: w, size: 20, variant: "circle" }), children: A.fullName }),
       /* @__PURE__ */ t(Pe, { icon: /* @__PURE__ */ t(K, { icon: St }), title: `${T.downloads + v}`, children: lr(T.downloads + v) })
     ] });
@@ -951,7 +951,7 @@ function sr({ url: e }) {
       }
     ),
     /* @__PURE__ */ t(
-      x,
+      y,
       {
         display: r ? "none" : "block",
         component: "img",
@@ -971,9 +971,9 @@ function sr({ url: e }) {
 }
 function cr({ title: e, blocklets: r }) {
   const { blockletRender: o, serverVersion: n } = R();
-  return /* @__PURE__ */ h(x, { mt: 3, children: [
+  return /* @__PURE__ */ h(y, { mt: 3, children: [
     /* @__PURE__ */ t(b, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
-    /* @__PURE__ */ t(Be, { container: !0, spacing: 2, children: r.map((l) => /* @__PURE__ */ t(Be, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": l.did, children: /* @__PURE__ */ t(x, { padding: "1px", children: o({ blocklet: l, blocklets: r, serverVersion: n }) }) }, l.did)) })
+    /* @__PURE__ */ t(Be, { container: !0, spacing: 2, boxSizing: "border-box", maxWidth: "calc(100vw - 16px)", children: r.map((l) => /* @__PURE__ */ t(Be, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": l.did, children: /* @__PURE__ */ t(y, { padding: "1px", children: o({ blocklet: l, blocklets: r, serverVersion: n }) }) }, l.did)) })
   ] });
 }
 function dr() {
@@ -985,7 +985,7 @@ function dr() {
     const s = await e(P.explorePath);
     return Array.isArray(s) ? s : [];
   });
-  return n ? /* @__PURE__ */ t(xe, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : l ? /* @__PURE__ */ t(Ze, { mt: 15 }) : /* @__PURE__ */ h(M, { children: [
+  return n ? /* @__PURE__ */ t(ye, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : l ? /* @__PURE__ */ t(Ze, { mt: 15 }) : /* @__PURE__ */ h(M, { children: [
     /* @__PURE__ */ t(ir, {}),
     o.map(
       (s) => {
@@ -1005,7 +1005,7 @@ function ur({
   handleSearchSelect: s,
   ...a
 }) {
-  const i = fe(null), u = fe(!1), [d, y] = E(!1), [m, f] = E(""), [k, g] = E(!1), B = Ce(), [S, p] = E(!1), v = (a == null ? void 0 : a.placeholder) || r("common.searchStore"), w = async (c) => {
+  const i = fe(null), u = fe(!1), [d, x] = E(!1), [m, f] = E(""), [k, g] = E(!1), B = Ce(), [S, p] = E(!1), v = (a == null ? void 0 : a.placeholder) || r("common.searchStore"), w = async (c) => {
     p(!0);
     const C = await B.get(Se(e, be(P.blockletsPath, c)));
     return p(!1), C.dataList || [];
@@ -1035,7 +1035,7 @@ function ur({
   let D = [];
   return m && (S ? D = [U] : A != null && A.length ? D = [U, ...A] : D = [{ name: Ae, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(M, { children: [
     /* @__PURE__ */ h(Ft, { fullScreen: !0, open: k, sx: { display: { md: "none" } }, children: [
-      /* @__PURE__ */ h(x, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ h(y, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
         /* @__PURE__ */ t(
           je,
           {
@@ -1089,9 +1089,9 @@ function ur({
         ref: i,
         open: !!m && d,
         size: "small",
-        onOpen: () => y(!0),
+        onOpen: () => x(!0),
         onClose: (c, C) => {
-          y(!1), C === "selectOption" && !u.current && l(m);
+          x(!1), C === "selectOption" && !u.current && l(m);
         },
         onKeyDown: (c) => {
           c.key === "Enter" && !m && Q();
@@ -1184,7 +1184,7 @@ function ur({
   function q(c) {
     if ([de, Ae].includes(c.name))
       return /* @__PURE__ */ t(
-        x,
+        y,
         {
           width: ue,
           p: "6px",
@@ -1201,15 +1201,15 @@ function ur({
     return c.logo && (C = Se(e, "assets", c.did, Ve(c.logo, ue, c.version))), /* @__PURE__ */ t($e, { src: C, size: ue, style: { borderRadius: "8px", overflow: "hidden" } });
   }
   function G(c = !0) {
-    return /* @__PURE__ */ t(x, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: c && m && S ? /* @__PURE__ */ t(ne, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(ee, { sx: { fontSize: 16, cursor: "default" } }) });
+    return /* @__PURE__ */ t(y, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: c && m && S ? /* @__PURE__ */ t(ne, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(ee, { sx: { fontSize: 16, cursor: "default" } }) });
   }
   function Y() {
-    return m ? /* @__PURE__ */ t(x, { sx: { display: "flex", alignItems: "center", color: "text.lighter" }, children: /* @__PURE__ */ t(we, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => Q() }) }) : null;
+    return m ? /* @__PURE__ */ t(y, { sx: { display: "flex", alignItems: "center", color: "text.lighter" }, children: /* @__PURE__ */ t(we, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => Q() }) }) : null;
   }
 }
 function hr({ placeholder: e = "Type to search...", ...r }) {
-  const { search: o } = R(), { filters: n, handleKeyword: l } = o, [s, a] = E(n.keyword || ""), i = Me(l, { wait: 300 }), u = (y) => {
-    const { value: m } = y.target;
+  const { search: o } = R(), { filters: n, handleKeyword: l } = o, [s, a] = E(n.keyword || ""), i = Me(l, { wait: 300 }), u = (x) => {
+    const { value: m } = x.target;
     a(m), i.run(m);
   }, d = () => {
     a(""), l("");
@@ -1262,7 +1262,7 @@ const pr = X(je)`
   cursor: pointer;
 `;
 function gr() {
-  const { search: e, t: r, endpoint: o, locale: n, getCategoryLocale: l, developerName: s, showResourcesSwitch: a, layout: i, baseSearch: u } = R(), { filters: d, handleSort: y, handlePrice: m, handleDeveloper: f, handleSwitchShowResources: k, cleanFilter: g } = e, B = Ue(r);
+  const { search: e, t: r, endpoint: o, locale: n, getCategoryLocale: l, developerName: s, showResourcesSwitch: a, layout: i, baseSearch: u } = R(), { filters: d, handleSort: x, handlePrice: m, handleDeveloper: f, handleSwitchShowResources: k, cleanFilter: g } = e, B = Ue(r);
   return /* @__PURE__ */ h(
     F,
     {
@@ -1287,7 +1287,7 @@ function gr() {
             justifyContent: { xs: "space-between", md: "flex-end" },
             gap: 2,
             children: [
-              i.showSearch ? /* @__PURE__ */ t(x, { flex: 1, children: u ? /* @__PURE__ */ t(hr, {}) : /* @__PURE__ */ t(
+              i.showSearch ? /* @__PURE__ */ t(y, { flex: 1, children: u ? /* @__PURE__ */ t(hr, {}) : /* @__PURE__ */ t(
                 ur,
                 {
                   locale: n,
@@ -1342,7 +1342,7 @@ function gr() {
                   value: d.sortBy || B[0].value,
                   options: B,
                   placeholder: r("sort.sort"),
-                  onChange: (S) => y(S)
+                  onChange: (S) => x(S)
                 }
               )
             ]
@@ -1378,7 +1378,7 @@ function Ee({
   );
 }
 function J({ children: e }) {
-  return /* @__PURE__ */ h(x, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.lighter", children: [
+  return /* @__PURE__ */ h(y, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.lighter", children: [
     /* @__PURE__ */ t(_t, {}),
     e
   ] });
@@ -1389,7 +1389,7 @@ function Fe() {
 }
 function he({ filterTip: e, keywordTip: r }) {
   const { t: o, locale: n } = R(), l = () => n === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(x, { mt: 1, display: "flex", children: [
+  return /* @__PURE__ */ h(y, { mt: 1, display: "flex", children: [
     /* @__PURE__ */ t(b, { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t(b, { children: o("blocklet.filterTip") }),
     e && r && l(),
@@ -1410,7 +1410,7 @@ function pe({
     ] })
   ] });
 }
-function yr() {
+function xr() {
   const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = R(), { filters: l } = r, s = !!n || !!l.price;
   if (l.keyword && s)
     return /* @__PURE__ */ h(J, { children: [
@@ -1452,7 +1452,7 @@ function yr() {
   }
   return /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(Fe, {}) });
 }
-const xr = (e, r, o, n) => ct(
+const yr = (e, r, o, n) => ct(
   async (l) => {
     l || (o.currentPage = o.defaultCurrentPage);
     const { currentPage: s, pageSize: a } = o, i = {
@@ -1478,7 +1478,7 @@ function wr() {
     currentPage: P.currentPage,
     pageSize: Gt() ? P.mobilePageSize : P.pageSize,
     defaultCurrentPage: P.defaultCurrentPage
-  }), [i, u] = E(null), d = xr(e, s, a, u), y = j(
+  }), [i, u] = E(null), d = yr(e, s, a, u), x = j(
     () => {
       var f, k;
       return o ? o(((f = d.data) == null ? void 0 : f.list) || []) : ((k = d.data) == null ? void 0 : k.list) || [];
@@ -1486,10 +1486,10 @@ function wr() {
     [d.data, o]
   );
   return H(() => {
-    const f = y.find((k) => k.owner.did === s.owner);
+    const f = x.find((k) => k.owner.did === s.owner);
     l((f == null ? void 0 : f.owner.fullName) || (f == null ? void 0 : f.author.name) || "");
-  }, [s.owner, y, l]), {
-    blocklets: y,
+  }, [s.owner, x, l]), {
+    blocklets: x,
     fetchBlockletsError: i,
     loadMore: d.loadMore,
     hasNextPage: !d.noMore,
@@ -1505,14 +1505,14 @@ function wr() {
   };
 }
 function br() {
-  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: l, minItemWidth: s, layout: a, baseSearch: i } = R(), { filters: u } = r, { blocklets: d, errors: y, loadMore: m, loadings: f, hasNextPage: k, total: g } = wr(), [B] = Tt({
+  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: l, minItemWidth: s, layout: a, baseSearch: i } = R(), { filters: u } = r, { blocklets: d, errors: x, loadMore: m, loadings: f, hasNextPage: k, total: g } = wr(), [B] = Tt({
     loading: f.fetchBlockletsLoading || f.loadingMore,
     hasNextPage: k,
     onLoadMore: m
   });
-  if (y.fetchBlockletsError) {
-    const w = new Error(`Failed to fetch blocklets from ${o}: ${y.fetchBlockletsError.message}`);
-    return /* @__PURE__ */ t(xe, { error: w });
+  if (x.fetchBlockletsError) {
+    const w = new Error(`Failed to fetch blocklets from ${o}: ${x.fetchBlockletsError.message}`);
+    return /* @__PURE__ */ t(ye, { error: w });
   }
   const S = i && a.showSearch || !u.keyword;
   return /* @__PURE__ */ h(M, { children: [
@@ -1521,20 +1521,35 @@ function br() {
       v()
     ] }),
     p(),
-    !f.fetchBlockletsLoading && k && /* @__PURE__ */ t(x, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: B, children: /* @__PURE__ */ t(ne, {}) })
+    !f.fetchBlockletsLoading && k && /* @__PURE__ */ t(y, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: B, children: /* @__PURE__ */ t(ne, {}) })
   ] });
   function p() {
     return f.fetchBlockletsLoading ? /* @__PURE__ */ t(Ze, { mt: 15 }) : d.length ? /* @__PURE__ */ t(
-      x,
+      y,
       {
         className: "blocklet-list",
         display: "grid",
-        gridTemplateColumns: `repeat(auto-fill, minmax(${s}px, 1fr))`,
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: `repeat(auto-fill, minmax(${s}px, 1fr))`
+        },
         p: "2px",
         gap: 2,
-        children: d.map((w) => /* @__PURE__ */ t(x, { "data-blocklet-did": w.did, sx: { minWidth: s }, children: n({ blocklet: w, blocklets: d, serverVersion: l }) }, w.did))
+        children: d.map((w) => /* @__PURE__ */ t(
+          y,
+          {
+            "data-blocklet-did": w.did,
+            minWidth: {
+              xs: "100%",
+              sm: s
+            },
+            maxWidth: "calc(100vw - 32px)",
+            children: n({ blocklet: w, blocklets: d, serverVersion: l })
+          },
+          w.did
+        ))
       }
-    ) : /* @__PURE__ */ t(yr, {});
+    ) : /* @__PURE__ */ t(xr, {});
   }
   function v() {
     return /* @__PURE__ */ h(
@@ -1575,9 +1590,9 @@ function kr() {
 function vr({ menus: e, children: r }) {
   var i;
   const { search: o, layout: n } = R(), { filters: l } = o, s = l.category || l.keyword || l.price, a = (i = e == null ? void 0 : e.find((u) => u.key === l.menu)) == null ? void 0 : i.key;
-  return /* @__PURE__ */ t(Wt, { children: /* @__PURE__ */ h(it, { FallbackComponent: xe, children: [
+  return /* @__PURE__ */ t(Wt, { children: /* @__PURE__ */ h(it, { FallbackComponent: ye, children: [
     /* @__PURE__ */ t(kr, {}),
-    /* @__PURE__ */ h(x, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
+    /* @__PURE__ */ h(y, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
       /* @__PURE__ */ t(or, { menus: e }),
       /* @__PURE__ */ h(F, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: [
         a && (r == null ? void 0 : r(a)),
@@ -1609,7 +1624,7 @@ function Eo({ showSkeleton: e, ...r }) {
   return e ? /* @__PURE__ */ t(O, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(Nt, { ...r });
 }
 function Fo(e) {
-  const { menus: r, children: o, ...n } = e, l = ye(), s = Je(
+  const { menus: r, children: o, ...n } = e, l = xe(), s = Je(
     nt({
       ...l,
       typography: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.16.25",
+  "version": "0.16.27",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@blocklet/js-sdk": "^1.16.38",
-    "@blocklet/util": "0.16.25",
+    "@blocklet/util": "0.16.27",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify-icons/tabler": "^1.2.95",
@@ -91,5 +91,5 @@
     "prettier": "^3.3.2",
     "vite": "^5.4.10"
   },
-  "gitHead": "d200492622229db7f4b5e3e47b43b3f594a378d7"
+  "gitHead": "dbdfa97029537e28c210acbc9fb4b71434122562"
 }