@arcblock/ux 2.2.4 → 2.4.1

package/src/ActivityIndicator/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { green, blue } from '@mui/material/colors';
 
 import Logo from '../Logo';

package/src/Alert/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 import { blueGrey } from '@mui/material/colors';
 

package/src/AnimationWaiter/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
 import lottieJson from './default-animation.json';

package/src/Badge/index.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 

package/src/Blocklet/blocklet.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';

package/src/Blocklet/utils.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const ActionButton = styled.div`
   background-color: transparent !important;

package/src/BlockletNFT/index.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import Portal from '@mui/material/Portal';
 import Typography from '@mui/material/Typography';

package/src/Center/index.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 
 /**

package/src/ClickToCopy/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
 import { mergeProps } from '../Util';

package/src/CodeBlock/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Copy from 'copy-to-clipboard';
 import Button from '@mui/material/IconButton';
 import useMountedState from 'react-use/lib/useMountedState';

package/src/ContactForm/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/static-property-placement */
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import axios from 'axios';
 
 import Typography from '@mui/material/Typography';

package/src/CookieConsent/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Button from '@mui/material/Button';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 

package/src/CountDown/index.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { getColor, mergeProps } from '../Util';
 

package/src/Datatable/CustomToolbar.js

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableFilter, TableViewCol } from 'mui-datatables';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';

package/src/Datatable/DatatableContext.js

@@ -5,7 +5,7 @@ const DatatableContext = createContext({});
 const { Provider } = DatatableContext;
 
 // eslint-disable-next-line react/prop-types
-function DatatableProvide({ children }) {
+function DatatableProvider({ children }) {
   const [customButtons, setCustomButtons] = useState([]);
   const [loading, setLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
@@ -29,4 +29,4 @@ function useDatatableContext() {
   return useContext(DatatableContext);
 }
 
-export { DatatableProvide, useDatatableContext };
+export { DatatableProvider, useDatatableContext };

package/src/Datatable/TableSearch.js

@@ -5,7 +5,7 @@ import Tooltip from '@mui/material/Tooltip';
 import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { useDatatableContext } from './DatatableContext';
 

package/src/Datatable/index.js

@@ -2,7 +2,8 @@
 import { useEffect, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
@@ -10,13 +11,13 @@ import clsx from 'clsx';
 import Empty from '../Empty';
 import Spinner from '../Spinner';
 import CustomToolbar from './CustomToolbar';
-import { DatatableProvide, useDatatableContext } from './DatatableContext';
+import { DatatableProvider, useDatatableContext } from './DatatableContext';
 
 export default function Datatable({ ...props }) {
   return (
-    <DatatableProvide>
+    <DatatableProvider>
       <ReDatatable {...props} />
-    </DatatableProvide>
+    </DatatableProvider>
   );
 }
 

package/src/Dialog/dialog.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import MuiDialog from '@mui/material/Dialog';
 import MuiDialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';

package/src/Earth/index.js

@@ -2,7 +2,7 @@
 import { useReducer, useRef, useEffect } from 'react';
 import useSpring from 'react-use/lib/useSpring';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import * as d3 from 'd3-geo';
 import * as topojson from 'topojson-client';
 import versor from 'versor';

package/src/Empty/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Icon from '../Icon';
 
 const Wrapper = styled.div`

package/src/ErrorBoundary/fallback.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 import Button from '../Button';

package/src/Footer/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 import MuiContainer from '@mui/material/Container';
 

