@arcblock/ux 2.12.2 → 2.12.4

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

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import { getFontSize } from '../Util';
 
 /**
  * 根据父容器宽度自动切换 compact 模式
@@ -14,7 +15,7 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  */
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
-  ({ style, className, component = 'span', size, ...rest }, ref) => {
+  ({ style, className, component = 'span', size = 0, ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
     const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
@@ -79,7 +80,7 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     }, [containerWidth, addressFullWidth]);
 
     return (
-      <Root as={component} ref={containerRef} style={style} className={className}>
+      <Root as={component} ref={containerRef} style={style} className={className} size={size} inline={rest.inline}>
         <StyledDidAddress
           style={{
             position: loading ? 'absolute' : 'static',
@@ -107,12 +108,17 @@ export interface IResponsiveDidAddressProps extends IDidAddressProps {
   component?: React.ElementType;
 }
 
-const Root = styled(Box)`
+type RootProps = {
+  size: number;
+  inline?: boolean;
+};
+
+const Root = styled(Box, { shouldForwardProp: (prop) => prop !== 'size' })<RootProps>`
   display: block;
   width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
-  font-size: 0;
+  font-size: ${({ size }) => getFontSize(size)};
   overflow: hidden;
-  ${({ inline }: any) =>
+  ${({ inline }) =>
     inline &&
     `
     display: inline-block;

package/src/NavMenu/nav-menu.tsx

@@ -5,7 +5,8 @@ import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuI
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
-import { NavMenuRoot, NavMenuList, NavMenuItem, NavMenuSub, NavMenuSubList } from './style';
+import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
+import { SubContainer } from './sub-container';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children: React.ReactNode) {
@@ -67,7 +68,6 @@ function NavMenu({
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
-
   const currentState = useReactive({
     activeId,
     openedIds: [] as string[],
@@ -112,6 +112,7 @@ function NavMenu({
   const navMenuRef = useRef<HTMLUListElement | null>(null);
   const itemRefs = useRef<HTMLElement[]>([]);
   const moreIconRef = useRef<HTMLLIElement | null>(null);
+  const containerWidth = useRef(0);
   const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? { marginLeft: '0px' } : undefined;
 
@@ -136,7 +137,6 @@ function NavMenu({
       let totalWidthUsed = 0;
       let newHiddenCount = 0;
       let leftAllHidden = false;
-      const containerWidth = containerSize?.width || 0;
       const moreIconWidth = moreIconRef.current
         ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft)
         : 0;
@@ -147,7 +147,7 @@ function NavMenu({
           const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
           const currentItemWidth = item.offsetWidth + marginLeft;
 
-          if (containerWidth - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
+          if (containerWidth.current - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
             totalWidthUsed += currentItemWidth;
           } else {
             item.style.display = 'none';
@@ -165,6 +165,7 @@ function NavMenu({
   );
 
   useLayoutEffect(() => {
+    containerWidth.current = containerSize?.width || navMenuRef.current?.clientWidth || 0;
     if (mode === 'horizontal') {
       checkItemsFit();
     }
@@ -195,8 +196,15 @@ function NavMenu({
 
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
 
-  const renderItem = (item: ItemOptions, index: number, isTopLevel = false) => {
+  const renderItem = (item: ItemOptions, index: number, level = 0) => {
+    const isTopLevel = level === 0;
+
     if (item?.children) {
+      // 只渲染两级子菜单
+      if (level > 0) {
+        return null;
+      }
+
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
       return (
         <Sub
@@ -215,7 +223,7 @@ function NavMenu({
           {typeof item.children === 'function'
             ? item.children
             : item.children.map((childItem, childIndex: number) =>
-                renderItem({ ...childItem, variant: 'panel' }, childIndex, false)
+                renderItem({ ...childItem, variant: 'panel' }, childIndex, level + 1)
               )}
         </Sub>
       );
@@ -243,21 +251,24 @@ function NavMenu({
   };
 
   const content = items
-    ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index))
+    ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index, 1))
     : children?.slice(-currentState.hiddenItemCount);
 
+  // 当前展开的子菜单
+  const openedId = currentState.openedIds[0];
+
   return (
     <NavMenuProvider value={contextValue}>
-      <NavMenuRoot {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
-        <NavMenuList className={clsx('navmenu-list', `navmenu-list--${mode}`)} ref={navMenuRef}>
-          {items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || [])}
+      <NavMenuStyled {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
+        <NavMenuRoot className={clsx('navmenu-root', `navmenu-root--${mode}`)} ref={navMenuRef}>
+          {items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || [])}
           {currentState.hiddenItemCount > 0 && (
             <Sub expandIcon={false} icon={icon} label="" ref={moreIconRef} style={style}>
               {content}
             </Sub>
           )}
-        </NavMenuList>
-      </NavMenuRoot>
+        </NavMenuRoot>
+      </NavMenuStyled>
     </NavMenuProvider>
   );
 }
@@ -324,7 +335,7 @@ export const Item = forwardRef<HTMLLIElement, ItemProps>(
 Item.displayName = 'NavMenu.Item';
 
 export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
-  children?: Array<React.ReactElement> | ((props: { isOpen: boolean }) => React.ReactElement | null);
+  children?: Array<React.ReactElement | null> | ((props: { isOpen: boolean }) => React.ReactElement | null);
   expandIcon?: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
 }
 
@@ -394,13 +405,13 @@ export const Sub = forwardRef<HTMLLIElement, SubProps>(
             {typeof expandIcon === 'function' ? expandIcon({ isOpen }) : expandIcon}
           </span>
         )}
-        <div className="navmenu-sub__container" {...containerProps}>
+        <SubContainer {...containerProps}>
           {typeof children === 'function' ? (
             children({ isOpen }) // 自定义渲染
           ) : (
             <NavMenuSubList className="navmenu-sub__list">{filterItems(children)}</NavMenuSubList>
           )}
-        </div>
+        </SubContainer>
       </NavMenuSub>
     );
   }

package/src/NavMenu/products.tsx

@@ -1,8 +1,7 @@
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Box, BoxProps, Grid } from '@mui/material';
-import { useWindowSize } from 'react-use';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -191,7 +190,6 @@ export interface ProductsProps extends BoxProps {
 export default function Products({ className, isOpen, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const { width, height } = useWindowSize();
   const { locale = 'en' } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
   const groups = useCreation(() => {
@@ -202,13 +200,22 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         children: [
           [
             {
-              label: <Link to={`https://www.nftstudio.rocks/${locale}`}>NFT Studio</Link>,
+              label: (
+                <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                  NFT Studio
+                </Link>
+              ),
               description: t('products.nftStudio.description'),
               icon: <NftStudioSvg />,
             },
             {
               label: (
-                <Link to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}>Creator Studio</Link>
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Creator Studio
+                </Link>
               ),
               description: t('products.creatorStudio.description'),
               icon: <CreatorStudioSvg />,
@@ -216,12 +223,20 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
           ],
           [
             {
-              label: <Link to={`https://www.aigne.io/${locale}`}>AIGNE</Link>,
+              label: (
+                <Link to={`https://www.aigne.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  AIGNE
+                </Link>
+              ),
               description: t('products.aigne.description'),
               icon: <AigneSvg />,
             },
             {
-              label: <Link to={`https://www.aistro.io/${locale}`}>Aistro</Link>,
+              label: (
+                <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Aistro
+                </Link>
+              ),
               description: t('products.aistro.description'),
               icon: <AistroSvg />,
             },
@@ -234,24 +249,43 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         children: [
           [
             {
-              label: <Link to={`https://launcher.arcblock.io/${locale}`}>Blocklet Launcher</Link>,
+              label: (
+                <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Blocklet Launcher
+                </Link>
+              ),
               description: t('products.blockletLauncher.description'),
               icon: <BlockletLauncherSvg />,
             },
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/ai-kit`}>Al Kit</Link>,
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/ai-kit`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Al Kit
+                </Link>
+              ),
               description: t('products.alKit.description'),
               icon: <AIKitSvg />,
             },
           ],
           [
             {
-              label: <Link to={`https://store.blocklet.dev/${locale}`}>Blocklet Store</Link>,
+              label: (
+                <Link to={`https://store.blocklet.dev/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Blocklet Store
+                </Link>
+              ),
               description: t('products.blockletStore.description'),
               icon: <BlockletStoreSvg />,
             },
             {
-              label: <Link to={`https://www.web3kit.rocks/${locale}`}>Web3 Kit</Link>,
+              label: (
+                <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Web3 Kit
+                </Link>
+              ),
               description: t('products.web3Kit.description'),
               icon: <Web3KitSvg />,
             },
@@ -265,18 +299,31 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
           [
             {
               label: (
-                <Link to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}>Blocklet Framework</Link>
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Blocklet Framework
+                </Link>
               ),
               description: t('products.blockletFramework.description'),
               icon: <BlockletFrameworkSvg />,
             },
             {
-              label: <Link to={`https://www.didspaces.com/${locale}`}>DID Spaces</Link>,
+              label: (
+                <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Spaces
+                </Link>
+              ),
               description: t('products.didSpaces.description'),
               icon: <DidSvg />,
             },
             {
-              label: <Link to={`https://main.abtnetwork.io/${locale}`}>ABT Network</Link>,
+              label: (
+                <Link to={`https://main.abtnetwork.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  ABT Network
+                </Link>
+              ),
               description: t('products.abtNetwork.description'),
               icon: <AbtNetworkSvg />,
             },
@@ -284,7 +331,10 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
           [
             {
               label: (
-                <Link to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}>
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}
+                  target="_blank"
+                  rel="noreferrer noopener">
                   Blocklet Server
                 </Link>
               ),
@@ -292,7 +342,14 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
               icon: <BlockletServerSvg />,
             },
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}>ОСАР</Link>,
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  ОСАР
+                </Link>
+              ),
               description: t('products.osar.description'),
               icon: <OCAPSvg />,
             },
@@ -305,29 +362,55 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         children: [
           [
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/did`}>DID</Link>,
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/did`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  DID
+                </Link>
+              ),
               description: t('products.did.description'),
               icon: <DidSvg />,
             },
             {
-              label: <Link to={`https://www.didwallet.io/${locale}`}>DID Wallet</Link>,
+              label: (
+                <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Wallet
+                </Link>
+              ),
               description: t('products.didWallet.description'),
               icon: <DidWalletSvg />,
             },
             {
-              label: <Link to={`https://www.didnames.io/${locale}`}>DID Name Service</Link>,
+              label: (
+                <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Names
+                </Link>
+              ),
               description: t('products.didNameService.description'),
               icon: <DidNameServiceSvg />,
             },
           ],
           [
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}>VC</Link>,
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  VC
+                </Link>
+              ),
               description: t('products.vc.description'),
               icon: <VCSvg />,
             },
             {
-              label: <Link to={`https://www.didconnect.io/${locale}`}>DID Connect</Link>,
+              label: (
+                <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Connect
+                </Link>
+              ),
               description: t('products.didConnect.description'),
               icon: <DidConnectSvg />,
             },
@@ -337,27 +420,6 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
     ];
   }, [t, locale]);
 
-  // 防止弹框超出 window
-  useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    if (!isOpen) {
-      wrapper.style.transform = '';
-      return;
-    }
-
-    const rect = wrapper.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    if (rect.right > windowWidth) {
-      const offset = rect.right - windowWidth;
-      wrapper.style.transform = `translateX(-${offset + 16}px)`;
-    } else if (rect.left < 0) {
-      wrapper.style.transform = `translateX(${Math.abs(rect.left) + 16}px)`;
-    } else {
-      wrapper.style.transform = '';
-    }
-  }, [width, height, isOpen]);
-
   return (
     <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>
       {groups.map((group) => (

package/src/NavMenu/style.ts

@@ -5,11 +5,12 @@ type NavMenuProps = {
   $textColor: string;
 };
 
-// .navmenu-root
-export const NavMenuRoot = styled('nav', {
+// .navmenu
+export const NavMenuStyled = styled('nav', {
   shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
 })<NavMenuProps>(({ $bgColor, $textColor }) => ({
-  padding: '8px 16px',
+  position: 'relative',
+  padding: '0 16px',
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
@@ -18,15 +19,15 @@ export const NavMenuRoot = styled('nav', {
   fontSize: '16px',
 }));
 
-// .navmenu-list
-export const NavMenuList = styled('ul')(() => ({
+// .navmenu-root
+export const NavMenuRoot = styled('ul')(() => ({
   listStyle: 'none',
   margin: 0,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
   // inline 布局
-  '&.navmenu-list--inline ': {
+  '&.navmenu-root--inline ': {
     flexDirection: 'column',
     alignItems: 'stretch',
   },
@@ -38,14 +39,16 @@ type NavMenuItemProps = {
 // 菜单项 .navmenu-item
 export const NavMenuItem = styled('li', {
   shouldForwardProp: (prop) => prop !== '$activeTextColor',
-})<NavMenuItemProps>(({ $activeTextColor }) => ({
+})<NavMenuItemProps>(({ $activeTextColor, theme }) => ({
   display: 'flex',
   alignItems: 'center',
   position: 'relative',
-  padding: '0 12px',
+  padding: '8px 12px',
   whiteSpace: 'nowrap',
   cursor: 'pointer',
-  transition: 'color 0.2s ease-in-out',
+  transition: theme.transitions.create('color', {
+    duration: theme.transitions.duration.standard,
+  }),
   // 间距调整
   '&:first-of-type': {
     paddingLeft: 0,
@@ -98,7 +101,9 @@ export const NavMenuItem = styled('li', {
       marginLeft: '6px',
       fontSize: '14px',
       opacity: 0,
-      transition: 'opacity 0.2s ease-in-out',
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
   },
   '.navmenu-item__desc': {
@@ -136,13 +141,17 @@ export const NavMenuItem = styled('li', {
     },
     '&:hover': {
       background: '#f9f9fb',
-      transition: 'background 0.2s ease-in-out',
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.standard,
+      }),
       '.navmenu-item__label-arrow': {
         opacity: 1,
       },
       '.navmenu-item__desc': {
         color: '#26292e',
-        transition: 'color 0.2s ease-in-out',
+        transition: theme.transitions.create('color', {
+          duration: theme.transitions.duration.standard,
+        }),
       },
     },
     '&.navmenu-item--active': {
@@ -160,24 +169,26 @@ export const NavMenuItem = styled('li', {
 }));
 
 // 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(() => ({
+export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
   '.navmenu-item': {
     marginLeft: 0,
+    overflow: 'hidden',
   },
   '& .navmenu-sub__container': {
-    visibility: 'hidden',
+    pointerEvents: 'none',
     opacity: 0,
     position: 'absolute',
     top: '100%',
-    left: '50%',
+    left: 0,
     zIndex: 1,
-    transform: 'translateX(-50%)',
-    paddingTop: '16px',
-    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
   },
   '&.navmenu-sub--opened > .navmenu-sub__container': {
-    visibility: 'visible',
+    pointerEvents: 'auto',
     opacity: 1,
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeOut,
+    }),
   },
   // 扩展图标
   '.navmenu-sub__expand-icon': {
@@ -188,7 +199,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
     '& > *': {
       width: '0.8em',
       height: '0.8em',
-      transition: 'transform 0.2s ease-in-out',
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
     '.navmenu-item--inline &': {
       marginLeft: 'auto',
@@ -204,7 +217,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       padding: 0,
       height: 0,
       overflow: 'hidden',
-      transition: 'height 0.2s ease-in-out',
+      transition: theme.transitions.create('height', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
     '&.navmenu-sub--opened > .navmenu-sub__container': {
       height: 'auto',
@@ -214,10 +229,13 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       paddingLeft: '16px',
       boxShadow: 'none',
     },
+    '.navmenu-item__content': {
+      height: '48px',
+    },
   },
 }));
 
-// 下拉子菜单 .navmenu-sub-list
+// 下拉子菜单 .navmenu-sub__list
 export const NavMenuSubList = styled('ul')(() => ({
   margin: 0,
   padding: '16px',