@arcblock/ux 3.1.50 → 3.1.51

package/lib/Datatable/CustomToolbar.js

@@ -1,10 +1,10 @@
-import { jsx as t, jsxs as r, Fragment as S } from "react/jsx-runtime";
+import { jsx as t, jsxs as l, Fragment as S } from "react/jsx-runtime";
 import { useState as T, useRef as V, isValidElement as v } from "react";
-import i from "prop-types";
+import n from "prop-types";
 import { TableFilter as ue, TableViewCol as pe } from "mui-datatables";
-import he, { PrintContextConsumer as me } from "react-to-print";
-import { MoreVert as fe, CloudDownload as be, ViewColumn as Ce, FilterList as ge, Print as $ } from "@mui/icons-material";
-import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as we, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
+import me, { PrintContextConsumer as fe } from "react-to-print";
+import { MoreVert as he, CloudDownload as be, ViewColumn as Ce, FilterList as we, Print as $ } from "@mui/icons-material";
+import { Popover as xe, Tooltip as D, IconButton as R, ListItemIcon as L, ListItemText as j, MenuItem as U, Menu as ge, LinearProgress as ye, useTheme as Te, useMediaQuery as ve } from "@mui/material";
 import { useDeepCompareEffect as Re } from "ahooks";
 import { handleCSVDownload as ke } from "./utils.js";
 import Fe from "./TableSearch.js";
