@arcblock/ux 2.9.91 → 2.10.0

package/lib/Locale/context.js

@@ -1,43 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LocaleContext = exports.LocaleConsumer = void 0;
-exports.LocaleProvider = LocaleProvider;
-exports.setLocale = exports.getLocale = void 0;
-exports.useLocaleContext = useLocaleContext;
-var _react = require("react");
-var _get = _interopRequireDefault(require("lodash/get"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsCookie = _interopRequireDefault(require("js-cookie"));
-var _browserLang = _interopRequireDefault(require("./browser-lang"));
-var _util = require("./util");
-var _Util = require("../Util");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "locale", "fallbackLocale", "translations", "onLoadingTranslation", "languages"];
 /* eslint-disable no-prototype-builtins */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import Cookie from 'js-cookie';
+import browserLang from './browser-lang';
+import { translate } from './util';
+import { getCookieOptions } from '../Util';
+import { jsx as _jsx } from "react/jsx-runtime";
 const cookieName = 'nf_lang';
 
 // 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
-const getLocaleFromSearchParams = function getLocaleFromSearchParams(languages) {
-  let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.href;
+const getLocaleFromSearchParams = (languages, url = window.location.href) => {
   const locale = new URL(url).searchParams.get('locale');
   if (languages.find(x => x.code === locale)) {
     return locale;
   }
   return null;
 };
-const setLocaleParam = function setLocaleParam(locale) {
-  let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.href;
+const setLocaleParam = (locale, url = window.location.href) => {
   const urlObj = new URL(url);
   const hasLocaleParam = urlObj.searchParams.has('locale');
   if (hasLocaleParam) {
@@ -45,23 +25,20 @@ const setLocaleParam = function setLocaleParam(locale) {
     window.history.replaceState({}, '', urlObj.href);
   }
 };
-const getLocale = exports.getLocale = function getLocale() {
-  var _languages$;
-  let languages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+const getLocale = (languages = []) => {
   const langParams = {
     languages: languages.map(item => item.code),
     // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
-    fallback: (languages === null || languages === void 0 ? void 0 : (_languages$ = languages[0]) === null || _languages$ === void 0 ? void 0 : _languages$.code) || 'en'
+    fallback: languages?.[0]?.code || 'en'
   };
-  return getLocaleFromSearchParams(languages) || _jsCookie.default.get(cookieName) || (0, _browserLang.default)(langParams);
+  return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
 };
 const setLocale = locale => {
-  _jsCookie.default.set(cookieName, locale, (0, _Util.getCookieOptions)());
+  Cookie.set(cookieName, locale, getCookieOptions());
   setLocaleParam(locale);
 };
-exports.setLocale = setLocale;
 const getLanguages = arg => {
-  const env = (0, _get.default)(window, 'blocklet.languages');
+  const env = get(window, 'blocklet.languages');
   if (Array.isArray(env) && env.length) {
     return env;
   }
@@ -76,32 +53,30 @@ const getLanguages = arg => {
     name: '简体中文'
   }];
 };
-const LocaleContext = exports.LocaleContext = /*#__PURE__*/(0, _react.createContext)();
+const LocaleContext = /*#__PURE__*/createContext();
 const {
   Provider,
   Consumer
 } = LocaleContext;
-exports.LocaleConsumer = Consumer;
-function LocaleProvider(_ref) {
-  let {
-      children,
-      locale,
-      fallbackLocale,
-      translations,
-      onLoadingTranslation,
-      languages
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+function LocaleProvider({
+  children,
+  locale,
+  fallbackLocale,
+  translations,
+  onLoadingTranslation,
+  languages,
+  ...rest
+}) {
   const langs = getLanguages(languages);
   // eslint-disable-next-line prefer-const
-  let [currentLocale, setCurrentLocale] = (0, _react.useState)(locale || getLocale(langs));
-  const lastCurrentLocale = (0, _react.useRef)(fallbackLocale);
-  const [, setForceUpdate] = (0, _react.useState)(0);
+  let [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
+  const lastCurrentLocale = useRef(fallbackLocale);
+  const [, setForceUpdate] = useState(0);
   const changeLocale = newLocale => {
     setCurrentLocale(newLocale);
     setLocale(newLocale);
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const tmpLocale = locale || getLocale(langs);
     if (tmpLocale !== currentLocale) {
       changeLocale(tmpLocale);
@@ -127,31 +102,32 @@ function LocaleProvider(_ref) {
   } else {
     lastCurrentLocale.current = currentLocale;
   }
-  const t = (0, _react.useCallback)((key, data) => (0, _util.translate)(translations, key, currentLocale, fallbackLocale, data), [translations, currentLocale, fallbackLocale]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
-    value: _objectSpread({
+  const t = useCallback((key, data) => translate(translations, key, currentLocale, fallbackLocale, data), [translations, currentLocale, fallbackLocale]);
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
       locale: currentLocale,
       changeLocale,
       t,
-      languages: langs
-    }, rest),
+      languages: langs,
+      ...rest
+    },
     children: children
   });
 }
 function useLocaleContext() {
-  const context = (0, _react.useContext)(LocaleContext);
+  const context = useContext(LocaleContext);
   return context;
 }
 LocaleProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  translations: _propTypes.default.object.isRequired,
-  onLoadingTranslation: _propTypes.default.func,
-  locale: _propTypes.default.string,
+  children: PropTypes.any.isRequired,
+  translations: PropTypes.object.isRequired,
+  onLoadingTranslation: PropTypes.func,
+  locale: PropTypes.string,
   // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
-  fallbackLocale: _propTypes.default.string,
-  languages: _propTypes.default.arrayOf(_propTypes.default.shape({
-    code: _propTypes.default.string,
-    name: _propTypes.default.string
+  fallbackLocale: PropTypes.string,
+  languages: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string,
+    name: PropTypes.string
   }))
 };
 LocaleProvider.defaultProps = {
@@ -159,4 +135,5 @@ LocaleProvider.defaultProps = {
   fallbackLocale: '',
   languages: [],
   onLoadingTranslation: () => {}
-};
+};
+export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/lib/Locale/languages.js

@@ -1,16 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.map = exports.default = void 0;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // from: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
-const languages = exports.map = {
+const languages = {
   ar: {
     name: 'Arabic',
     nativeName: 'اَلْعَرَبِيَّةُ'
@@ -64,6 +53,8 @@ const languages = exports.map = {
     nativeName: '繁體中文'
   }
 };
-var _default = exports.default = Object.keys(languages).map(code => _objectSpread({
-  code
-}, languages[code]));
+export default Object.keys(languages).map(code => ({
+  code,
+  ...languages[code]
+}));
+export { languages as map };

package/lib/Locale/selector.js

@@ -1,52 +1,35 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = LocaleSelector;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _react2 = require("@iconify/react");
-var _check = _interopRequireDefault(require("@iconify-icons/material-symbols/check"));
-var _language = _interopRequireDefault(require("iconify-icons-material-symbols-400/language"));
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _Util = require("../Util");
-var _Colors = require("../Colors");
-var _context = require("./context");
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-const _excluded = ["showText", "popperProps", "popperType", "icon", "size"];
 /* eslint-disable react/jsx-no-bind */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function LocaleSelector(props) {
-  var _theme$palette;
+import { useState, useContext, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
+import { Icon as IconifyIcon } from '@iconify/react';
+import CheckIcon from '@iconify-icons/material-symbols/check';
+import LanguageIcon from 'iconify-icons-material-symbols-400/language';
+import noop from 'lodash/noop';
+import { getColor, getBackground } from '../Util';
+import { temp as colors } from '../Colors';
+import { LocaleContext } from './context';
+import { styled, useTheme } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function LocaleSelector(props) {
   const {
-      showText,
-      popperProps,
-      popperType,
-      icon: Icon,
-      size
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    showText,
+    popperProps,
+    popperType,
+    icon: Icon,
+    size,
+    ...rest
+  } = props;
   const {
     locale,
     changeLocale,
     languages
-  } = (0, _react.useContext)(_context.LocaleContext);
-  const anchorEl = (0, _react.useRef)(null);
-  const [open, setOpen] = (0, _react.useState)(false);
-  const theme = (0, _Theme.useTheme)();
-  const dark = (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.mode) === 'dark';
+  } = useContext(LocaleContext);
+  const anchorEl = useRef(null);
+  const [open, setOpen] = useState(false);
+  const theme = useTheme();
+  const dark = theme?.palette?.mode === 'dark';
   const onSelect = newLocale => {
     changeLocale(newLocale);
     setOpen(false);
@@ -55,13 +38,12 @@ function LocaleSelector(props) {
     }
   };
   const onClose = e => {
-    var _anchorEl$current;
-    if ((_anchorEl$current = anchorEl.current) !== null && _anchorEl$current !== void 0 && _anchorEl$current.contains(e.target)) {
+    if (anchorEl.current?.contains(e.target)) {
       return;
     }
     setOpen(false);
   };
-  const ButtonComponent = showText ? _material.Button : _material.IconButton;
+  const ButtonComponent = showText ? Button : IconButton;
   const handleEventProps = popperType === 'hover' ? {
     onMouseEnter: () => {
       setOpen(true);
@@ -74,89 +56,131 @@ function LocaleSelector(props) {
       setOpen(!open);
     }
   };
-  const renderIcon = (0, _react.useMemo)(() => {
+  const renderIcon = useMemo(() => {
     if (Icon) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {});
+      return /*#__PURE__*/_jsx(Icon, {});
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-      icon: _language.default,
+    return /*#__PURE__*/_jsx(IconifyIcon, {
+      icon: LanguageIcon,
       fontSize: size,
       style: {
         transform: 'scale(1.10)'
       }
     });
   }, [Icon, size]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Div, {
     component: "div",
     dark: dark,
-    theme: theme
-  }, rest), handleEventProps), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonComponent, {
+    theme: theme,
+    ...rest,
+    ...handleEventProps,
+    children: [/*#__PURE__*/_jsx(ButtonComponent, {
       ref: anchorEl,
       className: "trigger",
       role: "button",
       "aria-label": "Locale selector button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         alignItems: "center",
-        children: [renderIcon, showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [renderIcon, showText ? /*#__PURE__*/_jsx(Typography, {
           component: "strong",
           className: "trigger-text",
           children: languages.find(x => x.code === locale).name
         }) : '']
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, _objectSpread(_objectSpread({
+    }), /*#__PURE__*/_jsx(StyledPopper, {
       open: open,
-      anchorEl: anchorEl.current
-    }, popperProps), {}, {
+      anchorEl: anchorEl.current,
+      ...popperProps,
       disablePortal: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/_jsx("div", {
         className: "locales",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
           onClickAway: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuList, {
-            children: languages.map(_ref => {
-              let {
-                code,
-                name
-              } = _ref;
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-                className: "locale-item",
-                onClick: () => onSelect(code, name),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-                  icon: _check.default,
-                  className: code === locale ? 'check-icon check-icon-visible' : 'check-icon'
-                }), name]
-              }, code);
-            })
+          children: /*#__PURE__*/_jsx(MenuList, {
+            children: languages.map(({
+              code,
+              name
+            }) => /*#__PURE__*/_jsxs(MenuItem, {
+              className: "locale-item",
+              onClick: () => onSelect(code, name),
+              children: [/*#__PURE__*/_jsx(IconifyIcon, {
+                icon: CheckIcon,
+                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon'
+              }), name]
+            }, code))
           })
         })
       })
-    }))]
-  }));
+    })]
+  });
 }
 LocaleSelector.propTypes = {
-  size: _propTypes.default.number,
-  showText: _propTypes.default.bool,
-  popperProps: _propTypes.default.object,
-  onChange: _propTypes.default.func,
-  popperType: _propTypes.default.oneOf(['hover', 'click']),
-  icon: _propTypes.default.any
+  size: PropTypes.number,
+  showText: PropTypes.bool,
+  popperProps: PropTypes.object,
+  onChange: PropTypes.func,
+  popperType: PropTypes.oneOf(['hover', 'click']),
+  icon: PropTypes.any
 };
 LocaleSelector.defaultProps = {
   showText: true,
   size: 24,
   popperProps: {},
-  onChange: _noop.default,
+  onChange: noop,
   popperType: 'click',
   icon: null
 };
