@arcblock/ux 2.12.70 → 2.12.72

package/lib/Datatable/index.d.ts

@@ -8,7 +8,7 @@ export default function DataTable(props: DataTableProps): import("react").ReactC
 export function getDurableData(key: any): any;
 export type DataTableCustomButton = {
     icon: import("react").ReactElement;
-    title: string;
+    title: import("react").ReactElement | string;
     onClick?: () => void;
 };
 export type DataTableColumn = {
@@ -18,7 +18,7 @@ export type DataTableColumn = {
 } & import("mui-datatables").MUIDataTableColumnDef;
 export type DataTableState = Pick<import("mui-datatables").MUIDataTableState, "count" | "page" | "rowsPerPage" | "searchText" | "sortOrder" | "filterList">;
 export type ModifiedMUIDataTableProps = {
-    title?: string;
+    title?: import("react").ReactElement | string;
 } & Omit<import("mui-datatables").MUIDataTableProps, "title">;
 export type DataTableProps = {
     data: Array<object | number[] | string[]>;

package/lib/Datatable/index.js

@@ -17,7 +17,7 @@ import { styled } from '../Theme';
 /**
  * @typedef {{
  *  icon: import('react').ReactElement,
- *  title: string,
+ *  title: import('react').ReactElement | string,
  *  onClick?: () => void
  * }} DataTableCustomButton
  */
@@ -36,7 +36,7 @@ import { styled } from '../Theme';
 
 /**
  * @typedef {{
- *  title?: string, // The title of the table (optional)
+ *  title?: import('react').ReactElement | string, // The title of the table (optional)
  * } & Omit<import('mui-datatables').MUIDataTableProps, 'title'>} ModifiedMUIDataTableProps
  */
 

package/lib/Img/index.js

@@ -7,6 +7,7 @@ import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
 import { Box } from '@mui/material';
 import noop from 'lodash/noop';
+import { mergeSx } from '../Util/style';
 
 /**
  * @typedef {Object} ImgExProps
@@ -122,7 +123,7 @@ function Img({
       ref: ref,
       style: outerStyle,
       ...rest,
-      sx: {
+      sx: mergeSx({
         [`& .${classes.root}`]: {
           position: 'relative',
           overflow: 'hidden',
@@ -153,9 +154,8 @@ function Img({
             maxWidth: '80%',
             maxHeight: '80%'
           }
-        },
-        ...rest.sx
-      },
+        }
+      }, rest.sx),
       children: /*#__PURE__*/_jsxs("div", {
         className: `image ${className} ${classes.root}`,
         style: mergedStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.70",
+  "version": "2.12.72",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,12 +70,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "89e31e2599d8ab7462307771239849a6edd19d7f",
+  "gitHead": "9050a7670edd33bb1edd1014770a00ddcbc2bd03",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.70",
-    "@arcblock/nft-display": "^2.12.70",
-    "@arcblock/react-hooks": "^2.12.70",
+    "@arcblock/icons": "^2.12.72",
+    "@arcblock/nft-display": "^2.12.72",
+    "@arcblock/react-hooks": "^2.12.72",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/roboto": "^5.2.5",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Datatable/index.jsx

@@ -16,7 +16,7 @@ import { styled } from '../Theme';
 /**
  * @typedef {{
  *  icon: import('react').ReactElement,
- *  title: string,
+ *  title: import('react').ReactElement | string,
  *  onClick?: () => void
  * }} DataTableCustomButton
  */
@@ -35,7 +35,7 @@ import { styled } from '../Theme';
 
 /**
  * @typedef {{
- *  title?: string, // The title of the table (optional)
+ *  title?: import('react').ReactElement | string, // The title of the table (optional)
  * } & Omit<import('mui-datatables').MUIDataTableProps, 'title'>} ModifiedMUIDataTableProps
  */
 

package/src/Img/index.jsx

@@ -6,6 +6,7 @@ import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
 import { Box } from '@mui/material';
 import noop from 'lodash/noop';
+import { mergeSx } from '../Util/style';
 
 /**
  * @typedef {Object} ImgExProps
@@ -127,40 +128,42 @@ function Img({
       ref={ref}
       style={outerStyle}
       {...rest}
-      sx={{
-        [`& .${classes.root}`]: {
-          position: 'relative',
-          overflow: 'hidden',
-          '& .image--state, & .image--img': {
-            minWidth: '100%',
-            minHeight: '100%',
-            position: 'absolute',
-            top: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-          },
-          '& .image--state': {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#999',
-            background: '#eee',
-            width: '100%',
-            height: '100%',
-          },
-          '& .image--img': {
-            opacity: 0,
-            visibility: 'hidden',
-          },
-          '& .image--icon': {
-            fontSize: 30,
-            maxWidth: '80%',
-            maxHeight: '80%',
+      sx={mergeSx(
+        {
+          [`& .${classes.root}`]: {
+            position: 'relative',
+            overflow: 'hidden',
+            '& .image--state, & .image--img': {
+              minWidth: '100%',
+              minHeight: '100%',
+              position: 'absolute',
+              top: 0,
+              left: '50%',
+              transform: 'translateX(-50%)',
+            },
+            '& .image--state': {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              color: '#999',
+              background: '#eee',
+              width: '100%',
+              height: '100%',
+            },
+            '& .image--img': {
+              opacity: 0,
+              visibility: 'hidden',
+            },
+            '& .image--icon': {
+              fontSize: 30,
+              maxWidth: '80%',
+              maxHeight: '80%',
+            },
           },
         },
-        ...rest.sx,
-      }}>
+        rest.sx
+      )}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">