@arcblock/ux 2.12.3 → 2.12.5

package/lib/NavMenu/sub-container.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+const paddingTop = 8;
+
+// 下拉子菜单容器
+export function SubContainer({
+  children,
+  ...props
+}) {
+  const rootRef = useRef(null);
+  const [position, setPosition] = useState(0); // 只需要保存水平偏移量
+
+  const updatePosition = () => {
+    if (!rootRef.current) return;
+    const anchor = rootRef.current.parentElement; // 以父容器作为参照
+    if (!anchor) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const containerRect = rootRef.current.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const padding = 32;
+
+    // 1. 计算相对于父元素的水平居中位置
+    let left = (anchorRect.width - containerRect.width) / 2;
+
+    // 2. 检查容器在视口中的绝对位置
+    const absoluteLeft = anchorRect.left + left;
+
+    // 3. 调整水平位置确保不超出窗口
+    if (absoluteLeft < 0) {
+      // 如果超出左边界，向右偏移
+      left = left - absoluteLeft + padding;
+    } else if (absoluteLeft + containerRect.width > windowWidth) {
+      // 如果超出右边界，向左偏移
+      left -= absoluteLeft + containerRect.width - windowWidth + padding;
+    }
+    setPosition(left);
+  };
+
+  // 监听自身大小变化
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updatePosition();
+    });
+    resizeObserver.observe(rootRef.current);
+    return () => resizeObserver.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 anchor 的大小变化
+  useEffect(() => {
+    const anchor = rootRef.current?.parentElement;
+    let resizeObserver = null;
+    if (anchor) {
+      resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserver.observe(anchor);
+    }
+    return () => resizeObserver?.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      updatePosition();
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: rootRef,
+    className: "navmenu-sub__container",
+    style: {
+      paddingTop: `${paddingTop}px`,
+      transform: `translateX(${position}px)`
+    },
+    ...props,
+    children: children
+  });
+}
+export default SubContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.3",
+  "version": "2.12.5",
   "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": "d0ad7fcbd9bbae010ad58235494150e3c0814d43",
+  "gitHead": "3999edcf6f4b5fd30f3c5d27b27f85e0051315b4",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.3",
-    "@arcblock/nft-display": "^2.12.3",
-    "@arcblock/react-hooks": "^2.12.3",
+    "@arcblock/icons": "^2.12.5",
+    "@arcblock/nft-display": "^2.12.5",
+    "@arcblock/react-hooks": "^2.12.5",
     "@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

@@ -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';
@@ -38,58 +37,58 @@ const translations = {
     },
     products: {
       nftStudio: {
-        description: 'Toolkit for NFT creation',
+        description: 'Mint and manage NFTs',
       },
       creatorStudio: {
-        description: "Content creators' Swiss knife",
+        description: 'All-in-one creator tool',
       },
       aigne: {
-        description: 'Chat with AIGNE',
+        description: 'Your AI assistant',
       },
       aistro: {
-        description: 'Al Language Model Astrologer',
+        description: 'AI-powered astrology',
       },
       blockletLauncher: {
-        description: 'Launch your blocklet here',
+        description: 'One-click app launcher',
       },
       alKit: {
-        description: 'Empowers Al for application',
+        description: 'Boost apps with AI',
       },
       blockletStore: {
-        description: 'App Store for all Blocklets',
+        description: 'Discover & deploy apps',
       },
       web3Kit: {
-        description: 'Provides series components',
+        description: 'Web3 dev toolkit',
       },
       blockletFramework: {
-        description: 'Launch your blocklet here',
+        description: 'Build and run blocklets',
       },
       didSpaces: {
-        description: 'Decentralized storage space',
+        description: 'Secure personal storage',
       },
       abtNetwork: {
-        description: "ArcBlock's blockchain system",
+        description: 'Fast blockchain network',
       },
       blockletServer: {
-        description: 'Runtime Container Service',
+        description: 'Host your apps easily',
       },
-      osar: {
-        description: 'Supports multpy blockchains',
+      ocap: {
+        description: 'Multi-chain connector',
       },
       did: {
-        description: 'Decentralized Identity',
+        description: 'Self-sovereign ID',
       },
       didWallet: {
-        description: 'Intelligent digital wallet',
+        description: 'Smart digital wallet',
       },
       didNameService: {
-        description: 'Purchase/host domain',
+        description: 'Web3 domain names',
       },
       vc: {
         description: 'Verifiable Credentials',
       },
       didConnect: {
-        description: 'Login with DID',
+        description: 'Passwordless login',
       },
     },
   },
@@ -102,58 +101,58 @@ const translations = {
     },
     products: {
       nftStudio: {
-        description: 'NFT 创作工具包',
+        description: '铸造和管理 NFT',
       },
       creatorStudio: {
-        description: '内容创作者的瑞士军刀',
+        description: '一体化创作工具',
       },
       aigne: {
-        description: '与 AIGNE 聊天',
+        description: '您的人工智能助手',
       },
       aistro: {
-        description: 'Al 语言模型占星师',
+        description: 'AI 占星术',
       },
       blockletLauncher: {
-        description: '在这里启动你的 blocklet',
+        description: '一键启动应用程序',
       },
       alKit: {
-        description: '为应用赋能 Al',
+        description: 'AI 赋能应用',
       },
       blockletStore: {
-        description: '所有 Blocklets 的应用商店',
+        description: '发现和部署应用程序',
       },
       web3Kit: {
-        description: '提供系列组件',
+        description: 'Web3 开发工具包',
       },
       blockletFramework: {
-        description: '在这里启动你的 blocklet',
+        description: '构建并运行 Blocklet',
       },
       didSpaces: {
-        description: '去中心化存储空间',
+        description: '安全的个人存储',
       },
       abtNetwork: {
-        description: 'ArcBlock 的区块链系统',
+        description: '快速区块链网络',
       },
       blockletServer: {
-        description: '运行时容器服务',
+        description: '轻松托管应用程序',
       },
-      osar: {
-        description: '支持多链',
+      ocap: {
+        description: '多链连接器',
       },
       did: {
-        description: '去中心化身份',
+        description: '自主身份',
       },
       didWallet: {
         description: '智能数字钱包',
       },
       didNameService: {
-        description: '购买/托管域名',
+        description: 'Web3 域名',
       },
       vc: {
         description: '可验证凭证',
       },
       didConnect: {
-        description: '使用 DID 登录',
+        description: '无密码登录',
       },
     },
   },
@@ -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,8 +342,15 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
               icon: <BlockletServerSvg />,
             },
             {
-              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}>ОСАР</Link>,
-              description: t('products.osar.description'),
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  ОСАР
+                </Link>
+              ),
+              description: t('products.ocap.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) => (