@arcblock/ux 2.4.28 → 2.4.30

package/lib/Button/wrap.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Spinner = _interopRequireDefault(require("../Spinner"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
@@ -111,7 +111,7 @@ function _default(BaseComponent) {
       ref: forwardedRef,
       disabled: isDisabled
     }, _rest), {}, {
-      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
         size: loadingSize,
         style: {
           marginRight: 5

package/lib/Datatable/index.js

@@ -22,9 +22,9 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _Empty = _interopRequireDefault(require("../Empty"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
-var _Spinner = _interopRequireDefault(require("../Spinner"));
+var _Empty = _interopRequireDefault(require("../Empty"));
 
 var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
@@ -211,7 +211,7 @@ function ReDatatable(_ref2) {
   let emptyEl;
 
   if (loading) {
-    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {});
+    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {});
   } else if ( /*#__PURE__*/(0, _react.isValidElement)(emptyNode)) {
     emptyEl = emptyNode;
   } else if (locale === 'zh') {
@@ -424,9 +424,11 @@ const getDurableData = key => {
 
 exports.getDurableData = getDurableData;
 const alignCss = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTableCell-head {\n    [class*='MUIDataTableHeadCell-toolButton'] {\n      width: 100%;\n      > [class*='MUIDataTableHeadCell-sortAction'] {\n        width: 100%;\n      }\n    }\n    &.pc-align-center {\n      text-align: center;\n      [class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction'] {\n        justify-content: center;\n      }\n    }\n    &.pc-align-right {\n      text-align: right;\n      [class*='MUIDataTableHeadCell-toolButton'] {\n        margin-right: 0;\n        padding-right: 0;\n        & > [class*='MUIDataTableHeadCell-sortAction'] {\n          justify-content: flex-end;\n        }\n      }\n    }\n  }\n  .MuiTableCell-body {\n    &.pc-align-center {\n      text-align: center;\n    }\n    &.pc-align-right {\n      text-align: right;\n    }\n  }\n"])));
-const TableContainer = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.datatable-hide-header {\n    thead.MuiTableHead-root {\n      display: none;\n    }\n  }\n\n  td {\n    &.vertical-align-top {\n      align-items: flex-start;\n    }\n    &.vertical-align-center {\n      align-items: center;\n    }\n    &.vertical-align-bottom {\n      align-items: flex-end;\n    }\n  }\n\n  height: 100%;\n  > .MuiPaper-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-shadow: none;\n  }\n  ", " {\n    td.MuiTableCell-body {\n      padding-right: 0;\n    }\n    [class*='MUIDataTable-responsiveBase'] {\n      tr:not([class*='responsiveSimple']) {\n        td.MuiTableCell-body {\n          display: flex;\n          > div {\n            width: auto;\n            flex: 1;\n            &:first-child {\n              font-weight: bold;\n              font-size: 14px;\n              width: auto;\n              flex: 0 0 auto;\n              padding-right: 16px;\n              &:empty {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n  ", " {\n    [class*='responsiveSimple'] {\n      ", "\n    }\n  }\n\n  ", "\n\n  &.datatable-stripped {\n    .MuiTableBody-root {\n      tr:nth-of-type(odd) {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
+const TableContainer = (0, _Theme.styled)('div', {
+  shouldForwardProp: prop => prop !== 'verticalKeyWidth'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.datatable-hide-header {\n    thead.MuiTableHead-root {\n      display: none;\n    }\n  }\n\n  td {\n    &.vertical-align-top {\n      align-items: flex-start;\n    }\n    &.vertical-align-center {\n      align-items: center;\n    }\n    &.vertical-align-bottom {\n      align-items: flex-end;\n    }\n  }\n\n  height: 100%;\n  > .MuiPaper-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-shadow: none;\n  }\n  ", " {\n    td.MuiTableCell-body {\n      padding-right: 0;\n    }\n    [class*='MUIDataTable-responsiveBase'] {\n      tr:not([class*='responsiveSimple']) {\n        td.MuiTableCell-body {\n          display: flex;\n          > div {\n            width: auto;\n            flex: 1;\n            &:first-of-type {\n              font-weight: bold;\n              font-size: 14px;\n              width: auto;\n              flex: 0 0 auto;\n              padding-right: 16px;\n              &:empty {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n  ", " {\n    [class*='responsiveSimple'] {\n      ", "\n    }\n  }\n\n  ", "\n\n  &.datatable-stripped {\n    .MuiTableBody-root {\n      tr:nth-of-type(odd) {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
   if (inProps.verticalKeyWidth) {
-    return "\n        ".concat(inProps.theme.breakpoints.down('md'), " {\n          [class*='MUIDataTable-responsiveBase'] {\n            tr:not([class*='responsiveSimple']) {\n              td.MuiTableCell-body {\n                > div {\n                  &:first-child {\n                    width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n                  }\n                }\n              }\n            }\n          }\n        }\n      ");
+    return "\n        ".concat(inProps.theme.breakpoints.down('md'), " {\n          [class*='MUIDataTable-responsiveBase'] {\n            tr:not([class*='responsiveSimple']) {\n              td.MuiTableCell-body {\n                > div {\n                  &:first-of-type {\n                    width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n                  }\n                }\n              }\n            }\n          }\n        }\n      ");
   }
 
   return '';

package/lib/Footer/index.js

@@ -76,8 +76,9 @@ function Footer(props) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       position: "absolute",
-      right: 0,
+      right: 16,
       bottom: 0,
+      fontSize: 12,
       sx: {
         color: 'transparent',
         '::selection': {

package/lib/NavMenu/style.js

@@ -12,7 +12,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    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"])));
+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-of-type,\n  .navmenu-root > .navmenu-sub:first-of-type {\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 */
 
 exports.HorizontalStyle = HorizontalStyle;

package/package.json

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

package/src/Button/wrap.js

@@ -3,7 +3,7 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-import Spinner from '../Spinner';
+import CircularProgress from '@mui/material/CircularProgress';
 import colors from '../Colors';
 import { mergeProps } from '../Util';
 
@@ -57,7 +57,7 @@ export default function (BaseComponent) {
 
     return (
       <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
-        {loading && <Spinner size={loadingSize} style={{ marginRight: 5 }} />}
+        {loading && <CircularProgress size={loadingSize} style={{ marginRight: 5 }} />}
         {children}
       </BaseComponent>
     );

package/src/Datatable/index.js

@@ -7,8 +7,8 @@ import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import clsx from 'clsx';
+import CircularProgress from '@mui/material/CircularProgress';
 import Empty from '../Empty';
-import Spinner from '../Spinner';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvider, useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
@@ -167,7 +167,7 @@ function ReDatatable({
 
   let emptyEl;
   if (loading) {
-    emptyEl = <Spinner />;
+    emptyEl = <CircularProgress />;
   } else if (isValidElement(emptyNode)) {
     emptyEl = emptyNode;
   } else if (locale === 'zh') {
@@ -382,7 +382,7 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled('div')`
+const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })`
   &.datatable-hide-header {
     thead.MuiTableHead-root {
       display: none;
@@ -419,7 +419,7 @@ const TableContainer = styled('div')`
           > div {
             width: auto;
             flex: 1;
-            &:first-child {
+            &:first-of-type {
               font-weight: bold;
               font-size: 14px;
               width: auto;
@@ -451,7 +451,7 @@ const TableContainer = styled('div')`
             tr:not([class*='responsiveSimple']) {
               td.MuiTableCell-body {
                 > div {
-                  &:first-child {
+                  &:first-of-type {
                     width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
                   }
                 }

package/src/Footer/index.js

@@ -32,8 +32,9 @@ export default function Footer(props) {
       </MuiContainer>
       <Box
         position="absolute"
-        right={0}
+        right={16}
         bottom={0}
+        fontSize={12}
         sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
         {window?.blocklet?.version}
       </Box>

package/src/NavMenu/style.js

@@ -89,8 +89,8 @@ export const HorizontalStyle = styled(NavMenuBase)`
   .navmenu-root > .navmenu-sub {
     margin-left: 24px;
   }
-  .navmenu-root > .navmenu-item:first-child,
-  .navmenu-root > .navmenu-sub:first-child {
+  .navmenu-root > .navmenu-item:first-of-type,
+  .navmenu-root > .navmenu-sub:first-of-type {
     margin-left: 0;
   }