@blocklet/list 0.12.76 → 0.12.77

package/lib/assets/locale.js

@@ -11,7 +11,10 @@ const en = {
     searchStore: 'Search the store',
     price: 'Price',
     category: 'Category',
-    resourceType: 'Resource Type'
+    resourceType: 'Resource Type',
+    clear: 'Clear',
+    cancel: 'Cancel',
+    search: 'Search'
   },
   sort: {
     sort: 'Sort',
@@ -47,7 +50,10 @@ const zh = {
     searchStore: '搜索商店内应用',
     price: '价格',
     category: '类别',
-    resourceType: '资源类型'
+    resourceType: '资源类型',
+    clear: '清除',
+    cancel: '取消',
+    search: '搜索'
   },
   sort: {
     sort: '排序',

package/lib/components/autocomplete/index.js

@@ -9,13 +9,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _client = require("react-dom/client");
 var _autocompleteJs = require("@algolia/autocomplete-js");
 var _reactHotkeysHook = require("react-hotkeys-hook");
+var _react2 = require("@emotion/react");
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _constant = _interopRequireDefault(require("../../libs/constant"));
 var _utils = require("../../libs/utils");
 var _filter = require("../../contexts/filter");
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
 const _excluded = ["query", "state"];
 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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -127,7 +130,15 @@ function Autocomplete(_ref) {
         label: 'bl-autocomplete-label',
         form: 'bl-autocomplete-form',
         input: 'bl-autocomplete-input',
-        clearButton: 'bl-autocomplete-clear'
+        clearButton: 'bl-autocomplete-clear',
+        detachedCancelButton: 'bl-autocomplete-detached-cancel',
+        detachedContainer: 'bl-autocomplete-detached-container'
+      },
+      translations: {
+        clearButtonTitle: t('common.clear'),
+        detachedCancelButtonText: t('common.cancel'),
+        submitButtonTitle: t('common.search'),
+        detachedSearchButtonTitle: t('common.search')
       },
       placeholder: t('common.searchStore'),
       initialState: {
@@ -216,9 +227,13 @@ function Autocomplete(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters, blockletRender]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "bl-search-container",
-    ref: containerRef
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
+      styles: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          .bl-autocomplete-detached-container {\n            .bl-autocomplete-detached-cancel {\n              white-space: nowrap;\n            }\n          }\n        "])))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "bl-search-container",
+      ref: containerRef
+    })]
   });
 }
 Autocomplete.propTypes = {

package/lib/index.es.js

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as h, Fragment as Pe } from "react/jsx-runtime";
-import { useTheme as pe } from "@mui/material/styles";
-import { css as Te, Global as Be } from "@emotion/react";
+import { jsx as t, jsxs as f, Fragment as pe } from "react/jsx-runtime";
+import { useTheme as de } from "@mui/material/styles";
+import { Global as ue, css as me } from "@emotion/react";
 import { styled as C } from "@arcblock/ux/lib/Theme";
 import $e from "@mui/icons-material/Sort";
-import { Button as Re, CircularProgress as W, MenuList as ze, useMediaQuery as Ie, SvgIcon as _e, Popper as De, Grow as Ne, Paper as Ae, ClickAwayListener as Le, MenuItem as Me, Chip as Oe, Grid as ue, Box as D, OutlinedInput as Fe, InputAdornment as le, Hidden as ae } from "@mui/material";
+import { Button as Re, CircularProgress as W, MenuList as ze, useMediaQuery as Ie, SvgIcon as _e, Popper as De, Grow as Ne, Paper as Ae, ClickAwayListener as Le, MenuItem as Me, Chip as Oe, Grid as he, Box as D, OutlinedInput as Fe, InputAdornment as le, Hidden as ae } from "@mui/material";
 import Ee from "@mui/icons-material/Face";
 import { ErrorBoundary as qe } from "react-error-boundary";
-import { ErrorFallback as de } from "@arcblock/ux/lib/ErrorBoundary";
+import { ErrorFallback as fe } from "@arcblock/ux/lib/ErrorBoundary";
 import { createContext as je, useMemo as L, useState as F, useCallback as H, useEffect as E, useContext as Ge, forwardRef as Ue, useRef as M, memo as Ke, createElement as We, Fragment as He } from "react";
 import o from "prop-types";
 import { useReactive as Ve, useInfiniteScroll as Qe, useRequest as Je, useSize as Xe, useCreation as Ye, useDebounceFn as Ze } from "ahooks";
