@arcblock/ux 2.12.3 → 2.12.5

package/lib/NavMenu/nav-menu.d.ts

@@ -38,7 +38,7 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
 }
 export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLLIElement>>;
 export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
-    children?: Array<React.ReactElement> | ((props: {
+    children?: Array<React.ReactElement | null> | ((props: {
         isOpen: boolean;
     }) => React.ReactElement | null);
     expandIcon?: React.ReactNode | ((props: {

package/lib/NavMenu/nav-menu.js

@@ -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) {
@@ -73,6 +74,7 @@ function NavMenu({
   const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
   const moreIconRef = useRef(null);
+  const containerWidth = useRef(0);
   const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? {
     marginLeft: '0px'
@@ -96,14 +98,13 @@ 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;
     itemRefs.current.forEach((item, index) => {
       if (item) {
         item.style.display = 'flex';
         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';
@@ -119,6 +120,7 @@ function NavMenu({
     wait: 100
   });
   useLayoutEffect(() => {
+    containerWidth.current = containerSize?.width || navMenuRef.current?.clientWidth || 0;
     if (mode === 'horizontal') {
       checkItemsFit();
     }
@@ -144,8 +146,14 @@ function NavMenu({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeId]);
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
-  const renderItem = (item, index, isTopLevel = false) => {
+  const renderItem = (item, index, level = 0) => {
+    const isTopLevel = level === 0;
     if (item?.children) {
+      // 只渲染两级子菜单
+      if (level > 0) {
+        return null;
+      }
+
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
       return /*#__PURE__*/_jsx(Sub, {
         id: item.id,
@@ -158,7 +166,7 @@ function NavMenu({
         children: typeof item.children === 'function' ? item.children : item.children.map((childItem, childIndex) => renderItem({
           ...childItem,
           variant: 'panel'
-        }, childIndex, false))
+        }, childIndex, level + 1))
       }, item.id);
     }
 
@@ -175,18 +183,21 @@ function NavMenu({
       } : undefined
     }, item.id);
   };
-  const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-currentState.hiddenItemCount);
+  const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index, 1)) : children?.slice(-currentState.hiddenItemCount);
+
+  // 当前展开的子菜单
+  const openedId = currentState.openedIds[0];
   return /*#__PURE__*/_jsx(NavMenuProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(NavMenuRoot, {
+    children: /*#__PURE__*/_jsx(NavMenuStyled, {
       ...rest,
       className: classes,
       $textColor: textColor,
       $bgColor: bgColor,
-      children: /*#__PURE__*/_jsxs(NavMenuList, {
-        className: clsx('navmenu-list', `navmenu-list--${mode}`),
+      children: /*#__PURE__*/_jsxs(NavMenuRoot, {
+        className: clsx('navmenu-root', `navmenu-root--${mode}`),
         ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
+        children: [items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
           icon: icon,
           label: "",
@@ -329,8 +340,7 @@ export const Sub = /*#__PURE__*/forwardRef(({
       children: typeof expandIcon === 'function' ? expandIcon({
         isOpen
       }) : expandIcon
-    }), /*#__PURE__*/_jsx("div", {
-      className: "navmenu-sub__container",
+    }), /*#__PURE__*/_jsx(SubContainer, {
       ...containerProps,
       children: typeof children === 'function' ? children({
         isOpen

package/lib/NavMenu/products.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Box, Grid } from '@mui/material';
-import { useWindowSize } from 'react-use';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -1284,58 +1283,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'
       }
     }
   },
@@ -1348,58 +1347,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: '无密码登录'
       }
     }
   }
@@ -1437,10 +1436,6 @@ export default function Products({
     mode
   } = useNavMenuContext();
   const wrapperRef = useRef(null);
-  const {
-    width,
-    height
-  } = useWindowSize();
   const {
     locale = 'en'
   } = useLocaleContext() || {};
@@ -1452,6 +1447,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.nftstudio.rocks/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "NFT Studio"
         }),
         description: t('products.nftStudio.description'),
@@ -1459,6 +1456,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/creator-studio`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Creator Studio"
         }),
         description: t('products.creatorStudio.description'),
@@ -1466,6 +1465,8 @@ export default function Products({
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.aigne.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "AIGNE"
         }),
         description: t('products.aigne.description'),
@@ -1473,6 +1474,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.aistro.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Aistro"
         }),
         description: t('products.aistro.description'),
@@ -1484,6 +1487,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://launcher.arcblock.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Launcher"
         }),
         description: t('products.blockletLauncher.description'),
@@ -1491,6 +1496,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/ai-kit`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Al Kit"
         }),
         description: t('products.alKit.description'),
@@ -1498,6 +1505,8 @@ export default function Products({
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://store.blocklet.dev/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Store"
         }),
         description: t('products.blockletStore.description'),
@@ -1505,6 +1514,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.web3kit.rocks/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Web3 Kit"
         }),
         description: t('products.web3Kit.description'),
@@ -1516,6 +1527,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blocklet`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Framework"
         }),
         description: t('products.blockletFramework.description'),
@@ -1523,6 +1536,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didspaces.com/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID Spaces"
         }),
         description: t('products.didSpaces.description'),
@@ -1530,6 +1545,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://main.abtnetwork.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "ABT Network"
         }),
         description: t('products.abtNetwork.description'),
@@ -1537,6 +1554,8 @@ export default function Products({
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blocklet-server`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "Blocklet Server"
         }),
         description: t('products.blockletServer.description'),
@@ -1544,9 +1563,11 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/blockchain`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "\u041E\u0421\u0410\u0420"
         }),
-        description: t('products.osar.description'),
+        description: t('products.ocap.description'),
         icon: /*#__PURE__*/_jsx(OCAPSvg, {})
       }]]
     }, {
@@ -1555,6 +1576,8 @@ export default function Products({
       children: [[{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/did`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID"
         }),
         description: t('products.did.description'),
@@ -1562,6 +1585,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didwallet.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID Wallet"
         }),
         description: t('products.didWallet.description'),
@@ -1569,13 +1594,17 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didnames.io/${locale}`,
-          children: "DID Name Service"
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: "DID Names"
         }),
         description: t('products.didNameService.description'),
         icon: /*#__PURE__*/_jsx(DidNameServiceSvg, {})
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.arcblock.io/content/collections/${locale}/verifiable-credential`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "VC"
         }),
         description: t('products.vc.description'),
@@ -1583,6 +1612,8 @@ export default function Products({
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.didconnect.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
           children: "DID Connect"
         }),
         description: t('products.didConnect.description'),
@@ -1590,26 +1621,6 @@ export default function Products({
       }]]
     }];
   }, [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 /*#__PURE__*/_jsx(Wrapper, {
     ref: wrapperRef,
     className: `is-${mode} ${className}`,

package/lib/NavMenu/style.d.ts

@@ -2,8 +2,8 @@ type NavMenuProps = {
     $bgColor: string;
     $textColor: string;
 };
-export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const NavMenuList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const NavMenuStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 type NavMenuItemProps = {
     $activeTextColor: string;
 };

package/lib/NavMenu/style.js

@@ -1,12 +1,13 @@
 import { styled } from '../Theme';
-// .navmenu-root
-export const NavMenuRoot = styled('nav', {
+// .navmenu
+export const NavMenuStyled = styled('nav', {
   shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor'
 })(({
   $bgColor,
   $textColor
 }) => ({
-  padding: '8px 16px',
+  position: 'relative',
+  padding: '0 16px',
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
@@ -15,15 +16,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'
   }
@@ -32,15 +33,18 @@ export const NavMenuList = styled('ul')(() => ({
 export const NavMenuItem = styled('li', {
   shouldForwardProp: prop => prop !== '$activeTextColor'
 })(({
-  $activeTextColor
+  $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
@@ -93,7 +97,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': {
@@ -131,13 +137,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': {
@@ -155,24 +165,28 @@ export const NavMenuItem = styled('li', {
 }));
 
 // 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(() => ({
+export const NavMenuSub = styled(NavMenuItem)(({
+  theme
+}) => ({
   '.navmenu-item': {
-    marginLeft: 0
+    marginLeft: 0,
+    overflow: 'hidden'
   },
   '& .navmenu-sub__container': {
-    visibility: 'hidden',
+    pointerEvents: 'none',
     opacity: 0,
     position: 'absolute',
     top: '100%',
-    left: '50%',
-    zIndex: 1,
-    transform: 'translateX(-50%)',
-    paddingTop: '16px',
-    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out'
+    left: 0,
+    zIndex: 1
   },
   '&.navmenu-sub--opened > .navmenu-sub__container': {
-    visibility: 'visible',
-    opacity: 1
+    pointerEvents: 'auto',
+    opacity: 1,
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeOut
+    })
   },
   // 扩展图标
   '.navmenu-sub__expand-icon': {
@@ -183,7 +197,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'
@@ -199,7 +215,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'
@@ -208,11 +226,14 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       padding: 0,
       paddingLeft: '16px',
       boxShadow: 'none'
+    },
+    '.navmenu-item__content': {
+      height: '48px'
     }
   }
 }));
 
-// 下拉子菜单 .navmenu-sub-list
+// 下拉子菜单 .navmenu-sub__list
 export const NavMenuSubList = styled('ul')(() => ({
   margin: 0,
   padding: '16px',

package/lib/NavMenu/sub-container.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare function SubContainer({ children, ...props }: SubContainerProps): import("react/jsx-runtime").JSX.Element;
+export default SubContainer;