@arcblock/ux 2.1.9 → 2.1.13

package/lib/Datatable/CustomToolbar.js

@@ -120,7 +120,7 @@ function CustomToolbar(props) {
 
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
-      Icon: _CloudDownload.default,
+      icon: /*#__PURE__*/_react.default.createElement(_CloudDownload.default, null),
       title: downloadCsv,
       onClick: () => {
         (0, _utils.handleCSVDownload)(props);
@@ -130,7 +130,7 @@ function CustomToolbar(props) {
 
   if (!(options.viewColumns === false || options.viewColumns === 'false')) {
     defaultButtons.push({
-      Icon: _ViewColumn.default,
+      icon: /*#__PURE__*/_react.default.createElement(_ViewColumn.default, null),
       title: viewColumns,
 
       popRender() {
@@ -149,7 +149,7 @@ function CustomToolbar(props) {
 
   if (!(options.filter === false || options.filter === 'false')) {
     defaultButtons.push({
-      Icon: _FilterList.default,
+      icon: /*#__PURE__*/_react.default.createElement(_FilterList.default, null),
       title: filterTable,
 
       popRender() {
@@ -181,10 +181,10 @@ function CustomToolbar(props) {
 
     const popId = getPopId(index);
 
-    if (e.Icon) {
+    if (e.icon) {
       const {
-        Icon,
-        popRender
+        popRender,
+        icon
       } = e; // When popRender is present, clicking the button will bubble up the content returned by the popRender
 
       if (popRender) {
@@ -221,7 +221,9 @@ function CustomToolbar(props) {
             });
           }
         }
-      }, /*#__PURE__*/_react.default.createElement(Icon, null)));
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "custom-toolbar-icon"
+      }, icon)));
     }
 
     return e;
@@ -233,13 +235,11 @@ function CustomToolbar(props) {
 
     if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
       content = e;
-    } else if (e.Icon) {
+    } else if (e.icon) {
       const {
-        Icon
+        icon
       } = e;
-      content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(Icon, {
-        fontSize: "small"
-      })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, e.title));
+      content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, icon), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, e.title));
     }
 
     return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
@@ -314,7 +314,9 @@ function CustomToolbar(props) {
     })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, print));
   }), menuItems), allPops.map((e, index) => /*#__PURE__*/_react.default.createElement("div", {
     key: getPopId(index)
-  }, e)), loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, null));
+  }, e)), /*#__PURE__*/_react.default.createElement(ProgressContainer, null, loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, {
+    className: "toolbar-progress"
+  })));
 }
 
 CustomToolbar.propTypes = {
@@ -347,4 +349,9 @@ CustomToolbar.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "CustomToolbar__Container",
   componentId: "sc-cvz3dp-0"
-})(["display:flex;align-items:center;height:56px;.custom-toobar-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;transition:all ease 0.3s;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}.toobar-title-hidden{opacity:0;cursor:none;}"]);
+})(["display:flex;align-items:center;height:56px;.custom-toobar-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;transition:all ease 0.3s;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}.custom-toolbar-icon{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:20px;overflow:hidden;}}.toobar-title-hidden{opacity:0;cursor:none;}"]);
+
+const ProgressContainer = _styledComponents.default.div.withConfig({
+  displayName: "CustomToolbar__ProgressContainer",
+  componentId: "sc-cvz3dp-1"
+})(["width:100%;height:2px;.toolbar-progress{height:2px;}"]);

package/lib/Datatable/index.js

@@ -21,7 +21,7 @@ var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
 var _DatatableContext = require("./DatatableContext");
 
