@arcblock/ux 2.12.21 → 2.12.23

package/lib/NavMenu/nav-menu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
+import { ClickAwayListener } from '@mui/material';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -300,8 +301,8 @@ export const Sub = /*#__PURE__*/forwardRef(({
     'navmenu-item--inline': isInlineMode
   }, rest.className);
 
-  // inline mode 时使用 click 事件控制收缩/伸展子菜单
-  const props = isInlineMode ? {
+  // 统一使用 click 事件控制收缩/伸展子菜单
+  const props = {
     onClick: () => {
       if (openedIds?.includes(id)) {
         close?.(id);
@@ -309,15 +310,12 @@ export const Sub = /*#__PURE__*/forwardRef(({
         open?.(id);
       }
     }
-  } : {
-    onMouseEnter: () => open?.(id),
-    onMouseLeave: () => close?.(id)
   };
   // inline mode, 避免点击子菜单项时触发父菜单的 open/close
   const containerProps = isInlineMode ? {
     onClick: e => e.stopPropagation()
   } : {};
-  return /*#__PURE__*/_jsxs(NavMenuSub, {
+  const menu = /*#__PURE__*/_jsxs(NavMenuSub, {
     ...rest,
     className: classes,
     ...props,
@@ -351,6 +349,13 @@ export const Sub = /*#__PURE__*/forwardRef(({
       })
     })]
   });
+  if (!isInlineMode) {
+    return menu;
+  }
+  return /*#__PURE__*/_jsx(ClickAwayListener, {
+    onClickAway: () => close?.(id),
+    children: menu
+  });
 });
 Sub.displayName = 'NavMenu.Sub';
 NavMenu.Item = Item;

package/lib/PhoneInput/country-select.d.ts

@@ -1,7 +1,7 @@
 import { SelectProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
 export interface CountryDisplayOptions {
-    showFullName?: boolean;
+    hideFlag?: boolean;
 }
 export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
     value: CountryIso2;

package/lib/PhoneInput/country-select.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, forwardRef, useState, useCallback } from 'react';
+import { useMemo, forwardRef, useState } from 'react';
 import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
+import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
+import { temp as colors } from '../Colors';
 const CountrySelect = /*#__PURE__*/forwardRef(({
   value,
   onChange,
@@ -10,14 +12,15 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
   preview = false
 }, ref) => {
   const {
-    showFullName = false
+    hideFlag = true
   } = selectCountryProps || {};
   const [searchQuery, setSearchQuery] = useState('');
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find(v => v[1] === value);
     return value && item ? parseCountry(item) : {
       name: '',
-      iso2: ''
+      iso2: '',
+      dialCode: ''
     };
   }, [value]);
   const filteredCountries = useMemo(() => {
@@ -28,10 +31,7 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       return parsed.name.toLowerCase().includes(query) || parsed.iso2.toLowerCase().includes(query) || parsed.dialCode.includes(query);
     });
   }, [searchQuery]);
-  const onCountryChange = e => {
-    onChange?.(e.target.value);
-  };
-  const renderCountryContent = useCallback(code => /*#__PURE__*/_jsxs(Box, {
+  const renderCountryContent = /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
     flexWrap: "nowrap",
@@ -39,26 +39,30 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
     sx: {
       cursor: preview ? 'default' : 'pointer'
     },
-    children: [/*#__PURE__*/_jsx(FlagEmoji, {
-      iso2: code,
+    children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
+      iso2: value,
       style: {
         display: 'flex',
-        width: '24px',
+        width: 24,
         color: 'inherit'
       }
-    }), /*#__PURE__*/_jsx(Typography, {
-      children: showFullName ? countryDetail?.name : countryDetail?.iso2
+    }), /*#__PURE__*/_jsxs(Typography, {
+      component: "span",
+      sx: {
+        lineHeight: 1.5
+      },
+      children: ["+", countryDetail?.dialCode]
     })]
-  }), [preview, showFullName, countryDetail]);
+  });
   if (preview) {
-    return renderCountryContent(value);
+    return renderCountryContent;
   }
   return /*#__PURE__*/_jsxs(Select, {
     ref: ref,
     MenuProps: {
       style: {
-        height: '300px',
-        top: '10px'
+        maxHeight: 400,
+        top: 2
       },
       anchorOrigin: {
         vertical: 'bottom',
@@ -70,21 +74,26 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       }
     },
     sx: {
-      width: '100%',
-      fieldset: {
-        display: 'none'
-      },
       '&.Mui-focused:has(div[aria-expanded="false"])': {
         fieldset: {
           display: 'block'
         }
       },
       '.MuiSelect-select': {
-        padding: '8px',
+        padding: 1,
         paddingRight: '24px !important'
       },
       svg: {
-        right: 0
+        right: 4,
+        top: 10
+      },
+      '&:hover': {
+        'fieldset.MuiOutlinedInput-notchedOutline': {
+          borderColor: colors.dividerColor
+        }
+      },
+      'fieldset.MuiOutlinedInput-notchedOutline': {
+        borderColor: colors.dividerColor
       },
       '.MuiMenuItem-root': {
         justifyContent: 'flex-start'
@@ -92,8 +101,15 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       ...sx
     },
     value: value,
-    onChange: onCountryChange,
-    renderValue: renderCountryContent,
+    onChange: e => onChange?.(e.target.value)
+    // eslint-disable-next-line react/no-unstable-nested-components
+    ,
+    IconComponent: props => /*#__PURE__*/_jsx(ArrowDownwardIcon, {
+      ...props,
+      width: 20,
+      height: 20
+    }),
+    renderValue: () => renderCountryContent,
     children: [/*#__PURE__*/_jsx(Box, {
       sx: {
         p: 1,
@@ -109,31 +125,24 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
         value: searchQuery,
         onChange: e => setSearchQuery(e.target.value),
         onClick: e => e.stopPropagation(),
-        onKeyDown: e => e.stopPropagation(),
-        sx: {
-          '& .MuiOutlinedInput-root': {
-            '& fieldset': {
-              borderColor: 'divider'
-            }
-          }
-        }
+        onKeyDown: e => e.stopPropagation()
       })
     }), filteredCountries.map(c => {
       const parsed = parseCountry(c);
       return /*#__PURE__*/_jsxs(MenuItem, {
         value: parsed.iso2,
-        children: [/*#__PURE__*/_jsx(FlagEmoji, {
+        children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
           iso2: parsed.iso2,
           style: {
-            marginRight: '8px',
-            width: '24px'
+            marginRight: 8,
+            width: 24
           }
         }), /*#__PURE__*/_jsx(Typography, {
-          marginRight: "8px",
+          marginRight: 1,
           children: parsed.name
         }), /*#__PURE__*/_jsxs(Typography, {
           color: "gray",
-          children: ["+", parsed.dialCode]
+          children: ["(+", parsed.dialCode, ")"]
         })]
       }, parsed.iso2);
     })]

package/lib/PhoneInput/index.d.ts

@@ -12,6 +12,5 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
     preview?: boolean;
     allowDial?: boolean;
 }
-export declare function getCountryCallingCode(country: CountryIso2): string;
 export declare function validatePhoneNumber(phone: string): boolean;
 export default function PhoneInput({ value, onChange, placeholder, countryDisplayOptions, preview, allowDial, ...props }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/PhoneInput/index.js

@@ -1,21 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Box, InputAdornment, TextField, Typography } from '@mui/material';
+import { Box, TextField, Typography } from '@mui/material';
 import { defaultCountries, usePhoneInput, parseCountry } from 'react-international-phone';
 import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect from './country-select';
-export function getCountryCallingCode(country) {
-  const countryData = defaultCountries.find(c => parseCountry(c).iso2 === country);
-  if (countryData) {
-    return parseCountry(countryData).dialCode.replace('+', '');
-  }
-  return '';
-}
+import { mergeSx } from '../Util/style';
 export function validatePhoneNumber(phone) {
   return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', {
     strictMode: true
   });
 }