@@ -15,7 +15,7 @@ function Ie() {
   return ve(s.breakpoints.down("sm"));
 }
 function Be({ ...s }) {
-  const [f, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: g } = Pe(), {
+  const [h, d] = T(null), k = V(null), F = Ie(), N = V(Math.random().toString(32).slice(2)), [O, A] = T(!1), { customPreButtons: b, customButtons: C, loading: u, disabled: w } = Pe(), {
     data: Q = [],
     options: o,
     components: p = {},
@@ -31,20 +31,20 @@ function Be({ ...s }) {
     searchText: Z = null,
     searchTextUpdate: _,
     searchClose: ee
-  } = s, [B, h] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ie, print: m, viewColumns: ne, filterTable: le } = o.textLabels.toolbar, re = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
+  } = s, [B, m] = T({}), te = o.customToolbar ? o.customToolbar(s) : "", { search: oe, downloadCsv: ne, print: f, viewColumns: ie, filterTable: re } = o.textLabels.toolbar, le = o.search === !1 || o.search === "false", x = o.print === !1 || o.print === "false", se = p.TableFilter || ue, ae = p.TableViewCol || pe;
   Re(() => {
-    (u || g) && h({});
-  }, [u, g]);
-  const q = (e) => /* @__PURE__ */ t(he, { content: () => s.tableRef(), children: /* @__PURE__ */ t(me, { children: e }) }), w = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
+    (u || w) && m({});
+  }, [u, w]);
+  const q = (e) => /* @__PURE__ */ t(me, { content: () => s.tableRef(), children: /* @__PURE__ */ t(fe, { children: e }) }), g = (e) => `toolbar-pop-${N.current}-${e}`, a = [];
   o.download === !1 || o.download === "false" || a.push({
     icon: /* @__PURE__ */ t(be, {}),
-    title: ie,
+    title: ne,
     onClick: () => {
       ke(s);
     }
   }), o.viewColumns === !1 || o.viewColumns === "false" || a.push({
     icon: /* @__PURE__ */ t(Ce, {}),
-    title: ne,
+    title: ie,
     // eslint-disable-next-line react/no-unstable-nested-components
     popRender() {
       return /* @__PURE__ */ t(
@@ -60,8 +60,8 @@ function Be({ ...s }) {
       );
     }
   }), o.filter === !1 || o.filter === "false" || a.push({
-    icon: /* @__PURE__ */ t(ge, {}),
-    title: le,
+    icon: /* @__PURE__ */ t(we, {}),
+    title: re,
     // eslint-disable-next-line react/no-unstable-nested-components
     popRender() {
       return /* @__PURE__ */ t(
@@ -83,50 +83,50 @@ function Be({ ...s }) {
   const E = [...b, !x, ...a, ...C].filter((e) => !!e).length > 1 && F, M = [], ce = [...b, ...a, ...C].map((e, c) => {
     if (v(e))
       return e;
-    const n = w(c);
+    const i = g(c);
     if (e.icon) {
-      const { popRender: l, icon: y } = e;
-      return l && M.push(
+      const { popRender: r, icon: y } = e;
+      return r && M.push(
         /* @__PURE__ */ t(
           xe,
           {
-            open: !!B[n],
-            anchorEl: () => B[n],
+            open: !!B[i],
+            anchorEl: () => B[i],
             onClose: () => {
-              h({});
+              m({});
             },
             anchorOrigin: {
               vertical: "bottom",
               horizontal: "right"
             },
-            children: /* @__PURE__ */ t("div", { children: l() })
+            children: /* @__PURE__ */ t("div", { children: r() })
           },
-          n
+          i
         )
       ), /* @__PURE__ */ t(D, { title: e.title, children: /* @__PURE__ */ t(
         R,
         {
           "data-testid": `${e.title}-iconButton`,
-          id: `btn-${n}`,
+          id: `btn-${i}`,
           "aria-label": e.title,
           onClick: () => {
-            e.onClick && e.onClick(), l && h({
-              [n]: document.getElementById(`btn-${n}`)
+            e.onClick && e.onClick(), r && m({
+              [i]: document.getElementById(`btn-${i}`)
             });
           },
           children: /* @__PURE__ */ t("div", { className: "custom-toolbar-icon", children: y })
         }
-      ) }, n);
+      ) }, i);
     }
     return e;
   }), de = [...b, ...a, ...C].map((e, c) => {
-    const n = w(c);
-    let l;
+    const i = g(c);
+    let r;
     if (v(e))
-      l = e;
+      r = e;
     else if (e.icon) {
       const { icon: y } = e;
-      l = /* @__PURE__ */ r(S, { children: [
+      r = /* @__PURE__ */ l(S, { children: [
         /* @__PURE__ */ t(L, { children: y }),
         /* @__PURE__ */ t(j, { children: e.title })
       ] });
@@ -135,17 +135,17 @@ function Be({ ...s }) {
       U,
       {
         onClick: () => {
-          d(null), e.onClick && e.onClick(), e.popRender && h({
-            [n]: k.current
+          d(null), e.onClick && e.onClick(), e.popRender && m({
+            [i]: k.current
           });
         },
-        children: l
+        children: r
       },
-      n
+      i
     );
   });
-  return /* @__PURE__ */ r("div", { children: [
-    /* @__PURE__ */ r(qe, { children: [
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ l(qe, { children: [
       /* @__PURE__ */ t(
         "div",
         {
@@ -153,8 +153,8 @@ function Be({ ...s }) {
           children: /* @__PURE__ */ t("div", { className: "custom-toobar-title-inner", children: /* @__PURE__ */ t("span", { children: I }) })
         }
       ),
-      /* @__PURE__ */ r("div", { className: `custom-toobar-btns ${u || g ? "toobar-btns-disabled" : ""}`, children: [
-        !re && /* @__PURE__ */ t(
+      /* @__PURE__ */ l("div", { className: `custom-toobar-btns ${u || w ? "toobar-btns-disabled" : ""}`, children: [
+        !le && /* @__PURE__ */ t(
           Fe,
           {
             search: oe,
@@ -165,12 +165,12 @@ function Be({ ...s }) {
             onSearchOpen: A
           }
         ),
-        !E && /* @__PURE__ */ r(S, { children: [
-          !x && q(({ handlePrint: e }) => /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, { title: m, children: /* @__PURE__ */ t(
+        !E && /* @__PURE__ */ l(S, { children: [
+          !x && q(({ handlePrint: e }) => /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, { title: f, children: /* @__PURE__ */ t(
             R,
             {
-              "data-testid": `${m}-iconButton`,
-              "aria-label": m,
+              "data-testid": `${f}-iconButton`,
+              "aria-label": f,
               disabled: o.print === "disabled",
               onClick: e,
               children: /* @__PURE__ */ t($, {})
@@ -183,20 +183,20 @@ function Be({ ...s }) {
           {
             ref: k,
             "aria-haspopup": "true",
-            "aria-expanded": f ? "true" : void 0,
+            "aria-expanded": h ? "true" : void 0,
             onClick: (e) => d(e.currentTarget),
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ t(fe, {})
+            children: /* @__PURE__ */ t(he, {})
           }
         )
       ] }),
       te
     ] }),
-    /* @__PURE__ */ r(
-      we,
+    /* @__PURE__ */ l(
+      ge,
       {
-        anchorEl: f,
-        open: !!f,
+        anchorEl: h,
+        open: !!h,
         onClose: () => d(null),
         slotProps: {
           list: {
@@ -204,7 +204,7 @@ function Be({ ...s }) {
           }
         },
         children: [
-          !x && q(({ handlePrint: e }) => /* @__PURE__ */ r(
+          !x && q(({ handlePrint: e }) => /* @__PURE__ */ l(
             U,
             {
               onClick: () => {
@@ -212,7 +212,7 @@ function Be({ ...s }) {
               },
               children: [
                 /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t($, { fontSize: "small" }) }),
-                /* @__PURE__ */ t(j, { children: m })
+                /* @__PURE__ */ t(j, { children: f })
               ]
             }
           )),
@@ -220,46 +220,39 @@ function Be({ ...s }) {
         ]
       }
     ),
-    M.map((e, c) => /* @__PURE__ */ t("div", { children: e }, w(c))),
+    M.map((e, c) => /* @__PURE__ */ t("div", { children: e }, g(c))),
     /* @__PURE__ */ t(Ee, { children: u && /* @__PURE__ */ t(ye, { className: "toolbar-progress" }) })
   ] });
 }
 Be.propTypes = {
-  data: i.array,
-  options: i.object.isRequired,
-  components: i.object,
-  columns: i.array.isRequired,
-  filterList: i.array,
-  filterData: i.array,
-  filterUpdate: i.func.isRequired,
-  resetFilters: i.func.isRequired,
-  updateFilterByType: i.func.isRequired,
-  toggleViewColumn: i.func.isRequired,
-  updateColumns: i.func.isRequired,
-  title: i.any,
-  searchText: i.any,
-  searchTextUpdate: i.func.isRequired,
-  searchClose: i.func.isRequired,
-  tableRef: i.func.isRequired
+  data: n.array,
+  options: n.object.isRequired,
+  components: n.object,
+  columns: n.array.isRequired,
+  filterList: n.array,
+  filterData: n.array,
+  filterUpdate: n.func.isRequired,
+  resetFilters: n.func.isRequired,
+  updateFilterByType: n.func.isRequired,
+  toggleViewColumn: n.func.isRequired,
+  updateColumns: n.func.isRequired,
+  title: n.any,
+  searchText: n.any,
+  searchTextUpdate: n.func.isRequired,
+  searchClose: n.func.isRequired,
+  tableRef: n.func.isRequired
 };
 const qe = z("div")`
   display: flex;
   align-items: center;
-  height: 56px;
+  flex-wrap: wrap;
   .custom-toobar-title {
-    position: relative;
-    flex: 1;
+    flex: 1 1 auto;
     font-size: 18px;
     font-weight: 800;
-    height: 56px;
     transition: all ease 0.3s;
     &-inner {
-      line-height: 56px;
       width: 100%;
-      height: 56px;
-      position: absolute;
-      left: 0;
-      top: 0;
       span {
         display: inline-block;
         max-width: 100%;

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.50", s = { "@blocklet/js-sdk": "1.16.52" }, n = {
+const e = "3.1.51", s = { "@blocklet/js-sdk": "1.16.52" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.50",
+  "version": "3.1.51",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "6840e9cab92d5ba54c9435924007c49f3e860c92",
+  "gitHead": "8367c79c433cf59694b4aa72cbeef3b25185dd66",
   "dependencies": {
-    "@arcblock/bridge": "3.1.50",
+    "@arcblock/bridge": "3.1.51",
     "@arcblock/did": "^1.25.6",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.50",
-    "@arcblock/nft-display": "3.1.50",
-    "@arcblock/react-hooks": "3.1.50",
+    "@arcblock/icons": "3.1.51",
+    "@arcblock/nft-display": "3.1.51",
+    "@arcblock/react-hooks": "3.1.51",
     "@blocklet/js-sdk": "1.16.52",
-    "@blocklet/theme": "3.1.50",
+    "@blocklet/theme": "3.1.51",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Datatable/CustomToolbar.jsx

@@ -353,21 +353,14 @@ CustomToolbar.propTypes = {
 const Container = styled('div')`
   display: flex;
   align-items: center;
-  height: 56px;
+  flex-wrap: wrap;
   .custom-toobar-title {
-    position: relative;
-    flex: 1;
+    flex: 1 1 auto;
     font-size: 18px;
     font-weight: 800;
-    height: 56px;
     transition: all ease 0.3s;
     &-inner {
-      line-height: 56px;
       width: 100%;
-      height: 56px;
-      position: absolute;
-      left: 0;
-      top: 0;
       span {
         display: inline-block;
         max-width: 100%;