@arcblock/ux 2.10.4 → 2.10.6

package/lib/Header/header.js

@@ -124,7 +124,7 @@ Header.defaultProps = {
   maxWidth: undefined,
   homeLink: '/'
 };
-const Root = styled('div')`
+const Root = styled(Box)`
   position: relative;
   z-index: ${props => props.theme.zIndex.appBar};
   font-size: 14px;

package/lib/Header/responsive-header.js

@@ -57,7 +57,7 @@ function ResponsiveHeader({
         htmlOverflowState.changed = true;
         htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
         htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
-        document.documentElement.style.setProperty('overflow', 'hidden', 'important');
+        document.documentElement.style.setProperty('overflow', 'revert', 'important');
       } else {
         clean();
       }

package/lib/Layout/index.js

@@ -1,17 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import Link from '@mui/material/Link';
-import AppBar from '@mui/material/AppBar';
-import Container from '@mui/material/Container';
-import Drawer from '@mui/material/Drawer';
-import Divider from '@mui/material/Divider';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import IconButton from '@mui/material/IconButton';
+import { AppBar, Container, Drawer, Divider, IconButton, Link, List, ListItem, ListItemText, Toolbar, Typography } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import Footer from '../Footer';
 import OpenInWallet from '../Wallet/Open';

package/lib/NavMenu/nav-menu.js

@@ -1,4 +1,4 @@
-import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
+import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
@@ -63,7 +63,7 @@ function NavMenu({
       open,
       close
     };
-  }, [currentState, mode, activate, open, close]);
+  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
   const navMenuRef = useRef();
   const itemRefs = useRef([]);
   const moreIconRef = useRef();
@@ -109,9 +109,15 @@ function NavMenu({
     if (newHiddenCount !== currentState.hiddenItemCount) {
       currentState.hiddenItemCount = newHiddenCount;
     }
-  }, [currentState.hiddenItemCount, containerSize?.width]), {
+  }), {
     wait: 100
   });
+  useLayoutEffect(() => {
+    if (mode === 'horizontal') {
+      checkItemsFit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerSize?.width, mode]);
   useEffect(() => {
     if (mode === 'horizontal') {
       checkItemsFit();
@@ -143,7 +149,7 @@ function NavMenu({
           itemRefs.current[index] = el;
         } : undefined,
         children: item.children.map((childItem, childIndex) => renderItem(childItem, childIndex, false))
-      }, index);
+      }, item.id);
     }
 
     // 顶级 Item 组件总是包含 ref
@@ -155,7 +161,7 @@ function NavMenu({
       ref: isTopLevel ? el => {
         itemRefs.current[index] = el;
       } : undefined
-    }, index);
+    }, item.id);
   };
   const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-currentState.hiddenItemCount);
   const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
@@ -292,7 +298,13 @@ const Sub = /*#__PURE__*/forwardRef(({
   const isInlineMode = mode === 'inline';
   // inline mode 时使用 click 事件控制收缩/伸展子菜单
   const props = isInlineMode ? {
-    onClick: () => openedIds.includes(id) ? close(id) : open(id)
+    onClick: () => {
+      if (openedIds.includes(id)) {
+        close(id);
+      } else {
+        open(id);
+      }
+    }
   } : {
     onMouseEnter: () => open(id),
     onMouseLeave: () => close(id)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.4",
+  "version": "2.10.6",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -54,12 +54,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "57248b30b2ad697026249b768894c44345c37ed3",
+  "gitHead": "b167099e5491387e6f7cc2d36d8f8a8e56e8f28d",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.4",
-    "@arcblock/nft-display": "^2.10.4",
-    "@arcblock/react-hooks": "^2.10.4",
+    "@arcblock/icons": "^2.10.6",
+    "@arcblock/nft-display": "^2.10.6",
+    "@arcblock/react-hooks": "^2.10.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Header/header.jsx

@@ -105,7 +105,7 @@ Header.defaultProps = {
   homeLink: '/',
 };
 
-const Root = styled('div')`
+const Root = styled(Box)`
   position: relative;
   z-index: ${(props) => props.theme.zIndex.appBar};
   font-size: 14px;

package/src/Header/responsive-header.jsx

@@ -48,7 +48,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
         htmlOverflowState.changed = true;
         htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
         htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
-        document.documentElement.style.setProperty('overflow', 'hidden', 'important');
+        document.documentElement.style.setProperty('overflow', 'revert', 'important');
       } else {
         clean();
       }

package/src/Layout/{index.js → index.jsx}

@@ -1,18 +1,19 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import Link from '@mui/material/Link';
-
-import AppBar from '@mui/material/AppBar';
-import Container from '@mui/material/Container';
-import Drawer from '@mui/material/Drawer';
-import Divider from '@mui/material/Divider';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import IconButton from '@mui/material/IconButton';
+import {
+  AppBar,
+  Container,
+  Drawer,
+  Divider,
+  IconButton,
+  Link,
+  List,
+  ListItem,
+  ListItemText,
+  Toolbar,
+  Typography,
+} from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 
 import Footer from '../Footer';

package/src/NavMenu/nav-menu.jsx

@@ -1,4 +1,13 @@
-import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
+import {
+  Children,
+  cloneElement,
+  useEffect,
+  createContext,
+  useContext,
+  useRef,
+  forwardRef,
+  useLayoutEffect,
+} from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
@@ -56,7 +65,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
       open,
       close,
     };
-  }, [currentState, mode, activate, open, close]);
+  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
 
   const navMenuRef = useRef();
   const itemRefs = useRef([]);
@@ -109,10 +118,17 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
       if (newHiddenCount !== currentState.hiddenItemCount) {
         currentState.hiddenItemCount = newHiddenCount;
       }
-    }, [currentState.hiddenItemCount, containerSize?.width]),
+    }),
     { wait: 100 }
   );
 
+  useLayoutEffect(() => {
+    if (mode === 'horizontal') {
+      checkItemsFit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerSize?.width, mode]);
+
   useEffect(() => {
     if (mode === 'horizontal') {
       checkItemsFit();
@@ -142,7 +158,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
       return (
         <Sub
-          key={index}
+          key={item.id}
           id={item.id}
           icon={item.icon}
           label={item.label}
@@ -161,7 +177,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     // 顶级 Item 组件总是包含 ref
     return (
       <Item
-        key={index}
+        key={item.id}
         id={item.id}
         icon={item.icon}
         label={item.label}
@@ -283,7 +299,15 @@ const Sub = forwardRef(({ id: _id, icon, label, children, expandIcon, ...rest },
   const isInlineMode = mode === 'inline';
   // inline mode 时使用 click 事件控制收缩/伸展子菜单
   const props = isInlineMode
-    ? { onClick: () => (openedIds.includes(id) ? close(id) : open(id)) }
+    ? {
+        onClick: () => {
+          if (openedIds.includes(id)) {
+            close(id);
+          } else {
+            open(id);
+          }
+        },
+      }
     : {
         onMouseEnter: () => open(id),
         onMouseLeave: () => close(id),