@arcblock/ux 2.9.46 → 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/es/Theme/theme.js

@@ -1,16 +1,14 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
+import '@fontsource/inter/latin-300.css';
 import '@fontsource/inter/latin-400.css';
 import '@fontsource/inter/latin-500.css';
-import '@fontsource/inter/latin-600.css';
 import '@fontsource/inter/latin-700.css';
-import '@fontsource/inter/latin-900.css';
+import '@fontsource/inter/latin-ext-300.css';
 import '@fontsource/inter/latin-ext-400.css';
 import '@fontsource/inter/latin-ext-500.css';
-import '@fontsource/inter/latin-ext-600.css';
 import '@fontsource/inter/latin-ext-700.css';
-import '@fontsource/inter/latin-ext-900.css';
 import colors from '../Colors';
 const muiDarkTheme = _createTheme({
   palette: {
@@ -60,11 +58,6 @@ export const create = ({
         gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
       },
       fontFamily: ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
-      // 按最新设计规范, 只使用 400/700
-      fontWeightLight: 400,
-      fontWeightRegular: 400,
-      fontWeightMedium: 700,
-      fontWeightBold: 700,
       // button 默认使用粗体
       button: {
         fontWeight: 700

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/lib/Theme/theme.js

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createTheme = exports.create = void 0;
 var _styles = require("@mui/material/styles");
+require("@fontsource/inter/latin-300.css");
 require("@fontsource/inter/latin-400.css");
 require("@fontsource/inter/latin-500.css");
-require("@fontsource/inter/latin-600.css");
 require("@fontsource/inter/latin-700.css");
-require("@fontsource/inter/latin-900.css");
+require("@fontsource/inter/latin-ext-300.css");
 require("@fontsource/inter/latin-ext-400.css");
 require("@fontsource/inter/latin-ext-500.css");
-require("@fontsource/inter/latin-ext-600.css");
 require("@fontsource/inter/latin-ext-700.css");
-require("@fontsource/inter/latin-ext-900.css");
 var _Colors = _interopRequireDefault(require("../Colors"));
 const _excluded = ["mode", "pageWidth", "palette", "typography", "overrides"]; // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
@@ -74,11 +72,6 @@ const create = exports.create = function create() {
         gray: mode === 'light' ? _Colors.default.grey[500] : _Colors.default.grey[300]
       },
       fontFamily: ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
-      // 按最新设计规范, 只使用 400/700
-      fontWeightLight: 400,
-      fontWeightRegular: 400,
-      fontWeightMedium: 700,
-      fontWeightBold: 700,
       // button 默认使用粗体
       button: {
         fontWeight: 700

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.46",
+  "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": "a82d6d3ccae838268f9e64b5bc60e6734ecffd89",
+  "gitHead": "0d53eb8454f7efc849119980227105d8bb3ee7ea",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.46",
-    "@arcblock/nft-display": "^2.9.46",
-    "@arcblock/react-hooks": "^2.9.46",
+    "@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;

package/src/Theme/theme.js

@@ -1,16 +1,14 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
+import '@fontsource/inter/latin-300.css';
 import '@fontsource/inter/latin-400.css';
 import '@fontsource/inter/latin-500.css';
-import '@fontsource/inter/latin-600.css';
 import '@fontsource/inter/latin-700.css';
-import '@fontsource/inter/latin-900.css';
+import '@fontsource/inter/latin-ext-300.css';
 import '@fontsource/inter/latin-ext-400.css';
 import '@fontsource/inter/latin-ext-500.css';
-import '@fontsource/inter/latin-ext-600.css';
 import '@fontsource/inter/latin-ext-700.css';
-import '@fontsource/inter/latin-ext-900.css';
 
 import colors from '../Colors';
 
@@ -75,11 +73,6 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
           '"Segoe UI Emoji"',
           '"Segoe UI Symbol"',
         ].join(','),
-        // 按最新设计规范, 只使用 400/700
-        fontWeightLight: 400,
-        fontWeightRegular: 400,
-        fontWeightMedium: 700,
-        fontWeightBold: 700,
         // button 默认使用粗体
         button: {
           fontWeight: 700,