@arcblock/ux 2.11.35 → 2.11.37

package/lib/Address/did-address.d.ts

@@ -4,6 +4,7 @@ import React, { ReactNode } from 'react';
 import type { Locale } from '../type';
 export interface HTMLDidAddressElement extends HTMLDivElement {
     copy: () => void;
+    getEl: () => HTMLDivElement;
 }
 export interface IDidAddressProps extends BoxProps {
     component?: React.ElementType;

package/lib/Address/did-address.js

@@ -69,7 +69,8 @@ const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
     handleCopy();
   };
   useImperativeHandle(ref, () => new Proxy({
-    copy: handleCopy
+    copy: handleCopy,
+    getEl: () => rootRef.current
   }, {
     get(target, key) {
       return target[key] || rootRef.current?.[key];

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSize } from 'ahooks';
+import { useLatest, useSize } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -22,6 +22,7 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const [compact, setCompact] = useState(false);
+  const isCompact = useLatest(compact);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
   const containerRef = useRef(null);
@@ -36,9 +37,20 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
 
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {
-    if (!compact && addressFullWidth === null) {
-      setAddressFullWidth(innerRef.current?.offsetWidth);
+    const innerWidth = innerRef.current?.offsetWidth || 0;
+    let resizeObserver = null;
+    setAddressFullWidth(innerWidth);
+
+    // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
+    resizeObserver = new ResizeObserver(() => {
+      if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
+        setAddressFullWidth(innerRef.current?.offsetWidth);
+      }
+    });
+    if (innerRef.current) {
+      resizeObserver.observe(innerRef.current.getEl());
     }
+    return () => resizeObserver.disconnect();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.35",
+  "version": "2.11.37",
   "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": "61ce1e356b37df6fafb6e9330deb217791005a7a",
+  "gitHead": "5b00e4fe7b54625734ce8e61e9ec41f35cb851ac",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.35",
-    "@arcblock/nft-display": "^2.11.35",
-    "@arcblock/react-hooks": "^2.11.35",
+    "@arcblock/icons": "^2.11.37",
+    "@arcblock/nft-display": "^2.11.37",
+    "@arcblock/react-hooks": "^2.11.37",
     "@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

@@ -23,6 +23,7 @@ const translations: Translations = {
 
 export interface HTMLDidAddressElement extends HTMLDivElement {
   copy: () => void;
+  getEl: () => HTMLDivElement;
 }
 export interface IDidAddressProps extends BoxProps {
   component?: React.ElementType;
@@ -98,6 +99,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
       new Proxy(
         {
           copy: handleCopy,
+          getEl: () => rootRef.current,
         },
         {
           get(target: any, key: string) {

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

@@ -1,4 +1,4 @@
-import { useSize } from 'ahooks';
+import { useLatest, useSize } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -17,6 +17,7 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
   ({ style, className, component = 'span', ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
+    const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
     const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -39,9 +40,23 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
 
     // 存储完整显示时 address 组件的宽度
     useEffect(() => {
-      if (!compact && addressFullWidth === null) {
-        setAddressFullWidth(innerRef.current?.offsetWidth);
+      const innerWidth = innerRef.current?.offsetWidth || 0;
+      let resizeObserver: ResizeObserver | null = null;
+
+      setAddressFullWidth(innerWidth);
+
+      // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
+      resizeObserver = new ResizeObserver(() => {
+        if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
+          setAddressFullWidth(innerRef.current?.offsetWidth);
+        }
+      });
+
+      if (innerRef.current) {
+        resizeObserver.observe(innerRef.current.getEl());
       }
+
+      return () => resizeObserver.disconnect();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 

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)' }}