+
+// 从带区号的电话号码中提取纯号码部分
+function extractPhoneWithoutCode(phone, dialCode) {
+  if (!phone) return '';
+  // 先去除区号
+  const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
+  // 去除非数字字符，但保留括号
+  return phoneWithoutCode.replace(/[^\d()]/g, '');
+}
+
+// 添加区号到纯号码
+function addCountryCodeToPhone(phone, dialCode) {
+  if (!phone) return '';
+  return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
+}
+
+// 获取不带+号的区号
+function getDialCodeWithoutPlus(dialCode) {
+  return dialCode.replace(/^\+/, '');
+}
 export default function PhoneInput({
   value = {
     country: 'us',
@@ -28,39 +42,73 @@ export default function PhoneInput({
   allowDial = true,
   ...props
 }) {
-  // 在使用 usePhoneInput 之前处理电话号码
-  const phoneWithPrefix = useMemo(() => {
-    if (!value.phone) return '';
-    // 如果电话号码已经包含 + 号，说明已经有区号了
-    if (value.phone.startsWith('+')) return value.phone;
-    // 获取国家区号并添加到号码前
-    const countryCode = getCountryCallingCode(value.country);
-    return `+${countryCode}${value.phone}`;
-  }, [value.phone, value.country]);
+  // 创建国家代码映射表，避免重复解析
+  const countryMap = useMemo(() => {
+    const map = new Map();
+    defaultCountries.forEach(country => {
+      const parsed = parseCountry(country);
+      map.set(parsed.iso2, parsed);
+    });
+    return map;
+  }, []);
+
+  // 使用 react-international-phone 的 hook
   const {
     phone,
-    handlePhoneValueChange,
     inputRef,
-    country,
-    setCountry
+    country
   } = usePhoneInput({
     defaultCountry: value.country,
-    value: phoneWithPrefix,
+    value: value.phone,
     countries: defaultCountries,
     onChange: data => {
-      // 确保类型匹配 PhoneValue 接口
-      const phoneValue = {
-        country: data.country,
-        phone: data.phone
-      };
-      onChange?.(phoneValue);
+      if (!preview && onChange) {
+        onChange({
+          country: data.country,
+          phone: data.phone
+        });
+      }
     }
   });
-  const onCountryChange = v => {
-    if (!preview) {
-      setCountry(v);
-    }
+
+  // 获取当前国家的区号（不带+号）
+  const currentDialCode = useMemo(() => {
+    const countryData = countryMap.get(country);
+    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
+  }, [country, countryMap]);
+
+  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
+  const displayPhone = useMemo(() => extractPhoneWithoutCode(phone, currentDialCode), [phone, currentDialCode]);
+
+  // 创建更新后的 PhoneValue 对象
+  const createUpdatedPhoneValue = (countryIso2, phoneWithoutCode) => {
+    const countryData = countryMap.get(countryIso2);
+    if (!countryData) return {
+      country: countryIso2,
+      phone: ''
+    };
+    const dialCode = getDialCodeWithoutPlus(countryData.dialCode);
+    return {
+      country: countryIso2,
+      phone: addCountryCodeToPhone(phoneWithoutCode, dialCode)
+    };
   };
+
+  // 处理电话号码变更
+  const onPhoneChange = e => {
+    if (preview) return;
+    // 去除用户输入中的非数字字符，但保留括号
+    const cleanedValue = e.target.value.replace(/[^\d()]/g, '');
+    onChange?.(createUpdatedPhoneValue(country, cleanedValue));
+  };
+
+  // 处理国家变更
+  const onCountryChange = newCountry => {
+    if (preview) return;
+    onChange?.(createUpdatedPhoneValue(newCountry, displayPhone));
+  };
+
+  // 预览模式
   if (preview) {
     const isValid = phone && validatePhoneNumber(phone);
     const canDial = allowDial && isValid;
@@ -90,56 +138,34 @@ export default function PhoneInput({
         sx: {
           ml: 0.5
         },
-        children: phone
+        children: displayPhone
       })]
     });
   }
-  return /*#__PURE__*/_jsx(TextField, {
-    ...props,
-    value: phone,
-    onChange: preview ? undefined : handlePhoneValueChange,
-    placeholder: placeholder,
-    className: "phone-input",
-    inputRef: inputRef,
-    disabled: preview,
-    sx: {
-      '&>.MuiInputBase-root': {
-        paddingLeft: '8px',
-        cursor: preview ? 'default' : undefined
-      },
-      ...(props.sx ?? {}),
-      ...(preview ? {
-        '& .Mui-disabled': {
-          '-webkit-text-fill-color': 'inherit',
-          color: 'inherit'
-        },
-        fieldset: {
-          display: 'none'
+  // 编辑模式
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 0.5,
+    children: [/*#__PURE__*/_jsx(CountrySelect, {
+      value: country,
+      onChange: onCountryChange,
+      preview: false,
+      selectCountryProps: countryDisplayOptions
+    }), /*#__PURE__*/_jsx(TextField, {
+      ...props,
+      value: displayPhone,
+      onChange: onPhoneChange,
+      placeholder: placeholder,
+      className: "phone-input",
+      inputRef: inputRef,
+      sx: mergeSx({
+        '& .MuiInputBase-input': {
+          padding: 1
         }
-      } : {})
-    },
-    InputProps: {
-      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-        position: "start",
-        style: {
-          marginRight: '2px',
-          marginLeft: '-8px'
-        },
-        children: /*#__PURE__*/_jsx(CountrySelect, {
-          value: country,
-          onChange: onCountryChange,
-          preview: preview,
-          selectCountryProps: countryDisplayOptions,
-          sx: {
-            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              borderColor: 'transparent'
-            },
-            opacity: preview ? 1 : undefined,
-            cursor: preview ? 'default' : undefined
-          }
-        })
-      }),
-      ...(props.InputProps ?? {})
-    }
+      }, props.sx // 这里传入的可能是一个数组或一个对象
+      ),
+      InputProps: props.InputProps ?? {}
+    })]
   });
 }

