@arcblock/ux 2.10.49 → 2.10.51

package/lib/Address/responsive-did-address.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSize } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress from './did-address';
 
@@ -60,7 +61,7 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   });
 });
 export default ResponsiveDidAddress;
-const Root = styled('div')`
+const Root = styled(Box)`
   display: block;
   overflow: hidden;
   ${({

package/lib/ClickToCopy/index.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { useSize } from 'ahooks';
 import Tooltip from '@mui/material/Tooltip';
+import { useSnackbar } from 'notistack';
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
 import { mergeProps } from '../Util';
@@ -46,6 +47,7 @@ export default function ClickToCopy(props) {
   });
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
+  const snackbarContext = useSnackbar();
   const size = useSize(document.body);
   const width = size?.width || 0;
   const onCopy = e => {
@@ -55,20 +57,27 @@ export default function ClickToCopy(props) {
     }
   };
   const ContainerComponent = unstyled ? UnstyledContainer : Container;
-  return /*#__PURE__*/_jsx(ToastProvider, {
-    children: /*#__PURE__*/_jsx(Tooltip, {
-      title: copied ? _copiedTip : _tip,
-      ...rest,
-      placement: tipPlacement,
-      disableFocusListener: true,
-      children: /*#__PURE__*/_jsx(ContainerComponent, {
-        ref: containerRef,
-        style: style,
-        onClick: onCopy,
-        children: children || content
-      })
+  const contentChild = /*#__PURE__*/_jsx(Tooltip, {
+    title: copied ? _copiedTip : _tip,
+    ...rest,
+    placement: tipPlacement,
+    disableFocusListener: true,
+    children: /*#__PURE__*/_jsx(ContainerComponent, {
+      ref: containerRef,
+      style: style,
+      onClick: onCopy,
+      children: children || content
     })
   });
+  if (!snackbarContext) {
+    return /*#__PURE__*/_jsx(ToastProvider, {
+      children: contentChild
+    });
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: contentChild
+  });
 }
 ClickToCopy.propTypes = {
   children: PropTypes.any.isRequired,

package/lib/DID/index.js

@@ -83,7 +83,10 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
     append = null,
     compact = false,
     startChars = 6,
-    endChars = 6
+    endChars = 6,
+    style,
+    className,
+    sx
   } = props;
   const rest = {
     size,
@@ -95,7 +98,10 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
     append,
     compact,
     startChars,
-    endChars
+    endChars,
+    style,
+    className,
+    sx
   };
   const addressRef = useRef(null);
   const t = useMemoizedFn((key, data = {}) => {

package/package.json

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

package/src/Address/responsive-did-address.tsx

@@ -1,7 +1,7 @@
 import { useSize } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
-
 import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
 
 /**
@@ -66,7 +66,7 @@ export interface IResponsiveDidAddressProps extends IDidAddressProps {
   component?: React.ElementType;
 }
 
-const Root = styled('div')`
+const Root = styled(Box)`
   display: block;
   overflow: hidden;
   ${({ inline }: any) =>

package/src/ClickToCopy/index.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import { useSize } from 'ahooks';
 import Tooltip from '@mui/material/Tooltip';
 
+import { useSnackbar } from 'notistack';
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
 import { mergeProps } from '../Util';
@@ -32,6 +33,7 @@ export default function ClickToCopy(props) {
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
+  const snackbarContext = useSnackbar();
 
   const size = useSize(document.body);
   const width = size?.width || 0;
@@ -45,16 +47,18 @@ export default function ClickToCopy(props) {
   };
 
   const ContainerComponent = unstyled ? UnstyledContainer : Container;
-
-  return (
-    <ToastProvider>
-      <Tooltip title={copied ? _copiedTip : _tip} {...rest} placement={tipPlacement} disableFocusListener>
-        <ContainerComponent ref={containerRef} style={style} onClick={onCopy}>
-          {children || content}
-        </ContainerComponent>
-      </Tooltip>
-    </ToastProvider>
+  const contentChild = (
+    <Tooltip title={copied ? _copiedTip : _tip} {...rest} placement={tipPlacement} disableFocusListener>
+      <ContainerComponent ref={containerRef} style={style} onClick={onCopy}>
+        {children || content}
+      </ContainerComponent>
+    </Tooltip>
   );
+  if (!snackbarContext) {
+    return <ToastProvider>{contentChild}</ToastProvider>;
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{contentChild}</>;
 }
 
 ClickToCopy.propTypes = {

package/src/DID/index.tsx

@@ -119,6 +119,9 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
     compact = false,
     startChars = 6,
     endChars = 6,
+    style,
+    className,
+    sx,
   } = props;
 
   const rest = {
@@ -132,6 +135,9 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
     compact,
     startChars,
     endChars,
+    style,
+    className,
+    sx,
   };
 
   const addressRef = useRef<any>(null);