@arcblock/ux 2.12.8 → 2.12.10

package/lib/Address/did-address.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@fontsource/ubuntu-mono/400.css';
-import { Check as CheckIcon, ContentCopy as CopyIcon } from '@mui/icons-material';
+import { Check as CheckIcon } from '@mui/icons-material';
 import { Box, Tooltip } from '@mui/material';
 import { green } from '@mui/material/colors';
 import copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
+import CopyIcon from '@arcblock/icons/lib/Copy';
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
@@ -97,6 +98,8 @@ const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
       /* title prop 直接加在 icon 上不生效 */
       _jsx(CopyIcon, {
         className: "did-address-copy",
+        width: 16,
+        height: 16,
         onClick: onCopy
       })
     });

package/lib/Header/header.js

@@ -100,6 +100,7 @@ function Header({
 const Root = styled(Box)`
   position: relative;
   font-size: 14px;
+  z-index: ${props => props.theme.zIndex.appBar};
   background: ${props => props.theme.palette.common.white};
   .header-container {
     display: flex;

package/lib/Locale/selector.js

@@ -10,6 +10,7 @@ import { getColor, getBackground } from '../Util';
 import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
+import { mergeSx } from '../Util/style';
 export default function LocaleSelector(props) {
   const {
     showText = true,
@@ -90,6 +91,14 @@ export default function LocaleSelector(props) {
       open: open,
       anchorEl: anchorEl.current,
       ...popperProps,
+      // @ts-ignore
+      sx: mergeSx(
+      // @ts-ignore
+      {
+        zIndex: _theme => _theme.zIndex.tooltip + 10
+      },
+      // @ts-ignore
+      popperProps?.sx),
       children: /*#__PURE__*/_jsx(Box, {
         className: "locales",
         sx: {
@@ -161,11 +170,4 @@ const Div = styled('div', {
       color: ${props => getColor(props)};
     }
   }
-`;
-const StyledPopper = styled(Popper)`
-  z-index: ${({
-  theme
-}) => {
-  return theme.zIndex.modal + 1;
-}};
 `;

package/lib/RelativeTime/index.d.ts

@@ -9,5 +9,6 @@ export interface RelativeTimeProps {
     type?: 'relative' | 'absolute';
     tz?: string;
     relativeRange?: number;
+    enableTooltip?: boolean;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, ...rest }: RelativeTimeProps): "-" | import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, ...rest }: RelativeTimeProps): "-" | import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -42,6 +42,7 @@ export default function RelativeTime({
   type = 'relative',
   tz,
   relativeRange,
+  enableTooltip = true,
   ...rest
 }) {
   if (!value) {
@@ -77,7 +78,7 @@ export default function RelativeTime({
     popContent = relativeString;
   }
   return /*#__PURE__*/_jsx(Tooltip, {
-    title: popContent,
+    title: enableTooltip ? popContent : undefined,
     placement: "top-end",
     enterTouchDelay: 0,
     children: /*#__PURE__*/_jsx("span", {

package/lib/SessionUser/components/un-login.js

@@ -114,6 +114,9 @@ export default function UnLogin({
       open: currentState.open,
       anchorEl: userAnchorRef.current,
       transition: true,
+      sx: {
+        zIndex: theme => theme.zIndex.appBar
+      },
       placement: "bottom-end",
       modifiers: [{
         name: 'offset',
@@ -145,8 +148,8 @@ export default function UnLogin({
             },
             children: [loginAppLogo && !currentState.loadAppLogoError ? /*#__PURE__*/_jsx("img", {
               src: loginAppLogo,
-              height: 20,
               style: {
+                height: 20,
                 maxWidth: 100
               },
               onError: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.8",
+  "version": "2.12.10",
   "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": "4cfeed31d56495f1368b96adfae11f938e68ef46",
+  "gitHead": "a4e740e658ec69a4889872ce0c4f1ef6746fa57b",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.8",
-    "@arcblock/nft-display": "^2.12.8",
-    "@arcblock/react-hooks": "^2.12.8",
+    "@arcblock/icons": "^2.12.10",
+    "@arcblock/nft-display": "^2.12.10",
+    "@arcblock/react-hooks": "^2.12.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Address/did-address.tsx

@@ -1,9 +1,10 @@
 import '@fontsource/ubuntu-mono/400.css';
-import { Check as CheckIcon, ContentCopy as CopyIcon } from '@mui/icons-material';
+import { Check as CheckIcon } from '@mui/icons-material';
 import { Box, BoxProps, Tooltip } from '@mui/material';
 import { green } from '@mui/material/colors';
 import copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
+import CopyIcon from '@arcblock/icons/lib/Copy';
 import React, { forwardRef, ReactNode, useImperativeHandle, useRef, useState } from 'react';
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
@@ -119,7 +120,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
           </Tooltip>
         ) : (
           /* title prop 直接加在 icon 上不生效 */
-          <CopyIcon className="did-address-copy" onClick={onCopy} />
+          <CopyIcon className="did-address-copy" width={16} height={16} onClick={onCopy} />
         )}
       </span>
     );

package/src/Header/header.tsx

@@ -100,6 +100,7 @@ function Header({
 const Root = styled(Box)`
   position: relative;
   font-size: 14px;
+  z-index: ${(props) => props.theme.zIndex.appBar};
   background: ${(props) => props.theme.palette.common.white};
   .header-container {
     display: flex;

package/src/Locale/selector.tsx

@@ -11,6 +11,7 @@ import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 import type { Locale } from '../type';
+import { mergeSx } from '../Util/style';
 
 export interface LocaleSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   showText?: true | false;
@@ -94,7 +95,17 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
         </Box>
       </ButtonComponent>
 
-      <Popper open={open} anchorEl={anchorEl.current} {...popperProps}>
+      <Popper
+        open={open}
+        anchorEl={anchorEl.current}
+        {...popperProps}
+        // @ts-ignore
+        sx={mergeSx(
+          // @ts-ignore
+          { zIndex: (_theme) => _theme.zIndex.tooltip + 10 },
+          // @ts-ignore
+          popperProps?.sx
+        )}>
         <Box
           className="locales"
           sx={{
@@ -168,9 +179,3 @@ const Div = styled('div', {
     }
   }
 `;
-
-const StyledPopper = styled(Popper)`
-  z-index: ${({ theme }) => {
-    return theme.zIndex.modal + 1;
-  }};
-`;

package/src/RelativeTime/index.tsx

@@ -44,6 +44,7 @@ export interface RelativeTimeProps {
   type?: 'relative' | 'absolute';
   tz?: string;
   relativeRange?: number;
+  enableTooltip?: boolean;
 }
 
 export default function RelativeTime({
@@ -55,6 +56,7 @@ export default function RelativeTime({
   type = 'relative',
   tz,
   relativeRange,
+  enableTooltip = true,
   ...rest
 }: RelativeTimeProps) {
   if (!value) {
@@ -96,7 +98,7 @@ export default function RelativeTime({
   }
 
   return (
-    <Tooltip title={popContent} placement="top-end" enterTouchDelay={0}>
+    <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
       <span {...rest}>{innerContent}</span>
     </Tooltip>
   );

package/src/SessionUser/components/un-login.tsx

@@ -128,6 +128,9 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
         open={currentState.open}
         anchorEl={userAnchorRef.current}
         transition
+        sx={{
+          zIndex: (theme) => theme.zIndex.appBar,
+        }}
         placement="bottom-end"
         modifiers={[
           {
@@ -160,8 +163,8 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                 {loginAppLogo && !currentState.loadAppLogoError ? (
                   <img
                     src={loginAppLogo}
-                    height={20}
                     style={{
+                      height: 20,
                       maxWidth: 100,
                     }}
                     onError={() => {