-const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled"];
+const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -62,7 +62,8 @@ function ReDatatable(_ref2) {
     customButtons,
     onChange,
     loading,
-    disabled
+    disabled,
+    stripped
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
@@ -268,7 +269,8 @@ function ReDatatable(_ref2) {
     loading: _propTypes.default.bool,
     disabled: _propTypes.default.bool,
     customButtons: _propTypes.default.array,
-    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+    stripped: _propTypes.default.bool
   };
   ReDatatable.defaultProps = {
     options: {},
@@ -277,10 +279,12 @@ function ReDatatable(_ref2) {
     loading: false,
     disabled: false,
     customButtons: [],
-    onChange: ''
+    onChange: '',
+    stripped: false
   };
   return /*#__PURE__*/_react.default.createElement(TableContainer, {
     ref: container,
+    className: stripped ? 'datatable-stripped' : '',
     style: style
   }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, Object.assign({
     data: data,
@@ -291,7 +295,7 @@ function ReDatatable(_ref2) {
 const TableContainer = _styledComponents.default.div.withConfig({
   displayName: "Datatable__TableContainer",
   componentId: "sc-1ju12vq-0"
-})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}"], props => props.theme.breakpoints.down('md'));
+})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}&.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.action.hover);
 
 const FilterLine = _styledComponents.default.div.withConfig({
   displayName: "Datatable__FilterLine",

package/lib/ErrorBoundary/fallback.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorFallback = ErrorFallback;
+exports.ErrorFallbackRetry = ErrorFallbackRetry;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
+var _colors = require("@mui/material/colors");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function InternalErrorFallback(_ref) {
+  let {
+    title,
+    desc,
+    retryFunc
+  } = _ref;
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    role: "alert",
+    $theme: theme
+  }, /*#__PURE__*/_react.default.createElement("h3", null, title), /*#__PURE__*/_react.default.createElement("pre", null, desc), retryFunc && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    color: "error",
+    size: "small",
+    onClick: retryFunc
+  }, "Try again"));
+}
+
+InternalErrorFallback.propTypes = {
+  title: _propTypes.default.string,
+  desc: _propTypes.default.string.isRequired,
+  retryFunc: _propTypes.default.func
+};
+InternalErrorFallback.defaultProps = {
+  title: 'Something went wrong...',
+  retryFunc: null
+};
+
+function ErrorFallback(_ref2) {
+  let {
+    error
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(InternalErrorFallback, {
+    desc: error.message
+  });
+}
+
+ErrorFallback.propTypes = {
+  error: _propTypes.default.instanceOf(Error).isRequired
+};
+
+function ErrorFallbackRetry(_ref3) {
+  let {
+    error,
+    resetErrorBoundary
+  } = _ref3;
+  return /*#__PURE__*/_react.default.createElement(InternalErrorFallback, {
+    desc: error.message,
+    retryFunc: resetErrorBoundary
+  });
+}
+
+ErrorFallbackRetry.propTypes = {
+  error: _propTypes.default.instanceOf(Error).isRequired,
+  resetErrorBoundary: _propTypes.default.func.isRequired
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "fallback__Root",
+  componentId: "sc-1ajge2q-0"
+})(["padding:16px;border:2px solid ", ";border-radius:4px;color:", ";background-color:", ";font-size:14px;h3{margin:0;font-size:16px;}pre{white-space:normal;}"], props => props.$theme.palette.error.main, props => props.$theme.palette.error.main, _colors.red[50]);