@@ -23,12 +23,12 @@ import it from "@arcblock/ux/lib/Dialog";
 import st from "@mui/material/Button";
 import ct from "@arcblock/ux/lib/Empty";
 import pt from "react-infinite-scroll-hook";
-import ut from "@mui/material/Box";
-import me from "@mui/material/Typography";
-import dt from "@mui/icons-material/Search";
+import dt from "@mui/material/Box";
+import ge from "@mui/material/Typography";
+import ut from "@mui/icons-material/Search";
 import mt from "@mui/icons-material/Close";
-import { createRoot as ft } from "react-dom/client";
-import { autocomplete as ht } from "@algolia/autocomplete-js";
+import { createRoot as ht } from "react-dom/client";
+import { autocomplete as ft } from "@algolia/autocomplete-js";
 import { useHotkeys as gt } from "react-hotkeys-hook";
 import yt from "url-join";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
@@ -55,7 +55,7 @@ const bt = (e) => [
 ], kt = (e = [], n = "en") => e.map((r) => ({ name: r.locales[n] || `Category.${n}`, value: r._id })), wt = (e, n) => (
   // eslint-disable-next-line no-prototype-builtins
   e.replace(/{(\w*)}/g, (r, l) => n.hasOwnProperty(l) ? n[l] : "")
-), vt = () => window.innerWidth <= 600, St = (e, n) => {
+), St = () => window.innerWidth <= 600, vt = (e, n) => {
   const r = (e + n) / n;
   return r > 1 ? r.toFixed() : 1;
 }, Ct = (e) => ot(e).rgb().object();
@@ -72,7 +72,10 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
     searchStore: "Search the store",
     price: "Price",
     category: "Category",
