@arcblock/ux 2.12.9 → 2.12.10

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/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.9",
+  "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": "70e427c9ce212734adf54b38890880ec28856d37",
+  "gitHead": "a4e740e658ec69a4889872ce0c4f1ef6746fa57b",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.9",
-    "@arcblock/nft-display": "^2.12.9",
-    "@arcblock/react-hooks": "^2.12.9",
+    "@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/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/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={() => {