@blocklet/list 0.12.90 → 0.12.91

package/lib/components/list/column-sizer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function calculateColumns(size) {
+  if (!size) {
+    return 0;
+  }
+  if (size.width > 900) {
+    return 12;
+  }
+  if (size.width > 600) {
+    return 8;
+  }
+  return 4;
+}
+function ColumnSizer(_ref) {
+  let {
+    children
+  } = _ref;
+  const refContainer = (0, _react.useRef)(null);
+  const [dom, setDom] = (0, _react.useState)(null);
+  const size = (0, _ahooks.useSize)(dom);
+  (0, _react.useEffect)(() => {
+    if (!dom) {
+      setDom(refContainer.current);
+    }
+  }, [dom]);
+  return children(refContainer, calculateColumns(size));
+}
+ColumnSizer.propTypes = {
+  children: _propTypes.default.func.isRequired
+};
+var _default = exports.default = ColumnSizer;

package/lib/components/list/index.js

@@ -4,16 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BlockletList;
-var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Theme = require("@arcblock/ux/lib/Theme");
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _material = require("@mui/material");
 var _reactInfiniteScrollHook = _interopRequireDefault(require("react-infinite-scroll-hook"));
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
-var _ahooks = require("ahooks");
 var _empty = require("./empty");
 var _filter = require("../../contexts/filter");
+var _columnSizer = _interopRequireDefault(require("./column-sizer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
 const _excluded = ["blocklets"];
@@ -43,22 +42,6 @@ function BlockletList(_ref) {
     loadMore,
     endpoint
   } = (0, _filter.useFilterContext)();
-  const refContainer = (0, _react.useRef)(null);
-  const size = (0, _ahooks.useSize)(refContainer.current);
-
-  // 根据当前容器的宽度来决定 columns，而不是屏幕宽度
-  const columns = (0, _ahooks.useCreation)(() => {
-    if (size) {
-      if (size.width > 900) {
-        return 12;
-      }
-      if (size.width > 600) {
-        return 8;
-      }
-      return 4;
-    }
-    return 0;
-  }, [size]);
   const showFilterTip = !!selectedCategory || !!filters.price;
   const [sentryRef] = (0, _reactInfiniteScrollHook.default)({
     loading: loadings.fetchBlockletsLoading || loadings.loadingMore,
@@ -119,36 +102,38 @@ function BlockletList(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {})
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledGrid, _objectSpread(_objectSpread({
-    container: true
-  }, rest), {}, {
-    columns: columns,
-    ref: refContainer,
-    children: [blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
-      item: true,
-      xs: 4,
-      "data-blocklet-did": blocklet.did,
-      children: blockletRender({
-        blocklet,
-        blocklets
-      })
-    }, blocklet.did)), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
-      item: true,
-      xs: 12,
-      ref: sentryRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        height: 60,
-        display: "flex",
-        justifyContent: "center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-      })
-    })]
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnSizer.default, {
+    children: (refContainer, columns) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledGrid, _objectSpread(_objectSpread({
+      container: true
+    }, rest), {}, {
+      columns: columns,
+      ref: refContainer,
+      children: [blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+        item: true,
+        xs: 4,
+        "data-blocklet-did": blocklet.did,
+        children: blockletRender({
+          blocklet,
+          blocklets
+        })
+      }, blocklet.did)), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+        item: true,
+        xs: 12,
+        ref: sentryRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          height: 60,
+          display: "flex",
+          justifyContent: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+        })
+      })]
+    }))
+  });
 }
 BlockletList.propTypes = {
   blocklets: _propTypes.default.array.isRequired
 };
 BlockletList.defaultProps = {};
 const StyledGrid = (0, _Theme.styled)(_material.Grid)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: ", ";\n  &.MuiGrid-root {\n    width: 100%;\n    margin: 0 -16px;\n  }\n"])), props => props.columns > 0 ? 1 : 0);
