@arcblock/ux 2.9.47 → 2.9.48

package/es/Layout/dashboard/index.js

@@ -123,10 +123,16 @@ function Dashboard({
       children: [/*#__PURE__*/_jsx(Hidden, {
         mdDown: true,
         children: !!links?.length && sidebarVisible && /*#__PURE__*/_jsx(Box, {
-          className: ['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' '),
-          children: /*#__PURE__*/_jsx(Sidebar, {
+          className: "dashboard-sidebar",
+          children: _dense ? /*#__PURE__*/_jsx(Sidebar, {
             links: links,
             dense: _dense
+          }) : /*#__PURE__*/_jsx(Box, {
+            className: "dashboard-sidebar-container",
+            children: /*#__PURE__*/_jsx(Sidebar, {
+              links: links,
+              dense: _dense
+            })
           })
         })
       }), /*#__PURE__*/_jsxs(Box, {
@@ -208,11 +214,8 @@ const Wrapper = styled('div', {
       overflow-y: auto;
     }
   }
-  .dashboard-sidebar-padding {
-    &:hover {
-      padding-left: 15px;
-      overflow-y: auto;
-    }
+  .dashboard-sidebar-container {
+    width: ${props => props.sidebarWidth}px;
   }
   .dashboard-main {
     display: flex;

package/lib/Layout/dashboard/index.js

@@ -142,10 +142,16 @@ function Dashboard(_ref2) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
         mdDown: true,
         children: !!(links !== null && links !== void 0 && links.length) && sidebarVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          className: ['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' '),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
+          className: "dashboard-sidebar",
+          children: _dense ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
             links: links,
             dense: _dense
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "dashboard-sidebar-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
+              links: links,
+              dense: _dense
+            })
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -206,7 +212,7 @@ Dashboard.defaultProps = {
 };
 const Wrapper = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'sidebarWidth'
-})(_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-sidebar-padding {\n    &:hover {\n      padding-left: 15px;\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\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      min-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);
+})(_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-sidebar-container {\n    width: ", "px;\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\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      min-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.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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.47",
+  "version": "2.9.48",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -358,12 +358,12 @@
     "@mui/material": "^5.15.0",
     "react": ">=18.2.0"
   },
-  "gitHead": "c37f23c144ed8efbd9f23fe3000dac5dc1669e70",
+  "gitHead": "0d53eb8454f7efc849119980227105d8bb3ee7ea",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.47",
-    "@arcblock/nft-display": "^2.9.47",
-    "@arcblock/react-hooks": "^2.9.47",
+    "@arcblock/icons": "^2.9.48",
+    "@arcblock/nft-display": "^2.9.48",
+    "@arcblock/react-hooks": "^2.9.48",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Layout/dashboard/index.js

@@ -94,8 +94,14 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
       <Box display="flex" className="dashboard-body">
         <Hidden mdDown>
           {!!links?.length && sidebarVisible && (
-            <Box className={['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' ')}>
-              <Sidebar links={links} dense={_dense} />
+            <Box className="dashboard-sidebar">
+              {_dense ? (
+                <Sidebar links={links} dense={_dense} />
+              ) : (
+                <Box className="dashboard-sidebar-container">
+                  <Sidebar links={links} dense={_dense} />
+                </Box>
+              )}
             </Box>
           )}
         </Hidden>
@@ -175,11 +181,8 @@ const Wrapper = styled('div', {
       overflow-y: auto;
     }
   }
-  .dashboard-sidebar-padding {
-    &:hover {
-      padding-left: 15px;
-      overflow-y: auto;
-    }
+  .dashboard-sidebar-container {
+    width: ${(props) => props.sidebarWidth}px;
   }
   .dashboard-main {
     display: flex;