@arcblock/ux 2.11.10 → 2.11.11

package/lib/BlockletV2/blocklet.d.ts

@@ -5,9 +5,9 @@ export interface IBlockletStore extends CardProps {
     title: string;
     description?: string;
     cover?: string;
-    avatar: string;
-    author: string;
-    download: string;
+    avatar?: string;
+    author?: string;
+    download?: string;
     official?: {
         tooltip: React.ReactNode;
         size?: number;
@@ -15,16 +15,16 @@ export interface IBlockletStore extends CardProps {
     };
     button?: React.ReactNode;
     buttonText?: string;
-    buttonDisabled?: false | true;
-    buttonLoading?: false | true;
+    buttonDisabled?: boolean;
+    buttonLoading?: boolean;
     onButtonClick?: Function;
     onMainClick?: Function;
     className?: string;
     status?: {
         key: string;
         icon: React.ReactNode;
-        text: string;
-        title?: string;
+        text: React.ReactNode;
+        title?: React.ReactNode;
         maxWidth?: number;
         color?: string;
         align?: 'left' | 'right';
@@ -32,7 +32,7 @@ export interface IBlockletStore extends CardProps {
     icons?: {
         key: string;
         icon: string | React.ReactElement;
-        title: string;
+        title: React.ReactNode;
         color?: string;
     }[];
 }

package/lib/BlockletV2/blocklet.js

@@ -8,7 +8,7 @@ import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
 import IconText from './components/icon-text';
-import TooltipIcon from './tooltip-icon';
+import TooltipIcon from './components/tooltip-icon';
 import { formatDownloadCount, strippedString } from './utils';
 export default function BlockletStore(props) {
   const {
@@ -104,6 +104,7 @@ export default function BlockletStore(props) {
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           overflow: 'hidden',
+          cursor: 'default',
           pl: 0.5,
           '&&': {
             flexShrink: 1
@@ -133,7 +134,7 @@ export default function BlockletStore(props) {
             }
           }) : item.icon
         }, item.key))]
-      }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
+      }), onButtonClick && /*#__PURE__*/_jsxs(Button, {
         color: "reverse",
         variant: "outlined",
         size: "small",
@@ -152,7 +153,7 @@ export default function BlockletStore(props) {
             color: 'inherit'
           }
         }), buttonText]
