@arcblock/ux 2.1.9 → 2.1.10

package/lib/Footer/index.js

@@ -43,7 +43,7 @@ function Footer(props) {
     className: "footer-item"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "footer-copy"
-  }, "\xA9 Copyright ", copyYear, " "), /*#__PURE__*/_react.default.createElement("span", {
+  }, "Copyright \xA9 ", copyYear, " "), /*#__PURE__*/_react.default.createElement("span", {
     className: "footer-brand"
   }, brand)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "p",
@@ -68,7 +68,7 @@ Footer.propTypes = {
 };
 Footer.defaultProps = {
   dark: false,
-  brand: 'ArcBlock Inc.',
+  brand: 'ArcBlock, Inc.',
   copyStart: '2017',
   className: '',
   style: {}

package/lib/Header/header.js

@@ -17,7 +17,7 @@ var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
-const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "containerComponent"];
+const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,15 +37,14 @@ function Header(_ref) {
     description,
     children,
     addons,
-    prepend,
-    containerComponent: ContainerComponent
+    prepend
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
     $theme: theme
-  }), /*#__PURE__*/_react.default.createElement(ContainerComponent, {
+  }), /*#__PURE__*/_react.default.createElement(_Container.default, {
     className: "header-container"
   }, prepend, logo && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-logo"
@@ -76,9 +75,7 @@ Header.propTypes = {
   // 右侧区域, 可以放置 icons/actions/login 等
   addons: _propTypes.default.node,
   // logo 左侧内容
-  prepend: _propTypes.default.node,
-  // 默认使用 mui 的 Container, 如果不想限制 header 内容区域的宽度, 可以设置为 div
-  containerComponent: _propTypes.default.elementType
+  prepend: _propTypes.default.node
 };
 Header.defaultProps = {
   logo: null,
@@ -87,14 +84,13 @@ Header.defaultProps = {
   description: null,
   children: null,
   addons: null,
-  prepend: null,
-  containerComponent: _Container.default
+  prepend: null
 };
 
 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;padding:0 16px;", "{padding:0;}}.header-logo{display:inline-flex;justify-content:center;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;.header-brand-title{display:flex;align-items:center;h2{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.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.up('lg'), 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;justify-content:center;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;.header-brand-title{display:flex;align-items:center;h2{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.drawer + 1, 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/style.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const NavMenuBase = _styledComponents.default.nav.withConfig({
   displayName: "style__NavMenuBase",
   componentId: "sc-2g7isz-0"
-})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}.navmenu-item{position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
+})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
 const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__HorizontalStyle",
@@ -24,5 +24,5 @@ exports.HorizontalStyle = HorizontalStyle;
 const InlineStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__InlineStyle",
   componentId: "sc-2g7isz-2"
-})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{height:48px;line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;position:absolute;top:100%;left:0;right:0;.navmenu-item,.navmenu-sub{line-height:24px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;margin-top:8px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
+})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}& .navmenu-sub{flex-wrap:wrap;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;flex:1 0 100%;margin:0 -16px;padding-bottom:8px;.navmenu-item,.navmenu-sub{line-height:32px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
 exports.InlineStyle = InlineStyle;

package/package.json

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

package/src/Footer/index.js

@@ -18,7 +18,7 @@ export default function Footer(props) {
     <Container className={className} style={style} dark={dark}>
       <Typography component="div" className="footer">
         <Typography component="p" className="footer-item">
-          <span className="footer-copy">&copy; Copyright {copyYear} </span>
+          <span className="footer-copy">Copyright &copy; {copyYear} </span>
           <span className="footer-brand">{brand}</span>
         </Typography>
         <Typography
@@ -43,7 +43,7 @@ Footer.propTypes = {
 
 Footer.defaultProps = {
   dark: false,
-  brand: 'ArcBlock Inc.',
+  brand: 'ArcBlock, Inc.',
   copyStart: '2017',
   className: '',
   style: {},

package/src/Header/header.js

@@ -9,21 +9,11 @@ import useTheme from '@mui/styles/useTheme';
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
-function Header({
-  logo,
-  brand,
-  brandAddon,
-  description,
-  children,
-  addons,
-  prepend,
-  containerComponent: ContainerComponent,
-  ...rest
-}) {
+function Header({ logo, brand, brandAddon, description, children, addons, prepend, ...rest }) {
   const theme = useTheme();
   return (
     <Root {...rest} $theme={theme}>
-      <ContainerComponent className="header-container">
+      <Container className="header-container">
         {prepend}
         {logo && <div className="header-logo">{logo}</div>}
         <div className="header-brand">
@@ -36,7 +26,7 @@ function Header({
         {children}
         <Box flexGrow={1} />
         <div className="header-addons">{addons}</div>
-      </ContainerComponent>
+      </Container>
     </Root>
   );
 }
@@ -54,8 +44,6 @@ Header.propTypes = {
   addons: PropTypes.node,
   // logo 左侧内容
   prepend: PropTypes.node,
-  // 默认使用 mui 的 Container, 如果不想限制 header 内容区域的宽度, 可以设置为 div
-  containerComponent: PropTypes.elementType,
 };
 
 Header.defaultProps = {
@@ -66,7 +54,6 @@ Header.defaultProps = {
   children: null,
   addons: null,
   prepend: null,
-  containerComponent: Container,
 };
 
 const Root = styled.div`
@@ -78,11 +65,6 @@ const Root = styled.div`
     display: flex;
     align-items: center;
     height: 64px;
-    /* mui container 左右 padding 控制, 宽屏下不需要 padding (与 content 对齐), 窄屏下设置 16px padding */
-    padding: 0 16px;
-    ${props => props.$theme.breakpoints.up('lg')} {
-      padding: 0;
-    }
   }
   .header-logo {
     display: inline-flex;

package/src/NavMenu/style.js

@@ -1,11 +1,7 @@
 import styled from 'styled-components';
 
 const NavMenuBase = styled.nav`
-  --text-color: ${props => props.$textColor};
-  --active-text-color: ${props => props.$activeTextColor};
-  --bg-color: ${props => props.$bgColor};
-
-  background-color: var(--bg-color);
+  background-color: ${props => props.$bgColor};
   font-size: 14px;
   ul {
     list-style: none;
@@ -17,23 +13,24 @@ const NavMenuBase = styled.nav`
     display: flex;
     align-items: center;
   }
-  // active/hover
+  a {
+    color: inherit;
+  }
+  /* active/hover */
   .navmenu-item,
-  .navmenu-item a,
   .navmenu-sub {
-    color: var(--text-color);
+    color: ${props => props.$textColor};
   }
   .navmenu-item--active,
   .navmenu-item:hover,
-  .navmenu-item:hover a,
-  .navmenu-item--active a,
   .navmenu-sub--opened {
-    color: var(--active-text-color);
+    color: ${props => props.$activeTextColor};
   }
 
   .navmenu-item {
     position: relative;
     cursor: pointer;
+    transition: color 0.2s ease-in-out;
     a {
       text-decoration: none;
       white-space: nowrap;
@@ -53,7 +50,7 @@ const NavMenuBase = styled.nav`
     position: relative;
     cursor: pointer;
   }
-  // icon & expand icon
+  /* icon & expand icon */
   .navmenu-item-icon,
   .navmenu-sub-icon,
   .navmenu-sub-expand-icon {
@@ -84,7 +81,7 @@ export const HorizontalStyle = styled(NavMenuBase)`
     display: flex;
     align-items: center;
   }
-  // 顶级菜单间隔
+  /* 顶级菜单间隔 */
   .navmenu-root > .navmenu-item,
   .navmenu-root > .navmenu-sub {
     margin-left: 24px;
@@ -109,7 +106,7 @@ export const HorizontalStyle = styled(NavMenuBase)`
       margin-top: 8px;
     }
   }
-  // 二级 sub menu
+  /* 二级 sub menu */
   .navmenu-root > .navmenu-sub {
     > .navmenu-sub-container {
       left: 50%;
@@ -133,14 +130,16 @@ export const InlineStyle = styled(NavMenuBase)`
   .navmenu-sub {
     padding: 0 16px;
   }
-  // 顶级
+  & .navmenu-sub {
+    flex-wrap: wrap;
+  }
+  /* 顶级 */
   .navmenu-root > .navmenu-item,
   .navmenu-root > .navmenu-sub {
-    height: 48px;
     line-height: 48px;
     border-bottom: 1px solid #eee;
   }
-  // icon
+  /* icon */
   .navmenu-item-icon,
   .navmenu-sub-icon {
     width: 32px;
@@ -152,13 +151,12 @@ export const InlineStyle = styled(NavMenuBase)`
   /* 子级列表 */
   .navmenu-sub-container {
     display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
+    flex: 1 0 100%;
+    margin: 0 -16px;
+    padding-bottom: 8px;
     .navmenu-item,
     .navmenu-sub {
-      line-height: 24px;
+      line-height: 32px;
     }
   }
   .navmenu-sub-list {
@@ -166,11 +164,10 @@ export const InlineStyle = styled(NavMenuBase)`
     .navmenu-item,
     .navmenu-sub {
       padding-left: 32px;
-      margin-top: 8px;
       font-size: 13px;
     }
   }
-  // 二级 menu
+  /* 二级 menu */
   .navmenu-root > .navmenu-sub {
     &.navmenu-sub--opened {
       background: #eee;