@arcblock/ux 2.12.22 → 2.12.24

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/index.js

@@ -162,13 +162,6 @@ export default function PhoneInput({
       sx: mergeSx({
         '& .MuiInputBase-input': {
           padding: 1
-        },
-        '& .MuiFormHelperText-root': {
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          transform: 'translateY(100%)',
-          margin: 0
         }
       }, props.sx // 这里传入的可能是一个数组或一个对象
       ),

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.22",
+  "version": "2.12.24",
   "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": "f6f7c7949553c8c3e66516f13f768264f480b5d6",
+  "gitHead": "1b60545e5fe97a4efa0515e7b6c02439b5dac919",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.22",
-    "@arcblock/nft-display": "^2.12.22",
-    "@arcblock/react-hooks": "^2.12.22",
+    "@arcblock/icons": "^2.12.24",
+    "@arcblock/nft-display": "^2.12.24",
+    "@arcblock/react-hooks": "^2.12.24",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

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/index.tsx

@@ -164,13 +164,6 @@ export default function PhoneInput({
             '& .MuiInputBase-input': {
               padding: 1,
             },
-            '& .MuiFormHelperText-root': {
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              transform: 'translateY(100%)',
-              margin: 0,
-            },
           },
           props.sx as any // 这里传入的可能是一个数组或一个对象
         )}

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} />;