@blocklet/list 0.12.43 → 0.12.45

package/lib/components/list/index.js

@@ -8,16 +8,15 @@ 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 _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+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 _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
-const _excluded = ["blocklets"]; // import styled from '@emotion/styled';
+const _excluded = ["blocklets"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -44,6 +43,22 @@ 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,
@@ -56,12 +71,12 @@ function BlockletList(_ref) {
     });
   }
   if (loadings.fetchBlockletsLoading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       height: 60,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
     });
   }
   if (filters.keyword && showFilterTip && blocklets.length === 0) {
@@ -107,12 +122,11 @@ function BlockletList(_ref) {
   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,
-      lg: 4,
-      md: 6,
-      sm: 6,
-      xs: 12,
+      xs: 4,
       "data-blocklet-did": blocklet.did,
       children: blockletRender({
         blocklet,
@@ -120,15 +134,13 @@ function BlockletList(_ref) {
       })
     }, blocklet.did)), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
       item: true,
-      md: 12,
-      sm: 12,
       xs: 12,
       ref: sentryRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
         height: 60,
         display: "flex",
         justifyContent: "center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
       })
     })]
   }));
@@ -137,6 +149,6 @@ BlockletList.propTypes = {
   blocklets: _propTypes.default.array.isRequired
 };
 BlockletList.defaultProps = {};
-const StyledGrid = (0, _Theme.styled)(_Grid.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.MuiGrid-root {\n    width: 100%;\n    margin: 0 -16px;\n  }\n"])));
-const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _Theme.styled)(_Grid.default)(_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 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 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.12.43",
+  "version": "0.12.45",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -52,7 +52,7 @@
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
-    "@arcblock/ux": "^2.7.21",
+    "@arcblock/ux": "^2.7.25",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.14.9",
@@ -83,5 +83,5 @@
     "prettier": "^2.7.1",
     "vite": "^4.4.9"
   },
-  "gitHead": "dcd0f015f82cb76d2cd1b33145743b905c3c1927"
+  "gitHead": "af2dc0bea8f1efa9d104aa84c6d0cca87a55218d"
 }