@arcblock/ux 2.1.31 → 2.1.34

package/lib/Footer/index.js

@@ -88,7 +88,7 @@ Footer.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "Footer__Container",
   componentId: "sc-1qpifuv-0"
-})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin-left:24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
   let {
     theme,
     dark

package/lib/Locale/selector.js

@@ -41,7 +41,7 @@ var _globeLight = _interopRequireDefault(require("./images/globe-light.png"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["dark", "showText", "popperProps"];
+const _excluded = ["dark", "showText", "popperProps", "popperType", "icon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,7 +59,9 @@ function LocaleSelector(props) {
   const {
     dark,
     showText,
-    popperProps
+    popperProps,
+    popperType,
+    icon: Icon
   } = props,
         rest = _objectWithoutProperties(props, _excluded);
 
@@ -88,23 +90,39 @@ function LocaleSelector(props) {
   }
 
   const ButtonComponent = showText ? _Button.default : _IconButton.default;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({
+  const handleEventProps = popperType === 'hover' ? {
+    onMouseEnter: () => {
+      setOpen(true);
+    },
+    onMouseLeave: onClose
+  } : {
+    onClick: () => {
+      setOpen(!open);
+    }
+  };
+  const renderIcon = (0, _react.useMemo)(() => {
+    if (Icon) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {});
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: dark ? _globeDark.default : _globeLight.default,
+      className: "trigger-image",
+      alt: "globe"
+    });
+  }, [Icon, dark]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
     component: "div",
     dark: dark,
     theme: theme
-  }, rest), {}, {
+  }, rest), handleEventProps), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonComponent, {
       ref: anchorEl,
       className: "trigger",
-      onClick: () => setOpen(!open),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: dark ? _globeDark.default : _globeLight.default,
-          className: "trigger-image",
-          alt: "globe"
-        }), showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: [renderIcon, showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           component: "strong",
           className: "trigger-text",
           children: _context.languages.find(x => x.value === locale).text
@@ -146,14 +164,18 @@ LocaleSelector.propTypes = {
   size: _propTypes.default.number,
   showText: _propTypes.default.bool,
   popperProps: _propTypes.default.object,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  popperType: _propTypes.default.oneOf(['hover', 'click']),
+  icon: _propTypes.default.any
 };
 LocaleSelector.defaultProps = {
   dark: false,
   showText: true,
   size: 24,
   popperProps: {},
-  onChange: () => {}
+  onChange: () => {},
+  popperType: 'click',
+  icon: null
 };
 var _default = LocaleSelector;
 exports.default = _default;
@@ -161,4 +183,4 @@ exports.default = _default;
 const Div = _styledComponents.default.div.withConfig({
   displayName: "selector__Div",
   componentId: "sc-wfz3sf-0"
-})([".trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;color:", ";}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+})(["display:inline-block;.trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;color:", ";}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/lib/NavMenu/style.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const NavMenuBase = _styledComponents.default.nav.withConfig({
   displayName: "style__NavMenuBase",
   componentId: "sc-2g7isz-0"
-})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;max-height:20px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
 const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__HorizontalStyle",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.31",
+  "version": "2.1.34",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "255d332ea93803d8b12a6595eb603a625712e459",
+  "gitHead": "cf0c00b60dfa2819e06e0e063614b99eeb392c79",
   "dependencies": {
-    "@arcblock/icons": "^2.1.31",
-    "@arcblock/react-hooks": "^2.1.31",
+    "@arcblock/icons": "^2.1.34",
+    "@arcblock/react-hooks": "^2.1.34",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Footer/index.js

@@ -78,7 +78,7 @@ const Container = styled.div`
     }
 
     .logo-container {
-      margin: 0 24px;
+      margin-left: 24px;
       width: 90px;
       opacity: 0.5;
     }

package/src/Locale/selector.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
-import { useState, useContext, useRef } from 'react';
+import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -22,7 +22,7 @@ import globeDark from './images/globe-dark.png';
 import globeLight from './images/globe-light.png';
 
 function LocaleSelector(props) {
-  const { dark, showText, popperProps, ...rest } = props;
+  const { dark, showText, popperProps, popperType, icon: Icon, ...rest } = props;
   const { locale, changeLocale } = useContext(LocaleContext);
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
@@ -43,11 +43,34 @@ function LocaleSelector(props) {
 
   const ButtonComponent = showText ? Button : IconButton;
 
+  const handleEventProps =
+    popperType === 'hover'
+      ? {
+          onMouseEnter: () => {
+            setOpen(true);
+          },
+          onMouseLeave: onClose,
+        }
+      : {
+          onClick: () => {
+            setOpen(!open);
+          },
+        };
+
+  const renderIcon = useMemo(() => {
+    if (Icon) {
+      return <Icon />;
+    }
+
+    return <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />;
+  }, [Icon, dark]);
+
   return (
-    <Div component="div" dark={dark} theme={theme} {...rest}>
-      <ButtonComponent ref={anchorEl} className="trigger" onClick={() => setOpen(!open)}>
+    <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
+      <ButtonComponent ref={anchorEl} className="trigger">
         <Box display="flex" alignItems="center">
-          <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
+          {renderIcon}
+
           {showText ? (
             <Typography component="strong" className="trigger-text">
               {languages.find((x) => x.value === locale).text}
@@ -57,6 +80,7 @@ function LocaleSelector(props) {
           )}
         </Box>
       </ButtonComponent>
+
       <Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
         <div className="locales">
           <ClickAwayListener onClickAway={onClose}>
@@ -84,6 +108,8 @@ LocaleSelector.propTypes = {
   showText: PropTypes.bool,
   popperProps: PropTypes.object,
   onChange: PropTypes.func,
+  popperType: PropTypes.oneOf(['hover', 'click']),
+  icon: PropTypes.any,
 };
 
 LocaleSelector.defaultProps = {
@@ -92,20 +118,25 @@ LocaleSelector.defaultProps = {
   size: 24,
   popperProps: {},
   onChange: () => {},
+  popperType: 'click',
+  icon: null,
 };
 
 export default LocaleSelector;
 
 const Div = styled.div`
+  display: inline-block;
   .trigger {
     display: flex;
     flex-direction: column;
     justify-content: center;
     font-size: 14px;
+
     .trigger-image {
       width: ${(props) => props.size}px;
       height: ${(props) => props.size}px;
     }
+
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;

package/src/NavMenu/style.js

@@ -63,6 +63,8 @@ const NavMenuBase = styled.nav`
   }
   .navmenu-item-icon > *,
   .navmenu-sub-icon > * {
+    width: auto;
+    max-height: 20px;
     font-size: 1.5em;
   }
   .navmenu-sub-expand-icon {