@blocklet/list 0.16.18 → 0.16.19

package/lib/index.es.js

@@ -2,67 +2,67 @@ 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 Je from "@mui/material/styles/createTheme";
 import et from "@mui/material/styles/ThemeProvider";
-import { omitBy as le, orderBy as tt, isEmpty as rt, merge as ot } from "lodash-es";
+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 F from "@mui/material/Stack";
-import { ErrorBoundary as nt } from "react-error-boundary";
-import it from "@iconify-icons/tabler/compass";
+import { ErrorBoundary as it } from "react-error-boundary";
+import lt from "@iconify-icons/tabler/compass";
 import { Icon as K } from "@iconify/react";
 import we from "@mui/icons-material/Close";
 import b from "@mui/material/Typography";
-import { createContext as Le, useState as E, useMemo as j, useContext as Oe, useCallback as me, useEffect as H, forwardRef as lt, useRef as fe, memo as at } from "react";
+import { createContext as Le, useState as E, useMemo as j, useContext as Oe, useCallback as me, useEffect as H, forwardRef as at, useRef as fe, memo as st } from "react";
 import { createAxios as _e } from "@blocklet/js-sdk";
-import { useRequest as re, useDebounceFn as Me, useInfiniteScroll as st, useReactive as ct } from "ahooks";
+import { useRequest as re, useDebounceFn as Me, useInfiniteScroll as ct, useReactive as dt } from "ahooks";
 import "color";
-import { parseURL as dt, parseQuery as ut, parseFilename as ht, stringifyParsedURL as pt, withQuery as be, joinURL as Se } from "ufo";
+import { parseURL as ut, parseQuery as ht, parseFilename as pt, stringifyParsedURL as mt, withQuery as be, joinURL as Se } from "ufo";
 import Ie from "flat";
 import oe from "@mui/material/Button";
-import mt from "@mui/material/styles/useTheme";
+import ft from "@mui/material/styles/useTheme";
 import $ from "@mui/material/useMediaQuery";
-import ft from "@mui/material/Drawer";
+import gt from "@mui/material/Drawer";
 import ze from "@mui/material/Checkbox";
-import Ne from "@mui/material/FormControlLabel";
-import gt from "@mui/icons-material/Check";
-import yt from "@mui/icons-material/KeyboardArrowDown";
-import xt from "@mui/material/ClickAwayListener";
-import wt from "@mui/material/Grow";
-import De from "@mui/material/MenuItem";
+import De from "@mui/material/FormControlLabel";
+import yt from "@mui/icons-material/Check";
+import xt from "@mui/icons-material/KeyboardArrowDown";
+import wt from "@mui/material/ClickAwayListener";
+import bt from "@mui/material/Grow";
+import Ne from "@mui/material/MenuItem";
 import We from "@mui/material/MenuList";
-import bt from "@mui/material/Paper";
-import kt from "@mui/material/Popper";
-import vt from "@mui/material/SvgIcon";
+import kt from "@mui/material/Paper";
+import vt from "@mui/material/Popper";
+import Ct from "@mui/material/SvgIcon";
 import ne from "@mui/material/CircularProgress";
 import $e from "@arcblock/ux/lib/Avatar";
-import Ct from "@iconify-icons/tabler/cloud-download";
-import St from "@mui/icons-material/ChevronLeft";
-import It from "@mui/icons-material/ChevronRight";
+import St from "@iconify-icons/tabler/cloud-download";
+import It from "@mui/icons-material/ChevronLeft";
+import Bt from "@mui/icons-material/ChevronRight";
 import O from "@mui/material/Skeleton";
-import Bt from "react-image-gallery";
+import Rt from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
 import Be from "@mui/material/Grid";
-import Rt from "react-infinite-scroll-hook";
-import Tt from "@iconify-icons/tabler/square";
-import Pt from "@iconify-icons/tabler/square-check-filled";
+import Tt from "react-infinite-scroll-hook";
+import Pt from "@iconify-icons/tabler/square";
+import At from "@iconify-icons/tabler/square-check-filled";
 import Re from "@mui/material/Chip";
 import ee from "@mui/icons-material/Search";
