@arcblock/ux 2.4.17 → 2.4.20

package/lib/ErrorBoundary/fallback.js

@@ -28,10 +28,8 @@ function InternalErrorFallback(_ref) {
     desc,
     retryFunc
   } = _ref;
-  const theme = (0, _Theme.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
     role: "alert",
-    $theme: theme,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
       children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
@@ -84,4 +82,4 @@ ErrorFallbackRetry.propTypes = {
   error: _propTypes.default.instanceOf(Error).isRequired,
   resetErrorBoundary: _propTypes.default.func.isRequired
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  border: 2px solid ", ";\n  border-radius: 4px;\n  color: ", ";\n  background-color: ", ";\n  font-size: 14px;\n  h3 {\n    margin: 0;\n    font-size: 16px;\n  }\n  pre {\n    white-space: normal;\n  }\n"])), props => props.$theme.palette.error.main, props => props.$theme.palette.error.main, _colors.red[50]);
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  border: 2px solid ", ";\n  border-radius: 4px;\n  color: ", ";\n  background-color: ", ";\n  font-size: 14px;\n  h3 {\n    margin: 0;\n    font-size: 16px;\n  }\n  pre {\n    white-space: normal;\n  }\n"])), props => props.theme.palette.error.main, props => props.theme.palette.error.main, _colors.red[50]);

package/lib/Header/header.js

@@ -53,9 +53,7 @@ function Header(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _Theme.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-    $theme: theme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
       maxWidth: maxWidth,
       className: "header-container",
@@ -125,6 +123,6 @@ Header.defaultProps = {
   align: 'left',
   maxWidth: undefined
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n  .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n    > a {\n      height: 100%;\n      line-height: 1;\n    }\n    > a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n"])), props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n  .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n    > a {\n      height: 100%;\n      line-height: 1;\n    }\n    > a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n"])), 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/Header/responsive-header.js

@@ -88,7 +88,6 @@ function ResponsiveHeader(_ref) {
       children: drawerOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {})
     })
   }, rest), {}, {
-    $theme: theme,
     children: [!isMobile && _children, isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
       open: drawerOpen,
       onClose: () => setDrawerOpen(false),
@@ -123,7 +122,7 @@ ResponsiveHeader.propTypes = _objectSpread(_objectSpread({}, _header.default.Pro
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 });
 ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
-const Root = (0, _Theme.styled)(_header.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-menu {\n      display: flex;\n      margin-right: 12px;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));
+const Root = (0, _Theme.styled)(_header.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-menu {\n      display: flex;\n      margin-right: 12px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
 const MenuPanel = (0, _Theme.styled)(_Container.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 8px;\n  padding-bottom: 16px;\n  .navmenu {\n    margin: 0 -16px;\n    .navmenu-root > .navmenu-item,\n    .navmenu-root > .navmenu-sub {\n      border: 0;\n    }\n  }\n"])));
 var _default = ResponsiveHeader;
 exports.default = _default;

package/lib/Layout/dashboard/index.js

@@ -75,8 +75,13 @@ function NavMenuWrapper(_ref) {
 
 function formatLinks(links, location) {
   return links.map(link => {
-    if (Array.isArray(link)) {
-      return formatLinks(link, location);
+    var _link$children;
+
+    if ((_link$children = link.children) !== null && _link$children !== void 0 && _link$children.length) {
+      return _objectSpread(_objectSpread({}, link), {}, {
+        label: link.title,
+        children: formatLinks(link.children, location)
+      });
     }
 
     return _objectSpread(_objectSpread({}, link), {}, {
@@ -108,9 +113,13 @@ function Dashboard(_ref2) {
   const theme = (0, _Theme.useTheme)();
   const location = (0, _reactRouterDom.useLocation)();
   const navItems = (0, _react.useMemo)(() => formatLinks(links, location), [location, links]);
-  const flattendNavItems = navItems.flat();
+  const isGroupedMode = navItems.some(item => {
+    var _item$children;
+
+    return !!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length);
+  }); // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
 
-  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
 
   const classes = (0, _clsx.default)('dashboard', {
     'dashboard-dense': _dense
@@ -120,7 +129,7 @@ function Dashboard(_ref2) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.default, {
       title: title
     }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
-      $theme: theme,
+      className: "dashboard-header",
       children: _ref3 => {
         let {
           isMobile,
@@ -130,7 +139,7 @@ function Dashboard(_ref2) {
         if (isMobile) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavMenuWrapper, {
             mode: "inline",
-            items: flattendNavItems,
+            items: navItems,
             closeMenu: closeMenu,
             bgColor: "transparent",
             activeTextColor: theme.palette.primary.main
@@ -183,7 +192,7 @@ Dashboard.defaultProps = {
   sidebarWidth: 120,
   dense: 'auto'
 };
-const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-sidebar {\n      width: auto;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
 const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"]))); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {

package/lib/Layout/dashboard/sidebar.js

@@ -37,26 +37,23 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
-function renderLinks(links) {
-  const result = [];
-  links.forEach((item, index) => {
-    const prev = links[index - 1]; // 当当前元素和前一个元素仅有一个为 group (array) 时, 在当前元素前面位置添加一个分隔线元素
-
-    if (index > 0 && (Array.isArray(prev) && !Array.isArray(item) || Array.isArray(item) && !Array.isArray(prev))) {
-      result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        className: "layout-sidebar-divider"
-      }, "divider-after-".concat(index)));
-    }
-
-    result.push(renderLinksItem(item));
-  });
-  return result.flat();
+function renderGroup(item) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    className: "layout-sidebar-group",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "layout-sidebar-group-title",
+      children: item.title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: item.children.map(renderItem)
+    })]
+  }, "group-".concat(item.title));
 }
 
-function renderLinksItem(item) {
-  if (Array.isArray(item)) {
-    return item.map(renderLinksItem);
+function renderItem(item) {
+  var _item$children;
+
+  if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+    return renderGroup(item);
   }
 
   const {
@@ -69,6 +66,7 @@ function renderLinksItem(item) {
   } = item; // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    className: "layout-sidebar-item",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_externalLink.NavLink, {
       external: external,
       to: url,
@@ -80,7 +78,7 @@ function renderLinksItem(item) {
           'layout-sidebar-link--active': external ? active : isActive
         });
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
         children: icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -105,7 +103,7 @@ function Sidebar(_ref2) {
       'layout-sidebar-dense': dense
     }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: renderLinks(links)
+      children: links.map(renderItem)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         flex: 1
@@ -124,6 +122,6 @@ Sidebar.defaultProps = {
   dense: false
 };
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .layout-sidebar-link {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 22px 24px;\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &.layout-sidebar-link--active {\n      color: ", ";\n      background: ", ";\n      border-left-color: ", ";\n    }\n  }\n  .layout-sidebar-icon {\n    display: inline-block;\n    width: 32px;\n    height: 32px;\n    > img,\n    > svg {\n      width: 32px;\n      height: 32px;\n    }\n  }\n  .layout-sidebar-badge {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 10px;\n      height: 10px;\n      border-radius: 10px;\n      background-color: #fe4e44;\n      right: -2px;\n      top: 0;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);\n    }\n  }\n  .layout-sidebar-link-text {\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    text-align: center;\n    text-transform: capitalize;\n    letter-spacing: normal;\n  }\n  .layout-sidebar-divider {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &::after {\n      content: '';\n      display: inline-block;\n      width: 80px;\n      max-width: 100%;\n      border-bottom: 1px solid #ddd;\n    }\n  }\n  &.layout-sidebar-dense {\n    box-sizing: border-box;\n    height: 100%;\n    padding-top: 28px;\n    border-right: 1px solid #ddd;\n    .layout-sidebar-link {\n      flex-direction: row;\n      align-items: center;\n      padding: 10px 36px 10px 24px;\n    }\n    .layout-sidebar-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      margin-right: 12px;\n      > img,\n      > svg {\n        width: 20px;\n        height: 20px;\n      }\n    }\n    .layout-sidebar-badge {\n      &:after {\n        width: 6px;\n        height: 6px;\n        border-radius: 6px;\n        right: -2px;\n        top: 0;\n      }\n    }\n    .layout-sidebar-link-text {\n      margin-top: 0;\n      font-size: 14px;\n    }\n    .layout-sidebar-divider {\n      &::after {\n        content: '';\n        display: inline-block;\n        width: 100%;\n        margin: 12px 0;\n      }\n    }\n  }\n"])), props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .layout-sidebar-link {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 22px 24px;\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &.layout-sidebar-link--active {\n      color: ", ";\n      background: ", ";\n      border-left-color: ", ";\n    }\n  }\n  .layout-sidebar-icon {\n    display: inline-block;\n    width: 32px;\n    height: 32px;\n    > img,\n    > svg {\n      width: 32px;\n      height: 32px;\n    }\n  }\n  .layout-sidebar-badge {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 10px;\n      height: 10px;\n      border-radius: 10px;\n      background-color: #fe4e44;\n      right: -2px;\n      top: 0;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);\n    }\n  }\n  .layout-sidebar-link-text {\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    text-align: center;\n    text-transform: capitalize;\n    letter-spacing: normal;\n  }\n  &.layout-sidebar-dense {\n    box-sizing: border-box;\n    padding: 20px 0;\n    font-weight: bold;\n    .layout-sidebar-item {\n      padding: 0 16px;\n    }\n    .layout-sidebar-item + .layout-sidebar-item {\n      margin-top: 1px;\n    }\n    .layout-sidebar-link {\n      box-sizing: border-box;\n      flex-direction: row;\n      align-items: center;\n      width: 100%;\n      padding: 8px;\n      &:hover,\n      &.layout-sidebar-link--active {\n        color: ", ";\n        background: ", ";\n        border: 0;\n        border-radius: 4px;\n      }\n    }\n    .layout-sidebar-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      margin-right: 8px;\n      > img,\n      > svg {\n        width: 20px;\n        height: 20px;\n      }\n    }\n    .layout-sidebar-badge {\n      &:after {\n        width: 6px;\n        height: 6px;\n        border-radius: 6px;\n        right: -2px;\n        top: 0;\n      }\n    }\n    .layout-sidebar-link-text {\n      margin-top: 0;\n      font-size: 14px;\n    }\n    .layout-sidebar-group {\n      color: ", ";\n      .layout-sidebar-group-title {\n        display: inline-block;\n        padding: 8px 0 8px 24px;\n        font-size: 13px;\n        text-transform: uppercase;\n      }\n    }\n    .layout-sidebar-group + .layout-sidebar-group,\n    .layout-sidebar-group + .layout-sidebar-item,\n    .layout-sidebar-item + .layout-sidebar-group {\n      margin-top: 16px;\n    }\n  }\n"])), props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700, props => props.theme.palette.grey[900], props => props.theme.palette.grey[100], props => props.theme.palette.text.hint);
 var _default = Sidebar;
 exports.default = _default;

package/lib/Locale/selector.js

@@ -184,4 +184,4 @@ LocaleSelector.defaultProps = {
 };
 var _default = LocaleSelector;
 exports.default = _default;
-const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/lib/NavMenu/style.js

@@ -11,7 +11,7 @@ var _templateObject, _templateObject2, _templateObject3;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      text-decoration: none;\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 const HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  .navmenu-root {\n    display: flex;\n    align-items: center;\n  }\n  /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    margin-left: 24px;\n  }\n  .navmenu-root > .navmenu-item:first-child,\n  .navmenu-root > .navmenu-sub:first-child {\n    margin-left: 0;\n  }\n\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    position: absolute;\n    top: 100%;\n  }\n  .navmenu-sub-list {\n    padding: 16px;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    .navmenu-item + .navmenu-item {\n      margin-top: 8px;\n    }\n  }\n  /* \u4E8C\u7EA7 sub menu */\n  .navmenu-root > .navmenu-sub {\n    > .navmenu-sub-container {\n      left: 50%;\n      transform: translateX(-50%);\n      padding-top: 16px;\n    }\n    &.navmenu-sub--opened > .navmenu-sub-container {\n      display: block;\n    }\n  }\n"])));
 /* inline mode */
 

package/lib/Theme/index.js

@@ -14,12 +14,7 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _themeProvider.default;
   }
 });
-Object.defineProperty(exports, "styled", {
-  enumerable: true,
-  get: function get() {
-    return _styles.styled;
-  }
-});
+exports.styled = void 0;
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function get() {
@@ -27,6 +22,8 @@ Object.defineProperty(exports, "useTheme", {
   }
 });
 
+var _styles = require("@mui/material/styles");
+
 var _theme = require("./theme");
 
 Object.keys(_theme).forEach(function (key) {
@@ -41,8 +38,29 @@ Object.keys(_theme).forEach(function (key) {
   });
 });
 
-var _styles = require("@mui/material/styles");
-
 var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const isTransientProp = prop => prop.startsWith('$');
+
+const styled = function styled(component) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return (0, _styles.styled)(component, _objectSpread(_objectSpread({}, options), {}, {
+    shouldForwardProp: prop => {
+      if (options.shouldForwardProp) {
+        return options.shouldForwardProp(prop) && !isTransientProp(prop);
+      }
+
+      return !isTransientProp(prop);
+    }
+  }));
+};
+
+exports.styled = styled;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.17",
+  "version": "2.4.20",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "074d03aa938b1a9f52d2d9ef2bb8d68bb08d061e",
+  "gitHead": "bdb1f508cab04693766e9cea4aec7edf42f64129",
   "dependencies": {
-    "@arcblock/icons": "^2.4.17",
-    "@arcblock/react-hooks": "^2.4.17",
+    "@arcblock/icons": "^2.4.20",
+    "@arcblock/react-hooks": "^2.4.20",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/ErrorBoundary/fallback.js

@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import { red } from '@mui/material/colors';
 import Button from '../Button';
-import { styled, useTheme } from '../Theme';
+import { styled } from '../Theme';
 
 function InternalErrorFallback({ title, desc, retryFunc }) {
-  const theme = useTheme();
   return (
-    <Root role="alert" $theme={theme}>
+    <Root role="alert">
       <h3>{title}</h3>
       <pre>{desc}</pre>
       {retryFunc && (
@@ -47,9 +46,9 @@ ErrorFallbackRetry.propTypes = {
 
 const Root = styled('div')`
   padding: 16px;
-  border: 2px solid ${(props) => props.$theme.palette.error.main};
+  border: 2px solid ${(props) => props.theme.palette.error.main};
   border-radius: 4px;
-  color: ${(props) => props.$theme.palette.error.main};
+  color: ${(props) => props.theme.palette.error.main};
   background-color: ${red[50]};
   font-size: 14px;
   h3 {

package/src/Header/header.js

@@ -2,16 +2,15 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import AutoHidden from './auto-hidden';
-import { styled, useTheme } from '../Theme';
+import { styled } from '../Theme';
 
 /**
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
 function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, maxWidth, ...rest }) {
-  const theme = useTheme();
   return (
-    <Root {...rest} $theme={theme}>
+    <Root {...rest}>
       <Container maxWidth={maxWidth} className="header-container">
         {prepend}
         {logo && <div className="header-logo">{logo}</div>}
@@ -65,9 +64,9 @@ Header.defaultProps = {
 
 const Root = styled('div')`
   position: relative;
-  z-index: ${(props) => props.$theme.zIndex.appBar};
+  z-index: ${(props) => props.theme.zIndex.appBar};
   font-size: 14px;
-  background: ${(props) => props.$theme.palette.common.white};
+  background: ${(props) => props.theme.palette.common.white};
   .header-container {
     display: flex;
     align-items: center;
@@ -129,7 +128,7 @@ const Root = styled('div')`
     display: flex;
     align-items: center;
   }
-  ${(props) => props.$theme.breakpoints.down('lg')} {
+  ${(props) => props.theme.breakpoints.down('lg')} {
     .header-brand {
       margin-right: 12px;
       .header-brand-title {
@@ -139,7 +138,7 @@ const Root = styled('div')`
       }
     }
   }
-  ${(props) => props.$theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     .header-menu {
       display: inline-block;
     }

package/src/Header/responsive-header.js

@@ -40,8 +40,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
           </Button>
         )
       }
-      {...rest}
-      $theme={theme}>
+      {...rest}>
       {!isMobile && _children}
       {isMobile && (
         <Drawer
@@ -74,7 +73,7 @@ const Root = styled(Header)`
   .header-menu {
     display: none;
   }
-  ${(props) => props.$theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     .header-menu {
       display: flex;
       margin-right: 12px;

package/src/Layout/dashboard/index.js

@@ -28,8 +28,12 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
 
 function formatLinks(links, location) {
   return links.map((link) => {
-    if (Array.isArray(link)) {
-      return formatLinks(link, location);
+    if (link.children?.length) {
+      return {
+        ...link,
+        label: link.title,
+        children: formatLinks(link.children, location),
+      };
     }
     return {
       ...link,
@@ -48,21 +52,22 @@ function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...r
   const theme = useTheme();
   const location = useLocation();
   const navItems = useMemo(() => formatLinks(links, location), [location, links]);
-  const flattendNavItems = navItems.flat();
-  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+  const isGroupedMode = navItems.some((item) => !!item.children?.length);
+  // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
+  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
   const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
 
   return (
     <Wrapper {...rest} className={classes}>
       <Helmet title={title} key={title} />
 
-      <StyledUxHeader {...headerProps} $theme={theme}>
+      <StyledUxHeader {...headerProps} className="dashboard-header">
         {({ isMobile, closeMenu }) => {
           if (isMobile) {
             return (
               <NavMenuWrapper
                 mode="inline"
-                items={flattendNavItems}
+                items={navItems}
                 closeMenu={closeMenu}
                 bgColor="transparent"
                 activeTextColor={theme.palette.primary.main}
@@ -124,6 +129,7 @@ const Wrapper = styled('div')`
     box-sizing: border-box;
     flex: 0 0 auto;
     width: ${(props) => props.sidebarWidth}px;
+    overflow: hidden;
     &:hover {
       overflow-y: auto;
     }
@@ -138,8 +144,12 @@ const Wrapper = styled('div')`
     flex: 1;
   }
   &.dashboard-dense {
+    .dashboard-header {
+      border-bottom: 1px solid #eee;
+    }
     .dashboard-sidebar {
-      width: auto;
+      width: 256px;
+      border-right: 1px solid #eee;
     }
   }
   ${(props) => props.theme.breakpoints.up('md')} {

package/src/Layout/dashboard/sidebar.js

@@ -6,35 +6,30 @@ import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
 
-// 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
-function renderLinks(links) {
-  const result = [];
-  links.forEach((item, index) => {
-    const prev = links[index - 1];
-    // 当当前元素和前一个元素仅有一个为 group (array) 时, 在当前元素前面位置添加一个分隔线元素
-    if (index > 0 && ((Array.isArray(prev) && !Array.isArray(item)) || (Array.isArray(item) && !Array.isArray(prev)))) {
-      result.push(<li className="layout-sidebar-divider" key={`divider-after-${index}`} />);
-    }
-    result.push(renderLinksItem(item));
-  });
-  return result.flat();
+function renderGroup(item) {
+  return (
+    <li key={`group-${item.title}`} className="layout-sidebar-group">
+      <span className="layout-sidebar-group-title">{item.title}</span>
+      <ul>{item.children.map(renderItem)}</ul>
+    </li>
+  );
 }
 
-function renderLinksItem(item) {
-  if (Array.isArray(item)) {
-    return item.map(renderLinksItem);
+function renderItem(item) {
+  if (item.children?.length) {
+    return renderGroup(item);
   }
   const { url, icon, title, showBadge, external, active } = item;
   // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
   return (
-    <li key={url}>
+    <li key={url} className="layout-sidebar-item">
       <NavLink
         external={external}
         to={url}
         className={({ isActive }) =>
           clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
         }>
-        <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
+        {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
         <Typography component="span" className="layout-sidebar-link-text">
           {title}
         </Typography>
@@ -46,7 +41,7 @@ function renderLinksItem(item) {
 function Sidebar({ links, addons, dense, ...rest }) {
   return (
     <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
-      <ul>{renderLinks(links)}</ul>
+      <ul>{links.map(renderItem)}</ul>
       <div style={{ flex: 1 }} />
       {addons}
     </Root>
@@ -121,33 +116,35 @@ const Root = styled('div')`
     text-transform: capitalize;
     letter-spacing: normal;
   }
-  .layout-sidebar-divider {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &::after {
-      content: '';
-      display: inline-block;
-      width: 80px;
-      max-width: 100%;
-      border-bottom: 1px solid #ddd;
-    }
-  }
   &.layout-sidebar-dense {
     box-sizing: border-box;
-    height: 100%;
-    padding-top: 28px;
-    border-right: 1px solid #ddd;
+    padding: 20px 0;
+    font-weight: bold;
+    .layout-sidebar-item {
+      padding: 0 16px;
+    }
+    .layout-sidebar-item + .layout-sidebar-item {
+      margin-top: 1px;
+    }
     .layout-sidebar-link {
+      box-sizing: border-box;
       flex-direction: row;
       align-items: center;
-      padding: 10px 36px 10px 24px;
+      width: 100%;
+      padding: 8px;
+      &:hover,
+      &.layout-sidebar-link--active {
+        color: ${(props) => props.theme.palette.grey[900]};
+        background: ${(props) => props.theme.palette.grey[100]};
+        border: 0;
+        border-radius: 4px;
+      }
     }
     .layout-sidebar-icon {
       display: inline-block;
       width: 20px;
       height: 20px;
-      margin-right: 12px;
+      margin-right: 8px;
       > img,
       > svg {
         width: 20px;
@@ -167,14 +164,20 @@ const Root = styled('div')`
       margin-top: 0;
       font-size: 14px;
     }
-    .layout-sidebar-divider {
-      &::after {
-        content: '';
+    .layout-sidebar-group {
+      color: ${(props) => props.theme.palette.text.hint};
+      .layout-sidebar-group-title {
         display: inline-block;
-        width: 100%;
-        margin: 12px 0;
+        padding: 8px 0 8px 24px;
+        font-size: 13px;
+        text-transform: uppercase;
       }
     }
+    .layout-sidebar-group + .layout-sidebar-group,
+    .layout-sidebar-group + .layout-sidebar-item,
+    .layout-sidebar-item + .layout-sidebar-group {
+      margin-top: 16px;
+    }
   }
 `;
 

package/src/Locale/selector.js

@@ -139,6 +139,7 @@ const Div = styled('div')`
 
   .locales {
     background: ${(props) => getBackground(props)};
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
   }
 
   .locale-item {

package/src/NavMenu/style.js

@@ -15,6 +15,7 @@ const NavMenuBase = styled('nav')`
   }
   a {
     color: inherit;
+    text-decoration: none;
   }
   /* active/hover */
   .navmenu-item,
@@ -32,7 +33,6 @@ const NavMenuBase = styled('nav')`
     cursor: pointer;
     transition: color 0.2s ease-in-out;
     a {
-      text-decoration: none;
       white-space: nowrap;
     }
     a::before {

package/src/Theme/index.js

@@ -1,3 +1,19 @@
+import { styled as muiStyled, useTheme } from '@mui/material/styles';
+
 export * from './theme';
-export { styled, useTheme } from '@mui/material/styles';
 export { default as ThemeProvider } from './theme-provider';
+export { useTheme };
+
+const isTransientProp = (prop) => prop.startsWith('$');
+
+export const styled = (component, options = {}) => {
+  return muiStyled(component, {
+    ...options,
+    shouldForwardProp: (prop) => {
+      if (options.shouldForwardProp) {
+        return options.shouldForwardProp(prop) && !isTransientProp(prop);
+      }
+      return !isTransientProp(prop);
+    },
+  });
+};