-const Div = (0, _Theme.styled)('div', {
+const Div = styled('div', {
   shouldForwardProp: prop => prop !== 'dark'
-})(_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    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0px 8px 16px 0px ", ", 0px 0px 0px 1px ", ";\n    border-radius: 8px;\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), _Colors.temp.gray6, _Colors.temp.gray6, props => (0, _Util.getColor)(props));
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n"])), _ref2 => {
-  let {
-    theme
-  } = _ref2;
+})`
+  display: inline-block;
+
+  .trigger {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 14px;
+    white-space: nowrap;
+
+    .trigger-text {
+      margin-left: 5px;
+      font-size: 14px;
+      color: ${props => getColor(props)};
+    }
+  }
+
+  .locales {
+    background: ${props => getBackground(props)};
+    box-shadow: 0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6};
+    border-radius: 8px;
+  }
+
+  .locale-item {
+    font-size: 16px;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: 2px;
+    text-align: center;
+    color: ${props => getColor(props)};
+    cursor: pointer;
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    .check-icon {
+      visibility: hidden;
+      margin-right: 4px;
+    }
+    .check-icon-visible {
+      visibility: visible;
+    }
+  }
+`;
+const StyledPopper = styled(Popper)`
+  z-index: ${({
+  theme
+}) => {
   return theme.zIndex.tooltip + 10;
-});
+}};
+`;

package/lib/Locale/util.js

@@ -1,22 +1,13 @@
-"use strict";
+import get from 'lodash/get';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.translate = exports.t = exports.replace = void 0;
-var _get = _interopRequireDefault(require("lodash/get"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable no-prototype-builtins */
-const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
-exports.replace = replace;
-const translate = exports.translate = function translate(translations, key, locale) {
-  let fallbackLocale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'en';
-  let data = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+export const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
   const translation = translations[locale];
-  const translationValue = (0, _get.default)(translation, key);
-  const fallbackValue = (0, _get.default)(translations[fallbackLocale], key);
+  const translationValue = get(translation, key);
+  const fallbackValue = get(translations[fallbackLocale], key);
   if (!translation || !translationValue) {
-    console.warn("Warning: no ".concat(key, " translation of ").concat(locale));
+    console.warn(`Warning: no ${key} translation of ${locale}`);
     if (fallbackLocale && fallbackValue) {
       return replace(fallbackValue, data);
     }
@@ -27,4 +18,4 @@ const translate = exports.translate = function translate(translations, key, loca
   }
   return replace(translationValue, data);
 };
-const t = exports.t = translate;
+export const t = translate;