package/lib/SessionBlocklet/index.d.ts

@@ -1,7 +1,9 @@
+import { type BoxProps } from '@mui/material';
 import type { Locale } from '../type';
-export interface SessionBlockletProps {
+export interface SessionBlockletProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     session: Record<string, any>;
     locale?: Locale;
     size?: number;
+    popperType?: 'hover' | 'click';
 }
-export default function SessionBlocklet({ session, locale, size }: SessionBlockletProps): import("react/jsx-runtime").JSX.Element | null;
+export default function SessionBlocklet({ session, locale, size, popperType, sx, ...rest }: SessionBlockletProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/SessionBlocklet/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Box, ClickAwayListener, Fade, IconButton, List, ListItem, ListItemButton, Paper, Popper, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
@@ -13,7 +13,10 @@ import { getTranslation } from '../Util';
 export default function SessionBlocklet({
   session,
   locale = 'zh',
-  size = 24
+  size = 24,
+  popperType = 'click',
+  sx,
+  ...rest
 }) {
   const blocklet = window?.blocklet || {};
   const sessionMenuList = (blocklet.navigation || []
@@ -37,14 +40,27 @@ export default function SessionBlocklet({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
+  const handleEventProps = popperType === 'hover' ? {
+    onMouseEnter: () => onTogglePopper(true),
+    onMouseLeave: () => onTogglePopper(false)
+  } : {
+    onClick: () => onTogglePopper()
+  };
   if (sessionMenuList.length === 0 || !session?.user) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...sx
+    },
+    ...rest,
+    ...handleEventProps,
     children: [/*#__PURE__*/_jsx(IconButton, {
       size: "medium",
       ref: popperAnchorRef,
-      onClick: () => onTogglePopper(),
       children: /*#__PURE__*/_jsx(Icon, {
         icon: DashboardOutlineRoundedIcon,
         fontSize: size,

package/lib/SessionUser/components/logged-in.d.ts

@@ -1,10 +1,12 @@
+import { type BoxProps } from '@mui/material';
 import type { Locale, Session } from '../../type';
-export interface LoggedInProps {
+export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     session: Session;
     dark?: false | true;
     onBindWallet?: () => void;
     isBlocklet?: true | false;
     locale?: Locale;
     size?: number;
+    popperType?: 'hover' | 'click';
 }
-export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, locale, size, }: LoggedInProps): import("react/jsx-runtime").JSX.Element;
+export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, locale, size, popperType, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;

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

@@ -30,7 +30,10 @@ export default function LoggedIn({
   onBindWallet = noop,
   isBlocklet = true,
   locale = 'en',
-  size = 24
+  size = 24,
+  popperType = 'click',
+  sx,
+  ...rest
 }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -45,6 +48,12 @@ export default function LoggedIn({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
+  const handleEventProps = popperType === 'hover' ? {
+    onMouseEnter: () => onTogglePopper(true),
+    onMouseLeave: () => onTogglePopper(false)
+  } : {
+    onClick: () => onTogglePopper()
+  };
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
@@ -97,10 +106,17 @@ export default function LoggedIn({
     Copy(link);
     Toast.success(t('inviteCopied'));
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...sx
+    },
+    ...rest,
+    ...handleEventProps,
     children: [/*#__PURE__*/_jsx(IconButton, {
       ref: popperAnchorRef,
-      onClick: () => onTogglePopper(),
       size: "medium",
       "data-cy": "sessionManager-logout-popup",
       className: "arc-session-user-logged-in",
@@ -129,7 +145,7 @@ export default function LoggedIn({
         onClickAway: e => {
           e.preventDefault();
           e.stopPropagation();
-          onTogglePopper(false);
+          currentState.open = false;
         },
         children: /*#__PURE__*/_jsx(Fade, {
           ...TransitionProps,

package/lib/SessionUser/index.d.ts

@@ -4,5 +4,6 @@ export interface SessionUserProps {
     onBindWallet?: () => void;
     locale?: Locale;
     size?: number;
+    popperType?: 'hover' | 'click';
 }
-export default function SessionUser({ session, onBindWallet, locale, size }: SessionUserProps): import("react/jsx-runtime").JSX.Element;
+export default function SessionUser({ session, onBindWallet, locale, size, popperType, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;

package/lib/SessionUser/index.js

@@ -7,7 +7,8 @@ export default function SessionUser({
   session,
   onBindWallet = noop,
   locale = 'en',
-  size = 24
+  size = 24,
+  popperType = 'click'
 }) {
   const isBlocklet = useCreation(() => {
     return !!globalThis?.blocklet;
@@ -18,7 +19,8 @@ export default function SessionUser({
       session: session,
       onBindWallet: onBindWallet,
       locale: locale,
-      size: size
+      size: size,
+      popperType: popperType
     });
   }
   return /*#__PURE__*/_jsx(UnLogin, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.21",
+  "version": "2.12.23",
   "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": "40bf102ddc28c826589a36b939d4fce57ea86486",
+  "gitHead": "13125f3eb13c42e5d0abbe6d3c33f5b315cfdd88",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.21",
-    "@arcblock/nft-display": "^2.12.21",
-    "@arcblock/react-hooks": "^2.12.21",
+    "@arcblock/icons": "^2.12.23",
+    "@arcblock/nft-display": "^2.12.23",
+    "@arcblock/react-hooks": "^2.12.23",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -110,7 +110,7 @@
     "react-error-boundary": "^3.1.4",
     "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
-    "react-international-phone": "^3.1.2",
+    "react-international-phone": "3.1.2",
     "react-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",
     "react-player": "^1.15.3",

package/src/NavMenu/nav-menu.tsx

@@ -1,5 +1,5 @@
 import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
-import { type SxProps } from '@mui/material';
+import { ClickAwayListener, type SxProps } from '@mui/material';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -371,29 +371,19 @@ export const Sub = forwardRef<HTMLLIElement, SubProps>(
       rest.className
     );
 
-    // inline mode 时使用 click 事件控制收缩/伸展子菜单
-    const props = isInlineMode
-      ? {
-          onClick: () => {
-            if (openedIds?.includes(id)) {
-              close?.(id);
-            } else {
-              open?.(id);
-            }
-          },
+    // 统一使用 click 事件控制收缩/伸展子菜单
+    const props = {
+      onClick: () => {
+        if (openedIds?.includes(id)) {
+          close?.(id);
+        } else {
+          open?.(id);
         }
-      : {
-          onMouseEnter: () => open?.(id),
-          onMouseLeave: () => close?.(id),
-        };
+      },
+    };
     // inline mode, 避免点击子菜单项时触发父菜单的 open/close
-    const containerProps = isInlineMode
-      ? {
-          onClick: (e: React.MouseEvent) => e.stopPropagation(),
-        }
-      : {};
-
-    return (
+    const containerProps = isInlineMode ? { onClick: (e: React.MouseEvent) => e.stopPropagation() } : {};
+    const menu = (
       <NavMenuSub {...rest} className={classes} {...props} ref={ref} $activeTextColor={activeTextColor}>
         {icon && <span className="navmenu-item__icon">{icon}</span>}
         <div className="navmenu-item__content">
@@ -414,6 +404,12 @@ export const Sub = forwardRef<HTMLLIElement, SubProps>(
         </SubContainer>
       </NavMenuSub>
     );
+
+    if (!isInlineMode) {
+      return menu;
+    }
+
+    return <ClickAwayListener onClickAway={() => close?.(id)}>{menu}</ClickAwayListener>;
   }
 );
 Sub.displayName = 'NavMenu.Sub';

package/src/PhoneInput/country-select.tsx

@@ -1,10 +1,12 @@
-import { useMemo, forwardRef, useState, useCallback } from 'react';
+import { useMemo, forwardRef, useState } from 'react';
 import { Box, MenuItem, Select, Typography, SelectProps, TextField } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import type { CountryIso2 } from 'react-international-phone';
+import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
+import { temp as colors } from '../Colors';
 
 export interface CountryDisplayOptions {
-  showFullName?: boolean;
+  hideFlag?: boolean;
 }
 
 export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
@@ -16,16 +18,17 @@ export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChang
 
 const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
   ({ value, onChange, sx = {}, selectCountryProps, preview = false }, ref) => {
-    const { showFullName = false } = selectCountryProps || {};
+    const { hideFlag = true } = selectCountryProps || {};
     const [searchQuery, setSearchQuery] = useState('');
 
     const countryDetail = useMemo(() => {
       const item = defaultCountries.find((v) => v[1] === value);
-      return value && item ? parseCountry(item) : { name: '', iso2: '' };
+      return value && item ? parseCountry(item) : { name: '', iso2: '', dialCode: '' };
     }, [value]);
 
     const filteredCountries = useMemo(() => {
       if (!searchQuery) return defaultCountries;
+
       const query = searchQuery.toLowerCase();
       return defaultCountries.filter((country) => {
         const parsed = parseCountry(country);
@@ -37,71 +40,52 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
       });
     }, [searchQuery]);
 
-    const onCountryChange = (e: any) => {
-      onChange?.(e.target.value as CountryIso2);
-    };
-
-    const renderCountryContent = useCallback(
-      (code: CountryIso2) => (
-        <Box
-          display="flex"
-          alignItems="center"
-          flexWrap="nowrap"
-          gap={0.5}
-          sx={{ cursor: preview ? 'default' : 'pointer' }}>
-          <FlagEmoji iso2={code} style={{ display: 'flex', width: '24px', color: 'inherit' }} />
-          <Typography>{showFullName ? countryDetail?.name : countryDetail?.iso2}</Typography>
-        </Box>
-      ),
-      [preview, showFullName, countryDetail]
+    const renderCountryContent = (
+      <Box
+        display="flex"
+        alignItems="center"
+        flexWrap="nowrap"
+        gap={0.5}
+        sx={{ cursor: preview ? 'default' : 'pointer' }}>
+        {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
+        <Typography component="span" sx={{ lineHeight: 1.5 }}>
+          +{countryDetail?.dialCode}
+        </Typography>
+      </Box>
     );
 
     if (preview) {
-      return renderCountryContent(value);
+      return renderCountryContent;
     }
 
     return (
       <Select
         ref={ref}
         MenuProps={{
-          style: {
-            height: '300px',
-            top: '10px',
-          },
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
+          style: { maxHeight: 400, top: 2 },
+          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+          transformOrigin: { vertical: 'top', horizontal: 'left' },
         }}
         sx={{
-          width: '100%',
-          fieldset: {
-            display: 'none',
-          },
-          '&.Mui-focused:has(div[aria-expanded="false"])': {
-            fieldset: {
-              display: 'block',
+          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
+          '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
+          svg: { right: 4, top: 10 },
+          '&:hover': {
+            'fieldset.MuiOutlinedInput-notchedOutline': {
+              borderColor: colors.dividerColor,
             },
           },
-          '.MuiSelect-select': {
-            padding: '8px',
-            paddingRight: '24px !important',
-          },
-          svg: {
-            right: 0,
-          },
-          '.MuiMenuItem-root': {
-            justifyContent: 'flex-start',
+          'fieldset.MuiOutlinedInput-notchedOutline': {
+            borderColor: colors.dividerColor,
           },
+          '.MuiMenuItem-root': { justifyContent: 'flex-start' },
           ...sx,
         }}
         value={value}
-        onChange={onCountryChange}
-        renderValue={renderCountryContent}>
+        onChange={(e) => onChange?.(e.target.value as CountryIso2)}
+        // eslint-disable-next-line react/no-unstable-nested-components
+        IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+        renderValue={() => renderCountryContent}>
         <Box sx={{ p: 1, position: 'sticky', top: 0, bgcolor: 'background.paper', zIndex: 1 }}>
           <TextField
             size="small"
@@ -111,22 +95,16 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
             onChange={(e) => setSearchQuery(e.target.value)}
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                '& fieldset': {
-                  borderColor: 'divider',
-                },
-              },
-            }}
           />
         </Box>
-        {filteredCountries.map((c: any) => {
+
+        {filteredCountries.map((c) => {
           const parsed = parseCountry(c);
           return (
             <MenuItem key={parsed.iso2} value={parsed.iso2}>
-              <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px', width: '24px' }} />
-              <Typography marginRight="8px">{parsed.name}</Typography>
-              <Typography color="gray">+{parsed.dialCode}</Typography>
+              {hideFlag ? null : <FlagEmoji iso2={parsed.iso2} style={{ marginRight: 8, width: 24 }} />}
+              <Typography marginRight={1}>{parsed.name}</Typography>
+              <Typography color="gray">(+{parsed.dialCode})</Typography>
             </MenuItem>
           );
         })}

package/src/PhoneInput/index.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
-import { Box, InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
+import { Box, TextField, TextFieldProps, Typography } from '@mui/material';
 import { defaultCountries, CountryIso2, usePhoneInput, parseCountry } from 'react-international-phone';
 import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect, { CountryDisplayOptions } from './country-select';
+import { mergeSx } from '../Util/style';
 
 export interface PhoneValue {
   country: CountryIso2;
-  phone: string;
+  phone: string; // 带区号的完整电话号码，如 +86123456789
 }
 
 export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
@@ -17,18 +18,30 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
   allowDial?: boolean; // 是否允许拨号, 只在 preview 为 true 时有效
 }
 
-export function getCountryCallingCode(country: CountryIso2): string {
-  const countryData = defaultCountries.find((c) => parseCountry(c).iso2 === country);
-  if (countryData) {
-    return parseCountry(countryData).dialCode.replace('+', '');
-  }
-  return '';
-}
-
 export function validatePhoneNumber(phone: string): boolean {
   return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', { strictMode: true });
 }
 
+// 从带区号的电话号码中提取纯号码部分
+function extractPhoneWithoutCode(phone: string, dialCode: string): string {
+  if (!phone) return '';
+  // 先去除区号
+  const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
+  // 去除非数字字符，但保留括号
+  return phoneWithoutCode.replace(/[^\d()]/g, '');
+}
+
+// 添加区号到纯号码
+function addCountryCodeToPhone(phone: string, dialCode: string): string {
+  if (!phone) return '';
+  return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
+}
+
+// 获取不带+号的区号
+function getDialCodeWithoutPlus(dialCode: string): string {
+  return dialCode.replace(/^\+/, '');
+}
+
 export default function PhoneInput({
   value = { country: 'us', phone: '' },
   onChange,
@@ -38,36 +51,67 @@ export default function PhoneInput({
   allowDial = true,
   ...props
 }: PhoneInputProps) {
-  // 在使用 usePhoneInput 之前处理电话号码
-  const phoneWithPrefix = useMemo(() => {
-    if (!value.phone) return '';
-    // 如果电话号码已经包含 + 号，说明已经有区号了
-    if (value.phone.startsWith('+')) return value.phone;
-    // 获取国家区号并添加到号码前
-    const countryCode = getCountryCallingCode(value.country);
-    return `+${countryCode}${value.phone}`;
-  }, [value.phone, value.country]);
-
-  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
+  // 创建国家代码映射表，避免重复解析
+  const countryMap = useMemo(() => {
+    const map = new Map<CountryIso2, ReturnType<typeof parseCountry>>();
+    defaultCountries.forEach((country) => {
+      const parsed = parseCountry(country);
+      map.set(parsed.iso2, parsed);
+    });
+    return map;
+  }, []);
+
+  // 使用 react-international-phone 的 hook
+  const { phone, inputRef, country } = usePhoneInput({
     defaultCountry: value.country,
-    value: phoneWithPrefix,
+    value: value.phone,
     countries: defaultCountries,
     onChange: (data) => {
-      // 确保类型匹配 PhoneValue 接口
-      const phoneValue: PhoneValue = {
-        country: data.country,
-        phone: data.phone,
-      };
-      onChange?.(phoneValue);
+      if (!preview && onChange) {
+        onChange({
+          country: data.country,
+          phone: data.phone,
+        });
+      }
     },
   });
 
-  const onCountryChange = (v: CountryIso2) => {
-    if (!preview) {
-      setCountry(v);
-    }
+  // 获取当前国家的区号（不带+号）
+  const currentDialCode = useMemo(() => {
+    const countryData = countryMap.get(country);
+    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
+  }, [country, countryMap]);
+
+  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
+  const displayPhone = useMemo(() => extractPhoneWithoutCode(phone, currentDialCode), [phone, currentDialCode]);
+
+  // 创建更新后的 PhoneValue 对象
+  const createUpdatedPhoneValue = (countryIso2: CountryIso2, phoneWithoutCode: string): PhoneValue => {
+    const countryData = countryMap.get(countryIso2);
+    if (!countryData) return { country: countryIso2, phone: '' };
+
+    const dialCode = getDialCodeWithoutPlus(countryData.dialCode);
+    return {
+      country: countryIso2,
+      phone: addCountryCodeToPhone(phoneWithoutCode, dialCode),
+    };
+  };
+
+  // 处理电话号码变更
+  const onPhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (preview) return;
+    // 去除用户输入中的非数字字符，但保留括号
+    const cleanedValue = e.target.value.replace(/[^\d()]/g, '');
+    onChange?.(createUpdatedPhoneValue(country, cleanedValue));
   };
 
+  // 处理国家变更
+  const onCountryChange = (newCountry: CountryIso2) => {
+    if (preview) return;
+    onChange?.(createUpdatedPhoneValue(newCountry, displayPhone));
+  };
+
+  // 预览模式
   if (preview) {
     const isValid = phone && validatePhoneNumber(phone);
     const canDial = allowDial && isValid;
@@ -95,57 +139,36 @@ export default function PhoneInput({
           },
         }}>
         <CountrySelect value={country} preview={preview} />
-        <Typography sx={{ ml: 0.5 }}>{phone}</Typography>
+        <Typography sx={{ ml: 0.5 }}>{displayPhone}</Typography>
       </Box>
     );
   }
+  // 编辑模式
   return (
-    <TextField
-      {...props}
-      value={phone}
-      onChange={preview ? undefined : handlePhoneValueChange}
-      placeholder={placeholder}
-      className="phone-input"
-      inputRef={inputRef}
-      disabled={preview}
-      sx={{
-        '&>.MuiInputBase-root': {
-          paddingLeft: '8px',
-          cursor: preview ? 'default' : undefined,
-        },
-        ...(props.sx ?? {}),
-        ...(preview
-          ? {
-              '& .Mui-disabled': {
-                '-webkit-text-fill-color': 'inherit',
-                color: 'inherit',
-              },
-              fieldset: {
-                display: 'none',
-              },
-            }
-          : {}),
-      }}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
-            <CountrySelect
-              value={country}
-              onChange={onCountryChange}
-              preview={preview}
-              selectCountryProps={countryDisplayOptions}
-              sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  borderColor: 'transparent',
-                },
-                opacity: preview ? 1 : undefined,
-                cursor: preview ? 'default' : undefined,
-              }}
-            />
-          </InputAdornment>
-        ),
-        ...(props.InputProps ?? {}),
-      }}
-    />
+    <Box display="flex" alignItems="flex-start" gap={0.5}>
+      <CountrySelect
+        value={country}
+        onChange={onCountryChange}
+        preview={false}
+        selectCountryProps={countryDisplayOptions}
+      />
+      <TextField
+        {...props}
+        value={displayPhone}
+        onChange={onPhoneChange}
+        placeholder={placeholder}
+        className="phone-input"
+        inputRef={inputRef}
+        sx={mergeSx(
+          {
+            '& .MuiInputBase-input': {
+              padding: 1,
+            },
+          },
+          props.sx as any // 这里传入的可能是一个数组或一个对象
+        )}
+        InputProps={props.InputProps ?? {}}
+      />
+    </Box>
   );
 }

package/src/SessionBlocklet/index.tsx

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import {
   Box,
+  type BoxProps,
   ClickAwayListener,
   Fade,
   IconButton,
@@ -23,13 +24,21 @@ import SessionPermission from '../SessionPermission';
 import { getTranslation } from '../Util';
 import type { Locale } from '../type';
 
-export interface SessionBlockletProps {
+export interface SessionBlockletProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
   session: Record<string, any>;
   locale?: Locale;
   size?: number;
+  popperType?: 'hover' | 'click';
 }
 
-export default function SessionBlocklet({ session, locale = 'zh', size = 24 }: SessionBlockletProps) {
+export default function SessionBlocklet({
+  session,
+  locale = 'zh',
+  size = 24,
+  popperType = 'click',
+  sx,
+  ...rest
+}: SessionBlockletProps) {
   const blocklet = window?.blocklet || {};
   const sessionMenuList = (blocklet.navigation || [])
     // HACK 过滤掉默认插入的 /sessionManager 菜单
@@ -54,14 +63,21 @@ export default function SessionBlocklet({ session, locale = 'zh', size = 24 }: S
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
+  const handleEventProps =
+    popperType === 'hover'
+      ? { onMouseEnter: () => onTogglePopper(true), onMouseLeave: () => onTogglePopper(false) }
+      : { onClick: () => onTogglePopper() };
 
   if (sessionMenuList.length === 0 || !session?.user) {
     return null;
   }
 
   return (
-    <>
-      <IconButton size="medium" ref={popperAnchorRef} onClick={() => onTogglePopper()}>
+    <Box
+      sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...sx }}
+      {...rest}
+      {...handleEventProps}>
+      <IconButton size="medium" ref={popperAnchorRef}>
         <Icon icon={DashboardOutlineRoundedIcon} fontSize={size} style={{ transform: 'scale(1.08)' }} />
       </IconButton>
       <Popper
@@ -172,6 +188,6 @@ export default function SessionBlocklet({ session, locale = 'zh', size = 24 }: S
           </ClickAwayListener>
         )}
       </Popper>
-    </>
+    </Box>
   );
 }

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

@@ -38,13 +38,14 @@ const getInviteLink = (inviter: string) => {
   return url.toString();
 };
 
-export interface LoggedInProps {
+export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
   session: Session;
   dark?: false | true;
   onBindWallet?: () => void;
   isBlocklet?: true | false;
   locale?: Locale;
   size?: number;
+  popperType?: 'hover' | 'click';
 }
 
 export default function LoggedIn({
@@ -54,6 +55,9 @@ export default function LoggedIn({
   isBlocklet = true,
   locale = 'en',
   size = 24,
+  popperType = 'click',
+  sx,
+  ...rest
 }: LoggedInProps) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -68,6 +72,10 @@ export default function LoggedIn({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
+  const handleEventProps =
+    popperType === 'hover'
+      ? { onMouseEnter: () => onTogglePopper(true), onMouseLeave: () => onTogglePopper(false) }
+      : { onClick: () => onTogglePopper() };
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
@@ -127,10 +135,12 @@ export default function LoggedIn({
   });
 
   return (
-    <>
+    <Box
+      sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...sx }}
+      {...rest}
+      {...handleEventProps}>
       <IconButton
         ref={popperAnchorRef}
-        onClick={() => onTogglePopper()}
         size="medium"
         data-cy="sessionManager-logout-popup"
         className="arc-session-user-logged-in"
@@ -151,7 +161,7 @@ export default function LoggedIn({
             onClickAway={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              onTogglePopper(false);
+              currentState.open = false;
             }}>
             <Fade {...TransitionProps} timeout={350}>
               <Paper
@@ -220,7 +230,7 @@ export default function LoggedIn({
           </ClickAwayListener>
         )}
       </Popper>
-    </>
+    </Box>
   );
 }
 

package/src/SessionUser/index.tsx

@@ -10,16 +10,30 @@ export interface SessionUserProps {
   onBindWallet?: () => void;
   locale?: Locale;
   size?: number;
+  popperType?: 'hover' | 'click';
 }
 
-export default function SessionUser({ session, onBindWallet = noop, locale = 'en', size = 24 }: SessionUserProps) {
+export default function SessionUser({
+  session,
+  onBindWallet = noop,
+  locale = 'en',
+  size = 24,
+  popperType = 'click',
+}: SessionUserProps) {
   const isBlocklet = useCreation(() => {
     return !!globalThis?.blocklet;
   }, []);
 
   if (session.user) {
     return (
-      <LoggedIn isBlocklet={isBlocklet} session={session} onBindWallet={onBindWallet} locale={locale} size={size} />
+      <LoggedIn
+        isBlocklet={isBlocklet}
+        session={session}
+        onBindWallet={onBindWallet}
+        locale={locale}
+        size={size}
+        popperType={popperType}
+      />
     );
   }
   return <UnLogin session={session} locale={locale} size={size} />;