@arcblock/ux 2.4.18 → 2.4.21

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/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/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.18",
+  "version": "2.4.21",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -19,11 +19,11 @@
     "lint": "eslint src tests",
     "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
     "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
-    "precommit": "CI=1 yarn test",
-    "prepush": "CI=1 yarn test",
+    "precommit": "CI=1 npm run lint",
+    "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
-    "test": "npm run lint && node tools/jest.js",
-    "coverage": "npm run lint && yarn test -- --coverage"
+    "test": "node tools/jest.js",
+    "coverage": "npm run test -- --coverage"
   },
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^24.9.0",
+    "jest": "^28.1.3",
     "moment-timezone": "^0.5.34"
   },
   "peerDependencies": {
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "45fe2e3b1726e2172aad280f62b81dea7e353f1b",
+  "gitHead": "5989f403515c81eaaa1c1b459b1d79daf8cca317",
   "dependencies": {
-    "@arcblock/icons": "^2.4.18",
-    "@arcblock/react-hooks": "^2.4.18",
+    "@arcblock/icons": "^2.4.21",
+    "@arcblock/react-hooks": "^2.4.21",
     "@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/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/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);
+    },
+  });
+};