package/lib/ErrorBoundary/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _fallback = require("./fallback");
+
+Object.keys(_fallback).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fallback[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _fallback[key];
+    }
+  });
+});

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.13",
   "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": "ab9ffbc57b99ede75ed0ddd8f090e3d8e8fb97d1",
   "dependencies": {
-    "@arcblock/icons": "^2.1.9",
-    "@arcblock/react-hooks": "^2.1.9",
+    "@arcblock/icons": "^2.1.13",
+    "@arcblock/react-hooks": "^2.1.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -78,6 +78,7 @@
     "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",
+    "react-error-boundary": "^3.1.4",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.1",
     "react-lottie-player": "^1.4.2",

package/src/Datatable/CustomToolbar.js

@@ -84,7 +84,7 @@ export default function CustomToolbar(props) {
   // download/viewColumns/filter button behaviours, rendered using custom button logic
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
-      Icon: DownloadIcon,
+      icon: <DownloadIcon />,
       title: downloadCsv,
       onClick: () => {
         handleCSVDownload(props);
@@ -94,7 +94,7 @@ export default function CustomToolbar(props) {
 
   if (!(options.viewColumns === false || options.viewColumns === 'false')) {
     defaultButtons.push({
-      Icon: ViewColumnIcon,
+      icon: <ViewColumnIcon />,
       title: viewColumns,
       popRender() {
         return (
@@ -113,7 +113,7 @@ export default function CustomToolbar(props) {
 
   if (!(options.filter === false || options.filter === 'false')) {
     defaultButtons.push({
-      Icon: FilterIcon,
+      icon: <FilterIcon />,
       title: filterTable,
       popRender() {
         return (
@@ -148,8 +148,8 @@ export default function CustomToolbar(props) {
 
     const popId = getPopId(index);
 
-    if (e.Icon) {
-      const { Icon, popRender } = e;
+    if (e.icon) {
+      const { popRender, icon } = e;
       // When popRender is present, clicking the button will bubble up the content returned by the popRender
       if (popRender) {
         allPops.push(
@@ -187,7 +187,7 @@ export default function CustomToolbar(props) {
                 });
               }
             }}>
-            <Icon />
+            <div className="custom-toolbar-icon">{icon}</div>
           </IconButton>
         </Tooltip>
       );
@@ -204,14 +204,12 @@ export default function CustomToolbar(props) {
 
     if (isValidElement(e)) {
       content = e;
-    } else if (e.Icon) {
-      const { Icon } = e;
+    } else if (e.icon) {
+      const { icon } = e;
 
       content = (
         <>
-          <ListItemIcon>
-            <Icon fontSize="small" />
-          </ListItemIcon>
+          <ListItemIcon>{icon}</ListItemIcon>
           <ListItemText>{e.title}</ListItemText>
         </>
       );
@@ -319,7 +317,9 @@ export default function CustomToolbar(props) {
       {allPops.map((e, index) => (
         <div key={getPopId(index)}>{e}</div>
       ))}
-      {loading && <LinearProgress />}
+      <ProgressContainer>
+        {loading && <LinearProgress className="toolbar-progress" />}
+      </ProgressContainer>
     </div>
   );
 }
@@ -398,9 +398,26 @@ const Container = styled.div`
         cursor: not-allowed;
       }
     }
+    .custom-toolbar-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+      overflow: hidden;
+    }
   }
   .toobar-title-hidden {
     opacity: 0;
     cursor: none;
   }
 `;
+
+const ProgressContainer = styled.div`
+  width: 100%;
+  height: 2px;
+  .toolbar-progress {
+    height: 2px;
+  }
+`;

package/src/Datatable/index.js

@@ -32,6 +32,7 @@ function ReDatatable({
   onChange,
   loading,
   disabled,
+  stripped,
   ...rest
 }) {
   const container = useRef(null);
@@ -202,6 +203,7 @@ function ReDatatable({
     disabled: PropTypes.bool,
     customButtons: PropTypes.array,
     onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    stripped: PropTypes.bool,
   };
 
   ReDatatable.defaultProps = {
@@ -212,10 +214,11 @@ function ReDatatable({
     disabled: false,
     customButtons: [],
     onChange: '',
+    stripped: false,
   };
 
   return (
-    <TableContainer ref={container} style={style}>
+    <TableContainer ref={container} className={stripped ? 'datatable-stripped' : ''} style={style}>
       <MUIDataTable data={data} columns={columns} {...props} />
     </TableContainer>
   );
@@ -237,6 +240,13 @@ const TableContainer = styled.div`
       text-align: center;
     }
   }
+  &.datatable-stripped {
+    .MuiTableBody-root {
+      tr:nth-of-type(odd) {
+        background-color: ${props => props.theme.palette.action.hover};
+      }
+    }
+  }
 `;
 
 const FilterLine = styled.div`

package/src/ErrorBoundary/fallback.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import { red } from '@mui/material/colors';
+import Button from '../Button';
+
+function InternalErrorFallback({ title, desc, retryFunc }) {
+  const theme = useTheme();
+  return (
+    <Root role="alert" $theme={theme}>
+      <h3>{title}</h3>
+      <pre>{desc}</pre>
+      {retryFunc && (
+        <Button variant="contained" color="error" size="small" onClick={retryFunc}>
+          Try again
+        </Button>
+      )}
+    </Root>
+  );
+}
+
+InternalErrorFallback.propTypes = {
+  title: PropTypes.string,
+  desc: PropTypes.string.isRequired,
+  retryFunc: PropTypes.func,
+};
+InternalErrorFallback.defaultProps = {
+  title: 'Something went wrong...',
+  retryFunc: null,
+};
+
+export function ErrorFallback({ error }) {
+  return <InternalErrorFallback desc={error.message} />;
+}
+
+ErrorFallback.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired,
+};
+
+export function ErrorFallbackRetry({ error, resetErrorBoundary }) {
+  return <InternalErrorFallback desc={error.message} retryFunc={resetErrorBoundary} />;
+}
+
+ErrorFallbackRetry.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired,
+  resetErrorBoundary: PropTypes.func.isRequired,
+};
+
+const Root = styled.div`
+  padding: 16px;
+  border: 2px solid ${props => props.$theme.palette.error.main};
+  border-radius: 4px;
+  color: ${props => props.$theme.palette.error.main};
+  background-color: ${red[50]};
+  font-size: 14px;
+  h3 {
+    margin: 0;
+    font-size: 16px;
+  }
+  pre {
+    white-space: normal;
+  }
+`;

package/src/ErrorBoundary/index.js

@@ -0,0 +1 @@
+export * from './fallback';

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;