@arcblock/ux 2.11.36 → 2.11.38

package/lib/Avatar/did-motif.js

@@ -30,7 +30,8 @@ function DIDMotif({
       component: "svg",
       ref: svgRef,
       ...rest,
-      style: styles
+      style: styles,
+      className: "arc-avatar-did-motif"
     });
   }
   return /*#__PURE__*/_jsx(Box, {
@@ -42,6 +43,7 @@ function DIDMotif({
       height: size,
       ...rest.style
     },
+    className: "arc-avatar-did-motif",
     children: /*#__PURE__*/_jsx(Box, {
       component: "svg",
       ref: svgRef,

package/lib/Header/addon-button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '@mui/material';
+type Props<D extends React.ElementType, P = {}> = {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+} & ButtonProps<D, P>;
+export declare function AddonButton<D extends React.ElementType, P = {}>({ icon, children, sx, ...rest }: Props<D, P>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Header/addon-button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+// eslint-disable-next-line import/prefer-default-export
+export function AddonButton({
+  icon,
+  children,
+  sx,
+  ...rest
+}) {
+  const mergedSx = [{
+    height: 32,
+    minWidth: 32,
+    borderColor: 'divider',
+    borderRadius: '100vh',
+    fontSize: 14,
+    color: 'text.secondary',
+    ...(!children && {
+      padding: 0,
+      height: 32,
+      '.MuiButton-startIcon': {
+        margin: 0
+      }
+    })
+  }, ...(Array.isArray(sx) ? sx : [sx])];
+  return /*#__PURE__*/_jsx(Button, {
+    startIcon: icon,
+    color: "inherit",
+    variant: "outlined",
+    sx: mergedSx,
+    ...rest,
+    children: children
+  });
+}

package/lib/Header/header.js

@@ -89,8 +89,35 @@ function Header({
       }), children, align === 'left' && /*#__PURE__*/_jsx(Box, {
         display: "inline-block",
         flexGrow: 1
-      }), /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/_jsx(Box, {
         className: "header-addons",
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5,
+          '> *': {
+            m: '0px!important'
+          },
+          '.MuiIconButton-root': {
+            width: 32,
+            height: 32,
+            p: 0,
+            border: 1,
+            borderColor: 'divider'
+          },
+          '.MuiIconButton-root svg, .MuiButton-root svg': {
+            fontSize: 18,
+            width: '1em!important',
+            height: '1em!important'
+          },
+          '.arc-session-user-logged-in > *, .arc-session-user-logged-in svg': {
+            width: '100%!important',
+            height: '100%!important'
+          },
+          '.arc-session-user-unlogin svg': {
+            transform: 'scale(1)!important'
+          }
+        },
         children: addons
       })]
     })

package/lib/SessionUser/components/logged-in.js

@@ -103,6 +103,7 @@ export default function LoggedIn({
       onClick: () => onTogglePopper(),
       size: "medium",
       "data-cy": "sessionManager-logout-popup",
+      className: "arc-session-user-logged-in",
       "aria-label": "User info button",
       children: /*#__PURE__*/_jsx(DidAvatar, {
         variant: "circle",

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, CircularProgress, IconButton } from '@mui/material';
 import { Icon } from '@iconify/react';
-import PersonOutlineRoundedIcon from 'iconify-icons-material-symbols-400/person-outline-rounded';
+import UserIcon from '@iconify-icons/tabler/user';
 import { useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import noop from 'lodash/noop';
@@ -24,6 +24,7 @@ export default function UnLogin({
       ref: userAnchorRef,
       onClick: _onLogin,
       "data-cy": "sessionManager-login",
+      className: "arc-session-user-unlogin",
       size: "medium",
       "aria-label": "Login button",
       children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
@@ -40,7 +41,7 @@ export default function UnLogin({
           }
         })
       }) : /*#__PURE__*/_jsx(Icon, {
-        icon: PersonOutlineRoundedIcon,
+        icon: UserIcon,
         fontSize: size,
         color: dark ? '#fff' : 'inherit',
         style: {

package/lib/Tabs/index.js

@@ -102,10 +102,12 @@ function LineTabs({
         '&::after': {
           content: '""',
           display: 'block',
+          position: 'sticky',
+          left: 0,
+          zIndex: -1,
           width: '100%',
           height: '1px',
-          backgroundColor: colors.strokeBorderStrong,
-          bottom: 0
+          backgroundColor: colors.strokeBorderStrong
         }
       } : {},
       '.MuiTabs-flexContainer': {

package/package.json

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

package/src/Avatar/did-motif.jsx

@@ -13,10 +13,14 @@ function DIDMotif({ did, size, animation, shape, responsive, ...rest }) {
   if (responsive) {
     // fix avatar 显示问题 (safari 下父容器为 flex 时 inline svg 显示不出来, 需要明确指定 width)
     const styles = { ...rest.style, width: '100%' };
-    return <Box component="svg" ref={svgRef} {...rest} style={styles} />;
+    return <Box component="svg" ref={svgRef} {...rest} style={styles} className="arc-avatar-did-motif" />;
   }
   return (
-    <Box component="span" {...rest} style={{ display: 'inline-block', width: size, height: size, ...rest.style }}>
+    <Box
+      component="span"
+      {...rest}
+      style={{ display: 'inline-block', width: size, height: size, ...rest.style }}
+      className="arc-avatar-did-motif">
       <Box component="svg" ref={svgRef} style={{ width: '100%' }} />
     </Box>
   );

package/src/Header/addon-button.tsx

@@ -0,0 +1,36 @@
+import { Button, ButtonProps } from '@mui/material';
+
+type Props<D extends React.ElementType, P = {}> = {
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+} & ButtonProps<D, P>;
+
+// eslint-disable-next-line import/prefer-default-export
+export function AddonButton<D extends React.ElementType, P = {}>({ icon, children, sx, ...rest }: Props<D, P>) {
+  const mergedSx = [
+    {
+      height: 32,
+      minWidth: 32,
+      borderColor: 'divider',
+      borderRadius: '100vh',
+      fontSize: 14,
+      color: 'text.secondary',
+
+      ...(!children && {
+        padding: 0,
+        height: 32,
+
+        '.MuiButton-startIcon': {
+          margin: 0,
+        },
+      }),
+    },
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ];
+
+  return (
+    <Button startIcon={icon} color="inherit" variant="outlined" sx={mergedSx} {...rest}>
+      {children}
+    </Button>
+  );
+}

package/src/Header/header.tsx

@@ -89,7 +89,37 @@ function Header({
         {align === 'right' && <Box display="inline-block" flexGrow={1} />}
         {children}
         {align === 'left' && <Box display="inline-block" flexGrow={1} />}
-        <div className="header-addons">{addons}</div>
+        <Box
+          className="header-addons"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1.5,
+            '> *': {
+              m: '0px!important',
+            },
+            '.MuiIconButton-root': {
+              width: 32,
+              height: 32,
+              p: 0,
+              border: 1,
+              borderColor: 'divider',
+            },
+            '.MuiIconButton-root svg, .MuiButton-root svg': {
+              fontSize: 18,
+              width: '1em!important',
+              height: '1em!important',
+            },
+            '.arc-session-user-logged-in > *, .arc-session-user-logged-in svg': {
+              width: '100%!important',
+              height: '100%!important',
+            },
+            '.arc-session-user-unlogin svg': {
+              transform: 'scale(1)!important',
+            },
+          }}>
+          {addons}
+        </Box>
       </Container>
     </Root>
   );

package/src/SessionUser/components/logged-in.tsx

@@ -134,6 +134,7 @@ export default function LoggedIn({
         onClick={() => onTogglePopper()}
         size="medium"
         data-cy="sessionManager-logout-popup"
+        className="arc-session-user-logged-in"
         aria-label="User info button">
         <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
       </IconButton>

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

@@ -1,6 +1,6 @@
 import { Box, CircularProgress, IconButton } from '@mui/material';
 import { Icon } from '@iconify/react';
-import PersonOutlineRoundedIcon from 'iconify-icons-material-symbols-400/person-outline-rounded';
+import UserIcon from '@iconify-icons/tabler/user';
 import { useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import noop from 'lodash/noop';
@@ -30,6 +30,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
         ref={userAnchorRef}
         onClick={_onLogin}
         data-cy="sessionManager-login"
+        className="arc-session-user-unlogin"
         size="medium"
         aria-label="Login button">
         {isFirstLoading ? (
@@ -38,7 +39,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
           </Box>
         ) : (
           <Icon
-            icon={PersonOutlineRoundedIcon}
+            icon={UserIcon}
             fontSize={size}
             color={dark ? '#fff' : 'inherit'}
             style={{ transform: 'scale(1.25)' }}

package/src/Tabs/index.tsx

@@ -110,10 +110,12 @@ function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
                 '&::after': {
                   content: '""',
                   display: 'block',
+                  position: 'sticky',
+                  left: 0,
+                  zIndex: -1,
                   width: '100%',
                   height: '1px',
                   backgroundColor: colors.strokeBorderStrong,
-                  bottom: 0,
                 },
               }
             : {},