-    resourceType: "Resource Type"
+    resourceType: "Resource Type",
+    clear: "Clear",
+    cancel: "Cancel",
+    search: "Search"
   },
   sort: {
     sort: "Sort",
@@ -107,7 +110,10 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
     searchStore: "搜索商店内应用",
     price: "价格",
     category: "类别",
-    resourceType: "资源类型"
+    resourceType: "资源类型",
+    clear: "清除",
+    cancel: "取消",
+    search: "搜索"
   },
   sort: {
     sort: "排序",
@@ -140,7 +146,7 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
 }, K = {
   en: ie(Bt),
   zh: ie($t)
-}, fe = {
+}, ye = {
   filters: o.shape({
     keyword: o.string,
     sortBy: o.string,
@@ -160,7 +166,7 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   baseSearch: o.bool,
   // sometimes blocklet list can be rendered only before the category is fetched
   fetchCategoryDelay: o.number
-}, he = {
+}, be = {
   locale: "zh",
   filters: {},
   onFilterChange: () => {
@@ -183,7 +189,7 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   blockletsPath: "/api/v2/blocklets.json",
   categoriesPath: "/api/blocklets/categories",
   cacheSize: 100
-}, ge = je({}), { Provider: Rt, Consumer: Cr } = ge;
+}, xe = je({}), { Provider: Rt, Consumer: Cr } = xe;
 function V({
   filters: e,
   children: n,
@@ -193,40 +199,40 @@ function V({
   onFilterChange: c,
   onSearchSelect: k,
   extraFilter: g,
-  wrapChildren: p,
+  wrapChildren: d,
   baseSearch: y,
-  serverVersion: f,
+  serverVersion: p,
   storeVersion: P,
   fetchCategoryDelay: B
 }) {
   const b = {};
-  f && (b["x-blocklet-server-version"] = f), P && (b["x-blocklet-store-version"] = P);
+  p && (b["x-blocklet-server-version"] = p), P && (b["x-blocklet-store-version"] = P);
   const $ = L(() => tt.create({
     baseURL: r,
     headers: b
-  }), [r]), d = L(() => ({ sortBy: "popularity", sortDirection: "desc", ...e }), [e]), u = d.category, s = Ve({
+  }), [r]), m = L(() => ({ sortBy: "popularity", sortDirection: "desc", ...e }), [e]), u = m.category, s = Ve({
     currentPage: R.currentPage,
-    pageSize: vt() ? R.mobilePageSize : R.pageSize,
+    pageSize: St() ? R.mobilePageSize : R.pageSize,
     defaultCurrentPage: R.defaultCurrentPage
-  }), [S, x] = F(null), {
+  }), [v, x] = F(null), {
     data: T = { list: [], total: 0 },
     loading: w,
     loadMore: _,
-    loadingMore: be
+    loadingMore: we
   } = Qe(
     async (a) => {
       var z;
-      const m = {
-        ...d,
-        sortBy: R[d.sortBy],
-        page: St(((z = a == null ? void 0 : a.list) == null ? void 0 : z.length) || 0, s.pageSize),
+      const h = {
+        ...m,
+        sortBy: R[m.sortBy],
+        page: vt(((z = a == null ? void 0 : a.list) == null ? void 0 : z.length) || 0, s.pageSize),
         pageSize: s.pageSize
       };
       x(null);
-      const { data: v = {} } = await $.get(R.blockletsPath, {
-        params: m
+      const { data: S = {} } = await $.get(R.blockletsPath, {
+        params: h
       });
-      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,
@@ -237,73 +243,73 @@ function V({
     }
   ), {
     data: G = [],
-    error: xe,
-    loading: ke,
-    run: we
+    error: Se,
+    loading: ve,
+    run: Ce
   } = Je(
     async () => {
       const { data: a } = await $.get(R.categoriesPath);
       return Array.isArray(a) ? a : [];
     },
     { manual: !0 }
-  ), U = L(() => et(G || [], [(m) => m.name], ["asc"]), [G]), re = H(
-    (a, m) => {
-      const v = K[l] ? K[l][a] : K.en[a];
-      return wt(v, m);
+  ), U = L(() => et(G || [], [(h) => h.name], ["asc"]), [G]), re = H(
+    (a, h) => {
+      const S = K[l] ? K[l][a] : K.en[a];
+      return wt(S, h);
     },
     [l]
   ), oe = L(() => {
     let a = T.list || [];
     return a = g(a), a;
-  }, [T, g]), ve = L(() => kt(U, l), [U, l]), Se = xt(re), Ce = {
-    errors: { fetchBlockletsError: S, fetchCategoriesError: xe },
-    loadings: { fetchBlockletsLoading: w, fetchCategoriesLoading: ke, loadingMore: be },
+  }, [T, g]), Pe = L(() => kt(U, l), [U, l]), Te = xt(re), Be = {
+    errors: { fetchBlockletsError: v, fetchCategoriesError: Se },
+    loadings: { fetchBlockletsLoading: w, fetchCategoriesLoading: ve, loadingMore: we },
     endpoint: r,
     blockletList: oe,
-    wrapChildren: p,
+    wrapChildren: d,
     t: re,
-    filters: d,
+    filters: m,
     selectedCategory: u,
     categoryList: U,
     blockletRender: i,
     locale: l,
-    categoryOptions: ve,
-    priceOptions: Se,
+    categoryOptions: Pe,
+    priceOptions: Te,
     storeApi: $,
     baseSearch: y,
     hasNextPage: T.list.length < T.total,
     handleSort: (a) => {
-      const m = {
-        ...d,
+      const h = {
+        ...m,
         sortBy: a,
         sortDirection: a === "nameAsc" ? "asc" : "desc"
       };
-      c(m);
+      c(h);
     },
     handleKeyword: (a) => {
-      const m = { ...d, keyword: a || void 0 };
-      c(m);
+      const h = { ...m, keyword: a || void 0 };
+      c(h);
     },
     handlePrice: (a) => {
-      const m = {
-        ...d,
-        price: a === d.price ? void 0 : a
+      const h = {
+        ...m,
+        price: a === m.price ? void 0 : a
       };
-      c(m);
+      c(h);
     },
     handleCategory: (a) => {
-      let m = a;
-      (a === "all" || a === d.category) && (m = void 0);
-      const v = { ...d, category: m };
-      c(v);
+      let h = a;
+      (a === "all" || a === m.category) && (h = void 0);
+      const S = { ...m, category: h };
+      c(S);
     },
     handleDeveloper: (a) => {
-      const m = { ...d, owner: a || void 0 };
-      c(m);
+      const h = { ...m, owner: a || void 0 };
+      c(h);
     },
     handlePage: (a) => {
-      const m = { ...d, currentPage: a };
-      c(m);
+      const h = { ...m, currentPage: a };
+      c(h);
     },
     loadMore: () => {
       _();
@@ -311,32 +317,32 @@ function V({
     getCategoryLocale: (a) => {
       if (!a)
         return null;
-      let m = null;
-      const v = G.find((z) => z._id === a);
-      return v && (m = v.locales[l]), m;
+      let h = null;
+      const S = G.find((z) => z._id === a);
+      return S && (h = S.locales[l]), h;
     },
     get developerName() {
-      var m, v;
-      return ((v = (m = oe.find((z) => {
+      var h, S;
+      return ((S = (h = oe.find((z) => {
         var ne;
-        return ((ne = z == null ? void 0 : z.owner) == null ? void 0 : ne.did) === d.owner;
-      })) == null ? void 0 : m.owner) == null ? void 0 : v.name) || "";
+        return ((ne = z == null ? void 0 : z.owner) == null ? void 0 : ne.did) === m.owner;
+      })) == null ? void 0 : h.owner) == null ? void 0 : S.name) || "";
     },
     handleSearchSelect: k
   };
   return E(() => {
     setTimeout(() => {
-      we();
+      Ce();
     }, B || 0);
-  }, [r]), /* @__PURE__ */ t(Rt, { value: Ce, children: n });
+  }, [r]), /* @__PURE__ */ t(Rt, { value: Be, children: n });
 }
 V.propTypes = {
-  ...fe,
+  ...ye,
   children: o.any.isRequired
 };
-V.defaultProps = he;
+V.defaultProps = be;
 function I() {
-  const e = Ge(ge);
+  const e = Ge(xe);
   return e || {};
 }
 const zt = C(Re)`
@@ -365,26 +371,26 @@ Q.defaultProps = {
   disabled: !1
 };
 function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, itemRender: k, ...g }) {
-  const p = M(null), y = pe(), [f, P] = F(!1), [B, b] = F(n !== null ? n : ""), $ = Ie(y.breakpoints.down("sm"));
+  const d = M(null), y = de(), [p, P] = F(!1), [B, b] = F(n !== null ? n : ""), $ = Ie(y.breakpoints.down("sm"));
   E(() => {
     b(n !== null ? n : "");
   }, [n]);
-  const d = H(() => {
+  const m = H(() => {
     P(!1);
   }, []), u = H(() => {
     P(!0);
   }, []);
   function s(x) {
-    b(x.value), c(x.value), $ && d();
+    b(x.value), c(x.value), $ && m();
   }
-  function S(x) {
+  function v(x) {
     return x === B;
   }
-  return /* @__PURE__ */ h(Pe, { children: [
-    /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(pe, { children: [
+    /* @__PURE__ */ f(
       It,
       {
-        ref: p,
+        ref: d,
         onClick: u,
         variant: "outlined",
         size: "small",
@@ -397,12 +403,12 @@ function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, i
         ]
       }
     ),
-    /* @__PURE__ */ t(De, { open: f, anchorEl: p.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: T }) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(De, { open: p, anchorEl: d.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: T }) => /* @__PURE__ */ t(
       Ne,
       {
         ...x,
         style: { transformOrigin: T === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Le, { onClickAway: d, children: /* @__PURE__ */ h(_t, { autoFocusItem: f, onMouseEnter: u, onMouseLeave: d, children: [
+        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Le, { onClickAway: m, children: /* @__PURE__ */ f(_t, { autoFocusItem: p, onMouseEnter: u, onMouseLeave: m, children: [
           l,
           i.map((w) => k ? k(w) : /* @__PURE__ */ t(
             Me,
@@ -410,7 +416,7 @@ function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, i
               onClick: () => s(w),
               className: [
                 "my-select__option",
-                S(w.value) ? "my-select__option--active" : ""
+                v(w.value) ? "my-select__option--active" : ""
               ].join(" "),
               children: w.name
             },
@@ -488,7 +494,7 @@ const It = C(Q)`
   }
 `;
 function A({ options: e, onChange: n, title: r, value: l }) {
-  return /* @__PURE__ */ h(Dt, { children: [
+  return /* @__PURE__ */ f(Dt, { children: [
     /* @__PURE__ */ t("div", { className: "title", children: r }),
     /* @__PURE__ */ t("div", { className: "list", children: e.map((i) => /* @__PURE__ */ t(
       "div",
@@ -541,20 +547,20 @@ A.defaultProps = {
   value: null
 };
 function X() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I(), [g, p] = F(!1), y = (f, P) => {
-    f === "category" && n(P), f === "price" && l(P), p(!1);
+  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I(), [g, d] = F(!1), y = (p, P) => {
+    p === "category" && n(P), p === "price" && l(P), d(!1);
   };
-  return /* @__PURE__ */ h(Nt, { children: [
-    /* @__PURE__ */ t(st, { variant: "outlined", className: "filter-button", onClick: () => p(!0), children: /* @__PURE__ */ t(at, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ h(it, { fullWidth: !0, title: "", open: g, onClose: () => p(!1), children: [
+  return /* @__PURE__ */ f(Nt, { children: [
+    /* @__PURE__ */ t(st, { variant: "outlined", className: "filter-button", onClick: () => d(!0), children: /* @__PURE__ */ t(at, { className: "filter-icon", fontSize: "small" }) }),
+    /* @__PURE__ */ f(it, { fullWidth: !0, title: "", open: g, onClose: () => d(!1), children: [
       /* @__PURE__ */ t(
         A,
         {
           title: r("common.price"),
           options: k,
           value: i.price,
-          onChange: (f) => {
-            y("price", f);
+          onChange: (p) => {
+            y("price", p);
           }
         }
       ),
@@ -564,8 +570,8 @@ function X() {
           title: r("common.category"),
           options: c,
           value: e,
-          onChange: (f) => {
-            y("category", f);
+          onChange: (p) => {
+            y("category", p);
           }
         }
       ) })
@@ -610,11 +616,11 @@ N.defaultProps = {
 };
 function se() {
   const { t: e } = I();
-  return /* @__PURE__ */ t(me, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+  return /* @__PURE__ */ t(ge, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
 function O({ filterTip: e, keywordTip: n }) {
   const { t: r, locale: l } = I(), i = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(ut, { className: "tips", children: [
+  return /* @__PURE__ */ f(dt, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
     e && n && i(),
@@ -630,14 +636,14 @@ O.defaultProps = {
   keywordTip: !1
 };
 function j({ primaryStart: e, primaryEnd: n, filter: r }) {
-  return /* @__PURE__ */ h(me, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ f(ge, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ h("span", { className: "primary", children: [
+    /* @__PURE__ */ f("span", { className: "primary", children: [
       " ",
       r,
       " "
     ] }),
-    /* @__PURE__ */ h("span", { children: [
+    /* @__PURE__ */ f("span", { children: [
       n,
       " "
     ] })
@@ -656,63 +662,63 @@ function Y({ blocklets: e, ...n }) {
     selectedCategory: c,
     getCategoryLocale: k,
     filters: g,
-    t: p,
+    t: d,
     hasNextPage: y,
-    loadMore: f,
+    loadMore: p,
     endpoint: P
-  } = I(), B = M(null), b = Xe(B.current), $ = Ye(() => b ? b.width > 900 ? 12 : b.width > 600 ? 8 : 4 : 0, [b]), d = !!c || !!g.price, [u] = pt({
+  } = I(), B = M(null), b = Xe(B.current), $ = Ye(() => b ? b.width > 900 ? 12 : b.width > 600 ? 8 : 4 : 0, [b]), m = !!c || !!g.price, [u] = pt({
     loading: i.fetchBlockletsLoading || i.loadingMore,
     hasNextPage: y,
-    onLoadMore: f
+    onLoadMore: p
   });
   if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
-      de,
+      fe,
       {
         error: new Error(`Failed to fetch blocklets from ${P}: ${l.fetchBlockletsError.message}`)
       }
     );
   if (i.fetchBlockletsLoading)
     return /* @__PURE__ */ t(D, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) });
-  if (g.keyword && d && e.length === 0)
-    return /* @__PURE__ */ h(q, { children: [
+  if (g.keyword && m && e.length === 0)
+    return /* @__PURE__ */ f(q, { children: [
       /* @__PURE__ */ t(
         j,
         {
-          primaryStart: p("blocklet.noBlockletPart1"),
-          primaryEnd: p("blocklet.noBlockletPart2"),
+          primaryStart: d("blocklet.noBlockletPart1"),
+          primaryEnd: d("blocklet.noBlockletPart2"),
           filter: g.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
     ] });
   if (g.keyword && e.length === 0)
-    return /* @__PURE__ */ h(q, { children: [
+    return /* @__PURE__ */ f(q, { children: [
       /* @__PURE__ */ t(
         j,
         {
-          primaryStart: p("blocklet.noBlockletPart1"),
-          primaryEnd: p("blocklet.noBlockletPart2"),
+          primaryStart: d("blocklet.noBlockletPart1"),
+          primaryEnd: d("blocklet.noBlockletPart2"),
           filter: g.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0 })
     ] });
-  if (d && e.length === 0) {
+  if (m && e.length === 0) {
     const s = k(c);
-    return /* @__PURE__ */ h(q, { children: [
+    return /* @__PURE__ */ f(q, { children: [
       s ? /* @__PURE__ */ t(
         j,
         {
-          primaryStart: p("blocklet.noCategoryResults1"),
-          primaryEnd: p("blocklet.noCategoryResults2"),
+          primaryStart: d("blocklet.noCategoryResults1"),
+          primaryEnd: d("blocklet.noCategoryResults2"),
           filter: s
         }
       ) : /* @__PURE__ */ t(se, {}),
       /* @__PURE__ */ t(O, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ h(Lt, { container: !0, ...n, columns: $, ref: B, children: [
+  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ f(Lt, { container: !0, ...n, columns: $, 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)),
     y && /* @__PURE__ */ t(ce, { item: !0, xs: 12, ref: u, children: /* @__PURE__ */ t(D, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) }) })
   ] });
@@ -721,13 +727,13 @@ Y.propTypes = {
   blocklets: o.array.isRequired
 };
 Y.defaultProps = {};
-const Lt = C(ue)`
+const Lt = C(he)`
   opacity: ${(e) => e.columns > 0 ? 1 : 0};
   &.MuiGrid-root {
     width: 100%;
     margin: 0 -16px;
   }
-`, ce = Ke(C(ue)`
+`, ce = Ke(C(he)`
   @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -749,7 +755,7 @@ const Lt = C(ue)`
 `;
 function Z() {
   const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I();
-  return /* @__PURE__ */ h(Mt, { children: [
+  return /* @__PURE__ */ f(Mt, { children: [
     /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(A, { title: r("common.price"), options: k, value: i.price, onChange: l }) }),
     c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
       A,
@@ -775,9 +781,9 @@ Z.propTypes = {};
 Z.defaultProps = {};
 function ee({ placeholder: e, ...n }) {
   const { filters: r, handleKeyword: l } = I(), [i, c] = F(r.keyword || ""), k = Ze(l, { wait: 300 }), g = (y) => {
-    const { value: f } = y.target;
-    c(f), k.run(f);
-  }, p = () => {
+    const { value: p } = y.target;
+    c(p), k.run(p);
+  }, d = () => {
     c(""), l();
   };
   return E(() => {
@@ -794,7 +800,7 @@ function ee({ placeholder: e, ...n }) {
       value: i,
       title: e,
       "data-cy": "search",
-      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(Et, { "data-cy": "search-delete", onClick: p }) }),
+      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(Et, { "data-cy": "search-delete", onClick: d }) }),
       ...n
     }
   );
@@ -821,7 +827,7 @@ const Ot = C(Fe)`
       color: transparent;
     }
   }
-`, Ft = C(dt)`
+`, Ft = C(ut)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
@@ -833,9 +839,9 @@ const Ot = C(Fe)`
   cursor: pointer;
 `;
 function te({ onSelect: e, wrapChildren: n }) {
-  const r = M(null), l = M(null), i = M(null), { storeApi: c, blockletRender: k, filters: g, endpoint: p, handleKeyword: y, t: f } = I(), P = async (u) => {
-    const { data: s } = await c.get(R.blockletsPath, { params: u }), S = s.dataList || [];
-    return S.length > 0 && S.unshift({ type: "more-result", total: s.total || 0 }), S;
+  const r = M(null), l = M(null), i = M(null), { storeApi: c, blockletRender: k, filters: g, endpoint: d, handleKeyword: y, t: p } = I(), P = async (u) => {
+    const { data: s } = await c.get(R.blockletsPath, { params: u }), v = s.dataList || [];
+    return v.length > 0 && v.unshift({ type: "more-result", total: s.total || 0 }), v;
   }, B = (u) => {
     y(u.state.query), u.setIsOpen(!1);
   }, b = () => {
@@ -845,7 +851,7 @@ function te({ onSelect: e, wrapChildren: n }) {
     });
   }, $ = (u) => {
     u.setIsOpen(!1), b();
-  }, d = ({ prevState: u, state: s }) => {
+  }, m = ({ prevState: u, state: s }) => {
     u.query !== s.query && (s.query || y());
   };
   return gt(
@@ -854,16 +860,16 @@ function te({ onSelect: e, wrapChildren: n }) {
     { enableOnTags: ["INPUT"] }
   ), E(() => {
     b();
-  }, [p]), E(() => {
+  }, [d]), E(() => {
     if (!r.current)
       return;
-    const u = ht({
+    const u = ft({
       container: r.current,
       renderer: { createElement: We, Fragment: He, render: () => {
       } },
-      render({ children: s }, S) {
+      render({ children: s }, v) {
         var x;
-        (!l.current || i.current !== S) && (i.current = S, (x = l.current) == null || x.unmount(), l.current = ft(S)), l.current.render(n(s));
+        (!l.current || i.current !== v) && (i.current = v, (x = l.current) == null || x.unmount(), l.current = ht(v)), l.current.render(n(s));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -872,20 +878,28 @@ function te({ onSelect: e, wrapChildren: n }) {
         label: "bl-autocomplete-label",
         form: "bl-autocomplete-form",
         input: "bl-autocomplete-input",
-        clearButton: "bl-autocomplete-clear"
+        clearButton: "bl-autocomplete-clear",
+        detachedCancelButton: "bl-autocomplete-detached-cancel",
+        detachedContainer: "bl-autocomplete-detached-container"
       },
-      placeholder: f("common.searchStore"),
+      translations: {
+        clearButtonTitle: p("common.clear"),
+        detachedCancelButtonText: p("common.cancel"),
+        submitButtonTitle: p("common.search"),
+        detachedSearchButtonTitle: p("common.search")
+      },
+      placeholder: p("common.searchStore"),
       initialState: {
         query: g.keyword
       },
       onStateChange(s) {
-        d(s);
+        m(s);
       },
       onSubmit: B,
       onReset(s) {
         $(s);
       },
-      getSources({ query: s, state: S, ...x }) {
+      getSources({ query: s, state: v, ...x }) {
         const T = {
           ...g,
           sortBy: R[g.sortBy],
@@ -907,16 +921,16 @@ function te({ onSelect: e, wrapChildren: n }) {
             onSelect({ event: w, item: _ }) {
               return _.type === "more-result" ? (x.setIsOpen(!1), y(s)) : w.type === "keydown" ? y(_.title) : e({
                 blocklet: _,
-                detailUrl: yt(p, `/blocklets/${_.did}`),
-                storeUrl: p
+                detailUrl: yt(d, `/blocklets/${_.did}`),
+                storeUrl: d
               });
             },
             templates: {
               item({ item: w }) {
-                return w.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: s, number: w.total.toLocaleString() }) }) : k({ blocklet: w, autocompleteSetters: x });
+                return w.type === "more-result" ? /* @__PURE__ */ t("div", { children: p("autocomplete.expandResult", { name: s, number: w.total.toLocaleString() }) }) : k({ blocklet: w, autocompleteSetters: x });
               },
               noResults() {
-                return f("blocklet.noResults");
+                return p("blocklet.noResults");
               }
             }
           }
@@ -926,7 +940,21 @@ function te({ onSelect: e, wrapChildren: n }) {
     return () => {
       u.destroy();
     };
-  }, [g, k]), /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r });
+  }, [g, k]), /* @__PURE__ */ f(pe, { children: [
+    /* @__PURE__ */ t(
+      ue,
+      {
+        styles: me`
+          .bl-autocomplete-detached-container {
+            .bl-autocomplete-detached-cancel {
+              white-space: nowrap;
+            }
+          }
+        `
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r })
+  ] });
 }
 te.propTypes = {
   onSelect: o.func.isRequired,
@@ -936,7 +964,7 @@ te.defaultProps = {
   wrapChildren: (e) => e
 };
 function qt() {
-  var S, x;
+  var v, x;
   const {
     handleDeveloper: e,
     blockletList: n,
@@ -946,19 +974,19 @@ function qt() {
     handleCategory: c,
     handlePrice: k,
     handleSearchSelect: g,
-    t: p,
+    t: d,
     getCategoryLocale: y,
-    priceOptions: f,
+    priceOptions: p,
     wrapChildren: P,
     baseSearch: B
-  } = I(), b = bt(p), $ = ((S = b.find((T) => T.value === r.sortBy)) == null ? void 0 : S.name) || p("sort.sort"), d = y(r.category), { resourceType: u } = r || {}, s = (x = f.find((T) => T.value === r.price)) == null ? void 0 : x.name;
-  return /* @__PURE__ */ h(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
+  } = I(), b = bt(d), $ = ((v = b.find((T) => T.value === r.sortBy)) == null ? void 0 : v.name) || d("sort.sort"), m = y(r.category), { resourceType: u } = r || {}, s = (x = p.find((T) => T.value === r.price)) == null ? void 0 : x.name;
+  return /* @__PURE__ */ f(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
     /* @__PURE__ */ t(ae, { mdDown: !0, children: /* @__PURE__ */ t(Z, {}) }),
-    /* @__PURE__ */ h(jt, { children: [
-      /* @__PURE__ */ h(Gt, { children: [
-        /* @__PURE__ */ h(D, { className: "filter-bar", display: "flex", alignItems: "center", children: [
-          B ? /* @__PURE__ */ t(ee, { className: "bl-search-container", placeholder: p("common.searchStore") }) : /* @__PURE__ */ t(te, { onSelect: g, wrapChildren: P }),
-          /* @__PURE__ */ h(D, { mt: 0, ml: "16px", className: "filter-container", children: [
+    /* @__PURE__ */ f(jt, { children: [
+      /* @__PURE__ */ f(Gt, { children: [
+        /* @__PURE__ */ f(D, { 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__ */ f(D, { mt: 0, ml: "16px", className: "filter-container", children: [
             /* @__PURE__ */ t(ae, { mdUp: !0, children: /* @__PURE__ */ t(X, {}) }),
             /* @__PURE__ */ t(
               J,
@@ -974,7 +1002,7 @@ function qt() {
             )
           ] })
         ] }),
-        /* @__PURE__ */ h(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
+        /* @__PURE__ */ f(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
           /* @__PURE__ */ t(
             N,
             {
@@ -988,7 +1016,7 @@ function qt() {
           /* @__PURE__ */ t(
             N,
             {
-              label: d,
+              label: m,
               onDelete: () => {
                 c(null);
               }
@@ -1003,10 +1031,10 @@ function qt() {
               }
             }
           ),
-          u && /* @__PURE__ */ t(N, { label: `${p("common.resourceType")}: ${u}` })
+          u && /* @__PURE__ */ t(N, { label: `${d("common.resourceType")}: ${u}` })
         ] })
       ] }),
-      /* @__PURE__ */ t(qe, { FallbackComponent: de, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(Y, { blocklets: n }) }) })
+      /* @__PURE__ */ t(qe, { FallbackComponent: fe, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(Y, { blocklets: n }) }) })
     ] })
   ] });
 }
@@ -1060,9 +1088,9 @@ const jt = C("main")`
   z-index: 9;
   background-color: white;
 `;
-function ye(e) {
-  const n = pe(), r = Ct(n.palette.primary.main), l = {
-    autocomplete: Te`
+function ke(e) {
+  const n = de(), r = Ct(n.palette.primary.main), l = {
+    autocomplete: me`
       :root {
         --aa-detached-media-query: (max-width: ${n.breakpoints.values.md}px) !important;
         --aa-detached-modal-media-query: (min-width: ${n.breakpoints.values.md}px) !important;
@@ -1100,13 +1128,13 @@ function ye(e) {
       }
     `
   };
-  return /* @__PURE__ */ h(V, { ...e, children: [
-    /* @__PURE__ */ t(Be, { styles: l.autocomplete }),
+  return /* @__PURE__ */ f(V, { ...e, children: [
+    /* @__PURE__ */ t(ue, { styles: l.autocomplete }),
     /* @__PURE__ */ t(qt, {})
   ] });
 }
-ye.propTypes = fe;
-ye.defaultProps = he;
+ke.propTypes = ye;
+ke.defaultProps = be;
 export {
-  ye as default
+  ke as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.12.76",
+  "version": "0.12.77",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -50,9 +50,9 @@
     "react-dom": ">=18.2.0"
   },
   "dependencies": {
-    "@algolia/autocomplete-js": "^1.7.1",
-    "@algolia/autocomplete-theme-classic": "^1.7.1",
-    "@arcblock/ux": "^2.9.41",
+    "@algolia/autocomplete-js": "^1.17.0",
+    "@algolia/autocomplete-theme-classic": "^1.17.0",
+    "@arcblock/ux": "^2.9.56",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.15.12",
@@ -83,5 +83,5 @@
     "prettier": "^2.7.1",
     "vite": "^5.0.12"
   },
-  "gitHead": "4736782a5cc1347c3854567873334948dd0441d6"
+  "gitHead": "5f781cbe2f464c95382e370ed3713bb9531f4068"
 }