@blocklet/list 0.13.26 → 0.13.28

package/lib/index.es.js

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as f, Fragment as le } from "react/jsx-runtime";
-import { styled as T, useTheme as ae } from "@arcblock/ux/lib/Theme";
+import { jsx as t, jsxs as h, Fragment as le } from "react/jsx-runtime";
+import { styled as P, useTheme as ae } from "@arcblock/ux/lib/Theme";
 import { Global as xe, css as ke } from "@emotion/react";
 import _e from "@mui/icons-material/Sort";
-import { Button as Ne, CircularProgress as oe, MenuList as Le, useMediaQuery as Se, SvgIcon as Me, Popper as Oe, Grow as Fe, Paper as Ae, ClickAwayListener as Ee, MenuItem as qe, Chip as Ce, Box as D, Unstable_Grid2 as te, OutlinedInput as je, InputAdornment as ge, Typography as ve, Hidden as ye, Stack as Ue } from "@mui/material";
-import We from "@mui/icons-material/Face";
-import { ErrorBoundary as Ge } from "react-error-boundary";
+import { Button as Ne, CircularProgress as oe, MenuList as Le, useMediaQuery as Se, SvgIcon as Me, Popper as Oe, Grow as Fe, Paper as Ae, ClickAwayListener as Ee, MenuItem as qe, Chip as Ce, Box as _, Unstable_Grid2 as te, OutlinedInput as je, InputAdornment as ge, Typography as ve, Hidden as ye, Stack as Ue } from "@mui/material";
+import Ve from "@mui/icons-material/Face";
+import { ErrorBoundary as We } from "react-error-boundary";
 import { ErrorFallback as Te } from "@arcblock/ux/lib/ErrorBoundary";
-import { createContext as Ke, useMemo as Q, useState as E, useCallback as ne, useEffect as j, useContext as He, forwardRef as Ve, useRef as J, createElement as Qe, Fragment as Je } from "react";
+import { createContext as Ge, useMemo as Q, useState as E, useCallback as ne, useEffect as j, useContext as Ke, forwardRef as He, useRef as J, createElement as Qe, Fragment as Je } from "react";
 import { useReactive as Pe, useInfiniteScroll as Xe, useRequest as Ye, useSize as Ze, useDebounceFn as et, useMemoizedFn as tt, useCreation as rt, useMount as ot } from "ahooks";
 import { joinURL as nt, parseQuery as lt } from "ufo";
 import o from "prop-types";
@@ -157,6 +157,7 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   }),
   wrapChildren: o.func,
   extraFilter: o.func,
+  serverVersion: o.string,
   endpoint: o.string.isRequired,
   blockletRender: o.func.isRequired,
   onFilterChange: o.func,
