@arcblock/ux 2.1.26 → 2.1.27

package/lib/Header/header.js

@@ -107,7 +107,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;a{color:inherit;text-decoration:none;}.header-brand-title{display:flex;align-items:center;h2{margin:0;font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;> *:last-child{padding-right:0;}}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:44px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;a{color:inherit;text-decoration:none;}.header-brand-title{display:flex;align-items:center;h2{margin:0;font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/NavMenu/nav-menu.js

@@ -17,7 +17,7 @@ var _style = require("./style");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["items", "mode", "children", "defaultActiveId", "textColor", "activeTextColor", "bgColor", "onSelected"],
+const _excluded = ["items", "mode", "children", "activeId", "textColor", "activeTextColor", "bgColor", "onSelected"],
       _excluded2 = ["id", "icon", "label", "active", "onClick"],
       _excluded3 = ["id", "icon", "label", "children", "expandIcon"];
 
@@ -60,7 +60,7 @@ function NavMenu(_ref) {
     items,
     mode,
     children,
-    defaultActiveId,
+    activeId,
     textColor,
     activeTextColor,
     bgColor,
@@ -76,30 +76,38 @@ function NavMenu(_ref) {
   }
 
   const [state, setState] = (0, _react.useState)({
-    activeId: defaultActiveId,
+    activeId,
     openedIds: []
   });
+  const activate = (0, _react.useCallback)(id => {
+    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      activeId: id
+    }));
+    onSelected === null || onSelected === void 0 ? void 0 : onSelected(id);
+  }, [onSelected]);
+  const open = (0, _react.useCallback)(id => {
+    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      openedIds: [...prev.openedIds, id]
+    }));
+  }, []);
+  const close = (0, _react.useCallback)(id => {
+    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      openedIds: prev.openedIds.filter(item => item !== id)
+    }));
+  }, []);
   const contextValue = (0, _react.useMemo)(() => {
     return _objectSpread(_objectSpread({}, state), {}, {
       mode,
-      activate: id => {
-        setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
-          activeId: id
-        }));
-        onSelected === null || onSelected === void 0 ? void 0 : onSelected(id);
-      },
-      open: id => {
-        setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
-          openedIds: [...prev.openedIds, id]
-        }));
-      },
-      close: id => {
-        setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
-          openedIds: prev.openedIds.filter(item => item !== id)
-        }));
-      }
+      activate,
+      open,
+      close
     });
-  }, [state, mode, onSelected]);
+  }, [state, mode, activate, open, close]);
+  (0, _react.useEffect)(() => {
+    if (activeId) {
+      activate(activeId);
+    }
+  }, [activate, activeId]);
   const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(mode), rest.className);
 
   const renderItem = (item, index) => {
@@ -146,7 +154,7 @@ NavMenu.propTypes = {
   // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
   mode: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
   children: _propTypes.default.array,
-  defaultActiveId: _propTypes.default.string,
+  activeId: _propTypes.default.string,
   textColor: _propTypes.default.string,
   activeTextColor: _propTypes.default.string,
   bgColor: _propTypes.default.string,
@@ -156,7 +164,7 @@ NavMenu.defaultProps = {
   items: null,
   mode: 'horizontal',
   children: null,
-  defaultActiveId: null,
+  activeId: null,
   textColor: '#9397a1',
   activeTextColor: '#25292f',
   bgColor: '#fff',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.26",
+  "version": "2.1.27",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "5c5282d38dad227f1855d482d7164d07a6b12ff4",
+  "gitHead": "a5f51b0432dbdfe806276bdb10b68df19575687e",
   "dependencies": {
-    "@arcblock/icons": "^2.1.26",
-    "@arcblock/react-hooks": "^2.1.26",
+    "@arcblock/icons": "^2.1.27",
+    "@arcblock/react-hooks": "^2.1.27",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Header/header.js

@@ -69,7 +69,7 @@ const Root = styled.div`
   .header-logo {
     display: inline-flex;
     position: relative;
-    height: 40px;
+    height: 44px;
     margin-right: 16px;
     img,
     svg {
@@ -117,9 +117,6 @@ const Root = styled.div`
   .header-addons {
     display: flex;
     align-items: center;
-    > *:last-child {
-      padding-right: 0;
-    }
   }
   ${(props) => props.$theme.breakpoints.down('lg')} {
     .header-brand {

package/src/NavMenu/nav-menu.js

@@ -1,4 +1,4 @@
-import { Children, useEffect, createContext, useContext, useMemo, useState, useRef } from 'react';
+import { Children, useEffect, createContext, useContext, useMemo, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -22,29 +22,43 @@ function useUniqueId(id) {
 /**
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
  */
-function NavMenu({ items, mode, children, defaultActiveId, textColor, activeTextColor, bgColor, onSelected, ...rest }) {
+function NavMenu({ items, mode, children, activeId, textColor, activeTextColor, bgColor, onSelected, ...rest }) {
   // eslint-disable-next-line no-param-reassign
   children = filterItems(children);
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
-  const [state, setState] = useState({ activeId: defaultActiveId, openedIds: [] });
+  const [state, setState] = useState({ activeId, openedIds: [] });
+
+  const activate = useCallback(
+    (id) => {
+      setState((prev) => ({ ...prev, activeId: id }));
+      onSelected?.(id);
+    },
+    [onSelected]
+  );
+  const open = useCallback((id) => {
+    setState((prev) => ({ ...prev, openedIds: [...prev.openedIds, id] }));
+  }, []);
+  const close = useCallback((id) => {
+    setState((prev) => ({ ...prev, openedIds: prev.openedIds.filter((item) => item !== id) }));
+  }, []);
   const contextValue = useMemo(() => {
     return {
       ...state,
       mode,
-      activate: (id) => {
-        setState((prev) => ({ ...prev, activeId: id }));
-        onSelected?.(id);
-      },
-      open: (id) => {
-        setState((prev) => ({ ...prev, openedIds: [...prev.openedIds, id] }));
-      },
-      close: (id) => {
-        setState((prev) => ({ ...prev, openedIds: prev.openedIds.filter((item) => item !== id) }));
-      },
+      activate,
+      open,
+      close,
     };
-  }, [state, mode, onSelected]);
+  }, [state, mode, activate, open, close]);
+
+  useEffect(() => {
+    if (activeId) {
+      activate(activeId);
+    }
+  }, [activate, activeId]);
+
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
   const renderItem = (item, index) => {
     if (item.children) {
@@ -80,7 +94,7 @@ NavMenu.propTypes = {
   // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
   mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
   children: PropTypes.array,
-  defaultActiveId: PropTypes.string,
+  activeId: PropTypes.string,
   textColor: PropTypes.string,
   activeTextColor: PropTypes.string,
   bgColor: PropTypes.string,
@@ -90,7 +104,7 @@ NavMenu.defaultProps = {
   items: null,
   mode: 'horizontal',
   children: null,
-  defaultActiveId: null,
+  activeId: null,
   textColor: '#9397a1',
   activeTextColor: '#25292f',
   bgColor: '#fff',