-      })]
+      }), button]
     }), /*#__PURE__*/_jsx(Stack, {
       py: 2,
       children: /*#__PURE__*/_jsx(Typography, {
@@ -165,6 +166,7 @@ export default function BlockletStore(props) {
           WebkitLineClamp: 2,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
+          cursor: 'default',
           height: 40
         },
         ...descriptionProps

package/lib/BlockletV2/components/icon-text.d.ts

@@ -4,6 +4,6 @@ export default function IconText({ icon, children, maxWidth, title, sx, }: {
     icon?: React.ReactNode;
     children?: React.ReactNode;
     maxWidth?: number;
-    title?: string;
+    title?: React.ReactNode;
     sx?: StackProps['sx'];
 }): false | "" | 0 | import("react/jsx-runtime").JSX.Element | null | undefined;

package/lib/BlockletV2/components/icon-text.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Typography } from '@mui/material';
 import React from 'react';
+import TooltipIcon from './tooltip-icon';
 export default function IconText({
   icon,
   children,
@@ -16,16 +17,19 @@ export default function IconText({
       maxWidth,
       overflow: 'hidden'
     }, ...(Array.isArray(sx) ? sx : [sx])],
-    children: [icon, /*#__PURE__*/_jsx(Typography, {
-      flex: 1,
-      variant: "body2",
-      sx: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      },
-      title: title || (typeof children === 'string' ? children : undefined),
-      children: children
+    children: [icon, /*#__PURE__*/_jsx(TooltipIcon, {
+      title: title || (typeof children === 'string' ? children : ''),
+      children: /*#__PURE__*/_jsx(Typography, {
+        flex: 1,
+        variant: "body2",
+        sx: {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          cursor: 'default'
+        },
+        children: children
+      })
     })]
   });
 }

package/lib/BlockletV2/{tooltip-icon.d.ts → components/tooltip-icon.d.ts}

@@ -4,4 +4,4 @@ export interface TooltipIconProps extends TooltipProps {
     fontWeight?: number | string;
     color?: string;
 }
-export default function TooltipIcon({ title, sx, children, PopperProps, fontSize, fontWeight, color, ...props }: TooltipIconProps): import("react/jsx-runtime").JSX.Element;
+export default function TooltipIcon({ title, sx, children, slotProps, fontSize, fontWeight, color, ...props }: TooltipIconProps): import("react/jsx-runtime").JSX.Element;

package/lib/BlockletV2/components/tooltip-icon.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip, tooltipClasses } from '@mui/material';
+export default function TooltipIcon({
+  title,
+  sx,
+  children,
+  slotProps,
+  fontSize = 12,
+  fontWeight = 500,
+  color = 'text.secondary',
+  ...props
+}) {
+  return title ? /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    placement: "top",
+    ...props,
+    slotProps: {
+      popper: {
+        ...slotProps?.popper,
+        sx: [{
+          [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: 'common.white',
+            fontSize,
+            fontWeight,
+            boxShadow: '0px 4px 8px 0px #03071214, 0px 0px 0px 1px #03071214',
+            marginBottom: '6px !important',
+            borderRadius: '8px',
+            cursor: 'default',
+            color,
+            display: 'flex',
+            alignItems: 'center'
+          }
+        }, ...(Array.isArray(slotProps?.popper?.sx) ? slotProps.popper.sx : [slotProps?.popper?.sx])]
+      }
+    },
+    children: children
+  }) : children;
+}

package/lib/BlockletV2/index.d.ts

@@ -1,5 +1,5 @@
 import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
-import TooltipIcon from './tooltip-icon';
+import TooltipIcon from './components/tooltip-icon';
 export { ActionButton, strippedString, TooltipIcon };
 export default Blocklet;

package/lib/BlockletV2/index.js

@@ -1,5 +1,5 @@
 import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
-import TooltipIcon from './tooltip-icon';
+import TooltipIcon from './components/tooltip-icon';
 export { ActionButton, strippedString, TooltipIcon };
 export default Blocklet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.10",
+  "version": "2.11.11",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "3c56d08b46485ae49fdfd32fc8c92df9c8ddf25e",
+  "gitHead": "fc251e65f592a96d6fe876dda5d6158f7fbd2613",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.10",
-    "@arcblock/nft-display": "^2.11.10",
-    "@arcblock/react-hooks": "^2.11.10",
+    "@arcblock/icons": "^2.11.11",
+    "@arcblock/nft-display": "^2.11.11",
+    "@arcblock/react-hooks": "^2.11.11",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/BlockletV2/blocklet.tsx

@@ -8,7 +8,7 @@ import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
 import IconText from './components/icon-text';
-import TooltipIcon from './tooltip-icon';
+import TooltipIcon from './components/tooltip-icon';
 import { formatDownloadCount, strippedString } from './utils';
 
 export interface IBlockletStore extends CardProps {
@@ -16,9 +16,9 @@ export interface IBlockletStore extends CardProps {
   title: string;
   description?: string;
   cover?: string;
-  avatar: string;
-  author: string;
-  download: string;
+  avatar?: string;
+  author?: string;
+  download?: string;
   official?: {
     tooltip: React.ReactNode;
     size?: number;
@@ -26,16 +26,16 @@ export interface IBlockletStore extends CardProps {
   };
   button?: React.ReactNode;
   buttonText?: string;
-  buttonDisabled?: false | true;
-  buttonLoading?: false | true;
+  buttonDisabled?: boolean;
+  buttonLoading?: boolean;
   onButtonClick?: Function;
   onMainClick?: Function;
   className?: string;
   status?: {
     key: string;
     icon: React.ReactNode;
-    text: string;
-    title?: string;
+    text: React.ReactNode;
+    title?: React.ReactNode;
     maxWidth?: number;
     color?: string;
     align?: 'left' | 'right';
@@ -43,7 +43,7 @@ export interface IBlockletStore extends CardProps {
   icons?: {
     key: string;
     icon: string | React.ReactElement;
-    title: string;
+    title: React.ReactNode;
     color?: string;
   }[];
 }
@@ -116,6 +116,7 @@ export default function BlockletStore(props: IBlockletStore) {
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
+            cursor: 'default',
             pl: 0.5,
             '&&': { flexShrink: 1 },
           }}
@@ -133,24 +134,24 @@ export default function BlockletStore(props: IBlockletStore) {
             </TooltipIcon>
           ))}
         </Box>
-        {button ||
-          (onButtonClick && (
-            <Button
-              color="reverse"
-              variant="outlined"
-              size="small"
-              disabled={buttonDisabled || buttonLoading}
-              style={{
-                borderColor: theme.palette.grey[300],
-                borderRadius: 8,
-                fontSize: 13,
-                fontWeight: theme.typography.fontWeightMedium,
-              }}
-              onClick={handleButtonClick}>
-              {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
-              {buttonText}
-            </Button>
-          ))}
+        {onButtonClick && (
+          <Button
+            color="reverse"
+            variant="outlined"
+            size="small"
+            disabled={buttonDisabled || buttonLoading}
+            style={{
+              borderColor: theme.palette.grey[300],
+              borderRadius: 8,
+              fontSize: 13,
+              fontWeight: theme.typography.fontWeightMedium,
+            }}
+            onClick={handleButtonClick}>
+            {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
+            {buttonText}
+          </Button>
+        )}
+        {button}
       </Stack>
       <Stack py={2}>
         <Typography
@@ -163,6 +164,7 @@ export default function BlockletStore(props: IBlockletStore) {
             WebkitLineClamp: 2,
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
+            cursor: 'default',
             height: 40,
           }}
           {...descriptionProps}

package/src/BlockletV2/components/icon-text.tsx

@@ -1,5 +1,6 @@
 import { Stack, StackProps, Typography } from '@mui/material';
 import React from 'react';
+import TooltipIcon from './tooltip-icon';
 
 export default function IconText({
   icon,
@@ -11,7 +12,7 @@ export default function IconText({
   icon?: React.ReactNode;
   children?: React.ReactNode;
   maxWidth?: number;
-  title?: string;
+  title?: React.ReactNode;
   sx?: StackProps['sx'];
 }) {
   return (
@@ -22,13 +23,14 @@ export default function IconText({
         gap={0.5}
         sx={[{ maxWidth, overflow: 'hidden' }, ...(Array.isArray(sx) ? sx : [sx])]}>
         {icon}
-        <Typography
-          flex={1}
-          variant="body2"
-          sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-          title={title || (typeof children === 'string' ? children : undefined)}>
-          {children}
-        </Typography>
+        <TooltipIcon title={title || (typeof children === 'string' ? children : '')}>
+          <Typography
+            flex={1}
+            variant="body2"
+            sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'default' }}>
+            {children}
+          </Typography>
+        </TooltipIcon>
       </Stack>
     )
   );

package/src/BlockletV2/components/tooltip-icon.tsx

@@ -0,0 +1,51 @@
+import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+
+export interface TooltipIconProps extends TooltipProps {
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  color?: string;
+}
+
+export default function TooltipIcon({
+  title,
+  sx,
+  children,
+  slotProps,
+  fontSize = 12,
+  fontWeight = 500,
+  color = 'text.secondary',
+  ...props
+}: TooltipIconProps) {
+  return title ? (
+    <Tooltip
+      title={title}
+      placement="top"
+      {...props}
+      slotProps={{
+        popper: {
+          ...slotProps?.popper,
+          sx: [
+            {
+              [`& .${tooltipClasses.tooltip}`]: {
+                backgroundColor: 'common.white',
+                fontSize,
+                fontWeight,
+                boxShadow: '0px 4px 8px 0px #03071214, 0px 0px 0px 1px #03071214',
+                marginBottom: '6px !important',
+                borderRadius: '8px',
+                cursor: 'default',
+                color,
+                display: 'flex',
+                alignItems: 'center',
+              },
+            },
+            ...(Array.isArray(slotProps?.popper?.sx) ? slotProps.popper.sx : [slotProps?.popper?.sx]),
+          ],
+        },
+      }}>
+      {children}
+    </Tooltip>
+  ) : (
+    children
+  );
+}

package/src/BlockletV2/index.ts

@@ -1,6 +1,6 @@
 import ActionButton, { strippedString } from './utils';
 import Blocklet from './blocklet';
-import TooltipIcon from './tooltip-icon';
+import TooltipIcon from './components/tooltip-icon';
 
 export { ActionButton, strippedString, TooltipIcon };
 export default Blocklet;

package/lib/BlockletV2/tooltip-icon.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tooltip, tooltipClasses } from '@mui/material';
-export default function TooltipIcon({
-  title,
-  sx,
-  children,
-  PopperProps,
-  fontSize = 12,
-  fontWeight = 500,
-  color = 'text.secondary',
-  ...props
-}) {
-  return title ? /*#__PURE__*/_jsx(Tooltip, {
-    title: title,
-    placement: "top",
-    ...props,
-    PopperProps: {
-      ...PopperProps,
-      sx: [{
-        [`& .${tooltipClasses.tooltip}`]: {
-          backgroundColor: 'common.white',
-          boxShadow: 1,
-          fontSize,
-          fontWeight,
-          color,
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, ...(Array.isArray(PopperProps?.sx) ? PopperProps.sx : [PopperProps?.sx])]
-    },
-    children: children
-  }) : children;
-}

package/src/BlockletV2/tooltip-icon.tsx

@@ -1,46 +0,0 @@
-import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
-
-export interface TooltipIconProps extends TooltipProps {
-  fontSize?: number | string;
-  fontWeight?: number | string;
-  color?: string;
-}
-
-export default function TooltipIcon({
-  title,
-  sx,
-  children,
-  PopperProps,
-  fontSize = 12,
-  fontWeight = 500,
-  color = 'text.secondary',
-  ...props
-}: TooltipIconProps) {
-  return title ? (
-    <Tooltip
-      title={title}
-      placement="top"
-      {...props}
-      PopperProps={{
-        ...PopperProps,
-        sx: [
-          {
-            [`& .${tooltipClasses.tooltip}`]: {
-              backgroundColor: 'common.white',
-              boxShadow: 1,
-              fontSize,
-              fontWeight,
-              color,
-              display: 'flex',
-              alignItems: 'center',
-            },
-          },
-          ...(Array.isArray(PopperProps?.sx) ? PopperProps.sx : [PopperProps?.sx]),
-        ],
-      }}>
-      {children}
-    </Tooltip>
-  ) : (
-    children
-  );
-}