@@ -171,6 +172,7 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
 }, $e = {
   locale: "zh",
   filters: {},
+  serverVersion: "",
   onFilterChange: () => {
   },
   onSearchSelect: ({ detailUrl: e }) => {
@@ -183,7 +185,7 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   showResourcesSwitch: !1,
   showCategory: !0,
   tagFilters: []
-}, _ = {
+}, N = {
   nameAsc: "title",
   nameDesc: "title",
   popularity: "stats.downloads",
@@ -195,7 +197,7 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   blockletsPath: "/api/v2/blocklets.json",
   categoriesPath: "/api/blocklets/categories",
   cacheSize: 100
-}, Ie = Ke({}), { Provider: Nt, Consumer: $r } = Ie;
+}, Ie = Ge({}), { Provider: Nt, Consumer: $r } = Ie;
 function ie({
   filters: e,
   children: n,
@@ -203,161 +205,162 @@ function ie({
   locale: a,
   blockletRender: s,
   onFilterChange: c,
-  onSearchSelect: x,
-  extraFilter: y,
-  wrapChildren: u,
-  baseSearch: b,
-  serverVersion: d,
-  storeVersion: C,
-  fetchCategoryDelay: v,
-  showResourcesSwitch: S,
-  showCategory: P,
-  tagFilters: R
+  onSearchSelect: w,
+  extraFilter: g,
+  wrapChildren: m,
+  baseSearch: x,
+  serverVersion: u,
+  storeVersion: S,
+  fetchCategoryDelay: R,
+  showResourcesSwitch: T,
+  showCategory: B,
+  tagFilters: C
 }) {
-  const i = {};
-  d && (i["x-blocklet-server-version"] = d), C && (i["x-blocklet-store-version"] = C);
-  const h = Q(() => it.create({
+  const y = {};
+  u && (y["x-blocklet-server-version"] = u), S && (y["x-blocklet-store-version"] = S);
+  const d = Q(() => it.create({
     baseURL: r,
-    headers: i
-  }), [r]), m = Q(() => ({
+    headers: y
+  }), [r]), i = Q(() => ({
     sortBy: "popularity",
     sortDirection: "desc",
     ...e
-  }), [e]), k = m.category, $ = Pe({
-    currentPage: _.currentPage,
-    pageSize: Bt() ? _.mobilePageSize : _.pageSize,
-    defaultCurrentPage: _.defaultCurrentPage
-  }), [w, L] = E(null), I = Xe(
+  }), [e]), b = i.category, k = Pe({
+    currentPage: N.currentPage,
+    pageSize: Bt() ? N.mobilePageSize : N.pageSize,
+    defaultCurrentPage: N.defaultCurrentPage
+  }), [z, $] = E(null), v = Xe(
     async (l) => {
-      l || ($.currentPage = $.defaultCurrentPage);
-      const { currentPage: p, pageSize: B } = $, A = {
-        ...m,
-        sortBy: _[m.sortBy],
+      l || (k.currentPage = k.defaultCurrentPage);
+      const { currentPage: p, pageSize: I } = k, A = {
+        ...i,
+        sortBy: N[i.sortBy],
         page: p,
-        pageSize: B
+        pageSize: I
       };
-      L(null);
-      const { data: z = {} } = await h.get(_.blockletsPath, {
+      $(null);
+      const { data: D = {} } = await d.get(N.blockletsPath, {
         params: A
       });
-      return $.currentPage++, {
+      return k.currentPage++, {
         page: p,
-        pageSize: B,
-        list: (z == null ? void 0 : z.dataList) || [],
-        total: (z == null ? void 0 : z.total) || 0
+        pageSize: I,
+        list: (D == null ? void 0 : D.dataList) || [],
+        total: (D == null ? void 0 : D.total) || 0
       };
     },
     {
       isNoMore: (l) => l ? l.page * l.pageSize >= l.total : !1,
       reloadDeps: [r, st(e)],
       onError: (l) => {
-        L(l);
+        $(l);
       }
     }
   ), {
-    data: W = [],
+    data: V = [],
     error: ee,
     loading: O,
-    run: G
+    run: W
   } = Ye(
     async () => {
-      const { data: l } = await h.get(_.categoriesPath);
+      const { data: l } = await d.get(N.categoriesPath);
       return Array.isArray(l) ? l : [];
     },
     { manual: !0 }
-  ), F = Q(() => at(W || [], [(p) => p.name], ["asc"]), [W]), K = ne(
+  ), F = Q(() => at(V || [], [(p) => p.name], ["asc"]), [V]), G = ne(
     (l, p) => {
-      const B = re[a] ? re[a][l] : re.en[l];
-      return Rt(B, p);
+      const I = re[a] ? re[a][l] : re.en[l];
+      return Rt(I, p);
     },
     [a]
-  ), H = Q(() => {
+  ), K = Q(() => {
     var p;
-    let l = ((p = I.data) == null ? void 0 : p.list) || [];
-    return l = y(l), l;
-  }, [I.data, y]), g = Q(() => Pt(F, a), [F, a]), V = Tt(K), M = {
-    errors: { fetchBlockletsError: w, fetchCategoriesError: ee },
+    let l = ((p = v.data) == null ? void 0 : p.list) || [];
+    return l = g(l), l;
+  }, [v.data, g]), f = Q(() => Pt(F, a), [F, a]), H = Tt(G), M = {
+    errors: { fetchBlockletsError: z, fetchCategoriesError: ee },
     loadings: {
-      fetchBlockletsLoading: I.loading,
+      fetchBlockletsLoading: v.loading,
       fetchCategoriesLoading: O,
-      loadingMore: I.loadingMore
+      loadingMore: v.loadingMore
     },
     endpoint: r,
-    blockletList: H,
-    wrapChildren: u,
-    t: K,
-    filters: m,
-    selectedCategory: k,
+    blockletList: K,
+    wrapChildren: m,
+    t: G,
+    serverVersion: u,
+    filters: i,
+    selectedCategory: b,
     categoryList: F,
     blockletRender: s,
     locale: a,
-    categoryOptions: g,
-    priceOptions: V,
-    storeApi: h,
-    baseSearch: b,
-    showResourcesSwitch: S,
-    showCategory: P,
-    tagFilters: R,
-    hasNextPage: !I.noMore,
+    categoryOptions: f,
+    priceOptions: H,
+    storeApi: d,
+    baseSearch: x,
+    showResourcesSwitch: T,
+    showCategory: B,
+    tagFilters: C,
+    hasNextPage: !v.noMore,
     onFilterChange: c,
     handleSort: (l) => {
       const p = {
-        ...m,
+        ...i,
         sortBy: l,
         sortDirection: l === "nameAsc" ? "asc" : "desc"
       };
       c(p);
     },
     handleKeyword: (l) => {
-      const p = { ...m, keyword: l || void 0 };
+      const p = { ...i, keyword: l || void 0 };
       c(p);
     },
     handlePrice: (l) => {
       const p = {
-        ...m,
-        price: l === m.price ? void 0 : l
+        ...i,
+        price: l === i.price ? void 0 : l
       };
       c(p);
     },
     handleCategory: (l) => {
       let p = l;
-      (l === "all" || l === m.category) && (p = void 0);
-      const B = { ...m, category: p };
-      c(B);
+      (l === "all" || l === i.category) && (p = void 0);
+      const I = { ...i, category: p };
+      c(I);
     },
     handleDeveloper: (l) => {
-      const p = { ...m, owner: l || void 0 };
+      const p = { ...i, owner: l || void 0 };
       c(p);
     },
     handlePage: (l) => {
-      const p = { ...m, currentPage: l };
+      const p = { ...i, currentPage: l };
       c(p);
     },
     handleSwitchShowResources: () => {
-      const l = { ...m };
+      const l = { ...i };
       c(l);
     },
-    loadMore: I.loadMore,
+    loadMore: v.loadMore,
     getCategoryLocale: (l) => {
       if (!l)
         return null;
       let p = null;
-      const B = W.find((A) => A._id === l);
-      return B && (p = B.locales[a]), p;
+      const I = V.find((A) => A._id === l);
+      return I && (p = I.locales[a]), p;
     },
     get developerName() {
-      var p, B;
-      return ((B = (p = H.find((A) => {
-        var z;
-        return ((z = A == null ? void 0 : A.owner) == null ? void 0 : z.did) === m.owner;
-      })) == null ? void 0 : p.owner) == null ? void 0 : B.name) || "";
+      var p, I;
+      return ((I = (p = K.find((A) => {
+        var D;
+        return ((D = A == null ? void 0 : A.owner) == null ? void 0 : D.did) === i.owner;
+      })) == null ? void 0 : p.owner) == null ? void 0 : I.name) || "";
     },
-    handleSearchSelect: x
+    handleSearchSelect: w
   };
   return j(() => {
     setTimeout(() => {
-      G();
-    }, v || 0);
+      W();
+    }, R || 0);
   }, [r]), /* @__PURE__ */ t(Nt, { value: M, children: n });
 }
 ie.propTypes = {
@@ -365,13 +368,13 @@ ie.propTypes = {
   children: o.any.isRequired
 };
 ie.defaultProps = $e;
-function N() {
-  const e = He(Ie);
+function L() {
+  const e = Ke(Ie);
   return e || {};
 }
-const Lt = T(Ne)`
+const Lt = P(Ne)`
   border-radius: 4px;
-`, se = Ve(({ children: e, rounded: n, loading: r, disabled: a, ...s }, c) => /* @__PURE__ */ t(
+`, se = He(({ children: e, rounded: n, loading: r, disabled: a, ...s }, c) => /* @__PURE__ */ t(
   Lt,
   {
     ref: c,
@@ -394,33 +397,33 @@ se.defaultProps = {
   loading: !1,
   disabled: !1
 };
-function ce({ title: e, value: n, icon: r, prepend: a, options: s, onChange: c, itemRender: x, ...y }) {
-  const u = J(null), b = ae(), [d, C] = E(!1), [v, S] = E(n !== null ? n : ""), P = Se(b.breakpoints.down("sm"));
+function ce({ title: e, value: n, icon: r, prepend: a, options: s, onChange: c, itemRender: w, ...g }) {
+  const m = J(null), x = ae(), [u, S] = E(!1), [R, T] = E(n !== null ? n : ""), B = Se(x.breakpoints.down("sm"));
   j(() => {
-    S(n !== null ? n : "");
+    T(n !== null ? n : "");
   }, [n]);
-  const R = ne(() => {
-    C(!1);
-  }, []), i = ne(() => {
-    C(!0);
+  const C = ne(() => {
+    S(!1);
+  }, []), y = ne(() => {
+    S(!0);
   }, []);
-  function h(k) {
-    S(k.value), c(k.value), P && R();
+  function d(b) {
+    T(b.value), c(b.value), B && C();
   }
-  function m(k) {
-    return k === v;
+  function i(b) {
+    return b === R;
   }
-  return /* @__PURE__ */ f(le, { children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ h(le, { children: [
+    /* @__PURE__ */ h(
       Mt,
       {
-        ref: u,
-        onClick: i,
+        ref: m,
+        onClick: y,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", ut(v) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", ut(R) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto" },
-        ...y,
+        ...g,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
           e,
@@ -428,19 +431,19 @@ function ce({ title: e, value: n, icon: r, prepend: a, options: s, onChange: c,
         ]
       }
     ),
-    /* @__PURE__ */ t(Oe, { open: d, anchorEl: u.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: k, placement: $ }) => /* @__PURE__ */ t(Fe, { ...k, sx: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Ee, { onClickAway: R, children: /* @__PURE__ */ f(Ot, { autoFocusItem: d, onMouseEnter: i, onMouseLeave: R, children: [
+    /* @__PURE__ */ t(Oe, { open: u, anchorEl: m.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: b, placement: k }) => /* @__PURE__ */ t(Fe, { ...b, sx: { transformOrigin: k === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Ee, { onClickAway: C, children: /* @__PURE__ */ h(Ot, { autoFocusItem: u, onMouseEnter: y, onMouseLeave: C, children: [
       a,
-      s.map((w) => x ? x(w) : /* @__PURE__ */ t(
+      s.map((z) => w ? w(z) : /* @__PURE__ */ t(
         qe,
         {
-          onClick: () => h(w),
+          onClick: () => d(z),
           className: [
             "my-select__option",
-            m(w.value) ? "my-select__option--active" : ""
+            i(z.value) ? "my-select__option--active" : ""
           ].join(" "),
-          children: w.name
+          children: z.name
         },
-        w.value
+        z.value
       ))
     ] }) }) }) }) })
   ] });
@@ -462,7 +465,7 @@ ce.defaultProps = {
   onChange: () => {
   }
 };
-const Mt = T(se)`
+const Mt = P(se)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightBold};
@@ -493,7 +496,7 @@ const Mt = T(se)`
       margin-right: 3px;
     }
   }
-`, Ot = T(Le)`
+`, Ot = P(Le)`
   .my-select__option__icon {
     color: transparent;
     font-size: 16px;
@@ -511,7 +514,7 @@ const Mt = T(se)`
   }
 `;
 function U({ options: e, onChange: n, title: r, value: a }) {
-  return /* @__PURE__ */ f(Ft, { children: [
+  return /* @__PURE__ */ h(Ft, { children: [
     /* @__PURE__ */ t("div", { className: "title", children: r }),
     /* @__PURE__ */ t("div", { className: "list", children: e.map((s) => /* @__PURE__ */ t(
       "div",
@@ -526,7 +529,7 @@ function U({ options: e, onChange: n, title: r, value: a }) {
     )) })
   ] });
 }
-const Ft = T("div")`
+const Ft = P("div")`
   .title {
     font-size: 18px;
     font-weight: bold;
@@ -564,20 +567,20 @@ U.defaultProps = {
   value: null
 };
 function pe() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: a, filters: s, categoryOptions: c, priceOptions: x } = N(), [y, u] = E(!1), b = (d, C) => {
-    d === "category" && n(C), d === "price" && a(C), u(!1);
+  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: a, filters: s, categoryOptions: c, priceOptions: w } = L(), [g, m] = E(!1), x = (u, S) => {
+    u === "category" && n(S), u === "price" && a(S), m(!1);
   };
-  return /* @__PURE__ */ f(At, { children: [
-    /* @__PURE__ */ t(ht, { variant: "outlined", className: "filter-button", onClick: () => u(!0), children: /* @__PURE__ */ t(dt, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ f(mt, { fullWidth: !0, title: "", open: y, onClose: () => u(!1), children: [
+  return /* @__PURE__ */ h(At, { children: [
+    /* @__PURE__ */ t(ht, { variant: "outlined", className: "filter-button", onClick: () => m(!0), children: /* @__PURE__ */ t(dt, { className: "filter-icon", fontSize: "small" }) }),
+    /* @__PURE__ */ h(mt, { fullWidth: !0, title: "", open: g, onClose: () => m(!1), children: [
       /* @__PURE__ */ t(
         U,
         {
           title: r("common.price"),
-          options: x,
+          options: w,
           value: s.price,
-          onChange: (d) => {
-            b("price", d);
+          onChange: (u) => {
+            x("price", u);
           }
         }
       ),
@@ -587,15 +590,15 @@ function pe() {
           title: r("common.category"),
           options: c,
           value: e,
-          onChange: (d) => {
-            b("category", d);
+          onChange: (u) => {
+            x("category", u);
           }
         }
       ) })
     ] })
   ] });
 }
-const At = T("div")`
+const At = P("div")`
   .filter-button {
     border-color: rgb(240, 240, 240);
     padding: 5px 8px;
@@ -608,7 +611,7 @@ const At = T("div")`
 `;
 pe.propTypes = {};
 pe.defaultProps = {};
-const Et = T("div")`
+const Et = P("div")`
   .MuiChip-root {
     border-radius: 4px;
     height: initial;
@@ -631,12 +634,12 @@ q.defaultProps = {
   label: null
 };
 function we() {
-  const { t: e } = N();
+  const { t: e } = L();
   return /* @__PURE__ */ t(Re, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
 function X({ filterTip: e, keywordTip: n }) {
-  const { t: r, locale: a } = N(), s = () => a === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ f(yt, { className: "tips", children: [
+  const { t: r, locale: a } = L(), s = () => a === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ h(yt, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
     e && n && s(),
@@ -652,14 +655,14 @@ X.defaultProps = {
   keywordTip: !1
 };
 function Z({ primaryStart: e, primaryEnd: n, filter: r }) {
-  return /* @__PURE__ */ f(Re, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ h(Re, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ f("span", { className: "primary", children: [
+    /* @__PURE__ */ h("span", { className: "primary", children: [
       " ",
       r,
       " "
     ] }),
-    /* @__PURE__ */ f("span", { children: [
+    /* @__PURE__ */ h("span", { children: [
       n,
       " "
     ] })
@@ -688,79 +691,80 @@ function ue({ blocklets: e, ...n }) {
     errors: a,
     loadings: s,
     selectedCategory: c,
-    getCategoryLocale: x,
-    filters: y,
-    t: u,
-    hasNextPage: b,
-    loadMore: d,
-    endpoint: C
-  } = N(), v = !!c || !!y.price, [S] = gt({
+    getCategoryLocale: w,
+    filters: g,
+    t: m,
+    serverVersion: x,
+    hasNextPage: u,
+    loadMore: S,
+    endpoint: R
+  } = L(), T = !!c || !!g.price, [B] = gt({
     loading: s.fetchBlockletsLoading || s.loadingMore,
-    hasNextPage: b,
-    onLoadMore: d
+    hasNextPage: u,
+    onLoadMore: S
   });
   if (a.fetchBlockletsError)
     return /* @__PURE__ */ t(
       Te,
       {
-        error: new Error(`Failed to fetch blocklets from ${C}: ${a.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${R}: ${a.fetchBlockletsError.message}`)
       }
     );
   if (s.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(D, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(oe, {}) });
-  if (y.keyword && v && e.length === 0)
-    return /* @__PURE__ */ f(Y, { children: [
+    return /* @__PURE__ */ t(_, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(oe, {}) });
+  if (g.keyword && T && e.length === 0)
+    return /* @__PURE__ */ h(Y, { children: [
       /* @__PURE__ */ t(
         Z,
         {
-          primaryStart: u("blocklet.noBlockletPart1"),
-          primaryEnd: u("blocklet.noBlockletPart2"),
-          filter: y.keyword
+          primaryStart: m("blocklet.noBlockletPart1"),
+          primaryEnd: m("blocklet.noBlockletPart2"),
+          filter: g.keyword
         }
       ),
       /* @__PURE__ */ t(X, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (y.keyword && e.length === 0)
-    return /* @__PURE__ */ f(Y, { children: [
+  if (g.keyword && e.length === 0)
+    return /* @__PURE__ */ h(Y, { children: [
       /* @__PURE__ */ t(
         Z,
         {
-          primaryStart: u("blocklet.noBlockletPart1"),
-          primaryEnd: u("blocklet.noBlockletPart2"),
-          filter: y.keyword
+          primaryStart: m("blocklet.noBlockletPart1"),
+          primaryEnd: m("blocklet.noBlockletPart2"),
+          filter: g.keyword
         }
       ),
       /* @__PURE__ */ t(X, { keywordTip: !0 })
     ] });
-  if (v && e.length === 0) {
-    const P = x(c);
-    return /* @__PURE__ */ f(Y, { children: [
-      P ? /* @__PURE__ */ t(
+  if (T && e.length === 0) {
+    const C = w(c);
+    return /* @__PURE__ */ h(Y, { children: [
+      C ? /* @__PURE__ */ t(
         Z,
         {
-          primaryStart: u("blocklet.noCategoryResults1"),
-          primaryEnd: u("blocklet.noCategoryResults2"),
-          filter: P
+          primaryStart: m("blocklet.noCategoryResults1"),
+          primaryEnd: m("blocklet.noCategoryResults2"),
+          filter: C
         }
       ) : /* @__PURE__ */ t(we, {}),
       /* @__PURE__ */ t(X, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(we, {}) }) : /* @__PURE__ */ t(ze, { children: (P, R) => /* @__PURE__ */ f(
+  return e.length === 0 ? /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(we, {}) }) : /* @__PURE__ */ t(ze, { children: (C, y) => /* @__PURE__ */ h(
     te,
     {
       ...n,
       container: !0,
       spacing: 2,
-      columns: R,
+      columns: y,
       disableEqualOverflow: !0,
-      ref: P,
+      ref: C,
       sx: {
-        opacity: () => R > 0 ? 1 : 0
+        opacity: () => y > 0 ? 1 : 0
       },
       children: [
-        e.map((i) => /* @__PURE__ */ t(te, { xs: 4, "data-blocklet-did": i.did, children: r({ blocklet: i, blocklets: e }) }, i.did)),
-        b && /* @__PURE__ */ t(te, { xs: 12, ref: S, children: /* @__PURE__ */ t(D, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(oe, {}) }) })
+        e.map((d) => /* @__PURE__ */ t(te, { xs: 4, "data-blocklet-did": d.did, children: r({ blocklet: d, blocklets: e, serverVersion: x }) }, d.did)),
+        u && /* @__PURE__ */ t(te, { xs: 12, ref: B, children: /* @__PURE__ */ t(_, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(oe, {}) }) })
       ]
     }
   ) });
@@ -769,7 +773,7 @@ ue.propTypes = {
   blocklets: o.array.isRequired
 };
 ue.defaultProps = {};
-const Y = T(ft)`
+const Y = P(ft)`
   text-align: center;
   .primary {
     color: ${(e) => e.theme.palette.primary.main};
@@ -779,9 +783,9 @@ const Y = T(ft)`
   }
 `;
 function de() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: a, filters: s, categoryOptions: c, priceOptions: x } = N();
-  return /* @__PURE__ */ f(jt, { children: [
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(U, { title: r("common.price"), options: x, value: s.price, onChange: a }) }),
+  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: a, filters: s, categoryOptions: c, priceOptions: w } = L();
+  return /* @__PURE__ */ h(jt, { children: [
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(U, { title: r("common.price"), options: w, value: s.price, onChange: a }) }),
     c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
       U,
       {
@@ -793,7 +797,7 @@ function de() {
     ) })
   ] });
 }
-const jt = T("aside")`
+const jt = P("aside")`
   width: 220px;
   margin-right: ${(e) => e.theme.spacing(2)};
   height: 100%;
@@ -805,10 +809,10 @@ const jt = T("aside")`
 de.propTypes = {};
 de.defaultProps = {};
 function me({ placeholder: e, ...n }) {
-  const { filters: r, handleKeyword: a } = N(), [s, c] = E(r.keyword || ""), x = et(a, { wait: 300 }), y = (b) => {
-    const { value: d } = b.target;
-    c(d), x.run(d);
-  }, u = () => {
+  const { filters: r, handleKeyword: a } = L(), [s, c] = E(r.keyword || ""), w = et(a, { wait: 300 }), g = (x) => {
+    const { value: u } = x.target;
+    c(u), w.run(u);
+  }, m = () => {
     c(""), a();
   };
   return j(() => {
@@ -819,13 +823,13 @@ function me({ placeholder: e, ...n }) {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(ge, { position: "start", children: /* @__PURE__ */ t(Wt, {}) }),
-      onChange: y,
+      startAdornment: /* @__PURE__ */ t(ge, { position: "start", children: /* @__PURE__ */ t(Vt, {}) }),
+      onChange: g,
       placeholder: e,
       value: s,
       title: e,
       "data-cy": "search",
-      endAdornment: s && /* @__PURE__ */ t(ge, { position: "end", children: /* @__PURE__ */ t(Gt, { "data-cy": "search-delete", onClick: u }) }),
+      endAdornment: s && /* @__PURE__ */ t(ge, { position: "end", children: /* @__PURE__ */ t(Wt, { "data-cy": "search-delete", onClick: m }) }),
       ...n
     }
   );
@@ -836,7 +840,7 @@ me.propTypes = {
 me.defaultProps = {
   placeholder: "Type to search..."
 };
-const Ut = T(je)`
+const Ut = P(je)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -853,49 +857,49 @@ const Ut = T(je)`
       color: transparent;
     }
   }
-`, Wt = T(bt)`
+`, Vt = P(bt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, Gt = T(wt)`
+`, Wt = P(wt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
 function he({ onSelect: e, wrapChildren: n }) {
-  const r = J(null), a = J(null), s = J(null), { storeApi: c, blockletRender: x, filters: y, endpoint: u, handleKeyword: b, t: d } = N(), C = async (i) => {
-    const { data: h } = await c.get(_.blockletsPath, { params: i }), m = h.dataList || [];
-    return m.length > 0 && m.unshift({ type: "more-result", total: h.total || 0 }), m;
-  }, v = (i) => {
-    b(i.state.query), i.setIsOpen(!1);
-  }, S = () => {
+  const r = J(null), a = J(null), s = J(null), { storeApi: c, blockletRender: w, filters: g, endpoint: m, handleKeyword: x, t: u, serverVersion: S } = L(), R = async (d) => {
+    const { data: i } = await c.get(N.blockletsPath, { params: d }), b = i.dataList || [];
+    return b.length > 0 && b.unshift({ type: "more-result", total: i.total || 0 }), b;
+  }, T = (d) => {
+    x(d.state.query), d.setIsOpen(!1);
+  }, B = () => {
     r.current && setTimeout(() => {
-      const i = r.current.querySelector("input.bl-autocomplete-input");
-      i && i.focus();
+      const d = r.current.querySelector("input.bl-autocomplete-input");
+      d && d.focus();
     });
-  }, P = (i) => {
-    i.setIsOpen(!1), S();
-  }, R = ({ prevState: i, state: h }) => {
-    i.query !== h.query && (h.query || (b(), S()));
+  }, C = (d) => {
+    d.setIsOpen(!1), B();
+  }, y = ({ prevState: d, state: i }) => {
+    d.query !== i.query && (i.query || (x(), B()));
   };
   return St(
     "ctrl + k, command + k",
-    (i) => (i.stopPropagation(), i.preventDefault(), S(), !1),
+    (d) => (d.stopPropagation(), d.preventDefault(), B(), !1),
     { enableOnTags: ["INPUT"] }
   ), j(() => {
-    S();
-  }, [u]), j(() => {
+    B();
+  }, [m]), j(() => {
     if (!r.current)
       return;
-    const i = kt({
+    const d = kt({
       container: r.current,
       renderer: { createElement: Qe, Fragment: Je, render: () => {
       } },
-      render({ children: h }, m) {
+      render({ children: i }, b) {
         var k;
-        (!a.current || s.current !== m) && (s.current = m, (k = a.current) == null || k.unmount(), a.current = xt(m)), a.current.render(n(h));
+        (!a.current || s.current !== b) && (s.current = b, (k = a.current) == null || k.unmount(), a.current = xt(b)), a.current.render(n(i));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -909,54 +913,54 @@ function he({ onSelect: e, wrapChildren: n }) {
         detachedContainer: "bl-autocomplete-detached-container"
       },
       translations: {
-        clearButtonTitle: d("common.clear"),
-        detachedCancelButtonText: d("common.cancel"),
-        submitButtonTitle: d("common.search"),
-        detachedSearchButtonTitle: d("common.search")
+        clearButtonTitle: u("common.clear"),
+        detachedCancelButtonText: u("common.cancel"),
+        submitButtonTitle: u("common.search"),
+        detachedSearchButtonTitle: u("common.search")
       },
-      placeholder: d("common.searchStore"),
+      placeholder: u("common.searchStore"),
       initialState: {
-        query: y.keyword
+        query: g.keyword
       },
-      onStateChange(h) {
-        R(h);
+      onStateChange(i) {
+        y(i);
       },
-      onSubmit: v,
-      onReset(h) {
-        P(h);
+      onSubmit: T,
+      onReset(i) {
+        C(i);
       },
-      getSources({ query: h, state: m, ...k }) {
-        const $ = {
-          ...y,
-          sortBy: _[y.sortBy],
+      getSources({ query: i, state: b, ...k }) {
+        const z = {
+          ...g,
+          sortBy: N[g.sortBy],
           page: 1,
           pageSize: 10,
-          keyword: h
+          keyword: i
         };
         return zt([
           {
             sourceId: "blocklets",
             getItems() {
-              return C($);
+              return R(z);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: w }) {
-              return w.type === "more-result" ? h : w.title;
+            getItemInputValue({ item: $ }) {
+              return $.type === "more-result" ? i : $.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: w, item: L }) {
-              return L.type === "more-result" ? (k.setIsOpen(!1), b(h)) : w.type === "keydown" ? b(L.title) : e({
-                blocklet: L,
-                detailUrl: nt(u, "/blocklets", L.did),
-                storeUrl: u
+            onSelect({ event: $, item: v }) {
+              return v.type === "more-result" ? (k.setIsOpen(!1), x(i)) : $.type === "keydown" ? x(v.title) : e({
+                blocklet: v,
+                detailUrl: nt(m, "/blocklets", v.did),
+                storeUrl: m
               });
             },
             templates: {
-              item({ item: w }) {
-                return w.type === "more-result" ? /* @__PURE__ */ t("div", { children: d("autocomplete.expandResult", { name: h, number: w.total.toLocaleString() }) }) : x({ blocklet: w, autocompleteSetters: k });
+              item({ item: $ }) {
+                return $.type === "more-result" ? /* @__PURE__ */ t("div", { children: u("autocomplete.expandResult", { name: i, number: $.total.toLocaleString() }) }) : w({ blocklet: $, autocompleteSetters: k, serverVersion: S });
               },
               noResults() {
-                return d("blocklet.noResults");
+                return u("blocklet.noResults");
               }
             }
           }
@@ -964,9 +968,9 @@ function he({ onSelect: e, wrapChildren: n }) {
       }
     });
     return () => {
-      i.destroy();
+      d.destroy();
     };
-  }, [y, x]), /* @__PURE__ */ f(le, { children: [
+  }, [g, w]), /* @__PURE__ */ h(le, { children: [
     /* @__PURE__ */ t(
       xe,
       {
@@ -990,7 +994,7 @@ he.defaultProps = {
   wrapChildren: (e) => e
 };
 function fe({ t: e }) {
-  const { filters: n, handleSwitchShowResources: r } = N(), a = () => {
+  const { filters: n, handleSwitchShowResources: r } = L(), a = () => {
     n.showResources = !n.showResources, r();
   };
   return /* @__PURE__ */ t(
@@ -1008,8 +1012,8 @@ fe.propTypes = {
   t: o.func.isRequired
 };
 fe.defaultProps = {};
-function Kt() {
-  var K, H;
+function Gt() {
+  var G, K;
   const {
     handleDeveloper: e,
     blockletList: n,
@@ -1017,53 +1021,53 @@ function Kt() {
     developerName: a,
     handleSort: s,
     handleCategory: c,
-    handlePrice: x,
-    handleSearchSelect: y,
-    t: u,
-    getCategoryLocale: b,
-    priceOptions: d,
-    wrapChildren: C,
-    showResourcesSwitch: v,
-    showCategory: S,
-    baseSearch: P,
-    onFilterChange: R,
-    tagFilters: i
-  } = N(), h = vt(u), m = ((K = h.find((g) => g.value === r.sortBy)) == null ? void 0 : K.name) || u("sort.sort"), k = b(r.category), { resourceType: $ } = r || {}, w = (H = d.find((g) => g.value === r.price)) == null ? void 0 : H.name, [L, I] = E(!1), W = ae(), ee = Se(() => W.breakpoints.down("md")), O = Pe({
+    handlePrice: w,
+    handleSearchSelect: g,
+    t: m,
+    getCategoryLocale: x,
+    priceOptions: u,
+    wrapChildren: S,
+    showResourcesSwitch: R,
+    showCategory: T,
+    baseSearch: B,
+    onFilterChange: C,
+    tagFilters: y
+  } = L(), d = vt(m), i = ((G = d.find((f) => f.value === r.sortBy)) == null ? void 0 : G.name) || m("sort.sort"), b = x(r.category), { resourceType: k } = r || {}, z = (K = u.find((f) => f.value === r.price)) == null ? void 0 : K.name, [$, v] = E(!1), V = ae(), ee = Se(() => V.breakpoints.down("md")), O = Pe({
     chooseTagId: ""
-  }), G = tt((g) => {
-    O.chooseTagId = g.id, ["category", "resourceType", "resourceDid"].forEach((M) => {
-      typeof g.params[M] > "u" ? delete r[M] : r[M] = g.params[M];
-    }), R(r);
-  }), F = rt(() => i.find((g) => g.id === O.chooseTagId), [O.chooseTagId]);
+  }), W = tt((f) => {
+    O.chooseTagId = f.id, ["category", "resourceType", "resourceDid"].forEach((M) => {
+      typeof f.params[M] > "u" ? delete r[M] : r[M] = f.params[M];
+    }), C(r);
+  }), F = rt(() => y.find((f) => f.id === O.chooseTagId), [O.chooseTagId]);
   return ot(() => {
-    const g = lt(window.location.search), V = i.find((M) => {
+    const f = lt(window.location.search), H = y.find((M) => {
       const l = M.params;
-      return l ? Object.keys(l).every((p) => g[p] === l[p]) : !1;
+      return l ? Object.keys(l).every((p) => f[p] === l[p]) : !1;
     });
-    V ? G(V) : i.length > 0 && G(i[0]);
-  }), /* @__PURE__ */ f(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
-    S ? /* @__PURE__ */ t(ye, { mdDown: !0, children: /* @__PURE__ */ t(de, {}) }) : null,
-    /* @__PURE__ */ f(Ht, { children: [
-      /* @__PURE__ */ f(Vt, { children: [
-        /* @__PURE__ */ f(
-          D,
+    H ? W(H) : y.length > 0 && W(y[0]);
+  }), /* @__PURE__ */ h(_, { display: "flex", alignItems: "flex-start", height: "100%", children: [
+    T ? /* @__PURE__ */ t(ye, { mdDown: !0, children: /* @__PURE__ */ t(de, {}) }) : null,
+    /* @__PURE__ */ h(Kt, { children: [
+      /* @__PURE__ */ h(Ht, { children: [
+        /* @__PURE__ */ h(
+          _,
           {
             className: "filter-bar",
             sx: {
               display: "flex",
               flexDirection: {
                 lg: "row",
-                md: v ? "column" : "row"
+                md: R ? "column" : "row"
               },
               alignItems: {
                 lg: "center",
-                md: v ? "flex-start" : "center",
+                md: R ? "flex-start" : "center",
                 xs: "center"
               },
               gap: 1
             },
             children: [
-              S ? /* @__PURE__ */ t(ye, { mdUp: !0, children: /* @__PURE__ */ t(pe, {}) }) : null,
+              T ? /* @__PURE__ */ t(ye, { mdUp: !0, children: /* @__PURE__ */ t(pe, {}) }) : null,
               /* @__PURE__ */ t(
                 "form",
                 {
@@ -1072,29 +1076,29 @@ function Kt() {
                     flex: 1,
                     width: "100%"
                   },
-                  onSubmit: (g) => {
-                    g.preventDefault(), g.stopPropagation();
+                  onSubmit: (f) => {
+                    f.preventDefault(), f.stopPropagation();
                   },
                   onFocus: () => {
-                    I(!0);
+                    v(!0);
                   },
                   onBlur: () => {
-                    I(!1);
+                    v(!1);
                   },
-                  children: P ? /* @__PURE__ */ t(me, { className: "bl-search-container", placeholder: u("common.searchStore") }) : /* @__PURE__ */ t(he, { onSelect: y, wrapChildren: C })
+                  children: B ? /* @__PURE__ */ t(me, { className: "bl-search-container", placeholder: m("common.searchStore") }) : /* @__PURE__ */ t(he, { onSelect: g, wrapChildren: S })
                 }
               ),
-              /* @__PURE__ */ f(D, { className: "filter-container", display: "flex", alignItems: "center", children: [
-                !ee && v && /* @__PURE__ */ t(D, { ml: 1, mr: 1, children: /* @__PURE__ */ t(fe, { t: u }) }),
+              /* @__PURE__ */ h(_, { className: "filter-container", display: "flex", alignItems: "center", children: [
+                !ee && R && /* @__PURE__ */ t(_, { ml: 1, mr: 1, children: /* @__PURE__ */ t(fe, { t: m }) }),
                 /* @__PURE__ */ t(
                   ce,
                   {
                     value: r.sortBy,
-                    options: h,
-                    title: m,
+                    options: d,
+                    title: i,
                     icon: /* @__PURE__ */ t(_e, {}),
-                    onChange: (g) => {
-                      s(g);
+                    onChange: (f) => {
+                      s(f);
                     }
                   }
                 )
@@ -1102,12 +1106,12 @@ function Kt() {
             ]
           }
         ),
-        S ? /* @__PURE__ */ f(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
+        T ? /* @__PURE__ */ h(_, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
           /* @__PURE__ */ t(
             q,
             {
               label: a,
-              icon: /* @__PURE__ */ t(We, {}),
+              icon: /* @__PURE__ */ t(Ve, {}),
               onDelete: () => {
                 e(null);
               }
@@ -1116,7 +1120,7 @@ function Kt() {
           /* @__PURE__ */ t(
             q,
             {
-              label: k,
+              label: b,
               onDelete: () => {
                 c(null);
               }
@@ -1125,36 +1129,36 @@ function Kt() {
           /* @__PURE__ */ t(
             q,
             {
-              label: w,
+              label: z,
               onDelete: () => {
-                x(null);
+                w(null);
               }
             }
           ),
-          $ && /* @__PURE__ */ t(q, { label: `${u("common.resourceType")}: ${$}` })
+          k && /* @__PURE__ */ t(q, { label: `${m("common.resourceType")}: ${k}` })
         ] }) : null
       ] }),
-      /* @__PURE__ */ t(Ge, { FallbackComponent: Te, children: /* @__PURE__ */ f(D, { sx: { position: "relative", flex: 1, overflow: "auto" }, children: [
-        (i == null ? void 0 : i.length) > 0 ? /* @__PURE__ */ f(le, { children: [
-          /* @__PURE__ */ t(Ue, { my: 1, direction: "row", spacing: 1.5, useFlexGap: !0, flexWrap: "wrap", justifyContent: "flex-start", children: i.map((g) => /* @__PURE__ */ t(
+      /* @__PURE__ */ t(We, { FallbackComponent: Te, children: /* @__PURE__ */ h(_, { sx: { position: "relative", flex: 1, overflow: "auto" }, children: [
+        (y == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ h(le, { children: [
+          /* @__PURE__ */ t(Ue, { my: 1, direction: "row", spacing: 1.5, useFlexGap: !0, flexWrap: "wrap", justifyContent: "flex-start", children: y.map((f) => /* @__PURE__ */ t(
             Ce,
             {
-              label: g.title,
+              label: f.title,
               size: "small",
-              variant: O.chooseTagId === g.id ? "contained" : "outlined",
-              onClick: () => G(g),
-              color: O.chooseTagId === g.id ? "primary" : "default"
+              variant: O.chooseTagId === f.id ? "contained" : "outlined",
+              onClick: () => W(f),
+              color: O.chooseTagId === f.id ? "primary" : "default"
             },
-            g.id
+            f.id
           )) }),
-          F ? /* @__PURE__ */ t(D, { mb: 2, children: F.description ? /* @__PURE__ */ t(ve, { variant: "body1", children: F.description }) : null }) : null
+          F ? /* @__PURE__ */ t(_, { mb: 2, children: F.description ? /* @__PURE__ */ t(ve, { variant: "body1", children: F.description }) : null }) : null
         ] }) : null,
         /* @__PURE__ */ t(ue, { blocklets: n })
       ] }) })
     ] })
   ] });
 }
-const Ht = T("main")`
+const Kt = P("main")`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -1192,7 +1196,7 @@ const Ht = T("main")`
       font-size: 12px;
     }
   }
-`, Vt = T("div")`
+`, Ht = P("div")`
   position: sticky;
   top: 0;
   z-index: 9;
@@ -1238,9 +1242,9 @@ function De(e) {
       }
     `
   };
-  return /* @__PURE__ */ f(ie, { ...e, children: [
+  return /* @__PURE__ */ h(ie, { ...e, children: [
     /* @__PURE__ */ t(xe, { styles: a.autocomplete }),
-    /* @__PURE__ */ t(Kt, {})
+    /* @__PURE__ */ t(Gt, {})
   ] });
 }
 De.propTypes = Be;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.13.26",
+  "version": "0.13.28",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -52,7 +52,7 @@
   "dependencies": {
     "@algolia/autocomplete-js": "^1.17.0",
     "@algolia/autocomplete-theme-classic": "^1.17.0",
-    "@blocklet/util": "0.13.26",
+    "@blocklet/util": "0.13.28",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.16.4",
@@ -83,5 +83,5 @@
     "prettier": "^3.3.2",
     "vite": "^5.2.12"
   },
-  "gitHead": "737fdc5f0aac370db8cde9485aa50e6ed36f3adb"
+  "gitHead": "ba5b362b8e1a797a79e51f6aed61e8e3bed42dae"
 }