-import At from "@mui/material/Autocomplete";
-import Et from "@mui/material/Dialog";
+import Et from "@mui/material/Autocomplete";
+import Ft from "@mui/material/Dialog";
 import je from "@mui/material/OutlinedInput";
-import Ft from "@mui/material/TextField";
-import { useHotkeys as Lt } from "react-hotkeys-hook";
+import Lt from "@mui/material/TextField";
+import { useHotkeys as Ot } from "react-hotkeys-hook";
 import Te from "@mui/material/InputAdornment";
-import Ot from "@arcblock/ux/lib/Empty";
-import _t from "json-stable-stringify";
-import Mt from "@mui/icons-material/Menu";
-import { Card as zt, Box as ae, Skeleton as L } from "@mui/material";
+import _t from "@arcblock/ux/lib/Empty";
+import Mt from "json-stable-stringify";
+import zt from "@mui/icons-material/Menu";
+import { Card as Dt, Box as ae, Skeleton as L } from "@mui/material";
 import Nt from "@arcblock/ux/lib/Img";
 const He = Le({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function Dt({ children: e }) {
+function Wt({ children: e }) {
   const [r, o] = E(!1), n = (s) => {
     o(s ?? !s);
   }, l = j(() => ({ open: r, toggleOpen: n }), [r]);
@@ -85,15 +85,20 @@ const P = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Wt = (e) => re(
+}, $t = (e) => re(
   async () => {
     const { data: r } = await e.get(P.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
 );
-function $t(e, r) {
-  const o = {
+function jt(e, r) {
+  const o = e.menu ? {
+    sortBy: "popularity",
+    sortDirection: "desc",
+    showResources: "true",
+    ...tt(e, ["sortBy", "sortDirection", "showResources"])
+  } : {
     sortBy: "popularity",
     sortDirection: "desc",
     showResources: "true",
@@ -146,7 +151,7 @@ function $t(e, r) {
     }
   };
 }
-const jt = (e, r, o) => e && r || !o, Ue = (e) => [
+const Ht = (e, r, o) => e && r || !o, Ue = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -161,9 +166,9 @@ const jt = (e, r, o) => e && r || !o, Ue = (e) => [
   // },
 ], Ve = (e, r, o) => {
   var d, y;
-  const n = dt(e), l = ut(n.search);
-  if ((d = ht(e, { strict: !0 })) == null ? void 0 : d.endsWith(".gif"))
-    return l.imageFilter ? pt({ ...n, search: "" }) : e;
+  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 };
@@ -171,13 +176,13 @@ const jt = (e, r, o) => e && r || !o, Ue = (e) => [
     ...i || u ? { imageFilter: "resize", w: i, h: u } : {},
     v: a
   });
-}, Ht = (e) => [
+}, Ut = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Ut = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Vt = (e, r) => (
+], Vt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), qt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
-), qt = () => window.innerWidth <= 600, Gt = {
+), Gt = () => window.innerWidth <= 600, Kt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -228,7 +233,7 @@ const jt = (e, r, o) => e && r || !o, Ue = (e) => [
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Kt = {
+}, Xt = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -280,14 +285,14 @@ const jt = (e, r, o) => e && r || !o, Ue = (e) => [
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
 }, se = {
-  en: Ie(Gt),
-  zh: Ie(Kt)
+  en: Ie(Kt),
+  zh: Ie(Xt)
 }, qe = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
-}, Xt = (e) => (r, o) => {
+}, Qt = (e) => (r, o) => {
   const n = se[e] ? se[e][r] : se.en[r];
-  return Vt(n, o) || r;
+  return qt(n, o) || r;
 }, Ge = {
   errors: {
     fetchCategoriesError: null
@@ -342,8 +347,8 @@ const jt = (e, r, o) => e && r || !o, Ue = (e) => [
     handlePage: () => {
     }
   }
-}, Ke = Le(Ge), { Provider: Qt, Consumer: To } = Ke;
-function Yt(e) {
+}, Ke = Le(Ge), { Provider: Yt, Consumer: Po } = Ke;
+function Zt(e) {
   const {
     locale: r = "zh",
     filters: o = {},
@@ -366,15 +371,15 @@ function Yt(e) {
     },
     endpoint: v,
     blockletRender: w
-  } = e, A = qe(n, S), T = j(() => _e({ baseURL: v, headers: A }), [v]), z = $t(o, { onFilterChange: l, emptyCategory: !i.showExplore, onSearchSelect: p }), [U, N] = E(""), {
-    data: D = [],
+  } = e, A = qe(n, S), T = j(() => _e({ baseURL: v, headers: A }), [v]), z = jt(o, { onFilterChange: l, emptyCategory: !i.showExplore, onSearchSelect: p }), [U, D] = E(""), {
+    data: N = [],
     error: Q,
     loading: ie,
     run: V
-  } = Wt(T), q = j(() => {
-    const I = tt(D, [(W) => W.name], ["asc"]), _ = I.findIndex((W) => W.name === "All" || W.locales.en === "All");
+  } = $t(T), q = j(() => {
+    const I = rt(N, [(W) => W.name], ["asc"]), _ = I.findIndex((W) => W.name === "All" || W.locales.en === "All");
     return _ > -1 ? [{ ...I[_], _id: "All" }, ...I.slice(0, _), ...I.slice(_ + 1)] : I;
-  }, [D]), G = me(Xt(r), [r]), Y = j(() => Ut(q, r), [q, r]), c = Ht(G), C = {
+  }, [N]), G = me(Qt(r), [r]), Y = j(() => Vt(q, r), [q, r]), c = Ut(G), C = {
     search: z,
     errors: { fetchCategoriesError: Q },
     loadings: {
@@ -408,17 +413,17 @@ function Yt(e) {
     onFilterChange: l,
     getCategoryLocale: (I) => {
       if (!I) return null;
-      const _ = D.find((W) => W._id === I || W.locales.en === "All");
+      const _ = N.find((W) => W._id === I || W.locales.en === "All");
       return _ ? _.locales[r] || _.locales.en : null;
     },
     get developerName() {
       return U;
     },
-    updateDeveloperName: N
+    updateDeveloperName: D
   };
   return H(() => {
     setTimeout(V, m || 0);
-  }, [v, V, m]), /* @__PURE__ */ t(Qt, { value: C, children: B });
+  }, [v, V, m]), /* @__PURE__ */ t(Yt, { value: C, children: B });
 }
 function R() {
   const e = Oe(Ke);
@@ -465,23 +470,23 @@ function ve({
   xl: l,
   exact: s
 }) {
-  const a = mt(), 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")), y = $(a.breakpoints.between("lg", "xl"));
   if (s)
     return i ? e || null : u ? r || null : d ? o || null : y ? 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);
 }
-function Zt({ children: e }) {
+function Jt({ children: e }) {
   const { open: r, toggleOpen: o } = ke();
   return /* @__PURE__ */ t(
     ve,
     {
-      xs: /* @__PURE__ */ t(ft, { open: r, onClose: () => o(!1), children: e }),
+      xs: /* @__PURE__ */ t(gt, { open: r, onClose: () => o(!1), children: e }),
       md: /* @__PURE__ */ t(x, { children: e })
     }
   );
 }
-const Jt = lt(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
+const er = at(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
   oe,
   {
     ref: n,
@@ -511,29 +516,29 @@ function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
   }
   return /* @__PURE__ */ h(M, { children: [
     /* @__PURE__ */ h(
-      er,
+      tr,
       {
         ref: s,
         onClick: k,
         variant: "outlined",
         size: "medium",
-        className: ["my-select__selector", rt(d) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", ot(d) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto", color: "text.primary", borderRadius: "8px" },
         ...l,
         children: [
           ((S = r.find((p) => p.value === d)) == null ? void 0 : S.name) || n,
-          /* @__PURE__ */ t(vt, { className: "my-select__arrowdown", component: yt, sx: { width: 18, height: 18 } })
+          /* @__PURE__ */ t(Ct, { className: "my-select__arrowdown", component: xt, sx: { width: 18, height: 18 } })
         ]
       }
     ),
-    /* @__PURE__ */ t(kt, { open: i, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: p, placement: v }) => /* @__PURE__ */ t(
-      wt,
+    /* @__PURE__ */ t(vt, { open: i, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: p, placement: v }) => /* @__PURE__ */ t(
+      bt,
       {
         ...p,
         style: { transformOrigin: v === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(bt, { children: /* @__PURE__ */ t(xt, { onClickAway: f, children: /* @__PURE__ */ t(tr, { autoFocusItem: i, onMouseEnter: k, onMouseLeave: f, children: r.map((w) => /* @__PURE__ */ h(De, { onClick: () => g(w), sx: { fontSize: 14 }, children: [
+        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(
-            gt,
+            yt,
             {
               sx: { mr: 1, fontSize: 16, visibility: B(w.value) ? "visible" : "hidden" }
             }
@@ -544,7 +549,7 @@ function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
     ) })
   ] });
 }
-const er = X(Jt)`
+const tr = X(er)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -572,7 +577,7 @@ const er = X(Jt)`
       margin-right: 3px;
     }
   }
-`, tr = X(We)`
+`, rr = X(We)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -601,7 +606,7 @@ function Ye() {
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ t(
-          Ne,
+          De,
           {
             control: /* @__PURE__ */ t(
               ze,
@@ -628,13 +633,13 @@ function Ye() {
     }
   );
 }
-function rr({ menus: e }) {
+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();
   H(() => {
     f(!1);
   }, [Object.values(u).join("")]);
-  const k = jt(i, a.showSearch, u.keyword);
-  return a.showCategory ? /* @__PURE__ */ h(Zt, { children: [
+  const k = Ht(i, a.showSearch, u.keyword);
+  return a.showCategory ? /* @__PURE__ */ h(Jt, { children: [
     /* @__PURE__ */ t(
       ve,
       {
@@ -669,7 +674,7 @@ function rr({ menus: e }) {
         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: [
-              /* @__PURE__ */ t(K, { icon: it, width: 20, height: 20 }),
+              /* @__PURE__ */ t(K, { icon: lt, width: 20, height: 20 }),
               /* @__PURE__ */ t(
                 b,
                 {
@@ -739,7 +744,7 @@ function Ce() {
     }
   };
 }
-const Ze = at(function(r) {
+const Ze = st(function(r) {
   return /* @__PURE__ */ t(x, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ne, {}) });
 });
 function Pe({
@@ -762,8 +767,8 @@ function Pe({
     )
   ] });
 }
-const or = 16 / 9, ce = 292, ge = 189, te = 336;
-function nr() {
+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) || [], {
     data: a = [],
@@ -809,7 +814,7 @@ function nr() {
             /* @__PURE__ */ t(O, { variant: "rounded", height: 30, width: 100 })
           ] })
         ] }) : /* @__PURE__ */ t(
-          Bt,
+          Rt,
           {
             showNav: !0,
             autoPlay: !0,
@@ -820,13 +825,13 @@ function nr() {
             showBullets: !1,
             showThumbnails: !1,
             showFullscreenButton: !1,
-            renderLeftNav: (p) => /* @__PURE__ */ t(x, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(St, { sx: { ...d, left: 5 } }) }),
-            renderRightNav: (p) => /* @__PURE__ */ t(x, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(It, { sx: { ...d, right: 5 } }) }),
+            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 } }) }),
             items: s.map((p, v) => ({
               original: p.did,
               renderItem: () => {
                 var z;
-                const w = a[v] || {}, A = p.cover || lr(p.did, (z = w.screenshots) == null ? void 0 : z[0]), T = Ve(A, n.breakpoints.values.md * 2);
+                const w = a[v] || {}, A = p.cover || ar(p.did, (z = w.screenshots) == null ? void 0 : z[0]), T = Ve(A, n.breakpoints.values.md * 2);
                 return /* @__PURE__ */ h(
                   F,
                   {
@@ -875,7 +880,7 @@ function nr() {
     )
   ] }) : null;
   function y(p) {
-    return /* @__PURE__ */ t(x, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: te }, children: /* @__PURE__ */ t(ar, { url: p }) });
+    return /* @__PURE__ */ t(x, { 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 });
@@ -908,7 +913,7 @@ function nr() {
     const { did: w, owner: A, stats: T } = p;
     return /* @__PURE__ */ h(x, { 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: Ct }), title: `${T.downloads + v}`, children: ir(T.downloads + v) })
+      /* @__PURE__ */ t(Pe, { icon: /* @__PURE__ */ t(K, { icon: St }), title: `${T.downloads + v}`, children: lr(T.downloads + v) })
     ] });
   }
   function g(p) {
@@ -931,8 +936,8 @@ function nr() {
     );
   }
 }
-const ir = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, lr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function ar({ url: e }) {
+const lr = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, ar = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function sr({ url: e }) {
   const [r, o] = E(!0);
   return /* @__PURE__ */ h(M, { children: [
     r && /* @__PURE__ */ t(
@@ -957,21 +962,21 @@ function ar({ url: e }) {
         borderRadius: 2,
         border: 1,
         borderColor: "divider",
-        sx: { objectFit: "container", cursor: "pointer", aspectRatio: or },
+        sx: { objectFit: "container", cursor: "pointer", aspectRatio: nr },
         onLoad: () => o(!1),
         onError: () => o(!1)
       }
     )
   ] });
 }
-function sr({ title: e, blocklets: r }) {
+function cr({ title: e, blocklets: r }) {
   const { blockletRender: o, serverVersion: n } = R();
   return /* @__PURE__ */ h(x, { 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)) })
   ] });
 }
-function cr() {
+function dr() {
   const { get: e } = Ce(), { t: r } = R(), {
     data: o = [],
     error: n,
@@ -981,17 +986,17 @@ function cr() {
     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: [
-    /* @__PURE__ */ t(nr, {}),
+    /* @__PURE__ */ t(ir, {}),
     o.map(
       (s) => {
         var a;
-        return ((a = s.blocklets) == null ? void 0 : a.length) > 0 ? /* @__PURE__ */ t(sr, { title: r(`explore.${s.type}`), blocklets: s.blocklets }, s.type) : null;
+        return ((a = s.blocklets) == null ? void 0 : a.length) > 0 ? /* @__PURE__ */ t(cr, { title: r(`explore.${s.type}`), blocklets: s.blocklets }, s.type) : null;
       }
     )
   ] });
 }
 const de = "__FREE_TEXT__", Ae = "__NO_RESULT__", ue = 40;
-function dr({
+function ur({
   endpoint: e,
   t: r,
   locale: o,
@@ -1018,7 +1023,7 @@ function dr({
   );
   H(() => {
     p(!0), T(n.keyword), f(n.keyword || "");
-  }, [n.keyword, T]), Lt(
+  }, [n.keyword, T]), Ot(
     "ctrl + k, command + k",
     (c) => {
       var C, I;
@@ -1027,9 +1032,9 @@ function dr({
     { enableOnTags: ["INPUT"] }
   );
   const z = Me((c) => T(c), { wait: 300 }), U = { name: de, title: m, did: "" };
-  let N = [];
-  return m && (S ? N = [U] : A != null && A.length ? N = [U, ...A] : N = [{ name: Ae, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(M, { children: [
-    /* @__PURE__ */ h(Et, { fullScreen: !0, open: k, sx: { display: { md: "none" } }, children: [
+  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__ */ t(
           je,
@@ -1053,7 +1058,7 @@ function dr({
             placeholder: v,
             className: "bl-autocomplete-input",
             value: m,
-            onChange: (c) => D(c.target.value),
+            onChange: (c) => N(c.target.value),
             startAdornment: G(k),
             endAdornment: Y()
           }
@@ -1069,7 +1074,7 @@ function dr({
           }
         )
       ] }),
-      /* @__PURE__ */ t(We, { sx: { p: 0.5 }, children: N.map((c) => V(c)) })
+      /* @__PURE__ */ t(We, { sx: { p: 0.5 }, children: D.map((c) => V(c)) })
     ] }),
     /* @__PURE__ */ t(
       ee,
@@ -1079,7 +1084,7 @@ function dr({
       }
     ),
     /* @__PURE__ */ t(
-      At,
+      Et,
       {
         ref: i,
         open: !!m && d,
@@ -1093,7 +1098,7 @@ function dr({
         },
         disableClearable: !0,
         inputValue: m,
-        onInputChange: (c, C) => D(C),
+        onInputChange: (c, C) => N(C),
         isOptionEqualToValue: (c, C) => c.name === C.name,
         getOptionLabel: (c) => c.title,
         getOptionKey: (c) => c.name,
@@ -1111,7 +1116,7 @@ function dr({
           }
         },
         renderInput: (c) => /* @__PURE__ */ t(
-          Ft,
+          Lt,
           {
             ...c,
             InputProps: {
@@ -1127,7 +1132,7 @@ function dr({
         ),
         filterOptions: (c) => c,
         ...a,
-        options: N,
+        options: D,
         renderOption: (c, C) => V(C),
         value: U,
         sx: [
@@ -1149,11 +1154,11 @@ function dr({
       }
     )
   ] });
-  function D(c) {
+  function N(c) {
     p(!0), f(c), u.current = !1, z.run(c);
   }
   function Q() {
-    g(!1), f(""), D(""), l("");
+    g(!1), f(""), N(""), l("");
   }
   function ie(c) {
     c != null && c.did ? (g(!1), u.current = !0, f(""), s(c)) : c.name === de && (g(!1), l(m));
@@ -1161,7 +1166,7 @@ function dr({
   function V(c) {
     var C, I;
     return /* @__PURE__ */ h(
-      De,
+      Ne,
       {
         sx: { display: "flex", alignItems: "center", gap: 1, p: 1.5, borderRadius: "8px" },
         onClick: () => ie(c),
@@ -1202,7 +1207,7 @@ function dr({
     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;
   }
 }
-function ur({ placeholder: e = "Type to search...", ...r }) {
+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;
     a(m), i.run(m);
@@ -1212,23 +1217,23 @@ function ur({ placeholder: e = "Type to search...", ...r }) {
   return H(() => {
     a(n.keyword || "");
   }, [n.keyword]), /* @__PURE__ */ t(
-    hr,
+    pr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(Te, { position: "start", children: /* @__PURE__ */ t(pr, {}) }),
+      startAdornment: /* @__PURE__ */ t(Te, { position: "start", children: /* @__PURE__ */ t(mr, {}) }),
       onChange: u,
       placeholder: e,
       value: s,
       title: e,
       "data-cy": "search",
-      endAdornment: s && /* @__PURE__ */ t(Te, { position: "end", children: /* @__PURE__ */ t(mr, { "data-cy": "search-delete", onClick: d }) }),
+      endAdornment: s && /* @__PURE__ */ t(Te, { position: "end", children: /* @__PURE__ */ t(fr, { "data-cy": "search-delete", onClick: d }) }),
       ...r
     }
   );
 }
-const hr = X(je)`
+const pr = X(je)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1245,18 +1250,18 @@ const hr = X(je)`
       color: transparent;
     }
   }
-`, pr = X(ee)`
+`, mr = X(ee)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, mr = X(we)`
+`, fr = X(we)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function fr() {
+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);
   return /* @__PURE__ */ h(
     F,
@@ -1282,8 +1287,8 @@ function fr() {
             justifyContent: { xs: "space-between", md: "flex-end" },
             gap: 2,
             children: [
-              i.showSearch ? /* @__PURE__ */ t(x, { flex: 1, children: u ? /* @__PURE__ */ t(ur, {}) : /* @__PURE__ */ t(
-                dr,
+              i.showSearch ? /* @__PURE__ */ t(x, { flex: 1, children: u ? /* @__PURE__ */ t(hr, {}) : /* @__PURE__ */ t(
+                ur,
                 {
                   locale: n,
                   endpoint: o,
@@ -1353,7 +1358,7 @@ function Ee({
   label: o
 }) {
   return /* @__PURE__ */ t(
-    Ne,
+    De,
     {
       sx: { m: 0, p: 0 },
       className: "check-button",
@@ -1361,8 +1366,8 @@ function Ee({
         ze,
         {
           checked: e,
-          icon: /* @__PURE__ */ t(K, { style: { padding: 0 }, icon: Tt }),
-          checkedIcon: /* @__PURE__ */ t(K, { style: { padding: 0, color: "#3478E2" }, icon: Pt }),
+          icon: /* @__PURE__ */ t(K, { style: { padding: 0 }, icon: Pt }),
+          checkedIcon: /* @__PURE__ */ t(K, { style: { padding: 0, color: "#3478E2" }, icon: At }),
           size: "large",
           sx: { p: 0, mr: 1 },
           onChange: (n) => r(n.target.checked)
@@ -1374,7 +1379,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: [
-    /* @__PURE__ */ t(Ot, {}),
+    /* @__PURE__ */ t(_t, {}),
     e
   ] });
 }
@@ -1405,7 +1410,7 @@ function pe({
     ] })
   ] });
 }
-function gr() {
+function yr() {
   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: [
@@ -1447,7 +1452,7 @@ function gr() {
   }
   return /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(Fe, {}) });
 }
-const yr = (e, r, o, n) => st(
+const xr = (e, r, o, n) => ct(
   async (l) => {
     l || (o.currentPage = o.defaultCurrentPage);
     const { currentPage: s, pageSize: a } = o, i = {
@@ -1463,17 +1468,17 @@ const yr = (e, r, o, n) => st(
   },
   {
     isNoMore: (l) => l ? l.page * l.pageSize >= l.total : !1,
-    reloadDeps: [e, _t(r)],
+    reloadDeps: [e, Mt(r)],
     onError: n
   }
 );
-function xr() {
+function wr() {
   var m;
-  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: l } = R(), { filters: s } = r, a = ct({
+  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: l } = R(), { filters: s } = r, a = dt({
     currentPage: P.currentPage,
-    pageSize: qt() ? P.mobilePageSize : P.pageSize,
+    pageSize: Gt() ? P.mobilePageSize : P.pageSize,
     defaultCurrentPage: P.defaultCurrentPage
-  }), [i, u] = E(null), d = yr(e, s, a, u), y = j(
+  }), [i, u] = E(null), d = xr(e, s, a, u), y = j(
     () => {
       var f, k;
       return o ? o(((f = d.data) == null ? void 0 : f.list) || []) : ((k = d.data) == null ? void 0 : k.list) || [];
@@ -1499,8 +1504,8 @@ function xr() {
     }
   };
 }
-function wr() {
-  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 } = xr(), [B] = Rt({
+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({
     loading: f.fetchBlockletsLoading || f.loadingMore,
     hasNextPage: k,
     onLoadMore: m
@@ -1511,7 +1516,7 @@ function wr() {
   }
   const S = i && a.showSearch || !u.keyword;
   return /* @__PURE__ */ h(M, { children: [
-    S ? /* @__PURE__ */ t(fr, {}) : /* @__PURE__ */ h(M, { children: [
+    S ? /* @__PURE__ */ t(gr, {}) : /* @__PURE__ */ h(M, { children: [
       /* @__PURE__ */ t(ve, { xs: /* @__PURE__ */ t(Ye, {}), md: null }),
       v()
     ] }),
@@ -1529,7 +1534,7 @@ function wr() {
         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))
       }
-    ) : /* @__PURE__ */ t(gr, {});
+    ) : /* @__PURE__ */ t(yr, {});
   }
   function v() {
     return /* @__PURE__ */ h(
@@ -1549,7 +1554,7 @@ function wr() {
     );
   }
 }
-function br() {
+function kr() {
   const { t: e, selectedCategory: r, getCategoryLocale: o } = R(), { toggleOpen: n } = ke();
   return /* @__PURE__ */ h(
     b,
@@ -1561,28 +1566,28 @@ function br() {
       py: 2,
       fontWeight: "fontWeightMedium",
       children: [
-        /* @__PURE__ */ t(Xe, { onClick: () => n(!0), children: /* @__PURE__ */ t(Mt, {}) }),
+        /* @__PURE__ */ t(Xe, { onClick: () => n(!0), children: /* @__PURE__ */ t(zt, {}) }),
         o(r) || e("common.category")
       ]
     }
   );
 }
-function kr({ menus: e, children: r }) {
+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(Dt, { children: /* @__PURE__ */ h(nt, { FallbackComponent: xe, children: [
-    /* @__PURE__ */ t(br, {}),
+  return /* @__PURE__ */ t(Wt, { children: /* @__PURE__ */ h(it, { FallbackComponent: xe, children: [
+    /* @__PURE__ */ t(kr, {}),
     /* @__PURE__ */ h(x, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
-      /* @__PURE__ */ t(rr, { menus: e }),
+      /* @__PURE__ */ t(or, { menus: e }),
       /* @__PURE__ */ h(F, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: [
         a && (r == null ? void 0 : r(a)),
-        !a && (n.showExplore && !s ? /* @__PURE__ */ t(cr, {}) : /* @__PURE__ */ t(wr, {}))
+        !a && (n.showExplore && !s ? /* @__PURE__ */ t(dr, {}) : /* @__PURE__ */ t(br, {}))
       ] })
     ] })
   ] }) });
 }
-function Po(e) {
-  return /* @__PURE__ */ h(zt, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
+function Ao(e) {
+  return /* @__PURE__ */ h(Dt, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
     /* @__PURE__ */ h(ae, { display: "flex", alignItems: "center", gap: 2, pb: 1, children: [
       /* @__PURE__ */ h(ae, { display: "flex", alignItems: "center", gap: 2, flex: 1, children: [
         /* @__PURE__ */ t(L, { variant: "rounded", width: 48, height: 48 }),
@@ -1600,12 +1605,12 @@ function Po(e) {
     ] })
   ] });
 }
-function Ao({ showSkeleton: e, ...r }) {
+function Eo({ showSkeleton: e, ...r }) {
   return e ? /* @__PURE__ */ t(O, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(Nt, { ...r });
 }
-function Eo(e) {
+function Fo(e) {
   const { menus: r, children: o, ...n } = e, l = ye(), s = Je(
-    ot({
+    nt({
       ...l,
       typography: {
         h1: {
@@ -1633,12 +1638,12 @@ function Eo(e) {
       }
     })
   );
-  return /* @__PURE__ */ t(et, { theme: s, children: /* @__PURE__ */ t(Yt, { ...n, children: /* @__PURE__ */ t(kr, { menus: r, children: o }) }) });
+  return /* @__PURE__ */ t(et, { theme: s, children: /* @__PURE__ */ t(Zt, { ...n, children: /* @__PURE__ */ t(vr, { menus: r, children: o }) }) });
 }
 export {
-  dr as Autocomplete,
-  Po as CardSkeleton,
-  Ao as Image,
-  Eo as default,
-  $t as useSearch
+  ur as Autocomplete,
+  Ao as CardSkeleton,
+  Eo as Image,
+  Fo as default,
+  jt as useSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.16.18",
+  "version": "0.16.19",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -52,8 +52,8 @@
     "react-dom": ">=18.2.0"
   },
   "dependencies": {
-    "@blocklet/js-sdk": "^1.16.37",
-    "@blocklet/util": "0.16.18",
+    "@blocklet/js-sdk": "^1.16.38",
+    "@blocklet/util": "0.16.19",
     "@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": "2fb689f169384d9b6a52b0c7c30c7300f584f350"
+  "gitHead": "4e266f3509e1bacfabf1e103ef4038f4281e8d7b"
 }