package/src/Header/auto-hidden.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
 /**

package/src/Header/header.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import { useTheme } from '@mui/material/styles';

package/src/Header/responsive-header.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import Button from '@mui/material/IconButton';

package/src/Icon/image.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Img from '../Img';
 

package/src/Icon/index.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import colors from '../Colors';
 

package/src/InfoRow/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Typography from '@mui/material/Typography';
 
 function InfoRow({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) {

package/src/Layout/dashboard/index.js

@@ -1,8 +1,8 @@
 import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter, useLocation, matchPath } from 'react-router-dom';
+import { useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';
@@ -39,7 +39,7 @@ function formatLinks(links, location) {
           {link.title}
         </Link>
       ),
-      active: !!matchPath(location.pathname, { path: link.url, exact: false }),
+      active: !!matchPath({ path: link.url, end: false }, location.pathname),
     };
   });
 }
@@ -165,7 +165,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
 `;
 
 // 兼容旧版 dashboard
-function DashboardWrapper({ legacy, ...rest }) {
+export default function DashboardWrapper({ legacy, ...rest }) {
   if (legacy) {
     return <DashboardLegacy {...rest} />;
   }
@@ -181,5 +181,3 @@ DashboardWrapper.defaultProps = {
   ...Dashboard.defaultProps,
   legacy: true,
 };
-
-export default withRouter(DashboardWrapper);

package/src/Layout/dashboard/sidebar.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
@@ -31,8 +31,9 @@ function renderLinksItem(item) {
       <NavLink
         to={url}
         external={external}
-        className="layout-sidebar-link"
-        activeClassName="layout-sidebar-link--active">
+        className={({ isActive }) =>
+          isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link'
+        }>
         <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
         <Typography component="span" className="layout-sidebar-link-text">
           {title}

package/src/Layout/dashboard-legacy/header.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Button from '@mui/material/IconButton';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';

package/src/Layout/dashboard-legacy/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';

package/src/Layout/dashboard-legacy/sidebar.js

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import { withRouter, Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -11,8 +11,9 @@ import { teal } from '@mui/material/colors';
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 
-function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
+export default function Sidebar({ images, links, prefix, addons, logo, ...rest }) {
   const theme = useTheme();
+  const location = useLocation();
   const isSelected = (url, name) => {
     const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
@@ -47,7 +48,6 @@ function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
 }
 
 Sidebar.propTypes = {
-  location: PropTypes.object.isRequired,
   images: PropTypes.object.isRequired,
   links: PropTypes.array.isRequired,
   prefix: PropTypes.string,
@@ -116,5 +116,3 @@ const MenuItem = styled(Button)`
     }
   }
 `;
-
-export default withRouter(Sidebar);

package/src/Layout/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Helmet from 'react-helmet';
 import Link from '@mui/material/Link';
 

package/src/Locale/selector.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';

package/src/Logo/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { ReactComponent as LightLogo } from './images/logo-light-top.svg';
 import { ReactComponent as LightText } from './images/logo-light-text.svg';

package/src/Metric/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import ImageIcon from '../Icon/image';
 

package/src/NFTDisplay/aspect-ratio-container.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 function AspectRatioContainer({ aspect, children, ...rest }) {
   return (

package/src/NFTDisplay/broken.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import BrokenImage from '@mui/icons-material/BrokenImage';
 
 export default function Broken() {

package/src/NFTDisplay/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';

package/src/NFTDisplay/loading.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default function Loading() {
   return <Root className="nft-display__loading">loading...</Root>;

package/src/NFTDisplay/svg-embedder/inline-svg.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import root from 'react-shadow/styled-components';
+import styled from '@emotion/styled';
+import root from 'react-shadow/emotion';
 
 /**
  * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染

package/src/NavMenu/style.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const NavMenuBase = styled.nav`
   background-color: ${(props) => props.$bgColor};

package/src/PricingTable/PricingPlan.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';

package/src/PricingTable/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';

package/src/Result/result.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
 function Result({ icon, title, description, extra, ...rest }) {

package/src/Screenshot/index.js

@@ -1,6 +1,6 @@
 import { createElement, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { mergeProps } from '../Util';
 

package/src/SplitButton/index.js

@@ -1,6 +1,6 @@
 import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';

package/src/Tag/index.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';

package/src/TextCollapse/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import Typography from '@mui/material/Typography';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default function TextCollapse({
   children,

package/src/Theme/theme-provider.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -9,17 +9,16 @@ const defaultTheme = create();
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
  */
-export default function ThemeProvider({ children, theme }) {
+export default function ThemeProvider({ children, theme, injectFirst }) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    <StyledEngineProvider injectFirst>
+    <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={theme}>
-        <StyledThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
           <CssBaseline />
           {children}
-        </StyledThemeProvider>
+        </EmotionThemeProvider>
       </MuiThemeProvider>
     </StyledEngineProvider>
   );
@@ -28,9 +27,11 @@ export default function ThemeProvider({ children, theme }) {
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
+  injectFirst: PropTypes.bool,
 };
 
 ThemeProvider.defaultProps = {
   children: null,
   theme: defaultTheme,
+  injectFirst: true,
 };

package/src/Video/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import CircularProgress from '@mui/material/CircularProgress';
 

package/src/Wallet/Action.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 

package/src/Wallet/Download.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';

package/src/Wallet/Open.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 

package/src/WechatPrompt/index.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';