@arcblock/ux 2.12.2 → 2.12.4

package/lib/Address/responsive-did-address.js

@@ -4,6 +4,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress from './did-address';
+import { getFontSize } from '../Util';
 
 /**
  * 根据父容器宽度自动切换 compact 模式
@@ -18,7 +19,7 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   style,
   className,
   component = 'span',
-  size,
+  size = 0,
   ...rest
 }, ref) => {
   const [compact, setCompact] = useState(false);
@@ -79,6 +80,8 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
     ref: containerRef,
     style: style,
     className: className,
+    size: size,
+    inline: rest.inline,
     children: [/*#__PURE__*/_jsx(StyledDidAddress, {
       style: {
         position: loading ? 'absolute' : 'static',
@@ -99,10 +102,14 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   });
 });
 export default ResponsiveDidAddress;
-const Root = styled(Box)`
+const Root = styled(Box, {
+  shouldForwardProp: prop => prop !== 'size'
+})`
   display: block;
   width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
-  font-size: 0;
+  font-size: ${({
+  size
+}) => getFontSize(size)};
   overflow: hidden;
   ${({
   inline

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';
@@ -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,6 +1563,8 @@ 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'),
@@ -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;

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/lib/Util/index.d.ts

@@ -58,7 +58,7 @@ export declare function openWebWallet({ webWalletUrl, action, locale, url, windo
 }): {
     type: string;
 };
-export declare const getFontSize: (size: string) => string;
+export declare const getFontSize: (size: string | number) => string;
 export declare const isEthereumDid: (did: string) => boolean;
 export declare const appendParams: (url: string, params: {
     imageFilter: "crop" | "resize";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.2",
+  "version": "2.12.4",
   "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": "4dc132cab82765eef5194cf00075a13bd5d8e458",
+  "gitHead": "f8648a2f55bb57212a24a5948a5f026e2c20b1a7",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.2",
-    "@arcblock/nft-display": "^2.12.2",
-    "@arcblock/react-hooks": "^2.12.2",
+    "@arcblock/icons": "^2.12.4",
+    "@arcblock/nft-display": "^2.12.4",
+    "@arcblock/react-hooks": "^2.12.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",