-const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _Theme.styled)(_material.Grid)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    &.MuiGrid-item {\n      padding-bottom: 0px;\n    }\n  }\n  @media (min-width: ", "px) {\n    &.MuiGrid-item {\n      margin-bottom: ", ";\n    }\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2)));
+const StyledGridItem = (0, _Theme.styled)(_material.Grid)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    &.MuiGrid-item {\n      padding-bottom: 0px;\n    }\n  }\n  @media (min-width: ", "px) {\n    &.MuiGrid-item {\n      margin-bottom: ", ";\n    }\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
 const CustomEmpty = (0, _Theme.styled)(_Empty.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-align: center;\n  .primary {\n    color: ", ";\n  }\n  .tips {\n    margin-top: ", ";\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/lib/index.es.js

@@ -2,38 +2,38 @@ import { jsx as t, jsxs as h, Fragment as he } from "react/jsx-runtime";
 import { useTheme as fe } from "@mui/material/styles";
 import { Global as ge, css as ye } from "@emotion/react";
 import { styled as v } from "@arcblock/ux/lib/Theme";
-import Ie from "@mui/icons-material/Sort";
-import { Button as De, CircularProgress as Q, MenuList as _e, useMediaQuery as be, SvgIcon as Ne, Popper as Le, Grow as Me, Paper as Ae, ClickAwayListener as Fe, MenuItem as Oe, Chip as Ee, Grid as we, Box as N, OutlinedInput as qe, InputAdornment as ce, Typography as je, Hidden as pe } from "@mui/material";
-import Ge from "@mui/icons-material/Face";
-import { ErrorBoundary as Ue } from "react-error-boundary";
+import De from "@mui/icons-material/Sort";
+import { Button as _e, CircularProgress as Q, MenuList as Ne, useMediaQuery as be, SvgIcon as Le, Popper as Me, Grow as Ae, Paper as Fe, ClickAwayListener as Oe, MenuItem as qe, Chip as Ee, Grid as we, Box as N, OutlinedInput as je, InputAdornment as ce, Typography as Ge, Hidden as pe } from "@mui/material";
+import Ue from "@mui/icons-material/Face";
+import { ErrorBoundary as Ke } from "react-error-boundary";
 import { ErrorFallback as xe } from "@arcblock/ux/lib/ErrorBoundary";
-import { createContext as Ke, useMemo as O, useState as A, useCallback as J, useEffect as j, useContext as We, forwardRef as He, useRef as E, memo as Ve, createElement as Qe, Fragment as Je } from "react";
+import { createContext as We, useMemo as q, useState as L, useCallback as J, useEffect as F, useContext as He, forwardRef as Ve, useRef as E, createElement as Qe, Fragment as Je } from "react";
 import n from "prop-types";
-import { useReactive as Xe, useInfiniteScroll as Ye, useRequest as Ze, useSize as et, useCreation as tt, useDebounceFn as rt } from "ahooks";
-import ot from "lodash/orderBy";
-import nt from "axios";
-import lt from "json-stable-stringify";
+import { useReactive as Xe, useInfiniteScroll as Ye, useRequest as Ze, useSize as et, useDebounceFn as tt } from "ahooks";
+import rt from "lodash/orderBy";
+import ot from "axios";
+import nt from "json-stable-stringify";
 import "lodash/cloneDeep";
-import at from "color";
+import lt from "color";
 import ue from "flat";
-import it from "@mui/icons-material/KeyboardArrowDown";
-import st from "lodash/isEmpty";
-import ct from "@mui/icons-material/FilterAltOutlined";
-import pt from "@arcblock/ux/lib/Dialog";
-import ut from "@mui/material/Button";
-import dt from "@arcblock/ux/lib/Empty";
-import mt from "react-infinite-scroll-hook";
-import ht from "@mui/material/Box";
+import at from "@mui/icons-material/KeyboardArrowDown";
+import it from "lodash/isEmpty";
+import st from "@mui/icons-material/FilterAltOutlined";
+import ct from "@arcblock/ux/lib/Dialog";
+import pt from "@mui/material/Button";
+import ut from "@arcblock/ux/lib/Empty";
+import dt from "react-infinite-scroll-hook";
+import mt from "@mui/material/Box";
 import ke from "@mui/material/Typography";
-import ft from "@mui/icons-material/Search";
-import gt from "@mui/icons-material/Close";
-import { createRoot as yt } from "react-dom/client";
-import { autocomplete as bt } from "@algolia/autocomplete-js";
-import { useHotkeys as wt } from "react-hotkeys-hook";
-import xt from "url-join";
-import kt from "@arcblock/ux/lib/Switch";
+import ht from "@mui/icons-material/Search";
+import ft from "@mui/icons-material/Close";
+import { createRoot as gt } from "react-dom/client";
+import { autocomplete as yt } from "@algolia/autocomplete-js";
+import { useHotkeys as bt } from "react-hotkeys-hook";
+import wt from "url-join";
+import xt from "@arcblock/ux/lib/Switch";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const St = (e) => [
+const kt = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -50,17 +50,17 @@ const St = (e) => [
     name: e("sort.nameDescend"),
     value: "nameDesc"
   }
-], vt = (e) => [
+], St = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Ct = (e = [], o = "en") => e.map((r) => ({ name: r.locales[o] || `Category.${o}`, value: r._id })), Pt = (e, o) => (
+], vt = (e = [], o = "en") => e.map((r) => ({ name: r.locales[o] || `Category.${o}`, value: r._id })), Ct = (e, o) => (
   // eslint-disable-next-line no-prototype-builtins
   e.replace(/{(\w*)}/g, (r, l) => o.hasOwnProperty(l) ? o[l] : "")
-), Tt = () => window.innerWidth <= 600, Rt = (e, o) => {
+), Pt = () => window.innerWidth <= 600, Tt = (e, o) => {
   const r = (e + o) / o;
   return r > 1 ? r.toFixed() : 1;
-}, Bt = (e) => at(e).rgb().object();
-function $t(e, o) {
+}, Rt = (e) => lt(e).rgb().object();
+function Bt(e, o) {
   let r;
   return function(...s) {
     return r && clearTimeout(r), new Promise((c) => {
@@ -68,7 +68,7 @@ function $t(e, o) {
     });
   };
 }
-const zt = $t((e) => Promise.resolve(e), 300), It = {
+const $t = Bt((e) => Promise.resolve(e), 300), zt = {
   common: {
     searchStore: "Search the store",
     showResources: "Show resources",
@@ -107,7 +107,7 @@ const zt = $t((e) => Promise.resolve(e), 300), It = {
   autocomplete: {
     expandResult: 'Show {number} search results for "{name}" '
   }
-}, Dt = {
+}, It = {
   common: {
     searchStore: "搜索商店内应用",
     showResources: "显示资源型应用",
@@ -147,8 +147,8 @@ const zt = $t((e) => Promise.resolve(e), 300), It = {
     expandResult: "显示 {number} 条 “{name}” 的搜索结果 "
   }
 }, V = {
-  en: ue(It),
-  zh: ue(Dt)
+  en: ue(zt),
+  zh: ue(It)
 }, Se = {
   filters: n.shape({
     keyword: n.string,
@@ -192,7 +192,7 @@ const zt = $t((e) => Promise.resolve(e), 300), It = {
   blockletsPath: "/api/v2/blocklets.json",
   categoriesPath: "/api/blocklets/categories",
   cacheSize: 100
-}, Ce = Ke({}), { Provider: _t, Consumer: $r } = Ce;
+}, Ce = We({}), { Provider: Dt, Consumer: $r } = Ce;
 function X({
   filters: e,
   children: o,
@@ -202,27 +202,27 @@ function X({
   onFilterChange: c,
   onSearchSelect: b,
   extraFilter: g,
-  wrapChildren: u,
+  wrapChildren: p,
   baseSearch: y,
-  serverVersion: d,
+  serverVersion: u,
   storeVersion: C,
   fetchCategoryDelay: B,
-  showResourcesSwitch: w
+  showResourcesSwitch: P
 }) {
-  const T = {};
-  d && (T["x-blocklet-server-version"] = d), C && (T["x-blocklet-store-version"] = C);
-  const P = O(() => nt.create({
+  const k = {};
+  u && (k["x-blocklet-server-version"] = u), C && (k["x-blocklet-store-version"] = C);
+  const T = q(() => ot.create({
     baseURL: r,
-    headers: T
-  }), [r]), i = O(() => ({
+    headers: k
+  }), [r]), i = q(() => ({
     sortBy: "popularity",
     sortDirection: "desc",
     ...e
-  }), [e]), p = i.category, S = Xe({
+  }), [e]), m = i.category, S = Xe({
     currentPage: z.currentPage,
-    pageSize: Tt() ? z.mobilePageSize : z.pageSize,
+    pageSize: Pt() ? z.mobilePageSize : z.pageSize,
     defaultCurrentPage: z.defaultCurrentPage
-  }), [x, $] = A(null), {
+  }), [w, $] = L(null), {
     data: f = { list: [], total: 0 },
     loading: D,
     loadMore: G,
@@ -230,95 +230,95 @@ function X({
   } = Ye(
     async (a) => {
       var _;
-      const m = {
+      const d = {
         ...i,
         sortBy: z[i.sortBy],
-        page: Rt(((_ = a == null ? void 0 : a.list) == null ? void 0 : _.length) || 0, S.pageSize),
+        page: Tt(((_ = a == null ? void 0 : a.list) == null ? void 0 : _.length) || 0, S.pageSize),
         pageSize: S.pageSize
       };
       $(null);
-      const { data: k = {} } = await P.get(z.blockletsPath, {
-        params: m
+      const { data: x = {} } = await T.get(z.blockletsPath, {
+        params: d
       });
-      return { list: (k == null ? void 0 : k.dataList) || [], total: (k == null ? void 0 : k.total) || 0 };
+      return { list: (x == null ? void 0 : x.dataList) || [], total: (x == null ? void 0 : x.total) || 0 };
     },
     {
       isNoMore: (a) => a ? a.list.length >= a.total : !1,
-      reloadDeps: [r, lt(e)],
+      reloadDeps: [r, nt(e)],
       onError: (a) => {
         $(a);
       }
     }
   ), {
-    data: L = [],
+    data: M = [],
     error: R,
-    loading: Te,
-    run: Re
+    loading: Re,
+    run: Be
   } = Ze(
     async () => {
-      const { data: a } = await P.get(z.categoriesPath);
+      const { data: a } = await T.get(z.categoriesPath);
       return Array.isArray(a) ? a : [];
     },
     { manual: !0 }
-  ), H = O(() => ot(L || [], [(m) => m.name], ["asc"]), [L]), ae = J(
-    (a, m) => {
-      const k = V[l] ? V[l][a] : V.en[a];
-      return Pt(k, m);
+  ), H = q(() => rt(M || [], [(d) => d.name], ["asc"]), [M]), ae = J(
+    (a, d) => {
+      const x = V[l] ? V[l][a] : V.en[a];
+      return Ct(x, d);
     },
     [l]
-  ), ie = O(() => {
+  ), ie = q(() => {
     let a = f.list || [];
     return a = g(a), a;
-  }, [f, g]), Be = O(() => Ct(H, l), [H, l]), $e = vt(ae), ze = {
-    errors: { fetchBlockletsError: x, fetchCategoriesError: R },
-    loadings: { fetchBlockletsLoading: D, fetchCategoriesLoading: Te, loadingMore: U },
+  }, [f, g]), $e = q(() => vt(H, l), [H, l]), ze = St(ae), Ie = {
+    errors: { fetchBlockletsError: w, fetchCategoriesError: R },
+    loadings: { fetchBlockletsLoading: D, fetchCategoriesLoading: Re, loadingMore: U },
     endpoint: r,
     blockletList: ie,
-    wrapChildren: u,
+    wrapChildren: p,
     t: ae,
     filters: i,
-    selectedCategory: p,
+    selectedCategory: m,
     categoryList: H,
     blockletRender: s,
     locale: l,
-    categoryOptions: Be,
-    priceOptions: $e,
-    storeApi: P,
+    categoryOptions: $e,
+    priceOptions: ze,
+    storeApi: T,
     baseSearch: y,
-    showResourcesSwitch: w,
+    showResourcesSwitch: P,
     hasNextPage: f.list.length < f.total,
     handleSort: (a) => {
-      const m = {
+      const d = {
         ...i,
         sortBy: a,
         sortDirection: a === "nameAsc" ? "asc" : "desc"
       };
-      c(m);
+      c(d);
     },
     handleKeyword: (a) => {
-      const m = { ...i, keyword: a || void 0 };
-      c(m);
+      const d = { ...i, keyword: a || void 0 };
+      c(d);
     },
     handlePrice: (a) => {
-      const m = {
+      const d = {
         ...i,
         price: a === i.price ? void 0 : a
       };
-      c(m);
+      c(d);
     },
     handleCategory: (a) => {
-      let m = a;
-      (a === "all" || a === i.category) && (m = void 0);
-      const k = { ...i, category: m };
-      c(k);
+      let d = a;
+      (a === "all" || a === i.category) && (d = void 0);
+      const x = { ...i, category: d };
+      c(x);
     },
     handleDeveloper: (a) => {
-      const m = { ...i, owner: a || void 0 };
-      c(m);
+      const d = { ...i, owner: a || void 0 };
+      c(d);
     },
     handlePage: (a) => {
-      const m = { ...i, currentPage: a };
-      c(m);
+      const d = { ...i, currentPage: a };
+      c(d);
     },
     handleSwitchShowResources: () => {
       const a = { ...i };
@@ -330,24 +330,24 @@ function X({
     getCategoryLocale: (a) => {
       if (!a)
         return null;
-      let m = null;
-      const k = L.find((_) => _._id === a);
-      return k && (m = k.locales[l]), m;
+      let d = null;
+      const x = M.find((_) => _._id === a);
+      return x && (d = x.locales[l]), d;
     },
     get developerName() {
-      var m, k;
-      return ((k = (m = ie.find((_) => {
+      var d, x;
+      return ((x = (d = ie.find((_) => {
         var se;
         return ((se = _ == null ? void 0 : _.owner) == null ? void 0 : se.did) === i.owner;
-      })) == null ? void 0 : m.owner) == null ? void 0 : k.name) || "";
+      })) == null ? void 0 : d.owner) == null ? void 0 : x.name) || "";
     },
     handleSearchSelect: b
   };
-  return j(() => {
+  return F(() => {
     setTimeout(() => {
-      Re();
+      Be();
     }, B || 0);
-  }, [r]), /* @__PURE__ */ t(_t, { value: ze, children: o });
+  }, [r]), /* @__PURE__ */ t(Dt, { value: Ie, children: o });
 }
 X.propTypes = {
   ...Se,
@@ -355,13 +355,13 @@ X.propTypes = {
 };
 X.defaultProps = ve;
 function I() {
-  const e = We(Ce);
+  const e = He(Ce);
   return e || {};
 }
-const Nt = v(De)`
+const _t = v(_e)`
   border-radius: 4px;
-`, Y = He(({ children: e, rounded: o, loading: r, disabled: l, ...s }, c) => /* @__PURE__ */ t(
-  Nt,
+`, Y = Ve(({ children: e, rounded: o, loading: r, disabled: l, ...s }, c) => /* @__PURE__ */ t(
+  _t,
   {
     ref: c,
     disableElevation: !0,
@@ -384,49 +384,49 @@ Y.defaultProps = {
   disabled: !1
 };
 function Z({ title: e, value: o, icon: r, prepend: l, options: s, onChange: c, itemRender: b, ...g }) {
-  const u = E(null), y = fe(), [d, C] = A(!1), [B, w] = A(o !== null ? o : ""), T = be(y.breakpoints.down("sm"));
-  j(() => {
-    w(o !== null ? o : "");
+  const p = E(null), y = fe(), [u, C] = L(!1), [B, P] = L(o !== null ? o : ""), k = be(y.breakpoints.down("sm"));
+  F(() => {
+    P(o !== null ? o : "");
   }, [o]);
-  const P = J(() => {
+  const T = J(() => {
     C(!1);
   }, []), i = J(() => {
     C(!0);
   }, []);
-  function p(x) {
-    w(x.value), c(x.value), T && P();
+  function m(w) {
+    P(w.value), c(w.value), k && T();
   }
-  function S(x) {
-    return x === B;
+  function S(w) {
+    return w === B;
   }
   return /* @__PURE__ */ h(he, { children: [
     /* @__PURE__ */ h(
-      Lt,
+      Nt,
       {
-        ref: u,
+        ref: p,
         onClick: i,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", st(B) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", it(B) ? "" : "my-select__selector--active"].join(" "),
         ...g,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
           e,
-          /* @__PURE__ */ t(Ne, { className: "my-select__arrowdown", component: it, fontSize: "small" })
+          /* @__PURE__ */ t(Le, { className: "my-select__arrowdown", component: at, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(Le, { open: d, anchorEl: u.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: $ }) => /* @__PURE__ */ t(
-      Me,
+    /* @__PURE__ */ t(Me, { open: u, anchorEl: p.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: w, placement: $ }) => /* @__PURE__ */ t(
+      Ae,
       {
-        ...x,
+        ...w,
         style: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Fe, { onClickAway: P, children: /* @__PURE__ */ h(Mt, { autoFocusItem: d, onMouseEnter: i, onMouseLeave: P, children: [
+        children: /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ t(Oe, { onClickAway: T, children: /* @__PURE__ */ h(Lt, { autoFocusItem: u, onMouseEnter: i, onMouseLeave: T, children: [
           l,
           s.map((f) => b ? b(f) : /* @__PURE__ */ t(
-            Oe,
+            qe,
             {
-              onClick: () => p(f),
+              onClick: () => m(f),
               className: [
                 "my-select__option",
                 S(f.value) ? "my-select__option--active" : ""
@@ -457,7 +457,7 @@ Z.defaultProps = {
   onChange: () => {
   }
 };
-const Lt = v(Y)`
+const Nt = v(Y)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightBold};
@@ -489,7 +489,7 @@ const Lt = v(Y)`
       margin-right: 3px;
     }
   }
-`, Mt = v(_e)`
+`, Lt = v(Ne)`
   .my-select__option__icon {
     color: transparent;
     font-size: 16px;
@@ -506,8 +506,8 @@ const Lt = v(Y)`
     }
   }
 `;
-function F({ options: e, onChange: o, title: r, value: l }) {
-  return /* @__PURE__ */ h(At, { children: [
+function O({ options: e, onChange: o, title: r, value: l }) {
+  return /* @__PURE__ */ h(Mt, { children: [
     /* @__PURE__ */ t("div", { className: "title", children: r }),
     /* @__PURE__ */ t("div", { className: "list", children: e.map((s) => /* @__PURE__ */ t(
       "div",
@@ -522,7 +522,7 @@ function F({ options: e, onChange: o, title: r, value: l }) {
     )) })
   ] });
 }
-const At = v("div")`
+const Mt = v("div")`
   .title {
     font-size: 18px;
     font-weight: bold;
@@ -550,48 +550,48 @@ const At = v("div")`
     font-weight: bold;
   }
 `;
-F.propTypes = {
+O.propTypes = {
   title: n.string.isRequired,
   options: n.array.isRequired,
   onChange: n.func.isRequired,
   value: n.oneOfType([n.string, n.number])
 };
-F.defaultProps = {
+O.defaultProps = {
   value: null
 };
 function ee() {
-  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: s, categoryOptions: c, priceOptions: b } = I(), [g, u] = A(!1), y = (d, C) => {
-    d === "category" && o(C), d === "price" && l(C), u(!1);
+  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: s, categoryOptions: c, priceOptions: b } = I(), [g, p] = L(!1), y = (u, C) => {
+    u === "category" && o(C), u === "price" && l(C), p(!1);
   };
-  return /* @__PURE__ */ h(Ft, { children: [
-    /* @__PURE__ */ t(ut, { variant: "outlined", className: "filter-button", onClick: () => u(!0), children: /* @__PURE__ */ t(ct, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ h(pt, { fullWidth: !0, title: "", open: g, onClose: () => u(!1), children: [
+  return /* @__PURE__ */ h(At, { children: [
+    /* @__PURE__ */ t(pt, { variant: "outlined", className: "filter-button", onClick: () => p(!0), children: /* @__PURE__ */ t(st, { className: "filter-icon", fontSize: "small" }) }),
+    /* @__PURE__ */ h(ct, { fullWidth: !0, title: "", open: g, onClose: () => p(!1), children: [
       /* @__PURE__ */ t(
-        F,
+        O,
         {
           title: r("common.price"),
           options: b,
           value: s.price,
-          onChange: (d) => {
-            y("price", d);
+          onChange: (u) => {
+            y("price", u);
           }
         }
       ),
       c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-        F,
+        O,
         {
           title: r("common.category"),
           options: c,
           value: e,
-          onChange: (d) => {
-            y("category", d);
+          onChange: (u) => {
+            y("category", u);
           }
         }
       ) })
     ] })
   ] });
 }
-const Ft = v("div")`
+const At = v("div")`
   .filter-button {
     margin-right: 16px;
     border-color: rgb(240, 240, 240);
@@ -605,7 +605,7 @@ const Ft = v("div")`
 `;
 ee.propTypes = {};
 ee.defaultProps = {};
-const Ot = v("div")`
+const Ft = v("div")`
   .MuiChip-root {
     border-radius: 4px;
     height: initial;
@@ -614,15 +614,15 @@ const Ot = v("div")`
     padding: 4px 0;
   }
 `;
-function M({ label: e, icon: o, onDelete: r, ...l }) {
-  return e ? /* @__PURE__ */ t(Ot, { ...l, children: /* @__PURE__ */ t(Ee, { color: "primary", "data-cy": "filter-tag", icon: o, label: e, onDelete: r }) }) : null;
+function A({ label: e, icon: o, onDelete: r, ...l }) {
+  return e ? /* @__PURE__ */ t(Ft, { ...l, children: /* @__PURE__ */ t(Ee, { color: "primary", "data-cy": "filter-tag", icon: o, label: e, onDelete: r }) }) : null;
 }
-M.propTypes = {
+A.propTypes = {
   label: n.string,
   onDelete: n.func,
   icon: n.element
 };
-M.defaultProps = {
+A.defaultProps = {
   onDelete: null,
   icon: null,
   label: null
@@ -631,20 +631,20 @@ function de() {
   const { t: e } = I();
   return /* @__PURE__ */ t(ke, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function q({ filterTip: e, keywordTip: o }) {
+function j({ filterTip: e, keywordTip: o }) {
   const { t: r, locale: l } = I(), s = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(ht, { className: "tips", children: [
+  return /* @__PURE__ */ h(mt, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
     e && o && s(),
     o && /* @__PURE__ */ t("span", { children: r("blocklet.keywordTip") })
   ] });
 }
-q.propTypes = {
+j.propTypes = {
   filterTip: n.bool,
   keywordTip: n.bool
 };
-q.defaultProps = {
+j.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
@@ -667,6 +667,18 @@ W.propTypes = {
   primaryEnd: n.string.isRequired,
   filter: n.string.isRequired
 };
+function Ot(e) {
+  return e ? e.width > 900 ? 12 : e.width > 600 ? 8 : 4 : 0;
+}
+function Pe({ children: e }) {
+  const o = E(null), [r, l] = L(null), s = et(r);
+  return F(() => {
+    r || l(o.current);
+  }, [r]), e(o, Ot(s));
+}
+Pe.propTypes = {
+  children: n.func.isRequired
+};
 function te({ blocklets: e, ...o }) {
   const {
     blockletRender: r,
@@ -675,14 +687,14 @@ function te({ blocklets: e, ...o }) {
     selectedCategory: c,
     getCategoryLocale: b,
     filters: g,
-    t: u,
+    t: p,
     hasNextPage: y,
-    loadMore: d,
+    loadMore: u,
     endpoint: C
-  } = I(), B = E(null), w = et(B.current), T = tt(() => w ? w.width > 900 ? 12 : w.width > 600 ? 8 : 4 : 0, [w]), P = !!c || !!g.price, [i] = mt({
+  } = I(), B = !!c || !!g.price, [P] = dt({
     loading: s.fetchBlockletsLoading || s.loadingMore,
     hasNextPage: y,
-    onLoadMore: d
+    onLoadMore: u
   });
   if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
@@ -693,60 +705,60 @@ function te({ blocklets: e, ...o }) {
     );
   if (s.fetchBlockletsLoading)
     return /* @__PURE__ */ t(N, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(Q, {}) });
-  if (g.keyword && P && e.length === 0)
+  if (g.keyword && B && e.length === 0)
     return /* @__PURE__ */ h(K, { children: [
       /* @__PURE__ */ t(
         W,
         {
-          primaryStart: u("blocklet.noBlockletPart1"),
-          primaryEnd: u("blocklet.noBlockletPart2"),
+          primaryStart: p("blocklet.noBlockletPart1"),
+          primaryEnd: p("blocklet.noBlockletPart2"),
           filter: g.keyword
         }
       ),
-      /* @__PURE__ */ t(q, { keywordTip: !0, filterTip: !0 })
+      /* @__PURE__ */ t(j, { keywordTip: !0, filterTip: !0 })
     ] });
   if (g.keyword && e.length === 0)
     return /* @__PURE__ */ h(K, { children: [
       /* @__PURE__ */ t(
         W,
         {
-          primaryStart: u("blocklet.noBlockletPart1"),
-          primaryEnd: u("blocklet.noBlockletPart2"),
+          primaryStart: p("blocklet.noBlockletPart1"),
+          primaryEnd: p("blocklet.noBlockletPart2"),
           filter: g.keyword
         }
       ),
-      /* @__PURE__ */ t(q, { keywordTip: !0 })
+      /* @__PURE__ */ t(j, { keywordTip: !0 })
     ] });
-  if (P && e.length === 0) {
-    const p = b(c);
+  if (B && e.length === 0) {
+    const k = b(c);
     return /* @__PURE__ */ h(K, { children: [
-      p ? /* @__PURE__ */ t(
+      k ? /* @__PURE__ */ t(
         W,
         {
-          primaryStart: u("blocklet.noCategoryResults1"),
-          primaryEnd: u("blocklet.noCategoryResults2"),
-          filter: p
+          primaryStart: p("blocklet.noCategoryResults1"),
+          primaryEnd: p("blocklet.noCategoryResults2"),
+          filter: k
         }
       ) : /* @__PURE__ */ t(de, {}),
-      /* @__PURE__ */ t(q, { filterTip: !0 })
+      /* @__PURE__ */ t(j, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(de, {}) }) : /* @__PURE__ */ h(Et, { container: !0, ...o, columns: T, ref: B, children: [
-    e.map((p) => /* @__PURE__ */ t(me, { item: !0, xs: 4, "data-blocklet-did": p.did, children: r({ blocklet: p, blocklets: e }) }, p.did)),
-    y && /* @__PURE__ */ t(me, { item: !0, xs: 12, ref: i, children: /* @__PURE__ */ t(N, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(Q, {}) }) })
-  ] });
+  return e.length === 0 ? /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(de, {}) }) : /* @__PURE__ */ t(Pe, { children: (k, T) => /* @__PURE__ */ h(qt, { container: !0, ...o, columns: T, ref: k, children: [
+    e.map((i) => /* @__PURE__ */ t(me, { item: !0, xs: 4, "data-blocklet-did": i.did, children: r({ blocklet: i, blocklets: e }) }, i.did)),
+    y && /* @__PURE__ */ t(me, { item: !0, xs: 12, ref: P, children: /* @__PURE__ */ t(N, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(Q, {}) }) })
+  ] }) });
 }
 te.propTypes = {
   blocklets: n.array.isRequired
 };
 te.defaultProps = {};
-const Et = v(we)`
+const qt = v(we)`
   opacity: ${(e) => e.columns > 0 ? 1 : 0};
   &.MuiGrid-root {
     width: 100%;
     margin: 0 -16px;
   }
-`, me = Ve(v(we)`
+`, me = v(we)`
   @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -757,7 +769,7 @@ const Et = v(we)`
       margin-bottom: ${(e) => e.theme.spacing(2)};
     }
   }
-`), K = v(dt)`
+`, K = v(ut)`
   text-align: center;
   .primary {
     color: ${(e) => e.theme.palette.primary.main};
@@ -768,10 +780,10 @@ const Et = v(we)`
 `;
 function re() {
   const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: s, categoryOptions: c, priceOptions: b } = I();
-  return /* @__PURE__ */ h(qt, { children: [
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(F, { title: r("common.price"), options: b, value: s.price, onChange: l }) }),
+  return /* @__PURE__ */ h(Et, { children: [
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(O, { title: r("common.price"), options: b, value: s.price, onChange: l }) }),
     c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-      F,
+      O,
       {
         title: r("common.category"),
         options: c,
@@ -781,7 +793,7 @@ function re() {
     ) })
   ] });
 }
-const qt = v("aside")`
+const Et = v("aside")`
   width: 220px;
   margin-right: ${(e) => e.theme.spacing(2)};
   height: 100%;
@@ -793,13 +805,13 @@ const qt = v("aside")`
 re.propTypes = {};
 re.defaultProps = {};
 function oe({ placeholder: e, ...o }) {
-  const { filters: r, handleKeyword: l } = I(), [s, c] = A(r.keyword || ""), b = rt(l, { wait: 300 }), g = (y) => {
-    const { value: d } = y.target;
-    c(d), b.run(d);
-  }, u = () => {
+  const { filters: r, handleKeyword: l } = I(), [s, c] = L(r.keyword || ""), b = tt(l, { wait: 300 }), g = (y) => {
+    const { value: u } = y.target;
+    c(u), b.run(u);
+  }, p = () => {
     c(""), l();
   };
-  return j(() => {
+  return F(() => {
     c(r.keyword || "");
   }, [r.keyword]), /* @__PURE__ */ t(
     jt,
@@ -813,7 +825,7 @@ function oe({ placeholder: e, ...o }) {
       value: s,
       title: e,
       "data-cy": "search",
-      endAdornment: s && /* @__PURE__ */ t(ce, { position: "end", children: /* @__PURE__ */ t(Ut, { "data-cy": "search-delete", onClick: u }) }),
+      endAdornment: s && /* @__PURE__ */ t(ce, { position: "end", children: /* @__PURE__ */ t(Ut, { "data-cy": "search-delete", onClick: p }) }),
       ...o
     }
   );
@@ -824,7 +836,7 @@ oe.propTypes = {
 oe.defaultProps = {
   placeholder: "Type to search..."
 };
-const jt = v(qe)`
+const jt = v(je)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -841,49 +853,49 @@ const jt = v(qe)`
       color: transparent;
     }
   }
-`, Gt = v(ft)`
+`, Gt = v(ht)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, Ut = v(gt)`
+`, Ut = v(ft)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
 function ne({ onSelect: e, wrapChildren: o }) {
-  const r = E(null), l = E(null), s = E(null), { storeApi: c, blockletRender: b, filters: g, endpoint: u, handleKeyword: y, t: d } = I(), C = async (i) => {
-    const { data: p } = await c.get(z.blockletsPath, { params: i }), S = p.dataList || [];
-    return S.length > 0 && S.unshift({ type: "more-result", total: p.total || 0 }), S;
+  const r = E(null), l = E(null), s = E(null), { storeApi: c, blockletRender: b, filters: g, endpoint: p, handleKeyword: y, t: u } = I(), C = async (i) => {
+    const { data: m } = await c.get(z.blockletsPath, { params: i }), S = m.dataList || [];
+    return S.length > 0 && S.unshift({ type: "more-result", total: m.total || 0 }), S;
   }, B = (i) => {
     y(i.state.query), i.setIsOpen(!1);
-  }, w = () => {
+  }, P = () => {
     r.current && setTimeout(() => {
       const i = r.current.querySelector("input.bl-autocomplete-input");
       i && i.focus();
     });
-  }, T = (i) => {
-    i.setIsOpen(!1), w();
-  }, P = ({ prevState: i, state: p }) => {
-    i.query !== p.query && (p.query || y());
+  }, k = (i) => {
+    i.setIsOpen(!1), P();
+  }, T = ({ prevState: i, state: m }) => {
+    i.query !== m.query && (m.query || y());
   };
-  return wt(
+  return bt(
     "ctrl + k, command + k",
-    (i) => (i.stopPropagation(), i.preventDefault(), w(), !1),
+    (i) => (i.stopPropagation(), i.preventDefault(), P(), !1),
     { enableOnTags: ["INPUT"] }
-  ), j(() => {
-    w();
-  }, [u]), j(() => {
+  ), F(() => {
+    P();
+  }, [p]), F(() => {
     if (!r.current)
       return;
-    const i = bt({
+    const i = yt({
       container: r.current,
       renderer: { createElement: Qe, Fragment: Je, render: () => {
       } },
-      render({ children: p }, S) {
-        var x;
-        (!l.current || s.current !== S) && (s.current = S, (x = l.current) == null || x.unmount(), l.current = yt(S)), l.current.render(o(p));
+      render({ children: m }, S) {
+        var w;
+        (!l.current || s.current !== S) && (s.current = S, (w = l.current) == null || w.unmount(), l.current = gt(S)), l.current.render(o(m));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -897,31 +909,31 @@ function ne({ onSelect: e, wrapChildren: o }) {
         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: g.keyword
       },
-      onStateChange(p) {
-        P(p);
+      onStateChange(m) {
+        T(m);
       },
       onSubmit: B,
-      onReset(p) {
-        T(p);
+      onReset(m) {
+        k(m);
       },
-      getSources({ query: p, state: S, ...x }) {
+      getSources({ query: m, state: S, ...w }) {
         const $ = {
           ...g,
           sortBy: z[g.sortBy],
           page: 1,
           pageSize: 10,
-          keyword: p
+          keyword: m
         };
-        return zt([
+        return $t([
           {
             sourceId: "blocklets",
             getItems() {
@@ -929,22 +941,22 @@ function ne({ onSelect: e, wrapChildren: o }) {
             },
             // 选中后填充 搜索框中值
             getItemInputValue({ item: f }) {
-              return f.type === "more-result" ? p : f.title;
+              return f.type === "more-result" ? m : f.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
             onSelect({ event: f, item: D }) {
-              return D.type === "more-result" ? (x.setIsOpen(!1), y(p)) : f.type === "keydown" ? y(D.title) : e({
+              return D.type === "more-result" ? (w.setIsOpen(!1), y(m)) : f.type === "keydown" ? y(D.title) : e({
                 blocklet: D,
-                detailUrl: xt(u, `/blocklets/${D.did}`),
-                storeUrl: u
+                detailUrl: wt(p, `/blocklets/${D.did}`),
+                storeUrl: p
               });
             },
             templates: {
               item({ item: f }) {
-                return f.type === "more-result" ? /* @__PURE__ */ t("div", { children: d("autocomplete.expandResult", { name: p, number: f.total.toLocaleString() }) }) : b({ blocklet: f, autocompleteSetters: x });
+                return f.type === "more-result" ? /* @__PURE__ */ t("div", { children: u("autocomplete.expandResult", { name: m, number: f.total.toLocaleString() }) }) : b({ blocklet: f, autocompleteSetters: w });
               },
               noResults() {
-                return d("blocklet.noResults");
+                return u("blocklet.noResults");
               }
             }
           }
@@ -982,12 +994,12 @@ function le({ t: e }) {
     o.showResources = !o.showResources, r();
   };
   return /* @__PURE__ */ t(
-    kt,
+    xt,
     {
       checked: o.showResources,
       onChange: l,
       labelProps: {
-        label: /* @__PURE__ */ t(je, { marginLeft: "8px", fontSize: "small", children: /* @__PURE__ */ t("span", { children: e("common.showResources") }) })
+        label: /* @__PURE__ */ t(Ge, { marginLeft: "8px", fontSize: "small", children: /* @__PURE__ */ t("span", { children: e("common.showResources") }) })
       }
     }
   );
@@ -997,7 +1009,7 @@ le.propTypes = {
 };
 le.defaultProps = {};
 function Kt() {
-  var G, U, L;
+  var G, U, M;
   const {
     handleDeveloper: e,
     blockletList: o,
@@ -1007,13 +1019,13 @@ function Kt() {
     handleCategory: c,
     handlePrice: b,
     handleSearchSelect: g,
-    t: u,
+    t: p,
     getCategoryLocale: y,
-    priceOptions: d,
+    priceOptions: u,
     wrapChildren: C,
     showResourcesSwitch: B,
-    baseSearch: w
-  } = I(), T = St(u), P = ((G = T.find((R) => R.value === r.sortBy)) == null ? void 0 : G.name) || u("sort.sort"), i = y(r.category), { resourceType: p } = r || {}, S = (U = d.find((R) => R.value === r.price)) == null ? void 0 : U.name, [x, $] = A(!1), f = be((R) => R.breakpoints.down("md")), D = !w || x || f || ((L = r == null ? void 0 : r.keyword) == null ? void 0 : L.length);
+    baseSearch: P
+  } = I(), k = kt(p), T = ((G = k.find((R) => R.value === r.sortBy)) == null ? void 0 : G.name) || p("sort.sort"), i = y(r.category), { resourceType: m } = r || {}, S = (U = u.find((R) => R.value === r.price)) == null ? void 0 : U.name, [w, $] = L(!1), f = be((R) => R.breakpoints.down("md")), D = !P || w || f || ((M = r == null ? void 0 : r.keyword) == null ? void 0 : M.length);
   return /* @__PURE__ */ h(N, { display: "flex", alignItems: "flex-start", height: "100%", children: [
     /* @__PURE__ */ t(pe, { mdDown: !0, children: /* @__PURE__ */ t(re, {}) }),
     /* @__PURE__ */ h(Wt, { children: [
@@ -1033,19 +1045,19 @@ function Kt() {
               onBlur: () => {
                 $(!1);
               },
-              children: w ? /* @__PURE__ */ t(oe, { className: "bl-search-container", placeholder: u("common.searchStore") }) : /* @__PURE__ */ t(ne, { onSelect: g, wrapChildren: C })
+              children: P ? /* @__PURE__ */ t(oe, { className: "bl-search-container", placeholder: p("common.searchStore") }) : /* @__PURE__ */ t(ne, { onSelect: g, wrapChildren: C })
             }
           ),
           /* @__PURE__ */ h(N, { mt: 0, ml: "16px", className: "filter-container", display: "flex", alignItems: "center", children: [
-            !f && B && /* @__PURE__ */ t(N, { ml: 1, mr: 1, children: /* @__PURE__ */ t(le, { t: u }) }),
+            !f && B && /* @__PURE__ */ t(N, { ml: 1, mr: 1, children: /* @__PURE__ */ t(le, { t: p }) }),
             /* @__PURE__ */ t(pe, { mdUp: !0, children: /* @__PURE__ */ t(ee, {}) }),
             /* @__PURE__ */ t(
               Z,
               {
                 value: r.sortBy,
-                options: T,
-                title: P,
-                icon: /* @__PURE__ */ t(Ie, {}),
+                options: k,
+                title: T,
+                icon: /* @__PURE__ */ t(De, {}),
                 onChange: (R) => {
                   s(R);
                 }
@@ -1055,17 +1067,17 @@ function Kt() {
         ] }),
         /* @__PURE__ */ h(N, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
           /* @__PURE__ */ t(
-            M,
+            A,
             {
               label: l,
-              icon: /* @__PURE__ */ t(Ge, {}),
+              icon: /* @__PURE__ */ t(Ue, {}),
               onDelete: () => {
                 e(null);
               }
             }
           ),
           /* @__PURE__ */ t(
-            M,
+            A,
             {
               label: i,
               onDelete: () => {
@@ -1074,7 +1086,7 @@ function Kt() {
             }
           ),
           /* @__PURE__ */ t(
-            M,
+            A,
             {
               label: S,
               onDelete: () => {
@@ -1082,10 +1094,10 @@ function Kt() {
               }
             }
           ),
-          p && /* @__PURE__ */ t(M, { label: `${u("common.resourceType")}: ${p}` })
+          m && /* @__PURE__ */ t(A, { label: `${p("common.resourceType")}: ${m}` })
         ] })
       ] }),
-      /* @__PURE__ */ t(Ue, { FallbackComponent: xe, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(te, { blocklets: o }) }) })
+      /* @__PURE__ */ t(Ke, { FallbackComponent: xe, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(te, { blocklets: o }) }) })
     ] })
   ] });
 }
@@ -1139,8 +1151,8 @@ const Wt = v("main")`
   z-index: 9;
   background-color: white;
 `;
-function Pe(e) {
-  const o = fe(), r = Bt(o.palette.primary.main), l = {
+function Te(e) {
+  const o = fe(), r = Rt(o.palette.primary.main), l = {
     autocomplete: ye`
       :root {
         --aa-detached-media-query: (max-width: ${o.breakpoints.values.md}px) !important;
@@ -1184,8 +1196,8 @@ function Pe(e) {
     /* @__PURE__ */ t(Kt, {})
   ] });
 }
-Pe.propTypes = Se;
-Pe.defaultProps = ve;
+Te.propTypes = Se;
+Te.defaultProps = ve;
 export {
-  Pe as default
+  Te as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.12.90",
+  "version": "0.12.91",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -43,7 +43,11 @@
     "url": "https://github.com/blocklet/blocklet-store/issues"
   },
   "peerDependencies": {
-    "@arcblock/did-connect": ">=2.2.0",
+    "@arcblock/did-connect": ">=2.9.77",
+    "@arcblock/icons": ">=2.9.77",
+    "@arcblock/nft-display": ">=2.9.77",
+    "@arcblock/ux": ">=2.9.77",
+    "@blocklet/ui-react": ">=2.9.77",
     "@mui/material": ">=5.6.4",
     "@mui/styles": ">=5.6.2",
     "react": ">=18.1.0",
@@ -53,6 +57,7 @@
     "@algolia/autocomplete-js": "^1.17.0",
     "@algolia/autocomplete-theme-classic": "^1.17.0",
     "@arcblock/ux": "^2.9.79",
+    "@blocklet/util": "0.12.91",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.15.12",
@@ -83,5 +88,5 @@
     "prettier": "^2.7.1",
     "vite": "^5.2.6"
   },
-  "gitHead": "5055b698e31c8555b6b266901f3f5863c740d6f0"
+  "gitHead": "960c4679590e2f9a2a70e2848631934f02deba8a"
 }